Improvements

server/app.js

@@ -328,6 +328,32 @@ app.delete('/api/config/remote/:address', async (req, res, next) => {
   }
 })
 
+
+app.post('/api/remote/:address/wake', async (req, res, next) => {
+  const address = req.params.address;
+  let user = REMOTE_USER
+  if (req.body?.user)
+    user = req.body?.user;
+  let broadcast = req.query.broadcast;
+  const configFile = getConfigFile();
+  const remoteEntry = configFile?.remotes?.find(remote => remote.address === address);
+  if (!remoteEntry)
+  {
+    res.status(404).json(address);
+    return;
+  }
+  const remote = new Remote(remoteEntry.address, remoteEntry.port, remoteEntry.user, remoteEntry.token,
+    remoteEntry.api_key, remoteEntry.mac_address);
+  try {
+    console.log("Wake on lan", remote.mac_address);
+    await remote.wakeOnLan(broadcast);
+    res.status(200).end();
+  } catch (error)
+  {
+    errorHandler(error, req, res, next);
+  }
+})
+
 app.post('/api/remote/:address/system', async (req, res, next) => {
   const address = req.params.address;
   let user = REMOTE_USER

server/package.json

@@ -22,6 +22,7 @@
     "open": "^10.1.0",
     "process": "^0.11.10",
     "rimraf": "^6.0.1",
+    "wake-on-lan": "^0.1.0",
     "ws": "^8.18.0"
   },
   "devDependencies": {

server/remote.js

@@ -3,8 +3,7 @@ import fs from "node:fs";
 import { readdir } from 'node:fs/promises';
 import path from "path";
 import {pipeline as streamPipeline} from 'node:stream/promises';
-import * as url from "node:url";
-import * as stream from "node:stream";
+import wakeonlan from "wake-on-lan";
 
 const SystemCommand = {
   STANDBY: 'STANDBY',
@@ -27,14 +26,16 @@ export class Remote
   remote_name;
   protocol = 'http://';
   resources_path = '';
+  mac_address;
 
 
-  constructor(address, port, user, token, api_key) {
+  constructor(address, port, user, token, api_key, mac_address) {
     this.address = address;
     this.port = port;
     this.api_key = api_key;
     this.user = user;
     this.token = token;
+    this.mac_address = mac_address;
   }
 
   async getResources(type, resources_directory) {
@@ -96,6 +97,7 @@ export class Remote
     if (this.api_key) data.api_key = this.api_key;
     if (this.api_key_name) data.api_key_name = this.api_key_name;
     if (this.valid_to) data.valid_to = this.valid_to;
+    if (this.mac_address) data.mac_address = this.mac_address;
     return data;
   }
 
@@ -143,6 +145,7 @@ export class Remote
       if (res?.body) resBody = JSON.parse(res.body);
       console.log('Get remote info :', resBody);
       this.remote_name = resBody.device_name;
+      this.mac_address = resBody.address;
       return resBody.device_name;
     } catch (err) {
       console.error('Error', err, res?.body);
@@ -545,6 +548,23 @@ export class Remote
     return JSON.parse(res.body);
   }
 
+  async wakeOnLan(broadcast = null)
+  {
+    if (!this.mac_address) {
+      console.error("Cannot wakeonlan, no mac address defined");
+      throw new Error("MAC address not defined");
+    }
+    if (broadcast)
+      await wakeonlan(this.mac_address, {ip:broadcast})
+    else {
+      await wakeonlan(this.mac_address, {ip: '0.0.0.0'});
+      try {
+        let mask = this.address.split('.').slice(0, 3).join('.')+'.0';
+        await wakeonlan(this.mac_address, {ip: mask});
+      } catch (error) {}
+    }
+  }
+
   async getBackup(response)
   {
     const options = { headers: this.getHeaders(), throwHttpErrors: false};

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

@@ -16,6 +16,10 @@
   padding: 5px;
 }
 
+.disconnected-state {
+  cursor: pointer;
+}
+
 .media-card-border:hover {
   background: rgba(0, 0, 0, 0.73);
   border: 2px solid rgb(30, 31, 34);
@@ -40,14 +44,15 @@
 
 .message-panel .p-message .p-message-wrapper {
   padding: 0.1rem 0.1rem;
+  height: 25px;
 }
 
 .message-panel .p-message .p-message-close {
   width: 0.9rem;
   height: 0.9rem;
+}
 
 
-  .message-panel .p-message .p-message-icon {
-    font-size: 0.9rem;
-    margin-right: 0.15rem;
-  }}
+.message-panel .p-message-icon {
+  display:none !important;
+}

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

@@ -1,7 +1,6 @@
+<p-toast key="activeEntities"/>
 <p-menubar [model]="menuItems">
-
   <ng-template pTemplate="end">
-
     <div class="flex align-items-center gap-2">
       <p-inputNumber [(ngModel)]="scale" pTooltip="Scale elements" min="0.1" max="3" (ngModelChange)="Helper.setScale(scale)" mode="decimal"
                      [minFractionDigits]="1"
@@ -52,9 +51,12 @@
   </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'"
+           [class]="'disconnected-state'"
+            pTooltip="Click to wake up the remote"
+            (click)="wakeRemote($event)"/>
   </div>
-  <p-messages *ngIf="messages.length > 0" class="message-panel" [(value)]="messages" [enableService]="false" showTransitionOptions="0ms" hideTransitionOptions="0ms"/>
+  <p-messages *ngIf="messages.length > 0" class="message-panel" styleClass="message-panel" [(value)]="messages" [enableService]="false" showTransitionOptions="0ms" hideTransitionOptions="0ms"/>
 </div>
 <div class="flex flex-wrap gap-3">
   <div class="flex gap-2 align-content-center justify-content-center media-card-border"

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

@@ -1,11 +1,11 @@
 import {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, ViewEncapsulation} from '@angular/core';
 import {DropdownModule} from "primeng/dropdown";
 import {AsyncPipe, NgForOf, NgIf} from "@angular/common";
-import {MenuItem, Message, PrimeTemplate} from "primeng/api";
+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 {MediaEntityState, RemoteState, RemoteWebsocketService} from "../remote-widget/remote-websocket.service";
+import {MediaEntityState, RemoteState, RemoteWebsocketService} from "../remote-websocket.service";
 import {ServerService} from "../server.service";
 import {MenubarModule} from "primeng/menubar";
 import {Activity, Entity, Remote, RemoteData} from "../interfaces";
@@ -19,6 +19,7 @@ import {AutoCompleteCompleteEvent, AutoCompleteModule} from "primeng/autocomplet
 import {ActivityPlayerComponent} from "../activity-player/activity-player.component";
 import {InputNumberModule} from "primeng/inputnumber";
 import {MessagesModule} from "primeng/messages";
+import {ToastModule} from "primeng/toast";
 
 @Component({
   selector: 'app-active-entities',
@@ -41,12 +42,14 @@ import {MessagesModule} from "primeng/messages";
     AutoCompleteModule,
     ActivityPlayerComponent,
     InputNumberModule,
-    MessagesModule
+    MessagesModule,
+    ToastModule
   ],
   templateUrl: './active-entities.component.html',
   styleUrl: './active-entities.component.css',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  providers: [MessageService]
 })
 export class ActiveEntitiesComponent implements OnInit {
   remoteState: RemoteState | undefined;
@@ -68,7 +71,8 @@ export class ActiveEntitiesComponent implements OnInit {
   scale = 0.8;
   messages: Message[] = [];
 
-  constructor(private server:ServerService, protected remoteWebsocketService: RemoteWebsocketService, private cdr:ChangeDetectorRef) { }
+  constructor(private server:ServerService, protected remoteWebsocketService: RemoteWebsocketService,
+              private cdr:ChangeDetectorRef, private messageService: MessageService) { }
 
   ngOnInit(): void {
     const scale = localStorage.getItem("scale");
@@ -205,4 +209,19 @@ export class ActiveEntitiesComponent implements OnInit {
     this.messages = [$event];
     this.cdr.detectChanges();
   }
+
+  wakeRemote($event: MouseEvent) {
+    // if (this.remoteWebsocketService.isRemoteConnected()) return;
+    if (!this.selectedRemote) return;
+    this.server.wakeRemote(this.selectedRemote).subscribe({next: results => {
+        this.messageService.add({severity:'success', summary: "Wake on lan command sent", key: 'activeEntities'});
+        this.cdr.detectChanges();
+      },
+      error: error => {
+        this.messageService.add({severity:'error', summary: "Wake on lan command sent", key: 'activeEntities'});
+        this.cdr.detectChanges();
+      }
+    });
+    this.server.wakeRemote(this.selectedRemote, "255.255.255.0").subscribe({});
+  }
 }