_Bastler/we_bstly-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

update navigation + profile

Browse Source
This commit is contained in:
_Bastler 2021-09-23 13:53:08 +02:00
parent 53ac145165
commit 1c0be5e1ea
25 changed files with 469 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
src/app/app-routing.module.ts
View File

@ -1,69 +1,74 @@
import {NgModule} from '@angular/core'; import { NgModule } from '@angular/core';
import {Routes, RouterModule} from '@angular/router'; import { Routes, RouterModule } from '@angular/router';
import {AuthGuard, AuthUpdateGuard, AuthenticatedGuard, AnonymousGuard} from './auth/auth.guard'; import { AuthGuard, AuthUpdateGuard, AuthenticatedGuard, AnonymousGuard } from './auth/auth.guard';
import {ImprintComponent, PrivacyPolicyComponent, TermsOfServiceComponent} from './pages/general/general.component'; import { MainComponent } from './ui/main/main.component';
import {FormLoginComponent} from './pages/form-login/form-login.component'; import { FormLoginComponent } from './pages/form-login/form-login.component';
import {FormLogin2FAComponent} from './pages/form-login-2fa/form-login-2fa.component'; import { FormLogin2FAComponent } from './pages/form-login-2fa/form-login-2fa.component';
import {PasswordComponent} from './pages/password/password.component'; import { PasswordComponent } from './pages/password/password.component';
import {PasswordResetComponent} from './pages/password-reset/password-reset.component'; import { PasswordResetComponent } from './pages/password-reset/password-reset.component';
import {AccountComponent} from './pages/account/account.component'; import { AccountComponent } from './pages/account/account.component';
import {RegisterComponent} from './pages/register/register.component'; import { RegisterComponent } from './pages/register/register.component';
import {TokensComponent} from './pages/tokens/tokens.component'; import { TokensComponent } from './pages/tokens/tokens.component';
import {ServicesComponent} from './pages/services/services.component'; import { ServicesComponent } from './pages/services/services.component';
import {InfoComponent} from './pages/account/info/info.component'; import { InfoComponent } from './pages/account/info/info.component';
import {ProfileComponent} from './pages/account/profile/profile.component'; import { ProfileComponent } from './pages/account/profile/profile.component';
import {VoucherComponent} from './pages/account/voucher/voucher.component'; import { VoucherComponent } from './pages/account/voucher/voucher.component';
import {SecurityComponent} from './pages/account/security/security.component'; import { SecurityComponent } from './pages/account/security/security.component';
import {UnavailableComponent} from './pages/unavailable/unavailable.component'; import { UnavailableComponent } from './pages/unavailable/unavailable.component';
import {NotfoundComponent} from './pages/notfound/notfound.component'; import { NotfoundComponent } from './pages/notfound/notfound.component';
import {UserComponent} from './pages/user/user.component' import { UserComponent } from './pages/user/user.component'
import {JitsiComponent} from './pages/jitsi/jitsi.component' import { JitsiComponent } from './pages/jitsi/jitsi.component'
import {ParteyTimeslotsComponent} from './pages/partey/timeslots/timeslots.compontent' import { ParteyComponent } from './pages/partey/partey.component'
import {AliasesComponent} from './pages/account/aliases/aliases.component'; import { ParteyTimeslotsComponent } from './pages/partey/timeslots/timeslots.compontent'
import {DomainsComponent} from './pages/account/domains/domains.component'; import { AliasesComponent } from './pages/account/aliases/aliases.component';
import {InvitesComponent} from './pages/invites/invites.component'; import { DomainsComponent } from './pages/account/domains/domains.component';
import {UrlShortenerComponent, UrlShortenerPasswordComponent} from './pages/urlshortener/urlshortener.component'; import { InvitesComponent } from './pages/invites/invites.component';
import {MinetestAccountsComponent} from './pages/minetest/accounts/accounts.component'; import { UrlShortenerComponent, UrlShortenerPasswordComponent } from './pages/urlshortener/urlshortener.component';
import { MinetestAccountsComponent } from './pages/minetest/accounts/accounts.component';
import { DividertestComponent } from './pages/dividertest/dividertest.component'
const routes: Routes = [ const routes: Routes = [
{path: '', redirectTo: "/services", pathMatch: 'full'}, { path: 'profile/:username', component: UserComponent, canActivate: [ AuthUpdateGuard ] },
{path: 'imprint', component: ImprintComponent, canActivate: [AuthUpdateGuard]},
{path: 'privacy-policy', component: PrivacyPolicyComponent, canActivate: [AuthUpdateGuard]},
{path: 'terms-of-service', component: TermsOfServiceComponent, canActivate: [AuthUpdateGuard]},
{path: 'login', component: FormLoginComponent, canActivate: [AnonymousGuard]},
{path: 'login/2fa', component: FormLogin2FAComponent, canActivate: [AnonymousGuard]},
{path: 'service-login', component: FormLoginComponent, canActivate: [AnonymousGuard]},
{path: 'service-login/2fa', component: FormLogin2FAComponent, canActivate: [AnonymousGuard]},
{path: 'password', component: PasswordComponent, canActivate: [AnonymousGuard]},
{path: 'password-reset', component: PasswordResetComponent, canActivate: [AnonymousGuard]},
{path: 'services', component: ServicesComponent, canActivate: [AuthenticatedGuard]},
{ {
path: 'account', component: AccountComponent, canActivate: [AuthenticatedGuard], children: [ path: '', component: MainComponent, children: [
{ path: '', redirectTo: "/services", pathMatch: 'full' },
{path: 'info', component: InfoComponent, canActivate: [AuthenticatedGuard]}, { path: 'login', component: FormLoginComponent, canActivate: [ AnonymousGuard ] },
{path: 'profile', component: ProfileComponent, canActivate: [AuthenticatedGuard]}, { path: 'login/2fa', component: FormLogin2FAComponent, canActivate: [ AnonymousGuard ] },
{path: 'security', component: SecurityComponent, canActivate: [AuthenticatedGuard]}, { path: 'service-login', component: FormLoginComponent, canActivate: [ AnonymousGuard ] },
{path: 'voucher', component: VoucherComponent, canActivate: [AuthenticatedGuard]}, { path: 'service-login/2fa', component: FormLogin2FAComponent, canActivate: [ AnonymousGuard ] },
{path: 'aliases', component: AliasesComponent, canActivate: [AuthenticatedGuard]}, { path: 'password', component: PasswordComponent, canActivate: [ AnonymousGuard ] },
{path: 'domains', component: DomainsComponent, canActivate: [AuthenticatedGuard]} { path: 'password-reset', component: PasswordResetComponent, canActivate: [ AnonymousGuard ] },
] { path: 'services', component: ServicesComponent, canActivate: [ AuthenticatedGuard ] },
{
path: 'account', component: AccountComponent, canActivate: [ AuthenticatedGuard ], children: [
{ path: '', redirectTo: "/account/info", pathMatch: 'full' },
{ path: 'info', component: InfoComponent, canActivate: [ AuthenticatedGuard ] },
{ path: 'profile', component: ProfileComponent, canActivate: [ AuthenticatedGuard ] },
{ path: 'security', component: SecurityComponent, canActivate: [ AuthenticatedGuard ] },
{ path: 'voucher', component: VoucherComponent, canActivate: [ AuthenticatedGuard ] },
{ path: 'aliases', component: AliasesComponent, canActivate: [ AuthenticatedGuard ] },
{ path: 'domains', component: DomainsComponent, canActivate: [ AuthenticatedGuard ] }
]
},
{ path: 'register', component: RegisterComponent, canActivate: [ AnonymousGuard ] },
{ path: 'tokens', component: TokensComponent, canActivate: [ AuthGuard ] },
{ path: 'jitsi', component: JitsiComponent, canActivate: [ AuthenticatedGuard ] },
{ path: 'partey', component: ParteyComponent, canActivate: [ AuthenticatedGuard ] },
{ path: 'partey/timeslots', component: ParteyTimeslotsComponent, canActivate: [ AuthenticatedGuard ] },
{ path: 'minetest/accounts', component: MinetestAccountsComponent, canActivate: [ AuthenticatedGuard ] },
{ path: 'dividertest', component: DividertestComponent },
{ path: 'urlshortener', component: UrlShortenerComponent, canActivate: [ AuthenticatedGuard ] },
{ path: 'urlshortener/:code', component: UrlShortenerPasswordComponent, canActivate: [ AuthUpdateGuard ] },
{ path: 'invites/:quota', component: InvitesComponent, canActivate: [ AuthenticatedGuard ] },
{ path: 'unavailable', component: UnavailableComponent },
{ path: 'p/:username', component: UserComponent, canActivate: [ AuthUpdateGuard ] },
{ path: '**', component: NotfoundComponent, pathMatch: 'full', canActivate: [ AuthUpdateGuard ] }, ]
}, },
{path: 'register', component: RegisterComponent, canActivate: [AnonymousGuard]},
{path: 'tokens', component: TokensComponent, canActivate: [AuthGuard]},
{path: 'jitsi', component: JitsiComponent, canActivate: [AuthenticatedGuard]},
{path: 'partey/timeslots', component: ParteyTimeslotsComponent, canActivate: [AuthenticatedGuard]},
{path: 'minetest/accounts', component: MinetestAccountsComponent, canActivate: [AuthenticatedGuard]},
{path: 'urlshortener', component: UrlShortenerComponent, canActivate: [AuthenticatedGuard]},
{path: 'urlshortener/:code', component: UrlShortenerPasswordComponent, canActivate: [AuthUpdateGuard]},
{path: 'invites/:quota', component: InvitesComponent, canActivate: [AuthenticatedGuard]},
{path: 'unavailable', component: UnavailableComponent},
{path: 'p/:username', component: UserComponent, canActivate: [AuthUpdateGuard]},
{path: '**', component: NotfoundComponent, pathMatch: 'full', canActivate: [AuthUpdateGuard]},
]; ];
@NgModule({ @NgModule({
imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload', relativeLinkResolution: 'legacy'})], imports: [ RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload', relativeLinkResolution: 'legacy' }) ],
exports: [RouterModule] exports: [ RouterModule ]
}) })
export class AppRoutingModule {} export class AppRoutingModule { }

