view page for sensor details

src/app/app.module.ts

@@ -13,6 +13,7 @@ import { BlocklyPageModule } from '../pages/blockly/blockly.module';
 import { LoggingProvider } from '../providers/logging/logging';
 import { StorageProvider } from '../providers/storage/storage';
 import { AddItemPage } from '../pages/add-item/add-item';
+import { SensorDetailPage } from '../pages/sensor-detail/sensor-detail';
 
 // 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:
@@ -24,7 +25,8 @@ export function createTranslateLoader(http: HttpClient) {
 @NgModule({
   declarations: [
     openSenseApp,
-    AddItemPage
+    AddItemPage,
+    SensorDetailPage
   ],
   imports: [
     HttpClientModule,
@@ -43,7 +45,8 @@ export function createTranslateLoader(http: HttpClient) {
   bootstrap: [IonicApp],
   entryComponents: [
     openSenseApp,
-    AddItemPage
+    AddItemPage,
+    SensorDetailPage
   ],
   providers: [
     StatusBar,

src/pages/add-item/add-item.html

@@ -22,6 +22,12 @@
       <ion-input type="text" [(ngModel)]="type"></ion-input>
     </ion-item>
 
+
+    <ion-item>
+      <ion-label floating>senseor ID</ion-label>
+      <ion-input type="text" [(ngModel)]="id"></ion-input>
+    </ion-item>
+
   </ion-list>
 
   <button full ion-button color="secondary" (click)="saveSensor()">Save</button> 

src/pages/configuration/configuration.html

@@ -41,33 +41,23 @@
                   <ion-input [(ngModel)]="senseboxid" placeholder="5c4f75e83580950019240779"></ion-input>
                 </ion-item>
               </ion-row>
-              <ion-row *ngFor="let sensor of sensors;let i=index;let last = last">
-                <ion-col col-10>
+              <ion-row *ngFor="let sensor of sensors;let i=index;let last = last;let first=first" (click)="viewSensor(sensor)">
+                <ion-col col-8>
                   <ion-item>
-                    <ion-label>{{sensor.title}}</ion-label>
-                    <ion-input [(ngModel)]="temp"></ion-input>
+                    <ion-label>{{sensor.title}}  {{sensor.id}}</ion-label>
                   </ion-item>
                   </ion-col>
+                  <ion-col *ngIf="!first" col-2>
+                    <button ion-item (click)="removeSensor()">
+                      <ion-icon name="remove" item-start></ion-icon>
+                    </button>
+                  </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>
               <ion-row>
                 <button ion-item (click)="uploadStandardSketch()">
                   <ion-icon name="refresh" item-start></ion-icon>
@@ -77,30 +67,6 @@
                 </button>
               </ion-row>
             </ion-grid>
-            <!-- <ion-item>
-              <ion-label>Humidity</ion-label>
-              <ion-input [(ngModel)]="humi" placeholder="5c4f75e83580950019240779"></ion-input>
-            </ion-item>
-            <ion-item>
-              <ion-label>Pressure</ion-label>
-              <ion-input [(ngModel)]="pressure" placeholder="5c4f75e83580950019240779"></ion-input>
-            </ion-item>
-            <ion-item>
-              <ion-label>Lux</ion-label>
-              <ion-input [(ngModel)]="lux" placeholder="5c4f75e83580950019240779"></ion-input>
-            </ion-item>
-            <ion-item>
-              <ion-label>UV</ion-label>
-              <ion-input [(ngModel)]="uv" placeholder="5c4f75e83580950019240779"></ion-input>
-            </ion-item>
-            <ion-item>
-              <ion-label>PM10</ion-label>
-              <ion-input [(ngModel)]="pm10" placeholder="5c4f75e83580950019240779"></ion-input>
-            </ion-item>
-            <ion-item>
-              <ion-label>PM25</ion-label>
-              <ion-input [(ngModel)]="pm25" placeholder="5c4f75e83580950019240779"></ion-input>
-            </ion-item> -->
 
           </ion-card-content>
         </ion-card>

src/pages/configuration/configuration.ts

@@ -3,6 +3,7 @@ import { IonicPage, NavController, NavParams, ModalController} from 'ionic-angul
 import { OtaWizardPage } from '../ota-wizard/ota-wizard';
 import { HttpClient } from '@angular/common/http';
 import { AddItemPage } from '../add-item/add-item';
+import { SensorDetailPage } from '../sensor-detail/sensor-detail';
 /**
  * Generated class for the AboutPage page.
  *
@@ -85,11 +86,17 @@ export class ConfigurationPage {
   saveSensor(sensor){
     this.sensors.push(sensor);
   }
+  
+  viewSensor(sensor){
+    this.navCtrl.push(SensorDetailPage,{
+      sensor:sensor
+    })
+  }
 
   ionViewDidLoad() {
     this.sensors =[
-      {title:"Temperatur",type:"temp"},
-      {title:"Temperatur",type:"temp"}
+      {title:"Temperatur",type:"temp",id:"09327523"},
+      {title:"rel. Luftfeuchte",type:"temp",id:"97309852345"}
     ]
   }
 

src/pages/sensor-detail/sensor-detail.html

@@ -0,0 +1,16 @@
+<ion-header>
+  <ion-navbar color="secondary">
+    <ion-title>
+      {{title}}
+    </ion-title>
+  </ion-navbar>
+</ion-header>
+
+<ion-content>
+  <ion-card>
+    <ion-card-content>
+     Type: {{type}}<br>
+     ID: {{id}}
+    </ion-card-content>
+  </ion-card>
+</ion-content>

src/pages/sensor-detail/sensor-detail.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { SensorDetailPage } from './sensor-detail';
+
+@NgModule({
+  declarations: [
+    SensorDetailPage,
+  ],
+  imports: [
+    IonicPageModule.forChild(SensorDetailPage),
+  ],
+})
+export class SensorDetailPageModule {}

src/pages/sensor-detail/sensor-detail.scss

@@ -0,0 +1,3 @@
+page-sensor-detail {
+
+}

src/pages/sensor-detail/sensor-detail.ts

@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+import { IonicPage, NavController, NavParams } from 'ionic-angular';
+
+/**
+ * Generated class for the SensorDetailPage page.
+ *
+ * See https://ionicframework.com/docs/components/#navigation for more info on
+ * Ionic pages and navigation.
+ */
+
+@IonicPage()
+@Component({
+  selector: 'page-sensor-detail',
+  templateUrl: 'sensor-detail.html',
+})
+export class SensorDetailPage {
+
+  title;
+  type;
+  id;
+
+  constructor(public navParams: NavParams) {
+  }
+
+  ionViewDidLoad() {
+    console.log('ionViewDidLoad SensorDetailPage');
+    this.title=this.navParams.get('sensor').title;
+    this.type = this.navParams.get('sensor').type;
+    this.id = this.navParams.get('sensor').id;
+  }
+
+}