node-red-contrib-hubitat/nodes/mode-setter.html

Node Red module for Hubitat API

<script src="hubitat/js/common.js"></script>

<script type="text/javascript">
  /* global cleanHubitatSelectMenu, resetHubitatSelectMenu, loadCredentials, paramsFromServer */
  function cleanHubitatModes() {
    cleanHubitatSelectMenu('node-input-modeId', 'Choose mode...');
  }

  function listHubitatModes(server, modeId) {
    const selectMenu = resetHubitatSelectMenu('node-input-modeId', 'Choose mode...');
    $.getJSON('hubitat/modes', paramsFromServer(server), (res) => {
      res.forEach((item) => {
        const selected = parseInt(modeId, 10) === item.id;
        const option = $('<option>', { value: item.id, text: item.name });
        selectMenu.append(option);
        if (selected) { selectMenu.val(item.id).trigger('change'); }
      });
      if (!modeId) { selectMenu.val('').trigger('change'); }
    }).fail(() => cleanHubitatModes());
  }

  RED.nodes.registerType('hubitat mode-setter', {
    category: 'hubitat',
    color: '#ACE043',
    defaults: {
      modeLabel: { value: '' },
      name: { value: '' },
      server: { type: 'hubitat config', required: true },
      modeId: { value: '' },
    },
    inputs: 1,
    outputs: 1,
    align: 'right',
    icon: 'mode.svg',
    label() { return this.name || this.modeLabel || 'set mode'; },
    paletteLabel: 'set mode',
    oneditprepare() {
      $('document').ready(() => {
        $('#node-input-modeLabel').hide();
        $('#node-input-server').change(() => {
          const serverId = $('#node-input-server option:selected').val();
          const server = RED.nodes.node(serverId);
          if (server) {
            loadCredentials(server).then(() => { listHubitatModes(server, this.modeId); });
          } else {
            cleanHubitatModes();
          }
        });
        $('#node-input-modeId').change(() => {
          const modeLabel = $('#node-input-modeId option:selected').text();
          const modeId = $('#node-input-modeId option:selected').val();
          if (modeId) {
            $('#node-input-name').attr('placeholder', modeLabel);
            if (!this.name) {
              $('#node-input-modeLabel').val(modeLabel);
            }
          } else {
            $('#node-input-modeLabel').val('');
            $('#node-input-name').attr('placeholder', 'set mode');
          }
        });
        $('#node-input-name').change(() => {
          const name = $('#node-input-name').val();
          const modeId = $('#node-input-modeId option:selected').val();
          if ((!name) && (modeId)) {
            const modeLabel = $('#node-input-modeId option:selected').text();
            $('#node-input-modeLabel').val(modeLabel);
          }
        });
      });
    },
  });
</script>

<script type="text/html" data-template-name="hubitat mode-setter">
  <div class="form-row">
    <label for="node-input-server"><i class="fa fa-globe"></i> Server</label>
    <input type="text" id="node-input-server">
  </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-modeId"><i class="fa fa-moon-o"></i> Mode</label>
    <select id="node-input-modeId"></select>
  </div>
  <!-- to be handled by NR framework-->
  <div class="form-row">
    <label for="node-input-modeLabel"></label>
    <input type="text" id="node-input-modeLabel">
  </div>
</script>

<script type="text/html" data-help-name="hubitat mode-setter">
  <p>A node to set Hubitat's mode.</p>

  <h3>Inputs</h3>
    <dl class="message-properties">
      <dt class="optional">msg.mode <span class="property-type">string</span></dt>
      <dd>Allow to overwrite the mode set. The value must be the exact mode name</dd>
    </dl>
    <dl class="message-properties">
      <dt class="optional">msg.modeId <span class="property-type">string</span></dt>
      <dd>Allow to overwrite the mode set. The value must be the mode ID</dd>
    </dl>

  <h3>Output</h3>
    The same message as the input.
</script>