Avoid losing map context when selecting tasks
This commit is contained in:
parent
74e0630a41
commit
262aa009c2
1 changed files with 134 additions and 143 deletions
|
|
@ -12,152 +12,143 @@
|
|||
}
|
||||
</style>
|
||||
<template>
|
||||
<!-- No Selection State -->
|
||||
<div
|
||||
v-if="!selectedTask"
|
||||
class="h-100 d-flex align-items-center justify-content-center text-muted"
|
||||
>
|
||||
<div class="text-center">
|
||||
<i class="bi bi-cursor-fill" style="font-size: 48px"></i>
|
||||
<p class="mt-2">Select an entry from the list to review</p>
|
||||
<div class="mb-4">
|
||||
<!-- No Selection State -->
|
||||
<div
|
||||
v-show="!selectedTask"
|
||||
class="h-100 align-items-center justify-content-center text-muted"
|
||||
>
|
||||
<div class="text-center">
|
||||
<i class="bi bi-cursor-fill" style="font-size: 48px"></i>
|
||||
<p class="mt-2">Select an entry from the list to review</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="selectedTask !== undefined">
|
||||
<h4 class="mb-3">Entry #{{ selectedTask?.id ?? "" }} Details</h4>
|
||||
|
||||
<div class="row mb-3">
|
||||
<label class="col-sm-3 col-form-label fw-bold">Address:</label>
|
||||
<div class="col-sm-9">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
:value="modelValue.address"
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<label class="col-sm-3 col-form-label fw-bold">Longitude:</label>
|
||||
<div class="col-sm-9">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
v-model="modelValue.location.longitude"
|
||||
:class="{
|
||||
'border-warning':
|
||||
modelValue.location.longitude !==
|
||||
selectedTask?.pool?.location?.longitude,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<label class="col-sm-3 col-form-label fw-bold">Latitude:</label>
|
||||
<div class="col-sm-9">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
v-model="modelValue.location.latitude"
|
||||
:class="{
|
||||
'border-warning':
|
||||
modelValue.location.latitude !==
|
||||
selectedTask?.pool?.location?.latitude,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<label class="col-sm-3 col-form-label fw-bold">Pool Condition:</label>
|
||||
<div class="col-sm-9">
|
||||
<select
|
||||
class="form-select"
|
||||
v-model="modelValue.condition"
|
||||
:class="{
|
||||
'border-warning':
|
||||
modelValue.condition !== selectedTask?.pool?.condition,
|
||||
}"
|
||||
>
|
||||
<option value="">-- Select --</option>
|
||||
<option value="blue">Blue</option>
|
||||
<option value="dry">Dry</option>
|
||||
<option value="false pool">False Pool</option>
|
||||
<option value="unknown">Unknown</option>
|
||||
<option value="green">Green</option>
|
||||
<option value="murky">Murky</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<label class="col-sm-3 col-form-label fw-bold">Owner Contact:</label>
|
||||
<div class="col-sm-9">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
v-model="siteOwner.name"
|
||||
:class="{
|
||||
'border-warning':
|
||||
siteOwner.name !== (selectedTask?.pool?.site.owner?.name ?? ''),
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-4">
|
||||
<label class="col-sm-3 col-form-label fw-bold">
|
||||
Resident Contact:
|
||||
</label>
|
||||
<div class="col-sm-9">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
v-model="siteResident.name"
|
||||
:class="{
|
||||
'border-warning':
|
||||
siteResident.name !==
|
||||
(selectedTask?.pool?.site.resident?.name ?? ''),
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Selected Task Details -->
|
||||
<div v-show="selectedTask">
|
||||
<div class="mb-4">
|
||||
<h4 class="mb-3">Entry #{{ selectedTask?.id ?? "" }} Details</h4>
|
||||
<!-- Map Components -->
|
||||
<div class="map-container" v-if="session.organization">
|
||||
<MapLocator
|
||||
@click="doPoolLocation"
|
||||
:markers="mapMarkers"
|
||||
:useSatellite="true"
|
||||
v-model="mapCamera"
|
||||
></MapLocator>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p>loading...</p>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent>
|
||||
<div class="row mb-3">
|
||||
<label class="col-sm-3 col-form-label fw-bold">Address:</label>
|
||||
<div class="col-sm-9">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
:value="modelValue.address"
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<label class="col-sm-3 col-form-label fw-bold">Longitude:</label>
|
||||
<div class="col-sm-9">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
v-model="modelValue.location.longitude"
|
||||
:class="{
|
||||
'border-warning':
|
||||
modelValue.location.longitude !==
|
||||
selectedTask?.pool?.location?.longitude,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<label class="col-sm-3 col-form-label fw-bold">Latitude:</label>
|
||||
<div class="col-sm-9">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
v-model="modelValue.location.latitude"
|
||||
:class="{
|
||||
'border-warning':
|
||||
modelValue.location.latitude !==
|
||||
selectedTask?.pool?.location?.latitude,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<label class="col-sm-3 col-form-label fw-bold">Pool Condition:</label>
|
||||
<div class="col-sm-9">
|
||||
<select
|
||||
class="form-select"
|
||||
v-model="modelValue.condition"
|
||||
:class="{
|
||||
'border-warning':
|
||||
modelValue.condition !== selectedTask?.pool?.condition,
|
||||
}"
|
||||
>
|
||||
<option value="">-- Select --</option>
|
||||
<option value="blue">Blue</option>
|
||||
<option value="dry">Dry</option>
|
||||
<option value="false pool">False Pool</option>
|
||||
<option value="unknown">Unknown</option>
|
||||
<option value="green">Green</option>
|
||||
<option value="murky">Murky</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<label class="col-sm-3 col-form-label fw-bold">Owner Contact:</label>
|
||||
<div class="col-sm-9">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
v-model="siteOwner.name"
|
||||
:class="{
|
||||
'border-warning':
|
||||
siteOwner.name !==
|
||||
(selectedTask?.pool?.site.owner?.name ?? ''),
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-4">
|
||||
<label class="col-sm-3 col-form-label fw-bold">
|
||||
Resident Contact:
|
||||
</label>
|
||||
<div class="col-sm-9">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
v-model="siteResident.name"
|
||||
:class="{
|
||||
'border-warning':
|
||||
siteResident.name !==
|
||||
(selectedTask?.pool?.site.resident?.name ?? ''),
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Map Components -->
|
||||
<div class="map-container" v-if="session.organization">
|
||||
<MapLocator
|
||||
@click="doPoolLocation"
|
||||
:markers="mapMarkers"
|
||||
:useSatellite="true"
|
||||
v-model="mapCamera"
|
||||
></MapLocator>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p>loading...</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="map-container"
|
||||
v-if="session.organization && session.urls"
|
||||
v-show="selectedTask?.pool"
|
||||
>
|
||||
<MapProxiedArcgisTile
|
||||
@click="doPoolLocation"
|
||||
:markers="mapMarkers"
|
||||
:organizationId="session.organization.id"
|
||||
:tegola="session.urls!.tegola"
|
||||
:urlTiles="session.urls!.tile"
|
||||
v-model="_mapFlyoverCamera"
|
||||
></MapProxiedArcgisTile>
|
||||
</div>
|
||||
<div class="map-container" v-if="session.organization && session.urls">
|
||||
<MapProxiedArcgisTile
|
||||
@click="doPoolLocation"
|
||||
:markers="mapMarkers"
|
||||
:organizationId="session.organization.id"
|
||||
:tegola="session.urls!.tegola"
|
||||
:urlTiles="session.urls!.tile"
|
||||
v-model="_mapFlyoverCamera"
|
||||
></MapProxiedArcgisTile>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
|
@ -186,7 +177,7 @@ interface Props {
|
|||
mapFlyoverCamera: Camera;
|
||||
mapMarkers: Marker[];
|
||||
modelValue: ReviewTaskPoolForm;
|
||||
selectedTask?: ReviewTask;
|
||||
selectedTask: ReviewTask | undefined;
|
||||
}
|
||||
const emit = defineEmits<Emits>();
|
||||
const mapCamera = ref<Camera>(new Camera());
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue