forked from mansiruhil13/Bobble-AI
-
Notifications
You must be signed in to change notification settings - Fork 0
/
ambtracker.html
171 lines (151 loc) · 5.27 KB
/
ambtracker.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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ambulance GPS Tracking System</title>
<link rel="stylesheet" href="src/css/manage.css" /> <!-- For Header -->
<link rel="shortcut icon" href="ambulance.png" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
/* Full page styles */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
html {
overflow-y: scroll;
}
html::-webkit-scrollbar {
width: 9px;
transition: width 0.3s ease;
margin: 10px;
}
html::-webkit-scrollbar-thumb {
border-radius: 10px;
background: rgba(216, 216, 216, 0.74);
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
html::-webkit-scrollbar-thumb:window-inactive {
background: rgb(156, 156, 156);
}
/* Map container */
#map {
height: 90%;
width: 100%;
}
/* Header styles */
h1 {
text-align: center;
background-color: #4caf50;
color: white;
padding: 15px;
margin: 0;
}
/* 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>
<!-- Include the Google Maps JavaScript API -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCKR3agIMLtauzDhz4fCu3heww0BV_81H4" async
defer></script>
</head>
<body>
<!-- Header -->
<header>
<nav class="navbar">
<div class="navbar-logo">
<img src="./images/manageLogo.png"></img>
<h2 style="display: flex;">ambu<p style="color: #3DBDEC;">Flow</p></h2>
</div>
<ul class="navbar-links">
<li><a href="hospital.html">Dashboard</a></li>
<li><a href="manage.html">Manage Status</a></li>
<li><a href="driver.html">Manage Driver</a></li>
<li><a href="ambtracker.html">Manage Ambulance</a></li>
<li id="logout"><a href="#" onclick="logout()"><i class="fa-solid fa-right-from-bracket"></i></a></li>
</ul>
<div class="resp">
<button id="dropdown"><i class="fa-solid fa-bars"></i></button>
<li id="logout"><a href="#" onclick="logout()"><i class="fa-solid fa-right-from-bracket" style="color: white;"></i></a></li>
</div>
</nav>
</header>
<!-- Dropdown -->
<div class="dropdown-menu">
<ul class="navbar-links2">
<li><a href="hospital.html">Dashboard</a></li>
<li><a href="manage.html">Manage Status</a></li>
<li><a href="driver.html">Manage Driver</a></li>
<li><a href="ambtracker.html">Manage Ambulance</a></li>
</ul>
</div>
<!-- Map container -->
<div id="map"></div>
<!-- Loading Spinner -->
<div id="loadingSpinner">Loading...</div>
<!-- Script to load the map and track ambulance -->
<script>
let map, marker;
// Initial position of the ambulance (example coordinates)
const ambulancePosition = { lat: 28.7, lng: 77.1 }; // San Francisco
// Function to initialize the map
function initMap() {
loadingSpinner.style.display = "block"; // Show spinner
map = new google.maps.Map(document.getElementById("map"), {
center: ambulancePosition,
zoom: 15,
});
loadingSpinner.style.display = "none"; // Hide spinner after map is loaded
marker = new google.maps.Marker({
position: ambulancePosition,
map: map,
title: "Ambulance Location",
draggable: false,
animation: google.maps.Animation.DROP,
});
setInterval(updateAmbulancePosition, 5000);
}
// Function to simulate the update of the ambulance's GPS position
function updateAmbulancePosition() {
const newLat = ambulancePosition.lat + (Math.random() * 0.001 - 0.0005);
const newLng = ambulancePosition.lng + (Math.random() * 0.001 - 0.0005);
const newPosition = { lat: newLat, lng: newLng };
marker.setPosition(newPosition);
map.setCenter(newPosition);
}
// Initialize the map when the window loads
window.onload = initMap;
// Dropdown
let flag = false
document.getElementById('dropdown').addEventListener('click', () => {
const dropdown = document.querySelector('.dropdown-menu');
if (flag) {
dropdown.style.display = 'none';
flag = false;
} else {
dropdown.style.display = 'block';
flag = true;
}
});
function logout() {
const confirmLogout = confirm('Are you sure you want to logout?');
if (confirmLogout) {
localStorage.removeItem('userID');
localStorage.removeItem('JWTtoken');
window.location.href = 'index.html';
alert("Logged out successfully!");
}
}
</script>
</body>
</html>