update routes.ts

manage-view/src/components/ListLog/ListLog.css

@@ -0,0 +1,46 @@
+.mainList{
+    height: 100vh;
+    scroll-behavior: smooth;
+    border: solid gray 5px;
+    width:100%;
+    word-wrap:break-word;
+    white-space:pre;
+    overflow: auto;
+    font-family: monospace;
+    text-rendering: auto;
+     color: fieldtext;
+     letter-spacing: normal;
+     word-spacing: normal;
+     line-height: normal;
+     text-transform: none;
+     text-indent: 0px;
+     text-shadow: none;
+     display: inline-block;
+     text-align: start;
+     appearance: auto;
+     -webkit-rtl-ordering: logical;
+     resize: vertical;
+     cursor: text;
+     background-color: field;
+     column-count: initial !important;
+     writing-mode: horizontal-tb !important;
+     box-sizing: border-box;
+     margin: 0em;
+     /* border-width: 1px; */
+     /* border-style: solid; */
+     /* border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133)); */
+     /* border-image: initial; */
+     padding: 5px;
+     /* position: relative; */
+}
+
+.inputSearch{
+    position: sticky;
+    top:0;
+    right: 0;
+    text-align: right;
+}
+
+.inputSearch input{
+    width: 30%;
+}

manage-view/src/components/ListLog/ListLog.jsx

@@ -1,11 +1,12 @@
 import axios from "axios";
 import React, { useEffect, useState } from "react";
-import { Navigate, useParams } from "react-router-dom";
+import { Link, Navigate, useParams } from "react-router-dom";
 import { getListLog } from "../../api/apiLog";
