Eli Ribble
f6879ac094
Make mock listing automatic and dynamic Remove mocks that are implemented in some way Move all remaining mocks into the mocks/ directory
387 lines
9.8 KiB
HTML
387 lines
9.8 KiB
HTML
{{ template "sync/layout/base.html" . }}
|
|
|
|
{{ define "title" }}Dash{{ end }}
|
|
{{ define "extraheader" }}
|
|
<style>
|
|
.district-logo {
|
|
max-height: 80px;
|
|
width: auto;
|
|
}
|
|
.map-container {
|
|
height: 300px;
|
|
background-color: #e9ecef;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 5px;
|
|
border: 1px solid #dee2e6;
|
|
}
|
|
.progress-tracker {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 20px 0;
|
|
position: relative;
|
|
}
|
|
.progress-tracker::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 25px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 2px;
|
|
background-color: #dee2e6;
|
|
z-index: 1;
|
|
}
|
|
.progress-step {
|
|
position: relative;
|
|
z-index: 2;
|
|
text-align: center;
|
|
width: 60px;
|
|
}
|
|
.progress-icon {
|
|
height: 50px;
|
|
width: 50px;
|
|
background-color: #fff;
|
|
border-radius: 50%;
|
|
border: 2px solid #dee2e6;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 8px;
|
|
}
|
|
.progress-icon.active {
|
|
border-color: #0d6efd;
|
|
background-color: #0d6efd;
|
|
color: white;
|
|
}
|
|
.progress-icon.completed {
|
|
border-color: #198754;
|
|
background-color: #198754;
|
|
color: white;
|
|
}
|
|
.progress-label {
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
}
|
|
.type-badge {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 1.1rem;
|
|
}
|
|
.type-badge i {
|
|
margin-right: 8px;
|
|
}
|
|
.coordinates {
|
|
font-size: 0.85rem;
|
|
color: #6c757d;
|
|
}
|
|
.note-item {
|
|
border-left: 3px solid #0d6efd;
|
|
padding: 10px 15px;
|
|
background-color: rgba(13, 110, 253, 0.05);
|
|
margin-bottom: 10px;
|
|
}
|
|
.note-date {
|
|
font-size: 0.8rem;
|
|
color: #6c757d;
|
|
margin-bottom: 2px;
|
|
}
|
|
</style>
|
|
{{ end }}
|
|
{{ define "content" }}
|
|
<!-- Header -->
|
|
<header class="bg-light py-3">
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="col-md-6">
|
|
<h1 class="district-name">[District Name]</h1>
|
|
</div>
|
|
<div class="col-md-6 text-md-end">
|
|
<img
|
|
src="placeholder-logo.png"
|
|
alt="District Logo"
|
|
class="district-logo"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="py-5">
|
|
<div class="container">
|
|
<!-- Report Header -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-8">
|
|
<h2>Report #MMD-2023-12345</h2>
|
|
</div>
|
|
<div class="col-md-4 text-md-end">
|
|
<span class="badge bg-primary type-badge">
|
|
<i class="bi bi-water"></i> Green Pool
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Progress Tracker -->
|
|
<div class="progress-tracker mb-5">
|
|
<div class="progress-step">
|
|
<div class="progress-icon completed">
|
|
<i class="bi bi-check-lg"></i>
|
|
</div>
|
|
<div class="progress-label">Submitted</div>
|
|
</div>
|
|
<div class="progress-step">
|
|
<div class="progress-icon completed">
|
|
<i class="bi bi-check-lg"></i>
|
|
</div>
|
|
<div class="progress-label">Accepted</div>
|
|
</div>
|
|
<div class="progress-step">
|
|
<div class="progress-icon active">
|
|
<i class="bi bi-clock"></i>
|
|
</div>
|
|
<div class="progress-label">Scheduled</div>
|
|
</div>
|
|
<div class="progress-step">
|
|
<div class="progress-icon">
|
|
<i class="bi bi-flag"></i>
|
|
</div>
|
|
<div class="progress-label">Complete</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- Map and Location Information -->
|
|
<div class="col-lg-5 mb-4">
|
|
<div class="card h-100">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">Location</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- Map Placeholder -->
|
|
<div class="map-container mb-3">
|
|
<div class="text-center">
|
|
<i class="bi bi-map fs-1 text-secondary"></i>
|
|
<p class="mb-0">Map of Report Location</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Address Information -->
|
|
<div>
|
|
<h6>Address</h6>
|
|
<p class="mb-2">123 Mosquito Ave, Lakeside, CA 92040</p>
|
|
<p class="coordinates mb-0">
|
|
<i class="bi bi-geo-alt"></i> 32.8573° N, 116.9222° W
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Report Details -->
|
|
<div class="col-lg-7 mb-4">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">Report Details</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row mb-4">
|
|
<div class="col-md-6">
|
|
<h6>Report Source</h6>
|
|
<p><i class="bi bi-phone"></i> Phone Call</p>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6>Report Date</h6>
|
|
<p>October 15, 2023 at 2:45 PM</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<h6>Description</h6>
|
|
<p>
|
|
I noticed my neighbor's backyard pool has turned green and
|
|
there's nobody living in the house currently. I'm concerned it
|
|
might be breeding mosquitoes as I've noticed more of them in
|
|
my yard recently. The house seems to be vacant for about 3
|
|
months now.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="row mb-4">
|
|
<div class="col-md-6">
|
|
<h6>Pool Status</h6>
|
|
<p>
|
|
<span class="badge bg-warning text-dark"
|
|
><i class="bi bi-exclamation-triangle"></i>
|
|
Stagnant/Green</span
|
|
>
|
|
</p>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6>Scheduled Appointment</h6>
|
|
<p>October 20, 2023, 9:00 AM - 11:00 AM</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<h6>Contact Information</h6>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<p class="mb-1"><strong>Reported By:</strong> John Smith</p>
|
|
<p class="mb-1"><strong>Phone:</strong> (555) 123-4567</p>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<p class="mb-1">
|
|
<strong>Email:</strong> john.smith@example.com
|
|
</p>
|
|
<p class="mb-1">
|
|
<strong>Preferred Contact:</strong> Phone
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Technician Notes -->
|
|
<div class="row">
|
|
<div class="col-12 mb-4">
|
|
<div class="card">
|
|
<div
|
|
class="card-header d-flex justify-content-between align-items-center"
|
|
>
|
|
<h5 class="mb-0">Notes & Updates</h5>
|
|
<span class="badge bg-info">3 Notes</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="note-item">
|
|
<div class="note-date">
|
|
Added by System on Oct 15, 2023, 2:45 PM
|
|
</div>
|
|
<div class="note-content">
|
|
Report created via phone call to district office.
|
|
</div>
|
|
</div>
|
|
<div class="note-item">
|
|
<div class="note-date">
|
|
Added by Sarah Johnson (Office Staff) on Oct 16, 2023, 9:30 AM
|
|
</div>
|
|
<div class="note-content">
|
|
Verified location information. Property appears to be vacant
|
|
according to county records. Left voicemail with property
|
|
management company listed in county database.
|
|
</div>
|
|
</div>
|
|
<div class="note-item">
|
|
<div class="note-date">
|
|
Added by Mike Davis (Technician) on Oct 18, 2023, 11:15 AM
|
|
</div>
|
|
<div class="note-content">
|
|
Scheduled inspection for Oct 20. Will need access to backyard.
|
|
Contacted reporter to confirm they'll be available to provide
|
|
access information on day of service.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Next Steps -->
|
|
<div class="row">
|
|
<div class="col-12 mb-4">
|
|
<div class="card bg-light">
|
|
<div class="card-body">
|
|
<h5><i class="bi bi-arrow-right-circle"></i> Next Steps</h5>
|
|
<p>
|
|
Technician scheduled to inspect the property on October 20,
|
|
2023, between 9:00 AM - 11:00 AM. If access to the property is
|
|
not possible, treatment may be conducted from outside the
|
|
property or additional follow-up may be required.
|
|
</p>
|
|
<p class="mb-0">
|
|
<strong>Note:</strong> You will receive a notification when the
|
|
status of this report changes.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Update Form -->
|
|
<div class="row mt-3">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">Add Information</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<p>
|
|
Do you have additional information about this report? Add it
|
|
below to update the technician.
|
|
</p>
|
|
<form>
|
|
<div class="mb-3">
|
|
<label for="updateMessage" class="form-label">Message</label>
|
|
<textarea
|
|
class="form-control"
|
|
id="updateMessage"
|
|
rows="3"
|
|
placeholder="Enter additional information here..."
|
|
></textarea>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="contactPhone" class="form-label"
|
|
>Phone Number (optional)</label
|
|
>
|
|
<input
|
|
type="tel"
|
|
class="form-control"
|
|
id="contactPhone"
|
|
placeholder="(555) 123-4567"
|
|
/>
|
|
<div class="form-text">
|
|
Provide your phone number if you'd like to be contacted
|
|
about this update.
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">
|
|
Submit Update
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Back Button -->
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<a href="/check-status" class="btn btn-outline-secondary">
|
|
<i class="bi bi-arrow-left"></i> Back to Status Check
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-dark text-white py-4">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<p class="mb-0">
|
|
© 2023 [District Name] Mosquito Management District
|
|
</p>
|
|
</div>
|
|
<div class="col-md-6 text-md-end">
|
|
<p class="mb-0">
|
|
Contact: (555) 123-4567 | info@mosquitodistrict.gov
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
{{ end }}
|