89
src/app/app.component.html
View File

@ -1,86 +1,3 @@
<mat-toolbar color="primary"> <mat-drawer-container>
<a href="javascript:" mat-icon-button> <router-outlet></router-outlet>
<mat-icon (click)="sidenav.toggle()">menu</mat-icon> </mat-drawer-container>
</a>
<mat-icon svgIcon="logo"></mat-icon>
<span>
we.bstly
</span>
<span class="spacer"></span>
<ng-container>
<button mat-button [matMenuTriggerFor]="menu">
<mat-icon>settings</mat-icon>
<mat-icon>arrow_drop_down</mat-icon>
</button>
<mat-menu #menu="matMenu">
<a *ngIf="!auth || auth && !auth.authenticated" routerLink="/login" routerLinkActive="active" mat-menu-item>
<mat-icon>login</mat-icon> {{'login' | i18n}}
</a>
<mat-divider *ngIf="!auth || auth && !auth.authenticated"></mat-divider>
<a *ngFor="let locale of locales" mat-menu-item (click)="setLocale(locale)">{{'locale.' + locale + '.long' |
i18n}} <mat-icon inline=true *ngIf="locale == currentLocale">done</mat-icon></a>
<a mat-menu-item>
<mat-slide-toggle (change)="darkThemeChange($event)" [checked]="darkTheme == 'true'">
{{'profileField.name.darkTheme' | i18n}}
</mat-slide-toggle>
</a>
<mat-divider *ngIf="auth && auth.authenticated"></mat-divider>
<a *ngIf="auth && auth.authenticated" (click)="logout()" mat-menu-item>
<mat-icon>exit_to_app</mat-icon> {{'logout' | i18n}}
</a>
</mat-menu>
</ng-container>
</mat-toolbar>
<mat-sidenav-container>
<mat-sidenav #sidenav [mode]="isBiggerScreen() ? 'side' : 'over'" [(opened)]="opened"
(click)="!isBiggerScreen() && opened=false">
<mat-nav-list>
<a *ngIf="!auth || auth && !auth.authenticated" routerLink="/login" routerLinkActive="active" mat-list-item>
<mat-icon>login</mat-icon> {{'login' | i18n}}
</a>
<a *ngIf="auth && auth.authenticated" routerLink="/account/info" routerLinkActive="active" mat-list-item>
<mat-icon>account_circle</mat-icon> {{'account' | i18n}}
</a>
<a *ngIf="auth && auth.authenticated" routerLink="/services" routerLinkActive="active" mat-list-item>
<mat-icon>widgets</mat-icon> {{'services' | i18n}}
</a>
<a routerLink="/tokens" mat-list-item>
<mat-icon>card_giftcard</mat-icon> {{'tokens.redeem' | i18n}}
</a>
<a (click)="openExternal('https://wiki.bstly.de/services/webstly','_blank')" mat-list-item>
<mat-icon>help</mat-icon> {{'help' | i18n}}<mat-icon style="font-size: 1em;">open_in_new
</mat-icon>
</a>
<a (click)="openExternal('https://membership.bstly.de','_blank')" mat-list-item>
<mat-icon>shopping_cart</mat-icon> {{'tokens.get' | i18n}}<mat-icon style="font-size: 1em;">open_in_new
</mat-icon>
</a>
<a *ngIf="auth && auth.authenticated" (click)="logout()" mat-list-item>
<mat-icon>exit_to_app</mat-icon> {{'logout' | i18n}}
</a>
</mat-nav-list>
<span class="spacer"></span>
<mat-nav-list>
<a (click)="openExternal('https://www.bstly.de/imprint/')" mat-list-item style="font-size: 0.7em;">
{{'imprint' | i18n}}
</a>
<a (click)="openExternal('https://www.bstly.de/privacy-policy/#we.bstly')" mat-list-item style="font-size: 0.7em;">
{{'privacy-policy' | i18n}}
</a>
<a (click)="openExternal('https://www.bstly.de')" mat-list-item style="font-size: 0.7em;">
Bastelei e. V.
</a>
</mat-nav-list>
</mat-sidenav>
<!-- Main content -->
<mat-sidenav-content>
<div class="container">
<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>

12
src/app/app.module.ts
View File

@ -13,7 +13,7 @@ import { DatePipe } from '@angular/common';
import { AutofocusDirective } from './material/autofocus'; import { AutofocusDirective } from './material/autofocus';
import { I18nPipe } from './utils/i18n.pipe'; import { I18nPipe } from './utils/i18n.pipe';
import { ImprintComponent, PrivacyPolicyComponent, TermsOfServiceComponent } from './pages/general/general.component'; import { MainComponent } from './ui/main/main.component';
import { AccountComponent } from './pages/account/account.component'; import { AccountComponent } from './pages/account/account.component';
import { ServicesComponent } from './pages/services/services.component'; import { ServicesComponent } from './pages/services/services.component';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
@ -44,8 +44,11 @@ import { HtmlComponent } from './utils/html/html.component';
import { ConfirmDialog } from './ui/confirm/confirm.component' import { ConfirmDialog } from './ui/confirm/confirm.component'
import { UserComponent } from './pages/user/user.component' import { UserComponent } from './pages/user/user.component'
import { JitsiComponent, JitsiEditDialog, JitsiShareDialog } from './pages/jitsi/jitsi.component' import { JitsiComponent, JitsiEditDialog, JitsiShareDialog } from './pages/jitsi/jitsi.component'
import { ParteyComponent } from './pages/partey/partey.component'
import { ParteyTimeslotsComponent, ParteyTimeslotDialog } from './pages/partey/timeslots/timeslots.compontent' import { ParteyTimeslotsComponent, ParteyTimeslotDialog } from './pages/partey/timeslots/timeslots.compontent'
import { UrlShortenerComponent, UrlShortenerPasswordComponent, UrlShortenerShareDialog, UrlShortenerEditDialog } from './pages/urlshortener/urlshortener.component' import { UrlShortenerComponent, UrlShortenerPasswordComponent, UrlShortenerShareDialog, UrlShortenerEditDialog } from './pages/urlshortener/urlshortener.component'
import { DividerComponent } from './ui/divider/divider.component'
import { DividertestComponent } from './pages/dividertest/dividertest.component'
import { I18nService } from './services/i18n.service'; import { I18nService } from './services/i18n.service';
@ -71,8 +74,8 @@ export class XhrInterceptor implements HttpInterceptor {
declarations: [ declarations: [
AutofocusDirective, AutofocusDirective,
I18nPipe, I18nPipe,
MainComponent,
AppComponent, AppComponent,
ImprintComponent, PrivacyPolicyComponent, TermsOfServiceComponent,
AccountComponent, AccountComponent,
LoginComponent, LoginComponent,
FormLoginComponent, FormLoginComponent,
@ -103,9 +106,10 @@ export class XhrInterceptor implements HttpInterceptor {
ConfirmDialog, ConfirmDialog,
UserComponent, UserComponent,
JitsiComponent, JitsiEditDialog, JitsiShareDialog, JitsiComponent, JitsiEditDialog, JitsiShareDialog,
ParteyTimeslotsComponent, ParteyTimeslotDialog, ParteyComponent, ParteyTimeslotsComponent, ParteyTimeslotDialog,
MinetestAccountsComponent, MinetestAccountsComponent,
UrlShortenerComponent, UrlShortenerShareDialog, UrlShortenerEditDialog, UrlShortenerPasswordComponent UrlShortenerComponent, UrlShortenerShareDialog, UrlShortenerEditDialog, UrlShortenerPasswordComponent,
DividerComponent, DividertestComponent
], ],
imports: [ imports: [
BrowserModule, BrowserModule,

1
src/app/pages/dividertest/dividertest.component.html Normal file
View File

@ -0,0 +1 @@
<app-divider [dividerModel]="dividerModel"></app-divider>

0
src/app/pages/dividertest/dividertest.component.scss Normal file
View File

28
src/app/pages/dividertest/dividertest.component.ts Normal file
View File

@ -0,0 +1,28 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-dividertest',
templateUrl: './dividertest.component.html',
styleUrls: [ './dividertest.component.scss' ]
})
export class DividertestComponent implements OnInit {
dividerModel = {
free: 0,
items: [ { name: "mail", value: 5 }, { name: "nextcloud", value: 15 } ],
unit: 'M',
units: [
{ name: "G", value: 1, steps: 0.5 },
{ name: "M", value: 1024, steps: 1 },
{ name: "K", value: 1024 * 1024, steps: 10 },
{ name: "B", value: 1024 * 1024 * 1024, steps: 100 }
]
};
constructor() { }
ngOnInit(): void {
}
}

43
src/app/pages/general/general.component.ts
View File

@ -1,43 +0,0 @@
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-imprint',
templateUrl: './general.imprint.html'
})
export class ImprintComponent implements OnInit {
constructor() {
}
ngOnInit(): void {
}
}
@Component({
selector: 'app-privacy-policy',
templateUrl: './general.privacy-policy.html'
})
export class PrivacyPolicyComponent implements OnInit {
constructor() {
}
ngOnInit(): void {
}
}
@Component({
selector: 'app-terms-of-service',
templateUrl: './general.terms-of-service.html'
})
export class TermsOfServiceComponent implements OnInit {
constructor() {
}
ngOnInit(): void {
}
}

