193 lines
6.1 KiB
HTML
193 lines
6.1 KiB
HTML
{{template "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}}
|