Lobo_Corp/playground-frontend
1
0
Fork 0
Code Pull Requests Actions Packages Projects Releases Activity

Refactor pathfinding/sorting UI and update i18n

Browse Source 
Replace plain container with Angular Material mat-card in pathfinding view and reorganize UI: add mat-card header/content, algorithm explanation block, control buttons, node-type toggle group, grid-size inputs, legend and results display (path length & execution time). Import and wire MatCard modules in the pathfinding component. Move .algo-info styling from the component SCSS into global styles.scss and remove it from the component stylesheet. Update sorting template to use new SORTING translation keys and add an UrlConstants reference in the sorting component TS for external links. Add/adjust i18n keys in en.json and de.json for sorting and grid labels to match the updated templates.
This commit is contained in:
Lobo
2026-02-04 12:17:54 +01:00
parent 450ab0b837
commit a10f62f2dd
8 changed files with 160 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
src/app/pages/algorithms/pathfinding/pathfinding.component.html
View File

@@ -1,87 +1,89 @@
<div class="container"> <mat-card class="container">
<h1>{{ 'PATHFINDING.TITLE' | translate }}</h1> <mat-card-header>
<mat-card-title>{{ 'PATHFINDING.TITLE' | translate }}</mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="algo-info">
<h3>{{ 'PATHFINDING.EXPLANATION.TITLE' | translate }}</h3>
<div class="algo-info"> <p>
<h3>{{ 'PATHFINDING.EXPLANATION.TITLE' | translate }}</h3> <strong>Dijkstra</strong> {{ 'PATHFINDING.EXPLANATION.DIJKSTRA_EXPLANATION' | translate }}
<a href="{{UrlConstants.DIJKSTRA_WIKI}}" target="_blank" rel="noopener noreferrer">Wikipedia</a>
</p>
<p> <p>
<strong>Dijkstra</strong> {{ 'PATHFINDING.EXPLANATION.DIJKSTRA_EXPLANATION' | translate }} <strong>A*</strong> {{ 'PATHFINDING.EXPLANATION.ASTAR_EXPLANATION' | translate}}
<a href="{{UrlConstants.DIJKSTRA_WIKI}}" target="_blank" rel="noopener noreferrer">Wikipedia</a> <a href="{{UrlConstants.ASTAR_WIKI}}" target="_blank" rel="noopener noreferrer">Wikipedia</a>
</p> </p>
<p> <p>
<strong>A*</strong> {{ 'PATHFINDING.EXPLANATION.ASTAR_EXPLANATION' | translate}} <strong>{{ 'PATHFINDING.EXPLANATION.NOTE' | translate}}</strong> {{ 'PATHFINDING.EXPLANATION.DISCLAIMER' | translate}}
<a href="{{UrlConstants.ASTAR_WIKI}}" target="_blank" rel="noopener noreferrer">Wikipedia</a> </p>
</p>
<p>
<strong>{{ 'PATHFINDING.EXPLANATION.NOTE' | translate}}</strong> {{ 'PATHFINDING.EXPLANATION.DISCLAIMER' | translate}}
</p>
</div>
<div class="controls-container">
<div class="controls">
<button matButton="filled" (click)="visualizeDijkstra()">{{ 'PATHFINDING.DIJKSTRA' | translate }}</button>
<button matButton="filled" (click)="visualizeAStar()">{{ 'PATHFINDING.ASTAR' | translate }}</button>
</div>
<div class="controls">
<button matButton="filled" (click)="normalCase()">{{ 'PATHFINDING.NORMAL_CASE' | translate }}</button>
<button matButton="filled" (click)="edgeCase()">{{ 'PATHFINDING.EDGE_CASE' | translate }}</button>
<button matButton="filled" (click)="clearBoard()">{{ 'PATHFINDING.CLEAR_BOARD' | translate }}</button>
</div> </div>
<div class="controls"> <div class="controls-container">
<mat-button-toggle-group [(ngModel)]="selectedNodeType" aria-label="Node Type Selection"> <div class="controls">
<mat-button-toggle [value]="NodeType.Start">{{ 'PATHFINDING.START_NODE' | translate }}</mat-button-toggle> <button matButton="filled" (click)="visualizeDijkstra()">{{ 'PATHFINDING.DIJKSTRA' | translate }}</button>
<mat-button-toggle [value]="NodeType.End">{{ 'PATHFINDING.END_NODE' | translate }}</mat-button-toggle> <button matButton="filled" (click)="visualizeAStar()">{{ 'PATHFINDING.ASTAR' | translate }}</button>
<mat-button-toggle [value]="NodeType.Wall">{{ 'PATHFINDING.WALL' | translate }}</mat-button-toggle> </div>
<mat-button-toggle [value]="NodeType.None">{{ 'PATHFINDING.CLEAR_NODE' | translate }}</mat-button-toggle> <div class="controls">
</mat-button-toggle-group> <button matButton="filled" (click)="normalCase()">{{ 'PATHFINDING.NORMAL_CASE' | translate }}</button>
</div> <button matButton="filled" (click)="edgeCase()">{{ 'PATHFINDING.EDGE_CASE' | translate }}</button>
<button matButton="filled" (click)="clearBoard()">{{ 'PATHFINDING.CLEAR_BOARD' | translate }}</button>
</div>
<div class="controls"> <div class="controls">
<div class="grid-size"> <mat-button-toggle-group [(ngModel)]="selectedNodeType" aria-label="Node Type Selection">
<mat-form-field appearance="outline" class="grid-field"> <mat-button-toggle [value]="NodeType.Start">{{ 'PATHFINDING.START_NODE' | translate }}</mat-button-toggle>
<mat-label>{{ 'ALGORITHM.PATHFINDING.GRID_HEIGHT' | translate }}</mat-label> <mat-button-toggle [value]="NodeType.End">{{ 'PATHFINDING.END_NODE' | translate }}</mat-button-toggle>
<input <mat-button-toggle [value]="NodeType.Wall">{{ 'PATHFINDING.WALL' | translate }}</mat-button-toggle>
matInput <mat-button-toggle [value]="NodeType.None">{{ 'PATHFINDING.CLEAR_NODE' | translate }}</mat-button-toggle>
type="number" </mat-button-toggle-group>
[min]="MIN_GRID_SIZE" </div>
[max]="MAX_GRID_SIZE"
[(ngModel)]="gridRows"
(blur)="applyGridSize()"
(keyup.enter)="applyGridSize()"
/>
</mat-form-field>
<mat-form-field appearance="outline" class="grid-field"> <div class="controls">
<mat-label>{{ 'ALGORITHM.PATHFINDING.GRID_WIDTH' | translate }}</mat-label> <div class="grid-size">
<input <mat-form-field appearance="outline" class="grid-field">
matInput <mat-label>{{ 'PATHFINDING.GRID_HEIGHT' | translate }}</mat-label>
type="number" <input
[min]="MIN_GRID_SIZE" matInput
[max]="MAX_GRID_SIZE" type="number"
[(ngModel)]="gridCols" [min]="MIN_GRID_SIZE"
(blur)="applyGridSize()" [max]="MAX_GRID_SIZE"
(keyup.enter)="applyGridSize()" [(ngModel)]="gridRows"
/> (blur)="applyGridSize()"
</mat-form-field> (keyup.enter)="applyGridSize()"
/>
</mat-form-field>
<mat-form-field appearance="outline" class="grid-field">
<mat-label>{{ 'PATHFINDING.GRID_WIDTH' | translate }}</mat-label>
<input
matInput
type="number"
[min]="MIN_GRID_SIZE"
[max]="MAX_GRID_SIZE"
[(ngModel)]="gridCols"
(blur)="applyGridSize()"
(keyup.enter)="applyGridSize()"
/>
</mat-form-field>
</div>
</div>
<div class="legend">
<span><span class="legend-color start"></span> {{ 'PATHFINDING.START_NODE' | translate }}</span>
<span><span class="legend-color end"></span> {{ 'PATHFINDING.END_NODE' | translate }}</span>
<span><span class="legend-color wall"></span> {{ 'PATHFINDING.WALL' | translate }}</span>
<span><span class="legend-color visited"></span> {{ 'PATHFINDING.VISITED' | translate }}</span>
<span><span class="legend-color path"></span> {{ 'PATHFINDING.PATH' | translate }}</span>
</div> </div>
</div> </div>
<div class="legend"> <div class="results-container">
<span><span class="legend-color start"></span> {{ 'PATHFINDING.START_NODE' | translate }}</span> <p>{{ 'PATHFINDING.PATH_LENGTH' | translate }}: {{ pathLength }}</p>
<span><span class="legend-color end"></span> {{ 'PATHFINDING.END_NODE' | translate }}</span> <p>{{ 'PATHFINDING.EXECUTION_TIME' | translate }}: {{ executionTime | number:'1.2-2' }} ms</p>
<span><span class="legend-color wall"></span> {{ 'PATHFINDING.WALL' | translate }}</span>
<span><span class="legend-color visited"></span> {{ 'PATHFINDING.VISITED' | translate }}</span>
<span><span class="legend-color path"></span> {{ 'PATHFINDING.PATH' | translate }}</span>
</div> </div>
</div>
<div class="results-container"> <canvas #gridCanvas></canvas>
<p>{{ 'PATHFINDING.PATH_LENGTH' | translate }}: {{ pathLength }}</p> </mat-card-content>
<p>{{ 'PATHFINDING.EXECUTION_TIME' | translate }}: {{ executionTime | number:'1.2-2' }} ms</p>
</div>
<canvas #gridCanvas></canvas>
</div>

19
src/app/pages/algorithms/pathfinding/pathfinding.component.scss
View File

@@ -2,25 +2,6 @@
padding: 2rem; padding: 2rem;
} }
.algo-info {
margin: 0 0 1rem 0;
padding: 0.75rem 1rem;
border: 1px solid #ddd;
border-radius: 8px;
h3 {
margin: 0 0 0.5rem 0;
}
p {
margin: 0.5rem 0;
}
a {
margin-left: 0.25rem;
}
}
.controls-container { .controls-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

7
src/app/pages/algorithms/pathfinding/pathfinding.component.ts
View File

@@ -12,6 +12,7 @@ import {TranslateModule, TranslateService} from '@ngx-translate/core';
import {DEFAULT_GRID_COLS, DEFAULT_GRID_ROWS, MAX_GRID_PX, MAX_GRID_SIZE, MIN_GRID_SIZE, Node} from './pathfinding.models'; import {DEFAULT_GRID_COLS, DEFAULT_GRID_ROWS, MAX_GRID_PX, MAX_GRID_SIZE, MIN_GRID_SIZE, Node} from './pathfinding.models';
import {PathfindingService} from './service/pathfinding.service'; import {PathfindingService} from './service/pathfinding.service';
import {UrlConstants} from '../../../constants/UrlConstants'; import {UrlConstants} from '../../../constants/UrlConstants';
import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from '@angular/material/card';
enum NodeType { enum NodeType {
Start = 'start', Start = 'start',
@@ -32,7 +33,11 @@ interface GridPos { row: number; col: number }
MatButtonToggleModule, MatButtonToggleModule,
MatFormFieldModule, MatFormFieldModule,
MatInputModule, MatInputModule,
TranslateModule TranslateModule,
MatCard,
MatCardHeader,
MatCardTitle,
MatCardContent
], ],
templateUrl: './pathfinding.component.html', templateUrl: './pathfinding.component.html',
styleUrls: ['./pathfinding.component.scss'] styleUrls: ['./pathfinding.component.scss']

31
src/app/pages/algorithms/sorting/sorting.component.html
View File

@@ -1,12 +1,29 @@
<div class="sorting-container"> <div class="sorting-container">
<mat-card class="sorting-card"> <mat-card class="sorting-card">
<mat-card-header> <mat-card-header>
<mat-card-title>{{ 'ALGORITHM.SORTING.TITLE' | translate }}</mat-card-title> <mat-card-title>{{ 'SORTING.TITLE' | translate }}</mat-card-title>
</mat-card-header> </mat-card-header>
<mat-card-content> <mat-card-content>
<div class="algo-info">
<h3>{{ 'SORTING.EXPLANATION.TITLE' | translate }}</h3>
<p>
<strong>Dijkstra</strong> {{ 'SORTING.EXPLANATION.DIJKSTRA_EXPLANATION' | translate }}
<a href="{{UrlConstants.DIJKSTRA_WIKI}}" target="_blank" rel="noopener noreferrer">Wikipedia</a>
</p>
<p>
<strong>A*</strong> {{ 'SORTING.EXPLANATION.ASTAR_EXPLANATION' | translate}}
<a href="{{UrlConstants.ASTAR_WIKI}}" target="_blank" rel="noopener noreferrer">Wikipedia</a>
</p>
<p>
<strong>{{ 'SORTING.EXPLANATION.NOTE' | translate}}</strong> {{ 'SORTING.EXPLANATION.DISCLAIMER' | translate}}
</p>
</div>
<div class="controls-panel"> <div class="controls-panel">
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<mat-label>{{ 'ALGORITHM.SORTING.ALGORITHM' | translate }}</mat-label> <mat-label>{{ 'SORTING.ALGORITHM' | translate }}</mat-label>
<mat-select [(ngModel)]="selectedAlgorithm"> <mat-select [(ngModel)]="selectedAlgorithm">
@for (algo of availableAlgorithms; track algo.value) { @for (algo of availableAlgorithms; track algo.value) {
<mat-option [value]="algo.value">{{ algo.name }}</mat-option> <mat-option [value]="algo.value">{{ algo.name }}</mat-option>
@@ -15,7 +32,7 @@
</mat-form-field> </mat-form-field>
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">
<mat-label>{{ 'ALGORITHM.SORTING.ARRAY_SIZE' | translate }}</mat-label> <mat-label>{{ 'SORTING.ARRAY_SIZE' | translate }}</mat-label>
<input <input
matInput matInput
type="number" type="number"
@@ -29,18 +46,18 @@
</div> </div>
<div class="controls-panel"> <div class="controls-panel">
<button mat-raised-button color="primary" (click)="startSorting()"> <button mat-raised-button color="primary" (click)="startSorting()">
<mat-icon>play_arrow</mat-icon> {{ 'ALGORITHM.SORTING.START' | translate }} <mat-icon>play_arrow</mat-icon> {{ 'SORTING.START' | translate }}
</button> </button>
<button mat-raised-button color="warn" (click)="resetSorting()"> <button mat-raised-button color="warn" (click)="resetSorting()">
<mat-icon>refresh</mat-icon> {{ 'ALGORITHM.SORTING.RESET' | translate }} <mat-icon>refresh</mat-icon> {{ 'SORTING.RESET' | translate }}
</button> </button>
<button mat-raised-button (click)="generateNewArray()"> <button mat-raised-button (click)="generateNewArray()">
<mat-icon>add_box</mat-icon> {{ 'ALGORITHM.SORTING.GENERATE_NEW_ARRAY' | translate }} <mat-icon>add_box</mat-icon> {{ 'SORTING.GENERATE_NEW_ARRAY' | translate }}
</button> </button>
</div> </div>
<div class="info-panel"> <div class="info-panel">
<p>{{ 'ALGORITHM.SORTING.EXECUTION_TIME' | translate }}: {{ executionTime }} ms</p> <p>{{ 'SORTING.EXECUTION_TIME' | translate }}: {{ executionTime }} ms</p>
</div> </div>
<div class="visualization-area"> <div class="visualization-area">
@for (item of sortArray; track $index) { @for (item of sortArray; track $index) {

3
src/app/pages/algorithms/sorting/sorting.component.ts
View File

@@ -10,6 +10,7 @@ import { SortingService } from './service/sorting.service';
import {SortData, SortSnapshot} from './sorting.models'; import {SortData, SortSnapshot} from './sorting.models';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import {MatInput} from '@angular/material/input'; import {MatInput} from '@angular/material/input';
import {UrlConstants} from '../../../constants/UrlConstants';
@Component({ @Component({
selector: 'app-sorting', selector: 'app-sorting',
standalone: true, standalone: true,
@@ -137,4 +138,6 @@ export class SortingComponent implements OnInit {
this.stopAnimations(); this.stopAnimations();
this.resetSortState(); this.resetSortState();
} }
protected readonly UrlConstants = UrlConstants;
} }

28
src/assets/i18n/de.json
View File

@@ -317,25 +317,29 @@
}, },
"ALERT": { "ALERT": {
"START_END_NODES": "Bitte wählen Sie einen Start- und Endknoten aus, bevor Sie den Algorithmus starten." "START_END_NODES": "Bitte wählen Sie einen Start- und Endknoten aus, bevor Sie den Algorithmus starten."
} },
"GRID_HEIGHT": "Höhe",
"GRID_WIDTH": "Beite"
},
"SORTING": {
"TITLE": "Sortieralgorithmen",
"ALGORITHM": "Algorithmen",
"START": "Sortierung starten",
"RESET": "Zurücksetzen",
"GENERATE_NEW_ARRAY": "Neues Array generieren",
"EXECUTION_TIME": "Ausführungszeit",
"ARRAY_SIZE": "Anzahl der Balken"
}, },
"ALGORITHM": { "ALGORITHM": {
"TITLE": "Algorithmen", "TITLE": "Algorithmen",
"PATHFINDING": { "PATHFINDING": {
"TITLE": "Wegfindung", "TITLE": "Wegfindung",
"DESCRIPTION": "Vergleich von Dijkstra vs. A*.", "DESCRIPTION": "Vergleich von Dijkstra vs. A*."
"GRID_HEIGHT": "Höhe",
"GRID_WIDTH": "Beite"
}, },
"SORTING": { "SORTING": {
"TITLE": "Sortieralgorithmen", "TITLE": "Sortierung",
"DESCRIPTION": "Visualisierung verschiedener Sortieralgorithmen.", "DESCRIPTION": "Visualisierung verschiedener Sortieralgorithmen."
"ALGORITHM": "Algorithmus",
"START": "Sortierung starten",
"RESET": "Zurücksetzen",
"GENERATE_NEW_ARRAY": "Neues Array generieren",
"EXECUTION_TIME": "Ausführungszeit",
"ARRAY_SIZE": "Anzahl der Balken"
} }
} }
} }

25
src/assets/i18n/en.json
View File

@@ -317,25 +317,28 @@
}, },
"ALERT": { "ALERT": {
"START_END_NODES": "Please select a start and end node before running the algorithm." "START_END_NODES": "Please select a start and end node before running the algorithm."
} },
"GRID_HEIGHT": "Height",
"GRID_WIDTH": "Width"
},
"SORTING": {
"TITLE": "Sorting Algorithms",
"ALGORITHM": "Algorithm",
"START": "Start Sorting",
"RESET": "Reset",
"GENERATE_NEW_ARRAY": "Generate New Array",
"EXECUTION_TIME": "Execution Time",
"ARRAY_SIZE": "Number of Bars"
}, },
"ALGORITHM": { "ALGORITHM": {
"TITLE": "Algorithms", "TITLE": "Algorithms",
"PATHFINDING": { "PATHFINDING": {
"TITLE": "Pathfinding", "TITLE": "Pathfinding",
"DESCRIPTION": "Comparing of Dijkstra vs. A*.", "DESCRIPTION": "Comparing of Dijkstra vs. A*."
"GRID_HEIGHT": "Height",
"GRID_WIDTH": "Width"
}, },
"SORTING": { "SORTING": {
"TITLE": "Sorting Algorithms", "TITLE": "Sorting",
"DESCRIPTION": "Visualizing various sorting algorithms.", "DESCRIPTION": "Visualizing various sorting algorithms.",
"ALGORITHM": "Algorithm",
"START": "Start Sorting",
"RESET": "Reset",
"GENERATE_NEW_ARRAY": "Generate New Array",
"EXECUTION_TIME": "Execution Time",
"ARRAY_SIZE": "Number of Bars"
} }
} }
} }

20
src/styles.scss
View File

@@ -211,3 +211,23 @@ a {
height: 18px; height: 18px;
width: 18px; width: 18px;
} }
// algos
.algo-info {
margin: 0 0 1rem 0;
padding: 0.75rem 1rem;
border: 1px solid #ddd;
border-radius: 8px;
h3 {
margin: 0 0 0.5rem 0;
}
p {
margin: 0.5rem 0;
}
a {
margin-left: 0.25rem;
}
}