From 043b321afc605189ad452475d6f4fb9d021cabb2 Mon Sep 17 00:00:00 2001
From: syzygy608 <hankwu99@gmail.com>
Date: Thu, 18 Jan 2024 16:16:15 +0800
Subject: [PATCH 01/10] add now option and css

---
 src/components/layout/footer.vue        |  2 +-
 src/components/layout/navbar.vue        |  2 +-
 src/components/pages/main/inputArea.vue | 24 +++++++++++++++++++++---
 src/css/style.css                       |  3 +++
 4 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/components/layout/footer.vue b/src/components/layout/footer.vue
index 98d99bb..6f9c7f1 100644
--- a/src/components/layout/footer.vue
+++ b/src/components/layout/footer.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class = "bg-orange-200 py-3 w-full flex items-center">
+    <div class = "bg-orange-200 py-3 w-full flex items-center select-none">
         <div class = 'font-mono text-center mx-auto'>
             CCU Class 2021-2024
         </div>
diff --git a/src/components/layout/navbar.vue b/src/components/layout/navbar.vue
index 7952bcb..2bd4a1e 100644
--- a/src/components/layout/navbar.vue
+++ b/src/components/layout/navbar.vue
@@ -4,7 +4,7 @@ const router = useRouter();
 </script>
 
 <template>
-    <div class = "z-10 bg-orange-200 px-3 py-3 flex md:flex-row flex-row-reverse items-center place-content-between">
+    <div class = "z-10 bg-orange-200 px-3 py-3 flex md:flex-row flex-row-reverse items-center place-content-between select-none">
         <router-link to = "/">
             <div class = "font-bold text-2xl bg-gradient-to-br from-orange-300 to-red-700 text-transparent bg-clip-text">
                 中正課表 此為測試機
diff --git a/src/components/pages/main/inputArea.vue b/src/components/pages/main/inputArea.vue
index e5938d4..6ca6f2d 100644
--- a/src/components/pages/main/inputArea.vue
+++ b/src/components/pages/main/inputArea.vue
@@ -45,11 +45,30 @@
                     <p class = "text-right py-2 mx-3" v-show = "show_credit">
                         目前學分: {{credit}}
                     </p>
+                    <p class = "mx-3 my-2">
+                        Hint: 課程教室、課程時間皆可<strong>點擊選擇</strong>顯示其他資訊
+                    </p>
                     <table class = "w-full my-1 mb-1">
                         <thead>
                             <tr>
-                                <th v-for = "title in class_list_title" class = "text-center py-2 px-2 border-collapse bg-gray-200">
-                                    {{ title }}
+                                <th class = "text-center py-2 px-2 border-collapse bg-gray-200">
+                                    課程名稱
+                                </th>
+                                <th class = "text-center py-2 px-2 border-collapse bg-gray-200">
+                                    <select class = "custom">
+                                        <option selected>課程教室</option>
+                                        <option>課程教師</option>
+                                        <option>課程編號</option>
+                                    </select>
+                                </th>
+                                <th class = "text-center py-2 px-2 border-collapse bg-gray-200">
+                                    <select class = "custom">
+                                        <option selected>課程時間</option>
+                                        <option>系所 / 向度</option>
+                                    </select>
+                                </th>
+                                <th class = "text-center py-2 px-2 border-collapse bg-gray-200">
+                                    操作
                                 </th>
                             </tr>
                         </thead>
@@ -119,7 +138,6 @@ import courseCard from "@components/pages/main/courseCard.vue";
 
 const searchType = ref("以課程名稱搜尋")
 
-let class_list_title = ["課程名稱", "課程教室", "課程時間", "操作"];
 let class_list_visible = ref(false);
 let show = computed(() => store.state.course.showTable);
 
diff --git a/src/css/style.css b/src/css/style.css
index 30fc0e1..9245273 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -241,4 +241,7 @@ thead > tr > th
 }
 [type=search]::placeholder{
     @apply text-center;
+}
+.custom {
+    @apply bg-transparent border-0 border-b-2 border-gray-500 w-28 text-center;
 }
\ No newline at end of file

From 699ca5af548549e95ab8949aac42c8ab01a4f868 Mon Sep 17 00:00:00 2001
From: as6325400 <as6325400@gmail.com>
Date: Thu, 18 Jan 2024 16:47:45 +0800
Subject: [PATCH 02/10] dev to fix race condition

---
 index.html                       | 2 +-
 src/components/layout/navbar.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 650ed5b..b87c4fd 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
       <meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
       <meta name = "description" content = "CCU Class" />
       <meta name = "keywords" content = "CCU, Class" />
-      <!-- <meta name="robots" content="noindex"> -->
+      <meta name="robots" content="noindex">
       <!-- Global site tag (gtag.js) - Google Analytics -->
       <script async src = "https://www.googletagmanager.com/gtag/js?id=G-4V5KYBRM5L"></script>
       <script>
diff --git a/src/components/layout/navbar.vue b/src/components/layout/navbar.vue
index a9ec260..7952bcb 100644
--- a/src/components/layout/navbar.vue
+++ b/src/components/layout/navbar.vue
@@ -7,7 +7,7 @@ const router = useRouter();
     <div class = "z-10 bg-orange-200 px-3 py-3 flex md:flex-row flex-row-reverse items-center place-content-between">
         <router-link to = "/">
             <div class = "font-bold text-2xl bg-gradient-to-br from-orange-300 to-red-700 text-transparent bg-clip-text">
-                中正課表
+                中正課表 此為測試機
             </div>
         </router-link>
         <div class = "text-md hidden md:block">

From 84b8e0e1835e81e618cedf7fd9c500d62b1e8f76 Mon Sep 17 00:00:00 2001
From: as6325400 <as6325400@gmail.com>
Date: Fri, 19 Jan 2024 17:20:07 +0800
Subject: [PATCH 03/10] add show classListOption

