Added preliminary support for language fields

albaintor · Oct 14, 2024 · 94c6625 · 94c6625
1 parent 25117c6
commit 94c6625
Show file tree

Hide file tree

Showing 13 changed files with 137 additions and 216 deletions.
diff --git a/server/app.js b/server/app.js
@@ -1161,12 +1161,6 @@ app.delete('/api/uploaded_files/:filename', (req, res, next) => {
   }
 })
 
-// app.ws('/ws', (ws, req) => {
-//   ws.on('message', function(msg) {
-//     console.log(msg);
-//   });
-// })
-
 app.all('*', function (req, res, next) {
   res.status(200).sendFile(`/`, {root: 'public/browser'});
 });

diff --git a/src/app/active-entities/active-entities.component.ts b/src/app/active-entities/active-entities.component.ts
@@ -318,7 +318,8 @@ export class ActiveEntitiesComponent implements OnInit {
         this.cdr.detectChanges();
       },
       error: error => {
-        this.messageService.add({severity:'error', summary: "Wake on lan command sent", key: 'activeEntities'});
+        console.error(error);
+        this.messageService.add({severity:'error', summary: "Error while sending wake on lan command", key: 'activeEntities'});
         this.cdr.detectChanges();
       }
     });

diff --git a/src/app/activity-editor/activity-editor.component.ts b/src/app/activity-editor/activity-editor.component.ts
@@ -169,13 +169,6 @@ export class ActivityEditorComponent implements OnInit, AfterViewInit {
       this.buttonsMap = butonsMap;
       this.cdr.detectChanges();
     })
