@dative-gpi/foundation-shared-components 1.0.137-maps4 → 1.0.137-reportV2

package/components/FSCheckbox.vue

@@ -50,7 +50,6 @@
         v-if="$props.description"
         class="fs-checkbox-description"
         font="text-overline"
-        :lineClamp="2"
         :style="style"
       >
         {{ $props.description }}

package/components/FSRadio.vue

@@ -50,7 +50,6 @@
         v-if="$props.description"
         class="fs-radio-description"
         font="text-overline"
-        :lineClamp="2"
         :style="style"
       >
         {{ $props.description }}

package/components/FSSlider.vue

@@ -35,7 +35,7 @@
       :elevation="0"
       :tickSize="4"
       :modelValue="$props.modelValue ?? undefined"
-      @update:modelValue="$emit('update:modelValue', $event)"
+      @update:modelValue="(value) => $emit('update:modelValue', value)"
       v-bind="$attrs"
     >
       <template
@@ -55,7 +55,6 @@
         v-if="$props.description"
         class="fs-slider-description"
         font="text-overline"
-        :lineClamp="2"
         :style="style"
       >
         {{ $props.description }}

package/components/FSSwitch.vue

@@ -1,25 +1,29 @@
 <template>
-  <FSCol
+  <FSRow
+    width="hug"
+    align="top-left"
+    gap="16px"
     padding="8px 0px"
+    :wrap="false"
   >
-    <FSRow
-      gap="16px"
-      :wrap="false"
-    >
-      <v-switch
-        v-if="variant == 'left'"
-        class="fs-switch"
-        hide-details
-        inset
-        :validateOn="validateOn"
-        :rules="$props.rules"
-        :ripple="false"
-        :style="style"
-        :modelValue="$props.modelValue"
-        @update:modelValue="onToggle"
-        v-bind="$attrs"
-      />
-      <FSCol>
+    <v-switch
+      v-if="variant == 'left'"
+      class="fs-switch"
+      hide-details
+      inset
+      :validateOn="validateOn"
+      :rules="$props.rules"
+      :ripple="false"
+      :style="style"
+      :modelValue="$props.modelValue"
+      @update:modelValue="onToggle"
+      v-bind="$attrs"
+    />
+    <slot>
+      <FSCol
+        width="hug"
+        v-if="$props.label || $props.description || $slots.description"
+      >
         <FSSpan
           v-if="$props.label"
           class="fs-switch-label"
@@ -37,31 +41,33 @@
             class="fs-switch-description"
             font="text-overline"
             :style="style"
-            :lineClamp="2"
           >
             {{ $props.description }}
           </FSSpan>
         </slot>
-      </FSCol>
-      <FSRow
-        v-if="variant == 'right'"
-        align="center-right"
-      >
-        <v-switch
-          class="fs-switch"
-          hide-details
-          inset
-          :validateOn="validateOn"
-          :rules="$props.rules"
-          :ripple="false"
-          :style="style"
-          :modelValue="$props.modelValue"
-          @update:modelValue="onToggle"
-          v-bind="$attrs"
+        <slot
+          name="footer"
         />
-      </FSRow>
+      </FSCol>
+    </slot>
+    <FSRow
+      v-if="variant == 'right'"
+      align="center-right"
+    >
+      <v-switch
+        class="fs-switch"
+        hide-details
+        inset
+        :validateOn="validateOn"
+        :rules="$props.rules"
+        :ripple="false"
+        :style="style"
+        :modelValue="$props.modelValue"
+        @update:modelValue="onToggle"
+        v-bind="$attrs"
+      />
     </FSRow>
-  </FSCol>
+  </FSRow>
 </template>
 
 <script lang="ts">

package/components/fields/FSBaseField.vue

@@ -54,7 +54,6 @@
         v-if="$props.description"
         class="fs-base-field-description"
         font="text-overline"
-        :lineClamp="2"
       >
         {{ $props.description }}
       </FSSpan>

package/components/fields/FSRichTextField.vue

@@ -215,8 +215,7 @@
       <FSSpan
         v-if="!readonly && $props.description"
         class="fs-rich-text-field-description"
