From 06081571a5d676021f4ea5cd734422d52c85835a Mon Sep 17 00:00:00 2001
From: Kritkhanin Anantakul <65160144@go.buu.ac.th>
Date: Sun, 9 Mar 2025 21:20:18 +0700
Subject: [PATCH] fix ui make queue btn
---
src/components/GanttChart/MakequeueBtn.vue | 72 ++++++++++++++--------
1 file changed, 47 insertions(+), 25 deletions(-)
diff --git a/src/components/GanttChart/MakequeueBtn.vue b/src/components/GanttChart/MakequeueBtn.vue
index bff4e23..33f5ad0 100644
--- a/src/components/GanttChart/MakequeueBtn.vue
+++ b/src/components/GanttChart/MakequeueBtn.vue
@@ -1,28 +1,50 @@
<template>
- <div>
- <button @click="makeQueue">Make Queue</button>
- </div>
- </template>
-
- <script>
- import { scheduleAllOrders } from './scheduleCalculator.js';
-
- export default {
- name: 'MakequeueBtn',
- methods: {
- makeQueue() {
- const queueItems = scheduleAllOrders();
- // ส่งข้อมูล queue ไปยังคอมโพเนนต์พาเรนต์
- this.$emit('updateQueue', queueItems);
- }
+ <div>
+ <button @click="makeQueue">Make a queue</button>
+ </div>
+</template>
+
+<script>
+import { scheduleAllOrders } from './scheduleCalculator.js';
+
+export default {
+ name: 'MakequeueBtn',
+ methods: {
+ makeQueue() {
+ const queueItems = scheduleAllOrders();
+ this.$emit('updateQueue', queueItems);
}
}
- </script>
-
- <style scoped>
- button {
- padding: 8px 16px;
- font-size: 16px;
- }
- </style>
-
\ No newline at end of file
+}
+</script>
+
+<style scoped>
+button {
+ /* พื้นหลังสีน้ำเงิน */
+ background-color: #2196f3;
+ /* สีตัวอักษรเป็นสีขาว */
+ color: #fff;
+ /* ไม่มีขอบ */
+ border: none;
+ /* มุมโค้ง */
+ border-radius: 8px;
+ /* ขนาดตัวอักษรใหญ่ขึ้น */
+ font-size: 18px;
+ font-weight: bold;
+ /* ปรับขนาดปุ่มให้กว้างขึ้น */
+ width: 200px;
+ height: 60px;
+ /* กึ่งกลางตัวอักษร */
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ /* เปลี่ยนเคอร์เซอร์เป็นแบบคลิกได้ */
+ cursor: pointer;
+ transition: background-color 0.2s ease;
+}
+
+/* เมื่อเอาเมาส์ไปชี้ */
+button:hover {
+ background-color: #1976d2;
+}
+</style>
--
GitLab