抽獎管理 整理

.env.example

@@ -43,9 +43,9 @@ AWS_DEFAULT_REGION=us-east-1
 AWS_BUCKET=
 AWS_USE_PATH_STYLE_ENDPOINT=false
 
-PUSHER_APP_ID=
-PUSHER_APP_KEY=
-PUSHER_APP_SECRET=
+PUSHER_APP_ID=1533309
+PUSHER_APP_KEY=9fb7f6f0141efc7e1293
+PUSHER_APP_SECRET=f57d430a176dd68775e2
 PUSHER_APP_CLUSTER=ap3
 
 MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"

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

@@ -232,6 +232,7 @@ export default {
       useJwt.postData('/api/draw/draw', this.drawOption).then(res => {
         if (res.data) {
           this.drawList = res.data;
+          console.log("draw success");
           this.showDrawOutput();
         } else {
           this.showDrawError();
@@ -249,7 +250,7 @@ export default {
         prize_id: this.drawOption.prize_id,
       }).then(res => {
         if (res.data) {
-          console.log(res.data);
+          console.log("store success");
         } else {
           console.log("store error");
         }

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

@@ -2,9 +2,9 @@
 	<div>
 		<b-row class="prize-list-wrapper">
 			<b-col md="6">
-				<b-card title="獎項列表" style="height:75vh;">
-					<b-table responsive hover sticky-header=true :items="getPrizeList(prizeList)" bordered :fields="fields"
-						@row-clicked="click" style="max-height: 57vh; overflow: auto;">
+				<b-card title="獎項列表" style="height:70vh;">
+					<b-table responsive hover sticky-header=true :items="prizeList" bordered :fields="prizeTableFields"
+						style="max-height: 52vh; overflow: auto;" @row-clicked="click">
 						<template #cell(ICON)="data">
 							<div class="text-center">
 								<feather-icon :icon="data.value" />
@@ -23,14 +23,15 @@
 				<b-form-input v-model="prizeName" :disabled=true />
 				<br>
 				<label>地區: </label>
-				<v-select multiple v-model="region" :options="regionOption" />
+				<v-select multiple v-model="drawOption.region" :options="regionOption" />
+				<br>
 
 				<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="primary" block
-					@click="hideModal">
+					@click="sendDrawOptions">
 					Accept
 				</b-button>
 			</b-modal>
@@ -45,54 +46,30 @@
 				</b-button>
 			</b-modal>
 
-			<b-modal ref="draw-animation" title="得獎者是......" centered no-stacking hide-footer>
-				<br>
-				<div :key="index" v-for="(item, index) in drawList" :class=counterId(index)>
-					<i :datafinal=item.department>部門</i>
-					<div :datafinal=item.userId>
-						<i>0</i>
-						<i>0</i>
-						<i>0</i>
-						<i>0</i>
-						<span :datafinal=item.userName></span>
-					</div>
-				</div>
-
-				<div v-if="drawOne">
-					<b-button v-ripple.400="'rgba(255, 255, 255, 0.15)'" class="mt-2" variant="outline-primary" block
-						@click="donate">
-						捐出
-					</b-button>
-				</div>
-
-				<b-button v-ripple.400="'rgba(255, 255, 255, 0.15)'" class="mt-2" variant="primary" block @click="store">
-					Accept
-				</b-button>
-			</b-modal>
-
 			<b-modal ref="add-prize" centered title="加碼" no-stacking hide-footer>
 				<label>獎品:</label>
-				<b-form-input v-model="addPrizeName" />
+				<b-form-input v-model="addPrizeOption.name" />
 				<br>
 				<label>加碼者: </label>
-				<b-form-input v-model="addPrizeUser" />
+				<b-form-input v-model="addPrizeOption.provider" />
 				<br>
 				<label>數量: </label>
-				<b-form-spinbutton v-model="addPrizeNumber" min="1" />
+				<b-form-spinbutton v-model="addPrizeOption.count" min="1" />
 
 				<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="primary" block @click="addPrize">
+				<b-button v-ripple.400="'rgba(255, 255, 255, 0.15)'" class="mt-2" variant="primary" block
+					@click="addPrize">
 					Accept
 				</b-button>
 			</b-modal>
 
 			<b-col md="6">
-				<b-card title="抽獎紀錄" style="height:75vh;">
-					<b-table responsive sticky-header=true :items="getRecipientsList(recipientsList)" bordered
-						style="max-height: 65vh; overflow: auto;">
+				<b-card title="抽獎紀錄" style="height:70vh;">
+					<b-table responsive sticky-header=true :items="recipientsList" bordered
+						:fields="recipientsTableFields" style="max-height: 60vh; overflow: auto;">
 						<template #cell(ICON)="data">
 							<div class="text-center">
 								<feather-icon :icon="data.value" />
@@ -104,7 +81,7 @@
 		</b-row>
 	</div>
 </template>
-  
+
 <script>
 import { BRow, BCol, BCard, BCardText, BLink, BTable, BModal, BFormInput, BFormSpinbutton, BButton, BFormCheckbox, BFormRadio } from 'bootstrap-vue'
 import useJwt from '@/auth/jwt/useJwt'
@@ -136,72 +113,26 @@ export default {
 	},
 	data() {
 		return {
-			activityId: this.$route.params.activity_id,
-			activity: {},
-			userList: [],
-			departmentList: [],
 			prizeList: [],
 			recipientsList: [],
 
-			fields: ['獎項', '數量'],
+			prizeTableFields: ['name', 'provider', 'count'],
+			recipientsTableFields: ['prize_name', 'user_id', 'user_name', 'created_at'],
 			regionOption: ['北區', '中區', '南區', '來賓'],
-			region: ['北區', '中區', '南區', '來賓'],
-			drawMax: 1,
-			drawOne: true,
 
 			prizeName: '',
-			prizeId: '',
-			drawList: [],
-			department_name: "",
-			user_id: "",
-			userID: ["", "", "", ""],
-			user_name: "",
-
-			drawnCount: 0,
-			notDrawnCount: 0,
-			isDrawn: false,
-
-			addPrizeName: '',
-			addPrizeUser: '',
-			addPrizeNumber: 1,
-
-			departments: [
-				"行管部庶務科",
-				"人力資源科",
-				"行管部文書科",
-				"南區辦事處",
-				"中區辦事處",
-				"工程管理一部",
-				"工程管理二部",
-				"發展與企畫部",
-				"工程製圖科",
-				"工務部",
-				"大地工程部",
-				"財務部",
-				"運輸土木部",
-				"城鄉發展部",
-				"軌道工程部",
-				"董事長室",
-				"總經理室",
-				"企業發展中心",
-				"成本中心",
-				"資訊中心",
-				"環境水務部",
-				"環境永續部",
-				"機電工程部",
-				"結構工程部",
-				"工程設計群",
-				"工程監理群",
-				"總管理處",
-				"建築及設施群",
-				"數位發展部",
-				"淡海輕軌專案",
-				"安坑輕軌專案",
-				"先進技術中心",
-				"塭仔圳專案",
-				"萬大市場專案",
-				"來賓"
-			]
+			drawOption: {
+				activity_id: this.$route.params.activity_id,
+				prize_id: '0',
+				region: ['北區', '中區', '南區', '來賓'],
+				draw_one: true,
+			},
+			addPrizeOption: {
+				activity_id: this.$route.params.activity_id,
+				name: '',
+				provider: '',
+				count: 1,
+			},
 		}
 	},
 	created() {
@@ -222,24 +153,15 @@ export default {
 
 		});
 
-		useJwt.postData('/api/activity/show', { activity_id: this.activityId }).then(res => {
-			this.activity = res.data;
-		});
-
-		useJwt.postData('/api/check_in/index_by_activity', { activity_id: this.activityId }).then(res => {
-			this.userList = res.data;
-		});
-
-		useJwt.postData('/api/prize/index_by_activity', { activity_id: this.activityId }).then(res => {
+		useJwt.postData('/api/prize/index_by_activity', { activity_id: this.$route.params.activity_id }).then(res => {
 			this.prizeList = res.data;
 		});
 
-		useJwt.postData('/api/recipients/index_by_activity', { activity_id: this.activityId }).then(res => {
+		useJwt.postData('/api/recipients/index_by_activity', { activity_id: this.$route.params.activity_id }).then(res => {
 			this.recipientsList = res.data;
-		});
-
-		useJwt.postData('/api/department/index').then(res => {
-			this.departmentList = res.data;
+			this.recipientsList.forEach(element => {
+				element.created_at = this.dateFormat(element.created_at);
+			});
 		});
 	},
 	methods: {
@@ -252,44 +174,12 @@ export default {
 				+ ':' + d.getMinutes().toString().padStart(2, '0')
 				+ ':' + d.getSeconds().toString().padStart(2, '0');
 		},
-		getPrizeList(prizeList) {
-			var output = [];
-			prizeList.forEach(element => {
-				output.push({ id: element.id, '獎項': element.name, '數量': element.count });
-			});
-			return output;
-		},
-		getPrizeName(prizeId) {
-			var output = '';
-			this.prizeList.forEach(element => {
-				if (prizeId == element.id) {
-					output = element.name;
-				}
-			});
-			return output;
-		},
-		getRecipientsList(recipientsList) {
-			var output = [];
-			recipientsList.forEach(element => {
-				output.push({ '獎項': this.getPrizeName(element.prize_id), '獲獎人': this.userList[element.user_id], '時間': this.dateFormat(element.created_at) });
-			});
-			return output;
-		},
 		counterId(id) {
 			return "counter_" + id;
 		},
-		drawNumber() {
-			if (this.drawOne) {
-				return 1;
-			}
-			return this.drawMax;
-		},
 		showDraw() {
 			this.$refs['draw-modal'].show();
 		},
-		showDrawAnimation() {
-			this.$refs['draw-animation'].show();
-		},
 		showAddPrize() {
 			this.$refs['add-prize'].show();
 		},
@@ -299,7 +189,6 @@ export default {
 		hideModal() {
 			this.$refs['draw-modal'].hide();
 			this.$refs['draw-error'].hide();
-			this.$refs['draw-animation'].hide();
 			this.$refs['add-prize'].hide();
 			this.updateDataset();
 		},
@@ -309,6 +198,9 @@ export default {
 			});
 			useJwt.postData('/api/recipients/index_by_activity', { activity_id: this.activityId }).then(res => {
 				this.recipientsList = res.data;
+				this.recipientsList.forEach(element => {
+					element.created_at = this.dateFormat(element.created_at);
+				});
 			});
 			useJwt.postData('/api/drawManager', {
 				message: "addPrize"
@@ -317,80 +209,24 @@ export default {
 			});
 		},
 		click(params) {
-			this.prizeName = this.getPrizeName(params.id);
-			this.prizeId = params.id;
-			this.drawOne = true;
-			this.drawMax = params["數量"];
-			this.drawList = [];
-			if (this.drawMax == 0) {
-				this.showDrawError();
-			} else {
+			if (params.count > 0) {
+				this.prizeName = params.name;
+				this.drawOption.prize_id = params.id;
 				this.showDraw();
 				useJwt.postData('/api/drawManager', {
 					message: params
 				}).then(res => {
 					// console.log(res);
 				});
+			} else {
+				this.showDrawError();
 			}
 		},
-		draw() {
-			useJwt.postData('/api/draw/draw', {
-				activity_id: this.activityId,
-				prize_id: this.prizeId,
-				region: this.region,
-				number: this.drawNumber()
-			}).then(res => {
-				if (res.data) {
-					this.drawList = res.data;
-					setTimeout(() => {
-						this.count();
-					}, 500);
-					this.showDrawAnimation();
-				} else {
-					this.showDrawError();
-					console.log("draw error");
-				}
-			});
-		},
-		store() {
-			var idList = [];
-			this.drawList.forEach(element => {
-				idList.push(element.user_id);
-			});
-			useJwt.postData('/api/draw/store', {
-				users: idList,
-				prize_id: String(this.prizeId),
-				number: this.drawNumber()
-			}).then(res => {
-				if (res.data) {
-					console.log("store success");
-				} else {
-					console.log("store error");
-				}
-				this.hideModal();
-			});
-		},
-		donate() {
-			var idList = [];
-			this.drawList.forEach(element => {
-				idList.push(element.user_id);
-			});
-			useJwt.postData('/api/draw/donate', { users: idList }).then(res => {
-				if (res.data) {
-					console.log("donate success");
-				} else {
-					console.log("donate error");
-				}
-				this.hideModal();
-			});
+		sendDrawOptions() {
+			this.hideModal();
 		},
 		addPrize() {
-			useJwt.postData('/api/prize/store', {
-				activity_id: this.activityId,
-				name: this.addPrizeName,
-				provider: this.addPrizeUser,
-				count: this.addPrizeNumber
-			}).then(res => {
+			useJwt.postData('/api/prize/store', this.addPrizeOption).then(res => {
 				if (res.data) {
 					console.log("add prize success");
 				} else {
@@ -399,48 +235,10 @@ export default {
 				this.hideModal();
 			});
 		},
-		count() {
-			var departments = this.departments;
-			var numbers = "0123456789"
-			var string = numbers;
-
-			this.drawList.forEach((element, index) => {
-				var departmentName = this.departmentList[element.department_id];
-				var deps = document.querySelectorAll(".counter_" + index + " > i");
-				var allCounters = document.querySelectorAll(".counter_" + index + " > div > i");
-
-				deps.forEach(function (el) {
-					var duration = 1000;
-					var interval = setInterval(function () {
-						el.innerText = departments[Math.floor(Math.random() * departments.length)];
-						duration = duration - 50;
-						if (duration <= 0) {
-							clearInterval(interval);
-							el.innerText = departmentName;
-						}
-					}, 50);
-				});
-				allCounters.forEach((el, i) => {
-					var duration = 500 + 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.user_id[i];
-							if (i == 3) {
-								document.querySelectorAll(".counter_" + index + " > div > span")[0].innerText = element.user_name;
-							}
-						}
-					}, 50);
-				});
-			});
-		},
 	},
 }
 </script>
-  
+
 <style lang="scss">
 @import '~@resources/scss/vue/libs/vue-select.scss';
 </style>
-