Added wireframes for all planned application features
This commit is contained in:
Martin
parent
e2bd5db15b
commit
df192617a2
Binary file not shown.
@ -26,6 +26,8 @@ import {MatMenuModule} from '@angular/material/menu';
|
||||
import { TweetsComponent } from './component/tweets/tweets.component';
|
||||
import { EinstellungenComponent } from './component/einstellungen/einstellungen.component';
|
||||
import { NavigationComponent } from './component/navigation/navigation.component';
|
||||
import {MatSnackBarModule} from '@angular/material/snack-bar';
|
||||
import {MatCheckboxModule} from '@angular/material/checkbox';
|
||||
|
||||
@NgModule({
|
||||
declarations: [LandingComponent, TestSubCompComponent, LoginComponent,
|
||||
@ -45,7 +47,9 @@ import { NavigationComponent } from './component/navigation/navigation.component
|
||||
MatSliderModule,
|
||||
MatToolbarModule,
|
||||
MatIconModule,
|
||||
MatMenuModule
|
||||
MatMenuModule,
|
||||
MatSnackBarModule,
|
||||
MatCheckboxModule
|
||||
],
|
||||
// enables injecting
|
||||
providers: [
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -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"
|
||||
|
||||
}
|
||||
|
||||
@ -17,6 +17,7 @@ export class HomeComponent implements OnInit {
|
||||
parsedToken;
|
||||
|
||||
constructor(private http: HttpClient, private router: Router) {
|
||||
// TODO: DELETE COMPONENT
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
<div>
|
||||
<router-outlet>
|
||||
</router-outlet>
|
||||
<div class="router-wrapper">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -1,20 +1,9 @@
|
||||
<app-navigation></app-navigation>
|
||||
<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>
|
||||
<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>
|
||||
</span>
|
||||
<button mat-raised-button color="warn" id="logoutBtn"
|
||||
(click)="logout()">Logout</button>
|
||||
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<p *ngIf="errorMessage">Error on login: {{errorMessage}}</p>
|
||||
|
||||
|
||||
@ -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,
|
||||
};
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
#nav_buttons_wrapper {
|
||||
width: fit-content;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-column-gap: 10px;
|
||||
margin-top: 1em;
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
<div class="header">
|
||||
<mat-toolbar>
|
||||
<button *ngIf="show_menu"
|
||||
<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>
|
||||
@ -10,7 +11,15 @@
|
||||
<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>
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1,4 @@
|
||||
.feed-icon {
|
||||
width: 100%;
|
||||
max-width: 5em;
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -12,4 +12,8 @@ export class TweetsComponent implements OnInit {
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
loadMore() {
|
||||
console.log('TODO: Implement');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -8,8 +8,14 @@ export class AuthService {
|
||||
|
||||
constructor(public jwtHelper: JwtHelper) {}
|
||||
|
||||
public setToken(token): void {
|
||||
public setToken(token): boolean {
|
||||
if (token) {
|
||||
if (!this.jwtHelper.isTokenExpired(token)) {
|
||||
sessionStorage.setItem(this.tokenKey, token);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
public deleteToken(): void {
|
||||
|
||||
33
frontend/src/assets/logo.svg
Normal file
33
frontend/src/assets/logo.svg
Normal file
@ -0,0 +1,33 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
id="svg3626"
|
||||
viewBox="0 0 300.00006 244.18703"
|
||||
height="244.18703"
|
||||
width="300.00006">
|
||||
<defs
|
||||
id="defs3628" />
|
||||
<metadata
|
||||
id="metadata3631">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title>Logo</dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
transform="translate(-539.17946,-568.85777)"
|
||||
id="layer1">
|
||||
<path
|
||||
id="path3611"
|
||||
style="fill:#1da1f2;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
d="m 633.89823,812.04479 c 112.46038,0 173.95627,-93.16765 173.95627,-173.95625 0,-2.64628 -0.0539,-5.28062 -0.1726,-7.90305 11.93799,-8.63016 22.31446,-19.39999 30.49762,-31.65984 -10.95459,4.86937 -22.74358,8.14741 -35.11071,9.62551 12.62341,-7.56929 22.31446,-19.54304 26.88583,-33.81739 -11.81284,7.00307 -24.89517,12.09297 -38.82383,14.84055 -11.15723,-11.88436 -27.04079,-19.31655 -44.62892,-19.31655 -33.76374,0 -61.14426,27.38052 -61.14426,61.13233 0,4.79784 0.5364,9.46458 1.58538,13.94057 -50.81546,-2.55686 -95.87353,-26.88582 -126.02546,-63.87991 -5.25082,9.03545 -8.27852,19.53111 -8.27852,30.73006 0,21.21186 10.79366,39.93837 27.20766,50.89296 -10.03077,-0.30992 -19.45363,-3.06348 -27.69044,-7.64676 -0.009,0.25652 -0.009,0.50661 -0.009,0.78077 0,29.60957 21.07478,54.3319 49.0513,59.93435 -5.13757,1.40062 -10.54335,2.15158 -16.12196,2.15158 -3.93364,0 -7.76596,-0.38716 -11.49099,-1.1026 7.78383,24.2932 30.35457,41.97073 57.11525,42.46543 -20.92578,16.40207 -47.28712,26.17062 -75.93712,26.17062 -4.92898,0 -9.79834,-0.28036 -14.58427,-0.84634 27.05868,17.34379 59.18936,27.46396 93.72193,27.46396" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
@ -3,7 +3,72 @@
|
||||
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
|
||||
@import '~bootstrap/dist/css/bootstrap.min.css';
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
a {
|
||||
text-decoration: underline;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 95%;
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.header {
|
||||
z-index: 100;
|
||||
display: block;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 0.5em;
|
||||
height: fit-content;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-top: 1em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
/* On screens that are 992px or less, set the background color to blue */
|
||||
@media screen and (max-width: 992px) {
|
||||
body {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.router-wrapper {
|
||||
}
|
||||
|
||||
.center {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.padding-0{
|
||||
padding-right:0;
|
||||
padding-left:0;
|
||||
}
|
||||
|
||||
.margin-auto {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.overflow-break {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.white-space-no-wrap {
|
||||
white-space:nowrap;
|
||||
}
|
||||
|
||||
.vert-align-mid {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user