Added wireframes for all planned application features

frontend/src/app/component/einstellungen/einstellungen.component.css

@@ -0,0 +1,27 @@
+.input {
+  width: 100%;
+}
+
+.input-row {
+  display: block;
+  padding: 10px 0;
+}
+
+.einstellungen_buttons_wrapper {
+  width: fit-content;
+  display: grid;
+  grid-auto-flow: column;
+  grid-column-gap: 10px;
+}
+
+.feed-icon {
+  width: 75%;
+  max-width: 5em;
+}
+
+.feed-list-row {
+  padding: 10px 0;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 800px;
+}

frontend/src/app/component/einstellungen/einstellungen.component.html

@@ -1,2 +1,56 @@
-<app-navigation></app-navigation>
-<p>einstellungen works!</p>
+<app-navigation [activeLink]="'settings'"></app-navigation>
+<div class="content">
+  <div class="text-center">
+    <p class="font-weight-bold">RSS-Feed erstellen</p>
+    <div class="input-row">
+      <mat-form-field appearance="standard" class="input">
+        <mat-label>Vollständige URL des RSS-Feeds:</mat-label>
+        <input matInput placeholder="https://rss.orf.at/news.xml">
+      </mat-form-field>
+    </div>
+    <div class="input-row text-left">
+      <mat-form-field appearance="standard" class="input">
+        <mat-label>Folgende Stichwörter im Feed suchen:</mat-label>
+        <input matInput placeholder="Spiel, Spaß, Schokolade">
+      </mat-form-field>
+      <mat-checkbox>Alle Stichworte müssen enthalten sein</mat-checkbox>
+    </div>
+    <div class="input-row text-left">
+      <span>Optionales Icon:</span>
+      <br>
+      HIER ICON-PICKER EINFÜGEN!
+    </div>
+    <div class="input-row text-left">
+      <mat-slide-toggle color="primary">Slide me!</mat-slide-toggle>
+    </div>
+    <div class="input-row margin-auto einstellungen_buttons_wrapper">
+      <button mat-raised-button>Abbrechen</button>
+      <button mat-raised-button><mat-icon>save</mat-icon> Speichern</button>
+    </div>
+  </div>
+  <div class="text-center">
+    <div class="container" *ngFor="let number of [1, 2, 3]">
+      <div class="row feed-list-row">
+        <div class="col-2 text-center padding-0 margin-auto">
+          <img class="feed-icon" src="assets/logo.svg" alt="Feed-Icon">
+        </div>
+        <div class="col-8 padding-0 text-left margin-auto">
+          <span class="overflow-break">https://rss.orf.at/news.xml</span>
+        </div>
+        <div class="col-1 padding-0 margin-auto">
+          <button mat-icon-button>
+            <mat-icon>edit</mat-icon>
+          </button>
+        </div>
+        <div class="col-1 padding-0 margin-auto">
+          <button mat-icon-button>
+            <mat-icon>delete</mat-icon>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div class="input-row margin-auto einstellungen_buttons_wrapper">
+      <button mat-raised-button><mat-icon>add</mat-icon> RSS-Feed hinzufügen</button>
+    </div>
+  </div>
+</div>

frontend/src/app/component/einstellungen/einstellungen.component.ts

@@ -12,4 +12,6 @@ export class EinstellungenComponent implements OnInit {
   ngOnInit(): void {
   }
 
+  // TODO: bei Input-Words die Leerzeichen vor- und nach dem letzten Zeichen entfernen: " Formel 1 " wird zu "Formel 1"
+
 }

frontend/src/app/component/home/home.component.ts

@@ -17,6 +17,7 @@ export class HomeComponent implements OnInit {
   parsedToken;
 
   constructor(private http: HttpClient, private router: Router) {
+    // TODO: DELETE COMPONENT
   }
 
   ngOnInit(): void {

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

@@ -1,5 +1,3 @@
-<div>
-  <router-outlet>
-  </router-outlet>
+<div class="router-wrapper">
+  <router-outlet></router-outlet>
 </div>
-

frontend/src/app/component/login/login.component.css

@@ -1,24 +1,16 @@
-#userComp {
-  position: fixed;
-  top: 2em;
-  right: 8em;
-}
-
 #loginBtnWrapper {
   width: 100%;
   text-align: center;
   display: block;
-  margin-top: 10em;
+  margin-top: 5em;
+}
+#loginLogo {
+  width: 8em;
+  max-width: 20%;
 }
 
 #loginBtnWrapper > button {
