Add spinner configuration & update stack to 12.2.1

Fix #173 Fix #174
gisaia · Jan 17, 2020 · fe38143 · fe38143
1 parent a436a5b
commit fe38143
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 20 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
     "@angular/platform-browser-dynamic": "~8.2.10",
     "@angular/router": "~8.2.10",
     "@types/d3-dsv": "1.0.32",
-    "arlas-wui-toolkit": "~12.2.0",
+    "arlas-wui-toolkit": "~12.2.1",
     "classlist.js": "^1.1.20150312",
     "core-js": "^2.4.1",
     "cryptiles": ">=4.1.2",

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -77,7 +77,7 @@
 
   <div class="arlas-analytics--container" *ngIf="analyticsOpen">
     <arlas-analytics-board [groupsDisplayStatusMap]="analyticsContributor?.analitycsIdtoShow" [groups]="this.analytics"
-      (boardOutputs)="getBoardEvents($event)"></arlas-analytics-board>
+      (boardOutputs)="getBoardEvents($event)" [showSpinner]="spinner.showSpinner" [diameterSpinner]="spinner.diameterSpinner" [colorSpinner]="spinner.colorSpinner"></arlas-analytics-board>
   </div>
   <arlas-gauge class="gaugeSvg" [toolTipContent]="'Threshold indicator' | translate" [width]="22" [height]="205"
     [maxValue]="gaugeMaxValue" [threshold]="gaugeThresholdValue" [currentValue]="gaugeCurrentValue"></arlas-gauge>

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -19,8 +19,10 @@
 import { Component, OnInit, ViewChild, AfterViewInit, ChangeDetectorRef } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Filter } from 'arlas-api';
-import { ChartType, DataType, MapglComponent, Position, MapglImportComponent,
-  MapglSettingsComponent, RenderedGeometries, GeoQuery } from 'arlas-web-components';
+import {
+  ChartType, DataType, MapglComponent, Position, MapglImportComponent,
+  MapglSettingsComponent, RenderedGeometries, GeoQuery
+} from 'arlas-web-components';
 import * as mapboxgl from 'mapbox-gl';
 import { SearchComponent } from 'arlas-wui-toolkit/components/search/search.component';
 import {
@@ -97,11 +99,13 @@ export class AppComponent implements OnInit, AfterViewInit {
 
   public nbVerticesLimit = 50;
   public isMapMenuOpen = false;
+  public spinner: { showSpinner: boolean, diameterSpinner: string, colorSpinner: string }
+    = { showSpinner: false, diameterSpinner: '60', colorSpinner: 'accent' };
 
-  @ViewChild('map', {static: false}) public mapglComponent: MapglComponent;
-  @ViewChild('search', {static: true}) private searchComponent: SearchComponent;
-  @ViewChild('import', {static: true}) public mapImportComponent: MapglImportComponent;
-  @ViewChild('mapSettings', {static: false}) public mapSettings: MapglSettingsComponent;
+  @ViewChild('map', { static: false }) public mapglComponent: MapglComponent;
+  @ViewChild('search', { static: true }) private searchComponent: SearchComponent;
+  @ViewChild('import', { static: true }) public mapImportComponent: MapglImportComponent;
+  @ViewChild('mapSettings', { static: false }) public mapSettings: MapglSettingsComponent;
 
   constructor(
     private configService: ArlasConfigService,
@@ -133,6 +137,10 @@ export class AppComponent implements OnInit, AfterViewInit {
       this.analytics = this.configService.getValue('arlas.web.analytics');
       this.refreshButton = this.configService.getValue('arlas-wui.web.app.refresh');
       this.geosortConfig = this.configService.getValue('arlas-wui.web.app.components.geosort');
+
+      if (this.configService.getValue('arlas.web.options.spinner')) {
+        this.spinner = Object.assign(this.spinner, this.configService.getValue('arlas.web.options.spinner'));
+      }
       if (this.analytics) {
         this.isAutoGeosortActive = this.analytics.filter(g => g.groupId === 'resultlist')
           .map(g => this.isAutoGeosortActive = g.components[0].input.isAutoGeoSortActived);
@@ -267,8 +275,8 @@ export class AppComponent implements OnInit, AfterViewInit {
       this.router.navigate([], { replaceUrl: true, queryParams: queryParams });
     });
     if (this.walkthroughService.isActivable) {
-        this.walkthroughService.startTour();
-      }
+      this.walkthroughService.startTour();
+    }
     this.cdr.detectChanges();
   }