Zakladna migracia na viacej senzorov
This commit is contained in:
346
resources/js/app.js
vendored
346
resources/js/app.js
vendored
@@ -6,7 +6,7 @@
|
||||
|
||||
require('./bootstrap');
|
||||
|
||||
window.Vue = require('vue');
|
||||
import Vue from 'vue';
|
||||
window.moment = require('moment');
|
||||
|
||||
/**
|
||||
@@ -51,203 +51,227 @@ Vue.use(CardPlugin);
|
||||
import { BButton } from 'bootstrap-vue'
|
||||
Vue.component('b-button', BButton);
|
||||
|
||||
import { BFormSelect } from 'bootstrap-vue'
|
||||
Vue.component('b-form-select', BFormSelect)
|
||||
|
||||
import VuePictureSwipe from 'vue-picture-swipe';
|
||||
import { data } from 'jquery';
|
||||
Vue.component('vue-picture-swipe', VuePictureSwipe);
|
||||
|
||||
//(function () {
|
||||
var app = new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
names: { balkon: "balkón", strecha:"strecha", decka: "decká"},
|
||||
tmin: -10,
|
||||
tmax: 50,
|
||||
temperature: null,
|
||||
time: null,
|
||||
startdate: null,
|
||||
enddate: null,
|
||||
date4search: null,
|
||||
host: 'balkon',
|
||||
componentKey: 0,
|
||||
ti: 0, //Tab Index
|
||||
graphShow: [],
|
||||
params: {
|
||||
data: [],
|
||||
border: true,
|
||||
stripe: true
|
||||
},
|
||||
options: {
|
||||
temperature: {
|
||||
legend: 'always',
|
||||
title: 'Teplotný graf',
|
||||
xlabel: 'Dátum',
|
||||
labels: ['Dátum','Teplota'],
|
||||
ylabel: 'Stupeň',
|
||||
fillGraph: true
|
||||
},
|
||||
humidity: {
|
||||
color: 'red',
|
||||
legend: 'always',
|
||||
title: 'Vlhkosť graf',
|
||||
xlabel: 'Dátum',
|
||||
labels: ['Dátum','Vlhkosť'],
|
||||
ylabel: 'Percent',
|
||||
fillGraph: true
|
||||
},
|
||||
pressure: {
|
||||
color: 'blue',
|
||||
legend: 'always',
|
||||
title: 'Tlak graf',
|
||||
xlabel: 'Dátum',
|
||||
labels: ['Dátum','Tlak'],
|
||||
ylabel: 'Tlak',
|
||||
fillGraph: true
|
||||
}
|
||||
},
|
||||
series: { "temperature" : [], "humidity" : [], "pressure": [] },
|
||||
images: { "0": [], "-1": [], "-2": [], "selected": []},
|
||||
cameraimage: "upload/images/camera.jpg",
|
||||
var app = new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
names: { balkon: "balkón", strecha: "strecha", decka: "decká", byt: "byt" },
|
||||
sensormap: [
|
||||
{ model: 'bme280', host: 'balkon', desc: 'Senzor na balkóne', camera: false },
|
||||
{ model: 'bme280', host: 'decka', desc: 'Senzor v detskej izbe', camera: false },
|
||||
{ model: 'bme280', host: 'strecha', desc: 'Senzor na streche', camera: true },
|
||||
{ model: 'LYWSD03MMC', host: 'byt', desc: 'Senzor Xiaomi v byte', camera: false },
|
||||
{ model: 'ThermoBeacon', host: 'byt', desc: 'Senzor Beacon v byte', camera: false }],
|
||||
soptions: [],
|
||||
si: 0, // Sensor index
|
||||
tmin: -10,
|
||||
tmax: 50,
|
||||
temperature: null,
|
||||
time: null,
|
||||
startdate: null,
|
||||
enddate: null,
|
||||
date4search: null,
|
||||
host: 'balkon',
|
||||
model: 'bme280',
|
||||
componentKey: 0,
|
||||
ti: 0, //Tab Index
|
||||
graphShow: [],
|
||||
params: {
|
||||
data: [],
|
||||
border: true,
|
||||
stripe: true
|
||||
},
|
||||
options: {
|
||||
temperature: {
|
||||
legend: 'always',
|
||||
title: 'Teplotný graf',
|
||||
xlabel: 'Dátum',
|
||||
labels: ['Dátum', 'Teplota'],
|
||||
ylabel: 'Stupeň',
|
||||
fillGraph: true
|
||||
},
|
||||
mounted: function () {
|
||||
console.log('MOUNTED');
|
||||
this.getData();
|
||||
var that = this;
|
||||
window.setInterval(function(){
|
||||
console.log("TIMER");
|
||||
that.getData();
|
||||
}, 300000);
|
||||
|
||||
humidity: {
|
||||
color: 'red',
|
||||
legend: 'always',
|
||||
title: 'Vlhkosť graf',
|
||||
xlabel: 'Dátum',
|
||||
labels: ['Dátum', 'Vlhkosť'],
|
||||
ylabel: 'Percent',
|
||||
fillGraph: true
|
||||
},
|
||||
pressure: {
|
||||
color: 'blue',
|
||||
legend: 'always',
|
||||
title: 'Tlak graf',
|
||||
xlabel: 'Dátum',
|
||||
labels: ['Dátum', 'Tlak'],
|
||||
ylabel: 'Tlak',
|
||||
fillGraph: true
|
||||
}
|
||||
},
|
||||
series: { "temperature": [], "humidity": [], "pressure": [] },
|
||||
images: { "0": [], "-1": [], "-2": [], "selected": [] },
|
||||
cameraimage: "upload/images/camera.jpg",
|
||||
},
|
||||
mounted: function () {
|
||||
console.log('MOUNTED');
|
||||
|
||||
for (var i in this.sensormap) {
|
||||
this.soptions.push({ value: i, text: this.sensormap[i].desc});
|
||||
}
|
||||
|
||||
methods: {
|
||||
trigger: function () {
|
||||
app.$refs.ps.$el.click();
|
||||
},
|
||||
displayResults: function () {
|
||||
this.getData();
|
||||
},
|
||||
sethost: function (host) {
|
||||
this.host = host;
|
||||
this.getData();
|
||||
console.log(host);
|
||||
},
|
||||
resizeGraph: function (i) {
|
||||
console.log("RESIZE");
|
||||
let index = "dg[" + i + "]";
|
||||
console.log('Change tab:',i);
|
||||
this.$nextTick(() => {
|
||||
app.$refs[index]._data._graph.resize();
|
||||
});
|
||||
console.log('OPTIONS',this.soptions);
|
||||
|
||||
},
|
||||
getImagesForDate: function () {
|
||||
axios.get('/images/get', {
|
||||
params: {
|
||||
date: this.date4search
|
||||
}
|
||||
})
|
||||
.then(function (response) {
|
||||
console.log("GET DATA Images Selected");
|
||||
console.log(response.data);
|
||||
app.images["selected"] = response.data;
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
|
||||
},
|
||||
getData: function () {
|
||||
this.getData();
|
||||
var that = this;
|
||||
window.setInterval(function () {
|
||||
console.log("TIMER");
|
||||
that.getData();
|
||||
}, 300000);
|
||||
|
||||
axios.get('/data', {
|
||||
params: {
|
||||
host: this.host
|
||||
}
|
||||
})
|
||||
.then(function (response) {
|
||||
console.log("GET DATA");
|
||||
console.log(response.data.temperature);
|
||||
let data = app.params.data = [];
|
||||
data.push(['Teplota',response.data.temperature,'°C']);
|
||||
data.push(['Vlhkosť',response.data.humidity,'%']);
|
||||
data.push(['Tlak',response.data.pressure,'kHPa']);
|
||||
data.push(['Napätie',response.data.voltage,'V']);
|
||||
moment.locale('sk_SK');
|
||||
app.time = moment(response.data.time).format('LLL');
|
||||
app.temperature = response.data.temperature;
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
|
||||
axios.get('/images/get', {
|
||||
params: {
|
||||
date: "0"
|
||||
}
|
||||
})
|
||||
.then(function (response) {
|
||||
console.log("GET DATA Images 0");
|
||||
console.log(response.data);
|
||||
app.images["0"] = response.data;
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
methods: {
|
||||
trigger: function () {
|
||||
app.$refs.ps.$el.click();
|
||||
},
|
||||
displayResults: function () {
|
||||
this.getData();
|
||||
},
|
||||
sethost: function (i) {
|
||||
this.host = this.sensormap[i].host;
|
||||
this.model = this.sensormap[i].model;
|
||||
|
||||
axios.get('/images/get', {
|
||||
params: {
|
||||
date: "-1"
|
||||
}
|
||||
})
|
||||
console.log('GET =',this.host,this.model);
|
||||
this.getData();
|
||||
},
|
||||
resizeGraph: function (i) {
|
||||
console.log("RESIZE");
|
||||
let index = "dg[" + i + "]";
|
||||
console.log('Change tab:', i);
|
||||
this.$nextTick(() => {
|
||||
app.$refs[index]._data._graph.resize();
|
||||
});
|
||||
|
||||
},
|
||||
getImagesForDate: function () {
|
||||
axios.get('/images/get', {
|
||||
params: {
|
||||
date: this.date4search
|
||||
}
|
||||
})
|
||||
.then(function (response) {
|
||||
console.log("GET DATA Images -1");
|
||||
console.log(response.data);
|
||||
app.images["-1"] = response.data;
|
||||
console.log("GET DATA Images Selected");
|
||||
console.log(response.data);
|
||||
app.images["selected"] = response.data;
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
console.log(error);
|
||||
});
|
||||
|
||||
axios.get('/images/get', {
|
||||
params: {
|
||||
date: "-2"
|
||||
}
|
||||
})
|
||||
},
|
||||
getData: function () {
|
||||
|
||||
axios.get('/data', {
|
||||
params: {
|
||||
host: this.host,
|
||||
model: this.model
|
||||
}
|
||||
})
|
||||
.then(function (response) {
|
||||
console.log("GET DATA Images -2");
|
||||
console.log(response.data);
|
||||
app.images["-2"] = response.data;
|
||||
console.log("GET DATA");
|
||||
console.log(response.data.temperature);
|
||||
let data = app.params.data = [];
|
||||
data.push(['Teplota', response.data.temperature, '°C']);
|
||||
data.push(['Vlhkosť', response.data.humidity, '%']);
|
||||
data.push(['Tlak', response.data.pressure, 'kHPa']);
|
||||
data.push(['Napätie', response.data.voltage, 'V']);
|
||||
moment.locale('sk_SK');
|
||||
app.time = moment(response.data.time).format('LLL');
|
||||
app.temperature = response.data.temperature;
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
console.log(error);
|
||||
});
|
||||
|
||||
let vts = ["temperature","humidity","pressure"];
|
||||
axios.get('/images/get', {
|
||||
params: {
|
||||
date: "0"
|
||||
}
|
||||
})
|
||||
.then(function (response) {
|
||||
console.log("GET DATA Images 0");
|
||||
console.log(response.data);
|
||||
app.images["0"] = response.data;
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
|
||||
axios.get('/images/get', {
|
||||
params: {
|
||||
date: "-1"
|
||||
}
|
||||
})
|
||||
.then(function (response) {
|
||||
console.log("GET DATA Images -1");
|
||||
console.log(response.data);
|
||||
app.images["-1"] = response.data;
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
|
||||
axios.get('/images/get', {
|
||||
params: {
|
||||
date: "-2"
|
||||
}
|
||||
})
|
||||
.then(function (response) {
|
||||
console.log("GET DATA Images -2");
|
||||
console.log(response.data);
|
||||
app.images["-2"] = response.data;
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
|
||||
let vts = ["temperature", "humidity", "pressure"];
|
||||
for (var t in vts) {
|
||||
console.log("t=",vts[t]);
|
||||
console.log("t=", vts[t]);
|
||||
axios.get('/data/get', {
|
||||
params: {
|
||||
type: vts[t],
|
||||
startdate: this.startdate,
|
||||
enddate: this.enddate,
|
||||
host: this.host
|
||||
host: this.host,
|
||||
model: this.model
|
||||
}
|
||||
})
|
||||
.then(function (response) {
|
||||
.then(function (response) {
|
||||
console.log("GET DATA");
|
||||
console.log(response.config.params.type);
|
||||
let data = response.data.map( x => [moment(x[0]).toDate(),x[1]] );
|
||||
let data = response.data.map(x => [moment(x[0]).toDate(), x[1]]);
|
||||
app.series[response.config.params.type] = data;
|
||||
app.componentKey += 1;
|
||||
})
|
||||
.catch(function (error) {
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
console.log('new image source');
|
||||
this.cameraimage = "upload/images/camera.jpg?" + moment().format('YYYYMMDD-HHmm');
|
||||
this.cameraimage = "upload/images/camera.jpg?" + moment().format('YYYYMMDD-HHmm');
|
||||
|
||||
},
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
// })();
|
||||
|
||||
Reference in New Issue
Block a user