Zakladna migracia na viacej senzorov

app/Http/Controllers/MeasurementController.php

@@ -21,6 +21,10 @@ class MeasurementController extends Controller
         $startdate = $request->input('startdate',NULL);
         $enddate = $request->input('enddate',NULL);
         $host = $request->input('host','balkon');
+        $model = $request->input('model','bme280');
+
+        if (preg_match("/^[a-zA-Z0-9_]+/", $model) == 0) $model = 'bme280';
+        
         if (!in_array($type,$types)) $type = $types[0];
         if ($startdate == NULL || $startdate == '') $startdate = "now()-1d";
         else $startdate = sprintf("'%s'",Carbon::parse($startdate)->toDateTimeString());
@@ -28,7 +32,7 @@ class MeasurementController extends Controller
         if ($enddate == NULL || $enddate == '') $enddate = "now()";
         else $enddate = sprintf("'%s'",Carbon::parse($enddate)->toDateTimeString());
 
-        $q = sprintf("select time,value from bme280_value where host='%s' and type='%s' and time >= %s and time <= %s",$host,$type,$startdate,$enddate);
+        $q = sprintf("select time,value from %s_value where host='%s' and type='%s' and time >= %s and time <= %s",$model,$host,$type,$startdate,$enddate);
         \Debugbar::info($q);
         $result = \InfluxDB::query($q);
         $points = $result->getPoints();
@@ -49,8 +53,13 @@ class MeasurementController extends Controller
         // for t in ('temperature','humidity','pressure')
         $a = [];
         $host = $request->input('host','balkon');
+        $model = $request->input('model','bme280');
+    
+        if (preg_match("/^[a-zA-Z0-9_]+/", $model) == 0) $model = 'bme280';
+        
+
         foreach (['temperature','humidity','pressure'] as $type) {
-            $q = sprintf("select * from bme280_value where host='%s' and type='%s' order by time desc limit 1",$host,$type);
+            $q = sprintf("select * from %s_value where host='%s' and type='%s' order by time desc limit 1",$model,$host,$type);
             $result = \InfluxDB::query($q);
             $points = $result->getPoints();
             foreach ($points as $p) {
@@ -58,7 +67,7 @@ class MeasurementController extends Controller
                 $a["time"] = Carbon::createFromFormat("Y-m-d\TH:i:s.u+",$p["time"],'UTC')->toATOMString();
             }
         }
-        $q = sprintf("select * from esp32_value where host='%s' and type='voltage' order by time desc limit 1",$host,$type);
+        $q = sprintf("select * from %s_value where host='%s' and type='voltage' order by time desc limit 1",$model,$host,$type);
         $result = \InfluxDB::query($q);
         $points = $result->getPoints();
         foreach ($points as $p) {

app/Http/Controllers/StatisticsController.php

@@ -21,6 +21,10 @@ class StatisticsController extends Controller
         $enddate = $request->input('enddate',NULL);
         $range = $request->input('range',NULL);
         $host = $request->input('host','balkon');
+        $model = $request->input('model','bme280');
+
+        if (preg_match("/^[a-zA-Z0-9_]+/", $model) == 0) $model = 'bme280';
+
         if (!in_array($type,$types)) $type = $types[0];
         if ($startdate == NULL || $startdate == '') $startdate = "now()-1d";
         else $startdate = sprintf("'%s'",Carbon::parse($startdate)->toDateTimeString());
@@ -35,7 +39,7 @@ class StatisticsController extends Controller
             }
         }
 
-        $q = sprintf("select time,min(value),max(value),mean(value),last(value) from bme280_value where host='%s' and type='%s' and time >= %s and time <= %s group by time(%s);",$host,$type,$startdate,$enddate,$range);
+        $q = sprintf("select time,min(value),max(value),mean(value),last(value) from %s_value where host='%s' and type='%s' and time >= %s and time <= %s group by time(%s);",$model,$host,$type,$startdate,$enddate,$range);
         \Debugbar::info($q);
         $result = \InfluxDB::query($q);
         $points = $result->getPoints();

package.json

