osem boxes dropdown blockly menu

src/components/Blockly/blocks/sensebox-osem.js

@@ -1,7 +1,14 @@
 import * as Blockly from 'blockly/core';
 import { getColour } from '../helpers/colour';
 
-var apiData = '[{"_id":"5e6073fe57703e001bb99453","createdAt":"2020-03-05T03:37:34.151Z","updatedAt":"2020-10-17T10:49:51.636Z","name":"Vtuzgorodok","currentLocation":{"timestamp":"2020-03-05T03:37:34.146Z","coordinates":[60.658676,56.833041,51],"type":"Point"},"exposure":"outdoor","sensors":[{"title":"PM10","unit":"µg/m³","sensorType":"SDS 011","icon":"osem-cloud","_id":"5e6073fe57703e001bb99458","lastMeasurement":{"value":"3.30","createdAt":"2020-10-17T10:49:51.627Z"}},{"title":"PM2.5","unit":"µg/m³","sensorType":"SDS 011","icon":"osem-cloud","_id":"5e6073fe57703e001bb99457","lastMeasurement":{"value":"0.90","createdAt":"2020-10-17T10:49:51.627Z"}},{"title":"Temperatur","unit":"°C","sensorType":"BME280","icon":"osem-thermometer","_id":"5e6073fe57703e001bb99456","lastMeasurement":{"value":"6.58","createdAt":"2020-10-17T10:49:51.627Z"}},{"title":"rel. Luftfeuchte","unit":"%","sensorType":"BME280","icon":"osem-humidity","_id":"5e6073fe57703e001bb99455","lastMeasurement":{"value":"53.76","createdAt":"2020-10-17T10:49:51.627Z"}},{"title":"Luftdruck","unit":"Pa","sensorType":"BME280","icon":"osem-barometer","_id":"5e6073fe57703e001bb99454","lastMeasurement":{"value":"96937.66","createdAt":"2020-10-17T10:49:51.627Z"}}],"model":"luftdaten_sds011_bme280","lastMeasurementAt":"2020-10-17T10:49:51.627Z","loc":[{"geometry":{"timestamp":"2020-03-05T03:37:34.146Z","coordinates":[60.658676,56.833041,51],"type":"Point"},"type":"Feature"}]}]';
+import store from '../../../store';
+
+var boxes = store.getState().auth.user ? store.getState().auth.user.boxes : null;
+store.subscribe(() => {
+  boxes = store.getState().auth.user ? store.getState().auth.user.boxes : null;
+});
+var selectedBox = '';
+
 
 Blockly.Blocks['sensebox_osem_connection'] = {
     init: function () {
@@ -17,10 +24,21 @@ Blockly.Blocks['sensebox_osem_connection'] = {
             .setAlign(Blockly.ALIGN_LEFT)
             .appendField(Blockly.Msg.senseBox_osem_exposure)
             .appendField(new Blockly.FieldDropdown([[Blockly.Msg.senseBox_osem_stationary, 'Stationary'], [Blockly.Msg.senseBox_osem_mobile, 'Mobile']]), "type");
+        if(!boxes){
           this.appendDummyInput()
               .setAlign(Blockly.ALIGN_LEFT)
               .appendField("senseBox ID")
               .appendField(new Blockly.FieldTextInput("senseBox ID"), "BoxID");
+        } else {
+          var dropdown = []
+          for (var i = 0; i < boxes.length; i++) {
+              dropdown.push([boxes[i].name, boxes[i]._id])
+          }
+          this.appendDummyInput()
+              .setAlign(Blockly.ALIGN_LEFT)
+              .appendField("senseBox ID")
+              .appendField(new Blockly.FieldDropdown(dropdown), 'BoxID');
+        }
         this.appendDummyInput()
             .setAlign(Blockly.ALIGN_LEFT)
             .appendField(Blockly.Msg.senseBox_osem_access_token)
@@ -32,14 +50,7 @@ Blockly.Blocks['sensebox_osem_connection'] = {
         this.setNextStatement(true, null);
     },
     onchange: function (e) {
-        let boxID = this.getFieldValue('BoxID');
+        selectedBox = this.getFieldValue('BoxID');
-        if (boxID !== 'senseBox ID') {
-            fetch('https://api.opensensemap.org/boxes/ ' + boxID)
-                .then(res => res.json())
-                .then((data) => {
-                    apiData = data;
-                })
-        }
     },
     mutationToDom: function () {
         var container = document.createElement('mutation');
@@ -83,35 +94,42 @@ Blockly.Blocks['sensebox_osem_connection'] = {
 };
 Blockly.Blocks['sensebox_send_to_osem'] = {
     init: function () {
-
         this.setTooltip(Blockly.Msg.senseBox_send_to_osem_tip);
         this.setHelpUrl('');
         this.setColour(getColour().sensebox);
         this.appendDummyInput()
             .appendField(Blockly.Msg.senseBox_send_to_osem);
+        if(boxes){
           this.appendValueInput('Value')
               .appendField('Phänomen')
               .appendField(new Blockly.FieldDropdown(
                   this.generateOptions), 'SensorID');
+        } else {
+          this.appendValueInput('Value')
+               .setAlign(Blockly.ALIGN_LEFT)
+               .appendField('Phänomen')
+               .appendField(new Blockly.FieldTextInput(
+                   'sensorID'), 'SensorID')
+        }
+
         this.setPreviousStatement(true, null);
         this.setNextStatement(true, null);
     },
 
     generateOptions: function () {
-        var options = [['', '']];
+        var dropdown = [['', '']];
-        if (apiData.sensors != undefined) {
+        var boxID = selectedBox;
-            for (var i = 0; i < apiData.sensors.length; i++) {
+        if(boxID !== '' && boxes){
-                options.push([apiData.sensors[i].title, apiData.sensors[i]._id]);
+
+          let box = boxes.find(el => el._id === boxID);
+          if (box !== undefined) {
+              for (var i = 0; i < box.sensors.length; i++) {
+                  dropdown.push([box.sensors[i].title, box.sensors[i]._id])
+              }
+              console.log(dropdown)
           }
         }
-        if (options.length > 1) {
+        return dropdown
-
-            var dropdown = options.slice(1)
-            return dropdown;
-        } else
-            return options;
-
-
     },
     /**
   * Called whenever anything on the workspace changes.