Little changes to make thumb

2021-09-21 20:39:55 +02:00
parent 714327b236
commit 9fa0c888ca
10 changed files with 193 additions and 6 deletions
--- a/app/Console/Commands/thumbnail.php
+++ b/app/Console/Commands/thumbnail.php
@@ -0,0 +1,42 @@
+<?php
+
+namespace App\Console\Commands;
+
+use Illuminate\Console\Command;
+
+class Thumbnail extends Command
+{
+    /**
+     * The name and signature of the console command.
+     *
+     * @var string
+     */
+    protected $signature = 'thumbnail:make';
+
+    /**
+     * The console command description.
+     *
+     * @var string
+     */
+    protected $description = 'Make thumbnails of all image files';
+
+    /**
+     * Create a new command instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        parent::__construct();
+    }
+
+    /**
+     * Execute the console command.
+     *
+     * @return mixed
+     */
+    public function handle()
+    {
+        
+    }
+}
--- a/app/Http/Controllers/Upload.php
+++ b/app/Http/Controllers/Upload.php
@@ -37,15 +37,17 @@ class Upload extends Controller
             if($fileSize <= $maxFileSize){

                // File upload location
-                $location = 'upload/images';
+                $location = config('app.image.dir');
                
                $backupdir = Carbon::now()->format('Y/m/d');
-                $backupdir = sprintf('upload/images/backup/%s',$backupdir);
+                $backupdir = sprintf($location.'/backup/%s',$backupdir);
                $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->save( config('app.image.thumb_dir').'/'.$bckfile);
                echo 'Upload Successful.';
             }else{
                echo 'File too large. File must be less than 2MB.';
--- a/composer.json
+++ b/composer.json
@@ -10,6 +10,7 @@
    "require": {
        "php": "^7.2.5|^8.0",
        "fideloper/proxy": "^4.4",
+        "intervention/image": "^2.6",
        "laravel/framework": "^6.20",
        "laravel/tinker": "^2.5",
        "laravel/ui": "1.*",
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
        "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
        "This file is @generated automatically"
    ],
-    "content-hash": "3061c7e401dd79848d53eb3a6d99d324",
+    "content-hash": "11becec6f16dbcd46b90d4bd089913ff",
    "packages": [
        {
            "name": "dnoegel/php-xdg-base-dir",
@@ -706,6 +706,90 @@
            },
            "time": "2020-12-26T17:45:17+00:00"
        },
+        {
+            "name": "intervention/image",
+            "version": "2.6.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/Intervention/image.git",
+                "reference": "0925f10b259679b5d8ca58f3a2add9255ffcda45"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/Intervention/image/zipball/0925f10b259679b5d8ca58f3a2add9255ffcda45",
+                "reference": "0925f10b259679b5d8ca58f3a2add9255ffcda45",
+                "shasum": ""
+            },
+            "require": {
+                "ext-fileinfo": "*",
+                "guzzlehttp/psr7": "~1.1 || ^2.0",
+                "php": ">=5.4.0"
+            },
+            "require-dev": {
+                "mockery/mockery": "~0.9.2",
+                "phpunit/phpunit": "^4.8 || ^5.7 || ^7.5.15"
+            },
+            "suggest": {
+                "ext-gd": "to use GD library based image processing.",
+                "ext-imagick": "to use Imagick based image processing.",
+                "intervention/imagecache": "Caching extension for the Intervention Image library"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "2.4-dev"
+                },
+                "laravel": {
+                    "providers": [
+                        "Intervention\\Image\\ImageServiceProvider"
+                    ],
+                    "aliases": {
+                        "Image": "Intervention\\Image\\Facades\\Image"
+                    }
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Intervention\\Image\\": "src/Intervention/Image"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Oliver Vogel",
+                    "email": "oliver@olivervogel.com",
+                    "homepage": "http://olivervogel.com/"
+                }
+            ],
+            "description": "Image handling and manipulation library with support for Laravel integration",
+            "homepage": "http://image.intervention.io/",
+            "keywords": [
+                "gd",
+                "image",
+                "imagick",
+                "laravel",
+                "thumbnail",
+                "watermark"
+            ],
+            "support": {
+                "issues": "https://github.com/Intervention/image/issues",
+                "source": "https://github.com/Intervention/image/tree/2.6.1"
+            },
+            "funding": [
+                {
+                    "url": "https://www.paypal.me/interventionphp",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/Intervention",
+                    "type": "github"
+                }
+            ],
+            "time": "2021-07-22T14:31:53+00:00"
+        },
        {
            "name": "laravel/framework",
            "version": "v6.20.9",
@@ -7230,5 +7314,5 @@
        "php": "^7.2.5|^8.0"
    },
    "platform-dev": [],
