Use class heirarchy for different report types.
This commit is contained in:
parent
4735734404
commit
60eb6b9bbf
13 changed files with 539 additions and 380 deletions
|
|
@ -67,13 +67,13 @@
|
|||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="report.water != null" class="row g-3">
|
||||
<div v-if="report instanceof PublicReportWater" class="row g-3">
|
||||
<div class="col-12">
|
||||
<ul>
|
||||
<li v-if="report.water?.is_reporter_owner">
|
||||
<li v-if="report.is_reporter_owner">
|
||||
Reporter is the owner of the property
|
||||
</li>
|
||||
<li v-if="report.water?.is_reporter_confidential">
|
||||
<li v-if="report.is_reporter_confidential">
|
||||
Reporter has asked to be kept confidential
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -82,196 +82,12 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Nuisance-specific Fields -->
|
||||
<div v-if="report.nuisance" class="card mb-3">
|
||||
<div class="card-header bg-danger bg-opacity-10">
|
||||
<i class="bi bi-exclamation-triangle"></i> Nuisance Details
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-muted small mb-0">
|
||||
<i class="bi bi-clock"></i> Time of Day Encountered
|
||||
</label>
|
||||
<ul>
|
||||
<li v-if="report.nuisance?.time_of_day_early">Early</li>
|
||||
<li v-if="report.nuisance?.time_of_day_day">Daytime</li>
|
||||
<li v-if="report.nuisance?.time_of_day_evening">Evening</li>
|
||||
<li v-if="report.nuisance?.time_of_day_night">Night</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-muted small mb-0">
|
||||
<i class="bi bi-house"></i> Property Area
|
||||
</label>
|
||||
<div>
|
||||
<ul>
|
||||
<li v-if="report.nuisance?.is_location_backyard">Backyard</li>
|
||||
<li v-if="report.nuisance?.is_location_frontyard">Frontyard</li>
|
||||
<li v-if="report.nuisance?.is_location_garden">Garden</li>
|
||||
<li v-if="report.nuisance?.is_location_other">Other</li>
|
||||
<li v-if="report.nuisance?.is_location_pool">Pool</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="
|
||||
report.nuisance?.source_container ||
|
||||
report.nuisance?.source_gutter ||
|
||||
report.nuisance?.source_stagnant
|
||||
"
|
||||
class="col-md-6"
|
||||
>
|
||||
<label class="form-label text-muted small mb-0">
|
||||
<i class="bi bi-droplet"></i> Sources
|
||||
</label>
|
||||
<ul>
|
||||
<li v-if="report.nuisance?.source_container">Container</li>
|
||||
<li v-if="report.nuisance?.source_gutter">Gutter</li>
|
||||
<li v-if="report.nuisance?.source_stagnant">
|
||||
Sprinklers & Gutters
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div v-if="report.nuisance?.source_description" class="col-12">
|
||||
<label class="form-label text-muted small mb-0">
|
||||
<i class="bi bi-chat-text"></i> Source Description
|
||||
</label>
|
||||
<div class="p-2 bg-light rounded">
|
||||
{{ report.nuisance?.source_description || "none" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label class="form-label text-mudet small mb-0">
|
||||
<i class="bi bi-clock"></i> Duration
|
||||
</label>
|
||||
<div class="p-2 bg-light rounded">
|
||||
{{ report.nuisance?.duration }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label class="form-label text-muted small mb-0">
|
||||
<i class="bi bi-chat-text"></i> Additional Notes
|
||||
</label>
|
||||
<div class="p-2 bg-light rounded">
|
||||
{{ report.nuisance?.additional_info || "No additional notes" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="report instanceof PublicReportNuisance">
|
||||
<PublicReportCardNuisance :report="report" />
|
||||
</div>
|
||||
|
||||
<!-- Standing Water-specific Fields -->
|
||||
<div v-if="report.water" class="card mb-3">
|
||||
<div class="card-header bg-info bg-opacity-10">
|
||||
<i class="bi bi-droplet"></i> Standing Water Details
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div
|
||||
v-if="
|
||||
report.water?.access_gate ||
|
||||
report.water?.access_fence ||
|
||||
report.water?.access_locked ||
|
||||
report.water?.access_dog ||
|
||||
report.water?.access_other
|
||||
"
|
||||
class="col-md-6"
|
||||
>
|
||||
<label class="form-label text-muted small mb-0">
|
||||
<i class="bi bi-droplet"></i> Access
|
||||
</label>
|
||||
<div>
|
||||
<ul>
|
||||
<li v-if="report.water?.access_gate">Gate</li>
|
||||
<li v-if="report.water?.access_fence">Fence</li>
|
||||
<li v-if="report.water?.access_locked">Locked</li>
|
||||
<li v-if="report.water?.access_dog">Dog</li>
|
||||
<li v-if="report.water?.access_other">Other access obstacle</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="report.water?.access_comments" class="col-12">
|
||||
<label class="form-label text-muted small mb-0">
|
||||
<i class="bi bi-chat-text"></i> Access Comments
|
||||
</label>
|
||||
<div class="p-2 bg-light rounded">
|
||||
{{ report.water?.access_comments }}
|
||||
</div>
|
||||
</div>
|
||||
<label class="form-label text-muted small mb-0">
|
||||
<i class="bi bi-eye"></i> Mosquito Life Stages Observed
|
||||
</label>
|
||||
<div class="mt-2">
|
||||
<span
|
||||
class="badge me-2"
|
||||
:class="
|
||||
report.water?.has_larvae ? 'badge-larvae' : 'bg-light text-muted'
|
||||
"
|
||||
>
|
||||
<i
|
||||
class="bi"
|
||||
:class="
|
||||
report.water?.has_larvae ? 'bi-check-circle' : 'bi-circle'
|
||||
"
|
||||
></i>
|
||||
Larvae
|
||||
</span>
|
||||
<span
|
||||
class="badge me-2"
|
||||
:class="
|
||||
report.water?.has_pupae ? 'badge-pupae' : 'bg-light text-muted'
|
||||
"
|
||||
>
|
||||
<i
|
||||
class="bi"
|
||||
:class="report.water?.has_pupae ? 'bi-check-circle' : 'bi-circle'"
|
||||
></i>
|
||||
Pupae
|
||||
</span>
|
||||
<span
|
||||
class="badge"
|
||||
:class="
|
||||
report.water?.has_adult ? 'badge-adult' : 'bg-light text-muted'
|
||||
"
|
||||
>
|
||||
<i
|
||||
class="bi"
|
||||
:class="report.water?.has_adult ? 'bi-check-circle' : 'bi-circle'"
|
||||
></i>
|
||||
Adult Mosquitoes
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="report.water?.comments" class="col-12">
|
||||
<label class="form-label text-muted small mb-0">
|
||||
<i class="bi bi-chat-text"></i> Comments
|
||||
</label>
|
||||
<div class="p-2 bg-light rounded">
|
||||
{{ report.water?.comments }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-muted small mb-0">
|
||||
<i class="bi bi-person"></i> Owner Name
|
||||
</label>
|
||||
<div class="fw-medium">
|
||||
{{ report.water?.owner.name || "not given" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label
|
||||
v-if="report.water?.owner.has_email"
|
||||
class="form-label text-muted small mb-0"
|
||||
>
|
||||
<i class="bi bi-envelope"></i>
|
||||
</label>
|
||||
<label
|
||||
v-if="report.water?.owner.has_phone"
|
||||
class="form-label text-muted small mb-0"
|
||||
>
|
||||
<i class="bi bi-phone"></i>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="report instanceof PublicReportWater">
|
||||
<PublicReportCardWater :report="report" />
|
||||
</div>
|
||||
|
||||
<!-- Images Section -->
|
||||
|
|
@ -313,10 +129,15 @@
|
|||
<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";
|
||||
import PublicReportCardNuisance from "@/components/PublicReportCardNuisance.vue";
|
||||
import PublicReportCardWater from "@/components/PublicReportCardWater.vue";
|
||||
import { formatAddress } from "@/format";
|
||||
import { PublicReport } from "@/type/api";
|
||||
import {
|
||||
PublicReport,
|
||||
PublicReportNuisance,
|
||||
PublicReportWater,
|
||||
} from "@/type/api";
|
||||
|
||||
interface Emits {
|
||||
(e: "viewImage", index: number): void;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue