Merge branch 'develop' into bugfix/buttonAndHeaderTextOverflow

Author: finnmartens

frontend/src/app/modules/aggregation/components/aggregation-chart/aggregation-chart.component.html

@@ -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"

frontend/src/app/modules/aggregation/services/aggregation-chart-data.service.ts

@@ -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();
     });
   }
 

frontend/src/app/modules/shared/components/spinner/spinner.component.ts

@@ -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();
   }

frontend/src/app/modules/shared/services/spinner.service.ts

@@ -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);
   }
 }