# Web Application Engineering Assignment 3 -- Group 04

## Technology Stack

* Angular for our frontend
* Django for our backend
* Database: sqlite3

We chose this specific stack because all of our team members have previously
worked with this combination of Angular/Django and there is a lot of
documentation for it online.
We chose sqlite3 as persistence layer because it comes out of the box with django. Django
also provides a built-in ORM mapper. Our db schema is very simple, sqlite3 handles it well.

## Linting

We use the `ng lint` command to lint our frontend. For this to work,
`angular-cli` must be installed. After that run the following in the frontend
folder:

```bash
$ ng lint
```

## Setup

Our project can be run with a simple `docker-compose up` from the project's root
folder. By default it will pull the required images from [docker
hub](https://hub.docker.com). To instead build the images locally, comment out
the `build` keys inside the `docker-compose.yml` file.

The `docker-compose.yml` file builds the images by calling the `Dockerfiles` in
the folders `frontend` and `backend`. The frontend is served via nginx on port
4200. The backend is served via gunicorn on port 8000.

The container's database folder is mounted to ./container_db of the host's docker-compose folder. Therefore,
the database is persisted at the client's filesystem.

The docker images are available at:

* [waecm-2021-group-04-bsp2-fe](https://hub.docker.com/r/pfingstfrosch/waecm-2021-group-04-bsp-3-fe)
    * sha256 digest: 68278575a559e2c28f3f68646985175c268c47a7401da2a3fac67d7a5e994727
* [waecm-2021-group-04-bsp2-be](https://hub.docker.com/r/pfingstfrosch/waecm-2021-group-04-bsp-3-be)
    * sha256 digest: 90befdf477d700c7c25efde38192cff2cf457207b27c01141c466444fc03e2e3

## CI
Look at git-lab project https://gitlab.com/Pfingstfrosch/waecm-g4-CI for CI execution.
This repository is mirrored to the CI repo, where the pipeline is executed.

## Cookie Banner Custom Element
For evaluation purposes the original code (angular project) for the custom
element is presented in this repo in
[this](https://student.inso.tuwien.ac.at/01527193/waecm-g4/-/tree/custom-cookie-banner/frontend)
branch. The custom element was developed in angular because it was convenient to
set up a new project, develop the component (with all the benefits of angular),
and export it. Our Custom Element has additional optional attributes
[statistik]=(bool) and [marketing]=(bool) to initialize the checkboxes (e.g. if
one wants to show the user what he selected earlier). The Element is
implemented in our Landing Component (that contains the angular routing
component), therefore the banner is controlled at a single point in the app.  A
Angular Service makes the Banner Selection available within the whole app if
necessary.

## Location of Tests

The first tested component is our feed creation component in
`frontend/src/app/component/einstellungen/editieren/`. The file with the tests
is in the same folder under the name `editieren.component.spec.ts`.

The second component is in the folder `frontend/src/app/component/tweets` and
the tests in `tweets.component.spec.ts`.