From 199cdfc124f403ef0e0b9ad28a7aeeadc655eba3 Mon Sep 17 00:00:00 2001
From: jason810496 <810496@email.wlsh.tyc.edu.tw>
Date: Wed, 21 Feb 2024 18:14:16 +0800
Subject: [PATCH 1/4] refactor: refactor date tabs using tailwindcss & class
 binding

---
 src/views/info/Schedule.vue | 57 ++++++-------------------------------
 1 file changed, 8 insertions(+), 49 deletions(-)

diff --git a/src/views/info/Schedule.vue b/src/views/info/Schedule.vue
index a47cdb7..262b374 100644
--- a/src/views/info/Schedule.vue
+++ b/src/views/info/Schedule.vue
@@ -2,20 +2,14 @@
   <!-- center container (on laptop) -->
   <div class="w-fill sm:flex hidden justify-center flex-col">
     <!-- Date tabs -->
-    <div class="date-tabs mb-5">
-      <button
-        class="date-tab"
-        :class="{ active: selectedDate === '3/2' }"
-        @click="selectDate('3/2')"
+    <div class="mb-5 flex justify-center gap-7">
+      <button v-for="(date,idx) in dateList"
+        class="w-[360px]  rounded-lg font-semibold text-xl py-[11px]"
+        :class="{ ' bg-primary-900 text-white': selectedDate === date ,
+      'bg-white text-primary-900 border-primary-900 border-2': selectedDate !== date }"
+        @click="selectDate(date)"
       >
-        DAY 1 | 03/02
-      </button>
-      <button
-        class="date-tab"
-        :class="{ active: selectedDate === '3/3' }"
-        @click="selectDate('3/3')"
-      >
-        DAY 2 | 03/03
+        {{ `DAY ${idx+1} | 03/0${idx+2}` }}
       </button>
     </div>
 
@@ -392,39 +386,4 @@ onMounted(() => {
       (projectElementList.value[i].clientWidth - cardWidth) / 2;
   }
 });
-</script>
-
-<style scoped>
-.date-tabs {
-  display: flex;
-  justify-content: center;
-  margin-top: 20px;
-  /* Adjust as necessary */
-}
-
-.date-tab {
-  /* Orange color */
-  color: #ff4500;
-  border: 2px solid #ff4500;
-  padding: 10px 20px;
-  margin: 0 10px;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
-  font-weight: bold;
-  border-radius: 20px;
-  /* Gives the rounded edges */
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  /* Adds a subtle shadow */
-}
-
-.date-tab:not(.active):hover {
-  background-color: #e69500;
-  /* Slightly darker orange on hover for non-active buttons */
-}
-
-.active {
-  background-color: #ff4500;
-  color: white;
-  /* Darker orange for the active button */
-}
-</style>
+</script>
\ No newline at end of file

From 4ad8731a68caf859f4ebeb1a2d4701cbc46dfe22 Mon Sep 17 00:00:00 2001
From: jason810496 <810496@email.wlsh.tyc.edu.tw>
Date: Wed, 21 Feb 2024 18:45:38 +0800
Subject: [PATCH 2/4] feat: add my schedule page

---
 src/views/info/MySchedule.vue | 56 +++++++++++++++++++++++++++++++++--
 1 file changed, 54 insertions(+), 2 deletions(-)

diff --git a/src/views/info/MySchedule.vue b/src/views/info/MySchedule.vue
index f5077d6..103cc88 100644
--- a/src/views/info/MySchedule.vue
+++ b/src/views/info/MySchedule.vue
@@ -1,7 +1,59 @@
 <template>
