From 369c386d2843eca83103a5303131471c46c154d1 Mon Sep 17 00:00:00 2001
From: Thor Galle <thorgalle@gmail.com>
Date: Tue, 18 Jun 2024 14:30:41 +0300
Subject: [PATCH] feat: add static meetup layer

---
 src/lib/components/Map/MeetupDrawer.svelte    | 305 ++++++++++++++++++
 src/lib/components/Map/MeetupLayer.svelte     | 119 +++++++
 src/locales/en.json                           |  11 +-
 src/locales/fr.json                           |   7 +-
 src/locales/nl.json                           |  10 +-
 src/routes/explore/+layout.svelte             |  17 +
 .../explore/meetup/[meetupId]/+page.svelte    |   1 +
 static/images/markers/fireplace-yellow.png    | Bin 0 -> 7365 bytes
 static/images/markers/fireplace.png           | Bin 0 -> 1339 bytes
 9 files changed, 467 insertions(+), 3 deletions(-)
 create mode 100644 src/lib/components/Map/MeetupDrawer.svelte
 create mode 100644 src/lib/components/Map/MeetupLayer.svelte
 create mode 100644 src/routes/explore/meetup/[meetupId]/+page.svelte
 create mode 100644 static/images/markers/fireplace-yellow.png
 create mode 100644 static/images/markers/fireplace.png

