Config param time & datetime: Add support for seconds (#2848)

This allows setting the step size for date and datetime contexts, which
makes the UI display seconds if the step size is 1.

Refs #2847.

Signed-off-by: Florian Hotze <dev@florianhotze.com>

bundles/org.openhab.ui/web/src/components/config/controls/parameter-datetime.vue

@@ -4,6 +4,7 @@
       class="parameter-datetime"
       ref="input"
       type="datetime-local"
+      :step="step"
       :floating-label="$theme.md"
       :label="configDescription.label"
       :name="configDescription.name"
@@ -22,6 +23,12 @@
 <script>
 export default {
   props: ['configDescription', 'value'],
+  computed: {
+    step () {
+      if (this.configDescription.step !== undefined) return this.configDescription.step
+      return 60
+    }
+  },
   methods: {
     updateValue (event) {
       this.$emit('input', event.target.value)

bundles/org.openhab.ui/web/src/components/config/controls/parameter-time.vue

@@ -29,43 +29,67 @@ export default {
     const containerControl = this.$refs.picker
     if (!inputControl || !inputControl.$el || !containerControl) return
     const inputElement = this.$$(inputControl.$el).find('input')
+
+    const cols = [
+      // Hours
+      {
+        values: (function () {
+          let arr = []
+          for (let i = 0; i <= 23; i++) { arr.push(i < 10 ? `0${i}` : i) }
+          return arr
+        })()
+      },
+      // Divider
+      {
+        divider: true,
+        content: ':'
+      },
+      // Minutes
+      {
+        values: (function () {
+          let arr = []
+          for (let i = 0; i <= 59; i++) { arr.push(i < 10 ? `0${i}` : i) }
+          return arr
+        })()
+      }
+    ]
+    if (this.hasSeconds) {
+      cols.push(
+        // Divider
+        {
+          divider: true,
+          content: ':'
+        },
+        // Seconds
+        {
+          values: (() => {
+            let arr = []
+            for (let i = 0; i <= 59; i = i + this.configDescription.step % 60) { arr.push(i < 10 ? `0${i}` : i) }
+            return arr
+          })()
+        })
+    }
+
     this.$nextTick(() => {
       this.picker = this.$f7.picker.create({
         containerEl: containerControl,
         inputEl: inputElement,
         toolbar: false,
         inputReadOnly: false,
         rotateEffect: true,
-        value: (self.value && self.value.indexOf(':') >= 0) ? self.value.split(':') : ['00', '00'],
+        value: (self.value && self.value.indexOf(':') >= 0) ? self.value.split(':') : (self.hasSeconds ? ['00', '00', '00'] : ['00', '00']),
         formatValue: function (values, displayValues) {
+          if (self.hasSeconds) return values[0] + ':' + values[1] + ':' + values[2]
           return values[0] + ':' + values[1]
         },
-        cols: [
-          // Hours
-          {
-            values: (function () {
-              let arr = []
-              for (let i = 0; i <= 23; i++) { arr.push(i < 10 ? `0${i}` : i) }
-              return arr
-            })()
-          },
-          // Divider
-          {
-            divider: true,
-            content: ':'
-          },
-          // Minutes
-          {
-            values: (function () {
-              let arr = []
-              for (let i = 0; i <= 59; i++) { arr.push(i < 10 ? `0${i}` : i) }
-              return arr
-            })()
-          }
-        ],
+        cols,
         on: {
           change: function (picker, values, displayValues) {
-            self.$emit('input', displayValues[0] + ':' + displayValues[1])
+            if (self.hasSeconds) {
+              self.$emit('input', displayValues[0] + ':' + displayValues[1] + ':' + displayValues[2])
+            } else {
+              self.$emit('input', displayValues[0] + ':' + displayValues[1])
+            }
           }
         }
       })
@@ -82,6 +106,11 @@ export default {
       this.picker.setValue(val.split(':'))
     }
   },
+  computed: {
+    hasSeconds () {
+      return this.configDescription.step !== undefined && this.configDescription.step % 60 !== 0
+    }
+  },
   methods: {
     updateValue (event) {
       this.$emit('input', event.target.value)