🤡 prepare app layout

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 jmacura
+Copyright (c) 2022 plan4all
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,22 +1,24 @@
-# template-hslayers
+# chain4all-frontend
 
-This is a project template for [HSLayers-NG](https://ng.hslayers.org/) "full" apps. It lives at https://github.com/jmacura/template-hslayers.
+Front-end part of Plan4All's experimental blockchain application *Chain4All*.
+## Get started
 
-To create a new project based on this template use degit:
+*Note that you will need to have [Node.js](nodejs.org) installed.*
 
 ```
-npx degit jmacura/template-hslayers hslayers-app
-cd hslayers-app
+git clone https://git.lesprojekt.cz/jmacura/chain4all-frontend chain4all-frontend
 ```
 
-*Note that you will need to have [Node.js](nodejs.org) installed.*
+or
 
-## Get started
+```
+npx degit https://git.lesprojekt.cz/jmacura/chain4all-frontend chain4all-frontend
+```
 
 Install the dependencies...
 
 ```
-cd hslayers-app
+cd chain4all-frontend
 npm install
 ```
 
@@ -28,6 +30,4 @@ npm install
 npm run dev
 ```
 
-Navigate to localhost:4200. You should see your app running. Edit a component file in src, save it, and the page should reload with your changes.
-
-Idea for this project template was taken from https://github.com/sveltejs/template-webpack. Kudos to its authors.
+Navigate to localhost:4200. You should see the app running.

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "hslayers-app",
+  "name": "chain4all-frontend",
   "version": "0.1.0",
   "lockfileVersion": 2,
   "requires": true,

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "hslayers-app",
+  "name": "chain4all-frontend",
   "version": "0.1.0",
   "description": "HSLayers-NG application",
   "main": "build/index.html",

src/app/app.component.html

@@ -1 +1,13 @@
-<hslayers></hslayers>
+<h1 class="pl-2">Chain4All</h1>
+<div class="map-row">
+  <div class="hs-map">
+    <hslayers></hslayers>
+  </div>
+  <div class="blockchain-info">
+    <blockchain-info></blockchain-info>
+  </div>
+</div>
+<div class="pl-2">
+  <h3>About</h3>
+  <p>blah blah blah</p>
+</div>

src/app/app.component.spec.ts

@@ -1,5 +1,5 @@
 import {HsConfig} from 'hslayers-ng';
-import {HslayersAppComponent} from './app.component';
+import {AppComponent} from './app.component';
 import {TestBed, waitForAsync} from '@angular/core/testing';
 class HsConfigMock {
   constructor() {}
@@ -8,26 +8,26 @@ describe('AppComponent', () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
-        declarations: [HslayersAppComponent],
+        declarations: [AppComponent],
         providers: [{provide: HsConfig, useValue: new HsConfigMock()}],
       }).compileComponents();
     })
   );
 
   it('should create the app', () => {
-    const fixture = TestBed.createComponent(HslayersAppComponent);
+    const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
 
   it(`should have as title 'hslayers-workspace'`, () => {
-    const fixture = TestBed.createComponent(HslayersAppComponent);
+    const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
     expect(app.title).toEqual('hslayers-workspace');
   });
 
   it('should render title', () => {
-    const fixture = TestBed.createComponent(HslayersAppComponent);
+    const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement;
     expect(compiled.querySelector('.content span').textContent).toContain(

src/app/app.component.ts

@@ -1,171 +1,22 @@
 import {Component} 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 {
-  HsConfig,
-  HsEventBusService,
-  HsToastService
+  HsConfig
 } from 'hslayers-ng';
+import {AppService} from './app.service';
 
 @Component({
   selector: 'application-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })
-export class HslayersAppComponent {
+export class AppComponent {
   /* You can name your app as you like or not at all */
-  title = 'hslayers-application';
+  title = 'chain4all';
   constructor(
     /* Inject here all modules from HSLayers-NG which you intend to use */
-    public hsConfig: HsConfig, /* public properties are visible in the template */
-    private hsEventBusService: HsEventBusService, /* private properties are only visible from within this component class */
-    private hsToastService: HsToastService,
+    public appService: AppService,
+    public hsConfig: HsConfig /* public properties are visible in the template */
   ) {
-    /* Define a geometry of one square polygon */
-    const geojsonObject = {
-      'type': 'FeatureCollection',
-      'crs': {
-        'type': 'name',
-        'properties': {
-          'name': 'EPSG:3857',
-        },
-      },
-      'features': [
-        {
-          'type': 'Feature',
-          'geometry': {
-            'type': 'Polygon',
-            'coordinates': [
-              [
-                [1e6, 6e6],
-                [1e6, 8e6],
-                [3e6, 8e6],
-                [3e6, 6e6],
-                [1e6, 6e6],
-              ],
-            ],
-          },
-          'properties': {
-            'name': 'Poly 1',
-            'population': Math.floor(Math.random() * 100000),
-          },
-        },
-      ],
-    };
-    /* Define the polygon's style using SLD */
-    const polygonSld = `<?xml version="1.0" encoding="ISO-8859-1"?>
-      <StyledLayerDescriptor version="1.0.0" 
-          xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd" 
-          xmlns="http://www.opengis.net/sld" 
-          xmlns:ogc="http://www.opengis.net/ogc" 
-          xmlns:xlink="http://www.w3.org/1999/xlink" 
-          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
-        <NamedLayer>
-          <Name>Simple point with stroke</Name>
-          <UserStyle>
-            <Title>Default</Title>
-            <FeatureTypeStyle>
-              <Rule>
-              <PolygonSymbolizer>
-              <Fill>
-                <CssParameter name="fill">#000080</CssParameter>
-              </Fill>
-            </PolygonSymbolizer>
-              </Rule>
-            </FeatureTypeStyle>
-          </UserStyle>
-        </NamedLayer>
-      </StyledLayerDescriptor>
-    `;
-    /* Define and update the HsConfig configuration object */
-    this.hsConfig.update({
-      datasources: [
-        /* You need to set up Layman in order to use it. See https://github.com/LayerManager/layman */
-        /*{
-          title: 'Layman',
-          url: 'http://localhost:8087',
-          user: 'anonymous',
-          type: 'layman',
-          liferayProtocol: 'https',
-        },*/
-        {
-          title: 'Micka',
-          url: 'https://hub.sieusoil.eu/cat/csw',
-          language: 'eng',
-          type: 'micka',
-        },
-      ],
-      /* Use hslayers-server if you need to proxify your requests to other services. See https://www.npmjs.com/package/hslayers-server */
-      /* proxyPrefix: window.location.hostname.includes('localhost')
-        ? `${window.location.protocol}//${window.location.hostname}:8085/`
-        : '/proxy/',
-      */
-      useProxy: false,
-      panelsEnabled: {
-        tripPlanner: true,
-      },
-      componentsEnabled: {
-        basemapGallery: true,
-      },
-      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'},
-      ],
-      popUpDisplay: 'hover',
-      default_layers: [
-        /* One baselayer */
-        new Tile({
-          source: new OSM(),
-          visible: true,
-          properties: {
-            title: 'OpenStreetMap',
-            base: true,
-            removable: false,
-          },
-        }),
-        /* One thematic layer */
-        new VectorLayer({
-          properties: {
-            title: 'Polygon vector layer',
-            synchronize: false,
-            cluster: false,
-            inlineLegend: true,
-            popUp: {
-              attributes: ['population'],
-            },
-            editor: {
-              editable: true,
-              defaultAttributes: {
-                name: 'New polygon',
-                description: 'none',
-              },
-            },
-            sld: polygonSld,
-            path: 'User generated',
-          },
-          source: new VectorSource({
-            features: new GeoJSON().readFeatures(geojsonObject),
-          }),
-        }),
-      ],
-    });
-    /* 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/ */
-        }
-      );
-    })
   }
 }

