Add visual return when setting consign.

Fix visual glitches
Fix indentation

.eslintrc

@@ -0,0 +1,41 @@
+{
+ "globals": {
+   "window": true,
+   "document": true,
+   "Em": true
+ },
+ "env": {
+   "es6": true
+ },
+ "parser": "babel-eslint",
+ "rules": {
+   "curly": 2,
+   "indent": [2, 2, {"VariableDeclarator": {"var": 2, "let": 2, "const": 3}}],
+   "array-bracket-spacing": [2, "never"],
+   "comma-spacing": [2, {"before": false, "after": true}],
+   "keyword-spacing": 2,
+   "space-before-blocks": 2,
+   "eqeqeq": 2,
+   "no-eval": 2,
+   "no-caller": 2,
+   "no-undef": 2,
+   "no-eq-null": 2,
+   "no-unused-vars": 2,
+   "no-octal": 2,
+   "no-redeclare": 2,
+   "no-self-assign": 2,
+   "radix": 2,
+   "no-debugger": 0,
+   "guard-for-in": 0,
+   "wrap-iife": 0,
+   "linebreak-style": 0,
+   "no-empty": 0,
+   "no-new": 0,
+   "no-plusplus": 0,
+   "dot-notation": 0,
+   "strict": 0,
+   "no-ternary": 0,
+   "quotes": 0,
+   "one-var": 0
+ }
+}

app/components/dynamic-high-charts.js

@@ -0,0 +1,12 @@
+import Ember from 'ember';
+import EmberHighChartsComponent from 'ember-highcharts/components/high-charts';
+
+export default EmberHighChartsComponent.extend({
+  contentDidChange: Ember.observer('content.@each.isLoaded', function() {
+    // add redraw logic here. ex:
+    var chart = this.get('chart');
+    chart.series[1].setData(this.get('content')[1].data, false, true);
+    chart.redraw();
+  })
+
+});

app/components/heater-listview.js

@@ -1,158 +1,177 @@
 import Ember from 'ember';
 import config from '../config/environment';
+import jQuery from 'jquery';
 
 export default Ember.Component.extend({
-  classNames: ['col-md-4'],
+  classNames: ['col-md-3'],
   heater: null,
+  isSaving: false,
+
   actions: {
     formSetConsign() {
       let target = this.get('heater.consign');
       let id = this.get('heater.id');
       let data="consign="+target;
       let headers = {"Content-Type": "application/x-www-form-urlencoded"};
-      if(config.apiAuth !== ''){
+
+      this.set("isSaving", true);
+
+      if (config.apiAuth !== '') {
         headers.Authorization = config.apiAuth;
       }
       fetch(config.api+"/effectors/heaters/"+id,
-      { method: "PUT", 
+        { method: "PUT",
-        body: data,
+          body: data,
-        headers: headers 
+          headers: headers
-      }).then(function(response) {
+        }).then((response) => {
-      if(response.ok) {
+          if (response.ok) {
-        console.debug("Requete OK");
+            console.debug("Requete OK");
-      }});
+            //window.location.reload();
+            this.setChartDataConsign(id, target);
+            this.set("isSaving", false);
+          }
+        }).catch((error) => {
+          window.alert(error);
+          this.set("isSaving", false);
+        });
     },
   },
   // defining graph
   chartOptions: [],
   chartOptions_default: {
     chart: {
-            type: 'gauge',
+      type: 'gauge',
-            plotBackgroundColor: null,
+      plotBackgroundColor: null,
-            plotBackgroundImage: null,
+      plotBackgroundImage: null,
-            plotBorderWidth: 0,
+      plotBorderWidth: 0,
-            plotShadow: false
+      plotShadow: false
+    },
+    title: {
+      text: 'Temperature'
+    },
+    pane: {
+      startAngle: -150,
+      endAngle: 150,
+      background: [{
+        backgroundColor: {
+          linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+          stops: [
+                  [0, '#FFF'],
+                  [1, '#333']
+          ]
         },
-
+        borderWidth: 0,
-        title: {
+        outerRadius: '109%'
-            text: 'Temperature' 
+      },
-        },
+      {
-
+        backgroundColor: {
-        pane: {
+          linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-            startAngle: -150,
+          stops: [
-            endAngle: 150,
-            background: [{
-                backgroundColor: {
-                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-                    stops: [
-                        [0, '#FFF'],
-                        [1, '#333']
-                    ]
-                },
-                borderWidth: 0,
-                outerRadius: '109%'
-            }, {
-                backgroundColor: {
-                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-                    stops: [
                         [0, '#333'],
                         [1, '#FFF']
-                    ]
+          ]
-                },
-                borderWidth: 1,
-                outerRadius: '107%'
-            }, {
-                // default background
-            }, {
-                backgroundColor: '#DDD',
-                borderWidth: 0,
-                outerRadius: '105%',
-                innerRadius: '103%'
-            }]
         },
-
+        borderWidth: 1,
-        // the value axis
+        outerRadius: '107%'
-        yAxis: {
+      },
-            min: -10,
+      {
-            max: 40,
+                // default background
-
+      },
-            minorTickInterval: 'auto',
+      {
-            minorTickWidth: 1,
+        backgroundColor: '#DDD',
-            minorTickLength: 10,
+        borderWidth: 0,
-            minorTickPosition: 'inside',
+        outerRadius: '105%',
-            minorTickColor: '#666',
+        innerRadius: '103%'
-
+      }]
-            tickPixelInterval: 30,
+    },
-            tickWidth: 2,
+    // the value axis
-            tickPosition: 'inside',
+    yAxis: {
-            tickLength: 10,
+      min: -10,
-            tickColor: '#666',
+      max: 40,
-            labels: {
+      minorTickInterval: 'auto',
-                step: 2,
+      minorTickWidth: 1,
-                rotation: 'auto'
+      minorTickLength: 10,
-            },
+      minorTickPosition: 'inside',
-            title: {
+      minorTickColor: '#666',
-                text: '°C'
+      tickPixelInterval: 30,
-            },
+      tickWidth: 2,
-            plotBands: [{
+      tickPosition: 'inside',
-                from: -10,
+      tickLength: 10,
-                to: 7,
+      tickColor: '#666',
-                color: {
+      labels: {
-                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+        step: 2,
-                    stops: [
+        rotation: 'auto'
+      },
+      title: {
+        text: '°C'
+      },
+      plotBands: [{
+        from: -10,
+        to: 7,
+        color: {
+          linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+          stops: [
                         [0, 'white'],
                         [1, 'blue']
-                    ]
+          ]
-                		}
-            },
-            {
-            		from: 7,
-                to: 40,
-                color: {
-                    linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
-                    stops: [
-                        [0, 'white'],
-                        [1, 'red']
-                    ]
-                		}
-            }]
         }
       },
-      chartData: [],
+      {
-      chartData_default: [{
+      	from: 7,
-            name: 'Temperature',
+        to: 40,
-            data: [10],
+        color: {
-            tooltip: {
+          linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
-                valueSuffix: '°C'
+          stops: [
-            },
+                        [0, 'white'],
-            dataLabels: { enabled: true }
+                        [1, 'red']
-        },
+          ]
-        {
-        		name: 'Consign',
-        		data: [20],
-        		toltip: {
-            		valueSuffix: '°C'
-            },
-            backgroundColor:"blue",
-            dataLabels: { enabled: false },
-            dial:{
-            	backgroundColor: "red",
-            	rearLength: 0,
-            	baseWidth: 4,
-            	radius: "60%"
-             }
         }
-        ],
+      }]
-    init() {
+    }
+  },
+  chartData: [],
+  chartData_default: [{
+    name: 'Temperature',
+    data: [10],
+    color: 'black',
+    tooltip: {
+      valueSuffix: '°C'
+    },
+    dataLabels: { enabled: true }
+  },
+  {
+  	name: 'Consign',
+  	data: [20],
+    color: 'red',
+  	tooltip: {
+  	   valueSuffix: '°C'
+  },
+    backgroundColor:"blue",
+    dataLabels: { enabled: false },
+    dial:{
+  	  backgroundColor: "red",
+      rearLength: 0,
+    	baseWidth: 4,
+    	radius: "60%"
+    }
+  }
+  ],
+  init() {
     this._super();
     let heater = this.get('heater');
     let chartOptions=this.get('chartOptions');
-    chartOptions[heater.id] = $.extend( true, {}, this.get('chartOptions_default'));
+    chartOptions[heater.id] = jQuery.extend( true, {}, this.get('chartOptions_default'));
-    chartOptions[heater.id].title.text='Temperature '+heater.name;
+    chartOptions[heater.id].title.text = heater.name;
     let chartData=this.get('chartData');
-    chartData[heater.id] = $.extend( true, [], this.get('chartData_default'));
+    chartData[heater.id] = jQuery.extend( true, [], this.get('chartData_default'));
     chartData[heater.id][0].data=[heater.temp];
     chartData[heater.id][1].data=[heater.consign];
+  },
+  setChartDataConsign(heaterId, consign) {
+    let data = this.get('chartData')[heaterId];
+    Ember.set(data[1], "isLoaded", false);
+    data[1].data = [parseInt(consign, 10)];
+    Ember.set(data[1], "isLoaded", true);
   }
 
 });

app/styles/app.css

@@ -0,0 +1,7 @@
+.form-control.input-consign {
+  width: 60px;
+  padding-right: 0;
+}
+.form-consign {
+  text-align: center;
+}

app/templates/components/heater-listview.hbs

@@ -1,8 +1,15 @@
-{{high-charts chartOptions=(get chartOptions (concat heater.id))  content=(get chartData (concat heater.id)) }}
+{{dynamic-high-charts chartOptions=(get chartOptions (concat heater.id))  content=(get chartData (concat heater.id))}}
-<br/>
+
-<form class="form-inline" {{action "formSetConsign" on="submit"}}>
+<form {{action "formSetConsign" on="submit"}} class="form-inline form-consign">
-Consign: {{input value=heater.consign type="number" step="any" maxlength="4"}}
+  <div class="form-group">
-<button class="btn btn-default btn-sm" type="submit">
+      <label>Consign:</label>
-Set
+      {{input value=heater.consign type="number" step="any" class="form-control input-consign"}}
-</button>
+      <button class="btn btn-default btn-sm form-control" disabled={{isSaving}} type="submit">
+        {{#if isSaving}}
+          Saving…
+        {{else}}
+          Set
+        {{/if}}
+      </button>
+  </div>
 </form>