From 822e17068dfda64cd5336a7bd503da9d3066bb90 Mon Sep 17 00:00:00 2001 From: aoezdemir Date: Thu, 7 Mar 2024 10:18:13 +0100 Subject: [PATCH 01/21] 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; } -- 2.40.1 From 155fcde278c578fa4a9e057a1b77597edbcc3abd Mon Sep 17 00:00:00 2001 From: aoezdemir Date: Fri, 8 Mar 2024 18:47:07 +0100 Subject: [PATCH 02/21] 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; } -- 2.40.1 From 2ffddafe9a229827ccf160c60eb24364dd09445a Mon Sep 17 00:00:00 2001 From: aoezdemir Date: Sat, 9 Mar 2024 11:45:41 +0100 Subject: [PATCH 03/21] 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], }); } -- 2.40.1 From f3a268f3f35887387b7bb001e02e603e7d906e97 Mon Sep 17 00:00:00 2001 From: aoezdemir Date: Sat, 9 Mar 2024 14:52:14 +0100 Subject: [PATCH 04/21] 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], }); } -- 2.40.1 From f148665a01f261c135338405e538059cdef1e15f Mon Sep 17 00:00:00 2001 From: aoezdemir Date: Sun, 10 Mar 2024 22:22:14 +0100 Subject: [PATCH 05/21] 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; //} -- 2.40.1 From 161f4082cc44143b314e625c45131cdb55f882bb Mon Sep 17 00:00:00 2001 From: Igor Propisnov Date: Sun, 10 Mar 2024 23:06:54 +0100 Subject: [PATCH 06/21] run prettier --- frontend/src/app/app-routing.module.ts | 4 +- frontend/src/app/app.module.ts | 18 +- .../student-register.component.html | 205 +++++++++++------- .../student-register.component.scss | 6 +- .../student-register.component.spec.ts | 5 +- .../student-register.component.ts | 168 +++++++------- frontend/src/styles.scss | 23 +- 7 files changed, 243 insertions(+), 186 deletions(-) diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index 3ca09a1..b43c49b 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -3,7 +3,7 @@ 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"; +import { StudentRegisterComponent } from './components/students/student-register/student-register.component'; const routes: Routes = [ { path: 'students', component: StudentListComponent }, @@ -11,7 +11,7 @@ const routes: Routes = [ { path: 'select', component: VisitsDatetimeComponent }, { path: 'register', component: StudentRegisterComponent }, { path: 'visits/:date/:time', component: VisitsComponent }, - { path: '**', redirectTo: 'students' } + { path: '**', redirectTo: 'students' }, ]; @NgModule({ diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 25067a6..66ecb37 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, ReactiveFormsModule} 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'; @@ -21,14 +21,14 @@ 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"; -import {MatIconModule} from "@angular/material/icon"; -import {MatCheckboxModule} from "@angular/material/checkbox"; -import {MatTooltipModule} from "@angular/material/tooltip"; +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'; +import { MatIconModule } from '@angular/material/icon'; +import { MatCheckboxModule } from '@angular/material/checkbox'; +import { MatTooltipModule } from '@angular/material/tooltip'; @NgModule({ declarations: [ 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 281c5b2..ffb16a6 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 @@ -8,149 +8,206 @@
Registration
- Für den Tanzunterricht (Tanz-Flatrate) + Für den Tanzunterricht (Tanz-Flatrate)
- Für den Karateunterricht + Für den Karateunterricht
- Für freies Training (unterschriebenes Beiblatt muss der Anmeldung beiliegen) + Für freies Training (unterschriebenes Beiblatt muss der Anmeldung + beiliegen)
- +
-
Personal Information -
+
+ + Name + + - - Name - - + + Surname + + - - Surname - - + + Birthdate + + MM/DD/YYYY + + + + + Gender + + Male + Female + Divers + + +
+
+ + Address + + - - Birthdate - - MM/DD/YYYY - - - + + Postal Code + + + + Phone + + - - Gender - - Male - Female - Divers - - -
-
- - - Address - - - - - Postal Code - - - - - Phone - - - - - E-Mail - - Invalid E-Mail Address - -
+ + E-Mail + + Invalid E-Mail Address + +
- +
-
+ Banking Information Account Holder - + IBAN - + BIC - + Name of Financial Institute - + Amount in €/Month - +
- Einzugsermächtigung - info + Einzugsermächtigung + info
- +
-
+ Consent
- Einwilligung zur Erhebung, Speicherung, Verarbeitung und Nutzung von - personenbezogenen Daten - info + Einwilligung zur Erhebung, Speicherung, Verarbeitung und Nutzung von + personenbezogenen Daten + + info
- Einverständniserklärung zur Nutzung von Bild- und Videomaterial - 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 103bbc9..773b918 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 @@ -10,7 +10,8 @@ background-color: transparent; } -input, button { +input, +button { color: white; } @@ -18,7 +19,6 @@ button { background-color: #0366d6; } - ::selection { color: white; background-color: #1576d5; @@ -44,8 +44,6 @@ button { } } - - .leftContainer { display: flex; flex-direction: column; 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 index 7b5bfdb..11107a6 100644 --- 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 @@ -8,9 +8,8 @@ describe('StudentRegisterComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ StudentRegisterComponent ] - }) - .compileComponents(); + declarations: [StudentRegisterComponent], + }).compileComponents(); }); beforeEach(() => { 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 d716885..93c2469 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 @@ -1,12 +1,11 @@ import { Component, OnInit } from '@angular/core'; -import {FormBuilder, FormGroup, Validators} from "@angular/forms"; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'li-student-register', templateUrl: './student-register.component.html', - styleUrls: ['./student-register.component.scss'] + styleUrls: ['./student-register.component.scss'], }) - export class StudentRegisterComponent implements OnInit { masterFormGroup!: FormGroup; zeroFormGroup!: FormGroup; @@ -14,84 +13,89 @@ export class StudentRegisterComponent implements OnInit { 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" + - "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." + 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.'; - 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" + 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." + 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.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.zeroFormGroup = this._formBuilder.group( + { + danceTraining: [''], + karateTraining: [''], + freeTraining: [''], + }, + { + validators: [this.requireAtLeastOne], } - ) + ); this.firstFormGroup = this._formBuilder.group({ firstName: ['', Validators.required], lastName: ['', Validators.required], @@ -104,10 +108,10 @@ export class StudentRegisterComponent implements OnInit { this.secondFormGroup = this._formBuilder.group({ accountHolder: ['', Validators.required], - iban: ['', [Validators.required, Validators.pattern(/^\d+$/)]], + iban: ['', [Validators.required, Validators.pattern(/^\d+$/)]], bic: ['', Validators.required], nameOfFinancialInstitute: ['', Validators.required], - amount: ['', [Validators.required, Validators.pattern(/^\d+$/)]], + amount: ['', [Validators.required, Validators.pattern(/^\d+$/)]], einzugsermaechtigung: ['', Validators.required], }); @@ -118,21 +122,19 @@ export class StudentRegisterComponent implements OnInit { } onClick() { - console.log(this.zeroFormGroup) + 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 + 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} + if (!danceTraining && !karateTraining && !freeTraining) { + return { requiredAtLeastOne: true }; } - return null - + return null; } - } diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index ca886d5..52a4aad 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -1,7 +1,6 @@ /* Provide sufficient contrast against white background */ -@import "~bootstrap-icons/font/bootstrap-icons.css"; - +@import '~bootstrap-icons/font/bootstrap-icons.css'; a { color: #0366d6; @@ -32,7 +31,6 @@ body { font-size: 95%; } - .mat-checkbox-checked.mat-accent .mat-checkbox-background { background-color: #0366d6 !important; } @@ -43,13 +41,12 @@ mat-checkbox { color: white; 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; } - - - // customize datepicker +// customize datepicker //.mat-datepicker-content-container { // background:transparent; //} @@ -60,8 +57,6 @@ mat-checkbox { // color: black; // } - - // //.mat-calendar-body-cell-content { // background-color: #1861ac; @@ -103,5 +98,11 @@ mat-checkbox { // background-color: #1b6ec2; // border-color: #1861ac; //} -html, body { height: 100%; } -body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } +html, +body { + height: 100%; +} +body { + margin: 0; + font-family: Roboto, 'Helvetica Neue', sans-serif; +} -- 2.40.1 From 7f3aa2c922ca33f11b5ca087bd49f6193624e15c Mon Sep 17 00:00:00 2001 From: aoezdemir Date: Tue, 12 Mar 2024 16:01:45 +0100 Subject: [PATCH 07/21] Change to a custom theme. --- .../student-register.component.html | 3 +- .../student-register.component.scss | 6 +- frontend/src/styles.scss | 99 +++++++++++-------- 3 files changed, 62 insertions(+), 46 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 ffb16a6..e271d4e 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 @@ -28,8 +28,7 @@
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 773b918..4d84e8a 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 @@ -15,9 +15,9 @@ button { color: white; } -button { - background-color: #0366d6; -} +//button { +// background-color: #0366d6; +//} ::selection { color: white; diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 52a4aad..1a2401a 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -1,19 +1,49 @@ /* Provide sufficient contrast against white background */ +@use "@angular/material" as mat; @import '~bootstrap-icons/font/bootstrap-icons.css'; +@include mat.core(); -a { - color: #0366d6; -} +$my-primary: mat.define-palette(mat.$blue-palette); +$my-accent: mat.define-palette(mat.$gray-palette); -code { - color: #e01a76; -} -.btn-primary { - color: #fff; - background-color: #1b6ec2; - border-color: #1861ac; +$my-theme: mat.define-light-theme(( + color: ( + primary: $my-primary, + accent: $my-accent, + ), + typography: mat.define-typography-config(), + density: 0, +)); + +// Emit theme-dependent styles for common features used across multiple components. +@include mat.core-theme($my-theme); + +// Emit styles for MatButton based on `$my-theme`. Because the configuration +// passed to `define-light-theme` omits typography, `button-theme` will not +// emit any typography styles. +@include mat.all-component-colors($my-theme); +@include mat.button-color($my-theme); +// Include the theme mixins for other components you use here. +//a { +// color: #0366d6; +//} +// +//code { +// color: #e01a76; +//} +// +//.btn-primary { +// color: #fff; +// background-color: #1b6ec2; +// border-color: #1861ac; +//} + +body { + margin: 0; + font-family: Roboto, 'Helvetica Neue', sans-serif; + background-color: rgb(245, 126, 32); } html, @@ -21,30 +51,25 @@ body { height: 100%; } -body { - background-color: rgb(245, 126, 32); - margin: 0; - font-family: Roboto, 'Helvetica Neue', sans-serif; -} -.mat-form-field-subscript-wrapper { - font-size: 95%; -} - -.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; -} +//.mat-form-field-subscript-wrapper { +// font-size: 95%; +//} +// +//.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 { @@ -98,11 +123,3 @@ mat-checkbox { // background-color: #1b6ec2; // border-color: #1861ac; //} -html, -body { - height: 100%; -} -body { - margin: 0; - font-family: Roboto, 'Helvetica Neue', sans-serif; -} -- 2.40.1 From c971e4dddc681b4af5995e8398e5457172ae5dd8 Mon Sep 17 00:00:00 2001 From: aoezdemir Date: Tue, 12 Mar 2024 18:06:59 +0100 Subject: [PATCH 08/21] Remove unused method. --- .../students/student-register/student-register.component.html | 2 +- .../students/student-register/student-register.component.ts | 4 ---- 2 files changed, 1 insertion(+), 5 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 e271d4e..6b75bd7 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 @@ -204,7 +204,7 @@ mat-button matStepperNext [disabled]="thirdFormGroup.status == 'INVALID'" - (click)="onClick()"> + > Submit
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 93c2469..cb23368 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 @@ -121,10 +121,6 @@ export class StudentRegisterComponent implements OnInit { }); } - onClick() { - console.log(this.zeroFormGroup); - } - // Custom validator function requireAtLeastOne(formGroup: FormGroup) { const danceTraining = formGroup.get('danceTraining')?.value; -- 2.40.1 From e8dccf3b776e857e6ab57b737f23a0e55978e5ab Mon Sep 17 00:00:00 2001 From: aoezdemir Date: Thu, 14 Mar 2024 15:36:39 +0100 Subject: [PATCH 09/21] Remove Step 0 --- .../student-register.component.html | 31 ------------------- .../student-register.component.ts | 10 ------ 2 files changed, 41 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 6b75bd7..1f54df0 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,37 +3,6 @@ - - -
- Registration -
- Für den Tanzunterricht (Tanz-Flatrate) -
-
- Für den Karateunterricht -
-
- Für freies Training (unterschriebenes Beiblatt muss der Anmeldung - beiliegen) -
-
-
- -
- -
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 cb23368..f47cada 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 @@ -86,16 +86,6 @@ export class StudentRegisterComponent implements OnInit { // }); // } - this.zeroFormGroup = this._formBuilder.group( - { - danceTraining: [''], - karateTraining: [''], - freeTraining: [''], - }, - { - validators: [this.requireAtLeastOne], - } - ); this.firstFormGroup = this._formBuilder.group({ firstName: ['', Validators.required], lastName: ['', Validators.required], -- 2.40.1 From 68695cd3e869c10173e968b18ec8b0a43fc1095d Mon Sep 17 00:00:00 2001 From: aoezdemir Date: Thu, 14 Mar 2024 15:54:32 +0100 Subject: [PATCH 10/21] Change Text and Calendar Format to German --- frontend/package-lock.json | 36 +++++++++++++++++++ frontend/package.json | 2 ++ frontend/src/app/app.module.ts | 9 +++-- .../student-register.component.html | 36 +++++++++---------- .../student-register.component.ts | 10 ++++++ 5 files changed, 73 insertions(+), 20 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 9b5aea5..66ada3a 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -15,11 +15,13 @@ "@angular/core": "^17.2.4", "@angular/forms": "^17.2.4", "@angular/material": "^17.2.2", + "@angular/material-moment-adapter": "^17.2.2", "@angular/platform-browser": "^17.2.4", "@angular/platform-browser-dynamic": "^17.2.4", "@angular/router": "^17.2.4", "bootstrap": "^5.3.3", "bootstrap-icons": "^1.11.3", + "moment": "^2.30.1", "rxjs": "~7.4.0", "tslib": "^2.3.0", "zone.js": "~0.14.4" @@ -1196,6 +1198,19 @@ "rxjs": "^6.5.3 || ^7.4.0" } }, + "node_modules/@angular/material-moment-adapter": { + "version": "17.2.2", + "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-17.2.2.tgz", + "integrity": "sha512-1h8TnghXFpE3z8gWdANan400qtUQnYxRZoKmheN/y3qkTghfNAdGVYxttGE0FnX8Vj6qKURGFF8NsGByl4cmhg==", + "dependencies": { + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/core": "^17.0.0 || ^18.0.0", + "@angular/material": "17.2.2", + "moment": "^2.18.1" + } + }, "node_modules/@angular/platform-browser": { "version": "17.2.4", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-17.2.4.tgz", @@ -14815,6 +14830,14 @@ "node": ">=10" } }, + "node_modules/moment": { + "version": "2.30.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz", + "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==", + "engines": { + "node": "*" + } + }, "node_modules/mrmime": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz", @@ -20054,6 +20077,14 @@ "tslib": "^2.3.0" } }, + "@angular/material-moment-adapter": { + "version": "17.2.2", + "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-17.2.2.tgz", + "integrity": "sha512-1h8TnghXFpE3z8gWdANan400qtUQnYxRZoKmheN/y3qkTghfNAdGVYxttGE0FnX8Vj6qKURGFF8NsGByl4cmhg==", + "requires": { + "tslib": "^2.3.0" + } + }, "@angular/platform-browser": { "version": "17.2.4", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-17.2.4.tgz", @@ -30138,6 +30169,11 @@ "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==", "dev": true }, + "moment": { + "version": "2.30.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz", + "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==" + }, "mrmime": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index fd32026..43942da 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -21,11 +21,13 @@ "@angular/core": "^17.2.4", "@angular/forms": "^17.2.4", "@angular/material": "^17.2.2", + "@angular/material-moment-adapter": "^17.2.2", "@angular/platform-browser": "^17.2.4", "@angular/platform-browser-dynamic": "^17.2.4", "@angular/router": "^17.2.4", "bootstrap": "^5.3.3", "bootstrap-icons": "^1.11.3", + "moment": "^2.30.1", "rxjs": "~7.4.0", "tslib": "^2.3.0", "zone.js": "~0.14.4" diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 66ecb37..651c4be 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -20,7 +20,7 @@ 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 {MY_DATE_FORMAT, 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'; @@ -29,6 +29,8 @@ import { MatSelectModule } from '@angular/material/select'; import { MatIconModule } from '@angular/material/icon'; import { MatCheckboxModule } from '@angular/material/checkbox'; import { MatTooltipModule } from '@angular/material/tooltip'; +import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core'; +import { MomentDateAdapter } from '@angular/material-moment-adapter'; @NgModule({ declarations: [ @@ -67,7 +69,10 @@ import { MatTooltipModule } from '@angular/material/tooltip'; MatTooltipModule, MatIconModule, ], - providers: [], + providers: [ + { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] }, + { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMAT } + ], bootstrap: [AppComponent], }) export class AppModule {} 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 1f54df0..97199fb 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 @@ -6,7 +6,7 @@ - Personal Information + Persönliche Informationen
Name @@ -18,7 +18,7 @@ - Surname + Nachname - Birthdate + Geburtstag - MM/DD/YYYY + MM.DD.YYYY @@ -43,44 +43,44 @@ - Gender + Geschlecht - Male - Female - Divers + männlich + weiblich + divers
- Address + Adresse - Postal Code + Postleitzahl - Phone + Telefon E-Mail - Invalid E-Mail Address + Ungültige E-Mail Adresse
- +
@@ -128,12 +128,12 @@
- +
@@ -168,13 +168,13 @@
- +
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 f47cada..7566a58 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 @@ -1,6 +1,16 @@ import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; + +export const MY_DATE_FORMAT= { + parse: { + dateInput: 'DD.MM.YYYY' + }, + display: { + dateInput: 'DD.MM.YYYY' + } +}; + @Component({ selector: 'li-student-register', templateUrl: './student-register.component.html', -- 2.40.1 From 84d162995e2573e05de18e11f0905e1adc7f2a6f Mon Sep 17 00:00:00 2001 From: aoezdemir Date: Thu, 14 Mar 2024 16:00:27 +0100 Subject: [PATCH 11/21] Further Translation to german. Removed Amount Field. --- .../student-register/student-register.component.html | 12 ++++-------- .../student-register/student-register.component.ts | 3 --- 2 files changed, 4 insertions(+), 11 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 97199fb..fa76e19 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 @@ -86,11 +86,11 @@ - +
- Banking Information + Bank Informationen - Account Holder + Kontoinhaber @@ -105,14 +105,10 @@ - Name of Financial Institute + Name der Bank - - Amount in €/Month - -
Date: Fri, 15 Mar 2024 21:20:47 +0100 Subject: [PATCH 12/21] Tool Tipp Texte ausschreiben --- .../student-register.component.html | 86 ++++++++----------- .../student-register.component.scss | 19 ++-- .../student-register.component.ts | 7 +- 3 files changed, 56 insertions(+), 56 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 fa76e19..8c8ace4 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 @@ -2,7 +2,7 @@ - + @@ -87,39 +87,37 @@ - + Bank Informationen - - Kontoinhaber - - +
+
+ + Kontoinhaber + + - - IBAN - - + + IBAN + + +
- - BIC - - +
+ + BIC + + - - Name der Bank - - + + Name der Bank + + +
+
- -
- Einzugsermächtigung - info +
+ + Einzugsermächtigung
@@ -136,30 +134,21 @@ -
- Consent -
+ + Einwilligung +
+ Einwilligung zur Erhebung, Speicherung, Verarbeitung und Nutzung von + >Einwilligung zur Erhebung, Speicherung, Verarbeitung und Nutzung von personenbezogenen Daten - info
-
+
+
+ Einverständniserklärung zur Nutzung von Bild- und Videomaterial + >Einverständniserklärung zur Nutzung von Bild- und Videomaterial - info
@@ -169,9 +158,10 @@ mat-button matStepperNext [disabled]="thirdFormGroup.status == 'INVALID'" - > + > Fertig
+ 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 4d84e8a..1d6ba1b 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 @@ -27,12 +27,12 @@ button { display: flex; flex-direction: row; justify-content: space-between; - &.width50 { - width: 50%; - } - &.width20 { - width: 20%; - } +} +.width50 { + width: 50%; +} +.width20 { + width: 20%; } .flexContainerColumn { @@ -63,3 +63,10 @@ mat-icon { color: white; scale: 80%; } + +textarea { + font-family: inherit; + border-radius: 10px 10px 0px 0px; + padding: 5px; + resize: none; +} 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 0db2f3e..7d5f392 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 @@ -7,7 +7,10 @@ export const MY_DATE_FORMAT= { dateInput: 'DD.MM.YYYY' }, display: { - dateInput: 'DD.MM.YYYY' + dateInput: 'DD.MM.YYYY', + monthYearLabel: 'MMM YYYY', + dateA11yLabel: 'YYYY-MM-DD', + monthYearA11yLabel: 'MMMM YYYY' } }; @@ -21,7 +24,7 @@ export class StudentRegisterComponent implements OnInit { firstFormGroup!: FormGroup; secondFormGroup!: FormGroup; thirdFormGroup!: FormGroup; - infoText = + infoTextEinzugermaechtigung = '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' + -- 2.40.1 From 06a283c405db3109f29ddceedce70b14b2dea023 Mon Sep 17 00:00:00 2001 From: aoezdemir Date: Fri, 15 Mar 2024 21:50:11 +0100 Subject: [PATCH 13/21] Customize Mat-Button --- .../student-register.component.scss | 27 ++++--------------- frontend/src/styles.scss | 12 ++++----- 2 files changed, 11 insertions(+), 28 deletions(-) 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 1d6ba1b..81190a6 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 @@ -10,38 +10,25 @@ background-color: transparent; } -input, -button { - color: white; -} - -//button { -// background-color: #0366d6; -//} - -::selection { - color: white; - background-color: #1576d5; -} .flexContainerRow { display: flex; flex-direction: row; justify-content: space-between; } + .width50 { width: 50%; } .width20 { width: 20%; } - +.width30 { + width: 30%; +} .flexContainerColumn { display: flex; flex-direction: column; justify-content: space-between; - &.width30 { - width: 30%; - } } .leftContainer { @@ -59,14 +46,10 @@ button { margin-right: 10px; } -mat-icon { - color: white; - scale: 80%; -} - textarea { font-family: inherit; border-radius: 10px 10px 0px 0px; padding: 5px; resize: none; } + diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 1a2401a..57067a2 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -5,7 +5,7 @@ @include mat.core(); $my-primary: mat.define-palette(mat.$blue-palette); -$my-accent: mat.define-palette(mat.$gray-palette); +$my-accent: mat.define-palette(mat.$blue-palette); $my-theme: mat.define-light-theme(( @@ -19,12 +19,12 @@ $my-theme: mat.define-light-theme(( // Emit theme-dependent styles for common features used across multiple components. @include mat.core-theme($my-theme); +@include mat.all-component-themes($my-theme); + +.mdc-button { + background: rgba(255, 255, 255, 0.82) !important; +} -// Emit styles for MatButton based on `$my-theme`. Because the configuration -// passed to `define-light-theme` omits typography, `button-theme` will not -// emit any typography styles. -@include mat.all-component-colors($my-theme); -@include mat.button-color($my-theme); // Include the theme mixins for other components you use here. //a { // color: #0366d6; -- 2.40.1 From 16044591c3b0810b34cd46574cc8e0a7481c5f7e Mon Sep 17 00:00:00 2001 From: aoezdemir Date: Fri, 15 Mar 2024 22:37:29 +0100 Subject: [PATCH 14/21] Implement Angular-IBAN Validator --- frontend/package-lock.json | 32 +++ frontend/package.json | 1 + frontend/src/app/app.module.ts | 2 + .../student-register.component.html | 229 ++++++++++++------ .../student-register.component.ts | 31 +-- 5 files changed, 206 insertions(+), 89 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 66ada3a..46ff2eb 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -19,6 +19,7 @@ "@angular/platform-browser": "^17.2.4", "@angular/platform-browser-dynamic": "^17.2.4", "@angular/router": "^17.2.4", + "angular-iban": "^17.0.0", "bootstrap": "^5.3.3", "bootstrap-icons": "^1.11.3", "moment": "^2.30.1", @@ -7163,6 +7164,19 @@ "ajv": "^8.8.2" } }, + "node_modules/angular-iban": { + "version": "17.0.0", + "resolved": "https://registry.npmjs.org/angular-iban/-/angular-iban-17.0.0.tgz", + "integrity": "sha512-8wnVH2nfMN3hk/5lWOmcCRA0RAVpCk49stCXkxiiMbXeRNd2pFBM+hlZIrhC+Nxhxf07KnQOpngmXGHiv29lug==", + "dependencies": { + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/common": "^17.x", + "@angular/core": "^17.x", + "iban": "0.0.14" + } + }, "node_modules/ansi-colors": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz", @@ -11102,6 +11116,11 @@ "node": ">=10.17.0" } }, + "node_modules/iban": { + "version": "0.0.14", + "resolved": "https://registry.npmjs.org/iban/-/iban-0.0.14.tgz", + "integrity": "sha512-+rocNKk+Ga9m8Lr9fTMWd+87JnsBrucm0ZsIx5ROOarZlaDLmd+FKdbtvb0XyoBw9GAFOYG2GuLqoNB16d+p3w==" + }, "node_modules/iconv-lite": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", @@ -24512,6 +24531,14 @@ "fast-deep-equal": "^3.1.3" } }, + "angular-iban": { + "version": "17.0.0", + "resolved": "https://registry.npmjs.org/angular-iban/-/angular-iban-17.0.0.tgz", + "integrity": "sha512-8wnVH2nfMN3hk/5lWOmcCRA0RAVpCk49stCXkxiiMbXeRNd2pFBM+hlZIrhC+Nxhxf07KnQOpngmXGHiv29lug==", + "requires": { + "tslib": "^2.3.0" + } + }, "ansi-colors": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz", @@ -27423,6 +27450,11 @@ "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==", "dev": true }, + "iban": { + "version": "0.0.14", + "resolved": "https://registry.npmjs.org/iban/-/iban-0.0.14.tgz", + "integrity": "sha512-+rocNKk+Ga9m8Lr9fTMWd+87JnsBrucm0ZsIx5ROOarZlaDLmd+FKdbtvb0XyoBw9GAFOYG2GuLqoNB16d+p3w==" + }, "iconv-lite": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", diff --git a/frontend/package.json b/frontend/package.json index 43942da..c188965 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -25,6 +25,7 @@ "@angular/platform-browser": "^17.2.4", "@angular/platform-browser-dynamic": "^17.2.4", "@angular/router": "^17.2.4", + "angular-iban": "^17.0.0", "bootstrap": "^5.3.3", "bootstrap-icons": "^1.11.3", "moment": "^2.30.1", diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 651c4be..18b0b5b 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -31,6 +31,7 @@ import { MatCheckboxModule } from '@angular/material/checkbox'; import { MatTooltipModule } from '@angular/material/tooltip'; import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core'; import { MomentDateAdapter } from '@angular/material-moment-adapter'; +import {AngularIbanModule} from "angular-iban"; @NgModule({ declarations: [ @@ -68,6 +69,7 @@ import { MomentDateAdapter } from '@angular/material-moment-adapter'; MatCheckboxModule, MatTooltipModule, MatIconModule, + AngularIbanModule ], providers: [ { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] }, 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 8c8ace4..d03b015 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 @@ -4,86 +4,165 @@ - -
- Persönliche Informationen -
- - Name - - + + + + + + + + + + + + - - Nachname - - + + + + + + + + - - Geburtstag - - MM.DD.YYYY - - - + + + + + + + + + + + + + + + - - Geschlecht - - männlich - weiblich - divers - - -
-
- - Adresse - - + + + + + + + + + + + + + + - - Postleitzahl - - + + + + - - Telefon - - + + + + - - E-Mail - - Ungültige E-Mail Adresse - -
-
-
- - -
- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -98,7 +177,7 @@ IBAN - +
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 7d5f392..81dbcef 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 @@ -1,6 +1,6 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, input, OnInit} from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; - +import {ValidatorService} from "angular-iban"; export const MY_DATE_FORMAT= { parse: { @@ -9,7 +9,7 @@ export const MY_DATE_FORMAT= { display: { dateInput: 'DD.MM.YYYY', monthYearLabel: 'MMM YYYY', - dateA11yLabel: 'YYYY-MM-DD', + dateA11yLabel: 'DD.MM.YYYY', monthYearA11yLabel: 'MMMM YYYY' } }; @@ -20,6 +20,7 @@ export const MY_DATE_FORMAT= { styleUrls: ['./student-register.component.scss'], }) export class StudentRegisterComponent implements OnInit { + inputText: string = ''; masterFormGroup!: FormGroup; firstFormGroup!: FormGroup; secondFormGroup!: FormGroup; @@ -109,7 +110,7 @@ export class StudentRegisterComponent implements OnInit { this.secondFormGroup = this._formBuilder.group({ accountHolder: ['', Validators.required], - iban: ['', [Validators.required, Validators.pattern(/^\d+$/)]], + iban: ['', [Validators.required, ValidatorService.validateIban]], bic: ['', Validators.required], nameOfFinancialInstitute: ['', Validators.required], einzugsermaechtigung: ['', Validators.required], @@ -119,18 +120,20 @@ export class StudentRegisterComponent implements OnInit { einwilligung: ['', Validators.required], einverstaendniserklaerung: ['', Validators.required], }); + + this.secondFormGroup.get("iban")?.valueChanges.subscribe(value => { + if(value) { + this.capitalizeFirstTwoLetters(); + } + }) } - // 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 }; + capitalizeFirstTwoLetters() { + let ibanValue = this.secondFormGroup.get("iban")?.value + if(ibanValue.length >= 2) { + this.secondFormGroup.patchValue({ + iban: ibanValue.substring(0,2).toUpperCase()+ibanValue.substring(2) + },{emitEvent:false}) //Prevent circular change detection } - - return null; } } -- 2.40.1 From 9f2481693a5586ac2426b6bc0b03495bca5802f9 Mon Sep 17 00:00:00 2001 From: aoezdemir Date: Fri, 15 Mar 2024 22:38:37 +0100 Subject: [PATCH 15/21] Remove Comment. --- .../student-register.component.html | 298 +++++++++--------- 1 file changed, 147 insertions(+), 151 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 d03b015..79d4129 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 @@ -1,168 +1,164 @@ - - - - - - - - - - - - - - - - + +
+ Persönliche Informationen +
+ + Name + + - - - - - - - - + + Nachname + + - - - - - - - - - - - - - - - + + Geburtstag + + MM.DD.YYYY + + + - - - - - - - - - - - - - - + + Geschlecht + + männlich + weiblich + divers + + +
+
+ + Adresse + + - - - - + + Postleitzahl + + - - - - + + Telefon + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + E-Mail + + Ungültige E-Mail Adresse + +
+
+
+ + +
+ +
+ Persönliche Informationen +
+ + Name + + - - - - - - - - + + Nachname + + - - - - - - - - - - - - - - - + + Geburtstag + + MM.DD.YYYY + + + - - - - - - - - - - - - - - + + Geschlecht + + männlich + weiblich + divers + + +
+
+ + Adresse + + - - - - + + Postleitzahl + + - - - - + + Telefon + + - - - - - - - - - - - - - - - - - + + E-Mail + + Ungültige E-Mail Adresse + +
+
+
+ + +
+ -- 2.40.1 From b5b24b33a8fa6b524174d4abc67a887457978b36 Mon Sep 17 00:00:00 2001 From: aoezdemir Date: Fri, 15 Mar 2024 22:39:42 +0100 Subject: [PATCH 16/21] Remove Duplicate Step. --- .../student-register.component.html | 79 ------------------- 1 file changed, 79 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 79d4129..2e8764f 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 @@ -79,85 +79,6 @@ Weiter
- -
- Persönliche Informationen -
- - Name - - - - - Nachname - - - - - Geburtstag - - MM.DD.YYYY - - - - - - Geschlecht - - männlich - weiblich - divers - - -
-
- - Adresse - - - - - Postleitzahl - - - - - Telefon - - - - - E-Mail - - Ungültige E-Mail Adresse - -
-
-
- - -
-- 2.40.1 From 5fb7ecd08e45efeaf1ee4bd301ef578487368a85 Mon Sep 17 00:00:00 2001 From: aoezdemir Date: Mon, 18 Mar 2024 00:35:00 +0100 Subject: [PATCH 17/21] Implement student registration DTO and student registration serivce --- .../student-register.component.ts | 65 +++++++++---------- .../src/app/models/student-registration.ts | 16 +++++ .../app/services/register/register.service.ts | 21 ++++++ 3 files changed, 67 insertions(+), 35 deletions(-) create mode 100644 frontend/src/app/models/student-registration.ts create mode 100644 frontend/src/app/services/register/register.service.ts 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 81dbcef..574c234 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 @@ -1,6 +1,8 @@ import {Component, input, OnInit} from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import {ValidatorService} from "angular-iban"; +import {StudentRegistration} from "../../../models/student-registration"; +import {RegisterService} from "../../../services/register/register.service"; export const MY_DATE_FORMAT= { parse: { @@ -20,8 +22,6 @@ export const MY_DATE_FORMAT= { styleUrls: ['./student-register.component.scss'], }) export class StudentRegisterComponent implements OnInit { - inputText: string = ''; - masterFormGroup!: FormGroup; firstFormGroup!: FormGroup; secondFormGroup!: FormGroup; thirdFormGroup!: FormGroup; @@ -62,41 +62,9 @@ export class StudentRegisterComponent implements OnInit { '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, private registerService: RegisterService) {} 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.firstFormGroup = this._formBuilder.group({ firstName: ['', Validators.required], @@ -136,4 +104,31 @@ export class StudentRegisterComponent implements OnInit { },{emitEvent:false}) //Prevent circular change detection } } + + submit() { + const studentRegistration: StudentRegistration = { + // First Form Group + firstName: this.firstFormGroup.get('firstName')?.value, + lastName: this.firstFormGroup.get('lastName')?.value, + birthdate: this.firstFormGroup.get('birthdate')?.value, + postalCode: this.firstFormGroup.get('postalCode')?.value, + address: this.firstFormGroup.get('address')?.value, + phone: this.firstFormGroup.get('phone')?.value, + email: this.firstFormGroup.get('email')?.value, + + // Second Form Group + accountHolder: this.secondFormGroup.get('accountHolder')?.value, + iban: this.secondFormGroup.get('iban')?.value, + bic: this.secondFormGroup.get('bic')?.value, + nameOfFinancialInstitute: this.secondFormGroup.get('nameOfFinancialInstitute')?.value, + einzugsermaechtigung: this.secondFormGroup.get('einzugsermaechtigung')?.value, + + // Third Form Group + einwilligung: this.thirdFormGroup.get('einwilligung')?.value, + einverstaendniserklaerung: this.thirdFormGroup.get('einverstaendniserklaerung')?.value + }; + + this.registerService.set(studentRegistration); + + } } diff --git a/frontend/src/app/models/student-registration.ts b/frontend/src/app/models/student-registration.ts new file mode 100644 index 0000000..ddf801d --- /dev/null +++ b/frontend/src/app/models/student-registration.ts @@ -0,0 +1,16 @@ +export interface StudentRegistration { + firstName: string; + lastName: string; + birthdate: Date; + postalCode: string; + address: string; + phone: string; + email: string; + accountHolder: string; + iban: string; + bic: string; + nameOfFinancialInstitute: string; + einzugsermaechtigung: boolean; + einwilligung: boolean; + einverstaendniserklaerung: boolean; +} diff --git a/frontend/src/app/services/register/register.service.ts b/frontend/src/app/services/register/register.service.ts new file mode 100644 index 0000000..0a63508 --- /dev/null +++ b/frontend/src/app/services/register/register.service.ts @@ -0,0 +1,21 @@ +import { Injectable } from '@angular/core'; +import {HttpClient} from "@angular/common/http"; +import {StudentRegistration} from "../../models/student-registration"; +import {Observable} from "rxjs"; +import { environment } from 'src/environments/environment'; + +@Injectable({ + providedIn: 'root' +}) +export class RegisterService { + private readonly serviceName = 'register'; + constructor(private http: HttpClient) { } + + public set(registration: StudentRegistration): Observable { + const payload = JSON.stringify(registration); + + return this.http.post(`${environment.apiUrl}${this.serviceName}/set.php`, + payload + ); + } +} -- 2.40.1 From c1d0100216f7c3bda4573c6d8b9091a684c617af Mon Sep 17 00:00:00 2001 From: aoezdemir Date: Wed, 20 Mar 2024 23:18:18 +0100 Subject: [PATCH 18/21] Placeholder auf Deutsch. --- .../student-register/student-register.component.html | 6 +++--- 1 file changed, 3 insertions(+), 3 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 2e8764f..7404e7f 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 @@ -9,7 +9,7 @@ @@ -18,7 +18,7 @@ @@ -29,7 +29,7 @@ [matDatepicker]="birthdatePicker" formControlName="birthdate" required /> - MM.DD.YYYY + DD.MM.YYYY -- 2.40.1 From 2e21f3f6ac6a80450acdb94391e4d6d1e4a7bca0 Mon Sep 17 00:00:00 2001 From: aoezdemir Date: Sun, 7 Apr 2024 17:39:52 +0200 Subject: [PATCH 19/21] Change request from comments --- .../student-register.component.html | 6 +- .../student-register.component.ts | 12 +-- .../src/app/models/student-registration.ts | 6 +- .../app/services/register/register.service.ts | 4 +- frontend/src/styles.scss | 88 ------------------- 5 files changed, 14 insertions(+), 102 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 7404e7f..1ee0c8c 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 @@ -113,7 +113,7 @@
- Einzugsermächtigung + Einzugsermächtigung
@@ -134,7 +134,7 @@ Einwilligung
- Einwilligung zur Erhebung, Speicherung, Verarbeitung und Nutzung von personenbezogenen Daten @@ -142,7 +142,7 @@
- Einverständniserklärung zur Nutzung von Bild- und Videomaterial
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 574c234..affc528 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 @@ -81,12 +81,12 @@ export class StudentRegisterComponent implements OnInit { iban: ['', [Validators.required, ValidatorService.validateIban]], bic: ['', Validators.required], nameOfFinancialInstitute: ['', Validators.required], - einzugsermaechtigung: ['', Validators.required], + directDebitAuthorization: ['', Validators.required], }); this.thirdFormGroup = this._formBuilder.group({ - einwilligung: ['', Validators.required], - einverstaendniserklaerung: ['', Validators.required], + consent: ['', Validators.required], + declarationOfConsent: ['', Validators.required], }); this.secondFormGroup.get("iban")?.valueChanges.subscribe(value => { @@ -121,11 +121,11 @@ export class StudentRegisterComponent implements OnInit { iban: this.secondFormGroup.get('iban')?.value, bic: this.secondFormGroup.get('bic')?.value, nameOfFinancialInstitute: this.secondFormGroup.get('nameOfFinancialInstitute')?.value, - einzugsermaechtigung: this.secondFormGroup.get('einzugsermaechtigung')?.value, + directDebitAuthorization: this.secondFormGroup.get('directDebitAuthorization')?.value, // Third Form Group - einwilligung: this.thirdFormGroup.get('einwilligung')?.value, - einverstaendniserklaerung: this.thirdFormGroup.get('einverstaendniserklaerung')?.value + consent: this.thirdFormGroup.get('consent')?.value, + declarationOfConsent: this.thirdFormGroup.get('declarationOfConsent')?.value }; this.registerService.set(studentRegistration); diff --git a/frontend/src/app/models/student-registration.ts b/frontend/src/app/models/student-registration.ts index ddf801d..3f5d47e 100644 --- a/frontend/src/app/models/student-registration.ts +++ b/frontend/src/app/models/student-registration.ts @@ -10,7 +10,7 @@ export interface StudentRegistration { iban: string; bic: string; nameOfFinancialInstitute: string; - einzugsermaechtigung: boolean; - einwilligung: boolean; - einverstaendniserklaerung: boolean; + directDebitAuthorization: boolean; + consent: boolean; + declarationOfConsent: boolean; } diff --git a/frontend/src/app/services/register/register.service.ts b/frontend/src/app/services/register/register.service.ts index 0a63508..0cde0f8 100644 --- a/frontend/src/app/services/register/register.service.ts +++ b/frontend/src/app/services/register/register.service.ts @@ -11,10 +11,10 @@ export class RegisterService { private readonly serviceName = 'register'; constructor(private http: HttpClient) { } - public set(registration: StudentRegistration): Observable { + public set(registration: StudentRegistration): Observable { const payload = JSON.stringify(registration); - return this.http.post(`${environment.apiUrl}${this.serviceName}/set.php`, + return this.http.post(`${environment.apiUrl}${this.serviceName}/set.php`, payload ); } diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 57067a2..56f924a 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -1,7 +1,6 @@ /* Provide sufficient contrast against white background */ @use "@angular/material" as mat; -@import '~bootstrap-icons/font/bootstrap-icons.css'; @include mat.core(); $my-primary: mat.define-palette(mat.$blue-palette); @@ -25,20 +24,6 @@ $my-theme: mat.define-light-theme(( background: rgba(255, 255, 255, 0.82) !important; } -// Include the theme mixins for other components you use here. -//a { -// color: #0366d6; -//} -// -//code { -// color: #e01a76; -//} -// -//.btn-primary { -// color: #fff; -// background-color: #1b6ec2; -// border-color: #1861ac; -//} body { margin: 0; @@ -50,76 +35,3 @@ html, body { height: 100%; } - - -//.mat-form-field-subscript-wrapper { -// font-size: 95%; -//} -// -//.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; -//} -//.mat-datepicker-content { -// color: black; -//} -//.mat-calendar-body-cell-content, .mat-calendar-body-label{ -// color: black; -// } - -// -//.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; -//} -- 2.40.1 From 52e8b1aa89bf8d76f5a5c7d17858de30f03c7d7c Mon Sep 17 00:00:00 2001 From: aoezdemir Date: Sun, 7 Apr 2024 23:28:24 +0200 Subject: [PATCH 20/21] Requested UI Changes --- .../student-register.component.html | 18 ++--- .../student-register.component.scss | 16 ++--- .../student-register.component.ts | 66 ++++++++++--------- frontend/src/styles.scss | 4 ++ 4 files changed, 55 insertions(+), 49 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 1ee0c8c..e5c5a72 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 @@ -1,7 +1,8 @@ +
- -
+ + Persönliche Informationen
@@ -28,8 +29,8 @@ matInput [matDatepicker]="birthdatePicker" formControlName="birthdate" + placeholder="DD.MM.YYYY" required /> - DD.MM.YYYY @@ -40,7 +41,7 @@ Geschlecht - + männlich weiblich divers @@ -60,7 +61,7 @@ Telefon - + @@ -71,7 +72,6 @@
-
-
@@ -127,7 +126,6 @@
- @@ -154,10 +152,12 @@ mat-button matStepperNext [disabled]="thirdFormGroup.status == 'INVALID'" + (click)="submit()" > Fertig
- + +
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 81190a6..b45bf5a 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 @@ -1,24 +1,23 @@ +.stepperContainer { + display: flex; + justify-content: space-around; +} + .mat-stepper-horizontal { margin-top: 8px; + background-color: transparent; + min-width: 50%; } .mat-form-field { margin-top: 16px; } -.mat-stepper-horizontal { - background-color: transparent; -} - .flexContainerRow { display: flex; flex-direction: row; justify-content: space-between; } - -.width50 { - width: 50%; -} .width20 { width: 20%; } @@ -48,7 +47,6 @@ textarea { font-family: inherit; - border-radius: 10px 10px 0px 0px; padding: 5px; resize: none; } 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 affc528..9a804fa 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 @@ -26,40 +26,39 @@ export class StudentRegisterComponent implements OnInit { secondFormGroup!: FormGroup; thirdFormGroup!: FormGroup; infoTextEinzugermaechtigung = - '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' + + 'Hiermit ermächtige ich die Tanz- und Sportschule Li-Dance, Inh. Lydia Kolepp (nachfolgend Li-Dance) die Monatsbeiträge i.H.v. oben genannten Betrag, diverse Einmalzahlungen und sonstige' + + 'Verbindlichkeiten zu Lasten meines Kontos einzuziehen.' + + 'Bitte beachten Sie, dass im Falle einer unberechtigten Rücklastschrift Li-Dance ein' + + 'Verwaltungsaufwand entsteht und eine Gebühr i.H.v. derzeit 15,- € berechnet wird. Diese Gebühr' + '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' + + 'Ich bin darüber informiert worden, dass meine personenbezogenen Daten aufgrund rechtlicher' + + 'Vorgaben mindestens 10 Jahre nach Vertragsende aufbewahrt werden müssen.' + + 'Ich bin damit einverstanden, dass die oben genannten personenbezogenen Daten zu den oben' + + 'genannten Zwecken erhoben, gespeichert, verarbeitet, genutzt und ggfs. weitergegeben werden.' + + 'Ich bin darauf hingewiesen worden, dass die im Rahmen der vorstehend genannten Zwecke' + + 'erhobenen persönlichen Daten meiner Person unter Beachtung der EU-' + + 'Datenschutzgrundverordnung (DSGVO) erhoben, gespeichert, genutzt und übermittelt werden.' + + 'Ich bin zudem darauf hingewiesen worden, dass die Erhebung, Speicherung, Verarbeitung und' + + 'Nutzung meiner Daten auf freiwilliger Basis erfolgt.' + + 'Ich bin darüber informiert worden, dass diese Einverständniserklärung jederzeit mit sofortiger' + + 'Wirkung verweigert, bzw. jederzeit mit Wirkung für die Zukunft widerrufen werden kann. Meine' + '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' + + 'Ich bin damit einverstanden, dass Bilder und Videos der Tanzschule und der Veranstaltungen,' + + 'die durch die Tanzschule organisiert sind und/oder an denen die Tanzschule teilnimmt, auf' + + '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' + + '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' + + 'allgemeinen Persönlichkeitsrechts (§22 Kunsturheberrechtsgesetz). Es gilt der Grundsatz, dass' + + 'Bild- und Video-Material nur mit Einwilligung des Abgebildeten verbreitet oder veröffentlicht' + + 'werden kann. Es handelt sich hierbei um eine rechtsgeschäftliche Willenserklärung. Deshalb' + + 'kann bei Minderjährigen eine Einwilligung nur durch den gesetzlichen Vertreter erfolgen.' + + 'Diese Einverständniserklärung kann mit sofortiger Wirkung verweigert, bzw. jederzeit mit' + + 'Wirkung für die Zukunft widerrufen werden. Ein Widerruf kann einen Ausschluss aus der' + + 'jeweiligen Veranstaltung zur Folge haben.' + + 'Ein späterer rückwirkender Widerruf für aktuell stattfindende bzw. bereits stattgefundene' + 'Veranstaltungen ist ausgeschlossen.'; constructor(private _formBuilder: FormBuilder, private registerService: RegisterService) {} @@ -72,14 +71,15 @@ export class StudentRegisterComponent implements OnInit { birthdate: ['', Validators.required], 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+$/)]], + phone: ['', [Validators.required, Validators.pattern(/^(\+?\d{1,3})?[ ]*\d{9,}$/)]], + gender: ['', Validators.required], email: ['', [Validators.required, Validators.email]], }); this.secondFormGroup = this._formBuilder.group({ accountHolder: ['', Validators.required], iban: ['', [Validators.required, ValidatorService.validateIban]], - bic: ['', Validators.required], + bic: ['', [Validators.required, Validators.pattern(/^[A-Z]{6}[A-Z0-9]{2}([A-Z0-9]{3})?$/)]], nameOfFinancialInstitute: ['', Validators.required], directDebitAuthorization: ['', Validators.required], }); @@ -105,6 +105,10 @@ export class StudentRegisterComponent implements OnInit { } } + removeWhiteSpace(input:string):string { + return input.replace(/\s+/g, '') + } + submit() { const studentRegistration: StudentRegistration = { // First Form Group @@ -113,7 +117,7 @@ export class StudentRegisterComponent implements OnInit { birthdate: this.firstFormGroup.get('birthdate')?.value, postalCode: this.firstFormGroup.get('postalCode')?.value, address: this.firstFormGroup.get('address')?.value, - phone: this.firstFormGroup.get('phone')?.value, + phone: this.removeWhiteSpace(this.firstFormGroup.get('phone')?.value), email: this.firstFormGroup.get('email')?.value, // Second Form Group diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 56f924a..949e7c4 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -23,6 +23,10 @@ $my-theme: mat.define-light-theme(( .mdc-button { background: rgba(255, 255, 255, 0.82) !important; } +.mat-horizontal-stepper-wrapper { + width: 100%; +} + body { -- 2.40.1 From 4a2dbb799e0b15691a3a823c2897fed5646228b5 Mon Sep 17 00:00:00 2001 From: Artur Savitskiy Date: Fri, 26 Apr 2024 14:39:25 +0200 Subject: [PATCH 21/21] Pre-merge commit --- frontend/angular.json | 5 ++++- frontend/package-lock.json | 6 ++++-- frontend/src/app/components/visits/visits.component.html | 4 ++-- 3 files changed, 10 insertions(+), 5 deletions(-) diff --git a/frontend/angular.json b/frontend/angular.json index 589f92c..a8e7bf5 100644 --- a/frontend/angular.json +++ b/frontend/angular.json @@ -110,6 +110,9 @@ } }, "cli": { - "schematicCollections": ["@angular-eslint/schematics"] + "schematicCollections": [ + "@angular-eslint/schematics" + ], + "analytics": false } } diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 46ff2eb..6c55598 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -11119,7 +11119,8 @@ "node_modules/iban": { "version": "0.0.14", "resolved": "https://registry.npmjs.org/iban/-/iban-0.0.14.tgz", - "integrity": "sha512-+rocNKk+Ga9m8Lr9fTMWd+87JnsBrucm0ZsIx5ROOarZlaDLmd+FKdbtvb0XyoBw9GAFOYG2GuLqoNB16d+p3w==" + "integrity": "sha512-+rocNKk+Ga9m8Lr9fTMWd+87JnsBrucm0ZsIx5ROOarZlaDLmd+FKdbtvb0XyoBw9GAFOYG2GuLqoNB16d+p3w==", + "peer": true }, "node_modules/iconv-lite": { "version": "0.4.24", @@ -27453,7 +27454,8 @@ "iban": { "version": "0.0.14", "resolved": "https://registry.npmjs.org/iban/-/iban-0.0.14.tgz", - "integrity": "sha512-+rocNKk+Ga9m8Lr9fTMWd+87JnsBrucm0ZsIx5ROOarZlaDLmd+FKdbtvb0XyoBw9GAFOYG2GuLqoNB16d+p3w==" + "integrity": "sha512-+rocNKk+Ga9m8Lr9fTMWd+87JnsBrucm0ZsIx5ROOarZlaDLmd+FKdbtvb0XyoBw9GAFOYG2GuLqoNB16d+p3w==", + "peer": true }, "iconv-lite": { "version": "0.4.24", diff --git a/frontend/src/app/components/visits/visits.component.html b/frontend/src/app/components/visits/visits.component.html index 786a3ec..471ce26 100644 --- a/frontend/src/app/components/visits/visits.component.html +++ b/frontend/src/app/components/visits/visits.component.html @@ -6,8 +6,8 @@

{{ courseVisit?.name }}

- {{ courseVisit?.date | date: 'dd.MM.yyyy' }}, {{ courseVisit?.begin }} - - {{ courseVisit?.end }} + {{ courseVisit.date | date: 'dd.MM.yyyy' }}, {{ courseVisit.begin }} - + {{ courseVisit.end }}

-- 2.40.1