@dative-gpi/foundation-shared-components 0.0.188 → 0.0.190

package/components/autocompletes/FSAutoCompleteAddress.vue

@@ -28,7 +28,7 @@ export default defineComponent({
   },
   props: {
     modelValue: {
-      type: Function as () => Address | null,
+      type: Object as () => Address | null,
       required: false,
       default: null
     },

package/components/deviceOrganisations/FSWorstAlert.vue

@@ -86,10 +86,10 @@ export default defineComponent({
       if (props.deviceAlerts < 1) {
         return null;
       }
-      if (props.deviceAlerts > 8) {
+      if (props.deviceAlerts > 9) {
         return "9+";
       }
-      return (props.deviceAlerts + 1).toString();
+      return (props.deviceAlerts).toString();
     });
 
     return {

package/components/map/FSMap.vue

@@ -0,0 +1,468 @@
+<template>
+  <FSCard
+    :width="$props.width"
+    v-bind="$attrs"
+  >
+    <FSCol
+      class="fs-map"
+      width="fill"
+    >
+      <FSRow
+        v-if="selectableLayers.length > 1"
+        class="fs-map-overlay-layer-choice"
+        gap="2px"
+      >
+        <FSChip
+          v-for="mapLayer in mapLayers.filter((layer) => selectableLayers.includes(layer.name))"
+          variant="full"
+          :color="innerSelectedLayer === mapLayer.name ? 'dark' : 'light'"
+          :label="mapLayer.label"
+          :key="mapLayer.name"
+          :editable="true"
+          @click="setMapBaseLayer(mapLayer.name)"
+        />
+      </FSRow>
+      <FSRow
+        v-if="$props.editable && !editingLocation && $props.selectedLocationId !== null"
+        class="fs-map-overlay-edit-button"
+      >
+        <FSButton
+          prepend-icon="mdi-pencil"
+          :label="$tr('ui.map.modify', 'Modify')"
+          @click="editingLocation = true"
+        />
+      </FSRow>
+      <FSCol
+        :style="style"
+      >
+        <div
+          class="fs-leaflet-container"
+          :id="mapId"
+        />
+      </FSCol>
+
+      <FSCol
+        class="fs-map-overlay-container"
+        align="center-center"
+      >
+        <FSCol
+          class="fs-map-zoom-overlay"
+          align="bottom-center"
+          width="hug"
+        >
+          <FSButton
+            v-if="$props.showMyLocation"
+            prependIcon="mdi-crosshairs-gps"
+            color="primary"
+            variant="full"
+            :elevation="true"
+            :border="false"
+            @click="locate"
+          />
+          <FSCol
+            v-if="$props.showZoomButtons"
+            gap="0"
+          >
+            <FSButton
+              class="fs-map-zoom-plus"
+              prependIcon="mdi-plus"
+              :elevation="true"
+              :border="false"
+              @click="zoomIn"
+            />
+            <FSButton
+              class="fs-map-zoom-minus"
+              prependIcon="mdi-minus"
+              :elevation="true"
+              :border="false"
+              @click="zoomOut"
+            />
+          </FSCol>
+        </FSCol>
+        <FSMapEditPointAddressOverlay
+          v-if="editingLocation"
+          :label="$tr('ui.map.address', 'Address')"
+          :modelValue="(innerModelValue.find((loc) => loc.id === $props.selectedLocationId))?.address"
+          @update:locationCoord="($event: Address) => onNewCoordEntered($event.latitude, $event.longitude)"
+          @update:modelValue="($event: Address) => onNewAddressEntered($event)"
+          @cancel="onCancel"
+          @submit="onSubmit"
+        />
+      </FSCol>
+    </FSCol>
+  </FSCard>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onMounted, type PropType, ref, watch } from "vue";
+import { v4 as uuidv4 } from "uuid";
+
+import { MarkerClusterGroup } from 'leaflet.markercluster';
+import * as L from 'leaflet';
+
+import { useAddress } from "../../composables/useAddress";
+
+import FSMapEditPointAddressOverlay from "./FSMapEditPointAddressOverlay.vue";
+import FSButton from '../FSButton.vue';
+import FSCard from '../FSCard.vue';
+import FSChip from '../FSChip.vue';
+import FSCol from '../FSCol.vue';
+import FSRow from '../FSRow.vue';
+
+
+import { type Address, type SiteInfos } from '@dative-gpi/foundation-shared-domain/models';
+import { type LocationInfos } from '@dative-gpi/foundation-shared-domain/models';
+
+import { ColorEnum, type MapLayer } from "../../models";
+import { useColors } from "../../composables";
+
+export default defineComponent({
+  name: "FSMap",
+  components: {
+    FSMapEditPointAddressOverlay,
+    FSButton,
+    FSCard,
+    FSChip,
+    FSCol,
+    FSRow
+  },
+  props: {
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: '400px'
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: '100%'
+    },
+    sites: {
+      type: Array as PropType<SiteInfos[]>,
+      required: false,
+      default: () => [],
+    },
+    center: {
+      type: Array as PropType<number[]>,
+      required: false,
+      default: () => [45.71, 5.07]
+    },
+    selectedLayer: {
+      type: String,
+      required: false,
+      default: "osm"
+    },
+    selectableLayers: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => ["osm", "imagery"]
+    },
+    selectedLocationId: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    selectedSiteId: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: Array as PropType<LocationInfos[]>,
+      required: false,
+      default: () => [],
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    showMyLocation: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    showZoomButtons: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ['update:modelValue', 'update:selectedLocationId', 'update:selectedSiteId'],
+  setup(props, { emit }) {
+    const { reverseSearch } = useAddress();
+    const { getColors } = useColors();
+    
+    const innerSelectedLayer = ref(props.selectedLayer);
+    const innerModelValue = ref(props.modelValue);
+    const editingLocation = ref(false);
+    
+    const mapId = `map-${uuidv4()}`;
+    const defaultZoom = 15;
+    const markers: { [key: string]: L.Marker } = {};
+    const sites: { [key: string]: L.Polygon } = {};
+    const siteLayerGroup = new L.FeatureGroup();
+    const baseLayerGroup = new L.LayerGroup();
+    const myLocationLayerGroup = new L.LayerGroup();
+
+    let map: L.Map;
+    let markerLayerGroup: L.FeatureGroup | MarkerClusterGroup;
+
+    if (props.editable) {
+      markerLayerGroup = new L.FeatureGroup();
+    }
+    else {
+      markerLayerGroup = new MarkerClusterGroup({
+        spiderfyOnMaxZoom: false,
+        showCoverageOnHover: false,
+        disableClusteringAtZoom: 17,
+        iconCreateFunction: function(cluster: any) {
+          return L.divIcon({
+            html: `<div>
+                    <span>${cluster.getChildCount()}</span>
+                   </div>`,
+            className: 'fs-map-location fs-map-location-full',
+            iconSize: [36, 36],
+            iconAnchor: [18, 18],
+          });
+        }
+      });
+    }
+    const mapLayers: MapLayer[] = [
+      {
+        name: "osm",
+        label: "OpenStreetMap",
+        layer: L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+          maxZoom: 19,
+          attribution: '© OpenStreetMap'
+        })
+      },
+      {
+        name: "imagery",
+        label: "Imagery",
+        layer: L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_satellite/{z}/{x}/{y}{r}.jpg', {
+          maxZoom: 20,
+          attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
+        }),
+      },
+      {
+        name: "light",
+        label: "Light",
+        layer: L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png', {
+          maxZoom: 20,
+          attribution: '&copy; <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a> &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+        })
+      }
+    ];
+
+    const style = computed((): { [key: string]: string | undefined } => {
+      return {
+        "--fs-map-location-pin-color": getColors(ColorEnum.Primary).base,
+        "--fs-map-mylocation-pin-color-alpha": getColors(ColorEnum.Primary).base + "50",
+        "--fs-map-leaflet-container-height": props.height as string,
+      };
+    });
+
+    const displayLocations = () => {
+      markerLayerGroup.clearLayers();
+      innerModelValue.value.forEach((location) => {
+        const iconHtml = `<div class="fs-map-location-pin"><i class="${location.icon} mdi v-icon notranslate v-theme--DefaultTheme fs-icon" aria-hidden="true" style="--fs-icon-font-size: 22px;"  ></i></div>`;
+        const icon = L.divIcon({
+          html: iconHtml,
+          className: 'fs-map-location',
+          iconSize: [36, 36],
+          iconAnchor: [18, 18],
+        });
+        const marker = L.marker([location.address.latitude, location.address.longitude], { icon }).addTo(markerLayerGroup);
+        markers[location.id] = marker;
+        marker.on('click', () => emit('update:selectedLocationId', location.id));
+        
+      });
+    };
+
+    const displaySites = () => {
+      siteLayerGroup.clearLayers();
+      props.sites.forEach((site) => {
+        const sitePolygon = L.polygon(site.coordinates.map((coord) => [coord.latitude, coord.longitude]), {
+          color: site.color,
+          fillColor: site.color + "50",
+          fillOpacity: 0.5,
+          className: 'fs-map-site',
+        }).addTo(siteLayerGroup);
+
+        sites[site.id] = sitePolygon;
+        sitePolygon.on('click', () => emit('update:selectedSiteId', site.id));
+      });
+    }
+
+    const modifyLocationAddress = (locationId: string, newAddress: Address) => {
+      const location = innerModelValue.value.find((loc) => loc.id === locationId);
+      if (!location) {
+        return;
+      }
+      const newLocation = {
+        ...location,
+        address: {
+          ...newAddress
+        },
+      };
+      innerModelValue.value = innerModelValue.value.map((loc) => loc.id === locationId ? newLocation : loc);
+    };
+
+    const initMap = () => {
+      const mapOptions = {
+        zoomControl: false,
+        scrollWheelZoom: false,
+        minZoom: 2,
+        maxBounds: L.latLngBounds(L.latLng(-90, -180), L.latLng(90, 180)),
+        maxBoundsViscosity: 1.0
+      };
+      map = L.map(mapId, mapOptions).setView([props.center[0], props.center[1]], defaultZoom);
+      map.attributionControl.remove();
+      L.control.attribution({ position: 'bottomleft' }).addTo(map);
+
+      baseLayerGroup.addTo(map);
+      siteLayerGroup.addTo(map);
+      myLocationLayerGroup.addTo(map);
+      setMapBaseLayer(props.selectedLayer);
+      displaySites();
+      displayLocations();
+      markerLayerGroup.addTo(map);
+
+      if (innerModelValue.value.length > 0) {
+        map.fitBounds(markerLayerGroup.getBounds(), { maxZoom: defaultZoom });
+      }
+
+      map.on('click', (e: L.LeafletMouseEvent) => {
+        if (editingLocation.value) {
+          onNewCoordEntered(+e.latlng.lat.toFixed(6), +e.latlng.lng.toFixed(6));
+        }
+      });
+    };
+
+    const setMapBaseLayer = (layerName: string) => {
+      innerSelectedLayer.value = layerName;
+      const layer = mapLayers.find((mapLayer) => mapLayer.name === layerName) ?? mapLayers[0];
+      baseLayerGroup.clearLayers();
+      layer.layer.addTo(baseLayerGroup);
+    };
+
+    const onNewAddressEntered = (address: Address) => {
+      if (!props.selectedLocationId) { return; }
+      modifyLocationAddress(props.selectedLocationId, address);
+      map?.flyTo([address.latitude, address.longitude], map?.getZoom() ?? defaultZoom);
+    };
+
+    const onNewCoordEntered = async (lat: number, lng: number) => {
+      const address = await reverseSearch(lat, lng);
+
+      onNewAddressEntered({
+        ...address,
+        latitude: lat,
+        longitude: lng,
+      });
+    };
+
+    const zoomIn = () => {
+      map?.zoomIn();
+    };
+
+    const zoomOut = () => {
+      map?.zoomOut();
+    };
+
+    const locate = () => {
+      map?.locate();
+      map?.on('locationfound', (e: L.LocationEvent) => {
+        map?.flyTo(e.latlng, map?.getZoom() ?? defaultZoom);
+        const iconHtml = `<div class="fs-map-mylocation-pin"></div>`;
+        const icon = L.divIcon({
+          html: iconHtml,
+          className: 'fs-map-mylocation',
+          iconSize: [16, 16],
+          iconAnchor: [8, 8],
+        });
+        myLocationLayerGroup.clearLayers();
+        L.marker(e.latlng, { icon }).addTo(myLocationLayerGroup);
+      });
+    };
+
+    const onCancel = () => {
+      editingLocation.value = false;
+      innerModelValue.value = props.modelValue;
+      displayLocations();
+      if (innerModelValue.value.length > 0) {
+        map?.fitBounds(markerLayerGroup.getBounds(), { maxZoom: defaultZoom });
+      }
+      else {
+        map?.flyTo([props.center[0], props.center[1]], map?.getZoom() ?? defaultZoom);
+      }
+      if (props.modelValue.length > 1) {
+        emit('update:selectedLocationId', null);
+      }
+    };
+
+    const onSubmit = () => {
+      emit('update:modelValue', innerModelValue.value);
+      editingLocation.value = false;
+      if (innerModelValue.value.length > 0) {
+        map?.fitBounds(markerLayerGroup.getBounds(), { maxZoom: defaultZoom });
+      }
+      else {
+        map?.flyTo([props.center[0], props.center[1]], map?.getZoom() ?? defaultZoom);
+      }
+      if (props.modelValue.length > 1) {
+        emit('update:selectedLocationId', null);
+      }
+    };
+
+    onMounted(() => {
+      initMap();
+    });
+
+    watch(() => innerModelValue.value, () => {
+      displayLocations();
+    });
+
+    watch(() => props.selectedLocationId, () => {
+      Object.values(markers).forEach((marker) => {
+        marker.getElement()?.classList.remove('fs-map-location-selected');
+      });
+
+      if (!props.selectedLocationId) {
+        return;
+      }
+      const marker = markers[props.selectedLocationId];
+      marker.getElement()?.classList.add('fs-map-location-selected');
+      map?.flyTo(marker.getLatLng(), 17);
+    })
+
+    watch(() => props.selectedSiteId, () => {
+      if (!props.selectedSiteId) {
+        return;
+      }
+      const site = sites[props.selectedSiteId];
+      if (site) {
+        map?.fitBounds(site.getBounds(), { maxZoom: 17 });
+      }
+    });
+
+    return {
+      innerSelectedLayer,
+      editingLocation,
+      innerModelValue,
+      mapLayers,
+      mapId,
+      style,
+      onNewAddressEntered,
+      onNewCoordEntered,
+      setMapBaseLayer,
+      onCancel,
+      onSubmit,
+      zoomOut,
+      locate,
+      zoomIn
+    };
+  },
+});
+</script>

