- attivita
- gestione degli script sul server - creato websocket per interagire con gli script del server.
This commit is contained in:
@@ -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,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -34,3 +34,4 @@
|
||||
right: 20px; /* Distanza dal lato destro */
|
||||
z-index: 1000; /* Assicurati che sia visibile sopra la mappa */
|
||||
}
|
||||
|
||||
|
||||
@@ -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
|
||||
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>
|
||||
|
||||
<!-- Aggiungi l'icona aggiuntiva al centro -->
|
||||
<div class="marker-mini-icon ${getIconName(rec)}"></div>
|
||||
</div> `;
|
||||
const each_marker = createSingleMarkerByCoordinates(rec)
|
||||
|
||||
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,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>[])
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
@@ -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([]);
|
||||
|
||||
@@ -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>[])
|
||||
|
||||
|
||||
@@ -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,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -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>
|
||||
@@ -637,8 +630,8 @@
|
||||
myrec.mycities[0].comune
|
||||
"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon color="amber" name="fas fa-map-marker-alt" />
|
||||
<q-item-section avatar>
|
||||
<q-icon color="amber" name="fas fa-map-marker-alt" />
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<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"
|
||||
@@ -967,7 +985,7 @@
|
||||
"
|
||||
/>
|
||||
<q-btn
|
||||
v-if="table === shared_consts.TABLES_MYBACHECAS"
|
||||
v-if="table === shared_consts.TABLES_MYBACHECAS"
|
||||
rounded
|
||||
:color="
|
||||
calendarStore.isPartecipero(myrec._id, table)
|
||||
@@ -983,7 +1001,7 @@
|
||||
@click="EditBookEvent(true)"
|
||||
>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
<q-btn
|
||||
rounded
|
||||
outline
|
||||
class="q-ma-sm"
|
||||
@@ -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"
|
||||
|
||||
@@ -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,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
@@ -22,6 +22,8 @@
|
||||
:mycolor="mycolor"
|
||||
:prop_search="false"
|
||||
:table="table"
|
||||
@clickButtBar="clickButtBar"
|
||||
:ind="ind"
|
||||
>
|
||||
<slot />
|
||||
</CBarSelection>
|
||||
|
||||
Reference in New Issue
Block a user