From f370754d178f99c85975615a09eaaaa7a3b48a60 Mon Sep 17 00:00:00 2001
From: Halcy0nic <admin@halcyonic.us>
Date: Tue, 9 Jan 2024 18:04:36 -0700
Subject: [PATCH] Feat: Parsing decoded values for survey mode

---
 app.py                  | 20 +++++-----
 static/css/styles.css   | 21 +++++++++--
 templates/survey.html   | 73 ++++++++++++++++++++++++++++--------
 templates/tracking.html | 83 ++++++++++++++++++++---------------------
 4 files changed, 126 insertions(+), 71 deletions(-)

diff --git a/app.py b/app.py
index 0bbd8e1..7a54506 100644
--- a/app.py
+++ b/app.py
@@ -22,13 +22,6 @@ global_dataframe = pd.DataFrame(columns=['Device Name', 'Frequency', 'Signal Str
 frequency = lambda port: {'port1': 433, 'port2': 868,'port3': 915}.get(port, None)
 surveydata = {}
 
-
-import re
-import time
-
-import re
-import time
-
 def read_serial_data(port, ser, buffer):
     global surveydata
     rssi_pattern = r"RSSI: (-?\d+)"
@@ -53,8 +46,16 @@ def read_serial_data(port, ser, buffer):
 
                 # Update dictionary only if both RSSI and Decoded Value are found
                 if rssi is not None and decoded_value is not None:
-                    key = f'Raw LoRa Device {frequency(port)} MHz'
-                    surveydata[key] = [frequency(port), rssi, decoded_value]
+                    freq = frequency(port)
+                    key = f'Raw LoRa Device {freq} MHz'
+                    
+                    # Initialize the list for the frequency if not already done
+                    if key not in surveydata:
+                        surveydata[key] = []
+
+                    # Append the new values to the list for this frequency
+                    surveydata[key].append([freq, rssi, decoded_value])
+
                     # Reset rssi and decoded_value for next packet
                     rssi = None
                     decoded_value = None
@@ -77,6 +78,7 @@ def read_serial_data(port, ser, buffer):
 
 
 
+
 def connect_serial(port,frequency):
     global ser1
     global ser2 
diff --git a/static/css/styles.css b/static/css/styles.css
index 41da4c6..d01bdbc 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -11066,10 +11066,25 @@ section.resume-section .resume-section-content {
 
 /* Styling for the table */
 .scrollable-table {
-  max-height: 300px;
-  overflow-y: auto;
-  display: block;
+  width: 100%;
+  overflow-y: auto; /* Enable vertical scrolling */
+  max-height: 500px; /* Adjust the height as needed */
 }
+#data-table {
+  width: 100%;
+  font-size: 1.1em;
+  border-collapse: collapse; /* Optional: for border styling */
+}
+#data-table thead th {
+  position: sticky;
+  top: 0;
+  background-color: #fff; /* Or any other background color */
+}
+#data-table th, #data-table td {
+  padding: 10px;
+  border: 1px solid #ddd; /* Optional: for border styling */
+}
+
 table {
   width: 100%;
   border-collapse: collapse;
diff --git a/templates/survey.html b/templates/survey.html
index 9fdf426..84ddffb 100644
--- a/templates/survey.html
+++ b/templates/survey.html
@@ -56,16 +56,17 @@
                                     <th>Device Name</th>
                                     <th>Frequency</th>
                                     <th>Signal Strength</th>
-                                    <th>Recovered Plaintext</th>
+                                    <th>Decoded Values</th>
                                 </tr>
                             </thead>
                             <tbody>
                                 <!-- Rows will be inserted here -->
                             </tbody>
-                        </table>
+                        </table>                                              
                     </div>
                 
                     <script>
+                        let expandedRows = {};
                         function updateTableData() {
                             fetch('/get_table_data')
                                 .then(response => response.json())
@@ -73,25 +74,65 @@
                                     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();
+                                        let mainRow = tableBody.insertRow();
+                                        let cell1 = mainRow.insertCell();
+                                        let cell2 = mainRow.insertCell();
+                                        let cell3 = mainRow.insertCell();
+                                        let cell4 = mainRow.insertCell();
                                         cell1.innerHTML = key;
-                                        cell2.innerHTML = data[key][0];
-                                        cell3.innerHTML = data[key][1];
-                                        cell4.innerHTML = data[key][2];
+                                        cell2.innerHTML = data[key][0][0]; // Frequency (from the first entry)
+                                        cell3.innerHTML = data[key][0][1]; // Signal Strength (from the first entry)
+
+                                        // Create a Bootstrap styled button
+                                        let expandBtn = document.createElement('button');
+                                        expandBtn.classList.add('btn', 'btn-secondary', 'btn-sm'); // Bootstrap button classes
+                                        expandBtn.innerHTML = 'Show Values';
+                                        expandBtn.onclick = function() {
+                                            let deviceKey = key; // Capture the current device key
+                                            let isExpanded = !expandedRows[deviceKey]; // Toggle the expanded state
+
+                                            // Show or hide the expandable rows
+                                            let nextRow = mainRow.nextSibling;
+                                            while (nextRow && nextRow.classList.contains('expandable-row')) {
+                                                nextRow.style.display = isExpanded ? 'table-row' : 'none';
+                                                nextRow = nextRow.nextSibling;
+                                            }
+
+                                            // Update the button text and expandedRows object
+                                            expandBtn.innerHTML = isExpanded ? 'Hide Values' : 'Show Values';
+                                            expandedRows[deviceKey] = isExpanded;
+                                        };
+                                        cell4.appendChild(expandBtn);
+                                        cell4.style.textAlign = 'center'; // Center align the button
+
+                                        // Add expandable rows for each decoded value
+                                        data[key].forEach(entry => {
+                                            let expandableRow = tableBody.insertRow();
+                                            expandableRow.classList.add('expandable-row');
+                                            expandableRow.style.display = 'none'; // Initially hidden
+                                            let cell = expandableRow.insertCell();
+                                            cell.colSpan = "4";
+                                            cell.innerHTML = `Decoded Value: ${entry[2]}`;
+                                        });
+
+                                        if (expandedRows[key]) {
+                                            let nextRow = mainRow.nextSibling;
+                                            while (nextRow && nextRow.classList.contains('expandable-row')) {
+                                                nextRow.style.display = 'table-row';
+                                                nextRow = nextRow.nextSibling;
+                                            }
+                                        }
                                     }
                                 })
                                 .catch(error => console.error('Error:', error));
                         }
