Fold dispatch results into radar page
This commit is contained in:
parent
e5b6135e44
commit
c439c7c8a8
4 changed files with 312 additions and 490 deletions
|
|
@ -1,330 +0,0 @@
|
|||
{{ template "sync/layout/base.html" . }}
|
||||
|
||||
{{ define "title" }}Data Entry{{ end }}
|
||||
{{ define "extraheader" }}
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const checkboxes = document.querySelectorAll(".route-select");
|
||||
const switchBtn = document.getElementById("switchRoutesBtn");
|
||||
|
||||
// Enable/disable switch button based on selection
|
||||
checkboxes.forEach((checkbox) => {
|
||||
checkbox.addEventListener("change", () => {
|
||||
const checkedBoxes = document.querySelectorAll(
|
||||
".route-select:checked",
|
||||
);
|
||||
switchBtn.disabled = checkedBoxes.length !== 2;
|
||||
});
|
||||
});
|
||||
|
||||
// For demonstration purposes
|
||||
switchBtn.addEventListener("click", function () {
|
||||
const selectedRoutes = Array.from(
|
||||
document.querySelectorAll(".route-select:checked"),
|
||||
).map((cb) => cb.value);
|
||||
alert(`Switching routes ${selectedRoutes[0]} and ${selectedRoutes[1]}`);
|
||||
// In a real application, this would trigger the route switching logic
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.main-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.map-container {
|
||||
height: 400px;
|
||||
background-color: #e9ecef;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
}
|
||||
.route-badge {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.tech-photo {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.action-button {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
.completion-alert {
|
||||
border-left: 5px solid #0d6efd;
|
||||
}
|
||||
</style>
|
||||
{{ end }}
|
||||
{{ define "content" }}
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h1>Route Calculation Results</h1>
|
||||
<a href="{{ .URLs.Dispatch }}" class="btn btn-outline-primary">
|
||||
<i class="bi bi-pencil-square me-1"></i> Edit Parameters
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Map View -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header bg-primary text-white">
|
||||
<h2 class="h4 mb-0">Route Map</h2>
|
||||
</div>
|
||||
<div class="card-body p-2">
|
||||
<div
|
||||
class="map-container d-flex align-items-center justify-content-center"
|
||||
>
|
||||
<div class="text-center">
|
||||
<i class="bi bi-map fs-1 text-muted"></i>
|
||||
<h3 class="text-muted">Interactive Map View</h3>
|
||||
<p class="text-muted">
|
||||
Routes are color-coded by technician assignment
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Completion Projection -->
|
||||
<div class="alert alert-info mb-4 completion-alert">
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="bi bi-calendar-check fs-4 me-3"></i>
|
||||
<div>
|
||||
<h4 class="h5 mb-1">Coverage Projection</h4>
|
||||
<p class="mb-0">
|
||||
If every day were like today, all pools would be complete on
|
||||
<strong>October 27, 2023</strong>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Route Summary Table -->
|
||||
<div class="card mb-4">
|
||||
<div
|
||||
class="card-header bg-primary text-white d-flex justify-content-between align-items-center"
|
||||
>
|
||||
<h2 class="h4 mb-0">Route Summary</h2>
|
||||
<button class="btn btn-sm btn-light" id="switchRoutesBtn" disabled>
|
||||
<i class="bi bi-arrow-left-right me-1"></i> Switch Selected Routes
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th width="40">Select</th>
|
||||
<th width="50">Route</th>
|
||||
<th>Technician</th>
|
||||
<th>Cold Call Pools</th>
|
||||
<th>Drone Inspections</th>
|
||||
<th>Service Calls</th>
|
||||
<th>Warrants</th>
|
||||
<th>Est. Time</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="form-check">
|
||||
<input
|
||||
class="form-check-input route-select"
|
||||
type="checkbox"
|
||||
value="A"
|
||||
id="routeA"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="route-badge bg-primary text-white">A</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img
|
||||
src="https://randomuser.me/api/portraits/men/32.jpg"
|
||||
alt="John Davis"
|
||||
class="tech-photo me-2"
|
||||
/>
|
||||
<span>John Davis</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>12</td>
|
||||
<td>0</td>
|
||||
<td>5</td>
|
||||
<td>2</td>
|
||||
<td>6h 15m</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-outline-secondary">
|
||||
<i class="bi bi-eye"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="form-check">
|
||||
<input
|
||||
class="form-check-input route-select"
|
||||
type="checkbox"
|
||||
value="B"
|
||||
id="routeB"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="route-badge bg-success text-white">B</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img
|
||||
src="https://randomuser.me/api/portraits/women/65.jpg"
|
||||
alt="Sarah Johnson"
|
||||
class="tech-photo me-2"
|
||||
/>
|
||||
<span>Sarah Johnson</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>8</td>
|
||||
<td>3</td>
|
||||
<td>4</td>
|
||||
<td>1</td>
|
||||
<td>7h 30m</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-outline-secondary">
|
||||
<i class="bi bi-eye"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="form-check">
|
||||
<input
|
||||
class="form-check-input route-select"
|
||||
type="checkbox"
|
||||
value="C"
|
||||
id="routeC"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="route-badge bg-danger text-white">C</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img
|
||||
src="https://randomuser.me/api/portraits/men/44.jpg"
|
||||
alt="Michael Chen"
|
||||
class="tech-photo me-2"
|
||||
/>
|
||||
<span>Michael Chen</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>10</td>
|
||||
<td>4</td>
|
||||
<td>3</td>
|
||||
<td>0</td>
|
||||
<td>7h 45m</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-outline-secondary">
|
||||
<i class="bi bi-eye"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="form-check">
|
||||
<input
|
||||
class="form-check-input route-select"
|
||||
type="checkbox"
|
||||
value="D"
|
||||
id="routeD"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="route-badge bg-warning text-dark">D</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img
|
||||
src="https://randomuser.me/api/portraits/women/22.jpg"
|
||||
alt="Jessica Martinez"
|
||||
class="tech-photo me-2"
|
||||
/>
|
||||
<span>Jessica Martinez</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>14</td>
|
||||
<td>2</td>
|
||||
<td>6</td>
|
||||
<td>3</td>
|
||||
<td>8h 00m</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-outline-secondary">
|
||||
<i class="bi bi-eye"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="d-flex justify-content-between">
|
||||
<a
|
||||
href="{{ .URLs.Dispatch }}"
|
||||
class="btn btn-outline-secondary action-button"
|
||||
>
|
||||
<i class="bi bi-arrow-left me-2"></i>Back to Parameters
|
||||
</a>
|
||||
<a href="{{ .URLs.Root }}" class="btn btn-success action-button">
|
||||
<i class="bi bi-check-circle me-2"></i>Approve & Dispatch
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Modal for Route Details -->
|
||||
<div
|
||||
class="modal fade"
|
||||
id="routeDetailsModal"
|
||||
tabindex="-1"
|
||||
aria-labelledby="routeDetailsModalLabel"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="routeDetailsModalLabel">
|
||||
Route A Details
|
||||
</h5>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
data-bs-dismiss="modal"
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- Route details would go here -->
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
data-bs-dismiss="modal"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
@ -15,174 +15,323 @@
|
|||
});
|
||||
}
|
||||
window.addEventListener("load", onLoad);
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const checkboxes = document.querySelectorAll(".route-select");
|
||||
const switchBtn = document.getElementById("switchRoutesBtn");
|
||||
|
||||
// Enable/disable switch button based on selection
|
||||
checkboxes.forEach((checkbox) => {
|
||||
checkbox.addEventListener("change", () => {
|
||||
const checkedBoxes = document.querySelectorAll(
|
||||
".route-select:checked",
|
||||
);
|
||||
switchBtn.disabled = checkedBoxes.length !== 2;
|
||||
});
|
||||
});
|
||||
|
||||
// For demonstration purposes
|
||||
switchBtn.addEventListener("click", function () {
|
||||
const selectedRoutes = Array.from(
|
||||
document.querySelectorAll(".route-select:checked"),
|
||||
).map((cb) => cb.value);
|
||||
alert(`Switching routes ${selectedRoutes[0]} and ${selectedRoutes[1]}`);
|
||||
// In a real application, this would trigger the route switching logic
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.main-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.map-container {
|
||||
height: 400px;
|
||||
background-color: #e9ecef;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
}
|
||||
.route-badge {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.tech-photo {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.action-button {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
.completion-alert {
|
||||
border-left: 5px solid #0d6efd;
|
||||
}
|
||||
</style>
|
||||
{{ end }}
|
||||
{{ define "content" }}
|
||||
<div class="container mt-4">
|
||||
<h1 class="mb-3">Field Operations Radar</h1>
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h1>Route Calculation Results</h1>
|
||||
<a href="{{ .URL.Route }}" class="btn btn-outline-primary">
|
||||
<i class="bi bi-pencil-square me-1"></i> Edit Parameters
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Map View -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Technician Locations</h5>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="map-placeholder">
|
||||
<h3 class="text-muted">Map View - Technician Locations</h3>
|
||||
<!-- Map View -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header bg-primary text-white">
|
||||
<h2 class="h4 mb-0">Route Map</h2>
|
||||
</div>
|
||||
<div class="card-body p-2">
|
||||
<div
|
||||
class="map-container d-flex align-items-center justify-content-center"
|
||||
>
|
||||
<div class="text-center">
|
||||
<i class="bi bi-map fs-1 text-muted"></i>
|
||||
<h3 class="text-muted">Interactive Map View</h3>
|
||||
<p class="text-muted">
|
||||
Routes are color-coded by technician assignment
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Technicians Table -->
|
||||
<div class="card">
|
||||
<div
|
||||
class="card-header d-flex justify-content-between align-items-center"
|
||||
>
|
||||
<h5 class="mb-0">Field Technicians Status</h5>
|
||||
<span class="badge bg-primary">12 Active Technicians</span>
|
||||
<!-- Completion Projection -->
|
||||
<div class="alert alert-info mb-4 completion-alert">
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="bi bi-calendar-check fs-4 me-3"></i>
|
||||
<div>
|
||||
<h4 class="h5 mb-1">Coverage Projection</h4>
|
||||
<p class="mb-0">
|
||||
If every day were like today, all pools would be complete on
|
||||
<strong>October 27, 2023</strong>
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Technician</th>
|
||||
<th scope="col">Last Update</th>
|
||||
<th scope="col">Current Activity</th>
|
||||
<th scope="col">Time Remaining</th>
|
||||
<th scope="col">Next Activity</th>
|
||||
<th scope="col">Schedule</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-placeholder me-2">
|
||||
<i class="bi bi-person-fill"></i>
|
||||
</div>
|
||||
<div>Sarah Johnson</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>2 min ago</td>
|
||||
<td>
|
||||
<span class="status-badge bg-success">At Site</span>
|
||||
</td>
|
||||
<td>15 min</td>
|
||||
<td>Lakeside Park</td>
|
||||
<td>
|
||||
<a href="#" class="btn btn-sm btn-outline-primary">
|
||||
<i class="bi bi-calendar3"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-placeholder me-2">
|
||||
<i class="bi bi-person-fill"></i>
|
||||
</div>
|
||||
<div>Michael Torres</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>7 min ago</td>
|
||||
<td>
|
||||
<span class="status-badge bg-warning">On Break</span>
|
||||
</td>
|
||||
<td>8 min</td>
|
||||
<td>Henderson Marsh</td>
|
||||
<td>
|
||||
<a href="#" class="btn btn-sm btn-outline-primary">
|
||||
<i class="bi bi-calendar3"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-placeholder me-2">
|
||||
<i class="bi bi-person-fill"></i>
|
||||
</div>
|
||||
<div>Lisa Williams</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>12 min ago</td>
|
||||
<td>
|
||||
<span class="status-badge bg-info">In Transit</span>
|
||||
</td>
|
||||
<td>5 min</td>
|
||||
<td>Westside Creek</td>
|
||||
<td>
|
||||
<a href="#" class="btn btn-sm btn-outline-primary">
|
||||
<i class="bi bi-calendar3"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-placeholder me-2">
|
||||
<i class="bi bi-person-fill"></i>
|
||||
</div>
|
||||
<div>Robert Chen</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>34 min ago</td>
|
||||
<td>
|
||||
<span class="status-badge bg-secondary">Unknown</span>
|
||||
</td>
|
||||
<td>--</td>
|
||||
<td>Oak Grove Pond</td>
|
||||
<td>
|
||||
<a href="#" class="btn btn-sm btn-outline-primary">
|
||||
<i class="bi bi-calendar3"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-placeholder me-2">
|
||||
<i class="bi bi-person-fill"></i>
|
||||
</div>
|
||||
<div>Emily Nguyen</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>5 min ago</td>
|
||||
<td>
|
||||
<span class="status-badge bg-success">At Site</span>
|
||||
</td>
|
||||
<td>23 min</td>
|
||||
<td>Harbor Point</td>
|
||||
<td>
|
||||
<a href="#" class="btn btn-sm btn-outline-primary">
|
||||
<i class="bi bi-calendar3"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-placeholder me-2">
|
||||
<i class="bi bi-person-fill"></i>
|
||||
</div>
|
||||
<div>James Wilson</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>Just now</td>
|
||||
<td>
|
||||
<span class="status-badge bg-info">In Transit</span>
|
||||
</td>
|
||||
<td>12 min</td>
|
||||
<td>Meadow Heights</td>
|
||||
<td>
|
||||
<a href="#" class="btn btn-sm btn-outline-primary">
|
||||
<i class="bi bi-calendar3"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Route Summary Table -->
|
||||
<div class="card mb-4">
|
||||
<div
|
||||
class="card-header bg-primary text-white d-flex justify-content-between align-items-center"
|
||||
>
|
||||
<h2 class="h4 mb-0">Route Summary</h2>
|
||||
<button class="btn btn-sm btn-light" id="switchRoutesBtn" disabled>
|
||||
<i class="bi bi-arrow-left-right me-1"></i> Switch Selected Routes
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th width="40">Select</th>
|
||||
<th width="50">Route</th>
|
||||
<th>Technician</th>
|
||||
<th>Cold Call Pools</th>
|
||||
<th>Drone Inspections</th>
|
||||
<th>Service Calls</th>
|
||||
<th>Warrants</th>
|
||||
<th>Est. Time</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="form-check">
|
||||
<input
|
||||
class="form-check-input route-select"
|
||||
type="checkbox"
|
||||
value="A"
|
||||
id="routeA"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="route-badge bg-primary text-white">A</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img
|
||||
src="https://randomuser.me/api/portraits/men/32.jpg"
|
||||
alt="John Davis"
|
||||
class="tech-photo me-2"
|
||||
/>
|
||||
<span>John Davis</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>12</td>
|
||||
<td>0</td>
|
||||
<td>5</td>
|
||||
<td>2</td>
|
||||
<td>6h 15m</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-outline-secondary">
|
||||
<i class="bi bi-eye"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="form-check">
|
||||
<input
|
||||
class="form-check-input route-select"
|
||||
type="checkbox"
|
||||
value="B"
|
||||
id="routeB"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="route-badge bg-success text-white">B</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img
|
||||
src="https://randomuser.me/api/portraits/women/65.jpg"
|
||||
alt="Sarah Johnson"
|
||||
class="tech-photo me-2"
|
||||
/>
|
||||
<span>Sarah Johnson</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>8</td>
|
||||
<td>3</td>
|
||||
<td>4</td>
|
||||
<td>1</td>
|
||||
<td>7h 30m</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-outline-secondary">
|
||||
<i class="bi bi-eye"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="form-check">
|
||||
<input
|
||||
class="form-check-input route-select"
|
||||
type="checkbox"
|
||||
value="C"
|
||||
id="routeC"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="route-badge bg-danger text-white">C</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img
|
||||
src="https://randomuser.me/api/portraits/men/44.jpg"
|
||||
alt="Michael Chen"
|
||||
class="tech-photo me-2"
|
||||
/>
|
||||
<span>Michael Chen</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>10</td>
|
||||
<td>4</td>
|
||||
<td>3</td>
|
||||
<td>0</td>
|
||||
<td>7h 45m</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-outline-secondary">
|
||||
<i class="bi bi-eye"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="form-check">
|
||||
<input
|
||||
class="form-check-input route-select"
|
||||
type="checkbox"
|
||||
value="D"
|
||||
id="routeD"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="route-badge bg-warning text-dark">D</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img
|
||||
src="https://randomuser.me/api/portraits/women/22.jpg"
|
||||
alt="Jessica Martinez"
|
||||
class="tech-photo me-2"
|
||||
/>
|
||||
<span>Jessica Martinez</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>14</td>
|
||||
<td>2</td>
|
||||
<td>6</td>
|
||||
<td>3</td>
|
||||
<td>8h 00m</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-outline-secondary">
|
||||
<i class="bi bi-eye"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="d-flex justify-content-between">
|
||||
<a href="{{ .URL.Route }}" class="btn btn-outline-secondary action-button">
|
||||
<i class="bi bi-arrow-left me-2"></i>Back to Parameters
|
||||
</a>
|
||||
<a href="{{ .URL.Root }}" class="btn btn-success action-button">
|
||||
<i class="bi bi-check-circle me-2"></i>Approve & Dispatch
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Modal for Route Details -->
|
||||
<div
|
||||
class="modal fade"
|
||||
id="routeDetailsModal"
|
||||
tabindex="-1"
|
||||
aria-labelledby="routeDetailsModalLabel"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="routeDetailsModalLabel">
|
||||
Route A Details
|
||||
</h5>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
data-bs-dismiss="modal"
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- Route details would go here -->
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
data-bs-dismiss="modal"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue