temperature sensors enabled / disabled ui

app/client/alarm.js

@@ -1,30 +1,7 @@
-function sensor_data_collection() {
-  var controllerId = Session.get('controller_id');
-  return SensorData.find({
-    controllerId: controllerId
-  }, {
-    sort: {
-      created_at: -1
-    },
-    limit: 3
-  });
-}
 
-function last_sensor_reading() {
-  var controller = Session.get('controller_id');
-  var result = null;
-  if (controller) {
-    result = sensor_data_collection();
-  }
-  if (result && result.count() > 0) {
-    return result.fetch()[0];
-  } else {
-    return {}
-  }
-}
 
 Template.alarm.helpers({
-  last_reading: last_sensor_reading,
+  last_reading: Meteor.zoblak.client.last_sensor_reading,
   state: function() {
     return Meteor.zoblak.client.controller_state().state;
   },
@@ -33,7 +10,7 @@ Template.alarm.helpers({
   },
   all_temperatures: function() {
     var result = "";
-    var temperatures = last_sensor_reading().temperatures;
+    var temperatures = Meteor.zoblak.client.last_sensor_reading().temperatures;
 
     for (var i in temperatures) {
       var temperature = parseFloat(temperatures[i]).toFixed(1);

app/client/alarm_settings.html

@@ -71,7 +71,27 @@
                             </tr>
                         </table>
                     </div>
+
+
+                <div class="form-group">
+                    <h3>Senzori: </h3>
+                    <table class="table">
+                      {{#each sensor in sensors }}
+                        <tr>
+                          <td>
+                            {{ pretty_temperature sensor.value }}
+                          </td>
+                          <td>
+                            <label class="switch">
+                              <input type="checkbox" checked={{sensor.on}} />
+                              <div class="slider round"></div>
+                            </label>
+                          </td>
+                        </tr>
+                      {{/each}}
+                    </table>
                 </div>
+            </div>
 
                 <div class="modal-footer">
                     <button id="save_settings" class="btn btn-default" name="save_settings" data-dismiss="modal">Zapamti</button>

app/client/alarm_settings.js

@@ -26,12 +26,33 @@ Template.alarm_settings.helpers({
     var result = config()[property];
     console.log('returning', result);
     return result;
+  },
+
+  pretty_temperature: function(temperature) {
+    var temperatureLabel = (Meteor.zoblak.shared.valid_temperature(temperature)) ? temperature : "XX.X";
+    return '' + temperatureLabel + ' °C ';
+  },
+
+  sensors: function() {
+    var temperatures = Meteor.zoblak.client.last_sensor_reading().temperatures;
+    var enabled = config()['enabled'] || {};
+    var sensors = [];
+    for (var index in temperatures) {
+      var is_on = (index in enabled) ? enabled[index] : true; // on by default
+      var value = parseFloat(temperatures[index])
+      sensors.push({
+        value: value,
+        on: is_on
+      })
+    }
+    return sensors;
   }
 });
 
 Template.alarm_settings.events({
   'click #save_settings': function() {
     var controller_id = Meteor.zoblak.client.controller_state().controller_id;
+    1
     var instance = Template.instance();
     var minTemperature = instance.$('#min_temperature').val();
     var maxTemperature = instance.$('#max_temperature').val();

app/client/app.less

@@ -58,3 +58,62 @@
   font-size: 14px;
 
 }
+
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {display:none;}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: #2196F3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}

app/lib/zoblak.js

@@ -24,12 +24,37 @@ Meteor.zoblak.client = {
     if (!controller.features) return false;
 
     return controller.features[feature] === true;
+  },
+
+  sensor_data_collection: function() {
+    var controllerId = Session.get('controller_id');
+    return SensorData.find({
+      controllerId: controllerId
+    }, {
+      sort: {
+        created_at: -1
+      },
+      limit: 3
+    });
+  },
+
+  last_sensor_reading: function() {
+    var controller = Session.get('controller_id');
+    var result = null;
+    if (controller) {
+      result = Meteor.zoblak.client.sensor_data_collection();
+    }
+    if (result && result.count() > 0) {
+      return result.fetch()[0];
+    } else {
+      return {}
+    }
   }
 }
 
 Meteor.zoblak.shared = {
   valid_temperature: function(value) {
-      return (parseFloat(value) > -40 && parseFloat(value) < 50);
+    return (parseFloat(value) > -40 && parseFloat(value) < 50);
   }
 }
 
@@ -61,7 +86,7 @@ Meteor.zoblak.server = {
       var controller_id = ids[index];
       try {
         whatToDo(controller_id);
-      } catch(err) {
+      } catch (err) {
         console.log('Cannot call ', whatToDo, controller_id, err);
       }
     }