Add dialog to inbox that shows thing file template

Signed-off-by: Arne Seime <arne.seime@gmail.com>

bundles/org.openhab.ui/web/src/css/app.styl

@@ -297,6 +297,9 @@ html
 .sitemap-validation-dialog
   --f7-dialog-width 80%
 
+.thing-file-configuration-dialog
+  --f7-dialog-width 80%
+
 // Align smart-select item with f7-list-input fields
 @media (min-width 1024px)
   .aligned-smart-select

bundles/org.openhab.ui/web/src/pages/settings/things/inbox/inbox-list.vue

@@ -290,6 +290,28 @@ export default {
                   entry.thingUID.substring(entry.thingUID.lastIndexOf(':') + 1))
               }
             },
+            {
+              text: 'Show equivalent Thing file configuration (basic properties)',
+              color: 'blue',
+              bold: true,
+              onClick: () => {
+                let properties = Object.entries(entry.properties).map(([k, v]) => `${k}="${v}"`)
+                let explanatoryText = 'NOTE: If this is a bridge, substitute <code>Thing</code> with <code>Bridge</code>' +
+                  '<p>All properties are show here, but you may not want to include them all in the file configuraiton. Refer to binding docs for this particular binding for more details.</p>'
+                let content = `<p><code>Thing ${entry.thingUID} "${entry.label}" [ ${properties} ]</code></p>`
+                this.$f7.dialog.create({
+                  title: 'Equivalent Thing file configuration',
+                  text: explanatoryText + content,
+                  cssClass: 'thing-file-configuration-dialog',
+                  buttons: [
+                    {
+                      text: 'Close',
+                      color: 'orange'
+                    }
+                  ]
+                }).open()
+              }
+            },
             {
               text: (!ignored) ? 'Ignore' : 'Unignore',
               color: (!ignored) ? 'orange' : 'blue',