---
 src/components/pages/main/inputArea.vue | 39 ++++++++++++++++++-------
 src/functions/course_add.ts             | 13 +++++++--
 src/functions/course_delete.ts          | 12 ++++----
 src/functions/general.ts                | 22 ++++++++++++--
 4 files changed, 66 insertions(+), 20 deletions(-)

diff --git a/src/components/pages/main/inputArea.vue b/src/components/pages/main/inputArea.vue
index 6873c0d..ac76b8d 100644
--- a/src/components/pages/main/inputArea.vue
+++ b/src/components/pages/main/inputArea.vue
@@ -55,16 +55,13 @@
                                     課程名稱
                                 </th>
                                 <th class = "text-center py-2 px-2 border-collapse bg-gray-200">
-                                    <select class = "custom">
-                                        <option selected>課程教室</option>
-                                        <option>課程教師</option>
-                                        <option>課程編號</option>
+                                    <select class = "custom" v-model="showListOptionDefault1">
+                                        <option v-for="item in showListOption" :key="item.id" :value="item.id">{{ item.text }}</option>
                                     </select>
                                 </th>
                                 <th class = "text-center py-2 px-2 border-collapse bg-gray-200">
-                                    <select class = "custom">
-                                        <option selected>課程時間</option>
-                                        <option>系所 / 向度</option>
+                                    <select class = "custom" v-model="showListOptionDefault2">
+                                        <option v-for="item in showListOption" :key="item.id" :value="item.id">{{ item.text }}</option>
                                     </select>
                                 </th>
                                 <th class = "text-center py-2 px-2 border-collapse bg-gray-200">
@@ -73,10 +70,10 @@
                             </tr>
                         </thead>
                         <tbody>
-                            <tr v-for = "item in courseList" class = "text-center py-2 px-2 border-collapse">
+                            <tr v-for = "item in filteredCourseList" class = "text-center py-2 px-2 border-collapse">
                                 <td> {{ item.getCourseName() }} </td>
-                                <td> {{ item.getClassroom() }} </td>
-                                <td> {{ item.getStartTime() }} </td>
+                                <td> {{ item.displayField1 }} </td>
+                                <td> {{ item.displayField2 }} </td>
                                 <td>
                                     <button class = "bg-gray-700 py-2 my-1 px-6 rounded-lg text-white hover:bg-gray-500"
                                         v-on:click="delete_course(item)">
@@ -124,6 +121,28 @@ let credit = computed(() => store.state.course.credit);
 
 const toggleActive1 = ref(false);
 const toggleActive2 = ref(false);
+const showListOption = [
+    {'text' : '課程教室', 'value': item => item.getClassroom(), 'id': 0},
+    {'text' : '課程教師', 'value': item => item.getTeacher(), 'id': 1},
+    {'text' : '課程編號', 'value': item => item.getCourseID(), 'id': 2},
+    {'text' : '課程時間', 'value': item => item.getStartTime(), 'id': 3},
+    {'text' : '系所 / 向度', 'value': item => item.getDepartment(), 'id': 4},
+    {'text' : '學分', 'value': item => item.getCredit(), 'id': 5}
+]
+const showListOptionDefault1 = ref(0);
+const showListOptionDefault2 = ref(3);
+
+const getDisplayField = (item, optionId) => {
+    return showListOption.find(option => option.id === optionId).value(item);
+}
+
+const filteredCourseList = computed(() => {
+    return courseList.value.map((item) => {
+        item['displayField1'] = getDisplayField(item, showListOptionDefault1.value);
+        item['displayField2'] = getDisplayField(item, showListOptionDefault2.value);
+        return item;
+    });
+});
 
 // 控制以系所查詢那邊的衝堂顯示要不要重新渲染
 const setConflictState = (state) => store.dispatch("setrunConflictState", state);
diff --git a/src/functions/course_add.ts b/src/functions/course_add.ts
index 0fa9406..0e8d095 100644
--- a/src/functions/course_add.ts
+++ b/src/functions/course_add.ts
@@ -60,7 +60,9 @@ function courseAdd(courseName: string, classRoom: string, weekDay: string, start
         textColor: env.VITE_CARDTEXT_DEFAULT_COLOR,
         textStyle: env.VITE_CARDTEXT_DEFAULT_STYLE,
         uuid: Uuid,
-        length: 0
+        length: 0,
+        department: "",
+        grade: ""
     })
     let weekDayIndex = WeekDayToInt[weekDay]; // 2 is the offset of the first two columns
     let startHour = courseToStartIndex[start];
@@ -147,6 +149,7 @@ export function push_to_table(mode : Number, item : any)
     else if(mode == 2)
     {   
         recordcourse(item)
+        console.log(item);
         let time = splittime(item.class_time);
         let data = [];
         let Uuid = uuidv4();
@@ -168,7 +171,9 @@ export function push_to_table(mode : Number, item : any)
                 textColor: env.VITE_CARDTEXT_DEFAULT_COLOR,
                 textStyle: env.VITE_CARDTEXT_DEFAULT_STYLE,
                 uuid: Uuid,
-                length: 0
+                length: 0,
+                department: item.department,
+                grade: item.grade
             }));
         }
         // 成功插入會回傳課程陣列，反之回傳false
@@ -196,7 +201,9 @@ export function push_to_table(mode : Number, item : any)
             textColor: env.VITE_CARDTEXT_DEFAULT_COLOR,
             textStyle: env.VITE_CARDTEXT_DEFAULT_STYLE,
             uuid: Uuid,
-            length: 0
+            length: 0,
+            department: item.department,
+            grade: item.grade
         }));
         store.dispatch('addCredit', Number(item.credit));
     }
