mirror of
https://github.com/skinnyrad/Lora-Scanner.git
synced 2026-08-02 23:02:27 +02:00
Halcy0nic
187 lines
10 KiB
HTML
187 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
|
<meta name="description" content="" />
|
|
<meta name="author" content="" />
|
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.1.2/socket.io.js"></script>
|
|
<title>LoRa Scanner</title>
|
|
<link rel="icon" type="image/x-icon" href="assets/img/favicon.ico" />
|
|
<!-- Font Awesome icons (free version)-->
|
|
<script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
|
|
<!-- Google fonts-->
|
|
<link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:500,700" rel="stylesheet" type="text/css" />
|
|
<link href="https://fonts.googleapis.com/css?family=Muli:400,400i,800,800i" rel="stylesheet" type="text/css" />
|
|
<!-- Core theme CSS (includes Bootstrap)-->
|
|
<link href="static/css/styles.css" rel="stylesheet" />
|
|
<!-- Include SweetAlert2 CSS -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@10">
|
|
|
|
<!-- Include SweetAlert2 JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
|
</head>
|
|
<body id="page-top">
|
|
<!-- Navigation-->
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">
|
|
<a class="navbar-brand js-scroll-trigger" href="#page-top">
|
|
<span class="d-block d-lg-none">LoRa Scanner</span>
|
|
<span class="d-none d-lg-block"><img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="static/assets/img/profile.jpg" alt="..." /></span>
|
|
</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
|
|
<div class="collapse navbar-collapse" id="navbarResponsive">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="/">Home</a></li>
|
|
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="/analysis">Analysis Mode</a></li>
|
|
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="/survey">Survey Mode</a></li>
|
|
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#">Tracking Mode</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
<!-- Page Content-->
|
|
<div class="container-fluid p-0">
|
|
<!-- About-->
|
|
<section class="resume-section" id="about">
|
|
<div class="resume-section-content">
|
|
<h1 class="mb-0" style="text-align: center;">
|
|
Tracking Mode
|
|
</h1>
|
|
<br>
|
|
<h2 class="lead mb-5" style="text-align: center;">Select A Device You Would Like To Track</h2>
|
|
<br>
|
|
<div class="scrollable-table">
|
|
<table id="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Device Name</th>
|
|
<th>Frequency</th>
|
|
<th>Signal Strength</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Rows will be inserted here -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<br>
|
|
<!-- Add a Clear Selection button with a CSS class -->
|
|
<button id="clear-selection-button" class="center-button" style="display: none;">Clear Filter</button>
|
|
|
|
<style>
|
|
/* CSS styles for centering the button */
|
|
.center-button {
|
|
display: block;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
|
|
/* CSS styles to hide rows */
|
|
.hidden-row {
|
|
display: none;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
let selectedDeviceName = null; // Global variable to store the selected device name
|
|
let dataCache = {}; // Cache for storing fetched data
|
|
|
|
function updateTableData() {
|
|
fetch('/get_table_data')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
dataCache = data; // Update the data cache
|
|
const tableBody = document.getElementById('data-table').getElementsByTagName('tbody')[0];
|
|
tableBody.innerHTML = ''; // Clear existing table rows
|
|
for (let key in data) {
|
|
let row = tableBody.insertRow();
|
|
row.addEventListener('click', function () {
|
|
// Hide all rows
|
|
const allRows = tableBody.getElementsByTagName('tr');
|
|
for (let i = 0; i < allRows.length; i++) {
|
|
allRows[i].classList.add('hidden-row');
|
|
}
|
|
|
|
// Show the clicked row
|
|
row.classList.remove('hidden-row');
|
|
row.classList.add('selected-row');
|
|
|
|
// Display the "Clear Filter" button
|
|
const clearButton = document.getElementById('clear-selection-button');
|
|
clearButton.style.display = 'block';
|
|
|
|
selectedDeviceName = key; // Update the global variable with the selected device name
|
|
updateSelectedDataDisplay(); // Update the selected data display
|
|
});
|
|
|
|
if (Object.keys(data).indexOf(key) > 0) {
|
|
row.classList.add('hidden-row');
|
|
}
|
|
|
|
let cell1 = row.insertCell();
|
|
let cell2 = row.insertCell();
|
|
let cell3 = row.insertCell();
|
|
cell1.innerHTML = key;
|
|
cell2.innerHTML = data[key][0];
|
|
cell3.innerHTML = data[key][1];
|
|
}
|
|
|
|
updateSelectedDataDisplay(); // Update the selected data display after refreshing the table
|
|
})
|
|
.catch(error => console.error('Error:', error));
|
|
}
|
|
|
|
function updateSelectedDataDisplay() {
|
|
const selectedDataDiv = document.getElementById('selected-data');
|
|
if (selectedDeviceName !== null && selectedDeviceName in dataCache) {
|
|
const frequency = dataCache[selectedDeviceName][0];
|
|
const signalStrength = dataCache[selectedDeviceName][1];
|
|
selectedDataDiv.innerHTML = `
|
|
Device Name: ${selectedDeviceName}<br>
|
|
Frequency: ${frequency}<br>
|
|
Signal Strength: ${signalStrength}<br>
|
|
`;
|
|
} else {
|
|
selectedDataDiv.innerHTML = '';
|
|
}
|
|
}
|
|
|
|
const clearButton = document.getElementById('clear-selection-button');
|
|
clearButton.addEventListener('click', function () {
|
|
const tableBody = document.getElementById('data-table').getElementsByTagName('tbody')[0];
|
|
const selectedRow = tableBody.getElementsByClassName('selected-row')[0];
|
|
if (selectedRow) {
|
|
selectedRow.classList.remove('selected-row');
|
|
}
|
|
|
|
// Show all rows
|
|
const allRows = tableBody.getElementsByTagName('tr');
|
|
for (let i = 0; i < allRows.length; i++) {
|
|
allRows[i].classList.remove('hidden-row');
|
|
}
|
|
|
|
// Hide the "Clear Filter" button
|
|
clearButton.style.display = 'none';
|
|
|
|
selectedDeviceName = null; // Reset the global variable when selection is cleared
|
|
updateSelectedDataDisplay(); // Clear the selected data display
|
|
});
|
|
|
|
// Initial update of the table
|
|
updateTableData();
|
|
|
|
// Periodically update the table every second
|
|
setInterval(updateTableData, 1000);
|
|
</script>
|
|
|
|
|
|
<!-- Add a section to display selected data -->
|
|
<div id="selected-data"></div>
|
|
|
|
</section>
|
|
<hr class="m-0" />
|
|
|
|
</body>
|
|
</html>
|