@machhub-dev/node-red-nodes 1.0.5

package/dist/nodes/collections.html

@@ -0,0 +1,508 @@
+<script type="text/javascript">
+  RED.nodes.registerType('machhub.collection', {
+    category: 'MACHHUB',
+    color: '#c777f1',
+    defaults: {
+      name: { value: "" },
+      useConfigNode: { value: false },
+      machhub: { value: "", type: "machhub-config" },
+      collectionID: { value: "" },
+      action: { value: "select" },
+      selectFields: { value: [] },
+      filters: { value: [] }
+    },
+    paletteLabel: "Collection",
+    inputs: 1,
+    outputs: 1,
+    icon: "font-awesome/fa-database",
+    label: function () {
+      return this.name ? "[Collection] " + this.name : "Collection";
+    },
+
+    oneditprepare: function () {
+      const node = this;
+      const $machhub = $("#node-input-machhub");
+      const $useConfigNode = $("#node-input-useConfigNode");
+      const $configRow = $("#config-node-row");
+      const $action = $("#node-input-action");
+      const $collectionID = $("#node-input-collection");
+
+      // Toggle config node visibility
+      function toggleConfigNode() {
+        if ($useConfigNode.is(":checked")) {
+          $configRow.show();
+        } else {
+          $configRow.hide();
+        }
+      }
+
+      // Toggle action-specific UI
+      function toggleActionUI() {
+        const action = $action.val();
+        $(".action-section").hide();
+        $("#action-" + action).show();
+
+        // Fetch example when switching to actions that can show examples
+        // (create, select, update)
+        if (["create", "select", "update"].includes(action)) {
+          const selectedCollectionID = $collectionID.val();
+          if (selectedCollectionID) {
+            fetchCollectionExample(selectedCollectionID);
+          }
+        }
+      }
+
+      // Initialize visibility
+      toggleConfigNode();
+      toggleActionUI();
+
+      // Handle checkbox change
+      $useConfigNode.on("change", function() {
+        toggleConfigNode();
+        fetchCollections(); // Refetch collections when config source changes
+      });
+      
+      $action.on("change", toggleActionUI);
+
+      // Handle collection selection change to fetch example
+      $collectionID.on("change", async function() {
+        const selectedCollectionID = $(this).val();
+        console.log(selectedCollectionID + " Selected");
+        // Show examples for create, select and update actions
+        const currentAction = $action.val();
+        if (selectedCollectionID && ["create", "select", "update"].includes(currentAction)) {
+          await fetchCollectionExample(selectedCollectionID);
+        }
+      });
+
+      // Get all MACHHUB config nodes from editor registry
+      const machhubNodes = [];
+      RED.nodes.eachConfig(function (n) {
+        if (n.type === "machhub-config") {
+          machhubNodes.push(n);
+        }
+      });
+
+      // Auto-select the first MACHHUB config node if none is selected
+      if (!node.machhub && machhubNodes.length > 0) {
+        node.machhub = machhubNodes[0].id;
+        $machhub.val(node.machhub);
+      } else {
+        $machhub.val(node.machhub);
+      }
+
+      // Fetch collections from server
+      async function fetchCollections() {
+        try {
+          const useConfigNode = $useConfigNode.is(":checked");
+          let url = "/collections";
+          
+          if (useConfigNode) {
+            // Get the selected machhub config
+            const machhubConfigId = $machhub.val();
+            let configData = {};
+            
+            if (machhubConfigId) {
+              const configNode = RED.nodes.node(machhubConfigId);
+              if (configNode) {
+                configData = {
+                  host: configNode.host || "127.0.0.1",
+                  httpPort: configNode.httpPort || 6188,
+                  clientId: configNode.clientId || "",
+                  clientSecret: configNode.clientSecret || "",
+                  useConfigNode: "true"
+                };
+              }
+            } else if (machhubNodes.length > 0) {
+              // Use first available config
+              const configNode = machhubNodes[0];
+              configData = {
+                host: configNode.host || "127.0.0.1",
+                httpPort: configNode.httpPort || 6188,
+                clientId: configNode.clientId || "",
+                clientSecret: configNode.clientSecret || "",
+                useConfigNode: "true"
+              };
+            }
+
+            // Build query string
+            const queryParams = new URLSearchParams(configData).toString();
+            url = `/collections${queryParams ? '?' + queryParams : ''}`;
+          } else {
+            // Use machhub.env.json - no query params needed
+            url = "/collections?useConfigNode=false";
+          }
+          
+          const res = await fetch(url);
+          
+          // Check if response is ok (status 200-299)
+          if (!res.ok) {
+            // Try to get error message from response body
+            let errorMessage;
+            try {
+              const errorData = await res.json();
+              errorMessage = errorData.message || errorData.error || `HTTP ${res.status}: ${res.statusText}`;
+            } catch (e) {
+              errorMessage = await res.text() || `HTTP ${res.status}: ${res.statusText}`;
+            }
+            throw new Error(`Failed to fetch collections: ${errorMessage}`);
+          }
+
+          const collections = await res.json();
+
+          // Populate dropdown
+          $collectionID.empty();
+          $collectionID.append('<option value="">Select collection</option>');
+          
+          if (collections && collections.length > 0) {
+            collections.forEach(col => {
+              // Handle the ID structure properly
+              let colId;
+              if (typeof col.id === 'string') {
+                colId = col.id;
+              } else if (col.id && col.id.Table && col.id.ID) {
+                // Structure: { Table: "collections", ID: "3pc9frwlk27uv6tmzh21" }
+                colId = col.id.Table + ':' + col.id.ID;
+              } else {
+                console.warn("Unknown collection ID format:", col.id);
+                colId = col.name || 'unknown';
+              }
+              
+              const colName = col.name || colId;
+              $collectionID.append(`<option value="${colId}">${colName}</option>`);
+            });
+            
+            // Set the previously selected value
+            if (node.collectionID) {
+              $collectionID.val(node.collectionID);
+              // If the current action supports examples, fetch example now so
+              // the editor shows the correct example on initial open.
+              const currentAction = $action.val();
+              if (["create", "select", "update"].includes(currentAction)) {
+                // defer to allow the select to render
+                setTimeout(function() {
+                  fetchCollectionExample(node.collectionID);
+                }, 0);
+              }
+            }
+          }
+          
+        } catch (err) {
+          console.error("Error fetching collections:", err);
+          // Show only the currently selected collection as an option if it exists
+          if (node.collectionID) {
+            $collectionID.html(`<option value="${node.collectionID}">${node.collectionID}</option>`);
+          }
+        }
+      }
+
+      fetchCollections();
+
+      // Fetch collection example from server
+      async function fetchCollectionExample(collectionID) {
+        try {
+          const useConfigNode = $useConfigNode.is(":checked");
+          let url = "/collections/example";
+          
+          const requestBody = {
+            collectionID: collectionID
+          };
+
+          if (useConfigNode) {
+            // Get the selected machhub config
+            const machhubConfigId = $machhub.val();
+            
+            if (machhubConfigId) {
+              const configNode = RED.nodes.node(machhubConfigId);
+              if (configNode) {
+                requestBody.host = configNode.host || "127.0.0.1";
+                requestBody.httpPort = configNode.httpPort || 6188;
+                requestBody.clientId = configNode.credentials?.clientId || "";
+                requestBody.clientSecret = configNode.credentials?.clientSecret || "";
+              }
+            } else if (machhubNodes.length > 0) {
+              // Use first available config
+              const configNode = machhubNodes[0];
+              requestBody.host = configNode.host || "127.0.0.1";
+              requestBody.httpPort = configNode.httpPort || 6188;
+              requestBody.clientId = configNode.credentials?.clientId || "";
+              requestBody.clientSecret = configNode.credentials?.clientSecret || "";
+            }
+          }
+          
+          const res = await fetch(url, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(requestBody)
+          });
+          
+          if (!res.ok) {
+            let errorMessage;
+            try {
+              const errorData = await res.json();
+              errorMessage = errorData.message || errorData.error || `HTTP ${res.status}: ${res.statusText}`;
+            } catch (e) {
+              errorMessage = await res.text() || `HTTP ${res.status}: ${res.statusText}`;
+            }
+            throw new Error(`Failed to fetch collection example: ${errorMessage}`);
+          }
+
+          const exampleData = await res.json();
+          
+          // Update the appropriate action UI with the example based on current action
+          const currentAction = $action.val();
+          
+          if (exampleData && Object.keys(exampleData).length > 0) {
+            if (currentAction === "create") {
+              const $examplePre = $("#action-create pre");
+              $examplePre.text('msg.payload = ' + JSON.stringify(exampleData, null, 2));
+            } else if (currentAction === "select") {
+              const $examplePre = $("#action-select .example-output pre");
+              $examplePre.text(JSON.stringify(exampleData, null, 2));
+            } else if (currentAction === "update") {
+              // For update, format with id and record fields
+              const updateExample = {
+                id: "tablename:record_id_here",
+                record: exampleData
+              };
+              const $examplePre = $("#action-update pre");
+              $examplePre.text('msg.payload = ' + JSON.stringify(updateExample, null, 2));
+            }
+          }
+          
+        } catch (err) {
+          console.error("Error fetching collection example:", err);
+          // Keep the default example on error
+        }
+      }
+
+      // Handle filters
+      const $filterContainer = $("#filter-container");
+      const filters = node.filters || [];
+
+      function renderFilters() {
+        $filterContainer.empty();
+        filters.forEach((filter, idx) => {
+          const $filterRow = $(`
+            <div class="filter-row" style="display: flex; gap: 8px; margin-bottom: 8px; align-items: center;">
+              <input type="text" class="filter-field" placeholder="Field" value="${filter.field_name || ''}" style="flex: 2; padding: 4px;">
+              <select class="filter-operator" style="flex: 1; padding: 4px;">
+                <option value="=" ${filter.operator === '=' ? 'selected' : ''}>=</option>
+                <option value="!=" ${filter.operator === '!=' ? 'selected' : ''}>!=</option>
+                <option value=">" ${filter.operator === '>' ? 'selected' : ''}>&gt;</option>
+                <option value="<" ${filter.operator === '<' ? 'selected' : ''}>&lt;</option>
+                <option value=">=" ${filter.operator === '>=' ? 'selected' : ''}>&gt;=</option>
+                <option value="<=" ${filter.operator === '<=' ? 'selected' : ''}>&lt;=</option>
+              </select>
+              <select class="filter-value-type" style="flex: 1; padding: 4px;">
+                <option value="msg" ${filter.valueType === 'msg' ? 'selected' : ''}>msg.</option>
+                <option value="string" ${filter.valueType === 'string' || !filter.valueType ? 'selected' : ''}>string</option>
+                <option value="number" ${filter.valueType === 'number' ? 'selected' : ''}>number</option>
+                <option value="boolean" ${filter.valueType === 'boolean' ? 'selected' : ''}>boolean</option>
+                <option value="json" ${filter.valueType === 'json' ? 'selected' : ''}>JSON</option>
+              </select>
+              <input type="text" class="filter-value" placeholder="Value" value="${filter.value || ''}" style="flex: 2; padding: 4px;">
+              <button type="button" class="remove-filter" style="padding: 4px 8px;">✕</button>
+            </div>
+          `);
+          
+          $filterRow.find(".filter-field").on("change", function() {
+            filters[idx].field_name = $(this).val();
+          });
+          
+          $filterRow.find(".filter-operator").on("change", function() {
+            filters[idx].operator = $(this).val();
+          });
+          
+          $filterRow.find(".filter-value-type").on("change", function() {
+            filters[idx].valueType = $(this).val();
+          });
+          
+          $filterRow.find(".filter-value").on("change", function() {
+            filters[idx].value = $(this).val();
+          });
+          
+          $filterRow.find(".remove-filter").on("click", function() {
+            filters.splice(idx, 1);
+            renderFilters();
+          });
+          
+          $filterContainer.append($filterRow);
+        });
+      }
+
+      renderFilters();
+
+      $("#add-filter").on("click", function() {
+        filters.push({ field_name: "", operator: "=", value: "", valueType: "string" });
+        renderFilters();
+      });
+    },
+
+    oneditsave: function () {
+      this.useConfigNode = $("#node-input-useConfigNode").is(":checked");
+      this.machhub = $("#node-input-machhub").val();
+      this.collectionID = $("#node-input-collection").val();
+      this.action = $("#node-input-action").val();
+      
+      // Save select fields
+      const selectFieldsStr = $("#node-input-selectFields").val();
+      this.selectFields = selectFieldsStr ? selectFieldsStr.split(",").map(f => f.trim()).filter(Boolean) : [];
+    }
+  });
+</script>
+
+<script type="text/html" data-template-name="machhub.collection">
+  <div class="form-row">
+    <label for="node-input-name"><i class="fa fa-tag"></i> Name:</label>
+    <input type="text" id="node-input-name" placeholder="Name">
+  </div>
+
+  <div class="form-row">
+    <label for="node-input-useConfigNode" style="width: auto; padding-right: 10px;">
+      <i class="fa fa-cog"></i> Use Config Node
+    </label>
+    <input type="checkbox" id="node-input-useConfigNode" style="width: auto; margin: 0;">
+    <span style="margin-left: 10px; color: #999; font-size: 11px; font-style: italic;">
+      (leave unchecked to use machhub.env.json)
+    </span>
+  </div>
+
+  <div class="form-row" id="config-node-row">
+    <label for="node-input-machhub"><i class="fa fa-server"></i> Config</label>
+    <input type="text" id="node-input-machhub">
+  </div>
+
+  <div class="form-row">
+    <label for="node-input-collection"><i class="fa fa-database"></i> Collection</label>
+    <select id="node-input-collection" style="width: 70%;">
+      <option value="">Select collection</option>
+    </select>
+  </div>
+
+  <div class="form-row">
+    <label for="node-input-action"><i class="fa fa-bolt"></i> Action</label>
+    <select id="node-input-action" style="width: 70%;">
+      <option value="select">Select</option>
+      <option value="create">Create</option>
+      <option value="update">Update</option>
+      <option value="delete">Delete</option>
+    </select>
+  </div>
+
+  <!-- Select Action UI -->
+  <div id="action-select" class="action-section" style="margin-top: 20px;">
+    <div class="form-row">
+      <label for="node-input-selectFields"><i class="fa fa-filter"></i> Select Fields</label>
+      <input type="text" id="node-input-selectFields" placeholder="field1,field2" style="width: 70%;">
+      <div style="margin-left: 105px; margin-top: 5px;">
+        <span style="font-size: 11px; color: #999;">Comma separated, leave blank for all fields</span>
+      </div>
+    </div>
+
+    <div class="form-row">
+      <label style="width: 100%; margin-bottom: 8px;"><i class="fa fa-filter"></i> Filters</label>
+      <div >
+        <div id="filter-container"></div>
+        <button type="button" id="add-filter" class="red-ui-button" style="margin-top: 8px;">
+          <i class="fa fa-plus"></i> Add Filter
+        </button>
+      </div>
+    </div>
+
+    <div class="form-row example-output">
+      <div style="padding: 10px; background-color: #f9f9f9; border: 1px solid #ddd; border-radius: 4px; margin-top: 12px;">
+        <p style="margin: 0 0 8px 0; font-weight: bold;">Example Record Structure</p>
+        <p style="margin: 0 0 8px 0; font-size: 12px; color: #666;">
+          Records from this collection will have the following structure:
+        </p>
+        <pre style="background-color: #fff; padding: 8px; border: 1px solid #ddd; font-size: 11px; margin: 0;">// Example record from this collection:
+{
+  "field1": "value1",
+  "field2": "value2"
+}</pre>
+      </div>
+    </div>
+  </div>
+
+  <!-- Create Action UI -->
+  <div id="action-create" class="action-section" style="margin-top: 20px; display: none;">
+    <div class="form-row">
+      <div style="padding: 10px; background-color: #f9f9f9; border: 1px solid #ddd; border-radius: 4px;">
+        <p style="margin: 0 0 8px 0; font-weight: bold;">Create Record</p>
+        <p style="margin: 0 0 8px 0; font-size: 12px; color: #666;">
+          This node will create <code>msg.payload</code> on the selected collection. Example:
+        </p>
+        <pre style="background-color: #fff; padding: 8px; border: 1px solid #ddd; font-size: 11px; margin: 0;">msg.payload = {
+  "field1": "value1",
+  "field2": "value2"
+}</pre>
+      </div>
+    </div>
+  </div>
+
+  <!-- Update Action UI -->
+  <div id="action-update" class="action-section" style="margin-top: 20px; display: none;">
+    <div class="form-row">
+      <div style="padding: 10px; background-color: #f9f9f9; border: 1px solid #ddd; border-radius: 4px;">
+        <p style="margin: 0 0 8px 0; font-weight: bold;">Update Record</p>
+        <p style="margin: 0 0 8px 0; font-size: 12px; color: #666;">
+          This node will update the selected collection based on <code>msg.payload</code>. 
+          The payload should contain the record ID to update and the fields to update. Example:
+        </p>
+        <pre style="background-color: #fff; padding: 8px; border: 1px solid #ddd; font-size: 11px; margin: 0;">msg.payload = {
+  "id": "table_name:05nwoy566jasfwgak5r3",
+  "record": {
+    "field1": "value1",
+    "field2": "value2"
+  }
+}</pre>
+      </div>
+    </div>
+  </div>
+
+  <!-- Delete Action UI -->
+  <div id="action-delete" class="action-section" style="margin-top: 20px; display: none;">
+    <div class="form-row">
+      <div style="padding: 10px; background-color: #f9f9f9; border: 1px solid #ddd; border-radius: 4px;">
+        <p style="margin: 0 0 8px 0; font-weight: bold;">Delete Record</p>
+        <p style="margin: 0 0 8px 0; font-size: 12px; color: #666;">
+          This node will delete the record that has id of <code>msg.payload</code> on the selected collection. Example:
+        </p>
+        <pre style="background-color: #fff; padding: 8px; border: 1px solid #ddd; font-size: 11px; margin: 0;">msg.payload = "table_name:05nwoy566jasfwgak5r3"</pre>
+      </div>
+    </div>
+  </div>
+</script>
+
+<script type="text/html" data-help-name="machhub.collection">
+  <p>This node performs operations on MACHHUB collections (database tables).</p>
+  
+  <h3>Actions</h3>
+  <ul>
+    <li><strong>Select:</strong> Query and filter records from a collection</li>
+    <li><strong>Create:</strong> Insert a new record into a collection</li>
+    <li><strong>Update:</strong> Modify an existing record in a collection</li>
+    <li><strong>Delete:</strong> Remove a record from a collection</li>
+  </ul>
+
+  <h3>Configuration</h3>
+  <ul>
+    <li><strong>Collection:</strong> Select the target collection from the dropdown</li>
+    <li><strong>Action:</strong> Choose the operation to perform</li>
+  </ul>
+
+  <h3>Select Action</h3>
+  <p>Configure fields to select and filters to apply. Filters support operators: =, !=, &gt;, &lt;, &gt;=, &lt;=</p>
+
+  <h3>Create Action</h3>
+  <p>Send a JSON object in <code>msg.payload</code> with the fields to create.</p>
+
+  <h3>Update Action</h3>
+  <p>Send an object with <code>id</code> and <code>record</code> properties in <code>msg.payload</code>.</p>
+
+  <h3>Delete Action</h3>
+  <p>Send the record ID as a string in <code>msg.payload</code>.</p>
+</script>