From 7c4d3bd9551f5cd10de42233e492950ff3ea93ae Mon Sep 17 00:00:00 2001 From: Norwin Roosen Date: Wed, 31 Oct 2018 14:04:40 +0100 Subject: [PATCH] add rough layout of OtaWizardPage --- src/app/app.module.ts | 4 ++ src/pages/Blockly/blockly.html | 6 ++- src/pages/Blockly/blockly.ts | 5 ++ src/pages/ota-wizard/ota-wizard.html | 64 +++++++++++++++++++++++ src/pages/ota-wizard/ota-wizard.module.ts | 13 +++++ src/pages/ota-wizard/ota-wizard.scss | 7 +++ src/pages/ota-wizard/ota-wizard.ts | 25 +++++++++ 7 files changed, 122 insertions(+), 2 deletions(-) create mode 100644 src/pages/ota-wizard/ota-wizard.html create mode 100644 src/pages/ota-wizard/ota-wizard.module.ts create mode 100644 src/pages/ota-wizard/ota-wizard.scss create mode 100644 src/pages/ota-wizard/ota-wizard.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 8617043..69d51d9 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -9,6 +9,8 @@ import { HomePage } from '../pages/home/home'; import { ApiProvider } from '../providers/api/api'; import { HttpClientModule } from '@angular/common/http'; import { OtaWifiProvider } from '../providers/ota-wifi/ota-wifi'; +import { OtaWizardPage } from '../pages/ota-wizard/ota-wizard'; +import { OtaWizardPageModule } from '../pages/ota-wizard/ota-wizard.module'; @NgModule({ declarations: [ @@ -18,11 +20,13 @@ import { OtaWifiProvider } from '../providers/ota-wifi/ota-wifi'; imports: [ HttpClientModule, BrowserModule, + OtaWizardPageModule, IonicModule.forRoot(openSenseApp) ], bootstrap: [IonicApp], entryComponents: [ openSenseApp, + OtaWizardPage, HomePage ], providers: [ diff --git a/src/pages/Blockly/blockly.html b/src/pages/Blockly/blockly.html index c514b80..49e214b 100644 --- a/src/pages/Blockly/blockly.html +++ b/src/pages/Blockly/blockly.html @@ -12,12 +12,14 @@ Blockly - - + + + +
Blockly should be displayed here !
diff --git a/src/pages/Blockly/blockly.ts b/src/pages/Blockly/blockly.ts index 84486c9..86ef125 100644 --- a/src/pages/Blockly/blockly.ts +++ b/src/pages/Blockly/blockly.ts @@ -1,6 +1,7 @@ import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; import { OtaWifiProvider } from '../../providers/ota-wifi/ota-wifi'; +import { OtaWizardPage } from '../ota-wizard/ota-wizard'; /** * Generated class for the SenseBoxPage page. @@ -31,4 +32,8 @@ export class BlocklyPage { console.log('ionViewDidLoad SenseBoxPage'); } + launchOtaWizard () { + this.navCtrl.setRoot(OtaWizardPage) + } + } diff --git a/src/pages/ota-wizard/ota-wizard.html b/src/pages/ota-wizard/ota-wizard.html new file mode 100644 index 0000000..86dfd15 --- /dev/null +++ b/src/pages/ota-wizard/ota-wizard.html @@ -0,0 +1,64 @@ + + + + Over The Air Progammer + + + + + + +

Welcome

+ + + +

+ To program your senseBox wirelessly, please follow these steps. + We will help you connect to your senseBox via WiFi. +
+ Please make sure that your senseBox.. +

+ +
    +
  • has the WiFi shield plugged in
    • +
  • has the initial OTA sketch installed
    • +
  • TODO review this list foo bar lorem ipsum
    • +
+ + + +

Check internet connection for compilation

+ 
+        - if connected: background: compile code
+        - if not: enable wifi (manually on iOS)
+
+ + + +

senseBox Wifi Selection

+ 
+        - Android
+          - select from list?
+            - highlight `sensebox-*` networks?
+            - filter by SSID name (`sensebox-*`)
+            - filter by distance?
+          - enter credentials (if necessary)
+          - background: connect to selected SSID
+        - iOS
+          - tell user to connect to `sensebox-*` SSID, and come back when done
+
+ + + +

Status Screen

+ 
+        - background: check if sensebox upload is available
+        - show success or error
+        - instructions to restart sensebox?
+
+ + + + diff --git a/src/pages/ota-wizard/ota-wizard.module.ts b/src/pages/ota-wizard/ota-wizard.module.ts new file mode 100644 index 0000000..3e8650c --- /dev/null +++ b/src/pages/ota-wizard/ota-wizard.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from '@angular/core'; +import { IonicPageModule } from 'ionic-angular'; +import { OtaWizardPage } from './ota-wizard'; + +@NgModule({ + declarations: [ + OtaWizardPage, + ], + imports: [ + IonicPageModule.forChild(OtaWizardPage), + ], +}) +export class OtaWizardPageModule {} diff --git a/src/pages/ota-wizard/ota-wizard.scss b/src/pages/ota-wizard/ota-wizard.scss new file mode 100644 index 0000000..8b5358c --- /dev/null +++ b/src/pages/ota-wizard/ota-wizard.scss @@ -0,0 +1,7 @@ +@import '../../theme/variables.scss'; + +page-ota-wizard { + .swiper-pagination-bullet-active { + background: map-get($colors, primary); + } +} diff --git a/src/pages/ota-wizard/ota-wizard.ts b/src/pages/ota-wizard/ota-wizard.ts new file mode 100644 index 0000000..63a3fc3 --- /dev/null +++ b/src/pages/ota-wizard/ota-wizard.ts @@ -0,0 +1,25 @@ +import { Component } from '@angular/core'; +import { IonicPage, NavController, NavParams } from 'ionic-angular'; + +/** + * Generated class for the OtaWizardPage page. + * + * See https://ionicframework.com/docs/components/#navigation for more info on + * Ionic pages and navigation. + */ + +@IonicPage() +@Component({ + selector: 'page-ota-wizard', + templateUrl: 'ota-wizard.html', +}) +export class OtaWizardPage { + + constructor(public navCtrl: NavController, public navParams: NavParams) { + } + + ionViewDidLoad() { + console.log('ionViewDidLoad OtaWizardPage'); + } + +}