From 862ee809a7e73ce90e8623b8b8e01c68e964d95b Mon Sep 17 00:00:00 2001
From: Halcy0nic <admin@halcyonic.us>
Date: Mon, 8 Jan 2024 17:40:26 -0700
Subject: [PATCH] Feat: Adding RSSI to tracking functionality

---
 templates/survey.html   | 45 ++++++++++++++++++++--------------
 templates/tracking.html | 53 ++++++++++++++++++++++++++++++++++++-----
 2 files changed, 74 insertions(+), 24 deletions(-)
diff --git a/templates/survey.html b/templates/survey.html
index 4ff4db2..9fdf426 100644
--- a/templates/survey.html
+++ b/templates/survey.html
@@ -66,25 +66,34 @@
                     </div>
                 
                     <script>
-                        // Fetch data from Flask route
-                        fetch('/get_table_data')
-                            .then(response => response.json())
-                            .then(data => {
-                                const tableBody = document.getElementById('data-table').getElementsByTagName('tbody')[0];
-                                for (let key in data) {
-                                    let row = tableBody.insertRow();
-                                    let cell1 = row.insertCell();
-                                    let cell2 = row.insertCell();
-                                    let cell3 = row.insertCell();
-                                    let cell4 = row.insertCell();
-                                    cell1.innerHTML = key;
-                                    cell2.innerHTML = data[key][0];
-                                    cell3.innerHTML = data[key][1];
-                                    cell4.innerHTML = data[key][2];
-                                }
-                            })
-                            .catch(error => console.error('Error:', error));
+                        function updateTableData() {
+                            fetch('/get_table_data')
+                                .then(response => response.json())
+                                .then(data => {
+                                    const tableBody = document.getElementById('data-table').getElementsByTagName('tbody')[0];
+                                    tableBody.innerHTML = ''; // Clear existing table rows
+                                    for (let key in data) {
+                                        let row = tableBody.insertRow();
+                                        let cell1 = row.insertCell();
+                                        let cell2 = row.insertCell();
+                                        let cell3 = row.insertCell();
+                                        let cell4 = row.insertCell();
+                                        cell1.innerHTML = key;
+                                        cell2.innerHTML = data[key][0];
+                                        cell3.innerHTML = data[key][1];
+                                        cell4.innerHTML = data[key][2];
+                                    }
+                                })
+                                .catch(error => console.error('Error:', error));
+                        }
+                    
+                        // Initial update of the table
+                        updateTableData();
+                    
+                        // Periodically update the table every 30 seconds (30000 milliseconds)
+                        setInterval(updateTableData, 30000);
                     </script>
+                    
             </section>
             <hr class="m-0" />
             
diff --git a/templates/tracking.html b/templates/tracking.html
index 2b8001a..c5295c0 100644
--- a/templates/tracking.html
+++ b/templates/tracking.html
@@ -20,7 +20,7 @@
 
         <!-- Include SweetAlert2 JS -->
         <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
-        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 
     </head>
     <body id="page-top">
@@ -35,8 +35,8 @@
                 <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>
+                    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#">Survey Mode</a></li>
+                    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="/tracking">Tracking Mode</a></li>
                 </ul>
             </div>
         </nav>
@@ -45,11 +45,52 @@
             <!-- About-->
             <section class="resume-section" id="about">
                 <div class="resume-section-content">
-                    <h1 class="mb-0">
+                    <h1 class="mb-0" style="text-align: center;">
                         Tracking Mode
                     </h1>
-                    <h2 class="lead mb-5">Skinny Research and Development</h2>
-                </div>
+                    <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>
+                
+                    <script>
+                        function updateTableData() {
+                            fetch('/get_table_data')
+                                .then(response => response.json())
+                                .then(data => {
+                                    const tableBody = document.getElementById('data-table').getElementsByTagName('tbody')[0];
+                                    tableBody.innerHTML = ''; // Clear existing table rows
+                                    for (let key in data) {
+                                        let row = tableBody.insertRow();
+                                        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];
+                                    }
+                                })
+                                .catch(error => console.error('Error:', error));
+                        }
+                    
+                        // Initial update of the table
+                        updateTableData();
+                    
+                        // Periodically update the table every second
+                        setInterval(updateTableData, 1000);
+                    </script>
+                    
             </section>
             <hr class="m-0" />
             
