Add gallery to app

app/Console/Commands/thumbnail.php

@@ -39,10 +39,11 @@ class Thumbnail extends Command
      */
     public function handle()
     {
-        $dir = public_path().'/'.config('app.image.dir').'/backup';
+        
-        $thumb_dir = public_path().'/'.config('app.image.thumb_dir').'/thumb';
+    $dir = public_path().'/'.config('app.image.dir').'/backup';
-        $w = config('app.image.thumb_width');
+    $thumb_dir = public_path().'/'.config('app.image.thumb_dir').'/thumb';
-        $h = config('app.image.thumb_height');
+    $w = config('app.image.thumb_width');
+    $h = config('app.image.thumb_height');
 
 	$output = new \Symfony\Component\Console\Output\ConsoleOutput();
 	$output->writeln("<info>Starting make thumb</info>");

app/Http/Controllers/Upload.php

@@ -41,15 +41,15 @@ class Upload extends Controller
                 $location = config('app.image.dir');
                 
                 $backupdir = Carbon::now()->format('Y/m/d');
-		$backupdir = sprintf($location.'/backup/%s',$backupdir);
+		          $backupdir = sprintf($location.'/backup/%s',$backupdir);
-		$thumbdir = sprintf('%s/%s', config('app.image.thumb_dir'), Carbon::now()->format('Y/m/d'));
+		          $thumbdir = sprintf('%s/%s', config('app.image.thumb_dir'), Carbon::now()->format('Y/m/d'));
                 $bckfile = Carbon::now()->format('Hi');
                 $bckfile = sprintf('%s.jpg',$bckfile);
                 // Upload file
                 $file->move($backupdir,$bckfile);
                 \File::copy($backupdir."/".$bckfile,$location."/".$filename);
-		$image = Image::make($backupdir."/".$bckfile)->resize(160, 120);
+		          $image = Image::make($backupdir."/".$bckfile)->resize(160, 120);
-		\File::makeDirectory($thumbdir, $mode = 0770, true, true);
+		          \File::makeDirectory($thumbdir, $mode = 0770, true, true);
                 $image->save( $thumbdir.'/'.$bckfile);
                 echo 'Upload Successful.';
              }else{

package.json

@@ -30,7 +30,7 @@
         "moment": "^2.29.1",
         "vue-datetime": "^1.0.0-beta.14",
         "vue-dygraphs": "^0.1.2",
-        "vue-gallery-slideshow": "^1.5.2",
+        "vue-picture-swipe": "^2.1.0",
         "vue-table-dynamic": "^0.4.1",
         "vuejs-thermometer": "^0.1.3",
         "weekstart": "^1.0.1"

public/images/vendor/photoswipe/dist/default-skin/default-skin.svg

@@ -0,0 +1 @@
+<svg width="264" height="88" viewBox="0 0 264 88" xmlns="http://www.w3.org/2000/svg"><title>default-skin 2</title><g fill="none" fill-rule="evenodd"><g><path d="M67.002 59.5v3.768c-6.307.84-9.184 5.75-10.002 9.732 2.22-2.83 5.564-5.098 10.002-5.098V71.5L73 65.585 67.002 59.5z" id="Shape" fill="#fff"/><g fill="#fff"><path d="M13 29v-5h2v3h3v2h-5zM13 15h5v2h-3v3h-2v-5zM31 15v5h-2v-3h-3v-2h5zM31 29h-5v-2h3v-3h2v5z" id="Shape"/></g><g fill="#fff"><path d="M62 24v5h-2v-3h-3v-2h5zM62 20h-5v-2h3v-3h2v5zM70 20v-5h2v3h3v2h-5zM70 24h5v2h-3v3h-2v-5z"/></g><path d="M20.586 66l-5.656-5.656 1.414-1.414L22 64.586l5.656-5.656 1.414 1.414L23.414 66l5.656 5.656-1.414 1.414L22 67.414l-5.656 5.656-1.414-1.414L20.586 66z" fill="#fff"/><path d="M111.785 65.03L110 63.5l3-3.5h-10v-2h10l-3-3.5 1.785-1.468L117 59l-5.215 6.03z" fill="#fff"/><path d="M152.215 65.03L154 63.5l-3-3.5h10v-2h-10l3-3.5-1.785-1.468L147 59l5.215 6.03z" fill="#fff"/><g><path id="Rectangle-11" fill="#fff" d="M160.957 28.543l-3.25-3.25-1.413 1.414 3.25 3.25z"/><path d="M152.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" id="Oval-1" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M150 21h5v1h-5z"/></g><g><path d="M116.957 28.543l-1.414 1.414-3.25-3.25 1.414-1.414 3.25 3.25z" fill="#fff"/><path d="M108.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M106 21h5v1h-5z"/><path fill="#fff" d="M109.043 19.008l-.085 5-1-.017.085-5z"/></g></g></g></svg>

resources/js/app.js

@@ -51,8 +51,8 @@ Vue.use(CardPlugin);
 import { BButton } from 'bootstrap-vue'
 Vue.component('b-button', BButton);
 
-import VueGallerySlideshow from 'vue-gallery-slideshow';
+import VuePictureSwipe from 'vue-picture-swipe';
-Vue.use(VueGallerySlideshow);
+Vue.component('vue-picture-swipe', VuePictureSwipe);
 
 //(function () {
     var app = new Vue({
@@ -103,7 +103,6 @@ Vue.use(VueGallerySlideshow);
           }
         },
         series: { "temperature" : [], "humidity" : [], "pressure": [] },
-        //images: { "images-0": {'/upload/images/camera.jpg'}, "images-1": {}, "images-2": {} }
       },
       mounted: function () {
         console.log('MOUNTED');

resources/views/welcome.blade.php

@@ -186,6 +186,8 @@
                   <div v-if="host == 'strecha'">
                        <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 za aktualny deň</div>
+                        <vue-picture-swipe :items="{{ json_encode($items) }}"></vue-picture-swipe>
                     </b-tabs>
                   </div>
                 </div>

routes/web.php

@@ -12,7 +12,22 @@
 */
 
 Route::get('/', function () {
-    return view('welcome');
+    $dir = public_path().'/'.config('app.image.dir').'/backup/'.date('Y/m/d');
+    
+    $files = \File::allFiles($dir);
+    $items = [];
+	foreach ($files as $file) {
+        $pstat = stat($file);
+        $time = date('Y M D 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 view('welcome')->with('items',$items);
 });
 
 Route::get('/data',"MeasurementController@index");

yarn.lock

@@ -5047,6 +5047,11 @@ pbkdf2@^3.0.3:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+photoswipe@^4.1.2:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/photoswipe/-/photoswipe-4.1.3.tgz#59f49494eeb9ddab5888d03392926a19bc197550"
+  integrity sha512-89Z43IRUyw7ycTolo+AaiDn3W1EEIfox54hERmm9bI12IB9cvRfHSHez3XhAyU8XW2EAFrC+2sKMhh7SJwn0bA==
+
 picomatch@^2.0.4, picomatch@^2.2.1:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
@@ -6818,13 +6823,6 @@ vue-functional-data-merge@^3.1.0:
   resolved "https://registry.yarnpkg.com/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz#08a7797583b7f35680587f8a1d51d729aa1dc657"
   integrity sha512-leT4kdJVQyeZNY1kmnS1xiUlQ9z1B/kdBFCILIjYYQDqZgLqCLa0UhjSSeRX6c3mUe6U5qYeM8LrEqkHJ1B4LA==
 
-vue-gallery-slideshow@^1.5.2:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/vue-gallery-slideshow/-/vue-gallery-slideshow-1.5.2.tgz#41fc93d454cc5b068adfb574351d2310ca9c42cb"
-  integrity sha512-P5u+H7ZL4MMx0uwmT9A76zQdeSX/m4/HoLWmUZxf7c/N0q5hnrG20/330xw049d5GnsBq91G3JUJadZOEqAUzw==
-  dependencies:
-    vue-runtime-helpers "^1.1.2"
-
 vue-hot-reload-api@^2.3.0:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
@@ -6841,10 +6839,13 @@ vue-loader@^15.4.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
-vue-runtime-helpers@^1.1.2:
+vue-picture-swipe@^2.1.0:
-  version "1.1.2"
+  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/vue-runtime-helpers/-/vue-runtime-helpers-1.1.2.tgz#446b7b820888ab0c5264d2c3a32468e72e4100f3"
+  resolved "https://registry.yarnpkg.com/vue-picture-swipe/-/vue-picture-swipe-2.1.0.tgz#5147d744e28a6a704a8e6df35d0c4578f3bf9089"
-  integrity sha512-pZfGp+PW/IXEOyETE09xQHR1CKkR9HfHZdnMD/FVLUNI+HxYTa82evx5WrF6Kz4s82qtqHvMZ8MZpbk2zT2E1Q==
+  integrity sha512-LsEeIfBmaByQBIRKbr95a28m0FjcrQZMka2cgCtfPT637JfVYu53EvhL+H5zxh8n8ZWYI2rWJZiXVE0d+7J/9A==
+  dependencies:
+    photoswipe "^4.1.2"
+    vue "^2.5.16"
 
 vue-scrollbar-simple@0.0.9:
   version "0.0.9"
@@ -6883,6 +6884,11 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
+vue@^2.5.16:
+  version "2.6.14"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"
+  integrity sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==
+
 vue@^2.5.17:
   version "2.6.12"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"