From 1c0be5e1ea25e6eed80e69f6b6bab8d114e87775 Mon Sep 17 00:00:00 2001 From: _Bastler <_Bastler@bstly.de> Date: Thu, 23 Sep 2021 13:53:08 +0200 Subject: [PATCH] update navigation + profile --- src/app/app-routing.module.ts | 125 +++++++-------- src/app/app.component.html | 89 +---------- src/app/app.module.ts | 12 +- .../dividertest/dividertest.component.html | 1 + .../dividertest/dividertest.component.scss | 0 .../dividertest/dividertest.component.ts | 28 ++++ src/app/pages/general/general.component.ts | 43 ------ src/app/pages/general/general.imprint.html | 1 - .../pages/general/general.privacy-policy.html | 1 - .../general/general.terms-of-service.html | 1 - src/app/pages/partey/partey.component.html | 10 ++ src/app/pages/partey/partey.component.scss | 0 src/app/pages/partey/partey.component.ts | 24 +++ .../partey/timeslots/timeslots.compontent.ts | 2 +- src/app/pages/user/user.component.html | 6 +- src/app/pages/user/user.component.ts | 9 +- ...timeslots.service.ts => partey.service.ts} | 16 ++ src/app/ui/divider/divider.component.html | 13 ++ src/app/ui/divider/divider.component.scss | 3 + src/app/ui/divider/divider.component.ts | 36 +++++ src/app/ui/main/main.component.html | 86 +++++++++++ src/app/ui/main/main.component.scss | 0 src/app/ui/main/main.component.ts | 144 ++++++++++++++++++ src/environments/environment.ts | 3 +- src/styles.scss | 20 ++- 25 files changed, 469 insertions(+), 204 deletions(-) create mode 100644 src/app/pages/dividertest/dividertest.component.html create mode 100644 src/app/pages/dividertest/dividertest.component.scss create mode 100644 src/app/pages/dividertest/dividertest.component.ts delete mode 100644 src/app/pages/general/general.component.ts delete mode 100644 src/app/pages/general/general.imprint.html delete mode 100644 src/app/pages/general/general.privacy-policy.html delete mode 100644 src/app/pages/general/general.terms-of-service.html create mode 100644 src/app/pages/partey/partey.component.html create mode 100644 src/app/pages/partey/partey.component.scss create mode 100644 src/app/pages/partey/partey.component.ts rename src/app/services/{partey.timeslots.service.ts => partey.service.ts} (90%) create mode 100644 src/app/ui/divider/divider.component.html create mode 100644 src/app/ui/divider/divider.component.scss create mode 100644 src/app/ui/divider/divider.component.ts create mode 100644 src/app/ui/main/main.component.html create mode 100644 src/app/ui/main/main.component.scss create mode 100644 src/app/ui/main/main.component.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 36b302e..32b8783 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,69 +1,74 @@ -import {NgModule} from '@angular/core'; -import {Routes, RouterModule} from '@angular/router'; +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; -import {AuthGuard, AuthUpdateGuard, AuthenticatedGuard, AnonymousGuard} from './auth/auth.guard'; -import {ImprintComponent, PrivacyPolicyComponent, TermsOfServiceComponent} from './pages/general/general.component'; -import {FormLoginComponent} from './pages/form-login/form-login.component'; -import {FormLogin2FAComponent} from './pages/form-login-2fa/form-login-2fa.component'; -import {PasswordComponent} from './pages/password/password.component'; -import {PasswordResetComponent} from './pages/password-reset/password-reset.component'; -import {AccountComponent} from './pages/account/account.component'; -import {RegisterComponent} from './pages/register/register.component'; -import {TokensComponent} from './pages/tokens/tokens.component'; -import {ServicesComponent} from './pages/services/services.component'; -import {InfoComponent} from './pages/account/info/info.component'; -import {ProfileComponent} from './pages/account/profile/profile.component'; -import {VoucherComponent} from './pages/account/voucher/voucher.component'; -import {SecurityComponent} from './pages/account/security/security.component'; -import {UnavailableComponent} from './pages/unavailable/unavailable.component'; -import {NotfoundComponent} from './pages/notfound/notfound.component'; -import {UserComponent} from './pages/user/user.component' -import {JitsiComponent} from './pages/jitsi/jitsi.component' -import {ParteyTimeslotsComponent} from './pages/partey/timeslots/timeslots.compontent' -import {AliasesComponent} from './pages/account/aliases/aliases.component'; -import {DomainsComponent} from './pages/account/domains/domains.component'; -import {InvitesComponent} from './pages/invites/invites.component'; -import {UrlShortenerComponent, UrlShortenerPasswordComponent} from './pages/urlshortener/urlshortener.component'; -import {MinetestAccountsComponent} from './pages/minetest/accounts/accounts.component'; +import { AuthGuard, AuthUpdateGuard, AuthenticatedGuard, AnonymousGuard } from './auth/auth.guard'; +import { MainComponent } from './ui/main/main.component'; +import { FormLoginComponent } from './pages/form-login/form-login.component'; +import { FormLogin2FAComponent } from './pages/form-login-2fa/form-login-2fa.component'; +import { PasswordComponent } from './pages/password/password.component'; +import { PasswordResetComponent } from './pages/password-reset/password-reset.component'; +import { AccountComponent } from './pages/account/account.component'; +import { RegisterComponent } from './pages/register/register.component'; +import { TokensComponent } from './pages/tokens/tokens.component'; +import { ServicesComponent } from './pages/services/services.component'; +import { InfoComponent } from './pages/account/info/info.component'; +import { ProfileComponent } from './pages/account/profile/profile.component'; +import { VoucherComponent } from './pages/account/voucher/voucher.component'; +import { SecurityComponent } from './pages/account/security/security.component'; +import { UnavailableComponent } from './pages/unavailable/unavailable.component'; +import { NotfoundComponent } from './pages/notfound/notfound.component'; +import { UserComponent } from './pages/user/user.component' +import { JitsiComponent } from './pages/jitsi/jitsi.component' +import { ParteyComponent } from './pages/partey/partey.component' +import { ParteyTimeslotsComponent } from './pages/partey/timeslots/timeslots.compontent' +import { AliasesComponent } from './pages/account/aliases/aliases.component'; +import { DomainsComponent } from './pages/account/domains/domains.component'; +import { InvitesComponent } from './pages/invites/invites.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 = [ - {path: '', redirectTo: "/services", pathMatch: 'full'}, - {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: 'profile/:username', component: UserComponent, canActivate: [ AuthUpdateGuard ] }, { - path: 'account', component: AccountComponent, canActivate: [AuthenticatedGuard], children: [ - - {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: '', component: MainComponent, children: [ + { path: '', redirectTo: "/services", pathMatch: 'full' }, + { 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: '', 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({ - imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload', relativeLinkResolution: 'legacy'})], - exports: [RouterModule] + imports: [ RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload', relativeLinkResolution: 'legacy' }) ], + exports: [ RouterModule ] }) -export class AppRoutingModule {} +export class AppRoutingModule { } diff --git a/src/app/app.component.html b/src/app/app.component.html index 1acc04c..3d8d544 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,86 +1,3 @@ - - - menu - - - - we.bstly - - - - - - - - login {{'login' | i18n}} - - - {{'locale.' + locale + '.long' | - i18n}} done - - - {{'profileField.name.darkTheme' | i18n}} - - - - - exit_to_app {{'logout' | i18n}} - - - - - - - - - - login {{'login' | i18n}} - - - account_circle {{'account' | i18n}} - - - widgets {{'services' | i18n}} - - - card_giftcard {{'tokens.redeem' | i18n}} - - - help {{'help' | i18n}}open_in_new - - - - shopping_cart {{'tokens.get' | i18n}}open_in_new - - - - exit_to_app {{'logout' | i18n}} - - - - - - - - {{'imprint' | i18n}} - - - {{'privacy-policy' | i18n}} - - - Bastelei e. V. - - - - - - -
- -
- - \ No newline at end of file + + + \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 7b921e5..1d9799e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -13,7 +13,7 @@ import { DatePipe } from '@angular/common'; import { AutofocusDirective } from './material/autofocus'; 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 { ServicesComponent } from './pages/services/services.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 { UserComponent } from './pages/user/user.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 { 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'; @@ -71,8 +74,8 @@ export class XhrInterceptor implements HttpInterceptor { declarations: [ AutofocusDirective, I18nPipe, + MainComponent, AppComponent, - ImprintComponent, PrivacyPolicyComponent, TermsOfServiceComponent, AccountComponent, LoginComponent, FormLoginComponent, @@ -103,9 +106,10 @@ export class XhrInterceptor implements HttpInterceptor { ConfirmDialog, UserComponent, JitsiComponent, JitsiEditDialog, JitsiShareDialog, - ParteyTimeslotsComponent, ParteyTimeslotDialog, + ParteyComponent, ParteyTimeslotsComponent, ParteyTimeslotDialog, MinetestAccountsComponent, - UrlShortenerComponent, UrlShortenerShareDialog, UrlShortenerEditDialog, UrlShortenerPasswordComponent + UrlShortenerComponent, UrlShortenerShareDialog, UrlShortenerEditDialog, UrlShortenerPasswordComponent, + DividerComponent, DividertestComponent ], imports: [ BrowserModule, diff --git a/src/app/pages/dividertest/dividertest.component.html b/src/app/pages/dividertest/dividertest.component.html new file mode 100644 index 0000000..6f90c03 --- /dev/null +++ b/src/app/pages/dividertest/dividertest.component.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/pages/dividertest/dividertest.component.scss b/src/app/pages/dividertest/dividertest.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pages/dividertest/dividertest.component.ts b/src/app/pages/dividertest/dividertest.component.ts new file mode 100644 index 0000000..ecb3950 --- /dev/null +++ b/src/app/pages/dividertest/dividertest.component.ts @@ -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 { + + } + +} diff --git a/src/app/pages/general/general.component.ts b/src/app/pages/general/general.component.ts deleted file mode 100644 index 543448e..0000000 --- a/src/app/pages/general/general.component.ts +++ /dev/null @@ -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 { - } - -} \ No newline at end of file diff --git a/src/app/pages/general/general.imprint.html b/src/app/pages/general/general.imprint.html deleted file mode 100644 index b8ad493..0000000 --- a/src/app/pages/general/general.imprint.html +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/app/pages/general/general.privacy-policy.html b/src/app/pages/general/general.privacy-policy.html deleted file mode 100644 index 04b82b7..0000000 --- a/src/app/pages/general/general.privacy-policy.html +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/app/pages/general/general.terms-of-service.html b/src/app/pages/general/general.terms-of-service.html deleted file mode 100644 index e29c572..0000000 --- a/src/app/pages/general/general.terms-of-service.html +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/app/pages/partey/partey.component.html b/src/app/pages/partey/partey.component.html new file mode 100644 index 0000000..6ef279f --- /dev/null +++ b/src/app/pages/partey/partey.component.html @@ -0,0 +1,10 @@ +

{{'partey.tags' | i18n}}

+ +

{{'partey.tags.none' | i18n}}

+ + + {{tag.tag}} + + + + \ No newline at end of file diff --git a/src/app/pages/partey/partey.component.scss b/src/app/pages/partey/partey.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pages/partey/partey.component.ts b/src/app/pages/partey/partey.component.ts new file mode 100644 index 0000000..3cbeb83 --- /dev/null +++ b/src/app/pages/partey/partey.component.ts @@ -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; + }) + } + +} \ No newline at end of file diff --git a/src/app/pages/partey/timeslots/timeslots.compontent.ts b/src/app/pages/partey/timeslots/timeslots.compontent.ts index d178057..1b6426e 100644 --- a/src/app/pages/partey/timeslots/timeslots.compontent.ts +++ b/src/app/pages/partey/timeslots/timeslots.compontent.ts @@ -8,7 +8,7 @@ import { FormControl } from '@angular/forms'; import { debounceTime } from 'rxjs/operators'; 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 { I18nService } from './../../../services/i18n.service'; import { AuthService } from './../../../services/auth.service'; diff --git a/src/app/pages/user/user.component.html b/src/app/pages/user/user.component.html index a30ccdf..d78e16a 100644 --- a/src/app/pages/user/user.component.html +++ b/src/app/pages/user/user.component.html @@ -2,7 +2,11 @@
-

{{model.username}} {{'user.isMe' | i18n}}

+

{{model.username}} + +

{{'user.aliases' | i18n}}

diff --git a/src/app/pages/user/user.component.ts b/src/app/pages/user/user.component.ts index bb66bbe..522d13f 100644 --- a/src/app/pages/user/user.component.ts +++ b/src/app/pages/user/user.component.ts @@ -27,14 +27,15 @@ export class UserComponent implements OnInit { this.profileService.getForUser(this.username).subscribe((data: any) => { this.success = true; this.model = data; + + this.authService.auth.subscribe((auth: any) => { + this.isMe = auth && auth.principal && auth.principal.username == this.model.username; + }); }, 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); - }); + } diff --git a/src/app/services/partey.timeslots.service.ts b/src/app/services/partey.service.ts similarity index 90% rename from src/app/services/partey.timeslots.service.ts rename to src/app/services/partey.service.ts index 66e0cae..7b52931 100644 --- a/src/app/services/partey.timeslots.service.ts +++ b/src/app/services/partey.service.ts @@ -66,4 +66,20 @@ export class ParteyTimeslotsService { return this.http.delete(environment.apiUrl + "/partey/timeslots/" + id); } +} + + + +@Injectable({ + providedIn: 'root', +}) +export class ParteyTagsService { + + constructor(private http: HttpClient) { + } + + get() { + return this.http.get(environment.apiUrl + "/partey/tags"); + } + } \ No newline at end of file diff --git a/src/app/ui/divider/divider.component.html b/src/app/ui/divider/divider.component.html new file mode 100644 index 0000000..4138a36 --- /dev/null +++ b/src/app/ui/divider/divider.component.html @@ -0,0 +1,13 @@ +

free: {{toCurrentUnit(dividerModel.free)}}{{unit.name}}

+ + + + {{item.name}} + + +
+ + + +
\ No newline at end of file diff --git a/src/app/ui/divider/divider.component.scss b/src/app/ui/divider/divider.component.scss new file mode 100644 index 0000000..c22e753 --- /dev/null +++ b/src/app/ui/divider/divider.component.scss @@ -0,0 +1,3 @@ +mat-slider { + display: block; +} \ No newline at end of file diff --git a/src/app/ui/divider/divider.component.ts b/src/app/ui/divider/divider.component.ts new file mode 100644 index 0000000..02bd5e8 --- /dev/null +++ b/src/app/ui/divider/divider.component.ts @@ -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; + } + +} diff --git a/src/app/ui/main/main.component.html b/src/app/ui/main/main.component.html new file mode 100644 index 0000000..1acc04c --- /dev/null +++ b/src/app/ui/main/main.component.html @@ -0,0 +1,86 @@ + + + menu + + + + we.bstly + + + + + + + + login {{'login' | i18n}} + + + {{'locale.' + locale + '.long' | + i18n}} done + + + {{'profileField.name.darkTheme' | i18n}} + + + + + exit_to_app {{'logout' | i18n}} + + + + + + + + + + login {{'login' | i18n}} + + + account_circle {{'account' | i18n}} + + + widgets {{'services' | i18n}} + + + card_giftcard {{'tokens.redeem' | i18n}} + + + help {{'help' | i18n}}open_in_new + + + + shopping_cart {{'tokens.get' | i18n}}open_in_new + + + + exit_to_app {{'logout' | i18n}} + + + + + + + + {{'imprint' | i18n}} + + + {{'privacy-policy' | i18n}} + + + Bastelei e. V. + + + + + + +
+ +
+ + \ No newline at end of file diff --git a/src/app/ui/main/main.component.scss b/src/app/ui/main/main.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/ui/main/main.component.ts b/src/app/ui/main/main.component.ts new file mode 100644 index 0000000..19ea496 --- /dev/null +++ b/src/app/ui/main/main.component.ts @@ -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) { + 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; + } + } +} \ No newline at end of file diff --git a/src/environments/environment.ts b/src/environments/environment.ts index 5407671..d263ddc 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -4,7 +4,8 @@ export const environment = { production: false, - apiUrl : 'http://localhost:9000' + // apiUrl : 'http://localhost:9000', + apiUrl : 'https://api.bstly.lh8.de', }; /* diff --git a/src/styles.scss b/src/styles.scss index fc2cd2c..6996701 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -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; } -app-root { +app-root, app-main { height: 100%; max-height: 100%; display: flex; flex-direction: column; } +app-root { + padding: 15px; + background-color: #fafafa; +} + +app-main { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + mat-card { max-width: 400px; margin: 2em auto; @@ -280,6 +293,11 @@ table { .dark-theme { + + app-root { + background-color: #303030; + } + table { background: #424242;