Mercurial > libervia-templates

comparison sat_templates/templates/bulma/calendar/daily.html @ 358:271b38ccd217

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
bulma (calendar): calendar and its daily view, first draft
author Goffi <goffi@goffi.org>
date Thu, 30 Mar 2023 17:06:02 +0200
parents
children
comparison
equal deleted inserted replaced
357:6c21a9857e08 358:271b38ccd217
1 {# daily calendar view
2 @variable events(list[dict]): events to display
3 @variable calendar_start(float): calendar start timestamp
4 @variable calendar_end(float): calendar end timestamp
5 #}
6
7 {% if not embedded %}{% extends 'base/base.html' %}{% endif %}
8 {% import 'components/block.html' as block with context %}
9
10 {% block body %}
11 {{ icon_defs('calendar') }}
12
13 <section class="section">
14
15 <div class="content has-items-centered is-flex">
16 {{ component.action_button(url_event_new) }}
17 </div>
18
19
20 <h1 class="title has-text-centered">{{ calendar_start|date_fmt('full', date_only=True) }}</h1>
21 <div class="columns">
22 <div class="column">
23 <div class="time-and-events">
24 <div class="time-rows" aria-hidden="true">
25 {% for hour in range(calendar_start|timestamp_to_hour, calendar_end|timestamp_to_hour + 1) %}
26 {% for minute in [0, 30] %}
27 <div class="time-row {% if minute == 0 %}hour-row{% else %}half-hour-row{% endif %}">
28 <span class="time-text" >{{ "%02d:%02d"|format(hour, minute) }}</span>
29 <div class="line"></div>
30 </div>
31 {% endfor %}
32 {% endfor %}
33 </div>
34 {% if events %}
35 {% for event in events %}
36 {% if event.end > calendar_start and event.start < calendar_end %}
37 {% set event_start = event.start|date_fmt(tz_name=tz_name) %}
38 {% set event_end = event.end|date_fmt(tz_name=tz_name) %}
39 {% set event_duration = event.start|delta_to_human(event.end) %}
40 {% set ns = namespace(event_classes = []) %}
41 {% if event.start < calendar_start %}
42 {% set ns.event_classes = ns.event_classes + ['already-started'] %}
43 {% endif %}
44 {% if event.end > calendar_end %}
45 {% set ns.event_classes = ns.event_classes + ['not-finished'] %}
46 {% endif %}
47 {% for other_event in events %}
48 {% if event != other_event and event.start < other_event.end and event.end > other_event.start %}
49 {% set ns.event_classes = ns.event_classes + ['is-conflicting'] %}
50 {% endif %}
51 {% endfor %}
52 {% set event_top = [(((event.start - calendar_start) / 1800 * 30) + 15), 0]|max|int %}
53 {% set event_height = [((event.end - event.start) / 1800 * 30), ]|min|int %}
54 <div class="event-box {{ ns.event_classes|join(' ') }}" style="top: {{ event_top }}px; height: {{ event_height }}px; max-height: calc(100% - {{event_top}}px);">
55 <span class="event-name">{{ event.name[""] }}</span>
56 <br>
57 {{ event_start }} - {{ event_end }} ({{ event_duration }})
58 </div>
59 {% endif %}
60 {% endfor %}
61 {% endif %}
62 <div id="current-time-line" aria-hidden="true" hidden></div>
63 </div>
64 </div>
65 </div>
66
67
68 </section>
69 {% endblock body %}