-  font-size: 2em;
+  font-size: 1.5em;
   width: 8em;
   height: 2em;
 }
-
-#logoutBtn {
-  position: fixed;
-  right: 2em;
-  top: 4.5em;
-}

frontend/src/app/component/login/login.component.html

@@ -1,20 +1,9 @@
 <app-navigation></app-navigation>
-<span id="loginBtnWrapper">
-  <button *ngIf="!parsedToken"
-          mat-raised-button color="primary"
-          (click)="login()">Login</button>
-</span>
-<br>
-<div *ngIf="parsedToken" id="userComp">
-  <span style="display: inline-grid">
-    <img alt="Profile picture" [src]="parsedToken.picture" style="height:100px;">
-    <span style="margin: auto">{{parsedToken.given_name}} {{parsedToken.family_name}}</span>
+<div class="content">
+  <img id="loginLogo" class="center" src="assets/logo.svg" alt="Logo">
+  <span id="loginBtnWrapper">
+    <button *ngIf="!parsedToken"
+            mat-raised-button color="primary"
+            (click)="login()">Login</button>
   </span>
-  <button mat-raised-button color="warn" id="logoutBtn"
-          (click)="logout()">Logout</button>
-
 </div>
-
-<br>
-<p *ngIf="errorMessage">Error on login: {{errorMessage}}</p>
-

frontend/src/app/component/login/login.component.ts

@@ -3,6 +3,7 @@ import {HttpClient, HttpHeaders} from '@angular/common/http';
 import {ActivatedRoute, Router} from '@angular/router';
 import {AuthService} from '../../services/auth.service';
 import {environment} from '../../../environments/environment';
