From a10f62f2dd532e25edbcd75fcf1c30af7653099e Mon Sep 17 00:00:00 2001 From: Lobo Date: Wed, 4 Feb 2026 12:17:54 +0100 Subject: [PATCH] Refactor pathfinding/sorting UI and update i18n 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. --- .../pathfinding/pathfinding.component.html | 152 +++++++++--------- .../pathfinding/pathfinding.component.scss | 19 --- .../pathfinding/pathfinding.component.ts | 7 +- .../algorithms/sorting/sorting.component.html | 31 +++- .../algorithms/sorting/sorting.component.ts | 3 + src/assets/i18n/de.json | 28 ++-- src/assets/i18n/en.json | 25 +-- src/styles.scss | 20 +++ 8 files changed, 160 insertions(+), 125 deletions(-) diff --git a/src/app/pages/algorithms/pathfinding/pathfinding.component.html b/src/app/pages/algorithms/pathfinding/pathfinding.component.html index d457fc3..931dcf3 100644 --- a/src/app/pages/algorithms/pathfinding/pathfinding.component.html +++ b/src/app/pages/algorithms/pathfinding/pathfinding.component.html @@ -1,87 +1,89 @@ -
-

{{ 'PATHFINDING.TITLE' | translate }}

+ + + {{ 'PATHFINDING.TITLE' | translate }} + + +
+

{{ 'PATHFINDING.EXPLANATION.TITLE' | translate }}

-
-

{{ 'PATHFINDING.EXPLANATION.TITLE' | translate }}

+

+ Dijkstra {{ 'PATHFINDING.EXPLANATION.DIJKSTRA_EXPLANATION' | translate }} + Wikipedia +

-

- Dijkstra {{ 'PATHFINDING.EXPLANATION.DIJKSTRA_EXPLANATION' | translate }} - Wikipedia -

+

+ A* {{ 'PATHFINDING.EXPLANATION.ASTAR_EXPLANATION' | translate}} + Wikipedia +

-

- A* {{ 'PATHFINDING.EXPLANATION.ASTAR_EXPLANATION' | translate}} - Wikipedia -

- -

- {{ 'PATHFINDING.EXPLANATION.NOTE' | translate}} {{ 'PATHFINDING.EXPLANATION.DISCLAIMER' | translate}} -

-
- -
-
- - -
-
- - - +

+ {{ 'PATHFINDING.EXPLANATION.NOTE' | translate}} {{ 'PATHFINDING.EXPLANATION.DISCLAIMER' | translate}} +

-
- - {{ 'PATHFINDING.START_NODE' | translate }} - {{ 'PATHFINDING.END_NODE' | translate }} - {{ 'PATHFINDING.WALL' | translate }} - {{ 'PATHFINDING.CLEAR_NODE' | translate }} - -
+
+
+ + +
+
+ + + +
-
-
- - {{ 'ALGORITHM.PATHFINDING.GRID_HEIGHT' | translate }} - - +
+ + {{ 'PATHFINDING.START_NODE' | translate }} + {{ 'PATHFINDING.END_NODE' | translate }} + {{ 'PATHFINDING.WALL' | translate }} + {{ 'PATHFINDING.CLEAR_NODE' | translate }} + +
- - {{ 'ALGORITHM.PATHFINDING.GRID_WIDTH' | translate }} - - +
+
+ + {{ 'PATHFINDING.GRID_HEIGHT' | translate }} + + + + + {{ 'PATHFINDING.GRID_WIDTH' | translate }} + + +
+
+ +
+ {{ 'PATHFINDING.START_NODE' | translate }} + {{ 'PATHFINDING.END_NODE' | translate }} + {{ 'PATHFINDING.WALL' | translate }} + {{ 'PATHFINDING.VISITED' | translate }} + {{ 'PATHFINDING.PATH' | translate }}
-
- {{ 'PATHFINDING.START_NODE' | translate }} - {{ 'PATHFINDING.END_NODE' | translate }} - {{ 'PATHFINDING.WALL' | translate }} - {{ 'PATHFINDING.VISITED' | translate }} - {{ 'PATHFINDING.PATH' | translate }} +
+

{{ 'PATHFINDING.PATH_LENGTH' | translate }}: {{ pathLength }}

+

{{ 'PATHFINDING.EXECUTION_TIME' | translate }}: {{ executionTime | number:'1.2-2' }} ms

-
-
-

{{ 'PATHFINDING.PATH_LENGTH' | translate }}: {{ pathLength }}

-

{{ 'PATHFINDING.EXECUTION_TIME' | translate }}: {{ executionTime | number:'1.2-2' }} ms

