抽獎動畫完成(抽獎時間重疊)

app/Http/Controllers/API/UserController.php

@@ -53,7 +53,7 @@ class UserController extends Controller
     {
         $user = User::where('user_id', '=', $request->id)->get()[0];
         $department = Department::where('department_id','=',$user->department_id)->get()[0];
-        $use->department = $department;
+        $user->department = $department;
         $response = [
             'user' => $user,
         ];

app/Http/Controllers/DepartmentController.php

@@ -15,7 +15,8 @@ class DepartmentController extends Controller
      */
     public function index()
     {
-        //
+        $department = Department::all()->pluck('department_name', 'department_id');
+        return $department;
     }
 
     /**

app/Http/Controllers/DrawController.php

@@ -0,0 +1,10 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class DrawController extends Controller
+{
+    //
+}

app/Http/Requests/UpdateDepartmentRequest.php

@@ -3,6 +3,7 @@
 namespace App\Http\Requests;
 
 use Illuminate\Foundation\Http\FormRequest;
+use SebastianBergmann\Type\TrueType;
 
 class UpdateDepartmentRequest extends FormRequest
 {
@@ -13,7 +14,7 @@ class UpdateDepartmentRequest extends FormRequest
      */
     public function authorize()
     {
-        return false;
+        return TrueType;
     }
 
     /**

database/MAA_department.json

@@ -1,182 +1,182 @@
 [
   {
-    "department_id": "a00",
-    "departmen_name": "行政管理部",
-    "manager": "a00"
+    "department_id": "A00",
+    "department_name": "行政管理部",
+    "manager": "A00"
   },
   {
-    "department_id": "a21",
-    "departmen_name": "行政管理部庶務科",
-    "manager": "a21"
+    "department_id": "A21",
+    "department_name": "行政管理部庶務科",
+    "manager": "A21"
   },
   {
-    "department_id": "a22",
-    "departmen_name": "人力資源科",
-    "manager": "a22"
+    "department_id": "A22",
+    "department_name": "人力資源科",
+    "manager": "A22"
   },
   {
-    "department_id": "a24",
-    "departmen_name": "行政管理部文書科",
-    "manager": "a24"
+    "department_id": "A24",
+    "department_name": "行政管理部文書科",
+    "manager": "A24"
   },
   {
-    "department_id": "b00",
-    "departmen_name": "南區辦事處",
-    "manager": "b00"
+    "department_id": "B00",
+    "department_name": "南區辦事處",
+    "manager": "B00"
   },
   {
-    "department_id": "b10",
-    "departmen_name": "中區辦事處",
-    "manager": "b10"
+    "department_id": "B10",
+    "department_name": "中區辦事處",
+    "manager": "B10"
   },
   {
-    "department_id": "c00",
-    "departmen_name": "工程管理一部",
-    "manager": "c00"
+    "department_id": "C00",
+    "department_name": "工程管理一部",
+    "manager": "C00"
   },
   {
-    "department_id": "c10",
-    "departmen_name": "工程管理二部",
-    "manager": "c10"
+    "department_id": "C10",
+    "department_name": "工程管理二部",
+    "manager": "C10"
   },
   {
-    "department_id": "d00",
-    "departmen_name": "發展與企畫部",
-    "manager": "d00"
+    "department_id": "D00",
+    "department_name": "發展與企畫部",
+    "manager": "D00"
   },
   {
-    "department_id": "e10",
-    "departmen_name": "工程製圖科",
-    "manager": "e10"
+    "department_id": "E10",
+    "department_name": "工程製圖科",
+    "manager": "E10"
   },
   {
-    "department_id": "f10",
-    "departmen_name": "工務部",
-    "manager": "f10"
+    "department_id": "F10",
+    "department_name": "工務部",
+    "manager": "F10"
   },
   {
-    "department_id": "g00",
-    "departmen_name": "大地工程部",
-    "manager": "g00"
+    "department_id": "G00",
+    "department_name": "大地工程部",
+    "manager": "G00"
   },
   {
-    "department_id": "i00",
-    "departmen_name": "財務部",
-    "manager": "i00"
+    "department_id": "I00",
+    "department_name": "財務部",
+    "manager": "I00"
   },
   {
-    "department_id": "j00",
-    "departmen_name": "運輸及土木工程部",
-    "manager": "j00"
+    "department_id": "J00",
+    "department_name": "運輸及土木工程部",
+    "manager": "J00"
   },
   {
-    "department_id": "j10",
-    "departmen_name": "城鄉發展部",
-    "manager": "j10"
+    "department_id": "J10",
+    "department_name": "城鄉發展部",
+    "manager": "J10"
   },
   {
-    "department_id": "j20",
-    "departmen_name": "軌道工程部",
-    "manager": "j20"
+    "department_id": "J20",
+    "department_name": "軌道工程部",
+    "manager": "J20"
   },
   {
-    "department_id": "l00",
-    "departmen_name": "董事長室",
-    "manager": "l00"
+    "department_id": "L00",
+    "department_name": "董事長室",
+    "manager": "L00"
   },
   {
-    "department_id": "l10",
-    "departmen_name": "總經理室",
-    "manager": "l10"
+    "department_id": "L10",
+    "department_name": "總經理室",
+    "manager": "L10"
   },
   {
-    "department_id": "l40",
-    "departmen_name": "企業發展中心",
-    "manager": "l40"
+    "department_id": "L40",
+    "department_name": "企業發展中心",
+    "manager": "L40"
   },
   {
-    "department_id": "l60",
-    "departmen_name": "成本中心",
-    "manager": "l60"
+    "department_id": "L60",
+    "department_name": "成本中心",
+    "manager": "L60"
   },
   {
-    "department_id": "m00",
-    "departmen_name": "資訊中心",
-    "manager": "m00"
+    "department_id": "M00",
+    "department_name": "資訊中心",
+    "manager": "M00"
   },
   {
-    "department_id": "p00",
-    "departmen_name": "環境及水資源工程部",
-    "manager": "p00"
+    "department_id": "P00",
+    "department_name": "環境及水資源工程部",
+    "manager": "P00"
   },
   {
-    "department_id": "p10",
-    "departmen_name": "環境水務部",
-    "manager": "p10"
+    "department_id": "P10",
+    "department_name": "環境水務部",
+    "manager": "P10"
   },
   {
-    "department_id": "p20",
-    "departmen_name": "環境永續部",
-    "manager": "p20"
+    "department_id": "P20",
+    "department_name": "環境永續部",
+    "manager": "P20"
   },
   {
-    "department_id": "r00",
-    "departmen_name": "機電系統工程部",
-    "manager": "r00"
+    "department_id": "R00",
+    "department_name": "機電系統工程部",
+    "manager": "R00"
   },
   {
-    "department_id": "s00",
-    "departmen_name": "結構工程部",
-    "manager": "s00"
+    "department_id": "S00",
+    "department_name": "結構工程部",
+    "manager": "S00"
   },
   {
-    "department_id": "u20",
-    "departmen_name": "工程設計群",
-    "manager": "u20"
+    "department_id": "U20",
+    "department_name": "工程設計群",
+    "manager": "U20"
   },
   {
-    "department_id": "u30",
-    "departmen_name": "工程監理群",
-    "manager": "u30"
+    "department_id": "U30",
+    "department_name": "工程監理群",
+    "manager": "U30"
   },
   {
-    "department_id": "u40",
-    "departmen_name": "總管理處",
-    "manager": "u40"
+    "department_id": "U40",
+    "department_name": "總管理處",
+    "manager": "U40"
   },
   {
-    "department_id": "u50",
-    "departmen_name": "建築及設施群",
-    "manager": "u50"
+    "department_id": "U50",
+    "department_name": "建築及設施群",
+    "manager": "U50"
   },
   {
-    "department_id": "x05",
-    "departmen_name": "數位工程發展部",
-    "manager": "x05"
+    "department_id": "X05",
+    "department_name": "數位工程發展部",
+    "manager": "X05"
   },
   {
-    "department_id": "x06",
-    "departmen_name": "淡海輕軌計畫監造專案",
-    "manager": "x06"
+    "department_id": "X06",
+    "department_name": "淡海輕軌計畫監造專案",
+    "manager": "X06"
   },
   {
-    "department_id": "x08",
-    "departmen_name": "安坑輕軌計畫監造專案",
-    "manager": "x08"
+    "department_id": "X08",
+    "department_name": "安坑輕軌計畫監造專案",
+    "manager": "X08"
   },
   {
-    "department_id": "x09",
-    "departmen_name": "先進技術中心",
-    "manager": "x09"
+    "department_id": "X09",
+    "department_name": "先進技術中心",
+    "manager": "X09"
   },
   {
-    "department_id": "x10",
-    "departmen_name": "塭仔圳市地重劃公共工程專案管理與監造專案",
-    "manager": "x10"
+    "department_id": "X10",
+    "department_name": "塭仔圳市地重劃公共工程專案管理與監造專案",
+    "manager": "X10"
   },
   {
-    "department_id": "x12",
-    "departmen_name": "萬大果菜市場專案",
-    "manager": "x12"
+    "department_id": "X12",
+    "department_name": "萬大果菜市場專案",
+    "manager": "X12"
   }
 ]

database/seeders/DatabaseSeeder.php

@@ -48,7 +48,7 @@ class DatabaseSeeder extends Seeder
         $this->call([
             ActivitySeeder::class,
             CheckInSeeder::class,
-            // PrizeSeeder::class,
+            PrizeSeeder::class,
             // RecipientsSeeder::class,
             DepartmentSeeder::class,
         ]);

resources/js/src/views/Draw.vue

@@ -4,7 +4,7 @@
       <b-col md="6">
         <b-card title="獎項列表" style="height:75vh;">
           <b-table responsive hover :items="getPrizeList(prizeList)" bordered :fields="fields" @row-clicked="click"
-            v-b-modal.modal-center style="max-height: 65vh; overflow: auto;">
+            style="max-height: 65vh; overflow: auto;">
             <template #cell(ICON)="data" class="text-center">
               <div class="text-center">
                 <feather-icon :icon="data.value" />
@@ -14,27 +14,54 @@
         </b-card>
       </b-col>
 
-      <b-modal id="modal-center" centered title="抽獎" cancel-variant="outline-secondary" cancel-title="Close"
-        :ok-only="draw_zero" ok-title="Accept" no-stacking @ok="showMsgBoxOne">
-        <div v-if="draw_zero">
-          <label>獎品數量以抽完</label>
-        </div>
-        <div v-else>
-          <label>獎品:</label>
-          <b-form-input v-model="prize" :disabled=true />
-          <br>
-          <label>地區: </label>
-          <v-select multiple v-model="region" :options="regionOption" />
-          <br>
-          <label>數量: </label>
-          <b-form-spinbutton v-model="drawNumber" min="1" :max=drawMax />
-          <b-button v-b-modal.modal-test variant="primary">111</b-button>
-        </div>
+      <b-modal ref="draw-modal" centered title="抽獎" no-stacking hide-footer>
+        <label>獎品:</label>
+        <b-form-input v-model="prize" :disabled=true />
+        <br>
+        <label>地區: </label>
+        <v-select multiple v-model="region" :options="regionOption" />
+        <br>
+        <label>數量: </label>
+        <b-form-spinbutton v-model="drawNumber" min="1" :max=drawMax />
+
+        <b-button v-ripple.400="'rgba(255, 255, 255, 0.15)'" class="mt-3" variant="outline-secondary" block
+          @click="hideModal">
+          Close
+        </b-button>
+        <b-button v-ripple.400="'rgba(255, 255, 255, 0.15)'" class="mt-2" variant="outline-primary" block
+          v-b-modal.draw-animation @click="draw">
+          Accept
+        </b-button>
+
+      </b-modal>
+
+      <b-modal ref="draw-error" centered title="抽獎" no-stacking hide-footer>
+        <b-card-text class="my-1 text-center">
+          獎品數量以抽完
+        </b-card-text>
+        <b-button v-ripple.400="'rgba(255, 255, 255, 0.15)'" class="mt-3" variant="outline-secondary" block
+          @click="hideModal">
+          Close
+        </b-button>
       </b-modal>
 
-      <b-modal id="modal-test" centered title="XXX" cancel-variant="outline-secondary" cancel-title="Close" ok-only
-        ok-title="Accept">
-        <label>XXX</label>
+      <b-modal ref="draw-animation" id="draw-animation" title="抽獎" centered no-stacking hide-footer>
+        <br>
+        <div v-for="(item, index) in drawList" :class=counterId(index)>
+          <div>
+            <i>部門</i>
+          </div>
+          <i>0</i>
+          <i>0</i>
+          <i>0</i>
+          <i>0</i>
+          <span></span>
+        </div>
+
+        <b-button v-ripple.400="'rgba(255, 255, 255, 0.15)'" class="mt-2" variant="outline-primary" block
+          @click="hideModal">
+          Accept
+        </b-button>
       </b-modal>
 
       <b-col md="6">
@@ -58,6 +85,7 @@ import { BRow, BCol, BCard, BCardText, BLink, BTable, BModal, BFormInput, BFormS
 import useJwt from '@/auth/jwt/useJwt'
 import { VueGoodTable } from 'vue-good-table'
 import vSelect from 'vue-select'
+import Ripple from 'vue-ripple-directive'
 import 'vue-select/dist/vue-select.css';
 
 export default {
@@ -75,11 +103,15 @@ export default {
     VueGoodTable,
     vSelect,
   },
+  directives: {
+    Ripple,
+  },
   data() {
     return {
       activity: [],
       userList: [],
       userIdList: [],
+      departmentList: [],
       prizeList: [],
       recipientsList: [],
 
@@ -91,7 +123,9 @@ export default {
 
       prize: '',
       prizeId: '',
-      drawUsers: [],
+      drawList: [],
+
+      departments: ["行政管理部", "行政管理部庶務科", "人力資源科", "行政管理部文書科", "南區辦事處", "中區辦事處", "工程管理一部", "工程管理二部", "c3工地", "發展與企畫部", "工程製圖科", "工務部", "大地工程部", "財務部", "六張犁工地", "中華郵政工地", "法務部調查局工地", "三峽國光工地", "河濱高中工地", "運輸及土木工程部", "城鄉發展部", "軌道工程部", "董事長室", "總經理室", "企業發展中心", "成本中心", "資訊中心", "環境及水資源工程部", "環境水務部", "環境永續部", "機電系統工程部", "結構工程部", "工程設計群", "工程監理群", "總管理處", "建築及設施群", "數位工程發展部", "淡海輕軌計畫監造專案", "安坑輕軌計畫監造專案", "先進技術中心", "塭仔圳市地重劃公共工程專案管理與監造專案", "萬大果菜市場專案"]
     }
   },
   created() {
@@ -113,15 +147,10 @@ export default {
     useJwt.postData('/api/recipients/index_by_activity', { activityId: this.activity.id }).then(res => {
       this.recipientsList = res.data;
     });
-  },
-  computed: {
-    draw_zero() {
-      if (this.drawMax == 0) {
-        return true;
-      } else {
-        return false;
-      }
-    }
+
+    useJwt.postData('/api/department/index').then(res => {
+      this.departmentList = res.data;
+    });
   },
   methods: {
     getPrizeList(prizeList) {
@@ -152,16 +181,24 @@ export default {
       this.prizeId = params.id;
       this.drawMax = params["數量"];
       this.drawNumber = 1;
+      if (this.drawMax == 0) {
+        this.showDrawError();
+      } else {
+        this.showDraw();
+      }
+    },
+    counterId(id) {
+      return "counter_" + id;
     },
     draw() {
       useJwt.postData('/api/check_in/draw_by_region', { deadline: this.activity.deadline, region: this.region, number: this.drawNumber }).then(res => {
         res.data.forEach(element => {
-          console.log(element);
+          this.drawList.push({ userId: element.user_id, userName: element.name, department: this.departmentList[element.department_id] });
           useJwt.postData('/api/prize/draw', { prizeId: this.prizeId }).then(p => {
             if (p.data) {
+              this.count(this.drawList);
               useJwt.postData('/api/recipients/store', { prizeId: this.prizeId, userId: element.user_id }).then(r => {
                 console.log(r.data);
-                this.updateDataset();
               });
             } else {
               console.log(p.data);
@@ -187,38 +224,56 @@ export default {
         + ':' + d.getMinutes().toString().padStart(2, '0')
         + ':' + d.getSeconds().toString().padStart(2, '0');
     },
-    showMsgBoxOne() {
-      this.boxOne = ''
-      this.$bvModal
-        .msgBoxOk('得獎者是...', {
-          title: '得獎者是...',
-          cancelVariant: 'outline-secondary',
-          headerClass: 'p-2 border-bottom-0',
-          footerClass: 'p-2 border-top-0',
-          okVariant: 'success',
-          centered: true
-        })
-        .then(value => {
-          return
-        })
-
-      h('div', { class: ['foobar'] }, [
-        h('p', { class: ['text-center'] }, [
-          ' Flashy ',
-          h('strong', 'msgBoxOk'),
-          ' message ',
-        ]),
-        h('p', { class: ['text-center'] }, [h('b-spinner')]),
-        h('b-img', {
-          props: {
-            src: 'https://picsum.photos/id/20/250/250',
-            thumbnail: true,
-            center: true,
-            fluid: true, rounded: 'circle'
-          }
-        })
-      ])
+    showDraw() {
+      this.$refs['draw-modal'].show();
+    },
+    showDrawError() {
+      this.$refs['draw-error'].show();
+    },
+    hideModal() {
+      this.$refs['draw-modal'].hide();
+      this.$refs['draw-error'].hide();
+      this.$refs['draw-animation'].hide();
+      this.updateDataset();
     },
+    count(drawUserList) {
+      var departments = this.departments;
+      var numbers = "0123456789"
+      var string = numbers;
+      
+      drawUserList.forEach((element, index) => {
+        var deps = document.querySelectorAll(".counter_" + index + " > div > i");
+        var allCounters = document.querySelectorAll(".counter_" + index + " > i");
+
+        // TODO: 抽獎時間重疊
+        deps.forEach(function (el) {
+          var duration = 2000;
+          var interval = setInterval(function () {
+            el.innerText = departments[Math.floor(Math.random() * departments.length)];
+            duration = duration - 50;
+            if (duration <= 0) {
+              clearInterval(interval);
+              el.innerText = element.department;
+            }
+          }, 50);
+        });
+        allCounters.forEach((el, i) => {
+          var duration = 4000 + i * 1000;
+          var interval = setInterval(e => {
+            el.innerText = string.charAt(Math.random() * string.length);
+            duration = duration - 50;
+            if (duration <= 0) {
+              clearInterval(interval);
+              el.innerText = element.userId[i];
+              if (i == 3) {
+                document.querySelectorAll(".counter_" + index + " > span")[0].innerText = element.userName;
+              }
+            }
+          }, 50);
+        });
+      });
+    },
+
   },
 }
 </script>

routes/api.php

@@ -13,6 +13,7 @@ use Illuminate\Support\Facades\Hash;
 use App\Http\Controllers\PrizeController;
 use App\Http\Controllers\CheckInController;
 use App\Http\Controllers\RecipientsController;
+use App\Http\Controllers\DepartmentController;
 
 /*
 |--------------------------------------------------------------------------
@@ -111,6 +112,7 @@ Route::middleware(['auth:sanctum', 'abilities:Admin'])->group(function () {
     Route::post('/user/show', [UserController::class, 'show']);
 });
 Route::post('/user/index', [UserController::class, 'index']);
+Route::post('/department/index', [DepartmentController::class, 'index']);
 Route::post('/prize/index', [PrizeController::class, 'index']);
 Route::post('/check_in/index_by_activity', [CheckInController::class, 'index_by_activity']);
 Route::post('/prize/index_by_activity', [PrizeController::class, 'index_by_activity']);