Fixed CORS issue when running on localhost by adding herokuapp proxy …

…before API call.

index.html

@@ -34,15 +34,10 @@
     <header>
         <nav class="navbar bg-body-tertiary sticky-top">
             <div class="container-fluid">
-                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
-                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
-                    aria-expanded="false" aria-label="Toggle navigation">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
+                <a href="/" class="navbar-brand">📡 no-unicom</a>
 
                 <button class="btn btn-dark" id="light_dark_switch" onclick=toggleTheme()><i class="fa-solid fa-sun" id="light_dark_switch_icon"></i></button>
 
-                <!-- <a href="#" class="navbar-brand">brand</a> -->
                 <div class="collapse navbar-collapse" id="navbarSupportedContent">
                     <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                         <li class="nav-item">
@@ -72,45 +67,29 @@ <h5>Aircraft Data</h5>
         </div>
 
         <div class="vatsim-events-container" id="vatsim-events-container">
-          <h5>Vatsim Events</h5>
-          <h1>Need to switch this code from Flask server to client side</h1>
         </div>
-
-
-
       </div>
-
-
-
+
       <footer>
-
         <div class="simconnect-status-container">
           <span class="badge text-bg-danger" id="connection-label" >Sim Disconnected</span>
         </div>
-
         <div class="vatsim-networkinfo-container">
             <p>Pilots: <span id="pilots_online"></span></p>
             <p>Controllers: <span id="controllers_online"></span></p>
         </div>
-
         <div class="ui-control">
           <button class="ui-control-button" id="center-aircraft-toggle-button"><i class="fa-solid fa-arrows-to-dot"></i></button>
           <button class="ui-control-button" id="toggle-aircraft-data-button"><i class="fa-solid fa-table"></i></button>
           <button class="ui-control-button" id="toggle-vatsim-data-button"><i class="fa-solid fa-circle-info"></i></button>
-
-
         </div>
-
       </footer>
+
       <script src="scripts/light-dark-mode.js"></script> <!-- At the end so the script recognizes all the elements -->
       <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
           integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
           crossorigin="anonymous">
       </script>
       <script src="scripts/app.js"></script>
-
-
-
-
 </body>
 </html>

scripts/app.js

@@ -329,19 +329,28 @@ let updateVatsimNetworkData = data => {
 //This data fetching is done on server site, since I get CORS issue when fetching form JavasScript on browser
 // Fetching for Vatsim events
 function getVatsimEvents() {
-    console.log("Getting upcoming Vatsim events...");
-    $.getJSON("/get_upcoming_events", {}, function(data) {
-        try {
-            updateEvents(data);
-        }
-        catch(error) {
-            console.error(error);
-        }
-    });
+    console.log("getVatsimEvents");
+    const PROXY_URL = 'https://cors-anywhere.herokuapp.com/' // To avoid cors issue during development
+    const URL = 'https://my.vatsim.net/api/v2/events/latest';
+    fetch(PROXY_URL + URL)
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('Network response was no ok ' + reponse.statusText)
+            }
+            return response.json();
+        })
+        .then(data => {
+            console.log(data);
+        updateVatsimEvents(data);
+
+        })
+        .catch(error => {
+            console.error('There was a problem with the fetch operation', error);
+        })
 }
 
 // Update the events on the page
-function updateEvents(data) {
+function updateVatsimEvents(data) {
     console.log("Updating events...")
     console.log(data)
 
@@ -399,24 +408,26 @@ function isEventLive(start_time, end_time) {
     const event_start = new Date(start_time); // Parse the format of start time ISO8601
     const event_end = new Date(end_time); // Parse the format of end time ISO8601
 
+    //console.log(timestamp, event_start, event_end);
+
     let live = false;
     let startingSoon = false;
 
     timeDifference = ((event_start - timestamp) / 1000) / 60; // Time difference in miintues
     timeDifference = timeDifference.toFixed(0);
 
     if (timeDifference <= 60) {
-        //console.log("Event is starting soon!");
+        console.log("Event is starting soon!");
         startingSoon = true;
     }
 
     if (timestamp >= event_start && timestamp <= event_end) {
         //console.log("Event is live!");
         live = true;
     } else if (timestamp > event_end) {
-        //console.log("Event is over...")
+        console.log("Event is over...")
     } else {
-        //console.log("Event has not started yet...")
+        console.log("Event has not started yet...")
     }
     return [live, startingSoon, timeDifference];
 }
@@ -570,7 +581,7 @@ themeButton.addEventListener("click", function() {
 // First initialize
 setMsfsTheme(getCurrentTheme());
 initializeUI();
-// getVatsimEvents(); 
+getVatsimEvents(); 
 // getPlaneData();
 getVatsimNetworkData()
 setInterval(saveCurrentMapView, 5000);