frequency info and collapsible sections added

brian-mckeown · Oct 1, 2023 · 4f74bf8 · 4f74bf8
1 parent 1b4e131
commit 4f74bf8
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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');
+        });
     });