@dative-gpi/foundation-shared-components 1.0.146 → 1.0.147-maps

package/components/deviceOrganisations/FSWorstAlertCard.vue

@@ -82,7 +82,7 @@ export default defineComponent({
 
     const deviceTimestamp = computed((): string => {
       if (props.deviceAlert.sourceTimestamp) {
-        return epochToLongTimeFormat(props.deviceAlert.sourceTimestamp);
+        return epochToLongTimeFormat(props.deviceAlert.actualTimestamp);
       }
       return "";
     });

package/components/map/FSMap.vue

@@ -28,6 +28,7 @@
 
     <FSMapLayerButton
       v-if="$props.allowedLayers?.length && $props.allowedLayers.length > 1"
+      :disabled="$props.disabled"
       :layers="mapLayers.filter((layer) => $props.allowedLayers?.includes(layer.name) ?? true)"
       :modelValue="$props.currentLayer"
       @update:model-value="$emit('update:currentLayer', $event)"
@@ -39,6 +40,7 @@
     >
       <FSButton
         v-if="$props.showMyLocation"
+        :disabled="$props.disabled"
         icon="mdi-crosshairs-gps"
         color="primary"
         variant="full"
@@ -53,12 +55,14 @@
           gap="0"
         >
           <FSButton
+            :disabled="$props.disabled"
             class="fs-map-zoom-plus-button"
             icon="mdi-plus"
             @click="() => map!.zoomIn()"
             :border="false"
           />
           <FSButton
+            :disabled="$props.disabled"
             class="fs-map-zoom-minus-button"
             icon="mdi-minus"
             @click="() => map!.zoomOut()"
@@ -130,6 +134,16 @@ export default defineComponent({
       required: false,
       default: '100%'
     },
+    lockZoomOnFlyTo: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     grayscale: {
       type: Boolean,
       required: false,
@@ -353,14 +367,16 @@ export default defineComponent({
 
       const mapOptions = {
         zoomControl: false,
-        scrollWheelZoom: props.enableScrollWheelZoom,
+        scrollWheelZoom: props.enableScrollWheelZoom && !props.disabled,
+        dragging: !props.disabled,
+        doubleClickZoom: false,
         minZoom: 2,
         maxZoom: 22,
         maxBounds: latLngBounds(latLng(-90, -180), latLng(90, 180)),
         maxBoundsViscosity: 1.0,
         zoom: defaultZoom.value,
         center: props.center ? latLng(props.center[0], props.center[1]) : latLng(48.85782, 2.29521)
-      };
+      } satisfies L.MapOptions;
 
       map.value = markRaw(createMap(leafletContainer.value, mapOptions));
       
@@ -396,7 +412,9 @@ export default defineComponent({
       if(!map.value || !props.center) {
         return;
       }
-      setView(props.center[0], props.center[1], defaultZoom.value);
+      const zoom = props.lockZoomOnFlyTo ? map.value.getZoom() : defaultZoom.value;
+
+      setView(props.center[0], props.center[1], zoom);
     }, { immediate: true });
 
     watch([() => props.bounds, () => map.value], () => {
@@ -413,6 +431,32 @@ export default defineComponent({
       }
     }, { immediate: true });
 
+    watch(() => props.enableScrollWheelZoom, (newValue) => {
+      if(!map.value) {
+        return;
+      }
+      if(newValue) {
+        map.value.scrollWheelZoom.enable();
+      } else {
+        map.value.scrollWheelZoom.disable();
+      }
+    }, { immediate: true });
+
+    watch(() => props.disabled, (newValue) => {
+      if(!map.value) {
+        return;
+      }
+      if(newValue) {
+        map.value.dragging.disable();
+        map.value.scrollWheelZoom.disable();
+      } else {
+        map.value.dragging.enable();
+        if(props.enableScrollWheelZoom) {
+          map.value.scrollWheelZoom.enable();
+        }
+      }
+    }, { immediate: true });
+
     return {
       ColorEnum,
       defaultZoom,

package/components/map/FSMapLayerButton.vue

@@ -4,6 +4,7 @@
     icon="mdi-layers-outline"
     :elevation="true"
     @click="dialog = true"
+    v-bind="$attrs"
   />
   <FSDialog
     v-model="dialog"

package/composables/useBreakpoints.ts

@@ -21,7 +21,7 @@ export const useBreakpoints = () => {
     };
 
     const isTouchScreenEnabled = computed((): boolean => {
-        return navigator.maxTouchPoints > 0;
+        return window.matchMedia('(hover: none), (pointer: coarse), (pointer: none)').matches;
     });
 
     const isMobileSized = computed((): boolean => {

package/models/deviceAlerts.ts

@@ -7,4 +7,5 @@ export interface FSDeviceAlert {
     criticity: Criticity;
     sourceTimestamp?: number | null;
     enqueuedTimestamp?: number | null;
+    actualTimestamp?: number | null;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.146",
+  "version": "1.0.147-maps",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.146",
-    "@dative-gpi/foundation-shared-services": "1.0.146"
+    "@dative-gpi/foundation-shared-domain": "1.0.147-maps",
+    "@dative-gpi/foundation-shared-services": "1.0.147-maps"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "6054ea411ddcd4f9f4942e5a4e7a99b6f92338a1"
+  "gitHead": "ae8bef1eca27c0f0c345f01c69bf851e12fec0df"
 }

package/styles/globals/scrollbars.scss

@@ -14,6 +14,7 @@
   .fs-hide-x-scrollbar {
     overflow-x: scroll !important;
 
+    // Styles pour WebKit (Chrome, Safari)
     &::-webkit-scrollbar {
       height: 8px;
     }
@@ -25,11 +26,15 @@
     &:hover {
       --scrollbar-x-color: #00000022;
     }
+    &:not(:hover) {
+      --scrollbar-y-color: #00000000;
+    }
   }
 
   .fs-hide-y-scrollbar {
     overflow-y: scroll !important;
 
+    // Styles pour WebKit (Chrome, Safari)
     &::-webkit-scrollbar {
       width: 8px;
     }
@@ -41,25 +46,18 @@
     &:hover {
       --scrollbar-y-color: #00000022;
     }
+    &:not(:hover) {
+      --scrollbar-y-color: #00000000;
+    }
   }
 }
 
 @include touchscreen {
   .fs-hide-x-scrollbar {
     overflow-x: scroll;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-    scrollbar-width: none;
   }
 
   .fs-hide-y-scrollbar {
     overflow-y: scroll;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-    scrollbar-width: none;
   }
 }

package/styles/globals/touchscreen.scss

@@ -1,11 +1,11 @@
 @mixin touchscreen {
-    @media (hover: none) {
+    @media (hover: none), (pointer: coarse), (pointer: none) {
         @content;
     }
 }
 
 @mixin clickscreen {
-    @media not all and (hover: none) {
+    @media (hover: hover), (pointer: fine) {
         @content;
     }
 }