Created the base design

.eslintrc.json

@@ -1,11 +1,18 @@
 {
   "root": true,
-  "ignorePatterns": ["projects/**/*"],
+  "ignorePatterns": [
+    "projects/**/*"
+  ],
   "overrides": [
     {
-      "files": ["*.ts"],
+      "files": [
+        "*.ts"
+      ],
       "parserOptions": {
-        "project": ["tsconfig.json", "e2e/tsconfig.json"],
+        "project": [
+          "tsconfig.json",
+          "e2e/tsconfig.json"
+        ],
         "createDefaultProgram": true
       },
       "extends": [
@@ -17,7 +24,10 @@
         "@angular-eslint/component-class-suffix": [
           "error",
           {
-            "suffixes": ["Page", "Component"]
+            "suffixes": [
+              "Page",
+              "Component"
+            ]
           }
         ],
         "@angular-eslint/component-selector": [
@@ -39,9 +49,21 @@
       }
     },
     {
-      "files": ["*.html"],
-      "extends": ["plugin:@angular-eslint/template/recommended"],
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended"
+      ],
       "rules": {}
+    },
+    {
+      "files": [
+        "*.ts"
+      ],
+      "extends": [
+        "plugin:ngrx/recommended"
+      ]
     }
   ]
 }

angular.json

@@ -31,7 +31,10 @@
                 "output": "./svg"
               }
             ],
-            "styles": ["src/theme/variables.scss", "src/global.scss"],
+            "styles": [
+              "src/theme/variables.scss",
+              "src/global.scss",
+              "node_modules/@nebular/theme/styles/prebuilt/cosmic.css"],
             "scripts": [],
             "aot": false,
             "vendorChunk": true,

package.json

@@ -2,7 +2,7 @@
   "name": "go-to-bed",
   "version": "0.0.1",
   "author": "Ionic Framework",
-  "homepage": "https://ionicframework.com/",
+  "menupage": "https://ionicframework.com/",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -13,6 +13,8 @@
   },
   "private": true,
   "dependencies": {
+    "@angular/animations": "^12.1.1",
+    "@angular/cdk": "^12.1.1",
     "@angular/common": "~12.1.1",
     "@angular/core": "~12.1.1",
     "@angular/forms": "~12.1.1",
@@ -25,6 +27,13 @@
     "@capacitor/keyboard": "1.1.3",
     "@capacitor/status-bar": "1.0.6",
     "@ionic/angular": "^5.5.2",
+    "@nebular/auth": "^9.0.0",
+    "@nebular/eva-icons": "^8.0.0",
+    "@nebular/security": "^9.0.0",
+    "@nebular/theme": "^8.0.0",
+    "@ngrx/router-store": "^13.0.2",
+    "@ngrx/store": "^13.0.2",
+    "eva-icons": "^1.1.3",
     "rxjs": "~6.6.0",
     "tslib": "^2.2.0",
     "zone.js": "~0.11.4"
@@ -60,7 +69,8 @@
     "karma-jasmine-html-reporter": "^1.5.0",
     "protractor": "~7.0.0",
     "ts-node": "~8.3.0",
-    "typescript": "~4.2.4"
+    "typescript": "~4.2.4",
+    "eslint-plugin-ngrx": "^2.0.0"
   },
   "description": "An Ionic project"
 }

src/app/app-routing.module.ts

@@ -4,9 +4,10 @@ import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
 const routes: Routes = [
   {
     path: '',
-    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
+    loadChildren: () => import('./menu/menu.module').then(page => page.MenuPageModule)
   }
 ];
+
 @NgModule({
   imports: [
     RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })

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('./menu/menu.module').then(page => page.MenuPageModule)
+  }
+];
+@NgModule({
+  imports: [
+    StoreModule.forFeature('Gotobed', gotobedReducer), StoreRouterConnectingModule.forRoot(),
+  ],
+  exports: [RouterModule]
+})
+export class AppStoreModule {}

src/app/app.component.html

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

src/app/app.module.ts

@@ -3,15 +3,33 @@ import { BrowserModule } from '@angular/platform-browser';
 import { RouteReuseStrategy } from '@angular/router';
 
 import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
+import { NbCardModule, NbThemeModule } from '@nebular/theme';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { MenuPage } from './menu/menu.page';
+import { NetworkRequestsService } from './network/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';
 
 @NgModule({
-  declarations: [AppComponent],
+  declarations: [AppComponent, MenuPage],
   entryComponents: [],
-  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(),
+    AppRoutingModule,
+    NbCardModule,
+    NbThemeModule.forRoot(),
+    StoreModule.forRoot({}, {}),
+    StoreRouterConnectingModule.forRoot(),
+    HttpClientModule,
+    AppStoreModule
+  ],
   providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
   bootstrap: [AppComponent],
+  exports: [NetworkRequestsService]
 })
 export class AppModule {}

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

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

src/app/home/home.module.ts

@@ -0,0 +1,28 @@
+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 { NbButtonModule, NbCardModule, NbLayoutModule, NbSidebarModule, NbThemeModule } from '@nebular/theme';
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+  imports: [
+    IonicModule,
+    CommonModule,
+    FormsModule,
+    ExploreContainerComponentModule,
+    HomePageRoutingModule,
+    NbCardModule,
+    RouterModule, // RouterModule.forRoot(routes, { useHash: true }), if this is your app.module
+    NbLayoutModule,
+    NbSidebarModule, // NbSidebarModule.forRoot(), //if this is your app.module
+    NbButtonModule,
+    NbThemeModule
+  ],
+  declarations: [HomePage]
+})
+export class HomePageModule {}

src/app/home/home.page.html

@@ -1,7 +1,7 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-title>
-      Tab 1
+      Home
     </ion-title>
   </ion-toolbar>
 </ion-header>
@@ -12,6 +12,14 @@
       <ion-title size="large">Tab 1</ion-title>
     </ion-toolbar>
   </ion-header>
-
   <app-explore-container name="Tab 1 page"></app-explore-container>
+  <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-content>

src/app/home/home.page.scss

@@ -0,0 +1,21 @@
+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: #1b1b38;
+    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;
+}

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

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

src/app/home/home.page.ts

@@ -0,0 +1,51 @@
+import { Component } from '@angular/core';
+import { AlertController } from '@ionic/angular';
+import { Store } from '@ngrx/store';
+import { NetworkRequestsService } from '../network/networkRequests.service';
+import { SendCommandChanged } from '../store/gotobed.actions';
+import { getCommandType } from '../store/gotobed.selectors';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: 'home.page.html',
+  styleUrls: ['home.page.scss']
+})
+
+export class HomePage {
+
+  constructor(
+    public alertController: AlertController,
+    private httpCommand: NetworkRequestsService,
+    private store: Store) {}
+  
+  commandtype$ = this.store.select(getCommandType);
+
+  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, "192.168.1.255:3000");
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
+}

src/app/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 {}

src/app/menu/menu.module.ts

@@ -3,17 +3,15 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 
-import { TabsPageRoutingModule } from './tabs-routing.module';
-
-import { TabsPage } from './tabs.page';
+import { MenuPageRoutingModule } from './menu-routing.module';
 
 @NgModule({
   imports: [
     IonicModule,
     CommonModule,
     FormsModule,
-    TabsPageRoutingModule
+    MenuPageRoutingModule
   ],
-  declarations: [TabsPage]
+  declarations: []
 })
-export class TabsPageModule {}
+export class MenuPageModule {}

src/app/menu/menu.page.html

@@ -0,0 +1,20 @@
+<ion-tabs>
+
+  <ion-tab-bar slot="bottom">
+    <ion-tab-button tab="home">
+      <ion-icon name="triangle"></ion-icon>
+      <ion-label>Home</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="searchHost">
+      <ion-icon name="search-sharp"></ion-icon>
+      <ion-label>Search</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>

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

src/app/network/networkRequests.service.spec.ts

@@ -0,0 +1,16 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async, inject } from '@angular/core/testing';
+import { NetworkRequestsService } from './networkRequests.service';
+
+describe('Service: NetworkRequests', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [NetworkRequestsService]
+    });
+  });
+
+  it('should ...', inject([NetworkRequestsService], (service: NetworkRequestsService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/network/networkRequests.service.ts

@@ -0,0 +1,33 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { ToastController } from '@ionic/angular';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class NetworkRequestsService {
+
+  constructor(private readonly _httpClient: HttpClient, public toastController: ToastController) { }
+
+  public sendCommand(command: string, address: string, connectionType?: string){
+    console.log("Sending command: " + command + " to address: " + address);
+    this._httpClient.post<string>(`${connectionType ?? "http"}://${address}/commandbridge`, command)
+    .subscribe(data => {
+      console.log(data['_body']);
+     }, error => {
+      console.log(error);
+      this.showErrorMessage(error);
+    });
+  }
+
+  async showErrorMessage(errorMessage: HttpErrorResponse ) {
+    const toast = await this.toastController.create({
+      message: errorMessage.name + ": " + errorMessage.message,
+      duration: 40000,
+      color: "danger",
+      position: "top"
+    });
+    toast.present();
+  }
+} 

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

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

src/app/searchHost/searchHost.module.ts

@@ -3,10 +3,10 @@ import { RouterModule } from '@angular/router';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { Tab2Page } from './tab2.page';
+import { SearchHostPage } from './searchHost.page';
 import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
 
-import { Tab2PageRoutingModule } from './tab2-routing.module';
+import { SearchHostPageRoutingModule } from './searchHost-routing.module';
 
 @NgModule({
   imports: [
@@ -14,8 +14,8 @@ import { Tab2PageRoutingModule } from './tab2-routing.module';
     CommonModule,
     FormsModule,
     ExploreContainerComponentModule,
-    Tab2PageRoutingModule
+    SearchHostPageRoutingModule
   ],
-  declarations: [Tab2Page]
+  declarations: [SearchHostPage]
 })
-export class Tab2PageModule {}
+export class SearchHostPageModule {}

src/app/searchHost/searchHost.page.html

@@ -1,7 +1,7 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-title>
-      Tab 2
+      Search Host
     </ion-title>
   </ion-toolbar>
 </ion-header>

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

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

src/app/searchHost/searchHost.page.ts

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

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

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

src/app/settings/settings.module.ts

@@ -3,10 +3,10 @@ import { RouterModule } from '@angular/router';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { Tab3Page } from './tab3.page';
+import { SettingsPage } from './settings.page';
 import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
 
-import { Tab3PageRoutingModule } from './tab3-routing.module';
+import { SettingsPageRoutingModule } from './settings-routing.module';
 
 @NgModule({
   imports: [
@@ -14,9 +14,9 @@ import { Tab3PageRoutingModule } from './tab3-routing.module';
     CommonModule,
     FormsModule,
     ExploreContainerComponentModule,
-    RouterModule.forChild([{ path: '', component: Tab3Page }]),
-    Tab3PageRoutingModule,
+    RouterModule.forChild([{ path: '', component: SettingsPage }]),
+    SettingsPageRoutingModule,
   ],
-  declarations: [Tab3Page]
+  declarations: [SettingsPage]
 })
-export class Tab3PageModule {}
+export class SettingsPageModule {}

src/app/settings/settings.page.html

@@ -1,7 +1,7 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-title>
-      Tab 3
+      Settings
     </ion-title>
   </ion-toolbar>
 </ion-header>

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

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

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

src/app/store/gotobed.actions.ts

@@ -0,0 +1,12 @@
+import { Action } from "@ngrx/store";
+
+export enum EGotobedActions {
+    SendCommandChanged = '[GOTOBED] Command changed',
+}
+
+export class SendCommandChanged implements Action {
+    public readonly type = EGotobedActions.SendCommandChanged;
+    constructor(public payload: string) { }
+}
+
+export type GotobedActions = SendCommandChanged;

src/app/store/gotobed.reducer.ts

@@ -0,0 +1,14 @@
+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,
+            };
+        default:
+            return state;
+    }
+}

src/app/store/gotobed.selectors.ts

@@ -0,0 +1,11 @@
+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
+)

src/app/store/gotobed.state.ts

@@ -0,0 +1,20 @@
+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: '',
+    port: '',
+    address: 'localhost:8080',
+    isConnected: false,
+}

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

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

src/app/tab1/tab1.module.ts

@@ -1,20 +0,0 @@
-import { IonicModule } from '@ionic/angular';
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { Tab1Page } from './tab1.page';
-import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
-
-import { Tab1PageRoutingModule } from './tab1-routing.module';
-
-@NgModule({
-  imports: [
-    IonicModule,
-    CommonModule,
-    FormsModule,
-    ExploreContainerComponentModule,
-    Tab1PageRoutingModule
-  ],
-  declarations: [Tab1Page]
-})
-export class Tab1PageModule {}

src/app/tab1/tab1.page.ts

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

src/app/tab2/tab2.page.ts

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

src/app/tab3/tab3.page.ts

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

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

@@ -1,39 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { TabsPage } from './tabs.page';
-
-const routes: Routes = [
-  {
-    path: 'tabs',
-    component: TabsPage,
-    children: [
-      {
-        path: 'tab1',
-        loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
-      },
-      {
-        path: 'tab2',
-        loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
-      },
-      {
-        path: 'tab3',
-        loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule)
-      },
-      {
-        path: '',
-        redirectTo: '/tabs/tab1',
-        pathMatch: 'full'
-      }
-    ]
-  },
-  {
-    path: '',
-    redirectTo: '/tabs/tab1',
-    pathMatch: 'full'
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-})
-export class TabsPageRoutingModule {}

src/app/tabs/tabs.page.html

@@ -1,20 +0,0 @@
-<ion-tabs>
-
-  <ion-tab-bar slot="bottom">
-    <ion-tab-button tab="tab1">
-      <ion-icon name="triangle"></ion-icon>
-      <ion-label>Tab 1</ion-label>
-    </ion-tab-button>
-
-    <ion-tab-button tab="tab2">
-      <ion-icon name="ellipse"></ion-icon>
-      <ion-label>Tab 2</ion-label>
-    </ion-tab-button>
-
-    <ion-tab-button tab="tab3">
-      <ion-icon name="square"></ion-icon>
-      <ion-label>Tab 3</ion-label>
-    </ion-tab-button>
-  </ion-tab-bar>
-
-</ion-tabs>

src/app/tabs/tabs.page.spec.ts

@@ -1,26 +0,0 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
-import { TabsPage } from './tabs.page';
-
-describe('TabsPage', () => {
-  let component: TabsPage;
-  let fixture: ComponentFixture<TabsPage>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [TabsPage],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(TabsPage);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/tabs/tabs.page.ts

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

src/global.scss

@@ -24,3 +24,10 @@
 @import "~@ionic/angular/css/text-alignment.css";
 @import "~@ionic/angular/css/text-transformation.css";
 @import "~@ionic/angular/css/flex-utils.css";
+
+@import "~@nebular/theme/styles/prebuilt/cosmic.css";
+
+@import '~@nebular/theme/styles/theming';
+@import '~@nebular/theme/styles/themes/cosmic';
+
+$nb-enable-css-custom-properties: false; // <-- enable css custom properties

src/index.html

@@ -14,7 +14,7 @@
 
   <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
 
-  <!-- add to homescreen for ios -->
+  <!-- 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>

src/theme/themes.scss

@@ -0,0 +1,2 @@
+@import '~@nebular/theme/styles/theming';
+@import '~@nebular/theme/styles/themes/default';

src/theme/variables.scss

@@ -2,79 +2,79 @@
 // 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;
+// :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;
+//   /** 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;
+//   /** 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;
+//   /** 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;
+//   /** 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;
+//   /** 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;
+//   /** 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;
+//   /** 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;
-}
+//   /** 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) {
   /*
@@ -153,7 +153,7 @@
    */
 
   .ios body {
-    --ion-background-color: #000000;
+    --ion-background-color: #1b1b38;
     --ion-background-color-rgb: 0,0,0;
 
     --ion-text-color: #ffffff;
@@ -234,3 +234,17 @@
     --ion-card-background: #1e1e1e;
   }
 }
+
+@import 'themes';
+
+// framework component styles
+@import '~@nebular/theme/styles/globals';
+
+// install the framework style
+@import '~@nebular/theme/styles/theming';
+@import '~@nebular/theme/styles/themes/cosmic';
+
+$nb-themes: nb-register-theme((
+  text-basic-color: color-basic-800, // <- we setting color-basic-800 instead of color-basic-1000
+  text-disabled-color: color-basic-600, // <- and color-basic-600 as instead of color-basic-500
+), default, default);