finish logloader section

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

@@ -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.tsx

@@ -12,7 +12,7 @@
 }
 
 .icon {
-    width: 1.8rem;
+    width: 1.6rem;
 
     img {
         width: 100%;
@@ -24,4 +24,8 @@
     font-size: 1.6rem;
     font-family: styles.$code-font;
     font-style: italic;
+}
+
+.active {
+    color: styles.$orange;
 }

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

@@ -1,17 +1,24 @@
+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}>
+        <div className={styles.logItemWrapper} onClick={() => setOpenLogSession(logName)}>
             <div className={styles.icon}>
-                <img src={folderClosed} alt="log-icon" />
+                <img src={`${isOpen ? folderOpen : folderClosed}`} alt="log-icon" />
             </div>
-            <div className={styles.title}>
+            <div className={`${styles.title} ${isOpen ? styles.active : ""}`}>
                 <p>
                     {logName}
                 </p>

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

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

ethernet-view/src/pages/LoggerPage/LogsColumn/LogLoader/LogList/LogItem/LogItem.tsx

@@ -1,7 +1,7 @@
-import { useState } from "react"
 import { Dropzone } from "./Dropzone/Dropzone"
 import styles from "./LogLoader.module.scss"
 import { LogList } from "./LogList/LogList";
+import { useLogStore } from "pages/LoggerPage/useLogStore";
 
 export enum UploadState {
     IDLE = "idle",
@@ -15,27 +15,16 @@ export interface UploadInformation {
     errorMessage?: string;
 }
 
-export interface LogSession {
-    name: string;
-    measurementLogs: Map<string, {time: Date, value: number}[]>;
-}
-export type LogSessionCollection = LogSession[];
-
 export const LogLoader = () => {
 
-    const [uploadInformation, setUploadInformation] = useState<UploadInformation>({state: UploadState.IDLE});
-    const [logSessions, setLogSessions] = useState<LogSessionCollection>([]);
+    const logSessions = useLogStore(state => state.logSessions);
 
     return (
         <div className={styles.logLoaderWrapper}>
 
             <LogList logNames={logSessions.map((logSession) => logSession.name)} />
 
-            <Dropzone 
-                uploadInformation={uploadInformation}
-                setUploadInformation={setUploadInformation}
-                addLogSession={(logSession: LogSession) => setLogSessions([...logSessions, logSession])}
-            />
+            <Dropzone />
 
         </div>
     )

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

@@ -0,0 +1,29 @@
+import { create } from "zustand";
+import zustymiddlewarets from "zustymiddlewarets";
+
+export interface LogSession {
+    name: string;
+    measurementLogs: Map<string, { time: Date; value: number }[]>;
+}
+export type LogSessionCollection = LogSession[];
+
+type LogStore = {
+    logSessions: LogSessionCollection;
+    openLogSession: string;
+    setOpenLogSession: (logSession: string) => void;
+    addLogSession: (log: LogSession) => void;
+    clearLogSessions: () => void;
+};
+
+export const useLogStore = create<LogStore>((set, get) => ({
+    logSessions: [],
+    openLogSession: "",
+    setOpenLogSession: (logSession: string) => {
+        set((state) => ({ ...state, openLogSession: logSession }));
+    },
+    addLogSession: (log: LogSession) => {
+        if (get().logSessions.find((logSession) => logSession.name === log.name)) return;
+        set((state) => ({ logSessions: [...state.logSessions, log] }));
+    },
+    clearLogSessions: () => set({ logSessions: [] }),
+}));