fix: loader

src/adjuster/adjuster-loader.component.ts

@@ -1,25 +1,25 @@
 //Currently unused and replaced by a simple directive
-import * as angular from 'angular';
+import {AdjusterService} from './adjuster.service';
+import {Component, Input, OnInit, ViewRef} from '@angular/core';
+import {HsDialogComponent} from 'hslayers-ng/components/layout/dialogs/dialog-component.interface';
+import {HsDialogContainerService} from 'hslayers-ng/components/layout/dialogs/dialog-container.service';
 
-export const AdjusterLoaderComponent = {
+@Component({
+  selector: 'pra-adjuster-loader',
   template: require('./adjuster-loader.directive.html'),
-  bindings: {},
-  controller: function (
-    $scope,
-    HsCore,
-    HsConfig,
-    AdjusterService,
-    HsUtilsService
+})
+export class AdjusterLoaderComponent implements HsDialogComponent, OnInit {
+  @Input() data;
+  viewRef: ViewRef;
+  constructor(
+    private hsDialogContainerService: HsDialogContainerService,
+    private adjusterService: AdjusterService
   ) {
-    'ngInject';
-    const vm = this;
-
-    angular.extend(vm, {
-      //HsCore,
-      AdjusterService,
+    console.log('created');
+    this.adjusterService.clustersLoaded.subscribe(() => {
+      this.hsDialogContainerService.destroy(this);
     });
+  }
 
-    //$scope.$emit('scope_loaded', 'adjuster');
-  },
-  controllerAs: 'vm',
-};
+  ngOnInit() { }
+}

src/adjuster/adjuster-loader.directive.html

@@ -1,6 +1,8 @@
-<div class="center-block">
-  <h1>Calculating clusters</h1>
-  <div class="spinner-border spinner" role="status">
-    <span class="sr-only">Loading...</span>
+<div class="loader-splash">
+  <div class="center-block">
+    <h1>Calculating clusters</h1>
+    <div class="spinner-border spinner" role="status">
+      <span class="sr-only">Loading...</span>
+    </div>
   </div>
 </div>

src/adjuster/adjuster.module.ts

@@ -6,14 +6,15 @@ import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
 import {HsPanelHelpersModule} from 'hslayers-ng/components/layout/panels/panel-helpers.module';
 
 import {AdjusterComponent} from './adjuster.component';
+import {AdjusterLoaderComponent} from './adjuster-loader.component';
 import {AdjusterService} from './adjuster.service';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [CommonModule, FormsModule, HsPanelHelpersModule, NgbModule],
   exports: [AdjusterComponent],
-  declarations: [AdjusterComponent],
-  entryComponents: [AdjusterComponent],
+  declarations: [AdjusterComponent, AdjusterLoaderComponent],
+  entryComponents: [AdjusterComponent, AdjusterLoaderComponent],
   providers: [AdjusterService],
 })
 export class AdjusterModule {}

src/adjuster/index.ts

@@ -3,6 +3,7 @@ import {downgrade} from 'hslayers-ng/common/downgrader';
 import {downgradeComponent, downgradeInjectable} from '@angular/upgrade/static';
 
 import {AdjusterComponent} from './adjuster.component';
+import {AdjusterLoaderComponent} from './adjuster-loader.component';
 import {AdjusterModule} from './adjuster.module';
 import {AdjusterService} from './adjuster.service';
 
@@ -17,11 +18,10 @@ angular
   })*/
   .service('AdjusterService', downgradeInjectable(AdjusterService))
   .directive('praAdjuster', downgradeComponent({component: AdjusterComponent}))
-  .directive('praAdjusterLoader', () => {
-    return {
-      template: require('./adjuster-loader.directive.html'),
-    };
-  });
+  .directive(
+    'praAdjusterLoader',
+    downgradeComponent({component: AdjusterLoaderComponent})
+  );
 
 angular.module('pra.adjuster', [downgradedModule]);
 

src/app.component.ts

@@ -11,8 +11,6 @@ export const HsComponent = {
   },
   bindings: {},
   controller: function (
-    $scope,
-    $compile,
     gettext,
     HsCore,
     HsLayoutService,
@@ -25,7 +23,8 @@ export const HsComponent = {
     vm.exists = HsCore.exists;
     vm.panelVisible = HsLayoutService.panelVisible;
     vm.PraAdjusterService = AdjusterService;
-    HsLayoutService.sidebarRight = false;
+    //HsLayoutService.sidebarRight = false;
+    console.log(HsLayoutService.sidebarRight);
     // HsLayoutService.sidebarToggleable = false;
     // HsLayoutService.sidebarButtons = true;
     /*$scope.$on('scope_loaded', function (event, args) {

src/app.service.ts

@@ -1,5 +1,7 @@
 import {Injectable} from '@angular/core';
 
+import {AdjusterLoaderComponent} from './adjuster/adjuster-loader.component';
+import {HsDialogContainerService} from 'hslayers-ng/components/layout/dialogs/dialog-container.service';
 import {HsLayoutService} from 'hslayers-ng/components/layout/layout.service';
 import {HsPanelContainerService} from 'hslayers-ng/components/layout/panels/panel-container.service';
 import {HsSidebarService} from 'hslayers-ng/components/sidebar/sidebar.service';
@@ -9,6 +11,7 @@ import {AdjusterComponent} from './adjuster/adjuster.component';
 @Injectable({providedIn: 'root'})
 export class AppService {
   constructor(
+    private hsDialogContainerService: HsDialogContainerService,
     private hsLayoutService: HsLayoutService,
     private hsSidebarService: HsSidebarService,
     private hsPanelContainerService: HsPanelContainerService
@@ -17,6 +20,7 @@ export class AppService {
   }
 
   init(): void {
+    this.hsDialogContainerService.create(AdjusterLoaderComponent, {});
     this.hsSidebarService.buttons.push({
       panel: 'adjuster',
       module: 'pra.adjuster',
@@ -27,5 +31,6 @@ export class AppService {
     });
     this.hsPanelContainerService.create(AdjusterComponent, {});
     this.hsLayoutService.setDefaultPanel('adjuster');
+    //this.hsLayoutService.sidebarRight = false;
   }
 }