@dative-gpi/foundation-shared-components 1.0.57 → 1.0.58-groupings

package/components/map/FSMapMarker.vue

@@ -3,9 +3,9 @@
 </template>
 
 <script lang="ts">
-import { inject, type PropType, onMounted, type Ref, watch, ref } from 'vue';
+import { inject, type PropType, type Ref, watch, ref, onUnmounted, onMounted } from 'vue';
 
-import { type Map, type DivIcon, divIcon, type LatLng, marker, type Marker, type MarkerClusterGroup, type Layer } from 'leaflet';
+import { type Map, divIcon, type LatLng, marker, type Marker, type MarkerClusterGroup, type LeafletMouseEvent } from 'leaflet';
 
 import { useColors } from "../../composables";
 
@@ -37,6 +37,10 @@ export default {
       type: Boolean,
       default: false,
       required: false
+    },
+    label: {
+      type: String,
+      required: false
     }
   },
   emits: ['click'],
@@ -45,8 +49,37 @@ export default {
     const markerClusterGroup = inject<Ref<MarkerClusterGroup | null>>(MARKERCLUSTERGROUP, ref(null));
 
     const { getColors } = useColors();
+    const getMarkerIcon = () => {
+      if(props.variant === 'gps') {
+        const size = 16;
+        return divIcon({
+          html: gpsMarkerHtml(),
+          className: 'fs-map-mylocation',
+          iconSize: [size, size],
+          iconAnchor: [size / 2, size / 2],
+        });
+      }
+
+      if(props.variant === 'location') {
+        const size = 36;
+        return divIcon({
+          html: locationMarkerHtml(props.icon ?? "mdi-map-marker", getColors(props.color).base, props.label),
+          iconSize: [size, size],
+          className: props.selected ? 'fs-map-marker fs-map-location fs-map-location-selected' : 'fs-map-marker fs-map-location',
+          iconAnchor: [size / 2, size / 2],
+        });
+      }
+
+      const size = 16;
+      return divIcon({
+        html: pinMarkerHtml(getColors(props.color).base, props.label),
+        iconSize: [size, size],
+        className: props.selected ? 'fs-map-marker fs-map-pin fs-map-pin-selected' : 'fs-map-marker fs-map-pin',
+        iconAnchor: [size / 2, size / 2],
+      });
+    }
 
-    const lastMarker = ref<Marker | null>(null); 
+    const actualMarker = ref(marker(props.latlng ?? [0, 0], { icon: getMarkerIcon() }));
 
     if(!map) {
       throw new Error('FSMapTileLayer must be used inside a FSMap component');
@@ -56,61 +89,50 @@ export default {
       throw new Error('FSMapTileLayer must be used inside a FSMap component with a map');
     }
 
-    const updateMarker = () => {
-      if(!map.value || !props.latlng) {
+    watch(map, () => {
+      if(!map.value) {
         return;
       }
 
-      if(lastMarker.value) {
-        if(markerClusterGroup && markerClusterGroup.value) {
-          markerClusterGroup.value.removeLayer(lastMarker.value);
-        } else {
-          map.value.removeLayer(lastMarker.value as Layer);
-        }
+      if(markerClusterGroup && markerClusterGroup.value) {
+        actualMarker.value.addTo(markerClusterGroup.value);
+      } else {
+        actualMarker.value.addTo(map.value);
       }
+    }, { immediate: true });
 
-      let icon: DivIcon | null = null;
-      if(props.variant === 'gps') {
-        const size = 16;
-        icon = divIcon({
-          html: gpsMarkerHtml(),
-          className: 'fs-map-mylocation',
-          iconSize: [size, size],
-          iconAnchor: [size / 2, size / 2],
-        });
-      } else if(props.variant === 'location' && props.icon) {
-        const size = 36;
-        icon = divIcon({
-          html: locationMarkerHtml(props.icon, getColors(props.color).base),
-          iconSize: [size, size],
-          className: props.selected ? 'fs-map-location fs-map-location-selected' : 'fs-map-location',
-          iconAnchor: [size / 2, size / 2],
-        });
-      } else {
-        const size = 20;
-        icon = divIcon({
-          html: pinMarkerHtml(getColors(props.color).base),
-          iconSize: [size, size],
-          className: props.selected ? 'fs-map-location fs-map-location-selected' : 'fs-map-location',
-          iconAnchor: [size / 2, size / 2],
-        });
+    watch([() => props.variant, () => props.color, () => props.selected], () => {
+      if(!actualMarker.value || !map.value) {
+        return;
       }
-      
-      lastMarker.value = marker(props.latlng, { icon });
-      lastMarker.value.on('click', (e) => {
-        emit('click', e);
-      });
 
-      if(markerClusterGroup && markerClusterGroup.value) {
-        lastMarker.value.addTo(markerClusterGroup.value);
-      } else {
-        lastMarker.value.addTo(map.value);
+      const icon = getMarkerIcon();
+      actualMarker.value?.setIcon(icon);
+    });
+
+    watch([() => props.latlng?.lat, () => props.latlng?.lng], () => {
+      if(!actualMarker.value || !map.value || !props.latlng) {
+        return;
       }
-    };
 
-    onMounted(updateMarker);
+      actualMarker.value.setLatLng(props.latlng);
+    });
 
-    watch(() => [props.variant, props.color, props.latlng, props.selected], updateMarker);
+    onMounted(() => {
+      actualMarker.value.on('click', (event: LeafletMouseEvent) => {
+        emit('click', event);
+      });
+    });
+
+    onUnmounted(() => {
+      if(actualMarker.value && map.value) {
+        if(markerClusterGroup && markerClusterGroup.value) {
+          markerClusterGroup.value.removeLayer(actualMarker.value as Marker);
+        } else {
+          map.value.removeLayer(actualMarker.value as Marker);
+        }
+      }
+    })
   }
 };
 </script>

package/components/map/FSMapMarkerClusterGroup.vue

@@ -3,9 +3,9 @@
 </template>
 
 <script lang="ts">
-import { inject, provide, ref, type Ref } from 'vue';
+import { inject, provide, ref, type Ref, onUnmounted } from 'vue';
 
-import { type Map, MarkerClusterGroup, divIcon } from 'leaflet';
+import { LatLngBounds, type Map, MarkerClusterGroup, divIcon } from 'leaflet';
 
 import { clusterMarkerHtml } from '../../utils/leafletMarkers';
 import { MAP } from './keys';
@@ -45,7 +45,7 @@ export default {
 
         return divIcon({
           html: clusterMarkerHtml(cluster.getChildCount()),
-          className: 'fs-map-location fs-map-location-full',
+          className: 'fs-map-marker fs-map-cluster-marker',
           iconSize: [size, size],
           iconAnchor: [size / 2, size / 2],
         });
@@ -54,17 +54,42 @@ export default {
 
     provide('markerClusterGroup', markerClusterGroup);
 
-    markerClusterGroup.value.on("layeradd", () => {
-      if(!map.value) {
+    const handleLayerChange = () => {
+      if (!map.value) {
         return;
       }
 
       const layers = markerClusterGroup.value.getLayers();
 
-      if(layers.length === props.expectedLayers && !added) {
+      if (layers.length === 0 && added) {
+        map.value.removeLayer(markerClusterGroup.value as unknown as L.Layer);
+        added = false;
+        return;
+      }
+      if (layers.length === props.expectedLayers && !added) {
         markerClusterGroup.value.addTo(map.value);
         added = true;
-        emit("update:bounds", markerClusterGroup.value.getBounds());
+      }
+      if (layers.length === props.expectedLayers) {
+        const bounds = new LatLngBounds([]);
+        for (const layer of layers as any[]) {
+          if (layer.getBounds) {
+            bounds.extend(layer.getBounds());
+          } else if (layer.getLatLng) {
+            bounds.extend(layer.getLatLng());
+          }
+        }
+
+        emit("update:bounds", layers.length > 0 ? bounds : null);
+      }
+    };
+
+    markerClusterGroup.value.on("layeradd", handleLayerChange);
+    markerClusterGroup.value.on("layerremove", handleLayerChange);
+
+    onUnmounted(() => {
+      if (map.value && map.value.hasLayer(markerClusterGroup.value as unknown as L.Layer)) {
+        map.value.removeLayer(markerClusterGroup.value as unknown as L.Layer);
       }
     });
   }

package/components/map/FSMapOverlay.vue

@@ -1,16 +1,16 @@
 <template>
   <v-overlay
     v-if="isExtraSmall"
-    :modelValue="$props.mode === 'expand'"
+    :modelValue="$props.mode === MapOverlayPositions.Expand"
     :contained="true"
-    @click="$emit('update:mode', 'collapse')"
+    @click="$emit('update:mode', MapOverlayPositions.Collapse)"
     zIndex="0"
   />
   <div
     v-show="isExtraSmall"
     ref="mobileOverlayWrapper"
     class="fs-map-overlay-mobile"
-    :style="{ height: $props.mode === 'expand' ? '90%' : ($props.mode === 'half' ? '50%' : '20px') }"
+    :style="{ height: $props.mode === MapOverlayPositions.Expand ? '90%' : ($props.mode === MapOverlayPositions.Half ? '60%' : 'auto') }"
   >
     <FSCard
       width="100%"
@@ -24,16 +24,20 @@
       >
         <FSRow
           align="center-center"
-          @touchstart="$props.mode === 'expand' ? $emit('update:mode', 'collapse') : $emit('update:mode', 'expand')"
+          style="cursor: pointer;"
+          @touchstart="onClick"
+          @mousedown="onClick"
         >
-          <FSButton
-            variant="icon"
-            :icon="$props.mode === 'expand' ? 'mdi-chevron-down' : 'mdi-chevron-up'"
-            @click="$props.mode === 'expand' ? $emit('update:mode', 'collapse') : $emit('update:mode', 'expand')"
-          />
+          <FSIcon>
+            {{ $props.mode === MapOverlayPositions.Expand ? 'mdi-chevron-down' : 'mdi-chevron-up' }}
+          </FSIcon>
         </FSRow>
+        <slot
+          v-if="$props.mode === MapOverlayPositions.Collapse"
+          name="collapsed"
+        />
         <FSCol
-          v-if="$props.mode !== 'collapse'"
+          v-if="$props.mode !== MapOverlayPositions.Collapse"
           height="fill"
           style="min-height: 0;"
         >
@@ -44,7 +48,6 @@
       </FSCol>
     </FSCard>
   </div>
-
   <FSCard
     v-show="!isExtraSmall"
     class="fs-map-overlay-desktop"
@@ -64,30 +67,34 @@
 
 <script lang="ts">
 import { defineComponent, type PropType, onUnmounted, onMounted, ref } from "vue";
+
 import { useBreakpoints } from "../../composables";
-import FSButton from "../FSButton.vue";
+
+import { MapOverlayPositions } from '@dative-gpi/foundation-shared-components/models';
+
 import FSCard from "../FSCard.vue";
+import FSIcon from "../FSIcon.vue";
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSMapOverlay",
-  props: {
-    mode: {
-      type: String as PropType<"collapse" | "half" | "expand">,
-      required: false,
-      default: "collapse"
-    }
-  },
   components: {
-    FSButton,
     FSCard,
+    FSIcon,
     FSCol,
     FSRow
   },
+  props: {
+    mode: {
+      type: String as PropType<MapOverlayPositions>,
+      required: false,
+      default: MapOverlayPositions.Collapse
+    }
+  },
   emits: ["update:mode", "update:height", "update:width"],
-  setup(_, { emit }) {
-    const { isExtraSmall } = useBreakpoints();
+  setup(props, { emit }) {
+    const { isExtraSmall, isTouchScreenEnabled } = useBreakpoints();
 
     const mobileOverlayWrapper = ref<HTMLDivElement | null>(null);
     const desktopOverlay = ref<InstanceType<typeof FSCard> | null>(null);
@@ -95,6 +102,14 @@ export default defineComponent({
     const mobileResizeObserver = ref<ResizeObserver | null>(null);
     const desktopResizeObserver = ref<ResizeObserver | null>(null);
 
+    const onClick = (): void => {
+      if (props.mode === MapOverlayPositions.Expand) {
+        emit("update:mode", MapOverlayPositions.Collapse);
+        return;
+      }
+      emit("update:mode", MapOverlayPositions.Expand);
+    }
+
     onMounted(() => {
       mobileResizeObserver.value = new ResizeObserver(entries => {
         entries.forEach((entry) => {
@@ -110,10 +125,12 @@ export default defineComponent({
 
       if (mobileOverlayWrapper.value) {
         mobileResizeObserver.value.observe(mobileOverlayWrapper.value);
+        emit("update:height", mobileOverlayWrapper.value.offsetHeight);
       }
 
       if (desktopOverlay.value) {
         desktopResizeObserver.value.observe(desktopOverlay.value.$el);
+        emit("update:width", desktopOverlay.value.$el.offsetWidth);
       }
     });
 
@@ -127,9 +144,12 @@ export default defineComponent({
     });
 
     return {
-      isExtraSmall,
       mobileOverlayWrapper,
-      desktopOverlay
+      isTouchScreenEnabled,
+      MapOverlayPositions,
+      desktopOverlay,
+      isExtraSmall,
+      onClick
     };
   }
 });

package/components/map/FSMapPolygon.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import { inject, type PropType, onMounted, type Ref, watch, ref } from 'vue';
+import { inject, type PropType, onMounted, type Ref, watch, ref, onUnmounted } from 'vue';
 
 import { type Map, type LatLng, type Polygon, type FeatureGroup, polygon } from 'leaflet';
 
@@ -47,9 +47,9 @@ export default {
 
       if(lastPolygon.value) {
         if(featureGroup && featureGroup.value) {
-          featureGroup.value.removeLayer(lastPolygon.value);
+          featureGroup.value.removeLayer(lastPolygon.value as Polygon);
         } else {
-          map.value.removeLayer(lastPolygon.value);
+          map.value.removeLayer(lastPolygon.value as Polygon);
         }
       }
 
@@ -75,7 +75,19 @@ export default {
 
     onMounted(updatePolygon);
 
-    watch(() => [props.color, props.latlngs], updatePolygon);
+    onUnmounted(() => {
+      if (lastPolygon.value) {
+        if (featureGroup?.value) {
+          featureGroup.value.removeLayer(lastPolygon.value);
+        } else if (map.value?.hasLayer(lastPolygon.value)) {
+          map.value.removeLayer(lastPolygon.value);
+        }
+        lastPolygon.value = null;
+      }
+    });
+
+
+    watch([() => props.color, () => props.latlngs], updatePolygon);
   }
 };
 </script>

package/components/map/FSMapTileLayer.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import { inject, type PropType, onMounted, type Ref, watch } from 'vue';
+import { inject, type PropType, onMounted, type Ref, watch, onUnmounted } from 'vue';
 
 import type { Map, Layer } from 'leaflet';
 
@@ -12,15 +12,15 @@ import { MAP } from './keys';
 export default {
   name: 'FSMapTileLayer',
   props: {
-    layer: {
-      type: Object as PropType<Layer>,
+    layers: {
+      type: Object as PropType<Layer[]>,
       required: false
     }
   },
   setup(props) {
     const map = inject<Ref<Map | null>>(MAP);
 
-    const lastLayer = props.layer;
+    let lastLayers = props.layers;
 
     if(!map) {
       throw new Error('FSMapTileLayer must be used inside a FSMap component');
@@ -31,20 +31,37 @@ export default {
     }
 
     const updateLayer = () => {
-      if (!props.layer || !map.value) {
+      if (!props.layers || !map.value) {
         return;
       }
 
-      if(lastLayer) {
-        map.value.removeLayer(lastLayer);
+      if(lastLayers) {
+        lastLayers.forEach(layer => {
+          layer.removeFrom(map.value!);
+        });
       }
 
-      props.layer.addTo(map.value);
+      lastLayers = [];
+
+      props.layers.forEach(layer => {
+        lastLayers?.push(layer.addTo(map.value!));
+      });
     };
 
     onMounted(updateLayer);
 
-    watch(() => props.layer, updateLayer);
+    onUnmounted(() => {
+      if (lastLayers && map.value) {
+        lastLayers.forEach(layer => {
+          if (map.value.hasLayer(layer)) {
+            map.value.removeLayer(layer);
+          }
+        });
+        lastLayers = [];
+      }
+    });
+
+    watch(() => props.layers, updateLayer);
   }
 };
 </script>

package/components/selects/FSSelectAutoRefresh.vue

@@ -40,16 +40,16 @@ export default defineComponent({
 
     const autoRefreshes = computed((): { id: AutoRefresh; label: string }[] => {
       const items = [
-        { id: AutoRefresh.FifteenSeconds, label: $tr("ui.auto-refresh.fifteen-seconds", "Fifteen seconds") },
-        { id: AutoRefresh.ThirtySeconds, label: $tr("ui.auto-refresh.thirty-seconds", "Thirty seconds") },
-        { id: AutoRefresh.OneMinute, label: $tr("ui.auto-refresh.one-minute", "One minute") },
-        { id: AutoRefresh.FiveMinutes, label: $tr("ui.auto-refresh.five-minutes", "Five minutes") },
-        { id: AutoRefresh.FifteenMinutes, label: $tr("ui.auto-refresh.fifteen-minutes", "Fifteen minutes") },
-        { id: AutoRefresh.ThirtyMinutes, label: $tr("ui.auto-refresh.thirty-minutes", "Thirty minutes") },
-        { id: AutoRefresh.OneHour, label: $tr("ui.auto-refresh.one-hour", "One hour") },
+        { id: AutoRefresh.FifteenSeconds, label: $tr("ui.common.fifteen-seconds", "Fifteen seconds") },
+        { id: AutoRefresh.ThirtySeconds, label: $tr("ui.common.thirty-seconds", "Thirty seconds") },
+        { id: AutoRefresh.OneMinute, label: $tr("ui.common.one-minute", "One minute") },
+        { id: AutoRefresh.FiveMinutes, label: $tr("ui.common.five-minutes", "Five minutes") },
+        { id: AutoRefresh.FifteenMinutes, label: $tr("ui.common.fifteen-minutes", "Fifteen minutes") },
+        { id: AutoRefresh.ThirtyMinutes, label: $tr("ui.common.thirty-minutes", "Thirty minutes") },
+        { id: AutoRefresh.OneHour, label: $tr("ui.common.one-hour", "One hour") },
       ];
       if (props.useNone) {
-        items.unshift({ id: AutoRefresh.None, label: $tr("ui.auto-refresh.none", "None") });
+        items.unshift({ id: AutoRefresh.None, label: $tr("ui.common.none", "None") });
       }
       return items;
     });

package/components/selects/FSSelectDashboardVariableType.vue

@@ -34,9 +34,10 @@ export default defineComponent({
     const { $tr } = useTranslationsProvider();
 
     const dashboardVariableTypes = computed((): { id: DashboardVariableType; label: string }[] => ([
-      { id: DashboardVariableType.Number, label: $tr("ui.dashboard-variable-type.number", "Number") },
-      { id: DashboardVariableType.String, label: $tr("ui.dashboard-variable-type.string", "String") },
-      { id: DashboardVariableType.TimeStep, label: $tr("ui.dashboard-variable-type.time-step", "Time step") }
+      { id: DashboardVariableType.Number, label: $tr("ui.common.number", "Number") },
+      { id: DashboardVariableType.String, label: $tr("ui.common.string", "String") },
+      { id: DashboardVariableType.TimeStep, label: $tr("ui.common.time-step", "Time step")},
+      { id: DashboardVariableType.PlotPer, label: $tr("ui.common.plot-per", "Plot per")}
     ]));
 
     return {

package/components/selects/FSSelectDateSetting.vue

@@ -1,6 +1,6 @@
 <template>
   <FSSelectField
-    class="fs-select-date-setting"
+    class="select.date-setting.label"
     :items="dateSettings"
     :clearable="false"
     :modelValue="$props.modelValue"
@@ -88,7 +88,7 @@ export default defineComponent({
         dateSettings.push({ id: DateSetting.LastPeriod, label: $tr("ui.date-setting.last-period", "Last period") });
       }
       if (props.useNone) {
-        dateSettings.unshift({ id: DateSetting.None, label: $tr("ui.date-setting.none", "None") });
+        dateSettings.unshift({ id: DateSetting.None, label: $tr("ui.common.none", "None") });
       }
       return dateSettings;
     })

package/components/selects/FSSelectDays.vue

@@ -40,16 +40,16 @@ export default defineComponent({
 
     const days = computed((): { id: Days; label: string }[] => {
       const items = [
-        { id: Days.Monday, label: $tr("ui.days.monday", "Monday") },
-        { id: Days.Tuesday, label: $tr("ui.days.tuesday", "Tuesday") },
-        { id: Days.Wednesday, label: $tr("ui.days.wednesday", "Wednesday") },
-        { id: Days.Thursday, label: $tr("ui.days.thursday", "Thursday") },
-        { id: Days.Friday, label: $tr("ui.days.friday", "Friday") },
-        { id: Days.Saturday, label: $tr("ui.days.saturday", "Saturday") },
-        { id: Days.Sunday, label: $tr("ui.days.sunday", "Sunday") }
+        { id: Days.Monday, label: $tr("ui.common.monday", "Monday") },
+        { id: Days.Tuesday, label: $tr("ui.common.tuesday", "Tuesday") },
+        { id: Days.Wednesday, label: $tr("ui.common.wednesday", "Wednesday") },
+        { id: Days.Thursday, label: $tr("ui.common.thursday", "Thursday") },
+        { id: Days.Friday, label: $tr("ui.common.friday", "Friday") },
+        { id: Days.Saturday, label: $tr("ui.common.saturday", "Saturday") },
+        { id: Days.Sunday, label: $tr("ui.common.sunday", "Sunday") }
       ];
       if (props.useAllDays) {
-        items.unshift({ id: Days.AllDays, label: $tr("ui.days.all-days", "All days") });
+        items.unshift({ id: Days.AllDays, label: $tr("ui.common.all-days", "All days") });
       }
       return items;
     });

package/components/selects/FSSelectListMode.vue

@@ -39,8 +39,8 @@ export default defineComponent({
     const { $tr } = useTranslationsProvider();
   
     const items = [
-      { id: ListModes.Table, label: $tr("ui.common.table-mode", "Table"), icon: "mdi-format-list-bulleted" },
-      { id: ListModes.Iterator, label: $tr("ui.common.tile-mode", "Tuile"), icon: "mdi-view-grid-outline" },
+      { id: ListModes.Table, label: $tr("ui.common.table", "Table"), icon: "mdi-format-list-bulleted" },
+      { id: ListModes.Iterator, label: $tr("ui.common.iterator", "Tile"), icon: "mdi-view-grid-outline" },
     ];
   
     return {

package/components/selects/FSSelectMapLayer.vue

@@ -0,0 +1,68 @@
+<template>
+  <FSSelectField
+    :items="items"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  >
+    <template
+      #item-prepend="{ item }"
+    >
+      <FSIcon
+        :icon="item.icon"
+      />
+    </template>
+  </FSSelectField>
+</template>
+
+<script lang="ts">
+import type { PropType} from "vue";
+import { defineComponent } from "vue";
+
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+
+import { MapLayers } from '@dative-gpi/foundation-shared-components/models';
+
+import FSSelectField from "../fields/FSSelectField.vue";
+import FSIcon from '@dative-gpi/foundation-shared-components/components/FSIcon.vue';
+
+export default defineComponent({
+  name: "FSSelectMapLayer",
+  components: {
+    FSIcon,
+    FSSelectField
+  },
+  props: {
+    modelValue: {
+      type: [String, Array] as PropType<MapLayers | MapLayers[]>,
+      required: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup() {
+    const { $tr } = useTranslationsProvider();
+
+    const items = [
+      {
+        id: MapLayers.Map,
+        icon: 'mdi-map',
+        label: $tr("ui.map-layer.map", "Map")
+      },
+      {
+        id: MapLayers.Imagery,
+        icon: 'mdi-satellite',
+        label: $tr("ui.map-layer.imagery", "Imagery")
+      },
+      {
+        id: MapLayers.Snow,
+        icon: 'mdi-snowflake',
+        label: $tr("ui.map-layer.snow", "Snow ski map")
+      }
+    ]
+
+    return {
+      items
+    };
+  }
+});
+</script>