tfaour
3a0007118c
Frame name (pencil-icon inline edit) and the Photos/Calendar mode
selector now live in the page header, shared across all four per-frame
pages instead of being buried in the Configuration form -- so renaming
a frame or flipping its mode no longer requires navigating to a
specific tab first.
Calendar settings move out of a conditionally-hidden card on the
Configuration tab into their own dedicated tab (new /frames/{id}/
calendar route), visually greyed out when the frame is in Photos mode
but still fully usable so calendar settings can be configured ahead of
switching modes. Also wires the week-start setting into the UI for the
first time (the column/backend support landed earlier but had no
control anywhere).
83 lines
2.8 KiB
JavaScript
83 lines
2.8 KiB
JavaScript
// Page-header controls shared by every per-frame page (Photos/
|
|
// Configuration/Calendar/Stats): the frame-name pencil-edit and the
|
|
// mode selector, both now living outside the tab structure since they
|
|
// apply regardless of which tab is open. Depends on window.FRAME_API
|
|
// (set per-page) and common.js's showStatus/apiError.
|
|
|
|
(function () {
|
|
var view = document.getElementById('frame-name-view');
|
|
var editRow = document.getElementById('frame-name-edit-row');
|
|
var pencil = document.getElementById('frame-name-pencil');
|
|
var input = document.getElementById('frame-name-input');
|
|
var textEl = document.getElementById('frame-name-text');
|
|
var saveBtn = document.getElementById('frame-name-save');
|
|
var cancelBtn = document.getElementById('frame-name-cancel');
|
|
if (!view || !window.FRAME_API) return;
|
|
|
|
function openEdit() {
|
|
input.value = textEl.textContent.trim();
|
|
view.style.display = 'none';
|
|
editRow.style.display = 'inline-flex';
|
|
input.focus();
|
|
input.select();
|
|
}
|
|
function closeEdit() {
|
|
editRow.style.display = 'none';
|
|
view.style.display = 'inline-flex';
|
|
}
|
|
|
|
pencil.addEventListener('click', openEdit);
|
|
cancelBtn.addEventListener('click', closeEdit);
|
|
|
|
async function save() {
|
|
var name = input.value.trim();
|
|
if (!name || name === textEl.textContent.trim()) {
|
|
closeEdit();
|
|
return;
|
|
}
|
|
try {
|
|
const resp = await fetch(`${window.FRAME_API}/config`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
|
body: new URLSearchParams({ name }),
|
|
});
|
|
if (!resp.ok) throw new Error(await apiError(resp));
|
|
textEl.textContent = name;
|
|
closeEdit();
|
|
showStatus(true, 'Renamed.');
|
|
} catch (e) {
|
|
showStatus(false, e.message);
|
|
}
|
|
}
|
|
saveBtn.addEventListener('click', save);
|
|
input.addEventListener('keydown', function (e) {
|
|
if (e.key === 'Enter') save();
|
|
if (e.key === 'Escape') closeEdit();
|
|
});
|
|
})();
|
|
|
|
(function () {
|
|
var sel = document.getElementById('frame-mode-select');
|
|
if (!sel || !window.FRAME_API) return;
|
|
var previous = sel.value;
|
|
|
|
sel.addEventListener('change', async function () {
|
|
var mode = sel.value;
|
|
try {
|
|
const resp = await fetch(`${window.FRAME_API}/config`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
|
body: new URLSearchParams({ mode }),
|
|
});
|
|
if (!resp.ok) throw new Error(await apiError(resp));
|
|
previous = mode;
|
|
showStatus(true, mode === 'calendar' ? 'Switched to Calendar mode.' : 'Switched to Photos mode.');
|
|
var calTab = document.querySelector('.tabs a[href$="/calendar"]');
|
|
if (calTab) calTab.classList.toggle('tab-disabled', mode !== 'calendar');
|
|
} catch (e) {
|
|
sel.value = previous;
|
|
showStatus(false, e.message);
|
|
}
|
|
});
|
|
})();
|