-  <WorkInProgress />
+  <!-- Date tabs for laptop -->
+  <div class="w-fill sm:flex hidden justify-center flex-col">
+    <!-- Date tabs -->
+    <div class="mb-5 flex justify-center gap-7">
+      <button v-for="(date,idx) in dateList"
+        class="w-[360px]  rounded-lg font-semibold text-xl py-[11px]"
+        :class="{ ' bg-primary-900 text-white': selectedDate === date ,
+      'bg-white text-primary-900 border-primary-900 border-2': selectedDate !== date }"
+        @click="selectDate(date)"
+      >
+        {{ `DAY ${idx+1} | 03/0${idx+2}` }}
+      </button>
+    </div>
+  </div>
+  <div class=" min-h-[180px] mt-10">
+    <StripCard
+      v-for="event in currentEvents"
+      :key="event.id"
+      :id="event.id"
+      :project="event.project"
+      :description="event.description"
+      :name="event.name"
+      :date="event.date"
+      :startTime="event.startTime"
+      :endTime="event.endTime"
+      :host="event.host"
+      :location="event.location"
+      :link="event.link"
+      class="lg:mb-0 mb-7"
+    />
+  </div>
 </template>
 
 <script setup>
-import WorkInProgress from '@/components/WorkInProgress.vue'
+import { ref,onMounted,computed } from 'vue'
+import { useEventStore } from '../../stores/user';
+import events from "../../data/event.json";
+import StripCard from "@/components/StripCard.vue";
+
+
+const selectedDate = ref("3/2");
+const dateList = ref(['3/2' , '3/3']);
+const selectDate = (date) => {
+  selectedDate.value = date;
+};
+
+const eventStore = useEventStore();
+
+onMounted(() => {
+  // fetch user events
+  eventStore.fetchUserEvents();
+});
+
+const currentEvents = computed(() => {
+  return events.filter((event) => event.date === selectedDate.value && eventStore.isEventSubscribed(event.id));
+});
+
 </script>
\ No newline at end of file

From 3b53002f783ecd267272a382dfea64c024cf771e Mon Sep 17 00:00:00 2001
From: jason810496 <810496@email.wlsh.tyc.edu.tw>
Date: Wed, 21 Feb 2024 19:02:47 +0800
Subject: [PATCH 3/4] feat: add date store for schedule and MySchedule ,
 refactor date tabs

---
 .env                          |  4 ++--
 src/stores/date.js            | 16 ++++++++++++++++
 src/views/info/MySchedule.vue | 23 +++++++++++++++++++---
 src/views/info/Schedule.vue   | 36 +++++++++++++++++------------------
 4 files changed, 55 insertions(+), 24 deletions(-)
 create mode 100644 src/stores/date.js

diff --git a/.env b/.env
index 3a105a4..fd2d8b2 100644
--- a/.env
+++ b/.env
@@ -1,2 +1,2 @@
-# VITE_APP_API_URL=http://localhost:8000/
-VITE_APP_API_URL=https://nckubikefestival.ncku.edu.tw/api/
\ No newline at end of file
+VITE_APP_API_URL=http://localhost:8000/
+# VITE_APP_API_URL=https://nckubikefestival.ncku.edu.tw/api/
\ No newline at end of file
diff --git a/src/stores/date.js b/src/stores/date.js
new file mode 100644
index 0000000..4439cdd
--- /dev/null
+++ b/src/stores/date.js
@@ -0,0 +1,16 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+
+export const useDateStore = defineStore('date', () => {
+    const currentDate = ref('3/2')
+
+    const selectedDate = computed(() => currentDate.value);
+
+    async function selectDate(newDate) {
+        currentDate.value = newDate;
+    }
+    return {
+        selectedDate,
+        selectDate
+    }
+})
\ No newline at end of file
diff --git a/src/views/info/MySchedule.vue b/src/views/info/MySchedule.vue
index 103cc88..f6ca886 100644
--- a/src/views/info/MySchedule.vue
+++ b/src/views/info/MySchedule.vue
@@ -5,14 +5,29 @@
     <div class="mb-5 flex justify-center gap-7">
       <button v-for="(date,idx) in dateList"
         class="w-[360px]  rounded-lg font-semibold text-xl py-[11px]"
