新增亂數測試

app/Http/Controllers/DrawController.php

@@ -114,4 +114,32 @@ class DrawController extends Controller
             ->where('check_ins.user_id', $request->user_id)
             ->first();
     }
+
+    public function draw_test(Request $request)
+    {
+
+        $prize = Prize::where('id', $request->prize_id)->first();
+        $activity = Activity::where('id', $request->activity_id)->first();
+        $users = CheckIn::where('activity_id', $request->activity_id)
+            ->where('is_checked_in', 'true')
+            ->where('is_awarded', 'false')
+            ->whereTime('check_ins.updated_at', '<=', $activity->deadline)
+            ->whereIn('region', $request->region)
+            ->inRandomOrder()
+            ->get();
+        if ($prize->count >= $request->number && count($users) >= $request->number) {
+            $output = [];
+            $draw_user = $users->random($request->number);
+            foreach ($draw_user as $user) {
+                array_push($output, [
+                    'user_id' => $user->user_id,
+                    'user_name' => $user->name,
+                    'department_id' => $user->department_id,
+                ]);
+            }
+            
+            return $output;
+        }
+        return false;
+    }
 }

resources/js/src/router/config.js

@@ -167,6 +167,28 @@ export const settings = {
                 requiresAuth: true,
             },
         },
+        {
+            path: '/randomTest/:activity_id',
+            name: 'randomTest',
+            component: () => import('@/views/lottery/RandomTest.vue'),
+            meta: {
+                pageTitle: '亂數測試',
+                breadcrumb: [{
+                        text: '活動列表',
+                        to: '/activityList'
+                    },
+                    {
+                        text: '活動功能頁面',
+                        to: '/activityPage'
+                    },
+                    {
+                        text: '亂數測試',
+                        active: true,
+                    },
+                ],
+                requiresAuth: true,
+            },
+        },
         {
             path: '/permission',
             name: 'permission',

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

@@ -26,14 +26,7 @@
                     </b-card-body>
                 </b-card>
             </b-col>
-            <b-col v-if="canViewVerticalNavMenuLink({route:'slotManager'})" md="6" :lg="lg">
-                <b-card no-body border-variant="info" class="text-center">
-                    <b-card-body>
-                        <b-button variant="success"
-                            :to="{ name: 'slotManager', params: { 'activity_id': this.$route.params.activity_id } }">抽獎管理頁面</b-button>
-                    </b-card-body>
-                </b-card>
-            </b-col>
+
             <b-col v-if="checkinPage.includes(role)" md="6" :lg="lg">
                 <b-card no-body border-variant="info" class="text-center">
                     <b-card-body>
@@ -83,6 +76,29 @@
                     </b-card-body>
                 </b-card>
             </b-col>
+
+        </b-row>
+        <div v-if="canViewVerticalNavMenuLink({ route: 'slotManager' })" class="group-area mt-1">
+            <h3>管理功能</h3>
+            <hr>
+        </div>
+        <b-row class="match-height">
+            <b-col v-if="canViewVerticalNavMenuLink({ route: 'slotManager' })" md="6" :lg="lg">
+                <b-card no-body border-variant="info" class="text-center">
+                    <b-card-body>
+                        <b-button variant="success"
+                            :to="{ name: 'slotManager', params: { 'activity_id': this.$route.params.activity_id } }">抽獎管理頁面</b-button>
+                    </b-card-body>
+                </b-card>
+            </b-col>
+            <b-col v-if="canViewVerticalNavMenuLink({ route: 'slotManager' })" md="6" :lg="lg">
+                <b-card no-body border-variant="info" class="text-center">
+                    <b-card-body>
+                        <b-button variant="success"
+                            :to="{ name: 'randomTest', params: { 'activity_id': this.$route.params.activity_id } }">亂數分布測試</b-button>
+                    </b-card-body>
+                </b-card>
+            </b-col>
         </b-row>
     </div>
 </template>

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

@@ -0,0 +1,163 @@
+<template>
+	<div>
+
+		<b-card no-body>
+			<b-card-header>
+				<div>
+					<b-card-title class="mb-1">
+						亂數機率分布
+					</b-card-title>
+				</div>
+				<div class="d-flex align-items-center">
+					<b-button variant="info" @click="draw">抽獎管理頁面</b-button>
+				</div>
+			</b-card-header>
+
+
+			<!-- chart -->
+			<b-card-body>
+				<chartjs-component-line-chart
+					v-if="loaded"
+					:height="400"
+					:data="randomData"
+					:options="chartjsData.lineChart.options" />
+			</b-card-body>
+		</b-card>
+	</div>
+</template>
+<script>
+import { BRow, BCol, BCard, BCardHeader, BCardBody, BCardTitle, BCardText, BButton, BMedia, BFormInput, BImg, BMediaAside, BMediaBody, BInputGroup, BInputGroupAppend } from 'bootstrap-vue'
+import Ripple from 'vue-ripple-directive'
+import useJwt from '@/auth/jwt/useJwt'
+import ChartjsComponentLineChart from './charts-components/ChartjsComponentLineChart.vue'
+import chartjsData from './charts-components/chartjsData'
+import {
+	$themeColors
+} from '@themeConfig'
+const chartColors = {
+	primaryColorShade: '#836AF9',
+	yellowColor: '#ffe800',
+	successColorShade: '#28dac6',
+	warningColorShade: '#ffe802',
+	warningLightColor: '#FDAC34',
+	infoColorShade: '#299AFF',
+	greyColor: '#4F5D70',
+	blueColor: '#2c9aff',
+	blueLightColor: '#84D0FF',
+	greyLightColor: '#EDF1F4',
+	tooltipShadow: 'rgba(0, 0, 0, 0.25)',
+	lineChartPrimary: '#666ee8',
+	lineChartDanger: '#ff4961',
+	labelColor: '#6e6b7b',
+	grid_line_color: 'rgba(200, 200, 200, 0.2)',
+}
+
+export default {
+	name: "websocket",
+	components: {
+		BRow,
+		BCol,
+		BCard,
+		BCardHeader,
+		BCardBody,
+		BCardTitle,
+		BCardText,
+		BButton,
+		BMedia,
+		BFormInput,
+		BImg,
+		BMediaAside,
+		BMediaBody,
+		BInputGroup,
+		BInputGroupAppend,
+		ChartjsComponentLineChart
+	},
+	directives: {
+		Ripple,
+	},
+	data() {
+		return {
+			loaded: false,
+			activityId: this.$route.params.activity_id,
+			activity: {},
+			userList: [],
+			prizeList: [],
+			chartjsData,
+			rangePicker: ['2019-05-01', '2019-05-10'],
+			randomData: {
+				labels: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140],
+				datasets: [
+					{
+						data: [80, 150, 180, 270, 210, 160, 160, 202, 265, 210, 270, 255, 290, 360, 375],
+						label: '中獎次數',
+						borderColor: chartColors.lineChartDanger,
+						lineTension: 0.5,
+						pointStyle: 'circle',
+						backgroundColor: chartColors.lineChartDanger,
+						fill: false,
+						pointRadius: 1,
+						pointHoverRadius: 5,
+						pointHoverBorderWidth: 5,
+						pointBorderColor: 'transparent',
+						pointHoverBorderColor: $themeColors.white,
+						pointHoverBackgroundColor: chartColors.lineChartDanger,
+						pointShadowOffsetX: 1,
+						pointShadowOffsetY: 1,
+						pointShadowBlur: 5,
+						pointShadowColor: chartColors.tooltipShadow,
+					}
+				],
+			},
+		}
+	},
+	created() {
+		this.loaded = false
+
+		useJwt.postData('/api/check_in/index_by_activity', { activity_id: this.activityId }).then(res => {
+
+			this.userList = res.data;
+			let array = Object.keys(res.data);
+			this.randomData.labels = array;
+			this.randomData.datasets[0].data = Array(array.length).fill(0)
+			this.loaded = true
+		});
+
+		useJwt.postData('/api/prize/index_by_activity', { activity_id: this.activityId }).then(res => {
+			console.log(res.data);
+			this.prizeList = res.data;
+		});
+
+	},
+	mounted() {
+		console.log("mounted")
+	},
+	computed: {
+
+	},
+	methods: {
+		draw() {
+			useJwt.postData('/api/draw/draw', {
+				activity_id: this.activityId,
+				prize_id: this.prizeList[2].id,
+				region: ['北區', '中區', '南區', '來賓'],
+				number: 100
+			}).then(res => {
+				this.drawList = res.data;
+				console.log(res.data);
+			});
+		},
+	},
+	watch: {
+
+	},
+	mounted() {
+
+	},
+	computed: {
+
+	}
+}
+
+</script>
+
+<style></style>

