Skip to content

Commit

Permalink
Merge pull request #155 from inbo/gs-fe-colors
Browse files Browse the repository at this point in the history 
fix colors when observation is selected
  • Loading branch information
@stevegerrits
stevegerrits authored Jul 18, 2024
2 parents 6227ff2 + ce10579 commit e08ab73
Show file tree
Hide file tree
Showing 10 changed files with 614 additions and 168 deletions.
70 changes: 58 additions & 12 deletions src/components/MapPage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,15 @@
</div>
<div class="details-panel"
:class="{ 'd-none': !isDetailsPaneOpen, 'd-block': isDetailsPaneOpen, 'col-12': true, 'col-md-6': true, 'col-lg-4': true }">
<ObservationDetailsComponent />
<ObservationDetailsComponent @updateMarkerColor="updateMarkerColor" />
</div>
<div v-if="formattedError" class="alert alert-danger position-absolute top-0 start-50 translate-middle-x mt-2">
{{ formattedError }}
</div>
</div>
</div>
</template>

<script>
import { useVespaStore } from '@/stores/vespaStore';
import 'leaflet.markercluster';
Expand Down Expand Up @@ -124,20 +125,27 @@ export default {
const geoJsonLayer = L.geoJSON(vespaStore.observations, {
pointToLayer: (feature, latlng) => {
const marker = vespaStore.createCircleMarker(feature, latlng);
if (vespaStore.selectedObservation && feature.properties.id === vespaStore.selectedObservation.id) {
marker.setStyle({
color: '#ea792a',
weight: 4
});
}
marker.on('click', () => openObservationDetails(feature.properties));
marker.on('click', () => {
openObservationDetails(feature.properties);
});
return marker;
},
});
vespaStore.markerClusterGroup.clearLayers();
vespaStore.markerClusterGroup.addLayer(geoJsonLayer);
map.value.addLayer(vespaStore.markerClusterGroup);
filtersUpdated.value = false;
// Update the selected marker style
if (selectedObservation.value) {
const selectedMarker = vespaStore.markerClusterGroup.getLayers().find(marker => marker.feature.properties.id === selectedObservation.value.id);
if (selectedMarker) {
selectedMarker.setStyle({
color: '#ea792a',
weight: 4
});
}
}
} catch (error) {
console.error('Error updating markers:', error);
} finally {
Expand All @@ -146,6 +154,20 @@ export default {
}
}, 300);
watch(selectedObservation, (newObservation, oldObservation) => {
if (newObservation && oldObservation && newObservation.id !== oldObservation.id) {
const oldMarker = vespaStore.markerClusterGroup.getLayers().find(marker => marker.feature.properties.id === oldObservation.id);
if (oldMarker) {
// Hou de huidige kleur van de oude marker
vespaStore.updateMarkerColor(oldObservation.id, oldMarker.options.fillColor, oldMarker.options.fillColor, 1, '');
}
const newMarker = vespaStore.markerClusterGroup.getLayers().find(marker => marker.feature.properties.id === newObservation.id);
if (newMarker) {
vespaStore.updateMarkerColor(newObservation.id, newMarker.options.fillColor, '#ea792a', 4, 'active-marker');
}
}
});
const clearAndUpdateMarkers = () => {
if (vespaStore.markerClusterGroup) {
vespaStore.markerClusterGroup.clearLayers();
Expand All @@ -154,6 +176,12 @@ export default {
updateMarkers();
};
const updateMarkerColor = (observationId, fillColor, edgeColor, weight) => {
console.log('updateMarkerColor with fillcolor', fillColor);
console.log('updateMarkerColor with edgeColor', edgeColor);
vespaStore.updateMarkerColor(observationId, fillColor, edgeColor, weight);
};
watch(
() => vespaStore.filters,
(newFilters) => {
Expand All @@ -163,11 +191,10 @@ export default {
{ deep: true }
);
// Watch route changes to close the details panel
watch(
() => router.currentRoute.value,
(newRoute, oldRoute) => {
if (newRoute.path !== oldRoute.path && vespaStore.isDetailsPaneOpen) {
if (newRoute.path !== oldRoute.path && !newRoute.path.includes('/observation/')) {
vespaStore.isDetailsPaneOpen = false;
}
}
Expand Down Expand Up @@ -227,6 +254,7 @@ export default {
],
});
vespaStore.isDetailsPaneOpen = true;
updateMarkers();
} else {
map.value = L.map('map', {
center: [50.8503, 4.3517],
Expand All @@ -240,12 +268,29 @@ export default {
vespaStore.map = map.value;
if (vespaStore.lastAppliedFilters === null || vespaStore.lastAppliedFilters === 'null') {
vespaStore.setLastAppliedFilters();
vespaStore.setLastAppliedFilters();
}
updateMarkers();
vespaStore.getObservations(1, 25).catch(error => console.error('Error fetching observations:', error));
});
watch(selectedObservation, (newObservation, oldObservation) => {
const markers = vespaStore.markerClusterGroup.getLayers();
markers.forEach(marker => {
if (marker.feature.properties.id === newObservation?.id) {
marker.setStyle({
color: '#ea792a',
weight: 4
});
} else if (marker.feature.properties.id === oldObservation?.id) {
marker.setStyle({
color: '#3c3c3c',
weight: 1
});
}
});
});
return {
isDetailsPaneOpen,
isFilterPaneOpen,
Expand All @@ -260,7 +305,8 @@ export default {
cancelEdit,
formattedError,
loadingObservations,
isMapLoading
isMapLoading,
updateMarkerColor
};
},
};
Expand Down
63 changes: 44 additions & 19 deletions src/components/ObservationDetailsComponent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,8 @@
</h3>

<div class="d-flex justify-content-between mb-3" id="reservation">
<button
v-if="canReserve && !selectedObservation.reserved_by"
class="btn btn-sm btn-outline-primary"
@click="reserveObservation"
:disabled="!isAuthorizedToReserve"
>
<button v-if="canReserve && !selectedObservation.reserved_by" class="btn btn-sm btn-outline-primary"
@click="reserveObservation" :disabled="!isAuthorizedToReserve || isObservationSuccessful">
Reserveren
</button>
<span v-if="selectedObservation.reserved_by" class="badge bg-warning">Gereserveerd door {{
Expand All @@ -33,6 +29,9 @@
<div v-if="successMessage" class="alert alert-success alert-dismissible fade show" role="alert">
{{ successMessage }}
</div>
<div v-if="errorMessage" class="alert alert-danger alert-dismissible fade show" role="alert">
{{ errorMessage }}
</div>

<div class="accordion accordion-flush mb-3" id="sections">
<section class="accordion-item">
Expand Down Expand Up @@ -87,6 +86,7 @@
<select v-if="selectedObservation.eradication_result !== undefined"
v-model="editableObservation.eradication_result" class="form-select"
:disabled="!canEdit">
<option :value="null">Geen</option>
<option v-for="(label, value) in eradicationResultEnum" :key="value"
:value="value">{{ label }}</option>
</select>
Expand All @@ -98,7 +98,9 @@
<select v-if="selectedObservation.eradication_method !== undefined"
v-model="editableObservation.eradication_method" class="form-select"
:disabled="!canEdit">
<option v-for="(label, value) in eradicationMethodEnum" :key="value" :value="value">{{ label }}</option>
<option :value="null">Geen</option>
<option v-for="(label, value) in eradicationMethodEnum" :key="value"
:value="value">{{ label }}</option>
</select>
</div>
</div>
Expand All @@ -108,6 +110,7 @@
<select v-if="selectedObservation.eradication_product !== undefined"
v-model="editableObservation.eradication_product" class="form-select"
:disabled="!canEdit">
<option :value="null">Geen</option>
<option v-for="(label, value) in eradicationProductEnum" :key="value"
:value="value">{{ label }}</option>
</select>
Expand All @@ -119,7 +122,9 @@
<select v-if="selectedObservation.eradication_aftercare !== undefined"
v-model="editableObservation.eradication_aftercare" class="form-select"
:disabled="!canEdit">
<option v-for="(label, value) in eradicationAfterCareEnum" :key="value" :value="value">{{ label }}</option>
<option :value="null">Geen</option>
<option v-for="(label, value) in eradicationAfterCareEnum" :key="value"
:value="value">{{ label }}</option>
</select>
</div>
</div>
Expand All @@ -129,7 +134,9 @@
<select v-if="selectedObservation.eradication_problems !== undefined"
v-model="editableObservation.eradication_problems" class="form-select"
:disabled="!canEdit">
<option v-for="(label, value) in eradicationProblemsEnum" :key="value" :value="value">{{ label }}</option>
<option :value="null">Geen</option>
<option v-for="(label, value) in eradicationProblemsEnum" :key="value"
:value="value">{{ label }}</option>
</select>
</div>
</div>
Expand Down Expand Up @@ -190,6 +197,7 @@
<select v-if="selectedObservation.nest_type !== undefined"
v-model="editableObservation.nest_type" class="form-select"
:disabled="!canEdit">
<option :value="null">Geen</option>
<option v-for="(label, value) in nestTypeEnum" :key="value" :value="value">{{
label }}</option>
</select>
Expand All @@ -201,6 +209,7 @@
<select v-if="selectedObservation.nest_location !== undefined"
v-model="editableObservation.nest_location" class="form-select"
:disabled="!canEdit">
<option :value="null">Geen</option>
<option v-for="(label, value) in nestLocationEnum" :key="value" :value="value">
{{ label }}</option>
</select>
Expand All @@ -212,6 +221,7 @@
<select v-if="selectedObservation.nest_size !== undefined"
v-model="editableObservation.nest_size" class="form-select"
:disabled="!canEdit">
<option :value="null">Geen</option>
<option v-for="(label, value) in nestSizeEnum" :key="value" :value="value">{{
label }}</option>
</select>
Expand All @@ -223,6 +233,7 @@
<select v-if="selectedObservation.nest_height !== undefined"
v-model="editableObservation.nest_height" class="form-select"
:disabled="!canEdit">
<option :value="null">Geen</option>
<option v-for="(label, value) in nestHeightEnum" :key="value" :value="value">{{
label }}</option>
</select>
Expand Down Expand Up @@ -369,12 +380,13 @@
</div>
</div>
</template>

<script>
import { useVespaStore } from '@/stores/vespaStore';
import { computed, ref, watch } from 'vue';
export default {
emits: ['closeDetails'],
emits: ['closeDetails', 'updateMarkerColor'],
setup(props, { emit }) {
const vespaStore = useVespaStore();
const selectedObservation = computed(() => vespaStore.selectedObservation);
Expand All @@ -383,16 +395,23 @@ export default {
const canEdit = computed(() => isLoggedIn.value && vespaStore.canEditObservation(selectedObservation.value));
const canEditAdminFields = computed(() => isLoggedIn.value && vespaStore.isAdmin);
const successMessage = ref('');
const errorMessage = ref('');
const isAuthorizedToReserve = computed(() => {
if (vespaStore.isAdmin) return true;
const observationMunicipality = selectedObservation.value?.municipality_name;
return vespaStore.userMunicipalities.includes(observationMunicipality);
});
const editableObservation = ref({});
const isObservationSuccessful = computed(() => {
return selectedObservation.value?.eradication_result === 'successful';
});
const canReserve = computed(() => {
return isLoggedIn.value && (!selectedObservation.value?.reserved_by || selectedObservation.value.reserved_by === vespaStore.user.username);
return isLoggedIn.value &&
(!selectedObservation.value?.reserved_by || selectedObservation.value.reserved_by === vespaStore.user.username) &&
!isObservationSuccessful.value;
});
const isUserReserver = computed(() => {
Expand Down Expand Up @@ -446,12 +465,13 @@ export default {
"telescoopsteel": "Telescoopsteel",
"doos": "Doos",
"vloeistofverstuiver": "Vloeistofverstuiver",
"poederverstuiver": "Poederverstuiver"
"poederverstuiver": "Poederverstuiver",
"stofzuiger": "Stofzuiger",
};
const eradicationAfterCareEnum = {
"nest_volledig_verwijderd": "Nest volledig verwijderd",
"nest_gedeeltelijk_verwijderd": "Nest gedeeltelijk verwijderd",
"nest_gedeeltelijk verwijderd": "Nest gedeeltelijk verwijderd",
"nest_laten_hangen": "Nest laten hangen"
};
Expand Down Expand Up @@ -591,14 +611,15 @@ export default {
id: selectedObservation.value.id,
...updatedObservation
});
if (patch_response) {
successMessage.value = 'Wijzigingen opgeslagen';
setTimeout(() => successMessage.value = '', 4000);
emit('updateMarkerColor', selectedObservation.value.id, vespaStore.getColorByStatus(patch_response.eradication_result),'#ea792a', 4, 'active-marker');
}
} catch (error) {
console.error('Fout bij het bijwerken van de observatie:', error);
successMessage.value = '';
successMessage.value = '';
}
};
Expand All @@ -624,10 +645,13 @@ export default {
});
const reserveObservation = async () => {
if (!selectedObservation.value.reserved_by) {
if (vespaStore.user.reservation_count < 50) {
await vespaStore.reserveObservation(selectedObservation.value);
} else {
alert('Deze observatie is al gereserveerd.');
errorMessage.value = 'U heeft het maximum aantal reserveringen bereikt.';
setTimeout(() => {
errorMessage.value = '';
}, 4000);
}
};
Expand Down Expand Up @@ -675,11 +699,12 @@ export default {
eradicationProductEnum,
canViewContactInfo,
isAuthorizedToReserve,
selectedObservation,
eradicationStatusText,
eradicationStatusClass,
successMessage,
clearSuccessMessage
clearSuccessMessage,
isObservationSuccessful,
errorMessage
};
}
};
Expand Down
Loading

0 comments on commit e08ab73

Please sign in to comment.