59 lines
3.3 KiB
HTML
59 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 this 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"
|
|
data-attr:placeholder="$_locationFound ? 'Using current 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"
|
|
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 %}
|