Adding the new rewrite

2026-04-04 13:53:57 -04:00
1 parent 4aca9f08d1
commit 9b48b01d1d
@@ -1,46 +1,54 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <title>UPS Dashboard</title>
-  <link rel="stylesheet" href="/static/css/style.css" />
-  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-</head>
-<body>
-  <div class="header">
-    <h1>APC UPS Dashboard</h1>
-    <nav>
-      <a href="/config" class="config-link">⚙️ Configuration</a>
-    </nav>
+{% extends "base.html" %}
+{% block title %}Dashboard — UPS{% endblock %}
+{% block head_extra %}
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+{% endblock %}
+{% block content %}
+<section class="fleet-overview" id="fleet-overview">
+  <div class="fleet-card">
+    <div class="fleet-stat">
+      <span class="fleet-stat-label">Total UPS</span>
+      <span class="fleet-stat-value" id="fleet-total">-</span>
+    </div>
+    <div class="fleet-stat"><span class="fleet-stat-label">Online</span><span class="fleet-stat-value online" id="fleet-online">-</span></div>
+    <div class="fleet-stat"><span class="fleet-stat-label">On Battery</span><span class="fleet-stat-value onbatt" id="fleet-onbatt">-</span></div>
+    <div class="fleet-stat"><span class="fleet-stat-label">Offline</span><span class="fleet-stat-value offline" id="fleet-offline">-</span></div>
+    <div class="fleet-stat"><span class="fleet-stat-label">Total Load (W)</span><span class="fleet-stat-value" id="fleet-watts">-</span></div>
+    <div class="fleet-stat"><span class="fleet-stat-label">Min Runtime</span><span class="fleet-stat-value" id="fleet-min-runtime">-</span></div>
  </div>
-  <div id="ups-cards" data-ui='{{ ui_cfg | tojson }}'>
-    {% for ups in ups_list %}
-      <div class="card" id="card-{{ ups.name }}">
-        <div class="card-header">
-          <h2>{{ ups.name }}</h2>
-          <div class="ups-connection" data-field-conn>{{ ups.host }}:{{ ups.port }}</div>
-          <button class="add-metric-btn" data-add-metric title="Add metric tile">+</button>
-          <button class="reset-layout-btn" data-reset-layout title="Reset tile layout">⟳</button>
-        </div>
-        <div class="metrics">
-          <div class="highline">
-            <span class="ups-status unknown" data-field="STATUS">-</span>
-            <span class="badge" data-field="RUNTIME_MINUTES" data-badge="runtime">- m</span>
-            <span class="badge" data-field="DERIVED_WATTS" data-badge="watts">- W</span>
-            <span class="badge" data-field="HEADROOM_PCT" data-badge="headroom">- headroom</span>
-          </div>
-          <div class="tile-grid" data-tile-grid></div>
-        </div>
-        <div class="ups-footer" data-ups-footer></div>
+</section>
+
+<div id="ups-cards" data-ui='{{ ui_cfg | tojson }}'>
+  {% for ups in ups_list %}
+    <div class="card" id="card-{{ ups.name }}">
+      <div class="card-header">
+        <h2>
+          <span class="state-dot" data-state-dot></span>
+          {{ ups.name }}
+        </h2>
+        <div class="ups-connection" data-field-conn>{{ ups.host }}:{{ ups.port }}</div>
+        <button class="reset-layout-btn" data-reset-layout title="Reset tile layout">⟳</button>
      </div>
-    {% endfor %}
-    {% if not ups_list %}
-      <div class="empty-state">
-        <h3>No UPS Configured</h3>
-        <p>Get started by <a href="/config">adding a UPS configuration</a>.</p>
+      <div class="metrics">
+        <div class="highline">
+          <span class="ups-status unknown" data-field="STATUS">-</span>
+          <span class="badge" data-field="RUNTIME_MINUTES" data-badge="runtime">- m</span>
+          <span class="badge" data-field="DERIVED_WATTS" data-badge="watts">- W</span>
+          <span class="badge" data-field="HEADROOM_PCT" data-badge="headroom">- headroom</span>
+        </div>
+        <div class="tile-grid" data-tile-grid></div>
      </div>
-    {% endif %}
-  </div>
-<script src="/static/js/dashboard.js?v=1"></script>
-</body>
-</html>
+      <div class="ups-footer" data-ups-footer></div>
+    </div>
+  {% endfor %}
+  {% if not ups_list %}
+    <div class="empty-state">
+      <h3>No UPS Configured</h3>
+      <p>Get started by <a href="/config">adding a UPS configuration</a>.</p>
+    </div>
+  {% endif %}
+</div>
+{% endblock %}
+{% block scripts %}
+<script src="/static/js/dashboard.js?v=2"></script>
+{% endblock %}