src/app/app.module.ts

@@ -1,13 +1,15 @@
 import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
 
-import {HslayersAppComponent} from './app.component';
 import {HslayersModule} from 'hslayers-ng';
 
+import {AppComponent} from './app.component';
+import {BcInfoModule} from './bc-info/bc-info.module';
+
 @NgModule({
-  declarations: [HslayersAppComponent],
-  imports: [BrowserModule, HslayersModule],
+  declarations: [AppComponent],
+  imports: [BrowserModule, HslayersModule, BcInfoModule],
   providers: [],
-  bootstrap: [HslayersAppComponent],
+  bootstrap: [AppComponent],
 })
 export class AppModule {}

src/app/app.service.ts

@@ -0,0 +1,165 @@
+import {Injectable} 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 {
+  HsConfig,
+  HsEventBusService,
+  HsToastService
+} from 'hslayers-ng';
+
+@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
+    ) {
+    /* Define a geometry of one square polygon */
+    /*const geojsonObject = {
+      'type': 'FeatureCollection',
+      'crs': {
+        'type': 'name',
+        'properties': {
+          'name': 'EPSG:3857',
+        },
+      },
+      'features': [
+        {
+          'type': 'Feature',
+          'geometry': {
+            'type': 'Polygon',
+            'coordinates': [
+              [
+                [1e6, 6e6],
+                [1e6, 8e6],
+                [3e6, 8e6],
+                [3e6, 6e6],
+                [1e6, 6e6],
+              ],
+            ],
+          },
+          'properties': {
+            'name': 'Poly 1',
+            'population': Math.floor(Math.random() * 100000),
+          },
+        },
+      ],
+    };*/
+    /* Define the polygon's style using SLD */
+    /*const polygonSld = `<?xml version="1.0" encoding="ISO-8859-1"?>
+      <StyledLayerDescriptor version="1.0.0" 
+          xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd" 
+          xmlns="http://www.opengis.net/sld" 
+          xmlns:ogc="http://www.opengis.net/ogc" 
+          xmlns:xlink="http://www.w3.org/1999/xlink" 
+          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
+        <NamedLayer>
+          <Name>Simple point with stroke</Name>
+          <UserStyle>
+            <Title>Default</Title>
+            <FeatureTypeStyle>
+              <Rule>
+              <PolygonSymbolizer>
+              <Fill>
+                <CssParameter name="fill">#000080</CssParameter>
+              </Fill>
+            </PolygonSymbolizer>
+              </Rule>
+            </FeatureTypeStyle>
+          </UserStyle>
+        </NamedLayer>
+      </StyledLayerDescriptor>
+    `;*/
+    /* Define and update the HsConfig configuration object */
+    this.hsConfig.update({
+      datasources: [
+        /* You need to set up Layman in order to use it. See https://github.com/LayerManager/layman */
+        /*{
+          title: 'Layman',
+          url: 'http://localhost:8087',
+          user: 'anonymous',
+          type: 'layman',
+          liferayProtocol: 'https',
+        },*/
+        {
+          title: 'Micka',
+          url: 'https://hub.sieusoil.eu/cat/csw',
+          language: 'eng',
+          type: 'micka',
+        },
+      ],
+      /* Use hslayers-server if you need to proxify your requests to other services. See https://www.npmjs.com/package/hslayers-server */
+      /* proxyPrefix: window.location.hostname.includes('localhost')
+        ? `${window.location.protocol}//${window.location.hostname}:8085/`
+        : '/proxy/',
+      */
+      useProxy: false,
+      panelsEnabled: {
+        composition_browser: false,
+        tripPlanner: false,
+      },
+      componentsEnabled: {
+        basemapGallery: true,
+      },
+      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'},
+      ],
+      popUpDisplay: 'hover',
+      default_layers: [
+        /* One baselayer */
+        new Tile({
+          source: new OSM(),
+          visible: true,
+          properties: {
+            title: 'OpenStreetMap',
+            base: true,
+            removable: false,
+          },
+        }),
+        /* One thematic layer */
+        /*new VectorLayer({
+          properties: {
+            title: 'Polygon vector layer',
+            synchronize: false,
+            cluster: false,
+            inlineLegend: true,
+            editor: {
+              editable: true,
+              defaultAttributes: {
+                name: 'New polygon',
+                description: 'none',
+              },
+            },
+            //sld: polygonSld,
+            path: 'User generated',
+          },
+          source: new VectorSource({
+            features: new GeoJSON().readFeatures(geojsonObject),
+          }),
+        }),*/
+      ],
+      sizeMode: 'container',
+      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/ */
+            }
+          );
+        })
+  }
+}

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

@@ -0,0 +1,3 @@
+My account balance: $$
+<br>
+Price: $$

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

@@ -0,0 +1,12 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'blockchain-info',
+  templateUrl: 'bc-info.component.html',
+})
+
+export class BcInfoComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

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

@@ -0,0 +1,11 @@
+import {NgModule} from '@angular/core';
+
+import {BcInfoComponent} from './bc-info.component';
+
+@NgModule({
+  imports: [],
+  exports: [BcInfoComponent],
+  declarations: [BcInfoComponent],
+  providers: [],
+})
+export class BcInfoModule {}

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

@@ -0,0 +1,7 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({providedIn: 'root'})
+export class BcInfoService {
+  constructor() {}
+  
+}

src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>HSLayers-NG application</title>
+  <title>Chain4All | HSLayers-NG application</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">

src/styles.scss

@@ -2,6 +2,14 @@
 //@import "bootstrap/scss/functions";
 //@import "bootstrap/scss/variables";
 
+.hs-map {
+  width: 75%;
+}
+.map-row {
+  display: flex;
+  height: 30rem;
+}
+
 .hsl {
   /*
   hs-sidebar, .hs-sidebar-list, .hs-sidebar-item {
@@ -11,4 +19,4 @@
     color: $primary
   }
   */
-}
+}