sebastian/ConceptCreator
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

Filter SimpleTransition by StateLabel
All checks were successful
E2E Testing / test (push) Successful in 1m36s
Details

Browse Source
This commit is contained in:
Sebastian Böckelmann 2024-02-16 19:51:16 +01:00
parent 02d9fcbbba
commit 41452f0b9d
5 changed files with 172 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/editor/gamesystem-editor/simple-gamesystem-editor/simple-gamesystem-editor.component.html
View File

@ -1,2 +1,4 @@
<app-simple-state-editor [states]="simpleGamesystem!.states" [gamesystem]="simpleGamesystem"></app-simple-state-editor> <app-simple-state-editor [states]="simpleGamesystem!.states" [gamesystem]="simpleGamesystem"></app-simple-state-editor>
<app-simple-transition-editor class="transition-editor" [gamesystem]="simpleGamesystem"></app-simple-transition-editor> <div id="transition-editor">
<app-simple-transition-editor [gamesystem]="simpleGamesystem"></app-simple-transition-editor>
</div>

5
src/app/editor/gamesystem-editor/simple-gamesystem-editor/simple-gamesystem-editor.component.scss
View File

@ -1,3 +1,4 @@
.transition-editor { #transition-editor {
margin-top: 15px; margin-top: 20px !important;
} }

141
src/app/editor/gamesystem-editor/state-editor/simple-state-editor/simple-state-editor.component.html
View File

@ -1,77 +1,82 @@
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" multiTemplateDataRows> <mat-card>
<ng-container matColumnDef="name"> <mat-card-content>
<th mat-header-cell *matHeaderCellDef>Label</th> <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" multiTemplateDataRows>
<td mat-cell *matCellDef="let state"> <ng-container matColumnDef="name">
<span *ngIf="editedElement !== state"> {{state.stateLabel}}</span> <th mat-header-cell *matHeaderCellDef>Label</th>
<mat-form-field appearance="fill" class="long-form" *ngIf="editedElement === state"> <td mat-cell *matCellDef="let state">
<input matInput [(ngModel)]="state.stateLabel" (ngModelChange)="onStateChange()"> <span *ngIf="editedElement !== state"> {{state.stateLabel}}</span>
<mat-hint class="mat-error" *ngIf="editedStateLabelError"><mat-icon class="warning-icon">warning</mat-icon>Missing State-Label Information</mat-hint> <mat-form-field appearance="fill" class="long-form" *ngIf="editedElement === state">
</mat-form-field> <input matInput [(ngModel)]="state.stateLabel" (ngModelChange)="onStateChange()">
</td> <mat-hint class="mat-error" *ngIf="editedStateLabelError"><mat-icon class="warning-icon">warning</mat-icon>Missing State-Label Information</mat-hint>
</ng-container> </mat-form-field>
</td>
</ng-container>
<!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns --> <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
<ng-container matColumnDef="expandedDetail"> <ng-container matColumnDef="expandedDetail">
<td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length"> <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
<div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'"> <div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
<p *ngIf="editedElement !== element">{{element.stateDescription}}</p> <p *ngIf="editedElement !== element">{{element.stateDescription}}</p>
<mat-form-field appearance="fill" class="long-form" *ngIf="element === editedElement"> <mat-form-field appearance="fill" class="long-form" *ngIf="element === editedElement">
<mat-label>Description</mat-label> <mat-label>Description</mat-label>
<textarea matInput [(ngModel)]="element.stateDescription" rows="3" (ngModelChange)="onStateChange()"></textarea> <textarea matInput [(ngModel)]="element.stateDescription" rows="3" (ngModelChange)="onStateChange()"></textarea>
</mat-form-field> </mat-form-field>
</div> </div>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="initial"> <ng-container matColumnDef="initial">
<th mat-header-cell *matHeaderCellDef>Initial</th> <th mat-header-cell *matHeaderCellDef>Initial</th>
<td mat-cell *matCellDef="let state"> <td mat-cell *matCellDef="let state">
<div *ngIf="editedElement !== state"> <div *ngIf="editedElement !== state">
<mat-icon *ngIf="state.initial">done</mat-icon> <mat-icon *ngIf="state.initial">done</mat-icon>
<mat-icon *ngIf="!state.initial">close</mat-icon> <mat-icon *ngIf="!state.initial">close</mat-icon>
</div> </div>
<mat-checkbox *ngIf="editedElement === state" [(ngModel)]="state.initial" (ngModelChange)="onStateChange()"></mat-checkbox> <mat-checkbox *ngIf="editedElement === state" [(ngModel)]="state.initial" (ngModelChange)="onStateChange()"></mat-checkbox>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="edit"> <ng-container matColumnDef="edit">
<th mat-header-cell *matHeaderCellDef></th> <th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let state"> <td mat-cell *matCellDef="let state">
<button mat-icon-button color="primary" *ngIf="editedElement !== state" (click)="editState(state)" [disabled]="editedElement !== null"><mat-icon>edit</mat-icon></button> <button mat-icon-button color="primary" *ngIf="editedElement !== state" (click)="editState(state)" [disabled]="editedElement !== null"><mat-icon>edit</mat-icon></button>
<button mat-icon-button color="primary" (click)="finishEditing()" *ngIf="editedElement === state"><mat-icon>done</mat-icon></button> <button mat-icon-button color="primary" (click)="finishEditing()" *ngIf="editedElement === state"><mat-icon>done</mat-icon></button>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="delete"> <ng-container matColumnDef="delete">
<th mat-header-cell *matHeaderCellDef></th> <th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let state"> <td mat-cell *matCellDef="let state">
<button mat-icon-button color="warn" (click)="deleteState(state)"><mat-icon>delete</mat-icon></button> <button mat-icon-button color="warn" (click)="deleteState(state)"><mat-icon>delete</mat-icon></button>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="expand"> <ng-container matColumnDef="expand">
<th mat-header-cell *matHeaderCellDef aria-label="row actions"> <th mat-header-cell *matHeaderCellDef aria-label="row actions">
<button mat-icon-button (click)="addState()"><mat-icon>add</mat-icon></button> <button mat-icon-button (click)="addState()"><mat-icon>add</mat-icon></button>
</th> </th>
<td mat-cell *matCellDef="let element"> <td mat-cell *matCellDef="let element">
<button mat-icon-button aria-label="expand row" (click)="(expandedElement = expandedElement === element ? null : element); $event.stopPropagation()"> <button mat-icon-button aria-label="expand row" (click)="(expandedElement = expandedElement === element ? null : element); $event.stopPropagation()">
@if (expandedElement === element) { @if (expandedElement === element) {
<mat-icon>keyboard_arrow_up</mat-icon> <mat-icon>keyboard_arrow_up</mat-icon>
} @else { } @else {
<mat-icon>keyboard_arrow_down</mat-icon> <mat-icon>keyboard_arrow_down</mat-icon>
} }
</button> </button>
</td> </td>
</ng-container> </ng-container>
<tr mat-header-row *matHeaderRowDef="columnsToDisplayWithExpand"></tr> <tr mat-header-row *matHeaderRowDef="columnsToDisplayWithExpand"></tr>
<tr mat-row *matRowDef="let element; columns: columnsToDisplayWithExpand;" <tr mat-row *matRowDef="let element; columns: columnsToDisplayWithExpand;"
class="example-element-row" class="example-element-row"
[class.example-expanded-row]="expandedElement === element" [class.example-expanded-row]="expandedElement === element"
(click)="expandedElement = expandedElement === element ? null : element"> (click)="expandedElement = expandedElement === element ? null : element">
</tr> </tr>
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr> <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table> </table>
</mat-card-content>
</mat-card>

156
src/app/editor/gamesystem-editor/transition-editor/simple-transition-editor/simple-transition-editor.component.html
View File

@ -1,81 +1,91 @@
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" multiTemplateDataRows> <mat-card>
<ng-container matColumnDef="starting-state"> <mat-card-content>
<th mat-header-cell *matHeaderCellDef>Starting State</th> <mat-form-field class="long-form">
<td mat-cell *matCellDef="let transition"> <mat-label>Filter</mat-label>
<span *ngIf="editedTransition !== transition">{{transition.startingState.stateLabel}}</span> <input matInput (keyup)="applyFilter($event)" placeholder="Filter" #input>
<mat-form-field appearance="fill" class="long-form" *ngIf="editedTransition == transition"> </mat-form-field>
<mat-select [(ngModel)]="editedTransition!.startingState" (ngModelChange)="validateEditedTransition()">
<mat-option *ngFor="let state of gamesystem!.states" [value]="state" <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" multiTemplateDataRows>
<ng-container matColumnDef="starting-state">
<th mat-header-cell *matHeaderCellDef>Starting State</th>
<td mat-cell *matCellDef="let transition">
<span *ngIf="editedTransition !== transition">{{transition.startingState.stateLabel}}</span>
<mat-form-field appearance="fill" class="long-form" *ngIf="editedTransition == transition">
<mat-select [(ngModel)]="editedTransition!.startingState" (ngModelChange)="validateEditedTransition()">
<mat-option *ngFor="let state of gamesystem!.states" [value]="state"
(onSelectionChange)="validateEditedTransition()">{{state.stateLabel}}</mat-option> (onSelectionChange)="validateEditedTransition()">{{state.stateLabel}}</mat-option>
</mat-select> </mat-select>
<mat-hint class="mat-error" *ngIf="transitionError"><mat-icon class="warning-icon">warning</mat-icon> Starting and Ending State cannot be the same!</mat-hint> <mat-hint class="mat-error" *ngIf="transitionError"><mat-icon class="warning-icon">warning</mat-icon> Starting and Ending State cannot be the same!</mat-hint>
<mat-hint class="mat-error" *ngIf="!transitionError && transitionStartingStateError"><mat-icon class="warning-icon">warning</mat-icon> Select a valid Starting State!</mat-hint> <mat-hint class="mat-error" *ngIf="!transitionError && transitionStartingStateError"><mat-icon class="warning-icon">warning</mat-icon> Select a valid Starting State!</mat-hint>
</mat-form-field> </mat-form-field>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="ending-state"> <ng-container matColumnDef="ending-state">
<th mat-header-cell *matHeaderCellDef>Ending State</th> <th mat-header-cell *matHeaderCellDef>Ending State</th>
<td mat-cell *matCellDef="let transition"> <td mat-cell *matCellDef="let transition">
<span *ngIf="editedTransition !== transition">{{transition.endingState.stateLabel}}</span> <span *ngIf="editedTransition !== transition">{{transition.endingState.stateLabel}}</span>
<mat-form-field appearance="fill" class="long-form" *ngIf="editedTransition == transition"> <mat-form-field appearance="fill" class="long-form" *ngIf="editedTransition == transition">
<mat-select [(ngModel)]="editedTransition!.endingState" (ngModelChange)="validateEditedTransition()"> <mat-select [(ngModel)]="editedTransition!.endingState" (ngModelChange)="validateEditedTransition()">
<mat-option *ngFor="let state of gamesystem!.states" [value]="state" <mat-option *ngFor="let state of gamesystem!.states" [value]="state"
(onSelectionChange)="validateEditedTransition()">{{state.stateLabel}}</mat-option> (onSelectionChange)="validateEditedTransition()">{{state.stateLabel}}</mat-option>
</mat-select> </mat-select>
<mat-hint class="mat-error" *ngIf="transitionError"><mat-icon class="warning-icon">warning</mat-icon> Starting and Ending State cannot be the same!</mat-hint> <mat-hint class="mat-error" *ngIf="transitionError"><mat-icon class="warning-icon">warning</mat-icon> Starting and Ending State cannot be the same!</mat-hint>
<mat-hint class="mat-error" *ngIf="!transitionError && transitionEndingStateError"> <mat-icon class="warning-icon">warning</mat-icon> Select a valid Ending State!</mat-hint> <mat-hint class="mat-error" *ngIf="!transitionError && transitionEndingStateError"> <mat-icon class="warning-icon">warning</mat-icon> Select a valid Ending State!</mat-hint>
</mat-form-field> </mat-form-field>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="expandedDetail"> <ng-container matColumnDef="expandedDetail">
<td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length"> <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
<div class="example-element-detail" <div class="example-element-detail"
[@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'"> [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
<p>Expanded Detail</p> <p>Expanded Detail</p>
</div> </div>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="edit"> <ng-container matColumnDef="edit">
<th mat-header-cell *matHeaderCellDef></th> <th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let transition"> <td mat-cell *matCellDef="let transition">
<button mat-icon-button color="primary" *ngIf="editedTransition !== transition" [disabled]="editedTransition != undefined"><mat-icon>edit</mat-icon></button> <button mat-icon-button color="primary" *ngIf="editedTransition !== transition" [disabled]="editedTransition != undefined"><mat-icon>edit</mat-icon></button>
<button mat-icon-button color="primary" *ngIf="editedTransition === transition" <button mat-icon-button color="primary" *ngIf="editedTransition === transition"
[disabled]="transitionError || transitionStartingStateError || transitionEndingStateError" (click)="finishEditing()" [disabled]="transitionError || transitionStartingStateError || transitionEndingStateError" (click)="finishEditing()"
><mat-icon>done</mat-icon></button> ><mat-icon>done</mat-icon></button>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="delete"> <ng-container matColumnDef="delete">
<th mat-header-cell *matHeaderCellDef></th> <th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let transition"> <td mat-cell *matCellDef="let transition">
<button mat-icon-button color="warn" (click)="deleteTransition(transition)"><mat-icon>delete</mat-icon></button> <button mat-icon-button color="warn" (click)="deleteTransition(transition)"><mat-icon>delete</mat-icon></button>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="expand"> <ng-container matColumnDef="expand">
<th mat-header-cell *matHeaderCellDef aria-label="row actions"> <th mat-header-cell *matHeaderCellDef aria-label="row actions">
<button mat-icon-button (click)="addTransition()" [disabled]="editedTransition != undefined"><mat-icon>add</mat-icon></button> <button mat-icon-button (click)="addTransition()" [disabled]="editedTransition != undefined"><mat-icon>add</mat-icon></button>
</th> </th>
<td mat-cell *matCellDef="let element"> <td mat-cell *matCellDef="let element">
<button mat-icon-button aria-label="expand row" (click)="(expandedElement = expandedElement === element ? null : element); $event.stopPropagation()"> <button mat-icon-button aria-label="expand row" (click)="(expandedElement = expandedElement === element ? null : element); $event.stopPropagation()">
@if (expandedElement === element) { @if (expandedElement === element) {
<mat-icon>keyboard_arrow_up</mat-icon> <mat-icon>keyboard_arrow_up</mat-icon>
} @else { } @else {
<mat-icon>keyboard_arrow_down</mat-icon> <mat-icon>keyboard_arrow_down</mat-icon>
} }
</button> </button>
</td> </td>
</ng-container> </ng-container>
<tr mat-header-row *matHeaderRowDef="columnsToDisplayWithExpand"></tr> <tr mat-header-row *matHeaderRowDef="columnsToDisplayWithExpand"></tr>
<tr mat-row *matRowDef="let element; columns: columnsToDisplayWithExpand;" <tr mat-row *matRowDef="let element; columns: columnsToDisplayWithExpand;"
class="example-element-row" class="example-element-row"
[class.example-expanded-row]="expandedElement === element" [class.example-expanded-row]="expandedElement === element"
(click)="expandedElement = expandedElement === element ? null : element"> (click)="expandedElement = expandedElement === element ? null : element">
</tr> </tr>
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr> <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table> </table>
</mat-card-content>
</mat-card>

10
src/app/editor/gamesystem-editor/transition-editor/simple-transition-editor/simple-transition-editor.component.ts
View File

@ -13,6 +13,8 @@ import {
import {SimpleTransition} from "../../../../game-model/gamesystems/SimpleTransition"; import {SimpleTransition} from "../../../../game-model/gamesystems/SimpleTransition";
import {animate, state, style, transition, trigger} from "@angular/animations"; import {animate, state, style, transition, trigger} from "@angular/animations";
import {SimpleState} from "../../../../game-model/gamesystems/SimpleState"; import {SimpleState} from "../../../../game-model/gamesystems/SimpleState";
import {ProductTransition} from "../../../../game-model/gamesystems/ProductTransition";
import {LeafGamesystemCalculator} from "../../product-gamesystem-editor/LeafGamesystemCalculator";
@Component({ @Component({
selector: 'app-simple-transition-editor', selector: 'app-simple-transition-editor',
@ -44,6 +46,9 @@ export class SimpleTransitionEditorComponent implements OnInit {
transitionEndingStateError = true; transitionEndingStateError = true;
ngOnInit() { ngOnInit() {
this.dataSource.data = this.gamesystem!.transitions; this.dataSource.data = this.gamesystem!.transitions;
this.dataSource.filterPredicate = (data: SimpleTransition, filter: string) => {
return [data.startingState, data.endingState].some((state) => state.stateLabel.toLowerCase().includes(filter))
}
} }
addTransition() { addTransition() {
@ -83,4 +88,9 @@ export class SimpleTransitionEditorComponent implements OnInit {
this.dataSource.data = this.gamesystem!.transitions; this.dataSource.data = this.gamesystem!.transitions;
} }
} }
applyFilter(event: KeyboardEvent) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
}
} }