diff --git a/src/components/FilterComponent.vue b/src/components/FilterComponent.vue index 511ff04..1903c45 100644 --- a/src/components/FilterComponent.vue +++ b/src/components/FilterComponent.vue @@ -109,6 +109,8 @@ export default { const minDateCET = minDate.value ? DateTime.fromJSDate(minDate.value).setZone('Europe/Paris').toFormat('yyyy-MM-dd\'T\'HH:mm:ss') : null; const maxDateCET = maxDate.value ? DateTime.fromJSDate(maxDate.value).setZone('Europe/Paris').toFormat('yyyy-MM-dd\'T\'HH:mm:ss') : null; + + vespaStore.applyFilters({ municipalities: selectedMunicipalities.value.length > 0 ? selectedMunicipalities.value : [], provinces: selectedProvinces.value.length > 0 ? selectedProvinces.value : [], @@ -119,6 +121,7 @@ export default { max_observation_date: maxDateCET, visible: visibleActief.value }); + }, 300); const toggleMenu1 = () => { @@ -153,9 +156,30 @@ export default { watch([selectedMunicipalities, selectedProvinces, selectedNestType, selectedNestStatus, anbAreasActief, selectedObservationStart, selectedObservationEnd, visibleActief], () => { emitFilterUpdate(); - }, { deep: true }); + }, { deep: true}); + + watch(() => vespaStore.filters, (newFilters, oldFilters) => { + const hasChanged = JSON.stringify(newFilters) !== JSON.stringify(oldFilters); + + if (hasChanged) { + selectedMunicipalities.value = newFilters.municipalities || []; + selectedProvinces.value = newFilters.provinces || []; + anbAreasActief.value = newFilters.anbAreasActief || null; + selectedNestType.value = newFilters.nestType || []; + selectedNestStatus.value = newFilters.nestStatus || []; + minDate.value = newFilters.min_observation_date ? new Date(newFilters.min_observation_date) : null; + maxDate.value = newFilters.max_observation_date ? new Date(newFilters.max_observation_date) : null; + } + }, { immediate: true, deep: true }); onMounted(async () => { + selectedMunicipalities.value = vespaStore.filters.municipalities || []; + selectedProvinces.value = vespaStore.filters.provinces || []; + anbAreasActief.value = vespaStore.filters.anbAreasActief; + selectedNestType.value = vespaStore.filters.nestType || []; + selectedNestStatus.value = vespaStore.filters.nestStatus || []; + minDate.value = vespaStore.filters.min_observation_date ? new Date(vespaStore.filters.min_observation_date) : new Date(new Date().getFullYear(), 3, 1); + maxDate.value = vespaStore.filters.max_observation_date ? new Date(vespaStore.filters.max_observation_date) : null; if (!vespaStore.municipalitiesFetched) await vespaStore.fetchMunicipalities(); if (!vespaStore.provincesFetched) await vespaStore.fetchProvinces(); }); diff --git a/src/components/MapPage.vue b/src/components/MapPage.vue index 5499de2..249edd6 100644 --- a/src/components/MapPage.vue +++ b/src/components/MapPage.vue @@ -81,7 +81,7 @@ export default { map.value.setView([result.lat, result.lon], 16); } else { // Handle case when address is not found - console.log('Adres niet gevonden'); + } } catch (error) { console.error('Error searching address:', error); @@ -143,6 +143,7 @@ export default { const updateMarkers = debounce(async () => { if (isFetchingGeoJson.value) return; // Prevent multiple calls + isFetchingGeoJson.value = true; try { @@ -182,6 +183,7 @@ export default { } finally { isFetchingGeoJson.value = false; isMapLoading.value = false; + vespaStore.getObservations(1, 25).catch(error => console.error('Error fetching observations:', error)); } }, 300); @@ -219,6 +221,7 @@ export default { () => vespaStore.filters, (newFilters) => { filtersUpdated.value = true; + clearAndUpdateMarkers(); }, { deep: true } @@ -236,7 +239,6 @@ export default { onMounted(async () => { if (!vespaStore.municipalitiesFetched) await vespaStore.fetchMunicipalities(); if (!vespaStore.provincesFetched) await vespaStore.fetchProvinces(); - vespaStore.markerClusterGroup = L.markerClusterGroup({ spiderfyOnMaxZoom: false, showCoverageOnHover: true, @@ -300,11 +302,12 @@ export default { } vespaStore.map = map.value; - if (vespaStore.lastAppliedFilters === null || vespaStore.lastAppliedFilters === 'null') { - vespaStore.setLastAppliedFilters(); - } + // if (vespaStore.lastAppliedFilters === null || vespaStore.lastAppliedFilters === 'null') { + // vespaStore.setLastAppliedFilters(); + // } updateMarkers(); - vespaStore.getObservations(1, 25).catch(error => console.error('Error fetching observations:', error)); + + }); return { diff --git a/src/components/NavbarComponent.vue b/src/components/NavbarComponent.vue index 7cc6449..df5891d 100644 --- a/src/components/NavbarComponent.vue +++ b/src/components/NavbarComponent.vue @@ -8,25 +8,27 @@