tfaour
1100580c2c
Whiteboard and tasks-source save/clear used to just tell the user to reload the page to see the change. Both endpoints always assign a successful "set" to the calling user, so the new state is fully known client-side already -- rewrite the "Currently using/showing ..." block in place instead, no server round trip or reload needed. Also adds .gitea/workflows/firmware-build-check.yml: builds both board variants (devkit, xiao) on every push touching firmware/**, unlike firmware-release-build.yml which only builds on a version.txt bump. Verified both builds succeed locally against the actual ESP-IDF toolchain before wiring this in.
215 lines
11 KiB
HTML
215 lines
11 KiB
HTML
{% extends "app_base.html" %}
|
|
|
|
{% block title %}{{ frame.name or "Frame" }} · Calendar{% endblock %}
|
|
{% block page_title %}{% include "_frame_name_edit.html" %}{% endblock %}
|
|
{% block mode_picker %}{% include "_frame_mode_picker.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>
|
|
<div id="calendar-week-start-row">
|
|
<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, and (for Week) only at 7 days.</p>
|
|
</div>
|
|
<div id="calendar-week-days-row">
|
|
<label>Days to show (Week view)
|
|
<input type="number" id="calendar_week_days" min="2" max="10" value="{{ frame.calendar_week_days }}">
|
|
</label>
|
|
</div>
|
|
<div id="calendar-week-layout-row">
|
|
<label>Week view layout
|
|
<select id="calendar_week_layout">
|
|
<option value="horizontal" {% if frame.calendar_week_layout == "horizontal" %}selected{% endif %}>Days side by side</option>
|
|
<option value="vertical" {% if frame.calendar_week_layout == "vertical" %}selected{% endif %}>Days stacked</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<div id="calendar-week-offset-row">
|
|
<label>Week view starts (days from today)
|
|
<input type="number" id="calendar_week_start_offset" min="-30" max="30" value="{{ frame.calendar_week_start_offset }}">
|
|
</label>
|
|
<p class="sub" style="margin-top: 4px;">0 = starts today, negative = starts in the
|
|
past, positive = starts in the future. Only used when Days to show isn't 7.</p>
|
|
</div>
|
|
<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 adds their own calendars (ICS
|
|
subscription or CalDAV, set up in <a href="/settings">Settings</a>)
|
|
-- being linked here doesn't include anything automatically.
|
|
Anyone linked to this frame can mute a calendar they'd rather
|
|
not see here, even one they don't own; only its owner can add
|
|
it back.</p>
|
|
<ul class="calendar-user-list">
|
|
{% for u in calendar_users %}
|
|
<li>
|
|
<p class="calendar-user-name">{{ u.display_name }}{% if u.is_self %} (you){% endif %}</p>
|
|
{% if u.calendars %}
|
|
{% set current_palette = frame.palette_rgb or default_palette_rgb %}
|
|
{% set current_hex = palette_to_hex(current_palette) %}
|
|
{% for c in u.calendars %}
|
|
<div class="checkbox-row calendar-row" style="margin-top: 6px;">
|
|
<input type="checkbox" class="calendar-toggle"
|
|
data-user-id="{{ u.user_id }}" data-key="{{ c.key }}" data-label="{{ c.label }}"
|
|
{% if c.included %}checked{% endif %}>
|
|
<label style="margin: 0; font-weight: normal;">{{ c.label }}</label>
|
|
{% if u.is_self %}
|
|
<span class="calendar-color-picker" data-key="{{ c.key }}">
|
|
{% for idx in range(2, 6) %}
|
|
<button type="button" class="color-swatch {% if c.color_index == idx %}selected{% endif %}"
|
|
data-index="{{ idx }}" title="{{ calendar_color_labels[idx] }}"
|
|
style="background-color: {{ current_hex[idx] }};"></button>
|
|
{% endfor %}
|
|
<button type="button" class="color-swatch color-swatch-auto {% if c.color_index is none %}selected{% endif %}"
|
|
data-index="" title="Auto (assigned automatically)">Auto</button>
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
{% elif u.is_self %}
|
|
<p class="sub" style="margin-top: 6px;">No calendars set up yet -- add an ICS link or CalDAV account in <a href="/settings">Settings</a>.</p>
|
|
{% else %}
|
|
<p class="sub" style="margin-top: 6px;">No calendars included.</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>
|
|
|
|
<section class="card" style="margin-top: 20px;">
|
|
<h2 class="card-title">Weather</h2>
|
|
<p class="sub">Shown above the event list on Agenda, Agenda (today
|
|
& tomorrow), and Week views -- there's no room for it on Month.</p>
|
|
<form id="weather-config-form">
|
|
<div class="checkbox-row">
|
|
<input type="checkbox" id="weather_enabled" {% if frame.calendar_weather_enabled %}checked{% endif %}>
|
|
<label for="weather_enabled">Show weather</label>
|
|
</div>
|
|
<label>Units
|
|
<select id="weather_units">
|
|
<option value="fahrenheit" {% if frame.calendar_weather_units == "fahrenheit" %}selected{% endif %}>Fahrenheit</option>
|
|
<option value="celsius" {% if frame.calendar_weather_units == "celsius" %}selected{% endif %}>Celsius</option>
|
|
</select>
|
|
</label>
|
|
<button type="submit">Save</button>
|
|
</form>
|
|
|
|
<h3 style="margin-top: 20px; font-size: 14px;">Cities</h3>
|
|
<p class="sub">Every city shows on every day -- add more than one if
|
|
people split their time between places.</p>
|
|
<ul class="calendar-user-list" id="weather-city-list">
|
|
{% for c in frame.calendar_weather_cities or [] %}
|
|
<li class="checkbox-row" style="justify-content: space-between; margin-top: 6px;">
|
|
<span>{{ c.label }}</span>
|
|
<button type="button" class="btn-inline secondary weather-city-remove" data-label="{{ c.label }}">Remove</button>
|
|
</li>
|
|
{% else %}
|
|
<li class="sub" id="weather-city-empty">No cities added yet.</li>
|
|
{% endfor %}
|
|
</ul>
|
|
<div class="checkbox-row" style="margin-top: 10px;">
|
|
<input type="text" id="weather-city-input" placeholder="e.g. Portland, OR" style="margin-top: 0; flex: 1;">
|
|
<button type="button" class="btn-inline" id="weather-city-add">Add</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card" style="margin-top: 20px;">
|
|
<h2 class="card-title">Tasks</h2>
|
|
<p class="sub">Week view only -- takes the place of one day slot
|
|
instead of adding an extra one.</p>
|
|
<div class="checkbox-row" id="tasks-enabled-row">
|
|
<input type="checkbox" id="tasks_enabled" {% if frame.calendar_tasks_enabled %}checked{% endif %}>
|
|
<label for="tasks_enabled">Show a task list</label>
|
|
</div>
|
|
|
|
<div id="tasks-current-source">
|
|
{% if tasks_source %}
|
|
<p class="sub" style="margin-top: 10px;">
|
|
Currently using <strong>{{ tasks_source.display_name }}</strong>'s
|
|
<strong>{{ tasks_source.label }}</strong> list.
|
|
<button type="button" class="btn-inline secondary" id="tasks-source-clear">Clear</button>
|
|
</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if viewer_task_calendars %}
|
|
<p class="sub" style="margin-top: 10px;">Use one of your own CalDAV task lists:</p>
|
|
<ul class="calendar-user-list">
|
|
{% for c in viewer_task_calendars %}
|
|
<li class="checkbox-row" style="margin-top: 6px;">
|
|
<input type="radio" name="tasks-source-choice" class="tasks-source-choice" data-key="{{ c.key }}"
|
|
{% if tasks_source and tasks_source.user_id == user.id and frame.calendar_tasks_calendar_key == c.key %}checked{% endif %}>
|
|
<label style="margin: 0; font-weight: normal;">{{ c.label }}</label>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% else %}
|
|
<p class="sub" style="margin-top: 10px;">You don't have any CalDAV
|
|
task lists available -- set up a CalDAV account in
|
|
<a href="/settings">Settings</a> first (a plain ICS subscription
|
|
doesn't carry tasks).</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 %}
|