flight-results/fs-matrix-flight-details


Details for flight

# 🏠 Properties

Name Type

# 🎰 Slots

Name Default value
            
Show Code
<script src="/components/shared/component-base.js"></script> <script src="/components/fs-matrix-flight-details/main.js"></script> <link rel="stylesheet" href="/components/shared/component-base.css" /> <link rel="stylesheet" href="https://unpkg.com/@alaskaairux/orion-design-tokens@2.12.1/dist/tokens/CSSTokenProperties.css" /> <link rel="stylesheet" href="https://unpkg.com/@alaskaairux/orion-web-core-style-sheets@2.12.1/dist/bundled/baseline.css" /> <script src="https://unpkg.com/@alaskaairux/auro-dialog@1.0.1/dist/polyfills.js"></script> <script src="https://unpkg.com/@alaskaairux/auro-dialog@1.0.1/dist/auro-dialog__bundled.js"></script> <auro-dialog id="demoContainer"> <span slot="header">Details for flight</span> <fs-matrix-flight-details slot="content" Segments='[{"Carrier":"AS","FlightNumber":187,"DepartureStation":"ADK","ArrivalStation":"ANC","Duration":"4h 15m","Distance":1232,"DepartureTime":"1:45 pm","ArrivalTime":"7:00 pm","DepartureDay":"Wed, Jul 8","ArrivalDay":"Wed, Jul 8","NextDayArrival":false,"NextDayDeparture":true,"Performance":[{"CanceledPercentage":0,"ChronicallyDelayed":false,"EquipmentCode":"73G","EquipmentName":"Boeing 737-700","PercentLate30Plus":20,"PercentOntime":80,"DepartureAirportCode":"ADK","ArrivalAirportCode":"CDB","ChangeOfPlane":false},{"CanceledPercentage":0,"ChronicallyDelayed":true,"EquipmentCode":"73G","EquipmentName":"Boeing 737-700","PercentLate30Plus":40,"PercentOntime":40,"DepartureAirportCode":"CDB","ArrivalAirportCode":"ANC","ChangeOfPlane":false}],"StopoverInformation":["6h","55m"],"Equipment":"73G","FirstClassUpgradeAvailable":false,"FirstClassUpgradeUnavailable":false,"Amenities":["wifi","power","ife"]},{"Carrier":"AS","FlightNumber":172,"DepartureStation":"ANC","ArrivalStation":"PDX","Duration":"3h 20m","Distance":1538,"DepartureTime":"1:55 am","ArrivalTime":"6:15 am","DepartureDay":"Thu, Jul 9","ArrivalDay":"Thu, Jul 9","NextDayArrival":false,"NextDayDeparture":true,"Performance":[{"CanceledPercentage":0,"ChronicallyDelayed":false,"EquipmentCode":"73J","EquipmentName":"Boeing 737-900","PercentLate30Plus":0,"PercentOntime":0,"DepartureAirportCode":"ANC","ArrivalAirportCode":"PDX","ChangeOfPlane":false}],"StopoverInformation":["4h","40m"],"Equipment":"73J","FirstClassUpgradeAvailable":false,"FirstClassUpgradeUnavailable":false,"Amenities":["wifi","power","ife"]},{"Carrier":"AS","FlightNumber":696,"DepartureStation":"PDX","ArrivalStation":"ORD","Duration":"3h 55m","Distance":1733,"DepartureTime":"10:55 am","ArrivalTime":"4:50 pm","DepartureDay":"Thu, Jul 9","ArrivalDay":"Thu, Jul 9","NextDayArrival":false,"NextDayDeparture":false,"Performance":[{"CanceledPercentage":0,"ChronicallyDelayed":false,"EquipmentCode":"320","EquipmentName":"Airbus A320","PercentLate30Plus":0,"PercentOntime":0,"DepartureAirportCode":"PDX","ArrivalAirportCode":"ORD","ChangeOfPlane":false}],"StopoverInformation":["1h","40m"],"Equipment":"320","FirstClassUpgradeAvailable":false,"FirstClassUpgradeUnavailable":false,"Amenities":["wifi","power","ife"]},{"Carrier":"AA","FlightNumber":774,"DepartureStation":"ORD","ArrivalStation":"LGA","Duration":"2h 10m","Distance":731,"DepartureTime":"6:30 pm","ArrivalTime":"9:40 pm","DepartureDay":"Thu, Jul 9","ArrivalDay":"Thu, Jul 9","NextDayArrival":false,"NextDayDeparture":false,"Performance":[{"CanceledPercentage":0,"ChronicallyDelayed":false,"EquipmentCode":"319","EquipmentName":"Airbus A319","PercentLate30Plus":0,"PercentOntime":0,"DepartureAirportCode":"ORD","ArrivalAirportCode":"LGA","ChangeOfPlane":false}],"StopoverInformation":[],"Equipment":"319","FirstClassUpgradeAvailable":false,"FirstClassUpgradeUnavailable":false,"Amenities":["wifi","power","ife"]}]' Duration="12h 49m"></fs-matrix-flight-details> </auro-dialog> <button onclick="fireDemo('nonstop-single-leg.json');">Nonstop 1 Leg</button> <button onclick="fireDemo('nonstop-connection.json');">Nonstop 2 Leg</button> <button onclick="fireDemo('stopover-single.json');">Stopover Single</button> <button onclick="fireDemo('stopover-dual.json');">Stopover Dual</button> <button onclick="fireDemo('change-of-gauge.json');">Change of Gauge</button> <button onclick="fireDemo('oal-flight.json');">OAL Flight</button> <button onclick="fireDemo('operator-disclosure.json');">Operator Disclosure</button> <button onclick="fireDemo('subject-to-govt-approval.json');">Govt Approval</button> <button onclick="fireDemo('big-flight.json');">Big Flight</button> <script> function fireDemo(path) { fetch('/assets/json/flight-details-modal/' + path).then(res => res.json()).then(data => { var adapter = document.querySelector("fs-matrix-flight-details") adapter.remove() var container = document.querySelector("#demoContainer") var el = document.createElement("fs-matrix-flight-details") el.setAttribute('slot', 'content'); el.setAttribute("Segments", JSON.stringify(data)); el.setAttribute('Duration', 'Duration: 12h 41m') container.appendChild(el); var modal = document.querySelector('auro-dialog'); modal.setAttribute('open', true); }) } </script>