兌獎功能完成

app/Http/Controllers/ActivityController.php

@@ -3,8 +3,18 @@
 namespace App\Http\Controllers;
 
 use App\Models\Activity;
+use App\Models\User;
+use App\Models\Recipients;
+use App\Models\Prize;
 use App\Http\Requests\StoreActivityRequest;
 use App\Http\Requests\UpdateActivityRequest;
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use PhpOffice\PhpSpreadsheet\Spreadsheet;
+use PhpOffice\PhpSpreadsheet\Reader\IReader;
+use PhpOffice\PhpSpreadsheet\Reader\Xlsx;
+use PhpOffice\PhpSpreadsheet\Reader\Xls;
+use PhpOffice\PhpSpreadsheet\IOFactory;
 
 class ActivityController extends Controller
 {
@@ -92,4 +102,47 @@ class ActivityController extends Controller
     {
         //
     }
+
+    public function sql(Request $request)
+    {
+        //
+        $inputFileName = "./test.xlsx";
+        $spreadsheet = \PhpOffice\PhpSpreadsheet\IOFactory::load($inputFileName);
+
+        return $spreadsheet;
+    }
+
+    public function claim(Request $request)
+    {
+        $prize = '';
+        $isClaimed = false;
+        $user_id = $request->user_id;
+        $user = User::where('user_id', '=', $user_id)->get()[0];
+        if (Recipients::where('user_id', '=', $user_id)->exists()) {
+            $isRecipients = true;
+            $recipients = Recipients::where('user_id', '=', $user_id)->get()[0];
+            $prize_id = $recipients->prize_id;
+            $isClaimed = $recipients->is_claimed;
+            $prize = Prize::where('id', '=', $prize_id)->get()[0]->name;
+        } else {
+            $isRecipients = false;
+        }
+
+        $response = [
+            'user' => $user,
+            'isRecipients' => $isRecipients,
+            'isClaimed' => $isClaimed,
+            'prize' => $prize,
+        ];
+
+        return response($response, 201);
+    }
+
+    public function isClaimed(UpdateActivityRequest $request)
+    {
+        $recipient = Recipients::where('user_id', '=', $request->user_id)->get()[0];
+        $recipient->is_claimed = true;
+        $recipient->save();
+        return $recipient;
+    }
 }

app/Http/Requests/UpdateActivityRequest.php

