From 4f74bf8177e47d299d08325d2c093a6ab6a8e52e Mon Sep 17 00:00:00 2001
From: brian-mckeown <bmckeown2011@gmail.com>
Date: Sun, 1 Oct 2023 12:37:22 -0400
Subject: [PATCH] frequency info and collapsible sections added

---
 src/main/resources/static/index.html    | 32 +++++++++++++++++++++++--
 src/main/resources/static/script.js     |  1 +
 src/main/resources/static/vanilla-js.js | 30 +++++++++++++++++++++++
 3 files changed, 61 insertions(+), 2 deletions(-)

diff --git a/src/main/resources/static/index.html b/src/main/resources/static/index.html
index c352bdc..2e60495 100644
--- a/src/main/resources/static/index.html
+++ b/src/main/resources/static/index.html
@@ -206,8 +206,12 @@ <h3 class="mb-4">{{airportInfo.name}}</h3>
 
                         <!-- Weather section -->
                             <div class="container mt-4">
-                                <h4 class="mb-3">Weather Information</h4>
-                                
+                                <div class="alert alert-secondary" role="alert" data-bs-toggle="collapse" href="#weatherSection">
+                                    <h4 class="mb-3 d-inline">
+                                        Weather Information <i class="fas fa-caret-right" aria-hidden="true" id="weatherCaret"></i>
+                                    </h4>
+                                </div>
+                                <div class="collapse" id="weatherSection">
                                 <div class="row mb-2">
                                     <div class="col-md-8">
                                         <label class="fw-bold">METAR:</label>
@@ -268,6 +272,30 @@ <h4 class="mb-3">Weather Information</h4>
                                     </div>
                                 </div>
                             </div>
+                            </div>
+
+                            <!-- Frequencies section -->
+                            <div class="container mt-4">
+                                <div class="alert alert-secondary" role="alert" data-bs-toggle="collapse" href="#frequenciesSection">
+                                    <h4 class="mb-3 d-inline">
+                                        Frequencies <i class="fas fa-caret-right" aria-hidden="true" id="frequenciesCaret"></i>
+                                    </h4>
+                                </div>
+                                <div class="collapse" id="frequenciesSection">
+                                
+                                <form>
+                                    <div class="row mb-2" ng-repeat="freq in airportData.freqs">
+                                        <div class="col-md-3">
+                                            <label class="fw-bold small">{{freq.description}}:</label>
+                                        </div>
+                                        <div class="col-md-3">
+                                            <p class="small">{{freq.frequency_mhz}}</p>
+                                        </div>
+                                        <!-- You can add more columns if needed. For now, I've reserved space for two columns per frequency -->
+                                    </div>
+                                </form>
+                            </div>
+                            </div>
 
                         </div>
                     
diff --git a/src/main/resources/static/script.js b/src/main/resources/static/script.js
index f98bcb3..2aa6c93 100644
--- a/src/main/resources/static/script.js
+++ b/src/main/resources/static/script.js
@@ -791,6 +791,7 @@ app.controller('ChecklistController', ['$scope', '$sce', '$timeout', '$http', '$
                 $scope.runways = $scope.airportData.runways;
                 $scope.frequencies = $scope.airportData.freqs;
                 console.log($scope.airportData);
+                console.log($scope.airportData.freqs);
 
                 $scope.parseMetar($scope.airportInfo.metar);
 
diff --git a/src/main/resources/static/vanilla-js.js b/src/main/resources/static/vanilla-js.js
index f07fb93..c672e80 100644
--- a/src/main/resources/static/vanilla-js.js
+++ b/src/main/resources/static/vanilla-js.js
@@ -23,4 +23,34 @@ fetch('/support')
     .then(response => response.text())
     .then(content => {
         document.getElementById('support').innerHTML = content;
+    });
+
+    document.addEventListener('DOMContentLoaded', function() {
+        const weatherSection = document.getElementById('weatherSection');
+        const frequenciesSection = document.getElementById('frequenciesSection');
+        
+        const weatherCaret = document.getElementById('weatherCaret');
+        const frequenciesCaret = document.getElementById('frequenciesCaret');
+    
+        // Event listener for Weather section
+        weatherSection.addEventListener('show.bs.collapse', function () {
+            weatherCaret.classList.remove('fa-caret-right');
+            weatherCaret.classList.add('fa-caret-down');
+        });
+    
+        weatherSection.addEventListener('hide.bs.collapse', function () {
+            weatherCaret.classList.remove('fa-caret-down');
+            weatherCaret.classList.add('fa-caret-right');
+        });
+    
+        // Event listener for Frequencies section
+        frequenciesSection.addEventListener('show.bs.collapse', function () {
+            frequenciesCaret.classList.remove('fa-caret-right');
+            frequenciesCaret.classList.add('fa-caret-down');
+        });
+    
+        frequenciesSection.addEventListener('hide.bs.collapse', function () {
+            frequenciesCaret.classList.remove('fa-caret-down');
+            frequenciesCaret.classList.add('fa-caret-right');
+        });
     });
\ No newline at end of file