From 9b386cb2008a6127ef3a672bb90b82a428291e19 Mon Sep 17 00:00:00 2001 From: Remi <73385395+itsrubberduck@users.noreply.github.com> Date: Sun, 21 Sep 2025 18:58:37 +0200 Subject: [PATCH] Revamp learn mission UI panels --- app/pages/learn.vue | 894 +++++++++++++++++++++++++++++--------------- 1 file changed, 598 insertions(+), 296 deletions(-) diff --git a/app/pages/learn.vue b/app/pages/learn.vue index 35feb57..0fc9a57 100644 --- a/app/pages/learn.vue +++ b/app/pages/learn.vue @@ -516,79 +516,113 @@
-
-
- mdi-clipboard-text-outline -
-
-
Import from SimBrief
-

- SimBrief is a free dispatch planner by Navigraph. Build a flight on their - Dispatch page - and we'll pull the latest OFP straight into your mission. +

+ SimBrief import preview +
+ SimBrief import +

Load your airline dispatch

+

+ Sync the exact OFP you're flying with one click. We'll transform it into a mission-ready briefing and readback drill.

+
+ mdi-airplane-cog Real routes + mdi-clock-fast Instant setup + + mdi-open-in-new + Open SimBrief dispatch + +
-
    -
  1. - 1 -
    Open the SimBrief dispatch page and generate a flight plan with the aircraft you want to train.
    -
    2. -
  2. - 2 -
    On the resulting OFP, copy your SimBrief Pilot ID (it's the number shown on the share link).
    -
    3. -
  3. - 3 -
    Paste the ID below — we remember it on this device so you can load future plans instantly.
    -
    4. -
-
- - -
-

- New to SimBrief? It's a full airline-style dispatch tool that pairs perfectly with OpenSquawk missions. -

-
- - Contacting SimBrief… -
-
- mdi-alert - {{ flightPlanError }} -
-
- mdi-airplane - {{ simbriefPlanMeta.callsign }} · {{ simbriefPlanMeta.route }} - +
+
+
+
+ 1 + Plan in SimBrief +
+

Generate your flight on SimBrief with the aircraft and payload you want to practice.

+
+
+
+ 2 + Copy your Pilot ID +
+

Find the ID on the share link of the finished OFP — it's the number we use to fetch your dispatch.

+
+
+
+ 3 + Paste & import +
+

Drop the ID below. We'll remember it on this device so future missions load instantly.

+
+
+ +
+
+ + +
+
+ +

+ New to SimBrief? It's a free airline-style dispatch planner that pairs perfectly with OpenSquawk missions. +

+ +
+ + Contacting SimBrief… +
+
+ mdi-alert + {{ flightPlanError }} +
+
+
+ mdi-airplane + {{ simbriefPlanMeta.callsign }} · {{ simbriefPlanMeta.route }} +
+ +
-
- Mission hero -
- Mission briefing -
{{ briefingSnapshot.radioCall }}
-
{{ briefingSnapshot.route }}
-

A quick situational overview before you hop back on frequency.

-
+
+ Mission hero +
+
+ Mission briefing + {{ briefingSnapshot.callsign }} +
+

{{ briefingSnapshot.radioCall }}

+
{{ briefingSnapshot.route }}
+

Take a beat to brief the flight deck before the next call.

+
mdi-airplane-takeoff {{ briefingSnapshot.departure.icao }} · RWY {{ briefingSnapshot.departure.runway }} @@ -602,98 +636,115 @@ Squawk {{ briefingSnapshot.codes.squawk }}
+
+
+ ATIS + Information {{ briefingSnapshot.departure.atis }} +
+
+ Delivery + {{ briefingSnapshot.departure.freq }} + {{ briefingSnapshot.departure.freqWords }} +
+
+ Push + {{ briefingSnapshot.codes.push }} +
+
+ Initial altitude + {{ briefingSnapshot.altitudes.initial }} +
+
-
+ -
-
+
+
mdi-airplane
Callsign {{ briefingSnapshot.callsign }} {{ briefingSnapshot.radioCall }}
-
-
+ +
mdi-airplane-takeoff
Departure {{ briefingSnapshot.departure.icao }} · RWY {{ briefingSnapshot.departure.runway }} {{ briefingSnapshot.departure.city }}
-
-
+ +
mdi-airplane-landing
Arrival {{ briefingSnapshot.arrival.icao }} · RWY {{ briefingSnapshot.arrival.runway }} {{ briefingSnapshot.arrival.city }}
-
-
+ +
mdi-radar
Codes Squawk {{ briefingSnapshot.codes.squawk }} Push {{ briefingSnapshot.codes.push }}
-
-
+ + -
-
-
-
- Route preview -
- mdi-map-marker-path - Flight deck setup -
-
    -
  • Push: {{ briefingSnapshot.codes.push }}
    • -
  • ATIS: Information {{ briefingSnapshot.departure.atis }}
    • -
  • Delivery: {{ briefingSnapshot.departure.freq }} · {{ briefingSnapshot.departure.freqWords }}
    • -
+
+
+
+ Route preview +
+ mdi-map-marker-path + Flight deck setup
-
- Departure -
- mdi-airplane-takeoff - Departure flow -
-
    -
  • Stand: {{ briefingSnapshot.departure.stand || 'As assigned' }}
    • -
  • Taxi: {{ briefingSnapshot.departure.taxiRoute || 'As assigned' }}
    • -
  • SID: {{ briefingSnapshot.departure.sid }} · {{ briefingSnapshot.departure.transition }}
    • -
  • Initial altitude: {{ briefingSnapshot.altitudes.initial }}
    • -
+
    +
  • Push: {{ briefingSnapshot.codes.push }}
    • +
  • ATIS: Information {{ briefingSnapshot.departure.atis }}
    • +
  • Delivery: {{ briefingSnapshot.departure.freq }} · {{ briefingSnapshot.departure.freqWords }}
    • +
+
+
+ Departure +
+ mdi-airplane-takeoff + Departure flow
-
- Arrival -
- mdi-airplane-landing - Arrival setup -
-
    -
  • STAR: {{ briefingSnapshot.arrival.star }} · {{ briefingSnapshot.arrival.transition }}
    • -
  • Approach: {{ briefingSnapshot.arrival.approach }}
    • -
  • Taxi-in: {{ briefingSnapshot.arrival.taxiRoute || 'As assigned' }}
    • -
  • Arrival stand: {{ briefingSnapshot.arrival.stand || 'As assigned' }}
    • -
+
    +
  • Stand: {{ briefingSnapshot.departure.stand || 'As assigned' }}
    • +
  • Taxi: {{ briefingSnapshot.departure.taxiRoute || 'As assigned' }}
    • +
  • SID: {{ briefingSnapshot.departure.sid }} · {{ briefingSnapshot.departure.transition }}
    • +
  • Initial altitude: {{ briefingSnapshot.altitudes.initial }}
    • +
+
+
+ Arrival +
+ mdi-airplane-landing + Arrival setup
-
- Weather -
- mdi-weather-cloudy - Weather snapshot -
-
    -
  • Departure wind: {{ briefingSnapshot.weather.depWind }}
    • -
  • Departure QNH: {{ briefingSnapshot.weather.depQnh }}
    • -
  • Arrival wind: {{ briefingSnapshot.weather.arrWind }}
    • -
  • Arrival QNH: {{ briefingSnapshot.weather.arrQnh }}
    • -
+
    +
  • STAR: {{ briefingSnapshot.arrival.star }} · {{ briefingSnapshot.arrival.transition }}
    • +
  • Approach: {{ briefingSnapshot.arrival.approach }}
    • +
  • Taxi-in: {{ briefingSnapshot.arrival.taxiRoute || 'As assigned' }}
    • +
  • Arrival stand: {{ briefingSnapshot.arrival.stand || 'As assigned' }}
    • +
+
+
+ Weather +
+ mdi-weather-cloudy + Weather snapshot
+
    +
  • Departure wind: {{ briefingSnapshot.weather.depWind }}
    • +
  • Departure QNH: {{ briefingSnapshot.weather.depQnh }}
    • +
  • Arrival wind: {{ briefingSnapshot.weather.arrWind }}
    • +
  • Arrival QNH: {{ briefingSnapshot.weather.arrQnh }}
    • +