tfaour
8ac3fc0de3
Build and push server image / build-and-push (push) Successful in 43s
The web UI grows into the multi-frame world: a left sidebar lists the
user's frames (with an online dot driven by the same overdue math as
the Device panel; collapsible off-canvas with a hamburger on mobile),
and each frame gets three tabs -- Photos (album picker, now displaying,
the drag-to-reorder upcoming grid), Configuration (name/order/
orientation/refresh/quiet hours/timezone/smart crop + the firmware
card), and Stats (device telemetry, lifetime counters, battery chart).
Settings and Admin adopt the same shell. / becomes a routing hub:
first frame, empty-state onboarding page, setup/login, or the
manage-QR redirect.
The JSON API moves to /api/frames/{id}/... behind require_frame_view /
require_frame_control: any linked user (admins see all) can view; 404
for frames outside your view so ids aren't confirmed; mutations 409
with the holder's name unless you hold the soft control lock, and
POST take-control always flips it to you. Config saves are now partial
updates -- each tab posts only its own fields (checkboxes always sent
explicitly), so the split forms can't clobber each other.
All CSS moves to static/theme.css and the old 680-line inline script
block splits into static/*.js -- the Pointer Events drag-drop state
machine and the canvas battery chart ported intact, not rewritten. The
CSRF fetch wrapper now reads a <meta> tag. No build step, still vanilla.
Verified end-to-end: page/static/API suites, control-lock handoff in
both directions, partial-save field preservation, non-admin frame
isolation, and the legacy-device curl suite (still byte-identical
responses for the deployed frame).
61 lines
2.2 KiB
HTML
61 lines
2.2 KiB
HTML
{% extends "app_base.html" %}
|
|
|
|
{% block title %}{{ frame.name or "Frame" }} · Photos{% endblock %}
|
|
{% block page_title %}{{ frame.name or "Frame " ~ frame.id }}{% endblock %}
|
|
|
|
{% block tabs %}{% include "_frame_tabs.html" %}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div id="control-banner" class="control-banner" style="display: none;">
|
|
<span id="control-holder"></span>
|
|
<button type="button" id="take-control" class="btn-inline">Take control</button>
|
|
</div>
|
|
|
|
<div class="layout">
|
|
<div class="main-col">
|
|
<section class="card">
|
|
<h2 class="card-title">Album</h2>
|
|
<form id="photos-form">
|
|
<label>Album
|
|
<select id="album_id">
|
|
{% if frame.album_id %}<option value="{{ frame.album_id }}" selected>(current selection -- Load Albums to change)</option>{% endif %}
|
|
</select>
|
|
</label>
|
|
<label>Upcoming photos to show
|
|
<select id="queue_target_len">
|
|
{% for n in [5, 10, 15, 20, 25, 30, 40, 50] %}
|
|
<option value="{{ n }}" {% if frame.queue_target_len == n %}selected{% endif %}>{{ n }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</label>
|
|
<button type="button" class="secondary" id="load-albums">Load Albums</button>
|
|
<button type="submit">Save</button>
|
|
</form>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="side-col">
|
|
<section class="card">
|
|
<h2 class="card-title">Now displaying</h2>
|
|
<div id="current-thumb"><p class="sub">Loading...</p></div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="card" style="margin-top: 20px;">
|
|
<h2 class="card-title">Upcoming</h2>
|
|
<p class="sub">Drag a photo to reorder (on touch, hold briefly first so a
|
|
normal scroll still works), "Show next" to jump it to the front, or
|
|
the × to remove it from rotation entirely.</p>
|
|
<div id="upcoming-grid" class="photo-grid"></div>
|
|
</section>
|
|
|
|
<div id="result"></div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>window.FRAME_API = {{ ("/api/frames/" ~ frame.id) | tojson }};</script>
|
|
<script src="/static/queue.js"></script>
|
|
<script src="/static/frame_photos.js"></script>
|
|
{% endblock %}
|