diff --git a/src/app/about/about.component.html b/src/app/about/about.component.html index 27134fb..16fbe8f 100644 --- a/src/app/about/about.component.html +++ b/src/app/about/about.component.html @@ -12,6 +12,13 @@
© 2022

Zuletzt aktualisiert vor 3 Minuten

+ \ No newline at end of file diff --git a/src/app/about/about.component.ts b/src/app/about/about.component.ts index e4ae6d9..2781f7e 100644 --- a/src/app/about/about.component.ts +++ b/src/app/about/about.component.ts @@ -7,6 +7,12 @@ import { Component, OnInit } from '@angular/core'; }) export class AboutComponent implements OnInit { + formatLabel(value: number | null) { + if (!value) { + return 0; + } + return value; + } constructor() { } ngOnInit(): void { diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 92d78e3..85799b1 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -52,6 +52,8 @@ import { GruppenComponent } from './gruppen/gruppen.component'; import {MatSidenavModule} from '@angular/material/sidenav'; import {MatToolbarModule} from '@angular/material/toolbar'; import {MatListModule} from '@angular/material/list'; +import { TeilnehmerKompetenzComponent } from './teilnehmer-kompetenz/teilnehmer-kompetenz.component'; +import { MaterialModule } from '../material.module'; @NgModule({ imports: [ @@ -105,7 +107,8 @@ import {MatListModule} from '@angular/material/list'; LoginComponent, PrergebnisComponent, PruefungsergebnisComponent, - GruppenComponent + GruppenComponent, + TeilnehmerKompetenzComponent ], providers: [], bootstrap: [ diff --git a/src/app/dash/dash.component.css b/src/app/dash/dash.component.css index f84c014..e69de29 100644 --- a/src/app/dash/dash.component.css +++ b/src/app/dash/dash.component.css @@ -1,28 +0,0 @@ -.lehrlingstabelle { - width: 20%; -} -.nav-link { - color: black; -} -.table { - width: 100%; - } - - .demo-table { - width: 100%; - } - - .row-is-clicked { - color: red; - background: #472ddb; - font-weight: bold; - } - - .mat-row.hovered { - background: rgb(228, 238, 255); -} - -.mat-row.highlighted { - background: #d04b2d; - font-weight: bold; -} \ No newline at end of file diff --git a/src/app/dash/dash.component.html b/src/app/dash/dash.component.html index f4c44cb..3369276 100644 --- a/src/app/dash/dash.component.html +++ b/src/app/dash/dash.component.html @@ -21,18 +21,18 @@ {{row.apprenticeid}} - + Vorname {{row.firstname}} - + Name {{row.lastname}} - + Gruppe {{row.groupname}} @@ -58,7 +58,8 @@
{{aktuellername}}
-

Hier werden die erworbenen und noch fehlenden Kompetenzen des ausgewählten Lehrlings angezeigt +

+

Hier werden die erworbenen und noch fehlenden Module des ausgewählten Lehrlings angezeigt diff --git a/src/app/dash/dash.component.ts b/src/app/dash/dash.component.ts index 05c1f8d..ee7911b 100644 --- a/src/app/dash/dash.component.ts +++ b/src/app/dash/dash.component.ts @@ -12,8 +12,9 @@ import { MatPaginatorModule } from '@angular/material/paginator'; import { MatPaginator} from '@angular/material/paginator'; import { MatSortModule, Sort } from '@angular/material/sort'; import { MatSort } from '@angular/material/sort'; -import {MatTabsModule} from '@angular/material/tabs'; +import { MatTabsModule} from '@angular/material/tabs'; import { SelectionModel } from '@angular/cdk/collections'; + @Component({ selector: 'app-dash', templateUrl: './dash.component.html', @@ -44,7 +45,7 @@ private _liveAnnouncer: any; ngOnInit(): void { this.Lehrlinge.getLehrlinge().subscribe( - ( + ( data: any) => { console.log(data); this.lehrlinge = data.apprentice; @@ -93,6 +94,5 @@ private _liveAnnouncer: any; if (!this.selection.isSelected(row)) { this.selection.clear(); } - } } diff --git a/src/app/edit-lehrlinge/edit-lehrlinge.component.html b/src/app/edit-lehrlinge/edit-lehrlinge.component.html index 8d66759..b663bea 100644 --- a/src/app/edit-lehrlinge/edit-lehrlinge.component.html +++ b/src/app/edit-lehrlinge/edit-lehrlinge.component.html @@ -1 +1,64 @@ -

edit-lehrlinge works!

+
+
 
+
Teilnehmer bearbeiten + +
+
+
+
+ + ID + + +
+
+ + Vorname + + Vorname muss ausgefüllt werden + + + Nachname + + Nachname muss ausgefüllt werden + +
+
+ + Geboren + + Geburtsdatum muss angegeben werden + + + Geschlecht + + + {{ gesch.viewValue }} + + + +
+
+ + Eintritt + + + + Austritt + + +
+
+
+ + +
+
+
+
+ +
+
+
+
+
\ No newline at end of file diff --git a/src/app/edit-lehrlinge/edit-lehrlinge.component.ts b/src/app/edit-lehrlinge/edit-lehrlinge.component.ts index 3d35955..e0e67f4 100644 --- a/src/app/edit-lehrlinge/edit-lehrlinge.component.ts +++ b/src/app/edit-lehrlinge/edit-lehrlinge.component.ts @@ -1,4 +1,9 @@ -import { Component, OnInit } from '@angular/core'; +import { LiveAnnouncer } from '@angular/cdk/a11y'; +import { Component, Input, OnInit } from '@angular/core'; +import { UntypedFormBuilder, Validators } from '@angular/forms'; +import { Router } from '@angular/router'; +import { LehrlingService } from '../services/lehrling.service'; +import { ListLehrlingeComponent } from '../list-lehrlinge/list-lehrlinge.component'; @Component({ selector: 'app-edit-lehrlinge', @@ -7,9 +12,46 @@ import { Component, OnInit } from '@angular/core'; }) export class EditLehrlingeComponent implements OnInit { - constructor() { } + @Input() aktuellerlehrling: any; + + public lehrlinge: any; + + public editForm: any; + + geschlecht = [ + {value: 'M', viewValue: 'männlich'}, + {value: 'W', viewValue: 'weiblich'}, + {value: 'D', viewValue: 'divers'} + ]; + + constructor(private Lehrling: LehrlingService, + private router: Router, + private formbuilder: UntypedFormBuilder, + private _liveAnnouncer: LiveAnnouncer,) { + this.editForm = this.formbuilder.group({ + apprenticeid: [], + firstname: ['', Validators.required], + lastname: ['', Validators.required], + groupid: [''], + sex: [''], + date_of_birth: [''], + date_joined: [''], + date_leave: [''] + }) + } + // Füllen des Formulars unter https://ciit.at/dynamische-formulare-mit-angular-reactive-forms/ + // nachlesen, da scheint es gut beschrieben zu sein. Sonst + // https://www.angulararchitects.io/aktuelles/angular-tutorial-teil-2-eine-erste-anwendung-mit-komponenten-datenbindung-und-http-zugriff/ ngOnInit(): void { + + } + + onEdit(): void { + + } + onCancel(): void { + this.router.navigate(['/list-lehrling']); } } diff --git a/src/app/lehrling2beruf/lehrling2beruf.component.html b/src/app/lehrling2beruf/lehrling2beruf.component.html index 396f5b0..42cb4d2 100644 --- a/src/app/lehrling2beruf/lehrling2beruf.component.html +++ b/src/app/lehrling2beruf/lehrling2beruf.component.html @@ -1,8 +1,8 @@ -
+
Teilnehmer zu Ausbildung zuordnen
-
+
- - - +
@@ -18,20 +16,20 @@ - - - - - - - - - - - - + + + + + + + + + + +
ID {{user.apprenticeid}} Vorname {{user.firstname}} Name {{user.lastname}} Gruppe {{user.groupname}}
Name {{user.lastname}} Gruppe {{user.groupname}}
-
-
 
-
Teilnehmer bearbeiten - -
-
-
-
- - ID - - -
-
- - Vorname - - - - Nachname - - -
-
- - Geboren - - - - - Geschlecht - - -
-
- - Eintritt - - - - - Austritt - - -
-
-
- - -
-
- -
-
-
+ diff --git a/src/app/list-lehrlinge/list-lehrlinge.component.ts b/src/app/list-lehrlinge/list-lehrlinge.component.ts index b2f4dcd..1dbfe41 100644 --- a/src/app/list-lehrlinge/list-lehrlinge.component.ts +++ b/src/app/list-lehrlinge/list-lehrlinge.component.ts @@ -9,6 +9,8 @@ import { UntypedFormBuilder, Validators } from '@angular/forms'; import { LiveAnnouncer } from '@angular/cdk/a11y'; import { MatSort, Sort } from '@angular/material/sort'; import { MatPaginator } from '@angular/material/paginator'; +import { HttpHeaders } from '@angular/common/http'; +import { EditLehrlingeComponent } from '../edit-lehrlinge/edit-lehrlinge.component'; @Component({ selector: 'app-list-lehrlinge', @@ -16,34 +18,36 @@ import { MatPaginator } from '@angular/material/paginator'; styleUrls: ['./list-lehrlinge.component.css'] }) export class ListLehrlingeComponent implements OnInit { + + public dsLehrlinge?: MatTableDataSource; selection = new SelectionModel(true, []); public lehrlinge: any; - public displayedColumns: any; + public editForm: any; - public aktlehrling: any; + public aktuellerlehrling: any; + headers: HttpHeaders = new HttpHeaders(); - constructor(private Lehrlinge: LehrlingService, + geschlecht = [ + {value: 'M', viewValue: 'männlich'}, + {value: 'W', viewValue: 'weiblich'}, + {value: 'D', viewValue: 'divers'} + ]; + + displayedColumns = ["apprenticeid", "firstname", "lastname", "groupname"]; + + constructor(private Lehrling: LehrlingService, private router: Router, private formbuilder: UntypedFormBuilder, private _liveAnnouncer: LiveAnnouncer,) { - this.editForm = this.formbuilder.group({ - apprenticeid: [], - firstname: ['', Validators.required], - lastname: ['', Validators.required], - groupid: [''], - sex: [''], - date_of_birth: [''], - date_joined: [''], - date_leave: [''] - }) + } ngOnInit(): void { - this.displayedColumns = ["apprenticeid", "firstname", "lastname", "groupname"]; - this.Lehrlinge.getLehrlinge().subscribe( + + this.Lehrling.getLehrlinge().subscribe( ( data: any) => { console.log(data); @@ -55,6 +59,7 @@ export class ListLehrlingeComponent implements OnInit { @ViewChild('paginator') paginator: MatPaginator; @ViewChild(MatSort) sort: MatSort; + ngAfterViewInit() { if(this.dsLehrlinge != undefined) { this.dsLehrlinge.paginator = this.paginator; @@ -66,9 +71,17 @@ export class ListLehrlingeComponent implements OnInit { } onclick(aktlehrling: any) { - this.aktlehrling = aktlehrling; - console.log("ausgewählt: " + aktlehrling.lastname) + this.aktuellerlehrling = aktlehrling; + this.selection.isSelected(aktlehrling); + console.log("ausgewählt: " + this.aktuellerlehrling.lastname) } + + selectHandler(row: Lehrling) { + if (!this.selection.isSelected(row)) { + this.selection.clear(); + } +} + /** Selects all rows if they are not all selected; otherwise clear selection. */ masterToggle() { this.isAllSelected() ? @@ -97,10 +110,5 @@ export class ListLehrlingeComponent implements OnInit { this._liveAnnouncer.announce('Sorting cleared'); } } - onEdit(): void { - } - onCancel(): void { - this.router.navigate(['/list-lehrling']); - } -} +} \ No newline at end of file diff --git a/src/app/prergebnis/prergebnis.component.css b/src/app/prergebnis/prergebnis.component.css index 13df60a..2fcfe3d 100644 --- a/src/app/prergebnis/prergebnis.component.css +++ b/src/app/prergebnis/prergebnis.component.css @@ -2,20 +2,6 @@ width: 100%; } - .row-is-clicked { - color: red; - background: #472ddb; - font-weight: bold; - } - - .mat-row.hovered { - background: rgb(228, 238, 255); -} - -.mat-row.highlighted { - background: #d04b2d; - font-weight: bold; -} .radiogruppe { vertical-align: middle; text-align: left;; @@ -24,4 +10,4 @@ vertical-align: bottom; margin-left: 8px; margin-top: 10px; -} \ No newline at end of file +} diff --git a/src/app/prergebnis/prergebnis.component.html b/src/app/prergebnis/prergebnis.component.html index 5cc18e2..1f21788 100644 --- a/src/app/prergebnis/prergebnis.component.html +++ b/src/app/prergebnis/prergebnis.component.html @@ -71,11 +71,11 @@
- + - + @@ -83,12 +83,14 @@ - - - ja - nein - - + + + = 3) { + // da wäre schön, die Farbe zu ändern + } + return value; + } public dataSource: any; public ergdataSource: any; @@ -111,7 +121,7 @@ export class PrergebnisComponent implements OnInit { if(this.ergdataSource != undefined) { this.ergdataSource.ergpaginator = this.ergpaginator; this.ergdataSource.ergsort = this.ergsort; - console.log(this.ergdataSource); + console.log("ErgDatasource: " + this.ergdataSource); } else console.log("Erg Datasource ist undefined in AfterViewInit"); @@ -119,7 +129,7 @@ export class PrergebnisComponent implements OnInit { if(this.dataSource != undefined) { this.dataSource.paginator = this.paginator; this.dataSource.sort = this.sort; - console.log(this.dataSource); + console.log("Datasource: " + this.dataSource); } else console.log("DataSource undefined in AfterViewInit"); diff --git a/src/app/services/lehrling.service.ts b/src/app/services/lehrling.service.ts index 8506a52..76a9cbc 100644 --- a/src/app/services/lehrling.service.ts +++ b/src/app/services/lehrling.service.ts @@ -1,6 +1,7 @@ import { Injectable } from '@angular/core'; -import { HttpClient } from '@angular/common/http'; +import { HttpClient, HttpParams } from '@angular/common/http'; import { Lehrling } from '../lehrling'; +import { map, Observable } from 'rxjs'; @Injectable({ providedIn: 'root' @@ -13,4 +14,20 @@ export class LehrlingService { getLehrlinge() { return this.http.get(this.$url); } + + findLehrling( + id: number, filter = '', sortOrder='asc', + pageNumber = 0, pageSize = 5): Observable { + + return this.http.get('/api/apprentice_list.php', { + params: new HttpParams() + .set('apprenticeid', id.toString()) + .set('filter', filter) + .set('sortOrder', sortOrder) + .set('pageNumber', pageNumber) + .set('pageSize', pageSize.toString()) + }).pipe( + map(res => res["payload"]) + ); + } } diff --git a/src/app/teilnehmer-kompetenz/teilnehmer-kompetenz.component.css b/src/app/teilnehmer-kompetenz/teilnehmer-kompetenz.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/teilnehmer-kompetenz/teilnehmer-kompetenz.component.html b/src/app/teilnehmer-kompetenz/teilnehmer-kompetenz.component.html new file mode 100644 index 0000000..92b108a --- /dev/null +++ b/src/app/teilnehmer-kompetenz/teilnehmer-kompetenz.component.html @@ -0,0 +1 @@ +

Teilnehmer-Kompetenz works!

diff --git a/src/app/teilnehmer-kompetenz/teilnehmer-kompetenz.component.spec.ts b/src/app/teilnehmer-kompetenz/teilnehmer-kompetenz.component.spec.ts new file mode 100644 index 0000000..89fcb93 --- /dev/null +++ b/src/app/teilnehmer-kompetenz/teilnehmer-kompetenz.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TeilnehmerKompetenzComponent } from './teilnehmer-kompetenz.component'; + +describe('TeilnehmerKompetenzComponent', () => { + let component: TeilnehmerKompetenzComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ TeilnehmerKompetenzComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(TeilnehmerKompetenzComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/teilnehmer-kompetenz/teilnehmer-kompetenz.component.ts b/src/app/teilnehmer-kompetenz/teilnehmer-kompetenz.component.ts new file mode 100644 index 0000000..43f6a13 --- /dev/null +++ b/src/app/teilnehmer-kompetenz/teilnehmer-kompetenz.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-teilnehmer-kompetenz', + templateUrl: './teilnehmer-kompetenz.component.html', + styleUrls: ['./teilnehmer-kompetenz.component.css'] +}) +export class TeilnehmerKompetenzComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/bildungsdb.css b/src/bildungsdb.css index 70d03f5..465d283 100644 --- a/src/bildungsdb.css +++ b/src/bildungsdb.css @@ -31,4 +31,20 @@ padding: 15px; font-size: 1.2em; font-weight: bold; +} + +.mat-row.hovered { + background: rgb(228, 238, 255); +} + + +.mat-row.clicked { + color: red; + background: #472ddb; + font-weight: bold; +} + +.mat-row.highlighted { +background: #d04b2d; +font-weight: bold; } \ No newline at end of file diff --git a/src/material.module.ts b/src/material.module.ts new file mode 100644 index 0000000..bd7331b --- /dev/null +++ b/src/material.module.ts @@ -0,0 +1,97 @@ +import { NgModule } from '@angular/core'; +import { A11yModule } from '@angular/cdk/a11y'; +import { CdkAccordionModule } from '@angular/cdk/accordion'; +import { ClipboardModule } from '@angular/cdk/clipboard'; +import { DragDropModule } from '@angular/cdk/drag-drop'; +import { PortalModule } from '@angular/cdk/portal'; +import { ScrollingModule } from '@angular/cdk/scrolling'; +import { CdkStepperModule } from '@angular/cdk/stepper'; +import { CdkTableModule } from '@angular/cdk/table'; +import { CdkTreeModule } from '@angular/cdk/tree'; +import { MatAutocompleteModule } from '@angular/material/autocomplete'; +import { MatBadgeModule } from '@angular/material/badge'; +import { MatBottomSheetModule } from '@angular/material/bottom-sheet'; +import { MatButtonModule } from '@angular/material/button'; +import { MatButtonToggleModule } from '@angular/material/button-toggle'; +import { MatCardModule } from '@angular/material/card'; +import { MatCheckboxModule } from '@angular/material/checkbox'; +import { MatChipsModule } from '@angular/material/chips'; +import { MatStepperModule } from '@angular/material/stepper'; +import { MatDatepickerModule } from '@angular/material/datepicker'; +import { MatDialogModule } from '@angular/material/dialog'; +import { MatDividerModule } from '@angular/material/divider'; +import { MatExpansionModule } from '@angular/material/expansion'; +import { MatGridListModule } from '@angular/material/grid-list'; +import { MatIconModule } from '@angular/material/icon'; +import { MatInputModule } from '@angular/material/input'; +import { MatListModule } from '@angular/material/list'; +import { MatMenuModule } from '@angular/material/menu'; +import { MatNativeDateModule, MatRippleModule } from '@angular/material/core'; +import { MatPaginatorModule } from '@angular/material/paginator'; +import { MatProgressBarModule } from '@angular/material/progress-bar'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { MatRadioModule } from '@angular/material/radio'; +import { MatSelectModule } from '@angular/material/select'; +import { MatSidenavModule } from '@angular/material/sidenav'; +import { MatSliderModule } from '@angular/material/slider'; +import { MatSlideToggleModule } from '@angular/material/slide-toggle'; +import { MatSnackBarModule } from '@angular/material/snack-bar'; +import { MatSortModule } from '@angular/material/sort'; +import { MatTableModule } from '@angular/material/table'; +import { MatTabsModule } from '@angular/material/tabs'; +import { MatToolbarModule } from '@angular/material/toolbar'; +import { MatTooltipModule } from '@angular/material/tooltip'; +import { MatTreeModule } from '@angular/material/tree'; +import { OverlayModule } from '@angular/cdk/overlay'; + +@NgModule({ + exports: [ + A11yModule, + CdkAccordionModule, + ClipboardModule, + CdkStepperModule, + CdkTableModule, + CdkTreeModule, + DragDropModule, + MatAutocompleteModule, + MatBadgeModule, + MatBottomSheetModule, + MatButtonModule, + MatButtonToggleModule, + MatCardModule, + MatCheckboxModule, + MatChipsModule, + MatStepperModule, + MatDatepickerModule, + MatDialogModule, + MatDividerModule, + MatExpansionModule, + MatGridListModule, + MatIconModule, + MatInputModule, + MatListModule, + MatMenuModule, + MatNativeDateModule, + MatPaginatorModule, + MatProgressBarModule, + MatProgressSpinnerModule, + MatRadioModule, + MatRippleModule, + MatSelectModule, + MatSidenavModule, + MatSliderModule, + MatSlideToggleModule, + MatSnackBarModule, + MatSortModule, + MatTableModule, + MatTabsModule, + MatToolbarModule, + MatTooltipModule, + MatTreeModule, + OverlayModule, + PortalModule, + ScrollingModule, + ], +}) + +export class MaterialModule {} \ No newline at end of file
Vorname Vorname {{pers.firstname}} Nachname Nachname {{pers.lastname}} {{pers.date_of_exam | date:'d.M.y'}} Bestanden Bestanden