- posizione attuale GPS

- salvataggio ultima posizione in mappa
- visualizzazione prima icona con fas

src/common/shared_vuejs.ts

@@ -328,6 +328,8 @@ export const shared_consts = {
   TABLES_WITH_ADMINS: ['mygroups', 'circuits'],
   TABLES_DIRECTORY_SINGLE_IMG: ['circuits'],
 
+  TABLES_VISU_MAP: 'attivitas',
+
   VISIB_ALL: 0,
   VISIB_ONLYIF_VERIFIED: 1,
   VISIB_ONLY_MANAGER: 2,

src/components/CGridTableRec/CGridTableRec.vue

@@ -2,10 +2,11 @@
   <div v-if="tools.isDebugOn()"></div>
   <div :class="$q.screen.lt.sm ? `` : `q-pa-xs`" v-if="isfinishLoading">
     <q-toggle
-      v-if="tools.isManager()"
+      v-if="tools.isManager() && !showMap"
       v-model="editOn"
       color="green"
       icon="fas fa-pencil-alt"
+      class="fixed-toggle"
     >
     </q-toggle>
     <div
@@ -26,15 +27,15 @@
 
     <div
       v-if="butt_modif_new || mytitle"
-      :class="$q.screen.lt.sm ? `` : `q-gutter-md q-ma-xs` + ` row`"
+      :class="$q.screen.lt.sm ? `` : `q-ma-xs` + ` `"
     >
       <div class="q-table__title" style="min-width: 150px">
         {{ mytitle }}
       </div>
       <q-space></q-space>
-      <div v-if="butt_modif_new">
+      <div v-if="butt_modif_new" class="row justify-center">
         <q-btn
-          v-if="mytable && !shared_consts.TABLES_FINDER.includes(mytable)"
+          v-if="mytable && !shared_consts.TABLES_FINDER.includes(mytable) && !showMap"
           rounded
           dense
           size="sm"
@@ -53,7 +54,7 @@
           outline
           size="md"
           color="primary"
-          class="centermydiv q-mb-sm"
+          class="q-mb-sm"
           :label="labelBtnAddExtra"
           :disable="startsearch"
           icon="fas fa-plus"
@@ -74,15 +75,6 @@
     >
     </CTitleBanner>
 
-    <q-btn
-      v-if="!showMap"
-      dense
-      :label="t('grid.showmap')"
-      color="primary"
-      icon="fas fa-map-marked-alt"
-      @click="showMap = !showMap"
-    >
-    </q-btn>
     <div v-if="shared_consts.VERTIC_SHOW_GRID.includes(myvertical)">
       <div v-if="(prop_search || canEdit) && finder" class="q-my-xs text-right">
         <!--<q-btn
@@ -253,7 +245,7 @@
         >
           <q-btn
             dense
-            :label="!showfilter ? 'Apri Filtri' : 'Chiudi Filtri'"
+            :label="!showfilter ? $t('grid.openfilter') : $t('grid.closefilter')"
             color="positive"
             icon="fas fa-filter"
             @click="showfilter = !showfilter"
@@ -274,7 +266,8 @@
             @click="showNotification = !showNotification"
           ></q-btn>
         </div>
-        <div v-if="prop_search" class="q-mr-sm full-width">
+        
+        <div v-if="prop_search" :class="'q-mr-sm ' + ($q.screen.lt.sm ? ' full-width ' : '')">
           <q-input
             v-model="search"
             filled
@@ -369,16 +362,21 @@
       </div>
     </div>
 
-    <div v-if="showMap">
-      <q-btn
-        dense
-        :label="t('grid.showlist')"
-        color="primary"
-        icon="fas fa-list-alt"
-        @click="showMap = !showMap"
-      >
-      </q-btn>
+    <div v-if="shared_consts.TABLES_VISU_MAP.includes(mytable)" class="row justify-center q-ma-sm">
+      <q-btn-toggle
+        v-model="showMap"
+        push
+        glossy
+        dense        
+        toggle-color="primary"
+        :options="[
+            {label: t('grid.showmap'), value: true, icon: 'fas fa-map-marked-alt'},
+          {label: t('grid.showlist'), value: false, icon: 'fas fa-list-alt'},
+        ]"
+      />
 
