dslak_website/src/app/portfolio/portfolio.component.ts

import { Component, OnInit } from '@angular/core'
import { Router, NavigationEnd } from '@angular/router'
import { ApisService } from '../services/apis.service'
import { environment } from '../../environments/environment'

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

  public basePath = `${environment.BASE_PATH}`

  public portfolioItems: any = []
  public section: string = ''

  constructor(
    private apisService: ApisService,
    private router: Router)
  { }

  ngOnInit(): void {
    this.section = this.router.url.split('/')[1]

    this.apisService.getPortfolio(this.section).toPromise().then((response) => {
      this.portfolioItems = response.items

      let cnt = 0
      let width = 0
      let tot = 0

      this.portfolioItems.forEach((e) => {
        e.loading = true

        switch (cnt) {
          case 0:
            width = Math.floor(Math.random()*3)+3
            tot = width
            cnt++
            break;
          case 1:
            width = Math.floor(Math.random()*3)+3
            cnt++
            if(tot + width > 9) {
              width = 12 - tot
              tot = 0
              cnt = 0
            } else {
              tot = tot + width
            }
            break;
          case 2:
            width = 12 - tot
            tot = 0
            cnt = 0
            break;
        }
        e.width = width
      })
    },(error) => {
      console.error('getPortfolio ERROR', error)
    }).catch((e) => {
      console.error('getPortfolio CATCH', e)
    })
  }

  showDetails(id): void {
    const section = this.section == 'exhibitions' ? 'exhibitions' : 'works'
    this.router.navigate([`/detail/${section}/${id}`])
  }

  onLoad(id): void {
    this.portfolioItems.filter(item => item.id == id)[0].loading = false
  }

}