Added data download ability

frontend/src/components/LoginPage.tsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import { login } from '../services/login';
+import { useNavigate } from "react-router-dom";
+
+const Login: React.FC = () => {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState('');
+    const [loading, setLoading] = useState(false);
+    let navigate = useNavigate();
+
+    const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+        event.preventDefault();
+        setLoading(true);
+        try {
+            await login(email, password);
+            // redirect the user to the / page
+            navigate('/');
+
+
+        } catch (e: any) {
+            setError(e.message);
+        }
+        setLoading(false);
+    };
+
+    return (
+        <div className="bg-gray-200 h-screen flex items-center justify-center">
+            <form onSubmit={handleSubmit} className="bg-white p-6 rounded-lg shadow-md">
+                <h1 className="text-lg font-medium mb-4">Login</h1>
+                <div className="mb-4">
+                    <label className="block text-gray-700 font-medium mb-2">Email</label>
+                    <input
+                        className="border border-gray-400 p-2 rounded-lg w-full"
+                        type="email"
+                        value={email}
+                        onChange={(event) => setEmail(event.target.value)}
+                        required
+                    />
+                </div>
+                <div className="mb-4">
+                    <label className="block text-gray-700 font-medium mb-2">Password</label>
+                    <input
+                        className="border border-gray-400 p-2 rounded-lg w-full"
+                        type="password"
+                        value={password}
+                        onChange={(event) => setPassword(event.target.value)}
+                        required
+                    />
+                </div>
+                <div>
+                    {error && <p className="text-red-500">{error}</p>}
+                </div>
+                <button className="bg-indigo-500 text-white py-2 px-4 rounded-lg hover:bg-indigo-600" disabled={loading}>
+                    {loading ? 'Loading...' : 'Login'}
+                </button>
+            </form>
+        </div>
+    );
+
+};
+
+export default Login;

frontend/src/components/ProtectedRoute.tsx

@@ -0,0 +1,29 @@
+import { Navigate } from 'react-router-dom';
+
+const ProtectedRoute: React.FC<{ children: JSX.Element }> = ({ children }) => {
+    // check if user is logged in by checking local storage
+    const isLoggedIn = localStorage.getItem('accessToken');
+
+    // check if the token is expired
+    if (isLoggedIn) {
+        const expired_at = new Date(localStorage.getItem('expirationDate') || '');
+        if (expired_at < new Date()) {
+            localStorage.removeItem('accessToken');
+            localStorage.removeItem('expirationDate');
+            return <Navigate to="/login" />;
+        }
+    }
+
+
+
+    if (!isLoggedIn) {
+        return <Navigate to="/login" />;
+    }
+    return (
+
+        children
+
+    );
+}
+
+export default ProtectedRoute;

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;

frontend/src/components/SignDetailPage.tsx

