Vor erster Präsentation am 29.8.2022
This commit is contained in:
DanielKirchmeier
@@ -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;
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -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. */
|
||||
|
||||
Reference in New Issue
Block a user