add API code for /api/packets

meshview/templates/stats.html.old

@@ -0,0 +1,80 @@
+{% extends "base.html" %}
+
+{% block css %}
+    #packet_details {
+        height: 95vh;
+        overflow: auto;
+    }
+
+    .main-container, .container {
+        max-width: 600px;
+        margin: 0 auto;
+        text-align: center;
+    }
+
+    .card-section {
+        background-color: #272b2f;
+        border: 1px solid #474b4e;
+        padding: 15px 20px;
+        margin-bottom: 10px;
+        border-radius: 10px;
+        transition: background-color 0.2s ease;
+    }
+
+    .card-section:hover {
+        background-color: #2f3338;
+    }
+
+    .section-header {
+        font-size: 16px;
+        margin: 0;
+        font-weight: 500;
+    }
+
+    .section-value {
+        font-weight: 700;
+        color: #03dac6;
+    }
+
+    .percentage {
+        font-size: 12px;
+        color: #ffeb3b;
+        font-weight: 400;
+    }
+
+    .main-header {
+        font-size: 22px;
+        margin-bottom: 20px;
+        font-weight: 600;
+    }
+{% endblock %}
+
+{% block body %}
+<div class="main-container">
+    <h2 class="main-header">Mesh Statistics</h2>
+
+    <!-- Section for Total Nodes -->
+    <div class="card-section">
+        <p class="section-header">
+            Total Active Nodes (24 hours): <br>
+            <span class="section-value">{{ "{:,}".format(total_nodes) }}</span>
+        </p>
+    </div>
+
+    <!-- Section for Total Packets -->
+    <div class="card-section">
+        <p class="section-header">
+            Total Packets (14 days):
+            <span class="section-value">{{ "{:,}".format(total_packets) }}</span>
+        </p>
+    </div>
+
+    <!-- Section for Total MQTT Reports -->
+    <div class="card-section">
+        <p class="section-header">
+            Total MQTT Reports (14 days):
+            <span class="section-value">{{ "{:,}".format(total_packets_seen) }}</span>
+        </p>
+    </div>
+</div>
+{% endblock %}