homekit-device.html

<script type="text/javascript">
  RED.nodes.registerType('homekit-device', {
    category: 'HomeKit',
    color: '#a6bbcf',
    defaults: {
      name: { value: "" },
      pairingData: { value: "", type: "homekit-pairing-data" },
      selectionCriteria: { value: `{ "id": "","name":"" }` },
      pairingPin: { value: "000-00-000", validate: RED.validators.regex(/^\d{3}-\d{2}-\d{3}$/) }
    },
    inputs: 1,
    outputs: 1,
    // icon: "file.png",
    label: function () {
      return this.name || "Device Node";
    },
    oneditcancel: () => {
    },
    oneditsave: () => {
    },
    oneditprepare: async () => {
      $("#node-input-selectionCriteria").typedInput({
        type: "json",
        types: ["json"]
      });

      var discoveredDeivces = [];
      $("#node-input-deviceDiscovery").append(new Option());
      $("#node-input-deviceDiscovery").on("change", function (event) {
        console.log(event);
        var selectedOption = event.target.selectedOptions[0];
        var selectedValue = selectedOption.value;
        console.log(selectedValue);
        $("#node-input-selectionCriteria").typedInput("value", selectedValue);
      });

      var hostname = window.location.hostname;
      var port = window.location.port;
      var host = hostname + ':' + port;
      $.ajax({
        url: '/hap-controller/list-devices',
        success: (result) => {
          $('#deviceDiscoveryDiv').removeAttr('hidden');
          data = JSON.parse(result);
          discoveredDevices = data;

          $.each(discoveredDevices, (i, item) => {
            const { id, name } = item;
            const optionValue = JSON.stringify({ id, name });

            // Check if an option with the same name already exists
            const optionExists = $("#node-input-deviceDiscovery option").filter(function () {
              return $.trim($(this).text()) === name;
            }).length > 0;

            if (!optionExists) {
              // Add the option if it doesn't exist
              $("#node-input-deviceDiscovery").append(new Option(name, optionValue));
            }
          });
        }
      });


      let txtValue = $("#node-input-selectionCriteria").val();
      if (txtValue.length > 0) {
        let data = JSON.parse(txtValue);
        let optionValue = JSON.stringify({ id: data.id, name: data.name });
        let optionText = data.name;
        // Check if the option already exists
        if ($("#node-input-deviceDiscovery option[value='" + optionValue + "']").length === 0) {
          $("#node-input-deviceDiscovery").append(new Option(optionText, optionValue));
        }
        $("#node-input-deviceDiscovery option:contains('" + optionText + "')").prop("selected", true);

        // $("#node-input-deviceDiscovery").val(optionValue);
      }


    }
  });
</script>

<script type="text/html" data-template-name="homekit-device">

  <div class="form-row" id="deviceDiscoveryDiv" hidden>
    <label for="node-input-deviceDiscovery"><i class="fa fa-tag"></i> Devices:</label>
    <select id="node-input-deviceDiscovery">

    </select>
  </div>

  <div class="form-row">
    <label for="node-input-pairingData"><i class="fa fa-tag"></i> Pairing Data DB</label>
    <input id="node-input-pairingData">
  </div>
    <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-selectionCriteria"><i class="fa fa-tag"></i> Selection Criteria</label>
        <input type="text" id="node-input-selectionCriteria">
    </div>
    <div>
        <label for="node-input-pairingPin"><i class="fa fa-tag"></i> Pairing Pin</label>
        <input type="text" placeholder="xxx-xx-xxx" id="node-input-pairingPin">
    </div>
</script>

<script type="text/html" data-help-name="homekit-device">
    <p>A simple node to represent a Homekit Device</p>
</script>