WIP profile page

pull/8/head
FlayInAHook 4 years ago
parent e840d8d507
commit 18f64b1c55

@ -12,10 +12,12 @@ import { LendingStationsComponent } from './pages/tables/lending-stations/lendin
import { ParticipantsComponent } from './pages/tables/participants/participants.component';
import { TimeFramesComponent } from './pages/tables/time-frames/time-frames.component';
import {AuthGuard} from './helper/auth.guard';
import { ProfileComponent } from './pages/profile/profile.component';
const routes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'tableOverview', component: TableOverviewComponent, canActivate: [AuthGuard]},
{ path: 'profile', component: ProfileComponent, canActivate: [AuthGuard]},
{ path: 'table/bikes', component: BikesComponent, canActivate: [AuthGuard] },
{ path: 'bike/:id', component: BikeComponent, canActivate: [AuthGuard] },
{ path: 'table/participants', component: ParticipantsComponent, canActivate: [AuthGuard] },

@ -65,6 +65,7 @@ import { DateRangeCellComponent } from './components/tableComponents/date-range-
import { SelectObjectDialogComponent } from './components/select-object-dialog/select-object-dialog.component';
import { AutocompleteSelectComponent } from './components/autocomplete-select/autocomplete-select.component';
import { LendingStationComponent } from './pages/dataPages/lending-station/lending-station.component';
import { ProfileComponent } from './pages/profile/profile.component';
@ -94,6 +95,7 @@ import { LendingStationComponent } from './pages/dataPages/lending-station/lendi
SelectObjectDialogComponent,
AutocompleteSelectComponent,
LendingStationComponent,
ProfileComponent,
],
imports: [
BrowserModule,

@ -1,4 +1,4 @@
<div (click)="testSnackBar()">
<div routerLink = "/profile" >
<img class="navbar-photo" src={{profileURL}}>
<p>{{name}}</p>
<p>{{email}}</p>

@ -1,4 +1,71 @@
<app-table
<div id="login-form">
<h1>Profil aktualisieren</h1>
<mat-form-field (keyup.enter)="login()">
<mat-label>Aktuelles Passwort</mat-label>
<input
matInput
[type]="hide ? 'password' : 'text'"
[formControl]="password"
/>
<mat-error *ngIf="password.hasError('required')">
Bitte geben Sie Ihr Passwort ein.
</mat-error>
<button
mat-icon-button
matSuffix
(click)="hide = !hide"
[attr.aria-label]="'Hide password'"
[attr.aria-pressed]="hide"
>
<mat-icon>{{ hide ? "visibility_off" : "visibility" }}</mat-icon>
</button>
</mat-form-field>
<mat-form-field (keyup.enter)="login()">
<mat-label>E-Mail-Adresse eingeben</mat-label>
<input matInput placeholder="fLotte@beispiel.de" [formControl]="email" />
<mat-error *ngIf="email.hasError('required')">
Bitte geben Sie eine E-Mail-Adresse ein.
</mat-error>
<mat-error *ngIf="email.hasError('email')">
Bitte geben Sie eine valide E-Mail-Adresse ein.
</mat-error>
</mat-form-field>
<mat-form-field (keyup.enter)="login()">
<mat-label>Passwort eingeben</mat-label>
<input
matInput
[type]="hide ? 'password' : 'text'"
[formControl]="password"
/>
<mat-error *ngIf="password.hasError('required')">
Bitte geben Sie Ihr Passwort ein.
</mat-error>
<button
mat-icon-button
matSuffix
(click)="hide = !hide"
[attr.aria-label]="'Hide password'"
[attr.aria-pressed]="hide"
>
<mat-icon>{{ hide ? "visibility_off" : "visibility" }}</mat-icon>
</button>
</mat-form-field>
<mat-progress-bar mode="indeterminate" id="loading-bar" *ngIf="loading"></mat-progress-bar>
<button mat-stroked-button color="primary" (click)="login()">
Login
</button>
<mat-error class="login-error-message" *ngIf="errorOccurred">
{{errorMessage}}
</mat-error>
</div>
<!--<app-table
[headline]="headline"
[columnInfo]="columnInfo"
[dataService]="dataService"
@ -10,4 +77,4 @@
(saveEvent)="save($event)"
(cancelEvent)="cancel($event)"
(deleteEvent)="delete($event)"
></app-table>
></app-table>-->

@ -0,0 +1,18 @@
#login-form {
display: flex;
flex-direction: column;
max-width: 32em;
min-width: 5em;
margin: auto;
margin-top: 3em;
padding: 1em;
.mat-form-field {
margin: 0.5em 0;
}
#loading-bar {
margin-bottom: 1em;
}
.login-error-message {
margin-top: 0.5em;
}
}

@ -1,4 +1,7 @@
import { Component, OnInit } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { AuthService } from 'src/app/services/auth.service';
import { BikesService } from '../../services/bikes.service';
@Component({
@ -7,149 +10,41 @@ import { BikesService } from '../../services/bikes.service';
styleUrls: ['./profile.component.scss'],
})
export class ProfileComponent implements OnInit {
columnInfo = [
{
dataPath: 'name',
translation: 'Name',
sticky: true,
link: (row: any) => {
return '/bike/' + row.id;
},
},
{ dataPath: 'id', translation: 'ID', readonly: true },
{ dataPath: 'group', translation: 'Gruppe' },
{ dataPath: 'modelName', translation: 'Modell' },
{
dataPath: 'insuranceData.billing',
translation: 'Versicherung Abrechnung',
},
{ dataPath: 'insuranceData.hasFixedRate', translation: 'Pauschale j/n' },
{ dataPath: 'insuranceData.fixedRate', translation: 'Pauschale Betrag' },
{ dataPath: 'insuranceData.name', translation: 'Versicherer' },
{ dataPath: 'insuranceData.benefactor', translation: 'Kostenträger' },
{ dataPath: 'insuranceData.noPnP', translation: 'Nr. P&P' },
{
dataPath: 'insuranceData.maintenanceResponsible',
translation: 'Wartung zuständig',
},
{
dataPath: 'insuranceData.maintenanceBenefactor',
translation: 'Wartung Kostenträger',
},
{
dataPath: 'insuranceData.maintenanceAgreement',
translation: 'Wartungsvereinbarung',
},
{
dataPath: 'insuranceData.projectAllowance',
translation: 'Projektzuschuss',
},
{ dataPath: 'insuranceData.notes', translation: 'Sonstiges' },
{ dataPath: 'dimensionsAndLoad.bikeLength', translation: 'Länge' },
{ dataPath: 'dimensionsAndLoad.bikeWeight', translation: 'Gewicht' },
{ dataPath: 'dimensionsAndLoad.bikeHeight', translation: 'Höhe' },
{ dataPath: 'dimensionsAndLoad.bikeWidth', translation: 'Breite' },
{ dataPath: 'dimensionsAndLoad.boxHeightRange', translation: 'Boxhöhe' },
{ dataPath: 'dimensionsAndLoad.boxLengthRange', translation: 'Boxlänge' },
{ dataPath: 'dimensionsAndLoad.boxWidthRange', translation: 'Boxbreite' },
{
dataPath: 'dimensionsAndLoad.hasCoverBox',
translation: 'Boxabdeckung j/n',
},
{ dataPath: 'dimensionsAndLoad.lockable', translation: 'Box abschließbar' },
{
dataPath: 'dimensionsAndLoad.maxWeightBox',
translation: 'max Zuladung Box',
},
{
dataPath: 'dimensionsAndLoad.maxWeightLuggageRack',
translation: 'max Zuladung Gepäckträger',
},
{
dataPath: 'dimensionsAndLoad.maxWeightTotal',
translation: 'max Gesamtgewicht',
},
{ dataPath: 'numberOfChildren', translation: 'Anzahl Kinder' },
{ dataPath: 'numberOfWheels', translation: 'Anzahl Räder' },
{ dataPath: 'forCargo', translation: 'für Lasten j/n' },
{ dataPath: 'forChildren', translation: 'für Kinder j/n' },
{ dataPath: 'security.frameNumber', translation: 'Rahmennummer' },
{ dataPath: 'security.adfcCoding', translation: 'ADFC Codierung' },
{
dataPath: 'security.keyNumberAXAChain',
translation: 'Schlüsselnrummer Rahmenschloss',
},
{
dataPath: 'security.keyNumberFrameLock',
translation: 'Schlüsselnrummer AXA-Kette',
},
{ dataPath: 'security.policeCoding', translation: 'Polizei Codierung' },
{ dataPath: 'technicalEquipment.bicycleShift', translation: 'Schaltung' },
{ dataPath: 'technicalEquipment.isEBike', translation: 'E-Bike j/n' },
{
dataPath: 'technicalEquipment.hasLightSystem',
translation: 'Lichtanlage j/n',
},
{
dataPath: 'technicalEquipment.specialFeatures',
translation: 'Besonderheiten',
},
{ dataPath: 'stickerBikeNameState', translation: 'Aufkleber Status' },
{ dataPath: 'note', translation: 'Aufkleber Kommentar' },
{ dataPath: 'taxes.costCenter', translation: 'Steuern Kostenstelle' },
{
dataPath: 'taxes.organisationArea',
translation: 'Steuern Vereinsbereich',
},
{ dataPath: 'provider.id', translation: '' },
{ dataPath: 'provider.formName', translation: '' },
{ dataPath: 'provider.privatePerson.id', translation: '' },
{ dataPath: 'provider.privatePerson.person.id', translation: '' },
{ dataPath: 'provider.privatePerson.person.name', translation: '' },
{ dataPath: 'provider.privatePerson.person.firstName', translation: '' },
{
dataPath: 'provider.privatePerson.person.contactInformation.email',
translation: '',
},
{ dataPath: 'lendingStation.id', translation: '' },
{ dataPath: 'lendingStation.name', translation: '' },
{ dataPath: 'lendingStation.address.number', translation: '' },
{ dataPath: 'lendingStation.address.street', translation: '' },
{ dataPath: 'lendingStation.address.zip', translation: '' },
];
email = new FormControl('', [Validators.required, Validators.email]);
password = new FormControl('', [Validators.required]);
hide = true;
loading = false;
errorOccurred = false;
errorMessage = '';
dataService: any;
returnUrl : string;
tableDataGQLType: string = 'CargoBike';
tableDataGQLCreateInputType: string = 'CargoBikeCreateInput';
tableDataGQLUpdateInputType: string = 'CargoBikeUpdateInput';
constructor(private authService: AuthService, private router: Router, private route: ActivatedRoute) {}
headline = 'Lastenräder';
loadingRowIds: string[] = [];
constructor(private bikesService: BikesService) {}
ngOnInit() {
this.dataService = this.bikesService;
}
create(object: { currentId: string; row: any }) {
this.bikesService.createBike(object.currentId, { bike: object.row });
}
lock(row: any) {
this.bikesService.lockBike({ id: row.id });
}
save(row: any) {
this.bikesService.updateBike({ bike: row });
}
cancel(row: any) {
this.bikesService.unlockBike({ id: row.id });
ngOnInit(): void {
this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/tableOverview';
}
delete(row: any) {
this.bikesService.deleteBike({ id: row.id });
login() {
this.errorMessage = '';
this.errorOccurred = false;
if (this.email.invalid || this.password.invalid) {
return;
}
this.loading = true;
this.authService
.login(this.email.value, this.password.value)
.subscribe(
() => this.router.navigateByUrl(this.returnUrl),
(error) => {
this.errorOccurred = true;
this.errorMessage =
error.error.message ||
'Ein Fehler bei Einloggen ist aufgetreten. Überprüfen Sie Ihre Internetverbindung oder versuchen Sie es später erneut.';
}
)
.add(() => {
this.loading = false;
});
}
}

Loading…
Cancel
Save