From 5aeec505dd8749bd8c5c66cfef92f459307b053f Mon Sep 17 00:00:00 2001
From: Halcy0nic <admin@halcyonic.us>
Date: Wed, 31 Jan 2024 12:24:48 -0700
Subject: [PATCH] Feat: Adding autoscroll button

---
 templates/analysis.html | 62 +++++++++++++++++++++------------------
 templates/tracking.html | 65 ++++++++++++++++++++---------------------
 2 files changed, 65 insertions(+), 62 deletions(-)

diff --git a/templates/analysis.html b/templates/analysis.html
index dff10fd..e9de866 100644
--- a/templates/analysis.html
+++ b/templates/analysis.html
@@ -68,6 +68,8 @@
                                 <button class="styled-button" onclick="promptUser433()">Connect Serial Port</button>
                                 <button class="disconnect-button" onclick="deleteSerial433()">Disconnect Serial Port</button>
                                 <button class="transmit-button" onclick="transmit433()">Transmit Data</button><br>
+                                <input type="checkbox" id="autoscroll-port1" checked>
+                                <label for="autoscroll-port1">Autoscroll</label>
                                 <p id="status-label433" style="text-align: center">Status: Checking...</p>
                                 <div class="indicator-container">
                                     <div id="indicator433" class="indicator"></div>
@@ -124,9 +126,12 @@
                                 socket.on('serial_data_port1', function(data) {
                                     var serialDataDiv = document.getElementById('serial-data-port1');
                                     serialDataDiv.innerHTML += data.data + '<br>';
-                                    // Scroll to the bottom for new data
-                                    //serialDataDiv.scrollTop = serialDataDiv.scrollHeight;
+                                    var autoscrollCheckbox = document.getElementById('autoscroll-port1');
+                                    if (autoscrollCheckbox.checked) {
+                                        serialDataDiv.scrollTop = serialDataDiv.scrollHeight;
+                                    }
                                 });
+
                                 </script>
 
                                 <script>
@@ -248,6 +253,8 @@
                                 <button class="styled-button" onclick="promptUser868()">Connect Serial Port</button>
                                 <button class="disconnect-button" onclick="deleteSerial868()">Disconnect Serial Port</button>
                                 <button class="transmit-button" onclick="transmit868()">Transmit Data</button><br>
+                                <input type="checkbox" id="autoscroll-port2" checked>
+                                <label for="autoscroll-port2">Autoscroll</label>
                                 <p id="status-label868" style="text-align: center">Status: Checking...</p>
                                 <div class="indicator-container">
                                     <div id="indicator868" class="indicator"></div>
@@ -288,39 +295,29 @@
                                 // Periodically check and update the indicator (e.g., every 5 seconds)
                                 setInterval(updateIndicator868, 5000);
                             </script>
-                            <script type="text/javascript">
-                                var socket = io.connect('http://' + document.domain + ':' + location.port);
-                            
-                                socket.on('serial_data_port1', function(data) {
-                                var serialDataDiv = document.getElementById('serial-data-port1');
-                                if (data.data instanceof Array) {
-                                    data.data.forEach(function(line) {
-                                        serialDataDiv.innerHTML += line + '<br>';
-                                    });
-                                } 
-                                // Scroll to the bottom for new data
-                                //serialDataDiv.scrollTop = serialDataDiv.scrollHeight;
-                            });
-
-                                </script>
 
                         <script>
                             // For port2
+                            var socket = io.connect('http://' + document.domain + ':' + location.port);
+
                             socket.on('initial_serial_data_port2', function(data) {
-                                var serialDataDiv = document.getElementById('serial-data-port2');
+                                var serialDataDiv2 = document.getElementById('serial-data-port2');
                                 data.data.forEach(function(line) {
-                                    serialDataDiv.innerHTML += line + '<br>';
+                                    serialDataDiv2.innerHTML += line + '<br>';
                                 });
                                 // Scroll to the bottom for new data
                                 //serialDataDiv.scrollTop = serialDataDiv.scrollHeight;
                             });
                         
                             socket.on('serial_data_port2', function(data) {
-                                var serialDataDiv = document.getElementById('serial-data-port2');
-                                serialDataDiv.innerHTML += data.data + '<br>';
-                                // Scroll to the bottom for new data
-                                //serialDataDiv.scrollTop = serialDataDiv.scrollHeight;
+                                var serialDataDiv2 = document.getElementById('serial-data-port2');
+                                serialDataDiv2.innerHTML += data.data + '<br>';
+                                var autoscrollCheckbox2 = document.getElementById('autoscroll-port2');
+                                if (autoscrollCheckbox2.checked) {
+                                    serialDataDiv2.scrollTop = serialDataDiv2.scrollHeight;
+                                }
                             });
