Fixed responsive issues (duplicate content)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ucr-tool",
-  "version": "2.4.4",
+  "version": "2.4.5",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --host 0.0.0.0",

server/package.json

@@ -1,7 +1,7 @@
 {
   "name": "server",
   "type": "module",
-  "version": "2.4.4",
+  "version": "2.4.5",
   "main": "app.js",
   "scripts": {
     "start": "node dist/app.js",

server/src/app.ts

@@ -789,7 +789,8 @@ app.get('/api/remote/:address/system/backup/export', async (req, res, next) => {
   }
   const remote = new Remote(remoteEntry.address, remoteEntry.port, remoteEntry.user, remoteEntry.token, remoteEntry.api_key);
   try {
-    res.status(200).json(await remote.getBackup(res));
+    await remote.getBackup(res);
+    // res.status(200).json(await remote.getBackup(res));
   } catch (error)
   {
     errorHandler(error, req, res, next);

src/app/active-entities/active-entities.component.css

@@ -21,6 +21,10 @@
   transition: all 1s ease-in-out;
 }
 
+.widget-connection-status .p-tag:first-child {
+  width: 80px;
+}
+
 .media-card-border {
   background: black;
   border-radius: 10px;

src/app/active-entities/active-entities.component.html

@@ -2,7 +2,7 @@
 <p-menubar [model]="menuItems">
   <ng-template pTemplate="end">
     <div class="flex flex-wrap align-items-center gap-2">
-      <ng-container *ngIf="!smallSizeMode">
+      <ng-container *ngIf="!(smallSizeMode | async)?.matches">
         <p-dropdown *ngIf="config?.dashboards" [(ngModel)]="selectedDashboard" [options]="config!.dashboards!" placeholder="Select dashboard"
                     (ngModelChange)="selectDashboard($event)" optionLabel="name" class="smaller-dropdown">
         </p-dropdown>
@@ -59,7 +59,7 @@
           </ng-template>
         </p-dropdown>
       </ng-container>
-      <ng-container *ngIf="smallSizeMode">
+      <ng-container *ngIf="(smallSizeMode | async)?.matches">
         <p-dropdown *ngIf="config?.dashboards" [(ngModel)]="selectedDashboard" [options]="config!.dashboards!" placeholder="Dashboard"
                     (ngModelChange)="selectDashboard($event)" optionLabel="name" class="smaller-dropdown">
         </p-dropdown>
@@ -132,7 +132,7 @@
 </div>
 <app-activity-player *ngFor="let activity of selectedActivities" [activity]="activity" [visible]="true" [(minimized)]="activity.collapsed"
                      (onClose)="removeActivity($event)" [scale]="scale" (onMessage)="handleMessage($event)" style="width:100%"/>
-<div class="flex flex-wrap gap-3" *ngIf="smallSizeMode">
+<div class="flex flex-wrap gap-3" *ngIf="(smallSizeMode | async)?.matches">
   <div class="flex gap-2 align-content-center justify-content-center media-card-border border-small"
        [style]="'width:100%'" *ngFor="let entityState of entityStates" [ngSwitch]="entityState.entity_type">
     <app-media-entity *ngSwitchCase="'media_player'" [mediaEntity]="entityState" [remote]="selectedRemote" style="width:100%" [scale]="1"
@@ -149,7 +149,7 @@
                         [closable]="true" (onClose)="removeEntityState(entityState)" (onMessage)="handleMessage($event)"></app-climate-entity>
   </div>
 </div>
-<div class="flex flex-wrap gap-3" cdkDropList cdkDropListOrientation="mixed" (cdkDropListDropped)="drop($event)" *ngIf="!smallSizeMode">
+<div class="flex flex-wrap gap-3" cdkDropList cdkDropListOrientation="mixed" (cdkDropListDropped)="drop($event)" *ngIf="!(smallSizeMode | async)?.matches">
   <ng-container *ngFor="let entityState of entityStates" [ngSwitch]="entityState.entity_type">
     <ng-container *ngSwitchCase="'media_player'">
       <div *ngIf="isLargeFormat(entityState)" class="flex gap-2 align-content-center justify-content-center media-card-border"

src/app/active-entities/active-entities.component.ts

@@ -10,16 +10,13 @@ import {DropdownModule} from "primeng/dropdown";
 import {AsyncPipe, NgForOf, NgIf, NgSwitch, NgSwitchCase} from "@angular/common";
 import {MenuItem, Message, MessageService, PrimeTemplate} from "primeng/api";
 import {ProgressBarModule} from "primeng/progressbar";
-import {ScrollingTextComponent} from "../controls/scrolling-text/scrolling-text.component";
 import {TagModule} from "primeng/tag";
 import {ServerService} from "../server.service";
 import {MenubarModule} from "primeng/menubar";
 import {Config, Dashboard, Entity, Remote, RemoteActivity, RemoteData} from "../interfaces";
 import {FormsModule} from "@angular/forms";
 import {Helper} from "../helper";
-import {SliderComponent} from "../controls/slider/slider.component";
 import {Button} from "primeng/button";
-import {DropdownOverComponent} from "../controls/dropdown-over/dropdown-over.component";
 import {MediaEntityComponent} from "./media-entity/media-entity.component";
 import {AutoCompleteCompleteEvent, AutoCompleteModule} from "primeng/autocomplete";
 import {ActivityPlayerComponent} from "../activity-player/activity-player.component";
@@ -30,15 +27,15 @@ import {WebsocketService} from "../websocket/websocket.service";
 import {CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray} from "@angular/cdk/drag-drop";
 import {DialogModule} from "primeng/dialog";
 import {InputTextModule} from "primeng/inputtext";
-import {BreakpointObserver, Breakpoints} from "@angular/cdk/layout";
+import {BreakpointObserver, Breakpoints, BreakpointState} from "@angular/cdk/layout";
 import {RemoteWebsocket} from "../websocket/remote-websocket";
 import {
   EntityState,
   MediaEntityState,
   RemoteState,
   RemoteWebsocketInstance
 } from "../websocket/remote-websocket-instance";
-import {firstValueFrom, forkJoin, from, map, mergeMap, of} from "rxjs";
+import {firstValueFrom, Observable} from "rxjs";
 import {ProgressSpinnerModule} from "primeng/progressspinner";
 import {BlockUIModule} from "primeng/blockui";
 import {RemoteDataLoaderComponent} from "../remote-data-loader/remote-data-loader.component";
@@ -60,15 +57,12 @@ interface SelectedActivity extends RemoteActivity {
     NgIf,
     PrimeTemplate,
     ProgressBarModule,
-    ScrollingTextComponent,
     TagModule,
     NgForOf,
     AsyncPipe,
     MenubarModule,
     FormsModule,
-    SliderComponent,
     Button,
-    DropdownOverComponent,
     MediaEntityComponent,
     AutoCompleteModule,
     ActivityPlayerComponent,
@@ -123,7 +117,7 @@ export class ActiveEntitiesComponent implements OnInit, OnDestroy {
   dashboardName: string | undefined;
   selectedDashboard: Dashboard | undefined;
   lockDashboard = false;
-  smallSizeMode = false;
+  smallSizeMode : Observable<BreakpointState> | undefined;
   config: Config | undefined;
   additionalWebsockets: RemoteWebsocket[] = [];
   additionalWebsocketMedias: RemoteWebsocketInstance[] = [];
@@ -255,15 +249,11 @@ export class ActiveEntitiesComponent implements OnInit, OnDestroy {
       })
     })
     this.cdr.detectChanges();
-    this.responsive.observe([
+    this.smallSizeMode = this.responsive.observe([
       Breakpoints.HandsetLandscape,
       Breakpoints.HandsetPortrait,
       Breakpoints.TabletPortrait
-    ])
-      .subscribe(result => {
-        this.smallSizeMode = result.matches;
-        this.cdr.detectChanges();
-      });
+    ]);
   }
 
   saveDashboard()

src/app/activity-player/activity-player.component.html

@@ -1,5 +1,5 @@
 <p-toast key="activityPlayer"/>
-<p-dialog *ngIf="!smallSizeMode" #dialog [modal]="false" position="topright" [showHeader]="true" [closable]="false" [visible]="visible" [draggable]="true"
+<p-dialog *ngIf="!(smallSizeMode | async)?.matches" #dialog [modal]="false" position="topright" [showHeader]="true" [closable]="false" [visible]="visible" [draggable]="true"
           contentStyleClass="activity-player-dialog" class="activity-player" styleClass="activity-player-header" appendTo="body"
           (close)="closeDialog($event);dialog.close($event)" [style]="{'width': (scale*400+30)+'px', 'max-height': 'calc(100vh - 20px)'}">
   <ng-template pTemplate="header">
@@ -39,7 +39,7 @@ <h3>{{Helper.getEntityName(activity)}}</h3>
                           (onPageChange)="selectPage($event)"/>
       <app-pagination *ngIf="activity?.options?.user_interface?.pages && currentPage"
         [currentIndex]="activity!.options!.user_interface!.pages!.indexOf(currentPage)" [displayedIndexes]="6"
-        [numberOfPages]="activity!.options!.user_interface!.pages!.length" class="grid-pagination" [smallSizeMode]="smallSizeMode"
+        [numberOfPages]="activity!.options!.user_interface!.pages!.length" class="grid-pagination" [smallSizeMode]="false"
         (onIndexChange)="selectPage($event)" [style]="'width:'+200*scale+'px'"/>
       <div class="flex align-items-center justify-content-center gap-2" style="width: 100%"
            *ngIf="volumeEntity?.new_state?.attributes?.volume">
@@ -52,7 +52,7 @@ <h3>{{Helper.getEntityName(activity)}}</h3>
     </div>
   </ng-container>
 </p-dialog>
-<div *ngIf="smallSizeMode" style="position: relative; text-align: center;width: 100%">
+<div *ngIf="(smallSizeMode | async)?.matches" style="position: relative; text-align: center;width: 100%">
     <div class="flex align-items-start justify-content-center"
          [style]="{width: '100%', height: '50px'}"></div>
     <div [style]="'position: absolute;top:5px;left:0;right:0;transform-origin: top;scale:'+scale*1.2">
@@ -88,7 +88,8 @@ <h3>{{Helper.getEntityName(activity)}}</h3>
       <app-pagination *ngIf="activity?.options?.user_interface?.pages && currentPage"
                       [currentIndex]="activity!.options!.user_interface!.pages!.indexOf(currentPage)"
                       [numberOfPages]="activity!.options!.user_interface!.pages!.length" class="grid-pagination"
-                      (onIndexChange)="selectPage($event)"  [style]="'max-width:'+200*scale+'px'" [smallSizeMode]="smallSizeMode"/>
+                      (onIndexChange)="selectPage($event)"  [style]="'max-width:'+200*scale+'px'"
+                      [smallSizeMode]="true"/>
       <div class="flex align-items-center justify-content-center gap-2" style="width: 100%"
            *ngIf="volumeEntity?.new_state?.attributes?.volume">
         <app-slider [value]="Math.round(volumeEntity!.new_state!.attributes!.volume!)" style="width: 100%"

src/app/activity-player/activity-player.component.ts

@@ -9,14 +9,13 @@ import {
 } from '@angular/core';
 import {DialogModule} from "primeng/dialog";
 import {Message, MessageService, PrimeTemplate} from "primeng/api";
-import {ActivityViewerComponent} from "../activity-viewer/activity-viewer.component";
 import {ServerService} from "../server.service";
-import {Activity, ButtonMapping, Command, Entity, EntityCommand, Remote, RemoteActivity, UIPage} from "../interfaces";
+import {Activity, ButtonMapping, Command, EntityCommand, Remote, RemoteActivity, UIPage} from "../interfaces";
 import {Helper} from "../helper";
 import {Button} from "primeng/button";
 import {TooltipModule} from "primeng/tooltip";
 import {RemoteButtonsComponent, ButtonMode} from "../remote-editor/remote-buttons/remote-buttons.component";
-import {NgIf} from "@angular/common";
+import {AsyncPipe, NgIf} from "@angular/common";
 import {catchError, delay, forkJoin, from, map, mergeMap, Observable, of} from "rxjs";
 import {RemoteGridComponent} from "../remote-editor/remote-grid/remote-grid.component";
 import {ToastModule} from "primeng/toast";
@@ -26,7 +25,7 @@ import {PaginationComponent} from "../controls/pagination/pagination.component";
 import {RouterLink} from "@angular/router";
 import {IconComponent} from "../controls/icon/icon.component";
 import {SliderComponent} from "../controls/slider/slider.component";
-import {BreakpointObserver, Breakpoints} from "@angular/cdk/layout";
+import {BreakpointObserver, Breakpoints, BreakpointState} from "@angular/cdk/layout";
 import {MediaEntityState} from "../websocket/remote-websocket-instance";
 import {WebsocketService} from "../websocket/websocket.service";
 
@@ -36,7 +35,6 @@ import {WebsocketService} from "../websocket/websocket.service";
   imports: [
     DialogModule,
     PrimeTemplate,
-    ActivityViewerComponent,
     Button,
     TooltipModule,
     RemoteButtonsComponent,
@@ -47,7 +45,8 @@ import {WebsocketService} from "../websocket/websocket.service";
     PaginationComponent,
     RouterLink,
     IconComponent,
-    SliderComponent
+    SliderComponent,
+    AsyncPipe
   ],
   templateUrl: './activity-player.component.html',
   styleUrl: './activity-player.component.css',
@@ -58,7 +57,7 @@ import {WebsocketService} from "../websocket/websocket.service";
 export class ActivityPlayerComponent implements OnInit {
   remote: Remote | undefined;
   configEntityCommands: EntityCommand[] | undefined;
-  smallSizeMode = false;
+  smallSizeMode : Observable<BreakpointState> | undefined;
   @Input('remote') set _remote(value: Remote | undefined) {
     this.remote = value;
     this.loadRemoteConfig();
@@ -108,15 +107,11 @@ export class ActivityPlayerComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.responsive.observe([
+    this.smallSizeMode = this.responsive.observe([
       Breakpoints.HandsetLandscape,
       Breakpoints.HandsetPortrait,
       Breakpoints.TabletPortrait
-    ])
-      .subscribe(result => {
-        this.smallSizeMode = result.matches;
-        this.cdr.detectChanges();
-      });
+    ]);
   }
 
   loadRemoteConfig()

src/app/controls/scrolling-text/scrolling-text.component.ts

@@ -50,7 +50,7 @@ export class ScrollingTextComponent implements AfterViewInit {
 
   updateClass()
   {
-    if (!this.textContainer || !this.textContent) return;
+    if (!this.textContainer?.nativeElement?.clientWidth || !this.textContent?.nativeElement?.clientWidth) return;
     if (this.textClass) this.textContent.nativeElement.classList.add(this.textClass);
     this.cdr.detectChanges();
     const style = this.textStyle ? this.textStyle : "";

src/app/remote-browser/remote-browser.component.ts

@@ -11,7 +11,7 @@ import {ActivityViewerComponent} from "../activity-viewer/activity-viewer.compon
 import {AutoCompleteCompleteEvent, AutoCompleteModule} from "primeng/autocomplete";
 import {ButtonModule} from "primeng/button";
 import {ChipModule} from "primeng/chip";
-import {CommonModule} from "@angular/common";
+import {CommonModule, DatePipe} from "@angular/common";
 import {NgxJsonViewerModule} from "ngx-json-viewer";
 import {OverlayPanelModule} from "primeng/overlaypanel";
 import {ProgressBarModule} from "primeng/progressbar";
@@ -52,6 +52,7 @@ import {ConfirmDialogModule} from "primeng/confirmdialog";
 import {IconComponent} from "../controls/icon/icon.component";
 import {RemoteWidgetComponent} from "../remote-widget/remote-widget.component";
 import { environment } from '../../environment';
+import {HttpErrorResponse} from "@angular/common/http";
 
 interface FileProgress
 {
@@ -95,7 +96,7 @@ interface FileProgress
   ],
   templateUrl: './remote-browser.component.html',
   styleUrl: './remote-browser.component.css',
-  providers: [MessageService, ConfirmationService],
+  providers: [MessageService, ConfirmationService, DatePipe],
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None
 })
@@ -156,7 +157,7 @@ export class RemoteBrowserComponent implements AfterViewInit {
   accordionActiveIndexes = [2, 3];
 
   constructor(private server:ServerService, private cdr:ChangeDetectorRef, private messageService: MessageService,
-              private confirmationService: ConfirmationService) {
+              private datePipe: DatePipe) {
     this.server.getConfig().subscribe(config => {});
   }
 
@@ -509,9 +510,27 @@ export class RemoteBrowserComponent implements AfterViewInit {
 
   private saveRemote() {
     if (!this.selectedRemote) return;
-    return this.server.getRemoteBackup(this.selectedRemote).subscribe(blob => {
-      saveAs(blob, "backup.zip");
-    });
+    return this.server.getRemoteBackup(this.selectedRemote).subscribe({next: blob =>
+      {
+        saveAs(blob, `backup_${this.datePipe.transform(new Date(), "yyyyMMdd")}.zip`);
+      },
+      error: async err => {
+        console.error("Error while backing up", err);
+        let detail = err.message;
+        if (err instanceof HttpErrorResponse)
+        {
+          const error:HttpErrorResponse = err as HttpErrorResponse;
+          if (error.error)
+          {
+            const jsonError = await (new Response(err.error)).json();
+            detail += "\n"+jsonError.message;
+          }
+        }
+        this.messageService.add({severity: "error", summary: `Error while backing up remote data ${this.selectedRemote?.remote_name}`,
+          detail: `${detail}`});
+        this.cdr.detectChanges();
+      }
+  });
   }
 
   private restoreRemote() {

src/app/remote-widget/remote-widget.component.css

@@ -44,6 +44,10 @@
   transition: all 1s ease-in-out;
 }
 
+.widget-connection-status .p-tag:first-child {
+  width: 80px;
+}
+
 .charging-status {
   position: absolute;
   left: 50%;

src/app/remote-widget/remote-widget.component.html

@@ -1,5 +1,5 @@
 <p-toast key="widget"/>
-<ng-container *ngIf="!smallSizeMode">
+<ng-container *ngIf="!(smallSizeMode | async)?.matches">
   <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">
@@ -64,7 +64,7 @@
     </ng-container>
   </p-dialog>
 </ng-container>
-<ng-container *ngIf="smallSizeMode">
+<ng-container *ngIf="(smallSizeMode | async)?.matches">
   <div class="flex justify-content-between flex-wrap gap-3 column-gap-4" style="width: 100%">
     <div class="flex align-items-center justify-content-center">
       <p-button icon="pi pi-window-minimize" [severity]="minimized ? 'secondary' : 'info'" class="smaller-button"