web: split system information to multipole component

hoang-rio · Nov 25, 2024 · 83fbdfa · 83fbdfa
1 parent 363c864
commit 83fbdfa
Show file tree

Hide file tree

Showing 14 changed files with 377 additions and 286 deletions.
diff --git a/web_viewer/fe_src/src/App.tsx b/web_viewer/fe_src/src/App.tsx
@@ -96,21 +96,27 @@ function App() {
 
   useEffect(() => {
     if (!inverterData?.deviceTime) return;
-    const deviceTimeOnly = inverterData?.deviceTime?.split(" ")[1]
-    document.title = `[${deviceTimeOnly}] ${
-      import.meta.env.VITE_APP_TITLE
-    }`;
+    const deviceTimeOnly = inverterData?.deviceTime?.split(" ")[1];
+    document.title = `[${deviceTimeOnly}] ${import.meta.env.VITE_APP_TITLE}`;
   }, [inverterData?.deviceTime]);
 
+  if (inverterData) {
+    return (
+      <>
+        <Summary invertData={inverterData} />
+        <SystemInformation
+          inverterData={inverterData}
+          isSocketConnected={isSocketConnected}
+          onReconnect={connectSocket}
+        />
+      </>
+    );
+  }
+
   return (
-    <>
-      {inverterData ? (
-        <>
-          <Summary invertData={inverterData}/>
-          <SystemInformation inverterData={inverterData} isSocketConnected={isSocketConnected} onReconnect={connectSocket}/>
-        </>
-      ) : <div className="card server-offline">Server is offline. Reload page when you make sure that server is online</div>}
-    </>
+    <div className="card server-offline">
+      Server is offline. Reload page when you make sure that server is online
+    </div>
   );
 }
 

diff --git a/web_viewer/fe_src/src/Intefaces.ts b/web_viewer/fe_src/src/Intefaces.ts
@@ -45,3 +45,8 @@ export interface IInverterData {
   v_bus_2: number;
   deviceTime: string;
 }
