119 lines
2.8 KiB
Vue
119 lines
2.8 KiB
Vue
<template>
|
|
<div>
|
|
<Card size="small" style="min-width: 100px; width: min-content">
|
|
<template #title>
|
|
{{ timeToDate(props.day) }}
|
|
<br />
|
|
{{ timeToDayName(new Date(props.day)) }}
|
|
</template>
|
|
|
|
<a-card-grid
|
|
v-for="interval in page.intervals"
|
|
style="width: 100%; text-align: center; padding: 1px"
|
|
>
|
|
<Interval
|
|
:interval="interval"
|
|
:checked="page.checked.get(interval)"
|
|
:add="add"
|
|
:remove="remove"
|
|
></Interval>
|
|
</a-card-grid>
|
|
</Card>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { timeToDate } from "@/composables/misc";
|
|
import { onMounted, reactive } from "vue";
|
|
import { useI18n } from "vue-i18n";
|
|
import Interval from "@/components/common/approval/Interval.vue";
|
|
import Card from "ant-design-vue/es/card/Card";
|
|
const { t } = useI18n();
|
|
|
|
const props = defineProps<{
|
|
day: string;
|
|
add: Function;
|
|
remove: Function;
|
|
checked?: string[];
|
|
}>();
|
|
|
|
const page = reactive<{
|
|
intervals: string[];
|
|
checked: Map<string, boolean>;
|
|
}>({
|
|
intervals: [],
|
|
checked: new Map<string, boolean>(),
|
|
});
|
|
|
|
onMounted(() => {
|
|
if (props.checked) {
|
|
props.checked.forEach((element) => {
|
|
page.checked.set(element, true);
|
|
});
|
|
}
|
|
page.intervals = formIntervals();
|
|
});
|
|
|
|
function formIntervals(): string[] {
|
|
let res: string[] = [];
|
|
|
|
for (let hour = 6; hour < 22; hour++) {
|
|
let hourStr = String(hour);
|
|
if (hour < 10) {
|
|
hourStr = "0" + hourStr;
|
|
}
|
|
res.push(hourStr + ":00" + " - " + hourStr + ":30");
|
|
|
|
let nextHour = hour + 1;
|
|
let nextHourStr = String(nextHour);
|
|
if (nextHour < 10) {
|
|
nextHourStr = "0" + nextHourStr;
|
|
}
|
|
res.push(hourStr + ":30" + " - " + nextHourStr + ":00");
|
|
}
|
|
return res;
|
|
}
|
|
|
|
function add(interval: string) {
|
|
return props.add(props.day + "|" + interval);
|
|
}
|
|
|
|
function remove(interval: string) {
|
|
return props.remove(props.day + "|" + interval);
|
|
}
|
|
|
|
function timeToDayName(date: Date): string {
|
|
switch (date.getDay()) {
|
|
case 1:
|
|
return t(
|
|
"components.user.calendars.share_free_time.work_days_names.monday"
|
|
);
|
|
case 2:
|
|
return t(
|
|
"components.user.calendars.share_free_time.work_days_names.tuesday"
|
|
);
|
|
case 3:
|
|
return t(
|
|
"components.user.calendars.share_free_time.work_days_names.wednesday"
|
|
);
|
|
case 4:
|
|
return t(
|
|
"components.user.calendars.share_free_time.work_days_names.thursday"
|
|
);
|
|
case 5:
|
|
return t(
|
|
"components.user.calendars.share_free_time.work_days_names.friday"
|
|
);
|
|
case 6:
|
|
return t(
|
|
"components.user.calendars.share_free_time.work_days_names.saturday"
|
|
);
|
|
case 0:
|
|
return t(
|
|
"components.user.calendars.share_free_time.work_days_names.sunday"
|
|
);
|
|
}
|
|
|
|
return "";
|
|
}
|
|
</script>
|