-    "plugin-api-version": "2.0.0"
+    "plugin-api-version": "2.1.0"
 }
--- a/config/app.php
+++ b/config/app.php
@@ -175,6 +175,7 @@ return [
        App\Providers\EventServiceProvider::class,
        App\Providers\RouteServiceProvider::class,

+        Intervention\Image\ImageServiceProvider::class,
    ],

    /*
@@ -226,6 +227,14 @@ return [
        'Validator' => Illuminate\Support\Facades\Validator::class,
        'View' => Illuminate\Support\Facades\View::class,

+        'Image' => Intervention\Image\Facades\Image::class,
    ],
+    /*
+        Upload file path
+    */

+    'image' => [ 'dir' => 'upload/images',
+                 'thumb_dir' => 'upload/images/thumb',
+                 'thumb_width' => 160,
+                 'thumb_height' => 120],
 ];
--- a/config/image.php
+++ b/config/image.php
@@ -0,0 +1,20 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Image Driver
+    |--------------------------------------------------------------------------
+    |
+    | Intervention Image supports "GD Library" and "Imagick" to process images
+    | internally. You may choose one of them according to your PHP
+    | configuration. By default PHP's "GD Library" implementation is used.
+    |
+    | Supported: "gd", "imagick"
+    |
+    */
+
+    'driver' => 'gd'
+
+];
--- a/package.json
+++ b/package.json
@@ -30,6 +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-table-dynamic": "^0.4.1",
        "vuejs-thermometer": "^0.1.3",
        "weekstart": "^1.0.1"
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -51,6 +51,9 @@ Vue.use(CardPlugin);
 import { BButton } from 'bootstrap-vue'
 Vue.component('b-button', BButton);

+import VueGallerySlideshow from 'vue-gallery-slideshow';
+Vue.use(VueGallerySlideshow);
+
 //(function () {
    var app = new Vue({
      el: '#app',
@@ -100,6 +103,7 @@ Vue.component('b-button', BButton);
          }
        },
        series: { "temperature" : [], "humidity" : [], "pressure": [] },
+        images: { "images-0": {'/upload/images/camera.jpg'}, "images-1": {}, "images-2": {} }
      },
      mounted: function () {
        console.log('MOUNTED');
--- a/resources/views/welcome.blade.php
+++ b/resources/views/welcome.blade.php
@@ -184,8 +184,20 @@
                      </b-tabs>
                  </b-card>
                  <div v-if="host == 'strecha'">
-                    <div class="h5 mt-3">Obrázok z kamery</div>
+                    
+                    <b-tabs card>
+                        <b-tab title="Dnes">
+                            <vue-gallery-slideshow :images="images-0" :index="index" @close="index = null"></vue-gallery-slideshow>
+                        </b-tab>
+                        <b-tab title="Včera">
+                            <vue-gallery-slideshow :images="images-1" :index="index" @close="index = null"></vue-gallery-slideshow>
+                        </b-tab>
+                        <b-tab title="Predvčerom">
+                            <vue-gallery-slideshow :images="images-2" :index="index" @close="index = null"></vue-gallery-slideshow>
+                        </b-tab>
+                        <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="" />
+                    </b-tabs>
                  </div>
                </div>

--- a/yarn.lock
+++ b/yarn.lock
@@ -6818,6 +6818,13 @@ 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"
@@ -6834,6 +6841,11 @@ vue-loader@^15.4.2:
    vue-hot-reload-api "^2.3.0"
    vue-style-loader "^4.1.0"

+vue-runtime-helpers@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vue-runtime-helpers/-/vue-runtime-helpers-1.1.2.tgz#446b7b820888ab0c5264d2c3a32468e72e4100f3"
+  integrity sha512-pZfGp+PW/IXEOyETE09xQHR1CKkR9HfHZdnMD/FVLUNI+HxYTa82evx5WrF6Kz4s82qtqHvMZ8MZpbk2zT2E1Q==
+
 vue-scrollbar-simple@0.0.9:
  version "0.0.9"
  resolved "https://registry.yarnpkg.com/vue-scrollbar-simple/-/vue-scrollbar-simple-0.0.9.tgz#15536023f3213907eeb491f50e0c6871d58d4fd8"