import { showToast } from '../components/toast.js'; import { t } from '../i18n.js'; import { esc } from '../utils.js'; // A refused request must reject, not resolve. // // This helper used to end in `.then(r => r.json())`, so a 403/404/500 body resolved as an ordinary // value and the surrounding try/catch was unreachable — every handler took the failure for success. // Concretely: deleting a built-in layout template showed "Layout deleted" while the server had // returned 403 and the template was still there, and a rejected platform-role change showed "Role // updated" while the dropdown kept displaying a value the server refused (its revert lives only in // the dead catch). The shared client in api.js has always thrown on !res.ok; these local copies did // not. Same contract now, including the 401 session-expiry reload. const API = (url, opts = {}) => fetch('/api' + url, { headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${localStorage.getItem('token')}`, ...opts.headers }, ...opts }).then(async (r) => { if (r.status === 401) { localStorage.removeItem('token'); window.location.reload(); throw new Error('Session expired'); } if (!r.ok) { const e = await r.json().catch(() => ({})); throw new Error(e.error || `Request failed (${r.status})`); } return r.json(); }); export async function render(container) { const hash = window.location.hash; if (hash.startsWith('#/kiosk/')) { const id = hash.split('#/kiosk/')[1]; return renderEditor(container, id); } return renderList(container); } async function renderList(container) { container.innerHTML = `

`; document.getElementById('newKioskBtn').onclick = async () => { const name = prompt(t('kiosk.prompt_name')); if (!name) return; const page = await API('/kiosk', { method: 'POST', body: JSON.stringify({ name }) }); window.location.hash = `#/kiosk/${page.id}`; }; try { const pages = await API('/kiosk'); const grid = document.getElementById('kioskGrid'); if (!pages.length) { grid.innerHTML = `

${t('kiosk.empty_title')}

${t('kiosk.empty_desc')}

`; return; } grid.innerHTML = pages.map(p => `

🖱

${esc(p.name)}

${t('kiosk.label')}

${t('kiosk.preview')}

`).join(''); grid.querySelectorAll('[data-delete-kiosk]').forEach(btn => { btn.onclick = async (e) => { e.stopPropagation(); const name = btn.dataset.kioskName; if (!confirm(t('kiosk.confirm_delete', { name }))) return; try { await API(`/kiosk/${btn.dataset.deleteKiosk}`, { method: 'DELETE' }); showToast(t('kiosk.toast.deleted')); renderList(container); } catch (err) { showToast(err.message || t('kiosk.toast.delete_failed'), 'error'); } }; }); } catch (err) { showToast(err.message, 'error'); } } async function renderEditor(container, pageId) { let page; try { page = await API(`/kiosk/${pageId}`); } catch { container.innerHTML = `

${t('kiosk.not_found')}

`; return; } let config = JSON.parse(page.config || '{}'); if (!config.buttons) config.buttons = []; if (!config.style) config.style = {}; container.innerHTML = ` ${t('kiosk.back')}

${t('kiosk.page_settings')}

${t('kiosk.title_label')}

${t('kiosk.subtitle_label')}

${t('kiosk.logo_url')}

${t('kiosk.footer_text')}

${t('kiosk.idle_title')}

${t('kiosk.idle_timeout')}

${t('kiosk.style')}

${t('kiosk.background')}

${t('kiosk.text_color')}

${t('kiosk.columns')}

${t('kiosk.button_color')}

${t('kiosk.button_hover')}

${t('kiosk.buttons')}

`; function renderButtons() { const list = document.getElementById('buttonList'); list.innerHTML = config.buttons.map((btn, i) => `

`).join('') || `

${t('kiosk.no_buttons')}

`; list.querySelectorAll('[data-btn]').forEach(input => { input.oninput = () => { const idx = parseInt(input.dataset.btn); const field = input.dataset.field; if (field === 'url' && config.buttons[idx].action === 'page') config.buttons[idx].page = input.value; else config.buttons[idx][field] = input.tagName === 'SELECT' ? input.value : input.value; }; }); list.querySelectorAll('[data-remove-btn]').forEach(btn => { btn.onclick = () => { config.buttons.splice(parseInt(btn.dataset.removeBtn), 1); renderButtons(); }; }); } document.getElementById('addBtnBtn').onclick = () => { config.buttons.push({ label: t('kiosk.new_button'), sublabel: '', icon: '⭐', action: '', url: '' }); renderButtons(); }; document.getElementById('saveKioskBtn').onclick = async () => { config.title = document.getElementById('kTitle').value; config.subtitle = document.getElementById('kSubtitle').value; config.logoUrl = document.getElementById('kLogo').value; config.footer = document.getElementById('kFooter').value; config.idleTitle = document.getElementById('kIdleTitle').value; config.idleTimeout = parseInt(document.getElementById('kIdleTimeout').value) || 60; config.style = { ...config.style, background: document.getElementById('kBg').value, textColor: document.getElementById('kTextColor').value, columns: parseInt(document.getElementById('kColumns').value), buttonBg: document.getElementById('kBtnBg').value, buttonHover: document.getElementById('kBtnHover').value, }; try { await API(`/kiosk/${pageId}`, { method: 'PUT', body: JSON.stringify({ config }) }); showToast(t('kiosk.toast.saved'), 'success'); document.getElementById('kioskPreview').src = `/api/kiosk/${pageId}/render?t=${Date.now()}`; } catch (err) { showToast(err.message, 'error'); } }; renderButtons(); } export function cleanup() {}