diff --git a/src/lib/components/Map/MeetupDrawer.svelte b/src/lib/components/Map/MeetupDrawer.svelte
new file mode 100644
index 00000000..c87c9db0
--- /dev/null
+++ b/src/lib/components/Map/MeetupDrawer.svelte
@@ -0,0 +1,305 @@
+<script lang="ts">
+  // Stripped-down version of GardenDrawer
+  import { createEventDispatcher, tick } from 'svelte';
+  import { scale } from 'svelte/transition';
+  import { _, locale } from 'svelte-i18n';
+  import { user } from '$lib/stores/auth';
+  import { clickOutside } from '$lib/directives';
+  import { Text, Button, Progress } from '../UI';
+  import routes from '$lib/routes';
+  import type { Meetup } from './MeetupLayer.svelte';
+  import createUrl from '$lib/util/create-url';
+  import Img from '@zerodevx/svelte-img';
+  import meetupImg from '$lib/assets/wtmg-meetup.png?run';
+
+  export let meetup: Meetup | null = null;
+
+  let drawerElement;
+
+  const dispatch = createEventDispatcher();
+  $: isSelected = !!meetup;
+  let photoWrapper: HTMLElement | undefined;
+  let isShowingMagnifiedPhoto = false;
+  let isGettingMagnifiedPhoto = false;
+  const magnifyPhoto = async () => {
+    isGettingMagnifiedPhoto = true;
+    isShowingMagnifiedPhoto = true;
+    isGettingMagnifiedPhoto = false;
+    // See https://stackoverflow.com/a/60112649
+    await tick();
+    photoWrapper?.focus();
+  };
+
+  $: meetupDateStr = Intl.DateTimeFormat($locale || 'nl-BE', {
+    weekday: 'long',
+    day: 'numeric',
+    month: 'long'
+  }).format(meetup?.date);
+
+  const handleClickOutsideDrawer = (event) => {
+    const { clickEvent } = event.detail;
+    // If the drawer is not open, don't try to close it
+    // (this might mess with focus elsewhere on the page)
+    if (!isSelected) {
+      return;
+    }
+    // If closing maginified photo view, don't close drawer
+    if (isShowingMagnifiedPhoto && photoWrapper.contains(clickEvent.target)) {
+      return;
+    }
+    // If showing/hiding trails, don't close drawer
+    else if (
+      (clickEvent.target instanceof HTMLInputElement && clickEvent.target.type == 'checkbox') ||
+      clickEvent.target.tagName == 'LABEL'
+    ) {
+      return;
+    } else if (!drawerElement.contains(clickEvent.target)) {
+      dispatch('close');
+    }
+  };
+</script>
+
+<Progress active={isGettingMagnifiedPhoto} />
+{#if isShowingMagnifiedPhoto && !isGettingMagnifiedPhoto}
+  <button
+    class="magnified-photo-wrapper"
+    transition:scale
+    bind:this={photoWrapper}
+    on:click={() => {
+      isShowingMagnifiedPhoto = false;
+    }}
+    on:keypress={(e) => {
+      // keypress handler to satisfy svelte linter for a11y
+      switch (e.key) {
+        case 'Enter':
+        // Don't do anything: the on:click will also be called when Enter is pressed
+      }
+    }}
+  >
+    <div class="magnified-photo">
+      <Img class="meetup-img" src={meetupImg} alt="Invitational poster for a WTMG meetup" />
+    </div>
+  </button>
+{/if}
+
+<div
+  class="drawer"
+  class:hidden={!isSelected}
+  bind:this={drawerElement}
+  use:clickOutside
+  on:click-outside={handleClickOutsideDrawer}
+>
+  {#if isSelected}
+    <section class="main">
+      <header>
+        <div class="mb-l garden-title">
+          <Text weight="w600" size="l" className="garden-title-text"
+            >WTMG meetup - {meetupDateStr}</Text
+          >
+        </div>
+        <button on:click={magnifyPhoto} class="mb-l button-container image-wrapper">
+          <Img class="meetup-img" src={meetupImg} alt="Invitational poster for a WTMG meetup" />
+        </button>
+      </header>
+      <div class="drawer-content-area">
+        <div class="description">
+          <p>
+            {$_('map.meetups.description', {
+              values: {
+                location: $_(`map.meetups.cities.${meetup?.place}`),
+                date: meetupDateStr
+              }
+            })}
+          </p>
+        </div>
+      </div>
+      <footer class="footer mt-m">
+        {#if $user}
+          <Button
+            href={createUrl(meetup?.registrationLink, {
+              ref: 'map',
+              wtmg: $user?.id
+            })}
+            target="_blank"
+            uppercase
+            medium
+          >
+            {$_('map.meetups.btn-register')}
+          </Button>
+        {:else}
+          <p class="cta-hint">
+            {@html $_('map.meetups.no-account', {
+              values: {
+                signInLink: `<a class='link' href=${routes.SIGN_IN}>${$_(
+                  'garden.drawer.guest.sign-link-text'
+                )}</a>`
+              }
+            })}
+          </p>
+        {/if}
+      </footer>
+    </section>
+  {/if}
+</div>
+
+<style>
+  .drawer {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    font-family: var(--fonts-copy);
+    top: 50%;
+    right: 0;
+    background-color: white;
+    width: 38rem;
+    max-height: 80%;
+    z-index: 200;
+    padding: 3rem 2rem 0;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
+    border-top-left-radius: 1rem;
+    border-bottom-left-radius: 1rem;
+    transform: translateY(-50%);
+    transition: right 250ms;
+  }
+
+  .drawer.hidden {
+    right: -38rem;
+    min-height: 30rem;
+  }
+
+  .main {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .drawer-content-area {
+    overflow-y: auto;
+  }
+
+  .garden-title {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .footer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 2rem 0;
+  }
+
+  .image-wrapper {
+    width: 6rem;
+    height: 6rem;
+    background-color: var(--color-beige);
+    border-radius: 1rem;
+    margin-bottom: 2rem;
+  }
+
+  .image-wrapper:hover {
+    cursor: zoom-in;
+  }
+
+  .image-wrapper :global(.meetup-img) {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 1rem;
+  }
+
+  @media screen and (max-height: 800px) {
+    .drawer {
+      max-height: 70%;
+    }
+    .drawer-content-area {
+      margin-top: 1.2rem;
+    }
+
+    .drawer :global(.mb-l) {
+      margin-bottom: 0.4rem;
+    }
+
+    /* .image-wrapper {
+      position: absolute;
+      top: 1.5rem;
+      right: 3rem;
+      margin-bottom: 0;
+    } */
+  }
+
+  @media screen and (max-width: 700px) {
+    .drawer {
+      min-height: auto;
+      max-height: calc(var(--vh, 1vh) * 70);
+      top: auto;
+      right: auto;
+      bottom: 0;
+      transform: none;
+      width: 100%;
+      border-top-right-radius: 2rem;
+      border-top-left-radius: 2rem;
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+      transition: transform 250ms;
+    }
+    .drawer.hidden {
+      right: 0;
+      transform: translateY(100rem);
+    }
+
+    .drawer-content-area {
+      margin-top: 1.2rem;
+    }
+
+    /* .image-wrapper {
+      position: absolute;
+      top: 1.5rem;
+      right: 3rem;
+      margin-bottom: 0;
+    } */
+
+    .drawer :global(.mb-l) {
+      margin-bottom: 0.4rem;
+    }
+  }
+
+  .description {
+    max-width: 45rem;
+    word-wrap: break-word;
+  }
+
+  .magnified-photo-wrapper {
+    width: 100vw;
+    height: calc(var(--vh, 1vh) * 100);
+    left: 0;
+    top: 0;
+    background-color: rgba(0, 0, 0, 0.6);
+    position: fixed;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .magnified-photo {
+    max-width: 192rem;
+    max-height: calc(var(--vh, 1vh) * 60);
+    width: auto;
+    height: calc(var(--vh, 1vh) * 80);
+  }
+
+  .magnified-photo :global(img) {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+  }
+  .cta-hint {
+    text-align: center;
+    margin-bottom: 1rem;
+    font-size: 1.4rem;
+  }
+</style>
diff --git a/src/lib/components/Map/MeetupLayer.svelte b/src/lib/components/Map/MeetupLayer.svelte
new file mode 100644
index 00000000..8b1b3041
--- /dev/null
+++ b/src/lib/components/Map/MeetupLayer.svelte
@@ -0,0 +1,119 @@
+<script context="module" lang="ts">
+  // Data & types, usable by other components too
+  export const MEETUP_ID = 'meetups';
+  export type Meetup = {
+    id: string;
+    date: Date;
+    // place name
+    place: string;
+    lnglat: [number, number];
+    registrationLink: string;
+  };
+
+  export const meetups: Meetup[] = [
+    {
+      id: 'lier-6-2024',
+      date: new Date(2024, 6 - 1, 22),
+      place: 'Lier',
+      lnglat: [4.56194, 51.13584],
+      registrationLink: `https://meetup.welcometomygarden.org/lier`
+    },
+    {
+      id: 'arlon-7-2024',
+      date: new Date(2024, 7 - 1, 13),
+      place: 'Arlon',
+      lnglat: [5.8095, 49.6803],
+      registrationLink: `https://meetup.welcometomygarden.org/arlon`
+    }
+  ];
+</script>
+
+<script lang="ts">
+  // Note: assumes that the parent component has already loaded the map on component load
+  import { createEventDispatcher, getContext } from 'svelte';
+  import type { ContextType } from './Map.svelte';
+  import key from './mapbox-context.js';
+  import type GeoJSON from 'geojson';
+  import type maplibregl from 'maplibre-gl';
+  import { gardenLayerLoaded } from '$lib/stores/app';
+  import { loadImg } from '$lib/api/mapbox';
+
+  export let selectedMeetupId: undefined | string;
+  let loaded = false;
+
+  const { getMap } = getContext<ContextType>(key);
+  const map = getMap();
+  const dispatch = createEventDispatcher();
+  const onMeetupClick = (e: maplibregl.MapMouseEvent) => {
+    // will be serialized, but we only need the id!
+    const meetup = e.features?.[0]?.properties;
+    dispatch('meetup-click', meetup.id);
+  };
+  const meetupFeatureCollection: (_: any) => GeoJSON.FeatureCollection = () => ({
+    type: 'FeatureCollection',
+    features: meetups.map((m) => ({
+      type: 'Feature',
+      properties: {
+        ...m,
+        // For easier serialization, arrays are serialized as strings.
+        icon: selectedMeetupId === m.id ? 'fireplace-selected' : 'fireplace'
+      },
+      geometry: {
+        type: 'Point',
+        coordinates: m.lnglat
+      }
+    }))
+  });
+
+  async function loadLayer() {
+    map.addSource(MEETUP_ID, {
+      type: 'geojson',
+      data: meetupFeatureCollection()
+    });
+    map
+      .addLayer({
+        id: MEETUP_ID,
+        type: 'symbol',
+        source: MEETUP_ID,
+        layout: {
+          'icon-image': ['get', 'icon'],
+          'icon-size': 0.4,
+          'icon-allow-overlap': true,
+          'icon-ignore-placement': true
+        }
+      })
+      .moveLayer(MEETUP_ID);
+
+    // Add click handler
+    map.on('click', MEETUP_ID, onMeetupClick);
+
+    // Add hover handlers
+    // TODO: copy-pasted from GardenLayer, probably should be refactored as utilities
+    map.on('mouseenter', MEETUP_ID, () => {
+      map.getCanvas().style.cursor = 'pointer';
+    });
+    map.on('mouseleave', MEETUP_ID, () => {
+      map.getCanvas().style.cursor = '';
+    });
+
+    loaded = true;
+  }
+
+  // Only load the meetup layer after the garden layer, to ensure it layered on top.
+  $: if ($gardenLayerLoaded) {
+    Promise.all(
+      [
+        {
+          url: '/images/markers/fireplace.png',
+          id: 'fireplace'
+        },
+        { url: '/images/markers/fireplace-yellow.png', id: 'fireplace-selected' }
+      ].map((img) => loadImg(map, img))
+    ).then(loadLayer);
+  }
+
+  // Update data when meetup ID changes
+  $: if (loaded) {
+    map.getSource(MEETUP_ID).setData(meetupFeatureCollection(selectedMeetupId));
+  }
+</script>
diff --git a/src/locales/en.json b/src/locales/en.json
index ae92e70d..04e48619 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1174,7 +1174,16 @@
       "select-file": "select file",
       "added-to-map": "has been added to the map."
     },
-    "zoom-restriction-notice": "to zoom in more"
+    "zoom-restriction-notice": "to zoom in more",
+    "meetups": {
+      "description": "Looking for your next slow travel adventure? Join us at the WTMG meetup near {location} on {date}! The idea is simple: we meet in a WTMG garden, share our excitement about slow travel and have a great time together. It’s free, but mandatory to register. See you there!",
+      "btn-register": "Register now",
+      "no-account": "You must {signInLink} to register",
+      "cities": {
+        "Lier": "Lier",
+        "Arlon": "Arlon"
+      }
+    }
   },
   "terms-of-use": {
     "title": "Terms of use",
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 3c9b0e74..80cc1b69 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -1160,7 +1160,12 @@
       "select-file": "sélectionnez le fichier",
       "added-to-map": "a été ajouté sur la carte."
     },
-    "zoom-restriction-notice": "pour zoomer plus"
+    "zoom-restriction-notice": "pour zoomer plus",
+    "meetups": {
+      "description": "Vous cherchez votre prochaine aventure slow travel ? Rejoignez-nous au meetup WTMG près de {location} le {date} ! L’idée est simple : nous nous retrouvons dans un jardin WTMG, partageons notre enthousiasme pour le slow travel et passons un bon moment ensemble. C'est gratuit, mais vous devez vous inscrire. Nous avons hâte de vous y voir !",
+      "btn-register": "S’inscrire",
+      "no-account": "Vous devez {signInLink} pour vous inscrire"
+    }
   },
   "terms-of-use": {
     "title": "Conditions d'utilisation",
diff --git a/src/locales/nl.json b/src/locales/nl.json
index ada342ba..4db283ec 100644
--- a/src/locales/nl.json
+++ b/src/locales/nl.json
@@ -778,7 +778,15 @@
       "select-file": "selecteer een bestand",
       "added-to-map": "is toegevoegd aan de kaart."
     },
-    "zoom-restriction-notice": "om meer in te zoomen"
+    "zoom-restriction-notice": "om meer in te zoomen",
+    "meetups": {
+      "description": "Op zoek naar je volgende slow travel avontuur? Kom naar de WTMG meetup in de buurt van {location} op {date}! Het idee is simpel: we ontmoeten elkaar in een WTMG-tuin, delen ons enthousiasme over slow travel en hebben een geweldige tijd samen. Het is gratis, maar inschrijven is verplicht. Tot dan!",
+      "btn-register": "Schrijf je in",
+      "no-account": "Je moet {signInLink} om je in te schrijven",
+      "cities": {
+        "Arlon": "Aarlen"
+      }
+    }
   },
   "rules": {
     "title": "Regels",
diff --git a/src/routes/explore/+layout.svelte b/src/routes/explore/+layout.svelte
index 1ed71e1b..aaf140cc 100644
--- a/src/routes/explore/+layout.svelte
+++ b/src/routes/explore/+layout.svelte
@@ -34,6 +34,9 @@
   import { fileDataLayers, removeTrailAnimations } from '$lib/stores/file';
   import { isOnIDevicePWA } from '$lib/api/push-registrations';
   import { isEmpty } from 'lodash-es';
+  import MeetupLayer, { meetups } from '$lib/components/Map/MeetupLayer.svelte';
+  import { lnglatToObject } from '$lib/api/mapbox';
+  import MeetupDrawer from '$lib/components/Map/MeetupDrawer.svelte';
 
   let showHiking = false;
   let showCycling = false;
@@ -83,6 +86,10 @@
   // TODO check this: It looks like there is no need for a subscribe on page
   let hasGardenInURL = !!$page.params.gardenId;
 
+  // reactivity seems to be necessary here!
+  $: selectedMeetupId = $page.params.meetupId;
+  $: selectedMeetup = meetups.find((m) => m.id === selectedMeetupId);
+
   let zoom = hasGardenInURL ? ZOOM_LEVELS.ROAD : ZOOM_LEVELS.WESTERN_EUROPE;
 
   $: applyZoom = hasGardenInURL ? true : false;
@@ -136,6 +143,14 @@
     }
   };
 
