better footnote styles

Author: hofiorg

src/main/js/app/component/footer/footnote.component.css

@@ -0,0 +1,10 @@
+.footer {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 25px;
+  margin: 0px;
+  font-size: 11px;
+  background-color: white;
+}

src/main/js/app/component/footer/footnote.component.html

@@ -1,5 +1,3 @@
-<div class="ms-3">
-    <small style="font-size: 10px;">
-    Build-version: {{version}}&nbsp;&nbsp;&nbsp;Build-timestamp: {{timestamp}}&nbsp;&nbsp;&nbsp;Customer: {{customer}}
-    </small>
-  </div>
+<div class="ps-3 footer">
+  &copy; {{currentYear}} &sdot; {{companyName}} &sdot; Build-version: {{version}} &sdot; Build-timestamp: {{timestamp}} &sdot; Customer: {{customer}}
+</div>

src/main/js/app/component/footer/footnote.component.ts

@@ -1,25 +1,39 @@
-import {Component} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {Meta} from '@angular/platform-browser';
 
 @Component({
     selector: 'footnote',
     standalone: true,
     providers: [],
     imports: [],
-    templateUrl: './footnote.component.html'
+    templateUrl: './footnote.component.html',
+    styleUrl: './footnote.component.css'
   })
-  export class FootnoteComponent {
-  
-    version: string | undefined;
-    timestamp: string | undefined;
-    customer: string | undefined;
-  
-    constructor(private meta: Meta) {
-      this.version = this.meta.getTag('name=version')?.content;
-      this.version = this.version === '@project.version@' ? 'DEV-SERVER' : this.version;
-      this.timestamp = this.meta.getTag('name=timestamp')?.content;
-      this.timestamp = this.timestamp === '@timestamp@' ? '-' : this.timestamp;
-      this.customer = this.meta.getTag('name=customer')?.content;
-      this.customer = this.customer === '@customer@' ? '-' : this.customer;
+export class FootnoteComponent implements OnInit {
+  private static hasLogged = false;
+
+  version: string | undefined;
+  timestamp: string | undefined;
+  customer: string | undefined;
+  currentYear = new Date().getFullYear();
+  companyName = 'hofi.org'
+
+  constructor(private meta: Meta) {
+  }
+
+  ngOnInit(): void {
+    this.version = this.meta.getTag('name=version')?.content;
+    this.version = this.version === '@project.version@' ? 'DEV-SERVER' : this.version;
+    this.timestamp = this.meta.getTag('name=timestamp')?.content;
+    this.timestamp = this.timestamp === '@timestamp@' ? 'DEV-SERVER' : this.timestamp;
+    this.customer = this.meta.getTag('name=customer')?.content;
+    this.customer = this.customer === '@customer@' ? 'DEV-SERVER' : this.customer;
+
+    if (!FootnoteComponent.hasLogged && this.version !== undefined) {
+      console.info(
+        `© ${this.currentYear} ⋅ ${this.companyName} ⋅ Build-version: ${this.version} ⋅ Build-timestamp: ${this.timestamp} ⋅ Customer: ${this.customer}`
+      );
+      FootnoteComponent.hasLogged = true; // Set the flag to true after logging
     }
+  }
 }

src/main/js/app/views/demo-details-view/demo-details-view.component.html

@@ -1,11 +1,12 @@
 <div class="view">
   <div class="header"></div>
-    <div class="container-fluid">
-      <h1 class="title">Demo Details</h1>
-      <div class="title-underline mb-2"></div>
+  <div class="container-fluid">
+    <h1 class="title">Demo Details</h1>
+    <div class="title-underline mb-2"></div>
 
-      <div class="col-2 mt-5">
-        <button mat-flat-button (click)="back()">Zurück</button>
-      </div>
+    <div class="col-2 mt-5">
+      <button mat-flat-button (click)="back()">Zurück</button>
     </div>
+  </div>
+  <footnote></footnote>
 </div>