diff --git a/src/functions/course_delete.ts b/src/functions/course_delete.ts
index 51587f9..ca51c09 100644
--- a/src/functions/course_delete.ts
+++ b/src/functions/course_delete.ts
@@ -3,10 +3,8 @@ import store from "../store";
 import { rowspanize } from "./rowspanizer";
 export function courseDelete(item: Course)
 {   
-    // 比對名子 課程編號 教室 其他不管
-    // console.log(item)
+    // 比對 uuid 其他不管
     let data = JSON.parse(localStorage.getItem("courseTable")!)
-    // console.log(data);
     let table: Course[][] = []
     for(let i = 0; i < data.length; i++)
     {
@@ -31,7 +29,9 @@ export function courseDelete(item: Course)
                         textColor: "",
                         textStyle: "",
                         uuid: "",
-                        length: 0
+                        length: 0,
+                        department: "",
+                        grade: ""
                     }
                 ))
             }
@@ -52,7 +52,9 @@ export function courseDelete(item: Course)
                     textColor: data[i][j].courseData.textColor,
                     textStyle: data[i][j].courseData.textStyle,
                     uuid: data[i][j].courseData.uuid,
-                    length: 0
+                    length: 0,
+                    department: data[i][j].courseData.department,
+                    grade: data[i][j].courseData.grade
                 }))
             }
         }
diff --git a/src/functions/general.ts b/src/functions/general.ts
index 59f9c46..42880cf 100644
--- a/src/functions/general.ts
+++ b/src/functions/general.ts
@@ -113,6 +113,8 @@ interface CourseData
     textStyle: string;
     uuid: string;
     length: number;
+    department: string;
+    grade: string;
 }
 
 export class Course
@@ -139,7 +141,9 @@ export class Course
                 textColor: "",
                 textStyle: "",
                 uuid: "",
-                length: 0
+                length: 0,
+                department: "",
+                grade: ""
             };
         }
         else if (typeof courseData === "string") {
@@ -158,7 +162,9 @@ export class Course
                 textColor: "",
                 textStyle: "",
                 uuid: courseData,
-                length: 0
+                length: 0,
+                department: "",
+                grade: ""
             };
             if(start_time) this.courseData.start_time = start_time;
         } else if(typeof courseData === "object"){
@@ -270,6 +276,18 @@ export class Course
     {
         this.courseData.length = length;
     }
+    public getDepartment() : string
+    {
+        return this.courseData.department;
+    }
+    public getGrade() : string
+    {
+        return this.courseData.grade;
+    }
+    public getCourseID() : string
+    {
+        return this.courseData.ID!;
+    }
 }
 
 

From a64f1f35ce6ae51598e3822082677f68f89e1b7d Mon Sep 17 00:00:00 2001
From: syzygy608 <hankwu99@gmail.com>
Date: Fri, 19 Jan 2024 17:33:27 +0800
Subject: [PATCH 04/10] add hotfix to dev

---
 package.json                            | 2 +-
 src/components/pages/main/inputArea.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 1efadad..844df14 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "version": "4.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite --port=8080",
+    "dev": "vite --port=8080 && npx tailwindcss -i ./src/css/style.css -o ./src/css/tailwind.css --minify",
     "build": "vue-tsc && vite build",
     "preview": "vite preview",
     "hotfix": "npx tailwindcss -i ./src/css/style.css -o ./src/css/tailwind.css --minify --watch"
diff --git a/src/components/pages/main/inputArea.vue b/src/components/pages/main/inputArea.vue
index ac76b8d..77deaf6 100644
--- a/src/components/pages/main/inputArea.vue
+++ b/src/components/pages/main/inputArea.vue
@@ -126,7 +126,7 @@ const showListOption = [
     {'text' : '課程教師', 'value': item => item.getTeacher(), 'id': 1},
     {'text' : '課程編號', 'value': item => item.getCourseID(), 'id': 2},
     {'text' : '課程時間', 'value': item => item.getStartTime(), 'id': 3},
-    {'text' : '系所 / 向度', 'value': item => item.getDepartment(), 'id': 4},
+    {'text' : '課程系所', 'value': item => item.getDepartment(), 'id': 4},
     {'text' : '學分', 'value': item => item.getCredit(), 'id': 5}
 ]
 const showListOptionDefault1 = ref(0);

From 47b14aacc4aa866e47759113b0da10ca1c030cb8 Mon Sep 17 00:00:00 2001
From: as6325400 <as6325400@gmail.com>
Date: Fri, 19 Jan 2024 17:39:03 +0800
Subject: [PATCH 05/10] add grade

---
 src/components/pages/main/inputArea.vue | 9 +++++----
 src/functions/course_add.ts             | 3 +--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/pages/main/inputArea.vue b/src/components/pages/main/inputArea.vue
index 77deaf6..e0b716c 100644
--- a/src/components/pages/main/inputArea.vue
+++ b/src/components/pages/main/inputArea.vue
@@ -124,13 +124,14 @@ const toggleActive2 = ref(false);
 const showListOption = [
     {'text' : '課程教室', 'value': item => item.getClassroom(), 'id': 0},
     {'text' : '課程教師', 'value': item => item.getTeacher(), 'id': 1},
-    {'text' : '課程編號', 'value': item => item.getCourseID(), 'id': 2},
-    {'text' : '課程時間', 'value': item => item.getStartTime(), 'id': 3},
+    {'text' : '課程時間', 'value': item => item.getStartTime(), 'id': 2},
+    {'text' : '年級 / 向度', 'value': item => item.getGrade(), 'id': 3},
     {'text' : '課程系所', 'value': item => item.getDepartment(), 'id': 4},
-    {'text' : '學分', 'value': item => item.getCredit(), 'id': 5}
+    {'text' : '課程編號', 'value': item => item.getCourseID(), 'id': 5},
+    {'text' : '學分', 'value': item => item.getCredit(), 'id': 6}
 ]
 const showListOptionDefault1 = ref(0);
