177 lines
4.2 KiB
JavaScript
177 lines
4.2 KiB
JavaScript
import Ember from 'ember';
|
|
import config from '../config/environment';
|
|
import jQuery from 'jquery';
|
|
|
|
export default Ember.Component.extend({
|
|
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"};
|
|
|
|
this.set("isSaving", true);
|
|
|
|
if (config.apiAuth !== '') {
|
|
headers.Authorization = config.apiAuth;
|
|
}
|
|
fetch(config.api+"/effectors/heaters/"+id,
|
|
{ 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
|
|
},
|
|
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],
|
|
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] = jQuery.extend( true, {}, this.get('chartOptions_default'));
|
|
chartOptions[heater.id].title.text = heater.name;
|
|
let chartData=this.get('chartData');
|
|
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);
|
|
}
|
|
|
|
});
|