+    </div>
+    <div v-if="showMap">
       <CMapByTable
         v-if="serverData && serverData.length > 0"
         mytable=""
@@ -1164,12 +1162,13 @@
     <q-dialog
       v-model="visupagedialog"
       transition-show="slide-up"
-      transition-hide="slide-down"      
+      transition-hide="slide-down"
       @hide="hidewindow"
       :maximized="$q.screen.lt.sm"
       :persistent="false"
       :class="
-        'dialog_annunci ' + ($q.screen.lt.md ? 'bottom-dialog' : ' right-align-dialog')
+        'dialog_annunci ' +
+        ($q.screen.lt.sm ? 'bottom-dialog' : ' right-align-dialog')
       "
     >
       <CMyCardGrpPopup
@@ -1195,7 +1194,7 @@
         :table="mytable"
         :prop_myrec="myrecdialog"
         :idRec="myIdRecDialog"
-        :showAnteprima="$q.screen.gt.sm ? false : showMap"
+        :showAnteprima="!$q.screen.lt.sm ? false : showMap"
       >
       </CMyCardService>
       <CMyCardPopup v-else :table="mytable" :prop_myrec="myrecdialog">

src/components/CMapByTable/CMapByTable.scss

@@ -1,3 +1,36 @@
 .map-container {
   height: 400px;
-}
+}
+
+.custom-icon {
+  position: relative; /* Rendi il contenitore relativo */
+  width: 40px; /* Larghezza del marker */
+  height: 40px; /* Altezza del marker */
+}
+
+.custom-icon .material-icons {
+  position: absolute; /* Posizionamento assoluto per centrare */
+  top: 50%; /* Posizionamento verticale */
+  left: 50%; /* Posizionamento orizzontale */
+  transform: translate(-50%, -50%); /* Centra l'icona */
+  font-size: 20px; /* Dimensione dell'icona 20x20 */
+  color: #000; /* Colore dell'icona (puoi cambiarlo) */
+}
+
+.marker-wrapper {
+  position: relative; /* Necessario per posizionare l'icona interna */
+  text-align: center; /* Centro il contenuto */
+}
+
+.marker-label {
+  margin-top: 5px; /* Spaziatura sopra l'etichetta */
+  font-size: 12px; /* Dimensione del testo per l'etichetta */
+}
+
+/* Stili per il pulsante di localizzazione */
+.locate-button {
+  position: absolute; /* Assicurati che il pulsante sia posizionato sopra la mappa */
+  top: 20px; /* Posizione dall'alto */
+  right: 20px; /* Distanza dal lato destro */
+  z-index: 1000; /* Assicurati che sia visibile sopra la mappa */
+}

src/components/CMapByTable/CMapByTable.ts

@@ -10,6 +10,7 @@ import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
 import 'leaflet.markercluster'
 
 import { useUserStore } from '@src/store/UserStore'
