Gleipnir/nidus-sync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Show pools and nuisances in separate layers on status search

Browse source
This commit is contained in:
Eli Ribble 2026-02-04 17:12:46 +00:00
parent 63358e6848
commit 820f8237d1
No known key found for this signature in database
3 changed files with 83 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

6
html/static/js/report-table.js
View file

@ -70,11 +70,11 @@ class ReportTable extends HTMLElement {
*/
getTypeClass(type) {
switch(type) {
case 'Nuisance':
case 'nuisance':
return 'bg-danger';
case 'Quick':
case 'quick':
return 'bg-primary';
case 'Green Pool':
case 'pool':
return 'bg-success';
default:
return 'bg-secondary';

67
rmo/template/status.html
View file

@ -8,22 +8,31 @@
<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>
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) {
function getUniqueFeatures(nuisances, pools, comparatorProperty) {
const uniqueIds = new Set();
const uniqueFeatures = [];
for (const feature of features) {
for (const feature of nuisances) {
const id = feature.properties[comparatorProperty];
if (!uniqueIds.has(id)) {
uniqueIds.add(id);
uniqueFeatures.push(feature);
uniqueIds.add(id);
let f = structuredClone(feature);
f.type = "nuisance";
uniqueFeatures.push(f);
}
}
for (const feature of pools) {
const id = feature.properties[comparatorProperty];
if (!uniqueIds.has(id)) {
uniqueIds.add(id);
let f = structuredClone(feature);
f.type = "pool";
uniqueFeatures.push(f);
}
}
return uniqueFeatures;
@ -40,7 +49,7 @@ function renderReports(features) {
created: feature.properties.created,
id: feature.properties.public_id,
status: feature.properties.status,
type: feature.properties.table_name
type: feature.type,
});
}
report_table.reports = reports;
@ -55,25 +64,36 @@ function onLoad() {
]
});
map.addLayer({
'id': 'mosquito',
'id': 'nuisance',
'source': 'tegola-mosquito',
'source-layer': 'report_location',
'source-layer': 'nuisance_location',
'type': 'circle',
'paint': {
'circle-color': '#4264fb',
'circle-color': "#DC4535",
'circle-radius': 7,
'circle-stroke-width': 2,
'circle-stroke-color': '#ffffff'
'circle-stroke-color': "#9C1C28"
}
});
map.addLayer({
'id': 'pool',
'source': 'tegola-mosquito',
'source-layer': 'pool_location',
'type': 'circle',
'paint': {
'circle-color': "#0D6EfD",
'circle-radius': 7,
'circle-stroke-width': 2,
'circle-stroke-color': "#024AB6"
}
});
map.on('render', () => {
const features = map.queryRenderedFeatures({target: {layerId: 'mosquito'}});
const nuisances = map.queryRenderedFeatures({target: {layerId: 'nuisance'}});
const pools = map.queryRenderedFeatures({target: {layerId: 'pool'}});
if (features) {
const uniqueFeatures = getUniqueFeatures(features, 'public_id');
// Populate features for the listing overlay.
renderReports(uniqueFeatures);
}
const uniqueFeatures = getUniqueFeatures(nuisances, pools, 'public_id');
// Populate features for the listing overlay.
renderReports(uniqueFeatures);
});
getGeolocation({
enableHighAccuracy: true,
@ -116,13 +136,14 @@ document.addEventListener('DOMContentLoaded', onLoad);
<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 class="form-check custom-circle-checkbox">
<input class="form-check-input" type="checkbox" id="poiRestaurants" data-color="danger">
<label class="form-check-label" for="poiRestaurants">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 class="form-check custom-circle-checkbox">
<input class="form-check-input" type="checkbox" id="poiParks" data-color="success">
<label class="form-check-label" for="poiParks">Standing Water</label>
</div>
</div>
</form>

36
scss/rmo/status.scss
View file

@ -27,4 +27,40 @@
height: 300px;
}
}
/* Base styles for circular checkboxes */
.custom-circle-checkbox .form-check-input {
border-radius: 50%;
width: 20px;
height: 20px;
cursor: pointer;
margin-top: 0.25rem;
background-image: none; /* Remove Bootstrap's default checkmark */
position: relative;
}
/* Style for when checked */
.custom-circle-checkbox .form-check-input:checked {
background-color: currentColor;
border-color: currentColor;
}
/* Style for when unchecked - just an outline */
.custom-circle-checkbox .form-check-input:not(:checked) {
background-color: transparent;
}
/* Colors based on data attribute */
.custom-circle-checkbox .form-check-input[data-color="danger"] {
border-color: $red;
color: $red;
}
.custom-circle-checkbox .form-check-input[data-color="success"] {
border-color: $blue;
color: $blue;
}
.custom-circle-checkbox .form-check-input[data-color="info"] {
border-color: $green;
color: $green;
}