From 71c32b6e07b74750e4f6183c467d78a0f8e9c9d5 Mon Sep 17 00:00:00 2001
From: Kritkhanin Anantakul <65160144@go.buu.ac.th>
Date: Tue, 18 Mar 2025 18:03:26 +0700
Subject: [PATCH] setting btn
---
src/components/GanttChart/GanttChart.vue | 11 +++++--
src/components/GanttChart/MakequeueBtn.vue | 2 +-
src/components/GanttChart/SettingBtn.vue | 38 ++++++++++++++++++++++
src/components/GanttChart/ganttChart.css | 31 ++++++++++++++++++
4 files changed, 79 insertions(+), 3 deletions(-)
create mode 100644 src/components/GanttChart/SettingBtn.vue
diff --git a/src/components/GanttChart/GanttChart.vue b/src/components/GanttChart/GanttChart.vue
index e00352b..9962395 100644
--- a/src/components/GanttChart/GanttChart.vue
+++ b/src/components/GanttChart/GanttChart.vue
@@ -3,10 +3,16 @@
<div class="gantt-header">
<!-- Calendar: เชื่อมกับ selectedDate -->
<GanttCalendar v-model:modelValue="selectedDate" />
- <!-- ปุ่ม Make a queue พร้อม event listener -->
- <MakequeueBtn @click="openAddQueueDialog" />
+
+ <!-- ปุ่มจัดเรียงและเพิ่มระยะห่าง -->
+ <div class="gantt-buttons">
+ <MakequeueBtn @click="openAddQueueDialog" />
+ <SettingBtn />
+ </div>
</div>
+
+
<!-- Gantt Chart UI -->
<div class="gantt-chart">
<!-- Header: Time Scale -->
@@ -93,6 +99,7 @@ import GanttCalendar from './GanttCalendar.vue';
import OrderDialog from './OrderDialog.vue';
import AddQueueDialog from './AddQueueDialog.vue';
import MakequeueBtn from './MakequeueBtn.vue';
+import SettingBtn from './SettingBtn.vue';
import './ganttChart.css';
// ใช้ store สำหรับ Queue และ Machine
diff --git a/src/components/GanttChart/MakequeueBtn.vue b/src/components/GanttChart/MakequeueBtn.vue
index 36474d6..0e5d563 100644
--- a/src/components/GanttChart/MakequeueBtn.vue
+++ b/src/components/GanttChart/MakequeueBtn.vue
@@ -1,6 +1,6 @@
<template>
<div>
- <v-btn>Make a queue</v-btn>
+ <v-btn>icon</v-btn>
</div>
</template>
diff --git a/src/components/GanttChart/SettingBtn.vue b/src/components/GanttChart/SettingBtn.vue
new file mode 100644
index 0000000..d50bcbf
--- /dev/null
+++ b/src/components/GanttChart/SettingBtn.vue
@@ -0,0 +1,38 @@
+<template>
+ <div>
+ <v-btn>
+ <v-icon>mdi-cog</v-icon>
+ </v-btn>
+ </div>
+</template>
+
+<script lang="ts" setup>
+import { defineEmits } from 'vue';
+import { useQueueStore } from '@/stores/queue.js';
+import LoadingDialog from '../LoadingDialog.vue';
+</script>
+
+<style scoped>
+.v-btn {
+ background-color: #333647;
+ color: #ffffff;
+ border-radius: 8px;
+ font-size: 18px;
+ font-weight: bold;
+ width: 60px;
+ height: 60px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ transition: background-color 0.2s ease;
+}
+
+.v-btn:hover {
+ background-color: #7e9cd3;
+}
+
+.v-icon {
+ font-size: 32px;
+}
+</style>
diff --git a/src/components/GanttChart/ganttChart.css b/src/components/GanttChart/ganttChart.css
index 015e570..16934f6 100644
--- a/src/components/GanttChart/ganttChart.css
+++ b/src/components/GanttChart/ganttChart.css
@@ -85,6 +85,37 @@
cursor: grab;
padding: 0 10px;
}
+.gantt-buttons {
+ display: flex;
+ align-items: center;
+ gap: 12px; /* ปรับตามต้องการ */
+}
+.MakequeueBtn {
+ background-color: #333647;
+ color: white;
+ font-size: 16px;
+ font-weight: bold;
+ padding: 12px 16px;
+ border-radius: 8px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.SettingBtn {
+ background-color: #333647;
+ width: 48px;
+ height: 48px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 8px;
+}
+
+.SettingBtn v-icon {
+ font-size: 24px;
+ color: white;
+}
.gantt-title {
text-align: left;
--
GitLab