add suggestions for invalid page component

Signed-off-by: Jimmy Tanagra <jcode@tanagra.id.au>

Author: jimtng

bundles/org.openhab.ui/web/src/pages/page-type-mixin.ts

@@ -49,13 +49,23 @@ export function getPageIcon(page?: api.RootUiComponent | DeepReadonly<api.RootUi
   return getPageType(page).icon
 }
 
+/**
+ * Return the list of known page component type keys.
+ */
+export function getPageComponentTypes(): string[] {
+  return Object.keys(pageTypes)
+}
+
 const PageType = {
   methods: {
     getPageType(page: api.RootUiComponent | DeepReadonly<api.RootUiComponent> | null) {
       return getPageType(page)
     },
     getPageIcon(page: api.RootUiComponent | DeepReadonly<api.RootUiComponent> | null) {
       return getPageIcon(page)
+    },
+    getPageComponentTypes() {
+      return getPageComponentTypes()
     }
   }
 }

bundles/org.openhab.ui/web/src/pages/settings/pages/unknown/unknown-edit.vue

@@ -10,6 +10,12 @@
         <b>Page ID:</b> {{ uid || f7route.params.uid }}<br />
         <b>Component:</b> <code class="text-color-red">{{ page.component }}</code>
       </p>
+      <div v-if="suggestions.length">
+        <b>Did you mean:</b>
+        <ul>
+          <li v-for="s in suggestions" :key="s">{{ s }}</li>
+        </ul>
+      </div>
     </f7-block>
 
     <f7-block>
@@ -19,6 +25,8 @@
 </template>
 
 <script>
+import { getPageComponentTypes } from '@/pages/page-type-mixin'
+
 export default {
   props: {
     uid: String,
@@ -27,7 +35,8 @@ export default {
   },
   data() {
     return {
-      page: null
+      page: null,
+      suggestions: []
     }
   },
   methods: {
@@ -38,10 +47,53 @@ export default {
         .get('/rest/ui/components/ui:page/' + uid)
         .then((data) => {
           this.page = data
+          this.computeSuggestions()
         })
         .catch(() => {
           this.page = null
+          this.suggestions = []
         })
+    },
+    computeSuggestions() {
+      if (!this.page || !this.page.component) {
+        this.suggestions = []
+        return
+      }
+      const target = String(this.page.component).toLowerCase()
+      const candidates = getPageComponentTypes()
+      const scored = candidates.map((c) => ({
+        name: c,
+        dist: this.levenshtein(c.toLowerCase(), target)
+      }))
+      scored.sort((a, b) => a.dist - b.dist)
+      // pick top 3 suggestions with reasonable distance
+      const threshold = Math.max(3, Math.floor(target.length / 3))
+      this.suggestions = scored
+        .filter((s) => s.dist <= threshold)
+        .slice(0, 3)
+        .map((s) => s.name)
+    },
+    levenshtein(a, b) {
+      const al = a.length
+      const bl = b.length
+      if (al === 0) return bl
+      if (bl === 0) return al
+      const prev = new Array(bl + 1)
+      for (let j = 0; j <= bl; j++) prev[j] = j
+      for (let i = 1; i <= al; i++) {
+        let cur = new Array(bl + 1)
+        cur[0] = i
+        for (let j = 1; j <= bl; j++) {
+          const cost = a[i - 1] === b[j - 1] ? 0 : 1
+          cur[j] = Math.min(
+            prev[j] + 1, // deletion
+            cur[j - 1] + 1, // insertion
+            prev[j - 1] + cost // substitution
+          )
+        }
+        for (let j = 0; j <= bl; j++) prev[j] = cur[j]
+      }
+      return prev[bl]
     }
   }
 }