+
+export interface ICProps {
+  inverterData: IInverterData;
+  isSocketConnected: boolean;
+}
diff --git a/web_viewer/fe_src/src/components/Battery.tsx b/web_viewer/fe_src/src/components/Battery.tsx
@@ -0,0 +1,74 @@
+import { ICProps } from "../Intefaces";
+import GeneralValue from "./GeneralValue";
+
+function Battery({ inverterData, isSocketConnected }: ICProps) {
+  return (
+    <div className="battery flex-1">
+      <div className="row align-center">
+        <div className="battery-texts">
+          <GeneralValue
+            value={
+              isSocketConnected
+                ? inverterData.p_discharge || inverterData.p_charge
+                : 0
+            }
+            unit=" W"
+          />
+          <GeneralValue
+            value={isSocketConnected ? inverterData.soc : 0}
+            unit="%"
+          />
+          <GeneralValue
+            value={isSocketConnected ? inverterData.v_bat : 0}
+            unit=" Vdc"
+          />
+        </div>
+        <div className="col align-center">
+          <GeneralValue
+            className="show-small"
+            value={
+              isSocketConnected
+                ? inverterData.p_discharge || inverterData.p_charge
+                : 0
+            }
+            unit=" W"
+          />
+          <img
+            className="battery-icon"
+            src={`/assets/icon_battery_${
+              isSocketConnected ? Math.round(inverterData.soc / 2 / 10) : 0
+            }_green.png`}
+          />
+          <GeneralValue
+            className="show-small"
+            value={isSocketConnected ? inverterData.soc : 0}
+            unit="%"
+          />
+          <GeneralValue
+            className="show-small"
+            value={isSocketConnected ? inverterData.v_bat : 0}
+            unit=" Vdc"
+          />
+        </div>
+        <div className="arrows row">
+          {Array.from({ length: 2 }).map((_, index) => (
+            <div
+              key={"batter-arrow-" + index}
+              className={`x-arrow ${
+                isSocketConnected
+                  ? inverterData.p_discharge > 0
+                    ? "right"
+                    : inverterData.p_charge > 0
+                    ? "left"
+                    : "none"
+                  : "none"
+              }`}
+            ></div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Battery;
diff --git a/web_viewer/fe_src/src/components/Consumption.tsx b/web_viewer/fe_src/src/components/Consumption.tsx
@@ -0,0 +1,45 @@
+import { ICProps } from "../Intefaces";
+import GeneralValue from "./GeneralValue";
+
+export default function Consumption({
+  inverterData,
+  isSocketConnected,
+}: ICProps) {
+  const pConsumption =
+    inverterData.p_inv + inverterData.p_to_user - inverterData.p_rec;
+  return (
+    <div className="consumption flex-1">
+      <div className="row">
+        <div className="col align-center consumption-icon">
+          <div className="arrows col">
+            {Array.from({ length: 2 }).map((_, index) => (
+              <div
+                key={"comsumption-arrow-" + index}
+                className={`y-arrow ${
+                  isSocketConnected
+                    ? pConsumption > 0
+                      ? "down"
+                      : "none"
+                    : "none"
+                }`}
+              ></div>
+            ))}
+          </div>
+          <img src="/assets/icon_consumption.png" />
+          <GeneralValue
+            className="show-small"
+            value={isSocketConnected ? pConsumption : 0}
+            unit=" W"
+          />
+        </div>
+        <div className="consumption-texts">
+          <GeneralValue
+            value={isSocketConnected ? pConsumption : 0}
+            unit=" W"
+          />
+          <div className="description">Consumption Power</div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/web_viewer/fe_src/src/components/EPS.tsx b/web_viewer/fe_src/src/components/EPS.tsx
@@ -0,0 +1,40 @@
+import { ICProps } from "../Intefaces";
+import GeneralValue from "./GeneralValue";
+
+export default function EPS({ inverterData, isSocketConnected }: ICProps) {
+  return (
+    <div className="eps flex-1">
+      <div className="row">
+        <div className="col align-center">
+          <div
+            className={`y-arrow ${
+              isSocketConnected
+                ? inverterData.p_eps > 0
+                  ? "down"
+                  : "none"
+                : "none"
+            }`}
+          ></div>
+          <img src="/assets/icon_eps.png" />
+          {inverterData.p_eps === 0 ? (
+            <strong className="show-small eps-status">Standby</strong>
+          ) : (
+            <GeneralValue
+              className="show-small"
+              value={isSocketConnected ? inverterData.p_eps : 0}
+              unit=" W"
+            />
+          )}
+        </div>
+        <div className="eps-texts">
+          {inverterData.p_eps === 0 ? (
+            <strong className="eps-status">Standby</strong>
+          ) : (
+            <GeneralValue value={inverterData.p_eps} unit=" W" />
+          )}
+          <div className="description">Backup Power(EPS)</div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/web_viewer/fe_src/src/components/Grid.tsx b/web_viewer/fe_src/src/components/Grid.tsx
@@ -0,0 +1,75 @@
+import { ICProps } from "../Intefaces";
+import GeneralValue from "./GeneralValue";
+
+export default function Grid({ inverterData, isSocketConnected }: ICProps) {
+  return (
+    <div className="grid flex-1 row align-center justify-flex-end">
+      <div className="row arrows">
+        {Array.from({ length: 2 }).map((_, index) => (
+          <div
+            key={"grid-arrow-" + index}
+            className={`x-arrow ${
+              isSocketConnected
+                ? inverterData.p_to_grid > 0
+                  ? "right"
+                  : inverterData.p_to_user > 0
+                  ? "left"
+                  : "none"
+                : "none"
+            }`}
+          ></div>
+        ))}
+      </div>
+      <div className="col align-center">
+        <GeneralValue
+          className="show-small"
+          value={
+            isSocketConnected
+              ? inverterData.p_to_user || inverterData.p_to_grid
+              : 0
+          }
+          unit=" W"
+        />
+        <img src="/assets/icon_grid.png" />
+        <GeneralValue
+          className="show-small"
+          value={
+            isSocketConnected
+              ? (inverterData.vacr || inverterData.vacs || inverterData.vact) /
+                10
+              : 0
+          }
+          unit=" Vac"
+        />
+        <GeneralValue
+          className="show-small"
+          value={isSocketConnected ? inverterData.fac / 100 : 0}
+          unit=" Hz"
+        />
+      </div>
+      <div className="grid-texts">
+        <GeneralValue
+          value={
+            isSocketConnected
+              ? inverterData.p_to_user || inverterData.p_to_grid
+              : 0
+          }
+          unit=" W"
+        />
+        <GeneralValue
+          value={
+            isSocketConnected
+              ? (inverterData.vacr || inverterData.vacs || inverterData.vact) /
+                10
+              : 0
+          }
+          unit=" Vac"
+        />
+        <GeneralValue
+          value={isSocketConnected ? inverterData.fac / 100 : 0}
+          unit=" Hz"
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/web_viewer/fe_src/src/components/Inverter.tsx b/web_viewer/fe_src/src/components/Inverter.tsx
@@ -0,0 +1,30 @@
+import { ICProps } from "../Intefaces";
+
+function Inverter({ inverterData, isSocketConnected }: ICProps) {
+  return (
+    <div className="inverter flex-1">
+      <div className="row align-center">
+        <img src="/assets/inverter_off_grid_20231003.png" />
+        <div className="flex-1 arrows row justify-flex-end">
+          {Array.from({ length: 4 }).map((_, index) => (
+            <div
+              key={"inverter-arrow-" + index}
+              className={`x-arrow ${
+                isSocketConnected
+                  ? inverterData.p_inv > 0
+                    ? "right"
+                    : inverterData.p_rec > 0
+                    ? "left"
+                    : "none"
+                  : "none"
+              }`}
+            ></div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Inverter;
+
diff --git a/web_viewer/fe_src/src/components/PV.tsx b/web_viewer/fe_src/src/components/PV.tsx
@@ -0,0 +1,43 @@
+import { ICProps } from "../Intefaces";
+import GeneralValue from "./GeneralValue";
+import PVPowerValue from "./PVPowerValue";
+
+function PV({ inverterData, isSocketConnected }: ICProps) {
+  return (
+    <div className="pv flex-1">
+      <div className="icon col align-center">
+        <div className="col align-center">
+          <GeneralValue
+            className="show-small"
+            value={isSocketConnected ? inverterData.p_pv : 0}
+            unit=" W"
+          />
+          <img src="/assets/icon_solor_yielding.png" />
+        </div>
+        <div
+          className={`y-arrow ${
+            inverterData.p_pv == 0 || !isSocketConnected ? "none" : ""
+          }`}
+        ></div>
+      </div>
+      <div className="pv-texts power flex-1">
+        <PVPowerValue
+          label="PV1"
+          pValue={isSocketConnected ? inverterData.p_pv_1 : 0}
+          vValue={isSocketConnected ? inverterData.v_pv_1 : 0}
+        />
+        <PVPowerValue
+          label="PV2"
+          pValue={isSocketConnected ? inverterData.p_pv_2 : 0}
+          vValue={isSocketConnected ? inverterData.v_pv_2 : 0}
+        />
+        <PVPowerValue
+          label="Total PV"
+          pValue={isSocketConnected ? inverterData.p_pv : 0}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default PV;
diff --git a/web_viewer/fe_src/src/components/SystemInformation.css b/web_viewer/fe_src/src/components/SystemInformation.css
@@ -159,6 +159,10 @@
     visibility: hidden;
 }
 
+.show-small {
+    display: none;
+}
+
 @media screen and (max-width: 1200px) {
     .inverter .arrows .x-arrow:nth-child(4) {
         display: none;
@@ -196,10 +200,6 @@
     }
 }
 
-.show-small {
-    display: none;
-}
-
 @media screen and (max-width: 900px) {
     .power {
         font-size: 16px;
@@ -285,6 +285,10 @@
     .grid {
         left: -24px;
     }
+
+    .system-title-text {
+        font-size: 16px;
+    }
 }
 
 @media screen and (max-width: 768px) {