@@ -13,7 +13,7 @@ class UpdateActivityRequest extends FormRequest
      */
     public function authorize()
     {
-        return false;
+        return true;
     }
 
     /**
@@ -25,6 +25,7 @@ class UpdateActivityRequest extends FormRequest
     {
         return [
             //
+            'user_id' => 'required',
         ];
     }
 }

composer.json

@@ -12,6 +12,7 @@
         "laravel/framework": "^9.0",
         "laravel/sanctum": "^2.14",
         "laravel/tinker": "^2.7",
+        "phpoffice/phpspreadsheet": "^1.27",
         "pusher/pusher-php-server": "^7.2"
     },
     "require-dev": {

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": "1e1beb83631da7171c2e552fc863474f",
+    "content-hash": "134f1e7443cb48bfbdff07ccc08111d5",
     "packages": [
         {
             "name": "asm89/stack-cors",
@@ -489,6 +489,67 @@
             ],
             "time": "2022-06-18T20:57:19+00:00"
         },
+        {
+            "name": "ezyang/htmlpurifier",
+            "version": "v4.16.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/ezyang/htmlpurifier.git",
+                "reference": "523407fb06eb9e5f3d59889b3978d5bfe94299c8"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/ezyang/htmlpurifier/zipball/523407fb06eb9e5f3d59889b3978d5bfe94299c8",
+                "reference": "523407fb06eb9e5f3d59889b3978d5bfe94299c8",
+                "shasum": ""
+            },
+            "require": {
+                "php": "~5.6.0 || ~7.0.0 || ~7.1.0 || ~7.2.0 || ~7.3.0 || ~7.4.0 || ~8.0.0 || ~8.1.0 || ~8.2.0"
+            },
+            "require-dev": {
+                "cerdic/css-tidy": "^1.7 || ^2.0",
+                "simpletest/simpletest": "dev-master"
+            },
+            "suggest": {
+                "cerdic/css-tidy": "If you want to use the filter 'Filter.ExtractStyleBlocks'.",
+                "ext-bcmath": "Used for unit conversion and imagecrash protection",
+                "ext-iconv": "Converts text to and from non-UTF-8 encodings",
+                "ext-tidy": "Used for pretty-printing HTML"
+            },
+            "type": "library",
+            "autoload": {
+                "files": [
+                    "library/HTMLPurifier.composer.php"
+                ],
+                "psr-0": {
+                    "HTMLPurifier": "library/"
+                },
+                "exclude-from-classmap": [
+                    "/library/HTMLPurifier/Language/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "LGPL-2.1-or-later"
+            ],
+            "authors": [
+                {
+                    "name": "Edward Z. Yang",
+                    "email": "admin@htmlpurifier.org",
+                    "homepage": "http://ezyang.com"
+                }
+            ],
+            "description": "Standards compliant HTML filter written in PHP",
+            "homepage": "http://htmlpurifier.org/",
+            "keywords": [
+                "html"
+            ],
+            "support": {
+                "issues": "https://github.com/ezyang/htmlpurifier/issues",
+                "source": "https://github.com/ezyang/htmlpurifier/tree/v4.16.0"
+            },
+            "time": "2022-09-18T07:06:19+00:00"
+        },
         {
             "name": "fruitcake/laravel-cors",
             "version": "v2.2.0",
@@ -1887,6 +1948,191 @@
             ],
             "time": "2022-04-17T13:12:02+00:00"
         },
+        {
+            "name": "maennchen/zipstream-php",
+            "version": "v2.4.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/maennchen/ZipStream-PHP.git",
+                "reference": "3fa72e4c71a43f9e9118752a5c90e476a8dc9eb3"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/maennchen/ZipStream-PHP/zipball/3fa72e4c71a43f9e9118752a5c90e476a8dc9eb3",
+                "reference": "3fa72e4c71a43f9e9118752a5c90e476a8dc9eb3",
+                "shasum": ""
+            },
+            "require": {
+                "ext-mbstring": "*",
+                "myclabs/php-enum": "^1.5",
+                "php": "^8.0",
+                "psr/http-message": "^1.0"
+            },
+            "require-dev": {
+                "ext-zip": "*",
+                "friendsofphp/php-cs-fixer": "^3.9",
+                "guzzlehttp/guzzle": "^6.5.3 || ^7.2.0",
+                "mikey179/vfsstream": "^1.6",
+                "php-coveralls/php-coveralls": "^2.4",
+                "phpunit/phpunit": "^8.5.8 || ^9.4.2",
+                "vimeo/psalm": "^5.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "ZipStream\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Paul Duncan",
+                    "email": "pabs@pablotron.org"
+                },
+                {
+                    "name": "Jonatan Männchen",
+                    "email": "jonatan@maennchen.ch"
+                },
+                {
+                    "name": "Jesse Donat",
+                    "email": "donatj@gmail.com"
+                },
+                {
+                    "name": "András Kolesár",
+                    "email": "kolesar@kolesar.hu"
+                }
+            ],
+            "description": "ZipStream is a library for dynamically streaming dynamic zip files from PHP without writing to the disk at all on the server.",
+            "keywords": [
+                "stream",
+                "zip"
+            ],
+            "support": {
+                "issues": "https://github.com/maennchen/ZipStream-PHP/issues",
+                "source": "https://github.com/maennchen/ZipStream-PHP/tree/v2.4.0"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/maennchen",
+                    "type": "github"
+                },
+                {
+                    "url": "https://opencollective.com/zipstream",
+                    "type": "open_collective"
+                }
+            ],
+            "time": "2022-12-08T12:29:14+00:00"
+        },
+        {
+            "name": "markbaker/complex",
+            "version": "3.0.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/MarkBaker/PHPComplex.git",
+                "reference": "95c56caa1cf5c766ad6d65b6344b807c1e8405b9"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/MarkBaker/PHPComplex/zipball/95c56caa1cf5c766ad6d65b6344b807c1e8405b9",
+                "reference": "95c56caa1cf5c766ad6d65b6344b807c1e8405b9",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^7.2 || ^8.0"
+            },
+            "require-dev": {
+                "dealerdirect/phpcodesniffer-composer-installer": "dev-master",
+                "phpcompatibility/php-compatibility": "^9.3",
+                "phpunit/phpunit": "^7.0 || ^8.0 || ^9.0",
+                "squizlabs/php_codesniffer": "^3.7"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Complex\\": "classes/src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Mark Baker",
+                    "email": "mark@lange.demon.co.uk"
+                }
+            ],
+            "description": "PHP Class for working with complex numbers",
+            "homepage": "https://github.com/MarkBaker/PHPComplex",
+            "keywords": [
+                "complex",
+                "mathematics"
+            ],
+            "support": {
+                "issues": "https://github.com/MarkBaker/PHPComplex/issues",
+                "source": "https://github.com/MarkBaker/PHPComplex/tree/3.0.2"
+            },
+            "time": "2022-12-06T16:21:08+00:00"
+        },
+        {
+            "name": "markbaker/matrix",
+            "version": "3.0.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/MarkBaker/PHPMatrix.git",
+                "reference": "728434227fe21be27ff6d86621a1b13107a2562c"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/MarkBaker/PHPMatrix/zipball/728434227fe21be27ff6d86621a1b13107a2562c",
+                "reference": "728434227fe21be27ff6d86621a1b13107a2562c",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^7.1 || ^8.0"
+            },
+            "require-dev": {
+                "dealerdirect/phpcodesniffer-composer-installer": "dev-master",
+                "phpcompatibility/php-compatibility": "^9.3",
+                "phpdocumentor/phpdocumentor": "2.*",
+                "phploc/phploc": "^4.0",
+                "phpmd/phpmd": "2.*",
+                "phpunit/phpunit": "^7.0 || ^8.0 || ^9.0",
+                "sebastian/phpcpd": "^4.0",
+                "squizlabs/php_codesniffer": "^3.7"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Matrix\\": "classes/src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Mark Baker",
+                    "email": "mark@demon-angel.eu"
+                }
+            ],
+            "description": "PHP Class for working with matrices",
+            "homepage": "https://github.com/MarkBaker/PHPMatrix",
+            "keywords": [
+                "mathematics",
+                "matrix",
+                "vector"
+            ],
+            "support": {
+                "issues": "https://github.com/MarkBaker/PHPMatrix/issues",
+                "source": "https://github.com/MarkBaker/PHPMatrix/tree/3.0.1"
+            },
+            "time": "2022-12-02T22:17:43+00:00"
+        },
         {
             "name": "mongodb/mongodb",
             "version": "1.15.0",
@@ -2059,6 +2305,69 @@
             ],
             "time": "2022-07-24T11:55:47+00:00"
         },
+        {
+            "name": "myclabs/php-enum",
+            "version": "1.8.4",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/myclabs/php-enum.git",
+                "reference": "a867478eae49c9f59ece437ae7f9506bfaa27483"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/myclabs/php-enum/zipball/a867478eae49c9f59ece437ae7f9506bfaa27483",
+                "reference": "a867478eae49c9f59ece437ae7f9506bfaa27483",
+                "shasum": ""
+            },
+            "require": {
+                "ext-json": "*",
+                "php": "^7.3 || ^8.0"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^9.5",
+                "squizlabs/php_codesniffer": "1.*",
+                "vimeo/psalm": "^4.6.2"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "MyCLabs\\Enum\\": "src/"
+                },
+                "classmap": [
+                    "stubs/Stringable.php"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "PHP Enum contributors",
+                    "homepage": "https://github.com/myclabs/php-enum/graphs/contributors"
+                }
+            ],
+            "description": "PHP Enum implementation",
+            "homepage": "http://github.com/myclabs/php-enum",
+            "keywords": [
+                "enum"
+            ],
+            "support": {
+                "issues": "https://github.com/myclabs/php-enum/issues",
+                "source": "https://github.com/myclabs/php-enum/tree/1.8.4"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/mnapoli",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/myclabs/php-enum",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2022-08-04T09:53:51+00:00"
+        },
         {
             "name": "nesbot/carbon",
             "version": "2.64.0",
@@ -2586,6 +2895,111 @@
             },
             "time": "2022-09-26T03:40:35+00:00"
         },
+        {
+            "name": "phpoffice/phpspreadsheet",
+            "version": "1.27.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/PHPOffice/PhpSpreadsheet.git",
+                "reference": "eeb8582f9cabf5a7f4ef78015691163233a1834f"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/PHPOffice/PhpSpreadsheet/zipball/eeb8582f9cabf5a7f4ef78015691163233a1834f",
+                "reference": "eeb8582f9cabf5a7f4ef78015691163233a1834f",
+                "shasum": ""
+            },
+            "require": {
+                "ext-ctype": "*",
+                "ext-dom": "*",
+                "ext-fileinfo": "*",
+                "ext-gd": "*",
+                "ext-iconv": "*",
+                "ext-libxml": "*",
+                "ext-mbstring": "*",
+                "ext-simplexml": "*",
+                "ext-xml": "*",
+                "ext-xmlreader": "*",
+                "ext-xmlwriter": "*",
+                "ext-zip": "*",
+                "ext-zlib": "*",
+                "ezyang/htmlpurifier": "^4.15",
+                "maennchen/zipstream-php": "^2.1",
+                "markbaker/complex": "^3.0",
+                "markbaker/matrix": "^3.0",
+                "php": "^7.4 || ^8.0",
+                "psr/http-client": "^1.0",
+                "psr/http-factory": "^1.0",
+                "psr/simple-cache": "^1.0 || ^2.0 || ^3.0"
+            },
+            "require-dev": {
+                "dealerdirect/phpcodesniffer-composer-installer": "dev-master",
+                "dompdf/dompdf": "^1.0 || ^2.0",
+                "friendsofphp/php-cs-fixer": "^3.2",
+                "mitoteam/jpgraph": "^10.2.4",
+                "mpdf/mpdf": "^8.1.1",
+                "phpcompatibility/php-compatibility": "^9.3",
+                "phpstan/phpstan": "^1.1",
+                "phpstan/phpstan-phpunit": "^1.0",
+                "phpunit/phpunit": "^8.5 || ^9.0",
+                "squizlabs/php_codesniffer": "^3.7",
+                "tecnickcom/tcpdf": "^6.5"
+            },
+            "suggest": {
+                "dompdf/dompdf": "Option for rendering PDF with PDF Writer",
+                "ext-intl": "PHP Internationalization Functions",
+                "mitoteam/jpgraph": "Option for rendering charts, or including charts with PDF or HTML Writers",
+                "mpdf/mpdf": "Option for rendering PDF with PDF Writer",
+                "tecnickcom/tcpdf": "Option for rendering PDF with PDF Writer"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "PhpOffice\\PhpSpreadsheet\\": "src/PhpSpreadsheet"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Maarten Balliauw",
+                    "homepage": "https://blog.maartenballiauw.be"
+                },
+                {
+                    "name": "Mark Baker",
+                    "homepage": "https://markbakeruk.net"
+                },
+                {
+                    "name": "Franck Lefevre",
+                    "homepage": "https://rootslabs.net"
+                },
+                {
+                    "name": "Erik Tilt"
+                },
+                {
+                    "name": "Adrien Crivelli"
+                }
+            ],
+            "description": "PHPSpreadsheet - Read, Create and Write Spreadsheet documents in PHP - Spreadsheet engine",
+            "homepage": "https://github.com/PHPOffice/PhpSpreadsheet",
+            "keywords": [
+                "OpenXML",
+                "excel",
+                "gnumeric",
+                "ods",
+                "php",
+                "spreadsheet",
+                "xls",
+                "xlsx"
+            ],
+            "support": {
+                "issues": "https://github.com/PHPOffice/PhpSpreadsheet/issues",
+                "source": "https://github.com/PHPOffice/PhpSpreadsheet/tree/1.27.0"
+            },
+            "time": "2023-01-24T20:07:45+00:00"
+        },
         {
             "name": "phpoption/phpoption",
             "version": "1.9.0",

database/seeders/RecipientsSeeder.php

@@ -5,6 +5,8 @@ namespace Database\Seeders;
 use Illuminate\Database\Console\Seeds\WithoutModelEvents;
 use Illuminate\Database\Seeder;
 use \App\Models\Recipients;
+use \App\Models\Prize;
+use \App\Models\User;
 
 class RecipientsSeeder extends Seeder
 {
@@ -15,21 +17,14 @@ class RecipientsSeeder extends Seeder
      */
     public function run()
     {
-        Recipients::insert([
-            [
-                'prize_id' => '0',
-                'user_id' => '3606',
-                'is_claimed' => true,
-                'created_at' => now(),
-                'updated_at' => now(),
-            ],
-            [
-                'prize_id' => '1',
-                'user_id' => '3606',
-                'is_claimed' => false,
-                'created_at' => now(),
-                'updated_at' => now(),
-            ],
-        ]);
+        Recipients::truncate();
+        $prizes = Prize::all();
+        foreach ($prizes as $prize) {
+            Recipients::create([
+                'prize_id' => $prize->id,
+                'user_id' => User::all()->random()->user_id,
+                'is_claimed' => false
+            ]);
+        }
     }
 }

