add blockchain panel

src/app/app.service.ts

@@ -1,22 +1,28 @@
-import {Injectable} from '@angular/core';
+import { Injectable, OnInit } from '@angular/core';
 
-import {GeoJSON} from 'ol/format';
-import {OSM, Vector as VectorSource} from 'ol/source';
-import {Tile, Vector as VectorLayer} from 'ol/layer';
+import { GeoJSON } from 'ol/format';
+import { OSM, Vector as VectorSource } from 'ol/source';
+import { Tile, Vector as VectorLayer } from 'ol/layer';
 
 import {
   HsConfig,
   HsEventBusService,
-  HsToastService
+  HsToastService,
+  HsSidebarService,
+  HsPanelContainerService
 } from 'hslayers-ng';
 
-@Injectable({providedIn: 'root'})
+import { BcInfoComponent } from './bc-info/bc-info.component';
+
+@Injectable({ providedIn: 'root' })
 export class AppService {
   constructor(
     public hsConfig: HsConfig,
     private hsEventBusService: HsEventBusService, /* private properties are only visible from within this component class */
-    private hsToastService: HsToastService
-    ) {
+    private hsToastService: HsToastService,
+    private hsSidebarService: HsSidebarService,
+    private hsPanelContainerService: HsPanelContainerService
+  ) {
     /* Define a geometry of one square polygon */
     /*const geojsonObject = {
       'type': 'FeatureCollection',
@@ -106,11 +112,11 @@ export class AppService {
       },
       assetsPath: 'assets',
       symbolizerIcons: [
-        {name: 'beach', url: '/assets/icons/beach17.svg'},
-        {name: 'bicycles', url: '/assets/icons/bicycles.svg'},
-        {name: 'coffee-shop', url: '/assets/icons/coffee-shop1.svg'},
-        {name: 'mountain', url: '/assets/icons/mountain42.svg'},
-        {name: 'warning', url: '/assets/icons/warning.svg'},
+        { name: 'beach', url: '/assets/icons/beach17.svg' },
+        { name: 'bicycles', url: '/assets/icons/bicycles.svg' },
+        { name: 'coffee-shop', url: '/assets/icons/coffee-shop1.svg' },
+        { name: 'mountain', url: '/assets/icons/mountain42.svg' },
+        { name: 'warning', url: '/assets/icons/warning.svg' },
       ],
       popUpDisplay: 'hover',
       default_layers: [
@@ -150,16 +156,29 @@ export class AppService {
       sidebarClosed: true,
       sidebarPosition: 'left',
     });
-        /* Now wait for the OpenLayers Map object to load */
-        this.hsEventBusService.olMapLoads.subscribe(() => {
-          /* ...and display a simple toast message in the bottom-left corner */
-          this.hsToastService.createToastPopupMessage(
-            'READY!',
-            'Your map is now ready to use.',
-            {
-              toastStyleClasses: 'bg-success text-white' /* Use any Bootstrap class here, see https://getbootstrap.com/docs/4.0/utilities/colors/ */
-            }
-          );
-        })
+    /* Now wait for the OpenLayers Map object to load */
+    this.hsEventBusService.olMapLoads.subscribe(() => {
+      /* ...and display a simple toast message in the bottom-left corner */
+      this.hsToastService.createToastPopupMessage(
+        'READY!',
+        'Your map is now ready to use.',
+        {
+          toastStyleClasses: 'bg-success text-white' /* Use any Bootstrap class here, see https://getbootstrap.com/docs/4.0/utilities/colors/ */
+        }
+      );
+    })
+
+    this.hsSidebarService.buttons.push({
+      panel: 'bc-panel',
+      module: '',
+      order: 3,
+      title: 'Blockchain panel',
+      description: 'Open blockchain panel',
+      icon: 'icon-link'
+    });
+
+    this.hsPanelContainerService.create(BcInfoComponent, {});
   }
+
+
 }

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

@@ -1,7 +1,14 @@
-My account balance: {{bcInfoService.userBalance}} $$ <button (click)="updateUserBalance()">UPDATE</button>
+<!-- My account balance: {{bcInfoService.userBalance}} $$ <button (click)="updateUserBalance()">UPDATE</button>
 <br>
 Payment hash: {{bcInfoService.paymentHash}} <button (click)="pay()">SEND TX</button>
 <br>
 Price: {{bcInfoService.price}}$$
 <br>
-Data URL: {{bcInfoService.dataUrl}}
+Data URL: {{bcInfoService.dataUrl}} -->
+<div [hidden]="!isVisible()" class="mainpanel">
+    <hs-panel-header name="bc-panel" [title]="'Blockchain shop'"></hs-panel-header>
+    <div class="card-body">
+        <h1>henlooo</h1>
+        <button>choose area</button>
+    </div>
+</div>

src/app/bc-info/bc-info.component.ts

@@ -1,21 +1,34 @@
-import {Component, OnInit} from '@angular/core';
-import {BcInfoService} from './bc-info.service';
+import { Component, OnInit, ViewRef } from '@angular/core';
+import { BcInfoService } from './bc-info.service';
+
+import {
+  HsMapService,
+  HsPanelComponent,
+  HsLayoutService
+} from 'hslayers-ng';
 
 @Component({
   selector: 'blockchain-info',
   templateUrl: 'bc-info.component.html',
 })
 
-export class BcInfoComponent implements OnInit {
-  constructor(public bcInfoService: BcInfoService) {}
-
-  ngOnInit() {}
+export class BcInfoComponent implements OnInit, HsPanelComponent {
+  viewRef: ViewRef;
+  data: any;
+  name: string;
+  
+  constructor(
+    private bcInfoService: BcInfoService,
+    private mapService: HsMapService,
+    private hsLayoutService: HsLayoutService
+    ) { 
+      this.name = "bc-panel";
 
-  updateUserBalance() {
-    this.bcInfoService.getUserBalance();
+    }
+  
+  isVisible(): boolean {
+    return this.hsLayoutService.panelVisible(this.name);
   }
 
-  pay(){
-    this.bcInfoService.pay();
-  }
+  ngOnInit() { }
 }

src/app/bc-info/bc-info.module.ts

@@ -1,10 +1,12 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common'
 
+import { HsPanelHelpersModule } from 'hslayers-ng';
+
 import {BcInfoComponent} from './bc-info.component';
 
 @NgModule({
-  imports: [CommonModule],
+  imports: [CommonModule, HsPanelHelpersModule],
   exports: [BcInfoComponent],
   declarations: [BcInfoComponent],
   providers: [],