From 4318dcd0d2431e447b3bba645b7caa2fce7f766b Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Fri, 7 Feb 2025 21:28:54 -0500
Subject: [PATCH] Added interface status

---
 static/app.js        | 11 +++++++++++
 static/style.css     | 12 ++++++++++++
 templates/index.html | 12 ++++++++++++
 3 files changed, 35 insertions(+)

diff --git a/static/app.js b/static/app.js
index e96d686..0dd2539 100644
--- a/static/app.js
+++ b/static/app.js
@@ -19,6 +19,17 @@ function updateDeviceStatus() {
         .catch(error => console.error('Error updating status:', error));
 }
 
+function updateSystemMetrics() {
+    fetch('/api/metrics')
+        .then(response => response.json())
+        .then(data => {
+            updateInterfaceStatus(data.interfaces);
+            updatePowerMetrics(data.power);
+            updateSystemHealth(data.health);
+        });
+}
+
+//Metric updates like interfaces, power, and health
 function updateDiagnostics() {
     fetch('/api/diagnostics')
         .then(response => response.json())
diff --git a/static/style.css b/static/style.css
index e7e8a50..e2d4f46 100644
--- a/static/style.css
+++ b/static/style.css
@@ -149,3 +149,15 @@ body {
 .offline {
     color: #EF4444;
 }
+
+.interface-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 15px;
+}
+
+.metric-value {
+    font-family: monospace;
+    font-size: 1.2em;
+    color: var(--primary-color);
+}
diff --git a/templates/index.html b/templates/index.html
index d2fb2d8..1e25a17 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -31,6 +31,18 @@
                     {%- endfor %}
                 </div>
             </div>
+            <div class="metric-card">
+                <h2>Interface Status</h2>
+                <div id="interface-details"></div>
+            </div>
+            <div class="metric-card">
+                <h2>System Health</h2>
+                <div id="system-metrics"></div>
+            </div>
+            <div class="metric-card">
+                <h2>Power Management</h2>
+                <div id="power-metrics"></div>
+            </div>
         </div>
     </div>
     <script src="{{ url_for('static', filename='app.js') }}"></script>