Zakladna migracia na viacej senzorov

2022-10-28 15:16:05 +02:00
parent 997aa81ff9
commit 5e521583af
12 changed files with 128091 additions and 20872 deletions
--- a/app/Http/Controllers/MeasurementController.php
+++ b/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) {
--- a/app/Http/Controllers/StatisticsController.php
+++ b/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();
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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",
-        "watch": "npm run development -- --watch",
-        "watch-poll": "npm run watch -- --watch-poll",
-        "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",
+        "development": "mix",
+        "watch": "mix watch",
+        "watch-poll": "mix watch -- --watch-options-poll=1000",
+        "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",
-        "bootstrap": "^4.0.0",
-        "cross-env": "^7.0",
-        "jquery": "^3.2",
-        "laravel-mix": "^5.0.1",
+        "axios": "^0.21",
+        "bootstrap": "^4.6.0",
+        "jquery": "^1.9.1",
+        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
-        "popper.js": "^1.12",
-        "resolve-url-loader": "^2.3.1",
-        "sass": "^1.20.1",
-        "sass-loader": "^8.0.0",
-        "vue": "^2.5.17",
-        "vue-template-compiler": "^2.6.10"
+        "popper.js": "^1.16.1",
+        "postcss": "^8.1.14",
+        "resolve-url-loader": "^3.1.2",
+        "sass": "^1.32.5",
+        "sass-loader": "^10.1.1",
+        "vue": "^2.6.12",
+        "vue-loader": "^15.10.0",
+        "vue-template-compiler": "^2.6.12"
    },
    "dependencies": {
        "bootstrap-vue": "^2.21.2",
--- a/public/css/app.css
+++ b/public/css/app.css
--- a/public/js/app.js
+++ b/public/js/app.js
--- a/public/js/app.js.LICENSE.txt
+++ b/public/js/app.js.LICENSE.txt
@@ -1,38 +1,38 @@
 /*!
-  * Bootstrap v4.5.3 (https://getbootstrap.com/)
-  * Copyright 2011-2020 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
+  * Bootstrap v4.6.2 (https://getbootstrap.com/)
+  * 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
- * https://sizzlejs.com/
+ * Sizzle CSS Selector Engine v2.2.1
+ * 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
- * (c) 2014-2020 Evan You
+ * Vue.js v2.7.13
+ * (c) 2014-2022 Evan You
 * Released under the MIT License.
 */

 /*!
- * jQuery JavaScript Library v3.5.1
- * https://jquery.com/
+ * jQuery JavaScript Library v1.12.4
+ * 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
 */

 /*!
--- a/resources/js/app.js
+++ b/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({
-      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": []},
-        cameraimage: "upload/images/camera.jpg",
+var app = new Vue({
+  el: '#app',
+  data: {
+    names: { balkon: "balkón", strecha: "strecha", decka: "decká", 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', 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
      },
-      mounted: function () {
-        console.log('MOUNTED');
-        this.getData();
-        var that = this;
-        window.setInterval(function(){ 
-          console.log("TIMER");
-          that.getData();
-        }, 300000); 
-        
+      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});
+    }

-      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();
-          });
+    console.log('OPTIONS',this.soptions);

-        },
-        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 () {
+    this.getData();
+    var that = this;
+    window.setInterval(function () {
+      console.log("TIMER");
+      that.getData();
+    }, 300000);

-        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);
-        });
+  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;
      
-        axios.get('/images/get', {
-          params: {
-            date: "-1"
-          }
-        })
+      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 -1");
-            console.log(response.data);
-            app.images["-1"] = response.data;
+          console.log("GET DATA Images Selected");
+          console.log(response.data);
+          app.images["selected"] = response.data;
        })
        .catch(function (error) {
-            console.log(error);
+          console.log(error);
        });

-        axios.get('/images/get', {
-          params: {
-            date: "-2"
-          }
-        })
+    },
+    getData: function () {
+
+      axios.get('/data', {
+        params: {
+          host: this.host,
+          model: this.model
+        }
+      })
        .then(function (response) {
-            console.log("GET DATA Images -2");
-            console.log(response.data);
-            app.images["-2"] = response.data;
+          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);
+          console.log(error);
        });

-      let vts = ["temperature","humidity","pressure"];
+      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]);
+        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');

-      },
-    }
+    },
+  }

-    });
+});
 //  })();
--- a/resources/js/components/StatisticsComponent.vue
+++ b/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) {
--- a/resources/views/welcome.blade.php
+++ b/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-button variant="secondary" v-on:click="sethost('decka')">Decká</b-button>
-                                <b-button variant="success" v-on:click="sethost('strecha')">Strecha</b-button>
+                                <b-form-select v-model="si" :options="soptions" v-on:change="sethost(si)"></b-form-select>
                              </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>
--- a/webpack.mix.js
+++ b/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');
--- a/yarn.lock
+++ b/yarn.lock