gallery-frontend/src/app/gallery/album/album.component.ts

import {Component, OnInit} from '@angular/core';

import {Album} from "../shared/album.model";
import {ActivatedRoute} from "@angular/router";
import {Title} from "@angular/platform-browser";
import {DisplayImageService} from "../display-image/display-image.service";
import {environment} from "../../../environments/environment";
import {Image} from "../shared/image.model";
import {Thumbnail} from "../shared/thumbnail.model";

@Component({
  selector: 'app-album',
  templateUrl: './album.component.html',
  styleUrls: ['./album.component.css'],
})
export class AlbumComponent implements OnInit {

  public album: Album = new Album();
  private thumbnails: Array<Thumbnail>;

  constructor(private titleService: Title,
              private route: ActivatedRoute,
              private displayImageService: DisplayImageService) {}

  ngOnInit() {
    this.route.data.subscribe((data: { albums: Array<Album>}) => {
      this.album = data.albums.find(album => album.slug == this.route.snapshot.params.slug);
      this.titleService.setTitle(`${this.album.name} - photos.yvan.hu`);
      this.thumbnails = this.initThumbnails();
      if(this.route.snapshot.params.image) {
        this.imageClick(
          this.route.snapshot.params.slug,
          this.route.snapshot.params.image
        );
      }
    });
  }

  private initThumbnails(): Array<Thumbnail> {
    return this.album.images.map(image => <Thumbnail>{
      slug: '',
      image: this.imageUrl(image),
      path: image.path,
      label: {
        title: image.path,
        extraRight: '',
        extraLeft: '',
      },
    });
  }

  get thumbnailsLeft(): Array<Thumbnail> {
    let thumbs = [];
    for (let i=0;i<this.thumbnails.length; i=i+3) {
      thumbs.push(this.thumbnails[i]);

    }
    return thumbs;
  }

  get thumbnailsMiddle(): Array<Thumbnail> {
    let thumbs = [];
    for (let i=1;i<this.thumbnails.length; i=i+3) {
      thumbs.push(this.thumbnails[i]);

    }
    return thumbs;
  }

  get thumbnailsRight(): Array<Thumbnail> {
    let thumbs = [];
    for (let i=2;i<this.thumbnails.length; i=i+3) {
      thumbs.push(this.thumbnails[i]);

    }
    return thumbs;
  }

  private imageUrl(image: Image): string {
    return environment.apiUrl + `/image/${this.route.snapshot.params.slug}/${image.path}/thumb`;
  }

  public imageClick(slug: string, path: string) {
    this.displayImageService.activate(slug, path, this.album.name);
  }

  public switchImage(evnt:{direction: string, currentPath: string}) {
    switch (evnt.direction) {
      case 'next':
        this.nextImage(evnt.currentPath);
        break;
      case 'prev':
        this.prevImage(evnt.currentPath);
        break;
    }
  }

  private nextImage(path: string) {
    let currentIndex: number = this.album.images.findIndex(image => image.path == path);
    if(this.album.images.length-1 > currentIndex) {
      this.displayImageService.activate(
        this.album.slug,
        this.album.images[currentIndex+1].path
      )
    }
  }

  private prevImage(path: string) {
    let currentIndex: number = this.album.images.findIndex(image => image.path == path);
    if(0 < currentIndex) {
      this.displayImageService.activate(
        this.album.slug,
        this.album.images[currentIndex-1].path
      )
    }
  }
}