Merge branch 'develop'

README.md

@@ -188,12 +188,14 @@ Special formatting support:
 | Seach query | search_query | | | | trackSiteSearch | query |
 | Selecting a search result | search_result_event | | search_result_event | type, title | trackEvent | event, action, title, resultType |
 | Opening the popup | popup | | pageview | pageTitle, pageLocation, pagePath, poiId | trackPageView | title, Url |
-| Action on the popup | popup_event | details, route, explore, favorite, zoom | popup_event | action, title, poiId, category | trackEvent | event, action, title, poiId |
-| Action on the map control | map_control_event | 3d, background, explorer, favorite | map_control_event | action | trackEvent | event, action |
+| Action on the popup | popup_event | details, route, explore, favorite, zoom, isochrone | popup_event | action, title, poiId, category | trackEvent | event, action, title, poiId |
+| Action on the map control | map_control_event | 3d, explorer, favorite | map_control_event | action | trackEvent | event, action |
+| Action on the map background control | map_control_event | background | map_control_event | action, background | trackEvent | event, action, background |
 | Action on favorites | favorites_event | open_share, copy_link, exportPDF, exportCSV | favorites_event | action | trackEvent | event, action |
 | Notebook | notebook_event | open | pageview | pageTitle, pagePath | trackPageView | title, Url |
 | External links | external_link | | external_link | Url, title | trackLink | Url |
 | Action on details page | details_event | favorite | details_event | action, title, poiId | trackEvent | event, action, title, poiId |
+| Select isochrone profile | isochrone_event | select_profile | isochrone_event | action, profile | trackEvent | event, action, profile |
 
 Note on Matomo. `Origin` is a set as dimension `1` and should be configured as is on Matomo.
 

components/Fields/Field.vue

