Added server

Client/src/app/components/explore-container/explore-container.component.html

@@ -0,0 +1,4 @@
+<div id="container">
+  <strong>{{ name }}</strong>
+  <p>Explore <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
+</div>

Client/src/app/components/explore-container/explore-container.component.scss

@@ -0,0 +1,27 @@
+#container {
+  text-align: center;
+
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+#container strong {
+  font-size: 20px;
+  line-height: 26px;
+}
+
+#container p {
+  font-size: 16px;
+  line-height: 22px;
+
+  color: #8c8c8c;
+
+  margin: 0;
+}
+
+#container a {
+  text-decoration: none;
+}

Client/src/app/components/explore-container/explore-container.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { ExploreContainerComponent } from './explore-container.component';
+
+describe('ExploreContainerComponent', () => {
+  let component: ExploreContainerComponent;
+  let fixture: ComponentFixture<ExploreContainerComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ExploreContainerComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ExploreContainerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Client/src/app/components/explore-container/explore-container.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-explore-container',
+  templateUrl: './explore-container.component.html',
+  styleUrls: ['./explore-container.component.scss'],
+})
+export class ExploreContainerComponent implements OnInit {
+  @Input() name: string;
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

Client/src/app/components/explore-container/explore-container.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ExploreContainerComponent } from './explore-container.component';
+
+@NgModule({
+  imports: [ CommonModule, FormsModule, IonicModule],
+  declarations: [ExploreContainerComponent],
+  exports: [ExploreContainerComponent]
+})
+export class ExploreContainerComponentModule {}

Client/src/app/components/home/home-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { HomePage } from './home.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: HomePage,
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class HomePageRoutingModule {}

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

@@ -0,0 +1,22 @@
+import { IonicModule } from '@ionic/angular';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { HomePage } from './home.page';
+import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
+
+import { HomePageRoutingModule } from './home-routing.module';
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+  imports: [
+    IonicModule,
+    CommonModule,
+    FormsModule,
+    ExploreContainerComponentModule,
+    HomePageRoutingModule,
+    RouterModule, // RouterModule.forRoot(routes, { useHash: true }), if this is your app.module
+  ],
+  declarations: [HomePage]
+})
+export class HomePageModule {}

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

@@ -0,0 +1,67 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>
+      Home
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">Home</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <app-explore-container name="Home"></app-explore-container>
+
+  <ion-grid>
+    <ion-row>
+      <ion-col>
+        <ion-card class="noselect" (click)="presentAlert('shutdown')">
+          <ion-card-header>
+            <ion-card-title>Shutdown</ion-card-title>
+          </ion-card-header>
+          <ion-card-content>
+            <ion-icon name="alert-circle-outline"></ion-icon>
+          </ion-card-content>
+        </ion-card>
+      </ion-col>
+    </ion-row>
+
+    <ion-row>
+      <ion-col>
+        <ion-card class="noselect" (click)="presentAlert('sleep')">
+          <ion-card-header>
+            <ion-card-title>Sleep</ion-card-title>
+          </ion-card-header>
+          <ion-card-content>
+            <ion-icon name="bed-outline"></ion-icon>
+          </ion-card-content>
+        </ion-card>
+      </ion-col>
+      <ion-col>
+        <ion-card class="noselect" (click)="presentAlert('reboot')">
+          <ion-card-header>
+            <ion-card-title>Reboot</ion-card-title>
+          </ion-card-header>
+          <ion-card-content>
+            <ion-icon name="reload-circle-outline"></ion-icon>
+          </ion-card-content>
+        </ion-card>
+      </ion-col>
+    </ion-row>
+  <ion-row>
+    <ion-col>
+      <ion-card class="noselect" (click)="presentAlert('logout')">
+        <ion-card-header>
+          <ion-card-title>Logout</ion-card-title>
+        </ion-card-header>
+        <ion-card-content>
+          <ion-icon name="log-out-outline"></ion-icon>
+        </ion-card-content>
+      </ion-card>
+    </ion-col>
+  </ion-row>
+
+  </ion-grid>
+</ion-content>

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

