From 3ce2daedc6bd6fda1c3b101cc0854c5da8c9033d Mon Sep 17 00:00:00 2001
From: "Dmitry P. (d51x)" <dimonich110@gmail.com>
Date: Tue, 10 Oct 2023 14:13:21 +0300
Subject: [PATCH 1/3] [MainUI] thing-picker: add footer with location and icon
 into item

Signed-off-by: Dmitry P. (d51x) <dimonich110@gmail.com>
---
 .../config/controls/thing-picker.vue          | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/components/config/controls/thing-picker.vue b/bundles/org.openhab.ui/web/src/components/config/controls/thing-picker.vue
index e5dde2be5f..eb1bf23bad 100644
--- a/bundles/org.openhab.ui/web/src/components/config/controls/thing-picker.vue
+++ b/bundles/org.openhab.ui/web/src/components/config/controls/thing-picker.vue
@@ -1,7 +1,7 @@
 <template>
   <ul>
     <f7-list-item :title="title || 'Thing'" smart-select :smart-select-params="smartSelectParams" ref="smartSelect" v-if="ready">
-      <select :name="name" :multiple="multiple" @change="select" :required="required">
+      <select :name="name" :multiple="multiple" @change="select" :required="required" >
         <option v-if="!multiple" value="" />
         <option v-for="thing in things" :value="thing.UID" :key="thing.UID" :selected="(multiple) ? value.indexOf(thing.UID) >= 0 : value === thing.UID">
           {{ thing.label ? thing.label + ' (' + thing.UID + ')' : thing.UID }}
@@ -27,7 +27,25 @@ export default {
         searchbar: true,
         searchbarPlaceholder: this.$t('dialogs.search.things'),
         virtualList: true,
-        virtualListHeight: (this.$theme.aurora) ? 32 : undefined
+        virtualListHeight: (this.$theme.aurora) ? 32 : undefined,
+
+        renderItem: (item, index) => {
+          let after = (index > 0) ? this.things[index - 1].location
+            ? this.things[index - 1].location + '<i class="icon f7-icons color-gray" style="width: 16px; height: 16px; font-size: 16px;">placemark</i>'
+            : '' : ''
+          return `
+                <li class="media-item">
+                  <label class="item-${item.radio ? 'radio' : 'checkbox'} item-content">
+                    <input type="${item.radio ? 'radio' : 'checkbox'}" name="${item.inputName}" value="${item.value}" ${item.selected ? 'checked' : ''}>
+                    <i class="icon icon-${item.radio ? 'radio' : 'checkbox'}"></i>
+                    <div class="item-inner">
+                      <div class="text">${item.text}</div>
+                      <div class="item-footer">${after}</div>
+                    </div>
+                  </label>
+                </li>
+              `
+        }
       }
     }
   },

From 5080e1539b86f58512804340996de43669bbd660 Mon Sep 17 00:00:00 2001
From: "Dmitry P. (d51x)" <dimonich110@gmail.com>
Date: Tue, 10 Oct 2023 15:13:13 +0300
Subject: [PATCH 2/3] [MainUI] triggerchannel-picker: add footer with channel
 description

Signed-off-by: Dmitry P. (d51x) <dimonich110@gmail.com>
---
 .../config/controls/triggerchannel-picker.vue | 35 ++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/bundles/org.openhab.ui/web/src/components/config/controls/triggerchannel-picker.vue b/bundles/org.openhab.ui/web/src/components/config/controls/triggerchannel-picker.vue
index b3ec4b52cc..f2c53c867d 100644
--- a/bundles/org.openhab.ui/web/src/components/config/controls/triggerchannel-picker.vue
+++ b/bundles/org.openhab.ui/web/src/components/config/controls/triggerchannel-picker.vue
@@ -27,7 +27,40 @@ export default {
         view: this.$f7.view.main,
         openIn: 'popup',
         searchbar: true,
-        searchbarPlaceholder: 'Search channels'
+        searchbarPlaceholder: 'Search channels',
+        renderItem: (item, index) => {
+          let html, value, thing, channel, description
+          if (index > 0 && !item.isLabel) {
+            value = item.value.substring(0, item.value.lastIndexOf(':'))
+            thing = (index > 0) ? this.things.find((th) => th.UID === value) : ''
+            channel = (thing && thing.triggerChannels.length > 0)
+              ? thing.triggerChannels.find((ch) => ch.uid === item.value) : undefined
+          }
+
+          if (item.isLabel) {
+            html = `
+                      <li class="item-divider">
+                      ${item.groupLabel}
+                      </li>
+                    `
+          } else {
+            description = (channel !== undefined) ? channel.description : ''
+            html = `
+                <li class="media-item">
+                  <label class="item-radio item-content">
+                    <input type="radio" name="${item.inputName}" value="${item.value}" ${item.selected ? 'checked' : ''}>
+                    <i class="icon icon-radio"></i>
+                    <div class="item-inner">
+                      <div class="text">${item.text}</div>
+                      <div class="item-footer">${description}</div>
+                    </div>
+                  </label>
+                </li>
+              `
+          }
+
+          return html
+        }
       }
     }
   },

From 6200146c6b861f3c32663175576d84b01256e304 Mon Sep 17 00:00:00 2001
From: "Dmitry P. (d51x)" <dimonich110@gmail.com>
Date: Tue, 10 Oct 2023 16:01:11 +0300
Subject: [PATCH 3/3] [MainUI] triggerchannel-picker: add footer with channel
 description

Signed-off-by: Dmitry P. (d51x) <dimonich110@gmail.com>
---
 .../web/src/components/config/controls/thing-picker.vue         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/bundles/org.openhab.ui/web/src/components/config/controls/thing-picker.vue b/bundles/org.openhab.ui/web/src/components/config/controls/thing-picker.vue
index eb1bf23bad..eb071589ce 100644
--- a/bundles/org.openhab.ui/web/src/components/config/controls/thing-picker.vue
+++ b/bundles/org.openhab.ui/web/src/components/config/controls/thing-picker.vue
@@ -1,7 +1,7 @@
 <template>
   <ul>
     <f7-list-item :title="title || 'Thing'" smart-select :smart-select-params="smartSelectParams" ref="smartSelect" v-if="ready">
-      <select :name="name" :multiple="multiple" @change="select" :required="required" >
+      <select :name="name" :multiple="multiple" @change="select" :required="required">
         <option v-if="!multiple" value="" />
         <option v-for="thing in things" :value="thing.UID" :key="thing.UID" :selected="(multiple) ? value.indexOf(thing.UID) >= 0 : value === thing.UID">
           {{ thing.label ? thing.label + ' (' + thing.UID + ')' : thing.UID }}