Improved responsive mode and added version info

albaintor · Nov 24, 2024 · 88f04f1 · 88f04f1
1 parent 3f8295e
commit 88f04f1
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 18 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ucr-tool",
-  "version": "2.4.2",
+  "version": "2.4.3",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --host 0.0.0.0",

diff --git a/server/package.json b/server/package.json
@@ -1,7 +1,7 @@
 {
   "name": "server",
   "type": "module",
-  "version": "2.4.2",
+  "version": "2.4.3",
   "main": "app.js",
   "scripts": {
     "start": "node app.js"

diff --git a/src/app/remote-browser/remote-browser.component.html b/src/app/remote-browser/remote-browser.component.html
@@ -1,6 +1,9 @@
 <p-toast></p-toast>
 <app-remote-widget/>
-<h2><img src="assets/logo.png" alt="" style="width:200px"/>&nbsp;&nbsp;Unfolded Circle remote configuration toolkit</h2>
+<div class="flex overflow-hidden">
+  <div class="flex-grow-1"><h2><img src="assets/logo.png" alt="" style="width:200px"/>&nbsp;&nbsp;Unfolded Circle remote configuration toolkit</h2></div>
+  <div class="flex-none align-content-center text-sm">Version {{environment.appVersion}}</div>
+</div>
 <p-blockUI [blocked]="blockedMenu"/>
 <div class="progress-spinner" *ngIf="progress">
   <p-progressSpinner styleClass="w-4rem h-4rem" strokeWidth="8" fill="var(--surface-ground)" animationDuration=".5s"></p-progressSpinner>

diff --git a/src/app/remote-browser/remote-browser.component.ts b/src/app/remote-browser/remote-browser.component.ts
@@ -51,6 +51,7 @@ import { saveAs } from 'file-saver-es';
 import {ConfirmDialogModule} from "primeng/confirmdialog";
 import {IconComponent} from "../controls/icon/icon.component";
 import {RemoteWidgetComponent} from "../remote-widget/remote-widget.component";
+import { environment } from '../../environment';
 
 interface FileProgress
 {
@@ -525,4 +526,6 @@ export class RemoteBrowserComponent implements AfterViewInit {
         this.triggerReload();
       }});
   }
+
+  protected readonly environment = environment;
 }
diff --git a/src/app/remote-widget/remote-widget.component.html b/src/app/remote-widget/remote-widget.component.html
@@ -1,7 +1,8 @@
 <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">
+<ng-container *ngIf="!smallSizeMode">
+  <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">
       <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"
@@ -36,15 +37,15 @@
              *ngIf="softwareUpdate?.progress?.state && softwareUpdate!.progress!.state! !== 'DONE'">
           <p-progressBar [value]="getSoftwareProgress()" [style]="{'width': '250px'}"/>
         </div>
-    </div>
-  </ng-template>
-  <ng-container *ngIf="!minimized">
-    <ng-container *ngIf="mediaEntity && remote">
+      </div>
+    </ng-template>
+    <ng-container *ngIf="!minimized">
+      <ng-container *ngIf="mediaEntity && remote">
         <div class="flex gap-2 align-content-center justify-content-center" style="width: 100%;overflow: hidden">
-        <app-media-entity [mediaEntity]="mediaEntity" [remote]="remote"
-                          class="flex flex-wrap gap-2 align-content-center justify-content-center ng-star-inserted"
-                          [headerTemplate]="entitySelector" [scale]="scale" style="width: 100%">
-          <ng-template #entitySelector>
+          <app-media-entity [mediaEntity]="mediaEntity" [remote]="remote"
+                            class="flex flex-wrap gap-2 align-content-center justify-content-center ng-star-inserted"
+                            [headerTemplate]="entitySelector" [scale]="scale" style="width: 100%">
+            <ng-template #entitySelector>
               <div style="position: relative; width: 100%; height: 60px;margin-left:30px"></div>
               <p-dropdown [(ngModel)]="mediaEntity" [options]="mediaEntities" placeholder="Media entity" appendTo="body"
                           (ngModelChange)="changedMediaEntity($event)" optionLabel="entity_id"
@@ -56,9 +57,70 @@
                   {{websocketService.getEntityName(item)}}
                 </ng-template>
               </p-dropdown>
+            </ng-template>
+          </app-media-entity>
+        </div>
+      </ng-container>
+    </ng-container>
+  </p-dialog>
+</ng-container>
+<ng-container *ngIf="smallSizeMode">
+  <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"
+                pTooltip="Minimize" (click)="toggleMinimized()"/>
+    </div>
+    <div class="flex align-items-center overflow-hidden" style="max-width: 250px">
+      <app-scrolling-text [text]="websocketService.getMediaInfo()"/>
+    </div>
+    <div class="flex align-items-center justify-content-center" *ngIf="remoteState?.batteryInfo?.capacity" style="width:40px">
+      <div class="flex align-items-center justify-content-center">{{remoteState!.batteryInfo!.capacity!}}%</div>
+      <div style="position: relative">
+        <div class="icon icon-battery" *ngIf="remoteState!.batteryInfo!.capacity!> 30 && remoteState!.batteryInfo!.capacity! < 85"></div>
+        <div class="icon icon-battery-low" *ngIf="remoteState!.batteryInfo!.capacity! <= 30"></div>
+        <div class="icon icon-battery-full" *ngIf="remoteState!.batteryInfo!.capacity! >= 85"></div>
+        <div class="pi pi-bolt charging-status" *ngIf="remoteState!.batteryInfo?.status === 'CHARGING'"></div>
+      </div>
+
+    </div>
+    <div class="flex align-items-center justify-content-center">
+      <p-tag [value]="(websocketService.connectionStatus | async) ? 'Connected' : 'Disconnected'"
+             [severity]="(websocketService.connectionStatus  | async) ? 'success' : 'warning'"
+             pTooltip="Click to wake up the remote"
+             (click)="wakeRemote($event)" [style]="{'cursor': 'pointer'}"/>
+    </div>
+    <div class="flex align-items-center justify-content-center"
+         *ngIf="softwareUpdate?.progress?.state && softwareUpdate!.progress!.state! !== 'DONE'">
+      <p-tag [value]="softwareUpdate?.progress?.state"
+             [severity]="'warning'"
+             pTooltip="Software is updating..."/>
+    </div>
+    <div class="flex align-items-center justify-content-center"
+         *ngIf="softwareUpdate?.progress?.state && softwareUpdate!.progress!.state! !== 'DONE'">
+      <p-progressBar [value]="getSoftwareProgress()" [style]="{'width': '250px'}"/>
+    </div>
+  </div>
+  <ng-container *ngIf="!minimized">
+    <ng-container *ngIf="mediaEntity && remote">
+      <div class="flex gap-2 align-content-center justify-content-center" style="width: 100%;overflow: hidden">
+        <app-media-entity [mediaEntity]="mediaEntity" [remote]="remote"
+                          class="flex flex-wrap gap-2 align-content-center justify-content-center ng-star-inserted"
+                          [headerTemplate]="entitySelector" [scale]="scale" style="width: 100%">
+          <ng-template #entitySelector>
+            <div style="position: relative; width: 100%; height: 60px;margin-left:30px"></div>
+            <p-dropdown [(ngModel)]="mediaEntity" [options]="mediaEntities" placeholder="Media entity" appendTo="body"
+                        (ngModelChange)="changedMediaEntity($event)" optionLabel="entity_id"
+                        [style]="{'scale':scale, position: 'absolute', right: 0, top:0, transform: 'translate(25%, 0%)'}">
+              <ng-template pTemplate="selectedItem">
+                {{websocketService.getEntityName(mediaEntity)}}
+              </ng-template>
+              <ng-template let-item pTemplate="item">
+                {{websocketService.getEntityName(item)}}
+              </ng-template>
+            </p-dropdown>
           </ng-template>
         </app-media-entity>
-        </div>
+      </div>
     </ng-container>
   </ng-container>
-</p-dialog>
+</ng-container>
diff --git a/src/app/remote-widget/remote-widget.component.ts b/src/app/remote-widget/remote-widget.component.ts
@@ -23,6 +23,7 @@ import {WebsocketService} from "../websocket/websocket.service";
 import {ToastModule} from "primeng/toast";
 import {MessageService} from "primeng/api";
 import {MediaEntityState, RemoteState, SoftwareUpdate} from "../websocket/remote-websocket-instance";
+import {BreakpointObserver, Breakpoints} from "@angular/cdk/layout";
 
 interface WidgetConfiguration {
   minimized: boolean;
@@ -64,9 +65,11 @@ export class RemoteWidgetComponent implements OnInit {
   activities: Activity[] = [];
   protected readonly Math = Math;
   softwareUpdate: SoftwareUpdate | undefined;
+  smallSizeMode = false;
 
   constructor(private server:ServerService, protected websocketService: WebsocketService, private cdr:ChangeDetectorRef,
-              private messageService: MessageService,) { }
+              private messageService: MessageService,
+              private responsive: BreakpointObserver) { }
 
   ngOnInit(): void {
     const data = localStorage.getItem("remote-widget");
@@ -102,7 +105,16 @@ export class RemoteWidgetComponent implements OnInit {
       })
       this.loadActivities();
       this.cdr.detectChanges();
-    })
+    });
+    this.responsive.observe([
+      Breakpoints.HandsetLandscape,
+      Breakpoints.HandsetPortrait,
+      Breakpoints.TabletPortrait
+    ])
+      .subscribe(result => {
+        this.smallSizeMode = result.matches;
+        this.cdr.detectChanges();
+      });
   }
 
   loadActivities()

diff --git a/src/environment.ts b/src/environment.ts
@@ -0,0 +1,5 @@
+declare const require: any;
+
+export const environment = {
+  appVersion: require('../package.json').version,
+};