resources/js/src/views/lottery/charts-components/ChartjsComponentLineChart.vue

@@ -0,0 +1,28 @@
+<script>
+import { Line } from 'vue-chartjs'
+
+export default {
+  extends: Line,
+  props: {
+    data: {
+      type: Object,
+      default: null,
+    },
+    options: {
+      type: Object,
+      default: null,
+    },
+    plugins: {
+      type: Array,
+      default: null,
+    },
+    styles: {
+      type: Object,
+      default: null,
+    },
+  },
+  mounted() {
+    this.renderChart(this.data, this.options, this.plugins, this.styles)
+  },
+}
+</script>

resources/js/src/views/lottery/charts-components/chartjsData.js

@@ -0,0 +1,154 @@
+import {
+    $themeColors
+} from '@themeConfig'
+// colors
+const chartColors = {
+    primaryColorShade: '#836AF9',
+    yellowColor: '#ffe800',
+    successColorShade: '#28dac6',
+    warningColorShade: '#ffe802',
+    warningLightColor: '#FDAC34',
+    infoColorShade: '#299AFF',
+    greyColor: '#4F5D70',
+    blueColor: '#2c9aff',
+    blueLightColor: '#84D0FF',
+    greyLightColor: '#EDF1F4',
+    tooltipShadow: 'rgba(0, 0, 0, 0.25)',
+    lineChartPrimary: '#666ee8',
+    lineChartDanger: '#ff4961',
+    labelColor: '#6e6b7b',
+    grid_line_color: 'rgba(200, 200, 200, 0.2)',
+}
+
+export default {
+    lineChart: {
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            backgroundColor: false,
+            hover: {
+                mode: 'label',
+            },
+            tooltips: {
+                // Updated default tooltip UI
+                shadowOffsetX: 1,
+                shadowOffsetY: 1,
+                shadowBlur: 8,
+                shadowColor: chartColors.tooltipShadow,
+                backgroundColor: $themeColors.white,
+                titleFontColor: $themeColors.black,
+                bodyFontColor: $themeColors.black,
+            },
+            layout: {
+                padding: {
+                    top: -15,
+                    bottom: -25,
+                    left: -15,
+                },
+            },
+            scales: {
+                xAxes: [{
+                    display: true,
+                    scaleLabel: {
+                        display: true,
+                    },
+                    gridLines: {
+                        display: true,
+                        color: chartColors.grid_line_color,
+                        zeroLineColor: chartColors.grid_line_color,
+                    },
+                    ticks: {
+                        fontColor: chartColors.labelColor,
+                    },
+                }, ],
+                yAxes: [{
+                    display: true,
+                    scaleLabel: {
+                        display: true,
+                    },
+                    ticks: {
+                        stepSize: 10,
+                        min: 0,
+                        max: 50,
+                        fontColor: chartColors.labelColor,
+                    },
+                    gridLines: {
+                        display: true,
+                        color: chartColors.grid_line_color,
+                        zeroLineColor: chartColors.grid_line_color,
+                    },
+                }, ],
+            },
+            legend: {
+                position: 'top',
+                align: 'start',
+                labels: {
+                    usePointStyle: true,
+                    padding: 25,
+                    boxWidth: 9,
+                },
+            },
+        },
+        data: {
+            labels: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140],
+            datasets: [{
+                    data: [80, 150, 180, 270, 210, 160, 160, 202, 265, 210, 270, 255, 290, 360, 375],
+                    label: 'Europe',
+                    borderColor: chartColors.lineChartDanger,
+                    lineTension: 0.5,
+                    pointStyle: 'circle',
+                    backgroundColor: chartColors.lineChartDanger,
+                    fill: false,
+                    pointRadius: 1,
+                    pointHoverRadius: 5,
+                    pointHoverBorderWidth: 5,
+                    pointBorderColor: 'transparent',
+                    pointHoverBorderColor: $themeColors.white,
+                    pointHoverBackgroundColor: chartColors.lineChartDanger,
+                    pointShadowOffsetX: 1,
+                    pointShadowOffsetY: 1,
+                    pointShadowBlur: 5,
+                    pointShadowColor: chartColors.tooltipShadow,
+                },
+                {
+                    data: [80, 125, 105, 130, 215, 195, 140, 160, 230, 300, 220, 170, 210, 200, 280],
+                    label: 'Asia',
+                    borderColor: chartColors.lineChartPrimary,
+                    lineTension: 0.5,
+                    pointStyle: 'circle',
+                    backgroundColor: chartColors.lineChartPrimary,
+                    fill: false,
+                    pointRadius: 1,
+                    pointHoverRadius: 5,
+                    pointHoverBorderWidth: 5,
+                    pointBorderColor: 'transparent',
+                    pointHoverBorderColor: $themeColors.white,
+                    pointHoverBackgroundColor: chartColors.lineChartPrimary,
+                    pointShadowOffsetX: 1,
+                    pointShadowOffsetY: 1,
+                    pointShadowBlur: 5,
+                    pointShadowColor: chartColors.tooltipShadow,
+                },
+                {
+                    data: [80, 99, 82, 90, 115, 115, 74, 75, 130, 155, 125, 90, 140, 130, 180],
+                    label: 'Africa',
+                    borderColor: chartColors.warningColorShade,
+                    lineTension: 0.5,
+                    pointStyle: 'circle',
+                    backgroundColor: chartColors.warningColorShade,
+                    fill: false,
+                    pointRadius: 1,
+                    pointHoverRadius: 5,
+                    pointHoverBorderWidth: 5,
+                    pointBorderColor: 'transparent',
+                    pointHoverBorderColor: $themeColors.white,
+                    pointHoverBackgroundColor: chartColors.warningColorShade,
+                    pointShadowOffsetX: 1,
+                    pointShadowOffsetY: 1,
+                    pointShadowBlur: 5,
+                    pointShadowColor: chartColors.tooltipShadow,
+                },
+            ],
+        },
+    },
+}