Skip to content

Commit

Permalink
Merge pull request #69 from gdsc-ncku/jason
Browse files Browse the repository at this point in the history
feat: add SaveScheduleButton for subscribing event
  • Loading branch information
jason810496 committed Feb 21, 2024
2 parents eee5d85 + f72af36 commit 0a9168f
Show file tree
Hide file tree
Showing 9 changed files with 204 additions and 108 deletions.
4 changes: 2 additions & 2 deletions .env
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
# VITE_APP_API_URL=http://localhost:8000/
VITE_APP_API_URL=https://nckubikefestival.ncku.edu.tw/api/
VITE_APP_API_URL=http://localhost:8000/
# VITE_APP_API_URL=https://nckubikefestival.ncku.edu.tw/api/
3 changes: 3 additions & 0 deletions public/schedule/not-subscribed-lg.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions public/schedule/subscribed-lg.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/components/Dialog.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div></div>
<div
class="fixed top-6 z-[101] w-full flex justify-center"
class="fixed top-6 z-[10000] w-full flex justify-center"
v-bind:class="{
hidden: !store.isShow,
}"
Expand Down
128 changes: 128 additions & 0 deletions src/components/SaveScheduleButton.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
<template>
<button
:class="{
'w-[51px] h-[51px]': size === 'lg',
'w-[24px] h-[24px]': size === 'sm',
}"
:style="{
'background' : subscribeIcon,
}"
class="flex justify-center items-center"
@click="handleSave"
></button>
</template>

<script setup>
import { computed, defineProps} from "vue";
import { useEventStore } from "../stores/user";
const eventStore = useEventStore();
let props = defineProps({
id: {
type: String,
required: true,
},
activity: {
type: String,
required: true,
},
description: {
type: String,
default: "暫無描述",
},
name: {
type: String,
required: true,
},
date: {
type: String,
required: true,
},
startTime: {
//backend: event_time_start
type: String,
required: true,
},
endTime: {
//backend: event_time_end
type: String,
required: true,
},
host: {
type: String,
required: true,
},
location: {
type: String,
required: true,
},
link: {
type: String,
required: false,
},
saved: {
type: Boolean,
default: false,
},
size: {
type: String,
default: "sm", // lg
},
});
const {
id,
activity,
name,
date,
startTime,
endTime,
host,
location,
link,
saved,
size,
} = props;
const subscribeIcon = computed(() => {
if(eventStore.isEventSubscribed(id)){
if(size === 'lg'){
return "url(/BikeFestival17th-Frontend/schedule/subscribed-lg.svg) no-repeat";
}
return "url(/BikeFestival17th-Frontend/schedule/subscribed.svg) no-repeat";
}
else{
if(size === 'lg'){
return "url(/BikeFestival17th-Frontend/schedule/not-subscribed-lg.svg) no-repeat";
}
return "url(/BikeFestival17th-Frontend/schedule/not-subscribed.svg) no-repeat";
}
});
const handleSave = () => {
// YYYY-MM-DD HH:MM:SS
if (eventStore.isEventSubscribed(id)) {
console.log("unsubscribed");
eventStore.unSubscribeEvent(id, name);
return;
}
const day = date.split("/")[1];
const start = `2024/03/0${day} ${startTime}`;
const end = `2024/03/0${day} ${endTime}`;
const detail = JSON.stringify({
id,
activity,
name,
date,
start,
end,
host,
location,
link,
saved,
});
eventStore.subscribeEvent(id, start, end, detail, name);
};
</script>
30 changes: 21 additions & 9 deletions src/components/ScheduleCardModal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,19 @@
<!-- top title: 主題活動、收藏按鈕、關閉按鈕 -->
<div class="flex items-center gap-5">
<p class="grow text-primary-900 font-bold text-xl underline leading-none">{{ activity }}</p>
<svg class="min-w-6" xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 30 36" fill="none">
<path d="M25.7143 0H4.28571C3.14907 0 2.05898 0.421427 1.25526 1.17157C0.451529 1.92172 0 2.93913 0 4V36L15 30L30 36V4C30 1.78 28.0714 0 25.7143 0Z" fill="#FF7B1A" />
</svg>
<SaveScheduleButton
:id="id"
:activity="activity"
:name="name"
:date="date"
:startTime="startTime"
:endTime="endTime"
:host="host"
:location="location"
:link="link"
:saved="saved"
:size="'lg'"
></SaveScheduleButton>
<button @click="$emit('close')" class="flex justify-center items-center min-w-[50px] min-h-[50px] hover:bg-gray-100 hover:rounded-full">
<img src="/schedule/close.svg" class="w-[50px] h-[50px]">
</button>
Expand Down Expand Up @@ -45,9 +55,13 @@
</template>

