Gleipnir/nidus-sync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

More compact interface for phone call mock

Browse source 
Tighter technicion roster, reduction of redundancies, showing calendar
percent filled, and unified search.
This commit is contained in:
Eli Ribble 2025-11-11 02:12:42 +00:00
parent 96c25b256b
commit e3234332f0
No known key found for this signature in database
1 changed files with 205 additions and 213 deletions
Download patch file Download diff file Expand all files Collapse all files

420
templates/phone-call.html
View file

@ -2,23 +2,55 @@
{{define "title"}}Dash{{end}}
{{define "style"}}
body {
overflow-x: hidden;
}
.map-container {
height: 300px;
height: 250px;
background-color: #e9ecef;
border-radius: 4px;
}
.technician-card {
transition: all 0.2s;
}
.technician-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.calendar-container {
min-height: 300px;
background-color: #f8f9fa;
border-radius: 4px;
}
.calendar-day {
width: 2.5rem;
height: 2.5rem;
line-height: 2.5rem;
text-align: center;
}
.calendar-day.has-events {
position: relative;
}
.calendar-day.has-events::after {
content: '';
position: absolute;
bottom: 0.2rem;
left: 50%;
transform: translateX(-50%);
height: 0.25rem;
border-radius: 0.125rem;
background-color: #0d6efd;
}
.calendar-day.has-events.light::after {
width: 0.25rem;
background-color: #0d6efd;
}
.calendar-day.has-events.medium::after {
width: 0.5rem;
background-color: #fd7e14;
}
.calendar-day.has-events.heavy::after {
width: 0.75rem;
background-color: #dc3545;
}
.trap-increase {
color: #dc3545;
}
.trap-decrease {
color: #28a745;
}
.status-active {
background-color: #d4edda;
}
@ -28,18 +60,16 @@
.status-transit {
background-color: #cce5ff;
}
.trap-increase {
color: #dc3545;
}
.trap-decrease {
color: #28a745;
.tech-table tr td {
vertical-align: middle;
}
{{end}}
{{define "content"}}
<!-- Header -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand d-flex align-items-center" href="#">
<img src="https://via.placeholder.com/50" alt="{{.DistrictName}} Logo" class="me-2">
<img src="https://via.placeholder.com/40" alt="{{.DistrictName}} Logo" class="me-2">
<span>{{.DistrictName}} Mosquito Abatement District</span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
@ -64,60 +94,35 @@
</div>
</nav>
<div class="container-fluid py-4">
<div class="row mb-4">
<div class="container-fluid py-3">
<div class="row mb-3">
<div class="col-12">
<div class="card">
<div class="card-body">
<h5 class="card-title">Quick Search</h5>
<div class="card shadow-sm">
<div class="card-body py-2">
<form action="/phone-call/search-results" method="GET">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search by ID (e.g., easy twin jazz cats), address, GPS, name or phone..." aria-label="Search">
<button class="btn btn-primary" type="submit"><i class="bi bi-search"></i> Search</button>
</div>
<small class="form-text text-muted">Search for anything: request ID, address, coordinates, contact name, or phone number</small>
<small class="form-text text-muted">Quick search for request ID, address, coordinates, contact name, or phone number</small>
</form>
</div>
</div>
</div>
</div>
<div class="row mb-4">
<div class="col-md-4 mb-3 mb-md-0">
<div class="card h-100">
<div class="card-header bg-primary text-white">
<h5 class="mb-0">Service Request Lookup</h5>
</div>
<div class="card-body">
<form action="/phone-call/search-results" method="GET">
<div class="mb-3">
<label for="requestId" class="form-label">Request ID</label>
<input type="text" class="form-control" id="requestId" placeholder="e.g., easy twin jazz cats">
</div>
<div class="mb-3">
<label for="phoneNumber" class="form-label">Phone Number</label>
<input type="tel" class="form-control" id="phoneNumber" placeholder="(555) 123-4567">
</div>
<div class="mb-3">
<label for="address" class="form-label">Address</label>
<input type="text" class="form-control" id="address" placeholder="123 Main St, Anytown">
</div>
<button type="submit" class="btn btn-primary w-100"><i class="bi bi-search"></i> Find Request</button>
</form>
</div>
</div>
</div>
<div class="col-md-8">
<div class="card h-100">
<div class="card-header bg-success text-white d-flex justify-content-between align-items-center">
<div class="row">
<!-- Left Column -->
<div class="col-md-8 mb-3">
<div class="card shadow-sm h-100">
<div class="card-header bg-success text-white d-flex justify-content-between align-items-center py-2">
<h5 class="mb-0">Mosquito Activity & Relief</h5>
<a href="/phone-call/service-request" class="btn btn-light btn-sm"><i class="bi bi-plus-circle"></i> New Service Request</a>
</div>
<div class="card-body">
<div class="row mb-3">
<div class="row mb-2">
<div class="col-12">
<label class="form-label">Location of Concern</label>
<label class="form-label mb-1">Location of Concern</label>
<div class="map-container d-flex justify-content-center align-items-center">
<div class="text-center text-muted">
<i class="bi bi-map fs-1"></i>
@ -128,8 +133,8 @@
</div>
<div class="row">
<div class="col-md-6 mb-3">
<h6>Recent Trap Counts</h6>
<div class="col-md-6 mb-2">
<h6 class="mb-1">Recent Trap Counts</h6>
<div class="table-responsive">
<table class="table table-sm table-bordered">
<thead class="table-light">
@ -169,7 +174,7 @@
</div>
<div class="col-md-6">
<h6>Nearby Service Requests</h6>
<h6 class="mb-1">Nearby Service Requests</h6>
<div class="table-responsive">
<table class="table table-sm table-bordered">
<thead class="table-light">
@ -207,137 +212,110 @@
</div>
</div>
</div>
</div>
<div class="row mb-4">
<div class="col-12">
<div class="card">
<div class="card-header bg-info text-white">
<h5 class="mb-0">Today's Technician Roster</h5>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-3 mb-3">
<div class="card technician-card status-active">
<div class="card-body text-center">
<img src="https://avatar.iran.liara.run/public?size=100" class="rounded-circle mb-2 avatar" width="100" alt="Technician Photo">
<h6 class="card-title">Sarah Johnson</h6>
<p class="card-text mb-1"><i class="bi bi-list-check"></i> Scheduled: 8</p>
<p class="card-text mb-1"><i class="bi bi-check-circle"></i> Completed: 5</p>
<p class="card-text mb-1"><i class="bi bi-telephone"></i> (555) 234-5678</p>
<span class="badge bg-success">Servicing Request</span>
</div>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="card technician-card status-break">
<div class="card-body text-center">
<img src="https://avatar.iran.liara.run/public?size=100" class="rounded-circle mb-2 avatar" width="100" alt="Technician Photo">
<h6 class="card-title">Mark Williams</h6>
<p class="card-text mb-1"><i class="bi bi-list-check"></i> Scheduled: 7</p>
<p class="card-text mb-1"><i class="bi bi-check-circle"></i> Completed: 3</p>
<p class="card-text mb-1"><i class="bi bi-telephone"></i> (555) 345-6789</p>
<span class="badge bg-warning text-dark">On Break</span>
</div>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="card technician-card status-transit">
<div class="card-body text-center">
<img src="https://avatar.iran.liara.run/public?size=100" class="rounded-circle mb-2 avatar" width="100" alt="Technician Photo">
<h6 class="card-title">Lisa Rodriguez</h6>
<p class="card-text mb-1"><i class="bi bi-list-check"></i> Scheduled: 9</p>
<p class="card-text mb-1"><i class="bi bi-check-circle"></i> Completed: 6</p>
<p class="card-text mb-1"><i class="bi bi-telephone"></i> (555) 456-7890</p>
<span class="badge bg-primary">In Transit</span>
</div>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="card technician-card status-active">
<div class="card-body text-center">
<img src="https://avatar.iran.liara.run/public?size=100" class="rounded-circle mb-2 avatar" width="100" alt="Technician Photo">
<h6 class="card-title">Carlos Martinez</h6>
<p class="card-text mb-1"><i class="bi bi-list-check"></i> Scheduled: 6</p>
<p class="card-text mb-1"><i class="bi bi-check-circle"></i> Completed: 4</p>
<p class="card-text mb-1"><i class="bi bi-telephone"></i> (555) 567-8901</p>
<span class="badge bg-success">Servicing Request</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 mb-3 mb-md-0">
<div class="card h-100">
<div class="card-header bg-dark text-white">
<!-- Right Column - Calendar -->
<div class="col-md-4 mb-3">
<div class="card shadow-sm h-100">
<div class="card-header bg-dark text-white py-2">
<h5 class="mb-0">Calendar</h5>
</div>
<div class="card-body">
<div class="calendar-container p-3">
<div class="d-flex justify-content-between align-items-center mb-3">
<div class="card-body p-2">
<div class="calendar-container p-2 mb-2">
<div class="d-flex justify-content-between align-items-center mb-2">
<button class="btn btn-sm btn-outline-secondary"><i class="bi bi-chevron-left"></i></button>
<h6 class="mb-0">October 2023</h6>
<button class="btn btn-sm btn-outline-secondary"><i class="bi bi-chevron-right"></i></button>
</div>
<table class="table table-sm">
<table class="table table-sm mb-0">
<thead>
<tr>
<tr class="text-center">
<th>Su</th><th>Mo</th><th>Tu</th><th>We</th><th>Th</th><th>Fr</th><th>Sa</th>
</tr>
</thead>
<tbody>
<tr class="text-center">
<td class="calendar-day text-muted">1</td>
<td class="calendar-day text-muted has-events light">2</td>
<td class="calendar-day text-muted has-events medium">3</td>
<td class="calendar-day text-muted">4</td>
<td class="calendar-day text-muted has-events light">5</td>
<td class="calendar-day text-muted">6</td>
<td class="calendar-day text-muted">7</td>
</tr>
<tr class="text-center">
<td class="calendar-day text-muted">8</td>
<td class="calendar-day text-muted has-events medium">9</td>
<td class="calendar-day text-muted has-events light">10</td>
<td class="calendar-day text-muted has-events heavy">11</td>
<td class="calendar-day text-muted has-events medium">12</td>
<td class="calendar-day text-muted has-events light">13</td>
<td class="calendar-day text-muted">14</td>
</tr>
<tr class="text-center">
<td class="calendar-day text-muted">15</td>
<td class="calendar-day text-muted has-events medium">16</td>
<td class="calendar-day text-muted has-events light">17</td>
<td class="calendar-day text-muted has-events medium">18</td>
<td class="calendar-day text-muted has-events heavy">19</td>
<td class="calendar-day text-muted has-events medium">20</td>
<td class="calendar-day text-muted">21</td>
</tr>
<tr class="text-center">
<td class="calendar-day">22</td>
<td class="calendar-day bg-primary text-white rounded has-events heavy">23</td>
<td class="calendar-day has-events medium">24</td>
<td class="calendar-day has-events light">25</td>
<td class="calendar-day has-events medium">26</td>
<td class="calendar-day has-events heavy">27</td>
<td class="calendar-day">28</td>
</tr>
<tr class="text-center">
<td class="calendar-day">29</td>
<td class="calendar-day has-events medium">30</td>
<td class="calendar-day has-events light">31</td>
<td class="calendar-day text-muted">1</td>
<td class="calendar-day text-muted has-events light">2</td>
<td class="calendar-day text-muted">3</td>
<td class="calendar-day text-muted">4</td>
</tr>
</tbody>
</table>
<div class="d-flex justify-content-center mt-1 small">
<span class="me-3"><span class="d-inline-block bg-primary rounded-circle" style="width:8px;height:8px"></span> Light</span>
<span class="me-3"><span class="d-inline-block bg-warning rounded-circle" style="width:8px;height:8px"></span> Medium</span>
<span><span class="d-inline-block bg-danger rounded-circle" style="width:8px;height:8px"></span> Heavy</span>
</div>
</div>
<h6 class="mb-1">Today's Schedule - October 23, 2023</h6>
<div class="table-responsive">
<table class="table table-sm table-hover mb-0">
<thead>
<tr>
<td class="text-muted">1</td>
<td class="text-muted">2</td>
<td class="text-muted">3</td>
<td class="text-muted">4</td>
<td class="text-muted">5</td>
<td class="text-muted">6</td>
<td class="text-muted">7</td>
<th>Time</th>
<th>Address</th>
<th>Type</th>
<th>Technician</th>
</tr>
</thead>
<tbody>
<tr>
<td>8:00 AM</td>
<td>123 Maple St</td>
<td>Nuisance</td>
<td>S. Johnson</td>
</tr>
<tr>
<td class="text-muted">8</td>
<td class="text-muted">9</td>
<td class="text-muted">10</td>
<td class="text-muted">11</td>
<td class="text-muted">12</td>
<td class="text-muted">13</td>
<td class="text-muted">14</td>
<td>9:30 AM</td>
<td>456 Oak Ave</td>
<td>Green Pool</td>
<td>M. Williams</td>
</tr>
<tr>
<td class="text-muted">15</td>
<td class="text-muted">16</td>
<td class="text-muted">17</td>
<td class="text-muted">18</td>
<td class="text-muted">19</td>
<td class="text-muted">20</td>
<td class="text-muted">21</td>
</tr>
<tr>
<td>22</td>
<td class="bg-primary text-white rounded">23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
<tr>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="text-muted">1</td>
<td class="text-muted">2</td>
<td class="text-muted">3</td>
<td class="text-muted">4</td>
<tr class="table-active">
<td>11:00 AM</td>
<td>789 Pine Ln</td>
<td>Prev Source</td>
<td>L. Rodriguez</td>
</tr>
</tbody>
</table>
@ -345,66 +323,80 @@
</div>
</div>
</div>
<div class="col-md-8">
<div class="card h-100">
<div class="card-header bg-secondary text-white d-flex justify-content-between align-items-center">
<h5 class="mb-0">Today's Schedule - October 23, 2023</h5>
<button class="btn btn-light btn-sm"><i class="bi bi-calendar-plus"></i> Schedule Appointment</button>
</div>
<div class="card-body">
<!-- Technician Roster - Table View -->
<div class="row">
<div class="col-12">
<div class="card shadow-sm">
<div class="card-header bg-info text-white py-2">
<h5 class="mb-0">Today's Technician Roster</h5>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover">
<table class="table table-hover table-sm tech-table mb-0">
<thead>
<tr>
<th>Time</th>
<th>Address</th>
<th>Type</th>
<th>Resident</th>
<th>Technician</th>
<th>Scheduled</th>
<th>Completed</th>
<th>Phone</th>
<th>Status</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>8:00 AM</td>
<td>123 Maple St, Anytown</td>
<td>Mosquito Nuisance</td>
<td>John Smith</td>
<td>Sarah Johnson</td>
<td><span class="badge bg-success">Completed</span></td>
<td>
<div class="d-flex align-items-center">
<img src="https://via.placeholder.com/32" class="rounded-circle me-2" alt="Photo">
<span>Sarah Johnson</span>
</div>
</td>
<td>8</td>
<td>5</td>
<td>(555) 234-5678</td>
<td><span class="badge bg-success">Servicing</span></td>
<td>123 Maple St, Zone 3</td>
</tr>
<tr>
<td>9:30 AM</td>
<td>456 Oak Ave, Anytown</td>
<td>Green Pool</td>
<td>Emily Davis</td>
<td>Mark Williams</td>
<td><span class="badge bg-success">Completed</span></td>
</tr>
<tr class="table-active">
<td>11:00 AM</td>
<td>789 Pine Ln, Anytown</td>
<td>Previous Source</td>
<td>Robert Jones</td>
<td>Lisa Rodriguez</td>
<td><span class="badge bg-primary">In Progress</span></td>
<td>
<div class="d-flex align-items-center">
<img src="https://via.placeholder.com/32" class="rounded-circle me-2" alt="Photo">
<span>Mark Williams</span>
</div>
</td>
<td>7</td>
<td>3</td>
<td>(555) 345-6789</td>
<td><span class="badge bg-warning text-dark">On Break</span></td>
<td>Office - Lunchroom</td>
</tr>
<tr>
<td>1:30 PM</td>
<td>101 Cedar Blvd, Anytown</td>
<td>Mosquito Nuisance</td>
<td>Maria Garcia</td>
<td>Carlos Martinez</td>
<td><span class="badge bg-warning text-dark">Scheduled</span></td>
<td>
<div class="d-flex align-items-center">
<img src="https://via.placeholder.com/32" class="rounded-circle me-2" alt="Photo">
<span>Lisa Rodriguez</span>
</div>
</td>
<td>9</td>
<td>6</td>
<td>(555) 456-7890</td>
<td><span class="badge bg-primary">In Transit</span></td>
<td>En route to 789 Pine Ln</td>
</tr>
<tr>
<td>3:00 PM</td>
<td>202 Birch Dr, Anytown</td>
<td>Green Pool</td>
<td>David Wilson</td>
<td>Sarah Johnson</td>
<td><span class="badge bg-warning text-dark">Scheduled</span></td>
<td>
<div class="d-flex align-items-center">
<img src="https://via.placeholder.com/32" class="rounded-circle me-2" alt="Photo">
<span>Carlos Martinez</span>
</div>
</td>
<td>6</td>
<td>4</td>
<td>(555) 567-8901</td>
<td><span class="badge bg-success">Servicing</span></td>
<td>202 Birch Dr, Zone 2</td>
</tr>
</tbody>
</table>