Extended project page a little bit

src/app/pages/projects/projects.component.ts

@@ -1,9 +1,12 @@
-import {Component, inject, signal} from '@angular/core';
+import {Component, inject, signal, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import {MatAccordion, MatExpansionPanel, MatExpansionPanelDescription, MatExpansionPanelHeader, MatExpansionPanelTitle} from '@angular/material/expansion';
 import {MatIcon} from '@angular/material/icon';
-import {TranslatePipe} from '@ngx-translate/core';
+import {TranslatePipe, TranslateService} from '@ngx-translate/core';
 import {ActivatedRoute} from '@angular/router';
 import {AssetsConstants} from '../../constants/AssetsConstants';
+import {MatDialog} from '@angular/material/dialog';
+import {ImageDialogComponent} from '../../layout/imageDialog/image.component';
+
 
 export interface Projects {
   identifier: string;
@@ -12,7 +15,7 @@ export interface Projects {
   introduction: string,
   images: string[],
   icon: string,
-  assets: string[],
+  assets: string,
   link: string,
   bulletPoints: string[],
 }
@@ -26,14 +29,18 @@ export interface Projects {
     MatExpansionPanelTitle,
     MatExpansionPanelDescription,
     MatIcon,
-    TranslatePipe,
+    TranslatePipe
   ],
   templateUrl: './projects.component.html',
   styleUrl: './projects.component.scss',
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class ProjectsComponent {
 
     private readonly route = inject(ActivatedRoute);
+    private readonly dialog = inject(MatDialog);
+    private readonly translateService = inject(TranslateService);
+
     selectedKey = signal<string | null>(null);
 
     allProjects: Projects[] = [
@@ -44,7 +51,7 @@ export class ProjectsComponent {
         introduction: 'PROJECTS.PLAYGROUND.INTRODUCTION',
         images: [],
         icon: 'web',
-        assets: [],
+        assets: '',
         link: 'https://andreas-dahm.eu',
         bulletPoints: []
       },
@@ -55,7 +62,7 @@ export class ProjectsComponent {
         introduction: 'PROJECTS.EL_MUCHO.INTRODUCTION',
         images: [AssetsConstants.EL_MUCHO_1, AssetsConstants.EL_MUCHO_2, AssetsConstants.EL_MUCHO_3, AssetsConstants.EL_MUCHO_4],
         icon: 'sports_esports',
-        assets: [],
+        assets: '',
         link: 'https://store.steampowered.com/app/1532640/El_Mucho/',
         bulletPoints: []
       },
@@ -66,7 +73,7 @@ export class ProjectsComponent {
         introduction: 'PROJECTS.GAME_JAMS.INTRODUCTION',
         images: [AssetsConstants.GAME_JAMS_1, AssetsConstants.GAME_JAMS_2, AssetsConstants.GAME_JAMS_3],
         icon: 'videogame_asset',
-        assets: [],
+        assets: '',
         link: 'https://itch.io/c/6628860/lobos-collection',
         bulletPoints: []
       },
@@ -77,7 +84,7 @@ export class ProjectsComponent {
         introduction: 'PROJECTS.DIPLOMA.INTRODUCTION',
         images: [AssetsConstants.DIPLOMA_1, AssetsConstants.DIPLOMA_2, AssetsConstants.DIPLOMA_3, AssetsConstants.DIPLOMA_4, AssetsConstants.DIPLOMA_5, AssetsConstants.DIPLOMA_6],
         icon: 'history_edu',
-        assets: [],
+        assets: AssetsConstants.DIPLOMA,
         link: 'https://www.th-bingen.de',
         bulletPoints: []
       }
@@ -92,4 +99,18 @@ export class ProjectsComponent {
   isExpanded(projectKey: string): boolean {
     return this.selectedKey() === projectKey;
   }
+
+  openImage(title: string, src: string) {
+      const translatedTitle = this.translateService.instant(title);
+      this.dialog.open(ImageDialogComponent, {
+        data: { title: translatedTitle, src },
+        width: '96vw',
+        height: '96vh',
+        maxWidth: '96vw',
+        maxHeight: '96vh',
+        panelClass: 'image-dialog-panel',
+        autoFocus: false,
+        restoreFocus: true,
+      });
+  }
 }