新增報到

app/Http/Controllers/API/UserController.php

@@ -48,10 +48,14 @@ class UserController extends Controller
      * @param  int  $id
      * @return \Illuminate\Http\Response
      */
-    public function show($id)
+    public function show(Request $request,User $user)
     {
-        $results = DB::select('SELECT * FROM [permissions].[dbo].[User] WHERE [UserID] = ?', array($id));
-        return json_encode($results, JSON_UNESCAPED_UNICODE);
+        $maaUser = User::where('user_id', '=', $request->id)->get()[0];
+        $response = [
+            'user' => $maaUser,
+        ];
+
+        return response($response, 201);
     }
 
     /**

resources/js/src/navigation/vertical/index.js

@@ -7,9 +7,19 @@ export default [{
         icon: 'HomeIcon',
     },
     {
-        title: '抽獎',
-        route: 'draw',
-        icon: 'UploadIcon',
+        title: '活動抽獎系統',
+        icon: 'AwardIcon',
+        children: [{
+                title: '報到系統',
+                route: 'checkin',
+                icon: 'CheckSquareIcon',
+            },
+            {
+                title: '抽獎',
+                route: 'draw',
+                icon: 'UploadIcon',
+            }
+        ],
     },
     {
         header: '管理功能',

resources/js/src/router/config.js

@@ -73,6 +73,20 @@ export const settings = {
                 }, ],
             },
         },
+        {
+            path: '/checkin',
+            name: 'checkin',
+            component: () => import('@/views/lottery/CheckIn.vue'),
+            meta: {
+                pageTitle: '報到系統',
+                breadcrumb: [{
+                    text: '報到系統',
+                    active: true,
+                }, ],
+                requiresAuth: true,
+
+            },
+        },
     ],
 }
 export const _ = undefined

resources/js/src/views/lottery/CheckIn.vue

@@ -0,0 +1,159 @@
+<template>
+  <div>
+    <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:300px;"
+            onerror="this.src='/images/error.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-card title="報到人員">
+      <b-form-input v-model="input" @keydown.native="test_keydown_handler"></b-form-input>
+    </b-card>
+
+  </div>
+</template>
+<script>
+import { BCard, BCardText, BButton, BMedia, BFormInput, BImg, BMediaAside, BMediaBody } from 'bootstrap-vue'
+import Pusher from 'pusher-js';
+import useJwt from '@/auth/jwt/useJwt'
+import { Html5QrcodeScanner } from "html5-qrcode"
+import { Html5Qrcode } from "html5-qrcode"
+
+export default {
+  name: "websocket",
+  components: {
+    BCard,
+    BCardText,
+    BButton,
+    BMedia,
+    BFormInput,
+    BImg,
+    BMediaAside,
+    BMediaBody,
+  },
+  data() {
+    return {
+      user: {},
+      scannerText: "",
+      input: "",
+    }
+  },
+  created() {
+
+
+    Pusher.logToConsole = true;
+
+    var pusher = new Pusher('9fb7f6f0141efc7e1293', {
+      cluster: 'ap3'
+    });
+
+    var channel = pusher.subscribe('my-channel');
+    channel.bind('my-event', data => {
+      useJwt.postData('/api/user/show', { 'id': data.message }).then(response => {
+        this.user = response.data.user;
+      }).catch(error => {
+        console.log(error)
+        this.user = {};
+      });
+    });
+
+
+  },
+  computed: {
+
+  },
+  methods: {
+    test_keydown_handler(event) {
+      if (event.which === 13) {
+        // The key pressed was the enter key
+
+        console.log(this.input)
+        
+        useJwt.postData('/api/user/show', { 'id': this.input }).then(response => {
+          this.user = response.data.user;
+          this.input = "";
+        }).catch(error => {
+          console.log(error)
+          this.user = {};
+        });
+      }
+    }
+  },
+  watch: {
+    
+  },
+  mounted() {
+
+    var onScanSuccess = (decodedText, decodedResult) => {
+      // handle the scanned code as you like, for example:
+      console.log(`Code matched = ${decodedText}`, decodedResult);
+      this.scannerText = decodedText;
+    }
+
+    function onScanFailure(error) {
+      // handle scan failure, usually better to ignore and keep scanning.
+      // for example:
+      console.warn(`Code scan error = ${error}`);
+    }
+
+    let html5QrcodeScanner = new Html5QrcodeScanner(
+      "reader",
+      { fps: 30, qrbox: { width: 500, height: 500 } },
+  /* verbose= */ false);
+    html5QrcodeScanner.render(onScanSuccess, onScanFailure);
+    // This method will trigger user permissions
+    Html5Qrcode.getCameras().then(devices => {
+      /**
+       * devices would be an array of objects of type:
+       * { id: "id", label: "label" }
+       */
+      if (devices && devices.length) {
+        var cameraId = devices[0].id;
+        // .. use this to start scanning.
+      }
+    }).catch(err => {
+      // handle err
+    });
+    // html5QrCode.stop().then((ignore) => {
+    //   // QR Code scanning is stopped.
+    // }).catch((err) => {
+    //   // Stop failed, handle it.
+    // });
+  }
+}
+
+</script>
+
+<style>
+
+</style>

routes/api.php

@@ -97,6 +97,8 @@ Route::middleware(['auth:sanctum', 'abilities:Admin'])->group(function () {
     
     // Recipients
     Route::post('/recipients/store', [RecipientsController::class, 'store']);
+
+    Route::post('/user/show', [UserController::class, 'show']);
 });
 
 Route::post('/user/index', [UserController::class, 'index']);