Add NFC enable/disable support; update devices, Sonoff, and Tuya

app/templates/devices/list.html

@@ -2,32 +2,8 @@
 {% 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 #}
+{# ── Collect grouped data ─────────────────────────────────────────────────── #}
 {% set named_areas = [] %}
 {% for d in devices %}
   {% if d.area and d.area != '' and d.area not in named_areas %}
@@ -35,7 +11,81 @@
   {% endif %}
 {% endfor %}
 
-{# Devices with no area #}
+{% set bound_count   = devices | selectattr('board') | list | length %}
+{% set unbound_count = devices | length - bound_count %}
+
+{# ── Page header ──────────────────────────────────────────────────────────── #}
+<div class="d-flex align-items-center justify-content-between mb-3">
+  <div>
+    <h2 class="fw-bold mb-0">
+      <i class="bi bi-hdd-stack me-2 text-info"></i>Devices
+    </h2>
+    <p class="text-secondary small mb-0 mt-1">
+      Virtual devices are independent app entities — bind them to hardware when needed.
+    </p>
+  </div>
+  {% 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>
+
+{# ── Stats bar ─────────────────────────────────────────────────────────────── #}
+{% if devices %}
+<div class="row g-2 mb-4">
+  <div class="col-4 col-md-3 col-lg-2">
+    <div class="card border-0 rounded-3 text-center py-2 px-1" style="background:var(--bs-secondary-bg)">
+      <div class="fw-bold fs-5 mb-0">{{ devices | length }}</div>
+      <div class="text-secondary" style="font-size:.72rem">Total</div>
+    </div>
+  </div>
+  <div class="col-4 col-md-3 col-lg-2">
+    <div class="card border-0 rounded-3 text-center py-2 px-1" style="background:var(--bs-secondary-bg)">
+      <div class="fw-bold fs-5 mb-0 text-success">{{ bound_count }}</div>
+      <div class="text-secondary" style="font-size:.72rem">Bound</div>
+    </div>
+  </div>
+  <div class="col-4 col-md-3 col-lg-2">
+    <div class="card border-0 rounded-3 text-center py-2 px-1" style="background:var(--bs-secondary-bg)">
+      <div class="fw-bold fs-5 mb-0 text-warning">{{ unbound_count }}</div>
+      <div class="text-secondary" style="font-size:.72rem">Unbound</div>
+    </div>
+  </div>
+</div>
+
+{# ── Search ────────────────────────────────────────────────────────────────── #}
+<div class="mb-4">
+  <div class="input-group input-group-sm" style="max-width:340px">
+    <span class="input-group-text"><i class="bi bi-search"></i></span>
+    <input type="text" class="form-control" id="deviceSearch"
+           placeholder="Filter by name, area or app id…">
+    <button class="btn btn-outline-secondary" type="button" id="deviceSearchClear">
+      <i class="bi bi-x"></i>
+    </button>
+  </div>
+</div>
+
+{# ── Area groups ──────────────────────────────────────────────────────────── #}
+{% for area in named_areas %}
+<h5 class="text-secondary fw-semibold mb-3 mt-3 area-heading">
+  <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 device-row" id="device-card-{{ device.id }}"
+       data-name="{{ device.name | lower }}"
+       data-area="{{ (device.area or '') | lower }}"
+       data-appid="{{ (device.app_id or '') | lower }}">
+    {% include "devices/_card.html" %}
+  </div>
+  {% endif %}
+  {% endfor %}
+</div>
+{% endfor %}
+
+{# ── Unbound / no-area devices ─────────────────────────────────────────────── #}
 {% set ungrouped = [] %}
 {% for d in devices %}
   {% if not d.area or d.area == '' %}
@@ -43,30 +93,18 @@
   {% 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">
+  <h5 class="text-secondary fw-semibold mb-3 mt-3 area-heading">
     <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 }}">
+    <div class="col-md-6 col-xl-4 device-row" id="device-card-{{ device.id }}"
+         data-name="{{ device.name | lower }}"
+         data-area=""
+         data-appid="{{ (device.app_id or '') | lower }}">
       {% include "devices/_card.html" %}
     </div>
     {% endfor %}
@@ -88,6 +126,7 @@
 
 {% block scripts %}
 <script>
+// ── toggle relay / Tuya / Sonoff ──────────────────────────────────────────────
 function deviceToggle(btn, deviceId) {
   btn.disabled = true;
   fetch(`/devices/${deviceId}/toggle`, {
@@ -96,23 +135,96 @@ function deviceToggle(btn, deviceId) {
   })
   .then(r => r.json())
   .then(data => {
-    if (!data.ok) { btn.disabled = false; return; }
+    if (!data.ok) {
+      btn.disabled = false;
+      showToast(data.error || "Toggle failed.", "danger");
+      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.innerHTML = data.state
+      ? '<i class="bi bi-power me-1"></i>ON'
+      : '<i class="bi bi-power me-1"></i>OFF';
+    // Update left border colour
+    const cardEl = card.querySelector(".card");
+    if (cardEl) {
+      cardEl.classList.remove("border-success", "border-secondary", "border-warning",
+                              "border-danger", "border-info", "border-primary");
+      cardEl.classList.add("border-" + data.state_color);
     }
     btn.disabled = false;
   })
-  .catch(() => { btn.disabled = false; });
+  .catch(() => { btn.disabled = false; showToast("Network error.", "danger"); });
+}
+
+function showToast(msg, type) {
+  let container = document.getElementById("toast-container");
+  if (!container) {
+    container = document.createElement("div");
+    container.id = "toast-container";
+    container.className = "toast-container position-fixed bottom-0 end-0 p-3";
+    container.style.zIndex = 1100;
+    document.body.appendChild(container);
+  }
+  const id = "t" + Date.now();
+  container.insertAdjacentHTML("beforeend",
+    `<div id="${id}" class="toast align-items-center text-bg-${type} border-0" role="alert">
+      <div class="d-flex">
+        <div class="toast-body">${msg}</div>
+        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
+      </div>
+    </div>`);
+  const el = document.getElementById(id);
+  const t = new bootstrap.Toast(el, {delay: 4000});
+  t.show();
+  el.addEventListener("hidden.bs.toast", () => el.remove());
+}
+
+// ── app_id copy ───────────────────────────────────────────────────────────────
+document.addEventListener("click", e => {
+  const btn = e.target.closest(".copy-app-id");
+  if (!btn) return;
+  const txt = btn.dataset.appid;
+  navigator.clipboard.writeText(txt).then(() => {
+    const orig = btn.innerHTML;
+    btn.innerHTML = '<i class="bi bi-check2"></i>';
+    setTimeout(() => { btn.innerHTML = orig; }, 1200);
+  });
+});
+
+// ── search / filter ────────────────────────────────────────────────────────────
+const searchInput = document.getElementById("deviceSearch");
+const searchClear = document.getElementById("deviceSearchClear");
+if (searchInput) {
+  function applyFilter() {
+    const q = searchInput.value.toLowerCase().trim();
+    let anyVisible = {};
+    document.querySelectorAll(".device-row").forEach(row => {
+      const match = !q
+        || row.dataset.name.includes(q)
+        || row.dataset.area.includes(q)
+        || row.dataset.appid.includes(q);
+      row.style.display = match ? "" : "none";
+      const heading = row.closest(".row")?.previousElementSibling;
+      if (heading && heading.classList.contains("area-heading")) {
+        anyVisible[heading.dataset.id || heading.textContent] = (anyVisible[heading.dataset.id || heading.textContent] || false) || match;
+      }
+    });
+    // Hide area headings whose entire group is filtered out
+    document.querySelectorAll(".area-heading").forEach(h => {
+      const nextRow = h.nextElementSibling;
+      if (!nextRow) return;
+      const visCount = nextRow.querySelectorAll(".device-row:not([style*='none'])").length;
+      h.style.display = visCount ? "" : "none";
+    });
+  }
+  searchInput.addEventListener("input", applyFilter);
+  searchClear.addEventListener("click", () => { searchInput.value = ""; applyFilter(); });
 }
 </script>
 {% endblock %}