Thing add page: Add support for optional scan input (#2771)

Refs openhab/openhab-core#4389.

Signed-off-by: Florian Hotze <[email protected]>

bundles/org.openhab.ui/web/src/pages/settings/things/add/choose-thing-type.vue

@@ -22,7 +22,11 @@
             </f7-button>
           </div>
         </div>
-        <p class="margin-left margin-right" style="height: 30px" id="scan-progress" />
+        <p class="margin-left margin-right no-margin-bottom" style="height: 30px" id="scan-progress" />
+        <f7-block-title v-if="inputSupported" style="margin-bottom: calc(var(--f7-block-title-margin-bottom) - var(--f7-list-margin-vertical))">
+          Scan Input
+        </f7-block-title>
+        <config-sheet v-if="inputSupported" :parameter-groups="[]" :parameters="inputParameters" :configuration="inputConfig" />
         <f7-block-title v-if="discoverySupported && scanResults.length">
           Discovered Things
         </f7-block-title>
@@ -74,7 +78,10 @@
 </template>
 
 <script>
+import ConfigSheet from '@/components/config/config-sheet.vue'
+
 export default {
+  components: { ConfigSheet },
   props: ['bindingId'],
   data () {
     return {
@@ -83,6 +90,9 @@ export default {
       initSearchbar: false,
       thingTypes: [],
       discoverySupported: false,
+      inputSupported: null,
+      inputParameters: [],
+      inputConfig: {},
       scanning: false,
       scanResults: [],
       scanTimeout: 0,
@@ -102,23 +112,18 @@ export default {
       }
     },
     onPageAfterIn () {
-      this.loading = true
       this.$oh.api.get('/rest/thing-types?bindingId=' + this.bindingId).then((data) => {
         this.thingTypes = data.filter((tt) => tt.UID.split(':')[0] === this.bindingId && tt.listed)
           .sort((a, b) => {
             if (a.bridge && !b.bridge) return -1
             if (b.bridge && !a.bridge) return 1
             return a.label.localeCompare(b.label)
           })
-        this.loading = false
-        this.initSearchbar = true
-        this.ready = true
-        this.loadInbox()
-        this.$oh.api.get('/rest/discovery').then((data) => {
-          if (data.indexOf(this.bindingId) >= 0) {
-            this.discoverySupported = true
-            // this.scan()
-          }
+        return Promise.resolve()
+      }).then(() => {
+        Promise.all([this.loadDiscoveryInfo(), this.loadInbox()]).then(() => {
+          this.initSearchbar = true
+          this.ready = true
         })
       })
     },
@@ -137,7 +142,8 @@ export default {
         return
       }
       this.scanning = true
-      this.$oh.api.postPlain('/rest/discovery/bindings/' + this.bindingId + '/scan', null, 'text/plain', 'text/plain').then((data) => {
+      const query = this.inputConfig.input ? `?input=${encodeURIComponent(this.inputConfig.input)}` : ''
+      this.$oh.api.postPlain(`/rest/discovery/bindings/${this.bindingId}/scan${query}`, null, 'text/plain', 'text/plain').then((data) => {
         try {
           this.scanTimeout = parseInt(data)
           this.scanProgress = 0
@@ -153,20 +159,62 @@ export default {
         }
       })
     },
+    /**
+     * Load discovery information for the binding.
+     *
+     * @returns {Promise<void>}
+     */
+    loadDiscoveryInfo () {
+      return this.$oh.api.get(`/rest/discovery/bindings/${this.bindingId}/info`).then((data) => {
+        this.discoverySupported = true
+        this.inputSupported = data.inputSupported
+        if (this.inputSupported) {
+          this.inputParameters = [
+            {
+              advanced: false,
+              description: data.inputDescription,
+              label: data.inputLabel,
+              name: 'input',
+              required: false,
+              type: 'TEXT'
+            }
+          ]
+        }
+        return Promise.resolve()
+      }).catch((e) => {
+        if (e === 404 || e === 'Not Found') {
+          this.discoverySupported = false
+          return Promise.resolve()
+        } else {
+          return Promise.reject(e)
+        }
+      })
+    },
+    /**
+     * Load discovery inbox entries for the binding.
+     *
+     * @returns {Promise<void>}
+     */
     loadInbox () {
       if (this.loading) return
       this.loading = true
-      this.$oh.api.get('/rest/inbox?includeIgnored=false').then((data) => {
+      return this.$oh.api.get('/rest/inbox?includeIgnored=false').then((data) => {
         this.loading = false
         this.scanResults = data.filter((e) => e.thingTypeUID.split(':')[0] === this.bindingId)
-        const searchbar = this.$refs.searchbar.$el.f7Searchbar
-        const filterQuery = searchbar.query
+        const filterQuery = this.$refs.searchbar?.f7Searchbar.query
         this.initSearchbar = false
         this.$nextTick(() => {
           this.initSearchbar = true
-          searchbar.clear()
-          searchbar.search(filterQuery)
+          if (!filterQuery) return
+          this.$nextTick(() => {
+            const searchbar = this.$refs.searchbar?.f7Searchbar
+            searchbar.clear()
+            searchbar.search(filterQuery)
+          })
         })
+        Promise.resolve()
+      }).catch((e) => {
+        Promise.reject('Failed to load inbox: ' + e)
       })
     },
     approve (entry) {
@@ -224,6 +272,3 @@ export default {
   }
 }
 </script>
-
-<style>
-</style>