node-red-contrib-date-converter/date-converter/date-converter.html

Node-Red Node date converter

<!--
  Copyright (c) 2018 Julian Knight (Totally Information)

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->

<!-- This creates and configures the onscreen elements of the node           -->


<!-- First, the content of the edit dialog is defined.                       -->
<script type="text/x-red" data-template-name="date-converter">
    <!-- data-template-name identifies the node type this is for              -->

    <!-- INPUT -->
    <div class="form-row">
        <label for="node-input-input"><i class="fa fa-arrow-left"></i> Input from</label>
        <input type="text" id="node-input-input" style="width: 70%;" placeholder="payload">
        <input type="hidden" id="node-input-inputType">
    </div>
    <!-- INPUT TIMEZONE -->
    <div class="form-row">
        <label for="node-input-inTz">Input Timezone</label>
        <input type="text" id="node-input-inTz" placeholder="[determined by system]" style="width:70%;">
    </div>
    <!-- ADJUSTMENT -->
    <div class="form-row">
        <label for="node-input-adjAmount"> Adjustment</label>
        <select id="node-input-adjDir" style="width:4em">
          <option value="add">+</option>
          <option value="subtract">-</option>
        </select>
        <input type="text" id="node-input-adjAmount" placeholder="0" style="width:25%;">
        <select id="node-input-adjType" style="width:30%">
          <option value="days">Days</option>
          <option value="hours">Hours</option>
          <option value="weeks">Weeks</option>
          <option value="months">Months</option>
          <option value="quarters">Quarters</option>
          <option value="years">Years</option>
          <option value="minutes">Minutes</option>
          <option value="seconds">Seconds</option>
          <option value="milliseconds">Milliseconds</option>
        </select>
    </div>

    <!-- OUTPUT FORMAT -->
    <br />
    <div class="form-row">
        <label for="node-input-format"><i class="fa fa-eye-open"></i> Output Format</label>
        <input type="text" id="node-input-format" placeholder="ISO8601 (UTC)">
    </div>
    <!-- OUTPUT LOCALE -->
    <div class="form-row">
        <label for="node-input-locale"><i class="fa fa-flag"></i> Locale</label>
        <input type="text" id="node-input-locale" placeholder="en">
    </div>
    <!-- OUTPUT TIMEZONE -->
    <div class="form-row">
        <label for="node-input-outTz">Output Tz</label>
        <input type="text" id="node-input-outTz" placeholder="[determined by system]" style="width:70%;">
    </div>
    <!-- OUTPUT OBJECT -->
    <div class="form-row">
        <label for="node-input-output"><i class="fa fa-arrow-right"></i> Output to</label>
        <input type="text" id="node-input-output" style="width: 70%;" placeholder="payload">
        <input type="hidden" id="node-input-outputType">
    </div>

    <br/>
    <!-- TOPIC -->
    <div class="form-row">
        <label for="node-input-topic"><i class="fa fa-tasks"></i> Topic</label>
        <input type="text" id="node-input-topic" placeholder="Topic">
    </div>
    <!-- NODE NAME - Should always be the last field -->
    <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-tips" style="font-size:83%">
        See the info sidebar for formatting details. <br />
        Use locale and format to change string output.<br />
        See the info sidebar for several warnings about inputting strings.
    </div>
</script>


<!-- Next, some simple help text is provided for the node.                   -->
<!-- The first <p> is used as the pop-up tool tip when hovering over pallette -->
<script type="text/x-red" data-help-name="date-converter">
    <p>
      TODO
    </p>
</script>

<!-- Finally, the node type is registered along with all of its properties   -->
<script type="text/javascript">
    function tzValidate(val) {
      // auto-correct the entry
      //$('#node-input-inTz').val( val.replace(/^GMT|UTC/i, 'ETC/GMT') )
      return true
    }

    RED.nodes.registerType('date-converter',{
      category: 'function',      // the palette category
      color: '#E6E0F8',
      defaults: {
        name: {value:''},
        topic: {value:''},
        input: {value:''},
        inputType: {value:'msg'},
        inTz: {value:'', validate:tzValidate},
        adjAmount: {value:0, validate:RED.validators.number()},
        adjType: {value:'days'},
        adjDir: {value:'add'},
        format: {value:''},
        locale: {value:''},
        output: {value:''},
        outputType: {value:'msg'},
        outTz: {value:'', validate:tzValidate}
      },
      inputs:1,               // set the number of inputs - only 0 or 1
      outputs:2,              // set the number of outputs - 0 to n
      // set the icon (held in icons dir below where you save the node)
      icon: 'timer.png',     // saved in  icons/myicon.png
      label: function() {     // sets the default label contents
          return this.name||this.topic||'Date/Time Formatter';
      },
      labelStyle: function() { // sets the class to apply to the label
          return this.name?'node_label_italic':'';
      },
      oneditprepare: function() {
        // Make sure we can reference parent this in async fns
        var _this = this

        if (!this.inputType) {
          this.inputType = 'msg';
        }
        $('#node-input-input').typedInput({
          default: 'msg',
          types: ['msg','flow','global','date','str'],
          typeField: $('#node-input-inputType')
        });
        if (!this.outputType) {
          this.outputType = 'msg';
        }
        $('#node-input-output').typedInput({
          default: 'msg',
          types: ['msg','flow','global'],
          typeField: $('#node-input-outputType')
        });

        // Get host locale and timezone
        $.getJSON('contribapi/date-converter',function(data) {
          // Save to parent object
          _this.localeData = data

          if ( $('#node-input-inTz').val() === '' ) $('#node-input-inTz').val(data.tz);
          if ( $('#node-input-outTz').val() === '' ) $('#node-input-outTz').val(data.tz);
          if ( $('#node-input-locale').val() === '' ) $('#node-input-locale').val(data.locale);
        });

        // Autocorrect timezone entries
        $('#node-input-inTz').add('#node-input-outTz').blur( function(){
          if( this.value === '' ) {
            // Use saved locale data from parent object as default
            this.value = _this.localeData.tz
          } else {
            // autocorrect common tz errors
            this.value = this.value.replace(/^GMT|UTC/i, 'ETC/GMT')
          }
        })

      } // --- end of oneditprepare --- //
    }); // ---- end of RED.nodes.registerType ---- //
</script>