Added confetti option

Signed-off-by: snipe <snipe@snipe.net>

app/Http/Controllers/ProfileController.php

@@ -50,6 +50,7 @@ class ProfileController extends Controller
         $user->skin = $request->input('skin');
         $user->phone = $request->input('phone');
         $user->enable_sounds = $request->input('enable_sounds', false);
+        $user->enable_confetti = $request->input('enable_confetti', false);
 
         if (! config('app.lock_passwords')) {
             $user->locale = $request->input('locale', 'en-US');

database/migrations/2024_08_15_111816_add_confetti_to_users.php

@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->boolean('enable_confetti')->default(false);
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->dropColumn('enable_confetti');
+        });
+    }
+};

package-lock.json

@@ -16,6 +16,7 @@
                 "bootstrap-datepicker": "^1.10.0",
                 "bootstrap-less": "^3.3.8",
                 "bootstrap-table": "1.23.0",
+                "canvas-confetti": "^1.9.3",
                 "chart.js": "^2.9.4",
                 "clipboard": "^2.0.11",
                 "css-loader": "^5.0.0",
@@ -4098,6 +4099,15 @@
             ],
             "license": "CC-BY-4.0"
         },
+        "node_modules/canvas-confetti": {
+            "version": "1.9.3",
+            "resolved": "https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.9.3.tgz",
+            "integrity": "sha512-rFfTURMvmVEX1gyXFgn5QMn81bYk70qa0HLzcIOSVEyl57n6o9ItHeBtUSWdvKAPY0xlvBHno4/v3QPrT83q9g==",
+            "funding": {
+                "type": "donate",
+                "url": "https://www.paypal.me/kirilvatev"
+            }
+        },
         "node_modules/canvg": {
             "version": "3.0.10",
             "license": "MIT",

package.json

@@ -36,6 +36,7 @@
         "bootstrap-datepicker": "^1.10.0",
         "bootstrap-less": "^3.3.8",
         "bootstrap-table": "1.23.0",
+        "canvas-confetti": "^1.9.3",
         "chart.js": "^2.9.4",
         "clipboard": "^2.0.11",
         "css-loader": "^5.0.0",

public/mix-manifest.json

@@ -1,5 +1,5 @@
 {
-    "/js/build/app.js": "/js/build/app.js?id=da3f7fee4a180ba924f6a3920c94eb71",
+    "/js/build/app.js": "/js/build/app.js?id=5030f4cb69d0d0b87b7fe6ba1b9eece9",
     "/css/dist/skins/skin-black-dark.css": "/css/dist/skins/skin-black-dark.css?id=f0b08873a06bb54daeee176a9459f4a9",
     "/css/dist/skins/_all-skins.css": "/css/dist/skins/_all-skins.css?id=f4397c717b99fce41a633ca6edd5d1f4",
     "/css/build/overrides.css": "/css/build/overrides.css?id=a759aa24710e294392877c5139fda40e",
@@ -111,5 +111,5 @@
     "/css/dist/bootstrap-table.css": "/css/dist/bootstrap-table.css?id=8abbb6aea625ec64cd7ebdad77ebf6e5",
     "/js/build/vendor.js": "/js/build/vendor.js?id=c1c24b883f48dc3d16b817aed0b457cc",
     "/js/dist/bootstrap-table.js": "/js/dist/bootstrap-table.js?id=859e11e4e6b05c84e4b7302de29bac5e",
-    "/js/dist/all.js": "/js/dist/all.js?id=ea6fb4f01f01c2194310403dafc1658f"
+    "/js/dist/all.js": "/js/dist/all.js?id=05654cea82a7a1b78cb20e449d004268"
 }

resources/lang/en-US/account/general.php

@@ -13,4 +13,5 @@ return array(
     'profile_updated' => 'Account successfully updated',
     'no_tokens' => 'You have not created any personal access tokens.',
     'enable_sounds' => 'Enable sound effects',
+    'enable_confetti' => 'Enable confetti effects',
 );

resources/views/account/profile.blade.php

@@ -89,15 +89,24 @@
           </div>
         </div>
 
-        <div class="form-group{{ $errors->has('enable_sounds') ? ' has-error' : '' }}">
+        <div class="form-group">
           <div class="col-md-9 col-md-offset-3">
-            <label for="enable_sounds" class="form-control">
+            <label class="form-control">
               <input type="checkbox" name="enable_sounds" value="1" {{ old('enable_sounds', $user->enable_sounds) ? 'checked' : '' }}>
               {{ trans('account/general.enable_sounds') }}
             </label>
           </div>
         </div>
 
+        <div class="form-group">
+          <div class="col-md-9 col-md-offset-3">
+            <label class="form-control">
+              <input type="checkbox" name="enable_confetti" value="1" {{ old('enable_confetti', $user->enable_confetti) ? 'checked' : '' }}>
+              {{ trans('account/general.enable_confetti') }}
+            </label>
+          </div>
+        </div>
+
         <!-- Gravatar Email -->
         <div class="form-group {{ $errors->has('gravatar') ? ' has-error' : '' }}">
           <label for="gravatar" class="col-md-3 control-label">{{ trans('general.gravatar_email') }}

resources/views/notifications.blade.php

@@ -32,6 +32,7 @@
         {{ $message }}
     </div>
 </div>
+@include ('partials.confetti-js')
 @endif
 
 
@@ -44,6 +45,7 @@
             {!!  $message !!}
         </div>
     </div>
+    @include ('partials.confetti-js')
 @endif
 
 

resources/views/partials/confetti-js.blade.php

@@ -0,0 +1,25 @@
+@if (auth()->user() && auth()->user()->enable_confetti=='1')
+<script>
+    var duration = 1500;
+    var animationEnd = Date.now() + duration;
+    var defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
+
+    function randomInRange(min, max) {
+        return Math.random() * (max - min) + min;
+    }
+
+    var interval = setInterval(function() {
+        var timeLeft = animationEnd - Date.now();
+
+        if (timeLeft <= 0) {
+            return clearInterval(interval);
+        }
+
+        var particleCount = 50 * (timeLeft / duration);
+        // since particles fall down, start a bit higher than random
+        confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } });
+        confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } });
+    }, 250);
+
+</script>
+@endif

webpack.mix.js

@@ -65,6 +65,7 @@ mix
     [
       "./resources/assets/js/snipeit.js", //this is the actual Snipe-IT JS - require()s bootstrap.js
       "./resources/assets/js/snipeit_modals.js",
+      "./node_modules/canvas-confetti/dist/confetti.browser.js",
     ],
     "./public/js/build/app.js" //because of compiling - this does not work very well :(
   )