Avoid unloading the maps on pool review

It's expensive and slow
This commit is contained in:
Eli Ribble 2026-04-15 17:22:01 +00:00
parent b0e2e97f09
commit cd98751667
No known key found for this signature in database
2 changed files with 21 additions and 39 deletions

View file

@ -24,9 +24,9 @@
</div>
<!-- Selected Task Details -->
<div v-else>
<div v-show="selectedTask">
<div class="mb-4">
<h4 class="mb-3">Entry #{{ selectedTask.id }} Details</h4>
<h4 class="mb-3">Entry #{{ selectedTask?.id ?? "" }} Details</h4>
<form @submit.prevent>
<div class="row mb-3">
@ -51,7 +51,7 @@
:class="{
'border-warning':
modelValue.location.longitude !==
selectedTask.pool?.location?.longitude,
selectedTask?.pool?.location?.longitude,
}"
/>
</div>
@ -67,7 +67,7 @@
:class="{
'border-warning':
modelValue.location.latitude !==
selectedTask.pool?.location?.latitude,
selectedTask?.pool?.location?.latitude,
}"
/>
</div>
@ -81,7 +81,7 @@
v-model="modelValue.condition"
:class="{
'border-warning':
modelValue.condition !== selectedTask.pool?.condition,
modelValue.condition !== selectedTask?.pool?.condition,
}"
>
<option value="">-- Select --</option>
@ -105,7 +105,7 @@
:class="{
'border-warning':
siteOwner.name !==
(selectedTask.pool?.site.owner?.name ?? ''),
(selectedTask?.pool?.site.owner?.name ?? ''),
}"
/>
</div>
@ -123,7 +123,7 @@
:class="{
'border-warning':
siteResident.name !==
(selectedTask.pool?.site.resident?.name ?? ''),
(selectedTask?.pool?.site.resident?.name ?? ''),
}"
/>
</div>
@ -141,7 +141,8 @@
<div
class="map-container"
v-if="session.organization && selectedTask.pool && session.urls"
v-if="session.organization && session.urls"
v-show="selectedTask?.pool"
>
<MapProxiedArcgisTile
@map-click="doPoolLocation"

View file

@ -62,14 +62,14 @@ body {
<ThreeColumn>
<template #left>
<ReviewPoolColumnList
v-if="storeReviewTask.all"
v-show="storeReviewTask.all"
@doSelectTask="selectTask"
:error="error"
:selectedTaskID="selectedTaskID"
:tasks="storeReviewTask.all()"
:total="totalPending"
/>
<div v-else>
<div v-show="!storeReviewTask.all">
<p>Loading</p>
</div>
</template>
@ -256,32 +256,6 @@ function selectTask(id: number): void {
owner: pool.site.owner?.name ?? "",
resident: pool.site.resident?.name ?? "",
};
// Update map
updateMap(task);
}
// Map Update
function updateMap(task: ReviewTask): void {
console.log("Updating map for task:", task.id);
const map = mapMultipoint.value;
if (!map) return;
const loc = task.pool?.location;
if (!loc) {
map.SetMarkers([]);
return;
}
const bounds = new maplibregl.LngLatBounds(
new maplibregl.LngLat(loc.longitude - 0.005, loc.latitude - 0.005),
new maplibregl.LngLat(loc.longitude + 0.005, loc.latitude + 0.005),
);
map.FitBounds(bounds, {
padding: 50,
});
}
// Submit Review
@ -293,9 +267,13 @@ async function submitReview(action: "committed" | "discarded"): Promise<void> {
try {
const payload: any = {
task_id: selectedTask.value.id,
status: action,
//updates: selectedTaskChanges,
task_id: selectedTask.value.id,
updates: {
condition: reviewForm.value.condition,
latitude: reviewForm.value.location.latitude,
longitude: reviewForm.value.location.longitude,
},
};
const response = await fetch("/api/review/pool", {
@ -322,7 +300,8 @@ async function submitReview(action: "committed" | "discarded"): Promise<void> {
// Select the next item in the list
let new_index = index < all_tasks.length ? index : all_tasks.length - 1;
selectedTaskID.value = all_tasks[new_index].id;
const new_id = all_tasks[new_index].id;
selectTask(new_id);
} catch (err) {
error.value = err instanceof Error ? err.message : "Unknown error";
console.error("Error submitting review:", err);
@ -447,6 +426,8 @@ watch(
onMounted(async () => {
initializeMaps();
loading.value = true;
await storeReviewTask.fetchAll();
loading.value = false;
});
</script>