diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 0000000..3c076e6
--- /dev/null
+++ b/.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
+ }
+}
diff --git a/app/components/dynamic-high-charts.js b/app/components/dynamic-high-charts.js
new file mode 100644
index 0000000..08a92d7
--- /dev/null
+++ b/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();
+ })
+
+});
diff --git a/app/components/heater-listview.js b/app/components/heater-listview.js
index 2ae48f6..8ed1fb4 100644
--- a/app/components/heater-listview.js
+++ b/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",
- body: data,
- headers: headers
- }).then(function(response) {
- if(response.ok) {
- console.debug("Requete OK");
- }});
+ { method: "PUT",
+ body: data,
+ headers: headers
+ }).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
chartOptions: [],
chartOptions_default: {
chart: {
- type: 'gauge',
- plotBackgroundColor: null,
- plotBackgroundImage: null,
- plotBorderWidth: 0,
- plotShadow: false
+ 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']
+ ]
},
-
- 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: [
+ 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: [
+ 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%"
- }
+ {
+ from: 7,
+ to: 40,
+ color: {
+ linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
+ stops: [
+ [0, 'white'],
+ [1, 'red']
+ ]
}
- ],
- 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].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);
}
});
diff --git a/app/styles/app.css b/app/styles/app.css
index e69de29..fc8035d 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -0,0 +1,7 @@
+.form-control.input-consign {
+ width: 60px;
+ padding-right: 0;
+}
+.form-consign {
+ text-align: center;
+}
diff --git a/app/templates/components/heater-listview.hbs b/app/templates/components/heater-listview.hbs
index 5cd81a2..0eda929 100644
--- a/app/templates/components/heater-listview.hbs
+++ b/app/templates/components/heater-listview.hbs
@@ -1,8 +1,15 @@
-{{high-charts chartOptions=(get chartOptions (concat heater.id)) content=(get chartData (concat heater.id)) }}
-
-