opensensemap/blockly-app
1
0
Fork 0
mirror of https://github.com/sensebox/blockly-app synced 2025-06-09 11:35:50 +02:00
Code Issues Releases Wiki Activity

added slides for ota mode selection

Browse source
This commit is contained in:
Thiemann96 2020-03-18 22:31:46 +01:00
parent eeb9b87904
commit 82409c264a
3 changed files with 73 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
src/pages/ota-wizard/ota-wizard.html
View file

@ -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()">

6
src/pages/ota-wizard/ota-wizard.scss
View file

@ -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;

15
src/pages/ota-wizard/ota-wizard.ts
View file

@ -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])