opt-cc/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.ts

import {Component, ElementRef, ViewChild} from '@angular/core';
import {CampaignService} from '../../../services/logs/campaign.service';
import {Campaign} from '../../../models/model-interfaces';
import {ActivatedRoute, Router} from '@angular/router';

@Component({
  selector: 'campaign-navigation',
  templateUrl: './campaign-navigation.component.html',
  styleUrls: ['./campaign-navigation.component.css']
})
export class CampaignNavigationComponent {

  campaigns: Campaign[];

  @ViewChild('horizontalList', {read: ElementRef}) public panel: ElementRef<any>;

  isLeftScrollVisible = false;

  isRightScrollVisible = true;

  repeater;

  constructor(private campaignService: CampaignService,
              private route: ActivatedRoute,
              private router: Router) {
  }

  ngOnInit() {
    this.campaignService.getAllCampaigns().subscribe((campaigns) => {
      this.campaigns = campaigns;
      this.isRightScrollVisible = campaigns.length > 4;
    })
  }

  public scrollList(scrollValue: number): void {
    const prevScrollLeftValue = this.panel.nativeElement.scrollLeft;

    this.panel.nativeElement.scrollLeft += scrollValue;

    const updatedScrollLeftValue = this.panel.nativeElement.scrollLeft;

    if (scrollValue < 0) {
      this.isRightScrollVisible = true;
    }

    if (updatedScrollLeftValue > 0) {
      if (prevScrollLeftValue === updatedScrollLeftValue) {
        this.isRightScrollVisible = false;
        this.clearRepeater();
      }
      this.isLeftScrollVisible = true;
    } else {
      this.isLeftScrollVisible = false;
      this.clearRepeater();
    }

  }

  setRepeater(value: number) {
    this.repeater = setInterval(() => this.scrollList(value), 20);
  }

  clearRepeater() {
    clearInterval(this.repeater)
  }

  selectCampaign(campaignId) {
    console.log(campaignId)
    this.router.navigate([{outlets: {'primary': ['/campaign', campaignId]}}], {relativeTo: this.route});
  }
}