Render report results from the map
This commit is contained in:
parent
9d2253a4a2
commit
2da6bba041
2 changed files with 247 additions and 124 deletions
231
htmlpage/static/js/report-table.js
Normal file
231
htmlpage/static/js/report-table.js
Normal file
|
|
@ -0,0 +1,231 @@
|
|||
// report-table.js
|
||||
|
||||
class ReportTable extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.attachShadow({ mode: 'open' });
|
||||
this._reports = [];
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the reports data and render the table
|
||||
*/
|
||||
set reports(value) {
|
||||
this._reports = value;
|
||||
this.render();
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the reports data
|
||||
*/
|
||||
get reports() {
|
||||
return this._reports;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.render();
|
||||
}
|
||||
|
||||
/**
|
||||
* Format timestamp to relative time (e.g., "2 days ago")
|
||||
*/
|
||||
formatRelativeTime(timestamp) {
|
||||
const now = new Date();
|
||||
const date = new Date(timestamp);
|
||||
const diffInSeconds = Math.floor((now - date) / 1000);
|
||||
|
||||
// Time units in seconds
|
||||
const minute = 60;
|
||||
const hour = minute * 60;
|
||||
const day = hour * 24;
|
||||
const week = day * 7;
|
||||
const month = day * 30;
|
||||
const year = day * 365;
|
||||
|
||||
if (diffInSeconds < minute) {
|
||||
return 'just now';
|
||||
} else if (diffInSeconds < hour) {
|
||||
const minutes = Math.floor(diffInSeconds / minute);
|
||||
return `${minutes} ${minutes === 1 ? 'minute' : 'minutes'} ago`;
|
||||
} else if (diffInSeconds < day) {
|
||||
const hours = Math.floor(diffInSeconds / hour);
|
||||
return `${hours} ${hours === 1 ? 'hour' : 'hours'} ago`;
|
||||
} else if (diffInSeconds < week) {
|
||||
const days = Math.floor(diffInSeconds / day);
|
||||
return `${days} ${days === 1 ? 'day' : 'days'} ago`;
|
||||
} else if (diffInSeconds < month) {
|
||||
const weeks = Math.floor(diffInSeconds / week);
|
||||
return `${weeks} ${weeks === 1 ? 'week' : 'weeks'} ago`;
|
||||
} else if (diffInSeconds < year) {
|
||||
const months = Math.floor(diffInSeconds / month);
|
||||
return `${months} ${months === 1 ? 'month' : 'months'} ago`;
|
||||
} else {
|
||||
const years = Math.floor(diffInSeconds / year);
|
||||
return `${years} ${years === 1 ? 'year' : 'years'} ago`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get badge color class based on report type
|
||||
*/
|
||||
getTypeClass(type) {
|
||||
switch(type) {
|
||||
case 'Nuisance':
|
||||
return 'bg-danger';
|
||||
case 'Quick':
|
||||
return 'bg-primary';
|
||||
case 'Green Pool':
|
||||
return 'bg-success';
|
||||
default:
|
||||
return 'bg-secondary';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get badge color class based on report status
|
||||
*/
|
||||
getStatusClass(status) {
|
||||
switch(status) {
|
||||
case 'Reported':
|
||||
return 'bg-warning text-dark';
|
||||
case 'Assigned':
|
||||
return 'bg-info text-dark';
|
||||
case 'On-Hold':
|
||||
return 'bg-secondary';
|
||||
case 'Complete':
|
||||
return 'bg-success';
|
||||
default:
|
||||
return 'bg-secondary';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Format the report ID with hyphens
|
||||
*/
|
||||
formatId(id) {
|
||||
if (id.length === 12) {
|
||||
return `${id.substring(0, 4)}-${id.substring(4, 8)}-${id.substring(8)}`;
|
||||
}
|
||||
return id;
|
||||
}
|
||||
|
||||
render() {
|
||||
// Create the styles
|
||||
const style = `
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
.table {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.table-light {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
.table-hover tbody tr:hover {
|
||||
background-color: rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
th, td {
|
||||
padding: 0.75rem;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
text-align: left;
|
||||
}
|
||||
.clickable-row {
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s ease-in-out;
|
||||
}
|
||||
.clickable-row:hover {
|
||||
background-color: rgba(13, 110, 253, 0.1);
|
||||
}
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 0.35em 0.65em;
|
||||
font-size: 0.75em;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.bg-danger {
|
||||
background-color: #dc3545;
|
||||
}
|
||||
.bg-primary {
|
||||
background-color: #0d6efd;
|
||||
}
|
||||
.bg-success {
|
||||
background-color: #198754;
|
||||
}
|
||||
.bg-warning {
|
||||
background-color: #ffc107;
|
||||
}
|
||||
.bg-info {
|
||||
background-color: #0dcaf0;
|
||||
}
|
||||
.bg-secondary {
|
||||
background-color: #6c757d;
|
||||
}
|
||||
.report-type-badge {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.text-dark {
|
||||
color: #212529 !important;
|
||||
}
|
||||
</style>
|
||||
`;
|
||||
|
||||
// Create the table
|
||||
let tableHTML = `
|
||||
<table class="table table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th scope="col">Report ID</th>
|
||||
<th scope="col">Reported</th>
|
||||
<th scope="col">Type</th>
|
||||
<th scope="col">Address</th>
|
||||
<th scope="col">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="report-table-body">
|
||||
`;
|
||||
|
||||
// Generate rows for each report
|
||||
if (this._reports.length > 0) {
|
||||
this._reports.forEach(report => {
|
||||
const typeClass = this.getTypeClass(report.type);
|
||||
const statusClass = this.getStatusClass(report.status);
|
||||
const formattedId = this.formatId(report.id);
|
||||
const relativeTime = this.formatRelativeTime(report.created);
|
||||
|
||||
tableHTML += `
|
||||
<tr class="clickable-row" onclick="window.location='/status/${report.id}'">
|
||||
<td><strong>${formattedId}</strong></td>
|
||||
<td>${relativeTime}</td>
|
||||
<td><span class="badge ${typeClass} report-type-badge">${report.type}</span></td>
|
||||
<td>${report.address || 'N/A'}</td>
|
||||
<td><span class="badge ${statusClass}">${report.status}</span></td>
|
||||
</tr>
|
||||
`;
|
||||
});
|
||||
} else {
|
||||
tableHTML += `
|
||||
<tr><td colspan="5">No reports</td></tr>
|
||||
`;
|
||||
}
|
||||
|
||||
tableHTML += `
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
|
||||
// Set the shadow DOM content
|
||||
this.shadowRoot.innerHTML = style + tableHTML;
|
||||
}
|
||||
}
|
||||
|
||||
// Register the custom element
|
||||
customElements.define('report-table', ReportTable);
|
||||
|
|
@ -7,14 +7,8 @@
|
|||
<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>
|
||||
.clickable-row {
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s ease-in-out;
|
||||
}
|
||||
.clickable-row:hover {
|
||||
background-color: rgba(13, 110, 253, 0.1);
|
||||
}
|
||||
.map-container {
|
||||
background-color: #e9ecef;
|
||||
border-radius: 10px;
|
||||
|
|
@ -35,9 +29,6 @@
|
|||
min-width: 0px;
|
||||
height: auto;
|
||||
}
|
||||
.report-type-badge {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.search-box {
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
border-radius: 8px;
|
||||
|
|
@ -70,58 +61,18 @@ function getUniqueFeatures(features, comparatorProperty) {
|
|||
function renderReports(features) {
|
||||
console.log("render reports", features);
|
||||
|
||||
const reportTableBodyEl = document.getElementById('report-table-body');
|
||||
const empty = document.createElement('p');
|
||||
// Clear any existing listings
|
||||
//listingEl.innerHTML = '';
|
||||
reportTableBodyEl.innerHTML = '';
|
||||
if (features.length) {
|
||||
for (const feature of features) {
|
||||
/*
|
||||
const itemLink = document.createElement('a');
|
||||
const label = `${feature.properties.name} (${feature.properties.abbrev})`;
|
||||
itemLink.href = feature.properties.wikipedia;
|
||||
itemLink.target = '_blank';
|
||||
itemLink.textContent = label;
|
||||
itemLink.addEventListener('mouseover', () => {
|
||||
// Highlight corresponding feature on the map
|
||||
popup
|
||||
.setLngLat(feature.geometry.coordinates)
|
||||
.setText(label)
|
||||
.addTo(map);
|
||||
});
|
||||
listingEl.appendChild(itemLink);
|
||||
*/
|
||||
|
||||
const tableRow = document.createElement("tr");
|
||||
|
||||
const reportIdCol = document.createElement("td");
|
||||
reportIdCol.textContent = feature.properties.public_id;
|
||||
tableRow.appendChild(reportIdCol);
|
||||
|
||||
const ageCol = document.createElement("td");
|
||||
ageCol.textContent = feature.properties.created;
|
||||
tableRow.appendChild(ageCol);
|
||||
|
||||
const typeCol = document.createElement("td");
|
||||
typeCol.textContent = feature.properties.table_name;
|
||||
tableRow.appendChild(typeCol);
|
||||
|
||||
const addressCol = document.createElement("td");
|
||||
addressCol.textContent = feature.properties.address;
|
||||
tableRow.appendChild(addressCol);
|
||||
|
||||
const statusCol = document.createElement("td");
|
||||
statusCol.textContent = feature.properties.status;
|
||||
tableRow.appendChild(statusCol);
|
||||
|
||||
reportTableBodyEl.appendChild(tableRow);
|
||||
}
|
||||
} else if (features.length === 0 ) {
|
||||
empty.textContent = 'No results found';
|
||||
reportTableBodyEl.appendChild(empty);
|
||||
} else {
|
||||
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");
|
||||
|
|
@ -139,7 +90,7 @@ function onLoad() {
|
|||
'type': 'circle',
|
||||
'paint': {
|
||||
'circle-color': '#4264fb',
|
||||
'circle-radius': 4,
|
||||
'circle-radius': 7,
|
||||
'circle-stroke-width': 2,
|
||||
'circle-stroke-color': '#ffffff'
|
||||
}
|
||||
|
|
@ -233,70 +184,10 @@ document.addEventListener('DOMContentLoaded', onLoad);
|
|||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th scope="col">Report ID</th>
|
||||
<th scope="col">Reported</th>
|
||||
<th scope="col">Type</th>
|
||||
<th scope="col">Address</th>
|
||||
<th scope="col">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="report-table-body">
|
||||
<tr class="clickable-row" onclick="window.location='report-status.html?id=12345'">
|
||||
<td><strong>#12345</strong></td>
|
||||
<td>2 days ago</td>
|
||||
<td><span class="badge bg-danger report-type-badge">Mosquito Nuisance</span></td>
|
||||
<td>456 Elm Street, Anytown, USA</td>
|
||||
<td><span class="badge bg-warning text-dark">Scheduled</span></td>
|
||||
</tr>
|
||||
<tr class="clickable-row" onclick="window.location='report-status.html?id=12346'">
|
||||
<td><strong>#12346</strong></td>
|
||||
<td>3 days ago</td>
|
||||
<td><span class="badge bg-success report-type-badge">Green Pool</span></td>
|
||||
<td>789 Oak Avenue, Anytown, USA</td>
|
||||
<td><span class="badge bg-success">Treated</span></td>
|
||||
</tr>
|
||||
<tr class="clickable-row" onclick="window.location='report-status.html?id=12347'">
|
||||
<td><strong>#12347</strong></td>
|
||||
<td>1 week ago</td>
|
||||
<td><span class="badge bg-primary report-type-badge">Mosquito Nuisance</span></td>
|
||||
<td>123 Pine Road, Anytown, USA</td>
|
||||
<td><span class="badge bg-info">Visited</span></td>
|
||||
</tr>
|
||||
<tr class="clickable-row" onclick="window.location='report-status.html?id=12348'">
|
||||
<td><strong>#12348</strong></td>
|
||||
<td>1 day ago</td>
|
||||
<td><span class="badge bg-secondary report-type-badge">Quick Report</span></td>
|
||||
<td>567 Maple Lane, Anytown, USA</td>
|
||||
<td><span class="badge bg-secondary">In Review</span></td>
|
||||
</tr>
|
||||
<tr class="clickable-row" onclick="window.location='report-status.html?id=12349'">
|
||||
<td><strong>#12349</strong></td>
|
||||
<td>2 weeks ago</td>
|
||||
<td><span class="badge bg-success report-type-badge">Green Pool</span></td>
|
||||
<td>890 Cedar Court, Anytown, USA</td>
|
||||
<td><span class="badge bg-success">Treated</span></td>
|
||||
</tr>
|
||||
<tr class="clickable-row" onclick="window.location='report-status.html?id=12350'">
|
||||
<td><strong>#12350</strong></td>
|
||||
<td>5 days ago</td>
|
||||
<td><span class="badge bg-danger report-type-badge">Mosquito Nuisance</span></td>
|
||||
<td>234 Birch Blvd, Anytown, USA</td>
|
||||
<td><span class="badge bg-warning text-dark">Scheduled</span></td>
|
||||
</tr>
|
||||
<tr class="clickable-row" onclick="window.location='report-status.html?id=12351'">
|
||||
<td><strong>#12351</strong></td>
|
||||
<td>3 hours ago</td>
|
||||
<td><span class="badge bg-secondary report-type-badge">Quick Report</span></td>
|
||||
<td>678 Spruce Street, Anytown, USA</td>
|
||||
<td><span class="badge bg-secondary">In Review</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<report-table />
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
<div class="card-footer">
|
||||
<nav aria-label="Page navigation">
|
||||
<ul class="pagination justify-content-center mb-0">
|
||||
|
|
@ -312,6 +203,7 @@ document.addEventListener('DOMContentLoaded', onLoad);
|
|||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
|
||||
<!-- Create Report Button (Fixed at bottom on mobile) -->
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue