From 9de494d6aef6c2a906ca48478b67cdf9583fa0b4 Mon Sep 17 00:00:00 2001
From: Lucas <lucasferguson16@gmail.com>
Date: Fri, 10 May 2024 11:18:41 -0500
Subject: [PATCH] Adding Statists Page!

---
 src/components/NavBar.js            |  3 +++
 src/components/StatistsComponent.js | 38 +++++++++++++++++++++++++++++
 src/index.js                        | 10 +++++++-
 src/routes/StatistsRoute.js         | 20 +++++++++++++++
 4 files changed, 70 insertions(+), 1 deletion(-)
 create mode 100644 src/components/StatistsComponent.js
 create mode 100644 src/routes/StatistsRoute.js

diff --git a/src/components/NavBar.js b/src/components/NavBar.js
index 249c7c8..03ef51c 100644
--- a/src/components/NavBar.js
+++ b/src/components/NavBar.js
@@ -50,6 +50,9 @@ export default class NavBar extends Component {
             <NavLink className="navbar-list-item" id="map" to="/map">
               <span id="map-s">🗺️ Map</span>
             </NavLink>
+            <NavLink className="navbar-list-item" id="map" to="/statists">
+              <span id="map-s">📊 Statists</span>
+            </NavLink>
             <NavLink className="navbar-list-item" id="settings" to="/settings">
               <span id="settings-s">⚙️ Settings</span>
             </NavLink>
diff --git a/src/components/StatistsComponent.js b/src/components/StatistsComponent.js
new file mode 100644
index 0000000..edfd876
--- /dev/null
+++ b/src/components/StatistsComponent.js
@@ -0,0 +1,38 @@
+import React, { Component } from "react";
+import BeldenLogo from "../assets/images/belden-white.png";
+import "../assets/stylesheets/summary.scss";
+
+export default class StatistsComponent extends Component {
+  render() {
+    return (
+      <div className="summary">
+        <div className="summary-image">
+          <img src={BeldenLogo} alt="Belden" />
+        </div>
+        <div className="summary-fieldContainer">
+          <h1 className="summary-title">Summary</h1>
+          <div className="summary-grid">
+            <div className="summary-grid-container">
+              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=8" title="Belden" className="summary-iframe" />
+            </div>
+            <div className="summary-grid-container">
+              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=3" title="Belden" className="summary-iframe" />
+            </div>
+            <div className="summary-grid-container">
+              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7" title="Belden" className="summary-iframe" />
+            </div>
+            <div className="summary-grid-container">
+              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=6" title="Belden" className="summary-iframe" />
+            </div>
+            <div className="summary-grid-container">
+              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=4" title="Belden" className="summary-iframe" />
+            </div>
+            <div className="summary-grid-container">
+              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=2" title="Belden" className="summary-iframe" />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 8cab241..99698a2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,6 +5,7 @@ import SummaryRoute from "./routes/SummaryRoute";
 import BrowseRoute from "./routes/BrowseRoute";
 import SettingsRoute from "./routes/SettingsRoute";
 import MapRoute from "./routes/MapRoute";
+import StatistsRoute from "./routes/StatistsRoute";
 import CableDetailRoute from "./routes/CableDetailRoute";
 
 // Root
@@ -43,6 +44,11 @@ const init = () => {
       element: <MapRoute socket={socket}></MapRoute>,
       // errorElement: <ErrorRoute></ErrorRoute>,
     },
+    {
+      path: "/statists",
+      element: <StatistsRoute socket={socket}></StatistsRoute>,
+      // errorElement: <ErrorRoute></ErrorRoute>,
+    },
     {
       path: "/browse/cable/:cablePos",
       element: <CableDetailRoute socket={socket} />,
@@ -55,4 +61,6 @@ const init = () => {
       <RouterProvider router={router} />
     </div>
   );
-};
\ No newline at end of file
+};
+
+init();
\ No newline at end of file
diff --git a/src/routes/StatistsRoute.js b/src/routes/StatistsRoute.js
new file mode 100644
index 0000000..a0515f3
--- /dev/null
+++ b/src/routes/StatistsRoute.js
@@ -0,0 +1,20 @@
+import React, { Component } from "react";
+import NavBar from "../components/NavBar";
+import StatistsComponent from "../components/StatistsComponent";
+import "../assets/stylesheets/app.scss";
+
+export default class StatistsRoute extends Component {
+  constructor(props) {
+    super(props);
+    document.title = "Summary";
+  }
+
+  render() {
+    return (
+      <div className="container">
+        <NavBar />
+        <StatistsComponent socketHandler={this.props.socket} />
+      </div>
+    );
+  }
+}