diff --git a/.env.development b/.env.development index d30ec7e5..9ab77409 100755 --- a/.env.development +++ b/.env.development @@ -26,4 +26,4 @@ TELEGRAM_SUPPORT="" PROJECT_ID_MAIN="5cc0a13fe5c9d156728f400a" TEST_CELL="" ISTEST=1 -INLOCALE=1 +INLOCALE=1 \ No newline at end of file diff --git a/_ALL_SITES/abitaregliiblei.it/db/lang/ws_it.js b/_ALL_SITES/abitaregliiblei.it/db/lang/ws_it.js index c7366e95..7bd32da7 100755 --- 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', diff --git a/package.json b/package.json index 963be38d..4e1f3e15 100755 --- 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", diff --git a/src/common/shared_vuejs.ts b/src/common/shared_vuejs.ts index 49a1f887..82a5d5ef 100755 --- 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); diff --git a/src/components/CBarSelection/CBarSelection.ts b/src/components/CBarSelection/CBarSelection.ts index 48fa725a..1a796305 100755 --- 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, } } }) diff --git a/src/components/CBarSelection/CBarSelection.vue b/src/components/CBarSelection/CBarSelection.vue index dc84c4e5..a15ffb8e 100755 --- a/src/components/CBarSelection/CBarSelection.vue +++ b/src/components/CBarSelection/CBarSelection.vue @@ -15,9 +15,7 @@ > -
+
-
+
+
+ + +
+ + + + + + + + + + + diff --git a/src/components/CMapByTable/CMapByTable.scss b/src/components/CMapByTable/CMapByTable.scss index e1e961bd..2611833e 100755 --- 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 */ } + diff --git a/src/components/CMapByTable/CMapByTable.ts b/src/components/CMapByTable/CMapByTable.ts index 43f399d2..59969230 100755 --- 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(null); + const map = shallowRef(null); const visiblePosition = ref(false) - const markers = ref(null); + const markers = shallowRef(null); const isTrackingLocation = ref(false) - const currentMarker = ref(null) + const debug = ref(tools.isDevelop()) + + const currentMarkerPositionGPS = shallowRef(null) const centerCoordinates = ref<{ lat: number; lng: number }>({ lat: 0, lng: 0 }); // + const arrMarkers = ref([]) + + const recordShowed = ref(null) + const markerShowed = shallowRef(null) + const markerTemporaneo = shallowRef(null) + const mapOptions = ref({ - 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(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 = ` +
+ Shadow + + +
+ +
+
`; + + 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 = `${rec.descr}` + + if (debug.value) { + // strHTML += `
Lat: ${rec.coordinate_gps.coordinates[1]}
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 = ` -
- Shadow - ${name} -
- - -
-
`; + 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 = ` - ${rec.descr} - `; - - 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, } } }) diff --git a/src/components/CMapByTable/CMapByTable.vue b/src/components/CMapByTable/CMapByTable.vue index 780367fc..184f9c9d 100755 --- a/src/components/CMapByTable/CMapByTable.vue +++ b/src/components/CMapByTable/CMapByTable.vue @@ -1,19 +1,6 @@ diff --git a/src/components/CMapComuni/CMapComuni.ts b/src/components/CMapComuni/CMapComuni.ts index 9a084208..76607fff 100755 --- 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(null) + const map = shallowRef(null) const zoom = ref(6) const center = ref([42.71, 12.934]) const arrprovince = ref([]) diff --git a/src/components/CMapEditAddressByCoord/CMapEditAddressByCoord.ts b/src/components/CMapEditAddressByCoord/CMapEditAddressByCoord.ts index 437783cf..9f021f1b 100755 --- 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(null) + const map = shallowRef(null) const marker = ref(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 } diff --git a/src/components/CMapGetCoordinates/CMapGetCoordinates.ts b/src/components/CMapGetCoordinates/CMapGetCoordinates.ts index 25ad7bf8..c25649d3 100755 --- 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(null) + const map = shallowRef(null) const marker = ref(null) const address = ref('') const suggestions = ref([]); diff --git a/src/components/CMapUsers/CMapUsers.ts b/src/components/CMapUsers/CMapUsers.ts index d6c22300..7889a6c5 100755 --- 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(null) + const map = shallowRef(null) const zoom = ref(6) const arrprovince = ref([]) diff --git a/src/components/CMyCardService/CMyCardService.ts b/src/components/CMyCardService/CMyCardService.ts index 65b66be2..c4eb4bd8 100644 --- 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, } } }) diff --git a/src/components/CMyCardService/CMyCardService.vue b/src/components/CMyCardService/CMyCardService.vue index 09557539..ab526e45 100644 --- a/src/components/CMyCardService/CMyCardService.vue +++ b/src/components/CMyCardService/CMyCardService.vue @@ -1,9 +1,10 @@