tfaour
bd72fdad71
Build and push server image / build-and-push (push) Successful in 34s
Now that they're set via docker-compose.yml's environment (previous commit), leaving editable fields for them on the page was misleading -- anything typed there would be silently overwritten by the env vars on the next load() anyway. Replaced with a read-only info banner showing the configured Immich URL (never the API key value, even though it's already env-sourced rather than user input) or a warning if IMMICH_URL/ IMMICH_API_KEY aren't set. POST /api/config no longer accepts or touches those two fields at all. Verified: page renders with no immich_url/immich_api_key input fields or API key value in either case (env vars set or unset); config save/albums/ frame-image still work end-to-end via a mock Immich server.
127 lines
5.2 KiB
HTML
127 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>ESPresso Frame</title>
|
|
<style>
|
|
body { font-family: system-ui, sans-serif; max-width: 480px; margin: 40px auto; padding: 0 16px; color: #222; }
|
|
h1 { font-size: 20px; }
|
|
p.sub { color: #666; font-size: 14px; margin-top: -8px; }
|
|
label { display: block; margin-top: 16px; font-size: 13px; font-weight: 600; }
|
|
input, select { width: 100%; padding: 8px; box-sizing: border-box; margin-top: 4px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; }
|
|
.checkbox-row { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
|
|
.checkbox-row input { width: auto; margin-top: 0; }
|
|
.checkbox-row label { margin-top: 0; font-weight: normal; }
|
|
button { margin-top: 20px; padding: 10px 16px; border: none; border-radius: 4px; background: #2563eb; color: white; cursor: pointer; font-size: 14px; }
|
|
button:hover { background: #1d4ed8; }
|
|
button.secondary { background: #6b7280; margin-right: 8px; }
|
|
.status { margin-top: 16px; padding: 10px; border-radius: 4px; font-size: 14px; }
|
|
.status.ok { background: #dcfce7; color: #166534; }
|
|
.status.err { background: #fee2e2; color: #991b1b; }
|
|
.info-box { margin-top: 16px; padding: 10px; border-radius: 4px; font-size: 13px; background: #f3f4f6; color: #444; }
|
|
.info-box.warn { background: #fef9c3; color: #854d0e; }
|
|
code { background: #f3f4f6; padding: 2px 5px; border-radius: 3px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>ESPresso Frame</h1>
|
|
<p class="sub">Point your frame's "Tools Server" field at this server's <code>host:port</code>.</p>
|
|
|
|
{% if cfg.immich_url %}
|
|
<div class="info-box">Immich: <code>{{ cfg.immich_url }}</code> (API key configured). Set via
|
|
<code>IMMICH_URL</code>/<code>IMMICH_API_KEY</code> in <code>docker-compose.yml</code> -- see
|
|
<code>docker-compose.yml.example</code>.</div>
|
|
{% else %}
|
|
<div class="info-box warn">Immich isn't configured yet. Set <code>IMMICH_URL</code> and
|
|
<code>IMMICH_API_KEY</code> in <code>docker-compose.yml</code> (copy
|
|
<code>docker-compose.yml.example</code>) and restart the server.</div>
|
|
{% endif %}
|
|
|
|
<form id="config-form">
|
|
<label>Album
|
|
<select id="album_id">
|
|
{% if cfg.album_id %}<option value="{{ cfg.album_id }}" selected>(current selection -- reload to rename)</option>{% endif %}
|
|
</select>
|
|
</label>
|
|
<label>Order
|
|
<select id="order">
|
|
<option value="sequential" {% if cfg.order == "sequential" %}selected{% endif %}>Sequential</option>
|
|
<option value="shuffle" {% if cfg.order == "shuffle" %}selected{% endif %}>Shuffle</option>
|
|
</select>
|
|
</label>
|
|
<label>Refresh interval (minutes)
|
|
<input type="number" id="refresh_interval_minutes" min="1" max="1440"
|
|
value="{{ (cfg.refresh_interval_s // 60) or 60 }}" required>
|
|
</label>
|
|
<div class="checkbox-row">
|
|
<input type="checkbox" id="smart_crop_faces" {% if cfg.smart_crop_faces %}checked{% endif %}>
|
|
<label for="smart_crop_faces">Center faces in crop</label>
|
|
</div>
|
|
<button type="button" class="secondary" id="load-albums">Load Albums</button>
|
|
<button type="submit">Save</button>
|
|
</form>
|
|
<div id="result"></div>
|
|
|
|
<script>
|
|
const resultEl = document.getElementById('result');
|
|
|
|
function showStatus(ok, message) {
|
|
resultEl.innerHTML = `<div class="status ${ok ? 'ok' : 'err'}">${message}</div>`;
|
|
}
|
|
|
|
async function saveConfig() {
|
|
const minutes = parseInt(document.getElementById('refresh_interval_minutes').value, 10) || 60;
|
|
const body = new URLSearchParams({
|
|
album_id: document.getElementById('album_id').value || '',
|
|
order: document.getElementById('order').value,
|
|
refresh_interval_s: String(minutes * 60),
|
|
smart_crop_faces: String(document.getElementById('smart_crop_faces').checked),
|
|
});
|
|
const resp = await fetch('/api/config', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
|
body,
|
|
});
|
|
if (!resp.ok) {
|
|
throw new Error(await resp.text());
|
|
}
|
|
}
|
|
|
|
document.getElementById('load-albums').addEventListener('click', async () => {
|
|
try {
|
|
await saveConfig();
|
|
|
|
const resp = await fetch('/api/albums');
|
|
if (!resp.ok) {
|
|
throw new Error(await resp.text());
|
|
}
|
|
const albums = await resp.json();
|
|
|
|
const select = document.getElementById('album_id');
|
|
select.innerHTML = '';
|
|
for (const a of albums) {
|
|
const opt = document.createElement('option');
|
|
opt.value = a.id;
|
|
opt.textContent = `${a.name} (${a.count})`;
|
|
select.appendChild(opt);
|
|
}
|
|
showStatus(true, `Loaded ${albums.length} album(s) -- pick one and click Save.`);
|
|
} catch (e) {
|
|
showStatus(false, e.message);
|
|
}
|
|
});
|
|
|
|
document.getElementById('config-form').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
try {
|
|
await saveConfig();
|
|
showStatus(true, 'Saved.');
|
|
} catch (e) {
|
|
showStatus(false, e.message);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|