updating find computer page

Client/package.json

@@ -33,7 +33,7 @@
     "@capacitor/status-bar": "1.0.6",
     "@ionic-native/core": "^5.36.0",
     "@ionic-native/zeroconf": "^5.36.0",
-    "@ionic/angular": "^5.5.2",
+    "@ionic/angular": "^6.2.3",
     "@ionic/storage": "^3.0.6",
     "@ionic/storage-angular": "^3.0.6",
     "@ngrx/effects": "^13.0.2",

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

@@ -1,6 +1,6 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>Search Host</ion-title>
+    <ion-title>Search computer</ion-title>
   </ion-toolbar>
 </ion-header>
 
@@ -13,19 +13,33 @@
       <ion-title size="large">WOL</ion-title>
     </ion-toolbar>
   </ion-header>
-<!-- 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 -->
+  <!-- WOL -->
+  <ion-list>
+    <ion-item *ngIf="netWorkDevices.length === 0">
+      <ion-label>No Devices found</ion-label>
+    </ion-item>
+    <ion-accordion-group>
+      <ion-accordion *ngFor="let device of netWorkDevices">
+        <ion-item slot="header" color="light">
+          <ion-icon name="desktop-outline"></ion-icon>
+          <ion-label>{{device.ipv4Addresses[0]}}</ion-label>
+        </ion-item>
+        <div slot="content">
+          <ion-item>
+            <ion-label>IP: {{device.ipv4Addresses[0]}}</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>PORT: {{device.PORT}}</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>MAC-Address: {{device.txtRecord.mac}}</ion-label>
+          </ion-item>
+          <ion-button expand="full" (click)="saveWolDevice(null)"
+            >Configure</ion-button
+          >
+        </div>
+      </ion-accordion>
+    </ion-accordion-group>
+  </ion-list>
+  <!-- wol end -->
 </ion-content>

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

@@ -0,0 +1,3 @@
+ion-icon {
+ padding-right: 5px;
+}

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

@@ -1,10 +1,10 @@
-import { WolAddressChanged } from './../../store/gotobed.actions';
+import { PortSettingsChanged, SaveAddressSettings, WolAddressChanged } from './../../store/gotobed.actions';
 import { Component, OnInit } from '@angular/core';
-import { Zeroconf, ZeroconfResult, ZeroconfService } from "@ionic-native/zeroconf";
+import { Zeroconf, 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';
+import { ToastController } from '@ionic/angular';
 @Component({
   selector: 'app-searchhost',
   templateUrl: 'searchHost.page.html',
@@ -13,7 +13,10 @@ import { GotobedState } from 'src/app/store/gotobed.state';
 export class SearchHostPage implements OnInit {
   netWorkDevices: ZeroconfService[] = [];
 
-  constructor(private store: Store<GotobedState>) {}
+  constructor(
+    private store: Store<GotobedState>,
+    public toastController: ToastController
+  ) {}
 
   ngOnInit(): void {
     this.scanDevices();
@@ -31,8 +34,11 @@ export class SearchHostPage implements OnInit {
   }
 
   saveWolDevice(device: ZeroconfService) {
+    this.presentToast();
     this.store.dispatch(new MacSettingsChanged(device.txtRecord.mac));
     this.store.dispatch(new WolAddressChanged(this.convertToBroadcast(device.ipv4Addresses[0])));
+    this.store.dispatch(new SaveAddressSettings(device.ipv4Addresses[0]));
+    this.store.dispatch(new PortSettingsChanged(device.port.toString()));
   }
 
   refresh(event) {
@@ -44,6 +50,14 @@ export class SearchHostPage implements OnInit {
     }, 2000);
   }
 
+  async presentToast() {
+    const toast = await this.toastController.create({
+      message: 'Your settings have been saved.',
+      duration: 2000,
+    });
+    toast.present();
+  }
+
   private convertToBroadcast(ip: string) {
     let subnetArray = ip.split('.');
     subnetArray[3] = '255';

package-lock.json

@@ -1,11 +1,3 @@
 {
-  "requires": true,
-  "lockfileVersion": 1,
-  "dependencies": {
-    "cordova-arp-cache-fetch": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/cordova-arp-cache-fetch/-/cordova-arp-cache-fetch-0.3.2.tgz",
-      "integrity": "sha512-8EYOUkIztG794jzY/qDy8AMxwIfpMYwaaffBnDp7HSLeQpXXBR2W5FibRhjoGyHxwopXTUIKoPhrtqTdB8LCKQ=="
-    }
-  }
+  "lockfileVersion": 1
 }