+import {MatSnackBar} from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-login',
@@ -16,12 +17,11 @@ export class LoginComponent implements OnInit {
   state;
   parsedToken;
 
-  errorMessage;
-
   constructor(private http: HttpClient,
               private router: Router,
               private activatedRoute: ActivatedRoute,
-              private authService: AuthService) {
+              private authService: AuthService,
+              private snackBar: MatSnackBar) {
   }
 
   ngOnInit(): void {
@@ -31,7 +31,9 @@ export class LoginComponent implements OnInit {
           element => {
             const split = element.split('=');
             if (split[0] === 'error') {
-              this.errorMessage = split[1];
+              this.snackBar.open(split[1], 'Schließen', {
+                duration: 5000,
+              });
               return;
             }
             if (split[0] === 'id_token') {
@@ -71,14 +73,8 @@ export class LoginComponent implements OnInit {
     return text;
   }
 
-  logout() {
-    const url = this.openid_endpoint + '/logout' +
-      '?id_token_hint=' + this.id_token + '&' +
-      'post_logout_redirect_uri=http://localhost:4200';
-    window.location.replace(url);
-  }
-
   gotoBackend() {
+    // TODO: Remove
     const headerDict = {
       'Authorization': 'Bearer ' + this.id_token,
     };

frontend/src/app/component/navigation/navigation.component.css

@@ -0,0 +1,7 @@
+#nav_buttons_wrapper {
+  width: fit-content;
+  display: grid;
+  grid-auto-flow: column;
+  grid-column-gap: 10px;
+  margin-top: 1em;
+}

frontend/src/app/component/navigation/navigation.component.html

@@ -1,16 +1,25 @@
-<mat-toolbar>
-  <button *ngIf="show_menu"
-          mat-icon-button [matMenuTriggerFor]="menu"
-          class="example-icon" aria-label="Example icon-button with menu icon">
-    <mat-icon>menu</mat-icon>
-  </button>
-  <mat-menu #menu="matMenu">
-    <button mat-menu-item (click)="logout()">
-      <mat-icon>logout</mat-icon>
-      <span>Abmelden</span>
+<div class="header">
+  <mat-toolbar>
+    <button *ngIf="is_Authenticated"
+            mat-icon-button [matMenuTriggerFor]="menu"
+            class="example-icon" aria-label="Example icon-button with menu icon">
+      <mat-icon>menu</mat-icon>
     </button>
-  </mat-menu>
-
-
-  <span>{{title}}</span>
-</mat-toolbar>
+    <mat-menu #menu="matMenu">
+      <button mat-menu-item (click)="logout()">
+        <mat-icon>logout</mat-icon>
+        <span>Abmelden</span>
+      </button>
+    </mat-menu>
+    <span>{{title}}</span>
+  </mat-toolbar>
+  <div *ngIf="is_Authenticated" class="center" id="nav_buttons_wrapper">
+    <a routerLink="/tweets">
+      <button mat-raised-button [color]="activeLink === 'tweets' ? 'primary' : null">Tweets</button>
+    </a>
+    <a routerLink="/einstellungen">
+      <button
+        mat-raised-button [color]="activeLink === 'settings' ? 'primary' : null">Einstellungen</button>
+    </a>
+  </div>
+</div>

frontend/src/app/component/navigation/navigation.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 import {environment} from '../../../environments/environment';
 import {AuthService} from '../../services/auth.service';
 
@@ -12,10 +12,12 @@ export class NavigationComponent implements OnInit {
   openid_endpoint: string = environment.openid_endpoint;
   title: string = environment.title;
 
-  show_menu = false;
+  is_Authenticated = false;
+
+  @Input() activeLink: string;
 
   constructor(public authService: AuthService) {
-    this.show_menu = authService.isAuthenticated();
+    this.is_Authenticated = authService.isAuthenticated();
   }
 
   ngOnInit(): void {
@@ -29,7 +31,7 @@ export class NavigationComponent implements OnInit {
       url += '&id_token_hint=' + this.authService.getToken();
     }
     this.authService.deleteToken();
-    this.show_menu = false;
+    this.is_Authenticated = false;
     window.location.replace(url);
   }
 

frontend/src/app/component/tweets/tweets.component.css

@@ -0,0 +1,4 @@
+.feed-icon {
+  width: 100%;
+  max-width: 5em;
+}

frontend/src/app/component/tweets/tweets.component.html

@@ -1,2 +1,32 @@
-<app-navigation></app-navigation>
-<p>tweets works!</p>
+<app-navigation [activeLink]="'tweets'"></app-navigation>
+<div class="content">
+  <div class="text-center">
+    <span>Kein RSS_Feed vorhanden</span>
+    <br>
+    <span><a routerLink="/einstellungen">RSS-Feed erstellen</a></span>
+  </div>
+  <div class="text-center">
+    <span>Kein Tweets vorhanden</span>
+    <br>
+    <span>Schau später noch einmal vorbei!</span>
+  </div>
+  <div>
+  <div>
+    <div class="container" *ngFor="let number of [1, 2, 3]">
+      <div class="row">
+        <div class="col-2 text-center padding-0 margin-auto">
+          <img class="feed-icon" src="assets/logo.svg" alt="Feed-Icon">
+        </div>
+        <div class="col-10">
+          <p class="overflow-break">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnop qrstuvwxyz0123456789ABCDE FGHIJKLMNOP
+            <span class="white-space-no-wrap"> - 24.03.2021 15:30</span></p>
+          <a>Zusatz externe URL zum Content der Nachricht</a>
+        </div>
+      </div>
+    </div>
+    </div>
+    <div class="text-center">
+      <button (click)="loadMore()" mat-button color="primary">Mehr laden</button>
+    </div>
+  </div>
+</div>

frontend/src/app/component/tweets/tweets.component.ts

@@ -12,4 +12,8 @@ export class TweetsComponent implements OnInit {
   ngOnInit(): void {
   }
 
+  loadMore() {
+    console.log('TODO: Implement');
+  }
+
 }