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/SignComponent.tsx
+++ b/frontend/src/components/SignComponent.tsx
@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Sign } from '../types/sign';
+
+interface Props {
+    sign: Sign;
+    deleteSign: (id: number) => void;
+}
+
+const SignComponent: React.FC<Props> = ({ sign, deleteSign }) => {
+    const navigate = useNavigate();
+
+    const [showDeletePopup, setShowDeletePopup] = useState(false);
+
+    const onClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        e.preventDefault();
+        navigate(`/signs/${sign.id}`);
+    };
+
+    const handleDeleteClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setShowDeletePopup(true);
+    };
+
+    const handleConfirmDeleteClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        deleteSign(sign.id);
+        setShowDeletePopup(false);
+    };
+
+    const handleCancelDeleteClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setShowDeletePopup(false);
+    };
+
+    return (
+        <div className="relative bg-white p-6 rounded-lg shadow-md" onClick={onClick}>
+            {showDeletePopup && (
+                <div className="fixed inset-0 bg-gray-700 bg-opacity-50 flex justify-center items-center z-10">
+                    <div className="bg-white p-6 rounded-lg shadow-md">
+                        <p className="text-lg font-medium mb-4">Are you sure you want to delete this sign?</p>
+                        <div className="flex justify-end">
+                            <button className="bg-gray-500 text-white px-4 py-2 rounded-md mr-2" onClick={handleCancelDeleteClick}>
+                                Cancel
+                            </button>
+                            <button className="bg-red-500 text-white px-4 py-2 rounded-md" onClick={handleConfirmDeleteClick}>
+                                Delete
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            )}
+            <button className="absolute top-2 right-2" onClick={handleDeleteClick}>
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+            </button>
+            <h1 className="text-2xl font-medium">{sign.name}</h1>
+            <p className="text-lg font-medium">Total video's: {sign.sign_videos.length}</p>
+            <p className="text-lg font-medium">Approved video's: {sign.sign_videos.filter((t) => t.approved).length}</p>
+        </div>
+    );
+};
+
+export default SignComponent;