node-red-contrib-esphome/build/nodes/out.html

Node-RED nodes to ESPhome devices

<script type="text/javascript">
  RED.nodes.registerType('esphome-out', {
    category: 'ESPhome',
    paletteLabel: 'esphome out',
    color: '#e0e0e0',
    defaults: {
      name: {},
      device: {value: '', type: 'esphome-device'},
      entity: {value: ''}
    },
    inputs: 1,
    icon: 'esphome.svg',
    align: 'right',
    label: function () {
      return this.name || 'ESPhome out';
    },
    oneditprepare: function () {
      let node = this;

      function selectEntity() {
        let $device = $('#node-input-device').val();

        if ($device && $device != '_ADD_') {
          let entity = $('#node-input-entity');
          let $val = entity.val() || node.entity;

          $.post('esphome/entities', {
            deviceNode: $device
          })
            .done(function (data) {
              entity.empty();

              if (data.length === 0) {
                entity.val($val).prop('disabled', true);
                return;
              }

              let optgroup = '';
              let htmlgroup = '';
              data
                .sort((a, b) => (a.type > b.type ? 1 : -1))
                .map(function (d) {
                  if (optgroup != d.type) {
                    htmlgroup = $('<optgroup/>').attr('label', d.type);
                    htmlgroup.appendTo('#node-input-entity');
                    optgroup = d.type;
                  }

                  // TODO: join -> split ...
                  let label = '';
                  if (d.config) {
                    if (d.config.deviceClass || d.config.unitOfMeasurement) {
                      label += '(';
                      if (d.config.deviceClass) {
                        label += d.config.deviceClass;
                      }
                      if (d.config.deviceClass && d.config.unitOfMeasurement) {
                        label += ', ';
                      }
                      if (d.config.unitOfMeasurement) {
                        label += d.config.unitOfMeasurement;
                      }
                      label += ')';
                    }
                  }

                  $('<option/>')
                    .text(`${d.name} ${label}`)
                    .data('name', d.name)
                    .attr('value', d.key)
                    .appendTo(htmlgroup);
                });

              if (!$val || data.length === 1) {
                $val = data[0].key;
              }

              entity.val($val).prop('disabled', false);
            })
            .fail(function (jqxhr, textStatus, error) {
              RED.notify(`Request: ${textStatus}, ${error}`, 'error');
            });
        }
      }

      $('#node-input-device').on('change', selectEntity);
    },
    oneditsave: function () {
      let $elm = $('#node-input-entity option:selected');
      if (!$('#node-input-name').val()) {
        $('#node-input-name').val($elm.data('name'));
      }
    }
  });
</script>

<script type="text/html" data-template-name="esphome-out">
  <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-device"><i class="fa fa-tasks"></i> Device</label>
    <input type="text" id="node-input-device" />
  </div>

  <div class="form-row">
    <label for="node-input-entity"><i class="fa fa-globe"></i> Entity</label>
    <select id="node-input-entity" style="width: 70%;" disabled></select>
  </div>
</script>

<script type="text/html" data-help-name="esphome-out">
  <p>Connects to a ESPhome and publishes entity</p>
  <h3>Inputs</h3>
  <dl class="message-properties">
    <dt class="required">payload<span class="property-type">object</span></dt>
    <dd>state</dd>
  </dl>
</script>