forked from mansiruhil13/Bobble-AI
-
Notifications
You must be signed in to change notification settings - Fork 0
/
driver.html
122 lines (108 loc) · 4.51 KB
/
driver.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Driver Dashboard</title>
<link rel="stylesheet" href="src/css/driver.css">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCKR3agIMLtauzDhz4fCu3heww0BV_81H4" async defer></script>
<style>
#map {
width: 100%;
height: 320px;
display: none;
margin-bottom: 20px;
}
#driverImage {
width: 100%;
height: 320px;
margin-bottom: 20px;
}
/* Add a loading spinner for the map */
#loadingSpinner {
display: none; /* Hidden by default */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
}
</style>
</head>
<body>
<div class="dashboard-container">
<h1>Welcome, <span id="driverName">Driver ___</span></h1>
<p id="status">You are currently: <strong id="availability">OFF DUTY</strong></p>
<!-- Driver Image -->
<img src="driver-status-off.jpg" alt="Driver Image" id="driverImage">
<!-- Google Map -->
<div id="map"></div>
<!-- Loading Spinner -->
<div id="loadingSpinner">Loading...</div>
<div class="toggle-container">
<label class="switch">
<input type="checkbox" id="availabilityToggle">
<span class="slider"></span>
</label>
<p>Availability</p>
</div>
</div>
<script>
let map, driverMarker;
const availabilityToggle = document.getElementById('availabilityToggle');
const availabilityText = document.getElementById('availability');
const statusText = document.getElementById('status');
const driverName = document.getElementById('driverName');
const driverImage = document.getElementById('driverImage');
const mapElement = document.getElementById('map');
const loadingSpinner = document.getElementById('loadingSpinner');
// Initialize the map
function initMap() {
loadingSpinner.style.display = "block"; // Show spinner
const mapOptions = {
zoom: 14,
center: { lat: 37.7749, lng: -122.4194 } // Example location: San Francisco
};
map = new google.maps.Map(mapElement, mapOptions);
driverMarker = new google.maps.Marker({
position: mapOptions.center,
map: map,
title: 'Driver Location'
});
loadingSpinner.style.display = "none"; // Hide spinner after map is loaded
}
// Set initial values (can be set dynamically later)
driverName.textContent = "XYZ"; // Example driver name
let isAvailable = false;
// Toggle availability function
availabilityToggle.addEventListener('change', () => {
isAvailable = availabilityToggle.checked;
if (isAvailable) {
availabilityText.textContent = "ON DUTY";
statusText.style.color = "green";
driverImage.style.display = "none"; // Hide the image
mapElement.style.display = "block"; // Show the map
initMap(); // Initialize the map
} else {
availabilityText.textContent = "OFF DUTY";
statusText.style.color = "red";
mapElement.style.display = "none"; // Hide the map
driverImage.style.display = "block"; // Show the image
}
});
// Function to update driver's location in real-time
function updateDriverLocation() {
// Simulate real-time location update
const newLat = 37.7749 + (Math.random() * 0.001 - 0.0005);
const newLng = -122.4194 + (Math.random() * 0.001 - 0.0005);
const newPosition = { lat: newLat, lng: newLng };
// Update the driver's marker position on the map
// Assuming you have a marker for the driver
driverMarker.setPosition(newPosition);
map.setCenter(newPosition);
}
// Call updateDriverLocation every 5 seconds
setInterval(updateDriverLocation, 5000);
</script>
</body>
</html>