update routes.ts

2023-09-13 14:09:30 +07:00 · 2023-09-13 14:09:30 +07:00 · 1db6f7688c
parent 421d35d1d1
commit 1db6f7688c
7 changed files with 111 additions and 124 deletions
--- a/manage-view/src/App.js
+++ b/manage-view/src/App.js
@ -2,24 +2,19 @@ import axios from "axios";
 import React, { useEffect, useState } from "react";
 import { getKeyValues } from "./api/apiLog";
 import ManageValues from "./pages/ManageValues";
-import {
-  Routes,
-  Route,
-  Switch,
-  useParams,
-} from "react-router-dom";
+import { Routes, Route, Switch, useParams } from "react-router-dom";
 import ShowLog from "./components/ShowLog/ShowLog";
+import ListLog from "./components/ListLog/ListLog";
 function App() {
  return (
    <div className="App">
      <Routes>
-          {/* Define routes */}
-          <Route path="/" element={<ManageValues />}>
-            {/* Render the UserProfile component */}
-          </Route>
-            <Route path="/logs/:name" element={<ShowLog/>}>
-              
-            </Route>
+        {/* Define routes */}
+        <Route path="/" element={<ManageValues />}>
+          {/* Render the UserProfile component */}
+        </Route>
+        <Route path="/logs/:name" element={<ShowLog />}></Route>
+        <Route path="/logs" element={<ListLog />}></Route>
      </Routes>
    </div>
  );
--- a/manage-view/src/api/apiLog.js
+++ b/manage-view/src/api/apiLog.js
@ -1,5 +1,5 @@
-const API = "https://logs.danielvu.com/api";
-// const API = "http://localhost:3333/api";
+// const API = "https://logs.danielvu.com/api";
+const API = "http://localhost:3333/api";
 export const getKeyValues = API + "/getKeyValue";
 export const deleteValue = API + "/deleteValue";
 export const addKeyValue = API + "/addValue";
--- a/manage-view/src/components/ListLog/ListLog.jsx
+++ b/manage-view/src/components/ListLog/ListLog.jsx
@ -0,0 +1,9 @@
+import React from 'react'
+
+const ListLog = () => {
+  return (
+    <div>ListLog</div>
+  )
+}
+
+export default ListLog
--- a/manage-view/src/components/ShowLog/ShowLog.css
+++ b/manage-view/src/components/ShowLog/ShowLog.css
@ -7,7 +7,9 @@

 .detectedDiv{
    height: 40%;
+    padding: 5px;
    word-wrap:break-word;
+    border: solid gray 5px;
    white-space:pre;
    overflow: auto;
    font-family: monospace;
@ -23,22 +25,23 @@
     text-align: start;
     appearance: auto;
     -webkit-rtl-ordering: logical;
-     resize: auto;
+     resize: vertical;
     cursor: text;
     background-color: field;
     column-count: initial !important;
     writing-mode: horizontal-tb !important;
-     box-sizing: border-box;
+     /* 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: 2px;
+     /* border-width: 1px; */
+     /* border-style: solid;/ */
+     /* border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133)); */
+     /* border-image: initial; */
+     padding: 5px;
 }

 .logContent{
    scroll-behavior: smooth;
+    border: solid gray 5px;
    width:100%;
    height:60%;
    word-wrap:break-word;
@ -57,18 +60,18 @@
     text-align: start;
     appearance: auto;
     -webkit-rtl-ordering: logical;
-     resize: auto;
+     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: 2px;
+     /* border-width: 1px; */
+     /* border-style: solid; */
+     /* border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133)); */
+     /* border-image: initial; */
+     padding: 5px;
 }

 .itemDetected{
--- a/manage-view/src/components/ShowLog/ShowLog.jsx
+++ b/manage-view/src/components/ShowLog/ShowLog.jsx
@ -6,12 +6,12 @@ import "./ShowLog.css";
 const ShowLog = () => {
  let { name } = useParams();
  const [log, setLog] = useState({});
-  const [content, setContent] = useState("");
+  const [status, setStatus] = useState();
  const getContentLog = async () => {
    try {
-      let tempContent = "";
      const res = await axios.get(getLog + "/" + name);
      setLog(res.data);
+      setStatus(res.status)
    } catch (error) {
      console.log(error);
    }
@ -33,69 +33,78 @@ const ShowLog = () => {
    }, 1000);
  }, []);
  // console.log(window.location.hash);
-  return (
-    <div className="main">
-      <div className="detectedDiv">
-        <h3
-          style={{
-            position: "sticky",
-            top: 0,
-            backgroundColor: "white",
-            textAlign: "center",
-          }}
-        >
-          {name}
-        </h3>
-        <h3>Extra items:</h3>
-        {log?.modelSpecial?.split("\n")?.map((line) => (
-          <span>
-            <span className="lineNumberLog">{line.split("|-|")[0]}</span>
-            <span>{line.split("|-|")[1]}</span>
-            <span className="itemDetected">
-              <a
-                href={"#" + line.split("|-|")[0]}
-                style={{ textDecoration: "none", color: "black" }}
-              >
-                {line.split("|-|")[2]}
-              </a>
+  if(status === 200){
+    return (
+      <div className="main">
+        <div className="detectedDiv">
+          <h3
+            style={{
+              position: "sticky",
+              top: 0,
+              backgroundColor: "white",
+              textAlign: "center",
+            }}
+          >
+            {name}
+          </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>
+              <span>{line.split("|-|")[1]}</span>
+              <span className="itemDetected">
+                <a
+                  href={"#" + line.split("|-|")[0]}
+                  style={{ textDecoration: "none", color: "black" }}
+                >
+                  {line.split("|-|")[2]}
+                </a>
+              </span>
+              <span>{line.split("|-|")[3]}</span>
+              <br></br>
            </span>
-            <span>{line.split("|-|")[3]}</span>
-            <br></br>
-          </span>
-        ))}
-        <h3>Issue found:</h3>
-        {log?.issueItem?.split("\n")?.map((line) => (
-          <span>
-            <span className="lineNumberLog">{line.split("|-|")[0]}</span>
-            <span>{line.split("|-|")[1]}</span>
-            <span className="itemDetected">
-              <a
-                href={"#" + line.split("|-|")[0]}
-                style={{ textDecoration: "none", color: "black" }}
-              >
-                {line.split("|-|")[2]}{" "}
-              </a>
+          ))}
+          <h3 style={{display:log?.issueItem!==""?"block":"none"}}>Issue found:</h3>
+          {log?.issueItem?.split("\n")?.map((line) => (
+            <span>
+              <span className="lineNumberLog">{line.split("|-|")[0]}</span>
+              <span>{line.split("|-|")[1]}</span>
+              <span className="itemDetected">
+                <a
+                  href={"#" + line.split("|-|")[0]}
+                  style={{ textDecoration: "none", color: "black" }}
+                >
+                  {line.split("|-|")[2]}
+                </a>
+              </span>
+              <span>{line.split("|-|")[3]}</span>
+              <br></br>
            </span>
-            <span>{line.split("|-|")[3]}</span>
-            <br></br>
-          </span>
-        ))}
+          ))}
+        </div>
+        <div className="logContent">
+          {log?.contentFile?.split("\n")?.map((line) => (
+            <span>
+              <span className="lineNumberLog">{line.split("|-|")[0]}</span>
+              <span>{line.split("|-|")[1]}</span>
+              <span className="itemDetected">
+                <span id={line.split("|-|")[0]}>{line.split("|-|")[2]}</span>
+              </span>
+              <span>{line.split("|-|")[3]}</span>
+              <br></br>
+            </span>
+          ))}
+        </div>
      </div>
-      <div className="logContent">
-        {log?.contentFile?.split("\n")?.map((line) => (
-          <span>
-            <span className="lineNumberLog">{line.split("|-|")[0]}</span>
-            <span>{line.split("|-|")[1]}</span>
-            <span className="itemDetected">
-              <span id={line.split("|-|")[0]}>{line.split("|-|")[2]}</span>
-            </span>
-            <span>{line.split("|-|")[3]}</span>
-            <br></br>
-          </span>
-        ))}
+    );
+  }else{
+    return(
+      <div>
+        <h1><i>The file was not found or no errors were found in the file.</i></h1>
      </div>
-    </div>
-  );
+    )
+  }
+  
 };

 export default ShowLog;
