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

app/Http/Controllers/ImagesController.php

@@ -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);
+    } 
+}

resources/js/app.js

@@ -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]);

resources/views/welcome.blade.php

@@ -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>