-
- - -
+ + diff --git a/src/app/pages/algorithms/pathfinding/pathfinding.component.scss b/src/app/pages/algorithms/pathfinding/pathfinding.component.scss index 070efd4..3e30d18 100644 --- a/src/app/pages/algorithms/pathfinding/pathfinding.component.scss +++ b/src/app/pages/algorithms/pathfinding/pathfinding.component.scss @@ -2,25 +2,6 @@ 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 { display: flex; flex-direction: column; diff --git a/src/app/pages/algorithms/pathfinding/pathfinding.component.ts b/src/app/pages/algorithms/pathfinding/pathfinding.component.ts index a50c270..c6ed385 100644 --- a/src/app/pages/algorithms/pathfinding/pathfinding.component.ts +++ b/src/app/pages/algorithms/pathfinding/pathfinding.component.ts @@ -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 {PathfindingService} from './service/pathfinding.service'; import {UrlConstants} from '../../../constants/UrlConstants'; +import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from '@angular/material/card'; enum NodeType { Start = 'start', @@ -32,7 +33,11 @@ interface GridPos { row: number; col: number } MatButtonToggleModule, MatFormFieldModule, MatInputModule, - TranslateModule + TranslateModule, + MatCard, + MatCardHeader, + MatCardTitle, + MatCardContent ], templateUrl: './pathfinding.component.html', styleUrls: ['./pathfinding.component.scss'] diff --git a/src/app/pages/algorithms/sorting/sorting.component.html b/src/app/pages/algorithms/sorting/sorting.component.html index e9dc6d0..e6db2a1 100644 --- a/src/app/pages/algorithms/sorting/sorting.component.html +++ b/src/app/pages/algorithms/sorting/sorting.component.html @@ -1,12 +1,29 @@
- {{ 'ALGORITHM.SORTING.TITLE' | translate }} + {{ 'SORTING.TITLE' | translate }} +
+

{{ 'SORTING.EXPLANATION.TITLE' | translate }}

+ +

+ Dijkstra {{ 'SORTING.EXPLANATION.DIJKSTRA_EXPLANATION' | translate }} + Wikipedia +

+ +

+ A* {{ 'SORTING.EXPLANATION.ASTAR_EXPLANATION' | translate}} + Wikipedia +

+ +

+ {{ 'SORTING.EXPLANATION.NOTE' | translate}} {{ 'SORTING.EXPLANATION.DISCLAIMER' | translate}} +

+
- {{ 'ALGORITHM.SORTING.ALGORITHM' | translate }} + {{ 'SORTING.ALGORITHM' | translate }} @for (algo of availableAlgorithms; track algo.value) { {{ algo.name }} @@ -15,7 +32,7 @@ - {{ 'ALGORITHM.SORTING.ARRAY_SIZE' | translate }} + {{ 'SORTING.ARRAY_SIZE' | translate }}
-

{{ 'ALGORITHM.SORTING.EXECUTION_TIME' | translate }}: {{ executionTime }} ms

+

{{ 'SORTING.EXECUTION_TIME' | translate }}: {{ executionTime }} ms

@for (item of sortArray; track $index) { diff --git a/src/app/pages/algorithms/sorting/sorting.component.ts b/src/app/pages/algorithms/sorting/sorting.component.ts index a247b31..8cbca5d 100644 --- a/src/app/pages/algorithms/sorting/sorting.component.ts +++ b/src/app/pages/algorithms/sorting/sorting.component.ts @@ -10,6 +10,7 @@ import { SortingService } from './service/sorting.service'; import {SortData, SortSnapshot} from './sorting.models'; import { FormsModule } from '@angular/forms'; import {MatInput} from '@angular/material/input'; +import {UrlConstants} from '../../../constants/UrlConstants'; @Component({ selector: 'app-sorting', standalone: true, @@ -137,4 +138,6 @@ export class SortingComponent implements OnInit { this.stopAnimations(); this.resetSortState(); } + + protected readonly UrlConstants = UrlConstants; } diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json index 428a3e2..09fc1a3 100644 --- a/src/assets/i18n/de.json +++ b/src/assets/i18n/de.json @@ -317,25 +317,29 @@ }, "ALERT": { "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": { "TITLE": "Algorithmen", "PATHFINDING": { "TITLE": "Wegfindung", - "DESCRIPTION": "Vergleich von Dijkstra vs. A*.", - "GRID_HEIGHT": "Höhe", - "GRID_WIDTH": "Beite" + "DESCRIPTION": "Vergleich von Dijkstra vs. A*." }, "SORTING": { - "TITLE": "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" + "TITLE": "Sortierung", + "DESCRIPTION": "Visualisierung verschiedener Sortieralgorithmen." + } } } diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index daaa808..1a95e00 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -317,25 +317,28 @@ }, "ALERT": { "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": { "TITLE": "Algorithms", "PATHFINDING": { "TITLE": "Pathfinding", - "DESCRIPTION": "Comparing of Dijkstra vs. A*.", - "GRID_HEIGHT": "Height", - "GRID_WIDTH": "Width" + "DESCRIPTION": "Comparing of Dijkstra vs. A*." }, "SORTING": { - "TITLE": "Sorting Algorithms", + "TITLE": "Sorting", "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" } } } diff --git a/src/styles.scss b/src/styles.scss index dc63ed5..3a12a96 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -211,3 +211,23 @@ a { height: 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; + } +}