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]>

Author: hubsif

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

@@ -125,3 +125,10 @@ export const OhWebFrameCardDefinition = () => new WidgetDefinition('oh-webframe-
     pb('borders', 'Borders', 'Show borders around the frame')
   ])
   .paramGroup(pg('webframe', 'Web Frame'), WebFrameParameters())
+
+// OhClockCard
+import ClockParameters from '../system/clock'
+export const OhClockCardDefinition = () => new WidgetDefinition('oh-clock-card', 'Digital Clock Card', 'Display a digital clock in a card')
+  .paramGroup(CardParameterGroup(), CardParameters())
+  .paramGroup(pg('clock', 'Clock'), ClockParameters())
+  .paramGroup(actionGroup(null, 'Action to perform when the clock is clicked'), actionParams())

bundles/org.openhab.ui/web/src/assets/definitions/widgets/system/clock.js

@@ -0,0 +1,34 @@
+import { pb, pt } from '../helpers'
+
+export default () => [
+  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([
+    { value: 'LTS', label: 'Localized time including seconds (\'LTS\', e.g. \'8:02:18 PM\')' },
+    { value: 'LT', label: 'Localized time (\'LT\'. e.g. \'8:02 PM\')' },
+    { value: 'HH:mm:ss', label: 'Current time (\'HH:mm:ss\')' }
+  ], false),
+  pt('background', 'Background style', 'Background style (in CSS "background" attribute format)'),
+  pt('timeFontSize', 'Time Font Size', 'Time font size (e.g. "34px")'),
+  pt('timeFontWeight', 'Time Font Weight', 'Time font weight (e.g. "normal" or "bold")'),
+  pb('showDate', 'Show the date', 'Show the current date in addition to the time'),
+  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([
+    { value: 'LL', label: 'Localized long date (\'LL\', e.g. \'August 16, 2018\')' },
+    { value: 'L', label: 'Localized short date (\'L\', e.g. \'08/16/2018\')' },
+    { value: 'MM/DD/YYYY', label: 'Current date (\'MM/DD/YYYY\')' }
+  ], false).v((value, configuration, configDescription, parameters) => {
+    return configuration.showDate === true
+  }),
+  pt('datePos', 'Date Position', 'Where to show the date').o([
+    { value: 'above', label: 'Above time' },
+    { value: 'below', label: 'Below time' }
+  ]).v((value, configuration, configDescription, parameters) => {
+    return configuration.showDate === true
+  }),
+  pt('dateFontSize', 'Date Font Size', 'Date font size (e.g. "34px")')
+    .v((value, configuration, configDescription, parameters) => {
+      return configuration.showDate === true
+    }),
+  pt('dateFontWeight', 'Date Font Weight', 'Date font weight (e.g. "normal" or "bold")')
+    .v((value, configuration, configDescription, parameters) => {
+      return configuration.showDate === true
+    })
+]

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

@@ -15,3 +15,4 @@ export { default as OhPlayerCard } from './oh-player-card.vue'
 export { default as OhSwiperCard } from './oh-swiper-card.vue'
 export { default as OhListCard } from './oh-list-card.vue'
 export { default as OhWebframeCard } from './oh-webframe-card.vue'
+export { default as OhClockCard } from './oh-clock-card.vue'

bundles/org.openhab.ui/web/src/components/widgets/standard/oh-clock-card.vue

@@ -0,0 +1,52 @@
+<template>
+  <f7-card :no-border="config.noBorder" :no-shadow="config.noShadow" :outline="config.outline" :style="{ background: config.background }">
+    <f7-card-header v-if="config.title">
+      <div>{{config.title}}</div>
+    </f7-card-header>
+    <f7-card-content @click.native="performAction" class="clock-card-content text-align-center">
+      <f7-row v-if="config.showDate && config.datePos !== 'below'">
+        <f7-col :style="{ 'font-size': config.dateFontSize || '1vw', 'font-weight': config.dateFontWeight || 'normal' }" v-text="date"></f7-col>
+      </f7-row>
+      <f7-row>
+        <f7-col :style="{ 'font-size': config.timeFontSize || '2vw', 'font-weight': config.timeFontWeight || 'normal' }" v-text="time"></f7-col>
+      </f7-row>
+      <f7-row v-if="config.showDate && config.datePos === 'below'">
+        <f7-col :style="{ 'font-size': config.dateFontSize || '1vw', 'font-weight': config.dateFontWeight || 'normal' }" v-text="date"></f7-col>
+      </f7-row>
+    </f7-card-content>
+    <f7-card-footer v-if="config.footer">
+      {{config.footer}}
+    </f7-card-footer>
+  </f7-card>
+</template>
+
+<script>
+import dayjs from 'dayjs'
+import mixin from '../widget-mixin'
+import { actionsMixin } from '../widget-actions'
+import { OhClockCardDefinition } from '@/assets/definitions/widgets/standard/cards'
+
+export default {
+  data () {
+    return {
+      time: '',
+      date: ''
+    }
+  },
+  mixins: [mixin, actionsMixin],
+  widget: OhClockCardDefinition,
+  methods: {
+    updateTime () {
+      this.time = dayjs().format(this.config.timeFormat || 'LTS')
+      this.date = dayjs().format(this.config.dateFormat || 'LL')
+    }
+  },
+  mounted () {
+    this.updateTime()
+    this.timer = setInterval(this.updateTime, 1000)
+  },
+  beforeDestroy () {
+    clearInterval(this.timer)
+  }
+}
+</script>