Homepage controller list expansion & improvements

Celeo · Jan 19, 2025 · 0cf77a5 · 0cf77a5
1 parent 427c24b
commit 0cf77a5
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 26 deletions.
diff --git a/vzdv-site/src/endpoints/homepage.rs b/vzdv-site/src/endpoints/homepage.rs
@@ -17,7 +17,7 @@ use vatsim_utils::live_api::Vatsim;
 use vzdv::{
     aviation::parse_metar,
     sql::{self, Activity},
-    vatsim::get_online_facility_controllers,
+    vatsim::{get_online_facility_controllers, OnlineController},
     PermissionsGroup, GENERAL_HTTP_CLIENT,
 };
 
@@ -45,6 +45,13 @@ async fn page_home(
 async fn snippet_online_controllers(
     State(state): State<Arc<AppState>>,
 ) -> Result<Html<String>, AppError> {
+    #[derive(Debug, Serialize)]
+    struct OnlineControllerDisplay<'a> {
+        c: &'a OnlineController,
+        badge_color: &'static str,
+        badge_content: &'static str,
+    }
+
     // cache this endpoint's returned data for 30 seconds
     let cache_key = "ONLINE_CONTROLLERS".to_string();
     if let Some(cached) = state.cache.get(&cache_key) {
@@ -58,6 +65,27 @@ async fn snippet_online_controllers(
     let online = get_online_facility_controllers(&state.db, &state.config)
         .await
         .map_err(|error| AppError::GenericFallback("getting online controllers", error))?;
+    let online: Vec<OnlineControllerDisplay> = online
+        .iter()
+        .map(|c| {
+            let (badge_color, badge_content) = if c.callsign.ends_with("_CTR") {
+                ("blue", "CTR")
+            } else if c.callsign.ends_with("_APP") {
+                ("orange", "APP")
+            } else if c.callsign.ends_with("_TWR") {
+                ("red", "TWR")
+            } else if c.callsign.ends_with("_GND") {
+                ("green", "GND")
+            } else {
+                ("", "?")
+            };
+            OnlineControllerDisplay {
+                c,
+                badge_color,
+                badge_content,
+            }
+        })
+        .collect();
     let template = state
         .templates
         .get_template("homepage/online_controllers.jinja")?;

diff --git a/vzdv-site/templates/changelog.jinja b/vzdv-site/templates/changelog.jinja
@@ -14,6 +14,17 @@
 
 <hr>
 
+<div class="card shadow mb-3">
+  <div class="card-body">
+    <h5 class="card-title">2025-01-19</h5>
+    <div class="card-text">
+      <ul>
+        <li>Online controllers card on homepage moved and expanded</li>
+      </ul>
+    </div>
+  </div>
+</div>
+
 <div class="card shadow mb-3">
   <div class="card-body">
     <h5 class="card-title">2025-01-17</h5>

diff --git a/vzdv-site/templates/homepage/home.jinja b/vzdv-site/templates/homepage/home.jinja
@@ -4,15 +4,47 @@
 
 {% block body %}
 
+<style>
+.ocb-blue { background-color: rgb(110, 168, 254); }
+.ocb-orange { background-color: rgb(255, 193, 7); }
+.ocb-red { background-color: rgb(220, 53, 69); }
+.ocb-green { background-color: rgb(25, 135, 84); }
+</style>
+
+<script>
+  function onlineButtonRegister() {
+    document.getElementById('btn-online').addEventListener('click', () => {
+      const table = document.querySelector('#online > table');
+      if (table.style.display === 'none') {
+        table.style.display = 'block';
+        document.querySelector('#online i#i-collapse').style.display = 'block';
+        document.querySelector('#online i#i-expand').style.display = 'none';
+      } else {
+        table.style.display = 'none';
+        document.querySelector('#online i#i-collapse').style.display = 'none';
+        document.querySelector('#online i#i-expand').style.display = 'block';
+      }
+    });
+  }
+</script>
+
 <h1>Welcome to the Denver ARTCC</h1>
 
 <div class="row">
   <div class="col-12 col-lg-9">
     <p>
-      The Denver ARTCC covers approximately 285,000 square miles of airspace
-      over all or part of the states of Colorado, Arizona, New Mexico, Utah,
+      The Denver ARTCC covers approximately 285,000 square miles of airspace over all or part of the states of Colorado, Arizona, New Mexico, Utah,
       Kansas, Nebraska, South Dakota, Wyoming, and Montana.
     </p>
+    <div class="card shadow mb-2">
+      <div class="card-body">
+        <div
+          id="online"
+          hx-get="/home/online/controllers"
+          hx-on::after-request="onlineButtonRegister()"
+          hx-trigger="load, every 1m"></div>
+      </div>
+    </div>
     <div class="card shadow mb-2">
       <div class="card-body">
         {% include 'events/upcoming_events_snippet.jinja' %}
@@ -21,30 +53,19 @@
   </div>
   <div class="col">
     <div class="card shadow">
-      <div class="card-body">
-        <div
-          id="online"
-          hx-get="/home/online/controllers"
-          hx-trigger="load, every 1m"
-        ></div>
-      </div>
-    </div>
-    <div class="card shadow mt-2">
       <div class="card-body">
         <div
           id="weather"
           hx-get="/home/weather"
-          hx-trigger="load, every 5m"
-        ></div>
+          hx-trigger="load, every 5m"></div>
       </div>
     </div>
     <div class="card shadow mt-2">
       <div class="card-body">
         <div
           id="flights"
           hx-get="/home/online/flights"
-          hx-trigger="load, every 1m"
-        ></div>
+          hx-trigger="load, every 1m"></div>
       </div>
     </div>
     <div class="card shadow mt-2">

diff --git a/vzdv-site/templates/homepage/online_controllers.jinja b/vzdv-site/templates/homepage/online_controllers.jinja
@@ -1,13 +1,30 @@
 {% if online|length > 0 %}
-<h4>Online controllers</h4>
-<ul>
-  {% for controller in online %}
-  <li style="font-size: 90%">
-    {{ controller.name }} on {{ controller.callsign }} for
-    {{ controller.online_for }}
-  </li>
-  {% endfor %}
-</ul>
+  <h4 class="mb-0 d-flex justify-content-between">
+    Online controllers
+    <button type="button" id="btn-online" class="btn btn-sm">
+      <i id="i-collapse" class="bi bi-arrows-collapse"></i>
+      <i id="i-expand" class="bi bi-arrows-expand" style="display: none"></i>
+    </button>
+  </h4>
+  <table class="table">
+    <thead></thead>
+    <tbody>
+      {% for controller in online %}
+        <tr>
+          <td><span class="badge text-black ocb-{{ controller.badge_color }}">{{ controller.badge_content }}</span></td>
+          <td>{{ controller.c.callsign }}</td>
+          <td>
+            {{ controller.c.name }}
+            <a href="/controller/{{ controller.c.cid }}" class="icon-link icon-link-hover text-decoration-none">
+              <i class="bi bi-arrow-right-short"></i>
+            </a>
+          </td>
+          <td>{{ controller.c.online_for }}</td>
+          <td>{{ controller.c.frequency }}</td>
+        </tr>
+      {% endfor %}
+    </tbody>
+  </table>
 {% else %}
-<h4>No controllers online</h4>
+  <h5>No controllers online</h5>
 {% endif %}
diff --git a/vzdv/src/vatsim.rs b/vzdv/src/vatsim.rs
@@ -29,6 +29,7 @@ pub struct OnlineController {
     pub callsign: String,
     pub name: String,
     pub online_for: String,
+    pub frequency: String,
 }
 
 /// Get facility controllers currently online.
@@ -67,6 +68,7 @@ pub async fn get_online_facility_controllers(
                     .map(|s| format!("{} {}", s.0, s.1))
                     .unwrap_or(String::from("?")),
                 online_for: format!("{}h{}m", seconds / 3600, (seconds / 60) % 60),
+                frequency: controller.frequency.clone(),
             }
         })
         .collect();