Merge pull request #282 from benoitdemaegdt/feat_tooltip-design

🎨 Nouveau design du tooltip
lavilleavelo · Feb 16, 2024 · 0cc4121 · 0cc4121
2 parents 0d6527d + 2040e08
commit 0cc4121
Show file tree

Hide file tree

Showing 4 changed files with 149 additions and 74 deletions.
diff --git a/components/Map.vue b/components/Map.vue
@@ -14,12 +14,14 @@
 </template>
 
 <script setup>
+import { createApp, defineComponent, h, Suspense } from 'vue';
 import maplibregl from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
 import style from '@/assets/style.json';
 import LegendControl from '@/maplibre/LegendControl';
 import FullscreenControl from '@/maplibre/FullscreenControl';
 import ShrinkControl from '@/maplibre/ShrinkControl';
+import LineTooltip from '~/components/tooltips/LineTooltip.vue';
 
 // const config = useRuntimeConfig();
 // const maptilerKey = config.public.maptilerKey;
@@ -61,7 +63,7 @@ const {
   fitBounds
 } = useMap();
 
-const { getTooltipHtml, getTooltipPerspective, getTooltipCompteur } = useTooltip();
+const { getTooltipPerspective, getTooltipCompteur } = useTooltip();
 
 function plotFeatures({ map, features }) {
   plotUnderlinedSections({ map, features });
@@ -161,11 +163,26 @@ onMounted(() => {
         .addTo(map);
     } else {
       const { line, name } = features[0].properties;
+      // take care feature[0].geometry is truncated (to fit tile size). We need to find the full feature.
       const feature = props.features.find(feature => feature.properties.line === line && feature.properties.name === name);
+      const lines = feature.properties.id
+        ? [...new Set(features.filter(f => f.properties.id === feature.properties.id).map(f => f.properties.line))]
+        : [feature.properties.line];
+
       new maplibregl.Popup({ closeButton: false, closeOnClick: true })
         .setLngLat(e.lngLat)
-        .setHTML(getTooltipHtml(feature))
+        .setHTML('<div id="line-tooltip-content"></div>')
         .addTo(map);
+
+      const LineTooltipComponent = defineComponent(LineTooltip);
+      nextTick(() => {
+        createApp({
+          render: () => h(Suspense, null, {
+            default: h(LineTooltipComponent, { feature, lines }),
+            fallback: 'Chargement...'
+          })
+        }).mount('#line-tooltip-content');
+      });
     }
   });
 });

