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,80 +10,87 @@ 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',
+  selector: 'app-root',
-    templateUrl: './app.component.html',
+  templateUrl: './app.component.html',
-    styleUrls: ['./app.component.css'],
+  styleUrls: ['./app.component.css'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent implements OnInit {
-    title = 'Gisaf'
+  title: string = 'Gisaf'
-    version: string
+  version: Version = new Version()
 
-    routes = [
+  routes = [
-        {
+    {
-            'target': 'dashboard',
+      'target': 'dashboard',
-            'icon': 'home',
+      'icon': 'home',
-            'text': 'Home',
+      'text': 'Home',
-        },
+    },
-        {
+    {
-            'target': 'map',
+      'target': 'map',
-            'icon': 'map',
+      'icon': 'map',
-            'text': 'Map',
+      'text': 'Map',
-        },
+    },
-        {
+    {
-            'target': 'measures',
+      'target': 'measures',
-            'icon': 'insert_chart',
+      'icon': 'insert_chart',
-            'text': 'Measures',
+      'text': 'Measures',
-        },
+    },
-    ]
+  ]
 
-    constructor(
+  constructor(
-        public configService: ConfigService,
+    public configService: ConfigService,
-        private titleService: Title,
+    private titleService: Title,
-        private bootstrapService: BootstrapService,
+    private bootstrapService: BootstrapService,
-        public authenticationService: AuthenticationService,
+    public authenticationService: AuthenticationService,
-        private snackBar: MatSnackBar,
+    private snackBar: MatSnackBar,
-        private cdr: ChangeDetectorRef,
+    private cdr: ChangeDetectorRef,
-        public dialogRef: MatDialogRef<LoginDialogComponent>,
+    public dialogRef: MatDialogRef<LoginDialogComponent>,
-        public dialog: MatDialog
+    public dialog: MatDialog
-    ) {}
+  ) { }
 
-    ngOnInit() {
+  ngOnInit() {
-        // Bootstrap: set app wide configuration
+    // Bootstrap: set app wide configuration
-        this.bootstrapService.get().subscribe({
+    this.bootstrapService.get().subscribe({
-            next: res => {
+      next: res => {
-                this.version = res.version
+        this.version.backend = res.version
-                this.title = res.title || this.title
+        this.version.frontend = versionJson["version"]
-                this.titleService.setTitle(res.windowTitle || this.title)
+        this.title = res.title || this.title
-                this.configService.setConf(res)
+        this.titleService.setTitle(res.windowTitle || this.title)
-                if (res.redirect && (window != window.top)) {
+        this.configService.setConf(res)
-                    // Refusing to be embedded in an iframe
+        if (res.redirect && (window != window.top)) {
-                    let loc = res.redirect + window.location.pathname
+          // Refusing to be embedded in an iframe
-                    window.document.body.innerHTML = `
+          let loc = res.redirect + window.location.pathname
+          window.document.body.innerHTML = `
                     The web site you are visiting is trying to embed Gisaf (${this.title}) in an iFrame, it isn't a nice thing to do.</br>
                     Please click this link to go to the real site: <span style='cursor:pointer' onclick="window.open('${loc}')"><b>${loc}</b></span>
                     `
-                }
+        }
-            },
+      },
-            error: err => {
+      error: err => {
-                this.snackBar.open(
+        this.snackBar.open(
-                    'Cannot connect to the server (' + err.statusText + '). Please retry later.',
+          'Cannot connect to the server (' + err.statusText + '). Please retry later.',
-                    'OK'
+          'OK'
-                )
+        )
-            }
+      }
-        })
+    })
-    }
+  }
 
-    openLoginDialog() {
+  openLoginDialog() {
-        const dialogRef = this.dialog.open(LoginDialogComponent, {
+    const dialogRef = this.dialog.open(LoginDialogComponent, {
-            height: '24em',
+      height: '24em',
-            width: '21em'
+      width: '21em'
-        })
+    })
 
-        // dialogRef.afterClosed().subscribe(
+    // dialogRef.afterClosed().subscribe(
-        //     result => {}
+    //     result => {}
-        // )
+    // )
-    }
+  }
 }

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

@@ -197,21 +197,35 @@ 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 {
+    else if (typeof originalOpacity === 'object') {  // Also matches array
-      let newOpacity = {}
+      if (originalOpacity[0] == 'interpolate') {
-      for (const k in originalOpacity) {
+        // Change the last interpolation point
-        let v = originalOpacity[k]
+        originalOpacity[Object.values(originalOpacity).length - 1] = this._baseStyleOpacity
-        if (k == 'stops') {
+        return originalOpacity
-          newOpacity[k] = v.map(stop => [stop[0], stop[1] * this._baseStyleOpacity])
-        }
-        else {
-          newOpacity[k] = v
-        }
       }
-      return newOpacity
+      else {
+        let newOpacity = {}
+        for (const k in originalOpacity) {
+          let v = originalOpacity[k]
+          if (k == 'stops') {
+            newOpacity[k] = v.map(stop => [stop[0], stop[1] * this._baseStyleOpacity])
+          }
+          else {
+            newOpacity[k] = v
+          }
+        }
+        return newOpacity
+      }
+    }
+    else {
+      console.log(`Cannot process opacity of layer ${layerId}, unknown type ${typeof originalOpacity}`)
+      return originalOpacity
     }
   }
 
@@ -219,25 +233,30 @@ export class GisafMapboxComponent implements OnInit, OnDestroy {
     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,7 +266,9 @@ export class GisafMapboxComponent implements OnInit, OnDestroy {
         continue
       }
       for (const [key, value] of Object.entries(this._getNewOpacity(bsLayer))) {
-        this.map.setPaintProperty(bsLayer.id, key, value)
+        if (value !== undefined) {
+          this.map.setPaintProperty(bsLayer.id, key, value)
+        }
       }
     }
   }

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": {