feat: web server with REST API, captive portal, and management UI
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
204
data/app.js
Normal file
204
data/app.js
Normal file
@@ -0,0 +1,204 @@
|
||||
const API = '';
|
||||
let currentPage = 'dashboard';
|
||||
|
||||
async function api(path, opts = {}) {
|
||||
const res = await fetch(API + path, {
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
...opts
|
||||
});
|
||||
return res.json();
|
||||
}
|
||||
|
||||
function toast(msg) {
|
||||
let t = document.querySelector('.toast');
|
||||
if (!t) { t = document.createElement('div'); t.className = 'toast'; document.body.appendChild(t); }
|
||||
t.textContent = msg;
|
||||
t.classList.add('show');
|
||||
setTimeout(() => t.classList.remove('show'), 3000);
|
||||
}
|
||||
|
||||
function navigate(page) {
|
||||
currentPage = page;
|
||||
document.querySelectorAll('#nav-links a').forEach(a => {
|
||||
a.classList.toggle('active', a.dataset.page === page);
|
||||
});
|
||||
renderPage(page);
|
||||
}
|
||||
|
||||
async function renderPage(page) {
|
||||
const el = document.getElementById('content');
|
||||
switch (page) {
|
||||
case 'dashboard': return renderDashboard(el);
|
||||
case 'albums': return renderAlbums(el);
|
||||
case 'slideshow': return renderSlideshow(el);
|
||||
case 'display': return renderDisplay(el);
|
||||
case 'device': return renderDevice(el);
|
||||
case 'firmware': return renderFirmware(el);
|
||||
}
|
||||
}
|
||||
|
||||
async function renderDashboard(el) {
|
||||
const status = await api('/api/status');
|
||||
el.innerHTML = `
|
||||
<div class="card">
|
||||
<h2>Status</h2>
|
||||
<div class="stat"><span>Battery</span><span>${status.battery}%${status.charging ? ' ⚡' : ''}</span></div>
|
||||
<div class="stat"><span>WiFi Signal</span><span>${status.wifi_rssi} dBm</span></div>
|
||||
<div class="stat"><span>IP Address</span><span>${status.ip}</span></div>
|
||||
<div class="stat"><span>Uptime</span><span>${Math.floor(status.uptime/60)}m</span></div>
|
||||
<div class="stat"><span>Free RAM</span><span>${Math.floor(status.free_heap/1024)}KB</span></div>
|
||||
<div class="stat"><span>Free PSRAM</span><span>${Math.floor(status.free_psram/1024)}KB</span></div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h2>Controls</h2>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-primary" onclick="api('/api/action/next',{method:'POST'}).then(()=>toast('Next photo'))">Next</button>
|
||||
<button class="btn btn-primary" onclick="api('/api/action/random',{method:'POST'}).then(()=>toast('Random photo'))">Random</button>
|
||||
<button class="btn btn-primary" onclick="api('/api/action/pause',{method:'POST'}).then(()=>toast('Paused'))">Pause</button>
|
||||
<button class="btn btn-primary" onclick="api('/api/action/play',{method:'POST'}).then(()=>toast('Playing'))">Play</button>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
async function renderAlbums(el) {
|
||||
const [albums, settings] = await Promise.all([api('/api/albums'), api('/api/settings')]);
|
||||
const selected = JSON.parse(settings.albums_json || '[]');
|
||||
el.innerHTML = `
|
||||
<div class="card">
|
||||
<h2>Albums</h2>
|
||||
<ul class="checkbox-list">
|
||||
${albums.map(a => `
|
||||
<li>
|
||||
<input type="checkbox" value="${a.id}" ${selected.includes(a.id) ? 'checked' : ''}>
|
||||
<span>${a.title} (${a.assetCount})</span>
|
||||
</li>`).join('')}
|
||||
</ul>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-primary" id="saveAlbums">Save Selection</button>
|
||||
</div>
|
||||
</div>`;
|
||||
document.getElementById('saveAlbums').onclick = async () => {
|
||||
const ids = [...el.querySelectorAll('input[type=checkbox]:checked')].map(c => c.value);
|
||||
await api('/api/albums/select', { method: 'POST', body: JSON.stringify({ album_ids: ids }) });
|
||||
toast('Albums saved');
|
||||
};
|
||||
}
|
||||
|
||||
async function renderSlideshow(el) {
|
||||
const settings = await api('/api/settings');
|
||||
const intervals = [1, 5, 15, 30, 60];
|
||||
const modes = ['Random', 'Chronological', 'Reverse Chrono', 'Favorites Weighted'];
|
||||
el.innerHTML = `
|
||||
<div class="card">
|
||||
<h2>Interval</h2>
|
||||
<div class="preset-btns">
|
||||
${intervals.map(i => `<button class="${settings.interval_min===i?'active':''}" data-interval="${i}">${i}m</button>`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h2>Cycling Mode</h2>
|
||||
<div class="field">
|
||||
<select id="cycleMode">
|
||||
${modes.map((m, i) => `<option value="${i}" ${settings.cycle_mode===i?'selected':''}>${m}</option>`).join('')}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group"><button class="btn btn-primary" id="saveSlideshow">Save</button></div>`;
|
||||
el.querySelectorAll('[data-interval]').forEach(btn => {
|
||||
btn.onclick = () => {
|
||||
el.querySelectorAll('[data-interval]').forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
};
|
||||
});
|
||||
document.getElementById('saveSlideshow').onclick = async () => {
|
||||
const interval = parseInt(el.querySelector('[data-interval].active')?.dataset.interval || '5');
|
||||
const mode = parseInt(document.getElementById('cycleMode').value);
|
||||
await api('/api/settings', { method: 'POST', body: JSON.stringify({ interval_min: interval, cycle_mode: mode }) });
|
||||
toast('Slideshow settings saved');
|
||||
};
|
||||
}
|
||||
|
||||
async function renderDisplay(el) {
|
||||
const settings = await api('/api/settings');
|
||||
const flags = settings.meta_flags;
|
||||
el.innerHTML = `
|
||||
<div class="card">
|
||||
<h2>Image Quality</h2>
|
||||
<div class="field">
|
||||
<select id="imgQuality">
|
||||
<option value="0" ${settings.img_quality===0?'selected':''}>Preview (faster)</option>
|
||||
<option value="1" ${settings.img_quality===1?'selected':''}>Original (higher quality)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h2>Metadata Overlay</h2>
|
||||
<ul class="checkbox-list">
|
||||
<li><input type="checkbox" data-flag="1" ${flags&1?'checked':''}><span>Date</span></li>
|
||||
<li><input type="checkbox" data-flag="2" ${flags&2?'checked':''}><span>Location</span></li>
|
||||
<li><input type="checkbox" data-flag="4" ${flags&4?'checked':''}><span>People</span></li>
|
||||
<li><input type="checkbox" data-flag="8" ${flags&8?'checked':''}><span>Album</span></li>
|
||||
<li><input type="checkbox" data-flag="16" ${flags&16?'checked':''}><span>Camera</span></li>
|
||||
</ul>
|
||||
<div class="field">
|
||||
<label>Position</label>
|
||||
<select id="metaPos">
|
||||
<option value="0" ${settings.meta_pos===0?'selected':''}>Bottom</option>
|
||||
<option value="1" ${settings.meta_pos===1?'selected':''}>Top</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group"><button class="btn btn-primary" id="saveDisplay">Save</button></div>`;
|
||||
document.getElementById('saveDisplay').onclick = async () => {
|
||||
let flags = 0;
|
||||
el.querySelectorAll('[data-flag]').forEach(cb => { if (cb.checked) flags |= parseInt(cb.dataset.flag); });
|
||||
await api('/api/settings', { method: 'POST', body: JSON.stringify({
|
||||
img_quality: parseInt(document.getElementById('imgQuality').value),
|
||||
meta_flags: flags,
|
||||
meta_pos: parseInt(document.getElementById('metaPos').value)
|
||||
})});
|
||||
toast('Display settings saved');
|
||||
};
|
||||
}
|
||||
|
||||
async function renderDevice(el) {
|
||||
el.innerHTML = `
|
||||
<div class="card">
|
||||
<h2>Device</h2>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-danger" onclick="if(confirm('Enter deep sleep?'))api('/api/action/sleep',{method:'POST'})">Deep Sleep</button>
|
||||
<button class="btn btn-danger" onclick="if(confirm('Reboot?'))fetch('/api/action/reboot',{method:'POST'})">Reboot</button>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
async function renderFirmware(el) {
|
||||
el.innerHTML = `
|
||||
<div class="card">
|
||||
<h2>Firmware Update</h2>
|
||||
<div class="field">
|
||||
<label>Upload .bin file</label>
|
||||
<input type="file" id="fwFile" accept=".bin">
|
||||
</div>
|
||||
<button class="btn btn-primary" id="uploadFw">Upload & Flash</button>
|
||||
<div id="fwStatus" style="margin-top:12px"></div>
|
||||
</div>`;
|
||||
document.getElementById('uploadFw').onclick = async () => {
|
||||
const file = document.getElementById('fwFile').files[0];
|
||||
if (!file) return toast('Select a file first');
|
||||
const formData = new FormData();
|
||||
formData.append('firmware', file);
|
||||
document.getElementById('fwStatus').textContent = 'Uploading...';
|
||||
const res = await fetch('/api/firmware', { method: 'POST', body: formData });
|
||||
const data = await res.json();
|
||||
document.getElementById('fwStatus').textContent = data.msg || (data.ok ? 'Success!' : 'Failed');
|
||||
};
|
||||
}
|
||||
|
||||
// Navigation
|
||||
document.querySelectorAll('#nav-links a').forEach(a => {
|
||||
a.addEventListener('click', (e) => { e.preventDefault(); navigate(a.dataset.page); });
|
||||
});
|
||||
|
||||
// Initial render
|
||||
navigate('dashboard');
|
||||
Reference in New Issue
Block a user