Add link to new nuisance mock

This commit is contained in:
Eli Ribble 2026-01-24 19:32:19 +00:00
parent 53397d2609
commit db75826e59
No known key found for this signature in database
3 changed files with 521 additions and 5 deletions

View file

@ -9,23 +9,38 @@ import (
)
var (
mockRootT = buildTemplate("mock/root", "base")
mockDistrictRootT = buildTemplate("mock/district-root", "base")
mockNuisanceT = buildTemplate("mock/nuisance", "base")
mockRootT = buildTemplate("mock/root", "base")
)
type ContentDistrict struct {
LogoURL string
Name string
URLLogo string
}
type ContentURL struct {
Nuisance string
}
type ContentMock struct {
District ContentDistrict
URL ContentURL
}
func addMockRoutes(r chi.Router) {
r.Get("/", renderMock(mockRootT))
r.Get("/nuisance", renderMock(mockNuisanceT))
r.Get("/district/{slug}", renderMock(mockDistrictRootT))
}
func makeContentURL() ContentURL {
return ContentURL{
Nuisance: makeURLMock("nuisance"),
}
}
func makeURLMock(p string) string {
return config.MakeURLReport("/mock/%s", p)
}
func renderMock(t *htmlpage.BuiltTemplate) func(http.ResponseWriter, *http.Request) {
return func(w http.ResponseWriter, r *http.Request) {
slug := chi.URLParam(r, "slug")
@ -34,9 +49,10 @@ func renderMock(t *htmlpage.BuiltTemplate) func(http.ResponseWriter, *http.Reque
t,
ContentMock{
District: ContentDistrict{
LogoURL: config.MakeURLNidus("/api/district/%s/logo", slug),
Name: "Delta MCD",
URLLogo: config.MakeURLNidus("/api/district/%s/logo", slug),
},
URL: makeContentURL(),
},
)
}

View file

@ -36,7 +36,7 @@
<div class="row justify-content-center">
<div class="col-lg-10">
<h2 class="text-center mb-4">Report Mosquitoes for {{.District.Name}}</h2>
<img class="district-logo" src="{{.District.LogoURL}}" />
<img class="district-logo" src="{{.District.URLLogo}}" />
<p class="lead text-center">This is the reporting page for mosquito problems in your area.</p>
<p class="lead text-center">Reports submitted here are reviewed by {{.District.Name}}, which helps identify and address mosquito problems in your community.</p>
</div>
@ -57,7 +57,7 @@
</div>
<h4 class="card-title">Report Mosquito Nuisance</h4>
<p class="card-text">Report areas with high adult mosquito activity causing discomfort or concern.</p>
<a href="/nuisance" class="btn btn-primary mt-3">Report Problem</a>
<a href="{{ .URL.Nuisance }}" class="btn btn-primary mt-3">Report Problem</a>
</div>
</div>
</div>

View file

@ -0,0 +1,500 @@
{{template "base.html" .}}
{{define "title"}}Nuisance{{end}}
{{define "extraheader"}}
<script>
// Handle inspection type selection
function selectInspectionType(type) {
// Remove selected class from both cards
document.getElementById('propertyInspection').classList.remove('selected');
document.getElementById('neighborhoodInspection').classList.remove('selected');
// Add selected class to chosen card
if (type === 'property') {
document.getElementById('propertyInspection').classList.add('selected');
document.getElementById('inspectionTypeProperty').checked = true;
document.getElementById('schedulingSection').style.display = 'block';
} else {
document.getElementById('neighborhoodInspection').classList.add('selected');
document.getElementById('inspectionTypeNeighborhood').checked = true;
document.getElementById('schedulingSection').style.display = 'none';
}
}
// Check for source identification
document.addEventListener('DOMContentLoaded', function() {
const sourceCheckboxes = [
document.getElementById('sourceStagnantWater'),
document.getElementById('sourceContainers'),
document.getElementById('sourceGutters')
];
const sourceAlert = document.getElementById('sourceFoundAlert');
sourceCheckboxes.forEach(checkbox => {
checkbox.addEventListener('change', function() {
// If any source is checked, show the alert
if (sourceCheckboxes.some(cb => cb.checked)) {
sourceAlert.style.display = 'block';
} else {
sourceAlert.style.display = 'none';
}
});
});
});
</script>
<style>
.district-logo {
max-height: 80px;
width: auto;
}
.form-section {
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: 1px solid #dee2e6;
}
.form-section:last-child {
border-bottom: none;
margin-bottom: 1rem;
padding-bottom: 0;
}
.section-heading {
margin-bottom: 1.5rem;
display: flex;
align-items: center;
}
.section-heading i {
margin-right: 10px;
font-size: 1.5rem;
color: #0d6efd;
}
.optional-label {
font-size: 0.875rem;
color: #6c757d;
font-weight: normal;
margin-left: 8px;
}
.submit-container {
background-color: #f8f9fa;
padding: 20px;
border-radius: 5px;
margin-top: 2rem;
}
.source-card {
height: 100%;
transition: transform 0.3s;
}
.source-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.source-icon {
font-size: 2rem;
margin-bottom: 1rem;
color: #0d6efd;
}
.time-of-day-btn {
width: 100%;
margin-bottom: 10px;
display: flex;
flex-direction: column;
align-items: center;
padding: 15px 0;
}
.time-of-day-icon {
font-size: 1.5rem;
margin-bottom: 8px;
}
.time-label {
font-size: 0.9rem;
}
.severity-item {
text-align: center;
padding: 10px;
}
.severity-scale {
display: flex;
justify-content: space-between;
margin: 20px 0;
}
.btn-check:checked + .btn.time-of-day-btn {
background-color: #0d6efd;
color: white;
}
.inspection-type-card {
cursor: pointer;
border: 1px solid #dee2e6;
padding: 20px;
border-radius: 5px;
height: 100%;
transition: all 0.3s;
}
.inspection-type-card.selected {
border-color: #0d6efd;
background-color: rgba(13, 110, 253, 0.05);
}
.inspection-type-card:hover {
border-color: #0d6efd;
}
.card-highlight {
border-left: 4px solid #0d6efd;
background-color: #f8f9fa;
}
</style>
{{end}}
{{define "content"}}
<div class="container">
<!-- Page Title -->
<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>
<!-- Info Alert -->
<div class="row mb-4">
<div class="col-12">
<div class="alert alert-info" role="alert">
<h5 class="alert-heading"><i class="bi bi-info-circle me-2"></i>How Your Report Helps</h5>
<p class="mb-0">When you submit this form, our team uses the information you provide along with mosquito surveillance data to identify likely mosquito production sites and plan effective control actions. This allows us to target the sources of mosquitoes and reduce mosquito populations in your neighborhood.</p>
</div>
</div>
</div>
<!-- Report Form -->
<form id="mosquitoNuisanceForm" action="/nuisance-submit" method="POST">
<!-- Mosquito Activity Section -->
<div class="form-section">
<div class="section-heading">
<i class="bi bi-bug"></i>
<h3>Mosquito Activity Information</h3>
<span class="optional-label">optional</span>
</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>
<!-- Severity -->
<div class="col-md-6">
<label for="severityRange" class="form-label">How would you rate the severity of the mosquito problem?</label>
<input type="range" class="form-range" id="severityRange" min="1" max="5" name="severity" oninput="document.getElementById('severityValue').innerText = this.value">
<div class="severity-scale">
<div class="severity-item">
<div>Minor</div>
<small>Occasional mosquito</small>
</div>
<div class="severity-item">
<div>Moderate</div>
<small>Regular presence</small>
</div>
<div class="severity-item">
<div>Severe</div>
<small>Many mosquitoes</small>
</div>
</div>
<div class="text-center">
Current selection: <span id="severityValue">3</span>/5
</div>
</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" name="source-location">
<option value="">Please select</option>
<option value="front-yard">Front yard</option>
<option value="backyard">Back yard</option>
<option value="patio">Patio/deck area</option>
<option value="garden">Garden</option>
<option value="pool-area">Pool area</option>
<option value="throughout">Throughout the property</option>
<option value="indoors">Indoors</option>
<option value="other">Other area</option>
</select>
</div>
</div>
</div>
<!-- Potential Sources Section -->
<div class="form-section">
<div class="section-heading">
<i class="bi bi-search"></i>
<h3>Potential Mosquito Sources</h3>
<span class="optional-label">optional</span>
</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">Roof & Gutters</h5>
<p class="card-text">Clogged gutters, flat roofs, or AC units that collect water</p>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="source-roof" id="sourceGutters">
<label class="form-check-label" for="sourceGutters">
I've noticed this
</label>
</div>
</div>
</div>
</div>
</div>
<div class="alert alert-warning mb-4" id="sourceFoundAlert" style="display: none;">
<h5 class="alert-heading"><i class="bi bi-exclamation-triangle me-2"></i>Potential Breeding Source Found!</h5>
<p>It looks like you may have identified a mosquito breeding source. If you'd like to report a specific source (like a green pool), please use our <a href="/report-green-pool" class="alert-link">Report a Green Pool</a> form for faster service.</p>
</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>
</div>
</div>
</div>
<!-- Inspection Request Section -->
<div class="form-section">
<div class="section-heading">
<i class="bi bi-clipboard-check"></i>
<h3>Inspection Request</h3>
</div>
<p class="mb-4">Would you like our technicians to inspect for potential mosquito sources?</p>
<div class="row g-4 mb-4">
<div class="col-md-6">
<div class="inspection-type-card" onclick="selectInspectionType('property')" id="propertyInspection">
<h5><i class="bi bi-house-door me-2"></i>Property Inspection</h5>
<p>Request a technician to inspect your property for mosquito sources. We'll contact you to schedule a convenient time.</p>
<div class="form-check">
<input class="form-check-input" type="radio" name="inspection-type" id="inspectionTypeProperty" value="property">
<label class="form-check-label" for="inspectionTypeProperty">
<strong>Schedule a property inspection</strong>
</label>
</div>
</div>
</div>
<div class="col-md-6">
<div class="inspection-type-card" onclick="selectInspectionType('neighborhood')" id="neighborhoodInspection">
<h5><i class="bi bi-map me-2"></i>Neighborhood Inspection</h5>
<p>Request a general inspection of your neighborhood. We'll survey the area for potential mosquito breeding sources.</p>
<div class="form-check">
<input class="form-check-input" type="radio" name="inspection-type" id="inspectionTypeNeighborhood" value="neighborhood">
<label class="form-check-label" for="inspectionTypeNeighborhood">
<strong>Request neighborhood inspection</strong>
</label>
</div>
</div>
</div>
</div>
<!-- Property Inspection Scheduling (hidden by default) -->
<div id="schedulingSection" style="display: none;">
<div class="card mb-4">
<div class="card-body">
<h5 class="card-title">Schedule Property Inspection</h5>
<p class="card-text">Please indicate your availability for a technician visit.</p>
<div class="row mb-3">
<div class="col-md-6">
<label for="preferredDateRange" class="form-label">Preferred Date Range</label>
<select class="form-select" id="preferredDateRange" name="preferred-date-range">
<option value="">Select preferred dates</option>
<option value="next-week">Next week</option>
<option value="in-two-weeks">In two weeks</option>
<option value="any-time">Any time</option>
</select>
</div>
<div class="col-md-6">
<label for="preferredTime" class="form-label">Preferred Time of Day</label>
<select class="form-select" id="preferredTime" name="preferred-time">
<option value="">Select preferred time</option>
<option value="morning">Morning (8am-12pm)</option>
<option value="afternoon">Afternoon (12pm-4pm)</option>
<option value="any-time">Any time</option>
</select>
</div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="requestCall" name="request-call">
<label class="form-check-label" for="requestCall">
Please call me to schedule a specific appointment time
</label>
</div>
</div>
</div>
</div>
</div>
<!-- Location & Contact Section -->
<div class="form-section">
<div class="section-heading">
<i class="bi bi-geo-alt"></i>
<h3>Location & Contact Information</h3>
</div>
<div class="row mb-4">
<div class="col-md-12">
<label for="address" class="form-label">Your Address</label>
<input type="text" class="form-control" name="address" placeholder="Enter your street address">
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="name" class="form-label">Your Name</label>
<input type="text" class="form-control" name="name">
</div>
<div class="col-md-6 mb-3">
<label for="phone" class="form-label">Phone Number</label>
<input type="tel" class="form-control" id="phone" name="phone">
</div>
<div class="col-md-12 mb-3">
<label for="email" class="form-label">Email Address</label>
<input type="email" class="form-control" id="email" name="email">
<div class="form-text">We'll use this to send you a confirmation and follow-up information.</div>
</div>
</div>
</div>
<div class="form-section">
<div class="section-heading">
<i class="bi bi-card-text"></i>
<h3>Additional Information</h3>
<span class="optional-label">optional</span>
</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" name="additional-info" rows="4" placeholder="Additional details about the mosquito issue..."></textarea>
</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}}