Eli Ribble
c0b527c9a3
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.
245 lines
6.6 KiB
HTML
245 lines
6.6 KiB
HTML
{{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}}
|