ske087/location_managemet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
scheianu
2026-04-13 21:35:17 +03:00
parent 86bfecca26
commit 5340f88ffe
15 changed files with 843 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

279
app/templates/devices/edit.html
View File

@@ -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 &amp; 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 &amp; 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>