danielk/bildungdb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Weiter geht´s

Browse Source
This commit is contained in:
DanielKirchmeier 2022-10-22 13:38:14 +02:00
parent 1e0d164422
commit 0d6ff7ea46
22 changed files with 387 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/about/about.component.html
View File

@ -12,6 +12,13 @@
<h5>&copy; 2022</h5> <h5>&copy; 2022</h5>
<p class="card-text"><small class="text-muted">Zuletzt aktualisiert vor 3 Minuten</small></p> <p class="card-text"><small class="text-muted">Zuletzt aktualisiert vor 3 Minuten</small></p>
</div> </div>
<!-- <mat-slider
thumbLabel
[displayWith]="formatLabel"
tickInterval="1"
min="1"
max="5"></mat-slider>
-->
</div> </div>
</div> </div>
</div> </div>

6
src/app/about/about.component.ts
View File

@ -7,6 +7,12 @@ import { Component, OnInit } from '@angular/core';
}) })
export class AboutComponent implements OnInit { export class AboutComponent implements OnInit {
formatLabel(value: number | null) {
if (!value) {
return 0;
}
return value;
}
constructor() { } constructor() { }
ngOnInit(): void { ngOnInit(): void {

5
src/app/app.module.ts
View File

@ -52,6 +52,8 @@ import { GruppenComponent } from './gruppen/gruppen.component';
import {MatSidenavModule} from '@angular/material/sidenav'; import {MatSidenavModule} from '@angular/material/sidenav';
import {MatToolbarModule} from '@angular/material/toolbar'; import {MatToolbarModule} from '@angular/material/toolbar';
import {MatListModule} from '@angular/material/list'; import {MatListModule} from '@angular/material/list';
import { TeilnehmerKompetenzComponent } from './teilnehmer-kompetenz/teilnehmer-kompetenz.component';
import { MaterialModule } from '../material.module';
@NgModule({ @NgModule({
imports: [ imports: [
@ -105,7 +107,8 @@ import {MatListModule} from '@angular/material/list';
LoginComponent, LoginComponent,
PrergebnisComponent, PrergebnisComponent,
PruefungsergebnisComponent, PruefungsergebnisComponent,
GruppenComponent GruppenComponent,
TeilnehmerKompetenzComponent
], ],
providers: [], providers: [],
bootstrap: [ bootstrap: [

28
src/app/dash/dash.component.css
View File

@ -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;
}

9
src/app/dash/dash.component.html
View File

@ -21,18 +21,18 @@
<td mat-cell *matCellDef="let row">{{row.apprenticeid}}</td> <td mat-cell *matCellDef="let row">{{row.apprenticeid}}</td>
</ng-container> </ng-container>
<!-- Name Column --> <!-- Firstame Column -->
<ng-container matColumnDef="firstname"> <ng-container matColumnDef="firstname">
<th mat-header-cell class="kopf col-1" *matHeaderCellDef mat-sort-header>Vorname</th> <th mat-header-cell class="kopf col-1" *matHeaderCellDef mat-sort-header>Vorname</th>
<td mat-cell *matCellDef="let row">{{row.firstname}}</td> <td mat-cell *matCellDef="let row">{{row.firstname}}</td>
</ng-container> </ng-container>
<!-- Name Column --> <!-- Lastname Column -->
<ng-container matColumnDef="lastname"> <ng-container matColumnDef="lastname">
<th mat-header-cell class="kopf col-1" *matHeaderCellDef mat-sort-header>Name</th> <th mat-header-cell class="kopf col-1" *matHeaderCellDef mat-sort-header>Name</th>
<td mat-cell *matCellDef="let row">{{row.lastname}}</td> <td mat-cell *matCellDef="let row">{{row.lastname}}</td>
</ng-container> </ng-container>
<!-- Name Column --> <!-- Groupname Column -->
<ng-container matColumnDef="groupname"> <ng-container matColumnDef="groupname">
<th mat-header-cell class="kopf col-1" *matHeaderCellDef mat-sort-header>Gruppe</th> <th mat-header-cell class="kopf col-1" *matHeaderCellDef mat-sort-header>Gruppe</th>
<td mat-cell *matCellDef="let row">{{row.groupname}}</td> <td mat-cell *matCellDef="let row">{{row.groupname}}</td>
@ -58,7 +58,8 @@
<div class="ueberschrift">{{aktuellername}}</div> <div class="ueberschrift">{{aktuellername}}</div>
<mat-tab-group mat-align-tabs="start"> <mat-tab-group mat-align-tabs="start">
<mat-tab label="Kompetenz"> <mat-tab label="Kompetenz">
<br><br>Hier werden die erworbenen und noch fehlenden Kompetenzen des ausgewählten Lehrlings angezeigt <br><br>
<app-teilnehmer-kompetenz></app-teilnehmer-kompetenz>
</mat-tab> </mat-tab>
<mat-tab label="Module"> <mat-tab label="Module">
<br><br>Hier werden die erworbenen und noch fehlenden Module des ausgewählten Lehrlings angezeigt <br><br>Hier werden die erworbenen und noch fehlenden Module des ausgewählten Lehrlings angezeigt

2
src/app/dash/dash.component.ts
View File

@ -14,6 +14,7 @@ import { MatSortModule, Sort } from '@angular/material/sort';
import { MatSort } 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'; import { SelectionModel } from '@angular/cdk/collections';
@Component({ @Component({
selector: 'app-dash', selector: 'app-dash',
templateUrl: './dash.component.html', templateUrl: './dash.component.html',
@ -93,6 +94,5 @@ private _liveAnnouncer: any;
if (!this.selection.isSelected(row)) { if (!this.selection.isSelected(row)) {
this.selection.clear(); this.selection.clear();
} }
} }
} }

65
src/app/edit-lehrlinge/edit-lehrlinge.component.html
View File

@ -1 +1,64 @@
<p>edit-lehrlinge works!</p> <div class="container col-6 mt-3 float-left">
<div class="abstandoben">&nbsp;</div>
<div class="ueberschrift">Teilnehmer bearbeiten
<button class="btn btn-primary float-right mt-5">Neu</button>
</div>
<div class="container mt-8 mat-elevation-z8 bg-white">
<form class="form" [formGroup]="editForm" novalidate>
<div class="row">
<mat-form-field class="col-md-3" appearance="fill">
<mat-label>ID</mat-label>
<input readonly="true" type="text" matInput formControlName="apprenticeid" >
</mat-form-field>
</div>
<div class="row">
<mat-form-field class="col-md-5" appearance="fill">
<mat-label>Vorname</mat-label>
<input type="text" matInput formControlName="firstname" >
<mat-error>Vorname muss ausgefüllt werden</mat-error>
</mat-form-field>
<mat-form-field class="col-md-5" appearance="fill">
<mat-label>Nachname</mat-label>
<input type="text" matInput formControlName="lastname" >
<mat-error>Nachname muss ausgefüllt werden</mat-error>
</mat-form-field>
</div>
<div class="row">
<mat-form-field class="col-md-5" appearance="fill">
<mat-label>Geboren</mat-label>
<input class="col-md-5" appearance="fill" type="date" matInput formControlName="date_of_birth">
<mat-error>Geburtsdatum muss angegeben werden</mat-error>
</mat-form-field>
<mat-form-field class="col-md-5" appearance="fill">
<mat-label>Geschlecht</mat-label>
<mat-select formControlName="sex">
<mat-option *ngFor="let gesch of geschlecht" [value]="gesch.value" >
{{ gesch.viewValue }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="row">
<mat-form-field class="col-md-5" appearance="fill">
<mat-label>Eintritt</mat-label>
<input class="col-md-5" appearance="fill" type="date" matInput formControlName="date_joined">
</mat-form-field>
<mat-form-field class="col-md-5" appearance="fill">
<mat-label>Austritt</mat-label>
<input type="date" matInput formControlName="date_leave" >
</mat-form-field>
</div>
<div class="row">
<div class="col-md-12 " >
<button class="btn btn-success" (click)="onEdit()">Speichern</button>
<button class="btn btn-cancel p-10" (click)="onCancel()">Abbruch</button>
</div>
</div>
<div class="row">
<div class="col-md-12 " >
</div>
</div>
</form>
</div>
</div>

46
src/app/edit-lehrlinge/edit-lehrlinge.component.ts
View File

@ -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({ @Component({
selector: 'app-edit-lehrlinge', selector: 'app-edit-lehrlinge',
@ -7,9 +12,46 @@ import { Component, OnInit } from '@angular/core';
}) })
export class EditLehrlingeComponent implements OnInit { 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 { ngOnInit(): void {
}
onEdit(): void {
}
onCancel(): void {
this.router.navigate(['/list-lehrling']);
} }
} }

18
src/app/lehrling2beruf/lehrling2beruf.component.html
View File

@ -2,7 +2,7 @@
<div class="pb-1 mb-4 display-6 border-bottom border-danger "> <div class="pb-1 mb-4 display-6 border-bottom border-danger ">
Teilnehmer zu Ausbildung zuordnen Teilnehmer zu Ausbildung zuordnen
</div> </div>
<div class="beruf-container"> <div class="beruf-container col-9">
<div [formGroup]="ProfessionFormGroup"> <div [formGroup]="ProfessionFormGroup">
<label>Ausbildung wählen:</label> <label>Ausbildung wählen:</label>
<select <select
@ -30,7 +30,7 @@
--> -->
</div> </div>
<div> <div>
<div class="mat-elevation-z8 p-3"> <div class="col-9 p-3">
<div class="row tnauswahl" > <div class="row tnauswahl" >
<div class="col-md-6 text-left"> <div class="col-md-6 text-left">
<h2>Teilnehmer</h2> <h2>Teilnehmer</h2>
@ -43,10 +43,10 @@
</div> </div>
<table mat-table [dataSource]="dsLehrlinge" class=" table mat-elevation-z8"> <table mat-table [dataSource]="dsLehrlinge" class=" table mat-elevation-z8 col-12 ">
<!-- Checkbox Column --> <!-- Checkbox Column -->
<ng-container style="width:20px" class="checkfeld" matColumnDef="select"> <ng-container class="checkfeld col-1" matColumnDef="select">
<th mat-header-cell *matHeaderCellDef> <th class="col-1" mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null" <mat-checkbox (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()" [checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()"> [indeterminate]="selection.hasValue() && !isAllSelected()">
@ -60,19 +60,19 @@
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="apprenticeid"> <ng-container matColumnDef="apprenticeid">
<th mat-header-cell *matHeaderCellDef> ID </th> <th class="col-1" mat-header-cell *matHeaderCellDef> ID </th>
<td mat-cell *matCellDef="let user"> {{user.apprenticeid}} </td> <td mat-cell *matCellDef="let user"> {{user.apprenticeid}} </td>
</ng-container> </ng-container>
<ng-container matColumnDef="firstname"> <ng-container matColumnDef="firstname">
<th mat-header-cell *matHeaderCellDef> Vorname </th> <th class="col-2" mat-header-cell *matHeaderCellDef> Vorname </th>
<td mat-cell *matCellDef="let user"> {{user.firstname}} </td> <td mat-cell *matCellDef="let user"> {{user.firstname}} </td>
</ng-container> </ng-container>
<ng-container matColumnDef="lastname"> <ng-container matColumnDef="lastname">
<th mat-header-cell *matHeaderCellDef> Name </th> <th class="col-2" mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let user"> {{user.lastname}} </td> <td mat-cell *matCellDef="let user"> {{user.lastname}} </td>
</ng-container> </ng-container>
<ng-container matColumnDef="groupname"> <ng-container matColumnDef="groupname">
<th mat-header-cell *matHeaderCellDef> Gruppe </th> <th class="col-2" mat-header-cell *matHeaderCellDef> Gruppe </th>
<td mat-cell *matCellDef="let user"> {{user.groupname}} </td> <td mat-cell *matCellDef="let user"> {{user.groupname}} </td>
</ng-container> </ng-container>

18
src/app/list-lehrlinge/list-lehrlinge.component.css
View File

@ -1,18 +0,0 @@
.table {
width: 100%;
}
.aktzeile {
color: red;
background: #472ddb;
font-weight: bold;
}
.mat-row .mat-cell {
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
cursor: pointer;
}
.mat-row:hover .mat-cell {
border-color: currentColor;
}

68
src/app/list-lehrlinge/list-lehrlinge.component.html
View File

@ -7,9 +7,7 @@
<mat-label>Filter</mat-label> <mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Suchbegriff" #input> <input matInput (keyup)="applyFilter($event)" placeholder="Suchbegriff" #input>
</mat-form-field> </mat-form-field>
<table mat-table [dataSource]="dsLehrlinge" matSort (matSortChange)="announceSortChange($event)" class=" table mat-elevation-z8">
<table mat-table [dataSource]="dsLehrlinge" mat-sort class=" table mat-elevation-z8">
<ng-container matColumnDef="apprenticeid"> <ng-container matColumnDef="apprenticeid">
<th mat-header-cell *matHeaderCellDef> ID </th> <th mat-header-cell *matHeaderCellDef> ID </th>
<td mat-cell *matCellDef="let user"> {{user.apprenticeid}} </td> <td mat-cell *matCellDef="let user"> {{user.apprenticeid}} </td>
@ -26,12 +24,12 @@
<th mat-header-cell mat-sort-header *matHeaderCellDef> Gruppe </th> <th mat-header-cell mat-sort-header *matHeaderCellDef> Gruppe </th>
<td mat-cell *matCellDef="let user"> {{user.groupname}} </td> <td mat-cell *matCellDef="let user"> {{user.groupname}} </td>
</ng-container> </ng-container>
<tr class="kopf" mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr class="kopf" mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" <tr mat-row *matRowDef="let row; columns: displayedColumns;"
(click)="onclick(row)" (click)="onclick(row)" (change)="selectHandler(row)"
> [ngClass]="{hovered: row.hovered, highlighted: selection.isSelected(row)}"
</tr> (mouseover)="row.hovered = true" (mouseout)="row.hovered = false"></tr>
</table> </table>
<mat-paginator [pageSizeOptions]="[10, 20, 50]" <mat-paginator [pageSizeOptions]="[10, 20, 50]"
showFirstLastButtons showFirstLastButtons
@ -39,58 +37,4 @@
</mat-paginator> </mat-paginator>
</div> </div>
<!-- Edit Bereich --> <!-- Edit Bereich -->
<div class="container col-6 mt-3 float-left"> <app-edit-lehrlinge></app-edit-lehrlinge>
<div class="abstandoben">&nbsp;</div>
<div class="ueberschrift">Teilnehmer bearbeiten
<button class="btn btn-primary float-right mt-5">Neu</button>
</div>
<div class="container mt-8 mat-elevation-z8 bg-white">
<form class="form" [formGroup]="editForm" novalidate>
<div class="row">
<mat-form-field class="col-md-3" appearance="fill">
<mat-label>ID</mat-label>
<input readonly="true" type="text" matInput formControlName="apprenticeid" >
</mat-form-field>
</div>
<div class="row">
<mat-form-field class="col-md-5" appearance="fill">
<mat-label>Vorname</mat-label>
<input type="text" matInput formControlName="firstname" >
</mat-form-field>
<mat-form-field class="col-md-5" appearance="fill">
<mat-label>Nachname</mat-label>
<input type="text" matInput formControlName="lastname" >
</mat-form-field>
</div>
<div class="row">
<mat-form-field class="col-md-5" appearance="fill">
<mat-label>Geboren</mat-label>
<input class="col-md-5" appearance="fill" type="date" matInput formControlName="date_of_birth">
</mat-form-field>
<mat-form-field class="col-md-5" appearance="fill">
<mat-label>Geschlecht</mat-label>
<input type="textarea" matInput formControlName="sex" >
</mat-form-field>
</div>
<div class="row">
<mat-form-field class="col-md-5" appearance="fill">
<mat-label>Eintritt</mat-label>
<input class="col-md-5" appearance="fill" type="date" matInput formControlName="date_joined">
</mat-form-field>
<mat-form-field class="col-md-5" appearance="fill">
<mat-label>Austritt</mat-label>
<input type="date" matInput formControlName="date_leave" >
</mat-form-field>
</div>
<div class="row">
<div class="col-md-12 " >
<button class="btn btn-success" (click)="onEdit()">Speichern</button>
<button class="btn btn-cancel p-10" (click)="onCancel()">Abbruch</button>
</div>
</div>
</form>
</div>
</div>

54
src/app/list-lehrlinge/list-lehrlinge.component.ts
View File

@ -9,6 +9,8 @@ import { UntypedFormBuilder, Validators } from '@angular/forms';
import { LiveAnnouncer } from '@angular/cdk/a11y'; import { LiveAnnouncer } from '@angular/cdk/a11y';
import { MatSort, Sort } from '@angular/material/sort'; import { MatSort, Sort } from '@angular/material/sort';
import { MatPaginator } from '@angular/material/paginator'; import { MatPaginator } from '@angular/material/paginator';
import { HttpHeaders } from '@angular/common/http';
import { EditLehrlingeComponent } from '../edit-lehrlinge/edit-lehrlinge.component';
@Component({ @Component({
selector: 'app-list-lehrlinge', selector: 'app-list-lehrlinge',
@ -17,33 +19,35 @@ import { MatPaginator } from '@angular/material/paginator';
}) })
export class ListLehrlingeComponent implements OnInit { export class ListLehrlingeComponent implements OnInit {
public dsLehrlinge?: MatTableDataSource<Lehrling>; public dsLehrlinge?: MatTableDataSource<Lehrling>;
selection = new SelectionModel<Lehrling>(true, []); selection = new SelectionModel<Lehrling>(true, []);
public lehrlinge: any; public lehrlinge: any;
public displayedColumns: any;
public editForm: any;
public aktlehrling: any;
constructor(private Lehrlinge: LehrlingService, public editForm: any;
public aktuellerlehrling: any;
headers: HttpHeaders = new HttpHeaders();
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 router: Router,
private formbuilder: UntypedFormBuilder, private formbuilder: UntypedFormBuilder,
private _liveAnnouncer: LiveAnnouncer,) 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 { ngOnInit(): void {
this.displayedColumns = ["apprenticeid", "firstname", "lastname", "groupname"];
this.Lehrlinge.getLehrlinge().subscribe( this.Lehrling.getLehrlinge().subscribe(
( (
data: any) => { data: any) => {
console.log(data); console.log(data);
@ -55,6 +59,7 @@ export class ListLehrlingeComponent implements OnInit {
@ViewChild('paginator') paginator: MatPaginator; @ViewChild('paginator') paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort; @ViewChild(MatSort) sort: MatSort;
ngAfterViewInit() { ngAfterViewInit() {
if(this.dsLehrlinge != undefined) { if(this.dsLehrlinge != undefined) {
this.dsLehrlinge.paginator = this.paginator; this.dsLehrlinge.paginator = this.paginator;
@ -66,9 +71,17 @@ export class ListLehrlingeComponent implements OnInit {
} }
onclick(aktlehrling: any) { onclick(aktlehrling: any) {
this.aktlehrling = aktlehrling; this.aktuellerlehrling = aktlehrling;
console.log("ausgewählt: " + aktlehrling.lastname) 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. */ /** Selects all rows if they are not all selected; otherwise clear selection. */
masterToggle() { masterToggle() {
this.isAllSelected() ? this.isAllSelected() ?
@ -97,10 +110,5 @@ export class ListLehrlingeComponent implements OnInit {
this._liveAnnouncer.announce('Sorting cleared'); this._liveAnnouncer.announce('Sorting cleared');
} }
} }
onEdit(): void {
} }
onCancel(): void {
this.router.navigate(['/list-lehrling']);
}
}

14
src/app/prergebnis/prergebnis.component.css
View File

@ -2,20 +2,6 @@
width: 100%; 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 { .radiogruppe {
vertical-align: middle; vertical-align: middle;
text-align: left;; text-align: left;;

16
src/app/prergebnis/prergebnis.component.html
View File

@ -71,11 +71,11 @@
<div class="ergebnis col-6"> <div class="ergebnis col-6">
<table mat-table [dataSource]="ergdataSource" matSort (matSortChange)="ergannounceSortChange($event)" class="mat-elevation-z8"> <table mat-table [dataSource]="ergdataSource" matSort (matSortChange)="ergannounceSortChange($event)" class="mat-elevation-z8">
<ng-container matColumnDef="firstname"> <ng-container matColumnDef="firstname">
<th class="kopf col-3" mat-sort-header mat-header-cell *matHeaderCellDef> Vorname </th> <th class="kopf col-2" mat-sort-header mat-header-cell *matHeaderCellDef> Vorname </th>
<td mat-cell *matCellDef="let pers"> {{pers.firstname}} </td> <td mat-cell *matCellDef="let pers"> {{pers.firstname}} </td>
</ng-container> </ng-container>
<ng-container matColumnDef="lastname"> <ng-container matColumnDef="lastname">
<th class="kopf col-3" mat-sort-header mat-header-cell *matHeaderCellDef> Nachname </th> <th class="kopf col-2" mat-sort-header mat-header-cell *matHeaderCellDef> Nachname </th>
<td mat-cell *matCellDef="let pers"> {{pers.lastname}} </td> <td mat-cell *matCellDef="let pers"> {{pers.lastname}} </td>
</ng-container> </ng-container>
<ng-container matColumnDef="date_of_exam"> <ng-container matColumnDef="date_of_exam">
@ -83,11 +83,13 @@
<td mat-cell class="text-left" *matCellDef="let pers"> {{pers.date_of_exam | date:'d.M.y'}} </td> <td mat-cell class="text-left" *matCellDef="let pers"> {{pers.date_of_exam | date:'d.M.y'}} </td>
</ng-container> </ng-container>
<ng-container matColumnDef="acquired"> <ng-container matColumnDef="acquired">
<th class="kopf text-center col-4" mat-sort-header mat-header-cell *matHeaderCellDef>Bestanden </th> <th class="kopf text-center col-6" mat-sort-header mat-header-cell *matHeaderCellDef>Bestanden </th>
<mat-radio-group class="radiogruppe" *matCellDef="let pers" [(ngModel)]="pers.acquired"> <mat-slider class="notenslider" *matCellDef="let pers" [(ngModel)]="pers.acquired"
<mat-radio-button class="radioknopf" value="0">ja </mat-radio-button> thumbLabel
<mat-radio-button class="radioknopf" value="0">nein</mat-radio-button> [displayWith]="formatLabel"
</mat-radio-group> tickInterval="1"
min="1"
max="5"></mat-slider>
</ng-container> </ng-container>
<tr mat-header-row *matHeaderRowDef="ergdisplayedColumns"></tr> <tr mat-header-row *matHeaderRowDef="ergdisplayedColumns"></tr>
<tr mat-row <tr mat-row

14
src/app/prergebnis/prergebnis.component.ts
View File

@ -32,6 +32,16 @@ export class PrergebnisComponent implements OnInit {
private _liveAnnouncer: LiveAnnouncer, private _liveAnnouncer: LiveAnnouncer,
private _ergliveAnnouncer: LiveAnnouncer) { } private _ergliveAnnouncer: LiveAnnouncer) { }
formatLabel(value: number | null) {
if (!value) {
return 0;
}
if (value >= 3) {
// da wäre schön, die Farbe zu ändern
}
return value;
}
public dataSource: any; public dataSource: any;
public ergdataSource: any; public ergdataSource: any;
@ -111,7 +121,7 @@ export class PrergebnisComponent implements OnInit {
if(this.ergdataSource != undefined) { if(this.ergdataSource != undefined) {
this.ergdataSource.ergpaginator = this.ergpaginator; this.ergdataSource.ergpaginator = this.ergpaginator;
this.ergdataSource.ergsort = this.ergsort; this.ergdataSource.ergsort = this.ergsort;
console.log(this.ergdataSource); console.log("ErgDatasource: " + this.ergdataSource);
} }
else else
console.log("Erg Datasource ist undefined in AfterViewInit"); console.log("Erg Datasource ist undefined in AfterViewInit");
@ -119,7 +129,7 @@ export class PrergebnisComponent implements OnInit {
if(this.dataSource != undefined) { if(this.dataSource != undefined) {
this.dataSource.paginator = this.paginator; this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort; this.dataSource.sort = this.sort;
console.log(this.dataSource); console.log("Datasource: " + this.dataSource);
} }
else else
console.log("DataSource undefined in AfterViewInit"); console.log("DataSource undefined in AfterViewInit");

19
src/app/services/lehrling.service.ts
View File

@ -1,6 +1,7 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'; import { HttpClient, HttpParams } from '@angular/common/http';
import { Lehrling } from '../lehrling'; import { Lehrling } from '../lehrling';
import { map, Observable } from 'rxjs';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
@ -13,4 +14,20 @@ export class LehrlingService {
getLehrlinge() { getLehrlinge() {
return this.http.get<Lehrling[]>(this.$url); return this.http.get<Lehrling[]>(this.$url);
} }
findLehrling(
id: number, filter = '', sortOrder='asc',
pageNumber = 0, pageSize = 5): Observable<Lehrling[]> {
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"])
);
}
} }

0
src/app/teilnehmer-kompetenz/teilnehmer-kompetenz.component.css Normal file
View File

1
src/app/teilnehmer-kompetenz/teilnehmer-kompetenz.component.html Normal file
View File

@ -0,0 +1 @@
<p>Teilnehmer-Kompetenz works!</p>

23
src/app/teilnehmer-kompetenz/teilnehmer-kompetenz.component.spec.ts Normal file
View File

@ -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<TeilnehmerKompetenzComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ TeilnehmerKompetenzComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(TeilnehmerKompetenzComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

15
src/app/teilnehmer-kompetenz/teilnehmer-kompetenz.component.ts Normal file
View File

@ -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 {
}
}

16
src/bildungsdb.css
View File

@ -32,3 +32,19 @@
font-size: 1.2em; font-size: 1.2em;
font-weight: bold; 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;
}

97
src/material.module.ts Normal file
View File

@ -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 {}