Display frontend and backend version

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'
             >
@@ -47,4 +47,4 @@
             <mat-icon>account_circle</mat-icon>
         </a>
     </nav>
-</ng-template>
+</ng-template>

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/version.json

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

tsconfig.json

@@ -1,27 +1,28 @@
 {
   "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": {
     "strictTemplates": true
   }
-}
+}