99 lines
2.3 KiB
Vue
99 lines
2.3 KiB
Vue
<style scoped>
|
|
.badge-larvae {
|
|
background-color: #ffc107;
|
|
color: #000;
|
|
}
|
|
|
|
.badge-pupae {
|
|
background-color: #fd7e14;
|
|
color: #fff;
|
|
}
|
|
|
|
.badge-adult {
|
|
background-color: #dc3545;
|
|
color: #fff;
|
|
}
|
|
.details-section {
|
|
overflow-y: auto;
|
|
}
|
|
.icon-standing-water {
|
|
color: #0dcaf0;
|
|
}
|
|
|
|
.icon-nuisance {
|
|
color: #dc3545;
|
|
}
|
|
.map-container {
|
|
height: 400px;
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
|
|
<template>
|
|
<div class="card shadow-sm mb-3">
|
|
<div class="card-header bg-white pane-header">Communication Workbench</div>
|
|
<div class="card-body">
|
|
<div class="map-container">
|
|
<MapMultipoint
|
|
id="map"
|
|
:bounds="mapBounds"
|
|
:markers="mapMarkers"
|
|
:organizationId="user.organization.id"
|
|
:tegola="user.urls.tegola"
|
|
:xmin="user.organization.service_area?.min.x ?? 0"
|
|
:ymin="user.organization.service_area?.min.y ?? 0"
|
|
:xmax="user.organization.service_area?.max.x ?? 0"
|
|
:ymax="user.organization.service_area?.max.y ?? 0"
|
|
/>
|
|
</div>
|
|
<div v-if="loading" class="loading">Loading...</div>
|
|
<div v-else>
|
|
<div
|
|
v-if="!selectedCommunication"
|
|
class="d-flex flex-column align-items-center justify-content-center text-muted"
|
|
>
|
|
<i class="bi bi-hand-index fs-1"></i>
|
|
<p class="mt-2">Select a report to view details</p>
|
|
</div>
|
|
|
|
<div v-if="selectedCommunication" class="h-100 d-flex flex-column">
|
|
<PublicreportCard
|
|
:report="selectedCommunication.public_report"
|
|
@viewImage="openPhotoViewer"
|
|
/>
|
|
<!-- Report Details -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from "vue";
|
|
import MapMultipoint from "@/components/MapMultipoint.vue";
|
|
import PublicreportCard from "@/components/PublicreportCard.vue";
|
|
import TimeRelative from "@/components/TimeRelative.vue";
|
|
|
|
interface Emits {
|
|
(e: "viewImage", index: int): void;
|
|
}
|
|
interface Props {
|
|
loading: boolean;
|
|
mapBounds?: Bounds;
|
|
mapMarkers: Marker[];
|
|
selectedCommunication: Communication | null;
|
|
user: User | null;
|
|
}
|
|
|
|
const emit = defineEmits<Emits>();
|
|
const props = defineProps<Props>();
|
|
const nuisance = computed(() => {
|
|
return props.selectedCommunication?.value?.public_report?.nuisance || null;
|
|
});
|
|
const water = computed(() => {
|
|
return props.selectedCommunication?.value?.public_report?.water || null;
|
|
});
|
|
function openPhotoViewer(index) {
|
|
emit("viewImage", index);
|
|
}
|
|
</script>
|