+
                         </script>
 
                         <script>
@@ -443,6 +440,8 @@
                                 <button class="styled-button" onclick="promptUser915()">Connect Serial Port</button>
                                 <button class="disconnect-button" onclick="deleteSerial915()">Disconnect Serial Port</button>
                                 <button class="transmit-button" onclick="transmit915()">Transmit Data</button><br>
+                                <input type="checkbox" id="autoscroll-port3" checked>
+                                <label for="autoscroll-port3">Autoscroll</label>
                                 <p id="status-label915" style="text-align: center">Status: Checking...</p>
                                 <div class="indicator-container">
                                     <div id="indicator915" class="indicator"></div>
@@ -485,21 +484,26 @@
                         </script>
                         <script>
                             // For port3
+                            var socket = io.connect('http://' + document.domain + ':' + location.port);
+
                             socket.on('initial_serial_data_port3', function(data) {
-                                var serialDataDiv = document.getElementById('serial-data-port3');
+                                var serialDataDiv3 = document.getElementById('serial-data-port3');
                                 data.data.forEach(function(line) {
-                                    serialDataDiv.innerHTML += line + '<br>';
+                                    serialDataDiv3.innerHTML += line + '<br>';
                                 });
                                 // Scroll to the bottom for new data
                                 //serialDataDiv.scrollTop = serialDataDiv.scrollHeight;
                             });
                         
                             socket.on('serial_data_port3', function(data) {
-                                var serialDataDiv = document.getElementById('serial-data-port3');
-                                serialDataDiv.innerHTML += data.data + '<br>';
-                                // Scroll to the bottom for new data
-                                //serialDataDiv.scrollTop = serialDataDiv.scrollHeight;
+                                var serialDataDiv3 = document.getElementById('serial-data-port3');
+                                serialDataDiv3.innerHTML += data.data + '<br>';
+                                var autoscrollCheckbox3 = document.getElementById('autoscroll-port3');
+                                if (autoscrollCheckbox3.checked) {
+                                    serialDataDiv3.scrollTop = serialDataDiv3.scrollHeight;
+                                }
                             });
+
                         </script>
 
                         <script>
diff --git a/templates/tracking.html b/templates/tracking.html
index 21cfa13..0c44e8e 100644
--- a/templates/tracking.html
+++ b/templates/tracking.html
@@ -198,6 +198,8 @@
                                 <button class="disconnect-button" onclick="deleteSerial433()">Disconnect Serial Port</button>
                                 <button class="transmit-button" onclick="transmit433()">Start Beacon</button>
                                 <button class="disconnect-button" onclick="confirmStopTransmission433()">Stop Beacon</button><br>
+                                <input type="checkbox" id="autoscroll-port1" checked>
+                                <label for="autoscroll-port1">Autoscroll</label>
                                 <p id="status-label433" style="text-align: center">Status: Checking...</p>
                                 <div class="indicator-container">
                                     <div id="indicator433" class="indicator"></div>
@@ -254,9 +256,12 @@
                                 socket.on('serial_data_port1', function(data) {
                                     var serialDataDiv = document.getElementById('serial-data-port1');
                                     serialDataDiv.innerHTML += data.data + '<br>';
-                                    // Scroll to the bottom for new data
-                                    //serialDataDiv.scrollTop = serialDataDiv.scrollHeight;
+                                    var autoscrollCheckbox = document.getElementById('autoscroll-port1');
+                                    if (autoscrollCheckbox.checked) {
+                                        serialDataDiv.scrollTop = serialDataDiv.scrollHeight;
+                                    }
                                 });
+
                                 </script>
 
                                 <script>
@@ -429,6 +434,8 @@
                                 <button class="disconnect-button" onclick="deleteSerial868()">Disconnect Serial Port</button>
                                 <button class="transmit-button" onclick="transmit868()">Start Beacon</button>
                                 <button class="disconnect-button" onclick="confirmStopTransmission868()">Stop Beacon</button><br>
+                                <input type="checkbox" id="autoscroll-port2" checked>
+                                <label for="autoscroll-port2">Autoscroll</label>
                                 <p id="status-label868" style="text-align: center">Status: Checking...</p>
                                 <div class="indicator-container">
                                     <div id="indicator868" class="indicator"></div>
