Add initial sketch of site review page
This commit is contained in:
parent
62fd857b83
commit
5b75ac1d1c
3 changed files with 256 additions and 0 deletions
252
html/template/sync/review/site.html
Normal file
252
html/template/sync/review/site.html
Normal file
|
|
@ -0,0 +1,252 @@
|
|||
{{ template "sync/layout/base.html" . }}
|
||||
|
||||
{{ define "title" }}Status{{ end }}
|
||||
{{ define "extraheader" }}
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.js"
|
||||
></script>
|
||||
<script src="/static/js/address-suggestion.js"></script>
|
||||
<script src="/static/js/location.js"></script>
|
||||
<script src="/static/js/map-multipoint.js"></script>
|
||||
<!-- ordering matters since report table depends on time-relative -->
|
||||
<script src="/static/js/time-relative.js"></script>
|
||||
<script src="/static/js/table-site.js"></script>
|
||||
<script>
|
||||
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(nuisances, waters, comparatorProperty) {
|
||||
const uniqueIds = new Set();
|
||||
const uniqueFeatures = [];
|
||||
for (const feature of nuisances) {
|
||||
const id = feature.properties[comparatorProperty];
|
||||
if (!uniqueIds.has(id)) {
|
||||
uniqueIds.add(id);
|
||||
let f = structuredClone(feature);
|
||||
f.type = "nuisance";
|
||||
uniqueFeatures.push(f);
|
||||
}
|
||||
}
|
||||
for (const feature of waters) {
|
||||
const id = feature.properties[comparatorProperty];
|
||||
if (!uniqueIds.has(id)) {
|
||||
uniqueIds.add(id);
|
||||
let f = structuredClone(feature);
|
||||
f.type = "water";
|
||||
uniqueFeatures.push(f);
|
||||
}
|
||||
}
|
||||
return uniqueFeatures;
|
||||
}
|
||||
|
||||
function handleLookupFormSubmit(e) {
|
||||
const report_id = e.target.elements["address-or-report"].value.replace(/-/g, "");
|
||||
window.location = "/status/" + report_id;
|
||||
return false;
|
||||
}
|
||||
|
||||
function maybeEnableLookupButton(e) {
|
||||
const lookupButton = document.getElementById("lookup");
|
||||
const lookupButtonTooltip = tooltipByElementId["lookup-tooltip"];
|
||||
const reportId = e.target.value.replace(/-/g, "");
|
||||
if (reportId.length == 12) {
|
||||
lookupButton.disabled = false;
|
||||
lookupButton.classList.remove("disabled");
|
||||
lookupButtonTooltip.disable()
|
||||
} else {
|
||||
lookupButton.disabled = true;
|
||||
lookupButton.classList.add("disabled");
|
||||
lookupButtonTooltip.enable()
|
||||
}
|
||||
}
|
||||
|
||||
function onLoad() {
|
||||
const map = document.querySelector("map-multipoint");
|
||||
const checkboxNuisance = document.getElementById("checkboxNuisance");
|
||||
const checkboxWater = document.getElementById("checkboxWater");
|
||||
map.addEventListener("load", (event) => {
|
||||
map.addSource('tegola', {
|
||||
'type': 'vector',
|
||||
'tiles': [
|
||||
'{{.URL.Tegola}}maps/rmo/{z}/{x}/{y}'
|
||||
]
|
||||
});
|
||||
map.addLayer({
|
||||
'id': 'nuisance',
|
||||
'source': 'tegola',
|
||||
'source-layer': 'nuisance_location',
|
||||
'type': 'circle',
|
||||
'paint': {
|
||||
'circle-color': "#DC4535",
|
||||
'circle-radius': 7,
|
||||
'circle-stroke-width': 2,
|
||||
'circle-stroke-color': "#9C1C28"
|
||||
}
|
||||
});
|
||||
map.addLayer({
|
||||
'id': 'rmo_water',
|
||||
'source': 'tegola',
|
||||
'source-layer': 'water_location',
|
||||
'type': 'circle',
|
||||
'paint': {
|
||||
'circle-color': "#0D6EfD",
|
||||
'circle-radius': 7,
|
||||
'circle-stroke-width': 2,
|
||||
'circle-stroke-color': "#024AB6"
|
||||
}
|
||||
});
|
||||
map.on("idle", () => {
|
||||
function _addCheckboxClick(checkbox, layer_id) {
|
||||
checkbox.onclick = function(e) {
|
||||
if (checkbox.checked) {
|
||||
map.SetLayoutProperty(layer_id, "visibility", "visible");
|
||||
} else {
|
||||
map.SetLayoutProperty(layer_id, "visibility", "none");
|
||||
}
|
||||
}
|
||||
}
|
||||
_addCheckboxClick(checkboxNuisance, "nuisance");
|
||||
_addCheckboxClick(checkboxWater, "rmo_water");
|
||||
checkboxNuisance.onclick()
|
||||
checkboxWater.onclick()
|
||||
});
|
||||
function _updateReports() {
|
||||
const nuisances = map.queryRenderedFeatures({target: {layerId: 'nuisance'}});
|
||||
const waters = map.queryRenderedFeatures({target: {layerId: 'water'}});
|
||||
const nidus_nuisances = nuisances.filter((feature) => feature.source == "tegola");
|
||||
const nidus_waters = waters.filter((feature) => feature.source == "tegola");
|
||||
const uniqueFeatures = getUniqueFeatures(nidus_nuisances, nidus_waters, 'public_id');
|
||||
// Populate features for the listing overlay.
|
||||
renderReports(uniqueFeatures);
|
||||
}
|
||||
map.once("idle", _updateReports);
|
||||
map.on('moveend', _updateReports);
|
||||
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);
|
||||
})
|
||||
});
|
||||
const report_table = document.querySelector('report-table');
|
||||
report_table.addEventListener("row-clicked", (e) => {
|
||||
window.location = "/status/" + e.detail.reportId;
|
||||
})
|
||||
document.querySelector("address-or-report-input").addEventListener("suggestion-selected", (e) => {
|
||||
maybeEnableLookupButton(e)
|
||||
if (e.detail.type == "address") {
|
||||
map.flyTo({
|
||||
center: {
|
||||
lng: e.detail.content.geometry.coordinates[0],
|
||||
lat: e.detail.content.geometry.coordinates[1],
|
||||
},
|
||||
zoom: 15,
|
||||
});
|
||||
}
|
||||
});
|
||||
document.querySelector("address-or-report-input").addEventListener("input", maybeEnableLookupButton);
|
||||
document.getElementById("lookup-form").addEventListener("submit", handleLookupFormSubmit);
|
||||
}
|
||||
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.type,
|
||||
});
|
||||
}
|
||||
report_table.reports = reports;
|
||||
|
||||
const report_count = document.getElementById("report-count");
|
||||
report_count.innerHTML = reports.length + " Sites Found";
|
||||
}
|
||||
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" action="#" id="lookup-form">
|
||||
<div class="col-md-9">
|
||||
<address-input
|
||||
name="address-or-report"
|
||||
placeholder="Enter an address, neighborhood, or zip code"
|
||||
></address-input>
|
||||
</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="bi bi-pin-map-fill me-2"></i>Sites Map</h5>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="map-container">
|
||||
<map-multipoint
|
||||
id="map"
|
||||
xmax="-118.0"
|
||||
ymax="37.0"
|
||||
xmin="-119.0"
|
||||
ymin="36.0"
|
||||
tegola="{{ .URL.Tegola }}"
|
||||
zoom="9"
|
||||
></map-multipoint>
|
||||
</div>
|
||||
</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="bi bi-geo-fill me-2"></i>Sites List</h5>
|
||||
<span class="badge bg-light text-dark" id="report-count"
|
||||
>- Sites 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 }}
|
||||
|
|
@ -40,3 +40,6 @@ func getReviewPool(ctx context.Context, r *http.Request, org *models.Organizatio
|
|||
func getReviewRoot(ctx context.Context, r *http.Request, org *models.Organization, user *models.User) (*html.Response[contentReviewRoot], *nhttp.ErrorWithStatus) {
|
||||
return html.NewResponse("sync/review/root.html", contentReviewRoot{}), nil
|
||||
}
|
||||
func getReviewSite(ctx context.Context, r *http.Request, org *models.Organization, user *models.User) (*html.Response[contentReviewRoot], *nhttp.ErrorWithStatus) {
|
||||
return html.NewResponse("sync/review/site.html", contentReviewRoot{}), nil
|
||||
}
|
||||
|
|
|
|||
|
|
@ -78,6 +78,7 @@ func Router() chi.Router {
|
|||
r.Method("GET", "/radar", authenticatedHandler(getRadar))
|
||||
r.Method("GET", "/review", authenticatedHandler(getReviewRoot))
|
||||
r.Method("GET", "/review/pool", authenticatedHandler(getReviewPool))
|
||||
r.Method("GET", "/review/site", authenticatedHandler(getReviewSite))
|
||||
r.Method("GET", "/service-request", authenticatedHandler(getServiceRequestList))
|
||||
r.Method("GET", "/service-request/{id}", authenticatedHandler(getServiceRequestDetail))
|
||||
r.Method("GET", "/signout", auth.NewEnsureAuth(getSignout))
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue