ota-wizard fixes

src/pages/Blockly/blockly.scss

@@ -1,6 +1,6 @@
 page-blockly {
     ion-fab {
-        margin-right: 25px;
+        margin-right: 15px;
         ion-icon {
             font-size: 35px !important;
         }

src/pages/Blockly/blockly.ts

@@ -11,11 +11,15 @@ import { OtaWizardPage } from '../ota-wizard/ota-wizard';
 export class BlocklyPage {
   @ViewChild('blocklyFrame') blocklyFrame: ElementRef
 
+  messageHandler: (ev: IframePostMessageEvent) => void
+
   constructor(
     public navCtrl: NavController,
     public navParams: NavParams
   ) {
-    window.addEventListener('message', ev => {
+    // need to assign it here to keep the function reference for unsubscribing again
+    // and to maintain the this scope properly
+    this.messageHandler = (ev: IframePostMessageEvent) => {
       const { type, data } = ev.data;
       switch (type) {
         case 'sketch':
@@ -23,10 +27,23 @@ export class BlocklyPage {
           break
         default:
       }
-    })
+    }
+
+    window.addEventListener('message', this.messageHandler)
+  }
+
+  ionViewWillUnload () {
+    window.removeEventListener('message', this.messageHandler)
   }
 
   launchOtaWizard () {
     this.blocklyFrame.nativeElement.contentWindow.postMessage('getSketch', '*')
   }
 }
+
+interface IframePostMessageEvent extends MessageEvent {
+  data: {
+    type: 'sketch',
+    data: any,
+  }
+}

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

@@ -145,7 +145,7 @@
       <ng-container *ngIf="state.upload == 'done'">
         <ion-icon name="checkmark" style="font-size: 160px"></ion-icon>
         <h2>Done!</h2>
-        <button ion-button large clear icon-end color="primary" (click)="slides.slideNext()">
+        <button ion-button large clear icon-end color="primary" (click)="onClose()">
           Close
         </button>
       </ng-container>