added modal and template creation

development
Thiemann96 5 years ago
parent e93cde8675
commit 7d77abe995

@ -12,6 +12,7 @@ import { OtaWizardPageModule } from '../pages/ota-wizard/ota-wizard.module';
import { BlocklyPageModule } from '../pages/blockly/blockly.module'; import { BlocklyPageModule } from '../pages/blockly/blockly.module';
import { LoggingProvider } from '../providers/logging/logging'; import { LoggingProvider } from '../providers/logging/logging';
import { StorageProvider } from '../providers/storage/storage'; import { StorageProvider } from '../providers/storage/storage';
import { AddItemPage } from '../pages/add-item/add-item';
// For AoT compilation (production builds) we need to have a factory for the loader of translation files. // For AoT compilation (production builds) we need to have a factory for the loader of translation files.
// @TODO: we possibly could optimize this by using a static loader in combination with webpack: // @TODO: we possibly could optimize this by using a static loader in combination with webpack:
@ -23,6 +24,7 @@ export function createTranslateLoader(http: HttpClient) {
@NgModule({ @NgModule({
declarations: [ declarations: [
openSenseApp, openSenseApp,
AddItemPage
], ],
imports: [ imports: [
HttpClientModule, HttpClientModule,
@ -41,6 +43,7 @@ export function createTranslateLoader(http: HttpClient) {
bootstrap: [IonicApp], bootstrap: [IonicApp],
entryComponents: [ entryComponents: [
openSenseApp, openSenseApp,
AddItemPage
], ],
providers: [ providers: [
StatusBar, StatusBar,

@ -0,0 +1,29 @@
<ion-header>
<ion-toolbar color="secondary">
<ion-title>
Add Item
</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="close()"><ion-icon name="close"></ion-icon></button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
<ion-label floating>Title</ion-label>
<ion-input type="text" [(ngModel)]="title"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Description</ion-label>
<ion-input type="text" [(ngModel)]="type"></ion-input>
</ion-item>
</ion-list>
<button full ion-button color="secondary" (click)="saveSensor()">Save</button>
</ion-content>

@ -0,0 +1,13 @@
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { AddItemPage } from './add-item';
@NgModule({
declarations: [
AddItemPage,
],
imports: [
IonicPageModule.forChild(AddItemPage),
],
})
export class AddItemPageModule {}

@ -0,0 +1,3 @@
page-add-item {
}

@ -0,0 +1,38 @@
import { Component } from '@angular/core';
import { IonicPage, NavController, ViewController } from 'ionic-angular';
/**
* Generated class for the AddItemPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-add-item',
templateUrl: 'add-item.html',
})
export class AddItemPage {
title:string;
type:string;
id:string;
constructor(public navCtrl: NavController, public view: ViewController) {
}
saveSensor(){
let newSensor = {
title:this.title,
type:this.type,
id:this.id
}
this.view.dismiss(newSensor);
}
close(){
this.view.dismiss();
}
ionViewDidLoad() {
console.log('ionViewDidLoad AddItemPage');
}
}

@ -16,16 +16,16 @@
<ion-card-header> <ion-card-header>
<ion-card-title>{{'CONFIG.WIFI' | translate}} </ion-card-title> <ion-card-title>{{'CONFIG.WIFI' | translate}} </ion-card-title>
</ion-card-header> </ion-card-header>
<ion-card-content> <ion-card-content>
<ion-item> <ion-item>
<ion-label>SSID</ion-label> <ion-label>SSID</ion-label>
<ion-input [(ngModel)]="SSID" placeholder="GIATSCHOOL-NET"></ion-input> <ion-input [(ngModel)]="ssid" placeholder="GIATSCHOOL-NET"></ion-input>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>Password</ion-label> <ion-label>Password</ion-label>
<ion-input [(ngModel)]="pw" placeholder="********"></ion-input> <ion-input [(ngModel)]="pw" placeholder="********"></ion-input>
</ion-item> </ion-item>
</ion-card-content> </ion-card-content>
</ion-card> </ion-card>
</ion-col> </ion-col>
<ion-col col-12 col-md-5> <ion-col col-12 col-md-5>
@ -34,15 +34,50 @@
<ion-card-title>{{ 'CONFIG.IDS' | translate }}</ion-card-title> <ion-card-title>{{ 'CONFIG.IDS' | translate }}</ion-card-title>
</ion-card-header> </ion-card-header>
<ion-card-content> <ion-card-content>
<ion-item> <ion-grid>
<ion-label>senseBoxID</ion-label> <ion-row>
<ion-input [(ngModel)]="senseboxid" placeholder="5c4f75e83580950019240779"></ion-input> <ion-item>
</ion-item> <ion-label>senseBoxID</ion-label>
<ion-item> <ion-input [(ngModel)]="senseboxid" placeholder="5c4f75e83580950019240779"></ion-input>
<ion-label>Temperature</ion-label> </ion-item>
<ion-input [(ngModel)]="temp" placeholder="5c4f75e83580950019240779"></ion-input> </ion-row>
</ion-item> <ion-row *ngFor="let sensor of sensors;let i=index;let last = last">
<ion-item> <ion-col col-10>
<ion-item>
<ion-label>{{sensor.title}}</ion-label>
<ion-input [(ngModel)]="temp"></ion-input>
</ion-item>
</ion-col>
<ion-col *ngIf="last" col-2>
<button ion-item (click)="addSensor()">
<ion-icon name="add" item-start></ion-icon>
</button>
</ion-col>
</ion-row>
<!-- <ion-row>
<ion-col col-10>
<ion-item>
<ion-label>Temperature</ion-label>
<ion-input [(ngModel)]="temp" placeholder="5c4f75e83580950019240779"></ion-input>
</ion-item>
</ion-col>
<ion-col col-2>
<button ion-item (click)="addSensor()">
<ion-icon (click)="addSensor()" name="add" item-start></ion-icon>
<ion-label>Add sensor</ion-label>
</button>
</ion-col>
</ion-row> -->
<ion-row>
<button ion-item (click)="uploadStandardSketch()">
<ion-icon name="refresh" item-start></ion-icon>
<ion-label>
<h2 translate>CONFIG.BUTTON</h2>
</ion-label>
</button>
</ion-row>
</ion-grid>
<!-- <ion-item>
<ion-label>Humidity</ion-label> <ion-label>Humidity</ion-label>
<ion-input [(ngModel)]="humi" placeholder="5c4f75e83580950019240779"></ion-input> <ion-input [(ngModel)]="humi" placeholder="5c4f75e83580950019240779"></ion-input>
</ion-item> </ion-item>
@ -65,14 +100,9 @@
<ion-item> <ion-item>
<ion-label>PM25</ion-label> <ion-label>PM25</ion-label>
<ion-input [(ngModel)]="pm25" placeholder="5c4f75e83580950019240779"></ion-input> <ion-input [(ngModel)]="pm25" placeholder="5c4f75e83580950019240779"></ion-input>
</ion-item> </ion-item> -->
<button ion-item (click)="uploadStandardSketch()">
<ion-icon name="refresh" item-start></ion-icon> </ion-card-content>
<ion-label>
<h2 translate>CONFIG.BUTTON</h2>
</ion-label>
</button>
</ion-card-content>
</ion-card> </ion-card>
</ion-col> </ion-col>
</ion-row> </ion-row>
@ -82,4 +112,4 @@
</ion-col> </ion-col>
</ion-row> </ion-row>
</ion-grid> </ion-grid>
</ion-content> </ion-content>

@ -1,7 +1,8 @@
import { Component, } from '@angular/core'; import { Component, } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular'; import { IonicPage, NavController, NavParams, ModalController} from 'ionic-angular';
import { OtaWizardPage } from '../ota-wizard/ota-wizard'; import { OtaWizardPage } from '../ota-wizard/ota-wizard';
import { HttpClient } from '@angular/common/http'; import { HttpClient } from '@angular/common/http';
import { AddItemPage } from '../add-item/add-item';
/** /**
* Generated class for the AboutPage page. * Generated class for the AboutPage page.
* *
@ -15,6 +16,7 @@ import { HttpClient } from '@angular/common/http';
templateUrl: 'configuration.html', templateUrl: 'configuration.html',
}) })
export class ConfigurationPage { export class ConfigurationPage {
public sensors=[];
temp : string; temp : string;
humi : string; humi : string;
lux : string; lux : string;
@ -26,12 +28,9 @@ export class ConfigurationPage {
pressure:string; pressure:string;
rain:string; rain:string;
senseboxid:string; senseboxid:string;
constructor(public navCtrl: NavController, public navParams: NavParams,private http:HttpClient) { constructor(public navCtrl: NavController, public navParams: NavParams,private http:HttpClient,public modalCtrl:ModalController) {
} }
async launchOtaWizard () {
}
applyTemplate(template, properties) { applyTemplate(template, properties) {
var returnValue = ""; var returnValue = "";
@ -42,44 +41,56 @@ export class ConfigurationPage {
var fragmentSections = templateFragments[i].split("}@", 2); var fragmentSections = templateFragments[i].split("}@", 2);
returnValue += properties[fragmentSections[0]]; returnValue += properties[fragmentSections[0]];
returnValue += fragmentSections[1]; returnValue += fragmentSections[1];
} }
return returnValue; return returnValue;
} }
uploadStandardSketch(){ async uploadStandardSketch(){
// possily add define statements here based on inputs given or checkboxes checked var values = {
let sketchy = "#define HDC1080\n"; SSID: this.ssid,
PASSWORD:this.pw,
INGRESS_DOMAIN:"ingress.opensensemap.org",
SENSEBOX_ID:this.senseboxid,
NUM_SENSORS:6,
TEMPERSENSOR_ID:this.temp,
RELLUFSENSOR_ID:this.humi,
BELEUCSENSOR_ID:this.lux,
UVINTESENSOR_ID:this.uv,
LUFTDRSENOSR_ID:this.pressure,
REGENMSENSOR_ID:this.rain,
PM10SENSOR_ID:this.pm10,
PM25SENSOR_ID:this.pm25
};
this.http.get("assets/templates/homev2Wifi.tpl",{responseType:"text"}).subscribe(data=>{ this.http.get("assets/templates/homev2Wifi.tpl",{responseType:"text"}).subscribe(data=>{
sketchy = sketchy+data; let sketch = this.applyTemplate(data,values);
var values = { this.navCtrl.push(OtaWizardPage, { sketch })
SSID: this.ssid, })
PASSWORD:this.pw, }
INGRESS_DOMAIN:"ingress.opensensemap.org",
SENSEBOX_ID:this.senseboxid, addSensor(){
NUM_SENSORS:6, console.log("adding sensor");
TEMPERSENSOR_ID:this.temp,
RELLUFSENSOR_ID:this.humi, let addModal = this.modalCtrl.create(AddItemPage);
BELEUCSENSOR_ID:this.lux,
UVINTESENSOR_ID:this.uv, addModal.onDidDismiss((sensor)=>{
LUFTDRSENOSR_ID:this.pressure, if(sensor){
REGENMSENSOR_ID:this.rain, this.saveSensor(sensor);
PM10SENSOR_ID:this.pm10, }
PM25SENSOR_ID:this.pm25
};
sketchy = this.applyTemplate(sketchy,values);
}) })
/** addModal.present();
* Start OTA Wizard here but with the pre defined sketch here and not with the blockly sketch
* }
**
*/ saveSensor(sensor){
const sketch = 'void setup(){Serial.begin(9600);} void loop(){Serial.println("Working");}' this.sensors.push(sensor);
this.navCtrl.push(OtaWizardPage, { sketchy })
} }
ionViewDidLoad() { ionViewDidLoad() {
console.log('ionViewDidLoad ConfigPage'); this.sensors =[
{title:"Temperatur",type:"temp"},
{title:"Temperatur",type:"temp"}
]
} }
} }

Loading…
Cancel
Save