Sharkey/src/client/app/common/views/widgets/calendar.vue

208 lines
4 KiB
Vue
Raw Normal View History

2018-02-15 05:36:42 +02:00
<template>
<div class="mkw-calendar"
:data-melt="props.design == 1"
:data-special="special"
2018-02-23 19:46:09 +02:00
:data-mobile="isMobile"
2018-02-15 05:36:42 +02:00
>
<div class="calendar" :data-is-holiday="isHoliday">
<p class="month-and-year">
<span class="year">{{ year }}</span>
<span class="month">{{ month }}</span>
</p>
<p class="day">{{ day }}</p>
<p class="week-day">{{ weekDay }}曜日</p>
</div>
<div class="info">
<div>
<p>今日:<b>{{ dayP.toFixed(1) }}%</b></p>
<div class="meter">
<div class="val" :style="{ width: `${dayP}%` }"></div>
</div>
</div>
<div>
<p>今月:<b>{{ monthP.toFixed(1) }}%</b></p>
<div class="meter">
<div class="val" :style="{ width: `${monthP}%` }"></div>
</div>
</div>
<div>
<p>今年:<b>{{ yearP.toFixed(1) }}%</b></p>
<div class="meter">
<div class="val" :style="{ width: `${yearP}%` }"></div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
2018-02-24 17:18:09 +02:00
import define from '../../../common/define-widget';
2018-02-15 05:36:42 +02:00
export default define({
name: 'calendar',
2018-02-21 08:30:03 +02:00
props: () => ({
2018-02-15 05:36:42 +02:00
design: 0
2018-02-21 08:30:03 +02:00
})
2018-02-15 05:36:42 +02:00
}).extend({
data() {
return {
now: new Date(),
year: null,
month: null,
day: null,
weekDay: null,
yearP: null,
dayP: null,
monthP: null,
isHoliday: null,
special: null,
clock: null
};
},
created() {
this.tick();
this.clock = setInterval(this.tick, 1000);
},
beforeDestroy() {
clearInterval(this.clock);
},
methods: {
func() {
2018-02-23 19:46:09 +02:00
if (this.isMobile) return;
2018-02-15 05:36:42 +02:00
if (this.props.design == 2) {
this.props.design = 0;
} else {
this.props.design++;
}
},
tick() {
const now = new Date();
const nd = now.getDate();
const nm = now.getMonth();
const ny = now.getFullYear();
this.year = ny;
this.month = nm + 1;
this.day = nd;
this.weekDay = ['日', '月', '火', '水', '木', '金', '土'][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();
this.dayP = dayNumer / dayDenom * 100;
this.monthP = monthNumer / monthDenom * 100;
this.yearP = yearNumer / yearDenom * 100;
this.isHoliday = now.getDay() == 0 || now.getDay() == 6;
this.special =
nm == 0 && nd == 1 ? 'on-new-years-day' :
false;
}
}
});
</script>
<style lang="stylus" scoped>
2018-03-03 06:47:55 +02:00
@import '~const.styl'
2018-04-19 22:51:04 +03:00
root(isDark)
2018-02-15 05:36:42 +02:00
padding 16px 0
2018-04-19 22:51:04 +03:00
color isDark ? #c5ced6 :#777
background isDark ? #282C37 : #fff
2018-02-15 05:36:42 +02:00
border solid 1px rgba(0, 0, 0, 0.075)
border-radius 6px
&[data-special='on-new-years-day']
border-color #ef95a0
&[data-melt]
background transparent
border none
2018-02-23 19:46:09 +02:00
&[data-mobile]
border none
border-radius 8px
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
2018-02-15 05:36:42 +02:00
&:after
content ""
display block
clear both
> .calendar
float left
width 60%
text-align center
&[data-is-holiday]
> .day
color #ef95a0
> p
margin 0
line-height 18px
font-size 14px
> span
margin 0 4px
> .day
margin 10px 0
line-height 32px
font-size 28px
> .info
display block
float left
width 40%
padding 0 16px 0 0
> div
margin-bottom 8px
&:last-child
margin-bottom 4px
> p
margin 0 0 2px 0
font-size 12px
line-height 18px
2018-04-19 22:51:04 +03:00
color isDark ? #7a8692 : #888
2018-02-15 05:36:42 +02:00
> b
margin-left 2px
> .meter
width 100%
overflow hidden
2018-04-19 22:51:04 +03:00
background isDark ? #1c1f25 : #eee
2018-02-15 05:36:42 +02:00
border-radius 8px
> .val
height 4px
background $theme-color
&:nth-child(1)
> .meter > .val
background #f7796c
&:nth-child(2)
> .meter > .val
background #a1de41
&:nth-child(3)
> .meter > .val
background #41ddde
2018-04-19 22:51:04 +03:00
.mkw-calendar[data-darkmode]
root(true)
.mkw-calendar:not([data-darkmode])
root(false)
2018-02-15 05:36:42 +02:00
</style>