Skip to content
Permalink
Browse files

[IT-2808] Identify spinner instances by ids so there can be parallel …

…spinners.
  • Loading branch information...
finnmartens committed Sep 26, 2019
1 parent eed8c52 commit d5d1522423fc201ce1dfc49c71b37040cacfee1a
@@ -1,6 +1,6 @@
<div class="card">
<div class="aggregation-chart">
<osm-spinner></osm-spinner>
<osm-spinner [spinnerId]="'aggregation-chart-spinner'"></osm-spinner>
<div class="filter-dropdown-group">
<div class="btn-group pull-left perc-element" data-toggle="buttons" id="stack-bars-switch" *ngIf="!isHidden">
<label class="btn btn-sm btn-default" id="switch-beside-button"
@@ -2,14 +2,15 @@ import { Injectable } from '@angular/core';
import {scaleOrdinal} from "d3-scale";
import {URL} from "../../../enums/url.enum";
import {BarchartDataService} from "./barchart-data.service";
import {BehaviorSubject} from "rxjs";
import {BehaviorSubject, combineLatest, Subject} from "rxjs";
import {ResultSelectionCommand} from "../../result-selection/models/result-selection-command.model";
import {RemainingResultSelection} from "../../result-selection/models/remaing-result-selection.model";
import {AggregationChartDataByMeasurand} from "../models/aggregation-chart-data.model";
import {AggregationChartSeries} from "../models/aggregation-chart-series.model";
import {SpinnerService} from "../../shared/services/spinner.service";
import {ActivatedRoute, Params, Router} from "@angular/router";
import {ResultSelectionStore} from "../../result-selection/services/result-selection.store";
import {take, takeUntil} from "rxjs/operators";

@Injectable({
providedIn: 'root'
@@ -115,7 +116,9 @@ export class AggregationChartDataService {
}

getBarchartData(resultSelectionCommand: ResultSelectionCommand,remainingResultSelection: RemainingResultSelection): void {
this.spinnerService.show();
this.spinnerService.showSpinner('aggregation-chart-spinner');
const finishedLoadingAvg$: Subject<void> = new Subject<void>();
const finishedLoadingPercentile$: Subject<void> = new Subject<void>();

const additionalParams: Params = {
selectedFilter: this.selectedFilter,
@@ -126,14 +129,18 @@ export class AggregationChartDataService {

this.resultSelectionStore.writeQueryParams(additionalParams);

combineLatest(finishedLoadingAvg$, finishedLoadingPercentile$).subscribe(() => {
this.spinnerService.hideSpinner('aggregation-chart-spinner');
});

this.barchartDataService.fetchBarchartData<any>(
resultSelectionCommand,
remainingResultSelection,
"avg",
URL.AGGREGATION_BARCHART_DATA
).subscribe(result => {
this.barchartAverageData$.next(this.sortDataByMeasurandOrder(result));
this.spinnerService.hide();
finishedLoadingAvg$.next();
});

this.barchartDataService.fetchBarchartData<any>(
@@ -143,6 +150,7 @@ export class AggregationChartDataService {
URL.AGGREGATION_BARCHART_DATA
).subscribe(result => {
this.barchartMedianData$.next(this.sortDataByMeasurandOrder(result));
finishedLoadingPercentile$.next();
});
}

@@ -1,6 +1,5 @@
import { Component, OnInit, ElementRef, OnDestroy } from '@angular/core';
import {Component, OnInit, ElementRef, OnDestroy, Input} from '@angular/core';
import { Spinner, SpinnerOptions } from 'spin.js';
import { Subscription } from 'rxjs';
import {SpinnerService} from "../../services/spinner.service";

@Component({
@@ -10,31 +9,30 @@ import {SpinnerService} from "../../services/spinner.service";
})
export class SpinnerComponent implements OnInit, OnDestroy {

private spinner: any;
private spinner: Spinner;
@Input() spinnerId: string;
public show: boolean = false;
private element: any = null;
private subscription: Subscription = null;
private element: any = undefined;

constructor(private spinnerElement: ElementRef, private spinnerService: SpinnerService) {
this.element = spinnerElement.nativeElement;
}

ngOnInit() {
this.initSpinner();
this.createServiceSubscription();
}

private createServiceSubscription() {
this.subscription = this.spinnerService.spinnerObservable.subscribe(show => {
if (show) {
private createServiceSubscription(): void {
this.spinnerService.activeSpinner$.subscribe((activeSpinner: Set<string>) => {
if (activeSpinner.has(this.spinnerId)) {
this.startSpinner();
} else {
this.stopSpinner();
}
});
}

private initSpinner() {
private initSpinner(): void {
let options: SpinnerOptions = {
lines: 13 // The number of lines to draw
, length: 10 // The length of each line
@@ -54,19 +52,19 @@ export class SpinnerComponent implements OnInit, OnDestroy {
, position: 'absolute' // Element positioning
};
this.spinner = new Spinner(options);
this.startSpinner();
this.createServiceSubscription();
}

ngOnDestroy() {
this.subscription.unsubscribe();
this.spinnerService.activeSpinner$.unsubscribe();
}

startSpinner() {
private startSpinner(): void {
this.show = true;
this.spinner.spin(this.element.firstChild);
}

stopSpinner() {
private stopSpinner(): void {
this.show = false;
this.spinner.stop();
}
@@ -6,18 +6,19 @@ import {BehaviorSubject} from "rxjs";
})
export class SpinnerService {

private spinner$ = new BehaviorSubject<boolean>(false);
activeSpinner$ = new BehaviorSubject<Set<string>>(new Set<string>());

constructor() { }
get spinnerObservable() {
return this.spinner$.asObservable();
}

show() {
this.spinner$.next(true);
showSpinner(spinnerId: string): void {
let activeSpinner: Set<string> = this.activeSpinner$.getValue();
activeSpinner.add(spinnerId);
this.activeSpinner$.next(activeSpinner);
}

hide() {
this.spinner$.next(false);
hideSpinner(spinnerId: string): void {
let activeSpinner: Set<string> = this.activeSpinner$.getValue();
activeSpinner.delete(spinnerId);
this.activeSpinner$.next(activeSpinner);
}
}

Some generated files are not rendered by default. Learn more.

0 comments on commit d5d1522

Please sign in to comment.
You can’t perform that action at this time.