+import { useGlobalStore } from '@src/store/globalStore'
 
 export default defineComponent({
   name: 'CMapByTable',
@@ -27,16 +28,36 @@ export default defineComponent({
   setup(props, { emit }) {
     const $q = useQuasar()
     const userStore = useUserStore()
+    const globalStore = useGlobalStore()
 
     const iconWidth = ref(25)
     const iconHeight = ref(40)
-    const map = ref(<any>null)
-    const zoom = ref(6)
+    const zoom = ref(8)
 
-    const initialMap = ref(<any>null);
+    const map = ref(<any>null);
+
+    const visiblePosition = ref(false)
 
     const markers = ref(<any>null);
 
+    const isTrackingLocation = ref(false)
+
+    const currentMarker = ref<L.Marker | null>(null)
+
+    const centerCoordinates = ref<{ lat: number; lng: number }>({ lat: 0, lng: 0 });  // 
+
+    const mapOptions = ref(<any>{
+      zoomControl: true,      
+      zoomAnimation: true,
+      fadeAnimation: true,
+      markerZoomAnimation: false, //true      
+    })
+
+    const tileLayerOptions = {
+      maxZoom: 17,
+      minZoom: 3,
+    }
+
     const myIcon = L.icon({
       iconUrl: 'images/icon.png',
       iconSize: [30, 30],
@@ -47,8 +68,42 @@ export default defineComponent({
       shadowAnchor: [22, 35]
     });
 
+
+    const myIconPosAtt = L.icon({
+      iconUrl: 'images/icon.png',
+      iconSize: [30, 30],
+      iconAnchor: [22, 35],
+      popupAnchor: [-6, -36],
+      shadowUrl: 'images/marker-shadow.png',
+      shadowSize: [60, 30],
+      shadowAnchor: [22, 35]
+    });
+
+    const iconPosition = L.divIcon({
+      className: 'custom-marker', // Classe CSS personalizzata
+      html: '<span class="material-icons">location_on</span>',
+      iconSize: [40, 40],
+      iconAnchor: [22, 35],
+      popupAnchor: [-6, -36],
+    });
+
+    const currentLocationIcon = L.divIcon({
+      className: 'current-location-icon',
+      iconSize: [20, 20],
+      iconAnchor: [10, 10]
+    });
+
+
     const arrcord = toRef(props, 'arrcord')
 
+    watch(() => visiblePosition.value, () => {
+      if (visiblePosition.value === true) {
+        getCurrentPosition()
+      } else {
+        removeCurrentMarker()
+      }
+    })
+
     function mywidth() {
       return tools.getwidth($q) - 20
     }
@@ -99,27 +154,9 @@ export default defineComponent({
     })
 
     onMounted(async () => {
-      // Ottengo la lista degli utenti con i lat e long
-      // arrcord.value = await userStore.getProvincesForMap()
 
-      // @ts-ignore
-      markers.value = L.markerClusterGroup()
+      initMap()
 
-      initialMap.value = L.map('map',
-        {
-          zoomControl: true, zoom: zoom.value, zoomAnimation: true,
-          fadeAnimation: true, markerZoomAnimation: true,
-          center: [42.71, 12.934],
-        }
-      );
-      L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-        maxZoom: 15,
-        attribution: ''
-      }).addTo(initialMap.value);
-
-      updateMap()
-
-      // @ts-ignore
     });
 
     function log(str: string) {
@@ -135,28 +172,185 @@ export default defineComponent({
       console.log(`Latitudine: ${lat}, Longitudine: ${lng}`)
     }
 
+    function getIconName(myrec: any) {
+      const myarrSectors = myrec.sector
+      if (!myarrSectors) return 'mdi-map-marker-outline'
+
+      let sectId = myarrSectors[0]._id
+      return globalStore.getIconBySector(sectId)
+    }
+
+    function initMap() {
+      if (true) {
+        const getLastCoord = [tools.getCookie('last_lat', 42.71), tools.getCookie('last_lng', 12.934)]
+        console.log('getLastCoord', getLastCoord)
+        zoom.value = tools.getCookie('zoom', 8, true)
+        console.log('getLastCoord', getLastCoord, 'zoom', zoom.value)
+        const newmapopt = { ...mapOptions.value, 
+          zoom: zoom.value,
+          center: getLastCoord 
+        }
+        map.value = L.map('map', newmapopt);
+        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', tileLayerOptions).addTo(map.value);
+
+        map.value.on('moveend', () => {
+          const center = map.value.getCenter(); // Ottieni le coordinate centrali
+          centerCoordinates.value = { lat: center.lat, lng: center.lng }; // Salva le coordinate
+          const currentZoomLevel = map.value.getZoom();
+          tools.setCookie('last_lat', center.lat)
+          tools.setCookie('last_lng', center.lng)
+          tools.setCookie('zoom', currentZoomLevel)
+          // console.log('Coordinate centrali aggiornate:', centerCoordinates.value);
+        });
+
+        // @ts-ignore
+        markers.value = L.markerClusterGroup();
+
+        map.value.addLayer(markers.value);
+
+        // Assicuriamoci che la mappa sia completamente caricata prima di procedere
+        map.value.whenReady(() => {
+          console.log('Mappa inizializzata e pronta');
+          updateMap();
+        });
+      }
+    }
+
     function updateMap() {
-      if (initialMap.value) {
+      if (!map.value || !markers.value) return;
+
+      if (map.value) {
         markers.value.clearLayers();
 
         for (const rec of arrcord.value) {
           if (rec.coordinate_gps.coordinates) {
+            const markerHtml = `
+            <div class="marker-wrapper">
+            <img src="images/marker-shadow.png" class="marker-shadow" alt="Shadow" />
+            <img src="images/icon.png" class="marker-icon" alt="${name}" />
+
+            <div class="marker-circle"></div>
+            
+            <!-- Aggiungi l'icona aggiuntiva al centro -->
+            <div class="marker-mini-icon ${getIconName(rec)}"></div>
+        </div>        `;
+
+            const markerIcon = L.divIcon({
+              className: 'custom-marker', // Classe CSS personalizzata
+              html: markerHtml,
+              iconSize: [40, 40],
+              iconAnchor: [22, 35],
+              popupAnchor: [-6, -36],
+              shadowUrl: 'images/marker-shadow.png',
+              shadowSize: [60, 30],
+              shadowAnchor: [22, 35]
+            });
+
+
             // @ts-ignore
             let each_marker = new L.marker(
-              [rec.coordinate_gps.coordinates[1], rec.coordinate_gps.coordinates[0]], { icon: myIcon })
-              .bindPopup(`<strong>${rec.descr}</strong>`)
-              .on('click', () => markerClick(rec._id)); // Collega il click al bottone
+              [rec.coordinate_gps.coordinates[1], rec.coordinate_gps.coordinates[0]],
+              {
+                icon: markerIcon
+
+              },
+            )
+              .bindPopup(() => {
+                let container = L.DomUtil.create('div');
+                container.innerHTML = `
+                <span class="fake-link">${rec.descr}</span>
+                `;
+
+                let fakeLink: any = container.querySelector('.fake-link');
+                L.DomEvent.on(fakeLink, 'click', (e) => {
+                  L.DomEvent.stopPropagation(e);
+                  ApriScheda(rec._id);
+                  each_marker.closePopup();
+                });
+
+                return container;
+              }, { closeButton: false }) // Rimuove il pulsante di chiusura dal popup
+
+              .on('click', () => {
+                if (!$q.screen.lt.sm) {
+                  markerClick(rec._id)
+                }
+              })
+              .on('mouseover', () => {
+                if (!$q.screen.lt.sm) {
+                  each_marker.openPopup()
+                }
+              })
+              .on('mouseout', () => {
+                if (!$q.screen.lt.sm) {
+                  each_marker.closePopup()
+                }
+              });
             markers.value.addLayer(each_marker);
           }
         }
 
         // Aggiungi il gruppo di marker cluster alla mappa
-        initialMap.value.addLayer(markers.value);
+        map.value.addLayer(markers.value);
       }
     }
 
     function markerClick(id: any) {
       emit('clickMarker', id)
+      // emit('clickMarker', id)
+    }
+    function ApriScheda(id: any) {
+      emit('clickMarker', id)
+    }
+
+    const getCurrentPosition = () => {
+      if (navigator.geolocation) {
+        isTrackingLocation.value = true; // Setta lo stato a "in tracciamento"
+
+        navigator.geolocation.getCurrentPosition(
+          position => {
+            const lat = position.coords.latitude;
+            const lng = position.coords.longitude;
+
+            if (zoom.value < 12) {
+              zoom.value = 12;
+            }
+            // Centra la mappa sulla posizione attuale
+            map.value.flyTo([lat, lng], zoom.value, {
+              animate: true,
+              duration: 0.5
+            })
+            // setView([lat, lng], map.getZoom())
+
+            if (currentMarker.value) {
+              map.value.removeLayer(currentMarker.value);
+            }
+
+            // Aggiungi un marker per la posizione attuale, se desiderato
+            currentMarker.value = L.marker(
+              [lat, lng],
+              { icon: currentLocationIcon }
+            ).addTo(map.value)
+              .bindPopup('Posizione attuale')
+              .openPopup();
+
+            isTrackingLocation.value = false; // Resetta lo stato di tracciamento
+          },
+          error => {
+            console.error('Errore nel recupero della posizione:', error);
+            isTrackingLocation.value = false; // Resetta lo stato di tracciamento
+          }
+        );
+      } else {
+        console.error('Geolocalizzazione non supportata dal browser.');
+      }
+    }
+
+    const removeCurrentMarker = () => {
+      if (currentMarker.value) {
+        map.value.removeLayer(currentMarker.value); // Rimuovi il marker dalla mappa
+        currentMarker.value = null; // Resetta il riferimento
+      }
     }
 
     return {
@@ -172,6 +366,9 @@ export default defineComponent({
       log,
       getCoordinates,
       arrcord,
+      getCurrentPosition,
+      isTrackingLocation,
+      visiblePosition,
     }
   }
 })

src/components/CMapByTable/CMapByTable.vue

@@ -1,6 +1,19 @@
 <template>
   <div>
     <div id="map" :style="`height:${myheight()}px; width:99%`">
+      <q-btn 
+      @click="getCurrentPosition" 
+      color="primary"
+      :disable="isTrackingLocation"
+      :push="visiblePosition"
+    />
+    <q-toggle
+      class="locate-button" 
+      icon="fas fa-map-marker-alt" 
+      round
+      v-model="visiblePosition"
+      color="primary"
+    />
     </div>
   </div>
 </template>

src/css/app.scss

@@ -324,8 +324,9 @@ h3 {
   }
 }
 
-.dialog_annunci{
+.dialog_annunci {
   max-width: 700px !important;
+
   @media (max-width: 700px) {
     /* Versione Mobile */
     max-width: 100% !important;
@@ -1838,6 +1839,7 @@ h3 {
   min-height: 100% !important;
   max-width: 700px !important;
   min-width: 700px !important;
+
   @media (max-width: 700px) {
     /* Versione Mobile */
     max-width: 400px !important;
@@ -1933,7 +1935,8 @@ h3 {
 .aspect-ratio-box {
   position: relative;
   width: 100%;
-  padding-top: 56.25%; /* 16:9 Aspect Ratio */
+  padding-top: 56.25%;
+  /* 16:9 Aspect Ratio */
 }
 
 .aspect-ratio-box iframe {
@@ -1942,4 +1945,95 @@ h3 {
   left: 0;
   width: 100%;
   height: 100%;
+}
+
+.fake-link {
+  @media (max-width: 600px) {
+    color: #1976D2;
+    text-decoration: underline !important;
+    cursor: pointer;
+  }
+
+  font-weight: bold;
+}
+
+.fake-link:hover {
+  color: #0D47A1;
+}
+
+.fixed-toggle {
+  position: absolute;
+  /* Posizionamento fisso */
+  top: 60px;
+  /* Distanza dal bordo superiore */
+  left: 20px;
+  /* Distanza dal bordo sinistro */
+  z-index: 1000;
+  /* Assicurati che sia sopra gli altri elementi */
+}
+
+.marker-mini-icon {
+  position: absolute;
+  top: 5px;
+  left: 9px;
+  font-size: 20px;
+}
+
+.marker-circle {
+  position: absolute;
+  /* Posizionamento assoluto */
+  top: 15px;
+  /* Centra verticalmente */
+  left: 50%;
+  /* Centra orizzontalmente */
+  width: 24px;
+  /* Dimensione del cerchio */
+  height: 24px;
+  /* Dimensione del cerchio */
+  background-color: white;
+  /* Colore bianco del cerchio */
+  border-radius: 50%;
+  /* Rende il cerchio rotondo */
+  transform: translate(-50%, -50%);
+  /* Centra esattamente il cerchio */
+  z-index: 0;
+  /* Assicurati che sia sotto l'icona principale */
+}
+
+.marker-shadow {
+  width: 40px; /* Dimensione dell'ombra, dovrebbe corrispondere all'icona principale */
+  height: 40px; /* Dimensione dell'ombra */
+  position: absolute; /* Posizionamento assoluto per posizionarla correttamente */
+  top: 3px; /* Allineata sopra */
+  left: 8px; /* Allineata a sinistra */
+  z-index: -10; /* Assicurati che l'ombra sia sotto */
+  opacity: 1; /* L'opacità dell'ombra per un effetto realistico */
+}
+
+.custom-icon .material-icons {
+  position: absolute; /* Posizionamento assoluto per centrare */
+  top: 50%; /* Posizionamento verticale */
+  left: 50%; /* Posizionamento orizzontale */
+  transform: translate(-50%, -50%); /* Centra l'icona */
+  font-size: 40px; /* Dimensione dell'icona 20x20 */
+  color: blue; /* Colore dell'icona (puoi cambiarlo) */
+}
+
+.current-location-icon {
+  background-color: #4A89F3;
+  border: 3px solid #FFFFFF;
+  border-radius: 50%;
+  box-shadow: 0 0 0 4px #4A89F3;
+}
+.current-location-icon::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 50%;
+  height: 50%;
+  background-color: #FFFFFF;
+  border-radius: 50%;
+  opacity: 0.4;
 }

src/css/possibile_icons.css

@@ -0,0 +1,433 @@
+@charset "UTF-8";
+
+@font-face {
+  font-family: "presdecheznous";
+  src:url("fonts/presdecheznous.eot");
+  src:url("fonts/presdecheznous.eot?#iefix") format("embedded-opentype"),
+    url("fonts/presdecheznous.woff") format("woff"),
+    url("fonts/presdecheznous.ttf") format("truetype"),
+    url("fonts/presdecheznous.svg#presdecheznous") format("svg");
+  font-weight: normal;
+  font-style: normal;
+
+}
+
+[data-icon]:before {
+  font-family: "presdecheznous" !important;
+  content: attr(data-icon);
+  font-style: normal !important;
+  font-weight: normal !important;
+  font-variant: normal !important;
+  text-transform: none !important;
+  speak: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+[class^="icon-"]:before,
+[class*=" icon-"]:before {
+  font-family: "presdecheznous" !important;
+  font-style: normal !important;
+  font-weight: normal !important;
+  font-variant: normal !important;
+  text-transform: none !important;
+  speak: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-fruits:before {
+  content: "\61";
+}
+.icon-marche:before {
+  content: "\62";
+}
+.icon-pain:before {
+  content: "\63";
+}
+.icon-viande:before {
+  content: "\64";
+}
+.icon-legumes:before {
+  content: "\65";
+}
+.icon-poisson:before {
+  content: "\66";
+}
+.icon-laitier:before {
+  content: "\67";
+}
+.icon-plantes:before {
+  content: "\68";
+}
+.icon-autre:before {
+  content: "\69";
+}
+.icon-miel:before {
+  content: "\6a";
+}
+.icon-transformes:before {
+  content: "\6b";
+}
+.icon-boissons:before {
+  content: "\6c";
+}
+.icon-oeufs:before {
+  content: "\6d";
+}
+.icon-huile:before {
+  content: "\6e";
+}
+.icon-marker:before {
+  content: "\6f";
+}
+.icon-paper-plane:before {
+  content: "\70";
+}
+.icon-legumineuses:before {
+  content: "\71";
+}
+.icon-epicerie:before {
+  content: "\72";
+}
+.icon-bike:before {
+  content: "\73";
+}
+.icon-boat:before {
+  content: "\74";
+}
+.icon-car:before {
+  content: "\75";
+}
+.icon-clothe:before {
+  content: "\76";
+}
+.icon-leaf-1:before {
+  content: "\77";
+}
+.icon-camping:before {
+  content: "\78";
+}
+.icon-partner-3:before {
+  content: "\79";
+}
+.icon-001-scissors-1:before {
+  content: "\7a";
+}
+.icon-echange-1:before {
+  content: "\41";
+}
+.icon-conf:before {
+  content: "\42";
+}
+.icon-atelier-1:before {
+  content: "\43";
+}
+.icon-formation-2:before {
+  content: "\44";
+}
+.icon-skate:before {
+  content: "\45";
+}
+.icon-moto:before {
+  content: "\46";
+}
+.icon-mobilite-2:before {
+  content: "\47";
+}
+.icon-cafe:before {
+  content: "\48";
+}
+.icon-materiaux:before {
+  content: "\49";
+}
+.icon-seeds:before {
+  content: "\4a";
+}
+.icon-plants-1:before {
+  content: "\4b";
+}
+.icon-charpentier:before {
+  content: "\4c";
+}
+.icon-renouvelable-1:before {
+  content: "\4d";
+}
+.icon-electricite:before {
+  content: "\4e";
+}
+.icon-school:before {
+  content: "\4f";
+}
+.icon-architecte:before {
+  content: "\50";
+}
+.icon-maconnerie:before {
+  content: "\51";
+}
+.icon-ressourcerie:before {
+  content: "\52";
+}
+.icon-co2-1:before {
+  content: "\53";
+}
+.icon-jaridnier:before {
+  content: "\54";
+}
+.icon-design:before {
+  content: "\55";
+}
+.icon-temperature-1:before {
+  content: "\56";
+}
+.icon-paper:before {
+  content: "\57";
+}
+.icon-park:before {
+  content: "\58";
+}
+.icon-photo:before {
+  content: "\59";
+}
+.icon-musique:before {
+  content: "\5a";
+}
+.icon-theatre:before {
+  content: "\30";
+}
+.icon-cinema:before {
+  content: "\31";
+}
+.icon-restaurant:before {
+  content: "\32";
+}
+.icon-ferme-1:before {
+  content: "\33";
+}
+.icon-hotel-1:before {
+  content: "\34";
+}
+.icon-gite:before {
+  content: "\35";
+}
+.icon-voyage-1:before {
+  content: "\36";
+}
+.icon-beaute:before {
+  content: "\37";
+}
+.icon-pharmacie-1:before {
+  content: "\38";
+}
+.icon-cosmetique:before {
+  content: "\39";
+}
+.icon-decoration-2:before {
+  content: "\21";
+}
+.icon-accessoire-2:before {
+  content: "\22";
+}
+.icon-vetement-4:before {
+  content: "\23";
+}
+.icon-accessoire-4:before {
+  content: "\24";
+}
+.icon-friperie-1:before {
+  content: "\25";
+}
+.icon-case:before {
+  content: "\26";
+}
+.icon-coffee:before {
+  content: "\27";
+}
+.icon-tags:before {
+  content: "\28";
+}
+.icon-euro:before {
+  content: "\29";
+}
+.icon-paw:before {
+  content: "\2a";
+}
+.icon-education-1:before {
+  content: "\2b";
+}
+.icon-construction:before {
+  content: "\2c";
+}
+.icon-ruche:before {
+  content: "\2d";
+}
+.icon-expo:before {
+  content: "\2e";
+}
+.icon-home:before {
+  content: "\2f";
+}
+.icon-angle-right:before {
+  content: "\3a";
+}
+.icon-recycle:before {
+  content: "\3b";
+}
+.icon-tool:before {
+  content: "\3c";
+}
+.icon-chalet:before {
+  content: "\3d";
+}
+.icon-distrib:before {
+  content: "\3e";
+}
+.icon-palette:before {
+  content: "\3f";
+}
+.icon-activits-culturelles:before {
+  content: "\5b";
+}
+.icon-fablab-3:before {
+  content: "\7b";
+}
+.icon-informatique-1:before {
+  content: "\5c";
+}
+.icon-fablab-1:before {
+  content: "\e008";
+}
+.icon-monnaie-locale:before {
+  content: "\e009";
+}
+.icon-fablab2:before {
+  content: "\e00b";
+}
+.icon-solidarit:before {
+  content: "\e00c";
+}
+.icon-coopratives:before {
+  content: "\e00f";
+}
+.icon-lieu-collaboratif:before {
+  content: "\e010";
+}
+.icon-mobilier:before {
+  content: "\e012";
+}
+.icon-coworking-1:before {
+  content: "\e014";
+}
+.icon-troc-1:before {
+  content: "\e015";
+}
+.icon-troc-2:before {
+  content: "\e017";
+}
+.icon-vivre-ensemble:before {
+  content: "\e019";
+}
+.icon-repair-caf-2:before {
+  content: "\e01a";
+}
+.icon-bote-livredons:before {
+  content: "\e01c";
+}
+.icon-informatique-4:before {
+  content: "\e01e";
+}
+.icon-informatique-3:before {
+  content: "\e021";
+}
+.icon-ateliers-1:before {
+  content: "\e022";
+}
+.icon-repair-caf:before {
+  content: "\40";
+}
+.icon-collectif-citoyen-1:before {
+  content: "\5f";
+}
+.icon-apple:before {
+  content: "\7d";
+}
+.icon-001-support:before {
+  content: "\60";
+}
+.icon-003-hand:before {
+  content: "\e001";
+}
+.icon-004-protest:before {
+  content: "\e002";
+}
+.icon-002-support-1:before {
+  content: "\e000";
+}
+.icon-meeting-2:before {
+  content: "\e006";
+}
+.icon-democratie-1:before {
+  content: "\e005";
+}
+.icon-artisanat-2:before {
+  content: "\5e";
+}
+.icon-ring:before {
+  content: "\e003";
+}
+.icon-artisanat-3:before {
+  content: "\e004";
+}
+.icon-artisanat-4:before {
+  content: "\e007";
+}
+.icon-artisanat-5:before {
+  content: "\5d";
+}
+.icon-de:before {
+  content: "\e00a";
+}
+.icon-radio:before {
+  content: "\e00d";
+}
+.icon-recycle-1:before {
+  content: "\e00e";
+}
+.icon-chambredhote:before {
+  content: "\e011";
+}
+.icon-chaussures:before {
+  content: "\e013";
+}
+.icon-electromnager:before {
+  content: "\e016";
+}
+.icon-renewable:before {
+  content: "\7c";
+}
+.icon-rings:before {
+  content: "\7e";
+}
+.icon-shoe:before {
+  content: "\e018";
+}
+.icon-toaster:before {
+  content: "\e01b";
+}
+.icon-village:before {
+  content: "\e01d";
+}
+.icon-hygiene:before {
+  content: "\e01f";
+}
+.icon-entretien:before {
+  content: "\e020";
+}
+.icon-flash:before {
+  content: "\e023";
+}
+.icon-archive:before {
+  content: "\e024";
+}

src/statics/lang/it.js

@@ -14,8 +14,8 @@ const msg_it = {
       csv: 'Esporta Movimenti',
     },
     grid: {
-      showlist: 'Mostra la Lista',
-      showmap: 'Mostra la Mappa',
+      showlist: 'Lista',
+      showmap: 'Mappa',
       editvalues: 'Modifica Valori',
       addrecord: 'Aggiungi Riga',
       showprevedit: 'Mostra Eventi Passati',
@@ -24,6 +24,8 @@ const msg_it = {
       nodata: 'Nessun Dato',
       showfilters: 'Filtri',
       hidefilters: 'Nascondi Filtri',
+      openfilter: 'Apri Filtri',
+      closefilter: 'Chiudi Filtri',
     },
     gallery: {
       author_username: 'Utente',

src/store/Modules/tools.ts

@@ -7658,7 +7658,7 @@ export const tools = {
   getArrSubSector(table: string, rec: any) {
     if (table === toolsext.TABMYGOODS)
       return rec.recGood
-    else if ((table === toolsext.TABMYBACHECAS) || (table === toolsext.TABMYSKILLS))
+    else if ((table === toolsext.TABMYBACHECAS) || (table === toolsext.TABMYSKILLS) || (table === toolsext.TABATTIVITA))
       return rec.recSkill
     else if (table === toolsext.TABMYGROUPS)
       return []

src/store/globalStore.ts

@@ -879,8 +879,8 @@ export const useGlobalStore = defineStore('GlobalStore', {
       console.log('DeleteSubscriptionToServer: ')
 
       try {
-      return Api.SendReq('/subscribe/del', 'DELETE', null)
-      }catch (e) {
+        return Api.SendReq('/subscribe/del', 'DELETE', null)
+      } catch (e) {
         console.error('deleteSubscriptionToServer')
       }
     },
@@ -1667,7 +1667,7 @@ export const useGlobalStore = defineStore('GlobalStore', {
           return true
         }).then((res) => res).catch((error) => {
           if (error.status === serv_constants.RIS_CODE__HTTP_FORBIDDEN_TOKEN_EXPIRED) {
-              
+
           }
           console.log('error dbLoad', error)
           // userStore.setErrorCatch(error)
@@ -2099,7 +2099,7 @@ export const useGlobalStore = defineStore('GlobalStore', {
     },
 
     prepareAddNewElem(order: any, $q: any, t: any, myelem: any, newtype: any) {
-      
+
       const newrec: IMyElem = {
         _id: undefined,
         type: newtype,
@@ -2130,7 +2130,16 @@ export const useGlobalStore = defineStore('GlobalStore', {
 
       return newrec
 
-    }
+    },
 
-  },
+    getIconBySector(sectorId: string) {
+      const myrec = this.sectors.find((rec: any) => rec._id === sectorId)
+
+      if (myrec && myrec.icon) {
+        return myrec.icon
+      } else {
+        return 'fas fa-home'
+      }
+    }
+  }
 })