-        :class="{ ' bg-primary-900 text-white': selectedDate === date ,
-      'bg-white text-primary-900 border-primary-900 border-2': selectedDate !== date }"
-        @click="selectDate(date)"
+        :class="{ ' bg-primary-900 text-white': dateStore.selectedDate == date ,
+      'bg-white text-primary-900 border-primary-900 border-2': dateStore.selectedDate != date }"
+        @click="dateStore.selectDate(date)"
       >
         {{ `DAY ${idx+1} | 03/0${idx+2}` }}
       </button>
     </div>
   </div>
+  <!-- Date tabs for mobile -->
+  <div class="fixed w-[100vw] h-[3.3125rem] flex bottom-0 left-0 sm:hidden">
+    <button
+      v-for="(date, idx) in dateList"
+      class="flex-1 border-solid border-2 border-primary-900 font-bold"
+      :class="`${
+        dateStore.selectedDate != date
+          ? 'bg-[#FFF] text-primary-900'
+          : 'bg-primary-900 text-white'
+      }`"
+      @click="dateStore.selectDate(date)"
+    >
+      {{ `DAY ${idx + 1} | ${date}` }}
+    </button>
+  </div>
   <div class=" min-h-[180px] mt-10">
     <StripCard
       v-for="event in currentEvents"
@@ -35,6 +50,7 @@
 <script setup>
 import { ref,onMounted,computed } from 'vue'
 import { useEventStore } from '../../stores/user';
+import { useDateStore } from '../../stores/date';
 import events from "../../data/event.json";
 import StripCard from "@/components/StripCard.vue";
 
@@ -46,6 +62,7 @@ const selectDate = (date) => {
 };
 
 const eventStore = useEventStore();
+const dateStore = useDateStore();
 
 onMounted(() => {
   // fetch user events
diff --git a/src/views/info/Schedule.vue b/src/views/info/Schedule.vue
index 262b374..661dd22 100644
--- a/src/views/info/Schedule.vue
+++ b/src/views/info/Schedule.vue
@@ -5,9 +5,9 @@
     <div class="mb-5 flex justify-center gap-7">
       <button v-for="(date,idx) in dateList"
         class="w-[360px]  rounded-lg font-semibold text-xl py-[11px]"
-        :class="{ ' bg-primary-900 text-white': selectedDate === date ,
-      'bg-white text-primary-900 border-primary-900 border-2': selectedDate !== date }"
-        @click="selectDate(date)"
+        :class="{ ' bg-primary-900 text-white': dateStore.selectedDate == date ,
+      'bg-white text-primary-900 border-primary-900 border-2': dateStore.selectedDate != date }"
+        @click="dateStore.selectDate(date)"
       >
         {{ `DAY ${idx+1} | 03/0${idx+2}` }}
       </button>
@@ -40,7 +40,7 @@
         <template v-for="(date, i) in dateList">
           <div
             class="flex justify-start gap-[40px] p-200 w-[3000px]"
-            v-if="selectedDate === date"
+            v-if="dateStore.selectedDate == date"
           >
             <div
               class="relative"
@@ -58,7 +58,7 @@
               <div class="flex flex-col gap-4">
                 <template
                   v-for="(eventGroup, index) in groupEventsByTime(
-                    eventDict[selectedDate][project]
+                    eventDict[dateStore.selectedDate][project]
                   )"
                 >
                   <div
@@ -128,7 +128,7 @@
 
   <!-- mobile container -->
   <template v-for="(date, i) in dateList">
-    <div class="sm:hidden" v-if="selectedDate === date">
+    <div class="sm:hidden" v-if="dateStore.selectedDate == date">
       <div v-for="index in 10" :key="`mobile-${index}`" class="mt-4">
         <div class="w-full font-bold text-2xl text-primary-900">
           {{ `${index == 1 ? "0" : ""}${index + 8}` }}:00
@@ -154,18 +154,19 @@
     </div>
   </template>
 
+  <!-- Date tabs for mobile -->
   <div class="fixed w-[100vw] h-[3.3125rem] flex bottom-0 left-0 sm:hidden">
     <button
-      v-for="(key, i) in ['3/2', '3/3']"
+      v-for="(date, idx) in dateList"
       class="flex-1 border-solid border-2 border-primary-900 font-bold"
       :class="`${
-        selectedDate === key
+        dateStore.selectedDate != date
           ? 'bg-[#FFF] text-primary-900'
           : 'bg-primary-900 text-white'
       }`"
-      @click="selectDate(key)"
+      @click="dateStore.selectDate(date)"
     >
-      {{ `DAY ${i + 1} | ${key}` }}
+      {{ `DAY ${idx + 1} | ${date}` }}
     </button>
   </div>
 </template>
@@ -176,8 +177,10 @@ import ScheduleCardSingle from "../../components/ScheduleCardSingle.vue";
 import ScheduleCardMulti from "../../components/ScheduleCardMulti.vue";
 import { ref, onBeforeMount, onMounted } from "vue";
 import { useEventStore } from "../../stores/user";
+import { useDateStore } from '../../stores/date';
 import Cookies from "js-cookie";
 
+const dateStore = useDateStore();
 const eventStore = useEventStore();
 const { fetchUserEvents } = eventStore;
 
@@ -223,7 +226,6 @@ const projectColorList = ref({
   人生岔路口: null,
 });
 
-const selectedDate = ref("3/2");
 const eventDict = ref({});
 const showModal = ref(false);
 const showTutorial = ref(true);
@@ -246,7 +248,6 @@ const showTutorial = ref(true);
 
 onBeforeMount(() => {
   // init eventDict in the order above
-  selectedDate.value = "3/2";
   eventDict.value = {
     "3/2": {},
     "3/3": {},
@@ -270,7 +271,7 @@ onBeforeMount(() => {
     // console.log(eventDict.value[item.date][item.project]);
 
     if (eventDict.value[item.date][item.project] == undefined){
-      console.log(`eventDict.value[${item.date}][${item.project}] is undefined`);
+      // console.log(`eventDict.value[${item.date}][${item.project}] is undefined`);
     }
     else{
       eventDict.value[item.date][item.project].push(item);
@@ -296,9 +297,6 @@ onBeforeMount(() => {
   else showTutorial.value = false;
 });
 
-function selectDate(date) {
-  selectedDate.value = date;
-}
 
 // set all events with the same start and end time in a group
 // [{startTime: '9:00', events: [event1, event2, ...], {startTime: '10:00', events: [event1, event2, ...], ...]}
@@ -334,9 +332,9 @@ function filterEventsByStartTime(start) {
 
   let groups = [];
   for (let project of projectList.value) {
-    const events = eventDict.value[selectedDate.value][project];
-    console.log("filterEventsByStartTime:project");
-    console.log(events);
+    const events = eventDict.value[dateStore.selectedDate][project];
+    // console.log("filterEventsByStartTime:project");
+    // console.log(events);
     const filteredEvents = events.filter(
       (event) => event.startTime >= startTime && event.startTime < endTime
     );

From 213deb84de460d2e514e93d9bdf66f1ff38df79f Mon Sep 17 00:00:00 2001
From: jason810496 <810496@email.wlsh.tyc.edu.tw>
Date: Wed, 21 Feb 2024 19:19:12 +0800
Subject: [PATCH 4/4] hotfix: backend api url

---
 .env | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.env b/.env
index fd2d8b2..3a105a4 100644
--- a/.env
+++ b/.env
@@ -1,2 +1,2 @@
-VITE_APP_API_URL=http://localhost:8000/
-# VITE_APP_API_URL=https://nckubikefestival.ncku.edu.tw/api/
\ No newline at end of file
+# VITE_APP_API_URL=http://localhost:8000/
+VITE_APP_API_URL=https://nckubikefestival.ncku.edu.tw/api/
\ No newline at end of file