base-camp-luftdaten / frontend

This web app uses sensor data from the openSource project luftdaten.info to predict particulate matter development for Germany. The project was implemented as part of the base.camp of the Department of Computer Science at the University of Hamburg.

base.camp Luftdaten Frontend

This web app uses sensor data from the openSource project luftdaten.info to predict particulate matter development for Germany. The project was implemented as part of the base.camp of the Department of Computer Science at the University of Hamburg.

Setup

To start developing, there are two options to get the project up and running:

1. via Docker

   This requires you to have docker-compose installed locally.

   Run the following commands to start a local development server:

   docker-compose build --no-cache web
   docker-compose up

   The first command will have to be re-run every time a dependency changes.

2. via Node.js directly

   For this option, you need Node.js and npm installed on your machine. (npm usually gets installed along with Node.js).

   Once you did that, run

   npm install

   to install all dependencies and

   npm start
   

   to start the development server.

Build

To create a production build, you have two options again:

1. If you've set up the project using Docker:
   1. Delete the dist directory if it exists.
   2. Execute docker-compose exec web npm run build while the container is running.
2. If you've set up the project using npm directly:
   1. Delete the dist directory if it exists.
   2. Execute npm run build.

The generated HTML/CSS/JavaScript files should now be in the dist directory.

Contributing

To contribute please follow these few steps:

1. git checkout master
2. git pull
3. git checkout -b <branch-name>
4. npm install
5. npm start
6. Apply your changes
7. git add .
8. git commit -m "commit message"
9. git push -u origin <branch-name>
10. Go to GitHub and open a pull request

Running tests

To run all tests, use

npm test

Or, to have the tests run in watch mode (re-run every time the test/source files are changed), use:

npm test -- --watch

frontend's Issues

Allow slider to go into the future

Optimize CSS for mobile devices

Include Heatmap

Include heatmap, maybe use this plugin: https://github.com/Leaflet/Leaflet.heat

implement navbar

Implement black navbar at the top of the page and integrate search

Optimize slider for different browser

The slider view for Safari, Chrome and Edge is really bad.

implement chart.js

use chart.js instead of d3.js

add show/hide function to sidebar

The sidebar should have a show/hide button to navigate more easily on the map

docker-compose doesn't work

If I want to start the dev-server via docker-compose, the following error message always appears:

docker-compose error message.txt

It works fine with npm start, but not live editing.

make the slider smoother

At the moment the slider is moving rather pieced. It would be good if it could be moved a bit more fluidly.
(A little color accent would be good too!)

Leaflet doesn't work

Leaflet Map doesn't load anymore. This should be fixed asap.

Use own API

add drop-down menu for specific date requests

Tom suggested at the last session to add a kind of drop-down menu, which allows specific dates to be set, e.g. yesterday 5 pm or (for the forecast) coming Saturday 6 am.

Update the data in an interval

Example: User keeps page open for an hour

animated button and sidebar

Lower interval from 1h to ~5min