Merge pull request #71 from gdsc-ncku/jason

feat: add my schedule
gdsc-ncku · Feb 21, 2024 · 4b8f437 · 4b8f437
2 parents 254feca + 213deb8
commit 4b8f437
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 67 deletions.
diff --git a/src/stores/date.js 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
+    }
+})
diff --git a/src/views/info/MySchedule.vue b/src/views/info/MySchedule.vue
@@ -1,7 +1,76 @@
 <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': 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"
+      :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 { useDateStore } from '../../stores/date';
+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();
+const dateStore = useDateStore();
+
+onMounted(() => {
+  // fetch user events
+  eventStore.fetchUserEvents();
+});
+
+const currentEvents = computed(() => {
+  return events.filter((event) => event.date === selectedDate.value && eventStore.isEventSubscribed(event.id));
+});
+
 </script>
diff --git 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': dateStore.selectedDate == date ,
+      'bg-white text-primary-900 border-primary-900 border-2': dateStore.selectedDate != date }"
+        @click="dateStore.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>
 
@@ -46,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"
@@ -64,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
@@ -134,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
@@ -160,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>
@@ -182,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;
 
@@ -229,7 +226,6 @@ const projectColorList = ref({
   人生岔路口: null,
 });
 
-const selectedDate = ref("3/2");
 const eventDict = ref({});
 const showModal = ref(false);
 const showTutorial = ref(true);
@@ -252,7 +248,6 @@ const showTutorial = ref(true);
 
 onBeforeMount(() => {
   // init eventDict in the order above
-  selectedDate.value = "3/2";
   eventDict.value = {
     "3/2": {},
     "3/3": {},
@@ -276,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);
@@ -302,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, ...], ...]}
@@ -340,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
     );
@@ -392,39 +384,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>