-
+import "./ListLog.css";
 const ListLog = () => {
-  const [listFile, setListFile] = useState({});
+  const [listFile, setListFile] = useState([]);
   const [status, setStatus] = useState();
+  const [nameSearch, setNameSearch] = useState("");
   const getListFile = async () => {
     try {
       const res = await axios.get(getListLog);
@@ -16,12 +17,36 @@ const ListLog = () => {
     }
   };
 
+  useEffect(() => {
+    getListFile();
+  }, []);
+
   if (status === 200) {
     return (
-      <div>
+      <div className="mainList">
-        {listFile?.map((file) => {
+        <div className="inputSearch">
-          <span>{file}</span>;
+            <Link to={"/"}>
-        })}
+              <button
+                style={{
+                  color: "white",
+                  backgroundColor: "blue",
+                  cursor: "pointer",
+                  float:"left"
+                }}
+              >
+                Home
+              </button></Link>
+          <label>Search: </label>
+          <input value={nameSearch} placeholder={"Enter a file name"} onChange={(e)=>{
+            setNameSearch(e.target.value)
+          }}></input>
+        </div>
+        {listFile?.filter((f)=>f.search(nameSearch)!==-1).map((file) => (
+          <div>
+            <Link to={"/logs/" + file}>{file}</Link>
+            <br></br>
+          </div>
+        ))}
       </div>
     );
   } else {

manage-view/src/components/ShowLog/ShowLog.css

@@ -1,87 +1,106 @@
-.main{
+.main {
-    display: flex;
+  display: flex;
-    height: 100vh;
+  height: 100vh;
-    flex-flow: column;
+  flex-flow: column;
-    
+  background-color: gray;
+  /* position: relative; */
 }
 
-.detectedDiv{
+.detectedDiv {
-    height: 40%;
+  height: 40%;
-    padding: 5px;
+  padding: 5px;
-    word-wrap:break-word;
+  word-wrap: break-word;
-    border: solid gray 5px;
+  border: solid gray 5px;
-    white-space:pre;
+  white-space: pre;
-    overflow: auto;
+  overflow: auto;
-    font-family: monospace;
+  font-family: monospace;
-    text-rendering: auto;
+  text-rendering: auto;
-     color: fieldtext;
+  color: fieldtext;
-     letter-spacing: normal;
+  letter-spacing: normal;
-     word-spacing: normal;
+  word-spacing: normal;
-     line-height: normal;
+  line-height: normal;
-     text-transform: none;
+  text-transform: none;
-     text-indent: 0px;
+  text-indent: 0px;
-     text-shadow: none;
+  text-shadow: none;
-     display: inline-block;
+  display: inline-block;
-     text-align: start;
+  text-align: start;
-     appearance: auto;
+  appearance: auto;
-     -webkit-rtl-ordering: logical;
+  -webkit-rtl-ordering: logical;
-     resize: vertical;
+  resize: vertical;
-     cursor: text;
+  cursor: text;
-     background-color: field;
+  background-color: field;
-     column-count: initial !important;
+  column-count: initial !important;
-     writing-mode: horizontal-tb !important;
+  writing-mode: horizontal-tb !important;
-     /* box-sizing: border-box; */
+  /* box-sizing: border-box; */
-     margin: 0em;
+  margin: 0em;
-     /* border-width: 1px; */
+  /* border-width: 1px; */
-     /* border-style: solid;/ */
+  /* border-style: solid;/ */
-     /* border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133)); */
+  /* border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133)); */
-     /* border-image: initial; */
+  /* border-image: initial; */
-     padding: 5px;
+  padding: 5px;
 }
 
-.logContent{
+.logContent {
-    scroll-behavior: smooth;
+  scroll-behavior: smooth;
-    border: solid gray 5px;
+  border: solid gray 5px;
-    width:100%;
+  width: 100%;
-    height:60%;
+  height: 60%;
-    word-wrap:break-word;
+  word-wrap: break-word;
-    white-space:pre;
+  white-space: pre;
-    overflow: auto;
+  overflow: auto;
-    font-family: monospace;
+  font-family: monospace;
-    text-rendering: auto;
+  text-rendering: auto;
-     color: fieldtext;
+  color: fieldtext;
-     letter-spacing: normal;
+  letter-spacing: normal;
-     word-spacing: normal;
+  word-spacing: normal;
-     line-height: normal;
+  line-height: normal;
-     text-transform: none;
+  text-transform: none;
-     text-indent: 0px;
+  text-indent: 0px;
-     text-shadow: none;
+  text-shadow: none;
-     display: inline-block;
+  display: inline-block;
-     text-align: start;
+  text-align: start;
-     appearance: auto;
+  appearance: auto;
-     -webkit-rtl-ordering: logical;
+  -webkit-rtl-ordering: logical;
-     resize: vertical;
+  resize: vertical;
-     cursor: text;
+  cursor: text;
-     background-color: field;
+  background-color: field;
-     column-count: initial !important;
+  column-count: initial !important;
-     writing-mode: horizontal-tb !important;
+  writing-mode: horizontal-tb !important;
-     box-sizing: border-box;
+  box-sizing: border-box;
-     margin: 0em;
+  margin: 0em;
-     /* border-width: 1px; */
+  /* border-width: 1px; */
-     /* border-style: solid; */
+  /* border-style: solid; */
-     /* border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133)); */
+  /* border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133)); */
-     /* border-image: initial; */
+  /* border-image: initial; */
-     padding: 5px;
+  padding: 5px;
 }
 
-.itemDetected{
+.itemDetected {
-    background-color: rgb(240, 155, 155);
+  background-color: rgb(240, 155, 155);
-    cursor: pointer;
+  cursor: pointer;
 }
 
-.itemDetected:hover{
+.itemDetected:hover {
-    background-color: rgba(240, 155, 155, 0.583);;
+  background-color: rgba(240, 155, 155, 0.583);
 }
-.lineNumberLog{
+.lineNumberLog {
-    background-color: yellow;
+  background-color: yellow;
+}
+
+.buttonOption {
+  /* position: "sticky"; */
+  /* top: 0; */
+  /* background-color: "white"; */
+  text-align: "center";
+  background-color: rgba(255, 0, 0, 0);
+  display: "flex";
+  padding: 0 10px 0 0;
+  color: white;
+  font-weight: 700;
+  border-left: 5px solid gray;
+  border-right: 5px solid gray;
+}
+
+.buttonOption span{
+    float: right;
 }

manage-view/src/components/ShowLog/ShowLog.jsx

@@ -1,6 +1,6 @@
 import axios from "axios";
 import React, { useEffect, useState } from "react";
-import { Navigate, useParams } from "react-router-dom";
+import { Link, Navigate, useParams } from "react-router-dom";
 import { getLog } from "../../api/apiLog";
 import "./ShowLog.css";
 const ShowLog = () => {
@@ -11,7 +11,7 @@ const ShowLog = () => {
     try {
       const res = await axios.get(getLog + "/" + name);
       setLog(res.data);
-      setStatus(res.status)
+      setStatus(res.status);
     } catch (error) {
       console.log(error);
     }
@@ -29,25 +29,53 @@ const ShowLog = () => {
   useEffect(() => {
     getContentLog();
     setTimeout(() => {
-      scrollToElement()
+      scrollToElement();
     }, 1000);
   }, []);
   // console.log(window.location.hash);
-  if(status === 200){
+  if (status === 200) {
     return (
       <div className="main">
+        <div className="buttonOption">
+          <Link to={"/"}>
+            <button
+              style={{
+                color: "white",
+                backgroundColor: "blue",
+                cursor: "pointer",
+              }}
+            >
+              Home
+            </button>
+          </Link>
+          <Link to={"/logs"}>
+            {" "}
+            <button
+              style={{
+                color: "white",
+                backgroundColor: "blue",
+                cursor: "pointer",
+              }}
+            >
+              List of detected files
+            </button>
+          </Link>
+          <span>{name}</span>
+        </div>
         <div className="detectedDiv">
           <h3
             style={{
-              position: "sticky",
+              display:
-              top: 0,
+                log?.modelSpecial === "" && log?.issueItem === ""
-              backgroundColor: "white",
+                  ? "block"
-              textAlign: "center",
+                  : "none",
             }}
           >
-            {name}
+            No errors were found in the file
+          </h3>
+          <h3 style={{ display: log?.modelSpecial !== "" ? "block" : "none" }}>
+            Extra items:
           </h3>
-          <h3 style={{display:log?.modelSpecial!==""?"block":"none"}}>Extra items:</h3>
           {log?.modelSpecial?.split("\n")?.map((line) => (
             <span>
               <span className="lineNumberLog">{line.split("|-|")[0]}</span>
@@ -64,7 +92,9 @@ const ShowLog = () => {
               <br></br>
             </span>
           ))}
-          <h3 style={{display:log?.issueItem!==""?"block":"none"}}>Issue found:</h3>
+          <h3 style={{ display: log?.issueItem !== "" ? "block" : "none" }}>
+            Issue found:
+          </h3>
           {log?.issueItem?.split("\n")?.map((line) => (
             <span>
               <span className="lineNumberLog">{line.split("|-|")[0]}</span>
@@ -97,14 +127,15 @@ const ShowLog = () => {
         </div>
       </div>
     );
-  }else{
+  } else {
-    return(
+    return (
       <div>
-        <h1><i>The file was not found or no errors were found in the file.</i></h1>
+        <h1>
+          <i>The file was not found or no errors were found in the file.</i>
+        </h1>
       </div>
-    )
+    );
   }
-  
 };
 
 export default ShowLog;

manage-view/src/pages/ManageValues.jsx

@@ -101,7 +101,7 @@ const ManageValues = () => {
         }}>Add</button>
       </div>
       <div>
-       <Link to={"/logs"}> <button style={{color:"white", backgroundColor:"blue", cursor:"pointer"}}>List of error logs</button></Link>
+       <Link to={"/logs"}> <button style={{color:"white", backgroundColor:"blue", cursor:"pointer"}}>List of detected files</button></Link>
       </div>
     </div>
   );

start/routes.ts

@@ -141,8 +141,6 @@ Route.get("/api/log/showLog/:name?", async ({ request, response }) => {
 
 Route.get("/api/getAllLogDetect", async ({ request, response }) => {
   try {
-    // fghf
-    console.log(request.params().name);
     let fileDetect = await LogDetectFile.all()
     let listFiles = fileDetect.map(obj=>obj.file_name)
     response