Add cell debug page.
This makes it much easier to troubleshoot information related to a cell by showing detailed data about a single cell. At this point much is a placeholder, but we at least get the cell boundary coordinates and a map. This also starts to make some code common around doing things like mapping.
This commit is contained in:
parent
7c2d7eef25
commit
c0b527c9a3
9 changed files with 465 additions and 48 deletions
245
templates/cell.html
Normal file
245
templates/cell.html
Normal file
|
|
@ -0,0 +1,245 @@
|
|||
{{template "authenticated.html" .}}
|
||||
|
||||
{{define "title"}}Dash{{end}}
|
||||
{{define "extraheader"}}
|
||||
{{template "map" .MapData}}
|
||||
<style>
|
||||
.address-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
}
|
||||
</style>
|
||||
{{end}}
|
||||
{{define "content"}}
|
||||
<div class="container mt-4 mb-5">
|
||||
<!-- Location Header Section -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<h1>Location Data View</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Map and Address Section - Side by Side -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-8">
|
||||
<div class="map-container">
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-body address-container">
|
||||
<h5>Approximate Address:</h5>
|
||||
<p class="lead" id="location-address">123 Main St, Anytown, ST 12345</p>
|
||||
|
||||
<hr class="location-divider">
|
||||
|
||||
<h5>Cell Coordinates (Hexagon):</h5>
|
||||
<div class="table-responsive">
|
||||
<table class="coordinates-table">
|
||||
<tbody>
|
||||
{{ range $i, $cb := .CellBoundary }}
|
||||
<tr>
|
||||
<td><strong>Vertex {{$i}}:</strong></td>
|
||||
<td>{{$cb|latLngDisplay}}</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Two-Column Layout for Tables -->
|
||||
<div class="row">
|
||||
<!-- Left Column -->
|
||||
<div class="col-md-6">
|
||||
<!-- Breeding Sources Section -->
|
||||
<h2 class="section-header">Mosquito Breeding Sources</h2>
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Address</th>
|
||||
<th>Source Type</th>
|
||||
<th>Last Inspected</th>
|
||||
<th>Last Treated</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>123 Main St</td>
|
||||
<td>Standing Water</td>
|
||||
<td>04/15/2023</td>
|
||||
<td>04/16/2023</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>125 Main St</td>
|
||||
<td>Catch Basin</td>
|
||||
<td>04/15/2023</td>
|
||||
<td>04/16/2023</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>130 Main St</td>
|
||||
<td>Drainage Ditch</td>
|
||||
<td>04/14/2023</td>
|
||||
<td>04/15/2023</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<nav aria-label="Breeding sources pagination">
|
||||
<ul class="pagination justify-content-center">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="#" tabindex="-1">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>
|
||||
|
||||
<!-- Inspections Section -->
|
||||
<h2 class="section-header">Inspections History</h2>
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Approximate Address</th>
|
||||
<th>Inspection Date</th>
|
||||
<th>Technician Comments</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>123 Main St</td>
|
||||
<td>04/15/2023</td>
|
||||
<td>Found larvae in standing water near gutter downspout.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>125 Main St</td>
|
||||
<td>04/15/2023</td>
|
||||
<td>Catch basin had moderate larvae activity.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>130 Main St</td>
|
||||
<td>04/14/2023</td>
|
||||
<td>Drainage ditch showing signs of mosquito breeding.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<nav aria-label="Inspections pagination">
|
||||
<ul class="pagination justify-content-center">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="#" tabindex="-1">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>
|
||||
|
||||
<!-- Right Column -->
|
||||
<div class="col-md-6">
|
||||
<!-- Treatments Section -->
|
||||
<h2 class="section-header">Treatment History</h2>
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Approximate Address</th>
|
||||
<th>Treatment Date</th>
|
||||
<th>Insecticide Used</th>
|
||||
<th>Technician Notes</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>123 Main St</td>
|
||||
<td>04/16/2023</td>
|
||||
<td>Bacillus thuringiensis israelensis (Bti)</td>
|
||||
<td>Applied larvicide to standing water.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>125 Main St</td>
|
||||
<td>04/16/2023</td>
|
||||
<td>Methoprene</td>
|
||||
<td>Treated catch basin with long-lasting formula.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>130 Main St</td>
|
||||
<td>04/15/2023</td>
|
||||
<td>Bacillus sphaericus</td>
|
||||
<td>Applied to drainage ditch, full coverage achieved.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>135 Main St</td>
|
||||
<td>04/14/2023</td>
|
||||
<td>Bacillus thuringiensis israelensis (Bti)</td>
|
||||
<td>Applied to small pond area.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>140 Main St</td>
|
||||
<td>04/14/2023</td>
|
||||
<td>Methoprene</td>
|
||||
<td>Applied to standing water in yard.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>145 Main St</td>
|
||||
<td>04/13/2023</td>
|
||||
<td>Bacillus sphaericus</td>
|
||||
<td>Treated problem area behind property.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<nav aria-label="Treatments pagination">
|
||||
<ul class="pagination justify-content-center">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="#" tabindex="-1">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>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
67
templates/components/map.html
Normal file
67
templates/components/map.html
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
{{define "map"}}
|
||||
<script src='https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.js'></script>
|
||||
<link href='https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.css' rel='stylesheet' />
|
||||
<script>
|
||||
const geojson = JSON.parse({{.GeoJSON}})
|
||||
function onLoad() {
|
||||
console.log("Setting up the map...", geojson);
|
||||
mapboxgl.accessToken = {{ .MapboxToken }};
|
||||
const map = new mapboxgl.Map({
|
||||
container: "map",
|
||||
center: [{{.Center.Lng}}, {{.Center.Lat}}],
|
||||
style: 'mapbox://styles/mapbox/streets-v12', // style URL
|
||||
zoom: {{.Zoom}},
|
||||
});
|
||||
map.on("load", function() {
|
||||
console.log("Map post-load...");
|
||||
const sourceId = 'h3-hexes';
|
||||
const layerId = 'h3-hexes-layer';
|
||||
let source = map.getSource(sourceId);
|
||||
|
||||
if (!source) {
|
||||
map.addSource(sourceId, {
|
||||
type: 'geojson',
|
||||
data: geojson
|
||||
});
|
||||
map.addLayer({
|
||||
id: layerId,
|
||||
source: sourceId,
|
||||
type: 'fill',
|
||||
interactive: false,
|
||||
paint: {
|
||||
'fill-color': '#F00000',
|
||||
'fill-opacity': 0.3
|
||||
}
|
||||
});
|
||||
source = map.getSource(sourceId);
|
||||
}
|
||||
source.setData(geojson);
|
||||
console.log("Map post-load done.");
|
||||
});
|
||||
console.log("Map init done.");
|
||||
}
|
||||
window.addEventListener("load", onLoad);
|
||||
</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;
|
||||
}
|
||||
</style>
|
||||
{{end}}
|
||||
|
|
@ -5,10 +5,9 @@
|
|||
<script src='https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.js'></script>
|
||||
<link href='https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.css' rel='stylesheet' />
|
||||
<script>
|
||||
const geojson = {{.Geo}};
|
||||
function onLoad() {
|
||||
console.log("Setting up the map...", geojson);
|
||||
mapboxgl.accessToken = {{ .MapboxToken }};
|
||||
mapboxgl.accessToken = {{ .MapData.MapboxToken }};
|
||||
const map = new mapboxgl.Map({
|
||||
container: 'map', // container ID
|
||||
style: 'mapbox://styles/mapbox/standard', // style URL
|
||||
|
|
@ -67,10 +66,11 @@ function onLoad() {
|
|||
const properties = e.feature.properties;
|
||||
//console.log("Coordinates", coordinates[0]);
|
||||
//console.log("Properties", properties.cell, properties.count_);
|
||||
new mapboxgl.Popup()
|
||||
/*new mapboxgl.Popup()
|
||||
.setLngLat(coordinates[0][0])
|
||||
.setHTML("Cell: " + properties.cell)
|
||||
.addTo(map);
|
||||
.addTo(map);*/
|
||||
window.location.href = '/cell/' + properties.cell;
|
||||
}
|
||||
});
|
||||
map.addInteraction('nidus-mouseenter-interaction', {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{{template "authenticated.html" .}}
|
||||
|
||||
{{define "title"}}Dash{{end}}
|
||||
{{define "style"}}
|
||||
{{define "extraheader"}}
|
||||
{{end}}
|
||||
{{define "content"}}
|
||||
{{end}}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue