tfaour/espresso_frame
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 13 Wiki Activity

Move frame name/mode into the page header; Calendar gets its own tab

Browse Source 
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).
This commit is contained in:
tfaour
2026-07-22 21:21:00 -04:00
parent aa194be09a
commit 3a0007118c
12 changed files with 335 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/app/templates/frame_config.html
+3 -63
View File
@@ -1,7 +1,8 @@
{% extends "app_base.html" %}
{% block title %}{{ frame.name or "Frame" }} · Configuration{% endblock %}
{% block page_title %}{{ frame.name or "Frame " ~ frame.id }}{% endblock %}
{% block page_title %}{% include "_frame_name_edit.html" %}{% endblock %}
{% block head_actions %}{% include "_frame_mode_select.html" %}{% endblock %}
{% block device_status %}{% include "_device_status_bar.html" %}{% endblock %}
{% block tabs %}{% include "_frame_tabs.html" %}{% endblock %}
@@ -17,15 +18,6 @@
<section class="card">
<h2 class="card-title">Display settings</h2>
<form id="config-form">
<label>Frame mode
<select id="frame_mode">
<option value="photos" {% if frame.mode == "photos" %}selected{% endif %}>Photos</option>
<option value="calendar" {% if frame.mode == "calendar" %}selected{% endif %}>Calendar</option>
</select>
</label>
<label>Frame name
<input type="text" id="frame_name" maxlength="64" value="{{ frame.name }}">
</label>
<label>Order
<select id="order">
<option value="sequential" {% if frame.order == "sequential" %}selected{% endif %}>Sequential</option>
@@ -83,59 +75,6 @@
<button type="submit">Save</button>
</form>
</section>
<section class="card" id="calendar-card" style="{% if frame.mode != 'calendar' %}display: none;{% endif %}">
<h2 class="card-title">Calendar</h2>
<form id="calendar-config-form">
<label>View
<select id="calendar_view">
{% for value, label in calendar_views.items() %}
<option value="{{ value }}" {% if frame.calendar_view == value %}selected{% endif %}>{{ label }}</option>
{% endfor %}
</select>
</label>
<div class="checkbox-row" id="calendar-inlay-row" style="{% if frame.calendar_view != 'agenda' %}display: none;{% endif %}">
<input type="checkbox" id="calendar_photo_inlay" {% if frame.calendar_photo_inlay %}checked{% endif %}>
<label for="calendar_photo_inlay">Show a photo alongside today's agenda</label>
</div>
<p class="sub" id="calendar-inlay-hint" style="margin-top: 4px; {% if frame.calendar_view != 'agenda' %}display: none;{% endif %}">
Uses the same album configured on the Photos tab -- nothing extra to set up.</p>
<button type="submit">Save</button>
</form>
<h2 class="card-title" style="margin-top: 20px;">Included calendars</h2>
<p class="sub">Each linked person decides whether their own calendar
contributes to this frame -- being linked here doesn't include it
automatically.</p>
<ul class="calendar-user-list">
{% for u in calendar_users %}
<li>
{% if u.user_id == user.id %}
{% if u.has_url %}
<label class="checkbox-row" style="margin-top: 6px;">
<input type="checkbox" class="calendar-self-toggle" {% if u.included %}checked{% endif %}>
{{ u.display_name }} (you)
</label>
{% else %}
<p class="sub" style="margin-top: 6px;">{{ u.display_name }} (you) -- no calendar set, add one in <a href="/settings">Settings</a>.</p>
{% endif %}
{% else %}
<p class="sub" style="margin-top: 6px;">{{ u.display_name }}:
{% if not u.has_url %}no calendar set{% elif u.included %}included{% else %}not included{% endif %}</p>
{% endif %}
</li>
{% endfor %}
</ul>
{% if frame.calendar_fetch_summary %}
<p class="sub" style="margin-top: 8px; color: var(--danger-text);">Last fetch: {{ frame.calendar_fetch_summary }}</p>
{% endif %}
<h2 class="card-title" style="margin-top: 20px;">Preview</h2>
<p class="sub">How this frame's calendar currently renders.</p>
<img class="preview-img" id="calendar-preview" alt="Calendar preview">
<button type="button" class="secondary" id="calendar-preview-refresh">Refresh preview</button>
</section>
</div>
<div class="side-col">
@@ -267,5 +206,6 @@
window.DEFAULT_PALETTE_HEX = {{ palette_to_hex(default_palette_rgb) | tojson }};
</script>
<script src="/static/device_status_bar.js"></script>
<script src="/static/frame_header.js"></script>
<script src="/static/frame_config.js"></script>
{% endblock %}