+  const selectMeetup = (meetupId: string) => {
+    const meetup = meetups.find((m) => m.id === meetupId);
+    if (meetup) {
+      centerLocation = lnglatToObject(meetup.lnglat);
+      goto(`${routes.MAP}/meetup/${meetup.id}`);
+    }
+  };
+
   const goToPlace = (event) => {
     zoom = ZOOM_LEVELS.CITY;
     applyZoom = true;
@@ -225,7 +240,9 @@
       />
     {/if}
     <Drawer on:close={closeDrawer} garden={selectedGarden} />
+    <MeetupDrawer on:close={closeDrawer} meetup={selectedMeetup} />
     <WaymarkedTrails {showHiking} {showCycling} />
+    <MeetupLayer on:meetup-click={(e) => selectMeetup(e.detail)} {selectedMeetupId} />
     <slot />
     {#if carNoticeShown}
       <div class="vehicle-notice-wrapper">
diff --git a/src/routes/explore/meetup/[meetupId]/+page.svelte b/src/routes/explore/meetup/[meetupId]/+page.svelte
new file mode 100644
index 00000000..5d2a3a05
--- /dev/null
+++ b/src/routes/explore/meetup/[meetupId]/+page.svelte
@@ -0,0 +1 @@
+<script></script>
diff --git a/static/images/markers/fireplace-yellow.png b/static/images/markers/fireplace-yellow.png
new file mode 100644
index 0000000000000000000000000000000000000000..bcb60aadff957775ca4fc57351a4ca1fd7538eef
GIT binary patch
literal 7365
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
WP3qM`WN`Z%1<=;eSFcfpMEoDDzJ9s@

literal 0
HcmV?d00001

diff --git a/static/images/markers/fireplace.png b/static/images/markers/fireplace.png
new file mode 100644
index 0000000000000000000000000000000000000000..3feb2f555a6a7681d4890a434b6120a3cd30a3a9
GIT binary patch
literal 1339
zcmbu9{XY{30LJHSj0{DVSW`sj_2gL8HH+BQxtV40$u@7b=*87;6D}_eVMckUV+*~B
zQImHj+9o+_3CG=BD--5*^AelW-*C_8^E}@lo}Zpyo^-UYx30E{HUI$7MfrGQwn_YE
zEw$|&I+^yZ7(t)LdTn#-e@HPuyCE8-CjBN&xG0m$u%Vdw?D(|-J__f}Zm8Xqi09I-
zuXJ)&`R$A4jLPbY<jh1Fn<a02l2t%&<+i*XdOI~eHJ5g+m{ml)gkNT}E>R=pjnxZ<
zDZD=3`taLv(fEc$y!5b;*Y|2|fX8lND^}%ShX<9b^2PFO<?4#8v3h-YaQR^&Hq?KW
z-w{Q<Sj;M96wo=T0VlS%8Im!+{s0kCKN>cV=w#=V4>%IC(O2u3Kb^>q0|3;NC{GV;
z48Ea6LJ`Avq@er)ek~5SLQ|!d?WfD7QiX_goqVz&*+?tsStsGpk8Qkmn8oYe=dFi3
z7B=1`;Y`1*8^5UTd5jMD1*xkj8#1Wzd!cF4R$x-AX{(G_c6I2|x|n`&GtVm41!Vj=
zHZ+}~=Ph*KKS!mz+hwAS2Xk~H!n0{SAGJ~-n1cYH-C$YH7fq&p7<uzmS|6D3=j1y;
zWbuVX;X&E~i0M%IbGX%BATh&#tR`b>%U0>(vH?sLw3vC%iX82GQ+aVgM4E<toPXwK
z6vP<}aK|ngI@4L2^0uDaZ_r(Q;2m&?Q}?4_zZ56y+gk$;(Xh=ZMY=ZL#K@5zRb<@f
zz_A<!YH;`0io@&|1e}5jv<m&iNF^T=jm+a3J7&%lw=0HIQUC6=epWQ0%%ZxAWLclo
zx-491MGa+wFM#Kum=EY|q`@xm;yB5DD9ki+#y~n)(ab$5zN0Z~FTSx~{b@V{(=$1)
zuX@bfvpk(kPaKcZwtg9=j&xEtE<#1}a@xKdkr>r^tvahZ&=9yaN&iIqLSi$d$RqgC
z22!>6{W+ML>LF9udboWZP}LjI--hBr{@}8Oso;>L6){<$<vf2tNx{HRgY0yoY3jk+
zQ}>Vj9bZlp4NtLkn0H7)Gt}kD3j)yj2f!p8L%ZWlLYf-k<6RIbh5&Y7nY@B`*wi4C
zQ*_&q&4IUGkz@B^?MH+;?)k0U@9#nFGdz^ye*XQG^<{>QVV!z{A)oQ|njp~dag-m@
zXJXI!8>-#YQ^ovDefU@8Z5vn<zJ^lOQ#nHQg64KF^-6}OOFAysCr(^(HmMprmiIJM
zLD93^7?a6U5^`PfWUVjOlDU<Zo!*etTqfr862DqW3vz2I6|pOlNw^t=6C(pxN%%oi
zy>v&2v6*wgK#ctNJm^1MxVhO&Xh_yrEAr!&Rz6Qsc?t`qXvNV+uL^JR-~^jMC{{Su
zPSO9oP}&@NhO-xU^M)^iUo{8G6vsgFiQ>^TkPBqNyzvRKS#$R(Lu<{mcO#siETAd&
z1ONevL9uqGd8nMzZnD}}&?|46Wl78I5-(Tk^>N<idYLu@O)SDyj{F$i4U641Be6T|
z6T8M@`iK4ODYH24gP^SOOSYIHOf!ou3^1Rpl0?4%1i2k4J{rUrbYzay;5A;zDk9uc
z&0NZ$7OgZeGaO(Q3e&QMg9>2v11knP0i;gl=(%U=-3X-4y{`4+k)Qm6Nj^BxVcSsw
z^b|zcoLsTECoX8Wd9a5N|1zYcvx>&aCkd+bY|Cu^8mvDmou2A<ecv=a>?VAk2RC}%
l(At5ES3I1jW_2o;_dPfs5xV@|)n)rB04OhC&srog`9DAyw2lA(

literal 0
HcmV?d00001