nidus-sync/rmo/template/status.html

{{template "base.html" .}}

{{define "title"}}Status{{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/geocode.js"></script>
<script src="/static/js/location.js"></script>
<script src="/static/js/map-multipoint.js"></script>
<script src="/static/js/report-table.js"></script>
<style>
</style>
<script>
function formatReportID(inputElement) {
	// Save current cursor position
	const cursorPos = inputElement.selectionStart;
	
	// Get current value and remove existing hyphens
	let value = inputElement.value.replace(/-/g, '');
	
	// Calculate how many hyphens were before the cursor
	const beforeCursor = inputElement.value.substring(0, cursorPos);
	const hyphensBefore = (beforeCursor.match(/-/g) || []).length;
	
	// Format the value with hyphens at positions 4 and 8
	if (value.length > 8) {
	  value = value.substring(0, 4) + '-' + value.substring(4, 8) + '-' + value.substring(8);
	} else if (value.length > 4) {
	  value = value.substring(0, 4) + '-' + value.substring(4);
	}
	
	// Update input field value
	inputElement.value = value;
	
	// Calculate new cursor position
	const newHyphensBefore = (value.substring(0, cursorPos - hyphensBefore + 
	                        Math.min(hyphensBefore, 2)).match(/-/g) || []).length;
	const newPosition = cursorPos - hyphensBefore + newHyphensBefore;
	
	// Restore cursor position
	inputElement.setSelectionRange(newPosition, newPosition);
}

document.addEventListener('DOMContentLoaded', function() {
	document.getElementById('report').addEventListener('input', function() {
   		formatReportID(this);
	});
});
</script>
{{end}}
{{define "content"}}
<div class="container my-4">
	<!-- Search Box -->
	<div class="card search-box mb-4">
		<div class="card-body">
			<form class="row g-3 align-items-center">
				<div class="col-md-9">
					<label for="addressSearch" class="visually-hidden">Search by address</label>
					<div class="input-group">
						<span class="input-group-text"><i class="fas fa-search"></i></span>
						<input type="text" class="form-control form-control-lg" id="addressSearch" 
							placeholder="Enter a report ID, address, neighborhood, or zip code">
					</div>
				</div>
				<div class="col-md-3">
					<button type="submit" class="btn btn-primary btn-lg w-100">Search</button>
				</div>
				<div class="col-12">
					<div class="form-check form-check-inline">
						<input class="form-check-input" type="checkbox" id="mosquitoNuisance" checked>
						<label class="form-check-label" for="mosquitoNuisance">Mosquito Nuisance</label>
					</div>
					<div class="form-check form-check-inline">
						<input class="form-check-input" type="checkbox" id="stagnantWater" checked>
						<label class="form-check-label" for="gWaterreenPool">Stagnant Water</label>
					</div>
				</div>
			</form>
		</div>
	</div>
	
	<!-- Map Section -->
	<div class="card mb-4">
		<div class="card-header bg-info text-white">
			<h5 class="mb-0"><i class="fas fa-map-marked-alt me-2"></i>Reports Map</h5>
		</div>
		<div class="card-body p-0">
			<map-multipoint 
					api-key="{{ .MapboxToken }}"
					latitude="36.3"
					longitude="-119.2"
					tegola="{{.URL.Tegola}}"
					zoom="9"
					/></map-multipoint>
		</div>
	</div>
	
	<!-- Results Section -->
	<div class="card">
		<div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
			<h5 class="mb-0"><i class="fas fa-list me-2"></i>Reports Near You</h5>
			<span class="badge bg-light text-dark">15 Reports Found</span>
		</div>
		<div class="card-body p-0">
			<div class="table-responsive">
				<report-table />
			</div>
		</div>
		<!--
		<div class="card-footer">
			<nav aria-label="Page navigation">
				<ul class="pagination justify-content-center mb-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="#">3</a></li>
					<li class="page-item">
						<a class="page-link" href="#">Next</a>
					</li>
				</ul>
			</nav>
		</div>
		-->
	</div>
</div>
{{end}}