Added server

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

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: '',
+    loadChildren: () => import('./components/menu/menu.module').then(page => page.MenuPageModule)
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
+  ],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}

Client/src/app/app-store.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { StoreRouterConnectingModule } from '@ngrx/router-store';
+import { StoreModule } from '@ngrx/store';
+import { gotobedReducer } from './store/gotobed.reducer';
+const routes: Routes = [
+  {
+    path: '',
+    loadChildren: () => import('./components/menu/menu.module').then(page => page.MenuPageModule)
+  }
+];
+@NgModule({
+  imports: [
+    StoreModule.forFeature('Gotobed', gotobedReducer), StoreRouterConnectingModule.forRoot(),
+  ],
+  exports: [RouterModule]
+})
+export class AppStoreModule {}

Client/src/app/app.component.html

@@ -0,0 +1,4 @@
+<ion-app>
+  <ion-router-outlet></ion-router-outlet>
+  <app-menu></app-menu>
+</ion-app>

Client/src/app/app.component.spec.ts

@@ -0,0 +1,23 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { TestBed, waitForAsync } from '@angular/core/testing';
+
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+
+  beforeEach(waitForAsync(() => {
+
+    TestBed.configureTestingModule({
+      declarations: [AppComponent],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    }).compileComponents();
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  });
+  // TODO: add more tests!
+
+});

Client/src/app/app.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { StorageService } from './services/storage.service';
+import { ProtocolStorageKey, PortStorageKey, AddressStorageKey } from './gotobed.models';
+import { GotobedState, initialGotoBedState } from './store/gotobed.state';
+import { Store } from '@ngrx/store';
+import { ProtocolSettingsChanged } from './store/gotobed.actions';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.scss'],
+})
+export class AppComponent {
+
+  constructor(private storage: StorageService, private _store: Store<GotobedState>) { 
+    //this.storage.initializeStorage();
+    // this._store.dispatch(new ProtocolSettingsChanged(await this.storage.fetchFromStorage(ProtocolStorageKey).then(protocol =>  protocol)));
+    // this.storage.fetchFromStorage(PortStorageKey).then(port => (initialGotoBedState.port = port));
+    // this.storage.fetchFromStorage(AddressStorageKey).then(address => (initialGotoBedState.address = address));
+  } 
+}

Client/src/app/app.module.ts

@@ -0,0 +1,54 @@
+import { ExploreContainerComponent } from './components/explore-container/explore-container.component';
+import { ServerSettingsComponent } from './components/settings/serverSettings/serverSettings.component';
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouteReuseStrategy } from '@angular/router';
+import { Drivers } from '@ionic/storage';
+import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { MenuPage } from './components/menu/menu.page';
+import { NetworkRequestsService } from './services/networkRequests.service';
+import { StoreModule } from '@ngrx/store';
+import { StoreRouterConnectingModule } from '@ngrx/router-store';
+import { HttpClientModule } from '@angular/common/http';
+import { AppStoreModule } from './app-store.module';
+import { EffectsModule } from '@ngrx/effects';
+import { GotobedStoreModule } from './store/gotobed.store.module';
+import { GotobedEffects } from './store/gotoved.effects';
+import { IonicStorageModule } from '@ionic/storage-angular';
+import * as CordovaSQLLiteDriver from 'localforage-cordovasqlitedriver'
+import { SettingsPage } from './components/settings/settings.page';
+import { HTTP } from '@awesome-cordova-plugins/http/ngx';
+
+const components = [
+  AppComponent,
+  MenuPage, 
+  ServerSettingsComponent, 
+  SettingsPage, 
+  ExploreContainerComponent
+];
+
+@NgModule({
+  declarations: [components],
+  entryComponents: [],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(),
+    AppRoutingModule,
+    StoreModule.forRoot({}, {}),
+    StoreRouterConnectingModule.forRoot(),
+    HttpClientModule,
+    AppStoreModule,
+    EffectsModule.forRoot([GotobedEffects]),
+    GotobedStoreModule,
+    IonicStorageModule.forRoot({
+      name: 'gotobedStorage',
+      driverOrder: [CordovaSQLLiteDriver._driver, Drivers.IndexedDB]})
+  ],
+  providers: [HTTP, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy}],
+  bootstrap: [AppComponent],
+  exports: [NetworkRequestsService]
+})
+export class AppModule {}

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() {}
+
+}

Client/src/app/gotobed.models.ts

@@ -0,0 +1,18 @@
+export const AddressStorageKey = "AddressKey";
+export const PortStorageKey = "PortKey";
+export const ProtocolStorageKey = "ProtocolKey";
+export const CommandStorageKey = "CommandKey";
+
+
+export interface InputChangeEventDetail {
+    value: string | undefined | null;
+}
+  
+export interface InputCustomEvent extends CustomEvent {
+    detail: InputChangeEventDetail;
+    target: HTMLIonInputElement;
+}
+
+export interface NetRequest{
+    command: string;
+}

Client/src/app/services/networkRequests.service.ts

@@ -0,0 +1,37 @@
+import { Injectable } from '@angular/core';
+import { ToastController } from '@ionic/angular';
+import { NetRequest } from '../gotobed.models';
+import { HTTP } from '@awesome-cordova-plugins/http/ngx';
+import { HttpErrorResponse } from '@angular/common/http';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class NetworkRequestsService {
+  constructor(private readonly _httpClient: HTTP, public toastController: ToastController) { }
+
+  public sendCommand(command: string, address: string, port: number, connectionProtocol?: string,) {
+    const request: NetRequest = {
+      command: command,
+    }
+
+    this._httpClient.setDataSerializer('json');
+    this._httpClient.setServerTrustMode('nocheck');
+
+    this._httpClient.post(encodeURI(`${connectionProtocol ?? 'http'}://${address + ":" + port}/commandbridge`), request, {
+      ContentType: 'text/html;'
+    }).catch(response => {
+      this.showErrorMessage(response);
+    });
+  }
+
+  async showErrorMessage(errorMessage: HttpErrorResponse ) {
+    const toast = await this.toastController.create({
+      message: errorMessage.name + ': ' + errorMessage.message,
+      duration: 4000,
+      color: 'danger',
+      position: 'top'
+    });
+    toast.present();
+  }
+}

Client/src/app/services/storage.service.ts

