tfaour
3a0007118c
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).
100 lines
4.4 KiB
HTML
100 lines
4.4 KiB
HTML
{% extends "app_base.html" %}
|
|
|
|
{% block title %}{{ frame.name or "Frame" }} · Calendar{% 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 %}
|
|
|
|
{% 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>
|
|
|
|
{% if frame.mode != 'calendar' %}
|
|
<div class="info-box">This frame is currently in <strong>Photos</strong> mode --
|
|
settings below take effect once you switch it to <strong>Calendar</strong> mode
|
|
using the selector at the top of the page.</div>
|
|
{% endif %}
|
|
|
|
<div class="layout">
|
|
<div class="main-col">
|
|
<section class="card">
|
|
<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>
|
|
<label>Week starts on
|
|
<select id="calendar_week_start">
|
|
{% for value, label in week_start_labels.items() %}
|
|
<option value="{{ value }}" {% if frame.calendar_week_start == value %}selected{% endif %}>{{ label }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</label>
|
|
<p class="sub" style="margin-top: 4px;">Only affects the Week and Month views.</p>
|
|
<div class="checkbox-row" id="calendar-inlay-row">
|
|
<input type="checkbox" id="calendar_photo_inlay" {% if frame.calendar_photo_inlay %}checked{% endif %}>
|
|
<label for="calendar_photo_inlay">Show a photo alongside the calendar</label>
|
|
</div>
|
|
<p class="sub" id="calendar-inlay-hint" style="margin-top: 4px;">
|
|
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 %}
|
|
</section>
|
|
</div>
|
|
|
|
<div class="side-col">
|
|
<section class="card">
|
|
<h2 class="card-title">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>
|
|
|
|
<div id="result"></div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>window.FRAME_API = {{ ("/api/frames/" ~ frame.id) | tojson }};</script>
|
|
<script src="/static/device_status_bar.js"></script>
|
|
<script src="/static/frame_header.js"></script>
|
|
<script src="/static/frame_calendar.js"></script>
|
|
{% endblock %}
|