File
Implements
Metadata
styleUrls |
./results.component.css |
templateUrl |
./results.component.html |
Methods
downloadLogsCSV
|
downloadLogsCSV()
|
|
|
downloadResponsesCSV
|
downloadResponsesCSV()
|
|
|
downloadReviewsCSV
|
downloadReviewsCSV()
|
|
|
isAllSelected
|
isAllSelected()
|
|
|
masterToggle
|
masterToggle()
|
|
|
updateTable
|
updateTable()
|
|
|
displayedColumns
|
Type : string[]
|
Default value : [
'selectCheckbox', 'groupname', 'bookletsStarted', 'num_units_min', 'num_units_max', 'num_units_mean', 'lastchange'
]
|
|
resultDataSource
|
Default value : new MatTableDataSource<ResultData>([])
|
|
Public
snackBar
|
Type : MatSnackBar
|
|
sort
|
Type : MatSort
|
Decorators :
@ViewChild(MatSort, {static: true})
|
|
tableselectionCheckbox
|
Default value : new SelectionModel<ResultData>(true, [])
|
|
import { ConfirmDialogComponent, ConfirmDialogData } from 'iqb-components';
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { SelectionModel } from '@angular/cdk/collections';
import { saveAs } from 'file-saver';
import { BackendService } from '../backend.service';
import { WorkspaceDataService } from '../workspacedata.service';
import {
LogData, ResultData, UnitResponse, ReviewData
} from '../workspace.interfaces';
import { MainDataService } from '../../maindata.service';
@Component({
templateUrl: './results.component.html',
styleUrls: ['./results.component.css']
})
export class ResultsComponent implements OnInit {
displayedColumns: string[] = [
'selectCheckbox', 'groupname', 'bookletsStarted', 'num_units_min', 'num_units_max', 'num_units_mean', 'lastchange'
];
resultDataSource = new MatTableDataSource<ResultData>([]);
// prepared for selection if needed sometime
tableselectionCheckbox = new SelectionModel<ResultData>(true, []);
@ViewChild(MatSort, { static: true }) sort: MatSort;
constructor(
private bs: BackendService,
public wds: WorkspaceDataService,
private deleteConfirmDialog: MatDialog,
private mds: MainDataService,
public snackBar: MatSnackBar
) { }
ngOnInit(): void {
setTimeout(() => {
this.mds.setSpinnerOn();
this.updateTable();
});
}
updateTable(): void {
this.tableselectionCheckbox.clear();
if (this.wds.wsRole === 'MO') {
this.resultDataSource = new MatTableDataSource<ResultData>([]);
this.mds.setSpinnerOff();
} else {
this.bs.getResultData().subscribe(
(resultData: ResultData[]) => {
this.resultDataSource = new MatTableDataSource<ResultData>(resultData);
this.resultDataSource.sort = this.sort;
this.mds.setSpinnerOff();
}
);
}
}
isAllSelected(): boolean {
const numSelected = this.tableselectionCheckbox.selected.length;
const numRows = this.resultDataSource.data.length;
return numSelected === numRows;
}
masterToggle(): void {
this.isAllSelected() ?
this.tableselectionCheckbox.clear() :
this.resultDataSource.data.forEach(row => this.tableselectionCheckbox.select(row));
}
downloadResponsesCSV(): void {
if (this.tableselectionCheckbox.selected.length > 0) {
const selectedGroups: string[] = [];
this.tableselectionCheckbox.selected.forEach(element => {
selectedGroups.push(element.groupname);
});
this.mds.setSpinnerOn();
this.bs.getResponses(selectedGroups).subscribe(
(responseData: UnitResponse[]) => {
this.mds.setSpinnerOff();
if (responseData.length > 0) {
const columnDelimiter = ';';
const lineDelimiter = '\n';
let myCsvData = 'groupname' + columnDelimiter
+ 'loginname' + columnDelimiter
+ 'code' + columnDelimiter
+ 'bookletname' + columnDelimiter
+ 'unitname' + columnDelimiter
+ 'responses' + columnDelimiter
+ 'restorePoint' + columnDelimiter
+ 'responseType' + columnDelimiter
+ 'response-ts' + columnDelimiter
+ 'restorePoint-ts' + columnDelimiter
+ 'laststate' + lineDelimiter;
responseData.forEach((resp: UnitResponse) => {
myCsvData += '"' + resp.groupname + '"' + columnDelimiter
+ '"' + resp.loginname + '"' + columnDelimiter
+ '"' + resp.code + '"' + columnDelimiter
+ '"' + resp.bookletname + '"' + columnDelimiter
+ '"' + resp.unitname + '"' + columnDelimiter;
if ((resp.responses !== null) && (resp.responses.length > 0)) {
myCsvData += resp.responses.replace(/\\"/g, '""') + columnDelimiter;
} else {
myCsvData += columnDelimiter;
}
if ((resp.restorepoint !== null) && (resp.restorepoint.length > 0)) {
myCsvData += resp.restorepoint.replace(/\\"/g, '""') + columnDelimiter;
} else {
myCsvData += columnDelimiter;
}
if ((resp.responsetype !== null) && (resp.responsetype.length > 0)) {
myCsvData += '"' + resp.responsetype + '"' + columnDelimiter;
} else {
myCsvData += columnDelimiter;
}
myCsvData += resp.responses_ts + columnDelimiter + resp.restorepoint_ts + columnDelimiter;
if ((resp.laststate !== null) && (resp.laststate.length > 0)) {
myCsvData += '"' + resp.laststate + '"' + lineDelimiter;
} else {
myCsvData += lineDelimiter;
}
});
const blob = new Blob([myCsvData], {type: 'text/csv;charset=utf-8'});
saveAs(blob, 'iqb-testcenter-responses.csv');
} else {
this.snackBar.open('Keine Daten verfügbar.', 'Fehler', {duration: 3000});
}
this.tableselectionCheckbox.clear();
});
}
}
downloadReviewsCSV(): void {
if (this.tableselectionCheckbox.selected.length > 0) {
const selectedGroups: string[] = [];
this.tableselectionCheckbox.selected.forEach(element => {
selectedGroups.push(element.groupname);
});
this.mds.setSpinnerOn();
this.bs.getReviews(selectedGroups).subscribe(
(responseData: ReviewData[]) => {
this.mds.setSpinnerOff();
if (responseData.length > 0) {
// collect categories
const allCategories: string[] = [];
responseData.forEach((resp: ReviewData) => {
resp.categories.split(' ').forEach(s => {
const s_trimmed = s.trim();
if (s_trimmed.length > 0) {
if (!allCategories.includes(s_trimmed)) {
allCategories.push(s_trimmed);
}
}
});
});
const columnDelimiter = ';';
const lineDelimiter = '\n';
let myCsvData = 'groupname' + columnDelimiter + 'loginname' + columnDelimiter + 'code' + columnDelimiter +
'bookletname' + columnDelimiter + 'unitname' + columnDelimiter +
'priority' + columnDelimiter;
allCategories.forEach(s => {
myCsvData += 'category: ' + s + columnDelimiter;
});
myCsvData += 'reviewtime' + columnDelimiter + 'entry' + lineDelimiter;
responseData.forEach((resp: ReviewData) => {
if ((resp.entry !== null) && (resp.entry.length > 0)) {
myCsvData += '"' + resp.groupname + '"' + columnDelimiter + '"' + resp.loginname + '"' +
columnDelimiter + '"' + resp.code + '"' + columnDelimiter + '"' + resp.bookletname + '"' +
columnDelimiter + '"' + resp.unitname + '"' + columnDelimiter + '"' +
resp.priority + '"' + columnDelimiter;
const resp_categories = resp.categories.split(' ');
allCategories.forEach(s => {
if (resp_categories.includes(s)) {
myCsvData += '"X"' + columnDelimiter;
} else {
myCsvData += columnDelimiter;
}
});
myCsvData += '"' + resp.reviewtime + '"' + columnDelimiter + '"' + resp.entry + '"' + lineDelimiter;
}
});
const blob = new Blob([myCsvData], {type: 'text/csv;charset=utf-8'});
saveAs(blob, 'iqb-testcenter-reviews.csv');
} else {
this.snackBar.open('Keine Daten verfügbar.', 'Fehler', {duration: 3000});
}
this.tableselectionCheckbox.clear();
});
}
}
downloadLogsCSV(): void {
if (this.tableselectionCheckbox.selected.length > 0) {
const selectedGroups: string[] = [];
this.tableselectionCheckbox.selected.forEach(element => {
selectedGroups.push(element.groupname);
});
this.mds.setSpinnerOn();
this.bs.getLogs(selectedGroups).subscribe(
(responseData: LogData[]) => {
this.mds.setSpinnerOff();
if (responseData.length > 0) {
const columnDelimiter = ';';
const lineDelimiter = '\n';
let myCsvData = 'groupname' + columnDelimiter + 'loginname' + columnDelimiter + 'code' + columnDelimiter +
'bookletname' + columnDelimiter + 'unitname' + columnDelimiter +
'timestamp' + columnDelimiter + 'logentry' + lineDelimiter;
responseData.forEach((resp: LogData) => {
if ((resp.logentry !== null) && (resp.logentry.length > 0)) {
myCsvData += '"' + resp.groupname + '"' + columnDelimiter + '"' + resp.loginname + '"' + columnDelimiter + '"' + resp.code + '"' + columnDelimiter +
'"' + resp.bookletname + '"' + columnDelimiter + '"' + resp.unitname + '"' + columnDelimiter + '"' +
resp.timestamp.toString() + '"' + columnDelimiter + resp.logentry.replace(/\\"/g, '""') + lineDelimiter;
}
});
const blob = new Blob([myCsvData], {type: 'text/csv;charset=utf-8'});
saveAs(blob, 'iqb-testcenter-logs.csv');
} else {
this.snackBar.open('Keine Daten verfügbar.', 'Fehler', {duration: 3000});
}
this.tableselectionCheckbox.clear();
});
}
}
deleteData(): void {
if (this.tableselectionCheckbox.selected.length > 0) {
const selectedGroups: string[] = [];
this.tableselectionCheckbox.selected.forEach(element => {
selectedGroups.push(element.groupname);
});
let prompt = 'Es werden alle Antwort- und Logdaten in der Datenbank für diese ';
if (selectedGroups.length > 1) {
prompt = prompt + selectedGroups.length + ' Gruppen ';
} else {
prompt = prompt + ' Gruppe "' + selectedGroups[0] + '" ';
}
const dialogRef = this.deleteConfirmDialog.open(ConfirmDialogComponent, {
width: '400px',
data: <ConfirmDialogData>{
title: 'Löschen von Gruppendaten',
content: `${prompt}gelöscht. Fortsetzen?`,
confirmbuttonlabel: 'Gruppendaten löschen',
showcancel: true
}
});
dialogRef.afterClosed().subscribe((result) => {
if (result !== false) {
this.mds.setSpinnerOn();
this.bs.deleteData(selectedGroups).subscribe((ok: boolean) => {
if (ok) {
this.snackBar.open('Löschen erfolgreich.', 'Ok.', { duration: 3000 });
} else {
this.snackBar.open('Löschen nicht erfolgreich.', 'Fehler', { duration: 3000 });
}
this.tableselectionCheckbox.clear();
this.updateTable();
});
}
});
}
}
}
<div class="columnhost" fxLayout="column">
<div fxLayout="row">
<button mat-raised-button (click)="downloadResponsesCSV()" [disabled]="!tableselectionCheckbox.hasValue()"
matTooltip="Download markierte Gruppen als CSV für Excel" matTooltipPosition="above">
<mat-icon>cloud_download</mat-icon>Antworten
</button>
<button mat-raised-button (click)="downloadLogsCSV()" [disabled]="!tableselectionCheckbox.hasValue()"
matTooltip="Download markierte Gruppen als CSV für Excel" matTooltipPosition="above">
<mat-icon>cloud_download</mat-icon>Logs
</button>
<button mat-raised-button (click)="downloadReviewsCSV()" [disabled]="!tableselectionCheckbox.hasValue()"
matTooltip="Download markierte Gruppen als CSV für Excel" matTooltipPosition="above">
<mat-icon>cloud_download</mat-icon>Kommentare
</button>
<button mat-raised-button (click)="deleteData()" [disabled]="!tableselectionCheckbox.hasValue() || (wds.wsRole !== 'RW')"
matTooltip="Löschen Ergebnisdaten aus der Datenbank für markierte Gruppen" matTooltipPosition="above">
<mat-icon>delete</mat-icon>
</button>
</div>
<mat-table [dataSource]="resultDataSource" matSort>
<ng-container matColumnDef="selectCheckbox">
<mat-header-cell *matHeaderCellDef fxFlex="70px">
<mat-checkbox (change)="$event ? masterToggle() : null"
[checked]="tableselectionCheckbox.hasValue() && isAllSelected()"
[indeterminate]="tableselectionCheckbox.hasValue() && !isAllSelected()">
</mat-checkbox>
</mat-header-cell>
<mat-cell *matCellDef="let row" fxFlex="70px">
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? tableselectionCheckbox.toggle(row) : null"
[checked]="tableselectionCheckbox.isSelected(row)">
</mat-checkbox>
</mat-cell>
</ng-container>
<ng-container matColumnDef="groupname">
<mat-header-cell *matHeaderCellDef mat-sort-header fxFlex="300px">Login-Gruppe</mat-header-cell>
<mat-cell *matCellDef="let element" fxFlex="300px">{{element.groupname}}</mat-cell>
</ng-container>
<ng-container matColumnDef="bookletsStarted">
<mat-header-cell *matHeaderCellDef mat-sort-header fxLayoutAlign="center center">Testhefte gestartet</mat-header-cell>
<mat-cell *matCellDef="let element" fxLayoutAlign="center center"> {{element.bookletsStarted}} </mat-cell>
</ng-container>
<ng-container matColumnDef="num_units_min">
<mat-header-cell *matHeaderCellDef mat-sort-header fxLayoutAlign="center center">Aufgaben min</mat-header-cell>
<mat-cell *matCellDef="let element" fxLayoutAlign="center center">{{element.num_units_min}} </mat-cell>
</ng-container>
<ng-container matColumnDef="num_units_max">
<mat-header-cell *matHeaderCellDef mat-sort-header fxLayoutAlign="center center">Aufgaben max</mat-header-cell>
<mat-cell *matCellDef="let element" fxLayoutAlign="center center">{{element.num_units_max}} </mat-cell>
</ng-container>
<ng-container matColumnDef="num_units_mean">
<mat-header-cell *matHeaderCellDef mat-sort-header fxLayoutAlign="center center">Aufgaben Mittelwert</mat-header-cell>
<mat-cell *matCellDef="let element" fxLayoutAlign="center center">{{element.num_units_mean | number:'1.1-1'}} </mat-cell>
</ng-container>
<ng-container matColumnDef="lastchange">
<mat-header-cell *matHeaderCellDef mat-sort-header fxLayoutAlign="center center">Letzte Änderung</mat-header-cell>
<mat-cell *matCellDef="let element" fxLayoutAlign="center center">{{element.lastchange | date:'dd.MM.yyyy HH:mm'}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</div>
/* .columnhost {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
justify-content: left;
} */
/* .mat-icon {
margin-right: 5px;
} */
.mat-raised-button {
min-width: 100px;
margin: 2px;
}
Legend
Html element with directive