From 822e17068dfda64cd5336a7bd503da9d3066bb90 Mon Sep 17 00:00:00 2001 From: aoezdemir Date: Thu, 7 Mar 2024 10:18:13 +0100 Subject: [PATCH 1/5] First step of stepper implemented. --- frontend/angular.json | 2 + frontend/src/app/app-routing.module.ts | 6 +- frontend/src/app/app.module.ts | 17 +++- .../student-register.component.html | 84 +++++++++++++++++++ .../student-register.component.scss | 43 ++++++++++ .../student-register.component.spec.ts | 25 ++++++ .../student-register.component.ts | 25 ++++++ frontend/src/styles.scss | 4 +- 8 files changed, 201 insertions(+), 5 deletions(-) create mode 100644 frontend/src/app/components/students/student-register/student-register.component.html create mode 100644 frontend/src/app/components/students/student-register/student-register.component.scss create mode 100644 frontend/src/app/components/students/student-register/student-register.component.spec.ts create mode 100644 frontend/src/app/components/students/student-register/student-register.component.ts diff --git a/frontend/angular.json b/frontend/angular.json index e7b5663..e609732 100644 --- a/frontend/angular.json +++ b/frontend/angular.json @@ -31,6 +31,7 @@ "src/assets" ], "styles": [ + "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css", "src/styles.scss" ], "scripts": [] @@ -99,6 +100,7 @@ "src/assets" ], "styles": [ + "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css", "src/styles.scss" ], "scripts": [] diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index 8af2b8e..6d5f973 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -3,12 +3,14 @@ import { RouterModule, Routes } from '@angular/router'; import { StudentListComponent } from './components/students/student-list/student-list.component'; import { VisitsComponent } from './components/visits/visits.component'; import { VisitsDatetimeComponent } from './components/visits/visits-datetime/visits-datetime.component'; +import {StudentRegisterComponent} from "./components/students/student-register/student-register.component"; const routes: Routes = [ { path: 'students', component: StudentListComponent }, { path: 'visits', component: VisitsComponent }, - { path: 'select', component: VisitsDatetimeComponent }, - { path: 'visits/:date/:time', component: VisitsComponent }, + { path: 'select', component: VisitsDatetimeComponent }, + { path: 'register', component: StudentRegisterComponent }, + { path: 'visits/:date/:time', component: VisitsComponent }, { path: '**', redirectTo: 'students' } ]; diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 27ea2ec..b854298 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -1,7 +1,7 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { FormsModule } from '@angular/forms'; +import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { StudentListComponent } from './components/students/student-list/student-list.component'; @@ -20,6 +20,12 @@ import { VisitsDatetimeComponent } from './components/visits/visits-datetime/vis import { MatDatepickerModule } from '@angular/material/datepicker'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatNativeDateModule, MatRippleModule } from '@angular/material/core'; +import { StudentRegisterComponent } from './components/students/student-register/student-register.component'; +import {MatStepperModule} from "@angular/material/stepper"; +import {MatInputModule} from "@angular/material/input"; +import {MatButtonModule} from "@angular/material/button"; +import {MatRadioModule} from "@angular/material/radio"; +import {MatSelectModule} from "@angular/material/select"; @NgModule({ declarations: [ @@ -32,7 +38,8 @@ import { MatNativeDateModule, MatRippleModule } from '@angular/material/core'; EnrollPipe, VisitsComponent, StudentEnrollComponent, - VisitsDatetimeComponent + VisitsDatetimeComponent, + StudentRegisterComponent, ], imports: [ BrowserModule, @@ -47,6 +54,12 @@ import { MatNativeDateModule, MatRippleModule } from '@angular/material/core'; MatFormFieldModule, MatRippleModule, MatNativeDateModule, + MatStepperModule, + ReactiveFormsModule, + MatInputModule, + MatButtonModule, + MatRadioModule, + MatSelectModule ], providers: [], bootstrap: [AppComponent] diff --git a/frontend/src/app/components/students/student-register/student-register.component.html b/frontend/src/app/components/students/student-register/student-register.component.html new file mode 100644 index 0000000..2b7ea5d --- /dev/null +++ b/frontend/src/app/components/students/student-register/student-register.component.html @@ -0,0 +1,84 @@ + + + + + + +
+ Personal Information +
+
+ + + Name + + + + + Surname + + + + + Birthdate + + + + + Gender + + Male + Female + Divers + + + +
+
+ + Address + + + + Postal Code + + + + Phone + + + + E-Mail + + +
+
+ +
+ +
+
+ + +
+ Fill out your address + + Address + + +
+ + +
+
+ + + Done +

You are now done.

+
+ + +
+ + diff --git a/frontend/src/app/components/students/student-register/student-register.component.scss b/frontend/src/app/components/students/student-register/student-register.component.scss new file mode 100644 index 0000000..108e669 --- /dev/null +++ b/frontend/src/app/components/students/student-register/student-register.component.scss @@ -0,0 +1,43 @@ +.mat-stepper-horizontal { + margin-top: 8px; +} + +.mat-form-field { + margin-top: 16px; +} + +.mat-stepper-horizontal { + background-color: transparent; +} + +input, button { + color: white; +} + +button { + background-color: #0366d6; +} + + +::selection { + color: white; + background-color: #1576d5; +} + +.formContainer { + width: 50%; + display: flex; + flex-direction: row; + justify-content: space-between; + +} +.leftContainer { + display: flex; + flex-direction: column; + width: 45%; +} +.rightContainer { + display: flex; + flex-direction: column; + width: 45%; +} diff --git a/frontend/src/app/components/students/student-register/student-register.component.spec.ts b/frontend/src/app/components/students/student-register/student-register.component.spec.ts new file mode 100644 index 0000000..7b5bfdb --- /dev/null +++ b/frontend/src/app/components/students/student-register/student-register.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { StudentRegisterComponent } from './student-register.component'; + +describe('StudentRegisterComponent', () => { + let component: StudentRegisterComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ StudentRegisterComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(StudentRegisterComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/components/students/student-register/student-register.component.ts b/frontend/src/app/components/students/student-register/student-register.component.ts new file mode 100644 index 0000000..0535a98 --- /dev/null +++ b/frontend/src/app/components/students/student-register/student-register.component.ts @@ -0,0 +1,25 @@ +import { Component, OnInit } from '@angular/core'; +import {FormBuilder, FormGroup, Validators} from "@angular/forms"; + +@Component({ + selector: 'li-student-register', + templateUrl: './student-register.component.html', + styleUrls: ['./student-register.component.scss'] +}) + +export class StudentRegisterComponent implements OnInit { + firstFormGroup!: FormGroup; + secondFormGroup!: FormGroup; + isEditable = false; + + constructor(private _formBuilder: FormBuilder) {} + + ngOnInit() { + this.firstFormGroup = this._formBuilder.group({ + firstCtrl: ['', Validators.required], + }); + this.secondFormGroup = this._formBuilder.group({ + secondCtrl: ['', Validators.required], + }); + } +} diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 6503786..433c4b5 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -65,4 +65,6 @@ body { color: #fff; background-color: #1b6ec2; border-color: #1861ac; -} \ No newline at end of file +} +html, body { height: 100%; } +body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } From 155fcde278c578fa4a9e057a1b77597edbcc3abd Mon Sep 17 00:00:00 2001 From: aoezdemir Date: Fri, 8 Mar 2024 18:47:07 +0100 Subject: [PATCH 2/5] Implement Validations for Step 1 and Datepicker for Birthdate --- frontend/src/app/app.module.ts | 3 +- .../student-register.component.html | 44 +++++++--- .../student-register.component.scss | 1 + .../student-register.component.ts | 12 ++- frontend/src/styles.scss | 88 +++++++++++-------- 5 files changed, 100 insertions(+), 48 deletions(-) diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index b854298..c24fa50 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -26,6 +26,7 @@ import {MatInputModule} from "@angular/material/input"; import {MatButtonModule} from "@angular/material/button"; import {MatRadioModule} from "@angular/material/radio"; import {MatSelectModule} from "@angular/material/select"; +import {MatIconModule} from "@angular/material/icon"; @NgModule({ declarations: [ @@ -59,7 +60,7 @@ import {MatSelectModule} from "@angular/material/select"; MatInputModule, MatButtonModule, MatRadioModule, - MatSelectModule + MatSelectModule, ], providers: [], bootstrap: [AppComponent] diff --git a/frontend/src/app/components/students/student-register/student-register.component.html b/frontend/src/app/components/students/student-register/student-register.component.html index 2b7ea5d..f106320 100644 --- a/frontend/src/app/components/students/student-register/student-register.component.html +++ b/frontend/src/app/components/students/student-register/student-register.component.html @@ -3,6 +3,7 @@ +
Personal Information @@ -11,54 +12,70 @@ Name - + Surname - + + Birthdate - + + MM/DD/YYYY + + + Gender - Male - Female - Divers + Male + Female + Divers
+ Address - + + Postal Code - + + Phone - + + E-Mail - + + Invalid E-Mail Address
- + +
+ +
+
+ +
Fill out your address @@ -67,12 +84,17 @@ +
+ +
+ + Done

You are now done.

diff --git a/frontend/src/app/components/students/student-register/student-register.component.scss b/frontend/src/app/components/students/student-register/student-register.component.scss index 108e669..ab91878 100644 --- a/frontend/src/app/components/students/student-register/student-register.component.scss +++ b/frontend/src/app/components/students/student-register/student-register.component.scss @@ -41,3 +41,4 @@ button { flex-direction: column; width: 45%; } + diff --git a/frontend/src/app/components/students/student-register/student-register.component.ts b/frontend/src/app/components/students/student-register/student-register.component.ts index 0535a98..f09c2f6 100644 --- a/frontend/src/app/components/students/student-register/student-register.component.ts +++ b/frontend/src/app/components/students/student-register/student-register.component.ts @@ -16,10 +16,20 @@ export class StudentRegisterComponent implements OnInit { ngOnInit() { this.firstFormGroup = this._formBuilder.group({ - firstCtrl: ['', Validators.required], + firstName: ['', Validators.required], //^: Asserts the start of the string. \d+: Matches one or more digits.$: Asserts the end of the string. + lastName: ['', Validators.required], + birthdate: ['', Validators.required], + postalCode: ['', [Validators.required, Validators.pattern(/^\d+$/)]], + address: ['', Validators.required], + phone: ['', [Validators.required, Validators.pattern(/^\d+$/)]], + email: ['', [Validators.required, Validators.email]], }); this.secondFormGroup = this._formBuilder.group({ secondCtrl: ['', Validators.required], }); } + + onClick() { + console.log(this.firstFormGroup) + } } diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 433c4b5..1a7a681 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -26,45 +26,63 @@ body { font-family: Roboto, "Helvetica Neue", sans-serif; } -.mat-calendar-body-cell-content { - background-color: #1861ac; - color: #fff; - font-weight: bold; - font-size: 2em; +.mat-form-field-subscript-wrapper { + font-size: 95%; } -.mat-calendar-table { - border: 1px solid white; -} +// customize datepicker +//.mat-datepicker-content-container { +// background:transparent; +//} +//.mat-datepicker-content { +// color: black; +//} +//.mat-calendar-body-cell-content, .mat-calendar-body-label{ +// color: black; +// } -.mat-calendar-table-header { - tr { - th { - padding-top: 2em; - } - th.mat-calendar-table-header-divider { - padding: 0; - } - } -} - -.mat-calendar-controls, -.mat-calendar-table-header, -.mat-calendar-body-label { - color: #fff; - font-size: 2em; -} - -.mat-calendar-previous-button, -.mat-calendar-next-button, -.mat-calendar-period-button { - font-size: 2em; - height: 2em; - color: #fff; - background-color: #1b6ec2; - border-color: #1861ac; -} +// +//.mat-calendar-body-cell-content { +// background-color: #1861ac; +// color: #fff; +// font-weight: bold; +// font-size: 2em; +//} +// +//.mat-calendar-table { +// border: 1px solid white; +//} +// +//.mat-calendar-table-header { +// +// tr { +// th { +// padding-top: 2em; +// } +// +// th.mat-calendar-table-header-divider { +// padding: 0; +// } +// } +//} +// +//.mat-calendar-controls, +//.mat-calendar-table-header, +//.mat-calendar-body-label { +// color: #fff; +// font-size: 2em; +//} +// +//.mat-calendar-previous-button, +//.mat-calendar-next-button, +//.mat-calendar-period-button { +// font-size: 2em; +// height: 2em; +// color: #fff; +// background-color: #1b6ec2; +// border-color: #1861ac; +//} html, body { height: 100%; } body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } From 2ffddafe9a229827ccf160c60eb24364dd09445a Mon Sep 17 00:00:00 2001 From: aoezdemir Date: Sat, 9 Mar 2024 11:45:41 +0100 Subject: [PATCH 3/5] Implement Step 2 --- .../student-register.component.html | 122 ++++++++++++++---- .../student-register.component.scss | 13 +- .../student-register.component.ts | 9 +- 3 files changed, 117 insertions(+), 27 deletions(-) diff --git a/frontend/src/app/components/students/student-register/student-register.component.html b/frontend/src/app/components/students/student-register/student-register.component.html index f106320..f382392 100644 --- a/frontend/src/app/components/students/student-register/student-register.component.html +++ b/frontend/src/app/components/students/student-register/student-register.component.html @@ -3,11 +3,11 @@ + -
+ Personal Information -
@@ -63,37 +63,115 @@ Invalid E-Mail Address
-
- -
- -
- -
- -
+
+ +
-
- Fill out your address + + Banking Information - Address - Account Holder + + + + + IBAN + + + + + BIC + + + + + Name of Financial Institute + -
- -
-
- - -
+ +
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Done diff --git a/frontend/src/app/components/students/student-register/student-register.component.scss b/frontend/src/app/components/students/student-register/student-register.component.scss index ab91878..418a838 100644 --- a/frontend/src/app/components/students/student-register/student-register.component.scss +++ b/frontend/src/app/components/students/student-register/student-register.component.scss @@ -29,8 +29,15 @@ button { display: flex; flex-direction: row; justify-content: space-between; - } + +.formContainer2 { + width: 30%; + display: flex; + flex-direction: column; + justify-content: space-between; +} + .leftContainer { display: flex; flex-direction: column; @@ -41,4 +48,6 @@ button { flex-direction: column; width: 45%; } - +.backButton { + margin-right: 10px; +} diff --git a/frontend/src/app/components/students/student-register/student-register.component.ts b/frontend/src/app/components/students/student-register/student-register.component.ts index f09c2f6..9b95060 100644 --- a/frontend/src/app/components/students/student-register/student-register.component.ts +++ b/frontend/src/app/components/students/student-register/student-register.component.ts @@ -16,16 +16,19 @@ export class StudentRegisterComponent implements OnInit { ngOnInit() { this.firstFormGroup = this._formBuilder.group({ - firstName: ['', Validators.required], //^: Asserts the start of the string. \d+: Matches one or more digits.$: Asserts the end of the string. + firstName: ['', Validators.required], lastName: ['', Validators.required], birthdate: ['', Validators.required], - postalCode: ['', [Validators.required, Validators.pattern(/^\d+$/)]], + postalCode: ['', [Validators.required, Validators.pattern(/^\d+$/)]], //^: Asserts the start of the string. \d+: Matches one or more digits.$: Asserts the end of the string. address: ['', Validators.required], phone: ['', [Validators.required, Validators.pattern(/^\d+$/)]], email: ['', [Validators.required, Validators.email]], }); this.secondFormGroup = this._formBuilder.group({ - secondCtrl: ['', Validators.required], + accountHolder: ['', Validators.required], + iban: ['', [Validators.required, Validators.pattern(/^\d+$/)]], + bic: ['', Validators.required], + nameOfFinancialInstitute: ['', Validators.required], }); } From f3a268f3f35887387b7bb001e02e603e7d906e97 Mon Sep 17 00:00:00 2001 From: aoezdemir Date: Sat, 9 Mar 2024 14:52:14 +0100 Subject: [PATCH 4/5] further Implementation Step 2 --- frontend/src/app/app.module.ts | 5 ++ .../student-register.component.html | 77 +++++++++++-------- .../student-register.component.scss | 32 ++++++-- .../student-register.component.ts | 8 ++ 4 files changed, 83 insertions(+), 39 deletions(-) diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index c24fa50..2f590cb 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -27,6 +27,8 @@ import {MatButtonModule} from "@angular/material/button"; import {MatRadioModule} from "@angular/material/radio"; import {MatSelectModule} from "@angular/material/select"; import {MatIconModule} from "@angular/material/icon"; +import {MatCheckboxModule} from "@angular/material/checkbox"; +import {MatTooltipModule} from "@angular/material/tooltip"; @NgModule({ declarations: [ @@ -61,6 +63,9 @@ import {MatIconModule} from "@angular/material/icon"; MatButtonModule, MatRadioModule, MatSelectModule, + MatCheckboxModule, + MatTooltipModule, + MatIconModule, ], providers: [], bootstrap: [AppComponent] diff --git a/frontend/src/app/components/students/student-register/student-register.component.html b/frontend/src/app/components/students/student-register/student-register.component.html index f382392..2babc85 100644 --- a/frontend/src/app/components/students/student-register/student-register.component.html +++ b/frontend/src/app/components/students/student-register/student-register.component.html @@ -3,7 +3,49 @@ + + +
+ Banking Information + + Account Holder + + + + IBAN + + + + + BIC + + + + + Name of Financial Institute + + + + + Amount in €/Month + + + +
+ Einzugsermächtigung + info +
+
+ +
+ + +
+
@@ -38,7 +80,6 @@ Divers -
@@ -69,45 +110,13 @@
- - - - Banking Information - - Account Holder - - - - IBAN - - - - - BIC - - - - - Name of Financial Institute - - - - -
- - -
-
- + diff --git a/frontend/src/app/components/students/student-register/student-register.component.scss b/frontend/src/app/components/students/student-register/student-register.component.scss index 418a838..36f36de 100644 --- a/frontend/src/app/components/students/student-register/student-register.component.scss +++ b/frontend/src/app/components/students/student-register/student-register.component.scss @@ -23,21 +23,29 @@ button { color: white; background-color: #1576d5; } - -.formContainer { - width: 50%; +.flexContainerRow { display: flex; flex-direction: row; justify-content: space-between; + &.width50 { + width: 50%; + } + &.width20 { + width: 20%; + } } -.formContainer2 { - width: 30%; +.flexContainerColumn { display: flex; flex-direction: column; justify-content: space-between; + &.width30 { + width: 30%; + } } + + .leftContainer { display: flex; flex-direction: column; @@ -48,6 +56,20 @@ button { flex-direction: column; width: 45%; } + .backButton { margin-right: 10px; } + +mat-icon { + color: white; + scale: 80%; +} + +mat-checkbox { + color: white; + margin-bottom: 16px; +} + + + diff --git a/frontend/src/app/components/students/student-register/student-register.component.ts b/frontend/src/app/components/students/student-register/student-register.component.ts index 9b95060..7243ffd 100644 --- a/frontend/src/app/components/students/student-register/student-register.component.ts +++ b/frontend/src/app/components/students/student-register/student-register.component.ts @@ -11,6 +11,12 @@ export class StudentRegisterComponent implements OnInit { firstFormGroup!: FormGroup; secondFormGroup!: FormGroup; isEditable = false; + infoText = "Hiermit ermächtige ich die Tanz- und Sportschule Li-Dance, Inh. Lydia Kolepp (nachfolgend Li-\n" + + "Dance) die Monatsbeiträge i.H.v. oben genannten Betrag, diverse Einmalzahlungen und sonstige\n" + + "Verbindlichkeiten zu Lasten meines Kontos einzuziehen.\n"+ + "Bitte beachten Sie, dass im Falle einer unberechtigten Rücklastschrift Li-Dance ein\n" + + "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." constructor(private _formBuilder: FormBuilder) {} @@ -29,6 +35,8 @@ export class StudentRegisterComponent implements OnInit { iban: ['', [Validators.required, Validators.pattern(/^\d+$/)]], bic: ['', Validators.required], nameOfFinancialInstitute: ['', Validators.required], + amount: ['', [Validators.required, Validators.pattern(/^\d+$/)]], + checked: ['', Validators.required], }); } From f148665a01f261c135338405e538059cdef1e15f Mon Sep 17 00:00:00 2001 From: aoezdemir Date: Sun, 10 Mar 2024 22:22:14 +0100 Subject: [PATCH 5/5] Finished Stepper --- .../student-register.component.html | 183 +++++++----------- .../student-register.component.scss | 8 - .../student-register.component.ts | 96 ++++++++- frontend/src/styles.scss | 21 +- 4 files changed, 187 insertions(+), 121 deletions(-) diff --git a/frontend/src/app/components/students/student-register/student-register.component.html b/frontend/src/app/components/students/student-register/student-register.component.html index 2babc85..281c5b2 100644 --- a/frontend/src/app/components/students/student-register/student-register.component.html +++ b/frontend/src/app/components/students/student-register/student-register.component.html @@ -3,52 +3,29 @@ - - -
- Banking Information - - Account Holder - - - - - IBAN - - - - - BIC - - - - - Name of Financial Institute - - - - - Amount in €/Month - - - + + + + Registration
- Einzugsermächtigung - info + Für den Tanzunterricht (Tanz-Flatrate) +
+
+ Für den Karateunterricht +
+
+ Für freies Training (unterschriebenes Beiblatt muss der Anmeldung beiliegen)
- -
- - +
+
+ + -
+ Personal Information
@@ -105,89 +82,75 @@
-
- +
+ +
+ + +
+ Banking Information + + Account Holder + + + + IBAN + + - - - - - - + + BIC + + - - - - + + Name of Financial Institute + + - - - - + + Amount in €/Month + + +
+ Einzugsermächtigung + info +
+
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+ + +
+ - Done -

You are now done.

-
- - +
+ Consent +
+ Einwilligung zur Erhebung, Speicherung, Verarbeitung und Nutzung von + personenbezogenen Daten + info +
+
+ Einverständniserklärung zur Nutzung von Bild- und Videomaterial + info +
+
+ +
+ +
+ diff --git a/frontend/src/app/components/students/student-register/student-register.component.scss b/frontend/src/app/components/students/student-register/student-register.component.scss index 36f36de..103bbc9 100644 --- a/frontend/src/app/components/students/student-register/student-register.component.scss +++ b/frontend/src/app/components/students/student-register/student-register.component.scss @@ -65,11 +65,3 @@ mat-icon { color: white; scale: 80%; } - -mat-checkbox { - color: white; - margin-bottom: 16px; -} - - - diff --git a/frontend/src/app/components/students/student-register/student-register.component.ts b/frontend/src/app/components/students/student-register/student-register.component.ts index 7243ffd..d716885 100644 --- a/frontend/src/app/components/students/student-register/student-register.component.ts +++ b/frontend/src/app/components/students/student-register/student-register.component.ts @@ -8,8 +8,11 @@ import {FormBuilder, FormGroup, Validators} from "@angular/forms"; }) export class StudentRegisterComponent implements OnInit { + masterFormGroup!: FormGroup; + zeroFormGroup!: FormGroup; firstFormGroup!: FormGroup; secondFormGroup!: FormGroup; + thirdFormGroup!: FormGroup; isEditable = false; infoText = "Hiermit ermächtige ich die Tanz- und Sportschule Li-Dance, Inh. Lydia Kolepp (nachfolgend Li-\n" + "Dance) die Monatsbeiträge i.H.v. oben genannten Betrag, diverse Einmalzahlungen und sonstige\n" + @@ -18,9 +21,77 @@ export class StudentRegisterComponent implements OnInit { "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" + + "Vorgaben mindestens 10 Jahre nach Vertragsende aufbewahrt werden müssen.\n" + + "Ich bin damit einverstanden, dass die oben genannten personenbezogenen Daten zu den oben\n" + + "genannten Zwecken erhoben, gespeichert, verarbeitet, genutzt und ggfs. weitergegeben werden.\n" + + "Ich bin darauf hingewiesen worden, dass die im Rahmen der vorstehend genannten Zwecke\n" + + "erhobenen persönlichen Daten meiner Person unter Beachtung der EU-\n" + + "Datenschutzgrundverordnung (DSGVO) erhoben, gespeichert, genutzt und übermittelt werden.\n" + + "Ich bin zudem darauf hingewiesen worden, dass die Erhebung, Speicherung, Verarbeitung und\n" + + "Nutzung meiner Daten auf freiwilliger Basis erfolgt.\n" + + "Ich bin darüber informiert worden, dass diese Einverständniserklärung jederzeit mit sofortiger\n" + + "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" + + "die durch die Tanzschule organisiert sind und/oder an denen die Tanzschule teilnimmt, auf\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" + + "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" + + "allgemeinen Persönlichkeitsrechts (§22 Kunsturheberrechtsgesetz). Es gilt der Grundsatz, dass\n" + + "Bild- und Video-Material nur mit Einwilligung des Abgebildeten verbreitet oder veröffentlicht\n" + + "werden kann. Es handelt sich hierbei um eine rechtsgeschäftliche Willenserklärung. Deshalb\n" + + "kann bei Minderjährigen eine Einwilligung nur durch den gesetzlichen Vertreter erfolgen.\n" + + "Diese Einverständniserklärung kann mit sofortiger Wirkung verweigert, bzw. jederzeit mit\n" + + "Wirkung für die Zukunft widerrufen werden. Ein Widerruf kann einen Ausschluss aus der\n" + + "jeweiligen Veranstaltung zur Folge haben.\n" + + "Ein späterer rückwirkender Widerruf für aktuell stattfindende bzw. bereits stattgefundene\n" + + "Veranstaltungen ist ausgeschlossen." + constructor(private _formBuilder: FormBuilder) {} ngOnInit() { + //TODO Test to group all forms into one master form + // this.masterFormGroup = this._formBuilder.group({ + // zeroFormGroup: this._formBuilder.group({ + // danceTraining: [''], + // karateTraining: [''], + // freeTraining: [''], + // }, { + // validators: [this.requireAtLeastOne] + // }), + // firstFormGroup: this._formBuilder.group({ + // firstName: ['', Validators.required], + // lastName: ['', Validators.required], + // birthdate: ['', Validators.required], + // postalCode: ['', [Validators.required, Validators.pattern(/^\d+$/)]], + // address: ['', Validators.required], + // phone: ['', [Validators.required, Validators.pattern(/^\d+$/)]], + // email: ['', [Validators.required, Validators.email]], + // }), + // secondFormGroup: this._formBuilder.group({ + // accountHolder: ['', Validators.required], + // iban: ['', [Validators.required, Validators.pattern(/^\d+$/)]], + // bic: ['', Validators.required], + // nameOfFinancialInstitute: ['', Validators.required], + // amount: ['', [Validators.required, Validators.pattern(/^\d+$/)]], + // einzugsermaechtigung: ['', Validators.required], + // }), + // thirdFormGroup: this._formBuilder.group({ + // einwilligung: ['', Validators.required], + // einverstaendniserklaerung: ['', Validators.required], + // }), + // }); + // } + + this.zeroFormGroup = this._formBuilder.group({ + danceTraining: [''], + karateTraining: [''], + freeTraining: [''], + }, { + validators : [this.requireAtLeastOne] + } + ) this.firstFormGroup = this._formBuilder.group({ firstName: ['', Validators.required], lastName: ['', Validators.required], @@ -30,17 +101,38 @@ export class StudentRegisterComponent implements OnInit { phone: ['', [Validators.required, Validators.pattern(/^\d+$/)]], email: ['', [Validators.required, Validators.email]], }); + this.secondFormGroup = this._formBuilder.group({ accountHolder: ['', Validators.required], iban: ['', [Validators.required, Validators.pattern(/^\d+$/)]], bic: ['', Validators.required], nameOfFinancialInstitute: ['', Validators.required], amount: ['', [Validators.required, Validators.pattern(/^\d+$/)]], - checked: ['', Validators.required], + einzugsermaechtigung: ['', Validators.required], + }); + + this.thirdFormGroup = this._formBuilder.group({ + einwilligung: ['', Validators.required], + einverstaendniserklaerung: ['', Validators.required], }); } onClick() { - console.log(this.firstFormGroup) + console.log(this.zeroFormGroup) } + + // Custom validator function + requireAtLeastOne(formGroup: FormGroup) { + const danceTraining = formGroup.get('danceTraining')?.value + const karateTraining = formGroup.get('karateTraining')?.value + const freeTraining = formGroup.get('freeTraining')?.value + + if (!danceTraining && !karateTraining && !freeTraining ) { + return {requiredAtLeastOne: true} + } + + return null + + } + } diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 1a7a681..be11440 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -1,6 +1,8 @@ /* Provide sufficient contrast against white background */ @import "~bootstrap-icons/font/bootstrap-icons.css"; + + a { color: #0366d6; } @@ -30,7 +32,24 @@ body { font-size: 95%; } -// customize datepicker + +.mat-checkbox-checked.mat-accent .mat-checkbox-background { + background-color: #0366d6 !important; +} +mat-checkbox-checked { + border-color: white; +} +mat-checkbox { + color: white; + margin-bottom: 16px; +} +.mat-step-header .mat-step-icon-selected, .mat-step-icon-state-edit{ + background-color: #0366d6 !important; +} + + + + // customize datepicker //.mat-datepicker-content-container { // background:transparent; //}