- aggiunto note 'note_ordine_gas'

- corretto bug

src/components/CCart/CCart.scss

@@ -5,4 +5,21 @@ $heightBtn: 100%;
 }
 .insert{
   cursor:pointer;
+}
+
+.note_ordine_gas{
+  margin: 5px;
+  border: 1px solid #007bff; /* Un bordo solido blu */
+  background-color: #e9f5ff; /* Un colore di sfondo leggermente blu */
+  border-radius: 8px; /* Angoli arrotondati per un aspetto moderno */
+  padding: 20px; /* Spaziatura all'interno del box */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Una leggera ombreggiatura per farlo "sollevare" */
+  color: #333; /* Colore del testo scuro per alta leggibilità */
+  margin: 20px 0; /* Margine sopra e sotto per distanziarlo da altri contenuti */
+  font-size: 16px; /* Dimensione del testo */
+}
+
+.strong {
+  color: #d9534f; /* Rosso */
+  font-weight: bold; /* Testo in grassetto */
 }

src/components/CCart/CCart.vue

@@ -35,6 +35,13 @@
           @input="change_field('note')"
         >
         </q-input>
+
+        <div
+          v-if="recOrderCart.note_ordine_gas"
+          class="note_ordine_gas"
+          v-html="recOrderCart.note_ordine_gas"
+        >
+        </div>
       </div>
       <div class="text-center">
         <q-btn

src/components/CMapComuni/CMapComuni.scss

@@ -0,0 +1,3 @@
+.map-container {
+  height: 400px;
+}

src/components/CMapComuni/CMapComuni.ts

@@ -0,0 +1,145 @@
+import { tools } from '@store/Modules/tools'
+import { useQuasar } from 'quasar'
+import { PropType, defineComponent, onMounted, ref, computed } from 'vue'
+
+import 'leaflet/dist/leaflet.css'
+// @ts-ignore
+import * as L from 'leaflet'
+import 'leaflet.markercluster/dist/MarkerCluster.css'
+import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
+import 'leaflet.markercluster'
+
+// import comuniData from './comuni-data.geojson';
+
+import { useUserStore } from '@src/store/UserStore'
+
+export default defineComponent({
+  name: 'CMapComuni',
+  setup(props, { emit }) {
+    const $q = useQuasar()
+    const userStore = useUserStore()
+
+    const iconWidth = ref(25)
+    const iconHeight = ref(40)
+    const map = ref(<any>null)
+    const zoom = ref(6)
+    const arrprovince = ref(<any>[])
+
+    const comuniData = ref('')
+
+    const initialMap = ref(<any>null);
+
+    const myIcon = 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]
+    });
+
+
+    function mywidth() {
+      return tools.getwidth($q) - 20
+    }
+
+    function myheight() {
+      return $q.screen.height - 50
+    }
+
+    const iconSize = computed(() => {
+      return [iconWidth.value, iconHeight.value];
+    })
+
+    function changeIcon() {
+      iconWidth.value += 2;
+      if (iconWidth.value > iconHeight.value) {
+        iconWidth.value = Math.floor(iconHeight.value / 2);
+      }
+    }
+
+    function getColor(d: any) {
+      return d > 1000 ? '#800026' :
+        d > 500 ? '#BD0026' :
+          d > 200 ? '#E31A1C' :
+            d > 100 ? '#FC4E2A' :
+              d > 50 ? '#FD8D3C' :
+                d > 20 ? '#FEB24C' :
+                  d > 10 ? '#FED976' :
+                    '#FFEDA0';
+    }
+
+    function styleFunction(feature: any) {
+      // Qui verrà implementata la logica per determinare il colore basato sul numero di utenti
+      // esempio semplice:
+      const userCount = getUserCountForComune(feature.properties.NOME_COM); // Assicurati di implementare getUserCountForComune
+      const density = userCount / feature.properties.area; // supponendo che 'area' sia un campo esistente
+      return {
+        fillColor: getColor(density),
+        weight: 2,
+        opacity: 1,
+        color: 'white',
+        fillOpacity: 0.7
+      };
+    }
+
+    function getUserCountForComune(comuneName: string) {
+      // Implementa questa funzione per ottenere il numero di utenti per il dato comune
+      // Si può utilizzare una richiesta a un API o una mappa locale, a seconda di come sono archiviati i dati
+      const trovataprov = arrprovince.value.find((prov: any) => prov.descr === comuneName)
+      if (trovataprov) {
+        return trovataprov.userCount
+      }
+
+      return 0; // stub, implementazione di esempio
+    }
+
+    onMounted(async () => {
+      // Ottengo la lista degli utenti con i lat e long
+      arrprovince.value = await userStore.getProvincesForMap()
+
+      initialMap.value = L.map('map',
+        {
+          zoomControl: true, zoom: zoom.value, zoomAnimation: false,
+          fadeAnimation: true, markerZoomAnimation: true,
+          center: [42.71, 12.934],
+        }
+      );
+      L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        maxZoom: 13,
+        attribution: ''
+      }).addTo(initialMap.value);
+
+    });
+
+    function log(str: string) {
+      console.log(str)
+    }
+
+    function getCoordinates(e: any) {
+      // Ottieni la latitudine e la longitudine dal click
+      const lat = e.latlng.lat
+      const lng = e.latlng.lng
+
+      // Fai qualcosa con le coordinate, ad esempio stamparle in console
+      console.log(`Latitudine: ${lat}, Longitudine: ${lng}`)
+    }
+
+    return {
+      mywidth,
+      myheight,
+      map,
+      iconWidth,
+      iconHeight,
+      iconSize,
+      changeIcon,
+      zoom,
+      log,
+      styleFunction,
+      getCoordinates,
+      arrprovince,
+      comuniData,
+    }
+  }
+})

