Organize mocks
Make mock listing automatic and dynamic Remove mocks that are implemented in some way Move all remaining mocks into the mocks/ directory
This commit is contained in:
parent
421260a80a
commit
f6879ac094
28 changed files with 87 additions and 3011 deletions
|
|
@ -1,235 +0,0 @@
|
|||
{{ template "sync/layout/base.html" . }}
|
||||
|
||||
{{ define "title" }}Data Entry{{ end }}
|
||||
{{ define "extraheader" }}
|
||||
<style>
|
||||
.results-container {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.error-code {
|
||||
font-family: monospace;
|
||||
padding: 0.2rem 0.4rem;
|
||||
background-color: rgba(220, 53, 69, 0.1);
|
||||
border-radius: 0.2rem;
|
||||
color: #dc3545;
|
||||
}
|
||||
.error-table {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.error-suggestions {
|
||||
color: #495057;
|
||||
}
|
||||
.table-header-error {
|
||||
width: 40%;
|
||||
}
|
||||
.table-header-suggestion {
|
||||
width: 40%;
|
||||
}
|
||||
.table-header-line {
|
||||
width: 20%;
|
||||
}
|
||||
</style>
|
||||
{{ end }}
|
||||
{{ define "content" }}
|
||||
<div class="container mt-4 results-container mb-5">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h2>Upload Failed: pools-data-2023.csv</h2>
|
||||
<span class="badge bg-danger rounded-pill">
|
||||
<i class="bi bi-x-circle me-1"></i> Validation Errors
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-danger" role="alert">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="me-3">
|
||||
<i
|
||||
class="bi bi-exclamation-triangle-fill"
|
||||
style="font-size: 2rem;"
|
||||
></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="alert-heading">CSV Upload Failed</h4>
|
||||
<p class="mb-0">
|
||||
Your file contains several errors that must be fixed before it can
|
||||
be processed. Details are provided below.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mb-4">
|
||||
<div
|
||||
class="card-header bg-light d-flex justify-content-between align-items-center"
|
||||
>
|
||||
<h5 class="mb-0">Error Summary</h5>
|
||||
<a href="#" class="btn btn-sm btn-outline-secondary">
|
||||
<i class="bi bi-download me-1"></i> Download Error Log
|
||||
</a>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>
|
||||
We found <strong>12 errors</strong> in your CSV file. The most common
|
||||
issues are:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Missing required column:</strong> The "Latitude" column is
|
||||
not present in your file
|
||||
</li>
|
||||
<li>
|
||||
<strong>Invalid data format:</strong> 8 GPS coordinates contain
|
||||
non-numeric values
|
||||
</li>
|
||||
<li>
|
||||
<strong>Empty required fields:</strong> 3 records are missing Plat
|
||||
ID values
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="alert alert-info" role="alert">
|
||||
<i class="bi bi-info-circle me-2"></i>
|
||||
<strong>Tip:</strong> Make sure your column names exactly match the
|
||||
required format. Column names are case-sensitive.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mb-4">
|
||||
<div class="card-header bg-light">
|
||||
<h5 class="mb-0">Detailed Error Report</h5>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped error-table mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th class="table-header-line">Line Number</th>
|
||||
<th class="table-header-error">Error</th>
|
||||
<th class="table-header-suggestion">Suggestion</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="fw-bold text-center">1</td>
|
||||
<td>
|
||||
<span class="error-code">MISSING_COLUMN</span><br />
|
||||
Required column "Latitude" is missing from the header row
|
||||
</td>
|
||||
<td class="error-suggestions">
|
||||
Add a "Latitude" column to your CSV file. Make sure the spelling
|
||||
and capitalization match exactly.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-bold text-center">5</td>
|
||||
<td>
|
||||
<span class="error-code">INVALID_DATA_FORMAT</span><br />
|
||||
GPS coordinate "37.45N" is not a valid decimal number
|
||||
</td>
|
||||
<td class="error-suggestions">
|
||||
Change "37.45N" to a decimal format (e.g., "37.45"). Remove any
|
||||
non-numeric characters except for the decimal point.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-bold text-center">8</td>
|
||||
<td>
|
||||
<span class="error-code">EMPTY_REQUIRED_FIELD</span><br />
|
||||
Plat ID is empty or missing
|
||||
</td>
|
||||
<td class="error-suggestions">
|
||||
Add a Plat ID value for this record. Each pool must have a
|
||||
unique identifier.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-bold text-center">12</td>
|
||||
<td>
|
||||
<span class="error-code">INVALID_DATA_FORMAT</span><br />
|
||||
GPS coordinate "unknown" is not a valid decimal number
|
||||
</td>
|
||||
<td class="error-suggestions">
|
||||
Replace "unknown" with the actual longitude value in decimal
|
||||
format (e.g., "-122.4194").
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-bold text-center">17</td>
|
||||
<td>
|
||||
<span class="error-code">INVALID_DATA_FORMAT</span><br />
|
||||
GPS coordinate "N/A" is not a valid decimal number
|
||||
</td>
|
||||
<td class="error-suggestions">
|
||||
Replace "N/A" with the actual latitude value in decimal format
|
||||
(e.g., "37.7749").
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-bold text-center">21</td>
|
||||
<td>
|
||||
<span class="error-code">EMPTY_REQUIRED_FIELD</span><br />
|
||||
Plat ID is empty or missing
|
||||
</td>
|
||||
<td class="error-suggestions">
|
||||
Add a Plat ID value for this record. Each pool must have a
|
||||
unique identifier.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="card-footer bg-white">
|
||||
<nav aria-label="Error pagination">
|
||||
<ul class="pagination justify-content-center m-0">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="#" tabindex="-1" aria-disabled="true"
|
||||
>Previous</a
|
||||
>
|
||||
</li>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="#">1</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#">Next</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mb-4">
|
||||
<div class="card-header bg-light">
|
||||
<h5 class="mb-0">Next Steps</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ol>
|
||||
<li>
|
||||
Download the error log for a complete list of issues (optional)
|
||||
</li>
|
||||
<li>Fix the errors in your CSV file</li>
|
||||
<li>Re-upload the corrected file using the button below</li>
|
||||
</ol>
|
||||
|
||||
<div class="alert alert-warning" role="alert">
|
||||
<i class="bi bi-lightbulb me-2"></i>
|
||||
<strong>Recommendation:</strong> Review our
|
||||
<a href="#" class="alert-link">CSV formatting guide</a> to ensure your
|
||||
file meets all requirements.
|
||||
</div>
|
||||
|
||||
<div class="mt-4 text-center">
|
||||
<button class="btn btn-primary btn-lg" id="uploadNewBtn">
|
||||
<i class="bi bi-arrow-repeat me-2"></i> Upload Corrected File
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 text-center">
|
||||
<a href="#" class="text-muted">
|
||||
<i class="bi bi-question-circle me-1"></i> Need help? Contact support
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
{{ template "sync/layout/base.html" . }}
|
||||
|
||||
{{ define "title" }}Data Entry{{ end }}
|
||||
{{ define "extraheader" }}
|
||||
{{ end }}
|
||||
{{ define "content" }}
|
||||
<div class="container">
|
||||
<h1>Mock Listing</h1>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" style="min-width: 20vw">Link</th>
|
||||
<th scope="col">Name</th>
|
||||
<th scope="col">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="/mock/admin">/mock/admin</a></td>
|
||||
<td>Admin</td>
|
||||
<td>
|
||||
Used by office admins to handle phone calls and other public-facing
|
||||
responsibilities
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="/mock/data-entry">/mock/flyover-data-entry</a></td>
|
||||
<td>Flyover Data Entry</td>
|
||||
<td>
|
||||
Used to upload CSV files with information about problematic pools
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="/mock/dispatch">/mock/dispatch</a></td>
|
||||
<td>Dispatch</td>
|
||||
<td>Used each day to calculate the working routes for technicians</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="/mock/report">/mock/report</a></td>
|
||||
<td>Reporting Overview</td>
|
||||
<td>
|
||||
Shows examples of text message contents, printable QR codes, and
|
||||
email bodies for sending to the public to help them self-report
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="/mock/report/abc-123">/mock/report/abc-123</a></td>
|
||||
<td>Self-Report</td>
|
||||
<td>A page for members of the public to report a green pool.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="/mock/service-request">/mock/service-request</a></td>
|
||||
<td>Service Request</td>
|
||||
<td>
|
||||
A page for members of the public to make a direct service request
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="/mock/setting">/mock/setting</a></td>
|
||||
<td>Settings</td>
|
||||
<td>A page for management to control the behavior of Nidus</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{{ end }}
|
||||
24
html/template/sync/mock/root.html
Normal file
24
html/template/sync/mock/root.html
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
{{ template "sync/layout/base.html" . }}
|
||||
|
||||
{{ define "title" }}Mock Root{{ end }}
|
||||
{{ define "extraheader" }}
|
||||
{{ end }}
|
||||
{{ define "content" }}
|
||||
<div class="container">
|
||||
<h1>Mock Listing</h1>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" style="min-width: 20vw">Link</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{ range .Mocks }}
|
||||
<tr>
|
||||
<td><a href="{{ .Path }}">{{ .Path }}</a></td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
@ -1,423 +0,0 @@
|
|||
{{ template "sync/layout/base.html" . }}
|
||||
|
||||
{{ define "title" }}Dash{{ end }}
|
||||
{{ define "extraheader" }}
|
||||
<style>
|
||||
.district-logo {
|
||||
max-height: 80px;
|
||||
width: auto;
|
||||
}
|
||||
.map-container {
|
||||
height: 400px;
|
||||
background-color: #e9ecef;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #dee2e6;
|
||||
position: relative;
|
||||
}
|
||||
.map-placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
.map-overlay {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
max-width: 250px;
|
||||
}
|
||||
.map-controls {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
.map-control-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: white;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.2rem;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.report-type-icon {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.days-ago {
|
||||
font-size: 0.85rem;
|
||||
color: #6c757d;
|
||||
}
|
||||
.status-badge {
|
||||
font-size: 0.85rem;
|
||||
font-weight: normal;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
.report-row:hover {
|
||||
background-color: rgba(13, 110, 253, 0.05);
|
||||
cursor: pointer;
|
||||
}
|
||||
.instruction-card {
|
||||
border-left: 4px solid #0d6efd;
|
||||
}
|
||||
</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>Lookup Reports by Location</h2>
|
||||
<p class="lead">Find reports and mosquito activity in your area</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Instructions Card -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="card instruction-card">
|
||||
<div class="card-body">
|
||||
<h5>
|
||||
<i class="bi bi-info-circle me-2"></i>How to use this tool
|
||||
</h5>
|
||||
<p class="mb-0">
|
||||
You can either <strong>enter an address</strong> in the search
|
||||
box or <strong>navigate the map</strong> by dragging and zooming
|
||||
to find reports in your area. The table below will update
|
||||
automatically to show reports within the current map view.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search and Map Section -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-4 mb-3 mb-md-0">
|
||||
<!-- Address Search -->
|
||||
<div class="card h-100">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Search by Address</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form id="addressSearchForm">
|
||||
<div class="mb-3">
|
||||
<label for="addressInput" class="form-label"
|
||||
>Enter an address or location</label
|
||||
>
|
||||
<div class="input-group">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="addressInput"
|
||||
placeholder="123 Main St, City, State"
|
||||
/>
|
||||
<button class="btn btn-primary" type="submit">
|
||||
<i class="bi bi-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Search radius</label>
|
||||
<select class="form-select" id="searchRadius">
|
||||
<option value="0.5">0.5 miles</option>
|
||||
<option value="1" selected>1 mile</option>
|
||||
<option value="2">2 miles</option>
|
||||
<option value="5">5 miles</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="alert alert-info mt-4">
|
||||
<small
|
||||
><i class="bi bi-eye me-1"></i> Currently showing reports
|
||||
within <strong>1 mile</strong> of map center</small
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-8">
|
||||
<!-- Map Area -->
|
||||
<div class="map-container">
|
||||
<div class="map-placeholder">
|
||||
<i class="bi bi-map fs-1 text-secondary mb-2"></i>
|
||||
<p class="mb-1 fw-bold">Interactive Map Area</p>
|
||||
<p class="text-muted small mb-0">
|
||||
The map will display here and allow you to navigate the area
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Simulated map controls -->
|
||||
<div class="map-controls">
|
||||
<button class="map-control-btn">
|
||||
<i class="bi bi-plus"></i>
|
||||
</button>
|
||||
<button class="map-control-btn">
|
||||
<i class="bi bi-dash"></i>
|
||||
</button>
|
||||
<button class="map-control-btn">
|
||||
<i class="bi bi-house"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Map overlay showing current view -->
|
||||
<div class="map-overlay">
|
||||
<div class="small fw-bold mb-1">Current View</div>
|
||||
<div class="small">Lakeside, CA</div>
|
||||
<div class="small text-muted">32.857° N, 116.922° W</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Results Section -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div
|
||||
class="card-header d-flex justify-content-between align-items-center"
|
||||
>
|
||||
<h5 class="mb-0">Reports in This Area</h5>
|
||||
<span class="badge bg-secondary"
|
||||
>Showing 12 of 37 total reports</span
|
||||
>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>Type</th>
|
||||
<th>Location</th>
|
||||
<th>Submitted</th>
|
||||
<th>Status</th>
|
||||
<th>Report ID</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- Report Row 1 -->
|
||||
<tr class="report-row">
|
||||
<td>
|
||||
<span class="report-type-icon text-primary me-1">
|
||||
<i class="bi bi-water"></i>
|
||||
</span>
|
||||
Green Pool
|
||||
</td>
|
||||
<td>123 Mosquito Ave</td>
|
||||
<td>
|
||||
Oct 15, 2023
|
||||
<div class="days-ago">5 days ago</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-primary status-badge"
|
||||
>Scheduled</span
|
||||
>
|
||||
</td>
|
||||
<td>
|
||||
<a href="/report-details?id=MMD-2023-12345"
|
||||
>MMD-2023-12345</a
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Report Row 2 -->
|
||||
<tr class="report-row">
|
||||
<td>
|
||||
<span class="report-type-icon text-danger me-1">
|
||||
<i class="bi bi-bug"></i>
|
||||
</span>
|
||||
Mosquito Nuisance
|
||||
</td>
|
||||
<td>456 Lake Dr</td>
|
||||
<td>
|
||||
Oct 12, 2023
|
||||
<div class="days-ago">8 days ago</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-success status-badge"
|
||||
>Complete</span
|
||||
>
|
||||
</td>
|
||||
<td>
|
||||
<a href="/report-details?id=MMD-2023-12341"
|
||||
>MMD-2023-12341</a
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Report Row 3 -->
|
||||
<tr class="report-row">
|
||||
<td>
|
||||
<span class="report-type-icon text-success me-1">
|
||||
<i class="bi bi-droplet"></i>
|
||||
</span>
|
||||
Fish Request
|
||||
</td>
|
||||
<td>789 Creek Rd</td>
|
||||
<td>
|
||||
Oct 18, 2023
|
||||
<div class="days-ago">2 days ago</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-warning text-dark status-badge"
|
||||
>Acknowledged</span
|
||||
>
|
||||
</td>
|
||||
<td>
|
||||
<a href="/report-details?id=MMD-2023-12350"
|
||||
>MMD-2023-12350</a
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Report Row 4 -->
|
||||
<tr class="report-row">
|
||||
<td>
|
||||
<span class="report-type-icon text-danger me-1">
|
||||
<i class="bi bi-bug"></i>
|
||||
</span>
|
||||
Mosquito Nuisance
|
||||
</td>
|
||||
<td>101 Pond Ln</td>
|
||||
<td>
|
||||
Sep 25, 2023
|
||||
<div class="days-ago">25 days ago</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-success status-badge"
|
||||
>Complete</span
|
||||
>
|
||||
</td>
|
||||
<td>
|
||||
<a href="/report-details?id=MMD-2023-12289"
|
||||
>MMD-2023-12289</a
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Report Row 5 -->
|
||||
<tr class="report-row">
|
||||
<td>
|
||||
<span class="report-type-icon text-primary me-1">
|
||||
<i class="bi bi-water"></i>
|
||||
</span>
|
||||
Green Pool
|
||||
</td>
|
||||
<td>202 Highland Ave</td>
|
||||
<td>
|
||||
Oct 19, 2023
|
||||
<div class="days-ago">1 day ago</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-secondary status-badge"
|
||||
>Submitted</span
|
||||
>
|
||||
</td>
|
||||
<td>
|
||||
<a href="/report-details?id=MMD-2023-12356"
|
||||
>MMD-2023-12356</a
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Report Row 6 -->
|
||||
<tr class="report-row">
|
||||
<td>
|
||||
<span class="report-type-icon text-primary me-1">
|
||||
<i class="bi bi-water"></i>
|
||||
</span>
|
||||
Green Pool
|
||||
</td>
|
||||
<td>303 Marsh Way</td>
|
||||
<td>
|
||||
Aug 15, 2023
|
||||
<div class="days-ago">2 months ago</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-success status-badge"
|
||||
>Complete</span
|
||||
>
|
||||
</td>
|
||||
<td>
|
||||
<a href="/report-details?id=MMD-2023-12056"
|
||||
>MMD-2023-12056</a
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- More rows would go here -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-center">
|
||||
<p class="mb-0 small text-muted">
|
||||
Showing reports submitted within the last 6 months. The table
|
||||
displays up to 20 reports at a time.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Back Button -->
|
||||
<div class="row mt-4">
|
||||
<div class="col-12">
|
||||
<a href="/check-status" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-arrow-left"></i> Back to Status Check
|
||||
</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,738 +0,0 @@
|
|||
{{ template "sync/layout/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,662 +0,0 @@
|
|||
{{ template "sync/layout/base.html" . }}
|
||||
|
||||
{{ define "title" }}Dash{{ 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" }}
|
||||
<!-- 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">{{ .DistrictName }}</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 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>
|
||||
|
||||
<!-- 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 {{ .DistrictName }} 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,150 +0,0 @@
|
|||
{{ template "sync/layout/base.html" . }}
|
||||
|
||||
{{ define "title" }}Dash{{ end }}
|
||||
{{ define "extraheader" }}
|
||||
<style>
|
||||
.district-logo {
|
||||
max-height: 60px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: #28a745;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 2rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.confirmation-card {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.home-button {
|
||||
padding: 12px 30px;
|
||||
border-radius: 30px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.header-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{{ end }}
|
||||
{{ define "content" }}
|
||||
<!-- Header -->
|
||||
<header class="bg-light py-2 mb-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-9">
|
||||
<h1 class="district-name header-title mb-0">[District Name]</h1>
|
||||
</div>
|
||||
<div class="col-3 text-end">
|
||||
<img
|
||||
src="placeholder-logo.png"
|
||||
alt="District Logo"
|
||||
class="district-logo"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="container mb-5 py-4">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-10">
|
||||
<div class="card shadow confirmation-card">
|
||||
<div class="card-body p-4 p-md-5 text-center">
|
||||
<!-- Success Icon -->
|
||||
<div class="success-icon">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="50"
|
||||
height="50"
|
||||
fill="currentColor"
|
||||
class="bi bi-check-lg"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h2 class="mb-4">Report Received!</h2>
|
||||
|
||||
<p class="lead mb-4">
|
||||
Thank you for contributing to the health and well-being of our
|
||||
community.
|
||||
</p>
|
||||
|
||||
<div class="mb-4 p-3 bg-light rounded-3">
|
||||
<p class="mb-0">
|
||||
Your mosquito report has been submitted successfully and will be
|
||||
reviewed by our team. Your effort helps us identify problem
|
||||
areas and better manage mosquito populations throughout our
|
||||
district.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="text-muted mb-4">
|
||||
Report ID:
|
||||
<span class="fw-bold"
|
||||
>#MM
|
||||
<script>
|
||||
document.write(Math.floor(Math.random() * 10000) + 10000);
|
||||
</script></span
|
||||
>
|
||||
</p>
|
||||
|
||||
<a href="/" class="btn btn-primary home-button"> Return Home </a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Additional Info Card -->
|
||||
<div class="card mt-4 border-0 bg-light">
|
||||
<div class="card-body">
|
||||
<h5>What happens next?</h5>
|
||||
<p class="mb-0">
|
||||
Our team reviews all reports daily. Depending on the nature of
|
||||
your report, we may deploy field technicians to assess the area or
|
||||
add it to our scheduled mosquito control activities. For urgent
|
||||
matters, we prioritize responses based on public health risk
|
||||
factors.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-dark text-white py-3 mt-auto">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<p class="mb-0 small">
|
||||
© 2023 [District Name] Mosquito Management District
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-6 text-md-end">
|
||||
<p class="mb-0 small">Contact: (555) 123-4567</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
{{ end }}
|
||||
|
|
@ -1,233 +0,0 @@
|
|||
{{ template "sync/layout/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>
|
||||
{{ end }}
|
||||
{{ define "content" }}
|
||||
<!-- Header -->
|
||||
<header class="bg-light py-2 mb-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-9">
|
||||
<h1 class="district-name header-title mb-0">[District Name]</h1>
|
||||
</div>
|
||||
<div class="col-3 text-end">
|
||||
<img
|
||||
src="placeholder-logo.png"
|
||||
alt="District Logo"
|
||||
class="district-logo"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 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 action="/service-request-quick-confirmation" method="get">
|
||||
<!-- 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
|
||||
>Your location and current time will be automatically
|
||||
collected with your report.</span
|
||||
>
|
||||
</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"
|
||||
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 (would be populated by JavaScript) -->
|
||||
<div class="photo-preview mt-3">
|
||||
<!-- Example preview images (these would be dynamically added) -->
|
||||
<img
|
||||
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80' fill='%23dddddd'%3E%3Crect width='80' height='80' fill='%23eeeeee'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='sans-serif' font-size='12' fill='%23999999'%3EPreview%3C/text%3E%3C/svg%3E"
|
||||
alt="Preview"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Comments -->
|
||||
<div class="mb-4">
|
||||
<label for="comments" class="form-label fw-bold"
|
||||
>Comments</label
|
||||
>
|
||||
<textarea
|
||||
class="form-control"
|
||||
id="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"
|
||||
>
|
||||
<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>
|
||||
|
||||
<!-- Back Link -->
|
||||
<div class="text-center mt-3">
|
||||
<a href="javascript:history.back()" class="text-decoration-none">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
class="bi bi-arrow-left me-1"
|
||||
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>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-dark text-white py-3 mt-auto">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<p class="mb-0 small">
|
||||
© 2023 [District Name] Mosquito Management District
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-6 text-md-end">
|
||||
<p class="mb-0 small">Contact: (555) 123-4567</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
{{ end }}
|
||||
|
|
@ -1,222 +0,0 @@
|
|||
{{ template "sync/layout/base.html" . }}
|
||||
|
||||
{{ define "title" }}Dash{{ 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" }}
|
||||
<!-- 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">{{ .DistrictName }}</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>
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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 {{ .DistrictName }} 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,230 +0,0 @@
|
|||
{{ template "sync/layout/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" }}
|
||||
<!-- 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">{{ .DistrictName }}</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>
|
||||
<!-- 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">
|
||||
Welcome to Our Mosquito Management Services
|
||||
</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 district provides 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="/mock/service-request-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="/mock/service-request-updates"
|
||||
class="btn btn-primary mt-3"
|
||||
>Get Updates</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="/mock/service-request-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="/mock/service-request-mosquito"
|
||||
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="/mock/service-request-quick"
|
||||
class="btn btn-warning"
|
||||
>Quick Report</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</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 {{ .DistrictName }}</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 }}
|
||||
69
sync/mock.go
69
sync/mock.go
|
|
@ -102,36 +102,57 @@ func getQRCodeReport(w http.ResponseWriter, r *http.Request) {
|
|||
}
|
||||
}
|
||||
|
||||
func mock(t string, w http.ResponseWriter, code string) {
|
||||
data := ContentMock{
|
||||
DistrictName: "Delta MVCD",
|
||||
URLs: ContentMockURLs{
|
||||
Dispatch: "/mock/dispatch",
|
||||
DispatchResults: "/mock/dispatch-results",
|
||||
ReportConfirmation: fmt.Sprintf("/mock/report/%s/confirm", code),
|
||||
ReportDetail: fmt.Sprintf("/mock/report/%s", code),
|
||||
ReportContribute: fmt.Sprintf("/mock/report/%s/contribute", code),
|
||||
ReportEvidence: fmt.Sprintf("/mock/report/%s/evidence", code),
|
||||
ReportSchedule: fmt.Sprintf("/mock/report/%s/schedule", code),
|
||||
ReportUpdate: fmt.Sprintf("/mock/report/%s/update", code),
|
||||
Root: "/mock",
|
||||
Setting: "/mock/setting",
|
||||
SettingIntegration: "/mock/setting/integration",
|
||||
SettingPesticide: "/mock/setting/pesticide",
|
||||
SettingPesticideAdd: "/mock/setting/pesticide/add",
|
||||
SettingUser: "/mock/setting/user",
|
||||
SettingUserAdd: "/mock/setting/user/add",
|
||||
},
|
||||
}
|
||||
html.RenderOrError(w, t, data)
|
||||
type mock struct {
|
||||
Path string
|
||||
template string
|
||||
}
|
||||
|
||||
func renderMock(templateName string) http.HandlerFunc {
|
||||
var mocks = []mock{}
|
||||
|
||||
func addMock(r chi.Router, path string, template string) {
|
||||
mocks = append(mocks, mock{
|
||||
Path: path,
|
||||
template: template,
|
||||
})
|
||||
r.Get(path, renderMock(template))
|
||||
}
|
||||
func renderMock(template_name string) http.HandlerFunc {
|
||||
return func(w http.ResponseWriter, r *http.Request) {
|
||||
code := chi.URLParam(r, "code")
|
||||
if code == "" {
|
||||
code = "abc-123"
|
||||
}
|
||||
mock(templateName, w, code)
|
||||
data := ContentMock{
|
||||
DistrictName: "Delta MVCD",
|
||||
URLs: ContentMockURLs{
|
||||
Dispatch: "/mock/dispatch",
|
||||
DispatchResults: "/mock/dispatch-results",
|
||||
ReportConfirmation: fmt.Sprintf("/mock/report/%s/confirm", code),
|
||||
ReportDetail: fmt.Sprintf("/mock/report/%s", code),
|
||||
ReportContribute: fmt.Sprintf("/mock/report/%s/contribute", code),
|
||||
ReportEvidence: fmt.Sprintf("/mock/report/%s/evidence", code),
|
||||
ReportSchedule: fmt.Sprintf("/mock/report/%s/schedule", code),
|
||||
ReportUpdate: fmt.Sprintf("/mock/report/%s/update", code),
|
||||
Root: "/mock",
|
||||
Setting: "/mock/setting",
|
||||
SettingIntegration: "/mock/setting/integration",
|
||||
SettingPesticide: "/mock/setting/pesticide",
|
||||
SettingPesticideAdd: "/mock/setting/pesticide/add",
|
||||
SettingUser: "/mock/setting/user",
|
||||
SettingUserAdd: "/mock/setting/user/add",
|
||||
},
|
||||
}
|
||||
html.RenderOrError(w, template_name, data)
|
||||
}
|
||||
}
|
||||
|
||||
type contentMockList struct {
|
||||
Mocks []mock
|
||||
}
|
||||
|
||||
func renderMockList(w http.ResponseWriter, r *http.Request) {
|
||||
data := contentMockList{
|
||||
Mocks: mocks,
|
||||
}
|
||||
html.RenderOrError(w, "sync/mock/root.html", data)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,34 +18,24 @@ func Router() chi.Router {
|
|||
r.Get("/district", getDistrict)
|
||||
|
||||
// Mock endpoints
|
||||
r.Get("/mock", renderMock("mock-root.html"))
|
||||
r.Get("/mock/admin", renderMock("admin.html"))
|
||||
r.Get("/mock/admin/service-request", renderMock("admin-service-request.html"))
|
||||
r.Get("/mock/data-entry", renderMock("data-entry.html"))
|
||||
r.Get("/mock/data-entry/bad", renderMock("data-entry-bad.html"))
|
||||
r.Get("/mock/dispatch", renderMock("dispatch.html"))
|
||||
r.Get("/mock/dispatch-results", renderMock("dispatch-results.html"))
|
||||
r.Get("/mock/report", renderMock("report.html"))
|
||||
r.Get("/mock/report/{code}", renderMock("report-detail.html"))
|
||||
r.Get("/mock/report/{code}/confirm", renderMock("report-confirmation.html"))
|
||||
r.Get("/mock/report/{code}/contribute", renderMock("report-contribute.html"))
|
||||
r.Get("/mock/report/{code}/evidence", renderMock("report-evidence.html"))
|
||||
r.Get("/mock/report/{code}/schedule", renderMock("report-schedule.html"))
|
||||
r.Get("/mock/report/{code}/update", renderMock("report-update.html"))
|
||||
r.Get("/mock/service-request", renderMock("service-request.html"))
|
||||
r.Get("/mock/service-request/{code}", renderMock("service-request-detail.html"))
|
||||
r.Get("/mock/service-request-location", renderMock("service-request-location.html"))
|
||||
r.Get("/mock/service-request-mosquito", renderMock("service-request-mosquito.html"))
|
||||
r.Get("/mock/service-request-pool", renderMock("service-request-pool.html"))
|
||||
r.Get("/mock/service-request-quick", renderMock("service-request-quick.html"))
|
||||
r.Get("/mock/service-request-quick-confirmation", renderMock("service-request-quick-confirmation.html"))
|
||||
r.Get("/mock/service-request-updates", renderMock("service-request-updates.html"))
|
||||
r.Get("/mock/setting", renderMock("setting-mock.html"))
|
||||
r.Get("/mock/setting/integration", renderMock("setting-integration.html"))
|
||||
r.Get("/mock/setting/pesticide", renderMock("setting-pesticide.html"))
|
||||
r.Get("/mock/setting/pesticide/add", renderMock("setting-pesticide-add.html"))
|
||||
r.Get("/mock/setting/user", renderMock("setting-user.html"))
|
||||
r.Get("/mock/setting/user/add", renderMock("setting-user-add.html"))
|
||||
r.Get("/mock", renderMockList)
|
||||
addMock(r, "/mock/admin", "sync/mock/admin.html")
|
||||
addMock(r, "/mock/admin", "sync/mock/admin.html")
|
||||
addMock(r, "/mock/dispatch", "sync/mock/dispatch.html")
|
||||
addMock(r, "/mock/dispatch-results", "sync/mock/dispatch-results.html")
|
||||
addMock(r, "/mock/report", "sync/mock/report.html")
|
||||
addMock(r, "/mock/report/{code}", "sync/mock/report-detail.html")
|
||||
addMock(r, "/mock/report/{code}/confirm", "sync/mock/report-confirmation.html")
|
||||
addMock(r, "/mock/report/{code}/contribute", "sync/mock/report-contribute.html")
|
||||
addMock(r, "/mock/report/{code}/evidence", "sync/mock/report-evidence.html")
|
||||
addMock(r, "/mock/report/{code}/schedule", "sync/mock/report-schedule.html")
|
||||
addMock(r, "/mock/report/{code}/update", "sync/mock/report-update.html")
|
||||
addMock(r, "/mock/service-request/{code}", "sync/mock/service-request-detail.html")
|
||||
addMock(r, "/mock/setting", "sync/mock/setting.html")
|
||||
addMock(r, "/mock/setting/pesticide", "sync/mock/setting-pesticide.html")
|
||||
addMock(r, "/mock/setting/pesticide/add", "sync/mock/setting-pesticide-add.html")
|
||||
addMock(r, "/mock/setting/user", "sync/mock/setting-user.html")
|
||||
addMock(r, "/mock/setting/user/add", "sync/mock/setting-user-add.html")
|
||||
|
||||
// Utility endpoints
|
||||
r.Get("/oauth/refresh", getOAuthRefresh)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue