connected-it/swiss-client
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move to new server

Browse Source
This commit is contained in:
Michel ten Voorde
2024-10-12 13:38:41 +02:00
commit e2e855e9b9
113 changed files with 11268 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/app/components/player-edit/player-edit.component.html Normal file
View File

@@ -0,0 +1,82 @@
<form (ngSubmit)="savePlayer()">
<mat-card appearance="outlined">
<mat-card-content>
<div class="row">
<div class="col-md-5">
<mat-form-field appearance="fill">
<mat-label>Achternaam</mat-label>
<input matInput [(ngModel)]="player.lastName" name="lastName" required>
</mat-form-field>
</div>
<div class="col-md-2">
<mat-form-field appearance="fill">
<mat-label>Tussenvoegsel</mat-label>
<input matInput [(ngModel)]="player.middleName" name="middleName">
</mat-form-field>
</div>
<div class="col-md-2">
<mat-form-field appearance="fill">
<mat-label>Voornaam</mat-label>
<input matInput [(ngModel)]="player.firstName" name="firstName" required>
</mat-form-field>
</div>
<div class="col-md-3">
<mat-radio-group [(ngModel)]="player.sex" name="sex" required>
<mat-label>Geslacht</mat-label>
<mat-radio-button value="M">M</mat-radio-button>
<mat-radio-button value="V">V</mat-radio-button>
</mat-radio-group>
</div>
</div>
<div class="row">
<div class="col-md-3">
<mat-form-field appearance="fill">
<mat-label>Telefoon</mat-label>
<input matInput [(ngModel)]="player.phoneNumber" name="phoneNumber" required>
</mat-form-field>
</div>
<div class="col-md-9">
<mat-form-field appearance="fill">
<mat-label>Emailadres</mat-label>
<input matInput [(ngModel)]="player.email" name="email" required>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col-md-3">
<mat-form-field appearance="fill">
<mat-label>Geboortedatum</mat-label>
<input matInput mask="00-00-0000" [showMaskTyped]="true" [dropSpecialCharacters]="false" [(ngModel)]="player.birthday" type="text" name="birthday" required>
<mat-hint>dd-mm-jjjj</mat-hint>
</mat-form-field>
</div>
<div class="col-md-6">
<mat-form-field appearance="fill">
<mat-label>Club</mat-label>
<input matInput [(ngModel)]="player.club" name="club">
</mat-form-field>
</div>
<div class="col-md-3">
<mat-form-field appearance="fill">
<mat-label>Speelsterkte</mat-label>
<mat-select [(ngModel)]="player.strength" name="strength" required>
<mat-option *ngFor="let strengthOption of Strength | keyvalue" [value]="strengthOption.key">
{{ strengthOption.value }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</mat-card-content>
<mat-card-actions>
<button mat-button>
<mat-icon>save</mat-icon>
{{ isEditMode ? 'Bijwerken' : 'Opslaan' }}
</button>
<a mat-button routerLink="/players">
<mat-icon>cancel</mat-icon>
Annuleren
</a>
</mat-card-actions>
</mat-card>
</form>

6
src/app/components/player-edit/player-edit.component.scss Normal file
View File

@@ -0,0 +1,6 @@
mat-form-field {
width: 100%;
}
a, button, mat-radio-button {
margin-right: 1em;
}

95
src/app/components/player-edit/player-edit.component.ts Normal file
View File

@@ -0,0 +1,95 @@
import {Component, OnInit} from '@angular/core';
import {Player, Strength} from "../../model/player";
import {PlayerService} from "../../service/player.service";
import {ActivatedRoute, Router, RouterLink} from "@angular/router";
import {FormGroup, FormsModule, ReactiveFormsModule} from "@angular/forms";
import {MatFormField, MatHint, MatLabel} from "@angular/material/form-field";
import {MatInput} from "@angular/material/input";
import {MatIcon} from "@angular/material/icon";
import {MatRadioButton, MatRadioGroup} from "@angular/material/radio";
import {MatCard, MatCardActions, MatCardContent, MatCardHeader} from "@angular/material/card";
import {MatDatepicker, MatDatepickerInput, MatDatepickerToggle} from "@angular/material/datepicker";
import {MatOption, MatSelect} from "@angular/material/select";
import {KeyValuePipe, NgForOf} from "@angular/common";
import {MatAnchor, MatButton} from "@angular/material/button";
import {TitleService} from "../../service/title.service";
import {MatSnackBar} from "@angular/material/snack-bar";
import {NgxMaskDirective, NgxMaskPipe} from "ngx-mask";
@Component({
selector: 'app-player-edit',
standalone: true,
imports: [
FormsModule,
RouterLink,
MatFormField,
MatInput,
MatIcon,
MatHint,
MatLabel,
MatRadioGroup,
MatRadioButton,
MatCard,
MatCardHeader,
MatCardContent,
MatCardActions,
MatDatepickerInput,
MatDatepickerToggle,
MatDatepicker,
MatSelect,
MatOption,
KeyValuePipe,
NgForOf,
MatButton,
MatAnchor,
ReactiveFormsModule,
NgxMaskDirective,
NgxMaskPipe
],
templateUrl: './player-edit.component.html',
styleUrl: './player-edit.component.scss'
})
export class PlayerEditComponent implements OnInit {
player: Player;
isEditMode: boolean = false;
constructor(
private playerService: PlayerService,
private route: ActivatedRoute,
private router: Router,
private titleService: TitleService,
private _snackBar: MatSnackBar,
) {
this.player = new Player();
}
ngOnInit() {
const id = this.route.snapshot.paramMap.get('id');
if (id) {
this.titleService.setTitle("Bewerk Speler");
this.isEditMode = true;
this.playerService.getById(Number(id)).subscribe(data => {
this.player = data;
});
} else {
this.titleService.setTitle("Nieuwe Speler");
}
}
savePlayer() {
if (this.isEditMode) {
this.playerService.update(this.player.id, this.player).subscribe(() => {
this.router.navigate(['/players']);
});
} else {
this.playerService.save(this.player).subscribe({
next: () => this.router.navigate(['/players']),
error: () => this._snackBar.open('Niet alle velden zijn correct gevuld.')
});
}
}
protected readonly Object = Object;
protected readonly Strength = Strength;
}