Add NFC enable/disable support; update devices, Sonoff, and Tuya
This commit is contained in:
@@ -1,10 +1,12 @@
|
||||
{% set state = device.current_state %}
|
||||
{% set controllable = device.is_controllable %}
|
||||
{% set is_bound = device.board is not none %}
|
||||
|
||||
<div class="card border-0 rounded-4 h-100
|
||||
{% if controllable %}
|
||||
{% if controllable and is_bound %}
|
||||
{% if state %}border-start border-3 border-{{ device.state_color }}
|
||||
{% else %}border-start border-3 border-secondary{% endif %}
|
||||
{% elif not is_bound %}border-start border-3 border-warning
|
||||
{% else %}border-start border-3 border-primary{% endif %}">
|
||||
|
||||
<div class="card-body p-3">
|
||||
@@ -14,7 +16,7 @@
|
||||
style="width:56px;height:56px;background:var(--bs-secondary-bg)">
|
||||
<i class="bi {{ device.effective_icon }}"
|
||||
style="font-size:1.8rem;
|
||||
{% if controllable and state %}color:var(--bs-{{ device.state_color }}){% endif %}"></i>
|
||||
{% if controllable and is_bound and state %}color:var(--bs-{{ device.state_color }}){% endif %}"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 min-w-0">
|
||||
<div class="fw-semibold text-truncate">{{ device.name }}</div>
|
||||
@@ -30,13 +32,23 @@
|
||||
<span class="badge text-bg-secondary" style="font-size:.65rem">
|
||||
{{ device.device_class | capitalize }}
|
||||
</span>
|
||||
{% if device.board %}
|
||||
{% if is_bound %}
|
||||
<span class="badge text-bg-secondary" style="font-size:.65rem">
|
||||
<i class="bi bi-motherboard me-1"></i>{{ device.board.name }}
|
||||
/ {{ device.entity_type | capitalize }} {{ device.entity_num }}
|
||||
{% if device.channel_label %}· {{ device.channel_label }}{% endif %}
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="badge text-bg-warning" style="font-size:.65rem">No board</span>
|
||||
<span class="badge text-bg-warning text-dark" style="font-size:.65rem">
|
||||
<i class="bi bi-exclamation-circle me-1"></i>Unbound
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if device.app_id %}
|
||||
<span class="badge text-bg-dark font-monospace copy-app-id"
|
||||
data-appid="{{ device.app_id }}"
|
||||
title="App ID: {{ device.app_id }} — click to copy"
|
||||
style="font-size:.6rem;cursor:pointer">
|
||||
<i class="bi bi-hash"></i>{{ device.app_id }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -45,10 +57,10 @@
|
||||
<!-- State + controls row -->
|
||||
<div class="d-flex align-items-center justify-content-between mt-2">
|
||||
<span class="badge device-state-badge text-bg-{{ device.state_color }}">
|
||||
{{ device.state_label }}
|
||||
{% if not is_bound %}Virtual{% else %}{{ device.state_label }}{% endif %}
|
||||
</span>
|
||||
<div class="d-flex gap-1">
|
||||
{% if controllable and device.board %}
|
||||
{% if controllable and is_bound %}
|
||||
<button type="button"
|
||||
class="btn btn-sm {% if state %}btn-{{ device.state_color }}{% else %}btn-outline-secondary{% endif %}"
|
||||
onclick="deviceToggle(this, {{ device.id }})"
|
||||
@@ -58,7 +70,7 @@
|
||||
{% endif %}
|
||||
{% if current_user.is_admin() %}
|
||||
<a href="{{ url_for('devices.edit_device', device_id=device.id) }}"
|
||||
class="btn btn-sm btn-outline-secondary" title="Edit">
|
||||
class="btn btn-sm btn-outline-secondary" title="Edit / Bind">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</a>
|
||||
<form method="POST"
|
||||
|
||||
@@ -1,41 +1,57 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{% if device %}Edit Device – {{ device.name }}{% else %}Add Device{% endif %}{% endblock %}
|
||||
{% block title %}{% if device %}Edit Device – {{ device.name }}{% else %}New Device{% endif %}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<nav aria-label="breadcrumb" class="mb-3">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="{{ url_for('devices.list_devices') }}">Devices</a></li>
|
||||
<li class="breadcrumb-item active">
|
||||
{% if device %}Edit – {{ device.name }}{% else %}Add Device{% endif %}
|
||||
{% if device %}Edit – {{ device.name }}{% else %}New Device{% endif %}
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<h2 class="fw-bold mb-1">
|
||||
<i class="bi bi-hdd-stack me-2 text-info"></i>
|
||||
{% if device %}Edit Device{% else %}Add Device{% endif %}
|
||||
</h2>
|
||||
<p class="text-secondary mb-4">
|
||||
Give your device a name and map it to a relay or sensor channel on one of your boards.
|
||||
Once mapped, toggling the device will control the physical hardware.
|
||||
</p>
|
||||
<div class="d-flex align-items-start gap-3 mb-4">
|
||||
<div>
|
||||
<h2 class="fw-bold mb-1">
|
||||
<i class="bi bi-hdd-stack me-2 text-info"></i>
|
||||
{% if device %}Edit Device{% else %}New Device{% endif %}
|
||||
</h2>
|
||||
<p class="text-secondary mb-0">
|
||||
{% if device %}
|
||||
Update identity or change the hardware binding below.
|
||||
{% else %}
|
||||
Define the device identity first — hardware binding is optional and can be added later.
|
||||
{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form method="POST" id="deviceForm">
|
||||
|
||||
<!-- Hidden binding fields submitted with the form -->
|
||||
<input type="hidden" id="hBoardId" name="board_id" value="{{ device.board_id if device and device.board_id else '' }}" />
|
||||
<input type="hidden" id="hEntityType" name="entity_type" value="{{ device.entity_type if device and device.entity_type else '' }}" />
|
||||
<input type="hidden" id="hEntityNum" name="entity_num" value="{{ device.entity_num if device and device.entity_num else '' }}" />
|
||||
<input type="hidden" id="hBoardId" name="board_id" value="{{ device.board_id if device and device.board_id else '' }}" />
|
||||
<input type="hidden" id="hEntityType" name="entity_type" value="{{ device.entity_type if device and device.entity_type else '' }}" />
|
||||
<input type="hidden" id="hEntityNum" name="entity_num" value="{{ device.entity_num if device and device.entity_num else '' }}" />
|
||||
<input type="hidden" id="hHardwareDeviceId" name="hardware_device_id" value="{{ device.hardware_device_id if device and device.hardware_device_id else '' }}" />
|
||||
|
||||
<div class="row g-4">
|
||||
<!-- ─── Step 1 header ────────────────────────────────────────────────────── -->
|
||||
<div class="d-flex align-items-center gap-2 mb-3">
|
||||
<span class="badge rounded-pill bg-primary px-3 py-2" style="font-size:.8rem">
|
||||
<i class="bi bi-1-circle me-1"></i>Device Identity
|
||||
</span>
|
||||
<span class="text-secondary small">Required — the virtual device exists independent of any hardware</span>
|
||||
</div>
|
||||
|
||||
<!-- ══════════════════ LEFT: identity + icon + type ══════════════════════ -->
|
||||
<div class="col-lg-4">
|
||||
<div class="row g-4 mb-4">
|
||||
|
||||
<!-- ══════════════════ LEFT: identity ══════════════════════ -->
|
||||
<div class="col-lg-5">
|
||||
|
||||
<!-- Identity -->
|
||||
<div class="card border-0 rounded-4 mb-4">
|
||||
<div class="card border-0 rounded-4 h-100">
|
||||
<div class="card-body p-4">
|
||||
<h5 class="fw-semibold mb-3"><i class="bi bi-tag me-1 text-info"></i> Identity</h5>
|
||||
<h5 class="fw-semibold mb-3"><i class="bi bi-tag me-1 text-info"></i> Details</h5>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="name">Device name <span class="text-danger">*</span></label>
|
||||
@@ -45,11 +61,37 @@
|
||||
maxlength="128" required />
|
||||
</div>
|
||||
|
||||
<!-- App ID -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="appIdField">
|
||||
Application ID
|
||||
<span class="badge text-bg-info ms-1" style="font-size:.65rem">auto-generated</span>
|
||||
</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text" style="font-family:monospace;font-size:.85rem">
|
||||
<i class="bi bi-hash me-1 text-info"></i>
|
||||
</span>
|
||||
<input type="text" class="form-control font-monospace" id="appIdField" name="app_id"
|
||||
value="{{ device.app_id if device and device.app_id else '' }}"
|
||||
placeholder="auto" maxlength="64"
|
||||
style="font-size:.85rem" />
|
||||
{% if device and device.app_id %}
|
||||
<button type="button" class="btn btn-outline-secondary copy-app-id"
|
||||
data-appid="{{ device.app_id }}" title="Copy to clipboard">
|
||||
<i class="bi bi-clipboard"></i>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="form-text">
|
||||
Stable identifier for layouts & automations. Leave blank to keep current or auto-generate.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="description">Description <span class="text-secondary small">(optional)</span></label>
|
||||
<input type="text" class="form-control" id="description" name="description"
|
||||
value="{{ device.description if device and device.description else '' }}"
|
||||
placeholder="Short description" maxlength="256" />
|
||||
placeholder="e.g. Controls the outdoor courtyard lighting" maxlength="256" />
|
||||
</div>
|
||||
|
||||
<div class="mb-0">
|
||||
@@ -61,12 +103,16 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ══════════════════ RIGHT: type + icon ══════════════════ -->
|
||||
<div class="col-lg-7">
|
||||
|
||||
<!-- Device type -->
|
||||
<div class="card border-0 rounded-4 mb-4">
|
||||
<div class="card-body p-4">
|
||||
<h5 class="fw-semibold mb-3"><i class="bi bi-grid-3x3-gap me-1 text-success"></i> Device Type</h5>
|
||||
<p class="text-secondary small mb-3">Sets default icon, state labels and colours. Auto-filled when you pick a channel.</p>
|
||||
<h5 class="fw-semibold mb-1"><i class="bi bi-grid-3x3-gap me-1 text-success"></i> Device Type</h5>
|
||||
<p class="text-secondary small mb-3">Defines default icon, state labels and colours.</p>
|
||||
|
||||
<div id="relay-types-wrap">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
@@ -103,7 +149,7 @@
|
||||
|
||||
<div class="d-flex align-items-center gap-3 mb-3">
|
||||
<div class="rounded-3 d-flex align-items-center justify-content-center flex-shrink-0"
|
||||
style="width:60px;height:60px;background:var(--bs-secondary-bg)">
|
||||
style="width:58px;height:58px;background:var(--bs-secondary-bg)">
|
||||
<i id="icon-preview" class="bi {{ (device.icon or device.effective_icon) if device else 'bi-toggles' }}"
|
||||
style="font-size:2rem"></i>
|
||||
</div>
|
||||
@@ -132,21 +178,30 @@
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ══════════════════ RIGHT: board + entity card picker ═════════════════ -->
|
||||
<div class="col-lg-8">
|
||||
<div class="card border-0 rounded-4">
|
||||
<div class="card-body p-4">
|
||||
<h5 class="fw-semibold mb-1">
|
||||
<i class="bi bi-motherboard me-1 text-primary"></i> Board & Channel Binding
|
||||
</h5>
|
||||
<p class="text-secondary small mb-4">
|
||||
Select a board, then click the relay or sensor you want to bind to this device.
|
||||
Toggling the device later will directly control the physical hardware.
|
||||
</p>
|
||||
</div><!-- /row step-1 -->
|
||||
|
||||
<!-- ─── Step 2 header ────────────────────────────────────────────────────── -->
|
||||
<div class="d-flex align-items-center gap-2 mb-3">
|
||||
<span class="badge rounded-pill bg-secondary px-3 py-2" style="font-size:.8rem">
|
||||
<i class="bi bi-2-circle me-1"></i>Hardware Binding
|
||||
</span>
|
||||
<span class="badge text-bg-warning" style="font-size:.7rem">Optional</span>
|
||||
<span class="text-secondary small">Link to a physical relay, sensor, Tuya or Sonoff channel</span>
|
||||
</div>
|
||||
|
||||
<div class="card border-0 rounded-4 mb-4">
|
||||
<div class="card-body p-4">
|
||||
<p class="text-secondary small mb-4">
|
||||
Select a board, then click a channel to bind this device to physical hardware.
|
||||
Leave unbound to use the device as a virtual entity in layouts and automations.
|
||||
Once bound, the device can be toggled ON/OFF and shows live state.
|
||||
</p>
|
||||
|
||||
<!-- Board selector -->
|
||||
<div class="mb-4">
|
||||
<label class="form-label fw-semibold" for="boardSelect">Board</label>
|
||||
<div class="mb-4" style="max-width:480px">
|
||||
<label class="form-label fw-semibold" for="boardSelect">
|
||||
<i class="bi bi-motherboard me-1 text-primary"></i> Board
|
||||
</label>
|
||||
<select class="form-select" id="boardSelect">
|
||||
<option value="">— None (virtual / unlinked device) —</option>
|
||||
{% for board in boards %}
|
||||
@@ -193,9 +248,20 @@
|
||||
</div>
|
||||
|
||||
<!-- Selection summary -->
|
||||
<div id="bindSummary" class="alert alert-info d-flex align-items-center gap-3 mt-3" style="display:none">
|
||||
<div id="bindSummary" class="alert alert-info d-flex align-items-center gap-3 mt-3"
|
||||
style="display:{% if device and device.board and device.entity_num %}flex{% else %}none{% endif %}">
|
||||
<i class="bi bi-check-circle-fill fs-5"></i>
|
||||
<div><strong>Bound to:</strong> <span id="bindSummaryText"></span></div>
|
||||
<div>
|
||||
<strong>Bound to:</strong>
|
||||
<span id="bindSummaryText">
|
||||
{% if device and device.board %}
|
||||
{{ device.board.name }} · {{ device.name }}
|
||||
{% if device.hardware_device_id %}
|
||||
<span class="font-monospace text-secondary" style="font-size:.75rem">[{{ device.hardware_device_id }}]</span>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary ms-auto" id="unbindBtn">
|
||||
<i class="bi bi-x me-1"></i>Remove binding
|
||||
</button>
|
||||
@@ -203,13 +269,10 @@
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /row -->
|
||||
|
||||
<!-- ── Submit ────────────────────────────────────────────────────────────── -->
|
||||
<div class="d-flex gap-2 mt-4">
|
||||
<div class="d-flex gap-2 mt-2">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="bi bi-check-circle me-1"></i>
|
||||
{% if device %}Save Changes{% else %}Create Device{% endif %}
|
||||
@@ -226,18 +289,18 @@
|
||||
<script>
|
||||
(function () {
|
||||
const INIT = {
|
||||
boardId: {{ (device.board_id | tojson) if device and device.board_id else 'null' }},
|
||||
entityType: {{ (device.entity_type | tojson) if device and device.entity_type else 'null' }},
|
||||
entityNum: {{ (device.entity_num | tojson) if device and device.entity_num else 'null' }},
|
||||
devClass: {{ (device.device_class | tojson) if device else '"switch"' }},
|
||||
boardId: {{ (device.board_id if device and device.board_id else none) | tojson }},
|
||||
entityType: {{ (device.entity_type if device and device.entity_type else none) | tojson }},
|
||||
entityNum: {{ (device.entity_num if device and device.entity_num else none) | tojson }},
|
||||
devClass: {{ (device.device_class if device else 'switch') | tojson }},
|
||||
};
|
||||
|
||||
// DOM refs
|
||||
const boardSel = document.getElementById("boardSelect");
|
||||
const hBoardId = document.getElementById("hBoardId");
|
||||
const hEntityType = document.getElementById("hEntityType");
|
||||
const hEntityNum = document.getElementById("hEntityNum");
|
||||
const entityLoading = document.getElementById("entityLoading");
|
||||
const boardSel = document.getElementById("boardSelect");
|
||||
const hBoardId = document.getElementById("hBoardId");
|
||||
const hEntityType = document.getElementById("hEntityType");
|
||||
const hEntityNum = document.getElementById("hEntityNum");
|
||||
const hHardwareDeviceId = document.getElementById("hHardwareDeviceId");
|
||||
const entityLoading = document.getElementById("entityLoading");
|
||||
const entityPh = document.getElementById("entityPlaceholder");
|
||||
const relaySection = document.getElementById("relaySection");
|
||||
const inputSection = document.getElementById("inputSection");
|
||||
@@ -254,7 +317,7 @@
|
||||
const relayTypesWrap = document.getElementById("relay-types-wrap");
|
||||
const inputTypesWrap = document.getElementById("input-types-wrap");
|
||||
|
||||
// ── icon preview ─────────────────────────────────────────────────────────
|
||||
// ── icon preview ──────────────────────────────────────────────────────────
|
||||
function updateIconPreview() {
|
||||
const val = iconInput.value.trim();
|
||||
if (val) { iconPreview.className = "bi " + val; return; }
|
||||
@@ -270,6 +333,30 @@
|
||||
|
||||
iconInput.addEventListener("input", updateIconPreview);
|
||||
iconClearBtn.addEventListener("click", () => { iconInput.value = ""; updateIconPreview(); });
|
||||
|
||||
// ── live app_id slug preview ──────────────────────────────────────────────
|
||||
// Mirrors the server-side Device._make_slug() logic in JavaScript.
|
||||
// If the user hasn't manually edited the app_id field, auto-fill it from name.
|
||||
const appIdField = document.getElementById("appIdField");
|
||||
const nameField = document.getElementById("name");
|
||||
let appIdManual = !!(appIdField.value.trim()); // true if pre-filled on edit page
|
||||
|
||||
function makeSlug(str) {
|
||||
return str.toLowerCase().trim()
|
||||
.replace(/[^a-z0-9]+/g, "_")
|
||||
.replace(/^_+|_+$/g, "")
|
||||
.substring(0, 60) || "device";
|
||||
}
|
||||
|
||||
appIdField.addEventListener("input", () => {
|
||||
appIdManual = appIdField.value.trim() !== "";
|
||||
});
|
||||
|
||||
nameField.addEventListener("input", () => {
|
||||
if (!appIdManual) {
|
||||
appIdField.value = makeSlug(nameField.value);
|
||||
}
|
||||
});
|
||||
document.getElementById("iconPalette").addEventListener("click", e => {
|
||||
const btn = e.target.closest("[data-icon]");
|
||||
if (!btn) return;
|
||||
@@ -280,6 +367,17 @@
|
||||
r.addEventListener("change", updateIconPreview)
|
||||
);
|
||||
|
||||
// ── app_id copy button ────────────────────────────────────────────────────
|
||||
document.addEventListener("click", e => {
|
||||
const btn = e.target.closest(".copy-app-id");
|
||||
if (!btn) return;
|
||||
navigator.clipboard.writeText(btn.dataset.appid).then(() => {
|
||||
const orig = btn.innerHTML;
|
||||
btn.innerHTML = '<i class="bi bi-check2"></i>';
|
||||
setTimeout(() => { btn.innerHTML = orig; }, 1200);
|
||||
});
|
||||
});
|
||||
|
||||
// ── device type tab switch ────────────────────────────────────────────────
|
||||
function showRelayTypes(preselect) {
|
||||
relayTypesWrap.style.display = "";
|
||||
@@ -311,11 +409,16 @@
|
||||
|
||||
// ── entity card factory ──────────────────────────────────────────────────
|
||||
function makeCard(item, kind) {
|
||||
const isSelected = hEntityType.value === kind && parseInt(hEntityNum.value) === item.num;
|
||||
const actualKind = item.entity_type || kind;
|
||||
const isSelected = hEntityType.value === actualKind && parseInt(hEntityNum.value) === item.num;
|
||||
const stateColor = kind === "relay"
|
||||
? (item.state ? item.on_color : item.off_color)
|
||||
: (item.active ? item.active_color : item.idle_color);
|
||||
const label = kind === "relay" ? "Relay" : "Input";
|
||||
// For gateway devices the item.name is already the full device name;
|
||||
// only show the numeric channel label for hardware relay/input boards.
|
||||
const subLabel = (actualKind === "tuya" || actualKind === "sonoff")
|
||||
? item.type
|
||||
: (kind === "relay" ? `Relay ${item.num}` : `Input ${item.num}`);
|
||||
|
||||
const col = document.createElement("div");
|
||||
col.className = "col-6 col-md-4 col-xl-3";
|
||||
@@ -323,7 +426,7 @@
|
||||
<div class="card entity-pick-card border-2 rounded-3 h-100
|
||||
${isSelected ? "border-primary bg-primary bg-opacity-10" : "border-transparent"}"
|
||||
style="cursor:pointer;transition:all .15s"
|
||||
data-kind="${kind}" data-num="${item.num}">
|
||||
data-kind="${actualKind}" data-num="${item.num}">
|
||||
<div class="card-body p-3 text-center">
|
||||
<div class="rounded-3 d-flex align-items-center justify-content-center mx-auto mb-2"
|
||||
style="width:48px;height:48px;background:var(--bs-secondary-bg)">
|
||||
@@ -331,13 +434,13 @@
|
||||
style="font-size:1.5rem;${isSelected ? "color:var(--bs-primary)" : ""}"></i>
|
||||
</div>
|
||||
<div class="fw-semibold small text-truncate" title="${item.name}">${item.name}</div>
|
||||
<div class="text-secondary" style="font-size:.7rem">${label} ${item.num}</div>
|
||||
<div class="text-secondary" style="font-size:.7rem">${subLabel}</div>
|
||||
<span class="badge text-bg-${stateColor} mt-1" style="font-size:.65rem">${item.state_label}</span>
|
||||
${isSelected ? '<div class="mt-1"><i class="bi bi-check-circle-fill text-primary"></i></div>' : ''}
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
col.querySelector(".entity-pick-card").addEventListener("click", () => selectEntity(item, kind));
|
||||
col.querySelector(".entity-pick-card").addEventListener("click", () => selectEntity(item, actualKind));
|
||||
return col;
|
||||
}
|
||||
|
||||
@@ -345,6 +448,7 @@
|
||||
function selectEntity(item, kind) {
|
||||
hEntityType.value = kind;
|
||||
hEntityNum.value = item.num;
|
||||
hHardwareDeviceId.value = item.device_id || "";
|
||||
|
||||
document.querySelectorAll(".entity-pick-card").forEach(c => {
|
||||
const mine = c.dataset.kind === kind && parseInt(c.dataset.num) === item.num;
|
||||
@@ -367,21 +471,30 @@
|
||||
}
|
||||
});
|
||||
|
||||
kind === "relay" ? showRelayTypes(item.type) : showInputTypes(item.type);
|
||||
kind === "input" ? showInputTypes(item.type) : showRelayTypes(item.type);
|
||||
|
||||
// Auto-fill name if blank
|
||||
// Auto-fill name if blank; also update app_id preview
|
||||
const nameIn = document.getElementById("name");
|
||||
if (!nameIn.value.trim()) nameIn.value = item.name;
|
||||
if (!nameIn.value.trim()) {
|
||||
nameIn.value = item.name;
|
||||
if (!appIdManual) {
|
||||
appIdField.value = makeSlug(item.name);
|
||||
}
|
||||
}
|
||||
|
||||
// Summary banner
|
||||
const boardName = boardSel.options[boardSel.selectedIndex]?.dataset.name || "Board";
|
||||
bindSummaryTxt.textContent = `${boardName} · ${kind === "relay" ? "Relay" : "Input"} ${item.num} — ${item.name}`;
|
||||
const hwIdLabel = item.device_id ? ` <span class="font-monospace text-secondary" style="font-size:.75rem">[${item.device_id}]</span>` : "";
|
||||
bindSummaryTxt.innerHTML = `${boardName} · ${item.name}${hwIdLabel}`;
|
||||
bindSummary.style.display = "flex";
|
||||
}
|
||||
|
||||
unbindBtn.addEventListener("click", () => {
|
||||
hEntityType.value = "";
|
||||
hEntityNum.value = "";
|
||||
hEntityType.value = "";
|
||||
hEntityNum.value = "";
|
||||
hBoardId.value = "";
|
||||
hHardwareDeviceId.value = "";
|
||||
boardSel.value = "";
|
||||
document.querySelectorAll(".entity-pick-card").forEach(c => {
|
||||
c.classList.remove("border-primary", "bg-primary", "bg-opacity-10");
|
||||
c.classList.add("border-transparent");
|
||||
@@ -389,6 +502,11 @@
|
||||
if (ico) ico.style.color = "";
|
||||
c.querySelector(".entity-check")?.remove();
|
||||
});
|
||||
relaySection.style.display = "none";
|
||||
inputSection.style.display = "none";
|
||||
relayGrid.innerHTML = "";
|
||||
inputGrid.innerHTML = "";
|
||||
entityPh.style.display = "";
|
||||
bindSummary.style.display = "none";
|
||||
});
|
||||
|
||||
@@ -410,10 +528,23 @@
|
||||
entityLoading.style.display = "";
|
||||
|
||||
fetch(`/devices/api/boards/${boardId}/entities`)
|
||||
.then(r => r.json())
|
||||
.then(r => {
|
||||
if (!r.ok) throw new Error(`Server returned ${r.status}`);
|
||||
return r.json();
|
||||
})
|
||||
.then(data => {
|
||||
entityLoading.style.display = "none";
|
||||
|
||||
// Rename section headings for gateway boards
|
||||
if (data.board_type === "tuya_cloud" || data.board_type === "sonoff_ewelink") {
|
||||
const label = data.board_type === "tuya_cloud" ? "Tuya Cloud Devices" : "Sonoff Devices";
|
||||
const note = data.board_type === "tuya_cloud" ? "– controllable via Tuya Cloud" : "– controllable via eWeLink";
|
||||
const relayTitle = document.querySelector("#relaySection .fw-semibold");
|
||||
if (relayTitle) relayTitle.textContent = label;
|
||||
const relayNote = document.querySelector("#relaySection .text-secondary.small");
|
||||
if (relayNote) relayNote.textContent = note;
|
||||
}
|
||||
|
||||
if (data.relays && data.relays.length) {
|
||||
relayCount.textContent = data.relays.length;
|
||||
data.relays.forEach(item => relayGrid.appendChild(makeCard(item, "relay")));
|
||||
@@ -432,21 +563,22 @@
|
||||
|
||||
// Restore selection when editing
|
||||
if (INIT.entityType && INIT.entityNum) {
|
||||
const all = INIT.entityType === "relay" ? data.relays : data.inputs;
|
||||
const all = (INIT.entityType === "relay" || INIT.entityType === "tuya" || INIT.entityType === "sonoff") ? data.relays : data.inputs;
|
||||
const match = all.find(i => i.num === INIT.entityNum);
|
||||
if (match) selectEntity(match, INIT.entityType);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
.catch(err => {
|
||||
entityLoading.style.display = "none";
|
||||
entityPh.innerHTML = `<i class="bi bi-exclamation-triangle text-warning me-2"></i>Failed to load board channels.`;
|
||||
entityPh.innerHTML = `<i class="bi bi-exclamation-triangle text-warning me-2"></i>Failed to load board channels: ${err.message || err}`;
|
||||
entityPh.style.display = "";
|
||||
});
|
||||
}
|
||||
|
||||
boardSel.addEventListener("change", () => {
|
||||
hEntityType.value = "";
|
||||
hEntityNum.value = "";
|
||||
hEntityType.value = "";
|
||||
hEntityNum.value = "";
|
||||
hHardwareDeviceId.value = "";
|
||||
loadBoard(boardSel.value || null);
|
||||
});
|
||||
|
||||
@@ -458,11 +590,16 @@
|
||||
}
|
||||
updateIconPreview();
|
||||
|
||||
if (INIT.boardId) {
|
||||
loadBoard(INIT.boardId);
|
||||
// Use INIT.boardId on the edit page; fall back to boardSel.value on the add
|
||||
// page in case the browser silently restored a previous selection without
|
||||
// firing a change event (common on page reload / back navigation).
|
||||
const initialBoardId = INIT.boardId || boardSel.value || null;
|
||||
if (initialBoardId) {
|
||||
loadBoard(initialBoardId);
|
||||
} else {
|
||||
entityPh.style.display = "";
|
||||
}
|
||||
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
Reference in New Issue
Block a user