src/components/CMapComuni/CMapComuni.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    comuniData: {{comuniData}}
+    <div
+      v-if="arrprovince"
+      id="map"
+      :style="`height:${myheight()}px; width:99%`"
+    >
+      <l-map :zoom="zoom" :center="center">
+        <l-tile-layer :url="url"></l-tile-layer>
+        <l-geo-json
+          :geojson="comuniData"
+          :options="{ style: styleFunction }"
+        ></l-geo-json>
+      </l-map>
+    </div>
+  </div>
+</template>
+<script lang="ts" src="./CMapComuni.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CMapComuni.scss';
+</style>

src/components/CMapComuni/index.ts

@@ -0,0 +1 @@
+export {default as CMapComuni} from './CMapComuni.vue'

src/components/CMapUsers/CMapUsers.scss

@@ -0,0 +1,3 @@
+.map-container {
+  height: 400px;
+}

src/components/CMapUsers/CMapUsers.ts

@@ -0,0 +1,146 @@
+import { tools } from '@store/Modules/tools'
+import { useQuasar } from 'quasar'
+import { PropType, defineComponent, onMounted, ref, computed } from 'vue'
+
+import 'leaflet/dist/leaflet.css'
+// @ts-ignore
+import * as L from 'leaflet'
+import 'leaflet.markercluster/dist/MarkerCluster.css'
+import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
+import 'leaflet.markercluster'
+
+import { useUserStore } from '@src/store/UserStore'
+
+export default defineComponent({
+  name: 'CMapUsers',
+  setup(props, { emit }) {
+    const $q = useQuasar()
+    const userStore = useUserStore()
+
+    const iconWidth = ref(25)
+    const iconHeight = ref(40)
+    const map = ref(<any>null)
+    const zoom = ref(6)
+    const arrprovince = ref(<any>[])
+
+    const initialMap = ref(<any>null);
+
+    const myIcon = 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]
+    });
+
+
+    function mywidth() {
+      return tools.getwidth($q) - 20
+    }
+
+    function myheight() {
+      return $q.screen.height - 50
+    }
+
+    const iconUrl = computed(() => {
+      return `https://placekitten.com/${iconWidth.value}/${iconHeight.value}`;
+    })
+
+    const iconSize = computed(() => {
+      return [iconWidth.value, iconHeight.value];
+    })
+
+    function changeIcon() {
+      iconWidth.value += 2;
+      if (iconWidth.value > iconHeight.value) {
+        iconWidth.value = Math.floor(iconHeight.value / 2);
+      }
+    }
+
+    function getColor(d: any) {
+      return d > 1000 ? '#800026' :
+        d > 500 ? '#BD0026' :
+          d > 200 ? '#E31A1C' :
+            d > 100 ? '#FC4E2A' :
+              d > 50 ? '#FD8D3C' :
+                d > 20 ? '#FEB24C' :
+                  d > 10 ? '#FED976' :
+                    '#FFEDA0';
+    }
+    
+    function style(feature: any) {
+      return {
+        fillColor: getColor(feature.properties.density),
+        weight: 2,
+        opacity: 1,
+        color: 'white',
+        dashArray: '3',
+        fillOpacity: 0.7
+      };
+    }
+
+    onMounted(async () => {
+      // Ottengo la lista degli utenti con i lat e long
+      arrprovince.value = await userStore.getProvincesForMap()
+
+      initialMap.value = L.map('map',
+        {
+          zoomControl: true, zoom: zoom.value, zoomAnimation: false,
+          fadeAnimation: true, markerZoomAnimation: true,
+          center: [42.71, 12.934],
+        }
+      );
+      L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        maxZoom: 13,
+        attribution: ''
+      }).addTo(initialMap.value);
+
+      // @ts-ignore
+      const markers = L.markerClusterGroup();
+
+      for (const provincia of arrprovince.value) {
+        if (provincia.lat && provincia.long && provincia.userCount > 1) {
+          // @ts-ignore
+          let each_marker = new L.marker(
+            [provincia.lat, provincia.long], { icon: myIcon })
+            .bindPopup(`<strong> ${provincia.descr}:
+          ${provincia.userCount} utenti </strong>`);
+          markers.addLayer(each_marker);
+        }
+      }
+
+      initialMap.value.addLayer(markers);
+
+    });
+
+    function log(str: string) {
+      console.log(str)
+    }
+
+    function getCoordinates(e: any) {
+      // Ottieni la latitudine e la longitudine dal click
+      const lat = e.latlng.lat
+      const lng = e.latlng.lng
+
+      // Fai qualcosa con le coordinate, ad esempio stamparle in console
+      console.log(`Latitudine: ${lat}, Longitudine: ${lng}`)
+    }
+
+    return {
+      mywidth,
+      myheight,
+      map,
+      iconWidth,
+      iconHeight,
+      iconUrl,
+      iconSize,
+      changeIcon,
+      zoom,
+      log,
+      getCoordinates,
+      arrprovince,
+    }
+  }
+})

