Flightmap

A customizable map for displaying air traffic in and around BZO/Bolzano. Real-time data can be retrieved and displayed via websockets.

Table of contents

• Usage
• Gettings started
• Tests and linting
• Deployment
• Docker environment
• Information

Usage

Include vue.js (https://unpkg.com/vue) and the webcompscript file dist/noi-mobility-atc.min.js in your HTML and define the web component like this:

 <noi-mobility-atc
 lang="en"
 departures="true"
 arrivals="true"
 realtime="true"
 regionswitch="true"
 timezone="UTC"
 maxentries="5"
 maxage="60"
 ></noi-mobility-atc>

For a full example, configuration and filter options and available custom properties please have a look at the demo 1 the demo 2

Attributes

styleurl

you can specify a url from an external stylesheet (css). this stylesheet will then be appended to the shadowroot and thus allows overriding most css rules. if this option is used, an id must be assigned to the element.

airports and nations (filter)

The attributes airports and nations can each be passed an array which defines the airports or nations to be displayed. Airports and nations can be shown or hidden by their abbreviations. Corresponding abbreviations are currently stored statically and can be viewed under src/mappings/airport_types.js. Listed abbreviations are displayed, abbreviations preceded by ! are explicitly excluded. If exclusions are defined, other values are ignored.

Examples:

  airports='["!HAM", "BER"]'
  nations='["DE"]'

Only flights that start or end in Germany are displayed. Flights which start or end in Hamburg are not displayed. Since an exclusion exists, the "BER" specification is ignored.

  airports='["HAM", "BER"]'
  nations='["DE"]'

Only flights departing from or arriving in Hamburg or Berlin are displayed.

  airports='["HAM", "BER"]'
  nations='["IT", "DNK"]'

Mutually exclusive configuration, nothing is displayed at all.

For a full example, configuration and filter options and available custom properties please have a look at the demo 1 the demo 2

lang

The language in which the component is rendered

Type: string
Options: "en", "it", "de"

Translations can be changed or added via the messages attribute: demo

departures, arrivals, regionswitch, realtime

Visibility of the individual subcomponents

Type: Boolean
Options: "true", "false"

departures: table of departures, default = true
arrivals: table with arrivals, default = true
regionswitch: buttons for switching the view, default = true
realtime: Table with realtime data, default = true
buyticket: button with the link to buy the respective flight, default = true
sidebar: shows the sidebar with the info on the flights, default = true

metricunits

Show units as metric values

Type: Boolean
Options: "true", "false"

maxage

Received data will be interpreted as valid for && deleted after X seconds

Type: Number (seconds)
Default: 60

timezone

timezone for arrivals/departures

Type: Timezone name (https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)
Default: UTC

dstoffset

Daylight saving time offset in minutes. Times for arrivals and departures are globally adjusted by this value if they happen outside the current summer/winter time.

Type: Number Default: 60

colors

in-map coloring (aircraft)

Type: Object
Default:

{
  primary: "#0068B4",
  secondary: "#555555",
  primary_contrast: "#ffffff",
  secondary_contrast: "#ffffff"
}

regions

preset regions, first region is used as start screen and sidebar header label

Type: Array
Default:

[
  {
    label: "Airport",
    center: [11.326656463229954, 46.44298771993968],
    zoom: 14,
  },
  {
    label: "Region",
    center: [11.463606010174134, 46.42665096950925],
    zoom: 10,
  },
]

maxforecast

maximum entries for departure and arrival

Type: Number
Default: 5

filters, columns, airports, nations

See demo for an example of the more complex data attributes

Getting started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

To build the project, the following prerequisites must be met:

• Node 17 / NPM 8

For a ready to use Docker environment with all prerequisites already installed and prepared, you can check out the Docker environment section.

Source code

Get a copy of the repository:

git clone https://github.com/noi-techpark/webcomp-flightdata

Change directory:

cd webcomp-flightdata/

Dependencies

Download all dependencies:

npm install

Develope/Build

Build the project:

npm start

The necessary files to run the web component are provided under dist/. dist/demo.html can be viewed locally in your browser.

Deployment

To create the distributable files, execute the following command:

npm run build

Docker environment

For the project a Docker environment is already prepared and ready to use with all necessary prerequisites.

These Docker containers are the same as used by the continuous integration servers.

Installation

Install Docker (with Docker Compose) locally on your machine.

Dependenices

First, install all dependencies:

docker-compose run --rm app /bin/bash -c "npm install"

Start and stop the containers

Before start working you have to start the Docker containers:

docker-compose up --build --detach

After finished working you can stop the Docker containers:

docker-compose stop

Running commands inside the container

When the containers are running, you can execute any command inside the environment. Just replace the dots ... in the following example with the command you wish to execute:

docker-compose run --rm app /bin/bash -c "..."

Some examples are:

docker-compose run --rm app /bin/bash -c "npm run test"

Information

License

The code in this project is licensed under the GNU AFFERO GENERAL PUBLIC LICENSE Version 3 license. See the LICENSE.md file for more information.

REUSE

This project is REUSE compliant, more information about the usage of REUSE in NOI Techpark repositories can be found here.

Since the CI for this project checks for REUSE compliance you might find it useful to use a pre-commit hook checking for REUSE compliance locally. The pre-commit-config file in the repository root is already configured to check for REUSE compliance with help of the pre-commit tool.

Install the tool by running:

pip install pre-commit

Then install the pre-commit hook via the config file by running:

pre-commit install