@@ -2,26 +2,27 @@
     "private": true,
     "scripts": {
         "dev": "npm run development",
-        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "development": "mix",
-        "watch": "npm run development -- --watch",
+        "watch": "mix watch",
-        "watch-poll": "npm run watch -- --watch-poll",
+        "watch-poll": "mix watch -- --watch-options-poll=1000",
-        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "hot": "mix watch --hot",
         "prod": "npm run production",
-        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
+        "production": "mix --production"
     },
     "devDependencies": {
-        "axios": "^0.19",
+        "axios": "^0.21",
-        "bootstrap": "^4.0.0",
+        "bootstrap": "^4.6.0",
-        "cross-env": "^7.0",
+        "jquery": "^1.9.1",
-        "jquery": "^3.2",
+        "laravel-mix": "^6.0.6",
-        "laravel-mix": "^5.0.1",
         "lodash": "^4.17.19",
-        "popper.js": "^1.12",
+        "popper.js": "^1.16.1",
-        "resolve-url-loader": "^2.3.1",
+        "postcss": "^8.1.14",
-        "sass": "^1.20.1",
+        "resolve-url-loader": "^3.1.2",
-        "sass-loader": "^8.0.0",
+        "sass": "^1.32.5",
-        "vue": "^2.5.17",
+        "sass-loader": "^10.1.1",
-        "vue-template-compiler": "^2.6.10"
+        "vue": "^2.6.12",
+        "vue-loader": "^15.10.0",
+        "vue-template-compiler": "^2.6.12"
     },
     "dependencies": {
         "bootstrap-vue": "^2.21.2",

public/js/app.js.LICENSE.txt

@@ -1,38 +1,38 @@
 /*!
-  * Bootstrap v4.5.3 (https://getbootstrap.com/)
+  * Bootstrap v4.6.2 (https://getbootstrap.com/)
-  * Copyright 2011-2020 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
+  * Copyright 2011-2022 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
   */
 
 /*!
- * Sizzle CSS Selector Engine v2.3.5
+ * Sizzle CSS Selector Engine v2.2.1
- * https://sizzlejs.com/
+ * http://sizzlejs.com/
  *
- * Copyright JS Foundation and other contributors
+ * Copyright jQuery Foundation and other contributors
  * Released under the MIT license
- * https://js.foundation/
+ * http://jquery.org/license
  *
- * Date: 2020-03-14
+ * Date: 2015-10-17
  */
 
 /*!
- * Vue.js v2.6.12
+ * Vue.js v2.7.13
- * (c) 2014-2020 Evan You
+ * (c) 2014-2022 Evan You
  * Released under the MIT License.
  */
 
 /*!
- * jQuery JavaScript Library v3.5.1
+ * jQuery JavaScript Library v1.12.4
- * https://jquery.com/
+ * http://jquery.com/
  *
  * Includes Sizzle.js
- * https://sizzlejs.com/
+ * http://sizzlejs.com/
  *
- * Copyright JS Foundation and other contributors
+ * Copyright jQuery Foundation and other contributors
  * Released under the MIT license
- * https://jquery.org/license
+ * http://jquery.org/license
  *
- * Date: 2020-05-04T22:49Z
+ * Date: 2016-05-20T17:17Z
  */
 
 /*!

resources/js/app.js

@@ -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({
+var app = new Vue({
-      el: '#app',
+  el: '#app',
-      data: {
+  data: {
-        names: { balkon: "balkón", strecha:"strecha", decka: "decká"},
+    names: { balkon: "balkón", strecha: "strecha", decka: "decká", byt: "byt" },
-        tmin: -10,
+    sensormap: [
-        tmax: 50,
+          { model: 'bme280', host: 'balkon', desc: 'Senzor na balkóne', camera: false }, 
-        temperature: null,
+          { model: 'bme280', host: 'decka',  desc: 'Senzor v detskej izbe', camera: false }, 
-        time: null,
+          { model: 'bme280', host: 'strecha', desc: 'Senzor na streche', camera: true },
-        startdate: null,
+          { model: 'LYWSD03MMC', host: 'byt', desc: 'Senzor Xiaomi v byte', camera: false }, 
-        enddate: null,
+          { model: 'ThermoBeacon', host: 'byt', desc: 'Senzor Beacon v byte', camera: false }],
-        date4search: null,
+    soptions: [],
-        host: 'balkon',
+    si: 0,              // Sensor index
-        componentKey: 0,
+    tmin: -10,
-        ti: 0, //Tab Index
+    tmax: 50,
-        graphShow: [],
+    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();
+    }, 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: {
-          data: [],     
+          date: this.date4search
-          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');
-        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("GET DATA Images Selected");
-            console.log(response.data.temperature);
+          console.log(response.data);
-            let data = app.params.data = [];
+          app.images["selected"] = response.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);
         });
 
-        axios.get('/images/get', {
+    },
-          params: {
+    getData: function () {
-            date: "0"
+
-          }
+      axios.get('/data', {
-        })
+        params: {
+          host: this.host,
+          model: this.model
+        }
+      })
         .then(function (response) {
-            console.log("GET DATA Images 0");
+          console.log("GET DATA");
-            console.log(response.data);
+          console.log(response.data.temperature);
-            app.images["0"] = response.data;
+          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);
         });
 
-        axios.get('/images/get', {
+      axios.get('/images/get', {
-          params: {
+        params: {
-            date: "-1"
+          date: "0"
-          }
+        }
-        })
+      })
         .then(function (response) {
-            console.log("GET DATA Images -1");
+          console.log("GET DATA Images 0");
-            console.log(response.data);
+          console.log(response.data);
-            app.images["-1"] = response.data;
+          app.images["0"] = response.data;
         })
         .catch(function (error) {
-            console.log(error);
+          console.log(error);
         });
 
-        axios.get('/images/get', {
+      axios.get('/images/get', {
-          params: {
+        params: {
-            date: "-2"
+          date: "-1"
-          }
+        }
-        })
+      })
         .then(function (response) {
-            console.log("GET DATA Images -2");
+          console.log("GET DATA Images -1");
-            console.log(response.data);
+          console.log(response.data);
-            app.images["-2"] = response.data;
+          app.images["-1"] = response.data;
         })
         .catch(function (error) {
-            console.log(error);
+          console.log(error);
         });
 
-      let vts = ["temperature","humidity","pressure"];
+      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');
 
-      },
+    },
-    }
+  }
 
-    });
+});
 //  })();

resources/js/components/StatisticsComponent.vue

@@ -35,7 +35,8 @@ export default {
             startdate: this.fromdate,
             enddate: this.todate,
             range: this.range,
-            host: this.host
+            host: this.host,
+            model: this.model
           }
         })
         .then(function (response) {

resources/views/welcome.blade.php

@@ -85,7 +85,7 @@
 
             <div class="content" id="app">
                 <div class="title m-b-md">
-                    Teplomer @{{ names[host] }}
+                    @{{ sensormap[ti].desc }}
                 </div>
 
                 <div>
@@ -93,12 +93,10 @@
                         <vue-thermometer class="justify-content-center col-sm-3" :value="temperature" :min="tmin" :max="tmax"></vue-thermometer>
                         <div class="col-sm-9" id="values">
                             <div>
-                                <b-button variant="primary" v-on:click="sethost('balkon')">Balkón</b-button>
+                                <b-form-select v-model="si" :options="soptions" v-on:change="sethost(si)"></b-form-select>
-                                <b-button variant="secondary" v-on:click="sethost('decka')">Decká</b-button>
-                                <b-button variant="success" v-on:click="sethost('strecha')">Strecha</b-button>
                               </div>
 
-                            <vue-table-dynamic :params="params" :key="host"></vue-table-dynamic>
+                            <vue-table-dynamic :params="params" :key="si"></vue-table-dynamic>
                             <ul>
                                 <li>Čas: @{{time}}</li>
                             </ul>
@@ -136,13 +134,13 @@
                             <b-tabs card>
                                 <b-tab title="Celá doba">
                                     <div>Štatistika za celú dobu v grafe</div>
-                                    <stats-table :fromdate="startdate" :todate="enddate" :type="'temperature'" :key="componentKey" :host="host"></stats-table>
+                                    <stats-table :fromdate="startdate" :todate="enddate" :type="'temperature'" :key="componentKey" :host="host" :model="model"></stats-table>
                                 </b-tab>
                                 <b-tab title="Hodina">
-                                    <stats-table :fromdate="startdate" :todate="enddate" :type="'temperature'" :range="'1h'" :key="componentKey" :host="host"></stats-table>
+                                    <stats-table :fromdate="startdate" :todate="enddate" :type="'temperature'" :range="'1h'" :key="componentKey" :host="host" :model="model"></stats-table>
                                 </b-tab>
                                 <b-tab title="Deň" v-if="startdate">
-                                    <stats-table :fromdate="startdate" :todate="enddate" :type="'temperature'" :range="'1d'" :key="componentKey" :host="host"></stats-table>
+                                    <stats-table :fromdate="startdate" :todate="enddate" :type="'temperature'" :range="'1d'" :key="componentKey" :host="host" :model="model"></stats-table>
                                 </b-tab>
                             </b-tabs>
                         </b-card>
@@ -153,13 +151,13 @@
                             <b-tabs card>
                                 <b-tab title="Celá doba">
                                     <div>Štatistika za celú dobu v grafe</div>
-                                    <stats-table :fromdate="startdate" :todate="enddate" :type="'humidity'" :key="componentKey" :host="host"></stats-table>
+                                    <stats-table :fromdate="startdate" :todate="enddate" :type="'humidity'" :key="componentKey" :host="host" :model="model"></stats-table>
                                 </b-tab>
                                 <b-tab title="Hodina">
-                                    <stats-table :fromdate="startdate" :todate="enddate" :type="'humidity'" :range="'1h'" :key="componentKey" :host="host"></stats-table>
+                                    <stats-table :fromdate="startdate" :todate="enddate" :type="'humidity'" :range="'1h'" :key="componentKey" :host="host" :model="model"></stats-table>
                                 </b-tab>
                                 <b-tab title="Deň" v-if="startdate">
-                                    <stats-table :fromdate="startdate" :todate="enddate" :type="'humidity'" :range="'1d'" :key="componentKey" :host="host"></stats-table>
+                                    <stats-table :fromdate="startdate" :todate="enddate" :type="'humidity'" :range="'1d'" :key="componentKey" :host="host" :model="model"></stats-table>
                                 </b-tab>
                             </b-tabs>
                         </b-card>
@@ -170,13 +168,13 @@
                             <b-tabs card>
                                 <b-tab title="Celá doba">
                                     <div>Štatistika za celú dobu v grafe</div>
-                                    <stats-table :fromdate="startdate" :todate="enddate" :type="'pressure'" :key="componentKey" :host="host"></stats-table>
+                                    <stats-table :fromdate="startdate" :todate="enddate" :type="'pressure'" :key="componentKey" :host="host" :model="model"></stats-table>
                                 </b-tab>
                                 <b-tab title="Hodina">
-                                    <stats-table :fromdate="startdate" :todate="enddate" :type="'pressure'" :range="'1h'" :key="componentKey" :host="host"></stats-table>
+                                    <stats-table :fromdate="startdate" :todate="enddate" :type="'pressure'" :range="'1h'" :key="componentKey" :host="host" :model="model"></stats-table>
                                 </b-tab>
                                 <b-tab title="Deň" v-if="startdate">
-                                    <stats-table :fromdate="startdate" :todate="enddate" :type="'pressure'" :range="'1d'" :key="componentKey" :host="host"></stats-table>
+                                    <stats-table :fromdate="startdate" :todate="enddate" :type="'pressure'" :range="'1d'" :key="componentKey" :host="host" :model="model"></stats-table>
                                 </b-tab>
                             </b-tabs>
                         </b-card>

webpack.mix.js

@@ -11,5 +11,5 @@ const mix = require('laravel-mix');
  |
  */
 
-mix.js('resources/js/app.js', 'public/js')
+mix.js('resources/js/app.js', 'public/js').vue({ version: 2 })
    .sass('resources/sass/app.scss', 'public/css');