diff --git a/htmlpage/static/js/report-table.js b/htmlpage/static/js/report-table.js new file mode 100644 index 00000000..78c8af22 --- /dev/null +++ b/htmlpage/static/js/report-table.js @@ -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 = ` + + `; + + // Create the table + let tableHTML = ` + + + + + + + + + + + + `; + + // 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 += ` + + + + + + + + `; + }); + } else { + tableHTML += ` + + `; + } + + tableHTML += ` + +
Report IDReportedTypeAddressStatus
${formattedId}${relativeTime}${report.type}${report.address || 'N/A'}${report.status}
No reports
+ `; + + // Set the shadow DOM content + this.shadowRoot.innerHTML = style + tableHTML; + } +} + +// Register the custom element +customElements.define('report-table', ReportTable); diff --git a/public-report/template/search.html b/public-report/template/search.html index 71e9f67b..9cb7c704 100644 --- a/public-report/template/search.html +++ b/public-report/template/search.html @@ -7,14 +7,8 @@ +