--- a/manage-view/src/pages/ManageValues.jsx
+++ b/manage-view/src/pages/ManageValues.jsx
@ -100,6 +100,9 @@ const ManageValues = () => {
            }
        }}>Add</button>
      </div>
+      <div>
+       <Link to={"/logs"}> <button style={{color:"white", backgroundColor:"blue", cursor:"pointer"}}>List of error logs</button></Link>
+      </div>
    </div>
  );
 };
--- a/start/routes.ts
+++ b/start/routes.ts
@ -124,40 +124,6 @@ Route.get("/api/log/showLog/:name?", async ({ request, response }) => {
      modelSpecialDetected.length > 0 ? modelSpecialDetected.join("\n") : "";
    let issueItem =
      issueSpecialDetected.length > 0 ? issueSpecialDetected.join("\n") : "";
-    // response.send(
-    //   "<html>\
-    // <body>\
-    // <div style='width:100%;height: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: auto;\
-    // 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: 2px;'><b>"+request.params().name+"</b>" + modelSpecial + issueItem
-    //     +
-    //     data.join("\n") +
-    //     "</div>\
-    // </body>\
-    // </html>"
-    // );
-
    response
      .status(200)
      .send({
@ -167,7 +133,9 @@ Route.get("/api/log/showLog/:name?", async ({ request, response }) => {
      });
  } catch (error) {
    console.error(error);
-    response.send("<h1>-------------- File not found --------------</h1>");
+    response
+    .status(203)
+    .send("FILE NOT FOUND");
  }
 });