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

47
app/Http/Controllers/ImagesController.php Normal file
View File

@@ -0,0 +1,47 @@
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Carbon\Carbon;
use Intervention\Image\ImageManagerStatic as Image;
class ImagesController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function get(Request $request)
{
$date = $request->input('date',NULL);
if ($date == "0" || $date == NULL) $date = Carbon::now();
if ($date == "-1") $date = Carbon::now()->add(-1,'day');
if ($date == "-2") $date = Carbon::now()->add(-2,'day');
if (strlen($date) > 2) $date = Carbon::parse($date);
date_default_timezone_set(config('app.timezone'));
$items = [];
$dir = public_path().'/'.config('app.image.dir').'/backup/'.$date->format('Y/m/d');
if (! \File::isDirectory($dir)) {
return response()->json([]);
}
$files = \File::allFiles($dir);
foreach ($files as $file) {
$pstat = stat($file);
$time = date('d.m.Y H:i:s',$pstat['mtime']);
$thumb_file = str_replace('backup','thumb',$file);
$item = ['src' => str_replace($_SERVER['DOCUMENT_ROOT'], '', $file),
'thumbnail' => str_replace($_SERVER['DOCUMENT_ROOT'], '', $thumb_file),
'w' => 1600, 'h' => 1200, 'title' => 'Time of photo: '. $time];
$items[] = $item;
}
return response()->json($items);
}
}

2
public/js/app.js vendored
View File

File diff suppressed because one or more lines are too long

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>