-        font="text-overline"
-        :lineClamp="2"
+        font="text-underline"
         :style="style"
       >
         {{ $props.description }}

package/components/map/FSMap.vue

@@ -14,7 +14,7 @@
         v-if="map"
       >
         <FSMapTileLayer
-          :layers="actualLayer"
+          :layer="actualLayer"
         />
         <FSMapMarker 
           v-if="gpsPosition"
@@ -22,7 +22,38 @@
           :color="ColorEnum.Primary"
           :latlng="gpsPosition"
         />
-        <slot />
+  
+        <FSMapFeatureGroup
+          v-if="$props.areas"
+          :expected-layers="$props.areas.length"
+          @update:bounds="(bounds) => areaGroupBounds = bounds"
+        >
+          <FSMapPolygon
+            v-for="area in areas"
+            :key="area.id"
+            :color="area.color"
+            :latlngs="area.coordinates.map((coord) => ({lat: coord.latitude, lng: coord.longitude}))"
+            @click="$emit('update:selectedAreaId', area.id)"
+          />
+        </FSMapFeatureGroup>
+  
+        <FSMapMarkerClusterGroup
+          v-if="$props.locations"
+          :expected-layers="$props.locations.length"
+          :disableClusteringAtZoom="defaultZoom"
+          @update:bounds="(bounds) => locationGroupBounds = bounds"
+        >
+          <FSMapMarker
+            v-for="location in $props.locations"
+            :selected="location.id === $props.selectedLocationId"
+            :key="location.id"
+            :label="location.label"
+            :color="location.color ?? ColorEnum.Primary"
+            :icon="location.icon ?? 'mdi-map-marker'"
+            :latlng="{lat: location.address.latitude, lng: location.address.longitude}"
+            @click="$emit('update:selectedLocationId', location.id)"
+          />
+        </FSMapMarkerClusterGroup>
       </template>
     </div>
 
@@ -69,7 +100,6 @@
     </FSCol>
 
     <FSMapOverlay
-      v-if="overlaySlots && Object.keys(overlaySlots).length"
       :mode="$props.overlayMode"
       @update:mode="$emit('update:overlayMode', $event)"
       @update:height="(height) => overlayHeight = height"
@@ -95,9 +125,10 @@ import type {} from "leaflet.markercluster";
 import { map as createMap, control, tileLayer, latLngBounds, latLng, type LatLng, type FitBoundsOptions, type ZoomPanOptions, type LatLngBounds } from "leaflet";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+import { type FSArea } from '@dative-gpi/foundation-shared-domain/models';
 
 import { useBreakpoints, useColors, useSlots } from "../../composables";
-import { ColorEnum, MapLayers, MapOverlayPositions, type MapLayer } from "../../models";
+import { ColorEnum, type FSLocation, type MapLayer } from "../../models";
 
 import FSMapLayerButton from "./FSMapLayerButton.vue";
 import FSMapOverlay from "./FSMapOverlay.vue";
@@ -107,12 +138,19 @@ import FSCol from "../FSCol.vue";
 
 import FSMapMarker from "./FSMapMarker.vue";
 import FSMapTileLayer from "./FSMapTileLayer.vue";
