initial commit

frontend/src/app/component/landing/landing.component.html

@@ -0,0 +1,33 @@
+<h1>landing works!</h1>
+
+<mat-slider min="1" max="5" step="0.5" [value]="myValue"></mat-slider>
+
+
+<h2>Two way data binding, passing data, triggering child event...</h2>
+<mat-form-field *ngIf="true">
+  <input
+         type="text"
+         placeholder="Placeholder"
+         matInput
+         [(ngModel)]="exampleInputText"
+  >
+</mat-form-field>
+
+<app-test-sub-comp [message]="exampleInputText" (buttonClickedEvent)="alert()"
+                   [anotherInput]=""
+></app-test-sub-comp>
+
+
+
+<h2>Hide display with *ngIf</h2>
+<mat-slide-toggle [(ngModel)]="showPar">Show paragraph</mat-slide-toggle>
+<p *ngIf="showPar">Toggle me</p>
+<app-test-sub-comp *ngIf="showPar"
+  [message]="exampleInputText" (buttonClickedEvent)="alert()"
+                   [anotherInput]=""
+></app-test-sub-comp>
+
+
+
+<h2>Display a test list with *ngFor</h2>
+<span *ngFor="let dict of testList">{{dict.value}}; </span>

frontend/src/app/component/landing/landing.component.ts

@@ -0,0 +1,88 @@
+import {Component, OnInit} from '@angular/core';
+import {RestService} from '../../services/rest.service';
+import {WebsocketService} from '../../services/websocket.service';
+import {NGXLogger} from 'ngx-logger';
+import {Subscription} from 'rxjs';
+
+@Component({
+  selector: 'app-landing',
+  templateUrl: './landing.component.html',
+  styleUrls: ['./landing.component.css']
+})
+export class LandingComponent implements OnInit {
+
+  private wsSubscription: Subscription;
+  private wsMessageCounter: number;
+  exampleInputText: string;
+  showPar = false;
+  testList = [{'value': 1}, {'value': 2}, {'value': 3}];
+  myValue: any = 15;
+
+  constructor(
+    private logger: NGXLogger,
+    private restService: RestService,
+    private wsService: WebsocketService
+  ) {
+  }
+
+  ngOnInit(): void {
+    // perform test rest call as observable
+    this.observableCall();
+
+    // perform test rest call as promise (shorter - will only be executed exactly once)
+    this.promiseCall();
+
+    // perform test ws send / receive
+    setTimeout(() => {
+        this.wsCall();
+      },
+      1000);
+  }
+
+  private observableCall(): void {
+
+    const subscription = this.restService.testCall(1).subscribe(
+      // subscribe with lambda function
+      response => {
+        this.logger.debug('Execute obs test call', response);
+        subscription.unsubscribe();
+      },
+      error => {
+        this.logger.error('Error while executing obs test call', error);
+        subscription.unsubscribe();
+      }
+    );
+  }
+
+  private promiseCall(): void {
+    this.restService.testCall(2).toPromise()
+      // lambda for success
+      .then(response => {
+        this.logger.debug('Execute obs test call', response);
+      })
+      // lambda for fail
+      .catch(error => {
+        this.logger.error('Error while executing obs test call', error);
+      });
+  }
+
+  private wsCall(): void {
+    this.wsMessageCounter = 0;
+    this.wsSubscription = this.wsService.wsTestCall('Test message').message.subscribe(
+      result => {
+        this.logger.debug('ws call result', result);
+        if (this.wsMessageCounter >= 2) {
+          this.wsSubscription.unsubscribe();
+        }
+      },
+      error => {
+        this.logger.error('ws call error', error);
+        this.wsSubscription.unsubscribe();
+      }
+    );
+  }
+
+  alert() {
+    alert(this.exampleInputText);
+  }
+}

frontend/src/app/component/testsubcomp/test-sub-comp.component.html

@@ -0,0 +1 @@
+<p>{{message}} <button mat-raised-button (click)="buttonClickedEvent.emit()">Click me</button></p>

frontend/src/app/component/testsubcomp/test-sub-comp.component.ts

@@ -0,0 +1,24 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+
+@Component({
+  selector: 'app-test-sub-comp',
+  templateUrl: './test-sub-comp.component.html',
+  styleUrls: ['./test-sub-comp.component.css']
+})
+export class TestSubCompComponent implements OnInit {
+  @Input()
+  message: string;
+  @Input()
+  anotherInput: string;
+
+  @Output()
+  buttonClickedEvent: EventEmitter<void> = new EventEmitter<void>();
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+    this.message;
+  }
+
+}