-                    
-                        // Initial update of the table
-                        updateTableData();
-                    
-                        // Periodically update the table every 30 seconds (30000 milliseconds)
-                        setInterval(updateTableData, 30000);
+
+                            // Initial update of the table
+                            updateTableData();
+
+                            // Periodically update the table every 30 seconds (30000 milliseconds)
+                            setInterval(updateTableData, 30000);
+
                     </script>
                     
             </section>
diff --git a/templates/tracking.html b/templates/tracking.html
index ecf0e5c..ed48ffe 100644
--- a/templates/tracking.html
+++ b/templates/tracking.html
@@ -71,9 +71,7 @@
                         <br>
                         <!-- Add a Clear Selection button with a CSS class -->
                         <button id="clear-selection-button" class="center-button" style="display: none;">Clear Filter</button>
-                        
-                        <br>
-                        <div id="selected-data"></div>
+
                         <br>
                         <script>
                             let selectedDeviceName = null; // Global variable to store the selected device name
@@ -83,7 +81,6 @@
                                 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
 
@@ -91,32 +88,22 @@
 
                                         for (let key in data) {
                                             let row = tableBody.insertRow();
-                                            row.addEventListener('click', function () {
-                                                // Reset all rows
-                                                const allRows = tableBody.getElementsByTagName('tr');
-                                                for (let i = 0; i < allRows.length; i++) {
-                                                    allRows[i].classList.remove('hidden-row', 'selected-row');
-                                                }
-
-                                                // Highlight and show the clicked 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
+                                            row.addEventListener('click', function() {
+                                                // Handle row click event for selection
+                                                handleRowSelection(row, key);
                                             });
 
                                             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];
+                                            cell1.innerHTML = key; // Device Name
+                                            
+                                            // Assuming that the latest data is the most relevant
+                                            let latestData = data[key][data[key].length - 1];
+                                            cell2.innerHTML = latestData[0]; // Frequency
+                                            cell3.innerHTML = latestData[1]; // Signal Strength
 
-                                            // Apply hiding logic
+                                            // Apply hiding logic based on selection
                                             if (isRowSelected) {
                                                 if (key !== selectedDeviceName) {
                                                     row.classList.add('hidden-row');
@@ -131,22 +118,36 @@
                                     .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 = '';
+                            function handleRowSelection(row, key) {
+                                // Reset all rows
+                                const tableBody = document.getElementById('data-table').getElementsByTagName('tbody')[0];
+                                const allRows = tableBody.getElementsByTagName('tr');
+                                for (let i = 0; i < allRows.length; i++) {
+                                    allRows[i].classList.remove('hidden-row', 'selected-row');
                                 }
+
+                                // Highlight and show the clicked 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
                             }
+
+                            // ... rest of your existing code for updateSelectedDataDisplay, clearButton event listener, etc.
+
+                            // Initial update of the table
+                            updateTableData();
+
+                            // Periodically update the table every second
+                            setInterval(updateTableData, 1000);
+
+
+
+
                         
                             const clearButton = document.getElementById('clear-selection-button');
                             clearButton.addEventListener('click', function () {
@@ -169,11 +170,7 @@
                                 updateSelectedDataDisplay(); // Clear the selected data display
                             });
                         
-                            // Initial update of the table
-                            updateTableData();
-                        
-                            // Periodically update the table every second
-                            setInterval(updateTableData, 1000);
+
                         </script>