Heavily customized version of smokesignal - https://whtwnd.com/kayrozen.com/3lpwe4ymowg2t
kayrozen.com
1{% from "form_include.html" import text_input, text_input_display %}
2<div id="locationGroup" class="field py-5">
3 {% if is_development %}
4 <pre><code>{{ location_form | tojson(indent=2) }}</code></pre>
5 {% endif %}
6
7 {% if location_form.build_state == "Selecting" %}
8 <!-- Enhanced Venue Search Interface -->
9 <div class="venue-search-container">
10 <label class="label" for="venue-search-input">{{ t("label-location") }}</label>
11
12 <!-- Venue Search Input -->
13 <div class="field has-addons" style="position: relative;">
14 <div class="control is-expanded has-icons-left">
15 <input type="text"
16 id="venue-search-input"
17 name="q"
18 class="input"
19 placeholder="{{ t('placeholder-search-venues') }}"
20 hx-get="/event/location/venue-search"
21 hx-target="#venue-suggestions"
22 hx-trigger="keyup changed delay:300ms"
23 hx-include="[name='latitude'],[name='longitude'],[name='location_country']"
24 autocomplete="off"
25 aria-describedby="venue-search-help"
26 aria-expanded="false"
27 aria-owns="venue-suggestions">
28 <span class="icon is-small is-left">
29 <i class="fas fa-search"></i>
30 </span>
31 </div>
32 <div class="control">
33 <button type="button"
34 id="geolocation-button"
35 class="button is-info is-outlined"
36 onclick="requestGeolocation()"
37 title="{{ t('button-use-my-location') }}">
38 <span class="icon">
39 <i class="fas fa-location-arrow"></i>
40 </span>
41 <span class="is-hidden-mobile">{{ t('button-near-me') }}</span>
42 </button>
43 </div>
44
45 <!-- Venue Suggestions Dropdown -->
46 <div id="venue-suggestions"
47 class="venue-suggestions"
48 role="listbox"
49 aria-label="{{ t('venue-suggestions') }}">
50 <!-- Suggestions populated via HTMX -->
51 </div>
52 </div>
53
54 <!-- Hidden fields for venue search context -->
55 <input type="hidden" name="latitude" value="">
56 <input type="hidden" name="longitude" value="">
57 <input type="hidden" name="location_country" value="">
58
59 <p id="venue-search-help" class="help">
60 {{ t('help-venue-search') }}
61 </p>
62
63 <!-- Map Picker Button -->
64 <div class="field mt-4">
65 <button type="button"
66 class="button is-info is-outlined is-fullwidth-mobile map-picker-button"
67 onclick="openMapPicker()"
68 aria-describedby="map-picker-help">
69 <span class="icon">
70 <i class="fas fa-map"></i>
71 </span>
72 <span>{{ t('button-pick-on-map') }}</span>
73 </button>
74 <p id="map-picker-help" class="help">{{ t('help-map-picker') }}</p>
75 </div>
76
77 <!-- Manual Entry Toggle -->
78 <div class="field mt-4">
79 <button type="button"
80 class="button is-light is-outlined is-fullwidth-mobile"
81 hx-post="/event/location"
82 hx-target="#locationGroup"
83 hx-swap="outerHTML"
84 hx-vals='{"build_state": "Manual"}'>
85 <span class="icon">
86 <i class="fas fa-edit"></i>
87 </span>
88 <span>{{ t('button-enter-manually') }}</span>
89 </button>
90 </div>
91 </div>
92
93 {% elif location_form.build_state == "Manual" %}
94 <!-- Manual Address Entry Modal -->
95 <div id="locationModal" class="modal is-active" tabindex="-1">
96 <div class="modal-background"></div>
97 <div class="modal-content">
98 <div class="box">
99 <h3 class="title is-4">{{ t("title-manual-location-entry") }}</h3>
100
101 <div class="field">
102 <label class="label" for="createEventLocationCountryInput">{{ t("label-country") }} ({{ t("required-field") }})</label>
103 <div class="control">
104 <div class="select is-fullwidth">
105 <select id="createEventLocationCountryInput" name="location_country" required>
106 <option value="">{{ t("select-country") }}</option>
107 <option value="Canada" {% if location_form.location_country == 'Canada' %}selected{% endif %}>{{ t("country-ca") }}</option>
108 <option value="United States of America" {% if location_form.location_country == 'United States of America' %}selected{% endif %}>{{ t("country-us") }}</option>
109 <option value="Mexico" {% if location_form.location_country == 'Mexico' %}selected{% endif %}>{{ t("country-mx") }}</option>
110 <option value="United Kingdom" {% if location_form.location_country == 'United Kingdom' %}selected{% endif %}>{{ t("country-gb") }}</option>
111 <option value="Germany" {% if location_form.location_country == 'Germany' %}selected{% endif %}>{{ t("country-de") }}</option>
112 </select>
113 </div>
114 </div>
115 {% if location_form.location_country_error %}
116 <p class="help is-danger">{{ location_form.location_country_error }}</p>
117 {% endif %}
118 </div>
119
120 {{ text_input(t("label-location-name") + ' (' + t("optional-field") + ')', 'locationAddressName', 'location_name',
121 value=location_form.location_name, error=location_form.location_name_error,
122 extra='autocomplete="off" data-1p-ignore placeholder="' + t("placeholder-location-name") + '"') }}
123
124 {{ text_input(t("label-street-address") + ' (' + t("optional-field") + ')', 'locationAddressStreet', 'location_street',
125 value=location_form.location_street, error=location_form.location_street_error,
126 extra='autocomplete="off" data-1p-ignore placeholder="' + t("placeholder-street-address") + '"') }}
127
128 {{ text_input(t("label-locality") + ' (' + t("optional-field") + ')', 'locationAddressLocality', 'location_locality',
129 value=location_form.location_locality, error=location_form.location_locality_error,
130 extra='autocomplete="off" data-1p-ignore placeholder="' + t("placeholder-locality") + '"') }}
131
132 {{ text_input(t("label-region") + ' (' + t("optional-field") + ')', 'locationAddressRegion', 'location_region',
133 value=location_form.location_region, error=location_form.location_region_error,
134 extra='autocomplete="off" data-1p-ignore placeholder="' + t("placeholder-region") + '"') }}
135
136 {{ text_input(t("label-postal-code") + ' (' + t("optional-field") + ')', 'locationAddressPostalCode', 'location_postal_code',
137 value=location_form.location_postal_code, error=location_form.location_postal_code_error,
138 extra='autocomplete="off" data-1p-ignore placeholder="' + t("placeholder-postal-code") + '"') }}
139
140 <div class="field is-grouped pt-4">
141 <p class="control">
142 <button hx-post="/event/location" hx-target="#locationGroup" hx-swap="outerHTML"
143 hx-trigger="click"
144 hx-params="build_state,location_country,location_name,location_street,location_locality,location_region,location_postal_code"
145 hx-vals='{ "build_state": "Selected" }' class="button is-primary">{{ t("button-save") }}</button>
146 </p>
147 <p class="control">
148 <button hx-post="/event/location" hx-target="#locationGroup" hx-swap="outerHTML"
149 hx-trigger="click"
150 hx-vals='{ "build_state": "Selecting" }' class="button is-light">{{ t("button-back") }}</button>
151 </p>
152 </div>
153 </div>
154 </div>
155 <button hx-post="/event/location" hx-target="#locationGroup" hx-swap="outerHTML" hx-trigger="click"
156 hx-params="build_state" hx-vals='{ "build_state": "Reset" }' class="modal-close is-large"
157 aria-label="{{ t('button-close') }}"></button>
158 </div>
159
160 {% elif location_form.build_state == "Selected" %}
161 <!-- Selected Venue Display -->
162 <div class="venue-selected">
163 <div class="venue-info">
164 <h4 class="title is-6">
165 {% if location_form.location_name %}
166 {{ location_form.location_name }}
167 {% else %}
168 {{ t('location-selected') }}
169 {% endif %}
170 </h4>
171
172 <div class="location-details">
173 {% if location_form.location_street %}
174 <p class="subtitle is-7">{{ location_form.location_street }}</p>
175 {% endif %}
176
177 <p class="subtitle is-7">
178 {% if location_form.location_locality %}{{ location_form.location_locality }}{% endif %}
179 {% if location_form.location_region %}{% if location_form.location_locality %}, {% endif %}{{ location_form.location_region }}{% endif %}
180 {% if location_form.location_postal_code %} {{ location_form.location_postal_code }}{% endif %}
181 {% if location_form.location_country %}{% if location_form.location_locality or location_form.location_region or location_form.location_postal_code %}, {% endif %}{{ location_form.location_country }}{% endif %}
182 </p>
183
184 {% if location_form.venue_category %}
185 <span class="tag is-info">{{ location_form.venue_category }}</span>
186 {% endif %}
187
188 {% if location_form.venue_quality %}
189 <div class="venue-quality mt-2">
190 {% for i in range(location_form.venue_quality|round|int) %}
191 <span class="icon is-small"><i class="fas fa-star"></i></span>
192 {% endfor %}
193 </div>
194 {% endif %}
195 </div>
196 </div>
197
198 <!-- Mini map display -->
199 {% if location_form.latitude and location_form.longitude %}
200 <div class="venue-map-preview"
201 data-lat="{{ location_form.latitude }}"
202 data-lng="{{ location_form.longitude }}"
203 data-venue-name="{{ location_form.location_name or t('event-location') }}">
204 <div class="map-loading">
205 <span class="icon"><i class="fas fa-spinner fa-spin"></i></span>
206 {{ t('loading-map') }}
207 </div>
208 </div>
209 {% endif %}
210
211 <div class="field is-grouped mt-4">
212 <p class="control">
213 <button hx-post="/event/location"
214 hx-target="#locationGroup"
215 hx-swap="outerHTML"
216 hx-vals='{"build_state": "Selecting"}'
217 class="button is-link is-outlined">
218 {{ t("button-edit") }}
219 </button>
220 </p>
221 <p class="control">
222 <button hx-post="/event/location"
223 hx-target="#locationGroup"
224 hx-swap="outerHTML"
225 hx-vals='{"build_state": "Reset"}'
226 class="button is-danger is-outlined">
227 {{ t("button-clear") }}
228 </button>
229 </p>
230 </div>
231 </div>
232
233 <!-- Hidden form fields for data persistence -->
234 {% if location_form.latitude %}
235 <input type="hidden" name="latitude" value="{{ location_form.latitude }}">
236 {% endif %}
237 {% if location_form.longitude %}
238 <input type="hidden" name="longitude" value="{{ location_form.longitude }}">
239 {% endif %}
240 {% if location_form.location_country %}
241 <input type="hidden" name="location_country" value="{{ location_form.location_country }}">
242 {% endif %}
243 {% if location_form.location_name %}
244 <input type="hidden" name="location_name" value="{{ location_form.location_name }}">
245 {% endif %}
246 {% if location_form.location_street %}
247 <input type="hidden" name="location_street" value="{{ location_form.location_street }}">
248 {% endif %}
249 {% if location_form.location_locality %}
250 <input type="hidden" name="location_locality" value="{{ location_form.location_locality }}">
251 {% endif %}
252 {% if location_form.location_region %}
253 <input type="hidden" name="location_region" value="{{ location_form.location_region }}">
254 {% endif %}
255 {% if location_form.location_postal_code %}
256 <input type="hidden" name="location_postal_code" value="{{ location_form.location_postal_code }}">
257 {% endif %}
258 {% if location_form.venue_category %}
259 <input type="hidden" name="venue_category" value="{{ location_form.venue_category }}">
260 {% endif %}
261 {% if location_form.venue_quality %}
262 <input type="hidden" name="venue_quality" value="{{ location_form.venue_quality }}">
263 {% endif %}
264
265 {% else %}
266 <!-- Reset/initial state -->
267 <div class="venue-reset">
268 <div class="field">
269 <label class="label">{{ t("label-location") }}</label>
270 <div class="control">
271 <input type="text" class="input is-static"
272 value="{{ t('not-set') }}" readonly />
273 </div>
274 </div>
275 <div class="field">
276 <p class="control">
277 <button hx-post="/event/location"
278 hx-target="#locationGroup"
279 hx-swap="outerHTML"
280 hx-vals='{"build_state": "Selecting"}'
281 class="button is-link is-outlined">
282 {{ t("button-add-location") }}
283 </button>
284 </p>
285 </div>
286 </div>
287 {% endif %}
288</div>