telot/modem-data-monitor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Jack
2026-08-30 04:48:55 +00:00
commit 295410075f
9 changed files with 966 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/index.html
+147
View File
@@ -0,0 +1,147 @@
{% extends 'base.html' %}
{% block title %}SNMP Monitor - Dashboard{% endblock %}
{% block content %}
<h1>📡 Cellular Data Usage Monitor</h1>
<!-- Add Target Form -->
<div class="card">
<h3 style="margin-bottom: 15px; color: #00d9ff;">Add New Target</h3>
<form action="/add" method="POST">
<div class="form-row">
<input type="text" name="name" placeholder="Device Name" required style="flex: 1;">
<select name="modem_type" style="width: 160px;">
<option value="rv50">Sierra RV50</option>
<option value="bullet-lte">Microhard Bullet-LTE</option>
</select>
<input type="text" name="ip_address" placeholder="IP Address" required style="flex: 1;">
<input type="number" name="port" value="161" placeholder="Port" style="width: 80px;">
<input type="text" name="community" value="public" placeholder="Community" style="flex: 1;">
<input type="number" name="period_minutes" value="5" placeholder="Minutes" style="width: 80px;">
<button type="submit" class="btn btn-primary">Add Target</button>
</div>
</form>
</div>
<!-- Targets Table -->
<div class="card">
<h3 style="margin-bottom: 15px; color: #00d9ff;">Monitored Devices</h3>
{% if targets %}
<table>
<thead>
<tr>
<th>Name</th>
<th>Modem</th>
<th>IP Address</th>
<th>Bytes Sent</th>
<th>Bytes Received</th>
<th>Rate Sent</th>
<th>Rate Recv</th>
<th>Period</th>
<th>Last Poll</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for target in targets %}
<tr>
<td>{{ target.name }}</td>
<td>{{ target.modem_type or 'rv50' }}</td>
<td>{{ target.ip_address }}:{{ target.port }}</td>
<td>{{ target.bytes_sent_fmt }}</td>
<td>{{ target.bytes_recv_fmt }}</td>
<td>{{ target.rate_sent_fmt }}</td>
<td>{{ target.rate_recv_fmt }}</td>
<td>{{ target.period_minutes }} min</td>
<td>{{ target.last_poll or 'Never' }}</td>
<td class="{{ 'status-ok' if target.enabled else 'status-error' }}">
{{ 'Active' if target.enabled else 'Paused' }}
</td>
<td>
<a href="/graph/{{ target.id }}?hours=24" class="btn btn-success">📊 Graph</a>
<button onclick="manualPoll({{ target.id }})" class="btn btn-primary">🔄 Poll</button>
<button onclick="editTarget({{ target.id }}, '{{ target.name }}', '{{ target.ip_address }}', {{ target.port }}, '{{ target.community }}', {{ target.period_minutes }}, {{ target.enabled }}, '{{ target.modem_type or 'rv50' }}')" class="btn btn-success">✏️ Edit</button>
<form action="/delete/{{ target.id }}" method="POST" style="display: inline;"
onsubmit="return confirm('Delete this target?')">
<button type="submit" class="btn btn-danger">🗑️</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<p style="color: #888;">No targets configured. Add one above!</p>
{% endif %}
</div>
<!-- Edit Modal -->
<div id="editModal" class="modal">
<div class="modal-content">
<h3 style="margin-bottom: 15px; color: #00d9ff;">Edit Target</h3>
<form id="editForm" method="POST">
<div class="form-row">
<input type="text" name="name" id="edit_name" placeholder="Device Name" required style="flex: 1;">
</div>
<div class="form-row">
<select name="modem_type" id="edit_modem_type" style="width: 160px;">
<option value="rv50">Sierra RV50</option>
<option value="bullet-lte">Microhard Bullet-LTE</option>
</select>
</div>
<div class="form-row">
<input type="text" name="ip_address" id="edit_ip" placeholder="IP Address" required style="flex: 1;">
<input type="number" name="port" id="edit_port" value="161" style="width: 80px;">
</div>
<div class="form-row">
<input type="text" name="community" id="edit_community" placeholder="Community" style="flex: 1;">
<input type="number" name="period_minutes" id="edit_period" value="5" style="width: 80px;">
</div>
<div class="form-row">
<label><input type="checkbox" name="enabled" id="edit_enabled" checked> Enabled</label>
</div>
<div class="form-row">
<button type="submit" class="btn btn-primary">Save Changes</button>
<button type="button" onclick="closeEditModal()" class="btn btn-danger">Cancel</button>
</div>
</form>
</div>
</div>
{% endblock %}
{% block extra_js %}
<script>
function manualPoll(targetId) {
fetch(`/poll/${targetId}`, { method: 'POST' })
.then(r => r.json())
.then(data => {
if (data.success) {
alert('Poll successful!');
location.reload();
} else {
alert('Poll failed: ' + (data.error || 'Unknown error'));
}
})
.catch(err => alert('Error: ' + err));
}
function editTarget(id, name, ip, port, community, period, enabled, modemType) {
document.getElementById('edit_name').value = name;
document.getElementById('edit_ip').value = ip;
document.getElementById('edit_port').value = port;
document.getElementById('edit_community').value = community;
document.getElementById('edit_period').value = period;
document.getElementById('edit_enabled').checked = enabled == 1;
document.getElementById('edit_modem_type').value = modemType;
document.getElementById('editForm').action = `/edit/${id}`;
document.getElementById('editModal').classList.add('active');
}
function closeEditModal() {
document.getElementById('editModal').classList.remove('active');
}
</script>
{% endblock %}