webcomp-flightdata/demo.html at master · ag0n-e/webcomp-flightdata · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!--
SPDX-FileCopyrightText: NOI Techpark <digital@noi.bz.it>

SPDX-License-Identifier: CC0-1.0
-->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible"
        content="IE=edge" />
  <meta name="viewport"
        content="width=device-width,initial-scale=1.0" />
  <link rel="shortcut icon"
        href="/favicon.ico">
  <title>Skyalps flight schedule</title>
  <script src="./dist/noi-mobility-atc.min.js"></script>
  <link rel="preconnect"
        href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Heebo:wght@300&display=swap"
        rel="stylesheet">
  <style>
    html,
    body,
    div {
      height: 100%;
      width: 100%;
      overflow: hidden;
      margin: 0;
      padding: 0;
    }

    * {
      box-sizing: border-box;
    }

    noi-mobility-atc {
      --noi-font-family: Heebo;
      --noi-font-family-2: Heebo;
      --basic-font-size: 16px;
    }
  </style>
</head>

<body style="width: 100%; height: 100%; padding:1%">
  Currently relevant airport is indicated by "filters.airport". Only flights that directly affect this airport are displayed. Since only flights related to BZO are currently available on the server side, alternative airports effectively only show flights from or to BZO.
  <div style="width: 100%; height: 100%; padding:0 0">
    <noi-mobility-atc theme="skyalps"
                      id="atc-main"
                      styleurl=""
                      map="true"
                      header="true"
                      lang="de"
                      realtime="true"
                      departures="true"
                      arrivals="true"
                      regionswitch="true"
                      maxage="80"
                      timezone="Europe/Berlin"
                      maxforecast="10"
                      regions='[{"label": "Airport Hamburg","center": [11.3361503, 46.4607403],"zoom": 14.25}, {"label": "Region","center": [11.463606010174134, 46.42665096950925],"zoom": 10}]'
                      filters='{"from_ts": false,"to_ts": false,"airport": "HAM"}'
                      columns='{"morebutton" : true, "date": true,"time": true,"airline": true,"fromto": true,"flightnumber": true,"remark": true,"gate": true,"ticketlink": true, "rate" : false}'>
    </noi-mobility-atc>
    <script>
      // whenever the filter attribute changes, the widget will update internal data
      // var demoelement = document.querySelector("noi-mobility-atc");
      // demoelement.setAttribute("filters", '{"from_ts": "1674604800","to_ts": false,"airport": "BZO"}');
    </script>
  </div>
</body>

</html>