Add nuisance view for RMO
This commit is contained in:
parent
64a8de7a32
commit
fd7607f5b7
4 changed files with 422 additions and 410 deletions
|
|
@ -2,22 +2,7 @@
|
|||
|
||||
{{ define "title" }}Report Nuisance{{ end }}
|
||||
{{ define "extraheader" }}
|
||||
<style>
|
||||
.map-container {
|
||||
background-color: #e9ecef;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
||||
height: 500px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<style></style>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.js"
|
||||
|
|
@ -192,391 +177,3 @@
|
|||
</script>
|
||||
<style></style>
|
||||
{{ end }}
|
||||
{{ define "content" }}
|
||||
{{ if (eq .District nil) }}
|
||||
{{ template "rmo/component/header-rmo.html" . }}
|
||||
{{ else }}
|
||||
{{ template "rmo/component/header-district.html" .District }}
|
||||
{{ end }}
|
||||
<div class="container">
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<h2>Report Mosquito Nuisance</h2>
|
||||
<p class="lead">Help us identify mosquito activity in your area</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Report Form -->
|
||||
<form
|
||||
id="mosquitoNuisanceForm"
|
||||
action="{{ .URL.NuisanceSubmit }}"
|
||||
method="POST"
|
||||
enctype="multipart/form-data"
|
||||
>
|
||||
<!-- Location Section -->
|
||||
<div class="form-section">
|
||||
<div class="section-heading">
|
||||
<i class="bi bi-geo-alt"></i>
|
||||
<h3>Nuisance Location Information</h3>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<div class="alert alert-info" role="info">
|
||||
<p class="mb-0">
|
||||
You can select the location by address or by moving the marker on
|
||||
the map.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3 position-relative">
|
||||
<address-input
|
||||
placeholder="Start typing an address (min 3 characters)"
|
||||
api-key="{{ .MapboxToken }}"
|
||||
>
|
||||
</address-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="small text-muted mb-2">
|
||||
You can also click on the map to mark the location precisely
|
||||
</p>
|
||||
<div class="map-container">
|
||||
<map-locator id="map"></map-locator>
|
||||
</div>
|
||||
<input type="hidden" id="map-zoom" name="map-zoom" />
|
||||
<input type="hidden" id="address-country" name="address-country" />
|
||||
<input type="hidden" id="address-locality" name="address-locality" />
|
||||
<input type="hidden" id="address-number" name="address-number" />
|
||||
<input type="hidden" id="address-postalcode" name="address-postalcode" />
|
||||
<input type="hidden" id="address-region" name="address-region" />
|
||||
<input type="hidden" id="address-street" name="address-street" />
|
||||
<input type="hidden" id="latitude" name="latitude" />
|
||||
<input type="hidden" id="longitude" name="longitude" />
|
||||
<input
|
||||
type="hidden"
|
||||
id="latlng-accuracy-type"
|
||||
name="latlng-accuracy-type"
|
||||
/>
|
||||
<input
|
||||
type="hidden"
|
||||
id="latlng-accuracy-value"
|
||||
name="latlng-accuracy-value"
|
||||
/>
|
||||
|
||||
<!-- Mosquito Activity Section -->
|
||||
<div class="form-section">
|
||||
<div class="section-heading">
|
||||
<i class="bi bi-mosquito-color"></i>
|
||||
<h3>Mosquito Activity Information</h3>
|
||||
</div>
|
||||
<p class="mb-4">
|
||||
The time when mosquitoes are active can help us identify the species
|
||||
and likely breeding sources.
|
||||
</p>
|
||||
|
||||
<!-- Time of Day -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<label class="form-label"
|
||||
>When do you typically notice mosquitoes? (Select all that
|
||||
apply)</label
|
||||
>
|
||||
<div class="row">
|
||||
<div class="col-6 col-md-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="btn-check"
|
||||
id="earlyMorning"
|
||||
name="tod-early"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<label
|
||||
class="btn btn-outline-primary time-of-day-btn"
|
||||
for="earlyMorning"
|
||||
>
|
||||
<span class="time-of-day-icon"
|
||||
><i class="bi bi-sunrise"></i
|
||||
></span>
|
||||
<span class="time-label">Early Morning</span>
|
||||
<small class="text-muted">5am-8am</small>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="btn-check"
|
||||
id="daytime"
|
||||
name="tod-day"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<label
|
||||
class="btn btn-outline-primary time-of-day-btn"
|
||||
for="daytime"
|
||||
>
|
||||
<span class="time-of-day-icon"
|
||||
><i class="bi bi-sun"></i
|
||||
></span>
|
||||
<span class="time-label">Daytime</span>
|
||||
<small class="text-muted">8am-5pm</small>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="btn-check"
|
||||
id="evening"
|
||||
name="tod-evening"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<label
|
||||
class="btn btn-outline-primary time-of-day-btn"
|
||||
for="evening"
|
||||
>
|
||||
<span class="time-of-day-icon"
|
||||
><i class="bi bi-sunset"></i
|
||||
></span>
|
||||
<span class="time-label">Evening</span>
|
||||
<small class="text-muted">5pm-9pm</small>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="btn-check"
|
||||
id="night"
|
||||
name="tod-night"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<label
|
||||
class="btn btn-outline-primary time-of-day-btn"
|
||||
for="night"
|
||||
>
|
||||
<span class="time-of-day-icon"
|
||||
><i class="bi bi-moon-stars"></i
|
||||
></span>
|
||||
<span class="time-label">Night</span>
|
||||
<small class="text-muted">9pm-5am</small>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Duration -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-6">
|
||||
<label for="duration" class="form-label"
|
||||
>How long have you been experiencing this mosquito problem?</label
|
||||
>
|
||||
<select class="form-select" name="duration">
|
||||
<option value="just-noticed">Just noticed recently</option>
|
||||
<option value="few-days">A few days</option>
|
||||
<option value="1-2-weeks">1-2 weeks</option>
|
||||
<option value="2-4-weeks">2-4 weeks</option>
|
||||
<option value="1-3-months">1-3 months</option>
|
||||
<option value="seasonal">All season (recurring issue)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Location -->
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<label for="source-location" class="form-label"
|
||||
>Where on your property do you notice the most mosquito
|
||||
activity?</label
|
||||
>
|
||||
<select
|
||||
class="form-select tall"
|
||||
multiple="true"
|
||||
name="source-location"
|
||||
>
|
||||
<option value="frontyard">Front yard</option>
|
||||
<option value="backyard">Back yard</option>
|
||||
<option value="garden">Garden</option>
|
||||
<option value="pool-area">Pool area</option>
|
||||
<option value="other">Other area</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
id="toggle-additional"
|
||||
class="btn btn-warning"
|
||||
type="button"
|
||||
onClick="toggleCollapse('collapse-additional-fields')"
|
||||
>
|
||||
Click here to answer a few more questions to better help us solve your
|
||||
mosquito problem
|
||||
</button>
|
||||
<div class="collapse" id="collapse-additional-fields">
|
||||
<!-- Potential Sources Section -->
|
||||
<div class="form-section">
|
||||
<div class="section-heading">
|
||||
<i class="bi bi-search"></i>
|
||||
<h3>Potential Mosquito Sources</h3>
|
||||
</div>
|
||||
<p class="mb-3">
|
||||
Have you noticed any of these common mosquito breeding sources in
|
||||
your area?
|
||||
</p>
|
||||
|
||||
<div class="card card-highlight mb-4">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Did you know?</h5>
|
||||
<p class="card-text">
|
||||
Mosquitoes can breed in as little as a bottle cap of water!
|
||||
Eliminating standing water is the most effective way to reduce
|
||||
mosquito populations.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-4 mb-4">
|
||||
<!-- Source 1 -->
|
||||
<div class="col-md-4">
|
||||
<div class="card source-card">
|
||||
<div class="card-body text-center">
|
||||
<div class="source-icon">
|
||||
<i class="bi bi-water"></i>
|
||||
</div>
|
||||
<h5 class="card-title">Stagnant Water</h5>
|
||||
<p class="card-text">
|
||||
Green pools, ponds, fountains, or birdbaths that aren't
|
||||
maintained
|
||||
</p>
|
||||
<div class="form-check">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
name="source-stagnant"
|
||||
id="sourceStagnantWater"
|
||||
/>
|
||||
<label class="form-check-label" for="sourceStagnantWater">
|
||||
I've noticed this
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Source 2 -->
|
||||
<div class="col-md-4">
|
||||
<div class="card source-card">
|
||||
<div class="card-body text-center">
|
||||
<div class="source-icon">
|
||||
<i class="bi bi-droplet"></i>
|
||||
</div>
|
||||
<h5 class="card-title">Containers</h5>
|
||||
<p class="card-text">
|
||||
Buckets, planters, toys, tires, or any items that collect
|
||||
rainwater
|
||||
</p>
|
||||
<div class="form-check">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
name="source-container"
|
||||
id="sourceContainers"
|
||||
/>
|
||||
<label class="form-check-label" for="sourceContainers">
|
||||
I've noticed this
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Source 3 -->
|
||||
<div class="col-md-4">
|
||||
<div class="card source-card">
|
||||
<div class="card-body text-center">
|
||||
<div class="source-icon">
|
||||
<i class="bi bi-house"></i>
|
||||
</div>
|
||||
<h5 class="card-title">Sprinklers & Gutters</h5>
|
||||
<p class="card-text">
|
||||
Clogged street gutters, yard drains, or AC units that
|
||||
collect water
|
||||
</p>
|
||||
<div class="form-check">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
name="source-gutters"
|
||||
id="sourceGutters"
|
||||
/>
|
||||
<label class="form-check-label" for="sourceGutters">
|
||||
I've noticed this
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<label for="otherSources" class="form-label"
|
||||
>Have you noticed any other potential mosquito breeding
|
||||
sources?</label
|
||||
>
|
||||
<textarea
|
||||
class="form-control"
|
||||
id="otherSources"
|
||||
name="source-description"
|
||||
rows="2"
|
||||
placeholder="Describe any other potential breeding sites you've noticed..."
|
||||
></textarea>
|
||||
<photo-upload />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-section">
|
||||
<div class="section-heading">
|
||||
<i class="bi bi-card-text"></i>
|
||||
<h3>Additional Information</h3>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<label for="additionalInfo" class="form-label"
|
||||
>Is there anything else you'd like us to know?</label
|
||||
>
|
||||
<textarea
|
||||
class="form-control"
|
||||
id="additionalInfo"
|
||||
maxlength="2048"
|
||||
name="additional-info"
|
||||
rows="4"
|
||||
placeholder="Additional details about the mosquito issue..."
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Submit Section -->
|
||||
<div class="submit-container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-8">
|
||||
<p class="mb-0">
|
||||
<strong>Thank you for reporting this mosquito issue.</strong>
|
||||
</p>
|
||||
<p class="mb-0 small text-muted">
|
||||
After submission, you'll receive a confirmation with a report ID
|
||||
and further information.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-4 text-md-end mt-3 mt-md-0">
|
||||
<button type="submit" class="btn btn-primary btn-lg">
|
||||
Submit Report
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,18 @@
|
|||
import { createRouter, createWebHistory } from "vue-router";
|
||||
import type { RouteRecordRaw } from "vue-router";
|
||||
import Home from "@/rmo/view/Home.vue";
|
||||
import Nuisance from "@/rmo/view/Nuisance.vue";
|
||||
const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: "/",
|
||||
name: "Home",
|
||||
component: Home,
|
||||
},
|
||||
{
|
||||
path: "/nuisance",
|
||||
name: "Nuisance",
|
||||
component: Nuisance,
|
||||
},
|
||||
];
|
||||
|
||||
export const router = createRouter({
|
||||
|
|
|
|||
|
|
@ -57,8 +57,8 @@
|
|||
Report areas with high adult mosquito activity causing
|
||||
discomfort or concern.
|
||||
</p>
|
||||
<RouteLink to="/nuisance" class="btn btn-primary mt-3"
|
||||
>Report Problem</RouteLink
|
||||
<RouterLink to="/nuisance" class="btn btn-primary mt-3"
|
||||
>Report Problem</RouterLink
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -74,8 +74,8 @@
|
|||
Report any water that has been sitting for several days, where
|
||||
mosquitoes can live.
|
||||
</p>
|
||||
<RouteLink to="/water" class="btn btn-primary mt-3"
|
||||
>Report Source</RouteLink
|
||||
<RouterLink to="/water" class="btn btn-primary mt-3"
|
||||
>Report Source</RouterLink
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -91,8 +91,8 @@
|
|||
Check on a previous request or view current mosquito activity
|
||||
in your area.
|
||||
</p>
|
||||
<RouteLink to="/status" class="btn btn-primary mt-3"
|
||||
>Get Status</RouteLink
|
||||
<RouterLink to="/status" class="btn btn-primary mt-3"
|
||||
>Get Status</RouterLink
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
409
ts/rmo/view/Nuisance.vue
Normal file
409
ts/rmo/view/Nuisance.vue
Normal file
|
|
@ -0,0 +1,409 @@
|
|||
<style scoped>
|
||||
.map-container {
|
||||
background-color: #e9ecef;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
||||
height: 500px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<h2>Report Mosquito Nuisance</h2>
|
||||
<p class="lead">Help us identify mosquito activity in your area</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Report Form -->
|
||||
<form
|
||||
id="mosquitoNuisanceForm"
|
||||
action="/api/rmo/nuisance"
|
||||
method="POST"
|
||||
enctype="multipart/form-data"
|
||||
>
|
||||
<!-- Location Section -->
|
||||
<div class="form-section">
|
||||
<div class="section-heading">
|
||||
<i class="bi bi-geo-alt"></i>
|
||||
<h3>Nuisance Location Information</h3>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<div class="alert alert-info" role="info">
|
||||
<p class="mb-0">
|
||||
You can select the location by address or by moving the marker on
|
||||
the map.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3 position-relative">
|
||||
<address-input
|
||||
placeholder="Start typing an address (min 3 characters)"
|
||||
api-key=""
|
||||
>
|
||||
</address-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="small text-muted mb-2">
|
||||
You can also click on the map to mark the location precisely
|
||||
</p>
|
||||
<div class="map-container">
|
||||
<map-locator id="map"></map-locator>
|
||||
</div>
|
||||
<input type="hidden" id="map-zoom" name="map-zoom" />
|
||||
<input type="hidden" id="address-country" name="address-country" />
|
||||
<input type="hidden" id="address-locality" name="address-locality" />
|
||||
<input type="hidden" id="address-number" name="address-number" />
|
||||
<input type="hidden" id="address-postalcode" name="address-postalcode" />
|
||||
<input type="hidden" id="address-region" name="address-region" />
|
||||
<input type="hidden" id="address-street" name="address-street" />
|
||||
<input type="hidden" id="latitude" name="latitude" />
|
||||
<input type="hidden" id="longitude" name="longitude" />
|
||||
<input
|
||||
type="hidden"
|
||||
id="latlng-accuracy-type"
|
||||
name="latlng-accuracy-type"
|
||||
/>
|
||||
<input
|
||||
type="hidden"
|
||||
id="latlng-accuracy-value"
|
||||
name="latlng-accuracy-value"
|
||||
/>
|
||||
|
||||
<!-- Mosquito Activity Section -->
|
||||
<div class="form-section">
|
||||
<div class="section-heading">
|
||||
<i class="bi bi-mosquito-color"></i>
|
||||
<h3>Mosquito Activity Information</h3>
|
||||
</div>
|
||||
<p class="mb-4">
|
||||
The time when mosquitoes are active can help us identify the species
|
||||
and likely breeding sources.
|
||||
</p>
|
||||
|
||||
<!-- Time of Day -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<label class="form-label"
|
||||
>When do you typically notice mosquitoes? (Select all that
|
||||
apply)</label
|
||||
>
|
||||
<div class="row">
|
||||
<div class="col-6 col-md-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="btn-check"
|
||||
id="earlyMorning"
|
||||
name="tod-early"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<label
|
||||
class="btn btn-outline-primary time-of-day-btn"
|
||||
for="earlyMorning"
|
||||
>
|
||||
<span class="time-of-day-icon"
|
||||
><i class="bi bi-sunrise"></i
|
||||
></span>
|
||||
<span class="time-label">Early Morning</span>
|
||||
<small class="text-muted">5am-8am</small>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="btn-check"
|
||||
id="daytime"
|
||||
name="tod-day"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<label
|
||||
class="btn btn-outline-primary time-of-day-btn"
|
||||
for="daytime"
|
||||
>
|
||||
<span class="time-of-day-icon"
|
||||
><i class="bi bi-sun"></i
|
||||
></span>
|
||||
<span class="time-label">Daytime</span>
|
||||
<small class="text-muted">8am-5pm</small>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="btn-check"
|
||||
id="evening"
|
||||
name="tod-evening"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<label
|
||||
class="btn btn-outline-primary time-of-day-btn"
|
||||
for="evening"
|
||||
>
|
||||
<span class="time-of-day-icon"
|
||||
><i class="bi bi-sunset"></i
|
||||
></span>
|
||||
<span class="time-label">Evening</span>
|
||||
<small class="text-muted">5pm-9pm</small>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="btn-check"
|
||||
id="night"
|
||||
name="tod-night"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<label
|
||||
class="btn btn-outline-primary time-of-day-btn"
|
||||
for="night"
|
||||
>
|
||||
<span class="time-of-day-icon"
|
||||
><i class="bi bi-moon-stars"></i
|
||||
></span>
|
||||
<span class="time-label">Night</span>
|
||||
<small class="text-muted">9pm-5am</small>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Duration -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-6">
|
||||
<label for="duration" class="form-label"
|
||||
>How long have you been experiencing this mosquito problem?</label
|
||||
>
|
||||
<select class="form-select" name="duration">
|
||||
<option value="just-noticed">Just noticed recently</option>
|
||||
<option value="few-days">A few days</option>
|
||||
<option value="1-2-weeks">1-2 weeks</option>
|
||||
<option value="2-4-weeks">2-4 weeks</option>
|
||||
<option value="1-3-months">1-3 months</option>
|
||||
<option value="seasonal">All season (recurring issue)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Location -->
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<label for="source-location" class="form-label"
|
||||
>Where on your property do you notice the most mosquito
|
||||
activity?</label
|
||||
>
|
||||
<select
|
||||
class="form-select tall"
|
||||
multiple="true"
|
||||
name="source-location"
|
||||
>
|
||||
<option value="frontyard">Front yard</option>
|
||||
<option value="backyard">Back yard</option>
|
||||
<option value="garden">Garden</option>
|
||||
<option value="pool-area">Pool area</option>
|
||||
<option value="other">Other area</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
id="toggle-additional"
|
||||
class="btn btn-warning"
|
||||
type="button"
|
||||
@click="toggleCollapse()"
|
||||
>
|
||||
Click here to answer a few more questions to better help us solve your
|
||||
mosquito problem
|
||||
</button>
|
||||
<div v-show="!isCollapsed" class="collapse">
|
||||
<!-- Potential Sources Section -->
|
||||
<div class="form-section">
|
||||
<div class="section-heading">
|
||||
<i class="bi bi-search"></i>
|
||||
<h3>Potential Mosquito Sources</h3>
|
||||
</div>
|
||||
<p class="mb-3">
|
||||
Have you noticed any of these common mosquito breeding sources in
|
||||
your area?
|
||||
</p>
|
||||
|
||||
<div class="card card-highlight mb-4">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Did you know?</h5>
|
||||
<p class="card-text">
|
||||
Mosquitoes can breed in as little as a bottle cap of water!
|
||||
Eliminating standing water is the most effective way to reduce
|
||||
mosquito populations.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-4 mb-4">
|
||||
<!-- Source 1 -->
|
||||
<div class="col-md-4">
|
||||
<div class="card source-card">
|
||||
<div class="card-body text-center">
|
||||
<div class="source-icon">
|
||||
<i class="bi bi-water"></i>
|
||||
</div>
|
||||
<h5 class="card-title">Stagnant Water</h5>
|
||||
<p class="card-text">
|
||||
Green pools, ponds, fountains, or birdbaths that aren't
|
||||
maintained
|
||||
</p>
|
||||
<div class="form-check">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
name="source-stagnant"
|
||||
id="sourceStagnantWater"
|
||||
/>
|
||||
<label class="form-check-label" for="sourceStagnantWater">
|
||||
I've noticed this
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Source 2 -->
|
||||
<div class="col-md-4">
|
||||
<div class="card source-card">
|
||||
<div class="card-body text-center">
|
||||
<div class="source-icon">
|
||||
<i class="bi bi-droplet"></i>
|
||||
</div>
|
||||
<h5 class="card-title">Containers</h5>
|
||||
<p class="card-text">
|
||||
Buckets, planters, toys, tires, or any items that collect
|
||||
rainwater
|
||||
</p>
|
||||
<div class="form-check">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
name="source-container"
|
||||
id="sourceContainers"
|
||||
/>
|
||||
<label class="form-check-label" for="sourceContainers">
|
||||
I've noticed this
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Source 3 -->
|
||||
<div class="col-md-4">
|
||||
<div class="card source-card">
|
||||
<div class="card-body text-center">
|
||||
<div class="source-icon">
|
||||
<i class="bi bi-house"></i>
|
||||
</div>
|
||||
<h5 class="card-title">Sprinklers & Gutters</h5>
|
||||
<p class="card-text">
|
||||
Clogged street gutters, yard drains, or AC units that
|
||||
collect water
|
||||
</p>
|
||||
<div class="form-check">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
name="source-gutters"
|
||||
id="sourceGutters"
|
||||
/>
|
||||
<label class="form-check-label" for="sourceGutters">
|
||||
I've noticed this
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<label for="otherSources" class="form-label"
|
||||
>Have you noticed any other potential mosquito breeding
|
||||
sources?</label
|
||||
>
|
||||
<textarea
|
||||
class="form-control"
|
||||
id="otherSources"
|
||||
name="source-description"
|
||||
rows="2"
|
||||
placeholder="Describe any other potential breeding sites you've noticed..."
|
||||
></textarea>
|
||||
<photo-upload />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-section">
|
||||
<div class="section-heading">
|
||||
<i class="bi bi-card-text"></i>
|
||||
<h3>Additional Information</h3>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<label for="additionalInfo" class="form-label"
|
||||
>Is there anything else you'd like us to know?</label
|
||||
>
|
||||
<textarea
|
||||
class="form-control"
|
||||
id="additionalInfo"
|
||||
maxlength="2048"
|
||||
name="additional-info"
|
||||
rows="4"
|
||||
placeholder="Additional details about the mosquito issue..."
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Submit Section -->
|
||||
<div class="submit-container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-8">
|
||||
<p class="mb-0">
|
||||
<strong>Thank you for reporting this mosquito issue.</strong>
|
||||
</p>
|
||||
<p class="mb-0 small text-muted">
|
||||
After submission, you'll receive a confirmation with a report ID
|
||||
and further information.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-4 text-md-end mt-3 mt-md-0">
|
||||
<button type="submit" class="btn btn-primary btn-lg">
|
||||
Submit Report
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
|
||||
const isCollapsed = ref<boolean>(true);
|
||||
const toggleCollapse = () => {
|
||||
isCollapsed.value = !isCollapsed.value;
|
||||
};
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue