🤡 create new empty panels

* add history panel
* add forecast panel

src/app/app.component.scss

@@ -1,3 +1,7 @@
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+
 h1, h2, h3 {color: navy; font-family: Arial, Helvetica, sans-serif;}
 .pl-2 {padding-left: 2em;}
-.p-2 {padding: 2em;}
+.p-2 {padding: 2em;}

src/app/app.component.spec.ts

@@ -5,14 +5,12 @@ class HsConfigMock {
   constructor() {}
 }
 describe('AppComponent', () => {
-  beforeEach(
-    waitForAsync(() => {
-      TestBed.configureTestingModule({
-        declarations: [HslayersAppComponent],
-        providers: [{provide: HsConfig, useValue: new HsConfigMock()}],
-      }).compileComponents();
-    })
-  );
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [HslayersAppComponent],
+      providers: [{provide: HsConfig, useValue: new HsConfigMock()}],
+    }).compileComponents();
+  }));
 
   it('should create the app', () => {
     const fixture = TestBed.createComponent(HslayersAppComponent);

src/app/app.component.ts

@@ -6,7 +6,17 @@ import {Tile, Vector as VectorLayer} from 'ol/layer';
 import {View} from 'ol';
 import {transform} from 'ol/proj';
 
-import {HsConfig, HsEventBusService, HsToastService} from 'hslayers-ng';
+import {
+  HsConfig,
+  HsEventBusService,
+  HsLayoutService,
+  HsPanelContainerService,
+  HsSidebarService,
+  HsToastService,
+} from 'hslayers-ng';
+
+import {IrrigationForecastPanelComponent} from './irrigation/irrigation-forecast-panel.component';
+import {ReservoirHistoryPanelComponent} from './irrigation/reservoir-history-panel.component';
 
 @Component({
   selector: 'application-root',
@@ -20,14 +30,44 @@ export class HslayersAppComponent {
   constructor(
     /* Inject here all modules from HSLayers-NG which you intend to use */
     public hsConfig: HsConfig,
-    private hsEventBusService: HsEventBusService,
+    private hsEventBus: HsEventBusService,
+    private hsLayoutService: HsLayoutService,
+    private hsPanelContainerService: HsPanelContainerService,
+    private hsSidebarService: HsSidebarService,
     private hsToastService: HsToastService
   ) {
+    /* Create new button in the sidebar */
+    this.hsSidebarService.buttons.push(
+      {
+        panel: 'history',
+        module: 'history',
+        order: 1,
+        title: 'Reservoir history',
+        description: 'Show history of the irrigation',
+        icon: 'icon-calendarthree',
+      },
+      {
+        panel: 'forecast',
+        module: 'forecast',
+        order: 1,
+        title: 'Irrigation forecast',
+        description: 'Show forecast of the irrigation',
+        icon: 'icon-sun-day',
+      }
+    );
+    /* Create new panel itself */
+    this.hsPanelContainerService.create(ReservoirHistoryPanelComponent, {});
+    this.hsPanelContainerService.create(IrrigationForecastPanelComponent, {});
+    /* Switch panel */
+    /*this.hsEventBus.layoutLoads.subscribe(() => {
+      this.hsLayoutService.setDefaultPanel('history');
+    });*/
     const reservoirWmsLayer = new Tile({
       properties: {
         title: 'Current water level',
         base: false,
         removable: false,
+        inlineLegend: true,
       },
       source: new TileWMS({
         url: 'https://www.gis.atapex.sk/geoserver/agrihub/wms',
@@ -88,13 +128,17 @@ export class HslayersAppComponent {
       useProxy: false,
       panelsEnabled: {
         composition_browser: false,
+        datasource_selector: false,
+        addData: false,
+        info: false,
         saveMap: false,
         language: false,
+        legend: false,
         draw: false,
         permalink: false,
       },
       componentsEnabled: {
-        basemapGallery: true,
+        basemapGallery: false,
       },
       assetsPath: 'assets',
       symbolizerIcons: [
@@ -129,7 +173,7 @@ export class HslayersAppComponent {
       zoomWithModifierKeyOnly: false,
     });
     /* Now wait for the OpenLayers Map object to load */
-    // this.hsEventBusService.olMapLoads.subscribe(() => {
+    // this.hsEventBus.olMapLoads.subscribe(() => {
     //   /* ...and display a simple toast message in the bottom-left corner */
     //   this.hsToastService.createToastPopupMessage(
     //     'READY!',

src/app/irrigation/irrigation-forecast-panel.component.html

@@ -0,0 +1,6 @@
+<div [hidden]="!isVisible()" class="card mainpanel">
+  <hs-panel-header name="forecast" [title]="'Irrigation forecast'">
+  </hs-panel-header>
+  <div class="card-body">
+  </div>
+</div>

src/app/irrigation/irrigation-forecast-panel.component.ts

@@ -0,0 +1,31 @@
+import {Component, ViewRef} from '@angular/core';
+
+import {
+  HsLanguageService,
+  HsLayoutService,
+  // eslint-disable-next-line import/named
+  HsPanelComponent,
+} from 'hslayers-ng';
+
+import {IrrigationService} from './irrigation.service';
+
+@Component({
+  selector: 'irrigation-forecast-panel',
+  templateUrl: './irrigation-forecast-panel.component.html',
+  styleUrls: ['../app.component.scss'],
+})
+export class IrrigationForecastPanelComponent implements HsPanelComponent {
+  data;
+  name: 'forecast';
+  viewRef: ViewRef;
+
+  constructor(
+    public irrigationService: IrrigationService,
+    public hsLanguageService: HsLanguageService,
+    public hsLayoutService: HsLayoutService
+  ) {}
+
+  isVisible(): boolean {
+    return this.hsLayoutService.panelVisible('forecast');
+  }
+}

src/app/irrigation/irrigation-info.component.html

@@ -1,12 +1,12 @@
 <div class="p-2" *ngIf="dataLoaded; else loading">
   <h1>{{currentReservoirData.volume | number:'1.0-0'}}&emsp;m3</h1>
-  <p>volume of water in the reservoir</p>
+  <p class="text-secondary">volume of water in the reservoir</p>
   <h2>{{currentReservoirData.elevation | number:'1.3-3'}}&nbsp;m MSL</h2>
-  <p>water-level</p>
+  <p class="text-secondary">water-level</p>
   <h2>{{currentReservoirData.area | number:'1.2-2'}}&nbsp;m2</h2>
-  <p>water surface</p>
+  <p class="text-secondary">water surface</p>
   <strong>{{currentReservoirData.timestamp | date:'medium'}}</strong>
-  <p>latest data</p>
+  <p class="text-secondary">latest data</p>
 </div>
 <ng-template class="p-2" #loading>
   Loading...

src/app/irrigation/irrigation.module.ts

@@ -1,12 +1,20 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 
+import {HsPanelHelpersModule} from 'hslayers-ng';
+
+import {IrrigationForecastPanelComponent} from './irrigation-forecast-panel.component';
 import {IrrigationInfoComponent} from './irrigation-info.component';
+import {ReservoirHistoryPanelComponent} from './reservoir-history-panel.component';
 
 @NgModule({
-  imports: [CommonModule],
+  imports: [CommonModule, HsPanelHelpersModule],
   exports: [IrrigationInfoComponent],
-  declarations: [IrrigationInfoComponent],
+  declarations: [
+    IrrigationInfoComponent,
+    IrrigationForecastPanelComponent,
+    ReservoirHistoryPanelComponent,
+  ],
   providers: [],
 })
 export class IrrigationModule {}

src/app/irrigation/reservoir-history-panel.component.html

@@ -0,0 +1,6 @@
+<div [hidden]="!isVisible()" class="card mainpanel">
+  <hs-panel-header name="history" [title]="'Reservoir history'">
+  </hs-panel-header>
+  <div class="card-body">
+  </div>
+</div>

src/app/irrigation/reservoir-history-panel.component.ts

@@ -0,0 +1,31 @@
+import {Component, ViewRef} from '@angular/core';
+
+import {
+  HsLanguageService,
+  HsLayoutService,
+  // eslint-disable-next-line import/named
+  HsPanelComponent,
+} from 'hslayers-ng';
+
+import {IrrigationService} from './irrigation.service';
+
+@Component({
+  selector: 'reservoir-history-panel',
+  templateUrl: './reservoir-history-panel.component.html',
+  styleUrls: ['../app.component.scss'],
+})
+export class ReservoirHistoryPanelComponent implements HsPanelComponent {
+  data;
+  name: 'history';
+  viewRef: ViewRef;
+
+  constructor(
+    public irrigationService: IrrigationService,
+    public hsLanguageService: HsLanguageService,
+    public hsLayoutService: HsLayoutService
+  ) {}
+
+  isVisible(): boolean {
+    return this.hsLayoutService.panelVisible('history');
+  }
+}