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,26 +1,39 @@
 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",
           body: data,
           headers: headers
-      }).then(function(response) {
-      if(response.ok) {
+        }).then((response) => {
+          if (response.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
@@ -33,11 +46,9 @@ export default Ember.Component.extend({
       plotBorderWidth: 0,
       plotShadow: false
     },
-
     title: {
       text: 'Temperature'
     },
-
     pane: {
       startAngle: -150,
       endAngle: 150,
@@ -51,7 +62,8 @@ export default Ember.Component.extend({
         },
         borderWidth: 0,
         outerRadius: '109%'
-            }, {
+      },
+      {
         backgroundColor: {
           linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
           stops: [
@@ -61,27 +73,26 @@ export default Ember.Component.extend({
         },
         borderWidth: 1,
         outerRadius: '107%'
-            }, {
+      },
+      {
                 // default background
-            }, {
+      },
+      {
         backgroundColor: '#DDD',
         borderWidth: 0,
         outerRadius: '105%',
         innerRadius: '103%'
       }]
     },
-
     // the value axis
     yAxis: {
       min: -10,
       max: 40,
-
       minorTickInterval: 'auto',
       minorTickWidth: 1,
       minorTickLength: 10,
       minorTickPosition: 'inside',
       minorTickColor: '#666',
-
       tickPixelInterval: 30,
       tickWidth: 2,
       tickPosition: 'inside',
@@ -122,6 +133,7 @@ export default Ember.Component.extend({
   chartData_default: [{
     name: 'Temperature',
     data: [10],
+    color: 'black',
     tooltip: {
       valueSuffix: '°C'
     },
@@ -130,7 +142,8 @@ export default Ember.Component.extend({
   {
   	name: 'Consign',
   	data: [20],
-        		toltip: {
+    color: 'red',
+  	tooltip: {
   	   valueSuffix: '°C'
   },
     backgroundColor:"blue",
@@ -147,12 +160,18 @@ export default Ember.Component.extend({
     this._super();
     let heater = this.get('heater');
     let chartOptions=this.get('chartOptions');
-    chartOptions[heater.id] = $.extend( true, {}, this.get('chartOptions_default'));
-    chartOptions[heater.id].title.text='Temperature '+heater.name;
+    chartOptions[heater.id] = jQuery.extend( true, {}, this.get('chartOptions_default'));
+    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)) }}
-<br/>
-<form class="form-inline" {{action "formSetConsign" on="submit"}}>
-Consign: {{input value=heater.consign type="number" step="any" maxlength="4"}}
-<button class="btn btn-default btn-sm" type="submit">
-Set
-</button>
+{{dynamic-high-charts chartOptions=(get chartOptions (concat heater.id))  content=(get chartData (concat heater.id))}}
+
+<form {{action "formSetConsign" on="submit"}} class="form-inline form-consign">
+  <div class="form-group">
+      <label>Consign:</label>
+      {{input value=heater.consign type="number" step="any" class="form-control input-consign"}}
+      <button class="btn btn-default btn-sm form-control" disabled={{isSaving}} type="submit">
+        {{#if isSaving}}
+          Saving…
+        {{else}}
+          Set
+        {{/if}}
+      </button>
+  </div>
 </form>