Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/quality report UI #20

Merged
merged 4 commits into from
Oct 11, 2023
Merged

Feature/quality report UI #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
dbe5318
add new qb functionality
thkoehler11 Oct 10, 2023
a6646ce
Add TEILER_ORCHESTRATOR_URL
djuarezgf Oct 10, 2023
9d957cc
Bugfix: BackendUrl as quality report url
djuarezgf Oct 10, 2023
5612b16
fix qb messages
thkoehler11 Oct 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docker/env.template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
"TEILER_ADMIN_PHONE": "${TEILER_ADMIN_PHONE}",
"TEILER_PROJECT": "${TEILER_PROJECT}",
"EXPORTER_API_KEY": "${EXPORTER_API_KEY}",
"TEILER_ORCHESTRATOR_URL": "${TEILER_ORCHESTRATOR_URL}",
"TEILER_DASHBOARD_HTTP_RELATIVE_PATH": "${TEILER_DASHBOARD_HTTP_RELATIVE_PATH}",
"TEILER_ORCHESTRATOR_HTTP_RELATIVE_PATH": "${TEILER_ORCHESTRATOR_HTTP_RELATIVE_PATH}"
};
Expand Down
95 changes: 86 additions & 9 deletions src/app/embedded/quality-report/quality-report.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,25 +20,55 @@ h2{
}
button{
color: white;
font-size: 14px;
font-size: 16px;
border-radius: 10px;
padding: 0.5% 1%;
background-color: #002772;
padding: 1.5%;
background-color: white!important;
}
.button{
margin-top:1.5%;
.generate-div {
margin-top: 1.5%;
margin-bottom: 2%;
text-align: left;
font-size: 14px;
width: 100%;

}
progress{
.log-div {
margin-top: 20px;
display:flex;
}
.button-status {
display: flex;
}
.status {
margin: 1.4% 0 0 3%;
}
.log-exporter, .log-reporter {
border: 1px solid #333333;
width: 49%;
padding: 1% 2%;
background-color: white;
height: 300px;
display: none;
}
.log-exporter {
margin-left: 2%;
}
.log-header {
font-weight: bold;
margin-bottom: 10px;
}
.log-reports {
height: 250px;
max-height: 300px;
overflow: auto;
}
progress {
background-color: blue;
}

.search{
font-size: 16px;
margin-top: 0.5%;
margin-top: 1.5%;
margin-left: 80%;
display: flex;
}
Expand All @@ -65,10 +95,57 @@ table{
font-size: 115%;
text-align: center;
}
.upload-button, .download-button, .generate-button, .cancel-button, .download-button {
display: none;
}
.download-button-div {
width: 10%;
margin-top: 15px;
}
.visible {
display: block;
}
.visible-button {
display: flex;
}
.file-input {
display: none;
}
.generate-button, .cancel-button, .download-button {
width: 200px;
height: 55px;
padding: 5px;
}
.download-button {
margin-left: 2%;
}
.file-upload {
text-transform: none !important;
width: 200px;
height: 55px;
font-size: 13px;
color: black;
display: flex;
padding: 5px;
}
.file-upload-text {
margin: 8px 5px;
}
.file-name {
color: black;
margin: 5px;
height: 20px;
}
.template_dropdown {
margin: 0 2%;
width: 20%;
}
mat-paginator{
opacity: 0.75;
}

.template-select {
margin-top: 5px;
}
@media(max-width : 1400px){
.search{
font-size: 16px;
Expand Down
75 changes: 50 additions & 25 deletions src/app/embedded/quality-report/quality-report.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,49 +1,74 @@
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>-->
<div class="main">
<div class="title">
<h2 i18n>Qualit&auml;tsbericht</h2>
</div>
<div class="button">
<button mat-stroked-button (click)=toggleDisplayDivIf() i18n>Generieren</button>
<div *ngIf="!isShowDivIf">
<p><br><span i18n>Startzeit</span>: {{todayWithPipe}}<br><span i18n>Verstrichene Laufzeit</span>: 0 min<br><span i18n>Restlaufzeit</span>: 0 min<br><br>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
<div class="generate-div">
<div class="button-status">
<mat-form-field class="template_dropdown">
<mat-label>Template</mat-label>
<select class="template-select" matNativeControl required [(ngModel)]="selectedTemplate" [disabled]="buttonDisabled">
<option *ngFor="let id of templateIDs" [value]="id.value">{{id.display}}</option>
</select>
</mat-form-field>
<button class="cancel-button" mat-raised-button color="primary" (click)=cancelQB() [ngClass]="{ 'visible-button': buttonDisabled }" i18n>abbrechen</button>
<button class="generate-button" mat-raised-button color="primary" (click)=generateQB() [ngClass]="{ 'visible-button': (selectedTemplate !== 'custom' && !buttonDisabled) }" i18n>neuen QB generieren</button>
<div class="upload-button" [ngClass]="{ 'visible': selectedTemplate === 'custom' }">
<input type="file" class="file-input" (change)="doImportFromFile($event)" #fileUpload />
<button class="file-upload" mat-raised-button color="primary" (click)="fileUpload.click()" [disabled]="buttonDisabled">
<span i18n>Template auswählen und neuen QB generieren</span>
</button>
</div>
<button class="download-button" mat-raised-button color="primary" (click)=downloadTemplate() [ngClass]="{ 'visible-button': selectedTemplate !== 'custom' }" i18n>Template herunterladen</button>

<div class="status">
<ng-container *ngIf="qbStatus === QBStatus.EMPTY"><span class="status-empty"></span></ng-container>
<ng-container *ngIf="qbStatus === QBStatus.RUNNING"><span class="status-running" i18n>QB wird erstellt ...</span></ng-container>
<ng-container *ngIf="qbStatus === QBStatus.OK"><span class="status-ok" i18n>QB wurde erfolgreich erstellt.</span></ng-container>
<ng-container *ngIf="qbStatus === QBStatus.NOT_FOUND"><span class="status-not-found" i18n>QB wurde nicht gefunden.</span></ng-container>
<ng-container *ngIf="qbStatus === QBStatus.ERROR"><span class="status-not-found" i18n>Ein Fehler ist aufgetreten.</span></ng-container>
</div>
</div>
<div class="log-div">
<div class="log-reporter" [ngClass]="{ 'visible': buttonDisabled }">
<div class="log-header">Reporter Log:</div>
<div id="reportDiv" class="log-reports"><div *ngFor="let log of reportLog[0]?.lastLines">{{log}}</div></div>
</div>
<div class="log-exporter" [ngClass]="{ 'visible': buttonDisabled }">
<div class="log-header">Exporter Log:</div>
<div id="exportDiv" class="log-reports"><div *ngFor="let log of reportLog[1]?.lastLines">{{log}}</div></div>
</div>
<p><br>-requesting local data management statistics<br>-requesting local data management results</p>
<button mat-stroked-button (click)=toggleDisplayDivIf() i18n>Abbrechen</button>
</div>

</div>
<div class="search">
<span i18n>Suche</span>:
<label class="matinput">
<input matInput>
</label>
</div>

<div class="tablex">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

<ng-container matColumnDef="zeitstempel">
<ng-container matColumnDef="timestamp">
<th mat-header-cell *matHeaderCellDef><div i18n>Zeitstempel</div> </th>
<td mat-cell *matCellDef="let element"> {{element.zeitstempel}} </td>
<td mat-cell *matCellDef="let element"> {{element.timestamp | date: 'medium'}} </td>
</ng-container>

<ng-container matColumnDef="templateid">
<th mat-header-cell *matHeaderCellDef><div i18n>Template-ID</div> </th>
<td mat-cell *matCellDef="let element"> {{element['template-id']}} </td>
</ng-container>

<ng-container matColumnDef="version">
<th mat-header-cell *matHeaderCellDef i18n>Version</th>
<td mat-cell *matCellDef="let element" > {{element.version}} </td>
<ng-container matColumnDef="link">
<th mat-header-cell *matHeaderCellDef i18n>Link</th>
<td mat-cell *matCellDef="let element" > <a target="_blank" href = "{{reportUrl + 'report?report-id=' + element.id}}"> Download </a></td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
<div class="paginator">
<mat-paginator
#paginator
[pageSizeOptions]="[5,10,25,100]"
showFirstLastButtons
></mat-paginator>
<mat-paginator
#paginator
[pageSizeOptions]="[5,10,25,100]"
showFirstLastButtons
></mat-paginator>
</div>
</div>
Loading
Loading