issue #3 | PI+APP: offering config & supporting code to display data from the response

Author: Commit-La-Grenouille

Sources/app.js

@@ -172,39 +172,77 @@ function APIRequest(jsonObj) {
     }
 
     async function updateImage(resp, do_status_poll) {
-        if (!settings.advanced_settings || !settings.response_parse || !settings.image_matched || !settings.image_unmatched)
+        /*
+         * Making sure we run only in one of the 2 relevant cases:
+         *    (1) when asked to parse and match to define the background image
+         *    (2) when asked to parse and display the data from the response on the key
+         */
+
+        // Common / top-level options
+        if (!settings.advanced_settings || (!settings.response_parse && !settings.response_data))
+            return;
+
+        // Case 1 missing config detection
+        if (settings.response_parse && (!settings.image_matched || !settings.image_unmatched))
+            return;
+
+        // Case 2 missing config detection (could be commented if we decide that the background image is optional)
+        if (settings.response_data && !settings.background_image)
             return;
 
         let json, body;
         var new_key_state = key_state;
+        const want_data   = (settings.response_data) ? true : false;
+        const field_name  = (want_data) ? 'data' : 'parse';
 
         const prefix = (do_status_poll && settings.poll_status && settings.poll_status_parse) ? 'poll_status' : 'response';
-        const field  = Utils.getProp(settings, `${prefix}_parse_field`, undefined);
+        const field  = Utils.getProp(settings, `${prefix}_${field_name}_field`, undefined);
         const value  = Utils.getProp(settings, `${prefix}_parse_value`, undefined);
-
-        if (field  !== undefined && value !== undefined) {
-            json = await resp.json();
-            new_key_state = (Utils.getProperty(json, field) == value);
-        } else if (field !== undefined) {
-            json = await resp.json();
-            new_key_state = !(['false', '0', '', 'undefined'].indexOf(String(Utils.getProperty(json, field)).toLowerCase().trim()) + 1);
-        } else if (value !== undefined) {
-            body = await resp.text();
-            new_key_state = body.includes(value);
+        // The value will always be undef in Case 2...
+
+        if (want_data) {
+            if (field !== undefined) {
+                json = await resp.json();
+                new_key_state = Utils.getProperty(json, field);
+            } else {
+                new_key_state = '?????';
+            }
+        } else {
+            if (field  !== undefined && value !== undefined) {
+                json = await resp.json();
+                new_key_state = (Utils.getProperty(json, field) == value);
+            } else if (field !== undefined) {
+                json = await resp.json();
+                new_key_state = !(['false', '0', '', 'undefined'].indexOf(String(Utils.getProperty(json, field)).toLowerCase().trim()) + 1);
+            } else if (value !== undefined) {
+                body = await resp.text();
+                new_key_state = body.includes(value);
+            }
         }
 
         if (new_key_state == key_state) return;
 
         key_state = new_key_state;
 
-        path = key_state
-                    ? settings.image_matched
-                    : settings.image_unmatched;
+        // adapting the background image to the Case we are working for
+        if (want_data) {
+            path = settings.background_image;
+        } else {
+            path = key_state
+                        ? settings.image_matched
+                        : settings.image_unmatched;
+        }
 
         log('updateImage(): FILE:', path, 'JSON:', json, 'BODY:', body);
 
         Utils.loadImage(path, img => $SD.api.setImage(context, img));
 
+        // Defining the text that must be rendered over the image
+        if (want_data) {
+            var name = (settings.response_data_name) ? `${settings.response_data_name}\n\n` : '';
+            $SD.api.setTitle(context, `${name}${new_key_state}`, null);
+        }
+
         return resp;
     }
 

Sources/propertyinspector/index.html

@@ -81,6 +81,41 @@
                 </div>
             </div>
 
+            <div class="sdpi-item">
+                <div style="width: 15px;"></div>
+                <div class="sdpi-item-value">
+                    <div class="sdpi-item-child">
+                        <input id="response_data" type="checkbox">
+                        <label for="response_data" class="sdpi-item-label"><span></span>Button shows data from response</label>
+                    </div>
+                </div>
+            </div>
+            <div id="response_data_container" style="display:none">
+                <details>
+                    <summary>Expand for Response data display instructions</summary>
+                    <p>Specify the JSON path in the API response whose value will show up on the key.</p>
+                    <p>A missing path will only display question marks.</p>
+                    <p>YOU MUST NOT USE THE TITLE OTHERWISE IT WILL HIDE THE DATA RETURNED</p>
+                    <p>(but you can use the title color and size config to adjust the data displayed).</p>
+                </details>
+                <div class="sdpi-item">
+                    <div class="sdpi-item-label">Name</div>
+                    <input class="sdpi-item-value" type="text" id="response_data_name">
+                </div>
+                <div class="sdpi-item">
+                    <div class="sdpi-item-label">JSON Path</div>
+                    <input class="sdpi-item-value" type="text" id="response_data_field">
+                </div>
+                <div class="sdpi-item">Background</div>
+                <div class="sdpi-item">
+                    <div class="sdpi-item-group file" id="matchedfilepickergroup">
+                        <input class="sdpi-item-value" type="file" id="background_image" accept=".jpg, .jpeg, .png, .ico, .gif, .bmp, .tiff">
+                        <label class="sdpi-file-info " for="background_image">No file...</label>
+                        <label class="sdpi-file-label" for="background_image">Choose file...</label>
+                    </div>
+                </div>
+            </div>
+
             <div class="sdpi-item">
                 <div style="width: 15px;"></div>
                 <div class="sdpi-item-value">

Sources/propertyinspector/index_pi.js

@@ -342,6 +342,9 @@ function showHideSettings() {
     d = document.getElementById('request_parameters_container');
     d.style.display = settings.request_parameters ? "" : "none";
 
+    d = document.getElementById('response_data_container');
+    d.style.display = settings.response_data ? "" : "none";
+
     d = document.getElementById('response_parse_container');
     d.style.display = settings.response_parse ? "" : "none";