119 lines
3.5 KiB
HTML
119 lines
3.5 KiB
HTML
{% extends "base.html" %}
|
||
{% block title %}Devices – Location Management{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="d-flex align-items-center justify-content-between mb-4">
|
||
<h2 class="fw-bold mb-0">
|
||
<i class="bi bi-hdd-stack me-2 text-info"></i>Devices
|
||
</h2>
|
||
{% if current_user.is_admin() %}
|
||
<a href="{{ url_for('devices.add_device') }}" class="btn btn-primary">
|
||
<i class="bi bi-plus-circle me-1"></i> Add Device
|
||
</a>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<p class="text-secondary mb-4">
|
||
Define named, personalized devices (lights, switches, pumps, sensors…) that map to
|
||
specific relay or input channels on your boards. Devices can be placed on Layout pages
|
||
as interactive widgets.
|
||
</p>
|
||
|
||
{% if devices %}
|
||
|
||
{# Group by area #}
|
||
{% set areas = devices | map(attribute='area') | unique | list %}
|
||
{% set no_area = devices | selectattr('area', 'none') | list
|
||
+ devices | selectattr('area', 'equalto', '') | list
|
||
+ devices | selectattr('area', 'equalto', None) | list %}
|
||
|
||
{# Collect non-empty areas #}
|
||
{% set named_areas = [] %}
|
||
{% for d in devices %}
|
||
{% if d.area and d.area != '' and d.area not in named_areas %}
|
||
{% set _ = named_areas.append(d.area) %}
|
||
{% endif %}
|
||
{% endfor %}
|
||
|
||
{# Devices with no area #}
|
||
{% set ungrouped = [] %}
|
||
{% for d in devices %}
|
||
{% if not d.area or d.area == '' %}
|
||
{% set _ = ungrouped.append(d) %}
|
||
{% endif %}
|
||
{% endfor %}
|
||
|
||
{% for area in named_areas %}
|
||
<h5 class="text-secondary fw-semibold mb-3 mt-4">
|
||
<i class="bi bi-geo-alt me-1"></i>{{ area }}
|
||
</h5>
|
||
<div class="row g-3 mb-2">
|
||
{% for device in devices %}
|
||
{% if device.area == area %}
|
||
<div class="col-md-6 col-xl-4" id="device-card-{{ device.id }}">
|
||
{% include "devices/_card.html" %}
|
||
</div>
|
||
{% endif %}
|
||
{% endfor %}
|
||
</div>
|
||
{% endfor %}
|
||
|
||
{% if ungrouped %}
|
||
{% if named_areas %}
|
||
<h5 class="text-secondary fw-semibold mb-3 mt-4">
|
||
<i class="bi bi-three-dots me-1"></i>Other
|
||
</h5>
|
||
{% endif %}
|
||
<div class="row g-3 mb-2">
|
||
{% for device in ungrouped %}
|
||
<div class="col-md-6 col-xl-4" id="device-card-{{ device.id }}">
|
||
{% include "devices/_card.html" %}
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% else %}
|
||
<div class="text-center py-5 text-secondary">
|
||
<i class="bi bi-hdd-stack display-4 d-block mb-3 opacity-25"></i>
|
||
<p class="mb-1">No devices defined yet.</p>
|
||
{% if current_user.is_admin() %}
|
||
<a href="{{ url_for('devices.add_device') }}" class="btn btn-sm btn-outline-primary mt-2">
|
||
<i class="bi bi-plus-circle me-1"></i> Add your first device
|
||
</a>
|
||
{% endif %}
|
||
</div>
|
||
{% endif %}
|
||
{% endblock %}
|
||
|
||
{% block scripts %}
|
||
<script>
|
||
function deviceToggle(btn, deviceId) {
|
||
btn.disabled = true;
|
||
fetch(`/devices/${deviceId}/toggle`, {
|
||
method: "POST",
|
||
headers: {"X-Requested-With": "XMLHttpRequest"}
|
||
})
|
||
.then(r => r.json())
|
||
.then(data => {
|
||
if (!data.ok) { btn.disabled = false; return; }
|
||
const card = document.getElementById("device-card-" + deviceId);
|
||
const badge = card.querySelector(".device-state-badge");
|
||
if (badge) {
|
||
badge.className = "badge device-state-badge text-bg-" + data.state_color;
|
||
badge.textContent = data.state_label;
|
||
}
|
||
// Update toggle icon
|
||
btn.className = btn.className.replace(/btn-(outline-)?[a-z]+/, "btn-" + data.state_color);
|
||
if (data.state) {
|
||
btn.innerHTML = '<i class="bi bi-power me-1"></i>ON';
|
||
} else {
|
||
btn.innerHTML = '<i class="bi bi-power me-1"></i>OFF';
|
||
}
|
||
btn.disabled = false;
|
||
})
|
||
.catch(() => { btn.disabled = false; });
|
||
}
|
||
</script>
|
||
{% endblock %}
|