Lobo
5c97667ec1
Switch route definitions to lazy-load components via loadComponent dynamic imports and remove direct component references from RouterConstants. Remove several components' standalone flags and adjust component metadata (styleUrl vs styleUrls) and imports accordingly. Make AlgorithmsService and AlgorithmsComponent synchronous (getCategories() now returns an array and template iterates categories directly). Replace alert in PathfindingComponent with MatSnackBar and inject it. Simplify LanguageService initialization to use existing translate configuration. Remove unused ReloadService. Make GenericGridComponent.lastCell protected. Miscellaneous tidy-ups across related files.
239 lines
8.0 KiB
TypeScript
239 lines
8.0 KiB
TypeScript
import { Component, computed, inject, CUSTOM_ELEMENTS_SCHEMA, OnDestroy, OnInit } from '@angular/core';
|
|
import { ActivatedRoute, Router } from '@angular/router';
|
|
import { Subscription } from "rxjs";
|
|
import { MatCardModule } from "@angular/material/card";
|
|
import { MatChipsModule } from "@angular/material/chips";
|
|
import { MatIcon } from "@angular/material/icon";
|
|
import { TranslatePipe } from "@ngx-translate/core";
|
|
import { MatButtonModule } from "@angular/material/button";
|
|
import { MatDialog } from "@angular/material/dialog";
|
|
import { ProjectDialogComponent } from "./dialog/project-dialog.component";
|
|
import { AssetsConstants } from "../../constants/AssetsConstants";
|
|
|
|
export interface Projects {
|
|
identifier: string;
|
|
title: string,
|
|
shortDescription: string,
|
|
introduction: string,
|
|
images: {
|
|
url: string,
|
|
source: string
|
|
}[],
|
|
icon: string,
|
|
assets: string,
|
|
links: {
|
|
name: string,
|
|
url: string
|
|
}[],
|
|
bulletPoints: string[],
|
|
challenges: string[],
|
|
learnings: string[],
|
|
isFeatured: boolean,
|
|
technologies: string[]
|
|
}
|
|
|
|
@Component({
|
|
selector: 'app-projects',
|
|
imports: [
|
|
MatCardModule,
|
|
MatChipsModule,
|
|
MatIcon,
|
|
TranslatePipe,
|
|
MatButtonModule
|
|
],
|
|
templateUrl: './projects.component.html',
|
|
styleUrl: './projects.component.scss',
|
|
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
|
})
|
|
export class ProjectsComponent implements OnInit, OnDestroy {
|
|
|
|
private readonly route = inject(ActivatedRoute);
|
|
private readonly dialog = inject(MatDialog);
|
|
private readonly router = inject(Router);
|
|
private queryParamSub: Subscription | undefined;
|
|
|
|
allProjects: Projects[] = [
|
|
{
|
|
identifier: "playground",
|
|
title: 'PROJECTS.PLAYGROUND.TITLE',
|
|
shortDescription: 'PROJECTS.PLAYGROUND.SHORT_DESCRIPTION',
|
|
introduction: 'PROJECTS.PLAYGROUND.INTRODUCTION',
|
|
images: AssetsConstants.PLAYGROUND_IMAGES.map(url => ({ url, source: '' })),
|
|
icon: 'web',
|
|
assets: '',
|
|
links: [{ name: 'PROJECTS.LINK_TO_PROJECT', url: 'https://andreas-dahm.eu' }],
|
|
bulletPoints: [
|
|
'PROJECTS.PLAYGROUND.BULLET_1',
|
|
'PROJECTS.PLAYGROUND.BULLET_2',
|
|
'PROJECTS.PLAYGROUND.BULLET_3',
|
|
'PROJECTS.PLAYGROUND.BULLET_4',
|
|
],
|
|
challenges: [
|
|
'PROJECTS.PLAYGROUND.CHALLENGE_1',
|
|
'PROJECTS.PLAYGROUND.CHALLENGE_2',
|
|
],
|
|
learnings: [
|
|
'PROJECTS.PLAYGROUND.LEARNING_1',
|
|
'PROJECTS.PLAYGROUND.LEARNING_2',
|
|
],
|
|
isFeatured: false,
|
|
technologies: ['Angular', 'TypeScript', 'SCSS', 'HTML', 'GitHub Actions', 'Docker']
|
|
},
|
|
{
|
|
identifier: "elmucho",
|
|
title: 'PROJECTS.EL_MUCHO.TITLE',
|
|
shortDescription: 'PROJECTS.EL_MUCHO.SHORT_DESCRIPTION',
|
|
introduction: 'PROJECTS.EL_MUCHO.INTRODUCTION',
|
|
images: AssetsConstants.EL_MUCHO_IMAGES.map(url => ({ url, source: '' })),
|
|
icon: 'sports_esports',
|
|
assets: '',
|
|
links: [{ name: 'PROJECTS.LINK_TO_PROJECT', url: 'https://store.steampowered.com/app/1532640/El_Mucho/' }],
|
|
bulletPoints: [
|
|
'PROJECTS.EL_MUCHO.BULLET_1',
|
|
'PROJECTS.EL_MUCHO.BULLET_2',
|
|
'PROJECTS.EL_MUCHO.BULLET_3',
|
|
'PROJECTS.EL_MUCHO.BULLET_4',
|
|
],
|
|
challenges: [
|
|
'PROJECTS.EL_MUCHO.CHALLENGE_1',
|
|
'PROJECTS.EL_MUCHO.CHALLENGE_2',
|
|
'PROJECTS.EL_MUCHO.CHALLENGE_3',
|
|
],
|
|
learnings: [
|
|
'PROJECTS.EL_MUCHO.LEARNING_1',
|
|
'PROJECTS.EL_MUCHO.LEARNING_2',
|
|
],
|
|
isFeatured: true,
|
|
technologies: ['Unity', 'C#', 'Steamworks', 'Git']
|
|
},
|
|
{
|
|
identifier: "gamejams",
|
|
title: 'PROJECTS.GAME_JAMS.TITLE',
|
|
shortDescription: 'PROJECTS.GAME_JAMS.SHORT_DESCRIPTION',
|
|
introduction: 'PROJECTS.GAME_JAMS.INTRODUCTION',
|
|
images: AssetsConstants.GAME_JAMS_IMAGES.map(url => ({ url, source: '' })),
|
|
icon: 'videogame_asset',
|
|
assets: '',
|
|
links: [{ name: 'PROJECTS.LINK_TO_PROJECT', url: 'https://itch.io/c/6628860/lobos-collection' }],
|
|
bulletPoints: [
|
|
'PROJECTS.GAME_JAMS.BULLET_1',
|
|
'PROJECTS.GAME_JAMS.BULLET_2',
|
|
'PROJECTS.GAME_JAMS.BULLET_3',
|
|
'PROJECTS.GAME_JAMS.BULLET_4',
|
|
],
|
|
challenges: [
|
|
'PROJECTS.GAME_JAMS.CHALLENGE_1',
|
|
'PROJECTS.GAME_JAMS.CHALLENGE_2',
|
|
],
|
|
learnings: [
|
|
'PROJECTS.GAME_JAMS.LEARNING_1',
|
|
'PROJECTS.GAME_JAMS.LEARNING_2',
|
|
],
|
|
isFeatured: false,
|
|
technologies: ['Unity', 'C#', 'Git']
|
|
},
|
|
{
|
|
identifier: "diploma",
|
|
title: 'PROJECTS.DIPLOMA.TITLE',
|
|
shortDescription: 'PROJECTS.DIPLOMA.SHORT_DESCRIPTION',
|
|
introduction: 'PROJECTS.DIPLOMA.INTRODUCTION',
|
|
images: AssetsConstants.DIPLOMA_IMAGES.map(url => ({ url, source: '' })),
|
|
icon: 'history_edu',
|
|
assets: AssetsConstants.DIPLOMA,
|
|
links: [{ name: 'PROJECTS.LINK_TO_PROJECT', url: 'https://www.th-bingen.de' }],
|
|
bulletPoints: [
|
|
'PROJECTS.DIPLOMA.BULLET_1',
|
|
'PROJECTS.DIPLOMA.BULLET_2',
|
|
'PROJECTS.DIPLOMA.BULLET_3',
|
|
'PROJECTS.DIPLOMA.BULLET_4',
|
|
],
|
|
challenges: [
|
|
'PROJECTS.DIPLOMA.CHALLENGE_1',
|
|
'PROJECTS.DIPLOMA.CHALLENGE_2',
|
|
],
|
|
learnings: [
|
|
'PROJECTS.DIPLOMA.LEARNING_1',
|
|
'PROJECTS.DIPLOMA.LEARNING_2',
|
|
],
|
|
isFeatured: false,
|
|
technologies: ['Java', 'Performance', 'Algorithm', 'Simulation']
|
|
},
|
|
{
|
|
identifier: "tribble-the-homeserver",
|
|
title: 'PROJECTS.TRIBBLE.TITLE',
|
|
shortDescription: 'PROJECTS.TRIBBLE.SHORT_DESCRIPTION',
|
|
introduction: 'PROJECTS.TRIBBLE.INTRODUCTION',
|
|
images: [
|
|
{ url: AssetsConstants.TRIBBLE_IMAGES[0], source: 'https://upload.wikimedia.org/wikipedia/commons/0/03/Hostinger_Logo.png' },
|
|
{ url: AssetsConstants.TRIBBLE_IMAGES[1], source: 'https://dashboardicons.com/icons/docker-engine' },
|
|
{ url: AssetsConstants.TRIBBLE_IMAGES[2], source: 'https://dashboardicons.com/icons/gitea' },
|
|
{ url: AssetsConstants.TRIBBLE_IMAGES[3], source: 'https://dashboardicons.com/icons/traefik' }
|
|
],
|
|
icon: 'dns',
|
|
assets: '',
|
|
links: [
|
|
{ name: 'Ubuntu Server', url: 'https://ubuntu.com/server' },
|
|
{ name: 'Docker', url: 'https://www.docker.com/' },
|
|
{ name: 'Traefik', url: 'https://traefik.io/' },
|
|
{ name: 'Gitea', url: 'https://gitea.io/' },
|
|
{ name: 'Jellyfin', url: 'https://jellyfin.org/' },
|
|
{ name: 'AdGuard Home', url: 'https://adguard.com/en/adguard-home/overview.html' },
|
|
{ name: 'Paperless-ngx', url: 'https://paperless-ngx.com/' },
|
|
{ name: 'Tailscale', url: 'https://tailscale.com/' }
|
|
],
|
|
bulletPoints: [
|
|
'PROJECTS.TRIBBLE.BULLET_1',
|
|
'PROJECTS.TRIBBLE.BULLET_2',
|
|
'PROJECTS.TRIBBLE.BULLET_3',
|
|
'PROJECTS.TRIBBLE.BULLET_4',
|
|
],
|
|
challenges: [
|
|
'PROJECTS.TRIBBLE.CHALLENGE_1',
|
|
'PROJECTS.TRIBBLE.CHALLENGE_2',
|
|
],
|
|
learnings: [
|
|
'PROJECTS.TRIBBLE.LEARNING_1',
|
|
'PROJECTS.TRIBBLE.LEARNING_2',
|
|
],
|
|
isFeatured: false,
|
|
technologies: ['Ubuntu Server', 'Docker', 'Traefik', 'Gitea', 'Jellyfin', 'AdGuard Home', 'Paperless-ngx', 'Tailscale']
|
|
}
|
|
]
|
|
|
|
featuredProject = computed(() => this.allProjects.find(p => p.isFeatured));
|
|
otherProjects = computed(() => this.allProjects.filter(p => !p.isFeatured));
|
|
|
|
ngOnInit(): void {
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
setTimeout(() => { this.dialogOpenFunction(); }, 10);
|
|
}
|
|
|
|
ngOnDestroy(): void {
|
|
if (this.queryParamSub) {
|
|
this.queryParamSub.unsubscribe();
|
|
}
|
|
}
|
|
|
|
private dialogOpenFunction(): void {
|
|
this.queryParamSub = this.route.queryParamMap.subscribe(params => {
|
|
const projectIdentifier = params.get('project');
|
|
if (projectIdentifier) {
|
|
const project = this.allProjects.find(p => p.identifier === projectIdentifier);
|
|
if (project) {
|
|
this.openProjectDialog(project);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
openProjectDialog(project: Projects) {
|
|
this.dialog.open(ProjectDialogComponent, {
|
|
data: project,
|
|
width: '90vw',
|
|
maxWidth: '900px',
|
|
autoFocus: false,
|
|
restoreFocus: false
|
|
});
|
|
}
|
|
}
|