diff --git a/components/tooltips/LineTooltip.vue b/components/tooltips/LineTooltip.vue
@@ -0,0 +1,128 @@
+<template>
+  <div class="not-prose w-48">
+    <div class="py-1 bg-zinc-100 flex flex-col items-center justify-center">
+      <div class="text-gray-900 font-bold text-lg">
+        Voie Lyonnaise
+      </div>
+      <div class="flex flex-row space-x-1">
+        <div
+          v-for="line in lines"
+          :key="line"
+          class="h-6 w-6 rounded-full flex items-center justify-center text-white text-md font-bold"
+          :style="`background-color: ${getLineColor(line)}`"
+        >
+          {{ line }}
+        </div>
+      </div>
+    </div>
+    <div class="px-2 divide-y">
+      <div class="py-1 flex flex-col items-center">
+        <div class="text-base font-bold">
+          Tronçon
+        </div>
+        <div class="text-sm text-center">
+          {{ feature.properties.name }}
+        </div>
+      </div>
+      <div class="py-1 flex items-center justify-between">
+        <div class="text-base font-bold">
+          statut
+        </div>
+        <div>
+          <div class="text-sm" :class="getStatus(feature.properties).class">
+            {{ getStatus(feature.properties).label }}
+          </div>
+          <div v-if="getStatus(feature.properties).date" class="italic">
+            {{ getStatus(feature.properties).date }}
+          </div>
+        </div>
+      </div>
+      <div class="py-1 flex items-center justify-between">
+        <div class="text-base font-bold">
+          Longueur
+        </div>
+        <div class="text-sm">
+          {{ Math.round(getDistance({ features: [feature] }) / 25) * 25 }}m
+        </div>
+      </div>
+    </div>
+    <div class="bg-lvv-blue-600 flex justify-center">
+      <a class="p-1 text-white text-base italic hover:underline" :href="`/voie-lyonnaise-${feature.properties.line}`" target="_blank">
+        voir le détail <Icon name="mdi:link-variant" class="h-4 w-4 text-white" />
+      </a>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { getLineColor } = useColors();
+const { getDistance } = useStats();
+
+type Status = 'done' | 'wip' | 'planned' | 'postponed' | 'variante';
+type Properties = {
+  id?: string;
+  line: number;
+  name: string;
+  status: Status;
+  doneAt?: string;
+};
+
+const { feature, lines } = defineProps<{
+  feature: {
+    type: string;
+    properties: Properties;
+    geometry: {
+      type: string;
+      coordinates: number[][];
+    };
+  }
+  lines: number[];
+}>();
+
+function getDoneAtText(doneAt: string): string {
+  const [day, month, year] = doneAt.split('/');
+  const isBeforeMandat =
+    new Date(Number(year), Number(month) - 1, Number(day)).getTime() < new Date(2021, 0, 1).getTime();
+  if (isBeforeMandat) {
+    return 'avant 2021';
+  }
+  return `le ${doneAt}`;
+}
+
+function getStatus(properties: Properties): { label: string, class: string; date?: string } {
+  const statusMapping = {
+    done: {
+      label: 'terminé',
+      date: properties.doneAt && getDoneAtText(properties.doneAt),
+      class: 'text-white bg-lvv-blue-600 rounded-xl px-2'
+    },
+    wip: {
+      label: 'en travaux',
+      class: 'text-lvv-blue-600 rounded-xl px-2 border border-dashed border-lvv-blue-600'
+    },
+    planned: {
+      label: 'prévu',
+      class: 'text-lvv-blue-600 rounded-xl px-2 border border-lvv-blue-600'
+    },
+    postponed: {
+      label: 'reporté',
+      date: 'après 2026',
+      class: 'text-white bg-lvv-pink rounded-xl px-2'
+    },
+    variante: {
+      label: 'variante',
+      class: ''
+    },
+    'variante-postponed': {
+      label: 'variante reportée',
+      date: 'après 2026',
+      class: 'text-white bg-lvv-pink rounded-xl px-2'
+    },
+    unknown: {
+      label: 'à définir',
+      class: 'text-gray-900 bg-gray-200 rounded-xl px-2'
+    }
+  };
+  return statusMapping[properties.status];
+}
+</script>
diff --git a/composables/useStats.ts b/composables/useStats.ts
@@ -5,6 +5,7 @@ type Feature = {
     line: number;
     name: string;
     status: string;
+    doneAt?: string;
   };
   geometry: {
     type: string;

diff --git a/composables/useTooltip.ts b/composables/useTooltip.ts
@@ -1,22 +1,3 @@
-const { getDistance } = useStats();
-
-type Status = 'done' | 'wip' | 'planned' | 'postponed' | 'variante';
-
-type Feature = {
-  type: string;
-  properties: {
-    id?: string;
-    line: number;
-    name: string;
-    status: Status;
-    doneAt?: string;
-  };
-  geometry: {
-    type: string;
-    coordinates: number[][];
-  };
-};
-
 type PerspectiveProperties = {
   line: number;
   imgUrl: string;
@@ -30,61 +11,9 @@ type CompteurProperties = {
   lastRecordValue: string;
 };
 
-function getStatusText(status: Status, doneAt?: string): string {
-  const statusText = {
-    done: () => `Terminé (${getDoneAtText(doneAt!)})`,
-    wip: () => 'En travaux',
-    planned: () => 'Prévu',
-    postponed: () => 'Reporté après 2026',
-    variante: () => 'Variante',
-    'variante-postponed': () => 'Variante reportée après 2026',
-    unknown: () => 'Tracé à définir'
-  };
-  return statusText[status]();
-}
-
-function getDoneAtText(doneAt: string): string {
-  const [day, month, year] = doneAt.split('/');
-  const isBeforeMandat =
-    new Date(Number(year), Number(month) - 1, Number(day)).getTime() < new Date(2021, 0, 1).getTime();
-  if (isBeforeMandat) {
-    return 'avant 2021';
-  }
-  return `le ${doneAt}`;
-}
-
 export const useTooltip = () => {
   const { getLineColor } = useColors();
 
-  function getTooltipHtml(feature: Feature) {
-    const color = getLineColor(feature.properties.line);
-    return `
-      <div class="not-prose text-black">
-        <div class="h-10 flex items-center" style="background-color: ${color}">
-          <div class="p-2">
-            <a class='text-white font-bold text-lg hover:underline' href='/voie-lyonnaise-${feature.properties.line}'>
-              Voie Lyonnaise ${feature.properties.line}
-            </a>
-          </div>
-        </div>
-        <div class='p-2 divide-y'>
-          <div>
-            <div class='text-sm font-bold'>Tronçon</div>
-            <div >${feature.properties.name}</div>
-          </div>
-           <div>
-            <div class='text-sm font-bold'>statut</div>
-            <div>${getStatusText(feature.properties.status, feature.properties.doneAt)}</div>
-          </div>
-           <div>
-            <div class='text-sm font-bold'>Longueur</div>
-            <div>${Math.round(getDistance({ features: [feature] }) / 25) * 25}m</div>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-
   function getTooltipPerspective(properties: PerspectiveProperties) {
     const color = getLineColor(properties.line);
     return `
@@ -117,5 +46,5 @@ export const useTooltip = () => {
     `;
   }
 
-  return { getTooltipHtml, getTooltipPerspective, getTooltipCompteur };
+  return { getTooltipPerspective, getTooltipCompteur };
 };