+import FSMapFeatureGroup from "./FSMapFeatureGroup.vue";
+import FSMapMarkerClusterGroup from "./FSMapMarkerClusterGroup.vue";
+import FSMapPolygon from "./FSMapPolygon.vue";
 
 export default defineComponent({
   name: "FSMap",
   components: {
     FSMapMarker,
     FSMapTileLayer,
+    FSMapFeatureGroup,
+    FSMapMarkerClusterGroup,
+    FSMapPolygon,
+
     FSMapLayerButton,
     FSMapOverlay,
     FSButton,
@@ -136,9 +174,9 @@ export default defineComponent({
       default: false
     },
     overlayMode: {
-      type: String as PropType<MapOverlayPositions>,
+      type: String as PropType<'collapse' | 'half' | 'expand'>,
       required: false,
-      default: MapOverlayPositions.Collapse
+      default: 'collapse'
     },
     showMyLocation: {
       type: Boolean,
@@ -156,29 +194,39 @@ export default defineComponent({
       default: false
     },
     center: {
-      type: Array as PropType<number[] | null>,
+      type: Array as PropType<number[]>,
       required: false,
-      default: null
+      default: () => [45.71, 5.07]
     },
-    bounds: {
-      type: Object as PropType<LatLngBounds | null>,
+    locations: {
+      type: Array as PropType<FSLocation[]>,
       required: false,
-      default: null
+      default: () => [],
+    },
+    areas: {
+      type: Array as PropType<FSArea[]>,
+      required: false,
+      default: () => [],
     },
     currentLayer: {
-      type: String as PropType<MapLayers>,
+      type: String as PropType<"map" | "imagery">,
       required: false,
-      default: MapLayers.Map
+      default: "map"
     },
     allowedLayers: {
-      type: Array as PropType<MapLayers[]>,
+      type: Array as PropType<string[]>,
       required: false,
-      default: () => [MapLayers.Map, MapLayers.Imagery]
+      default: () => ["map", "imagery"]
     },
-    dirtyZoom: {
-      type: Number,
+    selectedLocationId: {
+      type: String as PropType<string | null>,
       required: false,
-      default: 16
+      default: null
+    },
+    selectedAreaId: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
   emits: ["update:modelValue", "update:selectedLocationId", "update:selectedAreaId", 'update:overlayMode', 'update:currentLayer', "click:latlng"],
@@ -198,7 +246,7 @@ export default defineComponent({
 
     provide('map', map);
 
-    const defaultZoom = ref(props.dirtyZoom);
+    const defaultZoom = 16;
     const mapResizeObserver = new ResizeObserver(() => {
       if(!map.value) {
         return;
@@ -208,53 +256,29 @@ export default defineComponent({
 
     const mapLayers: MapLayer[] = [
       {
-        name: MapLayers.Map,
+        name: "map",
         label: $tr("ui.map-layer.map", "Map"),
         image: new URL("../../assets/images/map/map.png", import.meta.url).href,
-        layers: [
-          tileLayer(`https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=${import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? ""}`, {
-            maxZoom: 22,
-            subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
-            attribution: '© Google Map Data',
-            className: 'fs-map-tile-base-layer'
-          })
-        ]
+        layer: tileLayer(`https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=${import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? ""}`, {
+          maxZoom: 22,
+          subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
+          attribution: '© Google Map Data'
+        })
       },
       {
-        name: MapLayers.Imagery,
+        name: "imagery",
         label: $tr("ui.map-layer.imagery", "Imagery"),
         image: new URL("../../assets/images/map/imagery.png", import.meta.url).href,
-        layers: [
-          tileLayer(`https://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}&key=${import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? ""}`, {
-            maxZoom: 22,
-            subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
-            attribution: '© Google Map Data',
-            className: 'fs-map-tile-base-layer'
-          })
-        ]
-      },
-      {
-        name: MapLayers.Snow,
-        label: $tr("ui.map-layer.snow", "Snow ski map"),
-        image: new URL("../../assets/images/map/snow.png", import.meta.url).href,
-        layers: [
-          tileLayer(`https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=${import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? ""}`, {
-            maxZoom: 22,
-            subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
-            attribution: '© Google Map Data',
-            className: 'fs-map-tile-base-layer fs-map-tile-grayscale-layer'
-          }),
-          tileLayer(`https://tiles.opensnowmap.org/pistes/{z}/{x}/{y}.png`, {
-            maxZoom: 18,
-            attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors & ODbL, &copy; <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
-            className: 'fs-map-tile-base-layer'
-          })
-        ]
+        layer: tileLayer(`https://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}&key=${import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? ""}`, {
+          maxZoom: 22,
+          subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
+          attribution: '© Google Map Data'
+        })
       }
     ];
 
     const bottomOffset = computed(() => {
-      if (props.overlayMode !== MapOverlayPositions.Expand && overlayHeight.value && isExtraSmall.value) {
+      if (props.overlayMode !== 'expand' && overlayHeight.value && isExtraSmall.value) {
         return overlayHeight.value;
       }
       return 0;
@@ -276,7 +300,20 @@ export default defineComponent({
     }));
 
     const actualLayer = computed(() => {
-      return mapLayers.find((mapLayer) => mapLayer.name === props.currentLayer)?.layers ?? mapLayers[0].layers;
+      return mapLayers.find((layer) => layer.name === props.currentLayer)?.layer ?? mapLayers[0].layer;
+    });
+
+    const bounds = computed<LatLngBounds | null>(() => {
+      if(!locationGroupBounds.value && !areaGroupBounds.value) {
+        return null;
+      }
+      let bounds = locationGroupBounds.value;
+      if(bounds && areaGroupBounds.value) {
+        bounds.extend(areaGroupBounds.value);
+      } else if(areaGroupBounds.value) {
+        bounds = areaGroupBounds.value;
+      }
+      return bounds as LatLngBounds;
     });
 
     const overlaySlots = computed(() => {
@@ -295,7 +332,7 @@ export default defineComponent({
       return map.value.unproject(targetPoint, zoom);
     }
 
-    const flyTo = (lat: number, lng: number, zoom: number = defaultZoom.value, options?: ZoomPanOptions) => {
+    const flyTo = (lat: number, lng: number, zoom: number = defaultZoom, options?: ZoomPanOptions) => {
       if(!map.value) {
         return;
       }
@@ -323,7 +360,7 @@ export default defineComponent({
       if(!map.value) {
         return;
       }
-      map.value.setView(calculateTargetPosition(latLng(lat, lng), zoom), zoom);
+      map.value.setView(calculateTargetPosition(latLng(lat, lng)), zoom);
     }
 
     const fitBounds = (bounds: LatLngBounds, options?: FitBoundsOptions) => {
@@ -357,12 +394,11 @@ export default defineComponent({
         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)
+        maxBoundsViscosity: 1.0
       };
 
       map.value = markRaw(createMap(leafletContainer.value, mapOptions));
+      setView(props.center[0], props.center[1], defaultZoom);
       
       map.value.on('click', (e: L.LeafletMouseEvent) => {
         emit('click:latlng', e.latlng);
@@ -392,27 +428,43 @@ export default defineComponent({
       mapResizeObserver.disconnect();
     });
 
-    watch ([() => props.center, () => map.value], () => {
-      if(!map.value || !props.center) {
+    watch (() => props.center, (center) => {
+      if(!map.value) {
         return;
       }
-      setView(props.center[0], props.center[1], defaultZoom.value);
-    }, { immediate: true });
+      setView(center[0], center[1], defaultZoom);
+    });
 
-    watch([() => props.bounds, () => map.value], () => {
-      if(!map.value || !props.bounds) {
+    watch (() => props.selectedLocationId, (selectedLocationId) => {
+      if(!map.value) {
         return;
       }
-      fitBounds(props.bounds, { maxZoom: defaultZoom.value });
-    });
+      const selectedLocation = props.locations.find((location) => location.id === selectedLocationId);
+      if(!selectedLocation) {
+        return;
+      }
+      flyTo(selectedLocation?.address.latitude, selectedLocation?.address.longitude, defaultZoom, { animate: false });
+    }, { immediate: true });
 
-    watch(() => props.dirtyZoom, (newZoom) => {
-      defaultZoom.value = newZoom;
-      if(map.value) {
-        map.value.setZoom(newZoom);
+    watch(() => props.selectedAreaId, (selectedAreaId) => {
+      if(!map.value) {
+        return;
+      }
+      const selectedArea = props.areas.find((area) => area.id === selectedAreaId);
+      if(!selectedArea) {
+        return;
       }
+      const bounds = latLngBounds(selectedArea.coordinates.map((coord) => latLng(coord.latitude, coord.longitude)));
+      fitBounds(bounds);
     }, { immediate: true });
 
+    watch( () => bounds.value, (bounds) => {
+      if(!map.value || !bounds) {
+        return;
+      }
+      fitBounds(bounds, { maxZoom: defaultZoom });
+    });
+
     return {
       ColorEnum,
       defaultZoom,

package/components/map/FSMapMarker.vue

@@ -82,20 +82,20 @@ export default {
           iconSize: [size, size],
           iconAnchor: [size / 2, size / 2],
         });
-      } else if(props.variant === 'location') {
+      } else if(props.variant === 'location' && props.icon) {
         const size = 36;
         icon = divIcon({
-          html: locationMarkerHtml(props.icon ?? "mdi-map-marker", getColors(props.color).base, props.label),
+          html: locationMarkerHtml(props.icon, 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',
+          className: props.selected ? 'fs-map-location fs-map-location-selected' : 'fs-map-location',
           iconAnchor: [size / 2, size / 2],
         });
       } else {
-        const size = 16;
+        const size = 20;
         icon = divIcon({
-          html: pinMarkerHtml(getColors(props.color).base, props.label),
+          html: pinMarkerHtml(getColors(props.color).base),
           iconSize: [size, size],
-          className: props.selected ? 'fs-map-marker fs-map-pin fs-map-pin-selected' : 'fs-map-marker fs-map-pin',
+          className: props.selected ? 'fs-map-location fs-map-location-selected' : 'fs-map-location',
           iconAnchor: [size / 2, size / 2],
         });
       }

package/components/map/FSMapMarkerClusterGroup.vue

@@ -45,7 +45,7 @@ export default {
 
         return divIcon({
           html: clusterMarkerHtml(cluster.getChildCount()),
-          className: 'fs-map-marker fs-map-cluster-marker',
+          className: 'fs-map-location fs-map-location-full',
           iconSize: [size, size],
           iconAnchor: [size / 2, size / 2],
         });

package/components/map/FSMapOverlay.vue

@@ -1,16 +1,16 @@
 <template>
   <v-overlay
     v-if="isExtraSmall"
-    :modelValue="$props.mode === MapOverlayPositions.Expand"
+    :modelValue="$props.mode === 'expand'"
     :contained="true"
-    @click="$emit('update:mode', MapOverlayPositions.Collapse)"
+    @click="$emit('update:mode', 'collapse')"
     zIndex="0"
   />
   <div
     v-show="isExtraSmall"
     ref="mobileOverlayWrapper"
     class="fs-map-overlay-mobile"
-    :style="{ height: $props.mode === MapOverlayPositions.Expand ? '90%' : ($props.mode === MapOverlayPositions.Half ? '60%' : 'auto') }"
+    :style="{ height: $props.mode === 'expand' ? '90%' : ($props.mode === 'half' ? '60%' : 'auto') }"
   >
     <FSCard
       width="100%"
@@ -29,15 +29,15 @@
           @mousedown="onClick"
         >
           <FSIcon>
-            {{ $props.mode === MapOverlayPositions.Expand ? 'mdi-chevron-down' : 'mdi-chevron-up' }}
+            {{ $props.mode === 'expand' ? 'mdi-chevron-down' : 'mdi-chevron-up' }}
           </FSIcon>
         </FSRow>
         <slot
-          v-if="$props.mode === MapOverlayPositions.Collapse"
+          v-if="$props.mode === 'collapse'"
           name="collapsed"
         />
         <FSCol
-          v-if="$props.mode !== MapOverlayPositions.Collapse"
+          v-if="$props.mode !== 'collapse'"
           height="fill"
           style="min-height: 0;"
         >
@@ -70,8 +70,6 @@ import { defineComponent, type PropType, onUnmounted, onMounted, ref } from "vue
 
 import { useBreakpoints } from "../../composables";
 
-import { MapOverlayPositions } from '@dative-gpi/foundation-shared-components/models';
-
 import FSCard from "../FSCard.vue";
 import FSIcon from "../FSIcon.vue";
 import FSCol from "../FSCol.vue";
@@ -87,9 +85,9 @@ export default defineComponent({
   },
   props: {
     mode: {
-      type: String as PropType<MapOverlayPositions>,
+      type: String as PropType<"collapse" | "half" | "expand">,
       required: false,
-      default: MapOverlayPositions.Collapse
+      default: "collapse"
     }
   },
   emits: ["update:mode", "update:height", "update:width"],
@@ -103,11 +101,11 @@ export default defineComponent({
     const desktopResizeObserver = ref<ResizeObserver | null>(null);
 
     const onClick = (): void => {
-      if (props.mode === MapOverlayPositions.Expand) {
-        emit("update:mode", MapOverlayPositions.Collapse);
+      if (props.mode === "expand") {
+        emit("update:mode", "collapse");
         return;
       }
-      emit("update:mode", MapOverlayPositions.Expand);
+      emit("update:mode", "expand");
     }
 
     onMounted(() => {
@@ -146,7 +144,6 @@ export default defineComponent({
     return {
       mobileOverlayWrapper,
       isTouchScreenEnabled,
-      MapOverlayPositions,
       desktopOverlay,
       isExtraSmall,
       onClick

package/components/map/FSMapTileLayer.vue

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

package/components/tiles/FSGroupTileUI.vue

@@ -97,13 +97,6 @@
           :imageId="$props.imageId"
           :width="imageSize"
         />
-        <FSIconCard
-          v-else-if="$props.icon"
-          backgroundVariant="standard"
-          :backgroundColor="ColorEnum.Background"
-          :icon="$props.icon"
-          :size="imageSize"
-        />
       </FSRow>
     </FSCol>
   </FSTile>
@@ -115,7 +108,6 @@ import { computed, defineComponent, type PropType } from "vue";
 import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import FSIconCard from "../FSIconCard.vue";
 import FSImage from "../FSImage.vue";
 import FSColor from "../FSColor.vue";
 import FSSpan from "../FSSpan.vue";
@@ -126,7 +118,6 @@ import FSRow from "../FSRow.vue";
 export default defineComponent({
   name: "FSGroupTileUI",
   components: {
-    FSIconCard,
     FSImage,
     FSColor,
     FSSpan,
@@ -140,10 +131,6 @@ export default defineComponent({
       required: false,
       default: null
     },
-    icon: {
-      type: String,
-      required: false
-    },
     label: {
       type: String as PropType<string | null>,
       required: false,
@@ -196,7 +183,7 @@ export default defineComponent({
     });
 
     const infoWidth = computed((): string => {
-      if (!props.imageId && !props.icon) {
+      if (!props.imageId) {
         return "100%";
       }
       return `calc(100% - ${imageSize.value}px - 24px)`;

package/models/map.ts

@@ -1,20 +1,18 @@
 import { type Layer } from "leaflet";
 
+import { type Address } from "@dative-gpi/foundation-shared-domain/models";
+
 export interface MapLayer {
-  name : MapLayers;
+  name : string;
   label: string;
   image: string;
-  layers: Layer[];
-}
-
-export enum MapLayers {
-  Map = "map",
-  Imagery = "imagery",
-  Snow= "snow"
+  layer: Layer;
 }
 
-export enum MapOverlayPositions {
-  Expand = "expand",
-  Half = "half",
-  Collapse = "collapse",
+export interface FSLocation {
+  id: string;
+  label: string;
+  icon: string | null;
+  address: Address;
+  color: string | null;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.137-maps4",
+  "version": "1.0.137-reportV2",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.137-maps4",
-    "@dative-gpi/foundation-shared-services": "1.0.137-maps4"
+    "@dative-gpi/foundation-shared-domain": "1.0.137-reportV2",
+    "@dative-gpi/foundation-shared-services": "1.0.137-reportV2"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "2ff4d8aa1783b9f845daae1e8e6c9b9d23820b72"
+  "gitHead": "57f88a90528a7849e930dbc8eea7223a84c58c9f"
 }

package/styles/components/fs_map.scss

@@ -6,15 +6,7 @@
   .fs-leaflet-container {
     width: 100%;
     height: 100%;
-    z-index: 0;
-
-    .fs-map-tile-base-layer {
-      filter: grayscale(var(--fs-map-container-grayscale));
-    }
-
-    .fs-map-tile-grayscale-layer {
-      filter: grayscale(100%);
-    }
+    filter: grayscale(var(--fs-map-container-grayscale));
   }
 
   .fs-map-overlay-mobile {
@@ -85,10 +77,17 @@
     }
   }
 
-  .fs-map-marker > div {
+  .fs-map-point-pin {
+    background-color: var(--fs-map-point-pin-color);
+    border-radius: 100%;
+  }
+
+  .fs-map-location > div {
     display: flex;
     height: 100%;
+    color: var(--fs-map-location-pin-color);
     border-radius: 50%;
+    background-color: white;
     filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4));
     align-items: center;
     justify-content: center;
@@ -104,7 +103,7 @@
     }
   }
 
-  .fs-map-cluster-marker > div {
+  .fs-map-location-full > div {
     background-color: var(--fs-map-location-pin-color);
     color: white;
   }
@@ -127,41 +126,6 @@
     }
   }
 
-  .fs-map-location > div {
-    color: var(--fs-map-location-pin-color);
-    background-color: white;
-  }
-
-  .fs-map-pin > div {
-    background-color: var(--fs-map-point-pin-color);
-    position: relative;
-
-    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-  }
-
-  .fs-map-pin > div::before {
-    content: "";
-    position: absolute;
-    top: -4px;
-    left: -4px;
-    width: calc(100% + 8px);
-    height: calc(100% + 8px);
-    border-radius: 50%;
-    border: 2px solid var(--fs-map-point-pin-color);
-    opacity: 0.4;
-
-    @include clickscreen {
-      &:hover {
-        opacity: 1;
-      }
-    }
-  }
-
-  .fs-map-pin-selected > div {
-    transform: scale(1.35);
-  }
-
-
   .fs-map-site {
     opacity: 0.6;
     transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);

package/styles/components/index.scss

@@ -55,7 +55,6 @@
 @import "fs_slide_group.scss";
 @import "fs_slider.scss";
 @import "fs_span.scss";
-@import "fs_status_rich_card.scss";
 @import "fs_switch.scss";
 @import "fs_tag.scss";
 @import "fs_tabs.scss";

package/tools/index.ts

@@ -1,3 +1,4 @@
 export * from "./alertsTools";
 export * from "./chartsTools";
+export * from "./reportsTools";
 export * from "./timeRangeTools";

package/tools/reportsTools.ts

@@ -0,0 +1,38 @@
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+import { ColorEnum } from "../models";
+import { JobState } from "@dative-gpi/foundation-shared-domain/enums";
+
+const { $tr } = useTranslationsProvider();
+
+export const getColorByState = (state: number | JobState | undefined) => {
+  switch (state) {
+    case JobState.Succeeded:
+      return ColorEnum.Success;
+    case JobState.Failed:
+      return ColorEnum.Error;
+    default:
+      return ColorEnum.Primary;
+  }
+};
+
+export const getIconByState = (state: number | JobState | undefined) => {
+  switch (state) {
+    case JobState.Succeeded:
+      return 'mdi-check-circle-outline';
+    case JobState.Failed:
+      return 'mdi-alert-circle-outline';
+    default:
+      return 'mdi-alert-circle-outline';
+  }
+};
+
+export const getLabelByState = (state: number | JobState | undefined) => {
+  switch (state) {
+    case JobState.Succeeded:
+      return $tr('ui.common.success', 'Success');
+    case JobState.Failed:
+      return $tr('ui.common.error', 'Error');
+    default:
+      return $tr('ui.common.executed', 'Executed');
+  }
+};

package/components/deviceOrganisations/FSStatusRichCard.vue

@@ -1,170 +0,0 @@
-<template>
-  <component
-    v-if="$props.modelStatus"
-    class="fs-status-rich-card"
-    variant="standard"
-    :is="$attrs.onClick ? FSClickable : FSCard"
-    :padding="$props.padding"
-    :height="$props.height"
-    :width="$props.width"
-    :color="color"
-    :style="style"
-  >
-    <FSCol
-      align="center-center"
-      :gap="$props.gap"
-    >
-      <FSRow
-        align="top-center"
-      >
-        <FSIcon
-          v-if="icon"
-        >
-          {{ icon }}
-        </FSIcon>
-        <FSText
-          v-if="value"
-          font="text-button"
-        >
-          {{ value }}
-        </FSText>
-      </FSRow>
-      <FSText
-        font="text-overline"
-        align="center"
-        :lineClamp="$props.titleClamp"
-      >
-        {{ title }}
-      </FSText>
-      <slot
-        name="footer"
-        v-bind="{ color }"
-      />
-    </FSCol>
-    <div
-      class="fs-status-rich-card-corner"
-    >
-      <slot
-        name="corner"
-        v-bind="{ color }"
-      />
-    </div>
-  </component>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, type PropType, type StyleValue } from "vue";
-
-import { ColorEnum, type FSDeviceStatusGroup, type FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
-
-import FSClickable from "../FSClickable.vue";
-import FSCard from "../FSCard.vue";
-import FSIcon from "../FSChip.vue";
-import FSText from "../FSText.vue";
-import FSCol from "../FSCol.vue";
-
-export default defineComponent({
-  name: "FSStatusRichCard",
-  components: {
-    FSClickable,
-    FSCard,
-    FSIcon,
-    FSText,
-    FSCol
-  },
-  props: {
-    height: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
-      default: "100px"
-    },
-    width: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
-      default: "160px"
-    },
-    padding: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
-      default: "12px"
-    },
-    gap: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
-      default: "8px"
-    },
-    title: {
-      type: [String, null] as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    titleClamp: {
-      type: Number,
-      required: false,
-      default: 2
-    },
-    color: {
-      type: [String, null] as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    fillBackground: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    modelStatus: {
-      type: Object as PropType<FSModelStatus | undefined>,
-      required: true
-    },
-    statusGroup: {
-      type: Object as PropType<FSDeviceStatusGroup | undefined>,
-      required: true
-    }
-  },
-  setup(props) {
-    const { getColors } = useColors();
-
-    const color = computed((): string => {
-      return props.color ?? props.statusGroup?.color ?? props.modelStatus?.colorDefault ?? ColorEnum.Primary;
-    });
-
-    const icon = computed((): string | null => {
-      return props.statusGroup?.icon ?? props.modelStatus?.iconDefault ?? null;
-    });
-
-    const title = computed((): string => {
-      return props.title ?? props.modelStatus?.label;
-    });
-
-    const value = computed((): string | null => {
-      if (props.statusGroup?.label) {
-        return props.statusGroup.label;
-      }
-      if (props.statusGroup?.value && !isNaN(parseFloat(props.statusGroup?.value))) {
-        return `${parseFloat(props.statusGroup.value).toLocaleString("fullwide", { maximumFractionDigits: 2 })} ${props.statusGroup.unit}`;
-      }
-      if (props.statusGroup?.value) {
-        return `${props.statusGroup?.value} ${props.statusGroup?.unit}`;
-      }
-      return null;
-    });
-
-    const style = computed((): StyleValue => ({
-      "--fs-status-rich-card-background-color": props.fillBackground ? getColors(color.value).light : "transparent",
-      "--fs-status-rich-card-border-color": props.fillBackground ? getColors(color.value).base : getColors(ColorEnum.Light).dark
-    }));
-
-    return {
-      FSClickable,
-      FSCard,
-      color,
-      style,
-      title,
-      value,
-      icon
-    };
-  }
-});
-</script>

package/components/selects/FSSelectMapLayer.vue

@@ -1,68 +0,0 @@
-<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>

package/styles/components/fs_status_rich_card.scss

@@ -1,13 +0,0 @@
-.fs-status-rich-card {
-  position: relative;
-  flex-grow: 1;
-  background-color: var(--fs-status-rich-card-background-color);
-  border-color: var(--fs-status-rich-card-border-color);
-}
-
-.fs-status-rich-card-corner {
-  position: absolute;
-  display: flex;
-  right: 2px;
-  top: 2px;
-}