package/components/map/FSMapEditPointAddressOverlay.vue

@@ -0,0 +1,165 @@
+<template>
+  <FSCard
+    padding="16px"
+    width="100%"
+    height="100%"
+    :elevation="true"
+  >
+    <FSCol
+      gap="24px"
+    >
+      <FSRow>
+        <FSText
+          font="text-h3"
+        >
+          {{ $tr('ui.map.modify-location', 'Modify location') }}
+        </FSText>
+        <v-spacer />
+        <FSButton
+          v-if="menuLocationCoord"
+          icon="mdi-arrow-collapse"
+          variant="icon"
+          @click="menuLocationCoord = !menuLocationCoord"
+        />
+        <FSButton
+          v-else
+          icon="mdi-arrow-expand"
+          variant="icon"
+          @click="menuLocationCoord = !menuLocationCoord"
+        />
+      </FSRow>
+      <FSCol
+        v-if="menuLocationCoord"
+      >
+        <FSAutoCompleteAddress
+          :modelValue="$props.modelValue"
+          @update:modelValue="onAddressFieldSubmit($event)"
+        />
+        <FSForm
+          variant="standard"
+          @submit="onCoordinateChange()"
+        >
+          <FSRow>
+            <FSNumberField
+              :label="$tr('ui.map.latitude', 'Latitude')"
+              v-model="latitude"
+            />
+            <FSNumberField
+              :label="$tr('ui.map.longitude', 'Longitude')"
+              v-model="longitude"
+            />
+          </FSRow>
+          <FSButton
+            :label="$tr('ui.map.save', 'Save')"
+            color="primary"
+            prepend-icon="mdi-content-save"
+            type="submit"
+            style="display: none;"
+          />
+        </FSForm>
+      </FSCol>
+      <FSRow
+        align="center-right"
+      >
+        <FSButton
+          :label="$tr('ui.map.cancel', 'Cancel')"
+          @click="onCancel"
+        />
+        <FSButton
+          :label="$tr('ui.map.save', 'Save')"
+          color="primary"
+          prepend-icon="mdi-content-save"
+          @click="onSubmit"
+        />
+      </FSRow>
+    </FSCol>
+  </FSCard>
+</template>
+
+<script lang="ts">
+import type { PropType } from "vue";
+import { defineComponent, ref, watch } from "vue";
+
+import FSCard from '../FSCard.vue'
+import FSCol from '../FSCol.vue'
+import FSRow from '../FSRow.vue'
+import FSText from '../FSText.vue'
+import FSButton from '../FSButton.vue'
+import FSNumberField from '../fields/FSNumberField.vue'
+import FSForm from '../FSForm.vue'
+import FSAutoCompleteAddress from '../autocompletes/FSAutoCompleteAddress.vue'
+
+import { Address } from "@dative-gpi/foundation-shared-domain/models/locations/address";
+
+
+export default defineComponent({
+  name: "FSMapEditPointAddressOverlay.vue",
+  components: {
+    FSCard,
+    FSCol,
+    FSRow,
+    FSText,
+    FSButton,
+    FSNumberField,
+    FSAutoCompleteAddress,
+    FSForm
+  },
+  props: {
+    modelValue: {
+      type: Object as PropType<Address>,
+      default: null,
+      required: false,
+    },
+  },
+  emits: ['update:modelValue', 'update:locationCoord', 'submit', 'cancel'],
+  setup(props, { emit }) {
+    const menuLocationCoord = ref(false);
+
+    const latitude = ref(props.modelValue.latitude);
+    const longitude = ref(props.modelValue.longitude);
+
+    const onCoordinateChange = () => {
+      const newModelValue = new Address({
+        country: "",
+        formattedAddress: "",
+        locality: "",
+        placeId: "",
+        placeLabel: "",
+        latitude: latitude.value,
+        longitude: longitude.value,
+      });
+      emit('update:locationCoord', newModelValue);
+    };
+
+    const onAddressFieldSubmit = (address: Address|null) => {
+      if(address === null) {
+        return;
+      }
+      emit('update:modelValue', address);
+    };
+
+    const onSubmit = () => {
+      emit('submit');
+    };
+
+    const onCancel = () => {
+      emit('cancel');
+    };
+
+    watch(() => props.modelValue, (value) => {
+      latitude.value = value.latitude;
+      longitude.value = value.longitude;
+    });
+
+    return {
+      onAddressFieldSubmit,
+      onCoordinateChange,
+      onSubmit,
+      onCancel,
+      latitude,
+      longitude,
+      menuLocationCoord,
+    };
+  },
+});
+</script>

