diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/About.svelte | 4 | ||||
| -rw-r--r-- | src/components/LocationsMap.svelte | 71 | ||||
| -rw-r--r-- | src/components/Qr.svelte | 8 |
3 files changed, 51 insertions, 32 deletions
diff --git a/src/components/About.svelte b/src/components/About.svelte index 86c5bd03..d4da81fe 100644 --- a/src/components/About.svelte +++ b/src/components/About.svelte @@ -1,5 +1,5 @@ <script> -export let locations + export let locations; import { Image, Icon, LocationsMap } from '$comp'; import { t } from '$lib/translations'; @@ -104,5 +104,5 @@ export let locations <p class="text-secondary text-xl w-full md:w-10/12 lg:w-2/3 2xl:w-[800px] mx-auto mb-10"> {@html $t('about.locations.description')} </p> - <LocationsMap locations={locations} /> + <LocationsMap {locations} /> </div> diff --git a/src/components/LocationsMap.svelte b/src/components/LocationsMap.svelte index 520788cd..34821745 100644 --- a/src/components/LocationsMap.svelte +++ b/src/components/LocationsMap.svelte @@ -1,5 +1,5 @@ <script> -export let locations + export let locations; import { onMount, onDestroy } from 'svelte'; import { browser } from '$app/environment'; @@ -36,9 +36,12 @@ export let locations html: `<span style="${markerHtmlStyles}" />` }); -locations = locations.filter(location => location['osm_json'].tags && location['osm_json'].tags['payment:coinos'] === 'yes') + locations = locations.filter( + (location) => + location['osm_json'].tags && location['osm_json'].tags['payment:coinos'] === 'yes' + ); - /* const locations = [ + /* const locations = [ { lat: 49.27034, lng: -123.141373, @@ -77,23 +80,27 @@ locations = locations.filter(location => location['osm_json'].tags && location[' subdomains: ['a', 'b', 'c', 'd'] }).addTo(map); -const checkAddress = (location) => { - if (location['addr:housenumber'] && location['addr:street'] && location['addr:city']) { - return `${ - location['addr:housenumber'] + ' ' + location['addr:street'] + ', ' + location['addr:city'] - }`; - } else if (location['addr:street'] && location['addr:city']) { - return `${location['addr:street'] + ', ' + location['addr:city']}`; - } else if (location['addr:city']) { - return `${location['addr:city']}`; - } else { - return ''; - } -}; + const checkAddress = (location) => { + if (location['addr:housenumber'] && location['addr:street'] && location['addr:city']) { + return `${ + location['addr:housenumber'] + + ' ' + + location['addr:street'] + + ', ' + + location['addr:city'] + }`; + } else if (location['addr:street'] && location['addr:city']) { + return `${location['addr:street'] + ', ' + location['addr:city']}`; + } else if (location['addr:city']) { + return `${location['addr:city']}`; + } else { + return ''; + } + }; let markers = new MarkerClusterGroup(); locations.forEach((location) => { - if (location['deleted_at']) { + if (location['deleted_at']) { return; } @@ -102,14 +109,12 @@ const checkAddress = (location) => { let marker = L.marker([location.lat, location.lon]); marker.bindPopup(`${ - location.tags && location.tags.name - ? `<span class='block'>${location.tags.name}</span>` - : '' - } + location.tags && location.tags.name + ? `<span class='block'>${location.tags.name}</span>` + : '' + } - <span class='block'>${ - location.tags && checkAddress(location.tags) - }</span> + <span class='block'>${location.tags && checkAddress(location.tags)}</span> ${ @@ -130,7 +135,9 @@ const checkAddress = (location) => { location.tags['contact:twitter'].startsWith('http') ? location.tags['contact:twitter'] : `https://twitter.com/${location.tags['contact:twitter']}` - } target="_blank" rel="noreferrer" class='block'>TWT: ${location.tags['contact:twitter']}</a>` + } target="_blank" rel="noreferrer" class='block'>TWT: ${ + location.tags['contact:twitter'] + }</a>` : '' } @@ -140,7 +147,9 @@ const checkAddress = (location) => { location.tags['contact:instagram'].startsWith('http') ? location.tags['contact:instagram'] : `https://instagram.com/${location.tags['contact:instagram']}` - } target="_blank" rel="noreferrer" class='block'>IG: ${location.tags['contact:instagram']}</a>` + } target="_blank" rel="noreferrer" class='block'>IG: ${ + location.tags['contact:instagram'] + }</a>` : '' } @@ -150,7 +159,9 @@ const checkAddress = (location) => { location.tags['contact:facebook'].startsWith('http') ? location.tags['contact:facebook'] : `https://facebook.com/${location.tags['contact:facebook']}` - } target="_blank" rel="noreferrer" class='block'>FB: ${location.tags['contact:facebook']}</a>` + } target="_blank" rel="noreferrer" class='block'>FB: ${ + location.tags['contact:facebook'] + }</a>` : '' } @@ -160,7 +171,9 @@ const checkAddress = (location) => { location.tags['contact:linkedin'].startsWith('http') ? location.tags['contact:linkedin'] : `https://linkedin.com/${location.tags['contact:linkedin']}` - } target="_blank" rel="noreferrer" class='block'>LI: ${location.tags['contact:linkedin']}</a>` + } target="_blank" rel="noreferrer" class='block'>LI: ${ + location.tags['contact:linkedin'] + }</a>` : '' } @@ -168,7 +181,7 @@ const checkAddress = (location) => { markers.addLayer(marker); }); - map.fitBounds(locations.map(({ osm_json: {lat, lon} }) => [lat, lon])); + map.fitBounds(locations.map(({ osm_json: { lat, lon } }) => [lat, lon])); map.addLayer(markers); } }); diff --git a/src/components/Qr.svelte b/src/components/Qr.svelte index 3870abe0..d9bf63ba 100644 --- a/src/components/Qr.svelte +++ b/src/components/Qr.svelte @@ -57,7 +57,13 @@ {#if mask} <div class="absolute bg-white w-[300px] h-[300px] t-0 l-0 z-10" out:fade /> {/if} -<div bind:this={qr} on:click={toggle} on:keydown={toggle} class:hidden={full} class="relative overflow-visible" /> +<div + bind:this={qr} + on:click={toggle} + on:keydown={toggle} + class:hidden={full} + class="relative overflow-visible" +/> <div bind:this={fullQr} on:click={toggle} on:keydown={toggle} class:hidden={!full} /> <style> |