-const showListOptionDefault2 = ref(3);
+const showListOptionDefault2 = ref(2);
 
 const getDisplayField = (item, optionId) => {
     return showListOption.find(option => option.id === optionId).value(item);
diff --git a/src/functions/course_add.ts b/src/functions/course_add.ts
index 0e8d095..aa662c3 100644
--- a/src/functions/course_add.ts
+++ b/src/functions/course_add.ts
@@ -148,8 +148,7 @@ export function push_to_table(mode : Number, item : any)
     }
     else if(mode == 2)
     {   
-        recordcourse(item)
-        console.log(item);
+        recordcourse(item);
         let time = splittime(item.class_time);
         let data = [];
         let Uuid = uuidv4();

From 4c17a24cf64b3621e802d1b5884e84d384b5e720 Mon Sep 17 00:00:00 2001
From: syzygy608 <hankwu99@gmail.com>
Date: Fri, 19 Jan 2024 17:43:40 +0800
Subject: [PATCH 06/10] remove outline

---
 src/css/style.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/css/style.css b/src/css/style.css
index 9245273..11b970f 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -244,4 +244,7 @@ thead > tr > th
 }
 .custom {
     @apply bg-transparent border-0 border-b-2 border-gray-500 w-28 text-center;
+}
+.custom:focus {
+    @apply border-none outline-none;
 }
\ No newline at end of file

From c7bc55a682b2c1bf8371563bf66b2edf939efca1 Mon Sep 17 00:00:00 2001
From: as6325400 <as6325400@gmail.com>
Date: Fri, 19 Jan 2024 20:00:57 +0800
Subject: [PATCH 07/10] add loss inform

---
 src/components/pages/main/inputArea.vue | 141 +++++++++++++-----------
 src/functions/course_search.ts          |  51 +++++++++
 2 files changed, 126 insertions(+), 66 deletions(-)

diff --git a/src/components/pages/main/inputArea.vue b/src/components/pages/main/inputArea.vue
index e0b716c..b8f0410 100644
--- a/src/components/pages/main/inputArea.vue
+++ b/src/components/pages/main/inputArea.vue
@@ -1,12 +1,12 @@
 <template>
-    <div class = "input">
-        <div class = "w-full mx-auto my-6 px-4 py-4 bg-gray-100 rounded-lg shadow-lg md:w-9/12 overflow-x-auto">
-            <div class = 'text-xl font-semibold'>
-                開始建置你的課表    
+    <div class="input">
+        <div class="w-full mx-auto my-6 px-4 py-4 bg-gray-100 rounded-lg shadow-lg md:w-9/12 overflow-x-auto">
+            <div class='text-xl font-semibold'>
+                開始建置你的課表
             </div>
-            <div class = "my-2">
-                <div class = 'flex flex-col py-1 w-40'>
-                    <select class = 'mx-1 py-1 rounded-md text-center' v-model = "searchType">
+            <div class="my-2">
+                <div class='flex flex-col py-1 w-40'>
+                    <select class='mx-1 py-1 rounded-md text-center' v-model="searchType">
                         <option selected>以課程名稱搜尋</option>
                         <option>以系所年級搜尋</option>
                         <option>以時間區間搜尋</option>
@@ -14,68 +14,72 @@
                         <option>自定義新增課程</option>
                     </select>
                 </div>
-                <div class = 'flex flex-col py-1 mx-auto'>
-                    <CourseName v-if = "searchType == '以課程名稱搜尋'" />
-                    <Teacher v-if = "searchType == '以教師名稱搜尋'" />
-                    <Department v-if="searchType == '以系所年級搜尋'"/>
-                    <Time v-if = "searchType == '以時間區間搜尋'" />
-                    <Custom v-if = "searchType == '自定義新增課程'" />
+                <div class='flex flex-col py-1 mx-auto'>
+                    <CourseName v-if="searchType == '以課程名稱搜尋'" />
+                    <Teacher v-if="searchType == '以教師名稱搜尋'" />
+                    <Department v-if="searchType == '以系所年級搜尋'" />
+                    <Time v-if="searchType == '以時間區間搜尋'" />
+                    <Custom v-if="searchType == '自定義新增課程'" />
                 </div>
-                <hr class = 'mx-3 my-3 text-slate-300'>
-                <div class = 'flex place-content-end items-center'>
-                    <div class = "flex justify-between items-center" @click="toggleActive1 = !toggleActive1">
-                        <div class = "w-12 h-6 flex items-center bg-gray-300 rounded-full duration-300 ease-in-out" :class="{ 'bg-orange-300': toggleActive1}">
-                        <div class = "bg-white w-5 h-5 rounded-full shadow-md transform duration-300 ease-in-out" :class="{ 'translate-x-6': toggleActive1}"></div>
+                <hr class='mx-3 my-3 text-slate-300'>
+                <div class='flex place-content-end items-center'>
+                    <div class="flex justify-between items-center" @click="toggleActive1 = !toggleActive1">
+                        <div class="w-12 h-6 flex items-center bg-gray-300 rounded-full duration-300 ease-in-out"
+                            :class="{ 'bg-orange-300': toggleActive1 }">
+                            <div class="bg-white w-5 h-5 rounded-full shadow-md transform duration-300 ease-in-out"
+                                :class="{ 'translate-x-6': toggleActive1 }"></div>
                         </div>
-                        <span class = 'mx-3 py-1 min-w-[4rem]'>
+                        <span class='mx-3 py-1 min-w-[4rem]'>
                             顯示學分
                         </span>
                     </div>
-                    <button class = 'btn-normal min-w-[8rem]' v-on:click = "show_list">
+                    <button class='btn-normal min-w-[8rem]' v-on:click="show_list">
                         展開課程列表
                     </button>
-                    <button class = 'btn-normal min-w-[4rem]' v-on:click = "clearTable">
+                    <button class='btn-normal min-w-[4rem]' v-on:click="clearTable">
                         清空課表
                     </button>
