Merge pull request #121 from HyperloopUPV-H8/ethernet-view/logloader

[ethernet-view] LogLoader

Author: andresdlt03

ethernet-view/package-lock.json

@@ -32,7 +32,8 @@
         "vite-plugin-svgr": "^2.4.0",
         "vite-tsconfig-paths": "^4.0.5",
         "zustand": "^4.4.6",
-        "zustymiddleware": "^1.2.0"
+        "zustymiddleware": "^1.2.0",
+        "zustymiddlewarets": "^1.4.2"
     },
     "devDependencies": {
         "@testing-library/jest-dom": "^5.16.5",

ethernet-view/package.json

@@ -12,7 +12,8 @@
     &Text {
         font-weight: styles.$normal-font-weight;
         font-size: styles.$normal-font-size;
-        color: styles.$alternate-text-color
+        color: styles.$alternate-text-color;
+        font-family: styles.$code-font;
     }
 
     &.Active {

ethernet-view/src/assets/svg/folder-closed.svg

@@ -1,43 +1,39 @@
 import { useState } from "react";
-import { LogSession, UploadInformation, UploadState } from "../LogLoader";
+import { UploadInformation, UploadState } from "../LogLoader";
 import styles from "./Dropzone.module.scss"
 import { extractLoggerSession } from "../LogsProcessor";
 import { Controls } from "./Controls/Controls";
 import { useDropzone } from "./useDropzone";
+import { LogSession, useLogStore } from "pages/LoggerPage/useLogStore";
 
-interface Props {
-    uploadInformation: UploadInformation;
-    setUploadInformation: (newUploadInformation: UploadInformation) => void;
-    addLogSession: (logSession: LogSession) => void;
-}
-
-export const Dropzone = ({uploadInformation, setUploadInformation, addLogSession}: Props) => {
+export const Dropzone = () => {
 
+    const [uploadInformation, setUploadInformation] = useState<UploadInformation>({state: UploadState.IDLE});
     const [isDraggingOver, setIsDraggingOver] = useState<boolean>(false);
     const {dropZoneText, draftSession, setDraftSession} = useDropzone({uploadInformation});
+    const addLogSession = useLogStore(state => state.addLogSession);
 
-    const uploadSession = (directory: FileSystemDirectoryEntry) => {
+    const uploadSession = async (directory: FileSystemDirectoryEntry) => {
         setUploadInformation({state: UploadState.UPLOADING});
-        const loggerSession = extractLoggerSession(directory as FileSystemDirectoryEntry);
-        loggerSession.then((session) => {
-            console.log(session);
-            setDraftSession({name: directory.name, measurementLogs: session} as LogSession);
+        try {
+            const loggerSession = await extractLoggerSession(directory as FileSystemDirectoryEntry);
+            setDraftSession({name: directory.name, measurementLogs: loggerSession} as LogSession);
             setUploadInformation({state: UploadState.SUCCESS});
-        }).catch((error) => {
-            if(error instanceof Error) {
-                setUploadInformation({state: UploadState.ERROR, errorMessage: error.message});
+        } catch(err) {
+            if(err instanceof Error) {
+                setUploadInformation({state: UploadState.ERROR, errorMessage: err.message});
             } else {
                 setUploadInformation({state: UploadState.ERROR, errorMessage: "An unexpected error occurred"});
             }
-        });
+        }
     };
 
-    const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    const handleDrop = async (e: React.DragEvent<HTMLDivElement>) => {
         e.preventDefault();
         try {
             validateEntry(e.dataTransfer.items);
             const directory = e.dataTransfer.items[0].webkitGetAsEntry();
-            uploadSession(directory as FileSystemDirectoryEntry);
+            await uploadSession(directory as FileSystemDirectoryEntry);
         } catch(err) {
             if (err instanceof Error){
                 setUploadInformation({state: UploadState.ERROR, errorMessage: err.cause as string});

ethernet-view/src/assets/svg/folder-open.svg

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
-import { LogSession, UploadInformation, UploadState } from "../LogLoader";
+import { UploadInformation, UploadState } from "../LogLoader";
+import { LogSession } from "pages/LoggerPage/useLogStore";
 
 interface Props {
     uploadInformation: UploadInformation;

ethernet-view/src/pages/LoggerPage/LogsColumn/LogLoader/Dropzone/Dropzone.module.scss

@@ -0,0 +1,31 @@
+@use "src/styles/styles.scss";
+
+.logItemWrapper {
+    display: flex;
+    align-items: center;
+    gap: .8rem;
+    width: fit-content;
+
+    &:hover {
+        cursor: pointer;
+    }
+}
+
+.icon {
+    width: 1.6rem;
+
+    img {
+        width: 100%;
+    }
+}
+
+.title {
+    color: styles.$title-color;
+    font-size: 1.6rem;
+    font-family: styles.$code-font;
+    font-style: italic;
+}
+
+.active {
+    color: styles.$orange;
+}

ethernet-view/src/pages/LoggerPage/LogsColumn/LogLoader/Dropzone/Dropzone.tsx

@@ -0,0 +1,28 @@
+import { useLogStore } from "pages/LoggerPage/useLogStore";
+import styles from "./LogItem.module.scss"
+import folderClosed from "assets/svg/folder-closed.svg"
+import folderOpen from "assets/svg/folder-open.svg"
+
+interface Props {
+    logName: string;
+}
+
+export const LogItem = ({logName}: Props) => {
+
+    const openLogSession = useLogStore(state => state.openLogSession);
+    const setOpenLogSession = useLogStore(state => state.setOpenLogSession);
+    const isOpen = openLogSession === logName;
+
+    return (
+        <div className={styles.logItemWrapper} onClick={() => setOpenLogSession(logName)}>
+            <div className={styles.icon}>
+                <img src={`${isOpen ? folderOpen : folderClosed}`} alt="log-icon" />
+            </div>
+            <div className={`${styles.title} ${isOpen ? styles.active : ""}`}>
+                <p>
+                    {logName}
+                </p>
+            </div>
+        </div>
+    )
+}

ethernet-view/src/pages/LoggerPage/LogsColumn/LogLoader/Dropzone/useDropzone.ts

@@ -0,0 +1,5 @@
+.logListWrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}