src/components/CMapUsers/CMapUsers.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <div v-if="arrprovince" id="map" :style="`height:${myheight()}px; width:99%`">
+    </div>
+
+    <!--
+    <div :style="`height:${myheight()}px; width:99%`">
+      <l-map
+        v-model="zoom"
+        v-model:zoom="zoom"
+        :center="[42.71, 12.934]"
+        @move="log('move')"
+        @click="getCoordinates"
+      >
+        <l-tile-layer
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        ></l-tile-layer>
+        <l-control-layers />
+        <span v-for="provincia in arrprovince" :key="provincia.nome">
+          <l-marker-cluster :options="clusterOptions">
+            <l-marker
+              v-if="provincia.userCount > 0"
+              :lat-lng="[provincia.lat, provincia.long]"
+            >
+              <l-popup
+                >{{ provincia.descr }}:
+                {{ provincia.userCount }} utenti</l-popup
+              >
+            </l-marker>
+          </l-marker-cluster>
+        </span>
+
+      </l-map>
+      <button @click="changeIcon">New kitten icon</button>
+    </div>
+    -->
+  </div>
+</template>
+<script lang="ts" src="./CMapUsers.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CMapUsers.scss';
+</style>

src/components/CMapUsers/index.ts

@@ -0,0 +1 @@
+export {default as CMapUsers} from './CMapUsers.vue'

