Get basic bones of the nuisance page copied from the mock
This commit is contained in:
parent
48c49fc73e
commit
bab8af4572
12 changed files with 371 additions and 452 deletions
|
|
@ -17,11 +17,6 @@ var (
|
|||
mockWaterT = buildTemplate("mock/water", "base")
|
||||
)
|
||||
|
||||
type ContentDistrict struct {
|
||||
Name string
|
||||
URLLogo string
|
||||
URLWebsite string
|
||||
}
|
||||
type ContentMock struct {
|
||||
District ContentDistrict
|
||||
MapboxToken string
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import (
|
|||
"strconv"
|
||||
"time"
|
||||
|
||||
"github.com/Gleipnir-Technology/nidus-sync/config"
|
||||
"github.com/Gleipnir-Technology/nidus-sync/db"
|
||||
"github.com/Gleipnir-Technology/nidus-sync/db/enums"
|
||||
"github.com/Gleipnir-Technology/nidus-sync/db/models"
|
||||
|
|
@ -15,8 +16,12 @@ import (
|
|||
"github.com/rs/zerolog/log"
|
||||
)
|
||||
|
||||
type ContextNuisance struct{}
|
||||
type ContextNuisanceSubmitComplete struct {
|
||||
type ContentNuisance struct {
|
||||
District *ContentDistrict
|
||||
MapboxToken string
|
||||
URL ContentURL
|
||||
}
|
||||
type ContentNuisanceSubmitComplete struct {
|
||||
ReportID string
|
||||
}
|
||||
|
||||
|
|
@ -29,7 +34,11 @@ func getNuisance(w http.ResponseWriter, r *http.Request) {
|
|||
html.RenderOrError(
|
||||
w,
|
||||
Nuisance,
|
||||
ContextNuisance{},
|
||||
ContentNuisance{
|
||||
District: nil,
|
||||
MapboxToken: config.MapboxToken,
|
||||
URL: makeContentURL(),
|
||||
},
|
||||
)
|
||||
}
|
||||
func getNuisanceSubmitComplete(w http.ResponseWriter, r *http.Request) {
|
||||
|
|
@ -37,7 +46,7 @@ func getNuisanceSubmitComplete(w http.ResponseWriter, r *http.Request) {
|
|||
html.RenderOrError(
|
||||
w,
|
||||
NuisanceSubmitComplete,
|
||||
ContextNuisanceSubmitComplete{
|
||||
ContentNuisanceSubmitComplete{
|
||||
ReportID: report,
|
||||
},
|
||||
)
|
||||
|
|
|
|||
15
rmo/root.go
15
rmo/root.go
|
|
@ -9,6 +9,11 @@ import (
|
|||
"github.com/rs/zerolog/log"
|
||||
)
|
||||
|
||||
type ContentDistrict struct {
|
||||
Name string
|
||||
URLLogo string
|
||||
URLWebsite string
|
||||
}
|
||||
type ContentPrivacy struct {
|
||||
Address string
|
||||
Company string
|
||||
|
|
@ -56,7 +61,9 @@ func getRoot(w http.ResponseWriter, r *http.Request) {
|
|||
html.RenderOrError(
|
||||
w,
|
||||
RootT,
|
||||
ContentRoot{},
|
||||
ContentRoot{
|
||||
URL: makeContentURL(),
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -68,11 +75,13 @@ func getTerms(w http.ResponseWriter, r *http.Request) {
|
|||
html.RenderOrError(
|
||||
w,
|
||||
TermsT,
|
||||
ContentRoot{},
|
||||
ContentRoot{
|
||||
URL: makeContentURL(),
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
func makeContentURL(slug string) ContentURL {
|
||||
func makeContentURL() ContentURL {
|
||||
return ContentURL{
|
||||
Nuisance: makeURL("nuisance"),
|
||||
NuisanceSubmitComplete: makeURL("nuisance-submit-complete"),
|
||||
|
|
|
|||
|
|
@ -8,12 +8,18 @@ import (
|
|||
func Router() chi.Router {
|
||||
r := chi.NewRouter()
|
||||
r.Get("/", getRoot)
|
||||
r.Get("/nuisance", getNuisance)
|
||||
//r.Get("/district/{slug}", renderMock(mockDistrictRootT))
|
||||
//r.Get("/district/{slug}/nuisance", renderMock(mockNuisanceT))
|
||||
//r.Get("/district/{slug}/nuisance-submit-complete", renderMock(mockNuisanceSubmitCompleteT))
|
||||
//r.Get("/district/{slug}/status", renderMock(mockStatusT))
|
||||
//r.Get("/district/{slug}/water", renderMock(mockWaterT))
|
||||
|
||||
r.Get("/privacy", getPrivacy)
|
||||
r.Get("/robots.txt", getRobots)
|
||||
r.Get("/email", getEmailByCode)
|
||||
r.Get("/image/{uuid}", getImageByUUID)
|
||||
r.Route("/mock", addMockRoutes)
|
||||
r.Get("/nuisance", getNuisance)
|
||||
r.Post("/nuisance-submit", postNuisance)
|
||||
r.Get("/nuisance-submit-complete", getNuisanceSubmitComplete)
|
||||
r.Get("/pool", getPool)
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import (
|
|||
//go:embed template/*
|
||||
var embeddedFiles embed.FS
|
||||
|
||||
var components = [...]string{"footer", "header", "photo-upload", "photo-upload-header"}
|
||||
var components = [...]string{"footer", "header-district", "header-rmo", "photo-upload", "photo-upload-header"}
|
||||
|
||||
func buildTemplate(files ...string) *html.BuiltTemplate {
|
||||
subdir := "rmo"
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
{{define "header"}}
|
||||
{{define "header-district"}}
|
||||
<header class="navbar navbar-expand-lg navbar-dark text-light bg-primary shadow-sm">
|
||||
<div class="container">
|
||||
<div class="d-flex align-items-center">
|
||||
<a class="navbar-brand d-flex align-items-center" href="/">
|
||||
<img src="{{.District.URLLogo}}" style="height: 48px;" alt="District logo"></img>
|
||||
<img src="{{.URLLogo}}" style="height: 48px;" alt="District logo"></img>
|
||||
</a>
|
||||
<h1 class="mb-0 ms-3">{{.District.Name}}</h1>
|
||||
<h1 class="mb-0 ms-3">{{.Name}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
12
rmo/template/component/header-rmo.html
Normal file
12
rmo/template/component/header-rmo.html
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
{{define "header-rmo"}}
|
||||
<header class="navbar navbar-expand-lg navbar-dark text-light bg-primary shadow-sm">
|
||||
<div class="container">
|
||||
<div class="d-flex align-items-center">
|
||||
<a class="navbar-brand d-flex align-items-center" href="/">
|
||||
<img src="/static/img/rmo/banner.jpg" style="height: 224px;" alt="Report Mosquitoes Online logo"></img>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{{end}}
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
<div class="card service-card h-100">
|
||||
<div class="card-body text-center">
|
||||
<div class="mb-3">
|
||||
{{ template "svg/mosquito" }}
|
||||
{{ template "mosquito-color.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>
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
<div class="card service-card h-100">
|
||||
<div class="card-body text-center">
|
||||
<div class="mb-3">
|
||||
{{ template "svg/pond" }}
|
||||
{{ template "pond-color.svg" }}
|
||||
</div>
|
||||
<h4 class="card-title">Report Standing Water</h4>
|
||||
<p class="card-text">Report any water that has been sitting for several days, where mosquitoes can live.</p>
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
<div class="card service-card h-100">
|
||||
<div class="card-body text-center">
|
||||
<div class="mb-3">
|
||||
{{ template "svg/check-report" }}
|
||||
{{ template "check-report-color.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>
|
||||
|
|
|
|||
|
|
@ -138,99 +138,6 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
});
|
||||
</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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
select.tall {
|
||||
height: 160px;
|
||||
}
|
||||
.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"}}
|
||||
|
|
@ -275,7 +182,7 @@ select.tall {
|
|||
<!-- Mosquito Activity Section -->
|
||||
<div class="form-section">
|
||||
<div class="section-heading">
|
||||
{{ template "svg/mosquito" }}
|
||||
{{ template "mosquito-color.svg" }}
|
||||
<h3>Mosquito Activity Information</h3>
|
||||
</div>
|
||||
<p class="mb-4">The time when mosquitoes are active can help us identify the species and likely breeding sources.</p>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,14 @@
|
|||
|
||||
{{define "title"}}Nuisance{{end}}
|
||||
{{define "extraheader"}}
|
||||
<script src='https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.js'></script>
|
||||
<script src="/static/js/address-display.js"></script>
|
||||
<script src="/static/js/address-suggestion.js"></script>
|
||||
<script src="/static/js/geocode.js"></script>
|
||||
<script src="/static/js/location.js"></script>
|
||||
<script src="/static/js/map-locator.js"></script>
|
||||
<script>
|
||||
const MAPBOX_ACCESS_TOKEN = "{{.MapboxToken}}";
|
||||
// Handle inspection type selection
|
||||
function selectInspectionType(type) {
|
||||
// Remove selected class from both cards
|
||||
|
|
@ -20,6 +27,15 @@ function selectInspectionType(type) {
|
|||
document.getElementById('schedulingSection').style.display = 'none';
|
||||
}
|
||||
}
|
||||
function toggleCollapse(something) {
|
||||
el = document.getElementById(something)
|
||||
if (el.classList.contains('collapse')) {
|
||||
el.classList.remove('collapse');
|
||||
} else {
|
||||
el.classList.add('collapse');
|
||||
}
|
||||
document.getElementById("toggle-additional").classList.add("visually-hidden");
|
||||
}
|
||||
|
||||
// Check for source identification
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
|
|
@ -41,110 +57,96 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
}
|
||||
});
|
||||
});
|
||||
// Elements
|
||||
const photoInput = document.getElementById('photos');
|
||||
|
||||
// Handle photo selection
|
||||
photoInput.addEventListener('change', handlePhotoSelection);
|
||||
|
||||
// Handle drag and drop
|
||||
const photoDropArea = document.getElementById('photoDropArea');
|
||||
|
||||
photoDropArea.addEventListener('dragover', function(e) {
|
||||
e.preventDefault();
|
||||
photoDropArea.style.backgroundColor = '#e9ecef';
|
||||
});
|
||||
|
||||
photoDropArea.addEventListener('dragleave', function() {
|
||||
photoDropArea.style.backgroundColor = '#f8f9fa';
|
||||
});
|
||||
|
||||
photoDropArea.addEventListener('drop', function(e) {
|
||||
e.preventDefault();
|
||||
photoDropArea.style.backgroundColor = '#f8f9fa';
|
||||
|
||||
if (e.dataTransfer.files.length) {
|
||||
handleFiles(e.dataTransfer.files);
|
||||
}
|
||||
});
|
||||
const mapLocator = document.querySelector("map-locator");
|
||||
mapLocator.addEventListener("load", (event) => {
|
||||
getGeolocation({
|
||||
enableHighAccuracy: true,
|
||||
timeout: 10000,
|
||||
maximumAge: 0
|
||||
}).then(position => {
|
||||
mapLocator.jumpTo({
|
||||
center: {
|
||||
lng: position.coords.longitude,
|
||||
lat: position.coords.latitude,
|
||||
},
|
||||
zoom: 14,
|
||||
});
|
||||
mapLocator.setMarker([
|
||||
position.coords.longitude,
|
||||
position.coords.latitude,
|
||||
]);
|
||||
geocodeReverse(MAPBOX_ACCESS_TOKEN, {
|
||||
lat: position.coords.latitude,
|
||||
lng: position.coords.longitude,
|
||||
});
|
||||
}).catch(error => {
|
||||
console.log("location error", error);
|
||||
})
|
||||
})
|
||||
//mapLocator.addEventListener("markerdragend",
|
||||
let mapZoom = document.getElementById('map-zoom');
|
||||
mapLocator.addEventListener("zoomend", function(e) {
|
||||
mapZoom.value = e.target.getZoom();
|
||||
});
|
||||
mapLocator.addEventListener("markerdragend", (e) => {
|
||||
const lngLat = marker.getLngLat();
|
||||
//displaySelectedCoordinates(lngLat);
|
||||
geocodeReverse(MAPBOX_ACCESS_TOKEN, lngLat);
|
||||
});
|
||||
|
||||
const addressDisplay = document.querySelector("address-display");
|
||||
const addressInput = document.querySelector("address-input");
|
||||
addressInput.addEventListener("address-selected", (event) => {
|
||||
const l = event.detail.location;
|
||||
console.log("Address selected", l);
|
||||
// Center map on selected address
|
||||
mapSetMarker(l.geometry.coordinates);
|
||||
mapJumpTo({
|
||||
center: l.geometry.coordinates,
|
||||
zoom: 14,
|
||||
});
|
||||
|
||||
addressDisplay.show(l);
|
||||
setLocationInputs(l);
|
||||
});
|
||||
});
|
||||
</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"}}
|
||||
{{if (eq .District nil)}}
|
||||
{{template "header-rmo" .}}
|
||||
{{else}}
|
||||
{{template "header-district" .District}}
|
||||
{{end}}
|
||||
<div class="container">
|
||||
<!-- Page Title -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<h2>Report Mosquito Nuisance</h2>
|
||||
|
|
@ -152,24 +154,38 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
</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" action="/nuisance-submit" method="POST">
|
||||
<!-- Location & Contact Section -->
|
||||
<div class="form-section">
|
||||
<div class="section-heading">
|
||||
<i class="bi bi-geo-alt"></i>
|
||||
<h3>Nuisance Location Information</h3>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<div class="alert alert-info" role="info">
|
||||
<p class="mb-0">You can select the location by address or by moving the marker on the map.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3 position-relative">
|
||||
<address-input
|
||||
placeholder="Start typing an address (min 3 characters)"
|
||||
api-key="{{ .MapboxToken }}">
|
||||
</address-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="small text-muted mb-2">You can also click on the map to mark the location precisely</p>
|
||||
<map-locator api-key="{{ .MapboxToken }}"></map-locator>
|
||||
<input type="hidden" id="map-zoom" name="map-zoom"/>
|
||||
|
||||
<!-- Mosquito Activity Section -->
|
||||
<div class="form-section">
|
||||
<div class="section-heading">
|
||||
<i class="bi bi-bug"></i>
|
||||
{{ template "mosquito-color.svg" }}
|
||||
<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>
|
||||
|
||||
|
|
@ -227,260 +243,131 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
<option value="seasonal">All season (recurring issue)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Severity -->
|
||||
<div class="col-md-6">
|
||||
<label for="severityRange" class="form-label">How would you rate the severity of the mosquito problem?</label>
|
||||
<input type="range" class="form-range" id="severityRange" min="1" max="5" name="severity" oninput="document.getElementById('severityValue').innerText = this.value">
|
||||
<div class="severity-scale">
|
||||
<div class="severity-item">
|
||||
<div>Minor</div>
|
||||
<small>Occasional mosquito</small>
|
||||
</div>
|
||||
<div class="severity-item">
|
||||
<div>Moderate</div>
|
||||
<small>Regular presence</small>
|
||||
</div>
|
||||
<div class="severity-item">
|
||||
<div>Severe</div>
|
||||
<small>Many mosquitoes</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
Current selection: <span id="severityValue">3</span>/5
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Location -->
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<label for="source-location" class="form-label">Where on your property do you notice the most mosquito activity?</label>
|
||||
<select class="form-select" name="source-location">
|
||||
<select class="form-select tall" multiple="true" name="source-location">
|
||||
<option value="">Please select</option>
|
||||
<option value="front-yard">Front yard</option>
|
||||
<option value="backyard">Back yard</option>
|
||||
<option value="patio">Patio/deck area</option>
|
||||
<option value="garden">Garden</option>
|
||||
<option value="pool-area">Pool area</option>
|
||||
<option value="throughout">Throughout the property</option>
|
||||
<option value="indoors">Indoors</option>
|
||||
<option value="other">Other area</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Potential Sources Section -->
|
||||
<div class="form-section">
|
||||
<div class="section-heading">
|
||||
<i class="bi bi-search"></i>
|
||||
<h3>Potential Mosquito Sources</h3>
|
||||
<span class="optional-label">optional</span>
|
||||
</div>
|
||||
<p class="mb-3">Have you noticed any of these common mosquito breeding sources in your area?</p>
|
||||
|
||||
<div class="card card-highlight mb-4">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Did you know?</h5>
|
||||
<p class="card-text">Mosquitoes can breed in as little as a bottle cap of water! Eliminating standing water is the most effective way to reduce mosquito populations.</p>
|
||||
<button id="toggle-additional" class="btn btn-warning" type="button" onClick="toggleCollapse('collapse-additional-fields')">
|
||||
Click here to answer a few more questions to better help us solve your mosquito problem
|
||||
</button>
|
||||
<div class="collapse" id="collapse-additional-fields">
|
||||
<!-- Potential Sources Section -->
|
||||
<div class="form-section">
|
||||
<div class="section-heading">
|
||||
<i class="bi bi-search"></i>
|
||||
<h3>Potential Mosquito Sources</h3>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mb-3">Have you noticed any of these common mosquito breeding sources in your area?</p>
|
||||
|
||||
<div class="row g-4 mb-4">
|
||||
<!-- Source 1 -->
|
||||
<div class="col-md-4">
|
||||
<div class="card source-card">
|
||||
<div class="card-body text-center">
|
||||
<div class="source-icon">
|
||||
<i class="bi bi-water"></i>
|
||||
</div>
|
||||
<h5 class="card-title">Stagnant Water</h5>
|
||||
<p class="card-text">Green pools, ponds, fountains, or birdbaths that aren't maintained</p>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="source-stagnant" id="sourceStagnantWater">
|
||||
<label class="form-check-label" for="sourceStagnantWater">
|
||||
I've noticed this
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Source 2 -->
|
||||
<div class="col-md-4">
|
||||
<div class="card source-card">
|
||||
<div class="card-body text-center">
|
||||
<div class="source-icon">
|
||||
<i class="bi bi-droplet"></i>
|
||||
</div>
|
||||
<h5 class="card-title">Containers</h5>
|
||||
<p class="card-text">Buckets, planters, toys, tires, or any items that collect rainwater</p>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="source-container" id="sourceContainers">
|
||||
<label class="form-check-label" for="sourceContainers">
|
||||
I've noticed this
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Source 3 -->
|
||||
<div class="col-md-4">
|
||||
<div class="card source-card">
|
||||
<div class="card-body text-center">
|
||||
<div class="source-icon">
|
||||
<i class="bi bi-house"></i>
|
||||
</div>
|
||||
<h5 class="card-title">Roof & Gutters</h5>
|
||||
<p class="card-text">Clogged gutters, flat roofs, or AC units that collect water</p>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="source-roof" id="sourceGutters">
|
||||
<label class="form-check-label" for="sourceGutters">
|
||||
I've noticed this
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-warning mb-4" id="sourceFoundAlert" style="display: none;">
|
||||
<h5 class="alert-heading"><i class="bi bi-exclamation-triangle me-2"></i>Potential Breeding Source Found!</h5>
|
||||
<p>It looks like you may have identified a mosquito breeding source. If you'd like to report a specific source (like a green pool), please use our <a href="/report-green-pool" class="alert-link">Report a Green Pool</a> form for faster service.</p>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<label for="otherSources" class="form-label">Have you noticed any other potential mosquito breeding sources?</label>
|
||||
<textarea class="form-control" id="otherSources" name="source-description" rows="2" placeholder="Describe any other potential breeding sites you've noticed..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Inspection Request Section -->
|
||||
<div class="form-section">
|
||||
<div class="section-heading">
|
||||
<i class="bi bi-clipboard-check"></i>
|
||||
<h3>Inspection Request</h3>
|
||||
</div>
|
||||
<p class="mb-4">Would you like our technicians to inspect for potential mosquito sources?</p>
|
||||
|
||||
<div class="row g-4 mb-4">
|
||||
<div class="col-md-6">
|
||||
<div class="inspection-type-card" onclick="selectInspectionType('property')" id="propertyInspection">
|
||||
<h5><i class="bi bi-house-door me-2"></i>Property Inspection</h5>
|
||||
<p>Request a technician to inspect your property for mosquito sources. We'll contact you to schedule a convenient time.</p>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="inspection-type" id="inspectionTypeProperty" value="property">
|
||||
<label class="form-check-label" for="inspectionTypeProperty">
|
||||
<strong>Schedule a property inspection</strong>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="inspection-type-card" onclick="selectInspectionType('neighborhood')" id="neighborhoodInspection">
|
||||
<h5><i class="bi bi-map me-2"></i>Neighborhood Inspection</h5>
|
||||
<p>Request a general inspection of your neighborhood. We'll survey the area for potential mosquito breeding sources.</p>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="inspection-type" id="inspectionTypeNeighborhood" value="neighborhood">
|
||||
<label class="form-check-label" for="inspectionTypeNeighborhood">
|
||||
<strong>Request neighborhood inspection</strong>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Property Inspection Scheduling (hidden by default) -->
|
||||
<div id="schedulingSection" style="display: none;">
|
||||
<div class="card mb-4">
|
||||
<div class="card card-highlight mb-4">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Schedule Property Inspection</h5>
|
||||
<p class="card-text">Please indicate your availability for a technician visit.</p>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<label for="preferredDateRange" class="form-label">Preferred Date Range</label>
|
||||
<select class="form-select" id="preferredDateRange" name="preferred-date-range">
|
||||
<option value="">Select preferred dates</option>
|
||||
<option value="next-week">Next week</option>
|
||||
<option value="in-two-weeks">In two weeks</option>
|
||||
<option value="any-time">Any time</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<label for="preferredTime" class="form-label">Preferred Time of Day</label>
|
||||
<select class="form-select" id="preferredTime" name="preferred-time">
|
||||
<option value="">Select preferred time</option>
|
||||
<option value="morning">Morning (8am-12pm)</option>
|
||||
<option value="afternoon">Afternoon (12pm-4pm)</option>
|
||||
<option value="any-time">Any time</option>
|
||||
</select>
|
||||
<h5 class="card-title">Did you know?</h5>
|
||||
<p class="card-text">Mosquitoes can breed in as little as a bottle cap of water! Eliminating standing water is the most effective way to reduce mosquito populations.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-4 mb-4">
|
||||
<!-- Source 1 -->
|
||||
<div class="col-md-4">
|
||||
<div class="card source-card">
|
||||
<div class="card-body text-center">
|
||||
<div class="source-icon">
|
||||
<i class="bi bi-water"></i>
|
||||
</div>
|
||||
<h5 class="card-title">Stagnant Water</h5>
|
||||
<p class="card-text">Green pools, ponds, fountains, or birdbaths that aren't maintained</p>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="source-stagnant" id="sourceStagnantWater">
|
||||
<label class="form-check-label" for="sourceStagnantWater">
|
||||
I've noticed this
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="requestCall" name="request-call">
|
||||
<label class="form-check-label" for="requestCall">
|
||||
Please call me to schedule a specific appointment time
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Source 2 -->
|
||||
<div class="col-md-4">
|
||||
<div class="card source-card">
|
||||
<div class="card-body text-center">
|
||||
<div class="source-icon">
|
||||
<i class="bi bi-droplet"></i>
|
||||
</div>
|
||||
<h5 class="card-title">Containers</h5>
|
||||
<p class="card-text">Buckets, planters, toys, tires, or any items that collect rainwater</p>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="source-container" id="sourceContainers">
|
||||
<label class="form-check-label" for="sourceContainers">
|
||||
I've noticed this
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Source 3 -->
|
||||
<div class="col-md-4">
|
||||
<div class="card source-card">
|
||||
<div class="card-body text-center">
|
||||
<div class="source-icon">
|
||||
<i class="bi bi-house"></i>
|
||||
</div>
|
||||
<h5 class="card-title">Sprinklers & Gutters</h5>
|
||||
<p class="card-text">Clogged street gutters, yard drains, or AC units that collect water</p>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="source-gutters" id="sourceGutters">
|
||||
<label class="form-check-label" for="sourceGutters">
|
||||
I've noticed this
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-warning mb-4" id="sourceFoundAlert" style="display: none;">
|
||||
<h5 class="alert-heading"><i class="bi bi-exclamation-triangle me-2"></i>Potential Breeding Source Found!</h5>
|
||||
<p>It looks like you may have identified a mosquito breeding source. If you'd like to report a specific source (like a green pool), please use our <a href="/report-green-pool" class="alert-link">Report a Green Pool</a> form for faster service.</p>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<label for="otherSources" class="form-label">Have you noticed any other potential mosquito breeding sources?</label>
|
||||
<textarea class="form-control" id="otherSources" name="source-description" rows="2" placeholder="Describe any other potential breeding sites you've noticed..."></textarea>
|
||||
{{template "photo-upload"}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-section">
|
||||
<div class="section-heading">
|
||||
<i class="bi bi-card-text"></i>
|
||||
<h3>Additional Information</h3>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<label for="additionalInfo" class="form-label">Is there anything else you'd like us to know?</label>
|
||||
<textarea class="form-control" id="additionalInfo" name="additional-info" rows="4" placeholder="Additional details about the mosquito issue..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Location & Contact Section -->
|
||||
<div class="form-section">
|
||||
<div class="section-heading">
|
||||
<i class="bi bi-geo-alt"></i>
|
||||
<h3>Location & Contact Information</h3>
|
||||
</div>
|
||||
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-12">
|
||||
<label for="address" class="form-label">Your Address</label>
|
||||
<input type="text" class="form-control" name="address" placeholder="Enter your street address">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="name" class="form-label">Your Name</label>
|
||||
<input type="text" class="form-control" name="name">
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="phone" class="form-label">Phone Number</label>
|
||||
<input type="tel" class="form-control" id="phone" name="phone">
|
||||
</div>
|
||||
<div class="col-md-12 mb-3">
|
||||
<label for="email" class="form-label">Email Address</label>
|
||||
<input type="email" class="form-control" id="email" name="email">
|
||||
<div class="form-text">We'll use this to send you a confirmation and follow-up information.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-section">
|
||||
<div class="section-heading">
|
||||
<i class="bi bi-card-text"></i>
|
||||
<h3>Additional Information</h3>
|
||||
<span class="optional-label">optional</span>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<label for="additionalInfo" class="form-label">Is there anything else you'd like us to know?</label>
|
||||
<textarea class="form-control" id="additionalInfo" name="additional-info" rows="4" placeholder="Additional details about the mosquito issue..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Submit Section -->
|
||||
<div class="submit-container">
|
||||
<div class="row align-items-center">
|
||||
|
|
@ -489,9 +376,9 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
<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">
|
||||
<a class="btn btn-primary btn-lg" href="{{.URL.NuisanceSubmitComplete}}">
|
||||
Submit Report
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -41,4 +41,5 @@ $theme-colors: map-merge(
|
|||
@import "./bootstrap/scss/bootstrap";
|
||||
|
||||
@import "./sidebar.scss";
|
||||
@import "./rmo/nuisance.scss";
|
||||
@import "./rmo/root.scss";
|
||||
|
|
|
|||
93
scss/rmo/nuisance.scss
Normal file
93
scss/rmo/nuisance.scss
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
select.tall {
|
||||
height: 160px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue