diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 8e69cac..3e4cf6e 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -1,20 +1,19 @@ import { Routes } from '@angular/router'; -import {AboutComponent} from './pages/about/about.component'; import {RouterConstants} from './constants/RouterConstants'; export const routes: Routes = [ - { path: '', component: AboutComponent }, - { path: RouterConstants.ABOUT.PATH, component: RouterConstants.ABOUT.COMPONENT}, - { path: RouterConstants.PROJECTS.PATH, component: RouterConstants.PROJECTS.COMPONENT}, - { path: RouterConstants.ALGORITHMS.PATH, component: RouterConstants.ALGORITHMS.COMPONENT}, - { path: RouterConstants.PATHFINDING.PATH, component: RouterConstants.PATHFINDING.COMPONENT}, - { path: RouterConstants.SORTING.PATH, component: RouterConstants.SORTING.COMPONENT}, - { path: RouterConstants.IMPRINT.PATH, component: RouterConstants.IMPRINT.COMPONENT}, - { path: RouterConstants.GOL.PATH, component: RouterConstants.GOL.COMPONENT}, - { path: RouterConstants.LABYRINTH.PATH, component: RouterConstants.LABYRINTH.COMPONENT}, - { path: RouterConstants.FRACTAL.PATH, component: RouterConstants.FRACTAL.COMPONENT}, - { path: RouterConstants.FRACTAL3d.PATH, component: RouterConstants.FRACTAL3d.COMPONENT}, - { path: RouterConstants.PENDULUM.PATH, component: RouterConstants.PENDULUM.COMPONENT}, - { path: RouterConstants.CLOTH.PATH, component: RouterConstants.CLOTH.COMPONENT} + { path: '', loadComponent: () => import('./pages/about/about.component').then(m => m.AboutComponent) }, + { path: RouterConstants.ABOUT.PATH, loadComponent: () => import('./pages/about/about.component').then(m => m.AboutComponent) }, + { path: RouterConstants.PROJECTS.PATH, loadComponent: () => import('./pages/projects/projects.component').then(m => m.ProjectsComponent) }, + { path: RouterConstants.ALGORITHMS.PATH, loadComponent: () => import('./pages/algorithms/algorithms.component').then(m => m.AlgorithmsComponent) }, + { path: RouterConstants.PATHFINDING.PATH, loadComponent: () => import('./pages/algorithms/pathfinding/pathfinding.component').then(m => m.PathfindingComponent) }, + { path: RouterConstants.SORTING.PATH, loadComponent: () => import('./pages/algorithms/sorting/sorting.component').then(m => m.SortingComponent) }, + { path: RouterConstants.IMPRINT.PATH, loadComponent: () => import('./pages/imprint/imprint.component').then(m => m.ImprintComponent) }, + { path: RouterConstants.GOL.PATH, loadComponent: () => import('./pages/algorithms/conway-gol/conway-gol.component').then(m => m.ConwayGolComponent) }, + { path: RouterConstants.LABYRINTH.PATH, loadComponent: () => import('./pages/algorithms/pathfinding/labyrinth/labyrinth.component').then(m => m.LabyrinthComponent) }, + { path: RouterConstants.FRACTAL.PATH, loadComponent: () => import('./pages/algorithms/fractal/fractal.component').then(m => m.FractalComponent) }, + { path: RouterConstants.FRACTAL3d.PATH, loadComponent: () => import('./pages/algorithms/fractal3d/fractal3d.component').then(m => m.Fractal3dComponent) }, + { path: RouterConstants.PENDULUM.PATH, loadComponent: () => import('./pages/algorithms/pendulum/pendulum.component').then(m => m.default) }, + { path: RouterConstants.CLOTH.PATH, loadComponent: () => import('./pages/algorithms/cloth/cloth.component').then(m => m.ClothComponent) }, ]; diff --git a/src/app/constants/RouterConstants.ts b/src/app/constants/RouterConstants.ts index 1ab61ea..1341558 100644 --- a/src/app/constants/RouterConstants.ts +++ b/src/app/constants/RouterConstants.ts @@ -1,88 +1,63 @@ -import {AboutComponent} from '../pages/about/about.component'; -import {ProjectsComponent} from '../pages/projects/projects.component'; -import {ImprintComponent} from '../pages/imprint/imprint.component'; -import {AlgorithmsComponent} from '../pages/algorithms/algorithms.component'; -import {PathfindingComponent} from '../pages/algorithms/pathfinding/pathfinding.component'; -import {SortingComponent} from '../pages/algorithms/sorting/sorting.component'; -import {ConwayGolComponent} from '../pages/algorithms/conway-gol/conway-gol.component'; -import {LabyrinthComponent} from '../pages/algorithms/pathfinding/labyrinth/labyrinth.component'; -import {FractalComponent} from '../pages/algorithms/fractal/fractal.component'; -import {Fractal3dComponent} from '../pages/algorithms/fractal3d/fractal3d.component'; -import PendulumComponent from '../pages/algorithms/pendulum/pendulum.component'; -import {ClothComponent} from '../pages/algorithms/cloth/cloth.component'; - -export class RouterConstants { +export class RouterConstants { static readonly ABOUT = { PATH: 'about', LINK: '/about', - COMPONENT: AboutComponent }; static readonly PROJECTS = { PATH: 'projects', LINK: '/projects', - COMPONENT: ProjectsComponent }; static readonly ALGORITHMS = { PATH: 'algorithms', LINK: '/algorithms', - COMPONENT: AlgorithmsComponent }; static readonly PATHFINDING = { PATH: 'algorithms/pathfinding', LINK: '/algorithms/pathfinding', - COMPONENT: PathfindingComponent }; static readonly SORTING = { PATH: 'algorithms/sorting', LINK: '/algorithms/sorting', - COMPONENT: SortingComponent }; static readonly GOL = { PATH: 'algorithms/gol', LINK: '/algorithms/gol', - COMPONENT: ConwayGolComponent }; static readonly LABYRINTH = { PATH: 'algorithms/labyrinth', LINK: '/algorithms/labyrinth', - COMPONENT: LabyrinthComponent }; static readonly FRACTAL = { PATH: 'algorithms/fractal', LINK: '/algorithms/fractal', - COMPONENT: FractalComponent }; static readonly FRACTAL3d = { PATH: 'algorithms/fractal3d', LINK: '/algorithms/fractal3d', - COMPONENT: Fractal3dComponent }; static readonly PENDULUM = { PATH: 'algorithms/pendulum', LINK: '/algorithms/pendulum', - COMPONENT: PendulumComponent }; static readonly CLOTH = { PATH: 'algorithms/cloth', LINK: '/algorithms/cloth', - COMPONENT: ClothComponent }; static readonly IMPRINT = { PATH: 'imprint', LINK: '/imprint', - COMPONENT: ImprintComponent }; } diff --git a/src/app/layout/app/app.component.ts b/src/app/layout/app/app.component.ts index 28073f5..eeb36e2 100644 --- a/src/app/layout/app/app.component.ts +++ b/src/app/layout/app/app.component.ts @@ -7,7 +7,6 @@ import {ParticleBackgroundComponent} from '../../shared/components/particles-bac @Component({ selector: 'app-root', - standalone: true, imports: [RouterOutlet, TopbarComponent, TranslatePipe, ParticleBackgroundComponent], templateUrl: './app.component.html', styleUrl: './app.component.scss' diff --git a/src/app/layout/imageDialog/image.component.ts b/src/app/layout/imageDialog/image.component.ts index 6b09aff..c35d5d0 100644 --- a/src/app/layout/imageDialog/image.component.ts +++ b/src/app/layout/imageDialog/image.component.ts @@ -4,7 +4,6 @@ import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; @Component({ - standalone: true, imports: [MatDialogModule, MatButtonModule, MatIconModule], template: `
diff --git a/src/app/layout/topbar/topbar.component.ts b/src/app/layout/topbar/topbar.component.ts index aeecd22..014738d 100644 --- a/src/app/layout/topbar/topbar.component.ts +++ b/src/app/layout/topbar/topbar.component.ts @@ -14,7 +14,6 @@ import {RouterConstants} from '../../constants/RouterConstants'; @Component({ selector: 'app-topbar', - standalone: true, imports: [ RouterLink, MatToolbarModule, MatIconModule, MatButtonModule, MatMenuModule, MatTooltipModule, diff --git a/src/app/pages/about/about.component.ts b/src/app/pages/about/about.component.ts index 62a52f8..aff811f 100644 --- a/src/app/pages/about/about.component.ts +++ b/src/app/pages/about/about.component.ts @@ -14,7 +14,6 @@ import {SharedFunctions} from '../../shared/SharedFunctions'; @Component({ selector: 'app-about', - standalone: true, imports: [ NgOptimizedImage, MatCardModule, diff --git a/src/app/pages/algorithms/algorithms.component.html b/src/app/pages/algorithms/algorithms.component.html index 0e2ab8a..2e2efcb 100644 --- a/src/app/pages/algorithms/algorithms.component.html +++ b/src/app/pages/algorithms/algorithms.component.html @@ -2,7 +2,7 @@

{{ 'ALGORITHM.TITLE' |translate }}

-@for (category of categories$ | async; track category.id) { +@for (category of categories; track category.id) { {{ category.title | translate }} diff --git a/src/app/pages/algorithms/algorithms.component.ts b/src/app/pages/algorithms/algorithms.component.ts index 722dd97..3dc2ee2 100644 --- a/src/app/pages/algorithms/algorithms.component.ts +++ b/src/app/pages/algorithms/algorithms.component.ts @@ -1,8 +1,6 @@ -import { Component, OnInit, inject } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { AlgorithmsService } from './algorithms.service'; import { AlgorithmCategory } from './algorithm-category'; -import { Observable } from 'rxjs'; -import { CommonModule } from '@angular/common'; import { RouterLink } from '@angular/router'; import { MatCardModule } from '@angular/material/card'; import {TranslatePipe} from '@ngx-translate/core'; @@ -10,16 +8,11 @@ import {TranslatePipe} from '@ngx-translate/core'; @Component({ selector: 'app-algorithms', templateUrl: './algorithms.component.html', - styleUrls: ['./algorithms.component.scss'], - standalone: true, - imports: [CommonModule, RouterLink, MatCardModule, TranslatePipe], + styleUrl: './algorithms.component.scss', + imports: [RouterLink, MatCardModule, TranslatePipe], }) -export class AlgorithmsComponent implements OnInit { +export class AlgorithmsComponent { private readonly algorithmsService = inject(AlgorithmsService); - categories$: Observable | undefined; - - ngOnInit(): void { - this.categories$ = this.algorithmsService.getCategories(); - } + readonly categories: AlgorithmCategory[] = this.algorithmsService.getCategories(); } diff --git a/src/app/pages/algorithms/algorithms.service.ts b/src/app/pages/algorithms/algorithms.service.ts index 0db4f56..83b8cdb 100644 --- a/src/app/pages/algorithms/algorithms.service.ts +++ b/src/app/pages/algorithms/algorithms.service.ts @@ -1,6 +1,5 @@ import { Injectable } from '@angular/core'; import { AlgorithmCategory } from './algorithm-category'; -import { Observable, of } from 'rxjs'; import {RouterConstants} from '../../constants/RouterConstants'; @Injectable({ @@ -59,7 +58,7 @@ export class AlgorithmsService { } ]; - getCategories(): Observable { - return of(this.categories); + getCategories(): AlgorithmCategory[] { + return this.categories; } } diff --git a/src/app/pages/algorithms/pathfinding/pathfinding.component.ts b/src/app/pages/algorithms/pathfinding/pathfinding.component.ts index 4e224d3..86e21b6 100644 --- a/src/app/pages/algorithms/pathfinding/pathfinding.component.ts +++ b/src/app/pages/algorithms/pathfinding/pathfinding.component.ts @@ -6,6 +6,7 @@ import {MatButtonModule} from '@angular/material/button'; import {MatButtonToggleModule} from '@angular/material/button-toggle'; import {MatFormFieldModule} from '@angular/material/form-field'; import {MatInputModule} from '@angular/material/input'; +import {MatSnackBar} from '@angular/material/snack-bar'; import {TranslateModule, TranslateService} from '@ngx-translate/core'; @@ -27,7 +28,6 @@ enum NodeType { @Component({ selector: 'app-pathfinding', - standalone: true, imports: [ CommonModule, FormsModule, @@ -48,6 +48,7 @@ enum NodeType { export class PathfindingComponent implements AfterViewInit { private readonly pathfindingService = inject(PathfindingService); private readonly translate = inject(TranslateService); + private readonly snackBar = inject(MatSnackBar); readonly NodeType = NodeType; readonly MIN_GRID_SIZE = MIN_GRID_SIZE; @@ -483,7 +484,8 @@ export class PathfindingComponent implements AfterViewInit { return true; } - alert(this.translate.instant('PATHFINDING.ALERT.START_END_NODES')); + const message = this.translate.instant('PATHFINDING.ALERT.START_END_NODES'); + this.snackBar.open(message, 'OK', { duration: 5000, horizontalPosition: 'center', verticalPosition: 'top' }); return false; } diff --git a/src/app/pages/algorithms/sorting/sorting.component.ts b/src/app/pages/algorithms/sorting/sorting.component.ts index 440f2d9..f38aec7 100644 --- a/src/app/pages/algorithms/sorting/sorting.component.ts +++ b/src/app/pages/algorithms/sorting/sorting.component.ts @@ -15,10 +15,9 @@ import {AlgorithmInformation} from '../information/information.models'; import {Information} from '../information/information'; @Component({ selector: 'app-sorting', - standalone: true, imports: [CommonModule, MatCardModule, MatFormFieldModule, MatSelectModule, MatButtonModule, MatIconModule, TranslateModule, FormsModule, MatInput, Information], templateUrl: './sorting.component.html', - styleUrls: ['./sorting.component.scss'] + styleUrl: './sorting.component.scss' }) export class SortingComponent implements OnInit { diff --git a/src/app/pages/projects/dialog/project-dialog.component.ts b/src/app/pages/projects/dialog/project-dialog.component.ts index dcc95d0..8b80957 100644 --- a/src/app/pages/projects/dialog/project-dialog.component.ts +++ b/src/app/pages/projects/dialog/project-dialog.component.ts @@ -15,8 +15,7 @@ import {MatButton} from '@angular/material/button'; @Component({ selector: 'app-project-dialog', templateUrl: './project-dialog.component.html', - styleUrls: ['./project-dialog.component.scss'], - standalone: true, + styleUrl: './project-dialog.component.scss', imports: [ MatDialogTitle, MatDialogContent, diff --git a/src/app/pages/projects/projects.component.ts b/src/app/pages/projects/projects.component.ts index 9ccde65..64d1bba 100644 --- a/src/app/pages/projects/projects.component.ts +++ b/src/app/pages/projects/projects.component.ts @@ -34,7 +34,6 @@ export interface Projects { @Component({ selector: 'app-projects', - standalone: true, imports: [ MatCardModule, MatChipsModule, diff --git a/src/app/service/language.service.ts b/src/app/service/language.service.ts index 31c8490..0c5bd25 100644 --- a/src/app/service/language.service.ts +++ b/src/app/service/language.service.ts @@ -10,10 +10,9 @@ export class LanguageService { readonly lang = signal(this.getInitial()); constructor() { - this.translate.addLangs(['de', 'en']); - this.translate.setFallbackLang('en'); - this.lang.set(this.getInitial()); - this.use(this.lang()); + // translate service lang and fallback are already configured via provideTranslateService in app.config + // just ensure the stored preference is active on startup + this.translate.use(this.lang()); } use(l: Lang) { diff --git a/src/app/service/reload.service.ts b/src/app/service/reload.service.ts deleted file mode 100644 index ff66db5..0000000 --- a/src/app/service/reload.service.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { Injectable, NgZone, signal } from '@angular/core'; -import {LocalStoreConstants} from '../constants/LocalStoreConstants'; - - -@Injectable({ providedIn: 'root' }) -export class ReloadService { - private readonly _reloadTick = signal(0); - readonly reloadTick = this._reloadTick.asReadonly(); - - private readonly _languageChangedTick = signal(0); - readonly languageChangedTick = this._languageChangedTick.asReadonly(); - - - - - private informListeners(e: StorageEvent, zone: NgZone) { - if (e.key === LocalStoreConstants.LANGUAGE_KEY) { - zone.run(() => this._languageChangedTick.update(v => v + 1)); - } - } - - bumpLanguageChanged(): void { - this._reloadTick.update(v => v + 1); - localStorage.setItem(LocalStoreConstants.RELOAD_ALL_LANG_LISTENER_KEY, String(Date.now())); - } -} diff --git a/src/app/shared/components/generic-grid/generic-grid.ts b/src/app/shared/components/generic-grid/generic-grid.ts index 26791a9..77c3c86 100644 --- a/src/app/shared/components/generic-grid/generic-grid.ts +++ b/src/app/shared/components/generic-grid/generic-grid.ts @@ -5,7 +5,6 @@ export interface GridPos { row: number; col: number } @Component({ selector: 'app-generic-grid', - standalone: true, imports: [CommonModule], templateUrl: './generic-grid.html', styleUrl: './generic-grid.scss', @@ -36,7 +35,7 @@ export class GenericGridComponent implements AfterViewInit { grid: any[][] = []; isDrawing = false; - private lastCell: GridPos | null = null; + protected lastCell: GridPos | null = null; ngAfterViewInit(): void { this.ctx = this.getContextOrThrow();