meranie/resources/js/app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

import Vue from 'vue';
window.moment = require('moment');

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

import VueThermometer from 'vuejs-thermometer'
Vue.use(VueThermometer);

import VueDygraphs from 'vue-dygraphs';
Vue.use(VueDygraphs);

import VueTableDynamic from 'vue-table-dynamic'
Vue.use(VueTableDynamic);

import Datetime from 'vue-datetime'
Vue.use(Datetime);

Vue.component('stats-table', require('./components/StatisticsComponent.vue').default);

import { TabsPlugin } from 'bootstrap-vue'
Vue.use(TabsPlugin);

import { CardPlugin } from 'bootstrap-vue'
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: "detská", 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 + kamera', 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
      },
      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});
    }

    console.log('OPTIONS',this.soptions);

    this.getData();
    var that = this;
    window.setInterval(function () {
      console.log("TIMER");
      that.getData(); // ZOPTIALIZOVAT ABY BRAL IBA NOVE DATA
    }, 300000);

  },

  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;
      
      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 Selected");
          console.log(response.data);
          app.images["selected"] = response.data;
        })
        .catch(function (error) {
          console.log(error);
        });

    },
    getData: function () {

      axios.get('/data', {
        params: {
          host: this.host,
          model: this.model
        }
      })
        .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);
        });

      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]);
        axios.get('/data/get', {
          params: {
            type: vts[t],
            startdate: this.startdate,
            enddate: this.enddate,
            host: this.host,
            model: this.model
          }
        })
          .then(function (response) {
            console.log("GET DATA = ",response.config.params.type);
            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) {
            console.log(error);
          });
      };

      console.log('new image source');
      this.cameraimage = "upload/images/camera.jpg?" + moment().format('YYYYMMDD-HHmm');

    },
  }

});
//  })();