A responsive webcomponent for showing traffic forecast Brennerlec A22 road
- Brennerlec traffic forecast
Include the web-component JS wile located in /www folder
<script type="module" src="./noi-a22-traffic-forecast.esm.js"></script>Define the web component like this (see location parameter):
<noi-a22-traffic-forecast location="Brennero"></noi-a22-traffic-forecast>Language.
Type: string Default: browser language or 'en' if the language is not supported Options: "en", "it"
Layout appearance. We support two layouts: desktop and mobile.
Type: string Default: 'auto', which means the layout will dynamically adjust to screen size Options: "desktop", "mobile", "auto"
Forecast location. Should be one of the following: "Bolzano", "Brennero", "Verona"
Type: string Required: true Default: none Options: "Bolzano", "Brennero", "Verona"
View date (only month and year makes an impact). The value can be specified in iso-8601 format or any other string, which can be an argument to Date function.
Type: string Default: current date Example: "2025-01-01"
The component supports the following variables to adjust the appearance. Here is an example of dark mode styles:
noi-a22-traffic-forecast.dark {
font-family: "Roboto", serif;
--color-primary: rgb(224, 224, 224);
--color-primary-rgb: 224, 224, 224;
--color-text: #FFF;
--color-background: #333;
--color-background-shade: #474747;
}Primary color and it's rgb representation (should correspond to the first value). Default is:
--noi-primary: #0068B4;
--noi-primary-rgb: 0, 104, 180;Secondary color. Default is:
--color-secondary: #00A767;
--color-secondary-rgb: 0, 167, 103;Text color. Default is:
--color-text: #333333;Background color. Default is:
--color-background: #FFFFFF;Background dark color. Default is:
--color-background-shade: #F7F7F7;Border color. Default is:
--color-border: #d0d0d0;Footer color. Default is:
--color-footer: #0068b4;Footer contrast color. Default is:
--color-footer-contrast: #FFFFFF;Regular traffic color. Default is:
--color-busy-regular: #18a767;Regular traffic contrast color. Default is:
--color-busy-regular-contrast: #FFFFFF;Severe traffic color. Default is:
--color-busy-severe: #fab813;Severe traffic contrast color. Default is:
--color-busy-severe-contrast: #FFFFFF;Heavy traffic color. Default is:
--color-busy-heavy: #e62243;Heavy traffic contrast color. Default is:
--color-busy-heavy-contrast: #FFFFFF;Critical traffic color. Default is:
--color-busy-critical: #000000;Critical traffic contrast color. Default is:
--color-busy-critical-contrast: #FFFFFF;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 20 / NPM 10
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-a22-traffic-forecast.gitChange directory:
cd webcomp-a22-traffic-forecast/Download all dependencies:
npm installBuild and start the project:
npm run startThe application will be served and can be accessed at http://localhost:8080.
The tests and the linting can be executed with the following commands:
npm run test
npm run lintTo create the distributable files, execute the following command:
npm run buildIf you want to test the webcomponent on a local instance of the webcomponent store to make sure that it will run correctly also on the real store. You can also access the webcomponent running in a simple separated docker container outside of the store.
If you have already developed your webcomponent and now want to test it on a local instance of the store, just copy .env.example, docker-compose.yml, wcs-manifest.json and infrastructure/docker into your root folder. Adjust your package.json and wcs-manifest.json files as described on the top of this readme. Then follow the instructions below.
For accessing the webcomponent in a separated docker in the browser you will need a server (e.g. webpack dev-server) that is hosting a page which includes the webcomponent tag, as well as the script defining it. This page needs to be hosted on port 8080 as specified in your docker-compose file.
Install Docker (with Docker Compose) locally on your machine.
- Create a .env file:
cp .env.example .env - [Optional] Adjust port numbers in .env if they have conflicts with services already running on your machine
- Start the store with:
docker-compose up -d - Wait until the containers are running. You can check the current state with:
docker-compose logs --tail 500 -f - Access the store in your browser on:
localhost:8999 - Access webcomponent running in separated docker in your browser on:
localhost:8998
- Increase version number WC_VERSION in your .env file
- Then run:
docker-compose up wcstore-cli
docker-compose stop
[sudo] rm -f workspacedocker-compose rm -f -v postgres
For support, please contact [email protected].
If you'd like to contribute, please follow the following instructions:
- Fork the repository.
- Checkout a topic branch from the
mainbranch. - Make sure the tests are passing.
- Create a pull request against the
mainbranch.
A more detailed description have a look at our Getting Started Guide.
More documentation can be found at https://docs.opendatahub.com.
The project uses this boilerplate: https://github.com/noi-techpark/webcomp-boilerplate.
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-commitThen install the pre-commit hook via the config file by running:
pre-commit install