package/composables/index.ts

@@ -1,5 +1,4 @@
 export * from "./useAutocomplete";
-export * from "./useAuthTokens";
 export * from "./useBreakpoints";
 export * from "./useColors";
 export * from "./useDebounce";

package/composables/useAddress.ts

@@ -8,6 +8,7 @@ export const useAddress = () => {
   let searchService: google.maps.places.AutocompleteService;
   let placeService: google.maps.places.PlacesService;
   let sessionId: google.maps.places.AutocompleteSessionToken;
+  
 
   const init = async () => {
     await window.initMap;
@@ -19,7 +20,6 @@ export const useAddress = () => {
     initialized = true;
   }
 
-
   const search = async (search: string): Promise<Place[]> => {
     if(!initialized){
       await init();
@@ -54,6 +54,30 @@ export const useAddress = () => {
     throw new Error("missing informations");
   }
 
+  const reverseSearch = async (lat: number, lon: number): Promise<Address> => {
+    if(!initialized){
+      await init();
+    }
+
+    return _reverseSearch(lat, lon).then(result => {
+      if (result.length > 0) {
+        const response = result[0];
+        if (response.address_components && response.formatted_address && response.geometry) {
+          return new Address({
+            formattedAddress: response.formatted_address,
+            locality: _find(response.address_components, "locality"),
+            country: _find(response.address_components, "country"),
+            latitude: response.geometry.location?.lat() ?? 0,
+            longitude: response.geometry.location?.lng() ?? 0,
+            placeId: response.place_id,
+            placeLabel: response.formatted_address
+          });
+        }
+      }
+      throw new Error("missing informations");
+    });
+  }
+
   const _search = (search: string) => {
     if (!enabled) {
       throw new Error("offline mode, do not call this method");
@@ -77,6 +101,26 @@ export const useAddress = () => {
     );
   }
 
+  const _reverseSearch = (lat: number, lon: number) => {
+    if (!enabled) {
+      throw new Error("offline mode, do not call this method");
+    }
+    return new Promise<google.maps.GeocoderResult[]>((resolve, reject) => {
+      new google.maps.Geocoder().geocode(
+        {
+          location: { lat: lat, lng: lon }
+        },
+        (result, status) => {
+          if (status != google.maps.GeocoderStatus.OK || !result) {
+            reject(status);
+          } else {
+            resolve(result);
+          }
+        }
+      );
+    });
+  }
+
   const _get = (id: string) => {
     if (!enabled) {
       throw new Error("offline mode, do not call this method");
@@ -103,11 +147,12 @@ export const useAddress = () => {
     const found = _.find(components, c =>
       _.some(c.types, t => t === type)
     );
-    return (found && found.long_name) || "";
+    return found?.long_name ?? "";
   }
 
   return {
     search,
-    get
+    get,
+    reverseSearch
   }
 }

package/models/index.ts

@@ -6,6 +6,7 @@ export * from "./deviceStatuses";
 export * from "./errors";
 export * from "./grids";
 export * from "./images";
+export * from "./map";
 export * from "./magicFields";
 export * from "./modelStatuses";
 export * from "./rules";

package/models/map.ts

@@ -0,0 +1,7 @@
+import type { Layer } from "leaflet";
+
+export interface MapLayer {
+  name:string;
+  label:string;
+  layer: Layer;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.188",
+  "version": "0.0.190",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,10 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.188",
-    "@dative-gpi/foundation-shared-services": "0.0.188"
+    "@dative-gpi/foundation-shared-domain": "0.0.190",
+    "@dative-gpi/foundation-shared-services": "0.0.190",
+    "leaflet": "1.9.4",
+    "leaflet.markercluster": "1.5.3"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^0.0.75",
@@ -26,15 +28,12 @@
     "@lexical/utils": "0.12.5",
     "@mdi/font": "^7.4.47",
     "blurhash": "2.0.5",
-    "color": "^4.2.3",
-    "lexical": "0.12.5",
-    "vue": "^3.4.29"
+    "color": "^4.2.3"
   },
   "devDependencies": {
     "@types/color": "3.0.6",
-    "@types/google.maps": "^3.55.10",
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "da23d7f7a5dc7d6dced0f7651bc359c61bcb8eb1"
+  "gitHead": "226125292c2f5ed27334b3bdee88b1877a9d9d6a"
 }

package/plugins/mapsPlugin.ts

@@ -9,7 +9,7 @@ export const MapsPlugin: Plugin = {
     const maps = document.createElement("script");
     maps.setAttribute(
       "src",
-      `https://maps.googleapis.com/maps/api/js?key=${key}&loading=async&libraries=geometry,places`
+      `https://maps.googleapis.com/maps/api/js?key=${key}&loading=async&libraries=geometry,places,geocoding`
     );
 
     let resolvePromise: (value: void) => void;

package/shims-plugin.d.ts

@@ -6,6 +6,4 @@ declare module "vue" {
     interface ComponentCustomProperties {
         $color: (key: ColorBase) => string;
     }
-}
-
-declare module 'googlemaps';
+}

package/styles/components/fs_map.scss

@@ -0,0 +1,159 @@
+@import 'leaflet/dist/leaflet.css';
+
+.fs-map {
+  position: relative;
+
+  .fs-leaflet-container {
+    width: 100%;
+    height: var(--fs-map-leaflet-container-height);
+  }
+
+  .fs-map-overlay-layer-choice {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 950;
+    margin: 8px;
+
+    >* {
+      opacity: 0.7;
+      transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    >*:hover {
+      opacity: 1;
+    }
+  }
+
+  .fs-map-overlay-edit-button {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 960;
+    margin: 8px;
+  }
+
+  .fs-map-overlay-container {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 1000;
+    margin: 4px 8px;
+    width: calc(100% - 16px);
+
+
+    .fs-map-zoom-overlay {
+      position: absolute;
+      bottom: 100%;
+      right: 0;
+      z-index: 1001;
+      margin-bottom: 8px;
+
+      button.fs-map-zoom-plus>* {
+        border-bottom-left-radius: 0 !important;
+        border-bottom-right-radius: 0 !important;
+      }
+
+      button.fs-map-zoom-minus>* {
+        margin-top: 1px;
+        border-top-left-radius: 0 !important;
+        border-top-right-radius: 0 !important;
+
+        border-top: solid 1px var(--fs-card-border-color) !important;
+
+
+      }
+    }
+  }
+
+  .fs-map-mylocation {
+    background-color: var(--fs-map-location-pin-color);
+    border: 3px solid white;
+    border-radius: 100%;
+    animation: fs-map-shadow 1.4s linear infinite;
+
+    @keyframes fs-map-shadow {
+      0% {
+        box-shadow: 0 0 0px 0px var(--fs-map-mylocation-pin-color-alpha);
+      }
+
+      50% {
+        box-shadow: 0 0 0px 7px var(--fs-map-mylocation-pin-color-alpha);
+      }
+
+      100% {
+        box-shadow: 0 0 0px 20px transparent;
+      }
+    }
+  }
+
+  .fs-map-location {
+    display: flex;
+    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;
+
+    &.fs-map-location-full {
+      background-color: var(--fs-map-location-pin-color);
+      color: white;
+    }
+
+    >* {
+      transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .mdi-loading {
+      animation: spin 1s linear infinite;
+    }
+
+    &:hover {
+      filter: brightness(0.92) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4));
+
+      >* {
+
+        transform: scale(1.15);
+      }
+    }
+
+    @keyframes spin {
+      0% {
+        transform: rotate(0deg);
+      }
+
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+
+    &.fs-map-location-selected {
+      animation: fs-map-shadow 1.4s linear infinite;
+
+      @keyframes fs-map-shadow {
+        0% {
+          box-shadow: 0 0 0px 0px var(--fs-map-mylocation-pin-color-alpha);
+        }
+
+        50% {
+          box-shadow: 0 0 0px 7px var(--fs-map-mylocation-pin-color-alpha);
+        }
+
+        100% {
+          box-shadow: 0 0 0px 20px transparent;
+        }
+      }
+    }
+  }
+
+  .fs-map-site {
+    opacity: 0.6;
+    transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+}

package/styles/components/index.scss

@@ -36,6 +36,7 @@
 @import "fs_load_tile.scss";
 @import "fs_loader.scss";
 @import "fs_magic_config_field.scss";
+@import "fs_map.scss";
 @import "fs_meta_field.scss";
 @import "fs_option_group.scss";
 @import "fs_pagination.scss";

package/composables/useAuthTokens.ts

@@ -1,15 +0,0 @@
-import { ComposableFactory, ServiceFactory } from "@dative-gpi/bones-ui/core";
-import type { AuthTokenDetailsDTO, AuthTokenFilters, AuthTokenInfosDTO, CreateAuthTokenDTO } from "@dative-gpi/foundation-shared-domain/models";
-import { AuthTokenDetails, AuthTokenInfos } from "@dative-gpi/foundation-shared-domain/models";
-import { AUTH_TOKENS_URL, AUTH_TOKEN_URL } from "../../foundation-shared-services/config/urls";
-
-const AuthTokenServiceFactory = new ServiceFactory<AuthTokenDetailsDTO, AuthTokenDetails>("authToken", AuthTokenDetails).create(factory => factory.build(
-    factory.addGetMany<AuthTokenInfosDTO, AuthTokenInfos, AuthTokenFilters>(AUTH_TOKENS_URL, AuthTokenInfos),
-    factory.addCreate<CreateAuthTokenDTO>(AUTH_TOKENS_URL),
-    factory.addRemove(AUTH_TOKEN_URL),
-    factory.addNotify()
-));
-
-export const useAuthTokens = ComposableFactory.getMany(AuthTokenServiceFactory);
-export const useCreateAuthToken = ComposableFactory.create(AuthTokenServiceFactory);
-export const useRemoveAuthToken = ComposableFactory.remove(AuthTokenServiceFactory);