fontawesome pridane, zobrazenie intervalu

app/Http/Controllers/MeasurementController.php

@@ -18,15 +18,24 @@ class MeasurementController extends Controller
         $types = ['temperature','humidity','pressure'];
 
         $type = $request->input('type', $types[0]);
+        $startdate = $request->input('startdate',NULL);
+        $enddate = $request->input('enddate',NULL);
         if (!in_array($type,$types)) $type = $types[0];
+        if ($startdate == NULL || $startdate == '') $startdate = "now()-1d";
+        else $startdate = sprintf("'%s'",Carbon::parse($startdate)->toDateTimeString());
 
-        $q = sprintf("select time,value from bme280_value where host='balkon' and type='%s' and time > now()-1d",$type);
+        if ($enddate == NULL || $enddate == '') $enddate = "now()";
+        else $enddate = sprintf("'%s'",Carbon::parse($enddate)->toDateTimeString());
+
+        $q = sprintf("select time,value from bme280_value where host='balkon' and type='%s' and time >= %s and time <= %s",$type,$startdate,$enddate);
+        \Debugbar::info($q);
         $result = \InfluxDB::query($q);
         $points = $result->getPoints();
         $a = [];
         foreach ($points as $p) {
             $a[] = [ Carbon::createFromFormat("Y-m-d\TH:i:s.u+",$p["time"],'UTC'), $p["value"]];
         }
+
         return response()->json($a);
     }
     /**

package.json

@@ -24,9 +24,14 @@
         "vue-template-compiler": "^2.6.10"
     },
     "dependencies": {
+        "@fortawesome/fontawesome-free": "^5.15.1",
+        "font-awesome": "^4.7.0",
+        "luxon": "^1.25.0",
         "moment": "^2.29.1",
+        "vue-datetime": "^1.0.0-beta.14",
         "vue-dygraphs": "^0.1.2",
         "vue-table-dynamic": "^0.4.1",
-        "vuejs-thermometer": "^0.1.3"
+        "vuejs-thermometer": "^0.1.3",
+        "weekstart": "^1.0.1"
     }
 }

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>

yarn.lock

@@ -823,6 +823,11 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
+"@fortawesome/fontawesome-free@^5.15.1":
+  version "5.15.1"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.1.tgz#ccfef6ddbe59f8fe8f694783e1d3eb88902dc5eb"
+  integrity sha512-OEdH7SyC1suTdhBGW91/zBfR6qaIhThbcN8PUXtXilY4GYnSBbVqOntdHbC1vXwsDnX0Qix2m2+DSU1J51ybOQ==
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -3029,6 +3034,11 @@ follow-redirects@^1.0.0:
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.1.tgz#5f69b813376cee4fd0474a3aba835df04ab763b7"
   integrity sha512-SSG5xmZh1mkPGyKzjZP8zLjltIfpW32Y5QpdNJyjcfGxK3qo3NDDkZOZSFiGn1A6SclQxY9GzEwAHQ3dmYRWpg==
 
+font-awesome@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133"
+  integrity sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM=
+
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -4262,6 +4272,11 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+luxon@^1.25.0:
+  version "1.25.0"
+  resolved "https://registry.yarnpkg.com/luxon/-/luxon-1.25.0.tgz#d86219e90bc0102c0eb299d65b2f5e95efe1fe72"
+  integrity sha512-hEgLurSH8kQRjY6i4YLey+mcKVAWXbDNlZRmM6AgWDJ1cY3atl8Ztf5wEY7VBReFbmGnwQPz7KYJblL8B2k0jQ==
+
 make-dir@^1.0.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c"
@@ -6748,6 +6763,11 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+vue-datetime@^1.0.0-beta.14:
+  version "1.0.0-beta.14"
+  resolved "https://registry.yarnpkg.com/vue-datetime/-/vue-datetime-1.0.0-beta.14.tgz#791e724500929cdfeb31395154d9a26fd27ffb46"
+  integrity sha512-n25LqldE1xryeoweohiqlxy8iUsi+UwZnKLaN4gXjk7xxGL6rUl1y/GGvkoMwJUzRKttw+QnQV4oFAYupUQdug==
+
 vue-dygraphs@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/vue-dygraphs/-/vue-dygraphs-0.1.2.tgz#a812bd4156242bfc5539ce84e74b836176a30f67"
@@ -6984,6 +7004,11 @@ websocket-extensions@>=0.1.1:
   resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.4.tgz#7f8473bc839dfd87608adb95d7eb075211578a42"
   integrity sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==
 
+weekstart@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/weekstart/-/weekstart-1.0.1.tgz#950970b48e5797e06fc1a762f3d0f013312321e1"
+  integrity sha512-h6B1HSJxg7sZEXqIpDqAtwiDBp3x5y2jY8WYcUSBhLTcTCy7laQzBmamqMuQM5fpvo1pgpma0OCRpE2W8xrA9A==
+
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"