@@ -0,0 +1,187 @@
+import React, { useState, useRef, useEffect, ChangeEvent } from 'react';
+import { Sign, SignVideo } from '../types/sign';
+import { useParams } from 'react-router-dom';
+import { getSign } from '../services/signs';
+import ReactModal from 'react-modal';
+import { acceptVideo, deleteVideo, uploadSignVideo } from '../services/signvideos';
+import { LoadingButton } from './loading-button/loading-button';
+import VideoRecorder from 'react-video-recorder';
+import SignVideoGrid from './SignVideoGrid';
+import SignVideoPlayer from './SignVideoPlayer';
+
+interface Props {
+    sign?: Sign;
+}
+
+type Params = {
+    id: string;
+}
+
+const SignDetailpage: React.FC<Props> = (props) => {
+
+    const [sign, setSign] = useState<Sign | null>(props.sign || null);
+
+    const [recordedBlob, setRecordedBlob] = useState<Blob | null>(null);
+    const signVideoRef = useRef<HTMLVideoElement>(null);
+
+    const popupVideoRef = useRef<HTMLVideoElement>(null);
+    const [popUpShown, setPopUpShown] = useState(false);
+
+    const [uploadProgress, setUploadProgress] = useState<number | null>(null);
+    const [videoUrl, setVideoUrl] = useState<string | null>(null);
+
+    const [currentVideo, setCurrentVideo] = useState<number | null>(null);
+
+    useEffect(() => {
+        if (recordedBlob) {
+            setVideoUrl(URL.createObjectURL(recordedBlob));
+            setPopUpShown(true);
+        } else {
+            setVideoUrl(null);
+        }
+    }, [recordedBlob]);
+
+    const handleUploadProgress = (progess: number) => {
+        if (progess) {
+            setUploadProgress(progess);
+        }
+    }
+
+    const acceptSignVideo = (approved: boolean) => {
+        // update the sign video in the sign
+        if (sign != null && currentVideo != null) {
+            console.log('accepting video');
+
+            acceptVideo(sign.id, sign.sign_videos[currentVideo].id, approved).then((response) => {
+                const newSign = { ...sign };
+                const newSignVideo = { ...newSign.sign_videos[currentVideo] };
+                newSignVideo.approved = approved;
+                newSign.sign_videos[currentVideo] = newSignVideo;
+                setSign(newSign);
+            });
+        }
+    }
+
+    const deleteSignVideo = () => {
+        deleteVideo(sign!.id, sign!.sign_videos[currentVideo!].id).then((response) => {
+            const newSign = { ...sign! };
+            newSign.sign_videos.splice(currentVideo!, 1);
+            setSign(newSign);
+            setCurrentVideo(null);
+        });
+    }
+
+
+    const handleUpload = async () => {
+        setUploadProgress(0);
+        uploadSignVideo(sign!.id, recordedBlob!, handleUploadProgress).then((response) => {
+            setUploadProgress(100);
+            // add the new sign video to the sign
+            console.log(response)
+            const newSign = { ...sign! };
+
+            newSign.sign_videos.push(response);
+            setSign(newSign);
+        }).catch((error) => {
+            setUploadProgress(null);
+        }
+        );
+    }
+
+    // get the sign id param
+    const { id } = useParams<Params>();
+
+    useEffect(() => {
+        if (signVideoRef.current) {
+            signVideoRef.current.play();
+        }
+    }, []);
+
+    useEffect(() => {
+        // if no sign given, get the sign
+        if (!sign) {
+            getSign(parseInt(id || '-1')).then((sign) => {
+                setSign(sign);
+            });
+        }
+    }, [id]);
+
+    const dismissPopup = () => {
+        setPopUpShown(false);
+        // remove the recorded blob
+        setRecordedBlob(null);
+    };
+
+    return (
+        <div>
+
+            {
+                sign ?
+                    <div className="flex">
+
+                        <div className="w-1/2">
+                            <video loop controls width='100%' height='100%'>
+                                <source src={sign.video_url} type='video/mp4' />
+                            </video>
+                        </div>
+
+                        <div className="w-1/2">
+                            {currentVideo == null ?
+                                <VideoRecorder
+                                    countdownTime={3000}
+                                    onRecordingComplete={(blob) => {
+                                        setRecordedBlob(blob)
+                                    }}
+
+                                    timeLimit={4000}
+                                /> :
+                                <SignVideoPlayer sign_id={sign.id} sign_video={sign.sign_videos[currentVideo]} approveSignVideo={acceptSignVideo} deleteSignVideo={deleteSignVideo} />
+                            }
+                        </div>
+
+                    </div > : <div>Loading...</div>
+            }
+            <div>
+                <button onClick={() => {
+                    window.location.href = '/';
+                }} className="bg-white p-2 rounded-full text-red-600 hover:bg-red-600 hover:text-white absolute top-1 left-1">
+                    <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+                    </svg>
+                </button>
+            </div>
+            <ReactModal
+                isOpen={popUpShown}
+                shouldCloseOnOverlayClick={false}
+                className="modal bg-white rounded-3xl bg-gray-300 p-7"
+                ariaHideApp={false}
+                style={{
+                    content: {
+
+                        position: "absolute",
+                        top: '50%',
+                        left: '50%',
+                        transform: 'translate(-50%, -50%)',
+                    },
+                }}
+            >
+                {videoUrl &&
+                    <div>
+                        <video key="vid" ref={popupVideoRef} src={videoUrl!} controls loop className="pb-4" />
+                        <LoadingButton title="Upload" onClick={handleUpload} progress={uploadProgress} />
+                    </div>
+                }
+                <button onClick={dismissPopup} className="bg-white p-2 rounded-full text-red-600 hover:bg-red-600 hover:text-white absolute top-1 right-1">
+                    <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
+            </ReactModal>
+
+            <SignVideoGrid currentVideo={currentVideo} sign={sign} setCurrentVideo={setCurrentVideo} />
+        </div>
+    );
+};
+
+
+export default SignDetailpage;

