Gleipnir/nidus-sync
2
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

Use class heirarchy for different report types.

Browse source
This commit is contained in:
Eli Ribble 2026-04-10 23:57:47 +00:00
parent 4735734404
commit 60eb6b9bbf
No known key found for this signature in database
13 changed files with 539 additions and 380 deletions
Download patch file Download diff file Expand all files Collapse all files

110
ts/components/PublicReportCardWater.vue Normal file
View file

@ -0,0 +1,110 @@
<template>
<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.access_gate ||
report.access_fence ||
report.access_locked ||
report.access_dog ||
report.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.access_gate">Gate</li>
<li v-if="report.access_fence">Fence</li>
<li v-if="report.access_locked">Locked</li>
<li v-if="report.access_dog">Dog</li>
<li v-if="report.access_other">Other access obstacle</li>
</ul>
</div>
</div>
<div v-if="report.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.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.has_larvae ? 'badge-larvae' : 'bg-light text-muted'"
>
<i
class="bi"
:class="report.has_larvae ? 'bi-check-circle' : 'bi-circle'"
></i>
Larvae
</span>
<span
class="badge me-2"
:class="report.has_pupae ? 'badge-pupae' : 'bg-light text-muted'"
>
<i
class="bi"
:class="report.has_pupae ? 'bi-check-circle' : 'bi-circle'"
></i>
Pupae
</span>
<span
class="badge"
:class="report.has_adult ? 'badge-adult' : 'bg-light text-muted'"
>
<i
class="bi"
:class="report.has_adult ? 'bi-check-circle' : 'bi-circle'"
></i>
Adult Mosquitoes
</span>
</div>
<div v-if="report.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.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.owner.name || "not given" }}
</div>
</div>
<div class="col-md-6">
<label
v-if="report.owner.has_email"
class="form-label text-muted small mb-0"
>
<i class="bi bi-envelope"></i>
</label>
<label
v-if="report.owner.has_phone"
class="form-label text-muted small mb-0"
>
<i class="bi bi-phone"></i>
</label>
</div>
</div>
</template>
<script setup lang="ts">
import { PublicReportWater } from "@/type/api";
interface Props {
report: PublicReportWater;
}
const props = defineProps<Props>();
</script>