Skip to content

Commit 5fde929

Browse files
authored
Add a digital clock card widget to the standard library (openhab#670)
Closes openhab#669. Also-by: Yannick Schaus <[email protected]> Signed-off-by: Hubert Nusser<[email protected]>
1 parent 1c41a91 commit 5fde929

File tree

4 files changed

+94
-0
lines changed

4 files changed

+94
-0
lines changed

bundles/org.openhab.ui/web/src/assets/definitions/widgets/standard/cards.js

+7
Original file line numberDiff line numberDiff line change
@@ -125,3 +125,10 @@ export const OhWebFrameCardDefinition = () => new WidgetDefinition('oh-webframe-
125125
pb('borders', 'Borders', 'Show borders around the frame')
126126
])
127127
.paramGroup(pg('webframe', 'Web Frame'), WebFrameParameters())
128+
129+
// OhClockCard
130+
import ClockParameters from '../system/clock'
131+
export const OhClockCardDefinition = () => new WidgetDefinition('oh-clock-card', 'Digital Clock Card', 'Display a digital clock in a card')
132+
.paramGroup(CardParameterGroup(), CardParameters())
133+
.paramGroup(pg('clock', 'Clock'), ClockParameters())
134+
.paramGroup(actionGroup(null, 'Action to perform when the clock is clicked'), actionParams())
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { pb, pt } from '../helpers'
2+
3+
export default () => [
4+
pt('timeFormat', 'Time Format', 'Time format, see <a class="external text-color-blue" target="_blank" href="https://day.js.org/docs/en/display/format">dayjs docs</a>').o([
5+
{ value: 'LTS', label: 'Localized time including seconds (\'LTS\', e.g. \'8:02:18 PM\')' },
6+
{ value: 'LT', label: 'Localized time (\'LT\'. e.g. \'8:02 PM\')' },
7+
{ value: 'HH:mm:ss', label: 'Current time (\'HH:mm:ss\')' }
8+
], false),
9+
pt('background', 'Background style', 'Background style (in CSS "background" attribute format)'),
10+
pt('timeFontSize', 'Time Font Size', 'Time font size (e.g. "34px")'),
11+
pt('timeFontWeight', 'Time Font Weight', 'Time font weight (e.g. "normal" or "bold")'),
12+
pb('showDate', 'Show the date', 'Show the current date in addition to the time'),
13+
pt('dateFormat', 'Date Format', 'Date format, see <a class="external text-color-blue" target="_blank" href="https://day.js.org/docs/en/display/format">dayjs docs</a>').o([
14+
{ value: 'LL', label: 'Localized long date (\'LL\', e.g. \'August 16, 2018\')' },
15+
{ value: 'L', label: 'Localized short date (\'L\', e.g. \'08/16/2018\')' },
16+
{ value: 'MM/DD/YYYY', label: 'Current date (\'MM/DD/YYYY\')' }
17+
], false).v((value, configuration, configDescription, parameters) => {
18+
return configuration.showDate === true
19+
}),
20+
pt('datePos', 'Date Position', 'Where to show the date').o([
21+
{ value: 'above', label: 'Above time' },
22+
{ value: 'below', label: 'Below time' }
23+
]).v((value, configuration, configDescription, parameters) => {
24+
return configuration.showDate === true
25+
}),
26+
pt('dateFontSize', 'Date Font Size', 'Date font size (e.g. "34px")')
27+
.v((value, configuration, configDescription, parameters) => {
28+
return configuration.showDate === true
29+
}),
30+
pt('dateFontWeight', 'Date Font Weight', 'Date font weight (e.g. "normal" or "bold")')
31+
.v((value, configuration, configDescription, parameters) => {
32+
return configuration.showDate === true
33+
})
34+
]

bundles/org.openhab.ui/web/src/components/widgets/standard/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,4 @@ export { default as OhPlayerCard } from './oh-player-card.vue'
1515
export { default as OhSwiperCard } from './oh-swiper-card.vue'
1616
export { default as OhListCard } from './oh-list-card.vue'
1717
export { default as OhWebframeCard } from './oh-webframe-card.vue'
18+
export { default as OhClockCard } from './oh-clock-card.vue'
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<template>
2+
<f7-card :no-border="config.noBorder" :no-shadow="config.noShadow" :outline="config.outline" :style="{ background: config.background }">
3+
<f7-card-header v-if="config.title">
4+
<div>{{config.title}}</div>
5+
</f7-card-header>
6+
<f7-card-content @click.native="performAction" class="clock-card-content text-align-center">
7+
<f7-row v-if="config.showDate && config.datePos !== 'below'">
8+
<f7-col :style="{ 'font-size': config.dateFontSize || '1vw', 'font-weight': config.dateFontWeight || 'normal' }" v-text="date"></f7-col>
9+
</f7-row>
10+
<f7-row>
11+
<f7-col :style="{ 'font-size': config.timeFontSize || '2vw', 'font-weight': config.timeFontWeight || 'normal' }" v-text="time"></f7-col>
12+
</f7-row>
13+
<f7-row v-if="config.showDate && config.datePos === 'below'">
14+
<f7-col :style="{ 'font-size': config.dateFontSize || '1vw', 'font-weight': config.dateFontWeight || 'normal' }" v-text="date"></f7-col>
15+
</f7-row>
16+
</f7-card-content>
17+
<f7-card-footer v-if="config.footer">
18+
{{config.footer}}
19+
</f7-card-footer>
20+
</f7-card>
21+
</template>
22+
23+
<script>
24+
import dayjs from 'dayjs'
25+
import mixin from '../widget-mixin'
26+
import { actionsMixin } from '../widget-actions'
27+
import { OhClockCardDefinition } from '@/assets/definitions/widgets/standard/cards'
28+
29+
export default {
30+
data () {
31+
return {
32+
time: '',
33+
date: ''
34+
}
35+
},
36+
mixins: [mixin, actionsMixin],
37+
widget: OhClockCardDefinition,
38+
methods: {
39+
updateTime () {
40+
this.time = dayjs().format(this.config.timeFormat || 'LTS')
41+
this.date = dayjs().format(this.config.dateFormat || 'LL')
42+
}
43+
},
44+
mounted () {
45+
this.updateTime()
46+
this.timer = setInterval(this.updateTime, 1000)
47+
},
48+
beforeDestroy () {
49+
clearInterval(this.timer)
50+
}
51+
}
52+
</script>

0 commit comments

Comments
 (0)