Auto detect server

Client/src/app/components/home/home.page.html

@@ -26,6 +26,19 @@
       </ion-col>
     </ion-row>
 
+    <ion-row>
+      <ion-col>
+        <ion-card class="noselect" (click)="wakeUp()">
+          <ion-card-header>
+            <ion-card-title>Turn on</ion-card-title>
+          </ion-card-header>
+          <ion-card-content>
+            <ion-icon name="ice-cream-outline"></ion-icon>
+          </ion-card-content>
+        </ion-card>
+      </ion-col>
+    </ion-row>
+
     <ion-row>
       <ion-col>
         <ion-card class="noselect" (click)="commandAlert('sleep')">

Client/src/app/components/home/home.page.ts

@@ -1,3 +1,4 @@
+import { WOLService } from './../../services/WOL.service';
 import { Component, OnInit } from '@angular/core';
 import { AlertController } from '@ionic/angular';
 import { Store } from '@ngrx/store';
@@ -20,7 +21,8 @@ export class HomePage implements OnInit{
   constructor(
     public alertController: AlertController,
     private httpCommand: NetworkRequestsService,
-    private store: Store
+    private store: Store,
+    private WOLService: WOLService
   ) {}
 
   ngOnInit() {
@@ -59,4 +61,8 @@ export class HomePage implements OnInit{
 
     await alert.present();
   }
+
+  wakeUp(){
+    this.WOLService.wakeUp();
+  }
 }

Client/src/app/components/searchHost/searchHost.module.ts

@@ -14,6 +14,7 @@ import { SearchHostPageRoutingModule } from './searchHost-routing.module';
     ExploreContainerComponentModule,
     SearchHostPageRoutingModule
   ],
+  exports: [SearchHostPage],
   declarations: [SearchHostPage]
 })
 export class SearchHostPageModule {}

Client/src/app/components/searchHost/searchHost.page.html

@@ -5,11 +5,27 @@
 </ion-header>
 
 <ion-content [fullscreen]="true">
+  <ion-refresher slot="fixed" (ionRefresh)="refresh($event)">
+    <ion-refresher-content></ion-refresher-content>
+  </ion-refresher>
   <ion-header collapse="condense">
     <ion-toolbar>
       <ion-title size="large">WOL</ion-title>
     </ion-toolbar>
   </ion-header>
-
-  <app-explore-container name="WOL"></app-explore-container>
+<!-- WOL -->
+<ion-list>
+  <ion-item *ngIf="netWorkDevices.length == 0">
+    <ion-label>No Devices found</ion-label>
+  </ion-item>
+      <ion-item-sliding *ngFor="let device of netWorkDevices">
+      <ion-item>
+        <ion-label>{{device.ipv4Addresses[0]}}</ion-label>
+      </ion-item>
+      <ion-item-options>
+        <ion-item-option (click)="saveWolDevice(device)">Save</ion-item-option>
+      </ion-item-options>
+    </ion-item-sliding>
+</ion-list>
+<!-- wol end -->
 </ion-content>

Client/src/app/components/searchHost/searchHost.page.ts

@@ -1,8 +1,52 @@
-import { Component } from '@angular/core';
-
+import { WolAddressChanged } from './../../store/gotobed.actions';
+import { Component, OnInit } from '@angular/core';
+import { Zeroconf, ZeroconfResult, ZeroconfService } from "@ionic-native/zeroconf";
+import { Store } from '@ngrx/store';
+import { ServiceOptions } from 'src/app/gotobed.models';
+import { MacSettingsChanged } from 'src/app/store/gotobed.actions';
+import { GotobedState } from 'src/app/store/gotobed.state';
 @Component({
   selector: 'app-searchhost',
   templateUrl: 'searchHost.page.html',
   styleUrls: ['searchHost.page.scss']
 })
