Added data download ability

2023-02-19 21:10:00 +00:00
parent 48f080de7c
commit c850726f91
64 changed files with 12734 additions and 2 deletions
--- a/frontend/src/components/SignsPage.tsx
+++ b/frontend/src/components/SignsPage.tsx
@@ -0,0 +1,89 @@
+import React, { useEffect, useState } from 'react';
+import { getSigns, addSign, downloadSigns, deleteSign } from '../services/signs';
+import { Sign } from '../types/sign';
+import SignComponent from './SignComponent';
+
+
+const SignsPage: React.FC = () => {
+    const [signs, setSigns] = useState<Sign[]>([]);
+    const [newSign, setNewSign] = useState('');
+    const [newSignError, setNewSignError] = useState<string | null>(null);
+    const [loading, setLoading] = useState(true);
+
+    const handleAddSign = async () => {
+        addSign(newSign).then((sign) => {
+            setSigns([...signs, sign]);
+            setNewSign('');
+            setNewSignError(null);
+        }).catch((error) => {
+            setNewSignError(error.message);
+        });
+    };
+
+    const handleDownloadData = async () => {
+        downloadSigns().then((blob: Blob) => {
+            const url = window.URL.createObjectURL(blob);
+            const link = document.createElement('a');
+            link.href = url;
+            link.setAttribute('download', 'data.zip');
+            document.body.appendChild(link);
+            link.click();
+            link.remove();
+        }).catch((error: Error) => {
+            console.log(error);
+        });
+
+    };
+
+    const handleDeleteSign = async (id: number) => {
+        deleteSign(id).then(() => {
+            setSigns(signs.filter((sign) => sign.id !== id));
+        });
+    };
+
+
+    useEffect(() => {
+        // get the signs from the api
+        getSigns().then((signs) => {
+            console.log(signs)
+            setSigns(signs);
+            setLoading(false);
+        });
+    }, []);
+
+    return (
+        <div className="flex flex-col items-left bg-gray-100 min-h-screen">
+            <div className="bg-white p-6 rounded-lg shadow-md">
+                <div className="mb-4">
+                    <input
+                        className="border border-gray-400 p-2 rounded-lg w-full"
+                        type="text"
+                        value={newSign}
+                        onChange={(event) => setNewSign(event.target.value)}
+                        placeholder="Enter sign url"
+                    />
+                </div>
+                <button className="bg-indigo-500 text-white py-2 px-4 rounded-lg hover:bg-indigo-600" onClick={handleAddSign}>
+                    Add Sign
+                </button>
+                <button className="bg-indigo-500 text-white py-2 px-4 rounded-lg hover:bg-indigo-600 ml-2" onClick={handleDownloadData}>
+                    Download Data
+                </button>
+            </div>
+            {newSignError && <p className="text-red-500">{newSignError}</p>}
+
+            {!loading ?
+                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-5 mt-5">
+                    {
+                        signs.map((sign) => <SignComponent deleteSign={handleDeleteSign} key={sign.id} sign={sign} />)
+                    }
+                </div>
+
+                :
+                <p>Loading...</p>
+            }
+        </div>
+    );
+};
+
+export default SignsPage;