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

Vor erster Präsentation am 29.8.2022

Browse Source
This commit is contained in:
DanielKirchmeier 2022-08-29 01:40:27 +02:00
parent 5f3a5605fe
commit f6c23c2d2b
21 changed files with 569 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -45,7 +45,8 @@ import { MatOption } from '@angular/material/core';
import { MatSelectModule } from '@angular/material/select';
import { PruefungsergebnisComponent } from './pruefungsergebnis/pruefungsergebnis.component';
import { MatDatepickerModule } from '@angular/material/datepicker';
import {MatTabsModule} from '@angular/material/tabs';
import {MatRadioModule} from '@angular/material/radio';
@NgModule({
imports: [
HttpClientModule,
@ -68,7 +69,9 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
NgbModule,
MatCardModule,
MatSelectModule,
MatDatepickerModule
MatDatepickerModule,
MatTabsModule,
MatRadioModule
],
declarations: [
AppComponent,

4
src/app/ausbildung/ausbildung.component.html
View File

@ -1 +1,3 @@
<p>ausbildung works!</p>
<div class="pb-1 mb-4 display-6 border-bottom border-danger">
Ausbildung
</div>

4
src/app/beruf/beruf.component.html
View File

@ -1 +1,3 @@
<p>beruf works!</p>
<div class="pb-1 mb-4 display-6 border-bottom border-danger">
Beruf
</div>

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

@ -1,10 +1,7 @@
<script>
const someTabTriggerEl = document.querySelector('#someTabTrigger')
const tab = new bootstrap.Tab(someTabTriggerEl)
tab.show()
</script>
<div class="pb-1 mb-4 display-6 border-bottom border-danger">
Übersicht der Ausbildung
</div>
<div class="col-md-1">&nbsp;</div>
<div class="col-md-3">
<mat-form-field appearance="standard">
<mat-label>Filter</mat-label>
@ -53,36 +50,23 @@
aria-label="Seite wählen">
</mat-paginator>
</div>
<div class="container col-md-8 mat-elevation-z8 bg-white" id="lehrlingTab">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>
<script>
const firstTabEl = document.querySelector('#myTab li:last-child button')
const firstTab = new bootstrap.Tab(firstTabEl)
firstTab.show()
</script>
<div class="ueberschrift">Lehrling</div>
<mat-tab-group mat-align-tabs="start">
<mat-tab label="Kompetenz">
<br><br>Hier werden die erworbenen und noch fehlenden Kompetenzen des ausgewählten Lehrlings angezeigt
</mat-tab>
<mat-tab label="Module">
<br><br>Hier werden die erworbenen und noch fehlenden Module des ausgewählten Lehrlings angezeigt
</mat-tab>
<mat-tab label="Prüfungen">
<br><br>Hier werden die absolvierten und noch fehlenden Prüfungen des ausgewählten Lehrlings angezeigt
</mat-tab>
<mat-tab label="Anmerkungen">
<br><br>Hier können Anmerkungen zum ausgewählten Lehrlings angezeigt oder eingetragen werden.
</mat-tab>
</mat-tab-group>
</div>
</div>

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

@ -12,7 +12,7 @@ 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';
@Component({
selector: 'app-dash',
templateUrl: './dash.component.html',

10
src/app/dashboard/dashboard.component.html
View File

@ -1,11 +1,13 @@
<h3>&Uuml;bersicht</h3>
<div class="pb-1 mb-4 display-6 border-bottom border-danger">
Übersicht
</div>
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="../../assets/icons/user_klein.png" class="card-img-top" alt="Lehrlinge">
<div class="card-body">
<h5 class="card-title">Lehrlinge</h5>
<div class="card-title display-6">Lehrlinge</div>
<table class="row-border hover table table-striped">
<thead class="kopf">
<th>Name</th>
@ -31,7 +33,7 @@
<div class="card h-100">
<img src="../../assets/icons/kompetenz.png" class="card-img-top" alt="Kompetenz">
<div class="card-body">
<h5 class="card-title">Kompetenzen</h5>
<div class="card-title display-6">Kompetenzen</div>
<!-- Hier beginnt die Karte Kompetenzen -->
<table class="table table-striped">
<thead class="kopf">
@ -67,7 +69,7 @@
<div class="card h-100">
<img src="../../assets/icons/pruefung.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Pr&uuml;fungen</h5>
<div class="card-title display-6">Pr&uuml;fungen</div>
<table class="table table-striped">
<thead class="kopf">
<th>Pr&uuml;fung</th>

92
src/app/kompetenz/kompetenz.component.html
View File

@ -1,24 +1,70 @@
<h3>Kompetenzen</h3>
<br>
<div class="pb-1 mb-4 display-6 border-bottom border-danger">
Kompetenzen
</div>
<div class="container col-5 float-left">
<mat-form-field appearance="standard">
<mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Suchbegriff" #input>
</mat-form-field>
<table mat-table [dataSource]="dataSource" matSort (matSortChange)="announceSortChange($event)" class="mat-elevation-z8">
<ng-container matColumnDef="competenceid">
<th class="kopf col-2" mat-header-cell *matHeaderCellDef> ID </th>
<td mat-cell *matCellDef="let com"> {{com.competenceid}} </td>
</ng-container>
<ng-container matColumnDef="competence">
<th class="kopf col-2" mat-sort-header mat-header-cell *matHeaderCellDef> Kompetenz </th>
<td mat-cell *matCellDef="let com"> {{com.competence}} </td>
</ng-container>
<ng-container matColumnDef="competencedescription">
<th class="kopf col-8" mat-sort-header mat-header-cell *matHeaderCellDef> Beschreibung </th>
<td mat-cell *matCellDef="let com"> {{com.competencedescription}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row
*matRowDef="let comrow; columns: displayedColumns;"
(click)="onclick(comrow)"
></tr>
</table>
<mat-paginator class="mat-elevation-z8 mt-2" #paginator [pageSizeOptions]="[10, 20, 50]" showFirstLastButtons></mat-paginator>
</div>
<!-- Edit Bereich -->
<div class="container col-6 float-right">
<div class="abstandoben">&nbsp;</div>
<div class="ueberschrift mt-3">Kompetenz bearbeiten</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="competenceid" >
</mat-form-field>
<mat-form-field class="col-md-5" appearance="fill">
<mat-label>Dauer in Halbtagen</mat-label>
<input type="text" matInput formControlName="dauer" >
</mat-form-field>
</div>
<div class="row">
<mat-form-field class="col-md-3" appearance="fill">
<mat-label>Kompetenz</mat-label>
<input class="col-md-5" appearance="fill" type="text" matInput formControlName="competence">
</mat-form-field>
</div>
<div class="row">
<mat-form-field class="col-md-8" appearance="fill">
<mat-label>Beschreibung</mat-label>
<input type="textarea" matInput formControlName="competencedescription" >
</mat-form-field>
<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>
</form>
</div>
</div>
<table class="table table-striped">
<thead class="kopf">
<th>Kompetenz</th>
<th>Beschreibung</th>
<th class="text-center">Halbtage</th>
<th>Aktion</th>
</thead>
<tbody>
<tr *ngFor="let aktkomp of kompetenzen">
<td>{{aktkomp.competence}}</td>
<td>{{aktkomp.competencedescription}}</td>
<td class="text-center">{{aktkomp.dauer}}</td>
<td>
<div class="d-grid gap-4 d-md-flex justify-content-md-center">
<a mat-mini-fab routerLink="/editkompetenz/{{aktkomp.competenceid}}" class="btn">
<mat-icon>edit</mat-icon>
</a>
</div>
</td>
</tr>
</table>

89
src/app/kompetenz/kompetenz.component.ts
View File

@ -1,7 +1,15 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, ViewChild } from '@angular/core';
import { KompetenzService } from '../services/kompetenz.service';
import { Observable } from 'rxjs';
import { MatSliderModule } from '@angular/material/slider';
import { LiveAnnouncer } from '@angular/cdk/a11y';
import { MatTableDataSource } from '@angular/material/table';
import { MatSort, Sort } from '@angular/material/sort';
import { MatPaginator } from '@angular/material/paginator';
import { Kompetenz } from '../kompetenz';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { FormBuilder, UntypedFormBuilder, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
@Component({
selector: 'app-kompetenz',
@ -11,9 +19,31 @@ import { MatSliderModule } from '@angular/material/slider';
export class KompetenzComponent implements OnInit {
public kompetenzen: any;
public selection: any;
public dataSource: any;
public editForm: any;
public aktKompetenzId: any;
public aktkompetenz?: Kompetenz;
headers: HttpHeaders = new HttpHeaders()
.set('Accept', 'application/json');
constructor(private Kompetenz: KompetenzService) {
displayedColumns: any = ["competenceid", "competence", "competencedescription"];
constructor(private Kompetenz: KompetenzService,
private _liveAnnouncer: LiveAnnouncer,
private formbuilder: FormBuilder,
private router: Router,
private kompetenzservice: KompetenzService,
private activatedRoute: ActivatedRoute,
private http: HttpClient,)
{
this.editForm = this.formbuilder.group({
competenceid: [],
competence: ['', Validators.required],
competencedescription: ['', Validators.required ],
dauer: ['']
})
}
ngOnInit(): void {
@ -22,7 +52,62 @@ export class KompetenzComponent implements OnInit {
(
result: any) => {
this.kompetenzen = result;
this.dataSource = new MatTableDataSource(this.kompetenzen);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
})
}
@ViewChild('paginator') paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
ngAfterViewInit() {
if(this.dataSource != undefined) {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
console.log(this.dataSource);
}
else
console.log("DataSource undefined in AfterViewInit");
}
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
console.log("Filter: " + this.dataSource.filter);
}
/** Announce the change in sort state for assistive technology. */
announceSortChange(sortState: Sort) {
// This example uses English messages. If your application supports
// multiple language, you would internationalize these strings.
// Furthermore, you can customize the message to add additional
// details about the values being sorted.
if (sortState.direction) {
this._liveAnnouncer.announce(`Sorted ${sortState.direction}ending`);
} else {
this._liveAnnouncer.announce('Sorting cleared');
}
}
onclick(aktuell: Kompetenz) {
this.aktKompetenzId = aktuell.competenceid;
console.log("ausgewählt: " + aktuell.competenceid)
if (this.aktKompetenzId > 0) {
this.kompetenzservice.getSingleKompetenz(this.aktKompetenzId).subscribe((
(data: any) => {
// console.log(data);
this.editForm.patchValue(data);
}
))
}
}
onEdit(): void {
}
onCancel(): void {
this.editForm.reset();
}
}

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

@ -1,6 +1,6 @@
<div class="h4 pb-2 mb-4 text-danger border-bottom border-danger">
Teilnehmer zu Ausbildung zuordnen!
<div class="pb-1 mb-4 display-6 border-bottom border-danger">
Teilnehmer zu Ausbildung zuordnen
</div>
<div class="beruf-container">
<div [formGroup]="ProfessionFormGroup">

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

@ -1,4 +1,18 @@
.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;
}

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

@ -1,33 +1,109 @@
<h3>Lehrlinge</h3>
<div class="container mb-4">
<div class="bg-light clearfix">
<button type="button" class="btn btn-primary float-left">Neu</button>
</div>
<div class="pb-1 mb-4 display-6 border-bottom border-danger">
Lehrlinge
</div>
<div class="container col-5 float-left">
<mat-form-field appearance="standard">
<mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Suchbegriff" #input>
</mat-form-field>
<table class="table table-striped">
<thead class="kopf">
<th>Name</th>
<th>Gruppe</th>
<th>Geschlecht</th>
<th>Geboren</th>
<th>Eintritt</th>
<th>Austritt</th>
<th>Aktion</th>
</thead>
<tbody>
<tr *ngFor="let aktlehrling of lehrlinge">
<td>{{aktlehrling.firstname}} {{aktlehrling.lastname}}</td>
<td>{{aktlehrling.groupname}}</td>
<td>{{aktlehrling.sex}}</td>
<td>{{aktlehrling.date_of_birth}}</td>
<td>{{aktlehrling.date_joined}}</td>
<td>{{aktlehrling.date_leave}}</td>
<div class="d-grid gap-4 d-md-flex justify-content-md-center">
<a mat-mini-fab routerLink="/editLehrling/{{aktlehrling.lehrlingid}}" class="btn">
<mat-icon>edit</mat-icon>
</a>
</div>
</tr>
</table>
<table mat-table [dataSource]="dsLehrlinge" class=" table mat-elevation-z8">
<!-- Checkbox Column -->
<!-- <ng-container class="checkfeld" matColumnDef="select">
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
-->
<ng-container matColumnDef="apprenticeid">
<th mat-header-cell *matHeaderCellDef> ID </th>
<td mat-cell *matCellDef="let user"> {{user.apprenticeid}} </td>
</ng-container>
<ng-container matColumnDef="firstname">
<th mat-header-cell *matHeaderCellDef> Vorname </th>
<td mat-cell *matCellDef="let user"> {{user.firstname}} </td>
</ng-container>
<ng-container matColumnDef="lastname">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let user"> {{user.lastname}} </td>
</ng-container>
<ng-container matColumnDef="groupname">
<th mat-header-cell *matHeaderCellDef> Gruppe </th>
<td mat-cell *matCellDef="let user"> {{user.groupname}} </td>
</ng-container>
<tr class="kopf" mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"
(click)="onclick(row)"
>
</tr>
</table>
<mat-paginator [pageSizeOptions]="[10, 20, 50]"
showFirstLastButtons
aria-label="Seite auswählen">
</mat-paginator>
</div>
<!-- Edit Bereich -->
<div class="container col-6 float-left">
<div class="titel">Lehrling bearbeiten</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>

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

@ -1,7 +1,14 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, ViewChild } from '@angular/core';
import { LehrlingService } from '../services/lehrling.service';
import { Observable } from 'rxjs';
import { Lehrling } from '../lehrling';
import { MatTableDataSource } from '@angular/material/table';
import { SelectionModel } from '@angular/cdk/collections';
import { Router } from '@angular/router';
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';
@Component({
selector: 'app-list-lehrlinge',
@ -10,16 +17,90 @@ import { Lehrling } from '../lehrling';
})
export class ListLehrlingeComponent implements OnInit {
public dsLehrlinge?: MatTableDataSource<Lehrling>;
selection = new SelectionModel<Lehrling>(true, []);
public lehrlinge: any;
public displayedColumns: any;
public editForm: any;
public aktlehrling: any;
constructor(private Lehrlinge: LehrlingService) { }
constructor(private Lehrlinge: 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(
(
data: any) => {
console.log(data);
this.lehrlinge = data.apprentice;
this.dsLehrlinge = this.lehrlinge;
})
}
@ViewChild('paginator') paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
ngAfterViewInit() {
if(this.dsLehrlinge != undefined) {
this.dsLehrlinge.paginator = this.paginator;
this.dsLehrlinge.sort = this.sort;
// console.log(this.dsLehrlinge);
}
else
console.log("DataSource undefined in AfterViewInit");
}
onclick(aktlehrling: any) {
this.aktlehrling = aktlehrling;
console.log("ausgewählt: " + aktlehrling.lastname)
}
/** Selects all rows if they are not all selected; otherwise clear selection. */
masterToggle() {
this.isAllSelected() ?
this.selection.clear() :
this.dsLehrlinge.data.forEach(row => this.selection.select(row));
}
/** Whether the number of selected elements matches the total number of rows. */
isAllSelected() {
console.log(this.selection);
const numSelected = this.selection.selected.length;
const numRows = this.dsLehrlinge.data.length;
return numSelected === numRows;
}
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dsLehrlinge.filter = filterValue.trim().toLowerCase();
// console.log("Filter: " + this.dsLehrlinge.filter);
}
/** Announce the change in sort state for assistive technology. */
announceSortChange(sortState: Sort) {
if (sortState.direction) {
this._liveAnnouncer.announce(`Sorted ${sortState.direction}ending`);
} else {
this._liveAnnouncer.announce('Sorting cleared');
}
}
onEdit(): void {
}
onCancel(): void {
this.router.navigate(['/list-lehrling']);
}
}

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

@ -1,8 +1,7 @@
<div class="pb-1 mb-4 display-6 border-bottom border-danger">
Module
</div>
<div class="container col-5 float-left">
<div class="clearfix">
<div class="display-6">Module</div>
<button type="button" class="btn btn-primary float-left">Neu</button>
</div>
<mat-form-field appearance="standard">
<mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Suchbegriff" #input>
@ -30,3 +29,14 @@
</table>
<mat-paginator class="mat-elevation-z8 mt-2" #paginator [pageSizeOptions]="[10, 20, 50]" showFirstLastButtons></mat-paginator>
</div>
<!-- Edit Bereich -->
<div class="container col-6 float-right">
<div class="titel">Modul bearbeiten</div>
<div class="container mt-8 mat-elevation-z8">
<form>
</form>
</div>
</div>

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

@ -32,7 +32,7 @@ export class ModulComponent implements OnInit {
this.Modulservice.getModule().subscribe(
(
data: any) => {
console.log(data);
// console.log(data);
this.module = data.modul;
this.dataSource = new MatTableDataSource(this.module);
this.dataSource.paginator = this.paginator;

5
src/app/notfound/notfound.component.html
View File

@ -1,2 +1,5 @@
<h3>Seite wurde nicht gefunden!</h3>
<div class="pb-1 mb-4 display-6 border-bottom border-danger">
Seite wurde nicht gefunden!
</div>

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

@ -4,14 +4,24 @@
.row-is-clicked {
color: red;
background-color: #fdf9e9;
background: #472ddb;
font-weight: bold;
}
.mat-row.hovered {
background: #eee;
background: rgb(228, 238, 255);
}
.mat-row.highlighted {
background: #fdf9e9;
background: #d04b2d;
font-weight: bold;
}
.radiogruppe {
vertical-align: middle;
text-align: left;;
}
.radioknopf {
vertical-align: bottom;
margin-left: 8px;
margin-top: 10px;
}

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

@ -1,3 +1,6 @@
<div class="pb-1 mb-4 display-6 border-bottom border-danger">
Prüfungsergebnisse
</div>
<div class="container col-12 float-left">
<div class="row">
<div class="auswahl col-6">
@ -24,91 +27,85 @@
</mat-form-field>
</div>
</div>
</div>
<div class="row col-12">
<div class="person col-6">
<table mat-table [dataSource]="dataSource" matSort (matSortChange)="announceSortChange($event)" class="mat-elevation-z8">
<!-- Checkbox Column -->
<!-- <ng-container matColumnDef="select">
<mat-header-cell class="kopf col-1" *matHeaderCellDef></mat-header-cell>
<mat-cell class="align-bottom" *matCellDef="let pruerow">
<mat-checkbox class="pt-3" (click)="$event.stopPropagation()" (change)="selectHandler(pruerow)"
[checked]="selection.isSelected(pruerow)">
</mat-checkbox>
</mat-cell>
</ng-container>
-->
<ng-container matColumnDef="examid">
<th class="kopf col-1" mat-header-cell *matHeaderCellDef> ID </th>
<td mat-cell *matCellDef="let prue"> {{prue.examid}} </td>
</ng-container>
<ng-container matColumnDef="examshort">
<th class="kopf col-2" mat-sort-header mat-header-cell *matHeaderCellDef> Prüfung </th>
<td mat-cell *matCellDef="let prue"> {{prue.examshort}} </td>
</ng-container>
<ng-container matColumnDef="examname">
<th class="kopf col-3" mat-sort-header mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let prue"> {{prue.examname}} </td>
</ng-container>
<ng-container matColumnDef="examdescription">
<th class="kopf col-5" mat-sort-header mat-header-cell *matHeaderCellDef> Beschreibung </th>
<td mat-cell *matCellDef="let prue"> {{prue.examdescription}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row
*matRowDef="let pruerow; columns: displayedColumns;"
(click)="selectHandler(pruerow)" (change)="selectHandler(pruerow)"
[ngClass]="{hovered: pruerow.hovered, highlighted: selection.isSelected(pruerow)}"
(mouseover)="pruerow.hovered = true" (mouseout)="pruerow.hovered = false"></tr>
</table>
<mat-paginator class="mat-elevation-z8 mt-3" #paginator [pageSizeOptions]="[5, 10, 20, 30]" showFirstLastButtons></mat-paginator>
</div>
<div class="pruef col-6">
<table mat-table [dataSource]="ergdataSource" matSort (matSortChange)="ergannounceSortChange($event)" class="mat-elevation-z8">
<!-- Checkbox Column -->
<!-- <ng-container matColumnDef="select">
<mat-header-cell class="kopf col-1" *matHeaderCellDef></mat-header-cell>
<mat-cell class="align-bottom" *matCellDef="let pruerow">
<mat-checkbox class="pt-3" (click)="$event.stopPropagation()" (change)="selectHandler(pruerow)"
[checked]="selection.isSelected(pruerow)">
</mat-checkbox>
</mat-cell>
</ng-container>
-->
<ng-container matColumnDef="firstname">
<th class="kopf col-4" mat-sort-header mat-header-cell *matHeaderCellDef> Vorname </th>
<td mat-cell *matCellDef="let pers"> {{pers.firstname}} </td>
</ng-container>
<ng-container matColumnDef="lastname">
<th class="kopf col-4" mat-sort-header mat-header-cell *matHeaderCellDef> Nachname </th>
<td mat-cell *matCellDef="let pers"> {{pers.lastname}} </td>
</ng-container>
<ng-container matColumnDef="date_of_exam">
<th class="kopf col-2" mat-sort-header mat-header-cell *matHeaderCellDef> Datum </th>
<td mat-cell *matCellDef="let pers"> {{pers.date_of_exam}} </td>
</ng-container>
<ng-container matColumnDef="acquired">
<th class="kopf text-right col-2" mat-sort-header mat-header-cell *matHeaderCellDef> Bestanden </th>
<td mat-cell class="text-center" *matCellDef="let pers">{{pers.acquired}}
<!-- <div *ngIf="1">
<img src="../../assets/icons/ok.png">
</div> -->
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="ergdisplayedColumns"></tr>
<tr mat-row
*matRowDef="let persrow; columns: ergdisplayedColumns;"
(click)="selectHandler(persrow)" (change)="selectHandler(persrow)"
[ngClass]="{hovered: persrow.hovered, highlighted: selection.isSelected(persrow)}"
(mouseover)="persrow.hovered = true" (mouseout)="persrow.hovered = false"></tr>
</table>
<mat-paginator class="mat-elevation-z8 mt-3" #ergpaginator [pageSizeOptions]="[5, 10, 20, 50]" showFirstLastButtons></mat-paginator>
</div>
</div>
<div>
<h3>
Ausgewählt:
</h3>
{{selection.selected | json}}
<div class="pruefung col-6">
<table mat-table [dataSource]="dataSource" matSort (matSortChange)="announceSortChange($event)" class="mat-elevation-z8 col-12">
<!-- Checkbox Column -->
<!-- <ng-container matColumnDef="select">
<mat-header-cell class="kopf col-1" *matHeaderCellDef></mat-header-cell>
<mat-cell class="align-bottom" *matCellDef="let pruerow">
<mat-checkbox class="pt-3" (click)="$event.stopPropagation()" (change)="selectHandler(pruerow)"
[checked]="selection.isSelected(pruerow)">
</mat-checkbox>
</mat-cell>
</ng-container>
-->
<ng-container matColumnDef="examid">
<th class="kopf col-1" mat-header-cell *matHeaderCellDef> ID </th>
<td mat-cell *matCellDef="let prue"> {{prue.examid}} </td>
</ng-container>
<ng-container matColumnDef="examshort">
<th class="kopf col-2" mat-sort-header mat-header-cell *matHeaderCellDef> Prüfung </th>
<td mat-cell *matCellDef="let prue"> {{prue.examshort}} </td>
</ng-container>
<ng-container matColumnDef="examname">
<th class="kopf col-3" mat-sort-header mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let prue"> {{prue.examname}} </td>
</ng-container>
<ng-container matColumnDef="examdescription">
<th class="kopf col-6" mat-sort-header mat-header-cell *matHeaderCellDef> Beschreibung </th>
<td mat-cell *matCellDef="let prue"> {{prue.examdescription}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row
*matRowDef="let row; columns: displayedColumns;"
(click)="onclick(row)" (change)="selectHandler(row)"
[ngClass]="{hovered: row.hovered, highlighted: selection.isSelected(row)}"
(mouseover)="row.hovered = true" (mouseout)="row.hovered = false"></tr>
</table>
<mat-paginator class="mat-elevation-z8 mt-3" #paginator [pageSizeOptions]="[10, 20, 30]" showFirstLastButtons></mat-paginator>
</div>
</div>
<div class="ergebnis col-6">
<table mat-table [dataSource]="ergdataSource" matSort (matSortChange)="ergannounceSortChange($event)" class="mat-elevation-z8">
<ng-container matColumnDef="firstname">
<th class="kopf col-3" mat-sort-header mat-header-cell *matHeaderCellDef> Vorname </th>
<td mat-cell *matCellDef="let pers"> {{pers.firstname}} </td>
</ng-container>
<ng-container matColumnDef="lastname">
<th class="kopf col-3" mat-sort-header mat-header-cell *matHeaderCellDef> Nachname </th>
<td mat-cell *matCellDef="let pers"> {{pers.lastname}} </td>
</ng-container>
<ng-container matColumnDef="date_of_exam">
<th class="kopf col-2 text-center" mat-sort-header mat-header-cell *matHeaderCellDef> Datum </th>
<td mat-cell class="text-left" *matCellDef="let pers"> {{pers.date_of_exam | date:'d.M.y'}} </td>
</ng-container>
<ng-container matColumnDef="acquired">
<th class="kopf text-center col-4" mat-sort-header mat-header-cell *matHeaderCellDef>Bestanden </th>
<mat-radio-group class="radiogruppe" *matCellDef="let pers" [(ngModel)]="pers.acquired">
<mat-radio-button class="radioknopf" value="0">ja </mat-radio-button>
<mat-radio-button class="radioknopf" value="0">nein</mat-radio-button>
</mat-radio-group>
</ng-container>
<tr mat-header-row *matHeaderRowDef="ergdisplayedColumns"></tr>
<tr mat-row
*matRowDef="let persrow; columns: ergdisplayedColumns;"
(click)="onergclick(persrow)" (change)="ergselectHandler(persrow)"
[ngClass]="{hovered: persrow.hovered, highlighted: ergselection.isSelected(persrow)}"
(mouseover)="persrow.hovered = true" (mouseout)="persrow.hovered = false"></tr>
</table>
<mat-paginator class="mat-elevation-z8 mt-3" #ergpaginator [pageSizeOptions]="[5, 10, 20, 50]" showFirstLastButtons></mat-paginator>
</div>
<div>
<h3>
Ausgewählte Prüfung:
</h3>
{{angewaehlt | json}}
</div>
<div>
<h3>
Ausgewähltes Ergebnis:
</h3>
{{ergangewaehlt | json}}
</div>
</div>
</div>

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

@ -9,6 +9,7 @@ import { PruefungService } from '../services/pruefung.service';
import {MatSelectModule} from '@angular/material/select';
import { PruefungsergebnisService } from '../services/pruefungsergebnis.service';
import { Pruefungsergebnis } from '../Pruefungsergebnis';
import {MatRadioModule} from '@angular/material/radio';
export enum SelectType {
single,
@ -58,9 +59,9 @@ export class PrergebnisComponent implements OnInit {
})
this.pruefungsergebnis.getPruefergebnisse().subscribe(
(
data: any) => {
dataerg: any) => {
// console.log(data);
this.pruefergebnisse = data;
this.pruefergebnisse = dataerg;
this.ergdataSource = new MatTableDataSource(this.pruefergebnisse);
this.ergdataSource.ergpaginator = this.ergpaginator;
this.ergdataSource.sort = this.sort;
@ -119,19 +120,22 @@ export class PrergebnisComponent implements OnInit {
}
onclick(pruerow: any) {
this.angewaehlt = pruerow;
console.log(this.angewaehlt);
}
onergclick(persrow: any) {
this.ergangewaehlt = persrow;
}
applypruefFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
console.log("Filter: " + this.dataSource.filter);
// console.log("Filter: " + this.dataSource.filter);
}
applypersonFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.ergdataSource.filter = filterValue.trim().toLowerCase();
console.log("Filter: " + this.ergdataSource.filter);
// console.log("Filter: " + this.ergdataSource.filter);
}
/** Announce the change in sort state for assistive technology. */

13
src/app/pruefung/pruefung.component.html
View File

@ -1,8 +1,6 @@
<div class="container col-5 float-left">
<div class="clearfix">
<div class="display-6">Pr&uuml;fungen</div>
<button type="button" class="btn btn-primary float-left">Neu</button>
</div>
<div class="pb-1 mb-4 display-6 border-bottom border-danger">
Prüfungen
</div>
<mat-form-field appearance="standard">
<mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Suchbegriff" #input>
@ -14,11 +12,11 @@
<td mat-cell *matCellDef="let prue"> {{prue.examid}} </td>
</ng-container>
<ng-container matColumnDef="examshort">
<th class="kopf col-1" mat-sort-header mat-header-cell *matHeaderCellDef> Prüfung </th>
<th class="kopf col-2" mat-sort-header mat-header-cell *matHeaderCellDef> Prüfung </th>
<td mat-cell *matCellDef="let prue"> {{prue.examshort}} </td>
</ng-container>
<ng-container matColumnDef="examname">
<th class="kopf col-3" mat-sort-header mat-header-cell *matHeaderCellDef> Name </th>
<th class="kopf col-2" mat-sort-header mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let prue"> {{prue.examname}} </td>
</ng-container>
<ng-container matColumnDef="examdescription">
@ -29,4 +27,3 @@
<tr mat-row *matRowDef="let pruerow; columns: displayedColumns;"></tr>
</table>
<mat-paginator class="mat-elevation-z8 mt-2" #paginator [pageSizeOptions]="[10, 20, 50]" showFirstLastButtons></mat-paginator>
</div>

24
src/app/sidebar/sidebar.component.html
View File

@ -8,54 +8,52 @@
</div>
<ul class="nav">
<li routerLinkActive="active">
<a routerLink="dashboard">
<a class="mt-0" routerLink="dash">
<p>Dashboard</p>
</a>
</li>
<li routerLinkActive="active">
<a routerLink="dash">
<p>Dash</p>
<li routerLinkActive="active">
<a class="mt-0" routerLink="dashboard">
<p>Übersicht</p>
</a>
</li>
<li routerLinkActive="active">
<a routerLink="list-lehrling">
<a class="mt-0" routerLink="list-lehrling">
<p>Lehrling</p>
</a>
</li>
<li routerLinkActive="active">
<a routerLink="kompetenz">
<a class="mt-0" routerLink="kompetenz">
<p>Kompetenz</p>
</a>
</li>
<li routerLinkActive="active">
<a routerLink="modul">
<a class="mt-0" routerLink="modul">
<p>Modul</p>
</a>
</li>
<li routerLinkActive="active">
<a routerLink="pruefung">
<a class="mt-0" routerLink="pruefung">
<p>Prüfung</p>
</a>
</li>
<li routerLinkActive="active">
<a routerLink="pruefungergebnis">
<a class="mt-0" routerLink="pruefungergebnis">
<p>Prüfungsergebnis</p>
</a>
</li>
<li routerLinkActive="active">
<a routerLink="l2b">
<a class="mt-0" routerLink="l2b">
<p>Lehrling zu Beruf</p>
</a>
</li>
<li routerLinkActive="active">
<li class="mt-0" routerLinkActive="active">
<a routerLink="about">
<p>&Uuml;ber</p>
</a>

28
src/bildungsdb.css
View File

@ -4,3 +4,31 @@
background-color: #fae584;
}
.titel {
background-color: #fae584;
padding: 0px;
margin: 0px;
margin-top: 70px;
padding: 15px;
font-size: 1.2em;
font-weight: bold;
}
.ueberschrift {
background-color: white;
padding: 0px;
margin: 0px;
margin-top: 3px;
padding: 15px;
font-size: 1.2em;
font-weight: bold;
}
.abstandoben {
padding: 0px;
margin: 0px;
margin-top: 3px;
padding: 15px;
font-size: 1.2em;
font-weight: bold;
}