fixes and adding stateDescription min/max/step

Signed-off-by: Jimmy Tanagra <[email protected]>

Author: jimtng

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

@@ -13,6 +13,8 @@ export default () => [
   pb('validate-on-blur', 'Validate on blur', 'Only validate when focus moves away from input field'),
   pi('item', 'Item', 'Link the input value to the state of this item'),
   pb('useDisplayState', 'Use Display State', 'Use the formatted state as the value for the input control'),
+  pd('min', 'Minimum', 'Minimum allowed value when type set to number'),
+  pd('max', 'Maximum', 'Maximum allowed value when type set to number'),
   pd('step', 'Step', 'Step value when type set to number, any if left empty'),
   pb('showTime', 'Show time', 'Display time when type set to datepicker'),
   pt('defaultValue', 'Default value', 'Default value when not found in item state or variable'),

bundles/org.openhab.ui/web/src/components/widgets/system/oh-input.vue

@@ -56,6 +56,7 @@ export default {
   widget: OhInputDefinition,
   data () {
     return {
+      item: null,
       pendingUpdate: null
     }
   },
@@ -78,17 +79,32 @@ export default {
       } else if (this.config.item) {
         const item = this.context.store[this.config.item]
         if (item.state !== 'NULL' && item.state !== 'UNDEF' && item.state !== 'Invalid Date') {
-          let value = this.config.useDisplayState ? item.displayState || item.state : item.state
-          if (this.unit) {
-            value = value.split(' ')[0]
-          }
-          return value
+          const value = this.config.useDisplayState && item.displayState || item.state
+          return this.config.type === 'number' ? this.extractValue(value) : value
         }
       }
       return this.config.defaultValue
     },
+    // Returns the unit from the item's displayState, state description pattern or the item's unit symbol
     unit () {
-      return this.config.type === 'number' && this.config.item && this.context.store[this.config.item].unit
+      if (this.config.type !== 'number') return null
+      if (!this.item?.unitSymbol) return null
+
+      const storeItem = this.context.store[this.config.item]
+      // When the state of a dimensioned item is UNDEF/NULL, item.displayState is undefined
+      // so we need to pull it out of the item's state description pattern
+      if (this.config.useDisplayState) {
+        const unit = this.extractUnit(storeItem.displayState || this.item.stateDescription?.pattern)
+        return unit === '%unit%' ? this.item.unitSymbol : unit
+      }
+      return this.item.unitSymbol
+    },
+    // Returns the index of the last pattern in the stateDescription
+    // Example: displayState = "Some label %0.1f footext °C", returns 2
+    // Returns -1 if no pattern is found
+    valueIndexInDisplayState () {
+      const parts = this.item?.stateDescription?.pattern?.trim()?.split(/\s+/) || []
+      return parts.findLastIndex(part => part.startsWith('%') && part !== '%unit%' && part !== '%%')
     },
     calendarParams () {
       if (this.config.type !== 'datepicker') return null
@@ -121,6 +137,18 @@ export default {
       }
     }
   },
+  mounted () {
+    if (this.config.item) {
+      this.$oh.api.get(`/rest/items/${this.config.item}?recursive=false`).then((item) => {
+        this.item = item
+        if (this.config.useDisplayState) {
+          this.config.min ||= item.stateDescription?.minimum
+          this.config.max ||= item.stateDescription?.maximum
+          this.config.step ||= item.stateDescription?.step
+        }
+      })
+    }
+  },
   methods: {
     updated (value) {
       if (this.config.type === 'texteditor') {
@@ -174,6 +202,21 @@ export default {
         this.$store.dispatch('sendCommand', { itemName: this.config.item, cmd })
         this.$set(this, 'pendingUpdate', null)
       }
+    },
+    extractUnit (pattern) {
+      if (!pattern) return null
+      return pattern.trim().split(/\s+/).pop()
+    },
+    extractValue (pattern) {
+      if (!pattern) return null
+
+      const parts = pattern.trim().split(/\s+/)
+      switch (parts.length) {
+        case 0: return null
+        case 1: return pattern
+        case 2: return parts[0]
+        default: return parts[this.valueIndexInDisplayState]
+      }
     }
   }
 }