fb67f0659c
Overhaul the web UI with CSS custom property-based theming and dark mode support. Extract reusable template partials (location search, scan input) and web components (photo-capture, searchable-select). Add version and commit info to page footer. - Replace hardcoded amber palette with semantic theme tokens - Add dark mode with localStorage persistence and system preference detection - Extract <brew-photo-capture> and <searchable-select> web components - Extract location_search and scan_input Askama macros - Add sun/moon, timeline, database, map icons - Display version and git commit in footer - Improve timeline coordinate rounding and map link formatting - Add roast_name, roaster_name, remaining to BagOptionView
63 lines
3.3 KiB
HTML
63 lines
3.3 KiB
HTML
{% import "partials/icons.html" as icons %}
|
|
|
|
{% macro location_search_js() %}
|
|
const locateUser = (triggerEl) => {
|
|
const root = triggerEl.closest('[data-location-root]');
|
|
const emit = (name, detail) =>
|
|
root.dispatchEvent(new CustomEvent(name, { detail, bubbles: true }));
|
|
|
|
if (!navigator.geolocation) {
|
|
emit('location-error', { message: 'Geolocation not supported by your browser.' });
|
|
return;
|
|
}
|
|
|
|
emit('location-start');
|
|
|
|
navigator.geolocation.getCurrentPosition(
|
|
(pos) => {
|
|
emit('location-found', { lat: pos.coords.latitude, lng: pos.coords.longitude });
|
|
},
|
|
(err) => {
|
|
if (err.code === 1) {
|
|
emit('location-error', { message: 'Location access denied. Search by name instead.' });
|
|
} else {
|
|
emit('location-error', { message: 'Could not determine location. Search by name instead.' });
|
|
}
|
|
},
|
|
{ enableHighAccuracy: true, timeout: 15000 },
|
|
);
|
|
};
|
|
{% endmacro %}
|
|
|
|
{% macro location_search(error_signal) %}
|
|
<div data-location-root
|
|
data-on:location-found="$_locating = false; $_locationFound = true; $_userLat = evt.detail.lat; $_userLng = evt.detail.lng; @get('/api/v1/nearby-cafes?lat=' + evt.detail.lat + '&lng=' + evt.detail.lng + '&q=coffee', {responseOverrides: {selector: '#nearby-results', mode: 'replace'}})"
|
|
data-on:location-error="$_locating = false; {{ error_signal }} = evt.detail.message"
|
|
data-on:location-start="$_locating = true"
|
|
>
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<button type="button"
|
|
data-on:click="locateUser(el)"
|
|
class="shrink-0 inline-flex items-center justify-center rounded-md border p-2.5 transition hover:bg-surface-alt"
|
|
data-class="{'text-accent': $_locationFound, 'text-stone-800': !$_locationFound}"
|
|
data-attr:disabled="$_locating || $_locationFound"
|
|
aria-label="Use my location"
|
|
>
|
|
<span data-show="!$_locating">{% call icons::location("h-5 w-5") %}</span>
|
|
<span data-show="$_locating" style="display: none">{% call icons::spinner("h-5 w-5") %}</span>
|
|
</button>
|
|
<input type="text" data-bind:_city-name
|
|
class="input-field w-full text-sm"
|
|
data-attr:placeholder="$_locationFound ? 'Using your location (' + $_userLat.toFixed(2) + ', ' + $_userLng.toFixed(2) + ')' : 'Name of city or area'"
|
|
data-attr:disabled="$_locationFound"
|
|
data-on:input__debounce.350ms="$_cityName.length >= 2 && $_cafeSearch.length >= 2 && @get('/api/v1/nearby-cafes?near=' + encodeURIComponent($_cityName) + '&q=' + encodeURIComponent($_cafeSearch), {responseOverrides: {selector: '#nearby-results', mode: 'replace'}})"
|
|
/>
|
|
</div>
|
|
<input type="text" data-bind:_cafe-search
|
|
class="input-field w-full text-sm"
|
|
placeholder="Search for a cafe…"
|
|
data-on:input__debounce.350ms="if ($_locationFound) { @get('/api/v1/nearby-cafes?lat=' + $_userLat + '&lng=' + $_userLng + '&q=' + encodeURIComponent($_cafeSearch), {responseOverrides: {selector: '#nearby-results', mode: 'replace'}}) } else { $_cityName.length >= 2 && $_cafeSearch.length >= 2 && @get('/api/v1/nearby-cafes?near=' + encodeURIComponent($_cityName) + '&q=' + encodeURIComponent($_cafeSearch), {responseOverrides: {selector: '#nearby-results', mode: 'replace'}}) }"
|
|
/>
|
|
<div id="nearby-results" class="hidden mt-3 max-h-60 overflow-y-auto rounded-lg border bg-surface"></div>
|
|
</div>
|
|
{% endmacro %}
|