First import of a somehow working app

.gitignore

@@ -1,5 +1,8 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
+# credencials
+config/environment.js
+
 # compiled output
 /dist
 /tmp

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}}

bower.json

@@ -2,6 +2,7 @@
   "name": "domember",
   "dependencies": {
     "ember": "~2.9.0",
-    "ember-cli-shims": "0.1.3"
+    "ember-cli-shims": "0.1.3",
+    "bootstrap": "~3.3.5"
   }
 }

config/environment.js.sample

@@ -0,0 +1,53 @@
+/* jshint node: true */
+
+module.exports = function(environment) {
+  var ENV = {
+    modulePrefix: 'domember',
+    environment: environment,
+    rootURL: '/',
+    locationType: 'auto',
+    EmberENV: {
+      FEATURES: {
+        // Here you can enable experimental features on an ember canary build
+        // e.g. 'with-controller': true
+      },
+      EXTEND_PROTOTYPES: {
+        // Prevent Ember Data from overriding Date.parse.
+        Date: false
+      }
+    },
+
+    APP: {
+      // Here you can pass flags/options to your application instance
+      // when it is created
+    }
+  };
+
+  if (environment === 'development') {
+    // ENV.APP.LOG_RESOLVER = true;
+    // ENV.APP.LOG_ACTIVE_GENERATION = true;
+    // ENV.APP.LOG_TRANSITIONS = true;
+    // ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
+    // ENV.APP.LOG_VIEW_LOOKUPS = true;
+    ENV.api = 'http://A.B.C.D:9292/api';
+    ENV.apiAuth = '';
+  }
+
+  if (environment === 'test') {
+    // Testem prefers this...
+    ENV.locationType = 'none';
+
+    // keep test console output quieter
+    ENV.APP.LOG_ACTIVE_GENERATION = false;
+    ENV.APP.LOG_VIEW_LOOKUPS = false;
+
+    ENV.APP.rootElement = '#ember-testing';
+  }
+
+  if (environment === 'production') {
+    ENV.api = 'https://dom.mydomain.com/api';
+    ENV.apiAuth = "Basic skjfqlksjfqlfj";
+  }
+
+  return ENV;
+};

ember-cli-build.js

@@ -4,6 +4,10 @@ var EmberApp = require('ember-cli/lib/broccoli/ember-app');
 
 module.exports = function(defaults) {
   var app = new EmberApp(defaults, {
+    emberHighCharts: {
+      includeHighCharts: true,
+      includeHighChartsMore: true,
+    }
     // Add options here
   });
 

package.json

@@ -21,6 +21,7 @@
   "devDependencies": {
     "broccoli-asset-rev": "^2.4.5",
     "ember-ajax": "^2.4.1",
+    "ember-bootstrap": "0.11.2",
     "ember-cli": "2.9.1",
     "ember-cli-app-version": "^2.0.0",
     "ember-cli-babel": "^5.1.7",
@@ -36,9 +37,14 @@
     "ember-cli-uglify": "^1.2.0",
     "ember-data": "^2.9.0",
     "ember-export-application-global": "^1.0.5",
+    "ember-highcharts": "0.5.0",
     "ember-load-initializers": "^0.5.1",
     "ember-resolver": "^2.0.3",
     "ember-welcome-page": "^1.0.3",
+    "highcharts": "5.0.3",
     "loader.js": "^4.0.10"
+  },
+  "dependencies": {
+    "highcharts": "^5.0.3"
   }
 }

tests/integration/components/heater-listview-test.js

@@ -0,0 +1,24 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('heater-listview', 'Integration | Component | heater listview', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{heater-listview}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#heater-listview}}
+      template block text
+    {{/heater-listview}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});

tests/unit/routes/heaters-test.js

@@ -0,0 +1,11 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('route:heaters', 'Unit | Route | heaters', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+test('it exists', function(assert) {
+  let route = this.subject();
+  assert.ok(route);
+});