-                    <button class = 'btn-normal min-w-[8rem]' v-on:click = "download">
+                    <button class='btn-normal min-w-[8rem]' v-on:click="download">
                         下載課表
                     </button>
                 </div>
-                <div id = "class_list" v-if = "class_list_visible === true">
-                    <p class = "text-right py-2 mx-3" v-show = "show_credit">
-                        目前學分: {{credit}}
+                <div id="class_list" v-if="class_list_visible === true">
+                    <p class="text-right py-2 mx-3" v-show="show_credit">
+                        目前學分: {{ credit }}
                     </p>
-                    <p class = "mx-3 my-2">
+                    <p class="mx-3 my-2">
                         Hint: 課程教室、課程時間皆可<strong>點擊選擇</strong>顯示其他資訊
                     </p>
-                    <table class = "w-full my-1 mb-1">
+                    <table class="w-full my-1 mb-1">
                         <thead>
                             <tr>
-                                <th class = "text-center py-2 px-2 border-collapse bg-gray-200">
+                                <th class="text-center py-2 px-2 border-collapse bg-gray-200">
                                     課程名稱
                                 </th>
-                                <th class = "text-center py-2 px-2 border-collapse bg-gray-200">
-                                    <select class = "custom" v-model="showListOptionDefault1">
-                                        <option v-for="item in showListOption" :key="item.id" :value="item.id">{{ item.text }}</option>
+                                <th class="text-center py-2 px-2 border-collapse bg-gray-200">
+                                    <select class="custom" v-model="showListOptionDefault1">
+                                        <option v-for="item in showListOption" :key="item.id" :value="item.id">{{ item.text
+                                        }}</option>
                                     </select>
                                 </th>
-                                <th class = "text-center py-2 px-2 border-collapse bg-gray-200">
-                                    <select class = "custom" v-model="showListOptionDefault2">
-                                        <option v-for="item in showListOption" :key="item.id" :value="item.id">{{ item.text }}</option>
+                                <th class="text-center py-2 px-2 border-collapse bg-gray-200">
+                                    <select class="custom" v-model="showListOptionDefault2">
+                                        <option v-for="item in showListOption" :key="item.id" :value="item.id">{{ item.text
+                                        }}</option>
                                     </select>
                                 </th>
-                                <th class = "text-center py-2 px-2 border-collapse bg-gray-200">
+                                <th class="text-center py-2 px-2 border-collapse bg-gray-200">
                                     操作
                                 </th>
                             </tr>
                         </thead>
                         <tbody>
-                            <tr v-for = "item in filteredCourseList" class = "text-center py-2 px-2 border-collapse">
+                            <tr v-for="item in filteredCourseList" class="text-center py-2 px-2 border-collapse">
                                 <td> {{ item.getCourseName() }} </td>
                                 <td> {{ item.displayField1 }} </td>
                                 <td> {{ item.displayField2 }} </td>
                                 <td>
-                                    <button class = "bg-gray-700 py-2 my-1 px-6 rounded-lg text-white hover:bg-gray-500"
+                                    <button class="bg-gray-700 py-2 my-1 px-6 rounded-lg text-white hover:bg-gray-500"
                                         v-on:click="delete_course(item)">
                                         刪除
                                     </button>
@@ -86,10 +90,10 @@
                 </div>
             </div>
         </div>
-        <div class = "w-full md:w-9/12 mx-auto py-3" v-if = "searchType == '以時間區間搜尋'">
-            
+        <div class="w-full md:w-9/12 mx-auto py-3" v-if="searchType == '以時間區間搜尋'">
+
         </div>
-    </div>    
+    </div>
 </template>
 
 <script setup>
@@ -105,6 +109,7 @@ import { Switch } from 'ant-design-vue'
 import { rowspanize } from '@functions/rowspanizer';
 import { Course, InitTable, GetCourseTable } from '@functions/general';
 import { courseDelete, decreaseCredit } from '@functions/course_delete.ts';
+import { searchDepartmentByOther, searchGradeByOther } from '@functions/course_search'
 import renderImage from '@functions/image_render.ts';
 
 import { useStore } from 'vuex';
@@ -122,13 +127,24 @@ let credit = computed(() => store.state.course.credit);
 const toggleActive1 = ref(false);
 const toggleActive2 = ref(false);
 const showListOption = [
-    {'text' : '課程教室', 'value': item => item.getClassroom(), 'id': 0},
-    {'text' : '課程教師', 'value': item => item.getTeacher(), 'id': 1},
-    {'text' : '課程時間', 'value': item => item.getStartTime(), 'id': 2},
-    {'text' : '年級 / 向度', 'value': item => item.getGrade(), 'id': 3},
-    {'text' : '課程系所', 'value': item => item.getDepartment(), 'id': 4},
-    {'text' : '課程編號', 'value': item => item.getCourseID(), 'id': 5},
-    {'text' : '學分', 'value': item => item.getCredit(), 'id': 6}
+    { 'text': '課程教室', 'value': item => item.getClassroom(), 'id': 0 },
+    { 'text': '課程教師', 'value': item => item.getTeacher(), 'id': 1 },
+    { 'text': '課程時間', 'value': item => item.getStartTime(), 'id': 2 },
+    {
+        'text': '年級 / 向度',
+        'value': item => item.getGrade() && item.getGrade().trim() !== '' ? item.getGrade() :
+            searchGradeByOther(item.getId(), item.getCourseName(), item.getTeacher(), item.getClassroom(), item.getCredit())
+        , 'id': 3
+    },
+    {
+        'text': '課程系所',
+        'value': item => item.getDepartment() && item.getDepartment().trim() !== '' ? item.getDepartment() : searchDepartmentByOther(
+            item.getId(), item.getCourseName(), item.getTeacher(), item.getClassroom(), item.getCredit()
+        ),
+        'id': 4
+    },
+    { 'text': '課程編號', 'value': item => item.getCourseID(), 'id': 5 },
+    { 'text': '學分', 'value': item => item.getCredit(), 'id': 6 }
 ]
 const showListOptionDefault1 = ref(0);
 const showListOptionDefault2 = ref(2);
