Merge pull request #16 from oxedom/enhance/2

Enhance/2

client/components/DataManager.jsx

@@ -0,0 +1,65 @@
+import Button from "./Button";
+import { useRecoilValue,  } from "recoil";
+import {  selectedRoiState } from "./states";
+const DataManger = () => {
+
+    const selectedRois = useRecoilValue(selectedRoiState);
+
+
+
+    function handleJson() {
+
+        const beforeExport = 
+        {
+            title: 'Parkerr.org',
+            repo: 'https://github.com/oxedom/parker',
+            timeOfExport: Date.now(),
+            rois: selectedRois
+        }
+
+  // Convert the data object to JSON
+     const jsonData = JSON.stringify(beforeExport);
+  // Create a Blob with the JSON data
+     const blob = new Blob([jsonData], { type: 'application/json' });
+  // Create a temporary URL for the Blob
+     const url = URL.createObjectURL(blob);
+  // Create a link element
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = 'exported_data.json';
+  // Simulate a click on the link element to trigger the file download
+    link.click();
+  // Clean up the temporary URL
+    URL.revokeObjectURL(url);
+    }
+    function handleCsv() {}
+
+
+    return ( <>
+
+        <div className="bg-black/60 backdrop-blur-sm pb-3 px-5  flex flex-col max-w-[500px]" >
+        <h2 className="  text-center text-3xl text-white pt-2 border-b border-orange-500 pb-1" > Data manger </h2>
+        <p className="text-white text-xl pt-4 "> Selection boxes keep track of events that occur, export that data 
+        locally to perform your own data exploration.
+        </p>
+
+        <div className="flex flex-col items-center mt-10 gap-y-2">
+        <h1 className="text-white text-2xl "> Export as </h1>
+            <div className="flex justify-center items-center gap-5 ">
+
+            <Button onClick={handleJson}> <span className="text-lg"> JSON</span> </Button>
+            {/* <Button> <span className="text-lg"> CSV </span> </Button> */}
+            </div>
+        </div>
+
+
+        </div>
+
+
+
+        </>
+
+     );
+}
+
+export default DataManger;

client/components/Modal.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import Button from "./Button";
+const Modal = ({ isOpen, closeModal, children }) => {
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div className="fixed top-1/2  -translate-y-1/2 flex items-center  z-[99999] justify-center bg-black bg-opacity-50">
+      <div className="bg-filler p-3  rounded-xl ">
+        {children}
+
+
+        <Button  intent="destructive"  className="mt-2 "         onClick={closeModal}> <span className="text-lg "> Close Modal </span> </Button>
+
+      </div>
+    </div>
+  );
+};
+
+export default Modal;

client/components/RoisFeed.jsx

@@ -1,18 +1,22 @@
 import { selectedRoiState } from "./states";
 import { useRecoilValue, useRecoilState } from "recoil";
-import { imageHeightState, evaluateTimeState, autoDetectState } from "./states";
+import { imageHeightState, autoDetectState } from "./states";
 import deleteIcon from "../public/static/icons/delete_bin_black.png";
 import Image from "next/image";
 import Accordion from "./Accordion";
 import Button from "./Button";
 
-import { formatDistanceToNow } from "date-fns";
 
-const RoisFeed = ({}) => {
+
+const RoisFeed = ({openModal}) => {
   const [selectedRegions, setSelectedRois] = useRecoilState(selectedRoiState);
   const [autoDetect, setAutoDetect] = useRecoilState(autoDetectState);
   const imageHeight = useRecoilValue(imageHeightState);
-  const evaluateTime = useRecoilValue(evaluateTimeState);
+
+
+
+
+
 
   function handleDeleteAll() {
     if (selectedRegions.length === 0) {
@@ -59,63 +63,16 @@ const RoisFeed = ({}) => {
     }
   };
 
-  const handleImport = () => {
-    let condition = true;
-    if (selectedRegions.length > 0) {
-      condition = confirm("Are you sure you want to overright marked regions?");
-    }
-    if (condition) {
-      let action = {
-        event: "importSelected",
-        payload: null,
-      };
-      setSelectedRois(action);
-    }
-  };
-
-  const handleSave = () => {
-    let parsed = JSON.parse(localStorage.getItem("selections"));
-    console.log(parsed);
-    let condition = true;
-    if (parsed.selectedRegions.length > 0) {
-      condition = confirm(
-        `Are you sure you want to overwrite selected regions? Last save was ${formatDistanceToNow(
-          parsed.savedDate
-        )}`
-      );
-    }
-
-    if (condition) {
-      let saveObj = {
-        selectedRegions,
-        savedDate: Date.now(),
-      };
-      let selections = JSON.stringify(saveObj);
-      localStorage.setItem("selections", selections);
-    }
-  };
 
-  function printDate(time, evaluateTime) {
-    //MS MILAsecoudns
-    //S secounds
-    //M Minutes
-
-    let diff_ms = Math.floor(Date.now() - time);
-    let diff_s = Math.floor(diff_ms / 1000);
-    let diff_m = Math.floor(diff_s / 60);
-    let diff_h = Math.floor(diff_ms / 60);
-    if (diff_s < 60) {
-      return `${diff_s} secounds`;
-    }
-    if (diff_s < 3600) {
-      return `${diff_m} mintues`;
-    }
-    if (diff_s > 3600) {
-      return `${diff_h} hours`;
-    }
+  function handleMangeData() {
+    openModal()
   }
 
+
+
   return (
+    <>
+
     <div
       className={`w-[200px] bg-black/60 backdrop-blur-sm rounded-xl justify-between min-h-[${imageHeight}px]`}
     >
@@ -128,29 +85,18 @@ const RoisFeed = ({}) => {
 
             <Button onClick={handleAutoDetect}>Auto Detect</Button>
 
-            <div className="grid grid-cols-2 gap-2 place-content-between ">
-              <Button
-                className={`
-             hover:cursor-pointer drop-shadow
-            font-bold border-white border rounded   shadow-black
-              bg-white cursor-pointer text-slate-800"
-        `}
-                onClick={handleSave}
-              >
-                Save
-              </Button>
-
+
               <Button
                 className={`
              hover:cursor-pointer drop-shadow
             font-bold border-white border rounded  shadow-black
             bg-white cursor-pointer text-slate-800"
         `}
-                onClick={handleImport}
+                onClick={handleMangeData}
               >
-                Import
+                Manage Data
               </Button>
-            </div>
+
           </div>
           <div></div>
         </Accordion>
@@ -198,6 +144,7 @@ const RoisFeed = ({}) => {
         </div>
       </div>
     </div>
+    </>
   );
 };
 

client/pages/vision.js

@@ -5,7 +5,8 @@ import { useEffect, useRef, useState } from "react";
 import Toolbar from "../components/Toolbar";
 import DashboardLayout from "../layouts/DashboardLayout";
 import Head from "next/head";
-
+import DataManger from "../components/DataManager";
+import Modal from "../components/Modal";
 import VisionHeader from "../components/VisionHeader";
 import VisionFooter from "../components/VisionFooter";
 import { createEmptyStream } from "../libs/webRTC_utility";
@@ -38,6 +39,18 @@ export default function VisionPage() {
   const selectedRois = useRecoilValue(selectedRoiState);
   const [imageWidth, setImageWidth] = useRecoilState(imageWidthState);
   const [imageHeight, setImageHeight] = useRecoilState(imageHeightState);
+  const [isOpen, setIsOpen] = useState(false)
+
+  function closeModal() 
+  {
+    setIsOpen(false)
+  }
+
+  function openModal() 
+  {
+    setIsOpen(true)
+  }
+
 
   useEffect(() => {
     if (remoteRef.current != null) {
@@ -84,6 +97,11 @@ export default function VisionPage() {
       <Head>
         <title>Parkerr: Vision</title>
       </Head>
+      <Modal isOpen={isOpen} closeModal={closeModal}>
+    <DataManger/>
+    </Modal>
+
+
 
       <div className="flex flex-col">
         <div className="flex flex-col items-center justify-center gap-4 rounded-lg">
@@ -142,7 +160,7 @@ export default function VisionPage() {
               ></ClientRender>
               <VisionFooter />
             </div>
-            <RoisFeed />
+            <RoisFeed openModal={openModal} />
           </div>
         </div>
       </div>

legacy-code/legacy_frontend/Modal.jsx

@@ -7,7 +7,7 @@ const Modal = ({ isOpen, closeModal, children }) => {
 
   return (
     <div
-      className="fixed p-10 top-20 left-0 right-0 bottom-0 bg-gray-500 bg-opacity-75 z-10"
+      className="fixed p-10 top-20 left-0 right-0 bottom-0 bg-gray-100 bg-opacity-75 z-10"
       onClick={closeModal}
     >
       {children}