@@ -353,12 +353,12 @@ This Quasar page contains the Vue AboutComponent.
##### ErrorNotFoundPage
Will be displayed if a default page is not found. This should not happen when everything works like intended.
#### Map
##### Map
The maps are created with the Leaflet library. This is an open-source JS library and well suited for OMT [@LeafletDoc].
To bring the drawing tools for drawing, editing and deleting a rectangle or polygon on the map the Leaflet Draw API is used [@LeafletDrawDoc].
#### Pinia
##### Pinia
Pinia is used to save the state of components. Whenever data has to be send to the DB a certain procedure takes place. First the data gets stored temporarly inside the responsible Pinia store and from inside the store an API call gets triggered via so called actions. Whenever Pinia is used many stores can be created [@PiniaDoc].
Important stores implemented are:
...
...
@@ -373,7 +373,7 @@ Important stores implemented are:
The business layer is a Django project (osm_monitoring_tool) which contains a Django app (app app_changeset).
Django does provide an API for the communication between Django and Quasar. This API is documented [here](#api-provided-by-backend) with Swagger.
Django has some classes for the models and some for the schemas.
Django has some classes for the models and some for the [schemas](#api-provided-by-backend).
The models are in the Django application and the schemas and provided API is in the Django application defined.
The model classes are:
...
...
@@ -395,7 +395,7 @@ The schema classes are:
This classes are used in the provided Django Ninja API. With this schemas Django does automatically check if the right attributes with the correct types are received or send by Django.
##### Database layer
#### Database layer
It is a PostgreSQL DB.
: The table below shows all relevant relations stored in the osmhistory DB.
...
...
@@ -427,71 +427,62 @@ It is a PostgreSQL DB.
-->
## Implementation
Einleitung schreiben: sinn und zweck dieses kapitels erklären
erster teil implementation (Tim -> prüfen ob und welche unterkapitel in diesem teil sinn machen, ausschreiben nur wenn du zeit hast)
### Approach of implementation
After familiarized with the subject of our BT it was time to choose the right technologie for the right problem. Definitly not an easy task. But we were kind of lucky because our tutor and the IFS at OST have some preferences.
- wie vorgegangen wurde eher GENERELL und nicht für jeden layer einzeln
- tech auswählen und vertraut machen damit
- einzelne technologien zuerst alleine und anschliessend kombiniert getestet (zuerst auch ohne docker und dann auch mit docker und in kombination)
- dieses vorgehen erweiterte jedesmal den durchstich durch layer etwas -> ziel kompletter durchstich
- nach und nach datenbank erweitert
- zuerst db mit unrelated testdaten
- dann mit wenigen changesets
- dann mit changesets und nodes, ways, relations etc.
- dann mit allen changesets, osm elements in swiss
- dann mit chronjob
First we got into touch with Django and PostgreSQL by running them locally and independend. After that we connected this to layers successfully and later on we dockerized it as well. Of course this was not that easy and consumed some time.
After that we added Quasar in a separate Docher container to the project.
The general procedure was always having a working prototype and extending it little by little until a cut through all layers was accomplished.
At the beginning only some test data were stored in the DB. Step by step during the project we added more data to the DB. After the initial setup a few real changesets were added to the DB. A major achievement was having a running and working DB with all changesets and the complete history of all nodes, ways and relations from Switzerland. This was possible by integrating [osmhistorydb-ch](https://github.com/sosm/osmhistorydb-ch) into our project. Unfortunately this was not as easy as it looked at the beginning. There were many libraries used with outdated versions as well as outdated technology (like Python2 dependency) between osmhistorydb-ch toolstack and our project. Having a running DB at the end were really time consuming.
zweiter teil implementation
0. grober technologie überblick für einzelne layer geben
1. docker container grob aufbau bzw von Dockerfile maybe some technologies and packages and libraries used in container and dockerfile, nur wichtigste packages + librariese etc erwähnen (Tim)
2. gewisse spezifische technologien erwähnen welche für was genutzt werden
0.
### Main technologies used
Since each layer runs in a separate Docker container each layer can and is build with a different technology. For that reason it makes sense to inspect each layer more detailed.
### Front-end layer
1. (Tim)
- TODO check image type
- dockerfile erklärt
- builds on node image???
Image for the container builds on TODO ...wichtigste images, libraries, technologies vom Dockerfile auflisten (Node.js image?)
Inside the front-end following settings, libraries and technologies are used:
- Quasar
- Vue3 with Composition Api
- Webpack for having PWA support
- Babel as the JS compiler
- Leaflet for integrating a map
- Leaflet Draw for having draw support on the map
- Axios: Promise based HTTP client for the browser and node.js
- Pinia: for state management
- Poetry for package dependency management
TODO npm, yarn oder beide erwähnen naja
TODO falls weiter libraries einfach in package.json schauen
2. (Samuel)
- composition api and setup inside ...
- app-webpack
- babel
- poetry
- leaflet for map
- other tech
### Business layer
1. (Tim)
- dockerfile erklärt
- build on Pyhton image
- some extensions (GeoDjango)
Image for the container builds on TODO ...wichtigste images, libraries, technologies vom Dockerfile auflisten (Python, GeoDjango?)
2. (Samuel)
- ORM of Django version
- provides api with Django Ninja
- serializes results of queries
- CRUD to db
- other tech
- TODO
Inside the business layer following settings, libraries and technologies are used:
- Django
- ORM of Django: Simplifies access to DB
- Django Ninja API
- helps to serialize result of query
- GEOSGeometry: Simplifies working with geometry objects of the PostGis extension
- HStoreField: Extension for saving the tags in the DB
- psycopg2: For DB communication
- osmviews: For QRanking
TODO falls weiter libraries einfach in poetry.lock schauen
### Database layer
1. (Tim) evtl punkt 1 und 2 zusammennehmen
- dockerfile erklärt evtl mit version
- TODO
- build on Postgres image
- some extensions (PostGis)
- other tech
2. (Tim)
- was gemacht wurde: existing toolstack umschreiben!!!
TODO ganzes subkapitel
Image for the container builds on TODO ...wichtigste images, libraries, technologies vom Dockerfile auflisten (PostgreSQL, PostGis extension, ...)
- evtl andere tools um osmhistorydb-ch zum laufen zu bringen
Inside the database layer following settings, libraries and technologies are used:
- ...
- evtl auch was gemacht wurde: existing toolstack umschreiben!!!
...
...
@@ -1140,7 +1131,7 @@ The filter page allows the user to filter the results in order to only see the r
User-name filters according to any entered user-name. Tags (compare [define filter tags](#define-filter-tags)), include key-value pairs that will be tested on the changeset itself aswell as all its containing objects, which makes it a very valuable tool for filtering. It is also possible to list multiple tags in order to narrow down the selection even more. A date-range lets you select changesets from a limited timeframe. The Status is per default set to show open and in progress changesets, but can be set to exclusively show one or the other. Finally the geographic filter (compare [define geo-filter](#define-geo-filter)) allows the selection of specific regions. These can be defined as a simple rectangle or quite advanced polygons to truly select any fitting shape.
Tags are set as a key-value pair. These can be entered in different notations which can be freely choosen. Below are some exmples of possible notations:
Tags are set as a key-value pair. These can be entered in different notations which can be freely choosen. Below are some examples of possible notations:
-`key=value`
-`key:value`
...
...
@@ -1186,6 +1177,7 @@ The application includes a couple warning and error messages. They are displayed
