chore(octra): improved popover for build information

apps/octra/src/app/app.component.html

@@ -2,7 +2,7 @@
   <octra-alert id="alerts"></octra-alert>
   <octra-modal></octra-modal>
   <header>
-    <octra-navigation #navigation [version]="version"></octra-navigation>
+    <octra-navigation #navigation></octra-navigation>
   </header>
   <main style="margin-top: 40px">
     <div

apps/octra/src/app/app.component.ts

@@ -1,7 +1,6 @@
 import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { environment } from '../environments/environment';
-import { AppInfo } from './app.info';
 import { NavigationComponent } from './core/component';
 import { MultiThreadingService } from './core/shared/multi-threading/multi-threading.service';
 import { AppStorageService } from './core/shared/service/appstorage.service';
@@ -22,10 +21,6 @@ export class AppComponent
     | NavigationComponent
     | undefined;
 
-  public get version(): string {
-    return AppInfo.version;
-  }
-
   public get environment(): any {
     return environment;
   }
@@ -45,8 +40,7 @@ export class AppComponent
     if (environment.debugging.enabled && environment.debugging.logging.routes) {
       this.subscrManager.add(
         this.router.events.subscribe((event: any) => {
-          if (event.url) {
-          } else if (event.snapshot) {
+          if (event.snapshot) {
             console.log(
               `route from ${event.url} to guard: ${event.snapshot.url}, component: ${event.snapshot.component?.name}`
             );

apps/octra/src/app/app.info.ts

@@ -14,9 +14,6 @@ import {
   WebVTTConverter,
 } from '@octra/annotation';
 
-declare let octraVersion: string;
-declare let octraLastUpdated: string;
-
 export class AppInfo {
   public static readonly audioformats = [new WavFormat()];
 
@@ -34,9 +31,6 @@ export class AppInfo {
   ];
 
   public static readonly themes: string[] = ['default', 'shortAudioFiles'];
-
-  static readonly version = octraVersion;
-  static readonly lastUpdate = octraLastUpdated;
   static readonly manualURL =
     'https://clarin.phonetik.uni-muenchen.de/apps/octra/manual/1.4.0/en/';
 

apps/octra/src/app/core/component/navbar/navbar.component.html

@@ -7,12 +7,9 @@
 >
   <div class="container-fluid">
     <a
-      [title]="
-        'last update: ' + (AppInfo.lastUpdate | date : 'dd.MM.yyyy H:mm z')
-      "
+      [ngbPopover]="versionPopover" popoverClass="version-popover"
       class="navbar-brand"
-      href="#"
-      >OCTRA v{{ version }}
+      >OCTRA v{{ BUILD.version }}
       <ng-container
         *ngIf="
           appStorage.useMode !== undefined && appStorage.useMode !== undefined
@@ -29,6 +26,34 @@
           </ng-template>
         </span>
     </a>
+    <ng-template #versionPopover>
+      <div id="build-information">
+        <div>
+          <div class="fw-bold">
+            Version:
+          </div>
+          <div>
+            {{BUILD.version}}
+          </div>
+        </div>
+        <div>
+          <div class="fw-bold">
+            Last updated:
+          </div>
+          <div>
+            {{BUILD.timestamp}}
+          </div>
+        </div>
+        <div>
+          <div class="fw-bold">
+            Hash:
+          </div>
+          <div style="font-size: 0.7rem;">
+            {{BUILD.hash}}
+          </div>
+        </div>
+      </div>
+    </ng-template>
     <button
       class="navbar-toggler"
       type="button"

apps/octra/src/app/core/component/navbar/navbar.component.scss

@@ -113,3 +113,9 @@
 .form-switch.form-check-reverse {
   display: block;
 }
+
+#build-information {
+  font-size: 0.75rem;
+  white-space: nowrap;
+  display: block;
+}

apps/octra/src/app/core/component/navbar/navbar.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { TranslocoService } from '@ngneat/transloco';
 import { environment } from '../../../../environments/environment';
@@ -34,20 +34,29 @@ import { AccountRole, ProjectDto } from '@octra/api-types';
 import { AuthenticationStoreService } from '../../store/authentication';
 import { OctraAPIService } from '@octra/ngx-octra-api';
 import { AboutModalComponent } from '../../modals/about-modal/about-modal.component';
+import { DateTime } from 'luxon';
+
+declare const BUILD: {
+  version: string;
+  hash: string;
+  timestamp: string;
+};
 
 @Component({
-  selector: 'octra-navigation',
-  templateUrl: './navbar.component.html',
-  styleUrls: ['./navbar.component.scss'],
+  selector: "octra-navigation",
+  templateUrl: "./navbar.component.html",
+  styleUrls: ["./navbar.component.scss"]
 })
 export class NavigationComponent extends DefaultComponent implements OnInit {
   modalexport?: NgbModalRef;
   modalTools?: NgbModalRef;
   modalStatistics?: NgbModalRef;
 
-  @Input() version?: string;
+  public get BUILD() {
+    return BUILD;
+  }
 
-  public test = 'ok';
+  public test = "ok";
 
   isCollapsed = true;
 
@@ -90,8 +99,8 @@ export class NavigationComponent extends DefaultComponent implements OnInit {
           return true;
         }
         if (
-          typeof a.message === 'string' &&
-          a.message.indexOf('AFTER RELOAD') > -1
+          typeof a.message === "string" &&
+          a.message.indexOf("AFTER RELOAD") > -1
         ) {
           beginCheck = true;
         }
@@ -117,16 +126,18 @@ export class NavigationComponent extends DefaultComponent implements OnInit {
   }
 
   ngOnInit() {
+    BUILD.timestamp = DateTime.fromISO(BUILD.timestamp).toLocaleString(DateTime.DATETIME_SHORT_WITH_SECONDS);
+
     this.subscrManager.add(
       this.navbarServ.onclick.subscribe((name) => {
         switch (name) {
-          case 'export':
+          case "export":
             this.modalexport = this.modalService.openModalRef(
               ExportFilesModalComponent,
               ExportFilesModalComponent.options,
               {
                 navbarService: this,
-                uiService: this.uiService,
+                uiService: this.uiService
               }
             );
             break;
@@ -153,7 +164,7 @@ export class NavigationComponent extends DefaultComponent implements OnInit {
 
   toggleSettings(option: string) {
     (this.appStorage as any)[option] = !(this.appStorage as any)[option];
-    if (option === 'logging') {
+    if (option === "logging") {
       this.uiService.enabled = this.appStorage[option];
     }
   }
@@ -162,7 +173,7 @@ export class NavigationComponent extends DefaultComponent implements OnInit {
     this.modalService
       .openModal(BugreportModalComponent, BugreportModalComponent.options)
       .then(() => {
-        window.location.hash = '';
+        window.location.hash = "";
       })
       .catch((err) => {
         console.error(err);
@@ -180,12 +191,12 @@ export class NavigationComponent extends DefaultComponent implements OnInit {
   onLevelRemoveClick(level: OctraAnnotationAnyLevel<OctraAnnotationSegment>) {
     this.modalService
       .openModal(YesNoModalComponent, YesNoModalComponent.options, {
-        message: this.langService.translate('modal.level remove', {
-          name: level.name,
-        }),
+        message: this.langService.translate("modal.level remove", {
+          name: level.name
+        })
       })
       .then((answer) => {
-        if (answer === 'yes') {
+        if (answer === "yes") {
           this.appStorage.removeAnnotationLevel(level.id).catch((err) => {
             console.error(err);
           });
@@ -214,7 +225,7 @@ export class NavigationComponent extends DefaultComponent implements OnInit {
       ExportFilesModalComponent.options,
       {
         navbarService: this,
-        uiService: this.uiService,
+        uiService: this.uiService
       }
     );
   }
@@ -254,7 +265,7 @@ export class NavigationComponent extends DefaultComponent implements OnInit {
 
   getFreeAnnotationTasks(project: ProjectDto | undefined) {
     return (
-      project?.statistics?.tasks.find((a) => a.type === 'annotation')?.status
+      project?.statistics?.tasks.find((a) => a.type === "annotation")?.status
         .free ?? 0
     );
   }

apps/octra/src/app/core/shared/service/bug-report.service.ts

@@ -1,7 +1,6 @@
 import { Injectable } from '@angular/core';
 import { TranslocoService } from '@ngneat/transloco';
 import { Observable } from 'rxjs';
-import { AppInfo } from '../../../app.info';
 import { AppStorageService } from './appstorage.service';
 import { getFileSize, SubscriptionManager } from '@octra/utilities';
 import { LoginMode } from '../../store';
@@ -30,6 +29,12 @@ export interface BugReportCredentials {
   url: string;
 }
 
+declare const BUILD: {
+  version: string;
+  hash: string;
+  timestamp: string;
+};
+
 @Injectable()
 export class BugReportService {
   private fromDBLoaded = false;
@@ -106,12 +111,12 @@ export class BugReportService {
       },
       protocol: {
         tool: {
-          version: AppInfo.version,
+          version: BUILD.version,
           language: this.langService.getActiveLang(),
           signed_in: this.appStorage.loggedIn,
           useMode: this.appStorage.useMode,
           url: window.location.href,
-          lastUpdated: AppInfo.lastUpdate,
+          lastUpdated: BUILD.timestamp,
           project: undefined,
           user: undefined,
           jobID: undefined,
@@ -186,7 +191,7 @@ export class BugReportService {
       body = removeProperties(body, ['technicalInformation', 'protocol']);
     }
 
-    console.log("send feedback");
+    console.log('send feedback');
     return this.api.sendFeedback(
       body,
       screenshots?.map((a) => a.blob)

apps/octra/src/app/core/store/login-mode/annotation/annotation.effects.ts

@@ -73,6 +73,12 @@ import { DateTime } from 'luxon';
 import { FeedBackForm } from '../../../obj/FeedbackForm/FeedBackForm';
 import { FileInfo } from '@octra/web-media';
 
+declare const BUILD: {
+  version: string;
+  hash: string;
+  timestamp: string;
+};
+
 @Injectable()
 export class AnnotationEffects {
   transcrSendingModal: {
@@ -221,7 +227,7 @@ export class AnnotationEffects {
             );
             this.uiService.addElementFromEvent(
               'octra',
-              { value: AppInfo.version },
+              { value: BUILD.version },
               Date.now(),
               undefined,
               undefined,
@@ -1496,7 +1502,7 @@ export class AnnotationEffects {
 
         this.uiService.addElementFromEvent(
           'octra',
-          { value: AppInfo.version },
+          { value: BUILD.version },
           Date.now(),
           undefined,
           undefined,

apps/octra/src/index.html

@@ -98,9 +98,12 @@
         background-color: #009688 !important;
       }
     </style>
-    <script type="application/javascript">
-      const octraLastUpdated = '2015-02-26T14:10:43+01:00';
-      const octraVersion = '2.0.0';
+    <script type="application/javascript" id="build_meta">
+      var BUILD = {
+        "version": "2.0.0",
+        "hash": "1234-1234-1234-1234",
+        "timestamp": "23.11.23 12:00"
+      };
     </script>
   </head>
   <body>

apps/octra/src/styles.scss

@@ -485,7 +485,7 @@ ngx-jodit {
   height: 200px !important;
 }
 
-.text-outline-white{
+.text-outline-white {
   text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white !important;
 }
 
@@ -524,3 +524,7 @@ ngx-jodit {
   padding: 10px;
   min-height: 1em;
 }
+
+.version-popover {
+  min-width: 300px;
+}

build.js

@@ -81,8 +81,6 @@ node.on("exit", function(code) {
   indexHTML = indexHTML.replace(/(runtime\.[0-9a-z]*\.js)/g, `${targetFolder}/$1`);
   indexHTML = indexHTML.replace(/(styles\.[0-9a-z]*\.css)/g, `${targetFolder}/$1`);
   indexHTML = indexHTML.replace(/(vendor\.[0-9a-z]*\.js)/g, `${targetFolder}/$1`);
-  indexHTML = indexHTML.replace(/(const octraLastUpdated = ').*(';)/g, `$1${timeNow}$2`);
-  indexHTML = indexHTML.replace(/(const octraVersion = ').*(';)/g, `$1${version}$2`);
 
   fs.writeFileSync(`${buildDir}index.html`, indexHTML, {
     encoding: "utf8"