updates for 12/03/2025

server_api/templates/board.html

@@ -107,11 +107,11 @@
             </div>
             <div class="col-md-6">
                 <h3>Input Status</h3>
-                <ul class="list-group">
+                <ul class="list-group" id="input-status-list">
                     {% for i in range(4) %}
                     <li class="list-group-item d-flex justify-content-between align-items-center">
                         Input {{ i + 1 }}
-                        <span class="badge badge-{{ 'success' if input_status[i] == 'on' else 'secondary' }}">{{ input_status[i] }}</span>
+                        <span class="badge badge-{{ 'success' if input_status[i] == 'on' else 'secondary' }}" id="input-status-{{ i + 1 }}">{{ input_status[i] }}</span>
                     </li>
                     {% endfor %}
                 </ul>
@@ -158,7 +158,7 @@
                 .then(data => {
                     const logList = document.getElementById('log-list');
                     logList.innerHTML = '';
-                    data.logs.reverse().forEach(log => {  // Reverse the order to show newest first
+                    data.logs.forEach(log => {  // Keep the order as newest first
                         const logItem = document.createElement('li');
                         logItem.className = 'list-group-item';
                         logItem.innerHTML = `<strong>${log.timestamp}:</strong> ${log.message}`;
@@ -169,6 +169,19 @@
                 .catch(error => console.error('Error fetching logs:', error));
         }
 
+        function fetchInputStatus() {
+            fetch(`/board/{{ hostname }}/input_status`)
+                .then(response => response.json())
+                .then(data => {
+                    for (let i = 0; i < 4; i++) {
+                        const inputStatus = document.getElementById(`input-status-${i + 1}`);
+                        inputStatus.className = `badge badge-${data.input_status[i] === 'on' ? 'success' : 'secondary'}`;
+                        inputStatus.innerText = data.input_status[i];
+                    }
+                })
+                .catch(error => console.error('Error fetching input status:', error));
+        }
+
         function startTimer() {
             let timer = 5;
             const timerElement = document.getElementById('timer');
@@ -179,6 +192,7 @@
                 } else {
                     timer = 5;
                     fetchLogs();
+                    fetchInputStatus();
                 }
             }, 1000);
         }