@@ -0,0 +1,22 @@
+ion-icon {font-size: 64px;}
+ion-card-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-bottom: 37px;
+}
+ion-card-content, ion-card-header {
+    background-color: #560051;
+    cursor: pointer;
+}
+
+.noselect {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+}
+ion-icon {color: #ffffff;}

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

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
+
+import { HomePage } from './home.page';
+
+describe('HomePage', () => {
+  let component: HomePage;
+  let fixture: ComponentFixture<HomePage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [HomePage],
+      imports: [IonicModule.forRoot(), ExploreContainerComponentModule]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(HomePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,69 @@
+import { Component, OnInit } from '@angular/core';
+import { AlertController } from '@ionic/angular';
+import { Store } from '@ngrx/store';
+import { NetworkRequestsService } from '../../services/networkRequests.service';
+import { SendCommandChanged } from '../../store/gotobed.actions';
+import { getAddress, getCommandType, getPort, getProtocol } from '../../store/gotobed.selectors';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: 'home.page.html',
+  styleUrls: ['home.page.scss']
+})
+
+export class HomePage implements OnInit{
+
+  constructor(
+    public alertController: AlertController,
+    private httpCommand: NetworkRequestsService,
+    private store: Store) {}
+
+  commandtype$ = this.store.select(getCommandType);
+
+  port = null;
+  address = "";
+  protocol = "";
+
+  ngOnInit() {
+    this.store
+      .select(getPort)
+      .subscribe(port => (this.port = port));
+
+    this.store
+      .select(getAddress)
+      .subscribe(address => (this.address = address));
+
+    this.store
+      .select(getProtocol)
+      .subscribe(protocol => (this.protocol = protocol));
+  }
+
+  async presentAlert(commandType) {
+    const alert = await this.alertController.create({
+      cssClass: 'my-custom-class',
+      header: 'Are you sure?',
+      message: `You are about to send a ${commandType} command to the device.`,
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          cssClass: 'secondary',
+          handler: (blah) => {
+            console.log('Confirm Cancel: blah');
+            this.commandtype$.subscribe(commandType => {
+              console.log(commandType);
+            });
+          }
+        }, {
+          text: 'Send',
+          handler: () => {
+            this.store.dispatch(new SendCommandChanged(commandType));
+            this.httpCommand.sendCommand(commandType, this.address, this.port, this.protocol);
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
+}

Client/src/app/components/menu/menu-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { HomePage } from '../home/home.page';
+import { SearchHostPage } from '../searchHost/searchHost.page';
+import { SettingsPage } from '../settings/settings.page';
+
+const routes: Routes = [
+  { path: '', redirectTo: '/home', pathMatch: 'full' },
+  { path: 'home', component: HomePage, pathMatch: 'full',},
+  { path: 'searchHost', component: SearchHostPage, pathMatch: 'full',},
+  { path: 'settings', component: SettingsPage, pathMatch: 'full',}
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+})
+export class MenuPageRoutingModule {}

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

@@ -0,0 +1,17 @@
+import { IonicModule } from '@ionic/angular';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { MenuPageRoutingModule } from './menu-routing.module';
+
+@NgModule({
+  imports: [
+    IonicModule,
+    CommonModule,
+    FormsModule,
+    MenuPageRoutingModule
+  ],
+  declarations: []
+})
+export class MenuPageModule {}

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

@@ -0,0 +1,20 @@
+<ion-tabs>
+
+  <ion-tab-bar slot="bottom">
+    <ion-tab-button tab="home">
+      <ion-icon name="home-sharp"></ion-icon>
+      <ion-label>Home</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="searchHost">
+      <ion-icon name="search-sharp"></ion-icon>
+      <ion-label>WOL</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="settings">
+      <ion-icon name="settings-sharp"></ion-icon>
+      <ion-label>Settings</ion-label>
+    </ion-tab-button>
+  </ion-tab-bar>
+
+</ion-tabs>

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-menu',
+  templateUrl: 'menu.page.html',
+  styleUrls: ['menu.page.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MenuPage {
+
+  constructor() {}
+
+}

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

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { SearchHostPage } from './searchHost.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: SearchHostPage,
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class SearchHostPageRoutingModule {}

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

@@ -0,0 +1,21 @@
+import { IonicModule } from '@ionic/angular';
+import { RouterModule } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { SearchHostPage } from './searchHost.page';
+import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
+
+import { SearchHostPageRoutingModule } from './searchHost-routing.module';
+
+@NgModule({
+  imports: [
+    IonicModule,
+    CommonModule,
+    FormsModule,
+    ExploreContainerComponentModule,
+    SearchHostPageRoutingModule
+  ],
+  declarations: [SearchHostPage]
+})
+export class SearchHostPageModule {}

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

@@ -0,0 +1,17 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>
+      Search Host
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">Tab 2</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <app-explore-container name="Tab 2 page"></app-explore-container>
+</ion-content>

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

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
+
+import { SearchHostPage } from './searchHost.page';
+
+describe('SearchHostPage', () => {
+  let component: SearchHostPage;
+  let fixture: ComponentFixture<SearchHostPage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [SearchHostPage],
+      imports: [IonicModule.forRoot(), ExploreContainerComponentModule]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SearchHostPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-searchHost',
+  templateUrl: 'searchHost.page.html',
+  styleUrls: ['searchHost.page.scss']
+})
+export class SearchHostPage {
+
+  constructor() {}
+  testText = '';
+
+  test() {
+    // console.log("!test")
+    // // Zeroconf.watchAddressFamily = 'ipv4';
+    // // Zeroconf.watch('_http._tcp.', 'local.').subscribe(result => {
+    // //   this.testText = JSON.stringify(result.service.ipv4Addresses);
+    // //   console.log(JSON.stringify(result.service.ipv4Addresses))
+    // // });
+
+    // ServiceDiscovery.getNetworkServices('ssdp:all')
+    // .then(devices => {
+    //   console.log(JSON.stringify(devices))
+    //   this.testText = JSON.stringify(devices)
+    // })
+    // .catch(error => console.error(error));
+
+  }
+}

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

@@ -0,0 +1,20 @@
+<ion-list>
+  <ion-list-header>
+    <ion-label (click)="test()"> Remote Server Settings </ion-label>
+  </ion-list-header>
+  <ion-item>
+    <ion-label position="fixed">Protocol</ion-label>
+    <ion-select [value]="protocol" (ionChange)="onProtocolChange($event)">
+      <ion-select-option value="http">http</ion-select-option>
+      <ion-select-option value="https">https</ion-select-option>
+    </ion-select>
+  </ion-item>
+  <ion-item>
+    <ion-label position="fixed">Address</ion-label>
+    <ion-input placeholder="placeholder" (ionChange)="onAddressChange($event)" [value]="address"></ion-input>
+  </ion-item>
+  <ion-item>
+    <ion-label position="fixed">Port</ion-label>
+    <ion-input number placeholder="8080" (ionChange)="onPortChange($event)" [value]="port"></ion-input>
+  </ion-item>
+</ion-list>

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

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { ServerSettingsComponent } from './serverSettings.component';
+
+describe('ServerSettingsComponent', () => {
+  let component: ServerSettingsComponent;
+  let fixture: ComponentFixture<ServerSettingsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ServerSettingsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ServerSettingsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,49 @@
+import { getAddress, getPort, getProtocol } 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 { GotobedState } from 'src/app/store/gotobed.state';
+import { InputCustomEvent } from 'src/app/gotobed.models';
+
+@Component({
+  selector: 'app-serversettings',
+  templateUrl: './serverSettings.component.html',
+  styleUrls: ['./serverSettings.component.scss']
+})
+export class ServerSettingsComponent implements OnInit{
+
+  constructor(private _store: Store<GotobedState>) { }
+
+  port = null;
+  address = "";
+  protocol = "";
+
+  ngOnInit() {
+    console.log("#Render server settings");
+    this._store
+      .select(getPort)
+      .subscribe(port => (this.port = port));
+
+    this._store
+      .select(getAddress)
+      .subscribe(address => (this.address = address));
+
+    this._store
+      .select(getProtocol)
+      .subscribe(protocol => (this.protocol = protocol));
+  }
+
+  onProtocolChange(protocol: InputCustomEvent){
+    console.log(protocol.detail.value) 
+    this._store.dispatch(new ProtocolSettingsChanged(protocol.detail.value));
+  }
+  onAddressChange(address: InputCustomEvent){
+    console.log(address.detail.value)
+    this._store.dispatch(new SaveAddressSettings(address.detail.value));
+  }
+  onPortChange(port: InputCustomEvent){
+    console.log(port.detail.value) 
+    this._store.dispatch(new PortSettingsChanged(port.detail.value));
+  }
+}

Client/src/app/components/settings/settings-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { SettingsPage } from './settings.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: SettingsPage,
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class SettingsPageRoutingModule {}

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

@@ -0,0 +1,24 @@
+import { ServerSettingsComponent } from './serverSettings/serverSettings.component';
+import { IonicModule } from '@ionic/angular';
+import { RouterModule } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { SettingsPage } from './settings.page';
+import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
+
+import { SettingsPageRoutingModule } from './settings-routing.module';
+
+@NgModule({
+  imports: [
+    IonicModule,
+    CommonModule,
+    FormsModule,
+    ExploreContainerComponentModule,
+    RouterModule.forChild([{ path: '', component: SettingsPage }]),
+    SettingsPageRoutingModule
+  ],
+  exports: [SettingsPage],
+  declarations: [SettingsPage, ServerSettingsComponent]
+})
+export class SettingsPageModule {}

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

@@ -0,0 +1,16 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>
+      Settings
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">Settings</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <app-serversettings></app-serversettings>
+</ion-content>

Client/src/app/components/settings/settings.page.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
+
+import { SettingsPage } from './settings.page';
+
+describe('SettingsPage', () => {
+  let component: SettingsPage;
+  let fixture: ComponentFixture<SettingsPage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [SettingsPage],
+      imports: [IonicModule.forRoot(), ExploreContainerComponentModule]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SettingsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-settings',
+  templateUrl: 'settings.page.html',
+  styleUrls: ['settings.page.scss']
+})
+export class SettingsPage {
+
+  constructor() {}
+
+}