Feat: improve lists for script dialogs

jcorporation · Jun 16, 2024 · 1492aec · 1492aec
1 parent a64f809
commit 1492aec
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 16 deletions.
diff --git a/docs/scripting/functions/mympd_dialog.md b/docs/scripting/functions/mympd_dialog.md
@@ -9,13 +9,73 @@ Returns an Jsonrpc response for a script dialog.
 ```lua
 local title = "Script title"
 local data = {
-  { name = "testinput", type = "text", value = "testvalue" },
-  { name = "testpassword", type = "password", value = "" },
-  { name = "action", type = "hidden", value = "test" },
-  { name = "testcheckbox", type = "checkbox", value = false },
-  { name = "testradio", type = "radio", value = { "radio1", "radio2" }, displayValue = { "Radio 1", "Radio 2" }, defaultValue = "radio2" },
-  { name = "testselect", type = "select", value = { "option1", "option2" }, defaultValue = "option1" },
-  { name = "testlist", type = "list", value = { "val1", "val2", "val3" }, defaultValue = "" }
+  {
+    name = "testinput",
+    type = "text",
+    value = "testvalue"
+  },
+  {
+    name = "testpassword",
+    type = "password",
+    value = ""
+  },
+  {
+    name = "action",
+    type = "hidden",
+    value = "test"
+  },
+  {
+    name = "testcheckbox",
+    type = "checkbox",
+    value = false
+  },
+  {
+    name = "testradio",
+    type = "radio",
+    value = {
+      "radio1",
+      "radio2"
+    },
+    displayValue = {
+      "Radio 1",
+      "Radio 2"
+    },
+    defaultValue = "radio2"
+  },
+  {
+    name = "testselect",
+    type = "select",
+    value = {
+      "option1",
+      "option2"
+    },
+    ,
+    displayValue = {
+      "Option1 1",
+      "Option 2"
+    },
+    defaultValue = "option1"
+  },
+  {
+    name = "testlist",
+    type = "list",
+    value = {
+      "val1",
+      "val2"
+    },
+    displayValue = {
+      {
+        title = "Title 1",
+        text = "Text 1",
+        small = "Hint 1"
+      },
+      {
+        title = "Title 2",
+        text = "Text 2",
+        small = "Hint 2"
+      }
+    }
+  }
 }
 local callback = "testscript"
 return mympd.dialog(title, data, callback)
@@ -41,7 +101,7 @@ A Jsonrpc string with method `script_dialog`.
 | name | Name of the form element. |
 | type | Type of the form element. |
 | value | The value(s) of the form element. |
-| displayValue | The display values of the form element, only valid for `select`, `radio` and `list`. |
+| displayValue | The display values of the form element, it is optional and only valid for `select`, `radio` and `list`. |
 | defaultValue | The defaultValue of the form element. |
 {: .table .table-sm }
 

diff --git a/htdocs/css/mympd.css b/htdocs/css/mympd.css
@@ -87,7 +87,7 @@ body.mobile > footer > nav {
   color: var(--mympd-highlightcolor-contrast) !important;
 }
 
-li.active > button,
+li.active button,
 button.active,
 .btn-success,
 .btn-success:focus,

diff --git a/htdocs/js/modalScriptExec.js b/htdocs/js/modalScriptExec.js
@@ -170,13 +170,26 @@ function createScriptDialogEl(data) {
         case 'list': {
             const rows = [];
             for (let i = 0; i < data.value.length; i++) {
-                const title = data.displayValue && data.displayValue[i]
-                    ? data.displayValue[i]
+                const title = data.displayValue && data.displayValue[i].title
+                    ? data.displayValue[i].title
                     : data.value[i];
+                const lines = [];
+                let hasDesc = false;
+                if (data.displayValue && data.displayValue[i].text) {
+                    lines.push(elCreateText('p', {"class": ["mb-1"]}, data.displayValue[i].text));
+                    hasDesc = true;
+                }
+                if (data.displayValue && data.displayValue[i].small) {
+                    lines.push(elCreateText('small', {}, data.displayValue[i].small));
+                    hasDesc = true;
+                }
                 rows.push(
-                    elCreateNodes('li', {"data-value": data.value[i], "class": ["list-group-item", "d-flex", "justify-content-between", "align-items-start", "clickable"]}, [
-                        elCreateText('span', {}, title),
-                        pEl.selectBtn.cloneNode(true)
+                    elCreateNodes('li', {"data-value": data.value[i], "class": ["list-group-item", "clickable"]}, [
+                        elCreateNodes('div', {"class": ["d-flex", "justify-content-between", "align-items-start"]}, [
+                            elCreateText((hasDesc === true ? 'h5' : 'p'), {"class": ["mb-1"]}, title),
+                            pEl.selectBtn.cloneNode(true),
+                        ]),
+                        ... lines
                     ])
                 );
             }
@@ -189,11 +202,11 @@ function createScriptDialogEl(data) {
                 const active = target.classList.contains('active');
                 if (active === false) {
                     target.classList.add('active');
-                    target.lastChild.textContent = ligatures.checked;
+                    target.querySelector('button').textContent = ligatures.checked;
                 }
                 else {
                     target.classList.remove('active');
-                    target.lastChild.textContent = ligatures.unchecked;
+                    target.querySelector('button').textContent = ligatures.unchecked;
                 }
             }, false);
             return lg;