updated interface
This commit is contained in:
75
app/templates/devices/_card.html
Normal file
75
app/templates/devices/_card.html
Normal file
@@ -0,0 +1,75 @@
|
||||
{% set state = device.current_state %}
|
||||
{% set controllable = device.is_controllable %}
|
||||
|
||||
<div class="card border-0 rounded-4 h-100
|
||||
{% if controllable %}
|
||||
{% if state %}border-start border-3 border-{{ device.state_color }}
|
||||
{% else %}border-start border-3 border-secondary{% endif %}
|
||||
{% else %}border-start border-3 border-primary{% endif %}">
|
||||
|
||||
<div class="card-body p-3">
|
||||
<!-- Icon + name row -->
|
||||
<div class="d-flex align-items-start gap-3 mb-2">
|
||||
<div class="rounded-3 d-flex align-items-center justify-content-center flex-shrink-0"
|
||||
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>
|
||||
</div>
|
||||
<div class="flex-grow-1 min-w-0">
|
||||
<div class="fw-semibold text-truncate">{{ device.name }}</div>
|
||||
{% if device.description %}
|
||||
<div class="text-secondary small text-truncate">{{ device.description }}</div>
|
||||
{% endif %}
|
||||
<div class="d-flex flex-wrap gap-1 mt-1">
|
||||
{% if device.area %}
|
||||
<span class="badge text-bg-secondary" style="font-size:.65rem">
|
||||
<i class="bi bi-geo-alt me-1"></i>{{ device.area }}
|
||||
</span>
|
||||
{% endif %}
|
||||
<span class="badge text-bg-secondary" style="font-size:.65rem">
|
||||
{{ device.device_class | capitalize }}
|
||||
</span>
|
||||
{% if device.board %}
|
||||
<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 }}
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="badge text-bg-warning" style="font-size:.65rem">No board</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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 }}
|
||||
</span>
|
||||
<div class="d-flex gap-1">
|
||||
{% if controllable and device.board %}
|
||||
<button type="button"
|
||||
class="btn btn-sm {% if state %}btn-{{ device.state_color }}{% else %}btn-outline-secondary{% endif %}"
|
||||
onclick="deviceToggle(this, {{ device.id }})"
|
||||
title="Toggle {{ device.name }}">
|
||||
<i class="bi bi-power me-1"></i>{% if state %}ON{% else %}OFF{% endif %}
|
||||
</button>
|
||||
{% 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">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</a>
|
||||
<form method="POST"
|
||||
action="{{ url_for('devices.delete_device', device_id=device.id) }}"
|
||||
onsubmit="return confirm('Delete device \'{{ device.name }}\'?')">
|
||||
<button type="submit" class="btn btn-sm btn-outline-danger" title="Delete">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
473
app/templates/devices/edit.html
Normal file
473
app/templates/devices/edit.html
Normal file
@@ -0,0 +1,473 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{% if device %}Edit Device – {{ device.name }}{% else %}Add 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 %}
|
||||
</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>
|
||||
|
||||
<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 '' }}" />
|
||||
|
||||
<div class="row g-4">
|
||||
|
||||
<!-- ══════════════════ LEFT: identity + icon + type ══════════════════════ -->
|
||||
<div class="col-lg-4">
|
||||
|
||||
<!-- Identity -->
|
||||
<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-tag me-1 text-info"></i> Identity</h5>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="name">Device name <span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="name" name="name"
|
||||
value="{{ device.name if device else '' }}"
|
||||
placeholder="e.g. Outdoor Light 1 – Courtyard"
|
||||
maxlength="128" required />
|
||||
</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" />
|
||||
</div>
|
||||
|
||||
<div class="mb-0">
|
||||
<label class="form-label" for="area">Area / Location <span class="text-secondary small">(optional)</span></label>
|
||||
<input type="text" class="form-control" id="area" name="area"
|
||||
value="{{ device.area if device and device.area else '' }}"
|
||||
placeholder="e.g. Courtyard, Living Room, Garage"
|
||||
maxlength="64" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<div id="relay-types-wrap">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
{% for tkey, tdef in relay_types.items() %}
|
||||
<label class="entity-type-pill" title="{{ tdef.label }}" data-icon="{{ tdef.icon }}">
|
||||
<input type="radio" name="device_class" value="{{ tkey }}" hidden
|
||||
{% if (device and device.device_class == tkey) or (not device and tkey == 'switch') %}checked{% endif %} />
|
||||
<i class="bi {{ tdef.icon }}"></i>
|
||||
<span>{{ tdef.label }}</span>
|
||||
</label>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="input-types-wrap" style="display:none">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
{% for tkey, tdef in input_types.items() %}
|
||||
<label class="entity-type-pill" title="{{ tdef.label }}" data-icon="{{ tdef.icon }}">
|
||||
<input type="radio" name="device_class" value="{{ tkey }}" hidden
|
||||
{% if device and device.device_class == tkey and device.entity_type == 'input' %}checked{% endif %} />
|
||||
<i class="bi {{ tdef.icon }}"></i>
|
||||
<span>{{ tdef.label }}</span>
|
||||
</label>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom icon -->
|
||||
<div class="card border-0 rounded-4">
|
||||
<div class="card-body p-4">
|
||||
<h5 class="fw-semibold mb-3"><i class="bi bi-palette me-1 text-warning"></i> Custom Icon</h5>
|
||||
|
||||
<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)">
|
||||
<i id="icon-preview" class="bi {{ (device.icon or device.effective_icon) if device else 'bi-toggles' }}"
|
||||
style="font-size:2rem"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<div class="input-group input-group-sm">
|
||||
<span class="input-group-text"><i class="bi bi-search"></i></span>
|
||||
<input type="text" class="form-control" id="iconInput" name="icon"
|
||||
value="{{ device.icon if device and device.icon else '' }}"
|
||||
placeholder="bi-lightbulb-fill" />
|
||||
<button type="button" class="btn btn-outline-secondary" id="iconClearBtn"><i class="bi bi-x"></i></button>
|
||||
</div>
|
||||
<div class="form-text">Leave blank to use device type default.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-wrap gap-1" id="iconPalette">
|
||||
{% for icon_cls, icon_name in icon_palette %}
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary p-1"
|
||||
title="{{ icon_name }}" data-icon="{{ icon_cls }}">
|
||||
<i class="bi {{ icon_cls }}" style="font-size:1.1rem"></i>
|
||||
</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</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>
|
||||
|
||||
<!-- Board selector -->
|
||||
<div class="mb-4">
|
||||
<label class="form-label fw-semibold" for="boardSelect">Board</label>
|
||||
<select class="form-select" id="boardSelect">
|
||||
<option value="">— None (virtual / unlinked device) —</option>
|
||||
{% for board in boards %}
|
||||
<option value="{{ board.id }}" data-name="{{ board.name }}"
|
||||
{% if device and device.board_id == board.id %}selected{% endif %}>
|
||||
{{ board.name }} · {{ board.board_type }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Entity panel -->
|
||||
<div id="entityPanel">
|
||||
|
||||
<div id="entityLoading" class="text-center py-4 text-secondary" style="display:none">
|
||||
<div class="spinner-border spinner-border-sm me-2"></div>Loading channels…
|
||||
</div>
|
||||
|
||||
<div id="entityPlaceholder" class="text-center py-5 text-secondary">
|
||||
<i class="bi bi-arrow-up-circle display-5 d-block mb-2 opacity-25"></i>
|
||||
Select a board above to see its relay and sensor channels.
|
||||
</div>
|
||||
|
||||
<!-- Relays -->
|
||||
<div id="relaySection" style="display:none">
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<i class="bi bi-lightning-charge text-warning me-2"></i>
|
||||
<span class="fw-semibold">Relay Outputs</span>
|
||||
<span class="badge text-bg-secondary ms-2" id="relayCount"></span>
|
||||
<span class="text-secondary small ms-2">– controllable (ON / OFF)</span>
|
||||
</div>
|
||||
<div class="row g-2 mb-4" id="relayGrid"></div>
|
||||
</div>
|
||||
|
||||
<!-- Inputs -->
|
||||
<div id="inputSection" style="display:none">
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<i class="bi bi-arrow-down-circle text-success me-2"></i>
|
||||
<span class="fw-semibold">Digital Inputs / Sensors</span>
|
||||
<span class="badge text-bg-secondary ms-2" id="inputCount"></span>
|
||||
<span class="text-secondary small ms-2">– read-only</span>
|
||||
</div>
|
||||
<div class="row g-2" id="inputGrid"></div>
|
||||
</div>
|
||||
|
||||
<!-- Selection summary -->
|
||||
<div id="bindSummary" class="alert alert-info d-flex align-items-center gap-3 mt-3" style="display:none">
|
||||
<i class="bi bi-check-circle-fill fs-5"></i>
|
||||
<div><strong>Bound to:</strong> <span id="bindSummaryText"></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>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /row -->
|
||||
|
||||
<!-- ── Submit ────────────────────────────────────────────────────────────── -->
|
||||
<div class="d-flex gap-2 mt-4">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="bi bi-check-circle me-1"></i>
|
||||
{% if device %}Save Changes{% else %}Create Device{% endif %}
|
||||
</button>
|
||||
<a href="{{ url_for('devices.list_devices') }}" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-x me-1"></i>Cancel
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<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"' }},
|
||||
};
|
||||
|
||||
// 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 entityPh = document.getElementById("entityPlaceholder");
|
||||
const relaySection = document.getElementById("relaySection");
|
||||
const inputSection = document.getElementById("inputSection");
|
||||
const relayGrid = document.getElementById("relayGrid");
|
||||
const inputGrid = document.getElementById("inputGrid");
|
||||
const relayCount = document.getElementById("relayCount");
|
||||
const inputCount = document.getElementById("inputCount");
|
||||
const bindSummary = document.getElementById("bindSummary");
|
||||
const bindSummaryTxt = document.getElementById("bindSummaryText");
|
||||
const unbindBtn = document.getElementById("unbindBtn");
|
||||
const iconInput = document.getElementById("iconInput");
|
||||
const iconPreview = document.getElementById("icon-preview");
|
||||
const iconClearBtn = document.getElementById("iconClearBtn");
|
||||
const relayTypesWrap = document.getElementById("relay-types-wrap");
|
||||
const inputTypesWrap = document.getElementById("input-types-wrap");
|
||||
|
||||
// ── icon preview ─────────────────────────────────────────────────────────
|
||||
function updateIconPreview() {
|
||||
const val = iconInput.value.trim();
|
||||
if (val) { iconPreview.className = "bi " + val; return; }
|
||||
const checked = document.querySelector(
|
||||
"#relay-types-wrap input[name=device_class]:checked, " +
|
||||
"#input-types-wrap input[name=device_class]:checked"
|
||||
);
|
||||
if (checked) {
|
||||
const lbl = checked.closest("label");
|
||||
if (lbl) iconPreview.className = "bi " + lbl.dataset.icon;
|
||||
}
|
||||
}
|
||||
|
||||
iconInput.addEventListener("input", updateIconPreview);
|
||||
iconClearBtn.addEventListener("click", () => { iconInput.value = ""; updateIconPreview(); });
|
||||
document.getElementById("iconPalette").addEventListener("click", e => {
|
||||
const btn = e.target.closest("[data-icon]");
|
||||
if (!btn) return;
|
||||
iconInput.value = btn.dataset.icon;
|
||||
updateIconPreview();
|
||||
});
|
||||
document.querySelectorAll("label.entity-type-pill input").forEach(r =>
|
||||
r.addEventListener("change", updateIconPreview)
|
||||
);
|
||||
|
||||
// ── device type tab switch ────────────────────────────────────────────────
|
||||
function showRelayTypes(preselect) {
|
||||
relayTypesWrap.style.display = "";
|
||||
inputTypesWrap.style.display = "none";
|
||||
inputTypesWrap.querySelectorAll("input").forEach(r => r.checked = false);
|
||||
if (preselect) {
|
||||
const m = relayTypesWrap.querySelector(`input[value="${preselect}"]`);
|
||||
if (m) m.checked = true;
|
||||
}
|
||||
if (!relayTypesWrap.querySelector("input:checked")) {
|
||||
const f = relayTypesWrap.querySelector("input"); if (f) f.checked = true;
|
||||
}
|
||||
updateIconPreview();
|
||||
}
|
||||
|
||||
function showInputTypes(preselect) {
|
||||
inputTypesWrap.style.display = "";
|
||||
relayTypesWrap.style.display = "none";
|
||||
relayTypesWrap.querySelectorAll("input").forEach(r => r.checked = false);
|
||||
if (preselect) {
|
||||
const m = inputTypesWrap.querySelector(`input[value="${preselect}"]`);
|
||||
if (m) m.checked = true;
|
||||
}
|
||||
if (!inputTypesWrap.querySelector("input:checked")) {
|
||||
const f = inputTypesWrap.querySelector("input"); if (f) f.checked = true;
|
||||
}
|
||||
updateIconPreview();
|
||||
}
|
||||
|
||||
// ── entity card factory ──────────────────────────────────────────────────
|
||||
function makeCard(item, kind) {
|
||||
const isSelected = hEntityType.value === kind && 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";
|
||||
|
||||
const col = document.createElement("div");
|
||||
col.className = "col-6 col-md-4 col-xl-3";
|
||||
col.innerHTML = `
|
||||
<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}">
|
||||
<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)">
|
||||
<i class="bi ${item.icon} entity-card-icon"
|
||||
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>
|
||||
<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));
|
||||
return col;
|
||||
}
|
||||
|
||||
// ── select entity ─────────────────────────────────────────────────────────
|
||||
function selectEntity(item, kind) {
|
||||
hEntityType.value = kind;
|
||||
hEntityNum.value = item.num;
|
||||
|
||||
document.querySelectorAll(".entity-pick-card").forEach(c => {
|
||||
const mine = c.dataset.kind === kind && parseInt(c.dataset.num) === item.num;
|
||||
c.classList.toggle("border-primary", mine);
|
||||
c.classList.toggle("bg-primary", mine);
|
||||
c.classList.toggle("bg-opacity-10", mine);
|
||||
c.classList.toggle("border-transparent", !mine);
|
||||
c.classList.remove("bg-secondary");
|
||||
const ico = c.querySelector(".entity-card-icon");
|
||||
if (ico) ico.style.color = mine ? "var(--bs-primary)" : "";
|
||||
// show/hide checkmark
|
||||
let ck = c.querySelector(".entity-check");
|
||||
if (!ck && mine) {
|
||||
ck = document.createElement("div");
|
||||
ck.className = "entity-check mt-1";
|
||||
ck.innerHTML = '<i class="bi bi-check-circle-fill text-primary"></i>';
|
||||
c.querySelector(".card-body").appendChild(ck);
|
||||
} else if (ck && !mine) {
|
||||
ck.remove();
|
||||
}
|
||||
});
|
||||
|
||||
kind === "relay" ? showRelayTypes(item.type) : showInputTypes(item.type);
|
||||
|
||||
// Auto-fill name if blank
|
||||
const nameIn = document.getElementById("name");
|
||||
if (!nameIn.value.trim()) nameIn.value = item.name;
|
||||
|
||||
// Summary banner
|
||||
const boardName = boardSel.options[boardSel.selectedIndex]?.dataset.name || "Board";
|
||||
bindSummaryTxt.textContent = `${boardName} · ${kind === "relay" ? "Relay" : "Input"} ${item.num} — ${item.name}`;
|
||||
bindSummary.style.display = "flex";
|
||||
}
|
||||
|
||||
unbindBtn.addEventListener("click", () => {
|
||||
hEntityType.value = "";
|
||||
hEntityNum.value = "";
|
||||
document.querySelectorAll(".entity-pick-card").forEach(c => {
|
||||
c.classList.remove("border-primary", "bg-primary", "bg-opacity-10");
|
||||
c.classList.add("border-transparent");
|
||||
const ico = c.querySelector(".entity-card-icon");
|
||||
if (ico) ico.style.color = "";
|
||||
c.querySelector(".entity-check")?.remove();
|
||||
});
|
||||
bindSummary.style.display = "none";
|
||||
});
|
||||
|
||||
// ── load board ────────────────────────────────────────────────────────────
|
||||
function loadBoard(boardId) {
|
||||
entityPh.style.display = "none";
|
||||
relaySection.style.display = "none";
|
||||
inputSection.style.display = "none";
|
||||
bindSummary.style.display = "none";
|
||||
relayGrid.innerHTML = "";
|
||||
inputGrid.innerHTML = "";
|
||||
|
||||
if (!boardId) {
|
||||
hBoardId.value = "";
|
||||
entityPh.style.display = "";
|
||||
return;
|
||||
}
|
||||
hBoardId.value = boardId;
|
||||
entityLoading.style.display = "";
|
||||
|
||||
fetch(`/devices/api/boards/${boardId}/entities`)
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
entityLoading.style.display = "none";
|
||||
|
||||
if (data.relays && data.relays.length) {
|
||||
relayCount.textContent = data.relays.length;
|
||||
data.relays.forEach(item => relayGrid.appendChild(makeCard(item, "relay")));
|
||||
relaySection.style.display = "";
|
||||
}
|
||||
if (data.inputs && data.inputs.length) {
|
||||
inputCount.textContent = data.inputs.length;
|
||||
data.inputs.forEach(item => inputGrid.appendChild(makeCard(item, "input")));
|
||||
inputSection.style.display = "";
|
||||
}
|
||||
if (!data.relays.length && !data.inputs.length) {
|
||||
entityPh.innerHTML = `<i class="bi bi-exclamation-circle display-5 d-block mb-2 opacity-25"></i>
|
||||
This board has no relay or input channels configured.`;
|
||||
entityPh.style.display = "";
|
||||
}
|
||||
|
||||
// Restore selection when editing
|
||||
if (INIT.entityType && INIT.entityNum) {
|
||||
const all = INIT.entityType === "relay" ? data.relays : data.inputs;
|
||||
const match = all.find(i => i.num === INIT.entityNum);
|
||||
if (match) selectEntity(match, INIT.entityType);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
entityLoading.style.display = "none";
|
||||
entityPh.innerHTML = `<i class="bi bi-exclamation-triangle text-warning me-2"></i>Failed to load board channels.`;
|
||||
entityPh.style.display = "";
|
||||
});
|
||||
}
|
||||
|
||||
boardSel.addEventListener("change", () => {
|
||||
hEntityType.value = "";
|
||||
hEntityNum.value = "";
|
||||
loadBoard(boardSel.value || null);
|
||||
});
|
||||
|
||||
// ── init ─────────────────────────────────────────────────────────────────
|
||||
if (INIT.entityType === "input") {
|
||||
showInputTypes(INIT.devClass);
|
||||
} else {
|
||||
showRelayTypes(INIT.devClass);
|
||||
}
|
||||
updateIconPreview();
|
||||
|
||||
if (INIT.boardId) {
|
||||
loadBoard(INIT.boardId);
|
||||
} else {
|
||||
entityPh.style.display = "";
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.entity-pick-card:hover { background: var(--bs-secondary-bg) !important; transform: translateY(-2px); }
|
||||
.border-transparent { border-color: transparent !important; }
|
||||
</style>
|
||||
{% endblock %}
|
||||
118
app/templates/devices/list.html
Normal file
118
app/templates/devices/list.html
Normal file
@@ -0,0 +1,118 @@
|
||||
{% 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 %}
|
||||
Reference in New Issue
Block a user