Small fixes

package.json

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

server/package.json

@@ -1,13 +1,14 @@
 {
   "name": "server",
   "type": "module",
-  "version": "2.4.3",
+  "version": "2.4.4",
   "main": "app.js",
   "scripts": {
     "start": "node dist/app.js",
     "compile": "tsc",
     "postinstall": "npm run compile",
-    "test": "tsc-watch --onSuccess \"node dist/app.js\""
+    "test": "tsc-watch --onSuccess \"node dist/app.js --data_dir .\"",
+    "testenv": "export DATA_DIR=. || set DATA_DIR=.&& tsc-watch --onSuccess \"node dist/app.js\""
   },
   "dependencies": {
     "commander": "^12.1.0",

server/src/app.ts

@@ -13,13 +13,29 @@ import path from 'path';
 import {RC2Model} from "./RC2Model.js";
 import fs from "node:fs";
 import {Remote} from "./remote.js";
-import {getConfigFile, writeConfigFile} from './config.js';
+import {getConfigFile, writeConfigFile, setConfig} from './config.js';
 import {program} from 'commander';
 import cors from 'cors';
 // import expressws from 'express-ws';
 
 let LISTEN_PORT = "8000";
-const DATA_DIR = process.env['DATA_DIR'] || '..';
+let DATA_DIR = process.env['DATA_DIR'] || '..';
+program
+  .usage('[OPTIONS]...')
+  // .option('-f, --flag', 'Detects if the flag is present.')
+  .option('-p, --port <value>', 'Listen on given port', '8000')
+  .option('-d, --data_dir <value>', 'Uses given path as data directory', '.')
+  .parse(process.argv);
+const options = program.opts();
+if (options['port'])
+{
+  LISTEN_PORT = options['port'];
+}
+if (options['data_dir'])
+{
+  DATA_DIR = options['data_dir'];
+}
+setConfig(DATA_DIR);
 const UPLOAD_DIR = path.join(DATA_DIR, 'uploads');
 const RESOURCES_DIR = path.join(DATA_DIR, 'resources');
 const app = express();
@@ -34,18 +50,6 @@ const storage = multer.diskStorage({
 });
 
 fs.mkdirSync(UPLOAD_DIR, {recursive: true});
-
-program
-  .usage('[OPTIONS]...')
-  // .option('-f, --flag', 'Detects if the flag is present.')
-  .option('-p, --port <value>', 'Listen on given port', '8000')
-  .parse(process.argv);
-const options = program.opts();
-if (options['port'])
-{
-  LISTEN_PORT = options['port'];
-}
-
 const upload = multer({storage: storage})
 
 app.use(cors());

server/src/config.ts

@@ -2,9 +2,14 @@ import path from "path";
 import fs from "node:fs";
 
 const DATA_DIR = process.env["DATA_DIR"] || '..';
-const CONFIG_FOLDER = DATA_DIR;
+let CONFIG_FOLDER = DATA_DIR;
 const CONFIG_FILE = 'config.json';
 
+export function setConfig(configFolder: string)
+{
+  CONFIG_FOLDER = configFolder;
+}
+
 export function writeConfigFile(config: any)
 {
   const filepath = path.join(CONFIG_FOLDER, CONFIG_FILE);

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

@@ -13,6 +13,14 @@
   color: #fbf100;
 }
 
+.widget-connection-status {
+  transition: all 1s ease-in-out;
+}
+
+.widget-connection-status .p-tag {
+  transition: all 1s ease-in-out;
+}
+
 .media-card-border {
   background: black;
   border-radius: 10px;

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

@@ -124,7 +124,7 @@
   <div class="flex align-items-center justify-content-center">
     <p-tag [value]="(websocketService.connectionStatus | async) ? 'Connected' : 'Disconnected'"
            [severity]="(websocketService.connectionStatus  | async) ? 'success' : 'warning'"
-           [class]="'disconnected-state'"
+           [class]="'disconnected-state'" class="widget-connection-status"
             pTooltip="Click to wake up the remote"
             (click)="wakeRemote($event)"/>
   </div>

src/app/integrations/integrations.component.html

@@ -9,18 +9,18 @@ <h2><img src="assets/logo.png" alt="" style="width:200px"/>&nbsp;&nbsp;Unfolded
         <p-inputSwitch pTooltip="Enable/disable stream logs" [(ngModel)]="streamLogs" (ngModelChange)="toggleStreamLogs($event)"/>&nbsp;&nbsp;
         <span class="pi pi-chart-line"></span>
         <p-progressBar *ngIf="remoteStatus?.memory" [value]="(remoteStatus!.memory!.total_memory!-remoteStatus!.memory!.available_memory!)/remoteStatus!.memory!.total_memory!*100" [style]="{width: '100px'}"
-            [pTooltip]="'Memory : '+Math.floor(remoteStatus!.memory!.available_memory!/1000000).toLocaleString()+' megabytes available on '
-                +Math.floor(remoteStatus!.memory!.total_memory!/1000000).toLocaleString()+' megabytes'" unit="Mb">
+            [pTooltip]="'Memory : '+Math.floor(remoteStatus!.memory!.available_memory!/1000000).toLocaleString()+' megabytes available (total '
+                +Math.floor(remoteStatus!.memory!.total_memory!/1000000).toLocaleString()+'MB)'" unit="Mb">
         </p-progressBar>
         <span class="pi pi-database"></span>
         <p-progressBar *ngIf="remoteStatus?.filesystem?.user_data" [value]="remoteStatus!.filesystem!.user_data!.used!/
         (remoteStatus!.filesystem!.user_data!.available!+remoteStatus!.filesystem!.user_data!.used!)*100" [style]="{width: '100px'}"
-                       [pTooltip]="'Storage : '+Math.floor(remoteStatus!.filesystem!.user_data!.available!/1000000).toLocaleString()+' megabytes available on '+
-                        Math.floor((remoteStatus!.filesystem!.user_data!.available!+remoteStatus!.filesystem!.user_data!.used!)/1000000).toLocaleString()" unit="Mb">
+                       [pTooltip]="'Storage : '+Math.floor(remoteStatus!.filesystem!.user_data!.available!/1000000).toLocaleString()+' megabytes available (total '+
+                        Math.floor((remoteStatus!.filesystem!.user_data!.available!+remoteStatus!.filesystem!.user_data!.used!)/1000000).toLocaleString()+'MB)'" unit="Mb">
         </p-progressBar>
         <span>CPU</span>
-        <p-progressBar *ngIf="remoteStatus?.load_avg" [value]="remoteStatus!.load_avg!.one!" [style]="{width: '100px'}"
-                       [pTooltip]="'CPU : '+Math.floor(remoteStatus!.load_avg!.one!).toLocaleString()+' %'">
+        <p-progressBar *ngIf="remoteStatus?.load_avg" [value]="Math.round(remoteStatus!.load_avg!.one!*100)/100" [style]="{width: '100px'}"
+                       [pTooltip]="'CPU : '+(Math.round(remoteStatus!.load_avg!.one!*100)/100).toLocaleString()+' %'">
         </p-progressBar>
       </ng-container>
       <p-dropdown [(ngModel)]="selectedRemote" [options]="remotes" placeholder="Select remote" (ngModelChange)="setRemote(selectedRemote!)">

src/app/remote-editor/remote-grid/remote-grid.component.html

@@ -32,15 +32,15 @@
               <p-tag [value]="Helper.getCommandName(item.command, configEntityCommands)" severity="secondary"></p-tag>
             </ng-container>
             <span *ngIf="item?.media_player_id" style="text-align: center;width:100%;height: 100%">
-          <p-chip *ngIf="!runMode" [label]="getEntityName(item?.media_player_id!)"
-                  [style]="Helper.getStyle(getEntityName(item?.media_player_id!))"></p-chip>
-          <div style="position: relative; width: 100%;height: 100%">
-            <img *ngIf="!runMode" src="/assets/icons/media_player.svg" alt="Media player" class="media_player_icon">
-            <ng-container *ngIf="runMode">
-              <app-activity-media-entity [entityId]="item.media_player_id" [remote]="remote" [size]="getGridItemSize(page, item)"
-                                         (onSelectButton)="onSelectButton.emit($event)"/>
-            </ng-container>
-          </div>
+              <p-chip *ngIf="!runMode" [label]="getEntityName(item?.media_player_id!)"
+                      [style]="Helper.getStyle(getEntityName(item?.media_player_id!))"></p-chip>
+              <div style="position: relative; width: 100%;height: 100%">
+                <img *ngIf="!runMode" src="/assets/icons/media_player.svg" alt="Media player" class="media_player_icon">
+                <ng-container *ngIf="runMode">
+                  <app-activity-media-entity [entityId]="item.media_player_id" [remote]="remote" [size]="getGridItemSize(page, item)"
+                                             (onSelectButton)="onSelectButton.emit($event)"/>
+                </ng-container>
+              </div>
         </span>
             <ng-container *ngIf="!runMode">
               <ng-container *ngFor="let param of Helper.getParams(item?.command)">

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

@@ -40,6 +40,10 @@
   background: rgba(0, 0, 0, 0);
 }
 
+.widget-connection-status .p-tag {
+  transition: all 1s ease-in-out;
+}
+
 .charging-status {
   position: absolute;
   left: 50%;

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

@@ -24,7 +24,7 @@
         <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"
+                 pTooltip="Click to wake up the remote" class="widget-connection-status"
                  (click)="wakeRemote($event)" [style]="{'cursor': 'pointer'}"/>
         </div>
         <div class="flex align-items-center justify-content-center"
@@ -86,7 +86,7 @@
     <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"
+             pTooltip="Click to wake up the remote" class="widget-connection-status"
              (click)="wakeRemote($event)" [style]="{'cursor': 'pointer'}"/>
     </div>
     <div class="flex align-items-center justify-content-center"