-export class SearchHostPage { }
+export class SearchHostPage implements OnInit {
+  netWorkDevices: ZeroconfService[] = [];
+
+  constructor(private store: Store<GotobedState>) {}
+
+  ngOnInit(): void {
+    this.scanDevices();
+  }
+
+  scanDevices() {
+    Zeroconf.watchAddressFamily = 'ipv4';
+    Zeroconf.watch("_http._tcp.", "local.").subscribe(result => {
+      console.log("Zeroconf Service Changed:");
+      console.log(result.service);
+      if(result.service.ipv4Addresses.length > 0 && JSON.stringify(this.netWorkDevices).includes(result.service.ipv4Addresses[0]) == false) {
+        this.netWorkDevices.push(result.service);
+      }
+    });
+  }
+
+  saveWolDevice(device: ZeroconfService) {
+    this.store.dispatch(new MacSettingsChanged(device.txtRecord.mac));
+    this.store.dispatch(new WolAddressChanged(this.convertToBroadcast(device.ipv4Addresses[0])));
+  }
+  
+  refresh(event) {
+    console.log('Begin async operation');
+    this.scanDevices();
+    setTimeout(() => {
+      console.log('Async operation has ended');
+      event.target.complete();
+    }, 2000);
+  }
+
+  private convertToBroadcast(ip: string) {
+    let subnetArray = ip.split('.');
+    subnetArray[3] = '255';
+    return subnetArray.join('.');
+  }
+}

Client/src/app/components/settings/serverSettings/serverSettings.component.html

@@ -17,4 +17,15 @@
     <ion-label position="fixed">Port</ion-label>
     <ion-input number placeholder="8080" (ionChange)="onPortChange($event)" [value]="port"></ion-input>
   </ion-item>
+  <ion-list-header>
+    <ion-label> WOL Settings </ion-label>
+  </ion-list-header>
+  <ion-item>
+    <ion-label position="fixed">Mac Address</ion-label>
+    <ion-input placeholder="MM:MM:MM:SS:SS:SS" (ionChange)="onMacAdressChange($event)" [value]="macAddress"></ion-input>
+  </ion-item>
+  <ion-item>
+    <ion-label position="fixed">Wol Address</ion-label>
+    <ion-input placeholder="Ex: 192.168.1.255" (ionChange)="onWolAddressChange($event)" [value]="wolAddress"></ion-input>
+  </ion-item>
 </ion-list>

Client/src/app/components/settings/serverSettings/serverSettings.component.ts

@@ -1,7 +1,7 @@
-import { getAddress, getPort, getProtocol } from './../../../store/gotobed.selectors';
+import { getAddress, getMacAddress, getPort, getProtocol, getWolAddress } from './../../../store/gotobed.selectors';
 import { Store } from '@ngrx/store';
 import { Component, OnInit } from '@angular/core';
-import { PortSettingsChanged, ProtocolSettingsChanged, SaveAddressSettings } from 'src/app/store/gotobed.actions';
+import { MacSettingsChanged, PortSettingsChanged, ProtocolSettingsChanged, SaveAddressSettings, WolAddressChanged } from 'src/app/store/gotobed.actions';
 import { GotobedState } from 'src/app/store/gotobed.state';
 import { InputCustomEvent } from 'src/app/gotobed.models';
 
@@ -14,6 +14,8 @@ export class ServerSettingsComponent implements OnInit{
   port = null;
   address = '';
   protocol = '';
+  macAddress = '';
+  wolAddress = '';
 
   constructor(private store: Store<GotobedState>) { }
 
@@ -30,6 +32,14 @@ export class ServerSettingsComponent implements OnInit{
     this.store
       .select(getProtocol)
       .subscribe(protocol => (this.protocol = protocol));
+
+    this.store
+      .select(getMacAddress)
+      .subscribe(macAddress => (this.macAddress = macAddress));
+    
+    this.store
+      .select(getWolAddress)
+      .subscribe(wolAddress => (this.wolAddress = wolAddress));
   }
 
   onProtocolChange(protocol: InputCustomEvent){
@@ -44,4 +54,12 @@ export class ServerSettingsComponent implements OnInit{
     console.log(port.detail.value);
     this.store.dispatch(new PortSettingsChanged(port.detail.value));
   }
+  onMacAdressChange(macAddress: InputCustomEvent){
+    console.log(macAddress.detail.value);
+    this.store.dispatch(new MacSettingsChanged(macAddress.detail.value));
+  }
+  onWolAddressChange(wolAddress: InputCustomEvent){
+    console.log(wolAddress.detail.value);
+    this.store.dispatch(new WolAddressChanged(wolAddress.detail.value));
+  }
 }