|
@@ -116,11 +116,8 @@ class ZLockSlotsCard extends HTMLElement {
|
|
|
</button>
|
|
</button>
|
|
|
</td>
|
|
</td>
|
|
|
<td>
|
|
<td>
|
|
|
- <span class="name-cell" id="name-display-${s.slot_num}">
|
|
|
|
|
|
|
+ <span id="name-display-${s.slot_num}">
|
|
|
${s.name ?? '<em style="opacity:.4">unnamed</em>'}
|
|
${s.name ?? '<em style="opacity:.4">unnamed</em>'}
|
|
|
- <button class="icon-btn" data-action="edit-name" data-slot="${s.slot_num}" title="Edit name">
|
|
|
|
|
- <ha-icon icon="mdi:account-edit"></ha-icon>
|
|
|
|
|
- </button>
|
|
|
|
|
</span>
|
|
</span>
|
|
|
<span class="inline-edit" id="name-edit-${s.slot_num}" style="display:none">
|
|
<span class="inline-edit" id="name-edit-${s.slot_num}" style="display:none">
|
|
|
<input id="name-input-${s.slot_num}" type="text" value="${s.name ?? ''}" placeholder="Enter name" />
|
|
<input id="name-input-${s.slot_num}" type="text" value="${s.name ?? ''}" placeholder="Enter name" />
|
|
@@ -129,9 +126,14 @@ class ZLockSlotsCard extends HTMLElement {
|
|
|
</span>
|
|
</span>
|
|
|
</td>
|
|
</td>
|
|
|
<td>
|
|
<td>
|
|
|
- <button class="icon-btn clear-btn" data-action="clear" data-slot="${s.slot_num}" title="Clear slot ${s.slot_num}">
|
|
|
|
|
- <ha-icon icon="mdi:account-remove"></ha-icon>
|
|
|
|
|
- </button>
|
|
|
|
|
|
|
+ <span style="display:flex;gap:4px;align-items:center">
|
|
|
|
|
+ <button class="icon-btn" data-action="edit-name" data-slot="${s.slot_num}" title="Edit name">
|
|
|
|
|
+ <ha-icon icon="mdi:account-edit"></ha-icon>
|
|
|
|
|
+ </button>
|
|
|
|
|
+ <button class="icon-btn clear-btn" data-action="clear" data-slot="${s.slot_num}" title="Clear slot ${s.slot_num}">
|
|
|
|
|
+ <ha-icon icon="mdi:account-remove"></ha-icon>
|
|
|
|
|
+ </button>
|
|
|
|
|
+ </span>
|
|
|
</td>
|
|
</td>
|
|
|
</tr>
|
|
</tr>
|
|
|
`).join("")}
|
|
`).join("")}
|
|
@@ -188,13 +190,13 @@ class ZLockSlotsCard extends HTMLElement {
|
|
|
root.getElementById(`name-input-${slot}`).focus();
|
|
root.getElementById(`name-input-${slot}`).focus();
|
|
|
|
|
|
|
|
} else if (action === "cancel-name") {
|
|
} else if (action === "cancel-name") {
|
|
|
- root.getElementById(`name-display-${slot}`).style.display = "flex";
|
|
|
|
|
|
|
+ root.getElementById(`name-display-${slot}`).style.display = "";
|
|
|
root.getElementById(`name-edit-${slot}`).style.display = "none";
|
|
root.getElementById(`name-edit-${slot}`).style.display = "none";
|
|
|
|
|
|
|
|
} else if (action === "save-name") {
|
|
} else if (action === "save-name") {
|
|
|
const name = root.getElementById(`name-input-${slot}`).value.trim();
|
|
const name = root.getElementById(`name-input-${slot}`).value.trim();
|
|
|
await this._callService("set_name", { lock_entity_id: lock, slot, name });
|
|
await this._callService("set_name", { lock_entity_id: lock, slot, name });
|
|
|
- root.getElementById(`name-display-${slot}`).style.display = "flex";
|
|
|
|
|
|
|
+ root.getElementById(`name-display-${slot}`).style.display = "";
|
|
|
root.getElementById(`name-edit-${slot}`).style.display = "none";
|
|
root.getElementById(`name-edit-${slot}`).style.display = "none";
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|