add autocomplete support for mixer nodes

MysteryCode · Nov 28, 2024 · 8771a16 · 8771a16
1 parent 649a966
commit 8771a16
Show file tree

Hide file tree

Showing 6 changed files with 158 additions and 7 deletions.
diff --git a/dist/nodes/qsys-config/qsys-config.js b/dist/nodes/qsys-config/qsys-config.js
@@ -293,6 +293,12 @@ class NodeHandler {
             this.statusCallbacks.delete(nodeId);
         }
     }
+    async getComponentList() {
+        return await this.send({
+            method: "Component.GetComponents",
+            params: undefined,
+        });
+    }
 }
 exports.default = (RED) => {
     RED.nodes.registerType("qsys-config", function (config) {
@@ -308,4 +314,26 @@ exports.default = (RED) => {
             },
         },
     });
+    RED.httpAdmin.get("/qsys/:id/components", RED.auth.needsPermission("qsys-config.components"), (req, res) => {
+        const nodeId = req.params.id;
+        const node = RED.nodes.getNode(nodeId);
+        if (!node) {
+            res.sendStatus(404);
+            return;
+        }
+        node.nodeHandler
+            .getComponentList()
+            .then((response) => {
+            res
+                .setHeader("Content-Type", "application/json")
+                .status(200)
+                .send(JSON.stringify(response.result, null, 2));
+        })
+            .catch((err) => {
+            res
+                .setHeader("Content-Type", "application/json")
+                .status(503)
+                .send(JSON.stringify(err, null, 2));
+        });
+    });
 };
diff --git a/dist/nodes/qsys-mixer/qsys-mixer.html b/dist/nodes/qsys-mixer/qsys-mixer.html
@@ -161,6 +161,34 @@
             };
             methodField.addEventListener("change", methodChangeCallback);
             methodChangeCallback();
+            // @ts-expect-error using a node red function overlayed over jQuery - mind the big C!
+            $("#node-input-codename").autoComplete({
+                search: (value, done) => {
+                    if (!this.core) {
+                        return;
+                    }
+                    return $.ajax({
+                        url: `qsys/${this.core}/components`,
+                        method: "GET",
+                    }).done((response) => {
+                        const matches = [];
+                        response.forEach((component) => {
+                            const i = component.Name.toLowerCase().indexOf(value.toLowerCase());
+                            if (i > -1 && component.Type === "mixer") {
+                                matches.push({
+                                    value: component.Name,
+                                    label: component.Name,
+                                    i: i,
+                                });
+                            }
+                        });
+                        matches.sort((a, b) => {
+                            return a.i - b.i;
+                        });
+                        done(matches);
+                    });
+                },
+            });
         },
     });
 </script>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,7 +17,8 @@
     "node-red": "^4.0.5",
     "prettier": "^3.3.3",
     "tslib": "^2.8.1",
-    "typescript": "^5.6.3"
+    "typescript": "^5.6.3",
+    "@types/jqueryui": "^1.12.23"
   },
   "scripts": {
     "prettier:fix": "prettier --ignore-path .eslintignore --write '**/*.{js,ts,md}'",

diff --git a/src/nodes/qsys-config/qsys-config.ts b/src/nodes/qsys-config/qsys-config.ts
@@ -57,6 +57,15 @@ export interface QsysResponseChangeGroupPoll extends QsysResponse {
   };
 }
 
+export interface QSysResponseComonentsItem {
+  ControlSource: number;
+  Controls: null | Array<unknown>;
+  ID: string;
+  Name: string;
+  Properties: Array<unknown>;
+  Type: string;
+}
+
 export interface Config extends NodeDef {
   host: string;
   authentication: 0 | 1 | undefined;
@@ -452,6 +461,13 @@ class NodeHandler {
       this.statusCallbacks.delete(nodeId);
     }
   }
+
+  public async getComponentList() {
+    return await this.send({
+      method: "Component.GetComponents",
+      params: undefined,
+    });
+  }
 }
 
 export default (RED: NodeAPI): void => {
@@ -473,4 +489,30 @@ export default (RED: NodeAPI): void => {
       },
     },
   );
+
+  RED.httpAdmin.get("/qsys/:id/components", RED.auth.needsPermission("qsys-config.components"), (req, res) => {
+    const nodeId = req.params.id;
+    const node = RED.nodes.getNode(nodeId) as QsysConfigNode<Config> | undefined;
+
+    if (!node) {
+      res.sendStatus(404);
+
+      return;
+    }
+
+    node.nodeHandler
+      .getComponentList()
+      .then((response) => {
+        res
+          .setHeader("Content-Type", "application/json")
+          .status(200)
+          .send(JSON.stringify(response.result, null, 2));
+      })
+      .catch((err) => {
+        res
+          .setHeader("Content-Type", "application/json")
+          .status(503)
+          .send(JSON.stringify(err, null, 2));
+      });
+  });
 };
diff --git a/src/nodes/qsys-mixer/init.ts b/src/nodes/qsys-mixer/init.ts
@@ -1,5 +1,6 @@
 import { EditorNodeDef, EditorNodeProperties, EditorRED } from "node-red";
 import { MixerControlMethod } from "./qsys-mixer";
+import { QSysResponseComonentsItem } from "../qsys-config/qsys-config";
 
 declare const RED: EditorRED;
 
@@ -10,8 +11,15 @@ interface Defaults extends EditorNodeProperties {
   outs: number[] | "*" | undefined;
   cues: number[] | "*" | undefined;
   ramp: number | undefined;
+  core: string;
 }
 
+type AutoCompleteResult = {
+  value: string;
+  label: string;
+  i: number;
+};
+
 RED.nodes.registerType("qsys-mixer", {
   category: "Q-SYS",
   paletteLabel: "Q-SYS Mixer",
@@ -74,5 +82,38 @@ RED.nodes.registerType("qsys-mixer", {
 
     methodField.addEventListener("change", methodChangeCallback);
     methodChangeCallback();
+
+    // @ts-expect-error using a node red function overlayed over jQuery - mind the big C!
+    $("#node-input-codename").autoComplete({
+      search: (value: string, done: (matches: AutoCompleteResult[]) => void) => {
+        if (!this.core) {
+          return;
+        }
+
+        return $.ajax({
+          url: `qsys/${this.core}/components`,
+          method: "GET",
+        }).done((response: QSysResponseComonentsItem[]) => {
+          const matches: AutoCompleteResult[] = [];
+
+          response.forEach((component) => {
+            const i = component.Name.toLowerCase().indexOf(value.toLowerCase());
+            if (i > -1 && component.Type === "mixer") {
+              matches.push({
+                value: component.Name,
+                label: component.Name,
+                i: i,
+              });
+            }
+          });
+
+          matches.sort((a, b) => {
+            return a.i - b.i;
+          });
+
+          done(matches);
+        });
+      },
+    });
   },
 } as EditorNodeDef<Defaults>);