feat: display version in footer (#421)

---------

Co-authored-by: Konstantin <[email protected]>

Author: hf-kklein

src/app/core/api/api.module.ts

@@ -8,7 +8,7 @@ import { ApiConfiguration, ApiConfigurationParams } from './api-configuration';
 
 import { AhbService } from './services/ahb.service';
 import { MaintenanceService } from './services/maintenance.service';
-
+import { provideHttpClient } from '@angular/common/http';
 /**
  * Module that provides all services and configuration.
  */
@@ -19,7 +19,8 @@ import { MaintenanceService } from './services/maintenance.service';
   providers: [
     AhbService,
     MaintenanceService,
-    ApiConfiguration
+    ApiConfiguration,
+    provideHttpClient()
   ],
 })
 export class ApiModule {
@@ -35,7 +36,7 @@ export class ApiModule {
     }
   }
 
-  constructor( 
+  constructor(
     @Optional() @SkipSelf() parentModule: ApiModule,
     @Optional() http: HttpClient
   ) {

src/app/shared/components/footer/footer.component.html

@@ -17,7 +17,8 @@
   <div class="flex-1 flex justify-center">
     <div class="flex items-center text-sm text-black/70 space-x-1 text-center">
       <p class="flex items-center flex-wrap justify-center">
-        © {{ currentYear }} - made with <i class="mdi mdi-heart-outline text-lg mx-1"></i> by
+        © {{ currentYear }} - <app-version-display></app-version-display> - made with
+        <i class="mdi mdi-heart-outline text-lg mx-1"></i> by
         <a
           class="ml-1 mr-2 hover:underline font-bold"
           target="_blank"

src/app/shared/components/footer/footer.component.spec.ts

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { FooterComponent } from './footer.component';
+import { provideHttpClient } from '@angular/common/http';
 
 describe('FooterComponent', () => {
   let component: FooterComponent;
@@ -9,6 +9,7 @@ describe('FooterComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [FooterComponent],
+      providers: [provideHttpClient()],
     }).compileComponents();
 
     fixture = TestBed.createComponent(FooterComponent);

src/app/shared/components/footer/footer.component.ts

@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
+import { VersionDisplayComponent } from '../version-display/version-display.component';
 
 @Component({
   selector: 'app-footer',
   standalone: true,
-  imports: [],
+  imports: [VersionDisplayComponent],
   templateUrl: './footer.component.html',
 })
 export class FooterComponent {

src/app/shared/components/version-display/version-display.component.css

@@ -0,0 +1,3 @@
+<a *ngIf="version" title="Commit {{ commitId }} built on {{ buildDate }}" href="/version">{{
+  version
+}}</a>

src/app/shared/components/version-display/version-display.component.html

@@ -0,0 +1,56 @@
+import { Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+import { catchError, map } from 'rxjs/operators';
+import { of } from 'rxjs';
+
+interface VersionInfo {
+  version: string;
+  commitId: string;
+  buildDate: string;
+}
+
+@Component({
+  selector: 'app-version-display',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './version-display.component.html',
+  styleUrls: ['./version-display.component.css'],
+})
+export class VersionDisplayComponent {
+  version: string | null = null;
+  commitId: string | null = null;
+  buildDate: string | null = null;
+  private http = inject(HttpClient);
+
+  constructor() {
+    this.http
+      .get('/version', { responseType: 'text' }) // we don't know the build date at compile time
+      .pipe(
+        map((response: string) => {
+          try {
+            const parsedData: VersionInfo = JSON.parse(response);
+            if (parsedData.version && parsedData.commitId && parsedData.buildDate) {
+              return parsedData;
+            }
+            throw new Error('Invalid JSON structure');
+          } catch (error) {
+            console.warn(
+              'Response to /version endpoint is not valid JSON. This happens on localhost',
+              error
+            );
+            return { version: 'v0.0.0', commitId: '0000000', buildDate: 'Unknown' };
+          }
+        }),
+        catchError(error => {
+          console.error('Failed to load version info:', error);
+          return of({ version: 'Error', commitId: 'Unknown', buildDate: 'Unknown' });
+        })
+      )
+      .subscribe(data => {
+        this.version = data.version;
+        this.commitId = data.commitId;
+        this.buildDate = data.buildDate;
+      });
+  }
+}