新增 中獎列表

app/Http/Controllers/CheckInController.php

@@ -30,7 +30,7 @@ class CheckInController extends Controller
 
     public function index_by_activity(Request $request)
     {
-        $user = CheckIn::where('activity_id', $request->activityId)->pluck('name', 'user_id');
+        $user = CheckIn::where('activity_id', $request->activity_id)->pluck('name', 'user_id');
         return $user;
     }
 

app/Http/Controllers/PrizeController.php

@@ -21,7 +21,7 @@ class PrizeController extends Controller
 
     public function index_by_activity(UpdatePrizeRequest $request)
     {
-        return Prize::where('activity_id', $request->activityId)->get();
+        return Prize::where('activity_id', $request->activity_id)->get();
     }
 
     public function prize_is_drawable(Request $request)

app/Http/Controllers/RecipientsController.php

@@ -10,6 +10,7 @@ use App\Models\Department;
 use App\Http\Requests\StoreRecipientsRequest;
 use App\Http\Requests\UpdateRecipientsRequest;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
 
 class RecipientsController extends Controller
 {
@@ -27,7 +28,7 @@ class RecipientsController extends Controller
     {
         return Recipients::join('prizes', 'recipients.prize_id', '=', 'prizes.id')
             ->select('user_id', 'prizes.activity_id', 'prize_id', 'recipients.created_at')
-            ->where('prizes.activity_id', $request->activityId)
+            ->where('prizes.activity_id', $request->activity_id)
             ->orderBy('recipients.created_at', 'DESC')
             ->get();
     }
@@ -82,7 +83,7 @@ class RecipientsController extends Controller
      * @param  \App\Models\Recipients  $recipients
      * @return \Illuminate\Http\Response
      */
-    public function show(Recipients $recipients)
+    public function show(Request $request,Recipients $recipients)
     {
         //
     }
@@ -175,4 +176,21 @@ class RecipientsController extends Controller
         $recipient->save();
         return $recipient;
     }
+
+    public function indexByPrize(Request $request)
+    {
+        //
+        $prize_id = $request->prize_id;
+        $prizeList = DB::select("SELECT [check_ins].[user_id],[name],[is_claimed],[department_name] FROM [recipients] 
+        LEFT JOIN [check_ins] ON [recipients].[user_id] = [check_ins].[user_id]
+        LEFT JOIN [departments] ON [check_ins].[department_id] = [departments].[department_id]
+        WHERE [prize_id] = ?;",[$prize_id]);
+        $prize = DB::select("SELECT [name] FROM [prizes] WHERE [id] = ?;",[$prize_id]);
+        $response = [
+            "prize" => $prize,
+            "list" => $prizeList,
+            
+        ];
+        return response($response, 201);
+    }
 }

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

@@ -11,6 +11,11 @@ export default [{
         icon: 'AwardIcon',
         route: 'activityList',
     },
+    {
+        title: '中獎名單',
+        route: 'prizeList',
+        icon: 'ListIcon',
+    },
     {
         header: '管理功能',
     },

resources/js/src/router/config.js

@@ -112,6 +112,52 @@ export const settings = {
                 requiresAuth: true,
             },
         },