frontend/src/components/SignVideoGrid.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from 'react';
+import { getSigns, addSign } from '../services/signs';
+import { Sign, SignVideo } from '../types/sign';
+import SignComponent from './SignComponent';
+import SignVideoThumbnail from './SignVideoThumbnail';
+
+interface Props {
+    sign: Sign | null;
+    currentVideo: number | null;
+    setCurrentVideo: (sign_video: number | null) => void;
+}
+
+const SignVideoGrid: React.FC<Props> = ({ sign, setCurrentVideo, currentVideo }) => {
+
+    const [isHovered, setIsHovered] = React.useState(false);
+
+    const handleVideoClick = (sign_video: number) => {
+        setCurrentVideo(sign_video);
+    }
+
+    return (
+        <div className="grid grid-flow-col auto-cols-max gap-5 mt-5" >
+            {sign != null &&
+                <div className={`rounded-lg w-60 h-32 ${isHovered ? 'bg-gray-300' : 'bg-gray-200'} flex items-center justify-center ${isHovered ? 'text-6xl' : 'text-4xl'}`} onMouseEnter={() => {
+                    setIsHovered(true);
+                }}
+                    onMouseLeave={() => {
+                        setIsHovered(false);
+                    }} onClick={
+                        () => {
+                            setCurrentVideo(null);
+                        }
+                    }>
+                    <i className={`fas fa-camera ${isHovered ? 'text-6xl' : 'text-4xl'}`}></i>
+                </div>
+            }
+            {sign &&
+                sign.sign_videos.map((vid, i) => <SignVideoThumbnail selected={currentVideo == i} sign_id={sign.id} sign_video={vid} handle_play={() => handleVideoClick(i)} />)
+            }
+        </div >
+    );
+};
+
+export default SignVideoGrid;

frontend/src/components/SignVideoPlayer.tsx

@@ -0,0 +1,97 @@
+import React, { useEffect, useState } from 'react';
+import ReactPlayer from 'react-player';
+import { getSigns, addSign } from '../services/signs';
+import { getVideo } from '../services/signvideos';
+import { Sign, SignVideo } from '../types/sign';
+import SignComponent from './SignComponent';
+import SignVideoThumbnail from './SignVideoThumbnail';
+import { Video } from 'react-video-stream'
+
+
+interface Props {
+    sign_id: number;
+    sign_video: SignVideo;
+    approveSignVideo: (approve: boolean) => void;
+    deleteSignVideo: () => void;
+}
+
+const SignVideoPlayer: React.FC<Props> = ({ sign_id, sign_video, approveSignVideo, deleteSignVideo }) => {
+    const [videoBlob, setVideoBlob] = useState<string | null>(null)
+    const [showConfirm, setShowConfirm] = useState(false);
+
+    useEffect(() => {
+        getVideo(sign_id, sign_video.id).then((response) => {
+            setVideoBlob(URL.createObjectURL(response))
+        })
+    }, []);
+
+    const handleClick = () => {
+        approveSignVideo(!sign_video.approved)
+    }
+
+    const handleDeleteClick = () => {
+        setShowConfirm(true);
+    }
+
+    const handleConfirmDelete = () => {
+        setShowConfirm(false);
+        deleteSignVideo();
+    }
+
+    useEffect(() => {
+        getVideo(sign_id, sign_video.id).then((response) => {
+            setVideoBlob(URL.createObjectURL(response))
+        })
+    }, [sign_video]);
+
+    return (
+        <div className="flex flex-col items-center">
+            {videoBlob ?
+                <div>
+
+                    <video src={videoBlob} controls className="w-full" />
+
+                    <div className="flex justify-between">
+                        <button
+                            className={`relative mt-4 ${sign_video.approved ? "bg-red-500" : "bg-green-500"} w-full text-white font-bold py-2 px-4 rounded-full transition-transform duration-200 transform hover:-translate-y-1 hover:scale-105 
+                           `}
+                            onClick={handleClick}
+                        >
+                            {!sign_video.approved ? "Accept video" : "Reject video"}
+                        </button>
+                        <button
+                            className={`relative mt-4 text-white font-bold py-2 px-4 rounded-full transition-transform duration-200 transform hover:-translate-y-1 hover:scale-105 bg-red-500 `}
+                            onClick={handleDeleteClick}
+                        >
+                            <svg viewBox="0 0 24 24" width="24" height="24" className="fill-current">
+                                <path fill="none" d="M0 0h24v24H0V0z" />
+                                <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+                :
+                <div>Loading...</div>
+            }
+
+            {showConfirm &&
+                <div className="fixed top-0 left-0 right-0 bottom-0 z-10 flex justify-center items-center">
+                    <div className="bg-white rounded-lg p-6">
+                        <div className="text-center text-lg mb-4">Are you sure you want to delete this video?</div>
+                        <div className="flex justify-between">
+                            <button className="bg-red-500 text-white px-4 py-2 rounded-lg" onClick={handleConfirmDelete}>
+                                Delete
+                            </button>
+                            <button className="bg-gray-500 text-white px-4 py-2 rounded-lg" onClick={() => setShowConfirm(false)}>
+                                Cancel
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            }
+        </div >
+    );
+};
+
+export default SignVideoPlayer;
+