package.json

@@ -94,6 +94,7 @@
     "vue-tree-halower": "^1.8.3",
     "vue2-leaflet": "^2.7.1",
     "vuedraggable": "^2.24.3",
-    "vuex": "^3.6.2"
+    "vuex": "^3.6.2",
+    "xlsx": "^0.18.5"
   }
 }

resources/js/src/router/config.js

@@ -45,6 +45,19 @@ export const settings = {
                 requiresAuth: true,
             },
         },
+        {
+            path: '/activityPage',
+            name: 'activityPage',
+            component: () => import('@/views/Activities/ActivityPage.vue'),
+            meta: {
+                pageTitle: '活動功能頁面',
+                breadcrumb: [{
+                    text: '活動功能頁面',
+                    active: true,
+                }, ],
+                requiresAuth: true,
+            },
+        },
         {
             path: '/claim',
             name: 'claim',

resources/js/src/views/Activities/ActivityAdd.vue

@@ -1,55 +1,64 @@
 <template>
-    <b-card-code title="Horizontal Form">
-        <b-form @submit.prevent>
-            <b-row>
-                <b-col cols="12">
-                    <b-form-group label="活動名稱" label-for="activity-name" label-cols-md="4">
-                        <b-form-input v-model="activity_name" id="activity-name" placeholder="活動名稱" />
-                    </b-form-group>
-                </b-col>
-                <b-col cols="12">
-                    <b-form-group label="活動時間" label-for="date" label-cols-md="4">
-                        <b-form-input v-model="date" id="date" type="date" placeholder="活動時間" />
-                    </b-form-group>
-                </b-col>
-                <b-col cols="12">
-                    <b-form-group label="活動地點" label-for="place" label-cols-md="4">
-                        <b-form-input v-model="place" id="place" placeholder="活動地點" />
-                    </b-form-group>
-                </b-col>
-                <b-col cols="12">
-                    <b-form-group label="報名截止時間" label-for="deadline" label-cols-md="4">
-                        <b-form-input v-model="deadline" id="deadline" type="time" placeholder="報名截止時間" />
-                    </b-form-group>
-                </b-col>
+    <div>
+        <b-card-code title="Horizontal Form">
+            <b-form @submit.prevent>
+                <b-row>
+                    <b-col cols="12">
+                        <b-form-group label="活動名稱" label-for="activity-name" label-cols-md="4">
+                            <b-form-input v-model="activity_name" id="activity-name" placeholder="活動名稱" />
+                        </b-form-group>
+                    </b-col>
+                    <b-col cols="12">
+                        <b-form-group label="活動時間" label-for="date" label-cols-md="4">
+                            <b-form-input v-model="date" id="date" type="date" placeholder="活動時間" />
+                        </b-form-group>
+                    </b-col>
+                    <b-col cols="12">
+                        <b-form-group label="活動地點" label-for="place" label-cols-md="4">
+                            <b-form-input v-model="place" id="place" placeholder="活動地點" />
+                        </b-form-group>
+                    </b-col>
+                    <b-col cols="12">
+                        <b-form-group label="報名截止時間" label-for="deadline" label-cols-md="4">
+                            <b-form-input v-model="deadline" id="deadline" type="time" placeholder="報名截止時間" />
+                        </b-form-group>
+                    </b-col>
 
-                <!-- submit and reset -->
-                <b-col offset-md="4">
-                    <b-button v-ripple.400="'rgba(255, 255, 255, 0.15)'" type="submit" variant="primary" class="mr-1"
-                        @click="postData">
-                        送出
-                    </b-button>
-                    <b-button v-ripple.400="'rgba(186, 191, 199, 0.15)'" type="reset" variant="outline-secondary">
-                        取消
-                    </b-button>
-                </b-col>
-            </b-row>
+                    <!-- submit and reset -->
+                    <b-col offset-md="4">
+                        <b-button v-ripple.400="'rgba(255, 255, 255, 0.15)'" type="submit" variant="primary"
+                            class="mr-1" @click="postData">
+                            送出
+                        </b-button>
+                        <b-button v-ripple.400="'rgba(186, 191, 199, 0.15)'" type="reset" variant="outline-secondary">
+                            取消
+                        </b-button>
+                    </b-col>
+                </b-row>
+                <b-modal ref="confirm-modal" title="成功設定活動" centered ok-only ok-title="確認">
+                    <b-card-text>
+                        已成功設定活動資訊!
+                    </b-card-text>
+                </b-modal>
+            </b-form>
 
-        </b-form>
+            <!--TODO 匯入excel功能-->
+            <b-form-file ref="prizeList" placeholder="匯入獎項列表" drop-placeholder="Drop file here..."
+                accept=".xls, .xlsx, .csv" @change="importSQL"></b-form-file>
+            <b-form-file ref="guestList" placeholder="匯入來賓列表" drop-placeholder="Drop file here..."
+                accept=".xls, .xlsx, .csv" @change="importSQL"></b-form-file>
+
+        </b-card-code>
+    </div>
 
-        <template #code>
-            {{ codeHorizontal }}
-        </template>
-    </b-card-code>
 </template>
 
 <script>
 import BCardCode from '@core/components/b-card-code'
 import {
-    BRow, BCol, BFormGroup, BFormInput, BFormCheckbox, BForm, BButton,
+    BRow, BCol, BFormGroup, BFormInput, BFormCheckbox, BForm, BButton, BFormFile, BModal, BCardText
 } from 'bootstrap-vue'
 import Ripple from 'vue-ripple-directive'
-import { codeHorizontal } from './code'
 import useJwt from '@/auth/jwt/useJwt'
 import { getUserData } from '@/auth/utils'
 
@@ -63,6 +72,9 @@ export default {
         BFormCheckbox,
         BForm,
         BButton,
+        BFormFile,
+        BModal,
+        BCardText,
     },
     directives: {
         Ripple,
@@ -70,7 +82,6 @@ export default {
     data() {
         return {
             userData: getUserData(),
-            codeHorizontal,
             activity_name: '',
             date: '',
             place: '',
@@ -88,9 +99,17 @@ export default {
                     'deadline': this.deadline
                 }).then(response => {
                     console.log(response);
+                    this.$refs['confirm-modal'].toggle();
                 }).catch(error => {
                     console.log("error: " + error);
                 })
+        },
+        importSQL(event) {
+            useJwt.postData('/api/activity/sql', { 'file': event.target.files[0] }).then(response => {
+                console.log(response.data);
+            }).catch(error => {
+                console.log("error: " + error);
+            });
         }
     }
 }

resources/js/src/views/Activities/ActivityList.vue

@@ -1,8 +1,7 @@
 <template>
     <div>
-
-        <div class="col text-center mb-1" v-for="(activity, index) in activities" :key="index" href="#">
-            <b-button variant="success">
+        <div class="col text-center mb-1" v-for="(activity, index) in activities" :key="index">
+            <b-button variant="success" :to="{ name: 'activityPage', params: { activity: activity } }">
                 <h2>{{ activity.activity_name }}</h2>
                 <br>
                 地點： {{ activity.place }}

resources/js/src/views/Activities/ActivityPage.vue

@@ -0,0 +1,45 @@
+<template>
+    <div>
+        <div class="col text-center mb-1">
+            <b-button variant="success">報到</b-button>
+        </div>
+        <div class="col text-center mb-1">
+            <b-button variant="success">抽獎</b-button>
+        </div>
+        <div class="col text-center mb-1">
+            <b-button variant="success" :to="{ name: 'claim' }">兌獎</b-button>
+        </div>
+    </div>
+</template>
+
+<script>
+import { BCard, BCardText, BLink, BButton, BButtonGroup, BCol } from 'bootstrap-vue'
+import useJwt from '@/auth/jwt/useJwt'
+
+export default {
+    components: {
+        BCard,
+        BCardText,
+        BLink,
+        BButton,
+        BButtonGroup,
+        BCol
+    },
+    data() {
+        return {
+            activity: [],
+        }
+    },
+    created() {
+        this.activity = this.$route.params.activity;
+        console.log(this.activity);
+    },
+    methods: {
+
+    }
+}
+</script>
+
+<style>
+
+</style>

resources/js/src/views/Activities/code.js

@@ -1,980 +0,0 @@
-export const codeFeedbackHelper = `
-<template>
-  <b-form @submit.prevent>
-    <b-row>
-      <!-- username -->
-      <b-col cols="12">
-        <b-form-group
-          label="Username"
-          label-for="fh-usename"
-        >
-          <b-input-group class="input-group-merge">
-            <b-input-group-prepend is-text>
-              <feather-icon icon="UserIcon" />
-            </b-input-group-prepend>
-            <b-form-input
-              id="fh-usename"
-              placeholder="Username"
-            />
-          </b-input-group>
-        </b-form-group>
-      </b-col>
-
-      <!-- email -->
-      <b-col cols="12">
-        <b-form-group
-          label="Email"
-          label-for="fh-email"
-        >
-          <b-input-group class="input-group-merge">
-            <b-input-group-prepend is-text>
-              <feather-icon icon="MailIcon" />
-            </b-input-group-prepend>
-            <b-form-input
-              id="fh-email"
-              type="email"
-              placeholder="Email"
-            />
-          </b-input-group>
-          <b-form-text class="text-danger">
-            Enter a Valid Email
-          </b-form-text>
-        </b-form-group>
-      </b-col>
-
-      <!-- password -->
-      <b-col cols="12">
-        <b-form-group
-          label="Password"
-          label-for="fh-password"
-        >
-          <b-input-group
-            class="input-group-merge"
-            :class="validation ? 'is-valid' : 'is-invalid'"
-          >
-            <b-input-group-prepend is-text>
-              <feather-icon icon="LockIcon" />
-            </b-input-group-prepend>
-            <b-form-input
-              id="fh-password"
-              v-model="userId"
-              type="password"
-              :state="validation"
-              placeholder="Password"
-            />
-          </b-input-group>
-          <b-form-invalid-feedback :state="validation">
-            Your password must be 8-20 characters long.
-          </b-form-invalid-feedback>
-          <b-form-valid-feedback :state="validation">
-            Looks Good.
-          </b-form-valid-feedback>
-        </b-form-group>
-      </b-col>
-
-      <!-- occupation -->
-      <b-col cols="12">
-        <b-form-group label="Occupation">
-          <b-input-group
-            class="input-group-merge"
-            :class="validationOccupation ? 'is-valid' : 'is-invalid'"
-          >
-            <b-input-group-prepend is-text>
-              <feather-icon icon="LockIcon" />
-            </b-input-group-prepend>
-            <b-form-input
-              v-model="occupationID"
-              list="input-list"
-              placeholder="Occupation"
-              :state="validationOccupation"
-            />
-          </b-input-group>
-          <b-form-datalist
-            id="input-list"
-            :options="options"
-          />
-        </b-form-group>
-      </b-col>
-
-      <!-- checkbox -->
-      <b-col cols="12">
-        <b-form-group>
-          <b-form-checkbox
-            id="checkbox-8"
-            name="checkbox-8"
-            value="Remember_me"
-          >
-            Remember me
-          </b-form-checkbox>
-        </b-form-group>
-      </b-col>
-
-      <!-- submit and reset -->
-      <b-col>
-        <b-button
-          v-ripple.400="'rgba(255, 255, 255, 0.15)'"
-          type="submit"
-          variant="primary"
-          class="mr-1"
-        >
-          Submit
-        </b-button>
-        <b-button
-          v-ripple.400="'rgba(186, 191, 199, 0.15)'"
-          type="reset"
-          variant="outline-secondary"
-          @click="reset"
-        >
-          Reset
-        </b-button>
-      </b-col>
-    </b-row>
-  </b-form>
-</template>
-
-<script>
-import {
-  BRow,
-  BCol,
-  BFormGroup,
-  BFormInput,
-  BFormCheckbox,
-  BForm,
-  BButton,
-  BFormText,
-  BFormDatalist,
-  BFormInvalidFeedback,
-  BInputGroup,
-  BInputGroupPrepend,
-  BFormValidFeedback,
-} from 'bootstrap-vue'
-import Ripple from 'vue-ripple-directive'
-
-export default {
-  components: {
-    BRow,
-    BCol,
-    BFormGroup,
-    BInputGroup,
-    BInputGroupPrepend,
-    BFormInput,
-    BFormCheckbox,
-    BForm,
-    BFormText,
-    BButton,
-    BFormDatalist,
-    BFormInvalidFeedback,
-    BFormValidFeedback,
-  },
- directives: {
-    Ripple,
-  },
-  data() {
-    return {
-      options: ['Devloper', 'Manager', 'CEO', 'CTO', 'Full Stack Devloper'],
-      userId: '',
-      occupationID: '',
-    }
-  },
-  computed: {
-    validation() {
-      return this.userId.length > 4 && this.userId.length < 13
-    },
-    validationOccupation() {
-      return this.occupationID.length > 1
-    },
-  },
-  methods: {
-    reset() {
-      this.userId = ''
-      this.occupationID = ''
-    },
-  },
-}
-</script>
-`
-
-export const codeHelper = `
-<template>
-  <b-form @submit.prevent>
-    <b-row>
-
-      <!-- username -->
-      <b-col cols="12">
-        <b-form-group
-          label="Username"
-          label-for="h-username"
-        >
-          <b-form-input
-            id="h-username"
-            placeholder="Username"
-          />
-        </b-form-group>
-      </b-col>
-
-      <!-- email -->
-      <b-col cols="12">
-        <b-form-group
-          label="Email"
-          label-for="d-email"
-        >
-          <b-form-input
-            id="d-email"
-            type="email"
-            placeholder="Email"
-          />
-          <b-form-text>Enter a Valid Email</b-form-text>
-        </b-form-group>
-      </b-col>
-
-      <!-- password -->
-      <b-col cols="12">
-        <b-form-group
-          label="Password"
-          label-for="d-password"
-        >
-          <b-form-input
-            id="d-password"
-            type="password"
-            placeholder="Password"
-          />
-          <b-form-text>Your password must be 8-20 characters long.</b-form-text>
-        </b-form-group>
-      </b-col>
-
-      <!-- occupation -->
-      <b-col cols="12">
-        <b-form-group
-          label="Occupation"
-          label-for="h-occupation"
-        >
-          <b-form-input
-            id="h-occupation"
-            list="input-list"
-            placeholder="Occupation"
-          />
-          <b-form-datalist
-            id="input-list"
-            :options="options"
-          />
-        </b-form-group>
-      </b-col>
-
-      <!-- checkbox -->
-      <b-col cols="12">
-        <b-form-group>
-          <b-form-checkbox
-            id="checkbox-9"
-            name="checkbox-9"
-            value="Remember_me"
-          >
-            Remember me
-          </b-form-checkbox>
-        </b-form-group>
-      </b-col>
-
-      <!-- submit and reset -->
-      <b-col>
-        <b-button
-          v-ripple.400="'rgba(255, 255, 255, 0.15)'"
-          type="submit"
-          variant="primary"
-          class="mr-1"
-        >
-          Submit
-        </b-button>
-        <b-button
-          v-ripple.400="'rgba(186, 191, 199, 0.15)'"
-          type="reset"
-          variant="outline-secondary"
-        >
-          Reset
-        </b-button>
-      </b-col>
-    </b-row>
-  </b-form>
-</template>
-
-<script>
-import {
-  BRow,
-  BCol,
-  BFormGroup,
-  BFormInput,
-  BFormCheckbox,
-  BForm,
-  BButton,
-  BFormText,
-  BFormDatalist,
-} from 'bootstrap-vue'
-import Ripple from 'vue-ripple-directive'
-
-export default {
-  components: {
-    BRow,
-    BCol,
-    BFormGroup,
-    BFormInput,
-    BFormCheckbox,
-    BForm,
-    BFormText,
-    BButton,
-    BFormDatalist,
-  },
-   directives: {
-    Ripple,
-  },
-  data() {
-    return {
-      options: ['Devloper', 'Manager', 'CEO', 'CTO', 'Full Stack Devloper'],
-    }
-  },
-}
-</script>
-`
-
-export const codeHorizontal = `
-<template>
-  <b-form @submit.prevent>
-    <b-row>
-      <b-col cols="12">
-        <b-form-group
-          label="First Name"
-          label-for="h-first-name"
-          label-cols-md="4"
-        >
-          <b-form-input
-            id="h-first-name"
-            placeholder="First Name"
-          />
-        </b-form-group>
-      </b-col>
-      <b-col cols="12">
-        <b-form-group
-          label="Email"
-          label-for="h-email"
-          label-cols-md="4"
-        >
-          <b-form-input
-            id="h-email"
-            type="email"
-            placeholder="Email"
-          />
-        </b-form-group>
-      </b-col>
-      <b-col cols="12">
-        <b-form-group
-          label="Mobile"
-          label-for="h-number"
-          label-cols-md="4"
-        >
-          <b-form-input
-            id="h-number"
-            type="number"
-            placeholder="Mobile"
-          />
-        </b-form-group>
-      </b-col>
-      <b-col cols="12">
-        <b-form-group
-          label="Password"
-          label-for="h-password"
-          label-cols-md="4"
-        >
-          <b-form-input
-            id="h-password"
-            type="password"
-            placeholder="Password"
-          />
-        </b-form-group>
-      </b-col>
-      <b-col
-        md="8"
-        offset-md="4"
-      >
-        <b-form-group>
-          <b-form-checkbox
-            id="checkbox-2"
-            name="checkbox-2"
-            value="Remember_me"
-          >
-            Remember me
-          </b-form-checkbox>
-        </b-form-group>
-      </b-col>
-
-      <!-- submit and reset -->
-      <b-col offset-md="4">
-        <b-button
-          v-ripple.400="'rgba(255, 255, 255, 0.15)'"
-          type="submit"
-          variant="primary"
-          class="mr-1"
-        >
-          Submit
-        </b-button>
-        <b-button
-          v-ripple.400="'rgba(186, 191, 199, 0.15)'"
-          type="reset"
-          variant="outline-secondary"
-        >
-          Reset
-        </b-button>
-      </b-col>
-    </b-row>
-
-  </b-form>
-</template>
-
-<script>
-import {
-  BRow, BCol, BFormGroup, BFormInput, BFormCheckbox, BForm, BButton,
-} from 'bootstrap-vue'
-import Ripple from 'vue-ripple-directive'
-
-export default {
-  components: {
-    BRow,
-    BCol,
-    BFormGroup,
-    BFormInput,
-    BFormCheckbox,
-    BForm,
-    BButton,
-  },
-  directives: {
-    Ripple,
-  },
-}
-</script>
-`
-
-export const codeHorizontalIcon = `
-<template>
-  <b-form @submit.prevent>
-    <b-row>
-      <b-col cols="12">
-        <b-form-group
-          label="First Name"
-          label-for="hi-first-name"
-          label-cols-md="4"
-        >
-          <b-input-group class="input-group-merge">
-            <b-input-group-prepend is-text>
-              <feather-icon icon="UserIcon" />
-            </b-input-group-prepend>
-            <b-form-input
-              id="hi-first-name"
-              placeholder="First Name"
-            />
-          </b-input-group>
-        </b-form-group>
-      </b-col>
-      <b-col cols="12">
-        <b-form-group
-          label="Email"
-          label-for="hi-email"
-          label-cols-md="4"
-        >
-          <b-input-group class="input-group-merge">
-            <b-input-group-prepend is-text>
-              <feather-icon icon="MailIcon" />
-            </b-input-group-prepend>
-            <b-form-input
-              id="hi-email"
-              type="email"
-              placeholder="Email"
-            />
-          </b-input-group>
-        </b-form-group>
-      </b-col>
-      <b-col cols="12">
-        <b-form-group
-          label="Mobile"
-          label-for="hi-number"
-          label-cols-md="4"
-        >
-          <b-input-group class="input-group-merge">
-            <b-input-group-prepend is-text>
-              <feather-icon icon="SmartphoneIcon" />
-            </b-input-group-prepend>
-            <b-form-input
-              id="hi-number"
-              type="number"
-              placeholder="Mobile"
-            />
-          </b-input-group>
-        </b-form-group>
-      </b-col>
-      <b-col cols="12">
-        <b-form-group
-          label="Password"
-          label-for="hi-password"
-          label-cols-md="4"
-        >
-          <b-input-group class="input-group-merge">
-            <b-input-group-prepend is-text>
-              <feather-icon icon="LockIcon" />
-            </b-input-group-prepend>
-            <b-form-input
-              id="hi-password"
-              type="password"
-              placeholder="Password"
-            />
-          </b-input-group>
-        </b-form-group>
-      </b-col>
-      <b-col
-        md="8"
-        offset-md="4"
-      >
-        <b-form-group>
-          <b-form-checkbox
-            id="checkbox-1"
-            name="checkbox-1"
-            value="Remember_me"
-          >
-            Remember me
-          </b-form-checkbox>
-        </b-form-group>
-      </b-col>
-
-      <!-- submit and reset -->
-      <b-col offset-md="4">
-        <b-button
-          v-ripple.400="'rgba(255, 255, 255, 0.15)'"
-          type="submit"
-          variant="primary"
-          class="mr-1"
-        >
-          Submit
-        </b-button>
-        <b-button
-          v-ripple.400="'rgba(186, 191, 199, 0.15)'"
-          type="reset"
-          variant="outline-secondary"
-        >
-          Reset
-        </b-button>
-      </b-col>
-    </b-row>
-
-  </b-form>
-</template>
-
-<script>
-import {
-  BFormGroup, BFormInput, BFormCheckbox, BForm, BButton, BInputGroup, BInputGroupPrepend, BRow, BCol,
-} from 'bootstrap-vue'
-import Ripple from 'vue-ripple-directive'
-
-export default {
-  components: {
-    BRow,
-    BCol,
-    BFormGroup,
-    BFormInput,
-    BFormCheckbox,
-    BInputGroup,
-    BInputGroupPrepend,
-    BForm,
-    BButton,
-  },
-  directives: {
-    Ripple,
-  },
-}
-</script>
-`
-
-export const codeMultipleColumn = `
-<template>
-  <b-form @submit.prevent>
-    <b-row>
-      <b-col md="6">
-        <b-form-group
-          label="First Name"
-          label-for="mc-first-name"
-        >
-          <b-form-input
-            id="mc-first-name"
-            placeholder="First Name"
-          />
-        </b-form-group>
-      </b-col>
-      <b-col md="6">
-        <b-form-group
-          label="Last Name"
-          label-for="mc-last-name"
-        >
-          <b-form-input
-            id="mc-last-name"
-            placeholder="Last Name"
-          />
-        </b-form-group>
-      </b-col>
-      <b-col md="6">
-        <b-form-group
-          label="City"
-          label-for="mc-city"
-        >
-          <b-form-input
-            id="mc-city"
-            placeholder="City"
-          />
-        </b-form-group>
-      </b-col>
-      <b-col md="6">
-        <b-form-group
-          label="Country"
-          label-for="mc-country"
-        >
-          <b-form-input
-            id="mc-country"
-            placeholder="Country"
-          />
-        </b-form-group>
-      </b-col>
-      <b-col md="6">
-        <b-form-group
-          label="Company"
-          label-for="mc-company"
-        >
-          <div class="form-label-group">
-            <b-form-input
-              id="mc-company"
-              placeholder="Company"
-            />
-          </div>
-        </b-form-group>
-      </b-col>
-      <b-col md="6">
-        <b-form-group
-          label-for="mc-email"
-          label="Email"
-        >
-          <div class="form-label-group">
-            <b-form-input
-              id="mc-email"
-              type="email"
-              placeholder="Email"
-            />
-          </div>
-        </b-form-group>
-      </b-col>
-
-      <b-col cols="12">
-        <b-form-group>
-          <b-form-checkbox
-            id="checkbox-10"
-            name="checkbox-10"
-            value="Remember_me"
-          >
-            Remember me
-          </b-form-checkbox>
-        </b-form-group>
-      </b-col>
-
-      <!-- submit and reset -->
-      <b-col>
-        <b-button
-          v-ripple.400="'rgba(255, 255, 255, 0.15)'"
-          type="submit"
-          variant="primary"
-          class="mr-1"
-        >
-          Submit
-        </b-button>
-        <b-button
-          v-ripple.400="'rgba(186, 191, 199, 0.15)'"
-          type="reset"
-          variant="outline-secondary"
-        >
-          Reset
-        </b-button>
-      </b-col>
-    </b-row>
-  </b-form>
-</template>
-
-
-<script>
-import {
-  BRow, BCol, BFormGroup, BFormInput, BFormCheckbox, BForm, BButton,
-} from 'bootstrap-vue'
-import Ripple from 'vue-ripple-directive'
-
-export default {
-  components: {
-    BRow,
-    BCol,
-    BFormGroup,
-    BFormInput,
-    BFormCheckbox,
-    BForm,
-    BButton,
-  },
-  directives: {
-    Ripple,
-  },
-}
-</script>
-`
-
-export const codeVertical = `
-<template>
-  <b-form @submit.prevent>
-    <b-row>
-
-      <!-- first name -->
-      <b-col cols="12">
-        <b-form-group
-          label="First Name"
-          label-for="v-first-name"
-        >
-          <b-form-input
-            id="v-first-name"
-            placeholder="First Name"
-          />
-        </b-form-group>
-      </b-col>
-
-      <!-- email -->
-      <b-col cols="12">
-        <b-form-group
-          label="Email"
-          label-for="v-email"
-        >
-          <b-form-input
-            id="v-email"
-            type="email"
-            placeholder="Email"
-          />
-        </b-form-group>
-      </b-col>
-
-      <!-- mobile -->
-      <b-col cols="12">
-        <b-form-group
-          label="Mobile"
-          label-for="v-mobile"
-        >
-          <b-form-input
-            id="v-mobile"
-            type="number"
-            placeholder="Mobile"
-          />
-        </b-form-group>
-      </b-col>
-
-      <!-- password -->
-      <b-col cols="12">
-        <b-form-group
-          label="Password"
-          label-for="v-password"
-        >
-          <b-form-input
-            id="v-password"
-            type="password"
-            placeholder="Password"
-          />
-        </b-form-group>
-      </b-col>
-
-      <!-- checkbox -->
-      <b-col cols="12">
-        <b-form-group>
-          <b-form-checkbox
-            id="checkbox-3"
-            name="checkbox-3"
-            value="Remember_me"
-          >
-            Remember me
-          </b-form-checkbox>
-        </b-form-group>
-      </b-col>
-
-      <!-- submit and reset -->
-      <b-col cols="12">
-        <b-button
-          v-ripple.400="'rgba(255, 255, 255, 0.15)'"
-          type="submit"
-          variant="primary"
-          class="mr-1"
-        >
-          Submit
-        </b-button>
-        <b-button
-          v-ripple.400="'rgba(186, 191, 199, 0.15)'"
-          type="reset"
-          variant="outline-secondary"
-        >
-          Reset
-        </b-button>
-      </b-col>
-    </b-row>
-  </b-form>
-</template>
-
-<script>
-import {
-  BRow, BCol, BFormGroup, BFormInput, BFormCheckbox, BForm, BButton,
-} from 'bootstrap-vue'
-import Ripple from 'vue-ripple-directive'
-
-export default {
-  components: {
-    BRow,
-    BCol,
-    BFormGroup,
-    BFormInput,
-    BFormCheckbox,
-    BForm,
-    BButton,
-  },
-  directives: {
-    Ripple,
-  },
-}
-</script>
-`
-
-export const codeVerticalIcon = `
-<template>
-  <b-form @submit.prevent>
-    <b-row>
-
-      <!-- first name -->
-      <b-col cols="12">
-        <b-form-group
-          label="First Name"
-          label-for="vi-first-name"
-        >
-          <b-input-group class="input-group-merge">
-            <b-input-group-prepend is-text>
-              <feather-icon icon="UserIcon" />
-            </b-input-group-prepend>
-            <b-form-input
-              id="vi-first-name"
-              placeholder="First Name"
-            />
-          </b-input-group>
-        </b-form-group>
-      </b-col>
-
-      <!-- email -->
-      <b-col cols="12">
-        <b-form-group
-          label="Email"
-          label-for="vi-email"
-        >
-          <b-input-group class="input-group-merge">
-            <b-input-group-prepend is-text>
-              <feather-icon icon="MailIcon" />
-            </b-input-group-prepend>
-            <b-form-input
-              id="vi-email"
-              type="email"
-              placeholder="Email"
-            />
-          </b-input-group>
-        </b-form-group>
-      </b-col>
-
-      <!-- mobile -->
-      <b-col cols="12">
-        <b-form-group
-          label="Mobile"
-          label-for="vi-mobile"
-        >
-          <b-input-group class="input-group-merge">
-            <b-input-group-prepend is-text>
-              <feather-icon icon="SmartphoneIcon" />
-            </b-input-group-prepend>
-            <b-form-input
-              id="vi-mobile"
-              type="number"
-              placeholder="Mobile"
-            />
-          </b-input-group>
-        </b-form-group>
-      </b-col>
-
-      <!-- password -->
-      <b-col cols="12">
-        <b-form-group
-          label="Password"
-          label-for="vi-password"
-        >
-          <b-input-group class="input-group-merge">
-            <b-input-group-prepend is-text>
-              <feather-icon icon="LockIcon" />
-            </b-input-group-prepend>
-            <b-form-input
-              id="vi-password"
-              type="password"
-              placeholder="Password"
-            />
-          </b-input-group>
-        </b-form-group>
-      </b-col>
-
-      <!-- checkbox -->
-      <b-col cols="12">
-        <b-form-group>
-          <b-form-checkbox
-            id="checkbox-4"
-            name="checkbox-4"
-            value="Remember_me"
-          >
-            Remember me
-          </b-form-checkbox>
-        </b-form-group>
-      </b-col>
-
-      <!-- reset and submit -->
-      <b-col cols="12">
-        <b-button
-          v-ripple.400="'rgba(255, 255, 255, 0.15)'"
-          type="submit"
-          variant="primary"
-          class="mr-1"
-        >
-          Submit
-        </b-button>
-        <b-button
-          v-ripple.400="'rgba(186, 191, 199, 0.15)'"
-          type="reset"
-          variant="outline-secondary"
-        >
-          Reset
-        </b-button>
-      </b-col>
-    </b-row>
-  </b-form>
-</template>
-
-<script>
-import {
-  BRow, BCol, BFormGroup, BFormInput, BFormCheckbox, BForm, BButton, BInputGroup, BInputGroupPrepend,
-} from 'bootstrap-vue'
-import Ripple from 'vue-ripple-directive'
-
-export default {
-  components: {
-    BRow,
-    BCol,
-    BFormGroup,
-    BFormInput,
-    BFormCheckbox,
-    BInputGroup,
-    BInputGroupPrepend,
-    BForm,
-    BButton,
-  },
-  directives: {
-    Ripple,
-  },
-}
-</script>
-`

resources/js/src/views/PrizeClaim.vue

@@ -1,17 +1,117 @@
 <template>
+    <div>
+        <b-card title="員工編號輸入">
+            <b-form-input v-model="input" @keydown.native="test_keydown_handler"></b-form-input>
+        </b-card>
 
-</template>
+        <b-card title="中獎人員確認">
+            <b-media no-body>
+                <b-media-aside>
+                    <b-img :src="'/images/profile-picture/' + user.user_id + '.jpg'" blank-color="#ccc" fluid
+                        alt="placeholder" style="width:300prox;" onerror="this.src='/images/unknown.png'" />
+                </b-media-aside>
+
+                <b-media-body class="ml-1">
+                    <h5 class="mt-0">姓名</h5>
+                    <b-card-text>{{ user.name }}</b-card-text>
+                    <h5 class="mt-0">編號</h5>
+                    <b-card-text>{{ user.user_id }}</b-card-text>
+                    <h5 class="mt-0">部門</h5>
+                    <b-card-text>{{ user.department_id }}</b-card-text>
+                </b-media-body>
+            </b-media>
+        </b-card>
 
+        <b-modal ref="true-modal" title="恭喜中獎" ok-title="確認領取" cancel-title="取消" @ok="handleOK">
+            <b-card-text>
+                恭喜中獎：{{ prize }}，請確認領獎人員是否正確。
+            </b-card-text>
+        </b-modal>
+        <b-modal ref="false-modal" title="沒有中獎" ok-only ok-title="確認">
+            <b-card-text>
+                你沒有中獎，明年再加油喔。
+            </b-card-text>
+        </b-modal>
+        <b-modal ref="wrong-id-modal" title="沒有此員工編號" ok-only ok-title="確認">
+            <b-card-text>
+                是不是輸入錯誤的員工編號或是來賓編號了呢?
+                再次確認一下喔!
+            </b-card-text>
+        </b-modal>
+        <b-modal ref="confirm-modal" title="確認領取" ok-only ok-title="確認">
+            <b-card-text>
+                以確認領取獎品，恭喜您中獎!
+            </b-card-text>
+        </b-modal>
+        <b-modal ref="already-modal" title="重複領取" ok-only ok-title="確認">
+            <b-card-text>
+                {{ user.name }}已經領過獎品了喔。
+            </b-card-text>
+        </b-modal>
+
+    </div>
+</template>
 <script>
-import { BCard, BCardText, BLink } from 'bootstrap-vue'
+import { BCard, BCardText, BButton, BMedia, BFormInput, BImg, BMediaAside, BMediaBody, BModal } from 'bootstrap-vue'
+import useJwt from '@/auth/jwt/useJwt'
 
 export default {
+    name: "websocket",
     components: {
         BCard,
         BCardText,
-        BLink,
+        BButton,
+        BMedia,
+        BFormInput,
+        BImg,
+        BMediaAside,
+        BMediaBody,
+        BModal,
+    },
+    data() {
+        return {
+            activity: [],
+            user: {},
+            input: "",
+            isRecipients: "",
+            prize: "",
+            isClaimed: false,
+        }
+    },
+    methods: {
+        test_keydown_handler(event) {
+            if (event.which === 13) {
+                useJwt.postData('/api/activity/claim', { 'user_id': this.input }).then(response => {
+                    this.user = response.data.user;
+                    this.isRecipients = response.data.isRecipients;
+                    this.prize = response.data.prize;
+                    this.isClaimed = response.data.isClaimed;
+                    if (!this.isRecipients) {
+                        this.$refs['false-modal'].toggle();
+                    } else if (this.isClaimed == 1) {
+                        this.$refs['already-modal'].toggle();
+                    } else {
+                        this.$refs['true-modal'].toggle();
+                    }
+                    this.input = "";
+                }).catch(error => {
+                    this.$refs['wrong-id-modal'].toggle();
+                    console.log(error)
+                    this.user = {};
+                });
+            }
+        },
+        handleOK() {
+            useJwt.postData('/api/activity/isClaimed', { 'user_id': this.user.user_id }).then(response => {
+                console.log(response.data);
+                this.$refs['confirm-modal'].toggle();
+            }).catch(error => {
+                console.log(error)
+            });
+        }
     },
 }
+
 </script>
 
 <style>

routes/api.php

@@ -80,6 +80,9 @@ Route::post('/index', [TemplateController::class, 'index']);
 Route::middleware('auth:sanctum')->group(function () {
     Route::post('/activity/list', [ActivityController::class, 'index']);
     Route::post('/activity/store', [ActivityController::class, 'store']);
+    Route::post('/activity/sql', [ActivityController::class, 'sql']);
+    Route::post('/activity/claim', [ActivityController::class, 'claim']);
+    Route::post('/activity/isClaimed', [ActivityController::class, 'isClaimed']);
 });
 
 Route::middleware(['auth:sanctum', 'abilities:Admin'])->group(function () {