File
Methods
|
Public
navigateToOverview
|
navigateToOverview()
|
|
|
|
|
import { Component, Inject } from '@angular/core';
import { MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialog as MatDialog, MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
import { Router } from '@angular/router';
import { ResultTreeDialog } from 'src/app/dialogs/result-tree/result-tree.dialog';
import { AssignmentCheckResponse } from 'src/app/model/api/assignment-check-response';
import { ModelCheckerResponse } from 'src/app/model/api/model-checker-response';
import { ModelCheckerTrace } from 'src/app/model/api/model-checker-trace';
@Component({
selector: 'apollo-assignment-solution',
templateUrl: './assignment-solution.dialog.html',
styleUrls: ['./assignment-solution.dialog.scss'],
})
export class AssignmentSolutionDialog {
public constructor(
private readonly dialog: MatDialog,
private readonly dialogRef: MatDialogRef<AssignmentSolutionDialog>,
@Inject(MAT_DIALOG_DATA) public readonly result: AssignmentCheckResponse,
private readonly router: Router,
) {}
public showResultTreeDialog(trace: ModelCheckerTrace) {
const result: ModelCheckerResponse = {
rootTrace: trace,
feedback: 'relevant',
};
this.dialog.open(ResultTreeDialog, {
data: result,
});
}
public navigateToOverview() {
this.dialogRef.close();
this.router.navigateByUrl('/assignments');
}
}
<mat-card-title style="display: flex; align-items: center">
<mat-icon style="margin-right: 0.5rem" [color]="result.correct ? 'primary' : 'warn'"> {{result.correct ? 'done' : 'close'}} </mat-icon>
{{ (result.correct ? 'assignments.solution.correct' : 'assignments.solution.not-correct') | translate }}
</mat-card-title>
<mat-card-content *ngIf="result.firstTrace" class="trace-section">
{{ 'assignments.solution.condition-not-met' | translate:{ condition: 'A ⊧ φ'} }}
<button mat-raised-button color="primary" (click)="showResultTreeDialog(result.firstTrace)">{{ 'actions.show-reason' | translate }}</button>
</mat-card-content>
<mat-card-content *ngIf="result.secondTrace" class="trace-section">
{{ 'assignments.solution.condition-not-met' | translate:{ condition: 'B ⊭ φ'} }}
<button mat-raised-button color="primary" (click)="showResultTreeDialog(result.secondTrace)">{{ 'actions.show-reason' | translate }}</button>
</mat-card-content>
<div *ngIf="result.correct" style="display: flex; justify-content: flex-end">
<button mat-raised-button color="primary" (click)="navigateToOverview()">{{ 'actions.back-to-overview' | translate }}</button>
</div>
.trace-section {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 1rem;
margin-bottom: 0;
> button {
margin-top: 0.5rem;
}
}
@media screen and (min-width: 801px) {
.trace-section {
flex-direction: row;
justify-content: space-between;
> button {
margin-left: 1rem;
margin-top: 0;
}
}
}
Legend
Html element with directive