@@ -314,7 +314,7 @@ export default defineNuxtComponent({
         "
         :href="properties[field.field]"
         class="d-inline-block pa-2 rounded-lg"
-        :style="{ color: '#ffffff' }"
+        :style="{ backgroundColor: colorfill, color: '#ffffff' }"
       >
         <FontAwesomeIcon icon="arrow-circle-down" />
         {{ fieldTranslateK(field.field) }}

components/Home/Embedded.vue

@@ -15,6 +15,7 @@ import { menuStore as useMenuStore } from '~/stores/menu'
 import { siteStore as useSiteStore } from '~/stores/site'
 import { Mode } from '~/utils/types'
 import { flattenFeatures } from '~/utils/utilities'
+import IsochroneStatus from '~/components/Isochrone/IsochroneStatus.vue'
 
 //
 // Props
@@ -35,6 +36,7 @@ const { config, settings } = useSiteStore()
 const route = useRoute()
 const router = useRouter()
 const { t } = useI18n()
+const { isochroneCurrentFeature } = useIsochrone()
 
 //
 // Data
@@ -219,8 +221,9 @@ function toggleExploreAroundSelectedPoi() {
           class="tw-p-4 tw-absolute tw-z-1 tw-w-full"
           @category-change="onMenuChange"
         />
-        <div class="tw-p-4 tw-pt-24 tw-absolute">
+        <div class="tw-p-4 tw-pt-24 tw-absolute tw-flex tw-gap-4">
           <SelectedCategories v-if="!isFiltersEqualToCategoryId" />
+          <IsochroneStatus v-if="isochroneCurrentFeature" />
         </div>
       </div>
     </div>

components/Isochrone/IsochroneTrigger.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import type { ProfileKeys } from '~/composables/useIsochrone'
 
 //
 // Props
@@ -8,6 +9,14 @@ const props = defineProps<{
   feature: GeoJSON.Feature
 }>()
 
+//
+// Emits
+//
+const emit = defineEmits<{
+  (event: 'profileUpdate', profile: Profile): void
+  (event: 'triggerClick'): void
+}>()
+
 //
 // Composables
 //
@@ -29,20 +38,44 @@ async function handleProfileUpdate(value: Profile) {
     loading.value = true
 
     await fetchIsochrone(props.feature, value)
+
+    const profileTrackingLabel = Object.keys(profiles).find(key => profiles[key as ProfileKeys] === value)
+
+    if (!profileTrackingLabel)
+      throw new Error(`Tracking label for ${value} not found`)
+
+    emit('profileUpdate', profileTrackingLabel)
+
     toggleOverlay()
   }
-  catch (e: any) {
-    error.value = e.message
+  catch (err) {
+    if (err instanceof Error) {
+      error.value = err.message
+    }
+    else {
+      error.value = 'An unknown error occurred'
+    }
   }
   finally {
     loading.value = false
     profile.value = undefined
   }
 }
+
+function handleTriggerClick() {
+  toggleOverlay()
+  emit('triggerClick')
+}
 </script>
 
 <template>
-  <button type="button" :title="t('isochrone.trigger.title')" :class="$attrs.class" :aria-label="t('isochrone.trigger.label')" @click.stop="toggleOverlay">
+  <button
+    type="button"
+    :title="t('isochrone.trigger.title')"
+    :class="$attrs.class"
+    :aria-label="t('isochrone.trigger.label')"
+    @click.stop="handleTriggerClick"
+  >
     <slot />
   </button>
 
@@ -84,11 +117,11 @@ async function handleProfileUpdate(value: Profile) {
             </template>
             {{ t(`isochrone.profiles.${profiles.foot}`) }}
           </VBtn>
-          <VBtn :value="profiles.cycle">
+          <VBtn :value="profiles.bicycle">
             <template #prepend>
               <FontAwesomeIcon icon="biking" />
             </template>
-            {{ t(`isochrone.profiles.${profiles.cycle}`) }}
+            {{ t(`isochrone.profiles.${profiles.bicycle}`) }}
           </VBtn>
           <VBtn :value="profiles.car">
             <template #prepend>

components/Map/MapControlsBackground.vue

@@ -88,8 +88,11 @@ export default defineNuxtComponent({
     },
 
     changeBackground(background: MapStyleEnum) {
-      // TODO mettre le background selectioné
-      this.$tracking({ type: 'map_control_event', event: 'background' })
+      this.$tracking({
+        type: 'map_control_event',
+        event: 'background',
+        background,
+      })
 
       this.activeBackground = background
       routerPushHashUpdate(this.$router, {

components/PoisCard/PoiCardContent.vue

@@ -135,7 +135,7 @@ function onFavoriteClick() {
   emit('favoriteClick', props.poi)
 }
 
-function trackingPopupEvent(event: 'details' | 'route' | 'explore' | 'favorite' | 'zoom') {
+function trackingPopupEvent(event: 'details' | 'route' | 'explore' | 'favorite' | 'zoom' | 'isochrone') {
   $tracking({
     type: 'popup_event',
     event,
@@ -144,6 +144,14 @@ function trackingPopupEvent(event: 'details' | 'route' | 'explore' | 'favorite'
     title: featureName.value,
   })
 }
+
+function trackIsochroneEvent(profile: Profile) {
+  $tracking({
+    type: 'isochrone_event',
+    event: 'select_profile',
+    profile,
+  })
+}
 </script>
 
 <template>
@@ -245,6 +253,8 @@ function trackingPopupEvent(event: 'details' | 'route' | 'explore' | 'favorite'
           isSameFeatureAsIsochrone && 'tw-bg-blue-600 tw-text-white hover:tw-bg-blue-500',
           !isSameFeatureAsIsochrone && 'hover:tw-bg-zinc-100',
         ]"
+        @trigger-click="trackingPopupEvent('isochrone')"
+        @profile-update="trackIsochroneEvent"
       >
         <FontAwesomeIcon :color="isSameFeatureAsIsochrone ? '#fff' : colorLine" icon="clock" size="sm" />
         <span class="tw-text-sm">{{ t('isochrone.trigger.label') }}</span>

components/PoisDetails/Block.vue

@@ -58,4 +58,8 @@ export default defineNuxtComponent({
 .block-block * {
   color: white;
 }
+
+.block-block  :deep([id*="route:"] a) {
+  background-color: unset !important;
+}
 </style>

composables/useIdsResolver.ts

@@ -0,0 +1,6 @@
+export const regexForCategoryIds = /^(?:(?<cartocode>cartocode:\w{2})|(?<reference>ref:[\w-]+:\w+)|(?<osm>osm:[nwr]\d+)|\d+(?:,\d+)*)$/
+export const regexForPOIIds = /^(?:cartocode:\w{2}|ref:[\w-]+:\w+|osm:[nwr]\d+|\d+)$/
+
+export function useIdsResolver() {
+
+}

composables/useIsochrone.ts

@@ -6,12 +6,12 @@ import { mapStore as useMapStore } from '~/stores/map'
 
 export const profiles = {
   car: 'driving-car',
-  cycle: 'cycling-regular',
+  bicycle: 'cycling-regular',
   foot: 'foot-walking',
   wheelchair: 'wheelchair',
 }
 
-type ProfileKeys = keyof typeof profiles
+export type ProfileKeys = keyof typeof profiles
 export type Profile = (typeof profiles)[ProfileKeys]
 type ORSData = FeatureCollection<Geometry, GeoJsonProperties> & {
   bbox: LngLatBoundsLike

lib/tracker-google.ts

@@ -105,7 +105,19 @@ export default class Google implements Tracker {
         break
       }
       case 'map_control_event': {
-        window.dataLayer?.push({ event: event.type, action: event.event })
+        const dataLayerObject: {
+          event: 'map_control_event'
+          action: '3d' | 'explorer' | 'favorite' | 'background'
+          background?: MapStyleEnum
+        } = {
+          event: event.type,
+          action: event.event,
+        }
+
+        if (event.event === 'background')
+          dataLayerObject.background = event.background
+
+        window.dataLayer?.push(dataLayerObject)
         break
       }
       case 'favorites_event': {
@@ -129,6 +141,14 @@ export default class Google implements Tracker {
         })
         break
       }
+      case 'isochrone_event': {
+        window.dataLayer?.push({
+          event: event.type,
+          action: event.event,
+          profile: event.profile,
+        })
+        break
+      }
     }
   }
 }

lib/tracker-matomo.ts

@@ -119,13 +119,20 @@ export default class Matomo implements Tracker {
         break
       }
       case 'map_control_event': {
-        _paq.push([
+        const eventParams = [
           'trackEvent',
           // category
           event.type,
           // action
           event.event,
-        ])
+        ]
+
+        if (event.event === 'background') {
+          eventParams.push('background')
+          eventParams.push(event.background)
+        }
+
+        _paq.push(eventParams)
         break
       }
       case 'favorites_event': {
@@ -161,6 +168,20 @@ export default class Matomo implements Tracker {
         ])
         break
       }
+      case 'isochrone_event': {
+        _paq.push([
+          'trackEvent',
+          // category
+          event.type,
+          // action
+          event.event,
+          // name
+          'profile',
+          // value
+          event.profile,
+        ])
+        break
+      }
     }
   }
 }

lib/trackers.ts

@@ -6,7 +6,6 @@ import type { ApiMenuCategory, MenuItem } from '~/lib/apiMenu'
 import type { OriginEnum } from '~/utils/types'
 
 // Also Update README.md according to tracking changes.
-
 export type Event =
   | {
     type: 'page'
@@ -49,14 +48,19 @@ export type Event =
   }
   | {
     type: 'popup_event'
-    event: 'details' | 'route' | 'explore' | 'favorite' | 'zoom'
+    event: 'details' | 'route' | 'explore' | 'favorite' | 'zoom' | 'isochrone'
     poiId: ApiPoiId
     category: string
     title?: string
   }
   | {
     type: 'map_control_event'
-    event: '3d' | 'background' | 'explorer' | 'favorite'
+    event: '3d' | 'explorer' | 'favorite'
+  }
+  | {
+    type: 'map_control_event'
+    event: 'background'
+    background: MapStyleEnum
   }
   | {
     type: 'favorites_event'
@@ -77,6 +81,11 @@ export type Event =
     poiId: ApiPoiId
     title?: string
   }
+  | {
+    type: 'isochrone_event'
+    event: 'select_profile'
+    profile: Profile
+  }
 
 export interface Tracker {
   consent: (app: App) => void

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@teritorio/vido",
   "type": "module",
-  "version": "1.24.0",
+  "version": "1.24.1",
   "private": true,
   "packageManager": "[email protected]",
   "engines": {
@@ -37,7 +37,7 @@
     "@sentry/vue": "^8.35.0",
     "@tailwindcss/typography": "^0.5.9",
     "@teritorio/map": "^0.12.7",
-    "@teritorio/maplibre-gl-teritorio-cluster": "^0.0.12",
+    "@teritorio/maplibre-gl-teritorio-cluster": "^0.0.16",
     "@teritorio/openmaptiles-gl-language": "^1.5.4",
     "@turf/boolean-intersects": "^6.5.0",
     "@turf/mask": "^7.1.0",

pages/category/[id].vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
+import { regexForCategoryIds } from '~/composables/useIdsResolver'
+
 //
 // Validators
 //
 definePageMeta({
   validate({ params }) {
-    return typeof params.id === 'string' && /^[-\w:,]+$/.test(params.id)
+    return !!params.id && regexForCategoryIds.test(params.id.toString())
   },
 })
 </script>