From d6d4d77c34814d671ff5fa5652ffed5478669bc5 Mon Sep 17 00:00:00 2001 From: yhallowiegeht Date: Mon, 19 Nov 2018 12:50:47 +0100 Subject: [PATCH] blockly page init --- README.md | 4 + src/app/app.component.ts | 4 +- src/app/app.module.ts | 8 +- src/index.html | 36 ++++ src/pages/Blockly/blockly.html | 17 +- src/pages/Blockly/blockly.module.ts | 2 +- src/pages/Blockly/blockly.scss | 2 +- src/pages/Blockly/blockly.ts | 285 +++++++++++++++++++++++++++- 8 files changed, 331 insertions(+), 27 deletions(-) diff --git a/README.md b/README.md index 35ce3c6..b1f29db 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,10 @@ - please fork this repository to develop your apps ### Prequesites +- Git Installation + - use + `git clone https://github.com/AppDevelopmentAtsenseBox/openSenseApp --recursive` + because the ardublockly submodule is used to implememt blockly - Node + NPM (nvm) - https://www.npmjs.com/get-npm diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 910a864..434aa26 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -4,7 +4,7 @@ import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen'; import { HomePage } from '../pages/home/home'; -import { OtaWizardPage } from '../pages/ota-wizard/ota-wizard'; +import { BlocklyPage } from '../pages/Blockly/blockly'; @Component({ templateUrl: 'app.html' @@ -13,7 +13,7 @@ export class openSenseApp { @ViewChild(Nav) nav: Nav; - rootPage:any = OtaWizardPage; // TODO: for development, revert to HomePage + rootPage:any = BlocklyPage; // TODO: for development, revert to HomePage pages: Array<{title: string, component: any}> = [ { title: 'Home', component: HomePage }, diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 0f6bf88..0b0850e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -10,6 +10,8 @@ import { ApiProvider } from '../providers/api/api'; import { HttpClientModule } from '@angular/common/http'; import { OtaWizardPage } from '../pages/ota-wizard/ota-wizard'; import { OtaWizardPageModule } from '../pages/ota-wizard/ota-wizard.module'; +import { BlocklyPage} from '../pages/Blockly/blockly' +import { BlocklyPageModule} from '../pages/Blockly/blockly.module' @NgModule({ declarations: [ @@ -20,13 +22,15 @@ import { OtaWizardPageModule } from '../pages/ota-wizard/ota-wizard.module'; HttpClientModule, BrowserModule, OtaWizardPageModule, - IonicModule.forRoot(openSenseApp) + IonicModule.forRoot(openSenseApp), + BlocklyPageModule ], bootstrap: [IonicApp], entryComponents: [ openSenseApp, OtaWizardPage, - HomePage + HomePage, + BlocklyPage ], providers: [ StatusBar, diff --git a/src/index.html b/src/index.html index 212d7bd..27b6ea4 100644 --- a/src/index.html +++ b/src/index.html @@ -29,6 +29,20 @@ + + + + + + + + + + + + + + @@ -45,5 +59,27 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/Blockly/blockly.html b/src/pages/Blockly/blockly.html index c365bc5..4baf04a 100644 --- a/src/pages/Blockly/blockly.html +++ b/src/pages/Blockly/blockly.html @@ -5,25 +5,18 @@ Ionic pages and navigation. --> - + - Blockly + Blockly for SenseBox - - - - - + + - -
- Blockly should be displayed here ! -
- +
diff --git a/src/pages/Blockly/blockly.module.ts b/src/pages/Blockly/blockly.module.ts index 73e4e5b..332227b 100644 --- a/src/pages/Blockly/blockly.module.ts +++ b/src/pages/Blockly/blockly.module.ts @@ -7,7 +7,7 @@ import { BlocklyPage } from './blockly'; BlocklyPage, ], imports: [ - IonicPageModule.forChild(BlocklyPage), + IonicPageModule.forChild(BlocklyPage) ], }) export class BlocklyPageModule {} diff --git a/src/pages/Blockly/blockly.scss b/src/pages/Blockly/blockly.scss index a1c6cee..2d43fb4 100644 --- a/src/pages/Blockly/blockly.scss +++ b/src/pages/Blockly/blockly.scss @@ -1,3 +1,3 @@ page-blockly { - + } diff --git a/src/pages/Blockly/blockly.ts b/src/pages/Blockly/blockly.ts index d6b2e77..e3a5521 100644 --- a/src/pages/Blockly/blockly.ts +++ b/src/pages/Blockly/blockly.ts @@ -1,20 +1,288 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; import { OtaWizardPage } from '../ota-wizard/ota-wizard'; -/** - * Generated class for the SenseBoxPage page. - * - * See https://ionicframework.com/docs/components/#navigation for more info on - * Ionic pages and navigation. - */ +declare var Blockly: any; @IonicPage() @Component({ selector: 'page-blockly', templateUrl: 'blockly.html', }) -export class BlocklyPage { +export class BlocklyPage implements OnInit{ + + public toolbox:string = +'' + +' ' + +'' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' 0' + +' ' + +' ' + +' ' + +' ' + +' 0' + +' ' + +' ' + +' ' + +' ' + +' 0' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' '+ +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' 10' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' 1' + +' ' + +' ' + +' ' + +' ' + +' 10' + +' ' + +' ' + +' ' + +' ' + +' 1' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' 1' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' 1' + +' ' + +' ' + +' ' + +' ' + +' 100' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' 1' + +' ' + +' ' + +' ' + +' ' + +' 100' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' 100' + +' ' + +' '+ +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' 1000' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' 100' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' 0' + +' ' + +' ' + +' 220' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' 90' + +' ' + +' ' + +' ' + +' ' + +' ' + +' 2' + +' 1' + +' 2' + +' ' + +' ' + +' 100' + +' ' + +' ' + +' ' + +' ' + +' 10' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' 10' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +''; + + + ngOnInit(){ + this.createBlocks(); + } + + + createBlocks(){ + let workspacePlayground = Blockly.inject('blocklyDiv', {toolbox: this.toolbox}); + return workspacePlayground; + } + constructor( public navCtrl: NavController, @@ -28,5 +296,4 @@ export class BlocklyPage { launchOtaWizard () { this.navCtrl.setRoot(OtaWizardPage) } - }