From e499c5d061953b9a579df18e659f6cfe27ab8049 Mon Sep 17 00:00:00 2001
From: Atchara Bunserm <65160207@go.buu.ac.th>
Date: Mon, 10 Mar 2025 21:50:07 +0700
Subject: [PATCH] Dialog Add queue design

---
 package-lock.json                            |  1 -
 src/components/GanttChart/AddQueueDialog.vue | 69 +++++++++++++-------
 2 files changed, 47 insertions(+), 23 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 518706d..e9d153d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2841,7 +2841,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
       "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
-      "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/kossnocorp"
diff --git a/src/components/GanttChart/AddQueueDialog.vue b/src/components/GanttChart/AddQueueDialog.vue
index 92a78ec..2b32699 100644
--- a/src/components/GanttChart/AddQueueDialog.vue
+++ b/src/components/GanttChart/AddQueueDialog.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="add-queue-dialog-overlay" v-if="visible">
     <div class="add-queue-dialog">
-      <h3>{{ isEditing ? "Edit Queue" : "Add New Queue" }}</h3>
+      <h3 class="white-text">{{ isEditing ? "Edit Queue" : "Add New Queue" }}</h3>
       <form @submit.prevent="handleSubmit">
         <div class="form-group">
-          <label>Machine ID:</label>
-          <select v-model="form.machineID" required>
+          <label class="white-text">Machine ID:</label>
+          <select v-model="form.machineID" required class="selete-mec-color-text">
             <option disabled value="">Select Machine</option>
             <option v-for="machine in machines" :key="machine.machineID" :value="machine.machineID">
               {{ machine.name }}
@@ -13,32 +13,32 @@
           </select>
         </div>
         <div class="form-group">
-          <label>Order ID:</label>
-          <input v-model.number="form.orderID" type="number" required />
+          <label class="white-text">Order ID:</label>
+          <input class="border-input" v-model.number="form.orderID" type="number" required />
         </div>
         <div class="form-group">
-          <label>Page Number:</label>
-          <input v-model.number="form.pageNumber" type="number" required />
+          <label class="white-text">Page Number:</label>
+          <input class="border-input" v-model.number="form.pageNumber" type="number" required />
         </div>
         <div class="form-group">
-          <label>Start Time:</label>
-          <input v-model="form.startTime" type="text" required />
+          <label class="white-text">Start Time:</label>
+          <input class="border-input" v-model="form.startTime" type="text" required />
         </div>
         <div class="form-group">
-          <label>Finish Time:</label>
-          <input v-model="form.finishTime" type="text" required />
+          <label class="white-text">Finish Time:</label>
+          <input class="border-input" v-model="form.finishTime" type="text" required />
         </div>
         <div class="form-group">
-          <label>Status:</label>
-          <input v-model="form.status" type="text" required />
+          <label class="white-text">Status:</label>
+          <input class="border-input" v-model="form.status" type="text" required />
         </div>
         <div class="form-group">
-          <label>Bottle Size:</label>
-          <input v-model="form.bottleSize" type="text" required />
+          <label class="white-text">Bottle Size:</label>
+          <input class="border-input" v-model="form.bottleSize" type="text" required />
         </div>
         <div class="form-group">
-          <label>Produced Quantity:</label>
-          <input v-model.number="form.producedQuantity" type="number" required />
+          <label class="white-text">Produced Quantity:</label>
+          <input class="border-input" v-model.number="form.producedQuantity" type="number" required />
         </div>
 
         <!-- ปุ่ม Add หรือ Save Changes -->
@@ -140,10 +140,10 @@ export default {
 }
 
 .add-queue-dialog {
-  background: #fff;
+  background: #2B2E3F;
   padding: 20px;
   border-radius: 8px;
-  width: 400px;
+  width: 450px;
   position: relative;
 }
 
@@ -171,7 +171,7 @@ export default {
 }
 
 .primary-btn {
-  background-color: #2B2E3F;
+  background-color: #49E060;
   color: white;
   border: none;
   padding: 8px 16px;
@@ -180,8 +180,8 @@ export default {
 }
 
 .secondary-btn {
-  background-color: #ccc;
-  color: #333;
+  background-color: #F58181;
+  color: white;
   border: none;
   padding: 8px 16px;
   border-radius: 4px;
@@ -201,4 +201,29 @@ export default {
   font-size: 24px;
   color: #2B2E3F;
 }
+
+.white-text {
+    color: white;
+  }
+
+.selete-mec-color-text {
+  color:rgb(0, 204, 255)
+}
+
+.border-input {
+  background-color: white;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 8px 12px;
+  width: 100%;
+  color: #333;
+  font-size: 16px;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.border-input:focus {
+  outline: none;
+  border-color: #4299e1;
+  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+}
 </style>
\ No newline at end of file
-- 
GitLab