update

src/views/Courses/Create.vue

@@ -290,6 +290,7 @@ watch(event, (data) => {
 });
 
 function addEventData() {
+  // insertSession(); // 測試
   // 處理時間格式
   event.start_time = mergeAndFormatDateTime(date.start_date, date.start_time);
   event.end_time = mergeAndFormatDateTime(date.end_date, date.end_time);
@@ -315,6 +316,8 @@ function convertDateFormat(inputDateStr) {
   return formattedDate;
 }
 
+let eventId = ref(null);
+
 async function insertEvent() {
   console.log("insertEvent", event);
 
@@ -339,7 +342,8 @@ async function insertEvent() {
       "https://cmm.ai:8088/api/insert_event",
       formData
     );
-
+    eventId.value = response.data.class_id;
+    console.log("eventId.value", eventId.value);
     console.log("新增場次 response", response);
   } catch (error) {
     console.error(error);
@@ -355,6 +359,8 @@ async function create() {
     await insertUserResume(); // 新增履歷
     await insertClassName(); // 新增課程
     await insertEvent(); // 新增場次
+    await insertSession(); // 新增課堂
+
     loading.value = false;
     step.value++;
   } catch (error) {
@@ -432,12 +438,84 @@ const handleCoverImg = (event) => {
   }
 };
 
-// let age = ref("不拘");
 let sessionsDialog = ref(false);
 
 const requiredRule = (value) => !!value || "此欄位為必填";
 
 const weekList = reactive(["一", "二", "三", "四", "五", "六", "日"]);
+const selectedWeek = ref([0, 0, 0, 0, 0, 0, 0]); // 選擇星期
+
+const toggleSelected = (index) => {
+  if (selectedWeek.value[index]) {
+    selectedWeek.value[index] = 0;
+  } else {
+    selectedWeek.value[index] = 1;
+  }
+};
+
+let session = reactive({
+  class_event_id: null,
+  week_day_str: "",
+  start_week_time: "",
+  end_week_time: "",
+});
+
+let sessionTime = reactive({
+  start_week_time: "",
+  end_week_time: "",
+});
+
+let sessionStartTimeList = ref(["", "", "", "", "", "", ""]);
+let sessionEndTimeList = ref(["", "", "", "", "", "", ""]);
+
+// 新增課堂
+async function insertSession() {
+  const weekString = `[${selectedWeek.value.join(",")}]`;
+  session.week_day_str = weekString;
+
+  selectedWeek.value.map((item, index) => {
+    if (item) {
+      console.log("index", index);
+      // 開始時間
+      sessionStartTimeList.value[index] = `"${
+        sessionTime.start_week_time.hours
+      }:${
+        sessionTime.start_week_time.minutes === 0
+          ? "00"
+          : sessionTime.start_week_time.minutes
+      }:00"`;
+
+      // 結束時間
+      sessionEndTimeList.value[index] = `"${sessionTime.end_week_time.hours}:${
+        sessionTime.end_week_time.minutes === 0
+          ? "00"
+          : sessionTime.end_week_time.minutes
+      }:00"`;
+    } else {
+      sessionStartTimeList.value[index] = '""';
+      sessionEndTimeList.value[index] = '""';
+    }
+  });
+
+  session.start_week_time = `[${sessionStartTimeList.value}]`;
+  session.end_week_time = `[${sessionEndTimeList.value}]`;
+  session.class_event_id = eventId.value;
+
+  const formData = new FormData();
+  for (const key in session) {
+    formData.append(key, session[key]);
+  }
+
+  try {
+    const response = await axios.post(
+      "https://cmm.ai:8088/api/auto_create_session",
+      formData
+    );
+    console.log("新增課堂 response", response);
+  } catch (error) {
+    console.error(error);
+  }
+}
 </script>
 
 <template>
@@ -1095,6 +1173,8 @@ const weekList = reactive(["一", "二", "三", "四", "五", "六", "日"]);
                                 <li
                                   v-for="(item, index) in weekList"
                                   :key="index"
+                                  @click="toggleSelected(index)"
+                                  :class="{ active: selectedWeek[index] }"
                                 >
                                   <button>
                                     {{ item }}
@@ -1113,12 +1193,12 @@ const weekList = reactive(["一", "二", "三", "四", "五", "六", "日"]);
                               </p>
                               <div class="d-flex w-100">
                                 <VueDatePicker
-                                  v-model="date.end_time"
+                                  v-model="sessionTime.start_week_time"
                                   time-picker
                                 />
                                 <span class="d-flex align-center mx-2">～</span>
                                 <VueDatePicker
-                                  v-model="date.end_time"
+                                  v-model="sessionTime.end_week_time"
                                   time-picker
                                 />
                               </div>
@@ -1497,6 +1577,12 @@ const weekList = reactive(["一", "二", "三", "四", "五", "六", "日"]);
         background-color: var(--purple);
       }
     }
+    &.active {
+      button {
+        color: #fff;
+        background-color: var(--purple);
+      }
+    }
   }
 }