Allow for selecting new location for a pool

This commit is contained in:
Eli Ribble 2026-04-15 16:50:43 +00:00
parent 31d8d2d0d5
commit 239340a7a9
No known key found for this signature in database
2 changed files with 23 additions and 23 deletions

View file

@ -164,6 +164,9 @@ import { Bounds, Contact, Pool, ReviewTask, User } from "@/type/api";
import type { Location } from "@/type/api";
import { Camera } from "@/type/map";
interface Emits {
(e: "update:modelValue", value: ReviewTaskPoolForm): void;
}
export interface ReviewTaskPoolForm {
address: string;
condition: string;
@ -179,6 +182,7 @@ interface Props {
modelValue: ReviewTaskPoolForm;
selectedTask?: ReviewTask;
}
const emit = defineEmits<Emits>();
const mapCamera = ref<Camera>(new Camera());
const _mapFlyoverCamera = ref<Camera>(new Camera());
const props = defineProps<Props>();
@ -186,7 +190,13 @@ const siteOwner = ref<Contact>(new Contact());
const siteResident = ref<Contact>(new Contact());
const session = useSessionStore();
function doPoolLocation(event: MapClickEvent) {
console.log("pool location", event);
emit("update:modelValue", {
address: props.modelValue.address,
condition: props.modelValue.condition,
location: event.location,
owner: props.modelValue.owner,
resident: props.modelValue.resident,
});
}
watch(
() => props.mapFlyoverCamera,

View file

@ -96,7 +96,7 @@ body {
</template>
<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { computed, onMounted, ref, watch } from "vue";
import { useStoreReviewTask } from "@/store/review-task";
import { useSessionStore } from "@/store/session";
import maplibregl from "maplibre-gl";
@ -230,8 +230,12 @@ const changes = computed<Changes>(() => {
return { updated, unchanged };
});
const mapMarkers = computed<Marker[]>(() => {
const form = reviewForm.value;
const task = selectedTask.value;
const loc = task?.pool?.location;
const loc =
reviewForm.value.location.latitude != 0
? reviewForm.value.location
: task?.pool?.location;
if (!loc) {
return [];
}
@ -305,26 +309,6 @@ function updateMap(task: ReviewTask): void {
});
}
// Map Click Handler
function updatePoolLocation(event: MapClickEvent): void {
console.log("map click", selectedTask.value?.id, event);
/*
const map = event.map;
const loc = event.location;
map.SetMarkers([
new maplibregl.Marker({
color: "#FF0000",
draggable: false,
}).setLngLat([loc.lng, loc.lat]),
]);
selectedTaskChanges.latitude = event.detail.lat;
selectedTaskChanges.longitude = event.detail.lng;
*/
}
// Submit Review
async function submitReview(action: "committed" | "discarded"): Promise<void> {
if (!selectedTask.value || submitting.value) return;
@ -478,6 +462,12 @@ function initializeMaps(): void {
}
}
watch(
() => reviewForm.value,
(newReviewForm: ReviewTaskPoolForm) => {
console.log("new review form", newReviewForm);
},
);
// Lifecycle
onMounted(async () => {
initializeMaps();