報到系統 完成

app/Http/Controllers/API/UserController.php

@@ -7,6 +7,7 @@ use Illuminate\Http\Request;
 use Illuminate\Support\Facades\DB;
 use App\Models\User;
 use App\Models\Department;
+use App\Models\CheckIn;
 
 class UserController extends Controller
 {
@@ -54,6 +55,9 @@ class UserController extends Controller
         $user = User::where('user_id', '=', $request->id)->get()[0];
         $department = Department::where('department_id','=',$user->department_id)->get()[0];
         $user->department = $department->department_name;
+        $checkIn = CheckIn::where('user_id', '=', $request->id)->
+        where('activity_id', '=', $request->activity_id)->get()[0];
+        $user->checkIn = $checkIn->is_checked_in;
         $response = [
             'user' => $user,
         ];

app/Http/Controllers/CheckInController.php

@@ -90,13 +90,13 @@ class CheckInController extends Controller
      */
     public function update(UpdateCheckInRequest $request, CheckIn $checkIn)
     {
-        CheckIn::where('user_id', $request->userId)->update(['is_check_in' => true]);
+        CheckIn::where('user_id', $request->user_id)->update(['is_checked_in' => true]);
         return 'success';
     }
 
     public function check_out(UpdateCheckInRequest $request, CheckIn $checkIn)
     {
-        CheckIn::where('user_id', $request->userId)->update(['is_check_in' => false]);
+        CheckIn::where('user_id', $request->user_id)->update(['is_checked_in' => false]);
         return 'success';
     }
 

resources/js/src/router/config.js

@@ -146,7 +146,7 @@ export const settings = {
             },
         },
         {
-            path: '/checkin',
+            path: '/checkin/:activity',
             name: 'checkin',
             component: () => import('@/views/lottery/CheckIn.vue'),
             meta: {

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

@@ -4,7 +4,8 @@
             <b-col md="6" :lg="lg">
                 <b-card no-body border-variant="info" class="text-center">
                     <b-card-body>
-                        <b-button variant="success">報到頁面</b-button>
+                        <b-button variant="success"
+                            :to="{ name: 'checkin', params: { 'activity': activity.id } }">報到頁面</b-button>
                     </b-card-body>
                 </b-card>
             </b-col>

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

@@ -1,5 +1,83 @@
 <template>
-  <b-row>
+	<b-row>
+		<b-col md="6">
+			<b-card title="報到人員" style="height: 65vh;">
+				<b-row>
+					<b-col md="6">
+						<b-img
+							:src="'/images/profile-picture/' + user.user_id + '.jpg'"
+							blank-color="#ccc"
+							fluid
+							alt="placeholder"
+							style="width:42vh;"
+							onerror="this.src='/images/error.png'" />
+					</b-col>
+					<b-col md="6">
+						<div style="font-size: 2rem;">
+							<b-card-text style="color: #0085DD">
+								姓名
+							</b-card-text>
+							<b-card-text>
+								{{ user.name }}
+							</b-card-text>
+							<b-card-text style="color: #0085DD">
+								工號
+							</b-card-text>
+							<b-card-text>
+								{{ user.user_id }}
+							</b-card-text>
+							<b-card-text style="color: #0085DD">
+								部門
+							</b-card-text>
+							<b-card-text>
+								{{ user.department }}
+							</b-card-text>
+							<b-card-text style="color: #0085DD">
+								報到狀態
+							</b-card-text>
+							<b-card-text>
+								{{ checkin_status(user.checkIn) }}
+							</b-card-text>
+						</div>
+					</b-col>
+				</b-row>
+				<div>
+
+
+
+
+
+				</div>
+
+			</b-card>
+		</b-col>
+		<b-col md="6">
+			<b-card title="報到輸入" style="height: 65vh;">
+				<b-input-group prepend="編號" class="mt-3">
+					<b-form-input v-model="input" @keydown.native="keyListener"
+						placeholder="請輸入員工編號或來賓編號..."></b-form-input>
+					<b-input-group-append>
+						<b-button @click="searchData" variant="info">送出</b-button>
+					</b-input-group-append>
+				</b-input-group>
+				<br>
+				<b-button
+					v-ripple.400="'rgba(255, 255, 255, 0.15)'"
+					variant="success"
+					@click="showToast('success')">
+					確認為本人報到
+				</b-button>
+				<b-button
+					v-ripple.400="'rgba(255, 255, 255, 0.15)'"
+					variant="danger"
+					@click="showMsgBoxTwo">
+					非本人取消報到
+				</b-button>
+			</b-card>
+
+		</b-col>
+	</b-row>
+	<!-- <b-row>
     <b-col md="6">
       <b-card title="報到人員" style="height: 65vh;">
         <b-media no-body>
@@ -51,105 +129,117 @@
       </b-card>
       
     </b-col>
-  </b-row>
+  </b-row> -->
 </template>
 <script>
-import { BRow, BCol, BCard, BCardText, BButton, BMedia, BFormInput, BImg, BMediaAside, BMediaBody } from 'bootstrap-vue'
+import { BRow, BCol, BCard, BCardText, BButton, BMedia, BFormInput, BImg, BMediaAside, BMediaBody, BInputGroup, BInputGroupAppend } from 'bootstrap-vue'
 import Ripple from 'vue-ripple-directive'
 import Pusher from 'pusher-js';
 import useJwt from '@/auth/jwt/useJwt'
+import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
 
 export default {
-  name: "websocket",
-  components: {
-    BRow,
-    BCol,
-    BCard,
-    BCardText,
-    BButton,
-    BMedia,
-    BFormInput,
-    BImg,
-    BMediaAside,
-    BMediaBody,
-  },
-  directives: {
-    Ripple,
-  },
-  data() {
-    return {
-      boxTwo: '',
-      user: {name:"　",user_id:"　",department:"　"},
-      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 = {name:"查無此人",user_id:"　",department:"　"};
-          this.input = "";
-        });
-      }
-    },
-    showMsgBoxTwo() {
-      this.boxTwo = ''
-      this.$bvModal
-        .msgBoxConfirm('請確認此人員為本人', {
-          title: '請確認',
-          size: 'sm',
-          okVariant: 'primary',
-          okTitle: '報到',
-          cancelTitle: '取消',
-          cancelVariant: 'outline-secondary',
-          hideHeaderClose: false,
-          centered: true,
-        })
-        .then(value => {
-          this.boxTwo = value
-        })
-    },
-
-  },
-  watch: {
-
-  },
-  mounted() {
-
-  }
+	name: "websocket",
+	components: {
+		BRow,
+		BCol,
+		BCard,
+		BCardText,
+		BButton,
+		BMedia,
+		BFormInput,
+		BImg,
+		BMediaAside,
+		BMediaBody,
+		BInputGroup,
+		BInputGroupAppend,
+		ToastificationContent,
+	},
+	directives: {
+		Ripple,
+	},
+	data() {
+		return {
+			boxTwo: '',
+			user: { name: "　", user_id: "　", department: "　" },
+			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: {
+		keyListener(event) {
+			if (event.which === 13) {
+				this.searchData()
+			}
+		},
+		searchData() {
+			useJwt.postData('/api/user/show', { 'id': this.input, 'activity_id': this.$route.params.activity }).then(response => {
+				console.log(response.data.user);
+				this.user = response.data.user;
+				this.input = "";
+			}).catch(error => {
+				console.log(error)
+				this.user = { name: "查無此人", user_id: "　", department: "　" };
+				this.input = "";
+			});
+		},
+		showMsgBoxTwo() {
+			this.user = {name: "　", user_id: "　", department: "　" };
+		},
+		showToast(variant) {
+			useJwt.postData('/api/check_in/update', { 'user_id': this.user.user_id }).then(response => {
+				this.$toast({
+					component: ToastificationContent,
+					props: {
+						title: '報到成功',
+						icon: 'CheckCircleIcon',
+						text: this.user.user_id + '報到成功!',
+						variant,
+					},
+				})
+				this.user.checkIn = 1;
+			}).catch(error => {
+				console.log(error)
+			});
+
+
+		},
+		checkin_status(status) {
+
+			return status == true ? "已經報到" : "尚未報到";
+		}
+
+	},
+	watch: {
+
+	},
+	mounted() {
+
+	}
 }
 
 </script>