Add status searching page
This commit is contained in:
parent
9e586ae6ef
commit
9aee938e30
3 changed files with 212 additions and 2 deletions
|
|
@ -13,6 +13,7 @@ var (
|
|||
mockNuisanceT = buildTemplate("mock/nuisance", "base")
|
||||
mockNuisanceSubmitCompleteT = buildTemplate("mock/nuisance-submit-complete", "base")
|
||||
mockRootT = buildTemplate("mock/root", "base")
|
||||
mockStatusT = buildTemplate("mock/status", "base")
|
||||
)
|
||||
|
||||
type ContentDistrict struct {
|
||||
|
|
@ -22,6 +23,8 @@ type ContentDistrict struct {
|
|||
type ContentURL struct {
|
||||
Nuisance string
|
||||
NuisanceSubmitComplete string
|
||||
Status string
|
||||
Tegola string
|
||||
}
|
||||
type ContentMock struct {
|
||||
District ContentDistrict
|
||||
|
|
@ -32,15 +35,18 @@ type ContentMock struct {
|
|||
|
||||
func addMockRoutes(r chi.Router) {
|
||||
r.Get("/", renderMock(mockRootT))
|
||||
r.Get("/district/{slug}", renderMock(mockDistrictRootT))
|
||||
r.Get("/nuisance", renderMock(mockNuisanceT))
|
||||
r.Get("/nuisance-submit-complete", renderMock(mockNuisanceSubmitCompleteT))
|
||||
r.Get("/district/{slug}", renderMock(mockDistrictRootT))
|
||||
r.Get("/status", renderMock(mockStatusT))
|
||||
}
|
||||
|
||||
func makeContentURL() ContentURL {
|
||||
return ContentURL{
|
||||
Nuisance: makeURLMock("nuisance"),
|
||||
NuisanceSubmitComplete: makeURLMock("nuisance-submit-complete"),
|
||||
Status: makeURLMock("status"),
|
||||
Tegola: config.MakeURLTegola("/"),
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@
|
|||
</div>
|
||||
<h4 class="card-title">Follow-up or Check Status</h4>
|
||||
<p class="card-text">Check on a previous request or view current mosquito activity in your area.</p>
|
||||
<a href="/status" class="btn btn-primary mt-3">Get Status</a>
|
||||
<a href="{{.URL.Status}}" class="btn btn-primary mt-3">Get Status</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
204
public-report/template/mock/status.html
Normal file
204
public-report/template/mock/status.html
Normal file
|
|
@ -0,0 +1,204 @@
|
|||
{{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>
|
||||
.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 {
|
||||
height: 500px;
|
||||
width:100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#map img {
|
||||
max-width: none;
|
||||
min-width: 0px;
|
||||
height: auto;
|
||||
}
|
||||
.search-box {
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
border-radius: 8px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.map-container {
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
const MAPBOX_ACCESS_TOKEN = '{{.MapboxToken}}';
|
||||
var markers = [];
|
||||
// Because features come from tiled vector data, feature geometries may be split
|
||||
// or duplicated across tile boundaries. As a result, features may appear
|
||||
// multiple times in query results.
|
||||
function getUniqueFeatures(features, comparatorProperty) {
|
||||
const uniqueIds = new Set();
|
||||
const uniqueFeatures = [];
|
||||
for (const feature of features) {
|
||||
const id = feature.properties[comparatorProperty];
|
||||
if (!uniqueIds.has(id)) {
|
||||
uniqueIds.add(id);
|
||||
uniqueFeatures.push(feature);
|
||||
}
|
||||
}
|
||||
return uniqueFeatures;
|
||||
}
|
||||
|
||||
function renderReports(features) {
|
||||
console.log("render reports", features);
|
||||
|
||||
const report_table = document.querySelector('report-table');
|
||||
let reports = [];
|
||||
for (const feature of features) {
|
||||
reports.push({
|
||||
address: feature.properties.address,
|
||||
created: feature.properties.created,
|
||||
id: feature.properties.public_id,
|
||||
status: feature.properties.status,
|
||||
type: feature.properties.table_name
|
||||
});
|
||||
}
|
||||
report_table.reports = reports;
|
||||
}
|
||||
function onLoad() {
|
||||
const map = document.querySelector("map-multipoint");
|
||||
map.addEventListener("load", (event) => {
|
||||
map.addSource('tegola-mosquito', {
|
||||
'type': 'vector',
|
||||
'tiles': [
|
||||
'{{.URL.Tegola}}maps/mosquito/{z}/{x}/{y}'
|
||||
]
|
||||
});
|
||||
map.addLayer({
|
||||
'id': 'mosquito',
|
||||
'source': 'tegola-mosquito',
|
||||
'source-layer': 'report_location',
|
||||
'type': 'circle',
|
||||
'paint': {
|
||||
'circle-color': '#4264fb',
|
||||
'circle-radius': 7,
|
||||
'circle-stroke-width': 2,
|
||||
'circle-stroke-color': '#ffffff'
|
||||
}
|
||||
});
|
||||
map.on('render', () => {
|
||||
const features = map.queryRenderedFeatures({target: {layerId: 'mosquito'}});
|
||||
|
||||
if (features) {
|
||||
const uniqueFeatures = getUniqueFeatures(features, 'public_id');
|
||||
// Populate features for the listing overlay.
|
||||
renderReports(uniqueFeatures);
|
||||
}
|
||||
});
|
||||
getGeolocation({
|
||||
enableHighAccuracy: true,
|
||||
timeout: 10000,
|
||||
maximumAge: 0
|
||||
}).then(position => {
|
||||
map.jumpTo({
|
||||
center: {
|
||||
lng: position.coords.longitude,
|
||||
lat: position.coords.latitude,
|
||||
},
|
||||
zoom: 14,
|
||||
});
|
||||
}).catch(error => {
|
||||
console.log("location error", error);
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', onLoad);
|
||||
</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}}
|
||||
Loading…
Add table
Add a link
Reference in a new issue