node-red-contrib-spruthub/nodes/server.html

Sprut.hub connectivity nodes for node-red

<script type="text/x-red" data-template-name="spruthub-server">
    <link rel="stylesheet" href="spruthub/static/css/common.css" type="text/css" />
    <input autocomplete="false" name="hidden" type="text" style="display:none;">


    <div class="form-row">
        <label for="node-config-input-name" class="l-width"><i class="fa fa-bookmark"></i> <span data-i18n="label.name"></span></label>
        <input type="text" id="node-config-input-name">
    </div>

    <hr>
    <h3>Sprut.hub</h3>
    <div class="form-row">
        <label for="node-config-input-host" class="l-width"><i class="fa fa-location-arrow"></i> <span data-i18n="label.host"></span></label>
        <input type="text" id="node-config-input-host">
    </div>

     <div class="form-row">
        <label for="node-config-input-api_email" class="l-width"><i class="fa fa-envelope-o"></i> <span data-i18n="label.email"></span></label>
        <input type="text" id="node-config-input-api_email">
        <input type="hidden" id="node-config-input-email" value="">
    </div>

    <div class="form-row">
        <label for="node-config-input-api_password" class="l-width"><i class="fa fa-lock"></i> <span data-i18n="label.password"></span></label>
        <input type="password" id="node-config-input-api_password">
        <input type="hidden" id="node-config-input-password" value="">
    </div>

    <div class="form-row">
        <label for="node-config-input-api_port" class="l-width"><i class="fa fa-asterisk"></i> <span data-i18n="label.port"></span></label>
        <input type="text" id="node-config-input-api_port">
        <input type="hidden" id="node-config-input-api_port" value="">
        <div><code><span style="font-size:12px;" data-i18n="label.port_help"></span></code></div>
    </div>

    <hr>
    <h3 data-i18n="label.test_connection"></h3>
<!--    <div class="form-row">-->
<!--        <label for="node-config-input-token" class="l-width"><i class="fa fa-key"></i> <span data-i18n="label.token"></span></label>-->
<!--        <input type="text" id="node-config-input-token" readonly="readonly">-->
<!--    </div>-->
    <div class="form-row">
        <a style="width: 100px" class="red-ui-button" id="test-connection" name="test-connection"><span data-i18n="label.check"></span></a>
	</div>

<div id="sh_check_block" style="display:none;">
    <div id="sh_error" class="form-tips" style="margin-bottom:20px;"></div>

    <div class="form-row">
        <label for="sh_auth" style="width:200px;"> <span data-i18n="label.sh_auth"></span></label>
        <b><span id="sh_auth"><i class="fa fa-spin fa-spinner"></i></span></b>
    </div>
    <div class="form-row">
        <div>
            <label for="sh_version" style="width:200px;"> <span data-i18n="label.sh_version"></span></label>
            <b><span id="sh_version"><i class="fa fa-spin fa-spinner"></i></span></b>
        </div>
        <div>
            <label for="sh_version_new" style="width:200px;"> <span data-i18n="label.sh_new_version"></span></label>
            <b style="color:green;"><span id="sh_version_new"></span></b>
        </div>
    </div>
    <div class="form-row">
        <label for="sh_accessories_cnt" style="width:200px;"></i> <span data-i18n="label.sh_accessories_cnt"></span></label>
        <b><span id="sh_accessories_cnt"><i class="fa fa-spin fa-spinner"></i></span></b>
    </div>
</div>

<div style="width: 100%" class="form-tips" data-i18n="[html]tip.deploy"></div>


</script>

<script type='text/javascript'>
  RED.nodes.registerType('spruthub-server', {
    category: 'config',
    defaults: {
      name: {
        value: null,
        required: false,
      },
      host: {
        value: null,
        required: true,
      },
      api_port: {
        value: 80,
        required: true,
      },
    },
    credentials: {
      api_email: {type: 'text', required: true},
      api_password: {type: 'text', required: true},
    },
    label: function() {
      return this.name || this.host;
    },
    oneditprepare: function() {
      var node = this;
      var $testBtn = $('#test-connection');
      var spinner = '<i class="fa fa-spin fa-spinner"></i></span>';

      //empty old config settings
      $('#node-config-input-email').val('');
      $('#node-config-input-password').val('');

      $testBtn.off('click').on('click', function() {
        $('#sh_error').hide();
        $('#sh_auth').html(spinner);
        $('#sh_version').html(spinner);
        $('#sh_accessories_cnt').html(spinner);
        $('#sh_check_block').show();
        $.getJSON('spruthub/checkConnection', {
          controllerID: node.id,
          host: $('#node-config-input-host').val(),
          port: $('#node-config-input-api_port').val(),
          email: $('#node-config-input-api_email').val(),
          password: $('#node-config-input-api_password').val(),
        }).done(function(data, textStatus, jqXHR) {
          if (data.error) {
            $('#sh_error').html(data.error).show();
          }
          $('#sh_auth')
              .text(data.auth ? RED._('node-red-contrib-spruthub/server:label.ok') : RED._(
                  'node-red-contrib-spruthub/server:label.error'))
              .css('color', data.auth ? 'green' : 'red');
          $('#sh_version')
              .text(data.version ? data.version : RED._('node-red-contrib-spruthub/server:label.error'))
              .css('color', data.version ? 'black' : 'red');
          if (data.version_new) $('#sh_version_new').text(data.version_new).closest('div').show();
          else $('#sh_version_new').text('').closest('div').hide();
          $('#sh_accessories_cnt')
              .text(data.accessories_cnt ? data.accessories_cnt : RED._('node-red-contrib-spruthub/server:label.error'))
              .css('color', data.accessories_cnt ? 'black' : 'red');
        });
      });
    },
  });
</script>