node-red-contrib-vib-smart-boiler/smart-boiler-settings.html

Smart boiler node to control multiple thermostat

<script type="text/javascript">
  RED.nodes.registerType('smart-boiler-settings', {
    category: 'config',
    defaults: {
      name: {value: 'my settings', required: true},
      mqttHost:{value: 'myhost.com', required: true},
      mqttPort:{value: '1883', required: true},
      mqttUser:{value: '', required: false},
      mqttRootPath:{value: 'homeassistant', required: true},
    },
    credentials: {
      mqttPassword: {type: "password"}
    },
    label: function () {
      return this.name
    },
    oneditprepare: function () {
      var node = this
      
      $("#node-config-input-test-connection").on("click", function(e) {
          e.preventDefault();
          var host = $("#node-config-input-mqttHost").val();
          var port = $("#node-config-input-mqttPort").val();
          var user = $("#node-config-input-mqttUser").val();
          var password = $("#node-config-input-mqttPassword").val();
          var rootPath = $("#node-config-input-mqttRootPath").val();
          
          $("#test-connection-result").html('<i class="fa fa-spinner fa-spin"></i> Testing...');
          
          $.ajax({
              url: "smart-boiler-settings/testConnection",
              type: "POST",
              data: JSON.stringify({
                  id: node.id,
                  mqttHost: host,
                  mqttPort: port,
                  mqttUser: user,
                  mqttPassword: password,
                  mqttRootPath: rootPath
              }),
              contentType: "application/json; charset=utf-8",
              success: function (resp) {
                  if (resp.status === "success") {
                      $("#test-connection-result").html('<span style="color:green"><i class="fa fa-check"></i> ' + resp.message + '</span>');
                  } else if (resp.status === "warning") {
                      $("#test-connection-result").html('<span style="color:orange"><i class="fa fa-exclamation-triangle"></i> ' + resp.message + '</span>');
                  } else {
                      $("#test-connection-result").html('<span style="color:red"><i class="fa fa-times"></i> ' + resp.message + '</span>');
                  }
              },
              error: function (jqXHR, textStatus, errorThrown) {
                  $("#test-connection-result").html('<span style="color:red"><i class="fa fa-times"></i> Error: ' + textStatus + '</span>');
              }
          });
      });
    },
    oneditsave: function () {
      var node = this
      
    },
    oneditcancel: function () {
      var node = this
     
    },
  })
</script>

<script type="text/x-red" data-template-name="smart-boiler-settings">
  <div class="form-row">
    <label for="node-config-input-name"><i class="icon-bookmark"></i> Name</label>
    <input type="text" id="node-config-input-name">
  </div>
  <div class="form-row">
    <label for="node-config-input-mqttHost"><i class="icon-globe"></i> MQTT Host</label>
    <input type="text" id="node-config-input-mqttHost">
  </div>
  <div class="form-row">
    <label for="node-config-input-mqttPort"><i class="icon-globe"></i> MQTT Port</label>
    <input type="text" id="node-config-input-mqttPort">
  </div>
  <div class="form-row">
    <label for="node-config-input-mqttUser"><i class="icon-globe"></i> Username</label>
    <input type="text" id="node-config-input-mqttUser">
  </div>
  <div class="form-row">
    <label for="node-config-input-mqttPassword"><i class="icon-globe"></i> Password</label>
    <input type="password" id="node-config-input-mqttPassword">
  </div>
  <div class="form-row">
    <label for="node-config-input-mqttRootPath"><i class="icon-globe"></i> Root path</label>
    <input type="text" id="node-config-input-mqttRootPath">
  </div>
  <div class="form-row">
      <a href="#" class="editor-button" id="node-config-input-test-connection" style="margin-top: 4px;"><i class="fa fa-refresh"></i> Test Connection</a>
      <span id="test-connection-result" style="margin-left: 10px;"></span>
  </div>



</script>

<script type="text/x-red" data-help-name="smart-boilerr-settings">
  <h3>Settings</h3>
  <dl class="message-properties">
    <dt>Latitude & Longitude<span class="property-type">number</span></dt>
    <dd>If the browser support geolocation the Latitude and Longitude will be updated to the current position when created. This position might not be accurate, so please verify that it is as good as you want it.</dd>
  </dl>
</script>