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

Node-RED nodes to ESPhome devices

<script type="text/javascript">
  RED.nodes.registerType('esphome-in', {
    category: 'ESPhome',
    paletteLabel: 'esphome in',
    color: '#e0e0e0',
    defaults: {
      name: {},
      device: {value: '', type: 'esphome-device'},
      entity: {value: ''},
      topic: {value: ''},
      bleaddress: {value: ''}
    },
    outputs: 1,
    icon: 'esphome.svg',
    align: 'left',
    label: function () {
      return this.name || 'ESPhome in';
    },
    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);
      $('#node-input-entity').on('change', function () {
        let $val = $(this).val() || node.entity;
        $val == 'ble' ? $('#ble-show').show() : $('#ble-show').hide();
      });
    },
    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-in">
  <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>

  <div class="form-row">
    <label for="node-input-topic"><i class="fa fa-tag"></i> Topic</label>
    <input type="text" id="node-input-topic" placeholder="Topic" />
  </div>

  <div id="ble-show" style="display: none;">
    <div class="form-row">
      <label for="node-input-bleaddress"><i class="fa fa-bluetooth"></i> Address</label>
      <input type="text" id="node-input-bleaddress" placeholder="00:AB:CD:EF:11:22" />
    </div>
  </div>
</script>

<script type="text/html" data-help-name="esphome-in">
  <p>Subscribes to an ESPHome Device's entity &amp; outputs on state change</p>
  <h3>Message properties</h3>
  <dl class="message-properties">
    <dt class="required">payload<span class="property-type">object</span></dt>
    <dd>information about the event, such as state, brightness, position, etc</dd>
    <dt class="required">device<span class="property-type">object</span></dt>
    <dd>information of the device, such as name &amp; model</dd>
    <dt class="required">entity<span class="property-type">object</span></dt>
    <dd>information of the device's entity, such as name &amp; type</dd>
    <dt class="required">entity.config<span class="property-type">object</span></dt>
    <dd>config attributes of the entity</dd>
    <dt class="required">topic<span class="property-type">string</span></dt>
    <dd>Sets a topic for the messages generated by the node</dd>
  </dl>
</script>