142 lines
6.9 KiB
HTML
142 lines
6.9 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Dashboard — Demeter IoT{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Stats bar -->
|
|
<div class="stats shadow w-full mb-6 bg-base-100">
|
|
<div class="stat">
|
|
<div class="stat-title">Devices</div>
|
|
<div class="stat-value" id="stat-total">{{ devices|length }}</div>
|
|
<div class="stat-desc">Registered</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-title">Online</div>
|
|
<div class="stat-value text-success" id="stat-online">{{ devices|selectattr('online')|list|length }}</div>
|
|
<div class="stat-desc">Connected via CoAP</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-title">Subscriptions</div>
|
|
<div class="stat-value text-info" id="stat-subs">{{ active_subscriptions }}</div>
|
|
<div class="stat-desc">Active Observe</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Device cards grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" id="devices-grid">
|
|
{% for device in devices %}
|
|
<div class="card bg-base-100 shadow-xl" id="card-{{ device.config.id }}">
|
|
<div class="card-body">
|
|
<!-- Header -->
|
|
<div class="flex items-center justify-between">
|
|
<h2 class="card-title text-lg">{{ device.config.name }}</h2>
|
|
{% if device.online %}
|
|
<div class="badge badge-success gap-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="currentColor" viewBox="0 0 24 24">
|
|
<circle cx="12" cy="12" r="10"/>
|
|
</svg>
|
|
Online
|
|
</div>
|
|
{% else %}
|
|
<div class="badge badge-error gap-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="currentColor" viewBox="0 0 24 24">
|
|
<circle cx="12" cy="12" r="10"/>
|
|
</svg>
|
|
Offline
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<p class="text-sm opacity-60">{{ device.config.ip }}:{{ device.config.port }} · {{ device.config.id }}</p>
|
|
|
|
<div class="divider my-1"></div>
|
|
|
|
<!-- Sensor readings -->
|
|
{% if device.readings %}
|
|
{% for uri, reading in device.readings.items() %}
|
|
<div class="flex justify-between items-center py-1">
|
|
<span class="text-sm font-medium">
|
|
{% if 'soil_moisture' in uri %}
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707" /></svg>
|
|
Soil Moisture
|
|
{% elif 'temperature' in uri %}
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline text-warning" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
|
|
Temperature
|
|
{% elif 'water_level' in uri %}
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline text-info" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" /></svg>
|
|
Water Level
|
|
{% elif 'trigger' in uri %}
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline text-error" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
|
|
Trigger
|
|
{% else %}
|
|
{{ uri }}
|
|
{% endif %}
|
|
</span>
|
|
<span class="font-mono text-lg {% if reading.stale %}opacity-40{% endif %}">
|
|
{% if reading.value is not none %}
|
|
{{ reading.value }}
|
|
<span class="text-xs opacity-60">{{ reading.unit }}</span>
|
|
{% else %}
|
|
<span class="opacity-40">—</span>
|
|
{% endif %}
|
|
</span>
|
|
</div>
|
|
|
|
{% if 'soil_moisture' in uri or 'water_level' in uri %}
|
|
<progress
|
|
class="progress {% if 'soil_moisture' in uri %}progress-success{% else %}progress-info{% endif %} w-full h-2"
|
|
value="{{ reading.value or 0 }}"
|
|
max="100">
|
|
</progress>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% else %}
|
|
<p class="text-sm opacity-40 italic">No readings yet</p>
|
|
{% endif %}
|
|
|
|
<!-- Card actions -->
|
|
<div class="card-actions justify-end mt-2">
|
|
<a href="/dashboard/devices/{{ device.config.id }}" class="btn btn-sm btn-outline">Details</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
{% if not devices %}
|
|
<div class="col-span-full">
|
|
<div class="alert alert-info">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
<span>No devices configured. Edit <code>config/devices.yaml</code> and restart the server.</span>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
// Auto-refresh readings every 5 seconds
|
|
setInterval(async () => {
|
|
try {
|
|
const resp = await fetch('/dashboard/api/readings');
|
|
const data = await resp.json();
|
|
|
|
// Update online count
|
|
let online = 0;
|
|
for (const [id, dev] of Object.entries(data.devices)) {
|
|
if (dev.online) online++;
|
|
|
|
// Update readings in each card
|
|
// (Full re-render would be more robust, but this is POC)
|
|
}
|
|
|
|
const statOnline = document.getElementById('stat-online');
|
|
if (statOnline) statOnline.textContent = online;
|
|
} catch (e) {
|
|
console.warn('Auto-refresh failed:', e);
|
|
}
|
|
}, 5000);
|
|
</script>
|
|
{% endblock %}
|