ea4093b699
* build(deps): bump askama from 0.12.1 to 0.15.4 Bumps [askama](https://github.com/askama-rs/askama) from 0.12.1 to 0.15.4. - [Release notes](https://github.com/askama-rs/askama/releases) - [Commits](https://github.com/askama-rs/askama/compare/0.12.1...v0.15.4) --- updated-dependencies: - dependency-name: askama dependency-version: 0.15.4 dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> * fix(deps): adapt templates and tests for askama 0.15 - Migrate macro calls from {% call %} to {{ }} expression syntax (134 occurrences) - Update test assertion for askama 0.15's numeric HTML entity encoding (& vs &) --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Jon Seager <jon@sgrs.uk>
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-text': !$_locationFound}"
|
|
data-attr:disabled="$_locating || $_locationFound"
|
|
aria-label="Use my location"
|
|
>
|
|
<span data-show="!$_locating">{{ icons::location("h-5 w-5") }}</span>
|
|
<span data-show="$_locating" style="display: none">{{ 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 %}
|