Heavily customized version of smokesignal - https://whtwnd.com/kayrozen.com/3lpwe4ymowg2t
kayrozen.com
1<div id="startsAt" class="field py-5">
2 <div class="control">
3 {% if is_development %}
4 <pre><code>{{ starts_form | tojson(indent=2) }}</code></pre>
5 {% endif %}
6 {% if starts_form.build_state == "Selecting" %}
7 <div id="startAtModal" class="modal is-active" tabindex="-1">
8 <div class="modal-background"></div>
9 <div class="modal-content">
10 <div class="box">
11 <div class="field">
12 <label class="label" for="createEventTzInput">{{ t("label-timezone") }}</label>
13 <div class="control">
14 <div class="select">
15 <select id="createEventStartsAtTZ" name="tz">
16 {% for timezone in timezones %}
17 <option value="{{ timezone }}" {% if timezone==starts_form.tz %}selected{% endif %}>
18 {{ timezone }}</option>
19 {% endfor %}
20 </select>
21 </div>
22 </div>
23 </div>
24 <div class="field">
25 <div class="field-body">
26 <div class="field">
27 <label class="label" for="createEventStartsAtDate">{{ t("label-start-day") }} ({{ t("required-field") }})</label>
28 <div class="control">
29 <input id="createEventStartsAtDate" type="date" class="form-control"
30 name="starts_date" {% if starts_form.starts_date %}
31 value="{{ starts_form.starts_date }}" {% endif %} required />
32 </div>
33 </div>
34 <div class="field">
35 <label class="label" for="createEventStartsAtTime">{{ t("label-start-time") }} ({{ t("required-field") }})</label>
36 <div class="control">
37 <input id="createEventStartsAtTime" type="time" class="form-control"
38 name="starts_time" {% if starts_form.starts_time %}
39 value="{{ starts_form.starts_time }}" {% endif %} required />
40 </div>
41 </div>
42 </div>
43 {% if starts_form.starts_at_error %}
44 <p class="help is-danger">{{ starts_form.starts_at_error }}</p>
45 {% endif %}
46 </div>
47 {% if starts_form.include_ends %}
48 <input hidden type="text" name="include_ends" value="true">
49 <div class="field">
50 <div class="field-body">
51 <div class="field">
52 <label class="label" for="createEventStartsAtDate">{{ t("label-end-day") }} ({{ t("required-field") }})</label>
53 <div class="control">
54 <input id="createEventEndsAtDate" type="date" class="form-control" name="ends_date"
55 {% if starts_form.ends_date %} value="{{ starts_form.ends_date }}" {% endif %}
56 required />
57 </div>
58 </div>
59 <div class="field">
60 <label class="label" for="createEventStartsAtTime">{{ t("label-end-time") }} ({{ t("required-field") }})</label>
61 <div class="control">
62 <input id="createEventEndsAtTime" type="time" class="form-control" name="ends_time"
63 {% if starts_form.ends_time %} value="{{ starts_form.ends_time }}" {% endif %}
64 required />
65 </div>
66 </div>
67 </div>
68 {% if starts_form.ends_at_error %}
69 <p class="help is-danger">{{ starts_form.ends_at_error }}</p>
70 {% endif %}
71 </div>
72 <div class="field py-4">
73 <div class="control">
74 <button hx-post="/event/starts" hx-target="#startsAt" hx-swap="outerHTML" hx-trigger="click"
75 hx-params="build_state,include_ends,starts_date,starts_time,ends_date,ends_time,tz"
76 hx-vals='{ "build_state": "Selecting", "include_ends": false }'
77 class="button is-link">{{ t("remove-end-time") }}</button>
78 </div>
79 </div>
80 {% else %}
81 <div class="field py-4">
82 <div class="control">
83 <button hx-post="/event/starts" hx-target="#startsAt" hx-swap="outerHTML" hx-trigger="click"
84 hx-params="build_state,include_ends,starts_date,starts_time,ends_date,ends_time,tz"
85 hx-vals='{ "build_state": "Selecting", "include_ends": true }'
86 class="button is-link">{{ t("add-end-time") }}</button>
87 </div>
88 </div>
89 {% endif %}
90 <div class="field is-grouped pt-4">
91 <p class="control">
92 <button hx-post="/event/starts" hx-target="#startsAt" hx-swap="outerHTML" hx-trigger="click"
93 hx-params="build_state,include_ends,starts_date,starts_time,ends_date,ends_time,tz"
94 hx-vals='{ "build_state": "Selected" }' class="button is-primary">{{ t("button-save") }}</button>
95 </p>
96 </div>
97 </div>
98 </div>
99 <button hx-post="/event/starts" hx-target="#startsAt" hx-swap="outerHTML" hx-trigger="click"
100 hx-params="build_state" hx-vals='{ "build_state": "Reset" }' class="modal-close is-large"
101 aria-label="{{ t('button-close') }}"></button>
102 </div>
103 {% elif (starts_form.build_state == "Selected") %}
104 <div class="field">
105 <div class="field-body is-align-items-end">
106 <div class="field">
107 <label class="label" for="createEventStartsAt">{{ t("label-starts-at") }}</label>
108 <div class="control">
109 <input id="createEventStartsAt" type="text" class="input is-static"
110 value="{{ starts_form.starts_display }}" readonly />
111 </div>
112 </div>
113 <div class="field">
114 <label class="label" for="createEventEndsAt">{{ t("label-ends-at") }}</label>
115 <div class="control">
116 <input id="createEventEndsAt" type="text" class="input is-static"
117 value="{{ starts_form.ends_display if starts_form.ends_display is not none else '---' }}" readonly />
118 </div>
119 </div>
120 <div class="field is-grouped">
121 <p class="control">
122 <button hx-post="/event/starts" hx-target="#startsAt" hx-swap="outerHTML" hx-trigger="click"
123 hx-params="build_state,include_ends,starts_date,starts_time,ends_date,ends_time,tz"
124 hx-vals='{ "build_state": "Selecting" }' data-bs-toggle="modal"
125 data-bs-target="startAtModal" class="button is-link is-outlined">{{ t("button-edit") }}</button>
126 </p>
127 <p class="control">
128 <button hx-post="/event/starts" hx-target="#startsAt" hx-swap="outerHTML" hx-trigger="click"
129 hx-params="build_state,tz" hx-vals='{ "build_state": "Reset" }'
130 class="button is-danger is-outlined">{{ t("button-clear") }}</button>
131 </p>
132 </div>
133 </div>
134 </div>
135 {% if starts_form.starts_date %}
136 <input hidden type="text" name="starts_date" value="{{ starts_form.starts_date }}">
137 {% endif %}
138 {% if starts_form.starts_time %}
139 <input hidden type="text" name="starts_time" value="{{ starts_form.starts_time }}">
140 {% endif %}
141 {% if starts_form.starts_at %}
142 <input hidden type="text" name="starts_at" value="{{ starts_form.starts_at }}">
143 {% endif %}
144 {% if starts_form.include_ends %}
145 <input hidden type="text" name="include_ends" value="{{ starts_form.include_ends }}">
146 {% endif %}
147 {% if starts_form.ends_date %}
148 <input hidden type="text" name="ends_date" value="{{ starts_form.ends_date }}">
149 {% endif %}
150 {% if starts_form.ends_time %}
151 <input hidden type="text" name="ends_time" value="{{ starts_form.ends_time }}">
152 {% endif %}
153 {% if starts_form.ends_at %}
154 <input hidden type="text" name="ends_at" value="{{ starts_form.ends_at }}">
155 {% endif %}
156 {% elif starts_form.build_state == "Reset" %}
157 <div class="field">
158 <div class="field-body is-align-items-end">
159 <div class="field">
160 <label class="label" for="createEventStartsAt">{{ t("label-starts-at") }}</label>
161 <div class="control">
162 <input id="createEventStartsAt" type="text" class="input is-static" value="{{ t('not-set') }}" readonly />
163 </div>
164 </div>
165 <div class="field">
166 <label class="label" for="createEventEndsAt">{{ t("label-ends-at") }}</label>
167 <div class="control">
168 <input id="createEventEndsAt" type="text" class="input is-static" value="{{ t('not-set') }}" readonly />
169 </div>
170 </div>
171 <div class="field">
172 <p class="control">
173 <button hx-post="/event/starts" hx-target="#startsAt" hx-swap="outerHTML" hx-trigger="click"
174 hx-params="build_state" hx-vals='{ "build_state": "Selecting" }'
175 class="button is-link is-outlined">{{ t("button-edit") }}</button>
176 </p>
177 </div>
178 </div>
179 </div>
180 {% endif %}
181 </div>
182</div>