- attivita

- gestione degli script sul server - creato websocket per interagire con gli script del server.
2024-08-29 23:31:54 +02:00
parent 79e874e3e0
commit 8f4ff8ff9c
39 changed files with 1373 additions and 303 deletions
--- a/_ALL_SITES/abitaregliiblei.it/db/lang/ws_it.js
+++ b/_ALL_SITES/abitaregliiblei.it/db/lang/ws_it.js
@@ -84,6 +84,7 @@ const msg_website_it = {
    eventodef: 'Evento:',
    prova: 'prova',
    dbop: 'Operazioni',
+    server: 'Server',
    projall: 'Comunitari',
    groups: 'Lista Gruppi',
    projectsShared: 'Condivisi da me',
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
    "jquery": "^3.7.1",
    "js-cookie": "^3.0.5",
    "leaflet": "^1.9.4",
+    "leaflet-routing-machine": "^3.2.12",
    "leaflet.markercluster": "^1.5.3",
    "localforage": "^1.10.0",
    "lodash": "^4.17.21",
--- a/src/common/shared_vuejs.ts
+++ b/src/common/shared_vuejs.ts
@@ -1157,6 +1157,11 @@ export const shared_consts = {
    numattend: 1,
  },

+  ANNUNCI_FIELDS: {
+    idMyGroup: 1,
+    // **ADDFIELD_MYGROUPS
+  },
+
  OrderStatusStr: [
    {
      label: 'Nessuno',
@@ -2040,7 +2045,6 @@ export const shared_consts = {
        date_created: 1,
        date_updated: 1,
        tipodiAttivita: 1,
-        nome_attivita: 1,
        coordinate_gps: 1,
        email: 1,
        telegram_username: 1,
@@ -2127,6 +2131,7 @@ export const shared_consts = {
      proj = Object.assign({}, proj, proj_add);

    proj = { ...proj, ...this.REACTIONS_FIELD };
+    proj = { ...proj, ...this.ANNUNCI_FIELDS };

    if (table) {
      let proj_add3 = this.getProjectByTable(table);
--- a/src/components/CBarSelection/CBarSelection.ts
+++ b/src/components/CBarSelection/CBarSelection.ts
@@ -45,6 +45,11 @@ import { globals } from 'jest.config'
 export default defineComponent({
  name: 'CBarSelection',
  props: {
+    ind: {
+      type: Number,
+      required: false,
+      default: -1,
+    },
    table: {
      type: String,
      required: true,
@@ -80,6 +85,7 @@ export default defineComponent({
    CMyUser, CMyRecCard, CMyCardPopup, CMyRecGrpCard, CMyCardGrpPopup, CMyCardCircuitPopup,
    CMyRecCircuitCard
  },
+  emits: ['clickButtBar'],
  setup(props, { emit }) {
    const $q = useQuasar()
    const { t } = useI18n()
@@ -304,6 +310,10 @@ export default defineComponent({
      globalStore.addNewRecord = tablesel.value
    }

+    function clickButtBar(item: any) {
+      emit('clickButtBar', item)
+    }
+
    created()
    onMounted(mounted)

@@ -351,6 +361,7 @@ export default defineComponent({
      toHome,
      iconsel,
      filtri,
+      clickButtBar,
    }
  }
 })
--- a/src/components/CBarSelection/CBarSelection.vue
+++ b/src/components/CBarSelection/CBarSelection.vue
@@ -15,9 +15,7 @@
          ></q-btn>
        </div>
        <q-slide-transition>
-          <div             
-            class="row no-wrap shadow-1" 
-            style="height: 40px">
+          <div class="row no-wrap shadow-1">
            <div v-if="$q.screen.gt.xs" class="col-1">
              <q-avatar @click="toHome" class="imglink">
                <img
@@ -27,7 +25,7 @@
                />
              </q-avatar>
            </div>
-            <div class="col-4">
+            <div class="col-fixed" style="width: 200px;">
              <q-select
                dense
                v-model="tablesel"
@@ -57,6 +55,19 @@
                </template>
              </q-select>
            </div>
+            <div class="col-auto"> <!-- to the right -->
+              <q-btn
+                v-if="tools.getLabelAddrec(ind)"
+                rounded
+                outline
+                color="primary"
+                class="q-ma-xs q-py-sm"
+                :label="tools.getLabelAddrec(ind)"
+                icon="fas fa-pencil-alt"
+                @click="clickButtBar(tools.BUTT_ADDREC)"
+              >
+              </q-btn>
+            </div>

            <!--<q-btn
                  size="sm"
--- a/src/components/CFinder/CFinder.ts
+++ b/src/components/CFinder/CFinder.ts
@@ -20,6 +20,7 @@ import { useQuasar } from 'quasar'

 export default defineComponent({
  name: 'CFinder',
+  emits: ['clickButtBar'],
  props: {
    table: {
      type: String,
@@ -88,6 +89,8 @@ export default defineComponent({

    const col = ref(<IColGridTable>{})

+    const myGridRef = ref(<any>null)
+
    /*
    const idSectorServizi = computed(() => {
      let myval: any = null
@@ -200,7 +203,7 @@ export default defineComponent({
      else if (props.table === shared_consts.TABLES_MYHOSPS)
        return 'digita delle parole da cercare nella descrizione dell\'Ospitalità'
      else if (props.table === shared_consts.TABLES_ATTIVITAS)
-        return 'digita un\'attività da cercare nella descrizione dell\'Ospitalità'
+        return 'digita un\'attività da cercare'

      return 'digita una parola da cercare'
    })
@@ -1041,6 +1044,14 @@ export default defineComponent({
      //
    }

+    function clickButtBar(item: any) {
+      if (myGridRef.value) {
+        myGridRef.value.clickButtBar(item)
+      }
+
+      // emit('clickButtBar', item)
+    }
+
    onMounted(mounted)

    return {
@@ -1067,6 +1078,8 @@ export default defineComponent({
      strextra,
      myoptions,
      mySortFieldsAvailable,
+      clickButtBar,
+      myGridRef,
    }
  },
 })
--- a/src/components/CFinder/CFinder.vue
+++ b/src/components/CFinder/CFinder.vue
@@ -1,5 +1,5 @@
 <template>
-  <CTitlePage :ind="ind" :table="table" :showBarSelection="showBarSelection">
+  <CTitlePage :ind="ind" :table="table" :showBarSelection="showBarSelection" @clickButtBar="clickButtBar">
    <div class="bi-border-all">
      <div class="q-ma-xs q-gutter-xs">
        <div v-if="showFilterPersonal" class="text-center">
@@ -32,6 +32,7 @@
        </div>

        <CGridTableRec
+          ref="myGridRef"
          v-if="searchList.length > 0"
          :prop_mytable="table"
          :options="tools.optionsTable(table)"
@@ -51,16 +52,18 @@
          labelElemFind="trovati"
          :choose_visutype="visuType"
          :butt_modif_new="true && !noButtAdd"
-          noresultLabel="Il filtro selezionato non ha trovato nessun risultato"
+          :noresultLabel="t('grid.nosearchfound') + ' ' + (showMap ? t('grid.intheareamap') : '')"
          :arrfilters="arrfilterand"
          :filtercustom="filtercustom"
          :prop_searchList="searchList"
          :defaultnewrec="tools.getdefaultnewrec(table)"
          labelBtnAddRow="NONE"
          :prop_SortFieldsAvailable="mySortFieldsAvailable"
-          :labelBtnAddExtra="noButtAdd ? `` : (ind >= 0) ? `Aggiungi ` + costanti.MAINCARDS[ind].strsingolo : ''"
+          :labelBtnAddExtra_OFF="noButtAdd ? `` : (ind >= 0) ? `Aggiungi ` + costanti.MAINCARDS[ind].strsingolo : ''"
+          labelBtnAddExtra=""
          :extraparams="tools.extraparams(table, {myrecfiltertoggle})"
          :prop_showMap="showMap"
+          @clickButtBar="clickButtBar"
        >
        </CGridTableRec>
      </div>
--- a/src/components/CGridTableRec/CGridTableRec.scss
+++ b/src/components/CGridTableRec/CGridTableRec.scss
@@ -7,7 +7,8 @@
  min-width: 200px;
 }

-.tdclass, .trclass{
+.tdclass,
+.trclass {
  min-height: 20px !important;
  margin-top: 5px;
 }
@@ -17,6 +18,7 @@
  padding-right: 2px;
  padding-top: 0;
  padding-bottom: 0;
+
  &__title {
    font-size: 1rem;
  }
@@ -29,7 +31,7 @@
  }
 }

-.newrec_fields{
+.newrec_fields {
  display: flex;
  padding: 2px;
  margin: 2px;
@@ -43,12 +45,27 @@
 }


-.q-table__top{
+.q-table__top {
  padding-top: 0 !important;
 }

 .right-align-dialog .q-dialog {
-  right: 0; /* Allinea a destra */
-  left: auto; /* Disabilita l'allineamento a sinistra */
-  margin: 0; /* Rimuovi qualsiasi margine */
+  right: 0;
+  /* Allinea a destra */
+  left: auto;
+  /* Disabilita l'allineamento a sinistra */
+  margin: 0;
+  /* Rimuovi qualsiasi margine */
+}
+
+
+.flexible-width {
+  flex: 1;
+  /* permette al componente di espandersi */
+  max-width: 500px;
+  /* larghezza massima di 600px */
+}
+
+.hint_search{
+  color: gray;
 }
--- a/src/components/CGridTableRec/CGridTableRec.ts
+++ b/src/components/CGridTableRec/CGridTableRec.ts
@@ -14,7 +14,9 @@ import {
  ISearchList,
  IPagination,
  IParamDialog,
-  IMySkill
+  IMySkill,
+  ICoordLatLng,
+  ICoordGPS
 } from 'model'
 import { lists } from '@store/Modules/lists'
 import { IParamsQuery } from 'model'
@@ -41,15 +43,18 @@ import { CMyCardPopup } from '@/components/CMyCardPopup'
 import { CMyCardService } from '@/components/CMyCardService'
 import { CMyCardGrpPopup } from '@/components/CMyCardGrpPopup'
 import { CMyCardCircuitPopup } from '@/components/CMyCardCircuitPopup'
-import { onBeforeRouteLeave, onBeforeRouteUpdate, beforeRouteEnter, useRouter } from 'vue-router'
+import { onBeforeRouteLeave, onBeforeRouteUpdate, useRouter } from 'vue-router'
 import { useRoute } from 'vue-router'
 import { NavigationGuardNext, RouteLocationNormalized } from 'vue-router'

 import { Dialog } from 'quasar'; // Assicurati di importare correttamente Dialog da Quasar.

+import { getMapBoundaries } from '@src/store/Modules/geocodingmap'
+import { isMap } from 'util/types'

 export default defineComponent({
  name: 'CGridTableRec',
+  emits: ['clickButtBar', 'savefilter'],
  props: {
    prop_mytitle: {
      type: String,
@@ -329,6 +334,8 @@ export default defineComponent({
    const drawmonth = ref(true)

    const showMap = ref(false)
+    const showMapAtLeast1 = ref(false)
+    const mapInitialized = ref(false)


    const newRecordBool = ref(false)
@@ -344,6 +351,8 @@ export default defineComponent({
    const mycolumns = ref([] as any[])
    const colkey = ref('')
    const search = ref('')
+    const showSearchDialog = ref(false)
+    const myMapComp = ref(<any>null)

    const tablesel = ref('')
    const showSpin = ref(false)
@@ -361,6 +370,9 @@ export default defineComponent({
      },
    })

+    const boundariesMap = ref({ ne: 0, sw: 0 } as any)
+    const precboundariesMap = ref({ ne: 0, sw: 0 } as any)
+
    const visupagedialog = ref(false)
    const myrecdialog = ref(null)
    const myIdRecDialog = ref(null)
@@ -412,6 +424,8 @@ export default defineComponent({
    const ordinam = ref('')
    const ordinam_desc = ref(false)

+    const autoaggiornaMappaSeMuovi = ref(true)
+
    /*onBeforeRouteUpdate((to: any, from: any, next: any) => {
      console.log('onBeforeRouteUpdate', 'to', to, 'from', from, 'next', next)
      next()
@@ -419,7 +433,7 @@ export default defineComponent({

    onBeforeRouteLeave((to: any, from: any, next: any) => {
      console.log('onBeforeRouteLeave', 'to', to, 'from', from, 'next', next)
-      if (checkForChanges()) {
+      if ((editRecordBool.value || newRecordBool.value) && checkForChanges()) {
        const answer = window.confirm(t('dialog.uscire'))
        if (answer) {
          next()
@@ -542,7 +556,7 @@ export default defineComponent({
    watch(() => props.filtercustom, (to: any, from: any) => {
      // console.log('filtercustom', to)
      if (JSON.stringify(to) !== JSON.stringify(from)) {
-        console.log('REFRR props.filtercustom', to, from)
+        // console.log('REFRR props.filtercustom', to, from)
        refresh()
      }
    })
@@ -1066,7 +1080,18 @@ export default defineComponent({
      // console.log('params', params)
      // console.log('props.extraparams', props.extraparams)

+      let paramsMap = null
+
+      if (showMap.value) {
+        paramsMap = {
+          searchByBoundariesMap: boundariesMap.value
+        }
+      }
+
      params = { ...params, ...props.extraparams }
+      if (paramsMap) {
+        params = { ...params, ...paramsMap }
+      }

      const data = await globalStore.loadTable(params)

@@ -1606,51 +1631,57 @@ export default defineComponent({

    function mounted() {
      console.log('mounted...')
-      searchList.value = props.prop_searchList
+      try {
+        searchList.value = props.prop_searchList

-      showMap.value = props.prop_showMap
+        boundariesMap.value = getMapBoundaries()
+
+        showMap.value = props.prop_showMap
+        showMapAtLeast1.value = props.prop_showMap
+
+        // console.log('GridTable mounted', tablesel.value)
+
+        // console.log('props.filtercustom', props.filtercustom)


-      // console.log('GridTable mounted', tablesel.value)
+        if (!!props.tablesList) {
+          canEdit.value = tools.getCookie(tools.CAN_EDIT, canEdit) === 'true'
+          tablesel.value = tools.getCookie('tablesel', tablesel.value)
+        }

-      // console.log('props.filtercustom', props.filtercustom)
+        myfilterand.value = props.filterdef
+        // myfiltercustom.value = props.filtercustom
+        // console.log('tablesel', tablesel)

+        if (tablesel.value === '') {
+          if (!!props.tablesList)
+            tablesel.value = props.tablesList[0].value
+          else
+            tablesel.value = mytable.value
+        }

-      if (!!props.tablesList) {
-        canEdit.value = tools.getCookie(tools.CAN_EDIT, canEdit) === 'true'
-        tablesel.value = tools.getCookie('tablesel', tablesel.value)
+        if (!shared_consts.TABLES_ORDER_DATE_UPDATED.includes(tablesel.value) &&
+          !shared_consts.TABLES_ORDER_DESCR.includes(tablesel.value)) {
+          // console.log('get cookie)')
+          let v1 = tools.getCookie('s_ordinamnew_' + tablesel.value, null)
+          if (v1)
+            ordinam.value = v1
+          let v2 = tools.getCookie('s_ordinamnew_des_' + tablesel.value, null)
+          if (v2)
+            ordinam_desc.value = v2
+        }
+
+        // console.log('2) tablesel', tablesel.value)
+
+        changeTable(tablesel.value, true)
+
+        // Aggiungi gli listener agli eventi della tastiera
+        document.addEventListener('keydown', onEscapeKey);
+        // window.addEventListener('popstate', onBackButton);
+
+      } catch (error) {
+        console.error('Err mounted', error)
      }
-
-      myfilterand.value = props.filterdef
-      // myfiltercustom.value = props.filtercustom
-      // console.log('tablesel', tablesel)
-
-      if (tablesel.value === '') {
-        if (!!props.tablesList)
-          tablesel.value = props.tablesList[0].value
-        else
-          tablesel.value = mytable.value
-      }
-
-      if (!shared_consts.TABLES_ORDER_DATE_UPDATED.includes(tablesel.value) &&
-        !shared_consts.TABLES_ORDER_DESCR.includes(tablesel.value)) {
-        // console.log('get cookie)')
-        let v1 = tools.getCookie('s_ordinamnew_' + tablesel.value, null)
-        if (v1)
-          ordinam.value = v1
-        let v2 = tools.getCookie('s_ordinamnew_des_' + tablesel.value, null)
-        if (v2)
-          ordinam_desc.value = v2
-      }
-
-      // console.log('2) tablesel', tablesel.value)
-
-      changeTable(tablesel.value, true)
-
-      // Aggiungi gli listener agli eventi della tastiera
-      document.addEventListener('keydown', onEscapeKey);
-      // window.addEventListener('popstate', onBackButton);
-
    }

    function exec_func_table(table: string, func: number, par: IParamDialog) {
@@ -2396,6 +2427,7 @@ export default defineComponent({

    // Questa funzione viene chiamata quando il dialogo cerca di chiudersi
    const onEscapeKey = (event: KeyboardEvent) => {
+      // console.log('onEscapeKey', event.key)
      if (event.key === 'Escape') {
        event.preventDefault(); // Previene la chiusura da ESC
      }
@@ -2420,6 +2452,91 @@ export default defineComponent({
      cmdExt(costanti.CMD_SHOW_PAGE, id, null)
    }

+    function updateMapBoundaries(ne: any, sw: any, updatedata: boolean) {
+
+      if (ne && sw) {
+        // console.log('updateMapBoundaries', ne, sw)
+
+        mapInitialized.value = true
+        boundariesMap.value = { ne, sw }
+
+        // Verifica se boundariesMap è variato da precedente valore, 
+        // ma solo se ci sono nuovi pezzi delle mappa in più mostrati, quindi se è stato fatto un zoom in, non includerlo
+
+        const percrange = 0.15 //15%
+
+        const percrange_ne_lat = ne.lat - ((ne.lat - sw.lat) * percrange)
+        const percrange_ne_lng = ne.lng - ((ne.lng - sw.lng) * percrange)
+        const percrange_sw_lat = sw.lat + ((ne.lat - sw.lat) * percrange)
+        const percrange_sw_lng = sw.lng + ((ne.lng - sw.lng) * percrange)
+        
+
+        if (precboundariesMap.value) {
+          if (precboundariesMap.value.ne.lat > percrange_ne_lat && precboundariesMap.value.ne.lng > percrange_ne_lng &&
+            precboundariesMap.value.sw.lat < percrange_sw_lat && precboundariesMap.value.sw.lng < percrange_sw_lng) {
+              updatedata = false
+              // console.log('updateMapBoundaries', 'updatedata', updatedata)
+            } else {
+            // updatedata = false
+          }
+        }
+
+
+        if (updatedata) {
+          precboundariesMap.value = boundariesMap.value
+          // console.log('   doSearch in updateMapBoundaries... ', ne, sw)
+          if (autoaggiornaMappaSeMuovi.value) {
+            doSearch()
+          } else {
+            
+          }
+          
+        }
+      }
+    
+    }
+
+    function updateMapZoomOut() {
+      // console.log('updateMapZoomOut')
+      doSearch()
+    }
+
+    function clickButtBar(idbutt: any) {
+      if (idbutt === tools.BUTT_ADDREC) {
+        createNewRecord()
+      }
+    }
+
+    function getLabelAreaMap(conHtml: boolean = true) {
+      if (showMap.value) {
+        if (conHtml) {
+          return '<span class="hint_search">' + translate('grid.intheareamap') + '</span>'          
+        } else {
+          return translate('grid.intheareamap')
+        }
+      
+      }
+
+      return ''
+    }
+
+    function gotoCurrentLocation() {
+      myMapComp.value.gotoCurrentLocation()
+    }
+
+    function showInMap(rec: any) {  
+      visupagedialog.value = false  
+
+      if (!showMap.value) {
+        showMapAtLeast1.value = true
+        showMap.value = true  
+      }
+      
+      if (myMapComp.value && mapInitialized.value) {
+        myMapComp.value.showInMap(rec)
+      }
+    }
+
    created()

    return {
@@ -2533,6 +2650,15 @@ export default defineComponent({
      ifShowMonth,
      showMap,
      clickMarker,
+      updateMapBoundaries,
+      updateMapZoomOut,
+      clickButtBar,
+      showSearchDialog,
+      getLabelAreaMap,
+      myMapComp,
+      gotoCurrentLocation,
+      showInMap,
+      showMapAtLeast1,
    }
  }
 })
--- a/src/components/CGridTableRec/CGridTableRec.vue
+++ b/src/components/CGridTableRec/CGridTableRec.vue
@@ -35,7 +35,11 @@
      <q-space></q-space>
      <div v-if="butt_modif_new" class="row justify-center">
        <q-btn
-          v-if="mytable && !shared_consts.TABLES_FINDER.includes(mytable) && !showMap"
+          v-if="
+            mytable &&
+            !shared_consts.TABLES_FINDER.includes(mytable) &&
+            !showMap
+          "
          rounded
          dense
          size="sm"
@@ -241,13 +245,16 @@
      <div v-if="prop_search || canEdit">
        <div
          v-if="searchList && finder"
-          class="row justify-evenly q-mb-sm q-mx-sm"
+          class="row justify-between q-mb-sm q-mx-sm"
        >
          <q-btn
+            class=""
            dense
-            :label="!showfilter ? $t('grid.openfilter') : $t('grid.closefilter')"
+            :label="
+              !showfilter ? $t('grid.openfilter') : $t('grid.closefilter')
+            "
            color="positive"
-            icon="fas fa-filter"
+            :icon="!showfilter ? 'fas fa-filter' : 'fas fa-arrow-up'"
            @click="showfilter = !showfilter"
            ><q-badge
              v-if="getNumFilterSelected()"
@@ -259,55 +266,31 @@
            </q-badge>
          </q-btn>
          <q-btn
+            v-if="prop_search"
+            class=""
            dense
-            color="orange"
-            icon="fas fa-bell"
-            label="Notifiche"
-            @click="showNotification = !showNotification"
-          ></q-btn>
-        </div>
-        
-        <div v-if="prop_search" :class="'q-mr-sm ' + ($q.screen.lt.sm ? ' full-width ' : '')">
-          <q-input
-            v-model="search"
-            filled
-            dense
-            type="search"
-            debounce="500"
-            :hint="hint"
-            :error-message="noresultLabel"
-            :error="getNumRecFromQuery() === 0 && !startsearch"
-            label="Cerca"
-            v-on:keyup.enter="doSearch"
+            :label="t('grid.search')"
+            color="primary"
+            icon="fas fa-search"
+            @click="showSearchDialog = true"
          >
-            <template v-slot:prepend>
-              <q-spinner-oval v-if="startsearch" color="primary" size="1em" />
-              <q-icon v-else name="search" />
-            </template>
-            <template v-slot:after>
-              <q-select
-                v-if="prop_SortFieldsAvailable.length > 0"
-                :behavior="'menu'"
-                rounded
-                outlined
-                dense
-                v-model="ordinam"
-                :options="prop_SortFieldsAvailable"
-                label="Ordinamento:"
-                emit-value
-                map-options
-                style="min-width: 120px"
-              >
-              </q-select>
-              <q-btn
-                dense
-                label=""
-                color="primary"
-                @click="doSearch"
-                icon="fas fa-search"
-              ></q-btn>
-            </template>
-          </q-input>
+          </q-btn>
+          <q-btn-toggle
+            v-if="shared_consts.TABLES_VISU_MAP.includes(mytable)"
+            v-model="showMap"
+            push
+            glossy
+            dense
+            toggle-color="secondary"
+            :options="[
+              {
+                label: t('grid.showmap'),
+                value: true,
+                icon: 'fas fa-map-marked-alt',
+              },
+              { label: t('grid.showlist'), value: false, icon: 'fas fa-list' },
+            ]"
+          />
        </div>

        <q-space></q-space>
@@ -336,12 +319,14 @@
        </q-select>
      </div>

-      <div class="q-ma-sm">
+      <div v-if="true" class="">
        <div v-if="pagination.rowsNumber === 1 && prop_search">
          {{ pagination.rowsNumber }} elemento trovato
+          <span v-html="getLabelAreaMap()"></span>
        </div>
        <div v-if="pagination.rowsNumber > 1 && prop_search">
          {{ pagination.rowsNumber }} {{ labelElemFind }}
+          <span v-html="getLabelAreaMap()"></span>
        </div>
      </div>

@@ -357,31 +342,21 @@
          v-if="$q.screen.gt.xs"
          v-model="myvertical"
          :val="0"
-          label="Tabella"
+          :label="$t('grid.table')"
        />
      </div>
    </div>

-    <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">
+    <div 
+      v-if="showMapAtLeast1"
+      v-show="showMap">
      <CMapByTable
-        v-if="serverData && serverData.length > 0"
+        ref="myMapComp"
        mytable=""
        :arrcord="serverData"
        @clickMarker="clickMarker"
+        @updateMapBoundaries="updateMapBoundaries"
+        @updateMapZoomOut="updateMapZoomOut"
      >
      </CMapByTable>
    </div>
@@ -869,7 +844,10 @@
            v-if="prop_search || canEdit"
            class="row justify-center vertical-middle"
          >
-            <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
@@ -1159,6 +1137,80 @@
      />
    </q-page-sticky>-->

+    <q-dialog
+      v-model="showSearchDialog"
+      transition-show="slide-up"
+      transition-hide="slide-down"
+      class="q-dialog-fullscreen no-padding-dialog"
+    >
+      <q-card class="dialog_card q-dialog-on-top no-padding q-my-sm">
+        <q-card-section class="no-padding">
+          <q-input
+            :class="'q-mr-sm full-width '"
+            v-model="search"
+            filled
+            autofocus
+            type="search"
+            :hint="
+              (pagination.rowsNumber === 1 && prop_search)
+                ? `${pagination.rowsNumber} ` +
+                  t('grid.found') +
+                  ' ' +
+                  getLabelAreaMap(false)
+                : ((pagination.rowsNumber > 1 && prop_search)
+                ? `${pagination.rowsNumber} ${labelElemFind}` +
+                  ' ' +
+                  getLabelAreaMap(false)
+                : '')
+            "
+            debounce="500"
+            :error-message="noresultLabel"
+            :error="getNumRecFromQuery() === 0 && !startsearch"
+            :label="hint ? hint : $t('grid.search')"
+            v-on:keyup.enter="doSearch"
+          >
+            <template v-slot:prepend>
+              <q-spinner-oval v-if="startsearch" color="primary" size="1em" />
+              <q-icon v-else name="search" />
+            </template>
+            <template v-slot:append>
+              <q-btn
+                v-if="showMap"
+                dense
+                flat
+                text-color="primary"
+                @click="gotoCurrentLocation"
+                icon="fas fa-crosshairs"
+                class="q-ml-sm"
+              ></q-btn>
+            </template>
+            <template v-slot:after>
+              <q-select
+                v-if="prop_SortFieldsAvailable.length > 0"
+                :behavior="'menu'"
+                rounded
+                outlined
+                v-model="ordinam"
+                :options="prop_SortFieldsAvailable"
+                :label="$t('grid.order')"
+                emit-value
+                map-options
+                style="min-width: 120px"
+              >
+              </q-select>
+              <!-- Pulsante per ottenere la posizione GPS -->
+
+              <q-btn
+                label=""
+                color="primary"
+                @click="doSearch"
+                icon="fas fa-search"
+              ></q-btn>
+            </template>
+          </q-input>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
    <q-dialog
      v-model="visupagedialog"
      transition-show="slide-up"
@@ -1194,7 +1246,8 @@
        :table="mytable"
        :prop_myrec="myrecdialog"
        :idRec="myIdRecDialog"
-        :showAnteprima="!$q.screen.lt.sm ? false : showMap"
+        :showAnteprima="false"
+        @showInMap="showInMap"
      >
      </CMyCardService>
      <CMyCardPopup v-else :table="mytable" :prop_myrec="myrecdialog">
--- a/src/components/CMapByTable/CMapByTable.scss
+++ b/src/components/CMapByTable/CMapByTable.scss
@@ -34,3 +34,4 @@
  right: 20px; /* Distanza dal lato destro */
  z-index: 1000; /* Assicurati che sia visibile sopra la mappa */
 }
+
--- a/src/components/CMapByTable/CMapByTable.ts
+++ b/src/components/CMapByTable/CMapByTable.ts
@@ -1,19 +1,23 @@
 import { tools } from '@store/Modules/tools'
 import { useQuasar } from 'quasar'
-import { PropType, defineComponent, onMounted, ref, computed, toRef, watch } from 'vue'
+import { PropType, defineComponent, onMounted, ref, toRaw, computed, toRef, watch, shallowRef } from 'vue'

 import 'leaflet/dist/leaflet.css'
 // @ts-ignore
 import * as L from 'leaflet'
+import '../../utils/leaflet-extensions'; // Importa le estensioni
 import 'leaflet.markercluster/dist/MarkerCluster.css'
 import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
 import 'leaflet.markercluster'

 import { useUserStore } from '@src/store/UserStore'
 import { useGlobalStore } from '@src/store/globalStore'
+import { useI18n } from '@src/boot/i18n'
+import { ICoordGPS } from '@src/model'

 export default defineComponent({
  name: 'CMapByTable',
+  emits: ['clickMarker', 'updateMapBoundaries', 'updateMapZoomOut'],
  props: {
    mytable: {
      type: String,
@@ -27,6 +31,7 @@ export default defineComponent({
  },
  setup(props, { emit }) {
    const $q = useQuasar()
+    const { t } = useI18n()
    const userStore = useUserStore()
    const globalStore = useGlobalStore()

@@ -34,23 +39,31 @@ export default defineComponent({
    const iconHeight = ref(40)
    const zoom = ref(8)

-    const map = ref(<any>null);
+    const map = shallowRef(<any>null);

    const visiblePosition = ref(false)

-    const markers = ref(<any>null);
+    const markers = shallowRef(<any>null);

    const isTrackingLocation = ref(false)

-    const currentMarker = ref<L.Marker | null>(null)
+    const debug = ref(tools.isDevelop())
+
+    const currentMarkerPositionGPS = shallowRef<L.Marker | null>(null)

    const centerCoordinates = ref<{ lat: number; lng: number }>({ lat: 0, lng: 0 });  // 

+    const arrMarkers = ref(<any>[])
+
+    const recordShowed = ref(<any>null)
+    const markerShowed = shallowRef<any>(null)
+    const markerTemporaneo = shallowRef<L.Marker | null>(null)
+
    const mapOptions = ref(<any>{
-      zoomControl: true,      
-      zoomAnimation: true,
+      zoomControl: false,
+      zoomAnimation: false,
      fadeAnimation: true,
-      markerZoomAnimation: false, //true      
+      markerZoomAnimation: true,
    })

    const tileLayerOptions = {
@@ -96,6 +109,10 @@ export default defineComponent({

    const arrcord = toRef(props, 'arrcord')

+    const precZoomLevel = ref(0)
+
+    const debounceTimer = ref(<any>null)
+
    watch(() => visiblePosition.value, () => {
      if (visiblePosition.value === true) {
        getCurrentPosition()
@@ -109,7 +126,7 @@ export default defineComponent({
    }

    function myheight() {
-      return $q.screen.height - 150
+      return $q.screen.height - 220
    }

    const iconUrl = computed(() => {
@@ -169,7 +186,7 @@ export default defineComponent({
      const lng = e.latlng.lng

      // Fai qualcosa con le coordinate, ad esempio stamparle in console
-      console.log(`Latitudine: ${lat}, Longitudine: ${lng}`)
+      // console.log(`Latitudine: ${lat}, Longitudine: ${lng}`)
    }

    function getIconName(myrec: any) {
@@ -180,29 +197,107 @@ export default defineComponent({
      return globalStore.getIconBySector(sectId)
    }

+    function updateBoundaries(updatedata: boolean) {
+      if (map.value) {
+        // Get the boubdaries of the map showed
+        const bounds = map.value.getBounds();
+
+        // tojson
+        tools.setCookie(tools.COOK_MAPBOUNDS + 'ne', tools.objToStr(bounds.getNorthEast()))
+        tools.setCookie(tools.COOK_MAPBOUNDS + 'sw', tools.objToStr(bounds.getSouthWest()))
+
+        // Update Map Boundaries to the Parent
+        emit('updateMapBoundaries', bounds.getNorthEast(), bounds.getSouthWest(), updatedata);
+      }
+    }
+
+    function updateMapZoomOut() {
+      emit('updateMapZoomOut', map.value.getZoom());
+
+    }
+
+    /**
+     * Updates the center coordinates and zoom level of the map, and saves them in cookies.
+     *
+     * @return {void} This function does not return a value.
+     */
+    function onMoveEnd() {
+      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)
+
+      updateBoundaries(true)
+
+      precZoomLevel.value = map.value.getZoom();
+    }
+
+    const onZoomEvent = () => {
+      // Annulla il timer precedente se presente
+      if (debounceTimer.value) {
+        clearTimeout(debounceTimer.value);
+      }
+
+      // Inizia un nuovo timer di 1 secondo
+      debounceTimer.value = setTimeout(() => {
+        const currentZoomLevel = map.value.getZoom();
+
+        if (currentZoomLevel < precZoomLevel.value) {
+          // Aggiorna i dati della mappa
+          updateMapZoomOut();
+
+          // Aggiorna il livello di zoom precedente
+          precZoomLevel.value = currentZoomLevel;
+        }
+
+      }, 500);
+    }
+
+    const onCustomButtonClick = () => {
+      alert("Pulsante personalizzato cliccato!");
+      // Logica aggiuntiva qui
+    };
+
    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, 
+        // 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);
+        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', tileLayerOptions)
+          .addTo(map.value);
+
+        // Aggiunta dei controlli di zoom
+        const zoomControl = L.control.zoom({
+          position: "topright",
+        }).addTo(map.value);
+
+        // Aggiunta di un pulsante personalizzato
+        // @ts-ignore
+        const customButton = L.control({ position: "topright" });
+
+        customButton.onAdd = function () {
+          const button = L.DomUtil.create("button", "custom-zoom-button");
+          button.innerHTML = t('grid.showlist'); // Testo del pulsante
+          button.onclick = onCustomButtonClick; // Gestore evento click
+
+          return button;
+        };
+
+        // customButton.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);
+          onMoveEnd()
        });

+        map.value.on("zoomend", onZoomEvent);
        // @ts-ignore
        markers.value = L.markerClusterGroup();

@@ -210,88 +305,139 @@ export default defineComponent({

        // Assicuriamoci che la mappa sia completamente caricata prima di procedere
        map.value.whenReady(() => {
-          console.log('Mappa inizializzata e pronta');
+          // console.log('Mappa inizializzata e pronta');
          updateMap();
+          precZoomLevel.value = map.value.getZoom()
        });
      }
    }

+    function createSingleMarkerByCoordinates(rec: any) {
+
+      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="" />
+
+        <div class="marker-circle"></div>
+      
+        <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: markerIcon
+
+        }
+      )
+        .bindPopup(() => {
+          let container = L.DomUtil.create('div');
+          let strHTML = `<span class="fake-link">${rec.descr}</span>`
+
+          if (debug.value) {
+            // strHTML += `<br> Lat: ${rec.coordinate_gps.coordinates[1]} <br> Lng: ${rec.coordinate_gps.coordinates[0]}`;
+          }
+
+          container.innerHTML = strHTML
+
+          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()
+          }
+        });
+
+      // Salva l'ID del mio record, per poi poterlo trovare
+      each_marker.mytable = props.mytable
+      each_marker.idRec = rec._id
+
+      // Aggiungi il marker all'array in memoria
+      arrMarkers.value.push(each_marker)
+
+      return each_marker
+
+    }
+
    function updateMap() {
      if (!map.value || !markers.value) return;

      if (map.value) {
-        markers.value.clearLayers();
+        // console.log('updateMap')
+
+        markers.value.clearLayers()
+        arrMarkers.value = []

        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>
+            const each_marker = createSingleMarkerByCoordinates(rec)

-            <!-- 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: 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
        map.value.addLayer(markers.value);
+
+        // console.log('markerShowed', markerShowed.value)
+        if (markerShowed.value) {
+          markerShowed.value.closePopup()
+          const trovatomarker = arrMarkers.value.find((marker: any) => markerShowed.value && (marker.idRec === markerShowed.value.idRec))
+          if (!trovatomarker) {
+            // non presente, quindi lo aggiunge
+            markers.value.addLayer(markerShowed.value);
+          } else {
+            markerShowed.value = trovatomarker
+          }
+          markerShowed.value.openPopup(); // Mostra il popup
+        }
+
+        if (visiblePosition.value && currentMarkerPositionGPS.value) {
+          // Aggiungi un marker per la posizione attuale, se desiderato
+          /*const tempmark = L.marker(
+            [currentMarkerPositionGPS.value.getLatLng().lat, currentMarkerPositionGPS.value.getLatLng().lng],
+            { icon: currentLocationIcon }
+          ).addTo(map.value)
+            .bindPopup('Posizione attuale')
+            // .openPopup();
+
+          currentMarkerPositionGPS.value = tempmark*/
+          markers.value.addLayer(currentMarkerPositionGPS.value);
+        }
+
+        updateBoundaries(false)
      }
    }

@@ -303,38 +449,59 @@ export default defineComponent({
      emit('clickMarker', id)
    }

+    function gotoCurrentLocation() {
+      getCurrentPosition();
+    }
+
+    function flyToCoord(lat: number, lng: number, callback: () => void) {
+      try {
+        map.value.off('moveend', callback)
+
+        if (map.value.getZoom() < 13) {
+          zoom.value = 13;
+        } else {
+          zoom.value = map.value.getZoom()
+        }
+        // Centra la mappa sulla posizione attuale
+        map.value.flyTo([lat, lng], zoom.value, {
+          animate: true,
+          duration: 0.7
+        })
+        // Usa l'evento 'moveend' per sapere quando l'animazione è completata
+        map.value.on('moveend', callback);
+
+      } catch (error) {
+
+      }
+
+    }
+
    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;
+            const lat = position.coords.latitude
+            const lng = position.coords.longitude
+
+            flyToCoord(lat, lng, () => {
+              if (currentMarkerPositionGPS.value) {
+                map.value.removeLayer(currentMarkerPositionGPS.value)
+              }
+
+              // Aggiungi un marker per la posizione attuale, se desiderato
+              currentMarkerPositionGPS.value = L.marker(
+                [lat, lng],
+                { icon: currentLocationIcon }
+              ).addTo(map.value)
+                .bindPopup('Posizione attuale')
+                // .openPopup();
+
+              isTrackingLocation.value = false; // Resetta lo stato di tracciamento
+

-            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);
@@ -347,12 +514,67 @@ export default defineComponent({
    }

    const removeCurrentMarker = () => {
-      if (currentMarker.value) {
-        map.value.removeLayer(currentMarker.value); // Rimuovi il marker dalla mappa
-        currentMarker.value = null; // Resetta il riferimento
+      if (currentMarkerPositionGPS.value) {
+        map.value.removeLayer(currentMarkerPositionGPS.value); // Rimuovi il marker dalla mappa
+        currentMarkerPositionGPS.value = null; // Resetta il riferimento
      }
    }

+    function findMarkerByIdRec(id: any) {
+      const marker = arrMarkers.value.find((marker: any) => {
+        return marker.idRec === id;
+      });
+
+      return marker;
+    }
+
+    function showInMap(rec: any) {
+      // console.log('showInMap', rec)
+
+      // Find if is already in the map
+      let existingMarker = findMarkerByIdRec(rec._id)
+      if (!existingMarker) {
+
+        if (markerTemporaneo.value) {
+          // Rimuovo il marker temporaneo usato in precedenza
+          map.value.removeLayer(markerTemporaneo.value)
+          markerTemporaneo.value = null
+        }
+
+        // Se non la trovo nella mappa, allora inserisco un nuovo marker temporaneo e lo aggiungo alla mappa
+        existingMarker = createSingleMarkerByCoordinates(rec); // Crea un nuovo marker
+        markers.value.addLayer(existingMarker);
+
+        // console.log('***** Added marker TEMPORANEO', existingMarker)
+
+        markerTemporaneo.value = existingMarker
+      }
+
+      if (existingMarker) {
+        const lat = existingMarker.getLatLng().lat
+        const lng = existingMarker.getLatLng().lng
+
+        recordShowed.value = rec
+        markerShowed.value = existingMarker
+
+        // console.log('flyToCoord START ... ', lat, lng)
+
+        // Passa una callback dopo il volo
+        flyToCoord(lat, lng, () => {
+          // console.log('flyToCoord END ... ', lat, lng)
+
+          if (markerShowed.value) {
+            //console.log('openPopup markerShowed', markerShowed.value)
+            if (markerShowed.value.closePopup) {
+              markerShowed.value.openPopup(); // Mostra il popup  
+            }            
+          }
+        });
+      }
+    }
+
+
+
    return {
      mywidth,
      myheight,
@@ -369,6 +591,8 @@ export default defineComponent({
      getCurrentPosition,
      isTrackingLocation,
      visiblePosition,
+      gotoCurrentLocation,
+      showInMap,
    }
  }
 })
--- a/src/components/CMapByTable/CMapByTable.vue
+++ b/src/components/CMapByTable/CMapByTable.vue
@@ -1,19 +1,6 @@
 <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>
--- a/src/components/CMapComuni/CMapComuni.ts
+++ b/src/components/CMapComuni/CMapComuni.ts
@@ -1,6 +1,6 @@
 import { tools } from '@store/Modules/tools'
 import { useQuasar } from 'quasar'
-import { PropType, defineComponent, onMounted, ref, computed, nextTick } from 'vue'
+import { PropType, defineComponent, onMounted, ref, computed, nextTick, shallowRef } from 'vue'

 import 'leaflet/dist/leaflet.css'
 // @ts-ignore
@@ -8,6 +8,7 @@ import * as L from 'leaflet'
 import 'leaflet.markercluster/dist/MarkerCluster.css'
 import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
 import 'leaflet.markercluster'
+import '../../utils/leaflet-extensions'; // Importa le estensioni

 import { useUserStore } from '@src/store/UserStore'
 import { useGlobalStore } from '@src/store/globalStore'
@@ -22,7 +23,7 @@ export default defineComponent({

    const iconWidth = ref(25)
    const iconHeight = ref(40)
-    const map = ref(<any>null)
+    const map = shallowRef(<any>null)
    const zoom = ref(6)
    const center = ref(<any>[42.71, 12.934])
    const arrprovince = ref(<any>[])
--- a/src/components/CMapEditAddressByCoord/CMapEditAddressByCoord.ts
+++ b/src/components/CMapEditAddressByCoord/CMapEditAddressByCoord.ts
@@ -1,12 +1,13 @@
 import { tools } from '@store/Modules/tools'
 import { useQuasar } from 'quasar'
-import { defineComponent, onMounted, onBeforeUnmount, ref, watch, computed, PropType, nextTick } from 'vue'
+import { defineComponent, onMounted, onBeforeUnmount, ref, watch, computed, PropType, nextTick, shallowRef } from 'vue'

 import 'leaflet/dist/leaflet.css'
 import * as L from 'leaflet'
 import 'leaflet.markercluster/dist/MarkerCluster.css'
 import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
 import 'leaflet.markercluster'
+import '../../utils/leaflet-extensions'; // Importa le estensioni

 import { useUserStore } from '@src/store/UserStore'

@@ -40,7 +41,7 @@ export default defineComponent({

    const iconWidth = ref(25)
    const iconHeight = ref(41)
-    const map = ref<L.Map | null>(null)
+    const map = shallowRef<L.Map | null>(null)
    const marker = ref<L.Marker | null>(null)
    const suggestions = ref([]);
    const isMapDialogOpen = ref(false)
@@ -88,7 +89,7 @@ export default defineComponent({
    });


-    watch(() => localCoordinates.value.lng, (newValue) => {
+    watch(() => localCoordinates.value.lat, (newValue) => {
      if (fineLoad.value) {
        modificato.value = true
      }
--- a/src/components/CMapGetCoordinates/CMapGetCoordinates.ts
+++ b/src/components/CMapGetCoordinates/CMapGetCoordinates.ts
@@ -1,12 +1,13 @@
 import { tools } from '@store/Modules/tools'
 import { useQuasar } from 'quasar'
-import { defineComponent, onMounted, ref, watch, computed } from 'vue'
+import { defineComponent, onMounted, ref, shallowRef, watch, computed } from 'vue'

 import 'leaflet/dist/leaflet.css'
 import * as L from 'leaflet'
 import 'leaflet.markercluster/dist/MarkerCluster.css'
 import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
 import 'leaflet.markercluster'
+import '../../utils/leaflet-extensions'; // Importa le estensioni

 import { useUserStore } from '@src/store/UserStore'

@@ -22,7 +23,7 @@ export default defineComponent({

    const iconWidth = ref(25)
    const iconHeight = ref(41)
-    const map = ref<L.Map | null>(null)
+    const map = shallowRef<L.Map | null>(null)
    const marker = ref<L.Marker | null>(null)
    const address = ref('')
    const suggestions = ref([]);
--- a/src/components/CMapUsers/CMapUsers.ts
+++ b/src/components/CMapUsers/CMapUsers.ts
@@ -1,6 +1,6 @@
 import { tools } from '@store/Modules/tools'
 import { useQuasar } from 'quasar'
-import { PropType, defineComponent, onMounted, ref, computed } from 'vue'
+import { PropType, defineComponent, onMounted, ref, shallowRef, computed } from 'vue'

 import 'leaflet/dist/leaflet.css'
 // @ts-ignore
@@ -8,6 +8,7 @@ import * as L from 'leaflet'
 import 'leaflet.markercluster/dist/MarkerCluster.css'
 import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
 import 'leaflet.markercluster'
+import '../../utils/leaflet-extensions'; // Importa le estensioni

 import { useUserStore } from '@src/store/UserStore'

@@ -19,7 +20,7 @@ export default defineComponent({

    const iconWidth = ref(25)
    const iconHeight = ref(40)
-    const map = ref(<any>null)
+    const map = shallowRef(<any>null)
    const zoom = ref(6)
    const arrprovince = ref(<any>[])

--- a/src/components/CMyCardService/CMyCardService.ts
+++ b/src/components/CMyCardService/CMyCardService.ts
@@ -33,6 +33,7 @@ import mixinEvents from '@src/mixins/mixin-events'

 export default defineComponent({
  name: 'CMyCardService',
+  emits: ['showInMap'],
  components: {
    CProfile, CTitleBanner,
    CMyFieldDb, CDateTime, CMyPage, CMyFieldRec, CAccomodation,
@@ -64,7 +65,7 @@ export default defineComponent({
      default: false,
    }
  },
-  setup(props) {
+  setup(props, { emit }) {

    const userStore = useUserStore()
    const calendarStore = useCalendarStore()
@@ -646,6 +647,11 @@ export default defineComponent({
    
    }

+    function showInMap(rec: any) {
+      // close dialo
+      emit('showInMap', rec)
+    }
+
    onMounted(mounted)

    return {
@@ -701,6 +707,7 @@ export default defineComponent({
      cardRef,
      smallHeight,
      toggleShowScheda,
+      showInMap,
    }
  }
 })
--- a/src/components/CMyCardService/CMyCardService.vue
+++ b/src/components/CMyCardService/CMyCardService.vue
@@ -1,9 +1,10 @@
 <template>
-  <div v-if="myrec && myrec._id" :class="($q.screen.lt.sm ? ' fulldiv ' : ' well-positioned-dialog')">
+  <div
+    v-if="myrec && myrec._id"
+    :class="$q.screen.lt.sm ? ' fulldiv ' : ' well-positioned-dialog'"
+  >
    <div
-      :class="
-        'items-start ' + (!isSmall ? ' q-gutter-xs full-height ' : '')
-      "
+      :class="'items-start ' + (!isSmall ? ' q-gutter-xs full-height ' : '')"
    >
      <div class="row">
        <q-toolbar class="bg-white text-black riempi">
@@ -321,7 +322,6 @@
              </div>
            </div>

-
            <q-separator v-if="!isSmall" />

            <q-list style="z-index: 5">
@@ -367,13 +367,6 @@
                  </q-item-label>
                </q-item-section>
              </q-item>
-              <q-item v-if="myrec.nome_attivita">
-                <q-item-section>
-                  <q-item-label class="text-bold text-h7">
-                    {{ myrec.nome_attivita }}
-                  </q-item-label>
-                </q-item-section>
-              </q-item>
              <q-item v-if="myrec.descr">
                <q-item-section>
                  <q-item-label class="text-h7">{{ myrec.descr }}</q-item-label>
@@ -659,6 +652,33 @@
                    }}</q-item-label>
                  </q-item-section>
                </q-item>
+                <q-item
+                  clickable
+                  v-if="myrec.coordinate_gps"
+                >
+                  <q-item-section avatar>
+                    <q-icon color="blue" name="fas fa-crosshairs" />
+                  </q-item-section>
+
+                  <q-item-section>
+                    <q-item-label>
+                      <div v-if="myrec.coordinate_gps.address">
+                        {{ myrec.coordinate_gps.address }}
+                      </div>
+                    </q-item-label>
+                    <q-item-label>
+                      <div v-if="myrec.coordinate_gps.coordinates">
+                        {{ tools.getCoordinatesToShow(myrec.coordinate_gps) }}
+                      </div>
+                      <q-btn
+                        :label="t('attivita.vediinmappa')"
+                        color="primary"
+                        size="sm"
+                        @click="showInMap(myrec)"
+                      />
+                    </q-item-label>
+                  </q-item-section>
+                </q-item>
                <q-item clickable v-if="myrec.link_maplocation">
                  <q-item-section avatar>
                    <q-icon color="blue" name="fas fa-map-marker-alt" />
@@ -934,7 +954,6 @@
                </q-btn>
                <q-btn
                  class="q-mx-xxs q-my-xs"
-
                  rounded
                  :label="$t('reaction.condividi')"
                  text-color="blue"
@@ -949,7 +968,6 @@
                    myrec.contact_telegram
                  "
                  class="q-mx-xxs q-my-xs"
-                  
                  rounded
                  :label="$t('dialog.scrivi')"
                  text-color="primary"
@@ -998,7 +1016,6 @@
            <div v-if="$q.screen.lt.sm" class="row justify-center q-my-xs">
              <q-btn
                rounded
-                                
                :label="$t('dialog.close')"
                color="primary"
                icon="close"
--- a/src/components/CTitlePage/CTitlePage.ts
+++ b/src/components/CTitlePage/CTitlePage.ts
@@ -6,6 +6,7 @@ import { CBarSelection } from '../CBarSelection'
 export default defineComponent({
  name: 'CTitlePage',
  components: {CBarSelection},
+  emits: ['clickButtBar'],
  props: {
    ind: {
      type: Number,
@@ -53,11 +54,16 @@ export default defineComponent({

    onMounted(mount)

+    function clickButtBar(item: any) {
+      emit('clickButtBar', item)
+    }
+
    return {
      mytitle,
      myicon,
      mycolor,
      table,
+      clickButtBar,
    }
  },
 })
--- a/src/components/CTitlePage/CTitlePage.vue
+++ b/src/components/CTitlePage/CTitlePage.vue
@@ -22,6 +22,8 @@
      :mycolor="mycolor"
      :prop_search="false"
      :table="table"
+      @clickButtBar="clickButtBar"
+      :ind="ind"
    >
      <slot />
    </CBarSelection>
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -2037,3 +2037,33 @@ h3 {
  border-radius: 50%;
  opacity: 0.4;
 }
+
+.q-dialog-on-top {
+  align-self: flex-start !important;
+}
+
+.no-padding-dialog .q-dialog__inner {
+  padding: 0 !important; /* Rimuove il padding dal dialog */
+}
+
+.custom-zoom-button {
+  background-color: white;
+  border: 2px solid #007bff; /* Colore del bordo */
+  border-radius: 4px;
+  padding: 5px 10px;
+  cursor: pointer;
+  margin-top: 10px; /* Spaziatura dal bordo superiore */
+  z-index: 1000; /* Assicurati che appaia sopra altri controlli */
+}
+
+.custom-zoom-button:hover {
+  background-color: #007bff; /* Colore di sfondo al passaggio del mouse */
+  color: white; /* Colore del testo al passaggio del mouse */
+}
+
+.barretta-sep {
+    background-color: #dadce0;
+    border-radius: 2px;
+    height: 4px;
+    width: 100%;
+}
--- a/src/db/lang/ws_it.js
+++ b/src/db/lang/ws_it.js
@@ -84,6 +84,7 @@ const msg_website_it = {
    eventodef: 'Evento:',
    prova: 'prova',
    dbop: 'Operazioni',
+    server: 'Server',
    projall: 'Comunitari',
    groups: 'Lista Gruppi',
    projectsShared: 'Condivisi da me',
--- a/src/model/GlobalStore.ts
+++ b/src/model/GlobalStore.ts
@@ -1268,8 +1268,8 @@ export interface IAttivita {

  // INFORMAZIONI:
  tipodiAttivita: ITipoDiAttivita
-  nome_attivita: string
  descr: string
+  note: string
  idSector: number[]

  idCity: number[]
--- a/src/router/routesAdmin.ts
+++ b/src/router/routesAdmin.ts
@@ -42,6 +42,19 @@ function getRoutesAd(site: ISites) {
      submenu: true,
      onlyAdmin: true
    },
+    {
+      active: true,
+      order: 1020,
+      path: '/admin/server',
+      materialIcon: 'event_seat',
+      name: 'pages.server',
+      component: () => import('@/views/admin/server/server.vue'),
+      level_parent: 0.0,
+      level_child: 0.5,
+      inmenu: true,
+      submenu: true,
+      onlyAdmin: true
+    },
    {
      active: true,
      order: 1040,
--- a/src/statics/lang/it.js
+++ b/src/statics/lang/it.js
@@ -14,6 +14,11 @@ const msg_it = {
      csv: 'Esporta Movimenti',
    },
    grid: {
+      found: 'trovato',
+      newrecord: 'Crea',
+      table: 'Tabella',
+      search: 'Cerca',
+      order: 'Ordinamento:',
      showlist: 'Lista',
      showmap: 'Mappa',
      editvalues: 'Modifica Valori',
@@ -24,8 +29,10 @@ const msg_it = {
      nodata: 'Nessun Dato',
      showfilters: 'Filtri',
      hidefilters: 'Nascondi Filtri',
-      openfilter: 'Apri Filtri',
-      closefilter: 'Chiudi Filtri',
+      openfilter: 'Filtri',
+      closefilter: 'Filtri',
+      intheareamap: 'nell\'area visibile della mappa',
+      nosearchfound: 'Nessun risultato',
    },
    gallery: {
      author_username: 'Utente',
@@ -1812,7 +1819,8 @@ const msg_it = {
    },
    attivita: {
      tipodiattivita: 'Tipologia',
-      nome_attivita: 'Nome Attività',
+      descr: 'Nome Attività',
+      note: 'Descrizione Attività',
      email: 'Email',
      cell_phone: 'Telefono',
      whatsapp: 'Whatsapp',
@@ -1821,7 +1829,7 @@ const msg_it = {
      coordinate_gps: 'Coordinate GPS',
      logo: 'Logo',
      foto: 'Foto',
-
+      vediinmappa: 'Vedi in Mappa',
    },

  },
--- a/src/store/Modules/fieldsTable.ts
+++ b/src/store/Modules/fieldsTable.ts
@@ -1212,16 +1212,9 @@ export const colAttivita = [
    // inline: true,
    // typeobj: 'radio',
  }),
-  AddCol({
-    name: 'nome_attivita',
-    label_trans: 'attivita.nome_attivita',
-    fieldtype: costanti.FieldType.string,
-    maxlength: 100,
-    required: true,
-  }),
  AddCol({
    name: 'descr',
-    label_trans: 'proj.shortdescr',
+    label_trans: 'attivita.descr',
    fieldtype: costanti.FieldType.string,
    maxlength: 300,
    required: true,
@@ -1254,7 +1247,7 @@ export const colAttivita = [
  }),

  AddCol({
-    name: 'note', label_trans: 'proj.descrapprof', fieldtype: costanti.FieldType.html,
+    name: 'note', label_trans: 'attivita.note', fieldtype: costanti.FieldType.html,
    showWhen: costanti.showWhen.NewRec + costanti.showWhen.InEdit + costanti.showWhen.InView_OnlyifExist,
    titlepopupedit: 'Dettagli', field_extra1: 'username', subfield_extra1: '',
    required: false,
@@ -4397,14 +4390,14 @@ export const fieldsTable = {
    },
    {
      value: 'skills',
-      label: 'Competenze',
+      label: 'Sottocategorie Competenze',
      columns: colSkills,
      colkey: '_id',
      collabel: 'descr',
    },
    {
      value: 'goods',
-      label: 'Beni',
+      label: 'Sottocategorie Beni',
      columns: colGoods,
      colkey: '_id',
      collabel: 'descr',
--- a/src/store/Modules/geocodingmap.ts
+++ b/src/store/Modules/geocodingmap.ts
@@ -1,3 +1,5 @@
+import { tools } from "./tools";
+
 // geocoding.ts
 export const getCityFromCoordinates = async (lat: number, lon: number): Promise<string | null> => {
    const url = `https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lon}&format=json`;
@@ -17,3 +19,12 @@ export const getCityFromCoordinates = async (lat: number, lon: number): Promise<
    }
 };

+export const getMapBoundaries = (): any => {
+    const ne = tools.getCookie(tools.COOK_MAPBOUNDS + 'ne', '{"lat": 20, "lng": 30}', false)
+    const sw = tools.getCookie(tools.COOK_MAPBOUNDS + 'sw', '{"lat": 25, "lng": 35}', false)
+
+    // console.log('getMapBoundaries', ne, sw)
+
+    return { ne, sw }
+};
+    
--- a/src/store/Modules/tools.ts
+++ b/src/store/Modules/tools.ts
@@ -74,12 +74,15 @@ export const tools = {
  COOK_MAP_CENTER_LONG: 'MAP_LONG',
  COOK_MAP_ZOOM: 'MAP_Z',
  COOK_CATEGORIA: 'CATEG',
+  COOK_MAPBOUNDS: 'MAP-B',

  FRIENDS_SEARCH: 'FR_SE',
  GROUP_SEARCH: 'GR_SE',
  CIRCUIT_SEARCH: 'CI_SE',
  CIRCUIT_USE: 'CIR_U',

+  BUTT_ADDREC: 1,
+
  getprefCountries: ['it', 'es', 'us'],

  APORTADOR_NONE: '------',
@@ -2148,9 +2151,10 @@ export const tools = {
  },

  strToObj(mystr: string): any {
-    if (mystr)
+    if (mystr) {
+      mystr = decodeURIComponent(mystr)
      return JSON.parse(mystr)
-    else
+    } else
      return null
  },

@@ -4407,6 +4411,13 @@ export const tools = {
  getvers() {
    return process.env.APP_VERSION
  },
+  getWssUrl(): string | URL {
+    let myurl = process.env.APP_URL!
+    if (myurl)
+      return myurl.replace(/(https?:\/\/[^:]+):\d+/, `$1:3000`).replace(/^http/, 'wss');
+    else
+      return ''
+  },
  getheaders() {
    const userStore = useUserStore()
    return [{ name: 'x-auth', value: userStore.x_auth_token }, { name: 'x-refrtok', value: userStore.refreshToken }]
@@ -8709,6 +8720,21 @@ export const tools = {
      console.error('Errore durante la conversione:', error);
      return 0
    }
+  },
+
+  getLabelAddrec(ind: any) {
+    return (ind >= 0) ? translate('grid.newrecord') + ` ` + costanti.MAINCARDS[ind].strsingolo : ''
+  },
+
+  getCoordinatesToShow(coordinate_gps: any) {
+
+    if (coordinate_gps) {
+      if (coordinate_gps.coordinates) {
+        const lng = coordinate_gps.coordinates[0]
+        const lat = coordinate_gps.coordinates[1]
+        return `Coordinate: ${lng}, Lat: ${lat}`
+      }
+    }
  }

  // FINE !
--- a/src/store/globalStore.ts
+++ b/src/store/globalStore.ts
@@ -2140,6 +2140,17 @@ export const useGlobalStore = defineStore('GlobalStore', {
      } else {
        return 'fas fa-home'
      }
-    }
+    },
+
+    async execScript(paramquery: any) {
+      return Api.SendReq('/admin/exec', 'POST', paramquery)
+        .then((res) => {
+          return res.data
+        }).catch((error) => {
+          return false
+        })
+    },
+
+
  }
 })
--- a/src/utils/leaflet-extensions.ts
+++ b/src/utils/leaflet-extensions.ts
@@ -0,0 +1,16 @@
+import L from 'leaflet';
+
+// Estendi il prototipo del marker
+L.Marker.prototype._animateZoom = function (opt: { zoom: number; center: L.LatLng }) {
+  // Assicurati che _map esista
+  if (!this._map) {
+    return;
+  }
+  
+
+  // Calcola la nuova posizione del marker
+  const pos = this._map._latLngToNewLayerPoint(this._latlng, opt.zoom, opt.center).round();
+  
+  // Imposta la posizione del marker
+  this._setPos(pos);
+};
--- a/src/views/admin/dbop/dbop.ts
+++ b/src/views/admin/dbop/dbop.ts
@@ -104,6 +104,8 @@ export default defineComponent({
      defpersmax,
      circuitId,
      circuitStore,
+      incaricamento,
+      ris,
    }
  },
 })
--- a/src/views/admin/dbop/dbop.vue
+++ b/src/views/admin/dbop/dbop.vue
@@ -575,6 +575,8 @@
      <br />
    </div>

+    <q-spinner v-if="incaricamento" color="primary" size="3em" :thickness="2" />
+
    <q-field stack-label dense>
      <template v-slot:control>
        <div class="self-center full-width no-outline text-center" tabindex="0">
@@ -705,9 +707,9 @@
    ></q-btn>
    <br />
  </div>
-    <br />
-    <br />
-    <br />
+  <br />
+  <br />
+  <br />
 </template>
 <script lang="ts" src="./dbop.ts">
 </script>
--- a/src/views/admin/server/index.ts
+++ b/src/views/admin/server/index.ts
@@ -0,0 +1 @@
+export {default as server} from './server.vue'
--- a/src/views/admin/server/server.scss
+++ b/src/views/admin/server/server.scss
@@ -0,0 +1,43 @@
+$button-margin: 5px;
+
+.button-container {
+    margin: $button-margin;
+    text-transform: none;
+}
+
+.container {
+    position: relative;
+    height: 45vh;
+    /* Per riempire tutto lo schermo */
+}
+
+.scroll-area {
+    position: absolute;
+    bottom: 0;
+    /* Posiziona l'area di scorrimento in basso */
+    left: 0;
+    /* Allinea a sinistra */
+    width: 100%;
+    /* Larghezza al 100% */
+    height: 340px;
+    /* Imposta l'altezza desiderata */
+    max-width: 800px;
+    /* Imposta la larghezza massima desiderata */
+    border: 1px solid #ccc;
+    /* Opzionale: per aggiungere un bordo */
+    background: #fff;
+    /* Sfondo bianco */
+    overflow-y: auto;
+    /* Abilita lo scorrimento verticale */
+}
+
+.custom-field {
+    height: 35px;
+    /* Imposta l'altezza fissa a 30px */
+    overflow: hidden;
+    /* Nasconde ciò che esce dai limiti del campo */
+    text-overflow: ellipsis;
+    /* Mostra i puntini di sospensione se il testo è troppo lungo (opzionale) */
+    white-space: nowrap;
+    /* Impedisce il wrapping della riga (opzionale) */
+}
--- a/src/views/admin/server/server.ts
+++ b/src/views/admin/server/server.ts
@@ -0,0 +1,286 @@
+import { defineComponent, onMounted, ref, watch, onUnmounted, nextTick } from 'vue'
+
+import { CTitleBanner } from '../../../components/CTitleBanner'
+import { CDateTime } from '../../../components/CDateTime'
+import { CMyFieldDb } from '../../../components/CMyFieldDb'
+import { useQuasar } from 'quasar'
+import { useI18n } from '@/boot/i18n'
+import { useUserStore } from '@store/UserStore'
+import { useGlobalStore } from '@store/globalStore'
+import { useCircuitStore } from '@store/CircuitStore'
+import { tools } from '@store/Modules/tools'
+import { costanti } from '@costanti'
+import { shared_consts } from '@src/common/shared_vuejs'
+
+
+export default defineComponent({
+  name: 'server',
+  components: { CTitleBanner, CDateTime, CMyFieldDb },
+  props: {},
+  setup() {
+    const $q = useQuasar()
+    const { t } = useI18n()
+    const circuitStore = useCircuitStore()
+
+    const messages = ref('')
+    const input = ref('')
+    const scriptName = ref('')
+    const inputRequired = ref(false)
+    const inputPrompt = ref('')
+    const statusWs = ref('')
+
+    let ws: any = null;
+
+    const ris = ref('')
+    const riga = ref(0)
+    const numpersone = ref(7)
+    const date_start = ref(new Date())
+    const col = ref(0)
+    const placca = ref('')
+    const valmin = ref(200)
+    const circuitId = ref('')
+    const valmax = ref(400)
+    const defmin = ref(shared_consts.CIRCUIT_PARAMS.SCOPERTO_MIN_GRP)
+    const defmax = ref(shared_consts.CIRCUIT_PARAMS.SCOPERTO_MAX_GRP)
+    const defpersmin = ref(100)
+    const defpersmax = ref(200)
+    const search_username = ref('')
+    const replace_username = ref('')
+    const incaricamento = ref(false)
+
+    const myarrscript = ref(<any>[])
+    const myarroptionsdir = ref(<any>[])
+    const myarrdir = ref(<any>[])
+    const mydir = ref(<string>'')
+
+    const scrollArea = ref(<any>null)
+
+    const globalStore = useGlobalStore()
+
+    watch(() => mydir.value, async (to: any, from: any) => {
+      // ...
+
+      // console.log('Watching ' + mydir.value)
+
+      myarrscript.value = []
+
+      if (mydir.value)
+        myarrscript.value = await getArrayByScript('ls "admin_scripts/' + mydir.value + '/"', 'sh')
+
+    })
+
+    watch(() => messages.value, async (to: any, from: any) => {
+      await nextTick(); // Aspetta che il DOM si aggiorni
+      scrollToBottom();
+    });
+
+
+    async function eseguiScriptSenzaConferma(script: string, ritornaout: boolean, dir: string, listafiles: boolean, extfiles: string, withinput: boolean) {
+
+      // console.log('eseguiScriptSenzaConferma ' + script)
+
+      const mydata = {
+        script,
+        dir,
+        tokcheck: "php8.1_version_762321HSD121nJDokq@?!aFS.tar.gz",
+        listafiles,
+        extfiles,
+        withinput
+      }
+
+      const risfunz = await globalStore.execScript({ mydata })
+
+      if (ritornaout) {
+        if (listafiles) {
+          return risfunz.arrout
+        } else {
+          return risfunz.stdout
+        }
+
+      } else {
+        return risfunz
+      }
+
+    }
+
+    async function getArrayByScript(script: string, extfiles: string) {
+      let mystr = 'admin_scripts/'
+      if (mydir.value) {
+        mystr += mydir.value
+      }
+      return await eseguiScriptSenzaConferma(script, true, mystr, true, extfiles, false)
+
+
+    }
+
+    async function mounted() {
+      myarrdir.value = await getArrayByScript('cd admin_scripts; ls -d */', '')
+
+      myarroptionsdir.value = []
+
+      if (myarrdir.value) {
+        for (let i = 0; i < myarrdir.value.length; i++) {
+          const opt = { label: myarrdir.value[i].label, value: myarrdir.value[i].value }
+          myarroptionsdir.value.push(opt)
+        }
+
+      }
+
+      if (myarrdir.value && myarrdir.value.length > 0) {
+        mydir.value = myarrdir.value[0].value
+      }
+
+      connectWebSocket()
+
+      scrollToBottom()
+
+    }
+
+    const scrollToBottom = () => {
+      nextTick(() => {
+        if (scrollArea.value) {
+          const el = scrollArea.value.$el;
+
+          let scrollHeight = el.scrollHeight
+
+          if (el) {
+            // Use el.scrollIntoView() to instantly scroll to the element
+            scrollArea.value.setScrollPosition('vertical', 10000)
+          }
+        }
+      })
+    };
+
+    onUnmounted(() => {
+      if (ws) {
+        ws.close();
+        statusWs.value = 'CLOSE';
+      }
+    });
+
+    function EseguiScript(script: string) {
+      const userStore = useUserStore()
+
+      $q.dialog({
+        message: t('dialog.continue') + ' ' + script + ' ?',
+        ok: {
+          label: t('dialog.yes'),
+          push: true,
+        },
+        cancel: {
+          label: t('dialog.cancel'),
+        },
+        title: 'Funzione:',
+      }).onOk(async () => {
+
+        incaricamento.value = true
+        $q.loading.show({ message: t('otherpages.update') })
+
+        const risfunz = await eseguiScriptSenzaConferma(script, false, '', false, '', true)
+
+        $q.loading.hide()
+
+        // await globalStore.loadSite()
+
+        incaricamento.value = false
+
+        console.log('EseguiScript', risfunz)
+
+        //write the string of the time now
+        let timenowstr = '<span style="font-style: italic; color: gray;">✅ Eseguito alle ' + tools.getstrTimeAll(Date.now()) + ' -> ' + '</span><br>'
+
+
+        if (risfunz.stderr)
+          ris.value = timenowstr + '<span style="color: red;">' + 'ERRORE: ' + risfunz.stderr + '</span><br>' + ris.value
+        if (risfunz.stdout)
+          ris.value = timenowstr + risfunz.stdout + '<br>' + ris.value
+
+      })
+    }
+
+    const connectWebSocket = () => {
+      let myurlws = tools.getWssUrl()
+      ws = new WebSocket(myurlws)
+
+      const input = ref('');
+
+      console.log('connectWebSocket ... ' + myurlws)
+
+
+      ws.onmessage = (event: any) => {
+        const data = JSON.parse(event.data);
+        if (data.type === 'output' || data.type === 'error') {
+          messages.value += data.data;
+          scrollToBottom()
+        } else if (data.type === 'input_required') {
+          inputRequired.value = true;
+          inputPrompt.value = data.prompt;
+        } else if (data.type === 'close') {
+          messages.value += '\n' + data.data
+        }
+      };
+
+      ws.onclose = () => {
+        statusWs.value = 'CLOSE';
+        messages.value += '\nConnessione chiusa. Riconnessione...'
+        setTimeout(connectWebSocket, 5000);
+      };
+    };
+
+    const startScript = (scriptName: string) => {
+      if (ws && ws.readyState === WebSocket.OPEN && scriptName) {
+        // ('Start Script ', ws)
+        statusWs.value = 'OPEN'
+        // messages.value = '' // Pulisce i messaggi precedenti
+        inputRequired.value = false;
+
+        let timenowstr = '<br><span style="font-style: italic; color: gray;">✅ Eseguito alle ' + tools.getstrTimeAll(Date.now()) + ' -> ' + '</span><br>'
+        messages.value += timenowstr
+
+        ws.send(JSON.stringify({ type: 'start_script', scriptName, dir: mydir.value }));
+      }
+    };
+
+    const sendInput = () => {
+      if (ws && ws.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify({ type: 'input', data: input.value }));
+        // messages.value.push(input.value + '\n')
+        input.value = '';
+        inputRequired.value = false;
+      }
+    };
+
+    onMounted(mounted)
+
+    return {
+      EseguiScript,
+      tools,
+      costanti,
+      search_username,
+      replace_username,
+      valmin,
+      valmax,
+      defmin,
+      defmax,
+      defpersmin,
+      defpersmax,
+      circuitId,
+      circuitStore,
+      incaricamento,
+      ris,
+      myarrscript,
+      mydir,
+      myarrdir,
+      myarroptionsdir,
+      messages,
+      input,
+      scriptName,
+      startScript,
+      sendInput,
+      inputRequired,
+      inputPrompt,
+      statusWs,
+      scrollArea,
+    }
+  },
+})
--- a/src/views/admin/server/server.vue
+++ b/src/views/admin/server/server.vue
@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <CTitleBanner title="Operazioni sul Server:"></CTitleBanner>
+
+    <q-separator></q-separator>
+
+    <div
+      class="q-gutter-sm q-list--bordered center_img"
+      style="max-width: 600px"
+    >
+      <q-btn-toggle
+        v-model="mydir"
+        v-if="myarroptionsdir"
+        class="my-custom-toggle"
+        no-caps
+        rounded
+        unelevated
+        toggle-color="primary"
+        color="white"
+        text-color="primary"
+        :options="myarroptionsdir"
+      />
+
+      <q-separator></q-separator>
+      <br />
+
+      <div class="q-ma-sm button-container">
+        <div class="" v-for="(script, index) in myarrscript" :key="index">
+          <q-btn
+            class=""
+            :label="script.label"
+            color="primary"
+            @click="
+              EseguiScript(
+                `admin_scripts/${mydir.replace(/ /g, '\\ ')}/${script.value}`
+              )
+            "
+          >
+          </q-btn>
+          <q-btn
+            class=""
+            :label="'SOCK: ' + script.label"
+            color="positive"
+            @click="
+              startScript(
+                `admin_scripts/${mydir.replace(/ /g, '\\ ')}/${script.value}`
+              )
+            "
+          >
+          </q-btn>
+          <q-field
+            v-if="script.description"
+            class="col-8 custom-field"
+            outlined
+            color="blue-6"
+          >
+            {{ script.description }}
+          </q-field>
+        </div>
+        <br />
+      </div>
+    </div>
+    <div>
+      <div :class="statusWs === 'OPEN' ? 'bg-green' : 'bg-red'">
+        STATO WS: {{ statusWs }}
+      </div>
+
+      <q-btn v-if="ris" label="Svuota" @click="ris = ''"></q-btn>
+      <q-btn v-if="messages" label="Svuota" @click="messages = ''"></q-btn>
+    </div>
+
+    <q-spinner v-if="incaricamento" color="primary" size="3em" :thickness="2" />
+
+    <div>
+      <!--<input v-model="scriptName" placeholder="Nome dello script" />
+      <button @click="startScript">Avvia Script</button>-->
+
+      <div v-if="messages" class="container">
+        <q-scroll-area ref="scrollArea" class="scroll-area">
+          <pre v-html="messages"></pre>
+        </q-scroll-area>
+      </div>
+
+      <div v-if="inputRequired">
+        <input
+          v-model="input"
+          @keyup.enter="sendInput"
+          :placeholder="inputPrompt"
+          :type="
+            inputPrompt.toLowerCase().includes('password') ? 'password' : 'text'
+          "
+        />
+        <button @click="sendInput">Invia</button>
+      </div>
+    </div>
+
+    <q-field v-if="messages === ''" stack-label dense>
+      <template v-slot:control>
+        <div class="full-width no-outline" tabindex="0">
+          RISULTATO:<br />
+          <pre v-html="ris"></pre>
+        </div>
+      </template>
+    </q-field>
+  </div>
+</template>
+    
+  
+<script lang="ts" src="./server.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './server';
+</style>
--- a/yarn.lock
+++ b/yarn.lock
@@ -1738,6 +1738,16 @@
    globby "^11.0.0"
    read-yaml-file "^1.1.0"

+"@mapbox/corslite@0.0.7":
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/@mapbox/corslite/-/corslite-0.0.7.tgz#29f5b6a188ba946e514bdf0b6401ed4fbe13a39e"
+  integrity sha512-w/uS474VFjmqQ7fFWIMZINQM1BAQxDLuoJaZZIPES1BmeYpCtlh9MtbFxKGGDAsfvut8/HircIsVvEYRjQ+iMg==
+
+"@mapbox/polyline@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@mapbox/polyline/-/polyline-0.2.0.tgz#6e25980744aa22331f94b645a542c02d3fcfee97"
+  integrity sha512-GCddO0iw6AzOQqZgBmjEQI9Pgo40/yRgkTkikGctE01kNBN0ThWYuAnTD+hRWrAWMV6QJ0rNm4m8DAsaAXE7Pg==
+
 "@mischnic/json-sourcemap@^0.1.0":
  version "0.1.1"
  resolved "https://registry.yarnpkg.com/@mischnic/json-sourcemap/-/json-sourcemap-0.1.1.tgz#0ef9b015a8f575dd9a8720d9a6b4dbc988425906"
@@ -9720,6 +9730,15 @@ lazystream@^1.0.0:
  dependencies:
    readable-stream "^2.0.5"

+leaflet-routing-machine@^3.2.12:
+  version "3.2.12"
+  resolved "https://registry.yarnpkg.com/leaflet-routing-machine/-/leaflet-routing-machine-3.2.12.tgz#9e4aef008321b0227cf894d829c3b4c1f13e4e13"
+  integrity sha512-HLde58G1YtD9xSIzZavJ6BPABZaV1hHeGst8ouhzuxmSC3s32NVtADT+njbIUMW1maHRCrsgTk/E4hz5QH7FrA==
+  dependencies:
+    "@mapbox/corslite" "0.0.7"
+    "@mapbox/polyline" "^0.2.0"
+    osrm-text-instructions "^0.13.2"
+
 leaflet.markercluster@^1.5.3:
  version "1.5.3"
  resolved "https://registry.yarnpkg.com/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz#9cdb52a4eab92671832e1ef9899669e80efc4056"
@@ -11436,6 +11455,11 @@ os-tmpdir@~1.0.2:
  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
  integrity sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==

+osrm-text-instructions@^0.13.2:
+  version "0.13.4"
+  resolved "https://registry.yarnpkg.com/osrm-text-instructions/-/osrm-text-instructions-0.13.4.tgz#78bedabd84cbcabce9c9fd0fbb6b0fd9f06c7f9f"
+  integrity sha512-ge4ZTIetMQKAHKq2MwWf83ntzdJN20ndRKRaVNoZ3SkDkBNO99Qddz7r6+hrVx38I+ih6Rk5T1yslczAB6Q9Pg==
+
 outdent@^0.5.0:
  version "0.5.0"
  resolved "https://registry.yarnpkg.com/outdent/-/outdent-0.5.0.tgz#9e10982fdc41492bb473ad13840d22f9655be2ff"
				`@@ -0,0 +1 @@`
				`export {default as server} from './server.vue'`