Collapse public-report to a single package
It was just getting annoying having it separate, and buying basically nothing.
This commit is contained in:
parent
d377d9a7d2
commit
632fac4558
15 changed files with 519 additions and 560 deletions
|
|
@ -1,50 +0,0 @@
|
|||
package publicreports
|
||||
|
||||
import (
|
||||
"embed"
|
||||
"fmt"
|
||||
|
||||
"github.com/Gleipnir-Technology/nidus-sync/htmlpage"
|
||||
)
|
||||
|
||||
//go:embed template/*
|
||||
var embeddedFiles embed.FS
|
||||
|
||||
//go:embed static/*
|
||||
var EmbeddedStaticFS embed.FS
|
||||
|
||||
type ContextNuisance struct{}
|
||||
type ContextPool struct{}
|
||||
type ContextQuick struct{}
|
||||
type ContextQuickSubmitComplete struct {
|
||||
ReportID string
|
||||
}
|
||||
type ContextRegisterNotificationsComplete struct {
|
||||
ReportID string
|
||||
}
|
||||
type ContextRoot struct{}
|
||||
type ContextStatus struct{}
|
||||
|
||||
var (
|
||||
Nuisance = buildTemplate("nuisance", "base")
|
||||
Pool = buildTemplate("pool", "base")
|
||||
Quick = buildTemplate("quick", "base")
|
||||
QuickSubmitComplete = buildTemplate("quick-submit-complete", "base")
|
||||
RegisterNotificationsComplete = buildTemplate("register-notifications-complete", "base")
|
||||
Root = buildTemplate("root", "base")
|
||||
Status = buildTemplate("status", "base")
|
||||
)
|
||||
|
||||
var components = [...]string{"footer"}
|
||||
|
||||
func buildTemplate(files ...string) *htmlpage.BuiltTemplate {
|
||||
subdir := "htmlpage/public-reports"
|
||||
full_files := make([]string, 0)
|
||||
for _, f := range files {
|
||||
full_files = append(full_files, fmt.Sprintf("%s/template/%s.html", subdir, f))
|
||||
}
|
||||
for _, c := range components {
|
||||
full_files = append(full_files, fmt.Sprintf("%s/template/component/%s.html", subdir, c))
|
||||
}
|
||||
return htmlpage.NewBuiltTemplate(embeddedFiles, "htmlpage/public-reports/", full_files...)
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,20 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{template "title" .}} - Nidus Sync</title>
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="/static/vendor/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Bootstrap Icons -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
|
||||
<!-- Fontawesome Icons -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
{{block "extraheader" .}} {{end}}
|
||||
</head>
|
||||
<body>
|
||||
{{template "content" .}}
|
||||
{{template "footer" .}}
|
||||
<script src="/static/vendor/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
{{define "footer"}}
|
||||
<footer class="bg-dark text-white py-4">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<p class="mb-0">© 2025 Gleipnir Technology</p>
|
||||
</div>
|
||||
<div class="col-md-6 text-md-end">
|
||||
<p class="mb-0">Contact: support@mosquitoes.online</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
{{end}}
|
||||
|
|
@ -1,541 +0,0 @@
|
|||
{{template "base.html" .}}
|
||||
|
||||
{{define "title"}}Dash{{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"}}
|
||||
<!-- Header -->
|
||||
<header class="bg-light py-3">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-6">
|
||||
<h1 class="district-name">[District Name]</h1>
|
||||
</div>
|
||||
<div class="col-md-6 text-md-end">
|
||||
<img src="placeholder-logo.png" alt="District Logo" class="district-logo">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="py-5">
|
||||
<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>About Mosquito Control</h5>
|
||||
<p class="mb-0">While we don't spray for adult mosquitoes based on individual requests, your reports help us identify and eliminate breeding sources. Adult mosquito control is based on trap counts and disease testing. Your detailed information helps us prioritize our work and locate potential breeding sites.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Report Form -->
|
||||
<form id="mosquitoNuisanceForm">
|
||||
<!-- 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" 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" 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" 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" 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" id="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" min="1" max="5" id="severityRange" 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="activityLocation" class="form-label">Where on your property do you notice the most mosquito activity?</label>
|
||||
<select class="form-select" id="activityLocation">
|
||||
<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" 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" 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" 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" 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="inspectionType" 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="inspectionType" 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">
|
||||
<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">
|
||||
<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">
|
||||
<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" id="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" id="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">
|
||||
</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">
|
||||
<div class="form-text">We'll use this to send you a confirmation and follow-up information.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Additional Information Section -->
|
||||
<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" 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>
|
||||
|
||||
<!-- Back Button -->
|
||||
<div class="row mt-4">
|
||||
<div class="col-12">
|
||||
<a href="/" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-arrow-left"></i> Back to Home
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-dark text-white py-4">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<p class="mb-0">© 2023 [District Name] Mosquito Management District</p>
|
||||
</div>
|
||||
<div class="col-md-6 text-md-end">
|
||||
<p class="mb-0">Contact: (555) 123-4567 | info@mosquitodistrict.gov</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
{{end}}
|
||||
|
|
@ -1,495 +0,0 @@
|
|||
{{template "base.html" .}}
|
||||
|
||||
{{define "title"}}Green Pool{{end}}
|
||||
{{define "extraheader"}}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const photoUpload = document.getElementById('photoUpload');
|
||||
const imagePreview = document.getElementById('imagePreview');
|
||||
const dropArea = document.getElementById('dropArea');
|
||||
|
||||
// Handle file selection
|
||||
photoUpload.addEventListener('change', handleFileSelect);
|
||||
|
||||
// Handle drag and drop
|
||||
dropArea.addEventListener('dragover', function(e) {
|
||||
e.preventDefault();
|
||||
dropArea.style.backgroundColor = '#e9ecef';
|
||||
});
|
||||
|
||||
dropArea.addEventListener('dragleave', function() {
|
||||
dropArea.style.backgroundColor = '#f8f9fa';
|
||||
});
|
||||
|
||||
dropArea.addEventListener('drop', function(e) {
|
||||
e.preventDefault();
|
||||
dropArea.style.backgroundColor = '#f8f9fa';
|
||||
|
||||
if (e.dataTransfer.files.length) {
|
||||
handleFiles(e.dataTransfer.files);
|
||||
}
|
||||
});
|
||||
|
||||
function handleFileSelect(e) {
|
||||
const files = e.target.files;
|
||||
handleFiles(files);
|
||||
}
|
||||
|
||||
function handleFiles(files) {
|
||||
const maxFiles = 5;
|
||||
const currentFiles = imagePreview.querySelectorAll('.preview-item').length;
|
||||
|
||||
for (let i = 0; i < files.length && currentFiles + i < maxFiles; i++) {
|
||||
const file = files[i];
|
||||
|
||||
if (!file.type.match('image.*')) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onload = (function(theFile) {
|
||||
return function(e) {
|
||||
const previewItem = document.createElement('div');
|
||||
previewItem.className = 'preview-item';
|
||||
|
||||
const img = document.createElement('img');
|
||||
img.src = e.target.result;
|
||||
|
||||
const removeBtn = document.createElement('div');
|
||||
removeBtn.className = 'preview-remove';
|
||||
removeBtn.innerHTML = 'x';
|
||||
removeBtn.addEventListener('click', function() {
|
||||
imagePreview.removeChild(previewItem);
|
||||
});
|
||||
|
||||
previewItem.appendChild(img);
|
||||
previewItem.appendChild(removeBtn);
|
||||
imagePreview.appendChild(previewItem);
|
||||
};
|
||||
})(file);
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
|
||||
photoUpload.value = '';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.district-logo {
|
||||
max-height: 80px;
|
||||
width: auto;
|
||||
}
|
||||
.map-container {
|
||||
height: 300px;
|
||||
background-color: #e9ecef;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #dee2e6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.file-upload-container {
|
||||
border: 2px dashed #dee2e6;
|
||||
border-radius: 5px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
background-color: #f8f9fa;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
.file-upload-container:hover {
|
||||
background-color: #e9ecef;
|
||||
cursor: pointer;
|
||||
}
|
||||
.image-preview {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.preview-item {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.preview-item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.preview-remove {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
{{end}}
|
||||
{{define "content"}}
|
||||
<!-- Main Content -->
|
||||
<main class="py-5">
|
||||
<div class="container">
|
||||
<!-- Page Title -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<h2>Report a Green Pool or Mosquito Source</h2>
|
||||
<p class="lead">Help us locate and treat potential mosquito breeding sources 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>All fields are optional</h5>
|
||||
<p class="mb-0">We appreciate any information you can provide. The more details you share, the better we can address the issue. Photos and location information are especially helpful.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Report Form -->
|
||||
<form id="greenPoolForm">
|
||||
<!-- Photo Upload Section -->
|
||||
<div class="form-section">
|
||||
<div class="section-heading">
|
||||
<i class="bi bi-camera"></i>
|
||||
<h3>Photos</h3>
|
||||
<span class="optional-label">optional</span>
|
||||
</div>
|
||||
<p class="mb-3">Photos help us identify the severity of the issue and may contain location data that can help us find the source.</p>
|
||||
|
||||
<div class="file-upload-container" id="dropArea">
|
||||
<input type="file" id="photoUpload" multiple accept="image/*" class="d-none">
|
||||
<div class="mb-2">
|
||||
<i class="bi bi-cloud-arrow-up fs-1 text-primary"></i>
|
||||
</div>
|
||||
<p class="mb-1"><strong>Drag and drop photos here</strong></p>
|
||||
<p class="mb-1">- or -</p>
|
||||
<button type="button" class="btn btn-primary mt-2" onclick="document.getElementById('photoUpload').click()">
|
||||
Select Photos
|
||||
</button>
|
||||
<p class="small text-muted mt-2 mb-0">You can upload multiple photos (maximum 5)</p>
|
||||
</div>
|
||||
|
||||
<!-- Image Preview Area -->
|
||||
<div class="image-preview" id="imagePreview">
|
||||
<!-- Preview items will be added here dynamically -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Location Section -->
|
||||
<div class="form-section">
|
||||
<div class="section-heading">
|
||||
<i class="bi bi-geo-alt"></i>
|
||||
<h3>Location</h3>
|
||||
<span class="optional-label">optional</span>
|
||||
</div>
|
||||
<p class="mb-3">Please provide the location of the potential mosquito breeding source. We may be able to extract this information from your photos if they contain location data.</p>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-12">
|
||||
<label for="address" class="form-label">Address or Description of Location</label>
|
||||
<input type="text" class="form-control" id="address" placeholder="123 Main St, City, State or nearby landmark description">
|
||||
</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">
|
||||
<div class="text-center">
|
||||
<i class="bi bi-map fs-1 text-secondary"></i>
|
||||
<p class="mb-0">Interactive Map</p>
|
||||
<p class="text-muted small">Click to set the location of the mosquito source</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Source Details Section -->
|
||||
<div class="form-section">
|
||||
<div class="section-heading">
|
||||
<i class="bi bi-water"></i>
|
||||
<h3>Source Details</h3>
|
||||
<span class="optional-label">optional</span>
|
||||
</div>
|
||||
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-6">
|
||||
<label for="duration" class="form-label">How long has this source been present?</label>
|
||||
<select class="form-select" id="duration">
|
||||
<option value="">I don't know</option>
|
||||
<option value="less-than-week">Less than a week</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="more-than-3-months">More than 3 months</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<label class="form-label d-block">Have you observed any of the following? <a href="#" data-bs-toggle="modal" data-bs-target="#larvaeInfoModal"><i class="bi bi-question-circle small ms-1"></i></a></label>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="larvae">
|
||||
<label class="form-check-label" for="larvae">
|
||||
Larvae (wigglers) in water
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="pupae">
|
||||
<label class="form-check-label" for="pupae">
|
||||
Pupae (tumblers) in water
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="adultMosquitoes">
|
||||
<label class="form-check-label" for="adultMosquitoes">
|
||||
Adult mosquitoes near the source
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Access Information Section -->
|
||||
<div class="form-section">
|
||||
<div class="section-heading">
|
||||
<i class="bi bi-unlock"></i>
|
||||
<h3>Access Information</h3>
|
||||
<span class="optional-label">optional</span>
|
||||
</div>
|
||||
<p class="mb-3">Please provide any details about how to access the mosquito source. This helps our technicians when they visit the site.</p>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-12">
|
||||
<label for="accessInfo" class="form-label">How can the source be accessed?</label>
|
||||
<textarea class="form-control" id="accessInfo" rows="3" placeholder="Example: The pool is in the backyard, which can be accessed through a side gate on the right side of the house."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-12">
|
||||
<label class="form-label d-block">Access obstacles (check all that apply):</label>
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="gate">
|
||||
<label class="form-check-label" for="gate">Gate</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="fence">
|
||||
<label class="form-check-label" for="fence">Fence</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="lockedEntrance">
|
||||
<label class="form-check-label" for="lockedEntrance">Locked entrance</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="dogs">
|
||||
<label class="form-check-label" for="dogs">Dogs/pets</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="otherObstacle">
|
||||
<label class="form-check-label" for="otherObstacle">Other obstacle</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Information Sections -->
|
||||
<div class="form-section">
|
||||
<div class="section-heading">
|
||||
<i class="bi bi-person-lines-fill"></i>
|
||||
<h3>Contact Information</h3>
|
||||
<span class="optional-label">optional</span>
|
||||
</div>
|
||||
|
||||
<!-- Property Owner Information -->
|
||||
<h5 class="mb-3">Property Owner Information (if known)</h5>
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="ownerName" class="form-label">Owner Name</label>
|
||||
<input type="text" class="form-control" id="ownerName">
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="ownerPhone" class="form-label">Owner Phone</label>
|
||||
<input type="tel" class="form-control" id="ownerPhone">
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<label for="ownerEmail" class="form-label">Owner Email</label>
|
||||
<input type="email" class="form-control" id="ownerEmail">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Your Contact Information -->
|
||||
<h5 class="mb-3">Your Contact Information (for updates)</h5>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="reporterName" class="form-label">Your Name</label>
|
||||
<input type="text" class="form-control" id="reporterName">
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="reporterPhone" class="form-label">Your Phone</label>
|
||||
<input type="tel" class="form-control" id="reporterPhone">
|
||||
</div>
|
||||
<div class="col-md-12 mb-3">
|
||||
<label for="reporterEmail" class="form-label">Your Email</label>
|
||||
<input type="email" class="form-control" id="reporterEmail">
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="receiveUpdates" checked>
|
||||
<label class="form-check-label" for="receiveUpdates">
|
||||
I would like to receive updates on this report
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Additional Information Section -->
|
||||
<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>
|
||||
<p class="mb-3">Please provide any other information that might help us address this mosquito source.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<label for="additionalInfo" class="form-label">Additional Details</label>
|
||||
<textarea class="form-control" id="additionalInfo" rows="4" placeholder="Example: The house appears to be vacant. There is algae growth in the pool. I've noticed increased mosquito activity in the evenings."></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 helping us keep our community safe from mosquito-borne illnesses.</strong></p>
|
||||
<p class="mb-0 small text-muted">After submission, you will receive a confirmation with a report ID for tracking purposes.</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>
|
||||
|
||||
<!-- Back Button -->
|
||||
<div class="row mt-4">
|
||||
<div class="col-12">
|
||||
<a href="/" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-arrow-left"></i> Back to Home
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Larvae Info Modal -->
|
||||
<div class="modal fade" id="larvaeInfoModal" tabindex="-1" aria-labelledby="larvaeInfoModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="larvaeInfoModalLabel">How to Identify Mosquito Larvae and Pupae</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-6">
|
||||
<h6>Mosquito Larvae (Wigglers)</h6>
|
||||
<p>Mosquito larvae, often called "wigglers," are:</p>
|
||||
<ul>
|
||||
<li>Small, worm-like aquatic organisms</li>
|
||||
<li>Usually 1/4 to 1/2 inch long</li>
|
||||
<li>Move with a wiggling motion in water</li>
|
||||
<li>Hang upside-down at the water surface to breathe</li>
|
||||
<li>Visible to the naked eye in standing water</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6>Mosquito Pupae (Tumblers)</h6>
|
||||
<p>Mosquito pupae, often called "tumblers," are:</p>
|
||||
<ul>
|
||||
<li>Comma-shaped organisms</li>
|
||||
<li>Typically darker than larvae</li>
|
||||
<li>Move with a tumbling motion when disturbed</li>
|
||||
<li>Rest at the water surface</li>
|
||||
<li>The stage just before adult mosquitoes emerge</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p>When looking for mosquito larvae and pupae, check standing water sources like:</p>
|
||||
<ul>
|
||||
<li>Swimming pools</li>
|
||||
<li>Bird baths</li>
|
||||
<li>Buckets or containers</li>
|
||||
<li>Drainage ditches</li>
|
||||
<li>Plant saucers</li>
|
||||
<li>Rain gutters</li>
|
||||
</ul>
|
||||
<p>If you see small creatures moving in standing water, there's a good chance they're mosquito larvae or pupae.</p>
|
||||
<div class="text-center">
|
||||
<a href="#" class="btn btn-outline-primary">View Detailed Identification Guide</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
|
@ -1,125 +0,0 @@
|
|||
{{template "base.html" .}}
|
||||
|
||||
{{define "title"}}Dash{{end}}
|
||||
{{define "extraheader"}}
|
||||
<style>
|
||||
</style>
|
||||
<script>
|
||||
</script>
|
||||
{{end}}
|
||||
{{define "content"}}
|
||||
<div class="container py-5">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<!-- Success Card -->
|
||||
<div class="card shadow-sm border-success mb-4">
|
||||
<div class="card-header bg-success text-white">
|
||||
<h3 class="my-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check-circle-fill me-2" viewBox="0 0 16 16">
|
||||
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
|
||||
</svg>
|
||||
Report Successfully Submitted
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body p-4">
|
||||
<div class="text-center mb-4">
|
||||
<p class="lead">Thank you for helping us control mosquito populations in your area!</p>
|
||||
<div class="alert alert-info py-3">
|
||||
<strong>Your Report ID:</strong>
|
||||
<span class="fs-4 fw-bold">{{.ReportID}}</span>
|
||||
</div>
|
||||
<p class="text-muted">Please save this ID for your reference.</p>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
|
||||
<!-- Status Check Section -->
|
||||
<div class="mb-4">
|
||||
<h4 class="mb-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-search me-2" viewBox="0 0 16 16">
|
||||
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
|
||||
</svg>
|
||||
Check Your Report Status
|
||||
</h4>
|
||||
<p>You can check the status of your report at any time using your Report ID.</p>
|
||||
<a href="/check-report-status" class="btn btn-outline-primary">
|
||||
Check Status
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
|
||||
<!-- Notifications Section -->
|
||||
<div>
|
||||
<h4 class="mb-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-bell me-2" viewBox="0 0 16 16">
|
||||
<path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z"/>
|
||||
</svg>
|
||||
Get Updates
|
||||
</h4>
|
||||
<p>Provide your contact information to receive updates about your report.</p>
|
||||
|
||||
<form id="notificationForm" action="/register-notifications" method="post" class="needs-validation" novalidate>
|
||||
<input type="hidden" name="report_id" value="{{.ReportID}}">
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="email" class="form-label">Email Address</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16">
|
||||
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z"/>
|
||||
</svg>
|
||||
</span>
|
||||
<input type="email" class="form-control" id="email" name="email" placeholder="your@email.com">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="phone" class="form-label">Phone Number (for SMS updates)</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-phone" viewBox="0 0 16 16">
|
||||
<path d="M11 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z"/>
|
||||
<path d="M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
|
||||
</svg>
|
||||
</span>
|
||||
<input type="tel" class="form-control" id="phone" name="phone" placeholder="(123) 456-7890">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-check mb-3">
|
||||
<input class="form-check-input" type="checkbox" id="consent" name="consent" required>
|
||||
<label class="form-check-label" for="consent">
|
||||
I consent to receiving updates about this report
|
||||
</label>
|
||||
<div class="invalid-feedback">
|
||||
You must consent to receive notifications.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary">Register for Updates</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Links -->
|
||||
<div class="text-center">
|
||||
<a href="/" class="btn btn-outline-secondary me-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house me-1" viewBox="0 0 16 16">
|
||||
<path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5 5 5Z"/>
|
||||
</svg>
|
||||
Return to Home
|
||||
</a>
|
||||
<a href="/report-mosquito" class="btn btn-outline-success">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle me-1" viewBox="0 0 16 16">
|
||||
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
|
||||
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
|
||||
</svg>
|
||||
Submit Another Report
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
|
@ -1,300 +0,0 @@
|
|||
{{template "base.html" .}}
|
||||
|
||||
{{define "title"}}Dash{{end}}
|
||||
{{define "extraheader"}}
|
||||
<style>
|
||||
.district-logo {
|
||||
max-height: 60px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.photo-upload-area {
|
||||
border: 2px dashed #ccc;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.photo-preview {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.photo-preview img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
padding: 15px 0;
|
||||
font-size: 1.25rem;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.location-info {
|
||||
background-color: #e9f5ff;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.header-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Elements
|
||||
const form = document.getElementById('mosquitoReportForm');
|
||||
const photoInput = document.getElementById('photos');
|
||||
const photoPreviewContainer = document.getElementById('photoPreviewContainer');
|
||||
const locationStatus = document.getElementById('locationStatus');
|
||||
const latitudeInput = document.getElementById('latitude');
|
||||
const longitudeInput = document.getElementById('longitude');
|
||||
const submitButton = document.getElementById('submitButton');
|
||||
const loadingOverlay = document.getElementById('loadingOverlay');
|
||||
|
||||
// Get current location
|
||||
requestLocation();
|
||||
|
||||
// Handle photo selection
|
||||
photoInput.addEventListener('change', handlePhotoSelection);
|
||||
|
||||
// Handle form submission
|
||||
form.addEventListener('submit', handleFormSubmission);
|
||||
|
||||
/**
|
||||
* Request user's geolocation
|
||||
*/
|
||||
function requestLocation() {
|
||||
if (navigator.geolocation) {
|
||||
locationStatus.textContent = "Requesting your location...";
|
||||
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
// Success callback
|
||||
function(position) {
|
||||
locationStatus.textContent = "Location successfully added";
|
||||
locationStatus.classList.add('text-success');
|
||||
|
||||
// Store location in hidden fields
|
||||
latitudeInput.value = position.coords.latitude;
|
||||
longitudeInput.value = position.coords.longitude;
|
||||
},
|
||||
// Error callback
|
||||
function(error) {
|
||||
let errorMessage = "Unable to get your location";
|
||||
switch(error.code) {
|
||||
case error.PERMISSION_DENIED:
|
||||
errorMessage = "Location access denied. Please enable location services.";
|
||||
break;
|
||||
case error.POSITION_UNAVAILABLE:
|
||||
errorMessage = "Location information unavailable.";
|
||||
break;
|
||||
case error.TIMEOUT:
|
||||
errorMessage = "Location request timed out.";
|
||||
break;
|
||||
}
|
||||
locationStatus.textContent = errorMessage;
|
||||
locationStatus.classList.add('text-danger');
|
||||
},
|
||||
// Options
|
||||
{
|
||||
enableHighAccuracy: true,
|
||||
timeout: 10000,
|
||||
maximumAge: 0
|
||||
}
|
||||
);
|
||||
} else {
|
||||
locationStatus.textContent = "Geolocation is not supported by your browser";
|
||||
locationStatus.classList.add('text-danger');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle photo selection and preview
|
||||
*/
|
||||
function handlePhotoSelection() {
|
||||
// Clear previous previews
|
||||
photoPreviewContainer.innerHTML = '';
|
||||
|
||||
// Check if files were selected
|
||||
if (photoInput.files && photoInput.files.length > 0) {
|
||||
// Loop through selected files
|
||||
Array.from(photoInput.files).forEach((file, index) => {
|
||||
if (!file.type.match('image.*')) {
|
||||
return; // Skip non-image files
|
||||
}
|
||||
|
||||
// Create preview container
|
||||
const previewContainer = document.createElement('div');
|
||||
previewContainer.className = 'position-relative m-1';
|
||||
|
||||
// Create image preview
|
||||
const img = document.createElement('img');
|
||||
img.className = 'img-thumbnail';
|
||||
img.style.width = '100px';
|
||||
img.style.height = '100px';
|
||||
img.style.objectFit = 'cover';
|
||||
|
||||
// Read file and set preview
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
img.src = e.target.result;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
|
||||
// Create remove button
|
||||
const removeBtn = document.createElement('button');
|
||||
removeBtn.type = 'button';
|
||||
removeBtn.className = 'btn btn-sm btn-danger position-absolute top-0 end-0';
|
||||
removeBtn.innerHTML = '×';
|
||||
removeBtn.style.fontSize = '10px';
|
||||
removeBtn.style.padding = '0 5px';
|
||||
|
||||
// Handle remove button click
|
||||
removeBtn.addEventListener('click', function() {
|
||||
// Create a new FileList without this file
|
||||
// Since FileList is immutable, we need to reset the input
|
||||
// This is a bit tricky and requires recreating the input
|
||||
previewContainer.remove();
|
||||
|
||||
// If this was the last image, clear the input entirely
|
||||
if (photoPreviewContainer.children.length === 0) {
|
||||
photoInput.value = '';
|
||||
}
|
||||
// Note: Unfortunately, selectively removing files from a FileList isn't straightforward
|
||||
// In a real implementation, we might track selected files in an array and recreate the input
|
||||
});
|
||||
|
||||
// Add elements to the preview container
|
||||
previewContainer.appendChild(img);
|
||||
previewContainer.appendChild(removeBtn);
|
||||
photoPreviewContainer.appendChild(previewContainer);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle form submission
|
||||
*/
|
||||
function handleFormSubmission(event) {
|
||||
event.preventDefault();
|
||||
|
||||
// Show loading overlay
|
||||
loadingOverlay.classList.remove('d-none');
|
||||
|
||||
// Disable submit button to prevent double submission
|
||||
submitButton.disabled = true;
|
||||
|
||||
// Create FormData object
|
||||
const formData = new FormData(form);
|
||||
|
||||
// Send AJAX request
|
||||
fetch(form.action, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
// Navigate to the URL the server specified
|
||||
window.location.href = response.url;
|
||||
return;
|
||||
}
|
||||
console.error("not ok server response", response);
|
||||
throw new Error("Server error " + response.status);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
alert('There was a problem submitting your report. Please try again. If this happens a few times, please let us know.');
|
||||
|
||||
// Re-enable submit button
|
||||
submitButton.disabled = false;
|
||||
|
||||
// Hide loading overlay
|
||||
loadingOverlay.classList.add('d-none');
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{{end}}
|
||||
{{define "content"}}
|
||||
<!-- Main Content -->
|
||||
<main class="container mb-5">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body p-4">
|
||||
<h2 class="card-title text-center mb-4">Quick Mosquito Report</h2>
|
||||
|
||||
<!-- Form -->
|
||||
<form id="mosquitoReportForm" action="/quick-submit" method="POST" enctype="multipart/form-data">
|
||||
<!-- Location Automatic Collection Note -->
|
||||
<div class="location-info d-flex align-items-center mb-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-geo-alt me-2" viewBox="0 0 16 16">
|
||||
<path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z"/>
|
||||
<path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
|
||||
</svg>
|
||||
<span id="locationStatus">Requesting your location...</span>
|
||||
<!-- Hidden fields for location data -->
|
||||
<input type="hidden" id="latitude" name="latitude">
|
||||
<input type="hidden" id="longitude" name="longitude">
|
||||
</div>
|
||||
|
||||
<!-- Photo Upload -->
|
||||
<div class="mb-4">
|
||||
<label for="photos" class="form-label fw-bold">Photos (Optional)</label>
|
||||
<div class="photo-upload-area">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-camera mb-2" viewBox="0 0 16 16">
|
||||
<path d="M15 12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1.172a3 3 0 0 0 2.12-.879l.83-.828A1 1 0 0 1 6.827 3h2.344a1 1 0 0 1 .707.293l.828.828A3 3 0 0 0 12.828 5H14a1 1 0 0 1 1 1v6zM2 4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.172a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 9.172 2H6.828a2 2 0 0 0-1.414.586l-.828.828A2 2 0 0 1 3.172 4H2z"/>
|
||||
<path d="M8 11a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5zm0 1a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM3 6.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/>
|
||||
</svg>
|
||||
<div>
|
||||
<input type="file" id="photos" name="photos" class="d-none" accept="image/*" multiple>
|
||||
<button type="button" class="btn btn-outline-primary mb-2" onclick="document.getElementById('photos').click()">Add Photos</button>
|
||||
</div>
|
||||
<small class="d-block text-muted">Take pictures of the mosquito problem area</small>
|
||||
|
||||
<!-- Photo Preview Area -->
|
||||
<div id="photoPreviewContainer" class="photo-preview mt-3 d-flex flex-wrap">
|
||||
<!-- Image previews will be added here by JavaScript -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Comments -->
|
||||
<div class="mb-4">
|
||||
<label for="comments" class="form-label fw-bold">Comments</label>
|
||||
<textarea class="form-control" id="comments" name="comments" rows="4" placeholder="Describe the mosquito issue (e.g., standing water, high mosquito activity, time of day they're most active)"></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<button type="submit" class="btn btn-success w-100 submit-btn mt-4" id="submitButton">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-send-fill me-2" viewBox="0 0 16 16">
|
||||
<path d="M15.964.686a.5.5 0 0 0-.65-.65L.767 5.855H.766l-.452.18a.5.5 0 0 0-.082.887l.41.26.001.002 4.995 3.178 3.178 4.995.002.002.26.41a.5.5 0 0 0 .886-.083l6-15Zm-1.833 1.89L6.637 10.07l-.215-.338a.5.5 0 0 0-.154-.154l-.338-.215 7.494-7.494 1.178-.471-.47 1.178Z"/>
|
||||
</svg>
|
||||
Submit Report
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Loading Indicator Overlay (Initially hidden) -->
|
||||
<div id="loadingOverlay" class="position-fixed top-0 start-0 w-100 h-100 d-none" style="background-color: rgba(0,0,0,0.5); z-index: 1050;">
|
||||
<div class="position-absolute top-50 start-50 translate-middle text-white text-center">
|
||||
<div class="spinner-border" role="status"></div>
|
||||
<p class="mt-2">Submitting your report...</p>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
|
@ -1,115 +0,0 @@
|
|||
{{template "base.html" .}}
|
||||
|
||||
{{define "title"}}Dash{{end}}
|
||||
{{define "extraheader"}}
|
||||
<style>
|
||||
</style>
|
||||
<script>
|
||||
</script>
|
||||
{{end}}
|
||||
{{define "content"}}
|
||||
<div class="container py-5">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-7">
|
||||
<!-- Confirmation Card -->
|
||||
<div class="card shadow-sm border-info mb-4">
|
||||
<div class="card-header bg-info text-white">
|
||||
<h3 class="my-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-bell-fill me-2" viewBox="0 0 16 16">
|
||||
<path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zm.995-14.901a1 1 0 1 0-1.99 0A5.002 5.002 0 0 0 3 6c0 1.098-.5 6-2 7h14c-1.5-1-2-5.902-2-7 0-2.42-1.72-4.44-4.005-4.901z"/>
|
||||
</svg>
|
||||
Notifications Registered
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body p-4 text-center">
|
||||
<div class="mb-4">
|
||||
<div class="display-1 text-info mb-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="currentColor" class="bi bi-check-circle-fill" viewBox="0 0 16 16">
|
||||
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="mb-3">Thank You!</h4>
|
||||
<p class="lead">Your contact information has been successfully registered for report updates.</p>
|
||||
<div class="alert alert-secondary py-3 mt-3">
|
||||
<strong>Report ID:</strong>
|
||||
<span class="fs-5">{{.ReportID}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
|
||||
<!-- What to Expect Section -->
|
||||
<div class="text-start mb-4">
|
||||
<h5>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-info-circle me-2" viewBox="0 0 16 16">
|
||||
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
|
||||
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
|
||||
</svg>
|
||||
What to Expect
|
||||
</h5>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item bg-transparent">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope-check me-2 text-success" viewBox="0 0 16 16">
|
||||
<path d="M2 2a2 2 0 0 0-2 2v8.01A2 2 0 0 0 2 14h5.5a.5.5 0 0 0 0-1H2a1 1 0 0 1-.966-.741l5.64-3.471L8 9.583l7-4.2V8.5a.5.5 0 0 0 1 0V4a2 2 0 0 0-2-2H2Zm3.708 6.208L1 11.105V5.383l4.708 2.825ZM1 4.217V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v.217l-7 4.2-7-4.2Z"/>
|
||||
<path d="M16 12.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Zm-1.993-1.679a.5.5 0 0 0-.686.172l-1.17 1.95-.547-.547a.5.5 0 0 0-.708.708l.774.773a.75.75 0 0 0 1.174-.144l1.335-2.226a.5.5 0 0 0-.172-.686Z"/>
|
||||
</svg>
|
||||
A confirmation message has been sent to your contact information.
|
||||
</li>
|
||||
<li class="list-group-item bg-transparent">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard-check me-2 text-success" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
|
||||
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
|
||||
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
|
||||
</svg>
|
||||
You will receive updates when:
|
||||
<ul class="mt-2">
|
||||
<li>Your report is assigned to a specialist</li>
|
||||
<li>A site visit is scheduled</li>
|
||||
<li>Treatment or remediation is completed</li>
|
||||
<li>The case is resolved</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="list-group-item bg-transparent">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search me-2 text-success" viewBox="0 0 16 16">
|
||||
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
|
||||
</svg>
|
||||
You can check your report status anytime using your Report ID.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Buttons -->
|
||||
<div class="mt-4">
|
||||
<a href="/check-report-status" class="btn btn-outline-primary me-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search me-1" viewBox="0 0 16 16">
|
||||
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
|
||||
</svg>
|
||||
Check Report Status
|
||||
</a>
|
||||
<a href="/" class="btn btn-outline-secondary">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house me-1" viewBox="0 0 16 16">
|
||||
<path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5 5 5Z"/>
|
||||
</svg>
|
||||
Return to Home
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Optional: Additional Information Section -->
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-question-circle me-2" viewBox="0 0 16 16">
|
||||
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
|
||||
<path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
|
||||
</svg>
|
||||
Need Help?
|
||||
</h5>
|
||||
<p>If you need to update your contact information or have questions about your report, please contact our Mosquito Control Unit at <strong>(123) 456-7890</strong> or <a href="mailto:mosquito@example.gov">mosquito@example.gov</a> and reference your Report ID.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
|
@ -1,135 +0,0 @@
|
|||
{{template "base.html" .}}
|
||||
|
||||
{{define "title"}}Dash{{end}}
|
||||
{{define "extraheader"}}
|
||||
<style>
|
||||
.service-card {
|
||||
transition: transform 0.3s;
|
||||
height: 100%;
|
||||
}
|
||||
.service-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
|
||||
}
|
||||
.district-logo {
|
||||
max-height: 80px;
|
||||
width: auto;
|
||||
}
|
||||
.quick-report-mobile {
|
||||
background-color: #ff9800;
|
||||
}
|
||||
.quick-report-desktop {
|
||||
background-color: #ffefd5;
|
||||
border-left: 4px solid #ff9800;
|
||||
}
|
||||
</style>
|
||||
{{end}}
|
||||
{{define "content"}}
|
||||
<!-- Main Content -->
|
||||
<main>
|
||||
<!-- Introduction Section -->
|
||||
<section class="py-5 bg-primary text-white">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-10">
|
||||
<h2 class="text-center mb-4">Report Mosquitoes Online</h2>
|
||||
<p class="lead text-center">
|
||||
We are dedicated to protecting public health and improving quality of life by reducing
|
||||
mosquito populations and the diseases they can carry. Our districts provide comprehensive
|
||||
mosquito surveillance, control, and education services to our community.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Quick Report for Mobile - Only visible on small screens -->
|
||||
<section class="py-3 quick-report-mobile d-md-none">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center">
|
||||
<h4 class="mb-2">On the go?</h4>
|
||||
<a href="/quick" class="btn btn-dark btn-lg">Make a Quick Report</a>
|
||||
<p class="mb-0 mt-2"><small>Report mosquito issues in under 60 seconds</small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services Section -->
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<h3 class="text-center mb-4">How Can We Help You Today?</h3>
|
||||
<div class="row g-4">
|
||||
<!-- Service Option 1 -->
|
||||
<div class="col-md-4">
|
||||
<div class="card service-card h-100">
|
||||
<div class="card-body text-center">
|
||||
<div class="mb-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
|
||||
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="card-title">Follow-up or Check Status</h4>
|
||||
<p class="card-text">Check on a previous request or view current mosquito activity in your area.</p>
|
||||
<a href="/status" class="btn btn-primary mt-3">Get Status</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Service Option 2 -->
|
||||
<div class="col-md-4">
|
||||
<div class="card service-card h-100">
|
||||
<div class="card-body text-center">
|
||||
<div class="mb-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-water" viewBox="0 0 16 16">
|
||||
<path d="M.036 3.314a.5.5 0 0 1 .65-.278l1.757.703a1.5 1.5 0 0 0 1.114 0l1.014-.406a2.5 2.5 0 0 1 1.857 0l1.015.406a1.5 1.5 0 0 0 1.114 0l1.014-.406a2.5 2.5 0 0 1 1.857 0l1.015.406a1.5 1.5 0 0 0 1.114 0l1.757-.703a.5.5 0 1 1 .372.928l-1.758.703a2.5 2.5 0 0 1-1.857 0l-1.014-.406a1.5 1.5 0 0 0-1.114 0l-1.015.406a2.5 2.5 0 0 1-1.857 0l-1.014-.406a1.5 1.5 0 0 0-1.114 0l-1.015.406a2.5 2.5 0 0 1-1.857 0L.664 3.964a.5.5 0 0 1-.278-.65zm0 3a.5.5 0 0 1 .65-.278l1.757.703a1.5 1.5 0 0 0 1.114 0l1.014-.406a2.5 2.5 0 0 1 1.857 0l1.015.406a1.5 1.5 0 0 0 1.114 0l1.014-.406a2.5 2.5 0 0 1 1.857 0l1.015.406a1.5 1.5 0 0 0 1.114 0l1.757-.703a.5.5 0 1 1 .372.928l-1.758.703a2.5 2.5 0 0 1-1.857 0l-1.014-.406a1.5 1.5 0 0 0-1.114 0l-1.015.406a2.5 2.5 0 0 1-1.857 0l-1.014-.406a1.5 1.5 0 0 0-1.114 0l-1.015.406a2.5 2.5 0 0 1-1.857 0L.664 6.964a.5.5 0 0 1-.278-.65zm0 3a.5.5 0 0 1 .65-.278l1.757.703a1.5 1.5 0 0 0 1.114 0l1.014-.406a2.5 2.5 0 0 1 1.857 0l1.015.406a1.5 1.5 0 0 0 1.114 0l1.014-.406a2.5 2.5 0 0 1 1.857 0l1.015.406a1.5 1.5 0 0 0 1.114 0l1.757-.703a.5.5 0 1 1 .372.928l-1.758.703a2.5 2.5 0 0 1-1.857 0l-1.014-.406a1.5 1.5 0 0 0-1.114 0l-1.015.406a2.5 2.5 0 0 1-1.857 0l-1.014-.406a1.5 1.5 0 0 0-1.114 0l-1.015.406a2.5 2.5 0 0 1-1.857 0L.664 9.964a.5.5 0 0 1-.278-.65z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="card-title">Report a Green Pool</h4>
|
||||
<p class="card-text">Report stagnant water sources like abandoned pools that may breed mosquitoes.</p>
|
||||
<a href="/pool" class="btn btn-primary mt-3">Report Source</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Service Option 3 -->
|
||||
<div class="col-md-4">
|
||||
<div class="card service-card h-100">
|
||||
<div class="card-body text-center">
|
||||
<div class="mb-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-bug" viewBox="0 0 16 16">
|
||||
<path d="M4.355.522a.5.5 0 0 1 .623.333l.291.956A4.979 4.979 0 0 1 8 1c1.007 0 1.946.298 2.731.811l.29-.956a.5.5 0 1 1 .957.29l-.41 1.352A4.985 4.985 0 0 1 13 6h.5a.5.5 0 0 0 .5-.5V5a.5.5 0 0 1 1 0v.5A1.5 1.5 0 0 1 13.5 7H13v1h1.5a.5.5 0 0 1 0 1H13v1h.5a1.5 1.5 0 0 1 1.5 1.5v.5a.5.5 0 1 1-1 0v-.5a.5.5 0 0 0-.5-.5H13a5 5 0 0 1-10 0h-.5a.5.5 0 0 0-.5.5v.5a.5.5 0 1 1-1 0v-.5A1.5 1.5 0 0 1 2.5 10H3V9H1.5a.5.5 0 0 1 0-1H3V7h-.5A1.5 1.5 0 0 1 1 5.5V5a.5.5 0 0 1 1 0v.5a.5.5 0 0 0 .5.5H3c0-1.364.547-2.601 1.432-3.503l-.41-1.352a.5.5 0 0 1 .333-.623zM4 7v4a4 4 0 0 0 3.5 3.97V7H4zm4.5 0v7.97A4 4 0 0 0 12 11V7H8.5zM12 6a3.989 3.989 0 0 0-1.334-2.982A3.983 3.983 0 0 0 8 2a3.983 3.983 0 0 0-2.667 1.018A3.989 3.989 0 0 0 4 6h8z"/>
|
||||
</svg>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Report for Desktop - Only visible on medium screens and up -->
|
||||
<div class="row mt-4 d-none d-md-block">
|
||||
<div class="col-12">
|
||||
<div class="card quick-report-desktop">
|
||||
<div class="card-body py-3">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-8">
|
||||
<h5 class="mb-1">Need to make a quick report?</h5>
|
||||
<p class="mb-0">Use our streamlined form to report mosquito issues in under 60 seconds</p>
|
||||
</div>
|
||||
<div class="col-md-4 text-md-end mt-3 mt-md-0">
|
||||
<a href="/quick" class="btn btn-warning">Quick Report</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
{{end}}
|
||||
|
|
@ -1,133 +0,0 @@
|
|||
{{template "base.html" .}}
|
||||
|
||||
{{define "title"}}Status{{end}}
|
||||
{{define "extraheader"}}
|
||||
<style>
|
||||
.option-card {
|
||||
transition: transform 0.3s;
|
||||
height: 100%;
|
||||
}
|
||||
.option-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
|
||||
}
|
||||
.district-logo {
|
||||
max-height: 80px;
|
||||
width: auto;
|
||||
}
|
||||
.divider {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.divider-line {
|
||||
border-left: 1px solid #dee2e6;
|
||||
height: 80%;
|
||||
}
|
||||
@media (max-width: 767.98px) {
|
||||
.divider-line {
|
||||
border-left: none;
|
||||
border-top: 1px solid #dee2e6;
|
||||
width: 80%;
|
||||
height: auto;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{{end}}
|
||||
{{define "content"}}
|
||||
<main>
|
||||
<!-- Page Title -->
|
||||
<section class="py-4 bg-primary text-white">
|
||||
<div class="container">
|
||||
<h2 class="text-center mb-0">Check Status or Follow-up</h2>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Lookup Options -->
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 mb-4">
|
||||
<p class="lead text-center">
|
||||
Choose one of the following options to check on mosquito activity or follow up on a previous report.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<!-- Report ID Lookup -->
|
||||
<div class="col-md-5">
|
||||
<div class="card option-card h-100">
|
||||
<div class="card-body p-4">
|
||||
<div class="text-center mb-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-file-earmark-text" viewBox="0 0 16 16">
|
||||
<path d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z"/>
|
||||
<path d="M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5L9.5 0zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="card-title text-center mb-4">Look up by Report ID</h4>
|
||||
<p class="card-text">
|
||||
If you have a report ID from a previous request, enter it below to view the details and current status.
|
||||
</p>
|
||||
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label for="reportId" class="form-label">Report ID</label>
|
||||
<input type="text" class="form-control" id="reportId" name="reportId" placeholder="Enter your report ID" required>
|
||||
<div class="form-text">Example: MMD-2023-12345</div>
|
||||
</div>
|
||||
<div class="d-grid gap-2">
|
||||
<a href="/service-request/abc-123" type="submit" class="btn btn-primary">View Report Details</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Divider for visual separation -->
|
||||
<div class="col-md-2 divider">
|
||||
<div class="divider-line"></div>
|
||||
</div>
|
||||
|
||||
<!-- Location Lookup -->
|
||||
<div class="col-md-5">
|
||||
<div class="card option-card h-100">
|
||||
<div class="card-body p-4">
|
||||
<div class="text-center mb-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-geo-alt" viewBox="0 0 16 16">
|
||||
<path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z"/>
|
||||
<path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="card-title text-center mb-4">Look up by Location</h4>
|
||||
<p class="card-text">
|
||||
Don't have a report ID? You can check mosquito activity and reports in your area by providing your location information.
|
||||
</p>
|
||||
<p class="card-text mb-4">
|
||||
This option will guide you through selecting your location to find relevant information about mosquito activity near you.
|
||||
</p>
|
||||
<div class="d-grid gap-2 mt-auto">
|
||||
<a href="/service-request-location" class="btn btn-primary">Search by Location</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Back button -->
|
||||
<div class="row mt-5">
|
||||
<div class="col-12 text-center">
|
||||
<a href="/" class="btn btn-outline-secondary">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left me-2" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"/>
|
||||
</svg>
|
||||
Back to Home
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
{{end}}
|
||||
Loading…
Add table
Add a link
Reference in a new issue