<script setup>
import { defineProps } from "vue";
import { apiSubscribeEvent } from "../apis/user";
import { defineProps,defineEmits } from "vue";
import SaveScheduleButton from "./SaveScheduleButton.vue";
const props = defineProps({
id: {
type: String,
required: true,
},
show: {
type: Boolean,
required: true,
Expand Down Expand Up @@ -99,8 +113,6 @@ const props = defineProps({
});
const { id, link, host, location, date, startTime, endTime, saved } = props;
const handleSave = () => {
// TODO: the parameters in the function below are just for testing, please replace them with the actual values
apiSubscribeEvent("1", "", "2021/01/01 00:00", "2021/01/01 00:00");
};
defineEmits(["close"]);
</script>
77 changes: 18 additions & 59 deletions src/components/ScheduleCardMultiModal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -40,18 +40,19 @@
即刻報名
</a>
<div class="flex flex-col justify-center">
<svg
xmlns="http://www.w3.org/2000/svg"
width="30"
height="36"
viewBox="0 0 30 36"
fill="none"
>
<path
d="M25.7143 0H4.28571C3.14907 0 2.05898 0.421427 1.25526 1.17157C0.451529 1.92172 0 2.93913 0 4V36L15 30L30 36V4C30 1.78 28.0714 0 25.7143 0Z"
fill="#FF7B1A"
/>
</svg>
<SaveScheduleButton
:id="event.id"
:activity="event.activity"
:name="event.name"
:date="event.date"
:startTime="event.startTime"
:endTime="event.endTime"
:host="event.host"
:location="event.location"
:link="event.link"
:saved="event.saved"
:size="'lg'"
></SaveScheduleButton>
</div>
</div>
</div>
Expand Down Expand Up @@ -87,7 +88,9 @@
</template>

<script setup>
import { defineProps } from "vue";
import { defineProps,defineEmits } from "vue";
import SaveScheduleButton from "./SaveScheduleButton.vue";
const props = defineProps({
events: {
type: Array,
Expand All @@ -96,53 +99,9 @@ const props = defineProps({
show: {
type: Boolean,
required: true,
},
// name: {
// type: String,
// required: true,
// },
// activity: {
// type: String,
// required: true,
// },
// description: {
// type: String,
// default: "暫無描述",
// },
// date: {
// type: String,
// required: true,
// },
// startTime: {
// //backend: event_time_start
// type: String,
// required: true,
// },
// endTime: {
// //backend: event_time_end
// type: String,
// required: true,
// },
// host: {
// //backend: event_host
// type: String,
// default: "暫無講者",
// },
// location: {
// //backend: event_location
// type: String,
// required: true,
// },
// link: {
// type: String,
// required: false,
// },
// saved: {
// type: Boolean,
// default: false,
// },
}
});
// const { id, link, host, location, date, startTime, endTime, saved } = props;
const { events } = props;
defineEmits(["close"]);
</script>
43 changes: 14 additions & 29 deletions src/components/ScheduleCardSingle.vue
Original file line number Diff line number Diff line change
Expand Up @@ -11,35 +11,19 @@
activity
}}</span>
</div>
<button
class="w-[24px] h-[24px] lg:flex justify-center items-center hidden"
:class="
id === '49' && props.step === 1
? 'z-50 bg-primary-50 pointer-events-none'
: ''
"
:style="
eventStore.isEventSubscribed(id)
? 'background: url(/BikeFestival17th-Frontend/schedule/subscribed.svg) no-repeat'
: 'background: url(/BikeFestival17th-Frontend/schedule/not-subscribed.svg) no-repeat'
"
@click="handleSave"
></button>
<button
class="w-[24px] h-[24px] flex justify-center items-center lg:hidden"
:class="
id === '1' && props.step === 1
? 'z-50 bg-primary-50 pointer-events-none'
: ''
"
:style="
eventStore.isEventSubscribed(id)
? 'background: url(/BikeFestival17th-Frontend/schedule/subscribed.svg) no-repeat'
: 'background: url(/BikeFestival17th-Frontend/schedule/not-subscribed.svg) no-repeat'
"
@click="handleSave"
>
</button>
<SaveScheduleButton
:id="id"
:activity="activity"
:name="name"
:date="date"
:startTime="startTime"
:endTime="endTime"
:host="host"
:location="location"
:link="link"
:saved="saved"
:size="'sm'"
></SaveScheduleButton>
</div>
<!-- middle -->
<div class="flex flex-col gap-2">
Expand Down Expand Up @@ -114,6 +98,7 @@
<script setup>
import { defineProps, ref, watch } from "vue";
import ScheduleCardModal from "./ScheduleCardModal.vue";
import SaveScheduleButton from "./SaveScheduleButton.vue";
import { useEventStore } from "../stores/user";
const eventStore = useEventStore();
Expand Down
22 changes: 14 additions & 8 deletions src/components/StripCard.vue
Original file line number Diff line number Diff line change
Expand Up @@ -44,14 +44,19 @@
<img src="/schedule/location.svg" alt="" class="flex w-4 h-4"/>
<p class="text-black text-xs font-[350] truncate">{{ location }}</p>
</div>
<button
class="w-[24px] h-[24px] flex justify-center items-center ml-4"
@click="handleSave"
>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="18" viewBox="0 0 14 18" fill="none">
<path d="M12 15L7 12.82L2 15V2H12M12 0H2C1.46957 0 0.960859 0.210714 0.585786 0.585786C0.210714 0.960859 0 1.46957 0 2V18L7 15L14 18V2C14 0.89 13.1 0 12 0Z" fill="#FF7B1A" />
</svg>
</button>
<SaveScheduleButton
:id="id"
:activity="activity"
:name="name"
:date="date"
:startTime="startTime"
:endTime="endTime"
:host="host"
:location="location"
:link="link"
:saved="saved"
:size="'sm'"
></SaveScheduleButton>
</div>
<button class="px-2 rounded-[14px] border-[1px] border-primary-900 box-border lg:hidden">
<div class="flex justify-center items-center">
Expand Down Expand Up @@ -87,6 +92,7 @@
<script setup>
import { defineProps, ref} from "vue";
import ScheduleCardModal from "./ScheduleCardModal.vue";
import SaveScheduleButton from "./SaveScheduleButton.vue";
const props = defineProps({
id: {
Expand Down

0 comments on commit 0a9168f

Please sign in to comment.