- 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/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">