src/components/CMyElem/CMyElem.ts

@@ -17,8 +17,8 @@ import { CECommerce } from '@/components/CECommerce'
 import { CAITools } from '@/components/CAITools'
 import { CCatalogo } from '@/components/CCatalogo'
 // import { CMapMarker } from '@src/components/CMapMarker.off'
-// import { CMapUsers } from '@/components/CMapUsers'
-// import { CMapComuni } from '@/components/CMapComuni'
+import { CMapUsers } from '@/components/CMapUsers'
+import { CMapComuni } from '@/components/CMapComuni'
 import { COpenStreetMap } from '@src/components/COpenStreetMap'
 import { CCardCarousel } from '@src/components/CCardCarousel'
 import { CMyPage } from '@src/components/CMyPage'
@@ -60,7 +60,8 @@ export default defineComponent({
     CMyProfileTutorial, CSendRISTo,
     CTitleBanner, CShareSocial, CCheckAppRunning, CRegistration,
     CVisuVideoPromoAndPDF, CECommerce, CCatalogo, CAITools,
-    // CMapUsers, CMapComuni, //CMapMarker, 
+    CMapComuni, CMapUsers,
+    // ,  //CMapMarker, 
   },
   emits: ['selElemClick'],
   props: {

src/components/CMyElem/CMyElem.vue

@@ -565,13 +565,13 @@
       </div>
       <div v-else-if="myel.type === shared_consts.ELEMTYPE.MAPPAUTENTI">
         <div v-if="editOn" class="elemEdit">MAPPA UTENTI:</div>
-        <!--<CMapUsers    
-        ></CMapUsers>-->
+        <CMapUsers    
+        ></CMapUsers>
       </div>
       <div v-else-if="myel.type === shared_consts.ELEMTYPE.MAPPACOMUNI">
         <div v-if="editOn" class="elemEdit">MAPPA COMUNI:</div>
-        <!--<CMapComuni    
-        ></CMapComuni>-->
+        <CMapComuni    
+        ></CMapComuni>
       </div>
       <div v-else-if="myel.type === shared_consts.ELEMTYPE.TOOLSAI">
         <div v-if="editOn" class="elemEdit">STRUMENTI AI:</div>

src/components/CProductCard/CProductCard.vue

@@ -300,9 +300,9 @@
         </div>
       </q-card-section>
       <q-card-section
-        v-if="complete && myproduct.producer && myproduct.producer.city"
+        v-if="complete && myproduct.producer"
       >
-        <div>
+        <div v-if="myproduct.producer.city">
           <div class="text-grey text-title row items-center q-mt-sm">
             <q-icon name="map" class="q-mr-xs" />
             {{ t('products.origine') }}:
@@ -325,7 +325,7 @@
         </div>
       </q-card-section>
 
-      <q-card-section v-if="myproduct.note" class="q-pa-none">
+      <q-card-section v-if="myproduct.productInfo.note" class="q-pa-none">
         <q-item>
           <q-item-section avatar>
             <q-icon color="black" name="fas fa-book" />
@@ -334,17 +334,20 @@
           <q-item-section>
             <q-item-label class="">
               <CMyValueDb
+                v-if="editOn"
                 title=""
                 :editOn="editOn"
-                table="products"
-                :id="myproduct._id"
-                :rec="myproduct"
+                table="productinfos"
+                :id="myproduct.productInfo._id"
+                :rec="myproduct.productInfo"
                 mykey="note"
                 debounce="1000"
                 :save="updateproductmodif()"
                 :type="costanti.FieldType.string"
               >
               </CMyValueDb>
+              <div v-if="!editOn" v-html="myproduct.productInfo.note">
+              </div>
             </q-item-label>
           </q-item-section>
         </q-item>