add header table / fix add queue dialog

src/components/GanttChart/AddQueueDialog.vue

@@ -5,41 +5,52 @@
       <form @submit.prevent="handleSubmit">
         <div class="form-group">
           <label class="white-text">Machine ID:</label>
-          <select v-model="form.machineID" required class="selete-mec-color-text">
-            <option disabled value="">Select Machine</option>
+          <select v-model="form.status" class="border-input" required>
             <option v-for="machine in machines" :key="machine.machineID" :value="machine.machineID">
               {{ machine.name }}
             </option>
           </select>
         </div>
+
         <div class="form-group">
           <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 class="white-text">Page Number:</label>
-          <input class="border-input" v-model.number="form.pageNumber" type="number" required />
-        </div>
+
+        <!-- 🆕 Start Time & Finish Time: ใช้ DateTime Picker -->
         <div class="form-group">
           <label class="white-text">Start Time:</label>
-          <input class="border-input" v-model="form.startTime" type="text" required />
+          <input class="border-input" type="datetime-local" v-model="form.startTime" required />
         </div>
         <div class="form-group">
           <label class="white-text">Finish Time:</label>
-          <input class="border-input" v-model="form.finishTime" type="text" required />
+          <input class="border-input" type="datetime-local" v-model="form.finishTime" required />
         </div>
+
+        <!-- 🆕 Status: ใช้ Dropdown -->
         <div class="form-group">
           <label class="white-text">Status:</label>
-          <input class="border-input" v-model="form.status" type="text" required />
+          <select v-model="form.status" class="border-input" required>
+            <option value="ยังไม่ได้จัดส่ง">ยังไม่ได้จัดส่ง</option>
+            <option value="จัดส่งแล้ว">จัดส่งแล้ว</option>
+          </select>
         </div>
+
+        <!-- 🆕 Bottle Size: ใช้ Dropdown -->
         <div class="form-group">
           <label class="white-text">Bottle Size:</label>
-          <input class="border-input" v-model="form.bottleSize" type="text" required />
+          <select v-model="form.bottleSize" class="border-input" required>
+            <option value="600 ml">600 ml</option>
+            <option value="1500 ml">1500 ml</option>
+            <option value="350 ml">350 ml</option>
+          </select>
         </div>
+
         <div class="form-group">
           <label class="white-text">Produced Quantity:</label>
           <input class="border-input" v-model.number="form.producedQuantity" type="number" required />
         </div>
+
         <!-- ปุ่ม Add หรือ Save Changes -->
         <div class="dialog-buttons">
           <button type="submit" class="primary-btn">
@@ -58,7 +69,6 @@ import { reactive, ref, watch } from 'vue'
 interface QueueItem {
   machineID: string
   orderID: number | null
-  pageNumber: number | null
   startTime: string
   finishTime: string
   status: string
@@ -89,11 +99,10 @@ const emit = defineEmits<{
 const form = reactive<QueueItem>({
   machineID: '',
   orderID: null,
-  pageNumber: null,
   startTime: '',
   finishTime: '',
-  status: '',
-  bottleSize: '',
+  status: 'ยังไม่ได้จัดส่ง',
+  bottleSize: '600 ml',
   producedQuantity: null,
 })
 
@@ -113,11 +122,10 @@ const isEditing = ref(false)
 function resetForm() {
   form.machineID = ''
   form.orderID = null
-  form.pageNumber = null
   form.startTime = ''
   form.finishTime = ''
-  form.status = ''
-  form.bottleSize = ''
+  form.status = 'ยังไม่ได้จัดส่ง'
+  form.bottleSize = '600 ml'
   form.producedQuantity = null
 }
 
@@ -184,7 +192,8 @@ watch(
   margin-bottom: 5px;
 }
 
-.form-group input {
+.form-group input,
+.form-group select {
   width: 100%;
   padding: 5px;
   box-sizing: border-box;
@@ -215,28 +224,10 @@ watch(
   cursor: pointer;
 }
 
-.icon-button {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-}
-
-.icon-button .mdi {
-  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;

src/components/GanttChart/GanttChart.vue

 <template>
   <div class="gantt-container">
+    <h2 class="gantt-title">ตารางคิวการผลิต</h2>
     <div class="gantt-header">
       <!-- Calendar: เชื่อมกับ selectedDate -->
       <GanttCalendar v-model:modelValue="selectedDate" />
@@ -330,10 +331,10 @@ function getQueueStyle(item: QueueItem) {
 
 
 function getLineStyle(hour: number) {
-  const timelineStart = timeToDecimal(startTime.value);
-  const timelineEnd = timeToDecimal(endTime.value);
-  const ratio = (hour - timelineStart) / (timelineEnd - timelineStart);
-  return { left: ratio * 100 + '%' };
+  const totalHours = hours.value.length; // นับจำนวนชั่วโมงที่แสดง (เช่น 10 ช่อง)
+  const leftPercent = (hour - timeToDecimal(startTime.value)) / totalHours * 100;
+  
+  return { left: `${leftPercent}%` };
 }
 
 function timeToDecimal(timeStr: string): number {

src/components/GanttChart/ganttChart.css

@@ -9,10 +9,12 @@
   display: flex;
   background: #fff;
 }
+
 .gantt-header {
   display: flex;
   align-items: center;
-    justify-content: space-between; /* จัดให้ Calendar อยู่ซ้าย, ปุ่มอยู่ขวา */
+  justify-content: space-between;
+  /* จัดให้ Calendar อยู่ซ้าย, ปุ่มอยู่ขวา */
   margin-bottom: 16px;
 }
 
@@ -31,7 +33,7 @@
 }
 
 .time-cell {
-    flex: 1;
+  width: calc(100% / 10);
   text-align: center;
   border-bottom: 1px solid #ddd;
   font-size: 15px;
@@ -84,6 +86,15 @@
   padding: 0 10px;
 }
 
+.gantt-title {
+  text-align: left; 
+  font-size: 30px;
+  font-weight: bold;
+  margin: 10px 0 10px 30px; 
+  color: #333;
+}
+
+
 .resize-handle {
   width: 5px;
   height: 100%;
@@ -126,7 +137,8 @@
 }
 
 .pagination-right {
-    margin-left: auto; /* ดันไปขวาสุด */
+  margin-left: auto;
+  /* ดันไปขวาสุด */
 }
 
 
@@ -186,10 +198,14 @@
 .dialog-buttons button {
   margin: 5px;
 }
+
 .add-page-btn {
-    background-color: #2B2E3F !important; /* สีปุ่ม */
-    color: white !important; /* สีไอคอน */
-    border-radius: 50%; /* ทำให้เป็นวงกลม */
+  background-color: #2B2E3F !important;
+  /* สีปุ่ม */
+  color: white !important;
+  /* สีไอคอน */
+  border-radius: 50%;
+  /* ทำให้เป็นวงกลม */
   width: 40px;
   height: 40px;
   display: flex;
@@ -200,11 +216,12 @@
 }
 
 .add-page-btn:hover {
-    background-color: #1E1E2F !important; /* สีเข้มขึ้นเมื่อ hover */
+  background-color: #1E1E2F !important;
+  /* สีเข้มขึ้นเมื่อ hover */
 }
+
 .add-page:disabled {
-    background-color: #ccc !important; /* เปลี่ยนสีเป็นสีจาง */
+  background-color: #ccc !important;
+  /* เปลี่ยนสีเป็นสีจาง */
   cursor: not-allowed;
 }
\ No newline at end of file
-  
-  
\ No newline at end of file