@@ -469,39 +476,26 @@
                                 // Periodically check and update the indicator (e.g., every 5 seconds)
                                 setInterval(updateIndicator868, 5000);
                             </script>
-                            <script type="text/javascript">
-                                var socket = io.connect('http://' + document.domain + ':' + location.port);
-                            
-                                socket.on('serial_data_port1', function(data) {
-                                var serialDataDiv = document.getElementById('serial-data-port1');
-                                if (data.data instanceof Array) {
-                                    data.data.forEach(function(line) {
-                                        serialDataDiv.innerHTML += line + '<br>';
-                                    });
-                                } 
-                                // Scroll to the bottom for new data
-                                //serialDataDiv.scrollTop = serialDataDiv.scrollHeight;
-                            });
-
-                                </script>
 
                         <script>
                             // For port2
+                            var socket = io.connect('http://' + document.domain + ':' + location.port);
                             socket.on('initial_serial_data_port2', function(data) {
-                                var serialDataDiv = document.getElementById('serial-data-port2');
+                                var serialDataDiv2 = document.getElementById('serial-data-port2');
                                 data.data.forEach(function(line) {
-                                    serialDataDiv.innerHTML += line + '<br>';
+                                    serialDataDiv2.innerHTML += line + '<br>';
                                 });
-                                // Scroll to the bottom for new data
-                                //serialDataDiv.scrollTop = serialDataDiv.scrollHeight;
                             });
                         
                             socket.on('serial_data_port2', function(data) {
-                                var serialDataDiv = document.getElementById('serial-data-port2');
-                                serialDataDiv.innerHTML += data.data + '<br>';
-                                // Scroll to the bottom for new data
-                                //serialDataDiv.scrollTop = serialDataDiv.scrollHeight;
+                                var serialDataDiv2 = document.getElementById('serial-data-port2');
+                                serialDataDiv2.innerHTML += data.data + '<br>';
+                                var autoscrollCheckbox2 = document.getElementById('autoscroll-port2');
+                                if (autoscrollCheckbox2.checked) {
+                                    serialDataDiv2.scrollTop = serialDataDiv2.scrollHeight;
+                                }
                             });
+
                         </script>
 
                         <script>
@@ -675,6 +669,8 @@
                                 <button class="disconnect-button" onclick="deleteSerial915()">Disconnect Serial Port</button>
                                 <button class="transmit-button" onclick="transmit915()">Start Beacon</button>
                                 <button class="disconnect-button" onclick="confirmStopTransmission915()">Stop Beacon</button><br>
+                                <input type="checkbox" id="autoscroll-port3" checked>
+                                <label for="autoscroll-port3">Autoscroll</label>
                                 <p id="status-label915" style="text-align: center">Status: Checking...</p>
                                 <div class="indicator-container">
                                     <div id="indicator915" class="indicator"></div>
@@ -717,21 +713,24 @@
                         </script>
                         <script>
                             // For port3
+                            var socket = io.connect('http://' + document.domain + ':' + location.port);
                             socket.on('initial_serial_data_port3', function(data) {
-                                var serialDataDiv = document.getElementById('serial-data-port3');
+                                var serialDataDiv3 = document.getElementById('serial-data-port3');
                                 data.data.forEach(function(line) {
-                                    serialDataDiv.innerHTML += line + '<br>';
+                                    serialDataDiv3.innerHTML += line + '<br>';
                                 });
-                                // Scroll to the bottom for new data
-                                //serialDataDiv.scrollTop = serialDataDiv.scrollHeight;
+
                             });
                         
                             socket.on('serial_data_port3', function(data) {
-                                var serialDataDiv = document.getElementById('serial-data-port3');
-                                serialDataDiv.innerHTML += data.data + '<br>';
-                                // Scroll to the bottom for new data
-                                //serialDataDiv.scrollTop = serialDataDiv.scrollHeight;
+                                var serialDataDiv3 = document.getElementById('serial-data-port3');
+                                serialDataDiv3.innerHTML += data.data + '<br>';
+                                var autoscrollCheckbox3 = document.getElementById('autoscroll-port3');
+                                if (autoscrollCheckbox3.checked) {
+                                    serialDataDiv3.scrollTop = serialDataDiv3.scrollHeight;
+                                }
                             });
+
                         </script>
 
                         <script>