@dative-gpi/foundation-shared-components 0.0.206 → 0.0.208

package/components/map/FSMap.vue

@@ -5,30 +5,36 @@
   >
     <FSCol
       v-if="L"
-      class="fs-map"
       width="fill"
+      :class="['fs-map', { 'fs-map-fullscreen': fullScreen }]"
     >
-      <FSRow
-        v-if="selectableLayers.length > 1"
-        class="fs-map-overlay-layer-choice"
+      <FSCol
+        v-if="$slots.leftoverlay"
+        class="fs-map-overlay-left"
+        width="hug"
         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 as 'osm' | 'imagery')"
-        />
-      </FSRow>
+        <FSCard
+          padding="4px"
+          :elevation="true"
+          :border="false"
+        >
+          <FSFadeOut
+            maskHeight="0"
+            :height="`calc(${$props.height} - 40px)`"
+          >
+            <slot
+              name="leftoverlay"
+            />
+          </FSFadeOut>
+        </FSCard>
+      </FSCol>
       <FSRow
         v-if="$props.editable && !editingLocation && $props.selectedLocationId !== null"
         class="fs-map-overlay-edit-button"
       >
         <FSButton
-          prepend-icon="mdi-pencil"
+          prependIcon="mdi-pencil"
           :label="$tr('ui.map.modify', 'Modify')"
           @click="editingLocation = true"
         />
@@ -41,45 +47,73 @@
           :id="mapId"
         />
       </FSCol>
-
       <FSCol
-        class="fs-map-overlay-container"
+        class="fs-map-overlay-right-top"
         align="center-center"
       >
-        <FSCol
-          class="fs-map-zoom-overlay"
-          align="bottom-center"
-          width="hug"
+        <slot
+          name="toprightoverlay"
         >
-          <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"
+          <FSRow
+            gap="2px"
           >
+            <FSMapLayerButton
+              v-if="$props.selectableLayers?.length && $props.selectableLayers.length > 1"
+              :layers="mapLayers.filter((layer) => $props.selectableLayers?.includes(layer.name) ?? true)"
+              v-model="innerSelectedLayer"
+            />
             <FSButton
-              class="fs-map-zoom-plus"
-              prependIcon="mdi-plus"
+              v-if="$props.showFullScreen"
+              prependIcon="mdi-fullscreen"
               :elevation="true"
-              :border="false"
-              @click="zoomIn"
+              @click="fullScreen = !fullScreen"
             />
+          </FSRow>
+        </slot>
+      </FSCol>
+      <FSCol
+        class="fs-map-overlay-right-bottom"
+        align="center-center"
+      >
+        <slot
+          name="bottomrightoverlay"
+        >
+          <FSCol
+            class="fs-map-zoom-overlay"
+            align="bottom-center"
+            width="hug"
+          >
             <FSButton
-              class="fs-map-zoom-minus"
-              prependIcon="mdi-minus"
+              v-if="$props.showMyLocation"
+              prependIcon="mdi-crosshairs-gps"
+              color="primary"
+              variant="full"
               :elevation="true"
               :border="false"
-              @click="zoomOut"
+              @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>
-        </FSCol>
+        </slot>
         <FSMapEditPointAddressOverlay
           v-if="editingLocation"
           :label="$tr('ui.map.address', 'Address')"
@@ -102,15 +136,16 @@ import "leaflet.markercluster";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 
-import { type Address, type SiteInfos } from '@dative-gpi/foundation-shared-domain/models';
+import { type Address, type FSArea } from '@dative-gpi/foundation-shared-domain/models';
 
 import { ColorEnum, type FSLocation, type MapLayer } from "../../models";
 import { useColors, useAddress } from "../../composables";
 
 import FSMapEditPointAddressOverlay from "./FSMapEditPointAddressOverlay.vue";
+import FSMapLayerButton from "./FSMapLayerButton.vue";
+import FSFadeOut from "../FSFadeOut.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";
 
@@ -118,15 +153,16 @@ export default defineComponent({
   name: "FSMap",
   components: {
     FSMapEditPointAddressOverlay,
+    FSMapLayerButton,
+    FSFadeOut,
     FSButton,
     FSCard,
-    FSChip,
     FSCol,
     FSRow
   },
   props: {
     height: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      type: [String, Number] as PropType<string | number | null>,
       required: false,
       default: '400px'
     },
@@ -135,16 +171,46 @@ export default defineComponent({
       required: false,
       default: '100%'
     },
-    sites: {
-      type: Array as PropType<SiteInfos[]>,
+    grayscale: {
+      type: Boolean,
       required: false,
-      default: () => [],
+      default: false
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    showMyLocation: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    showZoomButtons: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    showFullScreen: {
+      type: Boolean,
+      required: false,
+      default: false
     },
     center: {
       type: Array as PropType<number[]>,
       required: false,
       default: () => [45.71, 5.07]
     },
+    modelValue: {
+      type: Array as PropType<FSLocation[]>,
+      required: false,
+      default: () => [],
+    },
+    areas: {
+      type: Array as PropType<FSArea[]>,
+      required: false,
+      default: () => [],
+    },
     selectedLayer: {
       type: String as PropType<"osm" | "imagery">,
       required: false,
@@ -160,38 +226,13 @@ export default defineComponent({
       required: false,
       default: null
     },
-    selectedSiteId: {
+    selectedAreaId: {
       type: String as PropType<string | null>,
       required: false,
       default: null
-    },
-    modelValue: {
-      type: Array as PropType<FSLocation[]>,
-      required: false,
-      default: () => [],
-    },
-    editable: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    showMyLocation: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    showZoomButtons: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    grayscale: {
-      type: Boolean,
-      required: false,
-      default: false
     }
   },
-  emits: ["update:modelValue", "update:selectedLocationId", "update:selectedSiteId"],
+  emits: ["update:modelValue", "update:selectedLocationId", "update:selectedAreaId"],
   setup(props, { emit }) {
     const { reverseSearch } = useAddress();
     const { getColors } = useColors();
@@ -202,12 +243,13 @@ export default defineComponent({
     const innerSelectedLayer = ref(props.selectedLayer);
     const innerModelValue = ref(props.modelValue);
     const editingLocation = ref(false);
+    const fullScreen = ref(false);
 
     const mapId = `map-${Math.random().toString(36).substring(7)}`;
     const defaultZoom = 15;
     const markers: { [key: string]: L.Marker } = {};
-    const sites: { [key: string]: L.Polygon } = {};
-    const siteLayerGroup = new LL.FeatureGroup();
+    const areas: { [key: string]: L.Polygon } = {};
+    const areaLayerGroup = new LL.FeatureGroup();
     const baseLayerGroup = new LL.LayerGroup();
     const myLocationLayerGroup = new LL.LayerGroup();
 
@@ -238,6 +280,7 @@ export default defineComponent({
       {
         name: "osm",
         label: $tr("ui.map.layer.osm", "Map"),
+        image: new URL("../../assets/images/map/osm.png", import.meta.url).href,
         layer: LL.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
           maxZoom: 20,
           attribution: '© OpenStreetMap'
@@ -246,10 +289,11 @@ export default defineComponent({
       {
         name: "imagery",
         label: $tr("ui.map.layer.imagery", "Imagery"),
+        image: new URL("../../assets/images/map/imagery.png", import.meta.url).href,
         layer: LL.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
           attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
           maxZoom: 19
-        }),
+        })
       }
     ];
 
@@ -265,34 +309,38 @@ export default defineComponent({
     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 iconHtml = `
+          <div style="--fs-map-mylocation-pin-color-alpha:${getColors(location.color).base}50;--fs-map-location-pin-color: ${getColors(location.color).base}">
+            <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>
+          </div>`;
         const icon = LL.divIcon({
           html: iconHtml,
-          className: 'fs-map-location',
           iconSize: [36, 36],
+          className: 'fs-map-location',
           iconAnchor: [18, 18],
         });
         const marker = LL.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 = LL.polygon(site.coordinates.map((coord) => [coord.latitude, coord.longitude]), {
-          color: site.color,
-          fillColor: site.color + "50",
+    const displayAreas = () => {
+      areaLayerGroup.clearLayers();
+      props.areas.forEach((area) => {
+        const areaPolygon = LL.polygon(area.coordinates.map((coord) => [coord.latitude, coord.longitude]), {
+          color: area.color,
+          fillColor: area.color + "50",
           fillOpacity: 0.5,
-          className: 'fs-map-site',
-        }).addTo(siteLayerGroup);
+          className: 'fs-map-area',
+        }).addTo(areaLayerGroup);
 
-        sites[site.id] = sitePolygon;
-        sitePolygon.on('click', () => emit('update:selectedSiteId', site.id));
+        areas[area.id] = areaPolygon;
+        areaPolygon.on('click', () => emit('update:selectedAreaId', area.id));
       });
-    }
+    };
 
     const modifyLocationAddress = (locationId: string, newAddress: Address) => {
       const location = innerModelValue.value.find((loc) => loc.id === locationId);
@@ -321,10 +369,10 @@ export default defineComponent({
       LL.control.attribution({ position: 'bottomleft' }).addTo(map);
 
       baseLayerGroup.addTo(map);
-      siteLayerGroup.addTo(map);
+      areaLayerGroup.addTo(map);
       myLocationLayerGroup.addTo(map);
-      setMapBaseLayer(props.selectedLayer);
-      displaySites();
+      setMapBaseLayer(innerSelectedLayer.value);
+      displayAreas();
       displayLocations();
       markerLayerGroup.addTo(map);
 
@@ -340,18 +388,17 @@ export default defineComponent({
     };
 
     const setMapBaseLayer = (layerName: 'osm' | 'imagery') => {
-      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) {
+      if (!props.selectedLocationId || !map) {
         return;
       }
       modifyLocationAddress(props.selectedLocationId, address);
-      map?.panTo([address.latitude, address.longitude]);
+      map.panTo([address.latitude, address.longitude]);
     };
 
     const onNewCoordEntered = async (lat: number, lng: number) => {
@@ -365,17 +412,26 @@ export default defineComponent({
     };
 
     const zoomIn = () => {
-      map?.zoomIn();
+      if (!map) {
+        return;
+      }
+      map.zoomIn();
     };
 
     const zoomOut = () => {
-      map?.zoomOut();
+      if (!map) {
+        return;
+      }
+      map.zoomOut();
     };
 
     const locate = () => {
-      map?.locate();
-      map?.on('locationfound', (e: L.LocationEvent) => {
-        map?.panTo(e.latlng);
+      if (!map) {
+        return;
+      }
+      map.locate();
+      map.on('locationfound', (e: L.LocationEvent) => {
+        map.panTo(e.latlng);
         const iconHtml = `<div class="fs-map-mylocation-pin"></div>`;
         const icon = LL.divIcon({
           html: iconHtml,
@@ -391,12 +447,15 @@ export default defineComponent({
     const onCancel = () => {
       editingLocation.value = false;
       innerModelValue.value = props.modelValue;
+      if (!map) {
+        return;
+      }
       displayLocations();
       if (innerModelValue.value.length > 0) {
-        map?.fitBounds(markerLayerGroup.getBounds(), { maxZoom: defaultZoom });
+        map.fitBounds(markerLayerGroup.getBounds(), { maxZoom: defaultZoom });
       }
       else {
-        map?.panTo([props.center[0], props.center[1]]);
+        map.panTo([props.center[0], props.center[1]]);
       }
       if (props.modelValue.length > 1) {
         emit('update:selectedLocationId', null);
@@ -405,12 +464,15 @@ export default defineComponent({
 
     const onSubmit = () => {
       emit('update:modelValue', innerModelValue.value);
+      if (!map) {
+        return;
+      }
       editingLocation.value = false;
       if (innerModelValue.value.length > 0) {
-        map?.fitBounds(markerLayerGroup.getBounds(), { maxZoom: defaultZoom });
+        map.fitBounds(markerLayerGroup.getBounds(), { maxZoom: defaultZoom });
       }
       else {
-        map?.flyTo([props.center[0], props.center[1]], map?.getZoom() ?? defaultZoom, { animate: false });
+        map.flyTo([props.center[0], props.center[1]], map.getZoom() ?? defaultZoom, { animate: false });
       }
       if (props.modelValue.length > 1) {
         emit('update:selectedLocationId', null);
@@ -419,6 +481,9 @@ export default defineComponent({
 
     onMounted(() => {
       initMap();
+      if (props.selectedLocationId && props.modelValue.length === 1) {
+        editingLocation.value = true;
+      }
     });
 
     watch(() => innerModelValue.value, () => {
@@ -426,36 +491,42 @@ export default defineComponent({
     });
 
     watch(() => props.selectedLocationId, () => {
+      if (!props.selectedLocationId || !map) {
+        return;
+      }
+
       Object.values(markers).forEach((marker) => {
         marker.getElement()?.classList.remove('fs-map-location-selected');
       });
 
-      if (!props.selectedLocationId) {
-        return;
-      }
       const marker = markers[props.selectedLocationId];
+      map.flyTo(marker.getLatLng(), 17, { animate: false });
       marker.getElement()?.classList.add('fs-map-location-selected');
-      map?.flyTo(marker.getLatLng(), 17, { animate: false });
     })
 
-    watch(() => props.selectedSiteId, () => {
-      if (!props.selectedSiteId) {
+    watch(() => props.selectedAreaId, () => {
+      if (!props.selectedAreaId || !map) {
         return;
       }
-      const site = sites[props.selectedSiteId];
-      if (site) {
-        map?.fitBounds(site.getBounds(), { maxZoom: 17 });
+      const area = areas[props.selectedAreaId];
+      if (area) {
+        map.fitBounds(area.getBounds(), { maxZoom: 17 });
       }
     });
 
+    watch(innerSelectedLayer, () => {
+      setMapBaseLayer(innerSelectedLayer.value);
+    });
+
     return {
-      L,
       innerSelectedLayer,
       editingLocation,
       innerModelValue,
+      fullScreen,
       mapLayers,
       mapId,
       style,
+      L,
       onNewAddressEntered,
       onNewCoordEntered,
       setMapBaseLayer,

package/components/map/FSMapEditPointAddressOverlay.vue

@@ -1,8 +1,8 @@
 <template>
   <FSCard
     padding="16px"
-    width="100%"
     height="100%"
+    width="100%"
     :elevation="true"
   >
     <FSCol
@@ -50,11 +50,11 @@
             />
           </FSRow>
           <FSButton
-            :label="$tr('ui.map.save', 'Save')"
+            prependIcon="mdi-content-save"
+            style="display: none;"
             color="primary"
-            prepend-icon="mdi-content-save"
             type="submit"
-            style="display: none;"
+            :label="$tr('ui.map.save', 'Save')"
           />
         </FSForm>
       </FSCol>
@@ -66,9 +66,9 @@
           @click="onCancel"
         />
         <FSButton
-          :label="$tr('ui.map.save', 'Save')"
+          prependIcon="mdi-content-save"
           color="primary"
-          prepend-icon="mdi-content-save"
+          :label="$tr('ui.map.save', 'Save')"
           @click="onSubmit"
         />
       </FSRow>
@@ -104,17 +104,16 @@ export default defineComponent({
   },
   props: {
     modelValue: {
-      type: Object as PropType<Address>,
-      default: null,
-      required: false,
+      type: Object as PropType<Address | null>,
+      default: null
     }
   },
   emits: ["update:modelValue", "update:locationCoordinates", "submit", "cancel"],
   setup(props, { emit }) {
     const menuLocationCoordinates = ref(false);
 
-    const latitude = ref(props.modelValue.latitude);
-    const longitude = ref(props.modelValue.longitude);
+    const latitude = ref(0);
+    const longitude = ref(0);
 
     const onCoordinatesChange = () => {
       const newModelValue = new Address({
@@ -130,7 +129,7 @@ export default defineComponent({
     };
 
     const onAddressFieldSubmit = (address: Address|null) => {
-      if(address === null) {
+      if(!address) {
         return;
       }
       emit('update:modelValue', address);
@@ -144,10 +143,12 @@ export default defineComponent({
       emit('cancel');
     };
 
-    watch(() => props.modelValue, (value) => {
-      latitude.value = value.latitude;
-      longitude.value = value.longitude;
-    });
+    watch(() => props.modelValue, () => {
+      if (props.modelValue) {
+        latitude.value = props.modelValue.latitude;
+        longitude.value = props.modelValue.longitude;
+      }
+    }, { immediate: true });
 
     return {
       menuLocationCoordinates,
@@ -155,8 +156,8 @@ export default defineComponent({
       latitude,
       onAddressFieldSubmit,
       onCoordinatesChange,
-      onSubmit,
-      onCancel
+      onCancel,
+      onSubmit
     };
   }
 });

package/components/map/FSMapLayerButton.vue

@@ -0,0 +1,71 @@
+<template>
+  <FSButton
+    prependIcon="mdi-layers-outline"
+    :elevation="true"
+    @click="dialog = true"
+  />
+  <FSDialog
+    v-model="dialog"
+    title="Select Layers"
+    width="460px"
+  >
+    <template
+      v-slot:body
+    >
+      <FSImageCard
+        v-for="layer in layers"
+        :variant="modelValue === layer.name ? 'full' : 'background'"
+        :color="modelValue === layer.name ? 'primary' : 'light'"
+        :label="layer.label"
+        :src="layer.image"
+        :key="layer.name"
+        @click="onLayerClick(layer.name)"
+      />
+    </template>
+  </FSDialog> 
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType, ref } from "vue";
+
+import { type MapLayer } from "../../models";
+
+import FSImageCard from "../FSImageCard.vue";
+import FSButton from "../FSButton.vue";
+import FSDialog from "../FSDialog.vue";
+
+export default defineComponent({
+  name: "FSMapLayerButton",
+  components: {
+    FSImageCard,
+    FSButton,
+    FSDialog
+  },
+  props: {
+    layers: {
+      type: Array as PropType<MapLayer[]>,
+      required: false,
+      default: () => []
+    },
+    modelValue: {
+      type: String,
+      required: false,
+      default: ""
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(_, { emit }) {
+    const dialog = ref(false);
+
+    const onLayerClick = (layer: string) => {
+      emit("update:modelValue", layer);
+      dialog.value = false;
+    };
+
+    return {
+      dialog,
+      onLayerClick
+    };
+  }
+});
+</script>