240 lines
6.8 KiB
HTML
240 lines
6.8 KiB
HTML
{{ template "rmo/layout/base.html" . }}
|
|
|
|
{{ define "title" }}Quick Report{{ end }}
|
|
{{ define "extraheader" }}
|
|
{{ template "photo-upload-header" }}
|
|
<style>
|
|
.district-logo {
|
|
max-height: 60px;
|
|
width: auto;
|
|
}
|
|
|
|
.submit-btn {
|
|
padding: 15px 0;
|
|
font-size: 1.25rem;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.location-info {
|
|
background-color: #e9f5ff;
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
margin-bottom: 20px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.header-title {
|
|
font-size: 1.5rem;
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
// Elements
|
|
const form = document.getElementById("mosquitoReportForm");
|
|
const locationStatus = document.getElementById("locationStatus");
|
|
const latitudeInput = document.getElementById("latitude");
|
|
const longitudeInput = document.getElementById("longitude");
|
|
const submitButton = document.getElementById("submitButton");
|
|
const loadingOverlay = document.getElementById("loadingOverlay");
|
|
|
|
// Get current location
|
|
requestLocation();
|
|
|
|
// Handle form submission
|
|
form.addEventListener("submit", handleFormSubmission);
|
|
|
|
/**
|
|
* Request user's geolocation
|
|
*/
|
|
function requestLocation() {
|
|
if (navigator.geolocation) {
|
|
locationStatus.textContent = "Requesting your location...";
|
|
|
|
navigator.geolocation.getCurrentPosition(
|
|
// Success callback
|
|
function (position) {
|
|
locationStatus.textContent = "Location successfully added";
|
|
locationStatus.classList.add("text-success");
|
|
|
|
// Store location in hidden fields
|
|
latitudeInput.value = position.coords.latitude;
|
|
longitudeInput.value = position.coords.longitude;
|
|
},
|
|
// Error callback
|
|
function (error) {
|
|
let errorMessage = "Unable to get your location";
|
|
switch (error.code) {
|
|
case error.PERMISSION_DENIED:
|
|
errorMessage =
|
|
"Location access denied. Please enable location services.";
|
|
break;
|
|
case error.POSITION_UNAVAILABLE:
|
|
errorMessage = "Location information unavailable.";
|
|
break;
|
|
case error.TIMEOUT:
|
|
errorMessage = "Location request timed out.";
|
|
break;
|
|
}
|
|
locationStatus.textContent = errorMessage;
|
|
locationStatus.classList.add("text-danger");
|
|
},
|
|
// Options
|
|
{
|
|
enableHighAccuracy: true,
|
|
timeout: 10000,
|
|
maximumAge: 0,
|
|
},
|
|
);
|
|
} else {
|
|
locationStatus.textContent =
|
|
"Geolocation is not supported by your browser";
|
|
locationStatus.classList.add("text-danger");
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Handle form submission
|
|
*/
|
|
function handleFormSubmission(event) {
|
|
event.preventDefault();
|
|
|
|
// Show loading overlay
|
|
loadingOverlay.classList.remove("d-none");
|
|
|
|
// Disable submit button to prevent double submission
|
|
submitButton.disabled = true;
|
|
|
|
// Create FormData object
|
|
const formData = new FormData(form);
|
|
|
|
// Send AJAX request
|
|
fetch(form.action, {
|
|
method: "POST",
|
|
body: formData,
|
|
})
|
|
.then((response) => {
|
|
if (response.ok) {
|
|
// Navigate to the URL the server specified
|
|
window.location.href = response.url;
|
|
return;
|
|
}
|
|
console.error("not ok server response", response);
|
|
throw new Error("Server error " + response.status);
|
|
})
|
|
.catch((error) => {
|
|
console.error("Error:", error);
|
|
alert(
|
|
"There was a problem submitting your report. Please try again. If this happens a few times, please let us know.",
|
|
);
|
|
|
|
// Re-enable submit button
|
|
submitButton.disabled = false;
|
|
|
|
// Hide loading overlay
|
|
loadingOverlay.classList.add("d-none");
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
{{ end }}
|
|
{{ define "content" }}
|
|
<!-- Main Content -->
|
|
<main class="container mb-5">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body p-4">
|
|
<h2 class="card-title text-center mb-4">Quick Mosquito Report</h2>
|
|
|
|
<!-- Form -->
|
|
<form
|
|
id="mosquitoReportForm"
|
|
action="/quick-submit"
|
|
method="POST"
|
|
enctype="multipart/form-data"
|
|
>
|
|
<!-- Location Automatic Collection Note -->
|
|
<div class="location-info d-flex align-items-center mb-4">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
fill="currentColor"
|
|
class="bi bi-geo-alt me-2"
|
|
viewBox="0 0 16 16"
|
|
>
|
|
<path
|
|
d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z"
|
|
/>
|
|
<path
|
|
d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
|
|
/>
|
|
</svg>
|
|
<span id="locationStatus">Requesting your location...</span>
|
|
<!-- Hidden fields for location data -->
|
|
<input type="hidden" id="latitude" name="latitude" />
|
|
<input type="hidden" id="longitude" name="longitude" />
|
|
</div>
|
|
|
|
<!-- Photo Upload -->
|
|
<div class="mb-4">
|
|
{{ template "photo-upload" }}
|
|
</div>
|
|
|
|
<!-- Comments -->
|
|
<div class="mb-4">
|
|
<label for="comments" class="form-label fw-bold"
|
|
>Comments</label
|
|
>
|
|
<textarea
|
|
class="form-control"
|
|
id="comments"
|
|
name="comments"
|
|
rows="4"
|
|
placeholder="Describe the mosquito issue (e.g., standing water, high mosquito activity, time of day they're most active)"
|
|
></textarea>
|
|
</div>
|
|
|
|
<!-- Submit Button -->
|
|
<button
|
|
type="submit"
|
|
class="btn btn-success w-100 submit-btn mt-4"
|
|
id="submitButton"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
fill="currentColor"
|
|
class="bi bi-send-fill me-2"
|
|
viewBox="0 0 16 16"
|
|
>
|
|
<path
|
|
d="M15.964.686a.5.5 0 0 0-.65-.65L.767 5.855H.766l-.452.18a.5.5 0 0 0-.082.887l.41.26.001.002 4.995 3.178 3.178 4.995.002.002.26.41a.5.5 0 0 0 .886-.083l6-15Zm-1.833 1.89L6.637 10.07l-.215-.338a.5.5 0 0 0-.154-.154l-.338-.215 7.494-7.494 1.178-.471-.47 1.178Z"
|
|
/>
|
|
</svg>
|
|
Submit Report
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Loading Indicator Overlay (Initially hidden) -->
|
|
<div
|
|
id="loadingOverlay"
|
|
class="position-fixed top-0 start-0 w-100 h-100 d-none"
|
|
style="background-color: rgba(0,0,0,0.5); z-index: 1050;"
|
|
>
|
|
<div
|
|
class="position-absolute top-50 start-50 translate-middle text-white text-center"
|
|
>
|
|
<div class="spinner-border" role="status"></div>
|
|
<p class="mt-2">Submitting your report...</p>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|