Merge Anmeldeformular into main #21
|
|
@ -26,8 +26,14 @@
|
|||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"inlineStyleLanguage": "scss",
|
||||
"assets": ["src/favicon.ico", "src/assets"],
|
||||
"styles": ["src/styles.scss"],
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
|
||||
"src/styles.scss"
|
||||
],
|
||||
"scripts": []
|
||||
},
|
||||
"configurations": {
|
||||
|
|
@ -84,7 +90,20 @@
|
|||
"lint": {
|
||||
"builder": "@angular-eslint/builder:lint",
|
||||
"options": {
|
||||
"lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
|
||||
"main": "src/test.ts",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "tsconfig.spec.json",
|
||||
"karmaConfig": "karma.conf.js",
|
||||
"inlineStyleLanguage": "scss",
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
|
||||
"src/styles.scss"
|
||||
],
|
||||
"scripts": []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,11 +15,14 @@
|
|||
"@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",
|
||||
"angular-iban": "^17.0.0",
|
||||
"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 +1199,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",
|
||||
|
|
@ -7148,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",
|
||||
|
|
@ -14821,6 +14850,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",
|
||||
|
|
@ -20060,6 +20097,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",
|
||||
|
|
@ -24487,6 +24532,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",
|
||||
|
|
@ -30150,6 +30203,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",
|
||||
|
|
|
|||
|
|
@ -21,11 +21,14 @@
|
|||
"@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",
|
||||
"angular-iban": "^17.0.0",
|
||||
"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"
|
||||
|
|
|
|||
|
|
@ -3,11 +3,13 @@ import { RouterModule, Routes, provideRouter, withComponentInputBinding } from '
|
|||
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: 'register', component: StudentRegisterComponent },
|
||||
{ path: 'visits/:date/:time', component: VisitsComponent },
|
||||
{ path: '**', redirectTo: 'students' },
|
||||
];
|
||||
|
|
|
|||
|
|
@ -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,18 @@ 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 {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';
|
||||
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 { 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: [
|
||||
|
|
@ -33,6 +45,7 @@ import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
|
|||
VisitsComponent,
|
||||
StudentEnrollComponent,
|
||||
VisitsDatetimeComponent,
|
||||
StudentRegisterComponent,
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
|
|
@ -47,8 +60,21 @@ import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
|
|||
MatFormFieldModule,
|
||||
MatRippleModule,
|
||||
MatNativeDateModule,
|
||||
MatStepperModule,
|
||||
ReactiveFormsModule,
|
||||
MatInputModule,
|
||||
MatButtonModule,
|
||||
MatRadioModule,
|
||||
MatSelectModule,
|
||||
MatCheckboxModule,
|
||||
MatTooltipModule,
|
||||
MatIconModule,
|
||||
AngularIbanModule
|
||||
],
|
||||
providers: [
|
||||
{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
|
||||
{ provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMAT }
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent],
|
||||
})
|
||||
export class AppModule {}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,163 @@
|
|||
<div class="stepperContainer">
|
||||
<mat-stepper>
|
||||
<!-- Step 1-->
|
||||
<mat-step [stepControl]="firstFormGroup">
|
||||
<form [formGroup]="firstFormGroup" class="flexContainerRow">
|
||||
<ng-template matStepLabel>Persönliche Informationen</ng-template>
|
||||
<div class="leftContainer">
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Name</mat-label>
|
||||
<input
|
||||
matInput
|
||||
formControlName="firstName"
|
||||
placeholder="Name"
|
||||
required />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Nachname</mat-label>
|
||||
<input
|
||||
matInput
|
||||
formControlName="lastName"
|
||||
placeholder="Nachname"
|
||||
required />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Geburtstag</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[matDatepicker]="birthdatePicker"
|
||||
formControlName="birthdate"
|
||||
placeholder="DD.MM.YYYY"
|
||||
required />
|
||||
<mat-datepicker-toggle
|
||||
matSuffix
|
||||
[for]="birthdatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker
|
||||
#birthdatePicker
|
||||
startView="multi-year"></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>Geschlecht</mat-label>
|
||||
<mat-select formControlName="gender" required >
|
||||
<mat-option value="male">männlich</mat-option>
|
||||
<mat-option value="female">weiblich</mat-option>
|
||||
<mat-option value="divers">divers</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="rightContainer">
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Adresse</mat-label>
|
||||
<input matInput formControlName="address" required />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Postleitzahl</mat-label>
|
||||
<input matInput formControlName="postalCode" required />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Telefon</mat-label>
|
||||
<input matInput formControlName="phone" required/>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>E-Mail</mat-label>
|
||||
<input matInput formControlName="email" required />
|
||||
<mat-error>Ungültige E-Mail Adresse</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</form>
|
||||
<div class="buttonsContainer">
|
||||
<button
|
||||
mat-button
|
||||
matStepperNext
|
||||
[disabled]="firstFormGroup.status == 'INVALID'">
|
||||
Weiter
|
||||
</button>
|
||||
</div>
|
||||
</mat-step>
|
||||
<!-- Step 2-->
|
||||
<mat-step [stepControl]="secondFormGroup">
|
||||
<form [formGroup]="secondFormGroup" class="flexContainerColumn width50">
|
||||
<ng-template matStepLabel>Bank Informationen</ng-template>
|
||||
<div class="flexContainerRow">
|
||||
<div class="leftContainer">
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Kontoinhaber</mat-label>
|
||||
<input matInput formControlName="accountHolder" required />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>IBAN</mat-label>
|
||||
<input matInput formControlName="iban" required/>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="rightContainer">
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>BIC</mat-label>
|
||||
<input matInput formControlName="bic" required />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Name der Bank</mat-label>
|
||||
<input matInput formControlName="nameOfFinancialInstitute" required />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flexContainerColumn">
|
||||
<textarea cols="30" rows="7" readonly>{{infoTextEinzugermaechtigung}}</textarea>
|
||||
<mat-checkbox formControlName="directDebitAuthorization" required>Einzugsermächtigung</mat-checkbox>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="buttonsContainer">
|
||||
<button mat-button matStepperPrevious class="backButton">Zurück</button>
|
||||
<button
|
||||
mat-button
|
||||
matStepperNext
|
||||
[disabled]="secondFormGroup.status == 'INVALID'">
|
||||
Weiter
|
||||
</button>
|
||||
</div>
|
||||
</mat-step>
|
||||
<!-- Step 3-->
|
||||
<mat-step>
|
||||
<form [formGroup]="thirdFormGroup" class="flexContainerColumn width50">
|
||||
<ng-template matStepLabel>Einwilligung</ng-template>
|
||||
<div class="flexContainerColumn">
|
||||
<textarea cols="30" rows="10" readonly>{{infoTextEinwilligungserklaerung}}</textarea>
|
||||
<mat-checkbox formControlName="consent" required
|
||||
>Einwilligung zur Erhebung, Speicherung, Verarbeitung und Nutzung von
|
||||
personenbezogenen Daten
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
<br style="margin-bottom: 20px;">
|
||||
<div class="flexContainerColumn">
|
||||
<textarea cols="30" rows="10" readonly>{{infoTextEinverstaendniserklaerung}}</textarea>
|
||||
<mat-checkbox formControlName="declarationOfConsent" required
|
||||
>Einverständniserklärung zur Nutzung von Bild- und Videomaterial
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="buttonsContainer">
|
||||
<button mat-button matStepperPrevious class="backButton">Zurück</button>
|
||||
<button
|
||||
mat-button
|
||||
matStepperNext
|
||||
[disabled]="thirdFormGroup.status == 'INVALID'"
|
||||
(click)="submit()"
|
||||
>
|
||||
Fertig
|
||||
</button>
|
||||
</div>
|
||||
</mat-step>
|
||||
</mat-stepper>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
.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;
|
||||
}
|
||||
|
||||
.flexContainerRow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.width20 {
|
||||
width: 20%;
|
||||
}
|
||||
.width30 {
|
||||
width: 30%;
|
||||
}
|
||||
.flexContainerColumn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.leftContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 45%;
|
||||
}
|
||||
.rightContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.backButton {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
padding: 5px;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { StudentRegisterComponent } from './student-register.component';
|
||||
|
||||
describe('StudentRegisterComponent', () => {
|
||||
let component: StudentRegisterComponent;
|
||||
let fixture: ComponentFixture<StudentRegisterComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [StudentRegisterComponent],
|
||||
}).compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(StudentRegisterComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,138 @@
|
|||
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: {
|
||||
dateInput: 'DD.MM.YYYY'
|
||||
},
|
||||
display: {
|
||||
dateInput: 'DD.MM.YYYY',
|
||||
monthYearLabel: 'MMM YYYY',
|
||||
dateA11yLabel: 'DD.MM.YYYY',
|
||||
monthYearA11yLabel: 'MMMM YYYY'
|
||||
}
|
||||
};
|
||||
|
||||
@Component({
|
||||
selector: 'li-student-register',
|
||||
templateUrl: './student-register.component.html',
|
||||
styleUrls: ['./student-register.component.scss'],
|
||||
})
|
||||
export class StudentRegisterComponent implements OnInit {
|
||||
firstFormGroup!: FormGroup;
|
||||
secondFormGroup!: FormGroup;
|
||||
thirdFormGroup!: FormGroup;
|
||||
infoTextEinzugermaechtigung =
|
||||
'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' +
|
||||
'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,' +
|
||||
'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) {}
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
this.firstFormGroup = this._formBuilder.group({
|
||||
firstName: ['', Validators.required],
|
||||
lastName: ['', Validators.required],
|
||||
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{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, Validators.pattern(/^[A-Z]{6}[A-Z0-9]{2}([A-Z0-9]{3})?$/)]],
|
||||
nameOfFinancialInstitute: ['', Validators.required],
|
||||
directDebitAuthorization: ['', Validators.required],
|
||||
});
|
||||
|
||||
this.thirdFormGroup = this._formBuilder.group({
|
||||
consent: ['', Validators.required],
|
||||
declarationOfConsent: ['', Validators.required],
|
||||
});
|
||||
|
||||
this.secondFormGroup.get("iban")?.valueChanges.subscribe(value => {
|
||||
if(value) {
|
||||
this.capitalizeFirstTwoLetters();
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
removeWhiteSpace(input:string):string {
|
||||
return input.replace(/\s+/g, '')
|
||||
}
|
||||
|
||||
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.removeWhiteSpace(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,
|
||||
directDebitAuthorization: this.secondFormGroup.get('directDebitAuthorization')?.value,
|
||||
|
||||
// Third Form Group
|
||||
consent: this.thirdFormGroup.get('consent')?.value,
|
||||
declarationOfConsent: this.thirdFormGroup.get('declarationOfConsent')?.value
|
||||
};
|
||||
|
||||
this.registerService.set(studentRegistration);
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -6,8 +6,8 @@
|
|||
<div class="grid-item">
|
||||
<h1>{{ courseVisit?.name }}</h1>
|
||||
<h2>
|
||||
{{ courseVisit?.date | date: 'dd.MM.yyyy' }}, {{ courseVisit?.begin }} -
|
||||
{{ courseVisit?.end }}
|
||||
{{ courseVisit.date | date: 'dd.MM.yyyy' }}, {{ courseVisit.begin }} -
|
||||
{{ courseVisit.end }}
|
||||
</h2>
|
||||
<button class="button-add" (click)="add()">Hinzufügen</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
directDebitAuthorization: boolean;
|
||||
consent: boolean;
|
||||
declarationOfConsent: boolean;
|
||||
}
|
||||
|
|
@ -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<void> {
|
||||
const payload = JSON.stringify(registration);
|
||||
|
||||
return this.http.post<void>(`${environment.apiUrl}${this.serviceName}/set.php`,
|
||||
payload
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,67 +1,41 @@
|
|||
/* Provide sufficient contrast against white background */
|
||||
|
||||
@import '~bootstrap-icons/font/bootstrap-icons.css';
|
||||
a {
|
||||
color: #0366d6;
|
||||
@use "@angular/material" as mat;
|
||||
@include mat.core();
|
||||
|
||||
$my-primary: mat.define-palette(mat.$blue-palette);
|
||||
$my-accent: mat.define-palette(mat.$blue-palette);
|
||||
|
||||
|
||||
$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);
|
||||
@include mat.all-component-themes($my-theme);
|
||||
|
||||
.mdc-button {
|
||||
background: rgba(255, 255, 255, 0.82) !important;
|
||||
}
|
||||
.mat-horizontal-stepper-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
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,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: rgb(245, 126, 32);
|
||||
margin: 0;
|
||||
font-family: Roboto, 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue