Add mock of report search page
This commit is contained in:
parent
4303534396
commit
75454834f4
5 changed files with 296 additions and 82 deletions
|
|
@ -21,6 +21,7 @@ func Router() chi.Router {
|
|||
r.Get("/quick-submit-complete", getQuickSubmitComplete)
|
||||
r.Post("/register-notifications", postRegisterNotifications)
|
||||
r.Get("/register-notifications-complete", getRegisterNotificationsComplete)
|
||||
r.Get("/search", getSearch)
|
||||
r.Get("/status", getStatus)
|
||||
r.Get("/status/{report_id}", getStatusByID)
|
||||
localFS := http.Dir("./static")
|
||||
|
|
|
|||
21
public-report/search.go
Normal file
21
public-report/search.go
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
package publicreport
|
||||
|
||||
import (
|
||||
"net/http"
|
||||
|
||||
"github.com/Gleipnir-Technology/nidus-sync/htmlpage"
|
||||
)
|
||||
|
||||
type ContextSearch struct{}
|
||||
|
||||
var (
|
||||
Search = buildTemplate("search", "base")
|
||||
)
|
||||
|
||||
func getSearch(w http.ResponseWriter, r *http.Request) {
|
||||
htmlpage.RenderOrError(
|
||||
w,
|
||||
Search,
|
||||
ContextSearch{},
|
||||
)
|
||||
}
|
||||
190
public-report/template/search.html
Normal file
190
public-report/template/search.html
Normal file
|
|
@ -0,0 +1,190 @@
|
|||
{{template "base.html" .}}
|
||||
|
||||
{{define "title"}}Status{{end}}
|
||||
{{define "extraheader"}}
|
||||
<style>
|
||||
|
||||
.map-container {
|
||||
height: 400px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.clickable-row {
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s ease-in-out;
|
||||
}
|
||||
.clickable-row:hover {
|
||||
background-color: rgba(13, 110, 253, 0.1);
|
||||
}
|
||||
.report-type-badge {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.search-box {
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
border-radius: 8px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.map-container {
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
});
|
||||
</script>
|
||||
{{end}}
|
||||
{{define "content"}}
|
||||
<div class="container my-4">
|
||||
<!-- Search Box -->
|
||||
<div class="card search-box mb-4">
|
||||
<div class="card-body">
|
||||
<form class="row g-3 align-items-center">
|
||||
<div class="col-md-9">
|
||||
<label for="addressSearch" class="visually-hidden">Search by address</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text"><i class="fas fa-search"></i></span>
|
||||
<input type="text" class="form-control form-control-lg" id="addressSearch"
|
||||
placeholder="Enter an address, neighborhood, or zip code">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<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>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" id="greenPool" checked>
|
||||
<label class="form-check-label" for="greenPool">Green Pool</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" id="quickReport" checked>
|
||||
<label class="form-check-label" for="quickReport">Quick Report</label>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Map Section -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header bg-info text-white">
|
||||
<h5 class="mb-0"><i class="fas fa-map-marked-alt me-2"></i>Reports Map</h5>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="map-container">
|
||||
<!-- Replace with actual map embed code -->
|
||||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12000!2d-122.4194!3d37.7749!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzfCsDQ2JzI5LjYiTiAxMjLCsDI1JzEwLjAiVw!5e0!3m2!1sen!2sus!4v1627309456789!5m2!1sen!2sus"
|
||||
width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Results Section -->
|
||||
<div class="card">
|
||||
<div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0"><i class="fas fa-list me-2"></i>Reports Near You</h5>
|
||||
<span class="badge bg-light text-dark">15 Reports Found</span>
|
||||
</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>
|
||||
<!-- Sample data rows - these would be generated dynamically -->
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<nav aria-label="Page navigation">
|
||||
<ul class="pagination justify-content-center mb-0">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">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>
|
||||
|
||||
<!-- Create Report Button (Fixed at bottom on mobile) -->
|
||||
<div class="d-md-none position-fixed bottom-0 start-0 end-0 p-3" style="z-index: 1030;">
|
||||
<button class="btn btn-primary btn-lg w-100" data-bs-toggle="modal" data-bs-target="#reportModal">
|
||||
<i class="fas fa-plus-circle me-2"></i>Create New Report
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Desktop Create Report Button -->
|
||||
<div class="d-none d-md-block text-center mt-4">
|
||||
<button class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#reportModal">
|
||||
<i class="fas fa-plus-circle me-2"></i>Create New Report
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
|
@ -40,98 +40,100 @@
|
|||
</style>
|
||||
{{end}}
|
||||
{{define "content"}}
|
||||
<!-- Report ID and Status Section -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0">Report {{.Report.ID|publicReportID}}</h5>
|
||||
<span class="badge bg-warning text-dark status-badge">Scheduled</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-4 mb-3">
|
||||
<strong><i class="fas fa-calendar-plus me-2"></i>Created:</strong>
|
||||
<span>July 15, 2023 - 9:30 AM</span>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<strong><i class="fas fa-sync me-2"></i>Last Updated:</strong>
|
||||
<span>July 17, 2023 - 2:45 PM</span>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<strong><i class="fas fa-hourglass-half me-2"></i>Next Step:</strong>
|
||||
<span>July 19, 2023 (Estimated)</span>
|
||||
<div class="container my-4">
|
||||
<!-- Report ID and Status Section -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0">Report {{.Report.ID|publicReportID}}</h5>
|
||||
<span class="badge bg-warning text-dark status-badge">Scheduled</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-4 mb-3">
|
||||
<strong><i class="fas fa-calendar-plus me-2"></i>Created:</strong>
|
||||
<span>July 15, 2023 - 9:30 AM</span>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<strong><i class="fas fa-sync me-2"></i>Last Updated:</strong>
|
||||
<span>July 17, 2023 - 2:45 PM</span>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<strong><i class="fas fa-hourglass-half me-2"></i>Next Step:</strong>
|
||||
<span>July 19, 2023 (Estimated)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Information -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-6 mb-3 mb-md-0">
|
||||
<div class="card h-100">
|
||||
<div class="card-header bg-secondary text-white">
|
||||
<h5 class="mb-0"><i class="fas fa-user me-2"></i>Reporter Information</h5>
|
||||
<!-- Contact Information -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-6 mb-3 mb-md-0">
|
||||
<div class="card h-100">
|
||||
<div class="card-header bg-secondary text-white">
|
||||
<h5 class="mb-0"><i class="fas fa-user me-2"></i>Reporter Information</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p><strong>Name:</strong> Jane Doe</p>
|
||||
<p><strong>Phone:</strong> (555) 123-4567</p>
|
||||
<p><strong>Address:</strong> 123 Main Street, Anytown, USA 12345</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p><strong>Name:</strong> Jane Doe</p>
|
||||
<p><strong>Phone:</strong> (555) 123-4567</p>
|
||||
<p><strong>Address:</strong> 123 Main Street, Anytown, USA 12345</p>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100">
|
||||
<div class="card-header bg-secondary text-white">
|
||||
<h5 class="mb-0"><i class="fas fa-home me-2"></i>Nuisance Property Information</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p><strong>Owner:</strong> John Smith</p>
|
||||
<p><strong>Address:</strong> 456 Elm Street, Anytown, USA 12345</p>
|
||||
<p><strong>Description:</strong> Standing water in abandoned pool</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100">
|
||||
<div class="card-header bg-secondary text-white">
|
||||
<h5 class="mb-0"><i class="fas fa-home me-2"></i>Nuisance Property Information</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p><strong>Owner:</strong> John Smith</p>
|
||||
<p><strong>Address:</strong> 456 Elm Street, Anytown, USA 12345</p>
|
||||
<p><strong>Description:</strong> Standing water in abandoned pool</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Map Section -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header bg-info text-white">
|
||||
<h5 class="mb-0"><i class="fas fa-map-marked-alt me-2"></i>Location Map</h5>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="map-container">
|
||||
<!-- Replace with actual map embed code -->
|
||||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3000!2d-122.4194!3d37.7749!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzfCsDQ2JzI5LjYiTiAxMjLCsDI1JzEwLjAiVw!5e0!3m2!1sen!2sus!4v1627309456789!5m2!1sen!2sus"
|
||||
width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
|
||||
<!-- Map Section -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header bg-info text-white">
|
||||
<h5 class="mb-0"><i class="fas fa-map-marked-alt me-2"></i>Location Map</h5>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="map-container">
|
||||
<!-- Replace with actual map embed code -->
|
||||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3000!2d-122.4194!3d37.7749!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzfCsDQ2JzI5LjYiTiAxMjLCsDI1JzEwLjAiVw!5e0!3m2!1sen!2sus!4v1627309456789!5m2!1sen!2sus"
|
||||
width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- History Timeline -->
|
||||
<div class="card">
|
||||
<div class="card-header bg-success text-white">
|
||||
<h5 class="mb-0"><i class="fas fa-history me-2"></i>Request History</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="timeline">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-date">July 17, 2023 - 2:45 PM</div>
|
||||
<h5 class="mb-1">Scheduled for Treatment</h5>
|
||||
<p class="mb-0">Site visit scheduled for July 19. Technician: Michael Johnson</p>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-date">July 16, 2023 - 10:30 AM</div>
|
||||
<h5 class="mb-1">Assessment Complete</h5>
|
||||
<p class="mb-0">Initial assessment completed. Property requires treatment for mosquito larvae.</p>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-date">July 15, 2023 - 1:15 PM</div>
|
||||
<h5 class="mb-1">In Review</h5>
|
||||
<p class="mb-0">Report assigned to field supervisor for initial assessment.</p>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-date">July 15, 2023 - 9:30 AM</div>
|
||||
<h5 class="mb-1">Report Created</h5>
|
||||
<p class="mb-0">New mosquito nuisance report submitted by Jane Doe.</p>
|
||||
<!-- History Timeline -->
|
||||
<div class="card">
|
||||
<div class="card-header bg-success text-white">
|
||||
<h5 class="mb-0"><i class="fas fa-history me-2"></i>Request History</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="timeline">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-date">July 17, 2023 - 2:45 PM</div>
|
||||
<h5 class="mb-1">Scheduled for Treatment</h5>
|
||||
<p class="mb-0">Site visit scheduled for July 19. Technician: Michael Johnson</p>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-date">July 16, 2023 - 10:30 AM</div>
|
||||
<h5 class="mb-1">Assessment Complete</h5>
|
||||
<p class="mb-0">Initial assessment completed. Property requires treatment for mosquito larvae.</p>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-date">July 15, 2023 - 1:15 PM</div>
|
||||
<h5 class="mb-1">In Review</h5>
|
||||
<p class="mb-0">Report assigned to field supervisor for initial assessment.</p>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-date">July 15, 2023 - 9:30 AM</div>
|
||||
<h5 class="mb-1">Report Created</h5>
|
||||
<p class="mb-0">New mosquito nuisance report submitted by Jane Doe.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
<div class="mb-3">
|
||||
<label for="report" class="form-label">Report ID</label>
|
||||
<input type="text" class="form-control" id="report" name="report" placeholder="Enter your report ID" value="{{.ReportID}}" required>
|
||||
<div class="form-text">Example: MMD-2023-12345</div>
|
||||
<div class="form-text">Example: ABCD-1234-5678</div>
|
||||
{{ if ne .Error "" }}
|
||||
<div class="alert alert-warning" role="alert">
|
||||
{{ .Error }}
|
||||
|
|
@ -151,7 +151,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
This option will guide you through selecting your location to find relevant information about mosquito activity near you.
|
||||
</p>
|
||||
<div class="d-grid gap-2 mt-auto">
|
||||
<a href="/service-request-location" class="btn btn-primary">Search by Location</a>
|
||||
<a href="/search" class="btn btn-primary">Search by Location</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue