From 822e17068dfda64cd5336a7bd503da9d3066bb90 Mon Sep 17 00:00:00 2001 From: aoezdemir Date: Thu, 7 Mar 2024 10:18:13 +0100 Subject: [PATCH 1/8] 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 2/8] 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 3/8] 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 4/8] 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 5/8] 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 6/8] 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 7/8] 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 8/8] 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