jaro/meranie
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add api for files in images dir and show pictures on selected date

Browse Source
This commit is contained in:
Jaro
2021-09-29 19:18:36 +02:00
parent 96adcc40ba
commit a6fce7b3ff
4 changed files with 128 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
resources/js/app.js vendored
View File

@@ -65,6 +65,7 @@ Vue.component('vue-picture-swipe', VuePictureSwipe);
time: null,
startdate: null,
enddate: null,
date4search: null,
host: 'balkon',
componentKey: 0,
ti: 0, //Tab Index
@@ -103,6 +104,7 @@ Vue.component('vue-picture-swipe', VuePictureSwipe);
}
},
series: { "temperature" : [], "humidity" : [], "pressure": [] },
images: { "0": [], "-1": [], "-2": [], "selected": []},
},
mounted: function () {
console.log('MOUNTED');
@@ -116,6 +118,9 @@ Vue.component('vue-picture-swipe', VuePictureSwipe);
},
methods: {
trigger: function () {
app.$refs.ps.$el.click();
},
displayResults: function () {
this.getData();
},
@@ -132,6 +137,22 @@ Vue.component('vue-picture-swipe', VuePictureSwipe);
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 () {
@@ -156,6 +177,48 @@ Vue.component('vue-picture-swipe', VuePictureSwipe);
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]);

28
resources/views/welcome.blade.php
View File

@@ -187,25 +187,31 @@
<div class="h4 mt-3 bg-info">Aktuálny obrázok z kamery</div>
<img class="img-fluid" src="{{ url('upload/images/camera.jpg') }}" alt="" title="" />
<div class="h4 mt-3 bg-info">Galeria</div>
@if (count($items) > 0)
<b-tabs card lazy>
@if (count($items[0]) > 0)
<b-tab title="Dnešok">
<vue-picture-swipe :items="{{ json_encode($items[0]) }}"></vue-picture-swipe>
<vue-picture-swipe ref="ps" :items="images['0']"></vue-picture-swipe>
</b-tab>
@endif
@if (isset($items[-1]) && count($items[-1]) > 0)
<b-tab title="Včerajšok">
<vue-picture-swipe :items="{{ json_encode($items[-1]) }}"></vue-picture-swipe>
<vue-picture-swipe :items="images['-1']"></vue-picture-swipe>
</b-tab>
@endif
@if (isset($items[-2]) && count($items[-2]) > 0)
<b-tab title="Predvčerajšok">
<vue-picture-swipe :items="{{ json_encode($items[-2]) }}"></vue-picture-swipe>
<vue-picture-swipe :items="images['-2']"></vue-picture-swipe>
</b-tab>
<b-tab title="Zvoľ">
<div class="form-group col-sm-6">
<div class='input-group time' id='datetimepicker3'>
<datetime type="date" input-class="form-control" placeholder="Dátum" v-model="date4search"></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="getImagesForDate()" type="button" class="btn btn-secondary">Zobraz</button>
</span>
</div>
</div>
<vue-picture-swipe :items="images['selected']"></vue-picture-swipe>
</b-tab>
@endif
</b-tabs>
@endif
</div>
</div>