added slides for ota mode selection

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

@@ -35,8 +35,37 @@
         </ion-row>
       </ion-grid>
     </ion-slide>
+    <!-- OTA Mode guide-->
+    <ion-slide>
+      <ion-grid>
+        <ion-row align-items-center>
+          <ion-col col-12 col-md-6>
+            <ion-card>
+              <ion-card-header>
+                Automatic mode
+              </ion-card-header>
+              <ion-card-content>
+                <ion-icon class="mode_selection" name="wifi"></ion-icon> <br>
+                {{ ' OTAWIZ.OTAMODESELECTION.AUTOMATIC | translate'}}
+              </ion-card-content>
+            </ion-card>
+          </ion-col>
+          <ion-col col-12 col-md-6>
+            <ion-card>
+              <ion-card-header>
+                Manual mode
+              </ion-card-header>
+              <ion-card-content>
+                <ion-icon class="mode_selection" name="hammer"></ion-icon> <br>
+                {{ ' OTAWIZ.OTAMODESELECTION.MANUAL | translate'}}
+              </ion-card-content>
+            </ion-card>
+          </ion-col>
 
-    <!-- OTA mode guide -->
+        </ion-row>
+      </ion-grid>
+    </ion-slide>
+    <!-- OTA Manual -->
     <ion-slide>
       <ion-grid>
         <ion-row align-items-center>
@@ -44,9 +73,7 @@
             <h2 translate>OTAWIZ.OTAMODE.TITLE</h2>
             <img class="tutorial_gif" src="../../assets/imgs/ota_modus.gif" />
             <p [innerHTML]="'OTAWIZ.OTAMODE.TEXT' | translate"></p>
-
           </ion-col>
-
           <ion-col col-12 col-md-6>
             <ol style="text-align: left">
               <li [innerHTML]="'OTAWIZ.OTAMODE.STEP1' | translate"></li>
@@ -62,7 +89,29 @@
         </ion-row>
       </ion-grid>
     </ion-slide>
-
+    <!-- OTA Automatic -->
+    <ion-slide>
+      <ion-grid>
+        <ion-row align-items-center>
+          <ion-col col-12 col-md-6>
+            <h2 translate>OTAWIZ.OTAMODE.TITLE</h2>
+            <p [innerHTML]="'OTAWIZ.OTAMODE.TEXT' | translate"></p>
+          </ion-col>
+          <ion-col col-12 col-md-6>
+            <ol style="text-align: left">
+              <li [innerHTML]="'OTAWIZ.OTAMODE.STEP1' | translate"></li>
+              <li [innerHTML]="'OTAWIZ.OTAMODE.STEP2' | translate"></li>
+              <li [innerHTML]="'OTAWIZ.OTAMODE.STEP3' | translate"></li>
+            </ol>
+            <!-- @TODO: diagram! -->
+            <button ion-button large clear icon-end color="primary" (click)="slides.slideNext()">
+              {{ 'OTAWIZ.BTN_NEXT' | translate }}
+              <ion-icon name="arrow-forward"></ion-icon>
+            </button>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+    </ion-slide>
     <!-- compilation waiting screen -->
     <ion-slide *ngIf="!slideIsHidden(slideCompilation)">
       <ng-container *ngIf="state.compilation == 'compiling'">
@@ -70,7 +119,6 @@
         <!-- getActiveIndex() check because animated icons use loads of CPU, even when not visible! -->
         <ion-spinner *ngIf="currentSlide == slideCompilation" item-start name="dots"></ion-spinner>
       </ng-container>
-
       <ng-container *ngIf="state.compilation == 'go-online'">
         <h2 translate>OTAWIZ.COMPILATION.GO_ONLINE.TITLE</h2>
         <p translate>OTAWIZ.COMPILATION.GO_ONLINE.TEXT</p>
@@ -83,13 +131,11 @@
           <ion-icon name="arrow-forward"></ion-icon>
         </button>
       </ng-container>
-
       <ng-container *ngIf="state.compilation == 'error'">
         <h2 translate>OTAWIZ.COMPILATION.ERROR.TITLE</h2>
         <p [innerHTML]="errorMsg"></p> <!-- @TODO: translate? -->
       </ng-container>
     </ion-slide>
-
     <!-- wifi selection -->
     <ion-slide id="wifi-slide">
       <ion-grid>
@@ -97,8 +143,7 @@
           <ion-row align-items-center>
             <ion-col col-12 col-md-6>
               <h2 translate>OTAWIZ.WIFI.MANUAL.TITLE</h2>
-            
+              <img src="../../assets/imgs/wifiselection.gif" class="tutorial_gif" />
-              <img src="../../assets/imgs/wifiselection.gif" class="tutorial_gif"/>
               <p translate>OTAWIZ.WIFI.MANUAL.TEXT</p>
             </ion-col>
             <ion-col col-12 col-md-6>
@@ -119,7 +164,6 @@
               <li translate>OTAWIZ.WIFI.AUTO.TEXT3</li>
             </ul>
           </ion-col>
-
           <ion-col col-12 col-md-6>
             <h4 translate>OTAWIZ.WIFI.AUTO.AVAILABLE</h4>
             <button ion-fab mini color="light" (click)="onWifiRefresh()">

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

@@ -8,7 +8,11 @@ page-ota-wizard {
   .tutorial_gif {
     border-radius: 25px;
    }
-
+  .mode_selection {
+    font-size:8rem;
+    color:lightslategray;
+    margin:10px;
+  }
   ion-slide {
     h4 {
       margin-bottom: 40px;

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

@@ -44,7 +44,7 @@ export class OtaWizardPage implements OnInit, OnDestroy {
   private sketch = ''
   private compiledSketch: ArrayBuffer = undefined
   private hiddenSlides: OtaSlides[] = []
-
+  private modus = "manual"
   private log: LoggingProvider
   private slideHistory: string[] = [OtaSlides[OtaSlides.Intro]] // for debug info in logs
   private counts = { compile: 0, connect: 0, upload: 0 }
@@ -119,6 +119,19 @@ export class OtaWizardPage implements OnInit, OnDestroy {
     this.navCtrl.pop()
   }
 
+  toggleManual(){
+    if(this.modus === "manual"){
+      this.modus = "automatic"
+    }
+    else {
+      this.modus = "manual"
+    }
+  }
+  
+  activateOta(){
+    // Sends request; upon successful response go to next slide (wifi selection)
+    
+  }
   // call logic for each slide
   onSlideChange () {
     this.slideHistory.push(OtaSlides[this.currentSlide])