92 lines
2.9 KiB
HTML
92 lines
2.9 KiB
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/address-or-report-suggestion.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>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
});
|
|
</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">
|
|
<address-or-report-input
|
|
placeholder="Enter a report ID, address, neighborhood, or zip code"
|
|
api-key="{{ .MapboxToken }}"/>
|
|
</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}}
|