@@ -148,8 +164,7 @@ const filteredCourseList = computed(() => {
 // 控制以系所查詢那邊的衝堂顯示要不要重新渲染
 const setConflictState = (state) => store.dispatch("setrunConflictState", state);
 
-const hidden = () =>
-{
+const hidden = () => {
     store.dispatch("hidden");
 };
 
@@ -165,40 +180,35 @@ let show = computed(() => store.state.course.showTable);
 let opened = computed(() => store.state.course.timeSearchMode);
 
 watch(searchType, async (inputValue) => {
-    if(inputValue == "以時間區間搜尋")
-    {
+    if (inputValue == "以時間區間搜尋") {
         setSearchTimeMode(true);
     }
-    else
-    {
+    else {
         setSearchTimeMode(false);
     }
 })
 
 watch(toggleActive1, (inputValue) => {
-    if(inputValue == true)
-    {
+    if (inputValue == true) {
         store.dispatch("show_credit");
     }
-    else
-    {
+    else {
         store.dispatch("hidden_credit");
     }
 })
 
-var delete_course = async function(item)
-{
+var delete_course = async function (item) {
     // 刪除課程
     await setConflictState(1);
     await setConflictState(2);
-    if(item.getCredit() != null){
+    if (item.getCredit() != null) {
         decreaseCredit(item.getCredit())
     }
     // 再刪除函式裡面去更改store狀態
     courseDelete(item);
 }
 
-var show_list = function() {
+var show_list = function () {
     // 顯示課程列表
     class_list_visible.value = !class_list_visible.value
 }
@@ -211,17 +221,16 @@ function Sleep(time) {
     });
 }
 
-var clearTable = function() {
+var clearTable = function () {
     // 顯示確認視窗
-    if(confirm("確定要清空課表嗎？"))
-    {
+    if (confirm("確定要清空課表嗎？")) {
         // 清空課表
         store.dispatch('clearCourse');
         window.location.reload();
     }
-    
+
 }
-var download = function() {
+var download = function () {
     renderImage("WholeTable") // finish 
 }
 
diff --git a/src/functions/course_search.ts b/src/functions/course_search.ts
index 22362b0..9842ac9 100644
--- a/src/functions/course_search.ts
+++ b/src/functions/course_search.ts
@@ -179,3 +179,54 @@ export async function getCourseByDepartment(Department: string) {
     });
 }
 
+export async function searchDepartmentByOther(id : number, class_name : string,
+    teacher : string, class_room : string, credit : number) {
+    
+    const apiUrl = apiSite + "searchCourse/searchDepartmentByOther";
+    
+    return new Promise((resolve, reject) => {
+        axios.get(apiUrl, {
+            params:{
+                id: id,
+                class_name: class_name,
+                teacher: teacher,
+                class_room: class_room,
+                credit: credit
+            }
+        })
+        .then((response) => {
+            resolve(response.data);
+        })
+        .catch((error) => {
+            // 在這裡處理錯誤
+            console.error(error);
+            reject(error);
+        });
+    });
+}
+
+export async function searchGradeByOther(id : number, class_name : string,
+    teacher : string, class_room : string, credit : number) {
+    
+    const apiUrl = apiSite + "searchCourse/searchGradeByOther";
+    
+    return new Promise((resolve, reject) => {
+        axios.get(apiUrl, {
+            params:{
+                id: id,
+                class_name: class_name,
+                teacher: teacher,
+                class_room: class_room,
+                credit: credit
+            }
+        })
+        .then((response) => {
+            resolve(response.data);
+        })
+        .catch((error) => {
+            // 在這裡處理錯誤
+            console.error(error);
+            reject(error);
+        });
+    });
+}

From d164498204e319931d900fef3365938ddc0115e2 Mon Sep 17 00:00:00 2001
From: syzygy608 <hankwu99@gmail.com>
Date: Sat, 20 Jan 2024 11:11:58 +0800
Subject: [PATCH 08/10] bug

---
 src/components/pages/main/inputArea.vue | 50 ++++++++++++++++++-------
 src/store/course.ts                     | 12 ++++++
 2 files changed, 49 insertions(+), 13 deletions(-)

diff --git a/src/components/pages/main/inputArea.vue b/src/components/pages/main/inputArea.vue
index b8f0410..7bfa03f 100644
--- a/src/components/pages/main/inputArea.vue
+++ b/src/components/pages/main/inputArea.vue
@@ -130,19 +130,8 @@ const showListOption = [
     { 'text': '課程教室', 'value': item => item.getClassroom(), 'id': 0 },
     { 'text': '課程教師', 'value': item => item.getTeacher(), 'id': 1 },
     { 'text': '課程時間', 'value': item => item.getStartTime(), 'id': 2 },
-    {
-        'text': '年級 / 向度',
-        'value': item => item.getGrade() && item.getGrade().trim() !== '' ? item.getGrade() :
-            searchGradeByOther(item.getId(), item.getCourseName(), item.getTeacher(), item.getClassroom(), item.getCredit())
-        , 'id': 3
-    },
-    {
-        'text': '課程系所',
-        'value': item => item.getDepartment() && item.getDepartment().trim() !== '' ? item.getDepartment() : searchDepartmentByOther(
-            item.getId(), item.getCourseName(), item.getTeacher(), item.getClassroom(), item.getCredit()
-        ),
-        'id': 4
-    },
+    { 'text': '年級 / 向度', 'value': item => item.getGrade(), 'id': 3 },
+    { 'text': '課程系所', 'value': item => item.getDepartment(), 'id': 4},
     { 'text': '課程編號', 'value': item => item.getCourseID(), 'id': 5 },
     { 'text': '學分', 'value': item => item.getCredit(), 'id': 6 }
 ]
@@ -179,6 +168,41 @@ let show = computed(() => store.state.course.showTable);
 // 這個是打開用時間搜尋的模式的
 let opened = computed(() => store.state.course.timeSearchMode);
 
+onMounted(async () => {
+    let temp_list = [];
+    for(let i = 0; i < courseList.value.length; i++){
+        temp_list.push(courseList.value[i]);
+    }
+    let update = false;
+    for(let i = 0; i < temp_list.length; i++){
+        if(temp_list[i]["courseData"]["department"] == null){
+            let result = await searchDepartmentByOther(temp_list[i]["courseData"]["ID"], temp_list[i]["courseData"]["course_name"], temp_list[i]["courseData"]["Teacher"], temp_list[i]["courseData"]["classroom"], temp_list[i]["courseData"]["Credit"]);
+            if(result.length > 0){
+                temp_list[i]["courseData"]["department"] = result[0].department;
+            }
+            else{
+                temp_list[i]["courseData"]["department"] = "";
+            }
+            update = true;
+        }
+        if(temp_list[i]["courseData"]["grade"] == null){
+            let result = await searchGradeByOther(temp_list[i]["courseData"]["ID"], temp_list[i]["courseData"]["course_name"], temp_list[i]["courseData"]["Teacher"], temp_list[i]["courseData"]["classroom"], temp_list[i]["courseData"]["Credit"]);
+            if(result.length > 0){
+                temp_list[i]["courseData"]["grade"] = result[0].grade;
+            }
+            else{
+                temp_list[i]["courseData"]["grade"] = "";
+            }
+            update = true;
+        }
+    }
+    if(update){
+        // 更新store，但是會有bug，
+        //store.dispatch("updateCourseList", temp_list);
+    }
+    console.log(courseList.value);
+})
+
 watch(searchType, async (inputValue) => {
     if (inputValue == "以時間區間搜尋") {
         setSearchTimeMode(true);
diff --git a/src/store/course.ts b/src/store/course.ts
index e01ab16..bc89f90 100644
--- a/src/store/course.ts
+++ b/src/store/course.ts
@@ -1,6 +1,7 @@
 import { Module } from 'vuex';
 import { Course, InitTable } from '../functions/general'
 import { rowspanize  } from '../functions/rowspanizer';
+import { update } from 'lodash';
 
 const env = import.meta.env;
 
@@ -174,6 +175,14 @@ const store: Module<State, any> = {
         },
         setrunConflictState(state: State, arg: number){
             state.runConflict = arg;
+        },
+        updateCourseList(state: State, data: any){
+            let temp: Array<Course> = [];
+            for(let i = 0; i < data.length; i++){
+                temp.push(new Course(data[i]['courseData']));
+            }
+            state.classListStorage = temp;
+            localStorage.setItem("courseList", JSON.stringify(state.classListStorage));
         }
     },
     actions: {
@@ -253,6 +262,9 @@ const store: Module<State, any> = {
         },
         setrunConflictState(context: any, arg: number){
             context.commit("setrunConflictState", arg);
+        },
+        updateCourseList(context: any, data: any){
+            context.commit("updateCourseList", data);
         }
     }
 };

From 0b4906112a7c5bd7ace9f0c137f16ba87ce9d8e7 Mon Sep 17 00:00:00 2001
From: as6325400 <as6325400@gmail.com>
Date: Sat, 20 Jan 2024 12:14:22 +0800
Subject: [PATCH 09/10] fix classSelectOption

---
 src/components/pages/main/inputArea.vue       | 49 +++++++++----------
 .../pages/main/serach_modes/course_name.vue   |  1 +
 src/functions/course_add.ts                   |  2 +-
 src/store/course.ts                           | 13 ++---
 4 files changed, 30 insertions(+), 35 deletions(-)

diff --git a/src/components/pages/main/inputArea.vue b/src/components/pages/main/inputArea.vue
index 7bfa03f..f74fce6 100644
--- a/src/components/pages/main/inputArea.vue
+++ b/src/components/pages/main/inputArea.vue
@@ -111,7 +111,7 @@ import { Course, InitTable, GetCourseTable } from '@functions/general';
 import { courseDelete, decreaseCredit } from '@functions/course_delete.ts';
 import { searchDepartmentByOther, searchGradeByOther } from '@functions/course_search'
 import renderImage from '@functions/image_render.ts';
-
+import _ from 'lodash';
 import { useStore } from 'vuex';
 
 const store = useStore();
@@ -169,38 +169,37 @@ let show = computed(() => store.state.course.showTable);
 let opened = computed(() => store.state.course.timeSearchMode);
 
 onMounted(async () => {
-    let temp_list = [];
-    for(let i = 0; i < courseList.value.length; i++){
-        temp_list.push(courseList.value[i]);
-    }
+    let temp_list = _.cloneDeep(courseList.value);
     let update = false;
     for(let i = 0; i < temp_list.length; i++){
-        if(temp_list[i]["courseData"]["department"] == null){
-            let result = await searchDepartmentByOther(temp_list[i]["courseData"]["ID"], temp_list[i]["courseData"]["course_name"], temp_list[i]["courseData"]["Teacher"], temp_list[i]["courseData"]["classroom"], temp_list[i]["courseData"]["Credit"]);
-            if(result.length > 0){
-                temp_list[i]["courseData"]["department"] = result[0].department;
-            }
-            else{
-                temp_list[i]["courseData"]["department"] = "";
-            }
-            update = true;
+        let obj = temp_list[i].courseData;
+        if(obj.is_custom == true)
+        {      
+            if(obj.Teacher == null){ obj.Teacher = "此為自定義課程"; update = true;}
+            if(obj.Credit == null){obj.Credit = 0; update = true;}
+            if(obj.department == "" || obj.department == null){obj.department = "此為自定義課程"; update = true;}
+            if(obj.grade == "" || obj.grade == null){obj.grade = "此為自定義課程"; update = true;}
+            if(obj.ID == null){obj.ID = "此為自定義課程"; update = true;}
         }
-        if(temp_list[i]["courseData"]["grade"] == null){
-            let result = await searchGradeByOther(temp_list[i]["courseData"]["ID"], temp_list[i]["courseData"]["course_name"], temp_list[i]["courseData"]["Teacher"], temp_list[i]["courseData"]["classroom"], temp_list[i]["courseData"]["Credit"]);
-            if(result.length > 0){
-                temp_list[i]["courseData"]["grade"] = result[0].grade;
+        else
+        {   
+            if(obj["department"] == null){
+                let result = await searchDepartmentByOther(obj["ID"], obj["course_name"], obj["Teacher"], obj["classroom"], obj["Credit"]);
+                obj["department"] = result[0].department;
+                update = true;
             }
-            else{
-                temp_list[i]["courseData"]["grade"] = "";
+            if(obj["grade"] == null){
+                let result = await searchGradeByOther(obj["ID"], obj["course_name"], obj["Teacher"], obj["classroom"], obj["Credit"]);
+                obj["grade"] = result[0].grade;
+                update = true;
             }
-            update = true;
         }
     }
-    if(update){
-        // 更新store，但是會有bug，
-        //store.dispatch("updateCourseList", temp_list);
+    if(update)
+    {   
+        console.log("update", temp_list);
+        store.dispatch("updateCourseList", temp_list);
     }
-    console.log(courseList.value);
 })
 
 watch(searchType, async (inputValue) => {
diff --git a/src/components/pages/main/serach_modes/course_name.vue b/src/components/pages/main/serach_modes/course_name.vue
index 19fd7d6..308cd49 100644
--- a/src/components/pages/main/serach_modes/course_name.vue
+++ b/src/components/pages/main/serach_modes/course_name.vue
@@ -48,6 +48,7 @@ watch(searchInput, async (inputValue) => {
         isLoading.value = true;
         show_search_box.value = true;
         data.value = await searchCourse(inputValue)
+        // console.log(data.value);
         data.value = data.value.map(temp => {
             temp['conflict'] = classconflict(temp);
             return temp;
diff --git a/src/functions/course_add.ts b/src/functions/course_add.ts
index aa662c3..1ab9311 100644
--- a/src/functions/course_add.ts
+++ b/src/functions/course_add.ts
@@ -53,7 +53,7 @@ function courseAdd(courseName: string, classRoom: string, weekDay: string, start
         is_course: true,
         color: env.VITE_CARD_DEFAULT_COLOR,
         ID: null,
-        Credit: null,
+        Credit: 0,
         is_custom: true,
         Teacher: null,
         Memo: null,
diff --git a/src/store/course.ts b/src/store/course.ts
index bc89f90..83df287 100644
--- a/src/store/course.ts
+++ b/src/store/course.ts
@@ -1,7 +1,6 @@
 import { Module } from 'vuex';
 import { Course, InitTable } from '../functions/general'
 import { rowspanize  } from '../functions/rowspanizer';
-import { update } from 'lodash';
 
 const env = import.meta.env;
 
@@ -86,7 +85,7 @@ const store: Module<State, any> = {
             state.classStorage = Transfer(data);
             rowspanize(state.classStorage);
         },
-        addCourse(state: State, data : any){
+        addCourse(state: State, data : Array<Array<Course>>){
             // console.log(state.classStorage);
             state.classStorage = data;
             // console.log(state.classStorage);
@@ -122,7 +121,7 @@ const store: Module<State, any> = {
             let List = state.classListStorage;
             let temp :Array<Course> = [];
             for(let i = 0; i < List.length; i++){
-                if(List[i].getCourseName() == Class.getCourseName() && List[i].getId() == Class.getId() && List[i].getClassroom() == Class.getClassroom()){
+                if(List[i].getUuid() == Class.getUuid()){
                     continue;
                 }
                 else{
@@ -176,12 +175,8 @@ const store: Module<State, any> = {
         setrunConflictState(state: State, arg: number){
             state.runConflict = arg;
         },
-        updateCourseList(state: State, data: any){
-            let temp: Array<Course> = [];
-            for(let i = 0; i < data.length; i++){
-                temp.push(new Course(data[i]['courseData']));
-            }
-            state.classListStorage = temp;
+        updateCourseList(state: State, data: Array<Course>){
+            state.classListStorage = data;
             localStorage.setItem("courseList", JSON.stringify(state.classListStorage));
         }
     },

From 4f5df3da00b08eefc451cd214b7e707eefe28415 Mon Sep 17 00:00:00 2001
From: as6325400 <as6325400@gmail.com>
Date: Sat, 20 Jan 2024 12:23:28 +0800
Subject: [PATCH 10/10] fix init add course

---
 src/functions/course_add.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/functions/course_add.ts b/src/functions/course_add.ts
index 1ab9311..a4c0ab2 100644
--- a/src/functions/course_add.ts
+++ b/src/functions/course_add.ts
@@ -52,17 +52,17 @@ function courseAdd(courseName: string, classRoom: string, weekDay: string, start
         is_title: false,
         is_course: true,
         color: env.VITE_CARD_DEFAULT_COLOR,
-        ID: null,
+        ID: "此為自定義課程",
         Credit: 0,
         is_custom: true,
-        Teacher: null,
+        Teacher: "此為自定義課程",
         Memo: null,
         textColor: env.VITE_CARDTEXT_DEFAULT_COLOR,
         textStyle: env.VITE_CARDTEXT_DEFAULT_STYLE,
         uuid: Uuid,
         length: 0,
-        department: "",
-        grade: ""
+        department: "此為自定義課程",
+        grade: "此為自定義課程"
     })
     let weekDayIndex = WeekDayToInt[weekDay]; // 2 is the offset of the first two columns
     let startHour = courseToStartIndex[start];