Display frontend and backend version

README.md

@@ -1,31 +1,7 @@
-# GisafApp
+# Gisaf frontend
 
-This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.24.
+The web app (front-end, user interface) for Gisaf,
+a web based GIS initially developed for CSR Geomatics, Auroville.
 
-## Development server
+See the [Gisaf server repository](https://code.philo.ydns.eu/philorg/gisaf-backend)
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+for information about this project.
-
-## Code scaffolding
-
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.
-
-## Build
-
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
-
-## Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-Before running the tests make sure you are serving the app via `ng serve`.
-
-## Deploying to Github Pages
-
-Run `ng github-pages:deploy` to deploy to Github Pages.
-
-## Further help
-
-To get more help on the `angular-cli` use `ng help` or go check out the [Angular-CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

src/app/app.component.html

@@ -2,7 +2,7 @@
     <mat-toolbar fxFlex="2em" id='top-toolbar'>
         <span
             style='font-family:GisafSymbols'
-            matTooltip="Gisaf v. {{ (configService.conf | async).bsData?.version }}"
+            matTooltip="Gisaf version: backend {{ version.backend }}, frontend {{ version.frontend }}"
             matTooltipPosition="below"
             class='gisafIcon'
             >

src/app/app.component.ts

@@ -1,5 +1,7 @@
-import { Component, OnInit,
+import {
-    ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'
+  Component, OnInit,
+  ChangeDetectionStrategy, ChangeDetectorRef
+} from '@angular/core'
 import { Title } from '@angular/platform-browser'
 import { BootstrapService } from './_services/bootstrap.service'
 import { ConfigService } from './_services/config.service'
@@ -8,6 +10,12 @@ import { MatDialog, MatDialogRef } from '@angular/material/dialog'
 
 import { AuthenticationService } from './_services/authentication.service'
 import { LoginDialogComponent } from './login/login.component'
+import versionJson from '../version.json'
+
+export class Version {
+  public backend: string
+  public frontend: string
+}
 
 @Component({
   selector: 'app-root',
@@ -16,8 +24,8 @@ import { LoginDialogComponent } from './login/login.component'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent implements OnInit {
-    title = 'Gisaf'
+  title: string = 'Gisaf'
-    version: string
+  version: Version = new Version()
 
   routes = [
     {
@@ -52,7 +60,8 @@ export class AppComponent implements OnInit {
     // Bootstrap: set app wide configuration
     this.bootstrapService.get().subscribe({
       next: res => {
-                this.version = res.version
+        this.version.backend = res.version
+        this.version.frontend = versionJson["version"]
         this.title = res.title || this.title
         this.titleService.setTitle(res.windowTitle || this.title)
         this.configService.setConf(res)

src/app/map/gisaf-mapbox/gisaf-mapbox.component.ts

@@ -197,9 +197,18 @@ export class GisafMapboxComponent implements OnInit, OnDestroy {
   }
 
   _getNewSingleOpacity(layerId: string, originalOpacity: number | object): number | object {
-    if (typeof (originalOpacity) === 'number') {
+    if (originalOpacity === undefined) {
+      return undefined
+    }
+    else if (typeof originalOpacity === 'number') {
       return originalOpacity * this._baseStyleOpacity
     }
+    else if (typeof originalOpacity === 'object') {  // Also matches array
+      if (originalOpacity[0] == 'interpolate') {
+        // Change the last interpolation point
+        originalOpacity[Object.values(originalOpacity).length - 1] = this._baseStyleOpacity
+        return originalOpacity
+      }
       else {
         let newOpacity = {}
         for (const k in originalOpacity) {
@@ -214,30 +223,40 @@ export class GisafMapboxComponent implements OnInit, OnDestroy {
         return newOpacity
       }
     }
+    else {
+      console.log(`Cannot process opacity of layer ${layerId}, unknown type ${typeof originalOpacity}`)
+      return originalOpacity
+    }
+  }
 
   _getNewOpacity(layer: object): object {
     let originalStyle = this.originalBaseStyle.style['layers'].find(
       (_layer: object) => layer['id'] == _layer['id']
     )
-    if (!('paint' in originalStyle)) {
+    let originalPaint = originalStyle['paint'] || {}
-      originalStyle['paint'] = {}
+    if (layer['type'] == 'symbol') {
-    }
-    if (['raster', 'background', 'fill', 'line'].indexOf(layer['type']) != -1) {
-      let prop = layer['type'] + '-opacity'
-      return {
-        [prop]: this._getNewSingleOpacity(layer['id'], originalStyle['paint'][prop] || 1.0)
-      }
-    }
-    else {
       let prop1 = 'text-opacity'
       let prop2 = 'icon-opacity'
-      let newOpacity1 = this._getNewSingleOpacity(layer['id'], originalStyle['paint'][prop1] || 1.0)
+      let newOpacity1 = this._getNewSingleOpacity(layer['id'], originalPaint[prop1] || 1.0)
-      let newOpacity2 = this._getNewSingleOpacity(layer['id'], originalStyle['paint'][prop2] || 1.0)
+      let newOpacity2 = this._getNewSingleOpacity(layer['id'], originalPaint[prop2] || 1.0)
       return {
         [prop1]: newOpacity1,
         [prop2]: newOpacity2,
       }
     }
+    else if (layer['type'] == 'line') {
+      let prop = layer['type'] + '-opacity'
+      return {
+        [prop]: this._getNewSingleOpacity(layer['id'], originalPaint[prop] || 1.0)
+      }
+    }
+    else {
+      // layer['type'] in ['raster', 'background', 'fill', 'line', 'fill-extrusion']
+      let prop = layer['type'] + '-opacity'
+      return {
+        [prop]: this._getNewSingleOpacity(layer['id'], originalPaint[prop] || 1.0),
+      }
+    }
   }
 
   applyBaseStyleOpacity() {
@@ -247,10 +266,12 @@ export class GisafMapboxComponent implements OnInit, OnDestroy {
         continue
       }
       for (const [key, value] of Object.entries(this._getNewOpacity(bsLayer))) {
+        if (value !== undefined) {
           this.map.setPaintProperty(bsLayer.id, key, value)
         }
       }
     }
+  }
 
   /*
    * For reference:

src/version.json

@@ -0,0 +1,3 @@
+{
+  "version": "0.0.0"
+}

tsconfig.json

@@ -1,24 +1,25 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
-    "importHelpers": true,
-    "module": "es2020",
-    "esModuleInterop": true,
-    "outDir": "./dist/out-tsc",
-    "sourceMap": true,
     "declaration": false,
-    "moduleResolution": "node",
+    "esModuleInterop": true,
     "experimentalDecorators": true,
-    "target": "ES2022",
+    "importHelpers": true,
-    "typeRoots": [
-      "node_modules/@types",
-      "@types"
-    ],
     "lib": [
       "es2019",
       "dom",
       "esnext.asynciterable"
     ],
+    "module": "es2020",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "target": "ES2022",
+    "typeRoots": [
+      "node_modules/@types",
+      "@types"
+    ],
     "useDefineForClassFields": false
   },
   "angularCompilerOptions": {