Sharkey/packages/frontend/src/widgets/WidgetCalendar.vue

217 lines
4.9 KiB
Vue
Raw Normal View History

<template>
2023-01-15 13:55:09 +02:00
<div :class="[$style.root, { _panel: !widgetProps.transparent }]" class="data-cy-mkw-calendar">
2023-01-15 07:03:28 +02:00
<div :class="[$style.calendar, { [$style.isHoliday]: isHoliday }]">
<p :class="$style.monthAndYear">
<span :class="$style.year">{{ $t('yearX', { year }) }}</span>
<span :class="$style.month">{{ $t('monthX', { month }) }}</span>
</p>
2021-12-29 06:36:17 +02:00
<p v-if="month === 1 && day === 1" class="day">🎉{{ $t('dayX', { day }) }}<span style="display: inline-block; transform: scaleX(-1);">🎉</span></p>
2023-01-15 07:03:28 +02:00
<p v-else :class="$style.day">{{ $t('dayX', { day }) }}</p>
<p :class="$style.weekDay">{{ weekDay }}</p>
</div>
2023-01-15 07:03:28 +02:00
<div :class="$style.info">
<div :class="$style.infoSection">
<p :class="$style.infoText">{{ i18n.ts.today }}<b :class="$style.percentage">{{ dayP.toFixed(1) }}%</b></p>
<div :class="$style.meter">
<div :class="$style.meterVal" :style="{ width: `${dayP}%` }"></div>
</div>
</div>
2023-01-15 07:03:28 +02:00
<div :class="$style.infoSection">
<p :class="$style.infoText">{{ i18n.ts.thisMonth }}<b :class="$style.percentage">{{ monthP.toFixed(1) }}%</b></p>
<div :class="$style.meter">
<div :class="$style.meterVal" :style="{ width: `${monthP}%` }"></div>
</div>
</div>
2023-01-15 07:03:28 +02:00
<div :class="$style.infoSection">
<p :class="$style.infoText">{{ i18n.ts.thisYear }}<b :class="$style.percentage">{{ yearP.toFixed(1) }}%</b></p>
<div :class="$style.meter">
<div :class="$style.meterVal" :style="{ width: `${yearP}%` }"></div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { onUnmounted, ref } from 'vue';
import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
import { GetFormResultType } from '@/scripts/form';
import { i18n } from '@/i18n';
import { useInterval } from '@/scripts/use-interval';
Migrate to Vue3 (#6587) * Update reaction.vue * fix bug * wip * wip * wjio * wip * Revert "wip" This reverts commit e427f2160adf4e8a4147006e25a89854edab0033. * wip * wip * wip * Update init.ts * Update drive-window.vue * wip * wip * Use PascalCase for components * Use PascalCase for components * update dep * wip * wip * wip * Update init.ts * wip * Update paging.ts * Update test.vue * watch deep * wip * lint * wip * wip * wip * wip * wiop * wip * Update webpack.config.ts * alllow null poll * wip * wip * wip * wiop * UI redesign & refactor (#6714) * wip * wip * wip * wip * wip * Update drive.vue * Update word-mute.vue * wip * wip * wip * clean up * wip * Update default.vue * wip * Update notes.vue * Update mfm.ts * Update index.home.vue * Update post-form.vue * Update post-form-attaches.vue * wip * Update post-form.vue * Update sidebar.vue * wip * wip * Update index.vue * wip * Update default.vue * Update index.vue * Update index.vue * wip * Update post-form-attaches.vue * Update note.vue * wip * clean up * Update notes.vue * wip * wip * Update ja-JP.yml * wip * wip * Update index.vue * wip * wip * wip * wip * wip * wip * wip * wip * Update default.vue * wip * Update _dark.json5 * wip * wip * wip * clean up * wip * wip * Update index.vue * Update test.vue * wip * wip * fix * wip * wip * wip * wip * clena yop * wip * wip * Update store.ts * Update messaging-room.vue * Update default.widgets.vue * fix * wip * wip * Update modal.vue * wip * Update os.ts * Update os.ts * Update deck.vue * Update init.ts * wip * Update ja-JP.yml * v-sizeは単にwindowのresizeを監視するだけで良いかもしれない * Update modal.vue * wip * Update tooltip.ts * wip * wip * wip * wip * wip * Update image-viewer.vue * wip * wip * Update style.scss * Update style.scss * Update visitor.vue * wip * Update init.ts * Update init.ts * wip * wip * Update visitor.vue * Update visitor.vue * Update visitor.vue * Update visitor.vue * wip * wip * Update modal.vue * Update header.vue * Update menu.vue * Update about.vue * Update about-misskey.vue * wip * wip * Update visitor.vue * Update tooltip.ts * wip * Update drive.vue * wip * Update style.scss * Update header.vue * wip * wip * Update users.user.vue * Update announcements.vue * wip * wip * wip * Update emojis.vue * wip * Update emojis.vue * Update style.scss * Update users.vue * wip * Update style.scss * wip * Update welcome.entrance.vue * Update radio.vue * Update size.ts * Update emoji-edit-dialog.vue * wip * Update emojis.vue * wip * Update emojis.vue * Update emojis.vue * Update emojis.vue * wip * wip * wip * wip * Update file-dialog.vue * wip * wip * Update token-generate-window.vue * Update notification-setting-window.vue * wip * wip * Update _error_.vue * Update ja-JP.yml * wip * wip * Update store.ts * Update emojis.vue * Update emojis.vue * Update emojis.vue * Update announcements.vue * Update store.ts * wip * Update page-editor.vue * wip * wip * Update modal.vue * wip * Update select-file.ts * Update timeline.vue * Update emojis.vue * Update os.ts * wip * Update user-select.vue * Update mfm.ts * Update get-file-info.ts * Update drive.vue * Update init.ts * Update mfm.ts * wip * wip * Update window.vue * Update note.vue * wip * wip * Update user-info.vue * wip * wip * wip * wip * wip * Update header.vue * Update header.vue * wip * Update explore.vue * wip * wip * wip * Update webpack.config.ts * wip * wip * wip * wip * wip * wip * Update autocomplete.ts * wip * wip * wip * Update toast.vue * wip * Update post-form-dialog.vue * wip * wip * wip * wip * wip * Update users.vue * wip * Update explore.vue * wip * wip * wip * Update package.json * wip * Update icon-dialog.vue * wip * wip * Update user-preview.ts * wip * wip * wip * wip * wip * Update instance.vue * Update user-name.vue * Update federation.vue * Update instance.vue * wip * wip * Update tag.vue * wip * wip * wip * wip * wip * Update instance.vue * wip * Update os.ts * Update os.ts * wip * wip * wip * Update router.ts * wip * Update init.ts * Update note.vue * Update messages.vue * wip * wip * wip * wip * wip * google * wip * wip * wip * wip * Update theme-editor.vue * wip * wip * Update room.vue * Update channel-editor.vue * wip * Update window.vue * Update window.vue * wip * Update window.vue * Update window.vue * wip * Update menu.vue * wip * wip * wip * wip * Update messaging-room.vue * wip * Update post-form.vue * Update default.widgets.vue * Update window.vue * wip
2020-10-17 14:12:00 +03:00
const name = 'calendar';
const widgetPropsDef = {
transparent: {
type: 'boolean' as const,
default: false,
},
};
type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
//const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef,
props,
emit,
);
const year = ref(0);
const month = ref(0);
const day = ref(0);
const weekDay = ref('');
const yearP = ref(0);
const monthP = ref(0);
const dayP = ref(0);
const isHoliday = ref(false);
const tick = () => {
const now = new Date();
const nd = now.getDate();
const nm = now.getMonth();
const ny = now.getFullYear();
year.value = ny;
month.value = nm + 1;
day.value = nd;
weekDay.value = [
i18n.ts._weekday.sunday,
i18n.ts._weekday.monday,
i18n.ts._weekday.tuesday,
i18n.ts._weekday.wednesday,
i18n.ts._weekday.thursday,
i18n.ts._weekday.friday,
i18n.ts._weekday.saturday,
][now.getDay()];
const dayNumer = now.getTime() - new Date(ny, nm, nd).getTime();
const dayDenom = 1000/*ms*/ * 60/*s*/ * 60/*m*/ * 24/*h*/;
const monthNumer = now.getTime() - new Date(ny, nm, 1).getTime();
const monthDenom = new Date(ny, nm + 1, 1).getTime() - new Date(ny, nm, 1).getTime();
const yearNumer = now.getTime() - new Date(ny, 0, 1).getTime();
const yearDenom = new Date(ny + 1, 0, 1).getTime() - new Date(ny, 0, 1).getTime();
dayP.value = dayNumer / dayDenom * 100;
monthP.value = monthNumer / monthDenom * 100;
yearP.value = yearNumer / yearDenom * 100;
isHoliday.value = now.getDay() === 0 || now.getDay() === 6;
};
useInterval(tick, 1000, {
immediate: true,
afterMounted: false,
});
defineExpose<WidgetComponentExpose>({
name,
configure,
id: props.widget ? props.widget.id : null,
});
</script>
2023-01-15 07:03:28 +02:00
<style lang="scss" module>
.root {
padding: 16px 0;
&:after {
content: "";
display: block;
clear: both;
}
2023-01-15 07:03:28 +02:00
}
2023-01-15 07:03:28 +02:00
.calendar {
float: left;
width: 60%;
text-align: center;
2023-01-15 07:03:28 +02:00
&.isHoliday {
> .day {
color: #ef95a0;
}
2023-01-15 07:03:28 +02:00
}
}
2023-01-15 07:03:28 +02:00
.monthAndYear,
.weekDay {
margin: 0;
line-height: 18px;
font-size: 0.9em;
}
.year,
.month {
margin: 0 4px;
}
2023-01-15 07:03:28 +02:00
.day {
margin: 10px 0;
line-height: 32px;
font-size: 1.75em;
}
.info {
display: block;
float: left;
width: 40%;
padding: 0 16px 0 0;
box-sizing: border-box;
}
.infoSection {
margin-bottom: 8px;
&:last-child {
margin-bottom: 4px;
}
&:nth-child(1) {
> .meter > .meterVal {
background: #f7796c;
}
2023-01-15 07:03:28 +02:00
}
2023-01-15 07:03:28 +02:00
&:nth-child(2) {
> .meter > .meterVal {
background: #a1de41;
}
}
2023-01-15 07:03:28 +02:00
&:nth-child(3) {
> .meter > .meterVal {
background: #41ddde;
}
}
}
2023-01-15 07:03:28 +02:00
.infoText {
display: flex;
margin: 0 0 2px 0;
font-size: 0.75em;
line-height: 18px;
opacity: 0.8;
}
.percentage {
margin-left: auto;
}
.meter {
width: 100%;
overflow: hidden;
background: var(--X11);
border-radius: 8px;
}
.meterVal {
height: 4px;
transition: width .3s cubic-bezier(0.23, 1, 0.32, 1);
}
</style>