update

templates/dashboard.html

@@ -0,0 +1,111 @@
+{% extends "base.html" %}
+
+{% block title %}Dashboard - Status Monitor{% endblock %}
+
+{% block content %}
+<h2>Services</h2>
+
+<form id="add-service-form" class="add-form">
+    <input type="text" name="name" placeholder="Service name" required>
+    <input type="text" name="target" placeholder="URL or host:port" required>
+    <select name="protocol">
+        <option value="https">HTTPS</option>
+        <option value="http">HTTP</option>
+        <option value="tcp">TCP</option>
+    </select>
+    <input type="number" name="interval_seconds" value="60" min="10" max="3600" title="Check interval (seconds)">
+    <button type="submit">Add Service</button>
+</form>
+<script>
+document.getElementById('add-service-form').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const form = e.target;
+    const payload = {
+        name: form.name.value.trim(),
+        target: form.target.value.trim(),
+        protocol: form.protocol.value,
+        interval_seconds: parseInt(form.interval_seconds.value, 10) || 60
+    };
+    const res = await fetch('{{ url_for("api_add_service") }}', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
+        body: JSON.stringify(payload)
+    });
+    if (res.ok) {
+        window.location.reload();
+    } else {
+        const err = await res.json().catch(() => ({}));
+        alert(err.error || 'Failed to add service');
+    }
+});
+document.addEventListener('click', async (e) => {
+    const btn = e.target.closest('.btn-delete');
+    if (!btn) return;
+    e.preventDefault();
+    if (!confirm('Delete "' + btn.dataset.name + '"?')) return;
+    const res = await fetch('/api/services/' + btn.dataset.id, { method: 'DELETE' });
+    if (res.ok) window.location.reload();
+    else alert('Failed to delete');
+});
+</script>
+
+<table class="services-table">
+    <thead>
+        <tr>
+            <th>Name</th>
+            <th>Target</th>
+            <th>Protocol</th>
+            <th>Status</th>
+            <th>Uptime</th>
+            <th>Last Check</th>
+            <th>Response</th>
+            <th>Report</th>
+            <th></th>
+        </tr>
+    </thead>
+    <tbody>
+        {% for s in services %}
+        <tr>
+            <td>{{ s.name }}</td>
+            <td><code>{{ s.target }}</code></td>
+            <td>{{ s.protocol | upper }}</td>
+            <td>
+                {% if s.last_success is none %}
+                <span class="badge badge-pending">Pending</span>
+                {% elif s.last_success %}
+                <span class="badge badge-up">Up</span>
+                {% else %}
+                <span class="badge badge-down">Down</span>
+                {% endif %}
+            </td>
+            <td>
+                {% if s.uptime_pct is not none %}
+                <a href="{{ url_for('report', service_id=s.id) }}">{{ s.uptime_pct }}%</a>
+                {% else %}
+                -
+                {% endif %}
+            </td>
+            <td>{{ s.last_check[:19] if s.last_check else '-' }}</td>
+            <td>
+                {% if s.last_response_ms is not none %}
+                {{ (s.last_response_ms | round(0) | int) }} ms
+                {% else %}
+                -
+                {% endif %}
+            </td>
+            <td>
+                <a href="{{ url_for('report', service_id=s.id) }}">Report</a>
+                <a href="{{ url_for('edit_service', service_id=s.id) }}" style="margin-left: 0.5rem;">Edit</a>
+            </td>
+            <td>
+                <button type="button" class="btn-delete" data-id="{{ s.id }}" data-name="{{ s.name }}" title="Delete">Delete</button>
+            </td>
+        </tr>
+        {% else %}
+        <tr>
+            <td colspan="9">No services yet. Add one above.</td>
+        </tr>
+        {% endfor %}
+    </tbody>
+</table>
+{% endblock %}