Eli Ribble
e932c2c473
This adds the ability to link a proper address in the database to the report and harmonizes the field names with the address table. It also migrates away from mapbox entirely. And I fixed the "pool" naming for the publicreports, which are supposed to be the more generic 'water'.
589 lines
18 KiB
HTML
589 lines
18 KiB
HTML
{{ template "rmo/layout/base.html" . }}
|
|
|
|
{{ define "title" }}Report Nuisance{{ end }}
|
|
{{ define "extraheader" }}
|
|
<style>
|
|
.map-container {
|
|
background-color: #e9ecef;
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
|
height: 500px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 20px;
|
|
}
|
|
#map {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
<script
|
|
type="text/javascript"
|
|
src="//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.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 src="/static/js/photo-upload.js"></script>
|
|
<script>
|
|
async function handleMapClick(mapLocator, lngLat) {
|
|
mapLocator.SetMarker(lngLat);
|
|
mapLocator.PanTo(lngLat, { duration: 2000 });
|
|
const response = await geocodeReverse({
|
|
lat: lngLat.lat,
|
|
lng: lngLat.lng,
|
|
});
|
|
console.log("click reverse geocode", response);
|
|
if (response !== undefined && response.features.length > 0) {
|
|
const addressInput = document.querySelector("address-input");
|
|
addressInput.SetValue(response.features[0]);
|
|
setLocationInputs(response.features[0]);
|
|
}
|
|
}
|
|
async function handleMarkerDrag(lngLat) {
|
|
const response = await geocodeReverse({
|
|
lat: lngLat.lat,
|
|
lng: lngLat.lng,
|
|
});
|
|
console.log("marker drag reverse geocode", response);
|
|
if (response !== undefined && response.features.length > 0) {
|
|
const addressInput = document.querySelector("address-input");
|
|
addressInput.SetValue(response.features[0]);
|
|
setLocationInputs(response.features[0]);
|
|
}
|
|
}
|
|
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";
|
|
}
|
|
}
|
|
function setLocationInputs(location) {
|
|
let country = document.getElementById("address-country");
|
|
let latitude = document.getElementById("latitude");
|
|
let longitude = document.getElementById("longitude");
|
|
let latlngAccuracyType = document.getElementById("latlng-accuracy-type");
|
|
let latlngAccuracyValue = document.getElementById(
|
|
"latlng-accuracy-value",
|
|
);
|
|
let number = document.getElementById("address-number");
|
|
let postalcode = document.getElementById("address-postalcode");
|
|
let locality = document.getElementById("address-locality");
|
|
let region = document.getElementById("address-region");
|
|
let street = document.getElementById("address-street");
|
|
|
|
// Extract context data from properties
|
|
const props = location.properties;
|
|
const context = props.context || {};
|
|
|
|
// Populate structured fields
|
|
country.value = context.iso_3166_a3;
|
|
latitude.value = location.geometry.coordinates[1];
|
|
longitude.value = location.geometry.coordinates[0];
|
|
latlngAccuracyType.value = props.precision;
|
|
latlngAccuracyValue.value = props.distance;
|
|
number.value = props.address_components.number;
|
|
postalcode.value = props.address_components.postal_code;
|
|
locality.value = context.locality.name;
|
|
region.value = props.context.whosonfirst.region.abbreviation;
|
|
street.value = props.address_components.street;
|
|
}
|
|
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 () {
|
|
// Elements
|
|
const addressInput = document.querySelector("address-input");
|
|
const latitudeInput = document.getElementById("latitude");
|
|
const longitudeInput = document.getElementById("longitude");
|
|
const latlngAccuracyType = document.getElementById(
|
|
"latlng-accuracy-type",
|
|
);
|
|
const latlngAccuracyValue = document.getElementById(
|
|
"latlng-accuracy-value",
|
|
);
|
|
|
|
const mapLocator = document.querySelector("map-locator");
|
|
mapLocator.addEventListener("load", (event) => {
|
|
getGeolocation({
|
|
enableHighAccuracy: true,
|
|
timeout: 10000,
|
|
maximumAge: 0,
|
|
})
|
|
.then((position) => {
|
|
console.log("Got location", position);
|
|
latitudeInput.value = position.coords.latitude;
|
|
longitudeInput.value = position.coords.longitude;
|
|
latlngAccuracyType.value = "browser";
|
|
latlngAccuracyValue.value = position.coords.accuracy;
|
|
mapLocator.JumpTo({
|
|
center: {
|
|
lng: position.coords.longitude,
|
|
lat: position.coords.latitude,
|
|
},
|
|
zoom: 14,
|
|
});
|
|
const coords = [
|
|
position.coords.longitude,
|
|
position.coords.latitude,
|
|
];
|
|
mapLocator.SetMarker(coords);
|
|
mapLocator.JumpTo({ center: coords, zoom: 14 });
|
|
handleMarkerDrag({
|
|
lat: position.coords.latitude,
|
|
lng: position.coords.longitude,
|
|
});
|
|
})
|
|
.catch((error) => {
|
|
console.log("location error", error);
|
|
});
|
|
});
|
|
let mapZoom = document.getElementById("map-zoom");
|
|
mapLocator.addEventListener("zoomend", function (e) {
|
|
mapZoom.value = e.target.GetZoom();
|
|
});
|
|
mapLocator.addEventListener("click", (e) => {
|
|
// We get some events without the lngLat
|
|
if (e.detail !== undefined && e.detail.lngLat !== undefined) {
|
|
handleMapClick(mapLocator, e.detail.lngLat);
|
|
}
|
|
});
|
|
mapLocator.addEventListener("markerdragend", (e) => {
|
|
const marker = event.detail.marker;
|
|
const lngLat = marker.getLngLat();
|
|
handleMarkerDrag(lngLat);
|
|
});
|
|
|
|
const addressDisplay = document.querySelector("address-display");
|
|
addressInput.addEventListener("address-selected", (event) => {
|
|
const l = event.detail.location;
|
|
console.log("Address selected", l);
|
|
// Center map on selected address
|
|
mapLocator.SetMarker(l.geometry.coordinates);
|
|
mapLocator.JumpTo({
|
|
center: l.geometry.coordinates,
|
|
zoom: 14,
|
|
});
|
|
|
|
setLocationInputs(l);
|
|
});
|
|
});
|
|
</script>
|
|
<style></style>
|
|
{{ end }}
|
|
{{ define "content" }}
|
|
{{ if (eq .District nil) }}
|
|
{{ template "rmo/component/header-rmo.html" . }}
|
|
{{ else }}
|
|
{{ template "rmo/component/header-district.html" .District }}
|
|
{{ end }}
|
|
<div class="container">
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<h2>Report Mosquito Nuisance</h2>
|
|
<p class="lead">Help us identify mosquito activity in your area</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Report Form -->
|
|
<form
|
|
id="mosquitoNuisanceForm"
|
|
action="{{ .URL.NuisanceSubmit }}"
|
|
method="POST"
|
|
enctype="multipart/form-data"
|
|
>
|
|
<!-- Location Section -->
|
|
<div class="form-section">
|
|
<div class="section-heading">
|
|
<i class="bi bi-geo-alt"></i>
|
|
<h3>Nuisance Location Information</h3>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="alert alert-info" role="info">
|
|
<p class="mb-0">
|
|
You can select the location by address or by moving the marker on
|
|
the map.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="mb-3 position-relative">
|
|
<address-input
|
|
placeholder="Start typing an address (min 3 characters)"
|
|
api-key="{{ .MapboxToken }}"
|
|
>
|
|
</address-input>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="small text-muted mb-2">
|
|
You can also click on the map to mark the location precisely
|
|
</p>
|
|
<div class="map-container">
|
|
<map-locator id="map"></map-locator>
|
|
</div>
|
|
<input type="hidden" id="map-zoom" name="map-zoom" />
|
|
<input type="hidden" id="address-country" name="address-country" />
|
|
<input type="hidden" id="address-number" name="address-number" />
|
|
<input type="hidden" id="address-postcode" name="address-postcode" />
|
|
<input type="hidden" id="address-locality" name="address-locality" />
|
|
<input type="hidden" id="address-region" name="address-region" />
|
|
<input type="hidden" id="address-street" name="address-street" />
|
|
<input type="hidden" id="latitude" name="latitude" />
|
|
<input type="hidden" id="longitude" name="longitude" />
|
|
<input
|
|
type="hidden"
|
|
id="latlng-accuracy-type"
|
|
name="latlng-accuracy-type"
|
|
/>
|
|
<input
|
|
type="hidden"
|
|
id="latlng-accuracy-value"
|
|
name="latlng-accuracy-value"
|
|
/>
|
|
|
|
<!-- Mosquito Activity Section -->
|
|
<div class="form-section">
|
|
<div class="section-heading">
|
|
{{ 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>
|
|
|
|
<!-- Time of Day -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<label class="form-label"
|
|
>When do you typically notice mosquitoes? (Select all that
|
|
apply)</label
|
|
>
|
|
<div class="row">
|
|
<div class="col-6 col-md-3">
|
|
<input
|
|
type="checkbox"
|
|
class="btn-check"
|
|
id="earlyMorning"
|
|
name="tod-early"
|
|
autocomplete="off"
|
|
/>
|
|
<label
|
|
class="btn btn-outline-primary time-of-day-btn"
|
|
for="earlyMorning"
|
|
>
|
|
<span class="time-of-day-icon"
|
|
><i class="bi bi-sunrise"></i
|
|
></span>
|
|
<span class="time-label">Early Morning</span>
|
|
<small class="text-muted">5am-8am</small>
|
|
</label>
|
|
</div>
|
|
<div class="col-6 col-md-3">
|
|
<input
|
|
type="checkbox"
|
|
class="btn-check"
|
|
id="daytime"
|
|
name="tod-day"
|
|
autocomplete="off"
|
|
/>
|
|
<label
|
|
class="btn btn-outline-primary time-of-day-btn"
|
|
for="daytime"
|
|
>
|
|
<span class="time-of-day-icon"
|
|
><i class="bi bi-sun"></i
|
|
></span>
|
|
<span class="time-label">Daytime</span>
|
|
<small class="text-muted">8am-5pm</small>
|
|
</label>
|
|
</div>
|
|
<div class="col-6 col-md-3">
|
|
<input
|
|
type="checkbox"
|
|
class="btn-check"
|
|
id="evening"
|
|
name="tod-evening"
|
|
autocomplete="off"
|
|
/>
|
|
<label
|
|
class="btn btn-outline-primary time-of-day-btn"
|
|
for="evening"
|
|
>
|
|
<span class="time-of-day-icon"
|
|
><i class="bi bi-sunset"></i
|
|
></span>
|
|
<span class="time-label">Evening</span>
|
|
<small class="text-muted">5pm-9pm</small>
|
|
</label>
|
|
</div>
|
|
<div class="col-6 col-md-3">
|
|
<input
|
|
type="checkbox"
|
|
class="btn-check"
|
|
id="night"
|
|
name="tod-night"
|
|
autocomplete="off"
|
|
/>
|
|
<label
|
|
class="btn btn-outline-primary time-of-day-btn"
|
|
for="night"
|
|
>
|
|
<span class="time-of-day-icon"
|
|
><i class="bi bi-moon-stars"></i
|
|
></span>
|
|
<span class="time-label">Night</span>
|
|
<small class="text-muted">9pm-5am</small>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Duration -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-6">
|
|
<label for="duration" class="form-label"
|
|
>How long have you been experiencing this mosquito problem?</label
|
|
>
|
|
<select class="form-select" name="duration">
|
|
<option value="just-noticed">Just noticed recently</option>
|
|
<option value="few-days">A few days</option>
|
|
<option value="1-2-weeks">1-2 weeks</option>
|
|
<option value="2-4-weeks">2-4 weeks</option>
|
|
<option value="1-3-months">1-3 months</option>
|
|
<option value="seasonal">All season (recurring issue)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Location -->
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<label for="source-location" class="form-label"
|
|
>Where on your property do you notice the most mosquito
|
|
activity?</label
|
|
>
|
|
<select
|
|
class="form-select tall"
|
|
multiple="true"
|
|
name="source-location"
|
|
>
|
|
<option value="frontyard">Front yard</option>
|
|
<option value="backyard">Back yard</option>
|
|
<option value="garden">Garden</option>
|
|
<option value="pool-area">Pool area</option>
|
|
<option value="other">Other area</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
id="toggle-additional"
|
|
class="btn btn-warning"
|
|
type="button"
|
|
onClick="toggleCollapse('collapse-additional-fields')"
|
|
>
|
|
Click here to answer a few more questions to better help us solve your
|
|
mosquito problem
|
|
</button>
|
|
<div class="collapse" id="collapse-additional-fields">
|
|
<!-- Potential Sources Section -->
|
|
<div class="form-section">
|
|
<div class="section-heading">
|
|
<i class="bi bi-search"></i>
|
|
<h3>Potential Mosquito Sources</h3>
|
|
</div>
|
|
<p class="mb-3">
|
|
Have you noticed any of these common mosquito breeding sources in
|
|
your area?
|
|
</p>
|
|
|
|
<div class="card card-highlight mb-4">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Did you know?</h5>
|
|
<p class="card-text">
|
|
Mosquitoes can breed in as little as a bottle cap of water!
|
|
Eliminating standing water is the most effective way to reduce
|
|
mosquito populations.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-4 mb-4">
|
|
<!-- Source 1 -->
|
|
<div class="col-md-4">
|
|
<div class="card source-card">
|
|
<div class="card-body text-center">
|
|
<div class="source-icon">
|
|
<i class="bi bi-water"></i>
|
|
</div>
|
|
<h5 class="card-title">Stagnant Water</h5>
|
|
<p class="card-text">
|
|
Green pools, ponds, fountains, or birdbaths that aren't
|
|
maintained
|
|
</p>
|
|
<div class="form-check">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
name="source-stagnant"
|
|
id="sourceStagnantWater"
|
|
/>
|
|
<label class="form-check-label" for="sourceStagnantWater">
|
|
I've noticed this
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Source 2 -->
|
|
<div class="col-md-4">
|
|
<div class="card source-card">
|
|
<div class="card-body text-center">
|
|
<div class="source-icon">
|
|
<i class="bi bi-droplet"></i>
|
|
</div>
|
|
<h5 class="card-title">Containers</h5>
|
|
<p class="card-text">
|
|
Buckets, planters, toys, tires, or any items that collect
|
|
rainwater
|
|
</p>
|
|
<div class="form-check">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
name="source-container"
|
|
id="sourceContainers"
|
|
/>
|
|
<label class="form-check-label" for="sourceContainers">
|
|
I've noticed this
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Source 3 -->
|
|
<div class="col-md-4">
|
|
<div class="card source-card">
|
|
<div class="card-body text-center">
|
|
<div class="source-icon">
|
|
<i class="bi bi-house"></i>
|
|
</div>
|
|
<h5 class="card-title">Sprinklers & Gutters</h5>
|
|
<p class="card-text">
|
|
Clogged street gutters, yard drains, or AC units that
|
|
collect water
|
|
</p>
|
|
<div class="form-check">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
name="source-gutters"
|
|
id="sourceGutters"
|
|
/>
|
|
<label class="form-check-label" for="sourceGutters">
|
|
I've noticed this
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<label for="otherSources" class="form-label"
|
|
>Have you noticed any other potential mosquito breeding
|
|
sources?</label
|
|
>
|
|
<textarea
|
|
class="form-control"
|
|
id="otherSources"
|
|
name="source-description"
|
|
rows="2"
|
|
placeholder="Describe any other potential breeding sites you've noticed..."
|
|
></textarea>
|
|
<photo-upload />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-section">
|
|
<div class="section-heading">
|
|
<i class="bi bi-card-text"></i>
|
|
<h3>Additional Information</h3>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<label for="additionalInfo" class="form-label"
|
|
>Is there anything else you'd like us to know?</label
|
|
>
|
|
<textarea
|
|
class="form-control"
|
|
id="additionalInfo"
|
|
maxlength="2048"
|
|
name="additional-info"
|
|
rows="4"
|
|
placeholder="Additional details about the mosquito issue..."
|
|
></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Submit Section -->
|
|
<div class="submit-container">
|
|
<div class="row align-items-center">
|
|
<div class="col-md-8">
|
|
<p class="mb-0">
|
|
<strong>Thank you for reporting this mosquito issue.</strong>
|
|
</p>
|
|
<p class="mb-0 small text-muted">
|
|
After submission, you'll receive a confirmation with a report ID
|
|
and further information.
|
|
</p>
|
|
</div>
|
|
<div class="col-md-4 text-md-end mt-3 mt-md-0">
|
|
<button type="submit" class="btn btn-primary btn-lg">
|
|
Submit Report
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{{ end }}
|