1
src/app/pages/general/general.imprint.html
View File

@ -1 +0,0 @@
<app-html [template]="'imprint'"></app-html>

1
src/app/pages/general/general.privacy-policy.html
View File

@ -1 +0,0 @@
<app-html [template]="'privacy-policy'"></app-html>

1
src/app/pages/general/general.terms-of-service.html
View File

@ -1 +0,0 @@
<app-html [template]="'terms-of-service'"></app-html>

10
src/app/pages/partey/partey.component.html Normal file
View File

@ -0,0 +1,10 @@
<h3>{{'partey.tags' | i18n}}</h3>
<p *ngIf="!tags || tags.length == 0">{{'partey.tags.none' | i18n}}</p>
<mat-chip-list>
<mat-chip *ngFor="let tag of tags">{{tag.tag}}</mat-chip>
</mat-chip-list>
<app-partey-timeslots></app-partey-timeslots>

0
src/app/pages/partey/partey.component.scss Normal file
View File

24
src/app/pages/partey/partey.component.ts Normal file
View File

@ -0,0 +1,24 @@
import { Component, OnInit } from '@angular/core';
import { ParteyTagsService } from '../../services/partey.service';
@Component({
selector: 'app-partey',
templateUrl: './partey.component.html',
styleUrls: [ './partey.component.scss' ]
})
export class ParteyComponent implements OnInit {
tags;
constructor(private parteyTagsService: ParteyTagsService) {
}
ngOnInit(): void {
this.parteyTagsService.get().subscribe((data: any[]) => {
this.tags = data;
})
}
}

2
src/app/pages/partey/timeslots/timeslots.compontent.ts
View File

@ -8,7 +8,7 @@ import { FormControl } from '@angular/forms';
import { debounceTime } from 'rxjs/operators'; import { debounceTime } from 'rxjs/operators';
import { PageEvent } from '@angular/material/paginator'; import { PageEvent } from '@angular/material/paginator';
import { ParteyTimeslotsService } from '../../../services/partey.timeslots.service'; import { ParteyTimeslotsService } from '../../../services/partey.service';
import { ConfirmDialog } from '../../../ui/confirm/confirm.component'; import { ConfirmDialog } from '../../../ui/confirm/confirm.component';
import { I18nService } from './../../../services/i18n.service'; import { I18nService } from './../../../services/i18n.service';
import { AuthService } from './../../../services/auth.service'; import { AuthService } from './../../../services/auth.service';

6
src/app/pages/user/user.component.html
View File

@ -2,7 +2,11 @@
<mat-progress-bar *ngIf="!success && !error" mode="indeterminate"></mat-progress-bar> <mat-progress-bar *ngIf="!success && !error" mode="indeterminate"></mat-progress-bar>
<div *ngIf="success"> <div *ngIf="success">
<h3>{{model.username}} <small *ngIf="isMe">{{'user.isMe' | i18n}}</small></h3> <h3>{{model.username}}
<button *ngIf="isMe" mat-icon-button color="accent">
<mat-icon>star</mat-icon>
</button>
</h3>
<app-profilefields [username]="model.username"></app-profilefields> <app-profilefields [username]="model.username"></app-profilefields>
<div *ngIf="model.aliases && model.aliases.length > 0"> <div *ngIf="model.aliases && model.aliases.length > 0">
<h4>{{'user.aliases' | i18n}}</h4> <h4>{{'user.aliases' | i18n}}</h4>

9
src/app/pages/user/user.component.ts
View File

@ -27,14 +27,15 @@ export class UserComponent implements OnInit {
this.profileService.getForUser(this.username).subscribe((data: any) => { this.profileService.getForUser(this.username).subscribe((data: any) => {
this.success = true; this.success = true;
this.model = data; this.model = data;
this.authService.auth.subscribe((auth: any) => {
this.isMe = auth && auth.principal && auth.principal.username == this.model.username;
});
}, error => { }, error => {
this.error = error; this.error = error;
}) })
this.authService.auth.subscribe((auth: any) => {
this.isMe = auth && auth.principal && auth.principal.username == this.username;
console.log(this.isMe, auth);
});
} }

16
src/app/services/partey.timeslots.service.ts → src/app/services/partey.service.ts
View File

@ -67,3 +67,19 @@ export class ParteyTimeslotsService {
} }
} }
@Injectable({
providedIn: 'root',
})
export class ParteyTagsService {
constructor(private http: HttpClient) {
}
get() {
return this.http.get(environment.apiUrl + "/partey/tags");
}
}

13
src/app/ui/divider/divider.component.html Normal file
View File

@ -0,0 +1,13 @@
<p>free: {{toCurrentUnit(dividerModel.free)}}{{unit.name}}</p>
<mat-select [(ngModel)]="unit">
<mat-option *ngFor="let item of dividerModel.units" [value]="item">{{item.name}}</mat-option>
</mat-select>
<div *ngFor="let item of dividerModel.items">
<label>{{item.name}}: {{toCurrentUnit(item.value)}}{{unit.name}}</label>
<mat-slider [max]="toCurrentUnit(dividerModel.free + item.value)" min=0 [step]="unit.steps" [value]="toCurrentUnit(item.value)" thumbLabel
tickInterval="5" (change)="updateValue($event, item)">
</mat-slider>
</div>

3
src/app/ui/divider/divider.component.scss Normal file
View File

@ -0,0 +1,3 @@
mat-slider {
display: block;
}

36
src/app/ui/divider/divider.component.ts Normal file
View File

@ -0,0 +1,36 @@
import { Component, OnInit, Input } from '@angular/core';
import { I18nService } from '../../services/i18n.service';
@Component({
selector: 'app-divider',
templateUrl: './divider.component.html',
styleUrls: [ './divider.component.scss' ]
})
export class DividerComponent implements OnInit {
@Input() dividerModel;
unit;
constructor(private i18n: I18nService) { }
ngOnInit(): void {
this.unit = this.dividerModel.units.find(unit => unit.name == this.dividerModel.unit);
}
toCurrentUnit(value) {
return this.unit.value * value;
}
fromCurrentUnit(value) {
return value / this.unit.value;
}
updateValue($event, item) {
const value = this.fromCurrentUnit($event.value);
const diff = item.value - value;
item.value = value;
this.dividerModel.free += diff;
}
}

86
src/app/ui/main/main.component.html Normal file
View File

@ -0,0 +1,86 @@
<mat-toolbar color="primary">
<a href="javascript:" mat-icon-button>
<mat-icon (click)="sidenav.toggle()">menu</mat-icon>
</a>
<mat-icon svgIcon="logo"></mat-icon>
<span>
we.bstly
</span>
<span class="spacer"></span>
<ng-container>
<button mat-button [matMenuTriggerFor]="menu">
<mat-icon>settings</mat-icon>
<mat-icon>arrow_drop_down</mat-icon>
</button>
<mat-menu #menu="matMenu">
<a *ngIf="!auth || auth && !auth.authenticated" routerLink="/login" routerLinkActive="active" mat-menu-item>
<mat-icon>login</mat-icon> {{'login' | i18n}}
</a>
<mat-divider *ngIf="!auth || auth && !auth.authenticated"></mat-divider>
<a *ngFor="let locale of locales" mat-menu-item (click)="setLocale(locale)">{{'locale.' + locale + '.long' |
i18n}} <mat-icon inline=true *ngIf="locale == currentLocale">done</mat-icon></a>
<a mat-menu-item>
<mat-slide-toggle (change)="darkThemeChange($event)" [checked]="darkTheme == 'true'">
{{'profileField.name.darkTheme' | i18n}}
</mat-slide-toggle>
</a>
<mat-divider *ngIf="auth && auth.authenticated"></mat-divider>
<a *ngIf="auth && auth.authenticated" (click)="logout()" mat-menu-item>
<mat-icon>exit_to_app</mat-icon> {{'logout' | i18n}}
</a>
</mat-menu>
</ng-container>
</mat-toolbar>
<mat-sidenav-container>
<mat-sidenav #sidenav [mode]="isBiggerScreen() ? 'side' : 'over'" [(opened)]="opened"
(click)="!isBiggerScreen() && opened=false">
<mat-nav-list>
<a *ngIf="!auth || auth && !auth.authenticated" routerLink="/login" routerLinkActive="active" mat-list-item>
<mat-icon>login</mat-icon> {{'login' | i18n}}
</a>
<a *ngIf="auth && auth.authenticated" routerLink="/account/info" routerLinkActive="active" mat-list-item>
<mat-icon>account_circle</mat-icon> {{'account' | i18n}}
</a>
<a *ngIf="auth && auth.authenticated" routerLink="/services" routerLinkActive="active" mat-list-item>
<mat-icon>widgets</mat-icon> {{'services' | i18n}}
</a>
<a routerLink="/tokens" mat-list-item>
<mat-icon>card_giftcard</mat-icon> {{'tokens.redeem' | i18n}}
</a>
<a (click)="openExternal('https://wiki.bstly.de/services/webstly','_blank')" mat-list-item>
<mat-icon>help</mat-icon> {{'help' | i18n}}<mat-icon style="font-size: 1em;">open_in_new
</mat-icon>
</a>
<a (click)="openExternal('https://membership.bstly.de','_blank')" mat-list-item>
<mat-icon>shopping_cart</mat-icon> {{'tokens.get' | i18n}}<mat-icon style="font-size: 1em;">open_in_new
</mat-icon>
</a>
<a *ngIf="auth && auth.authenticated" (click)="logout()" mat-list-item>
<mat-icon>exit_to_app</mat-icon> {{'logout' | i18n}}
</a>
</mat-nav-list>
<span class="spacer"></span>
<mat-nav-list>
<a (click)="openExternal('https://www.bstly.de/imprint/')" mat-list-item style="font-size: 0.7em;">
{{'imprint' | i18n}}
</a>
<a (click)="openExternal('https://www.bstly.de/privacy-policy/#we.bstly')" mat-list-item style="font-size: 0.7em;">
{{'privacy-policy' | i18n}}
</a>
<a (click)="openExternal('https://www.bstly.de')" mat-list-item style="font-size: 0.7em;">
Bastelei e. V.
</a>
</mat-nav-list>
</mat-sidenav>
<!-- Main content -->
<mat-sidenav-content>
<div class="container">
<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>

0
src/app/ui/main/main.component.scss Normal file
View File

144
src/app/ui/main/main.component.ts Normal file
View File

@ -0,0 +1,144 @@
import {Component, HostListener} from '@angular/core';
import {AuthService} from '../../services/auth.service';
import {I18nService} from '../../services/i18n.service';
import {ProfileService} from '../../services/profile.service';
import {Router} from '@angular/router';
import {DomSanitizer} from '@angular/platform-browser';
import {MatIconRegistry} from '@angular/material/icon';
import {DateAdapter} from '@angular/material/core';
@Component({
selector: 'app-main',
templateUrl: './main.component.html',
styleUrls: ['./main.component.scss']
})
export class MainComponent {
opened = true;
darkTheme = "false";
title = 'we.bstly';
currentLocale: String;
datetimeformat: String;
locales;
auth;
constructor(
private i18n: I18nService,
private authService: AuthService,
private profileService: ProfileService,
private router: Router,
private iconRegistry: MatIconRegistry,
private sanitizer: DomSanitizer,
private _adapter: DateAdapter<any>) {
iconRegistry.addSvgIcon('logo', sanitizer.bypassSecurityTrustResourceUrl('assets/icons/logo.svg'));
}
ngOnInit() {
this.datetimeformat = this.i18n.get('format.datetime', []);
this.currentLocale = this.i18n.getLocale();
this.locales = this.i18n.getLocales();
this.authService.auth.subscribe(data => {
this.auth = data;
})
this._adapter.setLocale(this.currentLocale);
const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if(width < 768) {
this.opened = false;
} else {
this.opened = true;
}
if(localStorage.getItem("bstly.darkTheme") == "true") {
this.darkTheme = "true";
window.document.body.classList.add("dark-theme");
}
}
setLocale(locale) {
localStorage.setItem("bstly.locale", locale);
if(this.auth && this.auth.authenticated) {
this.profileService.getField("locale").subscribe((profileField: any) => {
if(profileField == null) {
profileField = {
"name": "locale",
"type": "TEXT",
"visibility": "PRIVATE"
}
}
profileField.value = locale;
this.profileService.createOrUpdate(profileField).subscribe((response) => {
window.location.reload();
})
})
} else {
window.location.reload();
}
}
darkThemeChange($event) {
if($event.checked) {
this.darkTheme = "true";
} else {
this.darkTheme = "false";
}
localStorage.setItem("bstly.darkTheme", this.darkTheme);
if(this.auth && this.auth.authenticated) {
this.profileService.getField("darkTheme").subscribe((profileField: any) => {
if(profileField == null) {
profileField = {
"name": "darkTheme",
"type": "BOOL",
"visibility": "PRIVATE"
}
}
profileField.value = this.darkTheme;
this.profileService.createOrUpdate(profileField).subscribe((response) => {
window.location.reload();
})
})
} else {
window.location.reload();
}
}
logout() {
this.authService.logout().subscribe(data => {
this.router.navigate([""]).then(() => {
window.location.reload();
});
})
}
isBiggerScreen() {
const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if(width < 768) {
return false;
} else {
return true;
}
}
openExternal(url, target = '_self') {
window.open(url, target);
}
@HostListener('window:resize', ['$event'])
onResize(event) {
if(event.target.innerWidth < 768) {
this.opened = false;
} else {
this.opened = true;
}
}
}

3
src/environments/environment.ts
View File

@ -4,7 +4,8 @@
export const environment = { export const environment = {
production: false, production: false,
apiUrl : 'http://localhost:9000' // apiUrl : 'http://localhost:9000',
apiUrl : 'https://api.bstly.lh8.de',
}; };
/* /*

20
src/styles.scss
View File

@ -83,13 +83,26 @@ body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
} }
app-root { app-root, app-main {
height: 100%; height: 100%;
max-height: 100%; max-height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
app-root {
padding: 15px;
background-color: #fafafa;
}
app-main {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
mat-card { mat-card {
max-width: 400px; max-width: 400px;
margin: 2em auto; margin: 2em auto;
@ -280,6 +293,11 @@ table {
.dark-theme { .dark-theme {
app-root {
background-color: #303030;
}
table { table {
background: #424242; background: #424242;