Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix colors when observation is selected #155

Merged
merged 5 commits into from
Jul 18, 2024
Merged

fix colors when observation is selected #155

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
165436f
fix colors when observation is selected
Jul 17, 2024
0054bce
remove logs
Jul 17, 2024
17d6269
fix observation colors
Jul 17, 2024
449384f
fix github issues
Jul 18, 2024
ce10579
fix linting
Jul 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 58 additions & 12 deletions src/components/MapPage.vue
View file
Open in desktop
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
Open in desktop
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
Loading