ota-wizard: implement sketch upload, UI fixes

src/pages/ota-wizard/ota-wizard.html

@@ -43,7 +43,7 @@
     <ion-slide>
       <ng-container *ngIf="state.compilation == 'compiling'">
         <h2>Compiling your sketch...</h2>
-        <ion-spinner item-start name="dots"></ion-spinner>
+        <ion-spinner *ngIf="slides.getActiveIndex() == 1" item-start name="dots"></ion-spinner>
       </ng-container>
 
       <ng-container *ngIf="state.compilation == 'go-online'">
@@ -69,7 +69,7 @@
     </ion-slide>
 
     <!-- wifi selection -->
-    <ion-slide>
+    <ion-slide id="wifi-slide">
       <ng-container *ngIf="state.wifiSelection == 'manual'">
         <h2>Connect to your senseBox</h2>
         <p>
@@ -85,41 +85,41 @@
             <h2>Select your senseBox</h2>
             <p>
               In the list, all running senseBoxes with OTA available are shown.
-              If you don't see yours, please make sure that it
+              If you don't see yours, please make sure that GPS is enabled.
             </p>
-            <ul style="text-align: left">
-              <li>has the <b>WiFi shield</b> plugged in</li>
-              <li>has the initial <b>OTA sketch</b> installed</li>
-              <li>is running</li>
-            </ul>
           </ion-col>
 
           <ion-col col-12 col-md-6>
             <h4>Available senseBox WiFis</h4>
-            <ion-list>
+            <button ion-fab mini color="light" (click)="onWifiRefresh()">
+              <ion-icon name="refresh"></ion-icon>
+            </button>
+
+            <ion-list id="wifi-list">
+              <ion-item *ngIf="state.wifiSelection == 'scanning'">
+                <ion-spinner *ngIf="slides.getActiveIndex() == 2" item-start name="dots"></ion-spinner>
+                searching...
+              </ion-item>
+
+              <ion-item *ngIf="state.wifiSelection == 'connecting'">
+                <ion-spinner *ngIf="slides.getActiveIndex() == 2" item-start name="dots"></ion-spinner>
+                connecting...
+              </ion-item>
+
               <ion-item *ngFor="let ssid of availableSenseboxes" (click)="connectToSensebox(ssid)">
                 <ion-icon name="wifi" item-start></ion-icon>
                 {{ ssid }}
               </ion-item>
 
-              <ion-item *ngIf="state.wifiSelection == 'scanning'">
+              <ion-item *ngIf="state.wifiSelection == 'select' && !availableSenseboxes.length">
-                <ion-spinner item-start name="dots"></ion-spinner>
-                searching...
-              </ion-item>
-              <ion-item *ngIf="state.wifiSelection == 'selection' && !availableSenseboxes.length">
                 no senseboxes available :(
               </ion-item>
-              <ion-item>
-                <ion-label>Show only senseBox WiFis</ion-label>
-                <!-- TODO: retrigger scan on toggle -->
-                <ion-toggle [(ngModel)]="filterSsids"></ion-toggle>
-              </ion-item>
             </ion-list>
 
-            <ng-container *ngIf="state.wifiSelection == 'connecting'">
+            <ion-item>
-                <ion-spinner item-start name="dots"></ion-spinner>
+              <ion-label>Show only senseBox WiFis</ion-label>
-                connecting...
+              <ion-toggle (ngModelChange)="onFilterToggle($event)" [(ngModel)]="filterSsids"></ion-toggle>
-            </ng-container>
+            </ion-item>
 
             <ng-container *ngIf="state.wifiSelection == 'error'">
               <h2>Error!</h2>
@@ -133,14 +133,30 @@
 
     <!-- upload & final status -->
     <ion-slide>
-      <h2>Uploading your sketch</h2>
+      <ng-container *ngIf="state.upload == 'uploading'">
-      <ion-spinner item-start name="dots"></ion-spinner>
+        <h2>Uploading your sketch</h2>
+        <ion-spinner *ngIf="slides.getActiveIndex() == 3" item-start name="dots"></ion-spinner>
+      </ng-container>
 
-      <!-- <pre style="text-align: left">
+      <ng-container *ngIf="state.upload == 'done'">
-        - background: check if sensebox upload is available
+        <ion-icon name="checkmark" style="font-size: 160px"></ion-icon>
-        - show success or error
+        <h2>Done!</h2>
-        - instructions to restart sensebox?
+        <button ion-button large clear icon-end color="primary" (click)="slides.slideNext()">
-      </pre> -->
+          Close
+        </button>
+      </ng-container>
+
+      <ng-container *ngIf="state.upload == 'error'">
+        <h2>Error!</h2>
+        <p [innerHTML]="errorMsg"></p>
+        <button ion-button large clear icon-end color="primary" (click)="slides.slidePrev()">
+          <ion-icon item-start name="arrow-back"></ion-icon>
+          Back
+        </button>
+        <button ion-button large clear icon-end color="primary" (click)="onClose()">
+          Close
+        </button>
+      </ng-container>
     </ion-slide>
 
   </ion-slides>

src/pages/ota-wizard/ota-wizard.scss

@@ -37,4 +37,21 @@ page-ota-wizard {
       list-style-type: disc;
     }
   }
+
+  #wifi-slide {
+    h4, button {
+      display: inline-block;
+    }
+
+    // for the ion-list height limitation to work..
+    &, div.slide-zoom, ion-grid, ion-row, ion-col:last-child {
+      height: 100%;
+    }
+
+    #wifi-list {
+      max-height: 55%;
+      overflow-y: scroll;
+    }
+
+  }
 }

src/pages/ota-wizard/ota-wizard.ts

@@ -24,6 +24,7 @@ export class OtaWizardPage implements OnInit, OnDestroy {
   offlineSub: Subscription
 
   filterSsids = false // TODO: add toggle to UI?
+  filterSsids = true
   availableSenseboxes: string[] = [] // list of SSIDs
   compiledSketch = undefined
   errorMsg = ''
@@ -32,6 +33,7 @@ export class OtaWizardPage implements OnInit, OnDestroy {
     isOnline: false,
     compilation: 'compiling',
     wifiSelection: 'scanning',
+    upload: 'uploading',
   }
 
   constructor(
@@ -62,6 +64,19 @@ export class OtaWizardPage implements OnInit, OnDestroy {
     this.offlineSub.unsubscribe()
   }
 
+  onWifiRefresh () {
+    this.handleWifiSelection()
+  }
+
+  onFilterToggle (newVal) {
+    this.filterSsids = newVal
+    this.handleWifiSelection()
+  }
+
+  onClose () {
+    this.navCtrl.pop()
+  }
+
   // call logic for each slide
   onSlideChange () {
     switch (this.slides.getActiveIndex()) {
@@ -78,7 +93,7 @@ export class OtaWizardPage implements OnInit, OnDestroy {
         break
 
       case OtaSlides.Upload:
-        this.slides.lockSwipeToNext(true)
+        this.handleUpload()
         break
 
       default:
@@ -131,14 +146,30 @@ export class OtaWizardPage implements OnInit, OnDestroy {
     }
   }
 
-  private compileSketch () {
+  private async handleUpload () {
-    // TODO: mock
+    this.state.upload = 'uploading'
+    try {
+      const res = await this.otaWifi.uploadFirmware(this.sketch)
+      console.log(JSON.stringify(res, null, 2))
+
+      this.state.upload = 'done'
+      this.slides.lockSwipeToNext(false)
+    } catch (err) {
+      this.state.upload = 'error'
+      this.errorMsg = err.message
+    }
+
+  }
+
+  private async compileSketch () {
+    // TODO: implement. use this.sketch
+
     this.state.compilation = 'compiling'
     setTimeout(() => {
       this.compiledSketch = 'firmware binary here..'
       this.state.compilation = 'done'
       this.slides.lockSwipeToNext(false)
-    }, 4000)
+    }, 1000)
   }
 }
 
@@ -146,6 +177,7 @@ type OtaState = {
   isOnline: boolean,
   compilation: 'compiling' | 'go-online' | 'done' | 'error',
   wifiSelection: 'scanning' | 'connecting' | 'select' | 'manual' | 'error',
+  upload: 'uploading' | 'done' | 'error',
 }
 
 // names for the slide indices for easier access