it-as
/
li-dance-backoffice
1
0
Fork 0
Code Issues 11 Pull Requests Projects 1 Releases Wiki Activity

Merge Anmeldeformular into main #21

Merged
it-as merged 23 commits from Anmeldeformular into main 2024-04-26 14:40:21 +02:00
Conversation 0 Commits 23 Files Changed 13 +243 -186
7 changed files with 243 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 161f4082cc - Show all commits

4
frontend/src/app/app-routing.module.ts
View File

@ -3,7 +3,7 @@ import { RouterModule, Routes } from '@angular/router';
import { StudentListComponent } from './components/students/student-list/student-list.component'; import { StudentListComponent } from './components/students/student-list/student-list.component';
import { VisitsComponent } from './components/visits/visits.component'; import { VisitsComponent } from './components/visits/visits.component';
import { VisitsDatetimeComponent } from './components/visits/visits-datetime/visits-datetime.component'; import { VisitsDatetimeComponent } from './components/visits/visits-datetime/visits-datetime.component';
import {StudentRegisterComponent} from "./components/students/student-register/student-register.component"; import { StudentRegisterComponent } from './components/students/student-register/student-register.component';
const routes: Routes = [ const routes: Routes = [
{ path: 'students', component: StudentListComponent }, { path: 'students', component: StudentListComponent },
@ -11,7 +11,7 @@ const routes: Routes = [
{ path: 'select', component: VisitsDatetimeComponent }, { path: 'select', component: VisitsDatetimeComponent },
{ path: 'register', component: StudentRegisterComponent }, { path: 'register', component: StudentRegisterComponent },
{ path: 'visits/:date/:time', component: VisitsComponent }, { path: 'visits/:date/:time', component: VisitsComponent },
{ path: '**', redirectTo: 'students' } { path: '**', redirectTo: 'students' },
]; ];
@NgModule({ @NgModule({

18
frontend/src/app/app.module.ts
View File

@ -1,7 +1,7 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module'; import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { StudentListComponent } from './components/students/student-list/student-list.component'; import { StudentListComponent } from './components/students/student-list/student-list.component';
@ -21,14 +21,14 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field'; import { MatFormFieldModule } from '@angular/material/form-field';
import { MatNativeDateModule, MatRippleModule } from '@angular/material/core'; import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
import { StudentRegisterComponent } from './components/students/student-register/student-register.component'; import { StudentRegisterComponent } from './components/students/student-register/student-register.component';
import {MatStepperModule} from "@angular/material/stepper"; import { MatStepperModule } from '@angular/material/stepper';
import {MatInputModule} from "@angular/material/input"; import { MatInputModule } from '@angular/material/input';
import {MatButtonModule} from "@angular/material/button"; import { MatButtonModule } from '@angular/material/button';
import {MatRadioModule} from "@angular/material/radio"; import { MatRadioModule } from '@angular/material/radio';
import {MatSelectModule} from "@angular/material/select"; import { MatSelectModule } from '@angular/material/select';
import {MatIconModule} from "@angular/material/icon"; import { MatIconModule } from '@angular/material/icon';
import {MatCheckboxModule} from "@angular/material/checkbox"; import { MatCheckboxModule } from '@angular/material/checkbox';
import {MatTooltipModule} from "@angular/material/tooltip"; import { MatTooltipModule } from '@angular/material/tooltip';
@NgModule({ @NgModule({
declarations: [ declarations: [

131
frontend/src/app/components/students/student-register/student-register.component.html
View File

@ -8,47 +8,72 @@
<form [formGroup]="zeroFormGroup"> <form [formGroup]="zeroFormGroup">
<ng-template matStepLabel>Registration</ng-template> <ng-template matStepLabel>Registration</ng-template>
<div class="flexContainerRow width20"> <div class="flexContainerRow width20">
<mat-checkbox formControlName="danceTraining">Für den Tanzunterricht (Tanz-Flatrate)</mat-checkbox> <mat-checkbox formControlName="danceTraining"
>Für den Tanzunterricht (Tanz-Flatrate)</mat-checkbox
alioezdemir marked this conversation as resolved Outdated
igorpropisnov commented 2024-03-20 22:56:10 +01:00
Outdated
Review
Copy Link

Placeholder auf Deutsch

Placeholder auf Deutsch
>
</div> </div>
<div class="flexContainerRow width20"> <div class="flexContainerRow width20">
<mat-checkbox formControlName="karateTraining">Für den Karateunterricht</mat-checkbox> <mat-checkbox formControlName="karateTraining"
>Für den Karateunterricht</mat-checkbox
>
</div> </div>
<div class="flexContainerRow width20"> <div class="flexContainerRow width20">
<mat-checkbox formControlName="freeTraining">Für freies Training (unterschriebenes Beiblatt muss der Anmeldung beiliegen)</mat-checkbox> <mat-checkbox formControlName="freeTraining"
alioezdemir marked this conversation as resolved Outdated
igorpropisnov commented 2024-03-20 22:56:17 +01:00
Outdated
Review
Copy Link

Placeholder auf Deutsch

Placeholder auf Deutsch
>Für freies Training (unterschriebenes Beiblatt muss der Anmeldung
beiliegen)</mat-checkbox
>
</div> </div>
</form> </form>
<div> <div>
<button mat-button matStepperNext [disabled]="zeroFormGroup.status == 'INVALID'" (click)="onClick()">Next</button> <button
mat-button
matStepperNext
[disabled]="zeroFormGroup.status == 'INVALID'"
(click)="onClick()">
alioezdemir marked this conversation as resolved Outdated
igorpropisnov commented 2024-03-20 22:44:11 +01:00
Outdated
Review
Copy Link

Hint muss hier DD.MM.YYYY sein

Hint muss hier DD.MM.YYYY sein
Next
</button>
</div> </div>
</mat-step> </mat-step>
<!-- Step 1--> <!-- Step 1-->
<mat-step [stepControl]="firstFormGroup" class="firstStep"> <mat-step [stepControl]="firstFormGroup" class="firstStep">
<form [formGroup]="firstFormGroup" class="flexContainerRow width50"> <form [formGroup]="firstFormGroup" class="flexContainerRow width50">
<ng-template matStepLabel>Personal Information</ng-template> <ng-template matStepLabel>Personal Information</ng-template>
<div class="leftContainer"> <div class="leftContainer">
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<mat-label>Name</mat-label> <mat-label>Name</mat-label>
<input matInput formControlName="firstName" placeholder="First name" required> <input
matInput
formControlName="firstName"
placeholder="First name"
required />
</mat-form-field> </mat-form-field>
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<mat-label>Surname</mat-label> <mat-label>Surname</mat-label>
<input matInput formControlName="lastName" placeholder="Last name" required> <input
matInput
formControlName="lastName"
placeholder="Last name"
required />
</mat-form-field> </mat-form-field>
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<mat-label>Birthdate</mat-label> <mat-label>Birthdate</mat-label>
<input matInput [matDatepicker]="birthdatePicker" formControlName="birthdate" required> <input
matInput
[matDatepicker]="birthdatePicker"
formControlName="birthdate"
required />
<mat-hint>MM/DD/YYYY</mat-hint> <mat-hint>MM/DD/YYYY</mat-hint>
<mat-datepicker-toggle matSuffix [for]="birthdatePicker"></mat-datepicker-toggle> <mat-datepicker-toggle
<mat-datepicker #birthdatePicker startView="multi-year"></mat-datepicker> matSuffix
[for]="birthdatePicker"></mat-datepicker-toggle>
<mat-datepicker
#birthdatePicker
startView="multi-year"></mat-datepicker>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<mat-label>Gender</mat-label> <mat-label>Gender</mat-label>
<mat-select> <mat-select>
@ -59,32 +84,36 @@
</mat-form-field> </mat-form-field>
</div> </div>
<div class="rightContainer"> <div class="rightContainer">
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<mat-label>Address</mat-label> <mat-label>Address</mat-label>
<input matInput formControlName="address" required> <input matInput formControlName="address" required />
</mat-form-field> </mat-form-field>
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<mat-label>Postal Code</mat-label> <mat-label>Postal Code</mat-label>
<input matInput formControlName="postalCode" required> <input matInput formControlName="postalCode" required />
</mat-form-field> </mat-form-field>
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<mat-label>Phone</mat-label> <mat-label>Phone</mat-label>
<input matInput formControlName="phone" required> <input matInput formControlName="phone" required />
</mat-form-field> </mat-form-field>
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<mat-label>E-Mail</mat-label> <mat-label>E-Mail</mat-label>
<input matInput formControlName="email" required> <input matInput formControlName="email" required />
<mat-error>Invalid E-Mail Address</mat-error> <mat-error>Invalid E-Mail Address</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
</form> </form>
<div class="buttonsContainer"> <div class="buttonsContainer">
<button mat-button matStepperPrevious class="backButton">Back</button> <button mat-button matStepperPrevious class="backButton">Back</button>
<button mat-button matStepperNext [disabled]="firstFormGroup.status == 'INVALID'" >Next</button> <button
mat-button
matStepperNext
[disabled]="firstFormGroup.status == 'INVALID'">
Next
</button>
</div> </div>
</mat-step> </mat-step>
@ -94,41 +123,50 @@
<ng-template matStepLabel>Banking Information</ng-template> <ng-template matStepLabel>Banking Information</ng-template>
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<mat-label>Account Holder</mat-label> <mat-label>Account Holder</mat-label>
<input matInput formControlName="accountHolder" <input matInput formControlName="accountHolder" required />
required>
</mat-form-field> </mat-form-field>
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<mat-label>IBAN</mat-label> <mat-label>IBAN</mat-label>
<input matInput formControlName="iban" required> <input matInput formControlName="iban" required />
</mat-form-field> </mat-form-field>
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<mat-label>BIC</mat-label> <mat-label>BIC</mat-label>
<input matInput formControlName="bic" <input matInput formControlName="bic" required />
required>
</mat-form-field> </mat-form-field>
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<mat-label>Name of Financial Institute</mat-label> <mat-label>Name of Financial Institute</mat-label>
<input matInput formControlName="nameOfFinancialInstitute" <input matInput formControlName="nameOfFinancialInstitute" required />
required>
</mat-form-field> </mat-form-field>
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<mat-label>Amount in €/Month</mat-label> <mat-label>Amount in €/Month</mat-label>
<input matInput formControlName="amount" required> <input matInput formControlName="amount" required />
</mat-form-field> </mat-form-field>
<div class="flexContainerRow width20"> <div class="flexContainerRow width20">
<mat-checkbox formControlName="einzugsermaechtigung" required>Einzugsermächtigung</mat-checkbox> <mat-checkbox formControlName="einzugsermaechtigung" required
<mat-icon aria-hidden="false" matTooltip="{{infoText}}" matTooltipPosition="right">info</mat-icon> >Einzugsermächtigung</mat-checkbox
>
<mat-icon
aria-hidden="false"
matTooltip="{{ infoText }}"
matTooltipPosition="right"
>info</mat-icon
>
</div> </div>
</form> </form>
<div class="buttonsContainer"> <div class="buttonsContainer">
<button mat-button matStepperPrevious class="backButton">Back</button> <button mat-button matStepperPrevious class="backButton">Back</button>
<button mat-button matStepperNext [disabled]="secondFormGroup.status == 'INVALID'" >Next</button> <button
mat-button
matStepperNext
[disabled]="secondFormGroup.status == 'INVALID'">
Next
</button>
</div> </div>
</mat-step> </mat-step>
@ -137,20 +175,39 @@
<form [formGroup]="thirdFormGroup" class="flexContainerColumn width30"> <form [formGroup]="thirdFormGroup" class="flexContainerColumn width30">
<ng-template matStepLabel>Consent</ng-template> <ng-template matStepLabel>Consent</ng-template>
<div class="flexContainerRow width20"> <div class="flexContainerRow width20">
<mat-checkbox formControlName="einwilligung" required>Einwilligung zur Erhebung, Speicherung, Verarbeitung und Nutzung von <mat-checkbox formControlName="einwilligung" required
personenbezogenen Daten </mat-checkbox> >Einwilligung zur Erhebung, Speicherung, Verarbeitung und Nutzung von
<mat-icon aria-hidden="false" matTooltip="{{infoTextEinwilligungserklaerung}}" matTooltipPosition="right">info</mat-icon> personenbezogenen Daten
</mat-checkbox>
<mat-icon
aria-hidden="false"
matTooltip="{{ infoTextEinwilligungserklaerung }}"
matTooltipPosition="right"
>info</mat-icon
>
</div> </div>
<div class="flexContainerRow width20"> <div class="flexContainerRow width20">
<mat-checkbox formControlName="einverstaendniserklaerung" required>Einverständniserklärung zur Nutzung von Bild- und Videomaterial </mat-checkbox> <mat-checkbox formControlName="einverstaendniserklaerung" required
<mat-icon aria-hidden="false" matTooltip="{{infoTextEinverstaendniserklaerung}}" matTooltipPosition="right">info</mat-icon> >Einverständniserklärung zur Nutzung von Bild- und Videomaterial
</mat-checkbox>
<mat-icon
aria-hidden="false"
matTooltip="{{ infoTextEinverstaendniserklaerung }}"
matTooltipPosition="right"
>info</mat-icon
>
</div> </div>
</form> </form>
<div class="buttonsContainer"> <div class="buttonsContainer">
<button mat-button matStepperPrevious class="backButton">Back</button> <button mat-button matStepperPrevious class="backButton">Back</button>
<button mat-button matStepperNext [disabled]="thirdFormGroup.status == 'INVALID'" (click)="onClick()">Submit</button> <button
mat-button
matStepperNext
[disabled]="thirdFormGroup.status == 'INVALID'"
(click)="onClick()">
Submit
</button>
</div> </div>
</mat-step> </mat-step>
</mat-stepper> </mat-stepper>

6
frontend/src/app/components/students/student-register/student-register.component.scss
View File

@ -10,7 +10,8 @@
background-color: transparent; background-color: transparent;
} }
input, button { input,
button {
color: white; color: white;
} }
@ -18,7 +19,6 @@ button {
background-color: #0366d6; background-color: #0366d6;
} }
::selection { ::selection {
color: white; color: white;
background-color: #1576d5; background-color: #1576d5;
@ -44,8 +44,6 @@ button {
} }
} }
.leftContainer { .leftContainer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

5
frontend/src/app/components/students/student-register/student-register.component.spec.ts
View File

@ -8,9 +8,8 @@ describe('StudentRegisterComponent', () => {
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
declarations: [ StudentRegisterComponent ] declarations: [StudentRegisterComponent],
}) }).compileComponents();
.compileComponents();
}); });
beforeEach(() => { beforeEach(() => {

96
frontend/src/app/components/students/student-register/student-register.component.ts
View File

@ -1,12 +1,11 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from "@angular/forms"; import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({ @Component({
selector: 'li-student-register', selector: 'li-student-register',
templateUrl: './student-register.component.html', templateUrl: './student-register.component.html',
styleUrls: ['./student-register.component.scss'] styleUrls: ['./student-register.component.scss'],
}) })
export class StudentRegisterComponent implements OnInit { export class StudentRegisterComponent implements OnInit {
masterFormGroup!: FormGroup; masterFormGroup!: FormGroup;
zeroFormGroup!: FormGroup; zeroFormGroup!: FormGroup;
@ -14,39 +13,42 @@ export class StudentRegisterComponent implements OnInit {
secondFormGroup!: FormGroup; secondFormGroup!: FormGroup;
thirdFormGroup!: FormGroup; thirdFormGroup!: FormGroup;
isEditable = false; isEditable = false;
infoText = "Hiermit ermächtige ich die Tanz- und Sportschule Li-Dance, Inh. Lydia Kolepp (nachfolgend Li-\n" + infoText =
"Dance) die Monatsbeiträge i.H.v. oben genannten Betrag, diverse Einmalzahlungen und sonstige\n" + 'Hiermit ermächtige ich die Tanz- und Sportschule Li-Dance, Inh. Lydia Kolepp (nachfolgend Li-\n' +
"Verbindlichkeiten zu Lasten meines Kontos einzuziehen.\n"+ 'Dance) die Monatsbeiträge i.H.v. oben genannten Betrag, diverse Einmalzahlungen und sonstige\n' +
"Bitte beachten Sie, dass im Falle einer unberechtigten Rücklastschrift Li-Dance ein\n" + 'Verbindlichkeiten zu Lasten meines Kontos einzuziehen.\n' +
"Verwaltungsaufwand entsteht und eine Gebühr i.H.v. derzeit 15,- € berechnet wird. Diese Gebühr\n" + 'Bitte beachten Sie, dass im Falle einer unberechtigten Rücklastschrift Li-Dance ein\n' +
"wird zusammen mit dem nachfolgenden Monatsbeitrag vom gleichen Konto abgebucht." 'Verwaltungsaufwand entsteht und eine Gebühr i.H.v. derzeit 15,- € berechnet wird. Diese Gebühr\n' +
'wird zusammen mit dem nachfolgenden Monatsbeitrag vom gleichen Konto abgebucht.';
infoTextEinwilligungserklaerung = "Ich bin darüber informiert worden, dass meine personenbezogenen Daten aufgrund rechtlicher\n" + infoTextEinwilligungserklaerung =
"Vorgaben mindestens 10 Jahre nach Vertragsende aufbewahrt werden müssen.\n" + 'Ich bin darüber informiert worden, dass meine personenbezogenen Daten aufgrund rechtlicher\n' +
"Ich bin damit einverstanden, dass die oben genannten personenbezogenen Daten zu den oben\n" + 'Vorgaben mindestens 10 Jahre nach Vertragsende aufbewahrt werden müssen.\n' +
"genannten Zwecken erhoben, gespeichert, verarbeitet, genutzt und ggfs. weitergegeben werden.\n" + 'Ich bin damit einverstanden, dass die oben genannten personenbezogenen Daten zu den oben\n' +
"Ich bin darauf hingewiesen worden, dass die im Rahmen der vorstehend genannten Zwecke\n" + 'genannten Zwecken erhoben, gespeichert, verarbeitet, genutzt und ggfs. weitergegeben werden.\n' +
"erhobenen persönlichen Daten meiner Person unter Beachtung der EU-\n" + 'Ich bin darauf hingewiesen worden, dass die im Rahmen der vorstehend genannten Zwecke\n' +
"Datenschutzgrundverordnung (DSGVO) erhoben, gespeichert, genutzt und übermittelt werden.\n" + 'erhobenen persönlichen Daten meiner Person unter Beachtung der EU-\n' +
"Ich bin zudem darauf hingewiesen worden, dass die Erhebung, Speicherung, Verarbeitung und\n" + 'Datenschutzgrundverordnung (DSGVO) erhoben, gespeichert, genutzt und übermittelt werden.\n' +
"Nutzung meiner Daten auf freiwilliger Basis erfolgt.\n" + 'Ich bin zudem darauf hingewiesen worden, dass die Erhebung, Speicherung, Verarbeitung und\n' +
"Ich bin darüber informiert worden, dass diese Einverständniserklärung jederzeit mit sofortiger\n" + 'Nutzung meiner Daten auf freiwilliger Basis erfolgt.\n' +
"Wirkung verweigert, bzw. jederzeit mit Wirkung für die Zukunft widerrufen werden kann. Meine\n" + 'Ich bin darüber informiert worden, dass diese Einverständniserklärung jederzeit mit sofortiger\n' +
"Widerrufserklärung werde ich richten an die unten angegebene Adresse" 'Wirkung verweigert, bzw. jederzeit mit Wirkung für die Zukunft widerrufen werden kann. Meine\n' +
'Widerrufserklärung werde ich richten an die unten angegebene Adresse';
infoTextEinverstaendniserklaerung = "Ich bin damit einverstanden, dass Bilder und Videos der Tanzschule und der Veranstaltungen,\n" + infoTextEinverstaendniserklaerung =
"die durch die Tanzschule organisiert sind und/oder an denen die Tanzschule teilnimmt, auf\n" + 'Ich bin damit einverstanden, dass Bilder und Videos der Tanzschule und der Veranstaltungen,\n' +
"denen ich selbst, mein Sohn oder meine Tochter zu sehen ist auf den Webseiten von Li-Dance und in anderen Online- und/oder Printmedien veröffentlicht\n" + 'die durch die Tanzschule organisiert sind und/oder an denen die Tanzschule teilnimmt, auf\n' +
"werden und für Werbezwecke von Li-Dance genutzt werden dürfen. Rechtsgrundlage: Das Recht am eigenen Bild ist ein Teil des vom Gesetz geschützten\n" + 'denen ich selbst, mein Sohn oder meine Tochter zu sehen ist auf den Webseiten von Li-Dance und in anderen Online- und/oder Printmedien veröffentlicht\n' +
"allgemeinen Persönlichkeitsrechts (§22 Kunsturheberrechtsgesetz). Es gilt der Grundsatz, dass\n" + 'werden und für Werbezwecke von Li-Dance genutzt werden dürfen. Rechtsgrundlage: Das Recht am eigenen Bild ist ein Teil des vom Gesetz geschützten\n' +
"Bild- und Video-Material nur mit Einwilligung des Abgebildeten verbreitet oder veröffentlicht\n" + 'allgemeinen Persönlichkeitsrechts (§22 Kunsturheberrechtsgesetz). Es gilt der Grundsatz, dass\n' +
"werden kann. Es handelt sich hierbei um eine rechtsgeschäftliche Willenserklärung. Deshalb\n" + 'Bild- und Video-Material nur mit Einwilligung des Abgebildeten verbreitet oder veröffentlicht\n' +
"kann bei Minderjährigen eine Einwilligung nur durch den gesetzlichen Vertreter erfolgen.\n" + 'werden kann. Es handelt sich hierbei um eine rechtsgeschäftliche Willenserklärung. Deshalb\n' +
"Diese Einverständniserklärung kann mit sofortiger Wirkung verweigert, bzw. jederzeit mit\n" + 'kann bei Minderjährigen eine Einwilligung nur durch den gesetzlichen Vertreter erfolgen.\n' +
"Wirkung für die Zukunft widerrufen werden. Ein Widerruf kann einen Ausschluss aus der\n" + 'Diese Einverständniserklärung kann mit sofortiger Wirkung verweigert, bzw. jederzeit mit\n' +
"jeweiligen Veranstaltung zur Folge haben.\n" + 'Wirkung für die Zukunft widerrufen werden. Ein Widerruf kann einen Ausschluss aus der\n' +
"Ein späterer rückwirkender Widerruf für aktuell stattfindende bzw. bereits stattgefundene\n" + 'jeweiligen Veranstaltung zur Folge haben.\n' +
"Veranstaltungen ist ausgeschlossen." 'Ein späterer rückwirkender Widerruf für aktuell stattfindende bzw. bereits stattgefundene\n' +
'Veranstaltungen ist ausgeschlossen.';
constructor(private _formBuilder: FormBuilder) {} constructor(private _formBuilder: FormBuilder) {}
@ -84,14 +86,16 @@ export class StudentRegisterComponent implements OnInit {
// }); // });
// } // }
this.zeroFormGroup = this._formBuilder.group({ this.zeroFormGroup = this._formBuilder.group(
{
danceTraining: [''], danceTraining: [''],
karateTraining: [''], karateTraining: [''],
freeTraining: [''], freeTraining: [''],
}, { },
validators : [this.requireAtLeastOne] {
validators: [this.requireAtLeastOne],
} }
) );
this.firstFormGroup = this._formBuilder.group({ this.firstFormGroup = this._formBuilder.group({
firstName: ['', Validators.required], firstName: ['', Validators.required],
lastName: ['', Validators.required], lastName: ['', Validators.required],
@ -118,21 +122,19 @@ export class StudentRegisterComponent implements OnInit {
} }
onClick() { onClick() {
console.log(this.zeroFormGroup) console.log(this.zeroFormGroup);
} }
// Custom validator function // Custom validator function
requireAtLeastOne(formGroup: FormGroup) { requireAtLeastOne(formGroup: FormGroup) {
const danceTraining = formGroup.get('danceTraining')?.value const danceTraining = formGroup.get('danceTraining')?.value;
const karateTraining = formGroup.get('karateTraining')?.value const karateTraining = formGroup.get('karateTraining')?.value;
const freeTraining = formGroup.get('freeTraining')?.value const freeTraining = formGroup.get('freeTraining')?.value;
if (!danceTraining && !karateTraining && !freeTraining ) { if (!danceTraining && !karateTraining && !freeTraining) {
return {requiredAtLeastOne: true} return { requiredAtLeastOne: true };
} }
return null return null;
} }
} }

23
frontend/src/styles.scss
View File

@ -1,7 +1,6 @@
/* Provide sufficient contrast against white background */ /* Provide sufficient contrast against white background */
@import "~bootstrap-icons/font/bootstrap-icons.css"; @import '~bootstrap-icons/font/bootstrap-icons.css';
a { a {
color: #0366d6; color: #0366d6;
@ -32,7 +31,6 @@ body {
font-size: 95%; font-size: 95%;
} }
.mat-checkbox-checked.mat-accent .mat-checkbox-background { .mat-checkbox-checked.mat-accent .mat-checkbox-background {
background-color: #0366d6 !important; background-color: #0366d6 !important;
} }
@ -43,13 +41,12 @@ mat-checkbox {
color: white; color: white;
margin-bottom: 16px; margin-bottom: 16px;
} }
.mat-step-header .mat-step-icon-selected, .mat-step-icon-state-edit{ .mat-step-header .mat-step-icon-selected,
.mat-step-icon-state-edit {
background-color: #0366d6 !important; background-color: #0366d6 !important;
} }
// customize datepicker
// customize datepicker
//.mat-datepicker-content-container { //.mat-datepicker-content-container {
// background:transparent; // background:transparent;
//} //}
@ -60,8 +57,6 @@ mat-checkbox {
// color: black; // color: black;
// } // }
// //
//.mat-calendar-body-cell-content { //.mat-calendar-body-cell-content {
// background-color: #1861ac; // background-color: #1861ac;
@ -103,5 +98,11 @@ mat-checkbox {
// background-color: #1b6ec2; // background-color: #1b6ec2;
// border-color: #1861ac; // border-color: #1861ac;
//} //}
html, body { height: 100%; } html,
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } body {
height: 100%;
}
body {
margin: 0;
font-family: Roboto, 'Helvetica Neue', sans-serif;
}