fix: bootstrap app and load layers properly

src/adjuster/adjuster-loader.component.ts

@@ -8,7 +8,7 @@ export const AdjusterLoaderComponent = {
     $scope,
     HsCore,
     HsConfig,
-    PraAdjusterService,
+    AdjusterService,
     HsUtilsService
   ) {
     'ngInject';
@@ -16,7 +16,7 @@ export const AdjusterLoaderComponent = {
 
     angular.extend(vm, {
       //HsCore,
-      PraAdjusterService,
+      AdjusterService,
     });
 
     //$scope.$emit('scope_loaded', 'adjuster');

src/adjuster/adjuster.component.ts

@@ -1,26 +1,65 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnInit, ViewRef} from '@angular/core';
 
-import {AdjusterService} from './adjuster.service';
+import {HsLayoutService} from 'hslayers-ng/components/layout/layout.service';
+import {HsPanelComponent} from 'hslayers-ng/components/layout/panels/panel-component.interface';
+import {HsPanelContainerService} from 'hslayers-ng/components/layout/panels/panel-container.service';
+import {HsSidebarService} from 'hslayers-ng/components/sidebar/sidebar.service';
 import {HsUtilsService} from 'hslayers-ng/components/utils/utils.service';
 
+import {AdjusterService} from './adjuster.service';
+
 @Component({
   selector: 'pra-adjuster',
   template: require('./adjuster.directive.html'),
 })
-export class AdjusterComponent {
+export class AdjusterComponent implements HsPanelComponent {
+  data: any;
   descriptionVisible: boolean;
+  viewRef: ViewRef;
 
   constructor(
     private adjusterService: AdjusterService,
+    private hsLayoutService: HsLayoutService,
+    private hsSidebarService: HsSidebarService,
+    private hsPanelContainerService: HsPanelContainerService,
     private hsUtilsService: HsUtilsService
   ) {
     //$scope.loading = false;
     //$scope.HsUtilsService = HsUtilsService;
     this.descriptionVisible = false;
+    this.init();
 
     //$scope.$emit('scope_loaded', 'adjuster');
   }
 
+  init(): void {
+    this.hsSidebarService.buttons.push(
+      {
+        panel: 'adjuster',
+        module: 'pra.adjuster',
+        order: 6,
+        title: 'Adjust factors',
+        description: 'Opens My Cool Panel',
+        icon: 'icon-analytics-piechart',
+      },
+      {
+        panel: 'hot',
+        module: 'my.hot',
+        order: 8,
+        title: 'My Hot Panel',
+        description: 'Opens My Hot Panel',
+        icon: 'icon-calcplus',
+      }
+    );
+    this.hsPanelContainerService.create(AdjusterComponent, {});
+    //this.hsPanelContainerService.create(MyHotComponent, {});
+    this.hsLayoutService.setDefaultPanel('adjuster');
+  }
+
+  isVisible(): boolean {
+    return this.hsLayoutService.panelVisible('adjuster');
+  }
+
   noDataSelected(): boolean {
     if (this.adjusterService.factors.length === 0) {
       return true;

src/adjuster/adjuster.service.ts

@@ -5,7 +5,7 @@ import {Subject} from 'rxjs';
 import {HsUtilsService} from 'hslayers-ng/components/utils/utils.service';
 
 // import attractivity from '../Attractivity.json';
-import nuts from '../nuts';
+import {nuts} from '../nuts';
 //import {factors} from './factors.js';
 
 @Injectable({providedIn: 'root'})

src/adjuster/index.ts

@@ -15,8 +15,8 @@ angular
       template: require('./adjuster-sidebar-btn.directive.html'),
     };
   })
-  .service('PraAdjusterService', downgradeInjectable(AdjusterService))
-  .component('praAdjuster', downgradeComponent({component: AdjusterComponent}))
+  .service('AdjusterService', downgradeInjectable(AdjusterService))
+  .directive('praAdjuster', downgradeComponent({component: AdjusterComponent}))
   .directive('praAdjusterLoader', () => {
     return {
       template: require('./adjuster-loader.directive.html'),

src/app-js.ts

@@ -21,12 +21,12 @@ import * as angular from 'angular';
 import View from 'ol/View';
 import {OSM} from 'ol/source';
 import {Tile} from 'ol/layer';
-import {downgradeInjectable} from '@angular/upgrade/static';
+//import {downgradeInjectable} from '@angular/upgrade/static';
 
 import {AppModule} from './app.module';
-import {AppService} from './app.service';
+//import {AppService} from './app.service';
 import {HsComponent, nuts2Layer, nuts3Layer} from './app.component';
-import {downgrade} from 'hslayers-ng/common/downgrader';
+//import {downgrade} from 'hslayers-ng/common/downgrader';
 
 function getHostname() {
   const url = window.location.href;
@@ -35,13 +35,13 @@ function getHostname() {
   return urlArr[0] + '//' + domain;
 }
 
-export const downgradedModule = downgrade(AppModule);
+//export const downgradedModule = downgrade(AppModule);
 
 //angular.module(downgradedModule, []);
 
 export default angular
   .module('hs', [
-    downgradedModule,
+    //downgradedModule,
     'hs.addLayers',
     'hs.core',
     'hs.datasource_selector',
@@ -58,6 +58,7 @@ export default angular
     'hs.sidebar',
     'hs.toolbar',
     'gettext',
+    'pra.adjuster',
   ])
   .value('HsConfig', {
     useProxy: false,
@@ -106,11 +107,15 @@ export default angular
     // allowAddExternalDatasets: false,
     panelsEnabled: {
       composition_browser: false,
+      feature_crossfilter: false,
       saveMap: false,
+      sensors: false,
+      tracking: false,
+      routing: false,
       permalink: false,
       language: false,
     },
     sizeMode: 'fullscreen',
   })
-  .component('hs', HsComponent)
-  .service('AppService', downgradeInjectable(AppService));
+  .component('hs', HsComponent);
+//.service('AppService', downgradeInjectable(AppService));

src/app.component.ts

@@ -2,7 +2,7 @@ import * as hsv2rgb from 'hsv2rgb';
 import {Fill, Stroke, Style} from 'ol/style';
 import {Vector as VectorLayer} from 'ol/layer';
 
-import * as nuts from './nuts';
+import {nuts} from './nuts';
 
 export const HsComponent = {
   template: (HsCore) => {
@@ -18,20 +18,19 @@ export const HsComponent = {
     HsCore,
     HsLayoutService,
     HsSidebarService,
-    PraAdjusterService,
-    AppService
+    AdjusterService
   ) {
     'ngInject';
     const vm = this;
     vm.exists = HsCore.exists;
     vm.panelVisible = HsLayoutService.panelVisible;
-    vm.PraAdjusterService = PraAdjusterService;
+    vm.PraAdjusterService = AdjusterService;
     //HsLayoutService.fullScreenMap($element, HsCore);
     HsLayoutService.sidebarRight = false;
     // HsLayoutService.sidebarToggleable = false;
     // HsCore.singleDatasources = true;
     //HsLayoutService.sidebarButtons = true;
-    AppService.init();
+    //AppService.init();
     /*$scope.$on('scope_loaded', function (event, args) {
       if (args === 'Sidebar') {
         const el = angular.element(
@@ -49,9 +48,9 @@ export const HsComponent = {
         $compile(loader)(event.targetScope);
       }
     });*/
-    PraAdjusterService.clustersLoaded.subscribe(() => {
+    AdjusterService.clustersLoaded.subscribe(() => {
       colorPalette = generateRandomColorPalette(
-        PraAdjusterService.clusters.length
+        AdjusterService.clusters.length
       );
     });
   },

src/app.module.ts

@@ -16,7 +16,7 @@ import {BootstrapComponent} from 'hslayers-ng/bootstrap.component';
 import {HsCoreModule} from 'hslayers-ng/components/core/core.module';
 
 import {AdjusterModule} from './adjuster';
-import {AppService} from './app.service';
+//import {AppService} from './app.service';
 
 @NgModule({
   imports: [BrowserModule, UpgradeModule, HsCoreModule, AdjusterModule],
@@ -24,7 +24,6 @@ import {AppService} from './app.service';
   declarations: [/*MyCoolComponent, MyHotComponent*/],
   entryComponents: [/*MyCoolComponent, MyHotComponent*/],
   providers: [
-    AppService,
     {
       provide: APP_BOOTSTRAP_LISTENER,
       multi: true,
@@ -39,6 +38,7 @@ import {AppService} from './app.service';
         };
       },
     },
+    //AppService,
   ],
 })
 export class AppModule {

src/nuts.js

@@ -3,7 +3,7 @@ import nuts3 from './NUTS_RG_20M_2016_3857_LEVL_3.json';
 import {GeoJSON} from 'ol/format';
 import {Vector as VectorSource} from 'ol/source';
 
-export default {
+export const nuts = {
   nuts2Source: new VectorSource({
     features: new GeoJSON().readFeatures(nuts2),
   }),