Events - Web component

A web component that shows the events stored in the Open Data Hub.

Do you want to see it in action? Go to our web component store!

• Events - Web component
  • Usage
    • Attributes
      • width
      • height
      • fontFamily
      • language
      • mapAttribution
      • currentLocation
      • tiles-url
      • modality
      • pageSize
      • filterRadius
      • disableEventDirections
      • categoriesFilter
  • Getting started
    • Prerequisites
    • Source code
    • .env
    • Dependencies
    • Build
  • Docker environment
    • Installation
    • Dependenices
    • Start and stop the containers
    • Running commands inside the container
  • Information
    • Support
    • Contributing
    • Documentation
    • Boilerplate
    • License

Usage

Include the webcomp script file dist/odh-events.js in your HTML and define the web component like this:

 <odh-events
    width="100%"
    height="500px"
    fontFamily="Arial"
    language="it"
    mapAttribution='&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
    currentLocation='{ "lat": 46.31, "lng": 11.26 }'
    tiles-url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    modality="list"
    pageSize="5"
    categoriesFilter="[8,16]">
</odh-events>

Attributes

width

Give a fixed width to the component. Works only from desktop up. You can use whatever size unit you want.

Examples: "100%" or "200px"

height

Give a fixed height to the component. Works only from desktop up. You can use whatever size unit you want.

Example: "500px" or "100%"

fontFamily

Set the typeface.

Example: "Arial"

language

Set the default and starting language.

Example: "en" or "de" or "it"

mapAttribution

Set the acknowledgement for the map tiles provider.

Example: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'

currentLocation

Set the starting point position on the map.

Example: '{ "lat": 46.31, "lng": 11.26 }'

tiles-url

Set the URL of the API that provides the tiles.

Example: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

modality

Set the default and starting value for the modality of the widget.

Example: "list" or "map"

pageSize

Set the default and starting value for the modality of the widget. Default value is 10.

Example: "5"

filterRadius

The radius expressed in kilometers with which to filter events. Default value is 0.

Example: "5"

disableEventDirections

If set the road directions are hidden.

categoriesFilter

If set, all the gastronomies are filtered by the bitmask values in the array.

Example: "[8,16]"

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 14.15.4 / NPM 8.1.2

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 git@github.com:noi-techpark/webcomp-events.git

Change directory:

cd webcomp-events/

.env

Create a .env file in the main directory. Fill it with this content:

HEREMAPS_API_KEY=YourKey

Replace YourKey with your API token to use the tiles and the search bar.

Dependencies

Download all dependencies:

npm install

Build

Build and start the project:

npm run start

The application will be served and can be accessed at http://localhost:8080.

Deployment

To create the distributable files, execute the following command:

npm run build

Docker environment

NOT IMPLEMENTED

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 "yarn start"

Information

Support

ToDo: For support, please contact help@opendatahub.com.

Contributing

If you'd like to contribute, please follow the following instructions:

• Fork the repository.

• Checkout a topic branch from the development branch.

• Make sure the tests are passing.

• Create a pull request against the development branch.

A more detailed description can be found here: https://github.com/noi-techpark/documentation/blob/master/contributors.md.

Documentation

More documentation can be found at https://opendatahub.readthedocs.io/en/latest/index.html.

Boilerplate

The project uses this boilerplate: https://github.com/noi-techpark/webcomp-boilerplate.

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