+        {
+            path: '/prizeList/:activity_id?',
+            name: 'prizeList',
+            component: () => import('@/views/lottery/Activities/bs-table/PrizeList.vue'),
+            meta: {
+                layout: 'full',
+                pageTitle: '中獎清單',
+                breadcrumb: [{
+                        text: '活動列表',
+                        to: '/activityList'
+                    },
+                    {
+                        text: '活動功能頁面',
+                        to: '/activityPage'
+                    },
+                    {
+                        text: '中獎清單',
+                        active: true,
+                    },
+                ],
+                requiresAuth: false,
+            },
+        },
+        {
+            path: '/blank',
+            name: 'blank',
+            component: () => import('@/views/lottery/LayoutBlank.vue'),
+            meta: {
+                layout: 'full',
+                pageTitle: 'blank',
+                breadcrumb: [{
+                        text: '活動列表',
+                        to: '/activityList'
+                    },
+                    {
+                        text: '活動功能頁面',
+                        to: '/activityPage'
+                    },
+                    {
+                        text: '中獎清單',
+                        active: true,
+                    },
+                ],
+                requiresAuth: false,
+            },
+        },
         {
             path: '/permission',
             name: 'permission',

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

@@ -38,6 +38,7 @@ export default {
         }
     },
     created() {
+        this.$store.commit('verticalMenu/UPDATE_VERTICAL_MENU_COLLAPSED', true)
         useJwt.postData('/api/activity/list', null).then(response => {
             this.activities = response.data;
         }).catch(error => {

resources/js/src/views/lottery/Activities/bs-table/PrizeList.vue

@@ -0,0 +1,180 @@
+<template>
+  <b-card ref="graph-1" class="card-bc"
+    no-body>
+    <div class="title text-center"><feather-icon class="arrow-left"
+        icon="ChevronsLeftIcon"
+        size="50" 
+        @click="shiftPrize(1)"/>{{ prizeName }}<feather-icon class="arrow-right"
+        icon="ChevronsRightIcon"
+        size="50" 
+        @click="shiftPrize(-1)"/></div>
+    <div style="background-image: url(./flower-r.png);" class="back">
+      <b-row style=" margin-right: 0rem; margin-left: 0rem;">
+        <!-- <table-custom-render /> -->
+        <b-col class="prize-list" :key="index" v-for="(item, index) in prizeList" lg="3" md="3">
+          <b-badge pill :variant="isClaim(item.is_claimed)">{{ item.user_id + " " + item.name }}</b-badge>
+        </b-col>
+
+        <b-button variant="danger"
+          style="height: 45px; margin-left: auto; margin-right: 44px; margin-bottom: 20px; margin-top: auto;"
+          @click="toggleFullscreen('graph-1')" size="sm"><feather-icon
+            icon="MaximizeIcon"
+            size="16" />
+        </b-button>
+      </b-row>
+    </div>
+
+  </b-card>
+</template>
+
+<script>
+import BCardCode from '@core/components/b-card-code/BCardCode.vue'
+import { BCard, BCardTitle, BRow, BCol, BBadge, BButton } from 'bootstrap-vue'
+
+import useJwt from '@/auth/jwt/useJwt'
+
+export default {
+  components: {
+    BCard,
+    BCardTitle,
+    BCardCode,
+    BRow,
+    BCol,
+    BBadge,
+    BButton,
+  },
+  data() {
+    return {
+      prizeName: "",
+      prizeList:[],
+      prizes:[],
+      index:0,
+    }
+  },
+  created() {
+    this.getPrize(this.$route.params.activity_id)
+    
+  },
+  methods: {
+    getPrize(activity_id) {
+      useJwt.postData('/api/prize/index_by_activity', { activity_id: activity_id }).then(response => {
+        console.log(response.data);
+        this.prizes = response.data;
+        this.index = this.prizes.length - 1;
+        let prize_id = this.prizes[this.index].id;
+        this.getPrizeList(prize_id);
+      }).catch(error => {
+        console.log("error: " + error);
+      });
+    },
+    getPrizeList(prize_id) {
+      useJwt.postData('/api/recipient/indexByPrize', { prize_id: prize_id }).then(response => {
+        console.log(response.data);
+        this.prizeList = response.data.list;
+        this.prizeName = response.data.prize[0].name;
+      }).catch(error => {
+        console.log("error: " + error);
+      });
+    },
+    shiftPrize(index){
+      this.index = (this.index + this.prizes.length + index) % this.prizes.length;
+      this.getPrizeList(this.prizes[this.index].id);
+    },
+    isClaim(status) {
+      return status == 1 ? 'success' : 'danger';
+    },
+    toggleFullscreen(ref) {
+      const elem = this.$refs[ref];
+      const isFullscreen = document.fullscreenElement !== null;
+
+      if (isFullscreen) {
+        this.closeFullscreen();
+      } else {
+        this.openFullscreen(elem);
+      }
+    },
+    openFullscreen(elem) {
+      if (elem.requestFullscreen) {
+        elem.requestFullscreen();
+      } else if (elem.mozRequestFullScreen) {
+        /* Firefox */
+        elem.mozRequestFullScreen();
+      } else if (elem.webkitRequestFullscreen) {
+        /* Chrome, Safari and Opera */
+        elem.webkitRequestFullscreen();
+      } else if (elem.msRequestFullscreen) {
+        /* IE/Edge */
+        elem.msRequestFullscreen();
+      }
+    },
+    closeFullscreen() {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.mozCancelFullScreen) {
+        /* Firefox */
+        document.mozCancelFullScreen();
+      } else if (document.webkitExitFullscreen) {
+        /* Chrome, Safari and Opera */
+        document.webkitExitFullscreen();
+      } else if (document.msExitFullscreen) {
+        /* IE/Edge */
+        document.msExitFullscreen();
+      }
+    }
+  },
+}
+</script>
+
+<style lang="scss">
+@import '~@resources/scss/vue/libs/vue-select.scss';
+
+.prize-list {
+  font-size: 30px;
+  text-align: center;
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+
+.card-bc {
+  background-color: #CA0000;
+}
+
+.badge-pill {
+  width: 98%;
+  background-color: #df1a1a85;
+  height: 60px;
+  padding-top: 17px;
+}
+
+.title {
+  background-color: #CA0000;
+  width: 100%;
+  font-size: 35px;
+  color: white;
+  font-weight: bold;
+}
+
+.back {
+  background-color: #c72c2cee;
+  background-repeat: no-repeat;
+  background-size: 600px 600px;
+  background-attachment: fixed;
+  background-position: -5% 120%;
+}
+
+.arrow-right {
+  right: 0;
+  position: absolute;
+  cursor: pointer;
+}
+
+.arrow-left {
+  left: 0;
+  position: absolute;
+  cursor: pointer;
+}
+
+body::-webkit-scrollbar {
+    display: none;
+}
+</style>

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

@@ -107,7 +107,7 @@ export default {
 		}
 	},
 	created() {
-
+		
 	},
 	computed: {
 

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

@@ -208,15 +208,15 @@ export default {
       this.activity = res.data;
     });
 
-    useJwt.postData('/api/check_in/index_by_activity', { activityId: this.activityId }).then(res => {
+    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', { activityId: this.activityId }).then(res => {
+    useJwt.postData('/api/prize/index_by_activity', { activity_id: this.activityId }).then(res => {
       this.prizeList = res.data;
     });
 
-    useJwt.postData('/api/recipients/index_by_activity', { activityId: this.activityId }).then(res => {
+    useJwt.postData('/api/recipients/index_by_activity', { activity_id: this.activityId }).then(res => {
       this.recipientsList = res.data;
     });
 
@@ -286,10 +286,10 @@ export default {
       this.updateDataset();
     },
     updateDataset() {
-      useJwt.postData('/api/prize/index_by_activity', { activityId: this.activityId }).then(res => {
+      useJwt.postData('/api/prize/index_by_activity', { activity_id: this.activityId }).then(res => {
         this.prizeList = res.data;
       });
-      useJwt.postData('/api/recipients/index_by_activity', { activityId: this.activityId }).then(res => {
+      useJwt.postData('/api/recipients/index_by_activity', { activity_id: this.activityId }).then(res => {
         this.recipientsList = res.data;
       });
     },

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

@@ -0,0 +1,35 @@
+<template>
+  <div class="p-4">
+    <h4 class="mb-2">
+      Layout Blank
+    </h4>
+    <b-alert
+      variant="primary"
+      show
+    >
+      <div class="alert-body">
+        <p>
+          <strong>Info: </strong>
+          <span>This layout is used in Authentication &amp; Miscellaneous page. Please check the </span>
+          <b-link
+            class="alert-link"
+            href="https://pixinvent.com/demo/vuexy-vuejs-admin-dashboard-template/documentation/guide/layout/page-layout-examples.html#layout-blank"
+            target="_blank"
+          >Layout Blank documentation</b-link>
+          <span> for more details.</span>
+        </p>
+      </div>
+    </b-alert>
+  </div>
+</template>
+
+<script>
+import { BAlert, BLink } from 'bootstrap-vue'
+
+export default {
+  components: {
+    BAlert,
+    BLink,
+  },
+}
+</script>

routes/api.php

@@ -118,9 +118,12 @@ Route::middleware(['auth:sanctum', 'abilities:Admin'])->group(function () {
     // Recipients
     Route::post('/recipient/claim', [RecipientsController::class, 'claim']);
     Route::post('/recipient/isClaimed', [RecipientsController::class, 'isClaimed']);
-
+    
     
 });
+
+Route::post('/recipient/indexByPrize', [RecipientsController::class, 'indexByPrize']);
+
 Route::post('/user/index', [UserController::class, 'index']);
 Route::post('/department/index', [DepartmentController::class, 'index']);
 Route::post('/prize/index_by_activity', [PrizeController::class, 'index_by_activity']);