playground-frontend/src/app/pages/projects/projects.component.ts

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[],
  isFeatured: boolean,
  technologies: string[]
}

@Component({
  selector: 'app-projects',
  standalone: true,
  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: [],
        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',
        ],
        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',
        ],
        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',
        ],
        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',
        ],
        isFeatured: false,
        technologies: ['C++', 'OpenGL', 'Qt', '3D-Scanner']
      },
      {
        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://commons.wikimedia.org/wiki/File:Traefik.logo.png'}
        ],
        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',
        ],
        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
    });
  }
}