Merge pull request #42 from JonasGLund99/31-lav-noget-der-viser-rkker…

…-af-logs-i-html 31 lav noget der viser rkker af logs i html
JonasGLund99 · Mar 18, 2024 · 3448563 · 3448563
2 parents 261e1ca + f9f207a
commit 3448563
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 19 deletions.
diff --git a/TimeTrace/public/index.html b/TimeTrace/public/index.html
@@ -28,7 +28,7 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+    <div id="root" class="w-screen h-screen overflow-hidden"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/TimeTrace/src/components/LogTable.tsx b/TimeTrace/src/components/LogTable.tsx
@@ -0,0 +1,78 @@
+type LogTableProps = {
+    mappingsAreEditable: boolean | undefined;
+    events: string[];
+    mappings: Map<string, string>;
+    setMappings: React.Dispatch<React.SetStateAction<Map<string, string>>> | undefined;
+};
+
+function LogTable(props: LogTableProps) {
+    function handleMappingChange(eventText: string, mappingIndex: number): void {
+        const inputValue = eventText;
+
+        // Filter out characters that are not in the range of 'a' to 'y' || 'A' to 'Y'
+        const lastChar = inputValue.slice(-1);
+        const filteredValue = lastChar.search(/[a-yA-Y]/gi) === 0 ? lastChar : "";
+
+        // EventText is empty when the user has removed the mapping.
+        if (filteredValue === "" && eventText !== "") return;
+        const mapKey = props.events[mappingIndex];
+        props.mappings.set(mapKey, filteredValue);
+        const newMappings = new Map(props.mappings);
+        if (props.setMappings) {
+            props.setMappings(newMappings);
+        }
+    }
+
+    function removeMapping(eventIndex: number): void {
+        handleMappingChange("", eventIndex);
+    }
+
+    return (
+        <div className="relative w-[60%] h-[92%] overflow-auto border-2 border-gray-300 p-5 rounded-md">
+            <div className="flex flex-col overflow-auto log-table">
+                {props.events.map((event: string, i: number) => {
+                    return <pre className="w-full py-2">{`Line ${i}: ` + event}      </pre>;
+                })}
+
+                <div className="absolute top-0 right-0 flex flex-col pt-5 bg-white mapping-container">
+                    {props.events.map((event: string, i: number) => {
+                        return (
+                            <div className="flex items-center justify-end gap-1 py-2 pr-1">
+                                <input
+                                    className="w-6 h-6 text-center border-2 border-gray-300 rounded-md"
+                                    type="text"
+                                    readOnly={props.mappingsAreEditable ? false : true}
+                                    value={props.mappings.get(event)}
+                                    onChange={(event) => {
+                                        handleMappingChange(event.target.value, i);
+                                    }}
+                                />
+                                {props.mappingsAreEditable ? (
+                                    <svg
+                                        onClick={() => {
+                                            removeMapping(i);
+                                        }}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        fill="none"
+                                        viewBox="0 0 24 24"
+                                        strokeWidth={1.5}
+                                        stroke="currentColor"
+                                        className="w-5 h-5 cursor-pointer"
+                                    >
+                                        <path
+                                            strokeLinecap="round"
+                                            strokeLinejoin="round"
+                                            d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
+                                        />
+                                    </svg>
+                                ) : null }
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default LogTable;
diff --git a/TimeTrace/src/index.tsx b/TimeTrace/src/index.tsx
@@ -13,18 +13,18 @@ import LogPage from './pages/LogPage';
 import Navbar from './components/Navbar';
 
 export default function App() {
-    return (
-        <BrowserRouter>
-            <Navbar />
-            <div className="p-5">
-                <Routes>
-                    <Route path="/" element={<Home />} />
-                    <Route path="/create-mappings" element={<MappingsPage />} />
-                    <Route path="/view-log" element={<LogPage />} />
-                </Routes>
-            </div>
-        </BrowserRouter>
-    )
+  return (
+    <BrowserRouter>
+      <Navbar/>
+      <div className="w-full h-full p-5">
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/create-mappings" element={<MappingsPage />} />
+          <Route path="/view-log" element={<LogPage />} />
+        </Routes>
+      </div>
+    </BrowserRouter>
+  )
 }
 
 const root = ReactDOM.createRoot(

diff --git a/TimeTrace/src/pages/Home.tsx b/TimeTrace/src/pages/Home.tsx
@@ -3,7 +3,6 @@
 function Home() {
     return (
         <h1 className="">Home</h1>
-
     );
 }
 

diff --git a/TimeTrace/src/pages/LogPage.tsx b/TimeTrace/src/pages/LogPage.tsx
@@ -13,6 +13,7 @@ function LogPage() {
     <div>
       <h1 className="flex justify-center pb-5 text-4xl ">Search logfile</h1>
       <SearchForm onSubmit={handleSearchSubmit} />
+      {/* <LogTable mappings={mappings} mappingsAreEditable={false} events={events}/> */}
     </div>
 
   );

diff --git a/TimeTrace/src/pages/MappingsPage.tsx b/TimeTrace/src/pages/MappingsPage.tsx
@@ -1,7 +1,10 @@
-import { useState } from "react";
 import FileUploadButton from "../components/FileUploadButton";
+import { useState } from "react";
+import LogTable from "../components/LogTable";
 
 function MappingsPage() {
+    const events: string[] = [];
+    const [mappings, setMapping] = useState<Map<string, string>>(new Map(events.map((event) => [event, ""])))
     const [uploadedFile, setUploadedFile] = useState<File | null>(null);
 
     // Callback function to receive the file
@@ -10,9 +13,9 @@ function MappingsPage() {
     };
 
     return (
-        <div>
-            <FileUploadButton onFileChange={handleFileChange} />
-            {
+      <div className="flex flex-row h-full mappings-page" >
+        <div className="w-[40%]">
+        {
                 uploadedFile ?
                     <div>
                         <p>File uploaded: {uploadedFile.name}</p>
@@ -22,9 +25,13 @@ function MappingsPage() {
                         <p>Choose a file</p>
                     </div>
             }
+            <FileUploadButton onFileChange={handleFileChange} />
+
         </div>
+        <LogTable mappings={mappings} setMappings={setMapping} mappingsAreEditable={true} events={events}/>
+      </div>
+
     );
 }
 
-
 export default MappingsPage;
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,7 +3,6 @@ @@
     function Home() {
         return (
             <h1 className="">Home</h1>
         );
     }
@@ Expand Down @@