A search engine for search and consult the realtime flights data around a specific given airport. A detailed map display the single flight status.
Include vue.js (https://unpkg.com/vue) and the webcompscript file dist/noi-flightdata-realitime.min.js
in your HTML and define the web component like this:
<noi-flightdata-realitime
theme="OpenDataHub"
showTopDescription="true"
langPack="{}"
styleUrl="./demo-assets/custom.css"
id="atc-main"
language="en"
localairport="BZO"
timezone="Europe/Berlin">
</noi-flightdata-realitime>
For a full example, configuration and available custom properties please look at the demo.
The language in which the component is rendered
Type: string
Options: "en", "it", "de"
Translations can be changed or added via the langPack attribute: the demo
The attribute localairport can be passed as a airport IATA code which defines the local airports from where flights depart or arrive.
Type: string
Examples: "BZO", "BER", "VRN"
Show or not the top inner component description. Default is "true".
Type: Boolean
Options: "true", "false"
This attribute can be used to apply a predefined set of colors.
Type: string
Options: "OpenDataHub", "Skyalps"
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 unique "id" must be assigned to the element.
The configurations can by seen at: the demo
The attribute timezone can be passed as a timezone standard. Full list can be found here https://www.npmjs.com/package/tzdata.
Type: string
Defalut: "Europe/Rome"
Main webcomponent colors. A full customization in colors can be made by using a custom css via styleUrl attribute.
Type: Object
Default:
{
--noi-primary: white;
--noi-mid: #f5f5f5;
--noi-secondary: black;
--noi-text-primary: black;
--noi-text-secondary: white;
--noi-light-bg: #F5F4F6;
--noi-font-family: 'Barlow Semi Condensed';
--basic-font-size: 16px;
}
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
To build the project, the following prerequisites must be met:
- Node 18 / NPM 8
For a ready to use Docker environment with all prerequisites already installed and prepared, you can check out the Docker environment section.
Get a copy of the repository:
git clone https://github.com/noi-techpark/webcomp-flightdata-realtime
Change directory:
cd webcomp-flightdata-realtime/
Download all dependencies:
npm install
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.
To create the distributable files, execute the following command:
npm run build
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.
Install Docker (with Docker Compose) locally on your machine.
First, install all dependencies:
docker-compose run --rm app /bin/bash -c "npm install"
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
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"
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.
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