modem-data-monitor/templates/index.html

{% 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 %}