เพิ่ม ui แสดงผล

src/modules/04_system/components/cardAutoBackup.vue

@@ -70,9 +70,9 @@ const formDataschedule = ref<ScheduleCreate>({
 const filter = ref<string>("");
 const visibleColumns = ref<string[]>([
   "name",
-  "createAt",
+  "type",
-  "databaseSize",
+  "date",
-  "storageSize",
+  "startAt",
   "status",
 ]);
 const baseColumns = ref<QTableProps["columns"]>([
@@ -86,23 +86,33 @@ const baseColumns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "createAt",
+    name: "type",
     align: "center",
     label: "ตารางการข้อมูลสำรองใหม่",
     sortable: true,
     // field: (v) => date2Thai(v, false, true),
-    field: "timestamp",
+    field: "type",
-    format: (v) => date2Thai(v, false, true),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "databaseSize",
+    name: "date",
-    align: "center",
+    align: "left",
     label: "เวลาการทำข้อมูลสำรองใหม่",
     sortable: true,
     // field: (v) => date2Thai(v, false, true),
-    field: "databaseSize",
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "startAt",
+    align: "left",
+    label: "วันที่เริ่มการสำรองข้อมูล",
+    sortable: true,
+    field: (v) => date2Thai(v, false, true),
+
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -139,7 +149,7 @@ function convertFormToCron() {
     if (typeTime.value.includes("set")) {
       formDataschedule.value.schedule = `0 ${time} * * *`;
     } else {
-      formDataschedule.value.schedule = `0 * 23/${formDataschedule.value.timeStartEvery} * * *`;
+      formDataschedule.value.schedule = `0 0 */${formDataschedule.value.timeStartEvery} * * *`;
     }
   }
 
@@ -150,8 +160,6 @@ function convertFormToCron() {
   if (formDataschedule.value.type === "monthly") {
     formDataschedule.value.schedule = `0 ${time} ${result} * *`;
   }
-
-  console.log(formDataschedule.value);
 }
 
 /**
@@ -201,6 +209,32 @@ const tabItems = ref<ItemsTeb[]>([
   { name: "monthly", label: "ทุกเดือน", icon: "" },
 ]);
 
+const dayColors: { [key: string]: string } = {
+  monday: "#FFFF00", // Yellow
+  tuesday: "#FF69B4", // Pink
+  wednesday: "#008000", // Green
+  thursday: "#FFA500", // Orange
+  friday: "#0000FF", // Blue
+  saturday: "#800080", // Purple
+  sunday: "#FF0000", // Red
+};
+
+const dayNames: { [key: string]: string } = {
+  mon: "จ", // Yellow
+  tue: "อ", // Pink
+  wed: "พ", // Green
+  thu: "พฤ", // Orange
+  fri: "ศ", // Blue
+  sat: "ส", // Purple
+  sun: "อา", // Red
+};
+
+const typeSchedule: { [key: string]: string } = {
+  daily: "รายวัน",
+  weekly: "รายสัปดาห์",
+  monthly: "รายเดือน",
+};
+
 onMounted(async () => {
   getSchedule();
 });
@@ -261,44 +295,78 @@ onMounted(async () => {
       <template v-slot:header="props">
         <q-tr :props="props">
           <q-th v-for="(col, i) in props.cols" :key="col.name" :props="props">
-            <span class="text-weight-medium" :class="{ 'q-ml-md': i === 2 }">{{
+            {{ col.label }}
-              col.label
-            }}</span>
           </q-th>
-          <q-th auto-width></q-th>
+          <q-th></q-th>
         </q-tr>
       </template>
       <template v-slot:body="props">
         <q-tr :props="props">
-          <q-td v-for="(col, i) in props.cols" :key="col.name" :props="props">
+          <q-td>
-            <div :class="{ 'text-center': i === 4 }">
+            {{ props.row.name }}
-              {{
+          </q-td>
-                i !== 4 && i !== 2 && i !== 3
+          <q-td class="text-center">
-                  ? col.value
+            <q-badge
-                  : col.value === "สำเร็จ"
+              rounded
-                  ? "สำเร็จ"
+              style="color: #007aff; background: #ededed"
-                  : i === 2 || i === 3
+              :label="typeSchedule[props.row.type]"
-                  ? getSize(col.value)
+            />
-                  : ""
+          </q-td>
-              }}
+          <q-td>
+            <div class="column">
+              <div class="col-6">{{ props.row.time }}</div>
 
-              <q-circular-progress
+              <div
-                v-if="props.row.status === 'running' && col.name === 'status'"
+                class="col-6 q-gutter-x-sm"
-                indeterminate
+                v-if="props.row.type.includes('daily')"
-                rounded
+              >
-                size="20px"
+                <q-badge
-                color="lime"
+                  rounded
-                class="q-ma-md"
+                  style="color: #fefefe; background: #242121"
-              />
+                  :label="
+                    props.row.timeStartEvery !== ''
+                      ? `ทุก ${props.row.timeStartEvery} ชั่วโมง`
+                      : 'ทุกวัน'
+                  "
+                />
+              </div>
+
+              <div
+                class="col-6 q-gutter-x-sm"
+                v-if="props.row.type.includes('weekly')"
+              >
+                <q-badge
+                  v-for="(t, i) in props.row.date.split(' ')"
+                  rounded
+                  :style="`color: #fefefe; background: ${dayColors[t]}`"
+                  :label="dayNames[t]"
+                />
+              </div>
+
+              <div
+                class="col-6 q-gutter-x-sm"
+                v-if="props.row.type.includes('monthly')"
+              >
+                <q-badge
+                  v-for="(t, i) in props.row.date.split(' ')"
+                  rounded
+                  style="color: #fefefe; background: #242121"
+                  :label="`ทุกวันที่ ${t}`"
+                />
+              </div>
             </div>
           </q-td>
+          <q-td>
+            {{ date2Thai(props.row.startAt, true, false) }}
+          </q-td>
+          <q-td> <q-toggle size="lg" v-model="props.row.enabled" /> </q-td>
           <q-td>
             <q-btn
               dense
               flat
               round
-              icon="delete"
+              icon="edit"
-              color="red"
+              color="primary"
               size="12px"
               @click.petvent="onDelete(props.row.name)"
             >
@@ -310,8 +378,8 @@ onMounted(async () => {
               flat
               round
               :disable="restoreRunTotal !== 0"
-              icon="restore"
+              icon="delete"
-              color="primary"
+              color="red"
               size="12px"
               @click.petvent="onRestore(props.row.name)"
             >