Improve rendering logic of action outputs

Signed-off-by: Florian Hotze <dev@florianhotze.com>
openhab · Oct 22, 2024 · 5239dbc · 5239dbc
1 parent ad14417
commit 5239dbc
Showing 1 changed file with 19 additions and 10 deletions.
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/things/thing-action-popup.vue b/bundles/org.openhab.ui/web/src/pages/settings/things/thing-action-popup.vue
@@ -50,16 +50,25 @@
           </div>
           <div v-else>
             <f7-list>
-              <f7-list-item v-if="actionOutput.result" :floating-label="$theme.md" title="Result">
-                {{ actionOutput.result }}
-              </f7-list-item>
-              <f7-list-item v-if="actionOutput.qrPairingCode" :floating-label="$theme.md" title="QR Pairing Code">
-                <vue-qrcode :value="actionOutput.qrPairingCode" />
-              </f7-list-item>
-              <f7-list-item v-if="actionOutput.manualPairingCode" :floating-label="$theme.md" title="Manual Pairing Code">
-                {{ actionOutput.manualPairingCode }}
-              </f7-list-item>
-              <f7-list-item accordion-item title="Raw Response">
+              <template v-for="key of Object.keys(actionOutput)">
+                <!-- Render result as a list item, works without action output definition from REST -->
+                <f7-list-item v-if="key === 'result'" :key="key" :floating-label="$theme.md" title="Result">
+                  {{ actionOutput[key] }}
+                </f7-list-item>
+                <!-- Render QR code if the key is qrCode -->
+                <f7-list-item v-else-if="key === 'qrCode'" :key="key" :floating-label="$theme.md" title="QR Code">
+                  <vue-qrcode :value="actionOutput[key]" />
+                </f7-list-item>
+                <!-- Render QR code if the action output type is qrCode in the action output definition from REST -->
+                <f7-list-item v-else-if="action.outputs.find(o => o.name === key)?.type === 'qrCode'" :key="key" :floating-label="$theme.md" :title="action.outputs.find(o => o.name === key).label">
+                  <vue-qrcode :value="actionOutput[key]" />
+                </f7-list-item>
+                <!-- Render other keys as list items with the label defined by the action output definition from REST or the key as label -->
+                <f7-list-item v-else :key="key" :floating-label="$theme.md" :title="action.outputs.find(o => o.name === key)?.label || key">
+                  {{ actionOutput[key] }}
+                </f7-list-item>
+              </template>
+              <f7-list-item accordion-item title="Raw Output Value">
                 <f7-accordion-content class="thing-type-description">
                   <div class="margin">
                     <code> {{ actionOutput }} </code>