frontend/src/components/SignVideoThumbnail.tsx

@@ -0,0 +1,61 @@
+import React, { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Sign, SignVideo } from '../types/sign';
+import { getThumbail } from '../services/signvideos';
+
+interface Props {
+    sign_id: number;
+    sign_video: SignVideo;
+    selected: boolean;
+    handle_play: () => any;
+}
+
+const SignVideoThumbnail: React.FC<Props> = ({ sign_id, sign_video, handle_play, selected }) => {
+    const [blob, setBlob] = React.useState<Blob | null>(null);
+    const [isHovered, setIsHovered] = React.useState(false);
+
+    useEffect(() => {
+        getThumbail(sign_id, sign_video.id).then((response) => {
+            setBlob(response);
+        });
+    }, []);
+
+    return (
+        <div>
+            {blob &&
+                <div className="video-thumbnail" onClick={handle_play}
+                    style={{ position: "relative", opacity: selected ? 0.5 : 1, cursor: "pointer" }}
+                    onMouseEnter={() => {
+                        setIsHovered(true);
+                    }}
+                    onMouseLeave={() => {
+                        setIsHovered(false);
+                    }}
+                >
+                    <img className={`rounded-lg w-60 h-32 object-cover border-4 ${sign_video.approved ? " border-emerald-700" : "border-orange-500"}`} src={URL.createObjectURL(blob)} />
+                    <div className="play-btn" style={{
+                        position: "absolute",
+                        top: "50%",
+                        left: "50%",
+                        transform: `translate(-50%, -50%) scale(${isHovered ? 1.5 : 1})`,
+                        background: "rgba(255, 255, 255, 0.7)",
+                        borderRadius: "50%",
+                        width: "50px",
+                        height: "50px",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center"
+                    }}
+                    >
+                        <svg viewBox="0 0 24 24" width="24" height="24">
+                            <path fill="none" d="M0 0h24v24H0V0z" />
+                            <path d="M8 5v14l11-7z" />
+                        </svg>
+                    </div>
+                </div>
+            }
+        </div>
+    );
+};
+
+export default SignVideoThumbnail;

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;

frontend/src/components/button/button.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export interface ButtonProps {
+    className?: string;
+}
+
+export const Button: React.FC<ButtonProps> = ({ className = '' }) => (
+    <div className={className}>Button</div>
+);

frontend/src/components/loading-button/loading-button.tsx

@@ -0,0 +1,54 @@
+import React, { useState, useEffect } from 'react';
+
+export interface LoadingButtonProps {
+    className?: string;
+    progress: number | null;
+    onClick: () => any;
+    title?: string;
+}
+
+export const LoadingButton: React.FC<LoadingButtonProps> = ({ className = '', onClick, progress, title = "Click me" }) => {
+    const [loading, setLoading] = useState(false);
+
+    useEffect(() => {
+        if (progress && progress >= 100) {
+            setLoading(false);
+        }
+    }, [progress])
+
+    const handleClick = () => {
+        setLoading(true);
+        onClick();
+    };
+
+    return (
+        <div className="relative">
+            <button
+                className={`relative bg-blue-500 hover:bg-blue-700 w-full text-white font-bold py-2 px-4 rounded-full transition-transform duration-200 transform hover:-translate-y-1 hover:scale-105 ${loading ? "cursor-not-allowed" : ""
+                    }`}
+                onClick={handleClick}
+                disabled={loading}
+                style={{
+                    whiteSpace: "nowrap",
+                    textOverflow: "ellipsis",
+                    overflow: "hidden", display: 'inline-block', border: '0px solid black'
+                }}
+            >
+                <span className={`text-center z-10 ${loading ? "opacity-50" : ""}`}>
+                    {loading ? `${progress}%` : `${title}`}
+                </span>
+                <div
+                    className={`absolute h-full transition-width duration-500`}
+                    style={{
+                        width: `${progress}%`,
+                        backgroundColor: "blue",
+                        top: 0,
+                        left: 0,
+                        zIndex: "-1"
+                    }}
+                ></div>
+            </button>
+        </div>
+    );
+};
+