@@ -0,0 +1,42 @@
+import { Injectable } from "@angular/core";
+import { Storage } from "@ionic/storage-angular";
+import * as cordovaSQLiteDriver from "localforage-cordovasqlitedriver";
+import { BehaviorSubject, from, of } from "rxjs";
+import { filter, switchMap, tap } from "rxjs/operators";
+
+@Injectable({
+    providedIn: "root"
+})
+export class StorageService {
+    constructor(private storage: Storage) { 
+        //this.initializeStorage();
+    }
+
+    private isStorageLoaded = new BehaviorSubject(false);
+
+    async initializeStorage() {
+        await this.storage.defineDriver(cordovaSQLiteDriver);
+        await this.storage.create();
+        this.isStorageLoaded.next(true);
+    }
+
+    public fetchFromStorage(key: string) {
+        return this.isStorageLoaded.pipe(
+            filter(loaded => loaded),
+            switchMap(() => from(this.storage.get(key)) || of([]))
+        );
+    }
+
+    public async addToStorage(key: string, data: string | number | string[]) {
+        const currentData = await this.fetchFromStorage(key);
+        currentData.pipe(tap(existingData => existingData.push(data)));
+        console.log(currentData);
+        this.storage.set(key, currentData);
+    }
+
+    public async removeFromStorage(key: string, data: string | number | string[]) {
+        const currentData = await this.fetchFromStorage(key);
+        const newData = currentData.pipe(tap(existingData => existingData.splice(data, 1)));
+        this.storage.set(key, newData);
+    }
+}

Client/src/app/store/gotobed.actions.ts

@@ -0,0 +1,42 @@
+import { Action } from '@ngrx/store';
+import { LoadSettingsState } from './gotobed.state';
+
+export enum EGotobedActions {
+    SendCommandChanged = '[GOTOBED] Command changed',
+    AddressSettingsChanged = '[GOTOBED] Address settings changed',
+    ProtocolSettingsChanged = '[GOTOBED] Protocol settings changed',
+    PortSettingsChanged = '[GOTOBED] Port settings changed',
+    AppInitialized = '[GOTOBED] App initialized',
+}
+
+export class SendCommandChanged implements Action {
+    public readonly type = EGotobedActions.SendCommandChanged;
+    constructor(public payload: string) { }
+}
+
+export class SaveAddressSettings implements Action {
+    public readonly type = EGotobedActions.AddressSettingsChanged;
+    constructor(public payload: string) { }
+}
+
+export class ProtocolSettingsChanged implements Action {
+    public readonly type = EGotobedActions.ProtocolSettingsChanged;
+    constructor(public payload: string) { }
+}
+
+export class PortSettingsChanged implements Action {
+    public readonly type = EGotobedActions.PortSettingsChanged;
+    constructor(public payload: string) { }
+}
+
+export class AppInitialized implements Action {
+    public readonly type = EGotobedActions.AppInitialized;
+    constructor(public payload: LoadSettingsState) { }
+}
+
+export type GotobedActions = 
+SendCommandChanged |
+ProtocolSettingsChanged | 
+PortSettingsChanged |
+SaveAddressSettings | 
+AppInitialized;

Client/src/app/store/gotobed.reducer.ts

@@ -0,0 +1,29 @@
+import { EGotobedActions, GotobedActions } from './gotobed.actions';
+import { GotobedState, initialGotoBedState } from './gotobed.state';
+
+export function gotobedReducer(state = initialGotoBedState, action: GotobedActions): GotobedState {
+    switch (action.type) {
+        case EGotobedActions.SendCommandChanged:
+            return {
+                ...state,
+                command: action.payload,
+            };
+        case EGotobedActions.ProtocolSettingsChanged:
+            return {
+                ...state,
+                protocol: action.payload,
+            };
+        case EGotobedActions.AddressSettingsChanged:
+            return {
+                ...state,
+                address: action.payload,
+            };
+        case EGotobedActions.PortSettingsChanged:
+            return {
+                ...state,
+                port: action.payload,
+            };
+        default:
+            return state;
+    }
+}

Client/src/app/store/gotobed.selectors.ts

@@ -0,0 +1,27 @@
+import { createFeatureSelector, createSelector } from '@ngrx/store';
+import { GotobedState, storeName } from './gotobed.state';
+
+export const gotobedState = createFeatureSelector<GotobedState>(
+    storeName
+);
+
+export const getCommandType = createSelector(
+    gotobedState,
+    (state: GotobedState) => state.command
+);
+
+export const getAddress = createSelector(
+    gotobedState,
+    (state: GotobedState) => state.address
+);
+
+export const getProtocol = createSelector(
+    gotobedState,
+    (state: GotobedState) => state.protocol
+);
+
+export const getPort = createSelector(
+    gotobedState,
+    (state: GotobedState) => state.port
+);
+

Client/src/app/store/gotobed.state.ts

@@ -0,0 +1,28 @@
+import { AddressStorageKey, PortStorageKey, ProtocolStorageKey } from "../gotobed.models";
+
+export const storeName = 'Gotobed';
+
+
+export interface GotobedState {
+    command: string;
+    isLoading: boolean;
+    protocol: string;
+    port: string;
+    address: string;
+    isConnected: boolean;
+}
+
+export const initialGotoBedState: GotobedState = {
+    command: '',
+    isLoading: false,
+    protocol: localStorage.getItem(ProtocolStorageKey) ?? "http",
+    port: localStorage.getItem(PortStorageKey) ?? '3000',
+    address: localStorage.getItem(AddressStorageKey) ?? 'localhost:8080',
+    isConnected: false,
+};
+
+export interface LoadSettingsState {
+    protocol: string;
+    port: string;
+    address: string;
+}

Client/src/app/store/gotobed.store.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { EffectsModule } from '@ngrx/effects';
+import { StoreModule } from '@ngrx/store';
+import { gotobedReducer } from './gotobed.reducer';
+import { GotobedEffects } from './gotoved.effects';
+
+@NgModule({
+    imports: [
+        StoreModule.forFeature('Gotobed', gotobedReducer),
+        EffectsModule.forFeature([GotobedEffects])
+    ],
+    providers: [],
+})
+export class GotobedStoreModule {}

Client/src/app/store/gotoved.effects.ts

@@ -0,0 +1,69 @@
+import { PortStorageKey } from './../gotobed.models';
+import { Injectable } from '@angular/core';
+import { Actions, createEffect, ofType, concatLatestFrom, ROOT_EFFECTS_INIT } from '@ngrx/effects';
+import { Store } from '@ngrx/store';
+import { map, tap, withLatestFrom } from 'rxjs/operators';
+import { AddressStorageKey, ProtocolStorageKey } from '../gotobed.models';
+import { StorageService } from '../services/storage.service';
+import { AppInitialized, EGotobedActions, ProtocolSettingsChanged, SaveAddressSettings, SendCommandChanged } from './gotobed.actions';
+
+@Injectable()
+export class GotobedEffects {
+
+    init$ = createEffect(() => 
+    this._actions$.pipe(
+        ofType<AppInitialized>(ROOT_EFFECTS_INIT),
+        concatLatestFrom(() => this._store),
+        map(async ([action]) => {
+            this.storage.initializeStorage();
+            console.log("Loading# Srorage")
+            return action.payload = {
+                address: localStorage.getItem(AddressStorageKey),
+                port: localStorage.getItem(PortStorageKey),
+                protocol: localStorage.getItem(ProtocolStorageKey),
+            }
+        })
+    ), { dispatch: false }
+    );
+
+    saveAddressSettings$ = createEffect(() => this._actions$.pipe(
+        ofType<SaveAddressSettings>(EGotobedActions.AddressSettingsChanged),
+        withLatestFrom(this._store),
+        tap(([action, state]) => {
+            //this.storage.addToStorage(ProtocolStorageKey, action.payload);
+            localStorage.setItem(AddressStorageKey, action.payload);
+        })
+    ), { dispatch: false });
+
+    logCommand$ = createEffect(() => this._actions$.pipe(
+        ofType<SendCommandChanged>(EGotobedActions.SendCommandChanged),
+        withLatestFrom(this._store),
+        tap(([action, state]) => {
+            //this.storage.addToStorage(AddressStorageKey, action.payload);
+        })
+    ), { dispatch: false });
+
+    saveProtocolSettings$ = createEffect(() => this._actions$.pipe(
+        ofType<ProtocolSettingsChanged>(EGotobedActions.ProtocolSettingsChanged),
+        withLatestFrom(this._store),
+        tap(([action, state]) => {
+            //this.storage.addToStorage(ProtocolStorageKey, action.payload);
+            localStorage.setItem(ProtocolStorageKey, action.payload);
+        })
+    ), { dispatch: false });
+
+    savePortSettings$ = createEffect(() => this._actions$.pipe(
+        ofType<ProtocolSettingsChanged>(EGotobedActions.PortSettingsChanged),
+        withLatestFrom(this._store),
+        tap(([action, state]) => {
+            //this.storage.addToStorage(PortStorageKey, action.payload);
+            localStorage.setItem(PortStorageKey, action.payload);
+        })
+    ), { dispatch: false });
+
+    constructor(
+        private readonly _actions$: Actions, 
+        private readonly _store: Store,
+        private storage: StorageService 
+    ) { }
+}

Client/src/assets/shapes.svg

@@ -0,0 +1 @@
+<svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#f6f7f9"><g fill="none" fill-rule="evenodd"><path fill="#F04141" style="mix-blend-mode:multiply" d="M61.905-34.23l96.194 54.51-66.982 54.512L22 34.887z"/><circle fill="#10DC60" style="mix-blend-mode:multiply" cx="155.5" cy="135.5" r="57.5"/><path fill="#3880FF" style="mix-blend-mode:multiply" d="M208.538 9.513l84.417 15.392L223.93 93.93z"/><path fill="#FFCE00" style="mix-blend-mode:multiply" d="M268.625 106.557l46.332-26.75 46.332 26.75v53.5l-46.332 26.75-46.332-26.75z"/><circle fill="#7044FF" style="mix-blend-mode:multiply" cx="299.5" cy="9.5" r="38.5"/><rect fill="#11D3EA" style="mix-blend-mode:multiply" transform="rotate(-60 148.47 37.886)" x="143.372" y="-7.056" width="10.196" height="89.884" rx="5.098"/><path d="M-25.389 74.253l84.86 8.107c5.498.525 9.53 5.407 9.004 10.905a10 10 0 0 1-.057.477l-12.36 85.671a10.002 10.002 0 0 1-11.634 8.42l-86.351-15.226c-5.44-.959-9.07-6.145-8.112-11.584l13.851-78.551a10 10 0 0 1 10.799-8.219z" fill="#7044FF" style="mix-blend-mode:multiply"/><circle fill="#0CD1E8" style="mix-blend-mode:multiply" cx="273.5" cy="106.5" r="20.5"/></g></svg>

Client/src/environments/environment.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};

Client/src/environments/environment.ts

@@ -0,0 +1,16 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.

Client/src/global.scss

@@ -0,0 +1,28 @@
+/*
+ * App Global CSS
+ * ----------------------------------------------------------------------------
+ * Put style rules here that you want to apply globally. These styles are for
+ * the entire app and not just one component. Additionally, this file can be
+ * used as an entry point to import other CSS/Sass files to be included in the
+ * output CSS.
+ * For more information on global stylesheets, visit the documentation:
+ * https://ionicframework.com/docs/layout/global-stylesheets
+ */
+
+/* Core CSS required for Ionic components to work properly */
+@import "~@ionic/angular/css/core.css";
+
+/* Basic CSS for apps built with Ionic */
+@import "~@ionic/angular/css/normalize.css";
+@import "~@ionic/angular/css/structure.css";
+@import "~@ionic/angular/css/typography.css";
+@import '~@ionic/angular/css/display.css';
+
+/* Optional CSS utils that can be commented out */
+@import "~@ionic/angular/css/padding.css";
+@import "~@ionic/angular/css/float-elements.css";
+@import "~@ionic/angular/css/text-alignment.css";
+@import "~@ionic/angular/css/text-transformation.css";
+@import "~@ionic/angular/css/flex-utils.css";
+
+// $nb-enable-css-custom-properties: false; // <-- enable css custom properties

Client/src/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <title>GOTOBED</title>
+
+  <base href="/" />
+
+  <meta name="color-scheme" content="dark" />
+  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta name="format-detection" content="telephone=no" />
+  <meta name="msapplication-tap-highlight" content="no" />
+
+  <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
+
+  <!-- add to menuscreen for ios -->
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+</head>
+
+<body>
+  <app-root></app-root>
+</body>
+
+</html>

Client/src/main.ts

@@ -0,0 +1,12 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.log(err));

Client/src/polyfills.ts

@@ -0,0 +1,65 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/**
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+import './zone-flags';
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */

Client/src/test.ts

@@ -0,0 +1,25 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

Client/src/theme/variables.scss

@@ -0,0 +1,774 @@
+
+// Ionic Variables and Theming. For more info, please see:
+// http://ionicframework.com/docs/theming/
+
+/** Ionic CSS Variables **/
+:root {
+  /** primary **/
+  --ion-color-primary: #3880ff;
+  --ion-color-primary-rgb: 56, 128, 255;
+  --ion-color-primary-contrast: #ffffff;
+  --ion-color-primary-contrast-rgb: 255, 255, 255;
+  --ion-color-primary-shade: #3171e0;
+  --ion-color-primary-tint: #4c8dff;
+
+  /** secondary **/
+  --ion-color-secondary: #3dc2ff;
+  --ion-color-secondary-rgb: 61, 194, 255;
+  --ion-color-secondary-contrast: #ffffff;
+  --ion-color-secondary-contrast-rgb: 255, 255, 255;
+  --ion-color-secondary-shade: #36abe0;
+  --ion-color-secondary-tint: #50c8ff;
+
+  /** tertiary **/
+  --ion-color-tertiary: #5260ff;
+  --ion-color-tertiary-rgb: 82, 96, 255;
+  --ion-color-tertiary-contrast: #ffffff;
+  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+  --ion-color-tertiary-shade: #4854e0;
+  --ion-color-tertiary-tint: #6370ff;
+
+  /** success **/
+  --ion-color-success: #2dd36f;
+  --ion-color-success-rgb: 45, 211, 111;
+  --ion-color-success-contrast: #ffffff;
+  --ion-color-success-contrast-rgb: 255, 255, 255;
+  --ion-color-success-shade: #28ba62;
+  --ion-color-success-tint: #42d77d;
+
+  /** warning **/
+  --ion-color-warning: #ffc409;
+  --ion-color-warning-rgb: 255, 196, 9;
+  --ion-color-warning-contrast: #000000;
+  --ion-color-warning-contrast-rgb: 0, 0, 0;
+  --ion-color-warning-shade: #e0ac08;
+  --ion-color-warning-tint: #ffca22;
+
+  /** danger **/
+  --ion-color-danger: #eb445a;
+  --ion-color-danger-rgb: 235, 68, 90;
+  --ion-color-danger-contrast: #ffffff;
+  --ion-color-danger-contrast-rgb: 255, 255, 255;
+  --ion-color-danger-shade: #cf3c4f;
+  --ion-color-danger-tint: #ed576b;
+
+  /** dark **/
+  --ion-color-dark: #222428;
+  --ion-color-dark-rgb: 34, 36, 40;
+  --ion-color-dark-contrast: #ffffff;
+  --ion-color-dark-contrast-rgb: 255, 255, 255;
+  --ion-color-dark-shade: #1e2023;
+  --ion-color-dark-tint: #383a3e;
+
+  /** medium **/
+  --ion-color-medium: #92949c;
+  --ion-color-medium-rgb: 146, 148, 156;
+  --ion-color-medium-contrast: #ffffff;
+  --ion-color-medium-contrast-rgb: 255, 255, 255;
+  --ion-color-medium-shade: #808289;
+  --ion-color-medium-tint: #9d9fa6;
+
+  /** light **/
+  --ion-color-light: #f4f5f8;
+  --ion-color-light-rgb: 244, 245, 248;
+  --ion-color-light-contrast: #000000;
+  --ion-color-light-contrast-rgb: 0, 0, 0;
+  --ion-color-light-shade: #d7d8da;
+  --ion-color-light-tint: #f5f6f9;
+
+  // facebook
+  --ion-color-facebook: #3b5998;
+  --ion-color-facebook-rgb: 59, 89, 152;
+  --ion-color-facebook-contrast: #ffffff;
+  --ion-color-facebook-contrast-rgb: 255, 255, 255;
+  --ion-color-facebook-shade: #344e86;
+  --ion-color-facebook-tint: #4f6aa2;
+
+  // twitter
+  --ion-color-twitter: #00acee;
+  --ion-color-twitter-rgb: 0, 172, 238;
+  --ion-color-twitter-contrast: #000000;
+  --ion-color-twitter-contrast-rgb: 0, 0, 0;
+  --ion-color-twitter-shade: #0097d1;
+  --ion-color-twitter-tint: #1ab4f0;
+
+  // github
+  --ion-color-github: #333333;
+  --ion-color-github-rgb: 51, 51, 51;
+  --ion-color-github-contrast: #ffffff;
+  --ion-color-github-contrast-rgb: 255, 255, 255;
+  --ion-color-github-shade: #2d2d2d;
+  --ion-color-github-tint: #474747;
+
+  // yahoo
+  --ion-color-yahoo: #720e9e;
+  --ion-color-yahoo-rgb: 114, 14, 158;
+  --ion-color-yahoo-contrast: #ffffff;
+  --ion-color-yahoo-contrast-rgb: 255, 255, 255;
+  --ion-color-yahoo-shade: #640c8b;
+  --ion-color-yahoo-tint: #8026a8;
+
+  // microsoft
+  --ion-color-microsoft: #00a1f1;
+  --ion-color-microsoft-rgb: 0, 161, 241;
+  --ion-color-microsoft-contrast: #ffffff;
+  --ion-color-microsoft-contrast-rgb: 255, 255, 255;
+  --ion-color-microsoft-shade: #008ed4;
+  --ion-color-microsoft-tint: #1aaaf2;
+
+  // apple
+  --ion-color-apple: #555555;
+  --ion-color-apple-rgb: 85, 85, 85;
+  --ion-color-apple-contrast: #ffffff;
+  --ion-color-apple-contrast-rgb: 255, 255, 255;
+  --ion-color-apple-shade: #4b4b4b;
+  --ion-color-apple-tint: #666666;
+
+  // linkedin
+  --ion-color-linkedin: #0e76a8;
+  --ion-color-linkedin-rgb: 14, 118, 168;
+  --ion-color-linkedin-contrast: #ffffff;
+  --ion-color-linkedin-contrast-rgb: 255, 255, 255;
+  --ion-color-linkedin-shade: #0c6894;
+  --ion-color-linkedin-tint: #2684b1;
+
+  // angular university
+  --ion-color-angularuni: #de1e19;
+  --ion-color-angularuni-rgb: 222, 30, 25;
+  --ion-color-angularuni-contrast: #ffffff;
+  --ion-color-angularuni-contrast-rgb: 255, 255, 255;
+  --ion-color-angularuni-shade: #c31a16;
+  --ion-color-angularuni-tint: #e13530;
+
+  // academind
+  --ion-color-academind: #fa923f;
+  --ion-color-academind-rgb: 250, 146, 63;
+  --ion-color-academind-contrast: #000000;
+  --ion-color-academind-contrast-rgb: 0, 0, 0;
+  --ion-color-academind-shade: #dc8037;
+  --ion-color-academind-tint: #fb9d52;
+}
+
+// @media (prefers-color-scheme: dark) {
+  /*
+   * Dark Colors
+   * -------------------------------------------
+   */
+
+  body {
+    --ion-color-primary: #428cff;
+    --ion-color-primary-rgb: 66, 140, 255;
+    --ion-color-primary-contrast: #ffffff;
+    --ion-color-primary-contrast-rgb: 255, 255, 255;
+    --ion-color-primary-shade: #3a7be0;
+    --ion-color-primary-tint: #5598ff;
+
+    --ion-color-secondary: #50c8ff;
+    --ion-color-secondary-rgb: 80, 200, 255;
+    --ion-color-secondary-contrast: #ffffff;
+    --ion-color-secondary-contrast-rgb: 255, 255, 255;
+    --ion-color-secondary-shade: #46b0e0;
+    --ion-color-secondary-tint: #62ceff;
+
+    --ion-color-tertiary: #6a64ff;
+    --ion-color-tertiary-rgb: 106, 100, 255;
+    --ion-color-tertiary-contrast: #ffffff;
+    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+    --ion-color-tertiary-shade: #5d58e0;
+    --ion-color-tertiary-tint: #7974ff;
+
+    --ion-color-success: #2fdf75;
+    --ion-color-success-rgb: 47, 223, 117;
+    --ion-color-success-contrast: #000000;
+    --ion-color-success-contrast-rgb: 0, 0, 0;
+    --ion-color-success-shade: #29c467;
+    --ion-color-success-tint: #44e283;
+
+    --ion-color-warning: #ffd534;
+    --ion-color-warning-rgb: 255, 213, 52;
+    --ion-color-warning-contrast: #000000;
+    --ion-color-warning-contrast-rgb: 0, 0, 0;
+    --ion-color-warning-shade: #e0bb2e;
+    --ion-color-warning-tint: #ffd948;
+
+    --ion-color-danger: #ff4961;
+    --ion-color-danger-rgb: 255, 73, 97;
+    --ion-color-danger-contrast: #ffffff;
+    --ion-color-danger-contrast-rgb: 255, 255, 255;
+    --ion-color-danger-shade: #e04055;
+    --ion-color-danger-tint: #ff5b71;
+
+    --ion-color-dark: #f4f5f8;
+    --ion-color-dark-rgb: 244, 245, 248;
+    --ion-color-dark-contrast: #000000;
+    --ion-color-dark-contrast-rgb: 0, 0, 0;
+    --ion-color-dark-shade: #d7d8da;
+    --ion-color-dark-tint: #f5f6f9;
+
+    --ion-color-medium: #989aa2;
+    --ion-color-medium-rgb: 152, 154, 162;
+    --ion-color-medium-contrast: #000000;
+    --ion-color-medium-contrast-rgb: 0, 0, 0;
+    --ion-color-medium-shade: #86888f;
+    --ion-color-medium-tint: #a2a4ab;
+
+    --ion-color-light: #222428;
+    --ion-color-light-rgb: 34, 36, 40;
+    --ion-color-light-contrast: #ffffff;
+    --ion-color-light-contrast-rgb: 255, 255, 255;
+    --ion-color-light-shade: #1e2023;
+    --ion-color-light-tint: #383a3e;
+  }
+
+  /*
+   * iOS Dark Theme
+   * -------------------------------------------
+   */
+
+  .ios body {
+    --ion-background-color: #000000;
+    --ion-background-color-rgb: 0, 0, 0;
+
+    --ion-text-color: #ffffff;
+    --ion-text-color-rgb: 255, 255, 255;
+
+    --ion-color-step-50: #0d0d0d;
+    --ion-color-step-100: #1a1a1a;
+    --ion-color-step-150: #262626;
+    --ion-color-step-200: #333333;
+    --ion-color-step-250: #404040;
+    --ion-color-step-300: #4d4d4d;
+    --ion-color-step-350: #595959;
+    --ion-color-step-400: #666666;
+    --ion-color-step-450: #737373;
+    --ion-color-step-500: #808080;
+    --ion-color-step-550: #8c8c8c;
+    --ion-color-step-600: #999999;
+    --ion-color-step-650: #a6a6a6;
+    --ion-color-step-700: #b3b3b3;
+    --ion-color-step-750: #bfbfbf;
+    --ion-color-step-800: #cccccc;
+    --ion-color-step-850: #d9d9d9;
+    --ion-color-step-900: #e6e6e6;
+    --ion-color-step-950: #f2f2f2;
+
+    --ion-toolbar-background: #0d0d0d;
+
+    --ion-item-background: #1c1c1c;
+    --ion-item-background-activated: #313131;
+  }
+
+  /*
+   * Material Design Dark Theme
+   * -------------------------------------------
+   */
+
+  .md body {
+    --ion-background-color: #121212;
+    --ion-background-color-rgb: 18, 18, 18;
+
+    --ion-text-color: #ffffff;
+    --ion-text-color-rgb: 255, 255, 255;
+
+    --ion-border-color: #222222;
+
+    --ion-color-step-50: #1e1e1e;
+    --ion-color-step-100: #2a2a2a;
+    --ion-color-step-150: #363636;
+    --ion-color-step-200: #414141;
+    --ion-color-step-250: #4d4d4d;
+    --ion-color-step-300: #595959;
+    --ion-color-step-350: #656565;
+    --ion-color-step-400: #717171;
+    --ion-color-step-450: #7d7d7d;
+    --ion-color-step-500: #898989;
+    --ion-color-step-550: #949494;
+    --ion-color-step-600: #a0a0a0;
+    --ion-color-step-650: #acacac;
+    --ion-color-step-700: #b8b8b8;
+    --ion-color-step-750: #c4c4c4;
+    --ion-color-step-800: #d0d0d0;
+    --ion-color-step-850: #dbdbdb;
+    --ion-color-step-900: #e7e7e7;
+    --ion-color-step-950: #f3f3f3;
+
+    --ion-item-background: #1a1b1e;
+  }
+
+  ion-title.title-large {
+    --color: white;
+  }
+
+  .ion-color-facebook {
+    --ion-color-base: var(--ion-color-facebook);
+    --ion-color-base-rgb: var(--ion-color-facebook-rgb);
+    --ion-color-contrast: var(--ion-color-facebook-contrast);
+    --ion-color-contrast-rgb: var(--ion-color-facebook-contrast-rgb);
+    --ion-color-shade: var(--ion-color-facebook-shade);
+    --ion-color-tint: var(--ion-color-facebook-tint);
+  }
+
+  .ion-color-twitter {
+    --ion-color-base: var(--ion-color-twitter);
+    --ion-color-base-rgb: var(--ion-color-twitter-rgb);
+    --ion-color-contrast: var(--ion-color-twitter-contrast);
+    --ion-color-contrast-rgb: var(--ion-color-twitter-contrast-rgb);
+    --ion-color-shade: var(--ion-color-twitter-shade);
+    --ion-color-tint: var(--ion-color-twitter-tint);
+  }
+
+  .ion-color-github {
+    --ion-color-base: var(--ion-color-github);
+    --ion-color-base-rgb: var(--ion-color-github-rgb);
+    --ion-color-contrast: var(--ion-color-github-contrast);
+    --ion-color-contrast-rgb: var(--ion-color-github-contrast-rgb);
+    --ion-color-shade: var(--ion-color-github-shade);
+    --ion-color-tint: var(--ion-color-github-tint);
+  }
+
+  .ion-color-yahoo {
+    --ion-color-base: var(--ion-color-yahoo);
+    --ion-color-base-rgb: var(--ion-color-yahoo-rgb);
+    --ion-color-contrast: var(--ion-color-yahoo-contrast);
+    --ion-color-contrast-rgb: var(--ion-color-yahoo-contrast-rgb);
+    --ion-color-shade: var(--ion-color-yahoo-shade);
+    --ion-color-tint: var(--ion-color-yahoo-tint);
+  }
+
+  .ion-color-microsoft {
+    --ion-color-base: var(--ion-color-microsoft);
+    --ion-color-base-rgb: var(--ion-color-microsoft-rgb);
+    --ion-color-contrast: var(--ion-color-microsoft-contrast);
+    --ion-color-contrast-rgb: var(--ion-color-microsoft-contrast-rgb);
+    --ion-color-shade: var(--ion-color-microsoft-shade);
+    --ion-color-tint: var(--ion-color-microsoft-tint);
+  }
+
+  .ion-color-apple {
+    --ion-color-base: var(--ion-color-apple);
+    --ion-color-base-rgb: var(--ion-color-apple-rgb);
+    --ion-color-contrast: var(--ion-color-apple-contrast);
+    --ion-color-contrast-rgb: var(--ion-color-apple-contrast-rgb);
+    --ion-color-shade: var(--ion-color-apple-shade);
+    --ion-color-tint: var(--ion-color-apple-tint);
+  }
+
+  .ion-color-linkedin {
+    --ion-color-base: var(--ion-color-linkedin);
+    --ion-color-base-rgb: var(--ion-color-linkedin-rgb);
+    --ion-color-contrast: var(--ion-color-linkedin-contrast);
+    --ion-color-contrast-rgb: var(--ion-color-linkedin-contrast-rgb);
+    --ion-color-shade: var(--ion-color-linkedin-shade);
+    --ion-color-tint: var(--ion-color-linkedin-tint);
+  }
+
+  .ion-color-angularuni {
+    --ion-color-base: var(--ion-color-angularuni);
+    --ion-color-base-rgb: var(--ion-color-angularuni-rgb);
+    --ion-color-contrast: var(--ion-color-angularuni-contrast);
+    --ion-color-contrast-rgb: var(--ion-color-angularuni-contrast-rgb);
+    --ion-color-shade: var(--ion-color-angularuni-shade);
+    --ion-color-tint: var(--ion-color-angularuni-tint);
+  }
+
+  .ion-color-academind {
+    --ion-color-base: var(--ion-color-academind);
+    --ion-color-base-rgb: var(--ion-color-academind-rgb);
+    --ion-color-contrast: var(--ion-color-academind-contrast);
+    --ion-color-contrast-rgb: var(--ion-color-academind-contrast-rgb);
+    --ion-color-shade: var(--ion-color-academind-shade);
+    --ion-color-tint: var(--ion-color-academind-tint);
+  }
+// }
+
+
+// // Ionic Variables and Theming. For more info, please see:
+// // http://ionicframework.com/docs/theming/
+
+// /** Ionic CSS Variables **/
+// :root {
+//   /** primary **/
+//   --ion-color-primary: #3880FF;
+//   --ion-color-primary-rgb: 56, 128, 255;
+//   --ion-color-primary-contrast: #ffffff;
+//   --ion-color-primary-contrast-rgb: 255, 255, 255;
+//   --ion-color-primary-shade: #3171e0;
+//   --ion-color-primary-tint: #4c8dff;
+
+//   /** secondary **/
+//   --ion-color-secondary: #3dc2ff;
+//   --ion-color-secondary-rgb: 61, 194, 255;
+//   --ion-color-secondary-contrast: #ffffff;
+//   --ion-color-secondary-contrast-rgb: 255, 255, 255;
+//   --ion-color-secondary-shade: #36abe0;
+//   --ion-color-secondary-tint: #50c8ff;
+
+//   /** tertiary **/
+//   --ion-color-tertiary: #5260ff;
+//   --ion-color-tertiary-rgb: 82, 96, 255;
+//   --ion-color-tertiary-contrast: #ffffff;
+//   --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+//   --ion-color-tertiary-shade: #4854e0;
+//   --ion-color-tertiary-tint: #6370ff;
+
+//   /** success **/
+//   --ion-color-success: #2dd36f;
+//   --ion-color-success-rgb: 45, 211, 111;
+//   --ion-color-success-contrast: #ffffff;
+//   --ion-color-success-contrast-rgb: 255, 255, 255;
+//   --ion-color-success-shade: #28ba62;
+//   --ion-color-success-tint: #42d77d;
+
+//   /** warning **/
+//   --ion-color-warning: #ffc409;
+//   --ion-color-warning-rgb: 255, 196, 9;
+//   --ion-color-warning-contrast: #000000;
+//   --ion-color-warning-contrast-rgb: 0, 0, 0;
+//   --ion-color-warning-shade: #e0ac08;
+//   --ion-color-warning-tint: #ffca22;
+
+//   /** danger **/
+//   --ion-color-danger: #eb445a;
+//   --ion-color-danger-rgb: 235, 68, 90;
+//   --ion-color-danger-contrast: #ffffff;
+//   --ion-color-danger-contrast-rgb: 255, 255, 255;
+//   --ion-color-danger-shade: #cf3c4f;
+//   --ion-color-danger-tint: #ed576b;
+
+//   /** dark **/
+//   --ion-color-dark: #222428;
+//   --ion-color-dark-rgb: 34, 36, 40;
+//   --ion-color-dark-contrast: #ffffff;
+//   --ion-color-dark-contrast-rgb: 255, 255, 255;
+//   --ion-color-dark-shade: #1e2023;
+//   --ion-color-dark-tint: #383a3e;
+
+//   /** medium **/
+//   --ion-color-medium: #92949c;
+//   --ion-color-medium-rgb: 146, 148, 156;
+//   --ion-color-medium-contrast: #ffffff;
+//   --ion-color-medium-contrast-rgb: 255, 255, 255;
+//   --ion-color-medium-shade: #808289;
+//   --ion-color-medium-tint: #9d9fa6;
+
+//   /** light **/
+//   --ion-color-light: #f4f5f8;
+//   --ion-color-light-rgb: 244, 245, 248;
+//   --ion-color-light-contrast: #000000;
+//   --ion-color-light-contrast-rgb: 0, 0, 0;
+//   --ion-color-light-shade: #d7d8da;
+//   --ion-color-light-tint: #f5f6f9;
+// }
+
+// @media (prefers-color-scheme: dark) {
+//   /*
+//    * Dark Colors
+//    * -------------------------------------------
+//    */
+
+//   body {
+//     --ion-color-primary: #afccff;
+//     --ion-color-primary-rgb: 175, 204, 255;
+//     --ion-color-primary-contrast: #000000;
+//     --ion-color-primary-contrast-rgb: 0, 0, 0;
+//     --ion-color-primary-shade: #9ab4e0;
+//     --ion-color-primary-tint: #b7d1ff;
+
+//     --ion-color-secondary: #50c8ff;
+//     --ion-color-secondary-rgb: 80,200,255;
+//     --ion-color-secondary-contrast: #ffffff;
+//     --ion-color-secondary-contrast-rgb: 255,255,255;
+//     --ion-color-secondary-shade: #46b0e0;
+//     --ion-color-secondary-tint: #62ceff;
+
+//     --ion-color-tertiary: #6a64ff;
+//     --ion-color-tertiary-rgb: 106,100,255;
+//     --ion-color-tertiary-contrast: #ffffff;
+//     --ion-color-tertiary-contrast-rgb: 255,255,255;
+//     --ion-color-tertiary-shade: #5d58e0;
+//     --ion-color-tertiary-tint: #7974ff;
+
+//     --ion-color-success: #2fdf75;
+//     --ion-color-success-rgb: 47,223,117;
+//     --ion-color-success-contrast: #000000;
+//     --ion-color-success-contrast-rgb: 0,0,0;
+//     --ion-color-success-shade: #29c467;
+//     --ion-color-success-tint: #44e283;
+
+//     --ion-color-warning: #ffd534;
+//     --ion-color-warning-rgb: 255,213,52;
+//     --ion-color-warning-contrast: #000000;
+//     --ion-color-warning-contrast-rgb: 0,0,0;
+//     --ion-color-warning-shade: #e0bb2e;
+//     --ion-color-warning-tint: #ffd948;
+
+//     --ion-color-danger: #ff4961;
+//     --ion-color-danger-rgb: 255,73,97;
+//     --ion-color-danger-contrast: #ffffff;
+//     --ion-color-danger-contrast-rgb: 255,255,255;
+//     --ion-color-danger-shade: #e04055;
+//     --ion-color-danger-tint: #ff5b71;
+
+//     --ion-color-dark: #f4f5f8;
+//     --ion-color-dark-rgb: 244,245,248;
+//     --ion-color-dark-contrast: #000000;
+//     --ion-color-dark-contrast-rgb: 0,0,0;
+//     --ion-color-dark-shade: #d7d8da;
+//     --ion-color-dark-tint: #f5f6f9;
+
+//     --ion-color-medium: #989aa2;
+//     --ion-color-medium-rgb: 152,154,162;
+//     --ion-color-medium-contrast: #000000;
+//     --ion-color-medium-contrast-rgb: 0,0,0;
+//     --ion-color-medium-shade: #86888f;
+//     --ion-color-medium-tint: #a2a4ab;
+
+//     --ion-color-light: #222428;
+//     --ion-color-light-rgb: 34,36,40;
+//     --ion-color-light-contrast: #ffffff;
+//     --ion-color-light-contrast-rgb: 255,255,255;
+//     --ion-color-light-shade: #1e2023;
+//     --ion-color-light-tint: #383a3e;
+//   }
+
+//   /*
+//    * iOS Dark Theme
+//    * -------------------------------------------
+//    */
+
+//   .ios body {
+//     --ion-background-color: #1b1b38;
+//     --ion-background-color-rgb: 0,0,0;
+
+//     --ion-text-color: #ffffff;
+//     --ion-text-color-rgb: 255,255,255;
+
+//     --ion-color-step-50: #0d0d0d;
+//     --ion-color-step-100: #1a1a1a;
+//     --ion-color-step-150: #262626;
+//     --ion-color-step-200: #333333;
+//     --ion-color-step-250: #404040;
+//     --ion-color-step-300: #4d4d4d;
+//     --ion-color-step-350: #595959;
+//     --ion-color-step-400: #666666;
+//     --ion-color-step-450: #737373;
+//     --ion-color-step-500: #808080;
+//     --ion-color-step-550: #8c8c8c;
+//     --ion-color-step-600: #999999;
+//     --ion-color-step-650: #a6a6a6;
+//     --ion-color-step-700: #b3b3b3;
+//     --ion-color-step-750: #bfbfbf;
+//     --ion-color-step-800: #cccccc;
+//     --ion-color-step-850: #d9d9d9;
+//     --ion-color-step-900: #e6e6e6;
+//     --ion-color-step-950: #f2f2f2;
+
+//     --ion-item-background: #000000;
+
+//     --ion-card-background: #1c1c1d;
+//   }
+
+//   .ios ion-modal {
+//     --ion-background-color: var(--ion-color-step-100);
+//     --ion-toolbar-background: var(--ion-color-step-150);
+//     --ion-toolbar-border-color: var(--ion-color-step-250);
+//   }
+
+
+//   /*
+//    * Material Design Dark Theme
+//    * -------------------------------------------
+//    */
+
+//   .md body {
+//     --ion-background-color: #121212;
+//     --ion-background-color-rgb: 18,18,18;
+
+//     --ion-text-color: #ffffff;
+//     --ion-text-color-rgb: 255,255,255;
+
+//     --ion-border-color: #222222;
+
+//     --ion-color-step-50: #1e1e1e;
+//     --ion-color-step-100: #2a2a2a;
+//     --ion-color-step-150: #363636;
+//     --ion-color-step-200: #414141;
+//     --ion-color-step-250: #4d4d4d;
+//     --ion-color-step-300: #595959;
+//     --ion-color-step-350: #656565;
+//     --ion-color-step-400: #717171;
+//     --ion-color-step-450: #7d7d7d;
+//     --ion-color-step-500: #898989;
+//     --ion-color-step-550: #949494;
+//     --ion-color-step-600: #a0a0a0;
+//     --ion-color-step-650: #acacac;
+//     --ion-color-step-700: #b8b8b8;
+//     --ion-color-step-750: #c4c4c4;
+//     --ion-color-step-800: #d0d0d0;
+//     --ion-color-step-850: #dbdbdb;
+//     --ion-color-step-900: #e7e7e7;
+//     --ion-color-step-950: #f3f3f3;
+
+//     --ion-item-background: #1e1e1e;
+
+//     --ion-toolbar-background: #1f1f1f;
+
+//     --ion-tab-bar-background: #1f1f1f;
+
+//     --ion-card-background: #1e1e1e;
+//   }
+// }
+
+// body.dark {
+//   --ion-color-primary: #428cff;
+//   --ion-color-primary-rgb: 66, 140, 255;
+//   --ion-color-primary-contrast: #ffffff;
+//   --ion-color-primary-contrast-rgb: 255, 255, 255;
+//   --ion-color-primary-shade: #3a7be0;
+//   --ion-color-primary-tint: #5598ff;
+
+//   --ion-color-secondary: #50c8ff;
+//   --ion-color-secondary-rgb: 80, 200, 255;
+//   --ion-color-secondary-contrast: #ffffff;
+//   --ion-color-secondary-contrast-rgb: 255, 255, 255;
+//   --ion-color-secondary-shade: #46b0e0;
+//   --ion-color-secondary-tint: #62ceff;
+
+//   --ion-color-tertiary: #6a64ff;
+//   --ion-color-tertiary-rgb: 106, 100, 255;
+//   --ion-color-tertiary-contrast: #ffffff;
+//   --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+//   --ion-color-tertiary-shade: #5d58e0;
+//   --ion-color-tertiary-tint: #7974ff;
+
+//   --ion-color-success: #2fdf75;
+//   --ion-color-success-rgb: 47, 223, 117;
+//   --ion-color-success-contrast: #000000;
+//   --ion-color-success-contrast-rgb: 0, 0, 0;
+//   --ion-color-success-shade: #29c467;
+//   --ion-color-success-tint: #44e283;
+
+//   --ion-color-warning: #ffd534;
+//   --ion-color-warning-rgb: 255, 213, 52;
+//   --ion-color-warning-contrast: #000000;
+//   --ion-color-warning-contrast-rgb: 0, 0, 0;
+//   --ion-color-warning-shade: #e0bb2e;
+//   --ion-color-warning-tint: #ffd948;
+
+//   --ion-color-danger: #ff4961;
+//   --ion-color-danger-rgb: 255, 73, 97;
+//   --ion-color-danger-contrast: #ffffff;
+//   --ion-color-danger-contrast-rgb: 255, 255, 255;
+//   --ion-color-danger-shade: #e04055;
+//   --ion-color-danger-tint: #ff5b71;
+
+//   --ion-color-dark: #f4f5f8;
+//   --ion-color-dark-rgb: 244, 245, 248;
+//   --ion-color-dark-contrast: #000000;
+//   --ion-color-dark-contrast-rgb: 0, 0, 0;
+//   --ion-color-dark-shade: #d7d8da;
+//   --ion-color-dark-tint: #f5f6f9;
+
+//   --ion-color-medium: #989aa2;
+//   --ion-color-medium-rgb: 152, 154, 162;
+//   --ion-color-medium-contrast: #000000;
+//   --ion-color-medium-contrast-rgb: 0, 0, 0;
+//   --ion-color-medium-shade: #86888f;
+//   --ion-color-medium-tint: #a2a4ab;
+
+//   --ion-color-light: #222428;
+//   --ion-color-light-rgb: 34, 36, 40;
+//   --ion-color-light-contrast: #ffffff;
+//   --ion-color-light-contrast-rgb: 255, 255, 255;
+//   --ion-color-light-shade: #1e2023;
+//   --ion-color-light-tint: #383a3e;
+// }
+
+// /*
+//  * iOS Dark Theme
+//  * -------------------------------------------
+//  */
+
+// .ios body.dark {
+//   --ion-background-color: #000000;
+//   --ion-background-color-rgb: 0, 0, 0;
+
+//   --ion-text-color: #ffffff;
+//   --ion-text-color-rgb: 255, 255, 255;
+
+//   --ion-color-step-50: #0d0d0d;
+//   --ion-color-step-100: #1a1a1a;
+//   --ion-color-step-150: #262626;
+//   --ion-color-step-200: #333333;
+//   --ion-color-step-250: #404040;
+//   --ion-color-step-300: #4d4d4d;
+//   --ion-color-step-350: #595959;
+//   --ion-color-step-400: #666666;
+//   --ion-color-step-450: #737373;
+//   --ion-color-step-500: #808080;
+//   --ion-color-step-550: #8c8c8c;
+//   --ion-color-step-600: #999999;
+//   --ion-color-step-650: #a6a6a6;
+//   --ion-color-step-700: #b3b3b3;
+//   --ion-color-step-750: #bfbfbf;
+//   --ion-color-step-800: #cccccc;
+//   --ion-color-step-850: #d9d9d9;
+//   --ion-color-step-900: #e6e6e6;
+//   --ion-color-step-950: #f2f2f2;
+
+//   --ion-item-background: #000000;
+
+//   --ion-card-background: #1c1c1d;
+// }
+
+// .ios body.dark ion-modal {
+//   --ion-background-color: var(--ion-color-step-100);
+//   --ion-toolbar-background: var(--ion-color-step-150);
+//   --ion-toolbar-border-color: var(--ion-color-step-250);
+//   --ion-item-background: var(--ion-color-step-150);
+// }
+
+// /*
+//  * Material Design Dark Theme
+//  * -------------------------------------------
+//  */
+
+// .md body.dark {
+//   --ion-background-color: #121212;
+//   --ion-background-color-rgb: 18, 18, 18;
+
+//   --ion-text-color: #ffffff;
+//   --ion-text-color-rgb: 255, 255, 255;
+
+//   --ion-border-color: #222222;
+
+//   --ion-color-step-50: #1e1e1e;
+//   --ion-color-step-100: #2a2a2a;
+//   --ion-color-step-150: #363636;
+//   --ion-color-step-200: #414141;
+//   --ion-color-step-250: #4d4d4d;
+//   --ion-color-step-300: #595959;
+//   --ion-color-step-350: #656565;
+//   --ion-color-step-400: #717171;
+//   --ion-color-step-450: #7d7d7d;
+//   --ion-color-step-500: #898989;
+//   --ion-color-step-550: #949494;
+//   --ion-color-step-600: #a0a0a0;
+//   --ion-color-step-650: #acacac;
+//   --ion-color-step-700: #b8b8b8;
+//   --ion-color-step-750: #c4c4c4;
+//   --ion-color-step-800: #d0d0d0;
+//   --ion-color-step-850: #dbdbdb;
+//   --ion-color-step-900: #e7e7e7;
+//   --ion-color-step-950: #f3f3f3;
+
+//   --ion-item-background: #1e1e1e;
+
+//   --ion-toolbar-background: #1f1f1f;
+
+//   --ion-tab-bar-background: #1f1f1f;
+
+//   --ion-card-background: #1e1e1e;
+// }
+
+@import 'themes';

Client/src/zone-flags.ts

@@ -0,0 +1,6 @@
+/**
+ * Prevents Angular change detection from
+ * running with certain Web Component callbacks
+ */
+// eslint-disable-next-line no-underscore-dangle
+(window as any).__Zone_disable_customElements = true;