-
-    this.server.getConfig().subscribe(config => {
-      this.updateRemote(config).subscribe();
-      this.server.config$.subscribe(config => {
-        this.updateRemote(config).subscribe(config => this.buildData());
-      })
-    })
     this.server.getTemplateRemoteMap().subscribe(templates => {
       this.templates = templates;
       if (!this.lockOperations) this.remoteOperations = this.buildData();
@@ -200,6 +193,9 @@ export class ActivityEditorComponent implements OnInit, AfterViewInit {
   }
 
   ngAfterViewInit(): void {
+    this.server.config$.subscribe(config => {
+      if (config) this.updateRemote(config).subscribe(config => this.buildData());
+    })
     this.activatedRoute.queryParams.subscribe(param => {
       const source = param['source'];
       if (source)

diff --git a/src/app/activity-sync/activity-sync.component.ts b/src/app/activity-sync/activity-sync.component.ts
@@ -1,4 +1,5 @@
 import {
+  AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -118,7 +119,7 @@ interface OrphanEntity
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None
 })
-export class ActivitySyncComponent implements OnInit {
+export class ActivitySyncComponent implements AfterViewInit {
   blockedMenu = false;
   progress = false;
   items: MenuItem[] = [
@@ -153,14 +154,12 @@ export class ActivitySyncComponent implements OnInit {
 
   constructor(private server:ServerService, private cdr:ChangeDetectorRef, private messageService: MessageService,
               private confirmationService: ConfirmationService) {
+    this.server.getConfig().subscribe(config => {});
   }
 
-  ngOnInit(): void {
-    this.server.getConfig().subscribe(config => {
-      this.updateRemote(config);
-      this.server.config$.subscribe(config => {
-        this.updateRemote(config);
-      })
+  ngAfterViewInit(): void {
+    this.server.config$.subscribe(config => {
+      if (config) this.updateRemote(config);
     });
     this.server.getRemoteModels().subscribe(remoteModels => {
       this.remoteModels = remoteModels;
@@ -186,11 +185,11 @@ export class ActivitySyncComponent implements OnInit {
   {
     if (!entity) return "";
     console.debug(entity);
-    if (entity?.['en']) return entity['en'];
+    if (entity?.[Helper.getLanguageName()]) return entity[Helper.getLanguageName()];
     if (typeof entity === "string") return entity;
     if (typeof entity.name === "string") return entity.name;
+    if (entity.name?.[Helper.getLanguageName()]) return entity.name[Helper.getLanguageName()];
     if (entity.name?.['en']) return entity.name['en'];
-    if (entity.name?.['fr']) return entity.name['fr'];
     return "";
   }
 

diff --git a/src/app/helper.ts b/src/app/helper.ts
@@ -7,12 +7,33 @@ import {
   ButtonMapping,
   UIPage,
   Remote,
-  ActivityPageCommand, OrphanEntity, CommandSequence, EntityCommand, EntityCommandParameter
+  ActivityPageCommand, OrphanEntity, CommandSequence, EntityCommand, EntityCommandParameter, LanguageCode
 } from "./interfaces";
 import {MediaEntityState} from "./remote-websocket.service";
 
 export class Helper
 {
+  static languageName: LanguageCode = 'en';
+
+  static getLanguageName(): LanguageCode
+  {
+    return Helper.languageName;
+  }
+
+  static getLanguages()
+  {
+    return [
+      {label:'English', value:'en'},
+      {label:'Français', value:'fr'},
+      {label:'Deutsch', value:'de'},
+    ]
+  }
+
+  static setLanguageName(languageCode: LanguageCode)
+  {
+    Helper.languageName = languageCode;
+  }
+
   static getStyle(value: string): any
   {
     try {
@@ -316,10 +337,11 @@ export class Helper
   static getEntityName(entity: any): string
   {
     if (!entity) return "";
-    if (entity?.['en']) return entity['en'];
+    if (entity?.[Helper.getLanguageName()]) return entity[Helper.getLanguageName()];
+    else if (entity?.['en']) return entity['en'];
     if (typeof entity.name === "string") return entity.name;
+    if (entity.name?.[Helper.getLanguageName()]) return entity.name[Helper.getLanguageName()];
     if (entity.name?.['en']) return entity.name['en'];
-    if (entity.name?.['fr']) return entity.name['fr'];
     return "";
   }
 

diff --git a/src/app/integrations/integrations.component.ts b/src/app/integrations/integrations.component.ts
@@ -1,4 +1,5 @@
 import {
+  AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -75,7 +76,7 @@ interface IntegrationsDrivers {
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None
 })
-export class IntegrationsComponent implements OnInit, OnDestroy {
+export class IntegrationsComponent implements AfterViewInit, OnDestroy {
   menuItems: MenuItem[] = [
     {label: 'Home', routerLink: '/home', icon: 'pi pi-home'},
   ]
@@ -92,17 +93,17 @@ export class IntegrationsComponent implements OnInit, OnDestroy {
   @ViewChild(FileUpload) fileUpload: FileUpload | undefined;
 
   constructor(private server:ServerService, private cdr:ChangeDetectorRef, private messageService: MessageService,
-              private confirmationService: ConfirmationService) {}
+              private confirmationService: ConfirmationService) {
+    this.server.getConfig().subscribe(config => {});
+  }
 
 
-  ngOnInit(): void {
-    this.server.getConfig().subscribe(config => {
-      this.updateRemote(config);
-      this.startUpdateTask();
-      this.server.config$.subscribe(config => {
+  ngAfterViewInit(): void {
+    this.server.config$.subscribe(config => {
+      if (config) {
         this.updateRemote(config);
-        // this.startUpdateTask();
-      })
+        this.startUpdateTask();
+      }
     })
   }
 

diff --git a/src/app/interfaces.ts b/src/app/interfaces.ts
@@ -401,8 +401,10 @@ export interface Macro {
   device_class?: string;
 }
 
+export type LanguageCode = 'en' |'fr'|'de';
+
 export interface LanguageName {
-  [key: 'en' | 'fr' | 'de' | string]: string;
+  [key: LanguageCode | string]: string;
 }
 
 export interface OrphanEntity extends Entity

diff --git a/src/app/remote-browser/remote-browser.component.html b/src/app/remote-browser/remote-browser.component.html
@@ -7,6 +7,8 @@ <h2><img src="assets/logo.png" alt="" style="width:200px"/>&nbsp;&nbsp;Unfolded
 </div>
 <p-menubar #menubar [model]="items">
   <ng-template pTemplate="end">
+    <p-dropdown class="smaller-dropdown" [ngModel]="config?.language" [options]="Helper.getLanguages()" placeholder="Select language"
+                (ngModelChange)="setLanguage($event)" optionLabel="label" optionValue="value" pTooltip="Switch language for entity names"/>
     <p-dropdown class="smaller-dropdown" [(ngModel)]="selectedRemote" [options]="remotes" placeholder="Select remote" (ngModelChange)="setRemote(selectedRemote!)">
       <ng-template pTemplate="selectedItem">
         <ng-container *ngIf="selectedRemote">{{selectedRemote.remote_name}} ({{selectedRemote.address}})</ng-container>

diff --git a/src/app/remote-browser/remote-browser.component.ts b/src/app/remote-browser/remote-browser.component.ts
@@ -4,7 +4,6 @@ import {
   ChangeDetectorRef,
   Component,
   ElementRef,
-  OnInit,
   ViewChild,
   ViewEncapsulation
 } from '@angular/core';
@@ -29,12 +28,10 @@ import {
   EntityUsage,
   OrphanEntity,
   Profile,
-  Profiles,
   Remote, RemoteData
 } from "../interfaces";
 import {ServerService} from "../server.service";
-import {catchError, forkJoin, from, map, mergeMap, Observable, of} from "rxjs";
-import { HttpErrorResponse, HttpEventType } from "@angular/common/http";
+import {catchError, forkJoin, from, map, mergeMap, of} from "rxjs";
 import {FormsModule} from "@angular/forms";
 import {InputTextModule} from "primeng/inputtext";
 import {TooltipModule} from "primeng/tooltip";
@@ -101,7 +98,7 @@ interface FileProgress
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None
 })
-export class RemoteBrowserComponent implements OnInit, AfterViewInit {
+export class RemoteBrowserComponent implements AfterViewInit {
   @ViewChild("fileUpload", {static: false}) fileUpload: ElementRef | undefined;
   @ViewChild(UploadedFilesComponent) uploadedFilesComponent: UploadedFilesComponent | undefined;
   @ViewChild(RemoteRegistrationComponent) remoteComponent: RemoteRegistrationComponent | undefined;
@@ -159,18 +156,14 @@ export class RemoteBrowserComponent implements OnInit, AfterViewInit {
 
   constructor(private server:ServerService, private cdr:ChangeDetectorRef, private messageService: MessageService,
               private confirmationService: ConfirmationService) {
-  }
-
-  ngOnInit(): void {
-    this.server.getConfig().subscribe(config => {
-      this.updateRemote(config);
-      this.server.config$.subscribe(config => {
-        this.updateRemote(config);
-      })
-    })
+    this.server.getConfig().subscribe(config => {});
   }
 
   ngAfterViewInit(): void {
+    this.server.config$.subscribe(config => {
+      console.log("Updated config", config);
+      if (config) this.updateRemote(config);
+    })
     const data = localStorage.getItem("remoteData");
     if (data) {
       const remoteData: RemoteData = JSON.parse(data);
@@ -246,7 +239,6 @@ export class RemoteBrowserComponent implements OnInit, AfterViewInit {
       }});
   }
 
-
   updateRemote(config: Config): void
   {
     this.config = config;
@@ -266,13 +258,6 @@ export class RemoteBrowserComponent implements OnInit, AfterViewInit {
       this.remoteLoader?.load();
   }
 
-  viewBackups(): void
-  {
-    this.uploadedFilesComponent?.loadFiles();
-    this.uploadedFilesComponent!.visible = true;
-    this.cdr.detectChanges();
-  }
-
   selectRemote(): void
   {
     this.remoteComponent!.showDialog();
@@ -347,20 +332,6 @@ export class RemoteBrowserComponent implements OnInit, AfterViewInit {
     return `hsl(${stringUniqueHash % 360}, 95%, 40%)`;
   }
 
-  stringToColor(value: string): string
-  {
-    let hash = 0;
-    value.split('').forEach(char => {
-      hash = char.charCodeAt(0) + ((hash << 5) - hash)
-    })
-    let colour = '#'
-    for (let i = 0; i < 3; i++) {
-      const value = (hash >> (i * 8)) & 0xff
-      colour += value.toString(16).padStart(2, '0')
-    }
-    return colour
-  }
-
   removeEntities(entities: Entity[])
   {
     if (!this.selectedRemote) return;
@@ -403,49 +374,6 @@ export class RemoteBrowserComponent implements OnInit, AfterViewInit {
     })
   }
 
-  uploadSelectedFile(file: FileProgress)
-  {
-    const formData = new FormData();
-    formData.append('file', file.data);
-    const filename = file.data.name;
-    file.inProgress = true;
-    this.server.upload(formData).pipe(map(event => {
-        switch (event.type) {
-          case HttpEventType.UploadProgress:
-            file.progress = Math.round(event.loaded * 100 / event.total!);
-            break;
-          case HttpEventType.Response:
-            return event;
-        }
-        return event;
-      }),
-      catchError((error: HttpErrorResponse) => {
-        file.inProgress = false;
-        this.messageService.add({severity: 'error', summary: `File ${filename} upload failed`});
-        this.cdr.detectChanges();
-        return of(`${file.data.name} upload failed.`);
-      })).subscribe((event: any) => {
-      if (event?.body != undefined)
-      {
-        console.log(event.body);
-        this.currentFile = undefined;
-        this.messageService.add({severity: 'success', summary: `File ${filename} uploaded successfully`});
-        this.cdr.detectChanges();
-      }
-    });
-  }
-
-  uploadFile() {
-    const fileUpload = this.fileUpload!.nativeElement;
-    fileUpload.onchange = () => {
-      const file = fileUpload.files[0];
-      this.currentFile = {data: file, progress: 0, inProgress: false};
-      this.uploadSelectedFile(this.currentFile);
-      this.cdr.detectChanges();
-    }
-    fileUpload.click();
-  }
-
   updateConfiguration() {
     this.init();
   }
@@ -571,4 +499,13 @@ export class RemoteBrowserComponent implements OnInit, AfterViewInit {
   private restoreRemote() {
     return undefined;
   }
+
+  setLanguage(languageCode: string) {
+    if (!this.config) return;
+    this.config.language = languageCode;
+    this.server.setConfig(this.config).subscribe({next: results => {
+        this.messageService.add({severity: "success", summary: `Language changed to "${languageCode}" and saved`});
+        this.cdr.detectChanges();
+      }});
+  }
 }
diff --git a/src/app/remote-widget/remote-widget.component.html b/src/app/remote-widget/remote-widget.component.html
@@ -1,3 +1,4 @@
+<p-toast key="widget"/>
 <p-dialog [modal]="false" position="topright" [showHeader]="true" [closable]="false" [visible]="visible" [draggable]="true"
           contentStyleClass="widget-dialog" class="widget" styleClass="widget-header" appendTo="body">
   <ng-template pTemplate="header">
@@ -21,7 +22,9 @@
         </div>
         <div class="flex align-items-center justify-content-center">
           <p-tag [value]="(remoteWebsocketService.connectionStatus | async) ? 'Connected' : 'Disconnected'"
-                 [severity]="(remoteWebsocketService.connectionStatus  | async) ? 'success' : 'warning'"/>
+                 [severity]="(remoteWebsocketService.connectionStatus  | async) ? 'success' : 'warning'"
+                 pTooltip="Click to wake up the remote"
+                 (click)="wakeRemote($event)" [style]="{'cursor': 'pointer'}"/>
         </div>
     </div>
   </ng-template>