First import of a somehow working app

app/components/heater-listview.js

@@ -0,0 +1,158 @@
+import Ember from 'ember';
+import config from '../config/environment';
+
+export default Ember.Component.extend({
+  classNames: ['col-md-4'],
+  heater: null,
+  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 !== ''){
+        headers.Authorization = config.apiAuth;
+      } 
+      fetch(config.api+"/effectors/heaters/"+id,
+      { method: "PUT", 
+        body: data,
+        headers: headers 
+      }).then(function(response) {
+      if(response.ok) {
+        console.debug("Requete OK");
+      }});
+    },
+  },
+  // defining graph
+  chartOptions: [],
+  chartOptions_default: {
+    chart: {
+            type: 'gauge',
+            plotBackgroundColor: null,
+            plotBackgroundImage: null,
+            plotBorderWidth: 0,
+            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,
+                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%'
+            }]
+        },
+
+        // the value axis
+        yAxis: {
+            min: -10,
+            max: 40,
+
+            minorTickInterval: 'auto',
+            minorTickWidth: 1,
+            minorTickLength: 10,
+            minorTickPosition: 'inside',
+            minorTickColor: '#666',
+
+            tickPixelInterval: 30,
+            tickWidth: 2,
+            tickPosition: 'inside',
+            tickLength: 10,
+            tickColor: '#666',
+            labels: {
+                step: 2,
+                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: [{
+            name: 'Temperature',
+            data: [10],
+            tooltip: {
+                valueSuffix: '°C'
+            },
+            dataLabels: { enabled: true }
+        },
+        {
+        		name: 'Consign',
+        		data: [20],
+        		toltip: {
+            		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].title.text='Temperature '+heater.name;
+    let chartData=this.get('chartData');
+    chartData[heater.id] = $.extend( true, [], this.get('chartData_default'));
+    chartData[heater.id][0].data=[heater.temp];
+    chartData[heater.id][1].data=[heater.consign];
+  }
+
+});

app/router.js

@@ -7,6 +7,7 @@ const Router = Ember.Router.extend({
 });
 
 Router.map(function() {
+  this.route('heaters');
 });
 
 export default Router;

app/routes/heaters.js

@@ -0,0 +1,9 @@
+import Ember from 'ember';
+import config from '../config/environment';
+
+export default Ember.Route.extend({
+  model() {
+    //return [{"id":1,"name":"Chauffage Salon","consign":9.0,"pins":[0,1],"temp":15.625,"temp_probe":2},{"id":2,"name":"Chauffage Chambre 1","consign":7.0,"pins":[2,3],"temp":14.937,"temp_probe":1}]
+    return Ember.$.getJSON(config.api+'/effectors/heaters.json');
+  }
+});

app/templates/application.hbs

@@ -0,0 +1,3 @@
+<h1>Domember</h1>
+
+{{outlet}}

app/templates/components/heater-listview.hbs

@@ -0,0 +1,8 @@
+{{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>
+</form>

app/templates/heaters.hbs

@@ -0,0 +1,9 @@
+<h2>List of Heaters</h2>
+<div class="container-fluid">
+<div class="row">
+{{#each model as |heater|}}
+{{heater-listview title=heater.id heater=heater}}
+{{/each}}
+</div>
+</div>
+{{outlet}}