web: add footer, add inistate loading, adjust layout

web_viewer/fe_src/src/App.css

@@ -3,6 +3,8 @@
   margin: 0 auto;
   padding: 0.5rem;
   overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
 .row {
@@ -54,4 +56,25 @@
 .chart {
   display: flex;
   flex-wrap: wrap;
+}
+
+.chart-item {
+  flex-basis: 300px;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.footer {
+  margin-top: 10px;
+}
+
+.d-flex {
+  display: flex;
+}
+
+.server-offline, .loading {
+  height: 300px;
+  font-size: 22px;
 }

web_viewer/fe_src/src/App.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef, useState, lazy } from "react";
 import "./App.css";
 import { IUpdateChart, IInverterData } from "./Intefaces";
+import Footer from "./components/Footer";
 
 const SystemInformation = lazy(() => import("./components/SystemInformation"));
 const Summary = lazy(() => import("./components/Summary"));
@@ -16,6 +17,8 @@ function App() {
   const reconnectCountRef = useRef<number>(0);
   const [isSocketConnected, setIsSocketConnected] = useState<boolean>(true);
   const hourlyCharfRef = useRef<IUpdateChart>(null);
+  const [isInitState, setIsInitState] = useState(true);
+  const isFetchingRef = useRef(false);
 
   const connectSocket = useCallback(() => {
     if (
@@ -69,16 +72,21 @@ function App() {
     socketRef.current?.close();
   }, []);
 
-  const fetchState = useCallback(() => {
-    fetch(`${import.meta.env.VITE_API_BASE_URL}/state`)
-      .then((res) => res.json())
-      .then((json) => {
-        setInverterData(json);
-      })
-      .catch((err) => {
-        console.error("API get state error", err);
-      });
-  }, [setInverterData]);
+  const fetchState = useCallback(async () => {
+    try {
+      if (isFetchingRef.current) {
+        return;
+      }
+      isFetchingRef.current = true;
+      const res = await fetch(`${import.meta.env.VITE_API_BASE_URL}/state`);
+      const json = await res.json();
+      setInverterData(json);
+      setIsInitState(false);
+    } catch (err) {
+      console.error("API get state error", err);
+    }
+    isFetchingRef.current = false;
+  }, [setInverterData, setIsInitState]);
 
   useEffect(() => {
     fetchState();
@@ -105,6 +113,17 @@ function App() {
     document.title = `[${deviceTimeOnly}] ${import.meta.env.VITE_APP_TITLE}`;
   }, [inverterData?.deviceTime]);
 
+  if (isInitState) {
+    return (
+      <>
+        <div className="d-flex card loading align-center justify-center flex-1">
+          Loading....
+        </div>
+        <Footer />
+      </>
+    );
+  }
+
   if (inverterData) {
     return (
       <>
@@ -115,17 +134,21 @@ function App() {
           onReconnect={connectSocket}
         />
         <div className="row chart">
-          <HourlyChart ref={hourlyCharfRef} className="flex-1" />
-          <DailyChart className="flex-1" />
+          <HourlyChart ref={hourlyCharfRef} className="flex-1 chart-item" />
+          <DailyChart className="flex-1 chart-item" />
         </div>
+        <Footer />
       </>
     );
   }
 
   return (
-    <div className="card server-offline">
-      Server is offline. Reload page when you make sure that server is online
-    </div>
+    <>
+      <div className="d-flex card server-offline align-center justify-center flex-1">
+        Server is offline. Reload page when you make sure that server is online
+      </div>
+      <Footer />
+    </>
   );
 }
 

web_viewer/fe_src/src/components/Footer.tsx

@@ -0,0 +1,19 @@
+import { memo } from "react";
+
+function Footer() {
+  return (
+    <div className="card text-center footer">
+      &copy; 2024{" "}
+      <a href="https://hoangnguyendong.dev" target="_blank">
+        Hoàng Rio
+      </a>
+      <br />
+      Open source at:{" "}
+      <a href="https://github.com/hoang-rio/lux-grid-watcher" target="_blank">
+        Github
+      </a>
+    </div>
+  );
+}
+
+export default memo(Footer);

web_viewer/fe_src/src/components/Summary.css

@@ -2,6 +2,7 @@
     margin-bottom: 5px;
     margin-left: -10px;
     margin-right: -10px;
+    margin-top: -10px;
     flex-wrap: wrap;
     max-width: calc(100% + 20px);
 }
@@ -42,6 +43,7 @@
         margin-bottom: 5px;
         margin-left: -5px;
         margin-right: -5px;
+        margin-top: -5px;
         max-width: calc(100% + 10px);
     }
     .summary-item {

web_viewer/public/assets/GeneralValue-_nkGEG15.js → web_viewer/public/assets/GeneralValue-CHGmdxOT.js

@@ -1 +1 @@
-import{j as e}from"./index-B8XRob5j.js";function l({value:r,unit:s,className:n}){return e.jsxs("div",{className:`${n||""} general-value`,children:[e.jsx("strong",{children:r}),s]})}export{l as G};
+import{j as e}from"./index-Ck0kjt3K.js";function l({value:r,unit:s,className:n}){return e.jsxs("div",{className:`${n||""} general-value`,children:[e.jsx("strong",{children:r}),s]})}export{l as G};