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');

window.Vue = require('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 VuePictureSwipe from 'vue-picture-swipe';
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": []},
      },
      mounted: function () {
        console.log('MOUNTED');
        this.getData();
        var that = this;
        window.setInterval(function(){ 
          console.log("TIMER");
          that.getData();
        }, 300000); 
        
      },

      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();
          });

        },
        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
          }
        })
        .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
          }
        })
        .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]] );
            app.series[response.config.params.type] = data;
            app.componentKey += 1;
        })
        .catch(function (error) {
            console.log(error);
        });
      }

      },
    }

    });
//  })();