diff options
Diffstat (limited to 'src/client/widgets/digital-clock.vue')
| -rw-r--r-- | src/client/widgets/digital-clock.vue | 79 |
1 files changed, 0 insertions, 79 deletions
diff --git a/src/client/widgets/digital-clock.vue b/src/client/widgets/digital-clock.vue deleted file mode 100644 index 2202c9ed4b..0000000000 --- a/src/client/widgets/digital-clock.vue +++ /dev/null @@ -1,79 +0,0 @@ -<template> -<div class="mkw-digitalClock _monospace" :class="{ _panel: !props.transparent }" :style="{ fontSize: `${props.fontSize}em` }"> - <span> - <span v-text="hh"></span> - <span :style="{ visibility: showColon ? 'visible' : 'hidden' }">:</span> - <span v-text="mm"></span> - <span :style="{ visibility: showColon ? 'visible' : 'hidden' }">:</span> - <span v-text="ss"></span> - <span :style="{ visibility: showColon ? 'visible' : 'hidden' }" v-if="props.showMs">:</span> - <span v-text="ms" v-if="props.showMs"></span> - </span> -</div> -</template> - -<script lang="ts"> -import { defineComponent } from 'vue'; -import define from './define'; -import * as os from '@client/os'; - -const widget = define({ - name: 'digitalClock', - props: () => ({ - transparent: { - type: 'boolean', - default: false, - }, - fontSize: { - type: 'number', - default: 1.5, - step: 0.1, - }, - showMs: { - type: 'boolean', - default: true, - }, - }) -}); - -export default defineComponent({ - extends: widget, - data() { - return { - clock: null, - hh: null, - mm: null, - ss: null, - ms: null, - showColon: true, - }; - }, - created() { - this.tick(); - this.$watch(() => this.props.showMs, () => { - if (this.clock) clearInterval(this.clock); - this.clock = setInterval(this.tick, this.props.showMs ? 10 : 1000); - }, { immediate: true }); - }, - beforeUnmount() { - clearInterval(this.clock); - }, - methods: { - tick() { - const now = new Date(); - this.hh = now.getHours().toString().padStart(2, '0'); - this.mm = now.getMinutes().toString().padStart(2, '0'); - this.ss = now.getSeconds().toString().padStart(2, '0'); - this.ms = Math.floor(now.getMilliseconds() / 10).toString().padStart(2, '0'); - this.showColon = now.getSeconds() % 2 === 0; - } - } -}); -</script> - -<style lang="scss" scoped> -.mkw-digitalClock { - padding: 16px 0; - text-align: center; -} -</style> |