fontawesome pridane, zobrazenie intervalu

resources/js/app.js

@@ -37,6 +37,10 @@ Vue.use(VueDygraphs);
 import VueTableDynamic from 'vue-table-dynamic'
 Vue.use(VueTableDynamic);
 
+import Datetime from 'vue-datetime'
+Vue.use(Datetime);
+
+
 //(function () {
     var app = new Vue({
       el: '#app',
@@ -44,10 +48,9 @@ Vue.use(VueTableDynamic);
         tmin: -10,
         tmax: 50,
         temperature: 0,
-        humidity: null,
-        pressure: null,
-        voltage: null,
         time: null,
+        startdate: null,
+        enddate: null,
         params: {
           data: [],     
           border: true,
@@ -95,6 +98,9 @@ Vue.use(VueTableDynamic);
       },
 
       methods: {
+        displayResults: function () {
+          this.getData();
+        },
         getData: function () {
 
         axios.get('/data', {
@@ -111,6 +117,7 @@ Vue.use(VueTableDynamic);
             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);
@@ -122,6 +129,8 @@ Vue.use(VueTableDynamic);
         axios.get('/data/get', {
           params: {
             type: vts[t],
+            startdate: this.startdate,
+            enddate: this.enddate
           }
         })
         .then(function (response) {

resources/sass/app.scss

@@ -9,3 +9,8 @@
 
 // dyGraphs
 @import '~dygraphs/dist/dygraph';
+
+@import '~vue-datetime/dist/vue-datetime';
+
+@import '~font-awesome/scss/font-awesome';
+

resources/views/welcome.blade.php

@@ -96,8 +96,31 @@
                             <ul>
                                 <li>Čas: @{{time}}</li>
                             </ul>
+                            <div class="row justify-content-center">
+                                <div class="form-group col-sm-6">
+                                    <div class='input-group time' id='datetimepicker1'>
+                                        <datetime type="datetime" input-class="form-control" placeholder="Od" v-model="startdate"></datetime>    
+                                        <span class="input-group-append">
+                                            <span class="input-group-text"><i class="fa fa-calendar"></i></span>
+                                        </span>       
+                                    </div>
+                                </div>
+        
+                                <div class="form-group col-sm-6">
+                                    <div class='input-group time' id='datetimepicker2'>
+                                        <datetime type="datetime" input-class="form-control" placeholder="Do" v-model="enddate"></datetime>
+                                        <span class="input-group-append">
+                                            <span class="input-group-text"><i class="fa fa-calendar"></i></span>
+                                        </span>
+                                        <span class="input-group-append">
+                                            <button v-on:click="displayResults()" type="button" class="btn btn-secondary">Zobraz</button>
+                                        </span>          
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                     </div>
+                    
                     <dygraphs ref="dgt" :graph-data="series['temperature']" :graph-options="options['temperature']"></dygraphs>
                     <dygraphs ref="dgh" :graph-data="series['humidity']" :graph-options="options['humidity']"></dygraphs>
                     <dygraphs ref="dgp" :graph-data="series['pressure']" :graph-options="options['pressure']"></dygraphs>