-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgeofencingPage(restricted).html
119 lines (116 loc) · 5.21 KB
/
geofencingPage(restricted).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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Geofencing and Logs</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="">
<link rel="stylesheet" href="css/geofencingPage(restricted).css">
</head>
<body>
<header>
<div class="logo">
<img src="images/logo.png" alt="Logo">
</div>
<nav class="link-container">
<a href="home.html" class="link-button">Home</a>
<a href="currentLocation.html" class="link-button">Real-Time Locations</a>
<a href="HistoricalData.html" class="link-button">Historical Data</a>
<a href="mappedHistory.html" class="link-button">Mapped History</a>
<div class="dropdown1">
<button class="dropbtn1">Geofencing</button>
<div class="dropdown-content1">
<a href="geofencing.html">Testing</a>
<a href="geofencingPage(restricted).html">Restricted Access</a>
</div>
</div>
<a href="CustomRegions.html" class="link-button">Define Custom Region</a>
</nav>
</header>
<div class="wave"></div>
<div id="login-overlay">
<div class="login-container">
<h2>Login</h2>
<input type="text" id="username" placeholder="Username">
<input type="password" id="password" placeholder="Password">
<button onclick="login()">Login</button>
</div>
</div>
<div class="content">
<h1>Geofencing and Logs</h1>
<div id="filter-container" class="button-container">
<div class="dropdown">
<button>State</button>
<div id="state-select" class="dropdown-content">
<!-- Checkboxes will be added here dynamically -->
</div>
</div>
<div class="dropdown">
<button>District</button>
<div id="district-select" class="dropdown-content">
<!-- Checkboxes will be added here dynamically -->
</div>
</div>
<div class="dropdown">
<button>Custom Region</button>
<div id="region-select" class="dropdown-content">
<!-- Checkboxes will be added here dynamically -->
</div>
</div>
<button id="lock-btn" class="lock-btn" onclick="toggleLockFilters()">Lock Filters</button>
</div>
<div id="map"></div>
<div id="logs-section">
<h2>Devices Currently Inside Geofenced Area</h2>
<div class="table-container">
<table id="filteredLocationsTable">
<thead>
<tr>
<th onclick="sortTable(0, 'filteredLocationsTable')">Device ID</th>
<th onclick="sortTable(1, 'filteredLocationsTable')">Time</th>
<th onclick="sortTable(2, 'filteredLocationsTable')">Latitude</th>
<th onclick="sortTable(3, 'filteredLocationsTable')">Longitude</th>
<th onclick="sortTable(4, 'filteredLocationsTable')">District</th>
<th onclick="sortTable(5, 'filteredLocationsTable')">State</th>
<th onclick="sortTable(6, 'filteredLocationsTable')">Status</th>
</tr>
</thead>
<tbody id="filteredLocationsBody">
<!-- Filtered locations will be inserted here -->
</tbody>
</table>
</div>
<div class="line-break"></div>
<h2>Current Locations Table</h2>
<div class="table-container">
<table id="deviceTable">
<thead>
<tr>
<th>Device ID</th>
<th>Time</th>
<th>Latitude</th>
<th>Longitude</th>
<th>District</th>
<th>State</th>
<th>Status</th>
<th>Toggle</th>
</tr>
</thead>
<tbody id="deviceTableBody">
<!-- Device data will be inserted here -->
</tbody>
</table>
</div>
<div class="line-break"></div>
<h2>Device Logs</h2>
<div id="deviceLogs">
<!-- Device logs will be inserted here -->
</div>
</div>
</div>
<script src="https://unpkg.com/@mapbox/leaflet-pip@latest/leaflet-pip.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/email.min.js"></script>
<script src="geofencingPage(restricted).js"></script>
</body>
</html>