Uweheuerfrontend

Documentation

• see C:\Uwes\owncloud\documents\Software_Development\MyDevelopments\uweheuer.drawio

Installation

Raspberry

• Git installation
• Node.js installation
• Angular installation
• Clone repositories

uwe@raspberrypi4:~/SoftwareProjects/eclipse-workspace $ gh repo clone UweHeuer/uweheuer-frontend
uwe@raspberrypi4:~/SoftwareProjects/uweheuer-frontend $ npm install
uwe@raspberrypi4:~/SoftwareProjects/uweheuer-frontend $ npm audit fix

Source Control

git add .
// eventually open powershell as admin
Get-Item -Path "C:\Uwes\Programme\Git\bin\*.exe" | %{ Set-ProcessMitigation -Name $_.Name -Disable ForceRelocateImages }
git commit -m "Save"
git push

API

Local Dev

• Frontend http://localhost:4200/

Local Docker

• http://localhost/

Build

Development Laptop

• via npm

npm run build:local_docker // see package.json
npm run build:local_dev // see package.json

• • calls

ng build --configuration=local_docker // see angular.json

Raspberry

uwe@raspberrypi4:~/SoftwareProjects/uweheuer-frontend $ git pull
uwe@raspberrypi4:~/SoftwareProjects/uweheuer-frontend $ npm run build:raspberry // base-ref is needed for running behind the Raspberry 3B proxy, see on Raspberry 3B /etc/apache2/sites-available/000-default-le-ssl.conf

Docker

docker build --tag uweheuerfrontend .

nginx.conf

• copy a standard nginx.conf from a running container to get a start

docker cp uweheuer-backend-frontend-1:/etc/nginx/nginx.conf nginx.conf
copy nginx.conf uweheuer-frontend-nginx.conf
del nginx.conf
docker cp uweheuer-backend-frontend-1:/etc/nginx/conf.d/default.conf default.conf

Run

Local

• see angular.json

ng serve --configuration local_docker
ng serve --configuration local_dev

Docker

docker run --name uweheuerfrontendcontainer -d -p 82:80 uweheuerfrontend

Docker Compose

• see UweHeuer Backend

Implementation

Look and Feel

• Angular Material theme in style.css
• Hammmerjs

PS C:\Uwes\SoftwareProjects\uweheuer-frontend>npm install hammerjs
// main.ts 
import 'hammerjs'; 

• Material Icons

// index.html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
// <COMPONENT>.ts
urlColor: string = 'Chocolate';
// <COMPONENT>.html
<mat-icon matListIcon  [ngStyle]="{ 'color' : urlColor }"> ...

• Flex Layout module

Application State

• /services/application-state.ts
• manages the application state as BehaviorSubject, a sub-type of Observable and expose the state as Observable
• /services/application-state.service.ts
  • in ctor:
    • subscribe to Angular SWUpdate service
    • setup regular SW version check

Sidenav

• for communication with the side area and content there is a dedicated service in sidenav.service.ts:
  • offers a toggle method for the side area which is called in the header burger menu
• definition in app.component.html
• in corresponding ts code:
  • set the DOM object '#mysidenav' side area in the sidenav service