initial commit

2026-08-30 04:48:55 +00:00
commit 295410075f
9 changed files with 966 additions and 0 deletions
@@ -0,0 +1,79 @@
+{% extends 'base.html' %}
+
+{% block title %}Graph - {{ target.name }}{% endblock %}
+
+{% block extra_css %}
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+{% endblock %}
+
+{% block content %}
+<h1>📊 {{ target.name }} - Data Usage</h1>
+
+<div class="card">
+    <div style="margin-bottom: 15px;">
+        <a href="/graph/{{ target.id }}?hours=6" class="btn btn-success">6h</a>
+        <a href="/graph/{{ target.id }}?hours=24" class="btn btn-success">24h</a>
+        <a href="/graph/{{ target.id }}?hours=168" class="btn btn-success">7d</a>
+        <a href="/" class="btn btn-primary">← Back</a>
+    </div>
+    
+    <canvas id="usageChart" style="max-height: 400px;"></canvas>
+</div>
+
+<div class="card">
+    <h3 style="margin-bottom: 15px; color: #00d9ff;">Device Info</h3>
+    <p><strong>Name:</strong> {{ target.name }}</p>
+    <p><strong>Modem Type:</strong> {{ target.modem_type or 'rv50' }}</p>
+    <p><strong>IP:</strong> {{ target.ip_address }}:{{ target.port }}</p>
+    <p><strong>Community:</strong> {{ target.community }}</p>
+    <p><strong>Poll Period:</strong> {{ target.period_minutes }} minutes</p>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+const labels = {{ labels | tojson }};
+const sentData = {{ sent_data | tojson }};
+const recvData = {{ recv_data | tojson }};
+
+// Convert to KB for readability
+const sentKB = sentData.map(v => v ? (v / 1024).toFixed(2) : 0);
+const recvKB = recvData.map(v => v ? (v / 1024).toFixed(2) : 0);
+
+new Chart(document.getElementById('usageChart'), {
+    type: 'line',
+    data: {
+        labels: labels,
+        datasets: [
+            {
+                label: 'Bytes Sent (KB)',
+                data: sentKB,
+                borderColor: '#00d9ff',
+                backgroundColor: 'rgba(0, 217, 255, 0.1)',
+                fill: true,
+                tension: 0.4
+            },
+            {
+                label: 'Bytes Received (KB)',
+                data: recvKB,
+                borderColor: '#4ade80',
+                backgroundColor: 'rgba(74, 222, 128, 0.1)',
+                fill: true,
+                tension: 0.4
+            }
+        ]
+    },
+    options: {
+        responsive: true,
+        maintainAspectRatio: true,
+        plugins: {
+            legend: { labels: { color: '#eee' } }
+        },
+        scales: {
+            x: { ticks: { color: '#888' }, grid: { color: '#0f3460' } },
+            y: { ticks: { color: '#888' }, grid: { color: '#0f3460' } }
+        }
+    }
+});
+</script>
+{% endblock %}