velux-scenes.html

<script type="text/x-red" data-help-name="Velux Scenes">
    <p>Node for providing the Node state of Velux Devices</p>
    <p><p>
</script>

<script type="text/x-red" data-template-name="Velux Scenes">
    <div class="form-row">
        <label for="node-input-datasource"><i class="fa fa-random"></i> <span data-i18n="velux-scenes.label.datasource"></span></label>
        <input type="text" id="node-input-datasource">
    </div>
    <div class="form-row">
        <label for="node-input-index"><i class="fa fa-sign-out"></i> <span data-i18n="velux-scenes.label.index"></span></label>
        <input type="number" id="node-input-index" list="scenelist" data-i18n="[placeholder]velux-scenes.placeholder.index">
        <datalist id="scenelist"></datalist>
    </div> 
    <div class="form-row">
      <label for="node-input-velocity"><i class="fa fa-code"></i> <span data-i18n="velux-scenes.label.velocity"></span></label>
      <select id="node-input-velocity">
          <option value="DEFAULT" data-i18n="velux-scenes.velocity.DEFAULT"></option>
          <option value="SILENT" data-i18n="velux-scenes.velocity.SILENT"></option>
          <option value="FAST" data-i18n="velux-scenes.velocity.FAST"></option>
      </select>
    </div> 
    <div class="form-row">
        <label for="node-input-topic"><i class="fa fa-tasks"></i> <span data-i18n="velux-scenes.label.topic"></span></label>
        <input type="text" id="node-input-topic" data-i18n="[placeholder]velux-scenes.placeholder.topic">
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></span></label>
        <input type="text" id="node-input-name" data-i18n="[placeholder]node-red:common.label.name">
    </div>
</script>

<script type="text/javascript">
    RED.nodes.registerType("Velux Scenes", {
        category: "Velux KLF 200",
        color: "#3FADB5",
        defaults: {
            name: {
                name: ""
            },
            datasource: {
                type: "velux-connection",
                required: true
            },
            index: {
                required: true,  
                validate:RED.validators.number()
            },
            velocity: {
                value: "DEFAULT",
                required: true
            },
            topic: {
                value: "",
                required: false
            }
        },
        inputs: 1,
        outputs: 1,
        icon: "velux.png",
        label: function () {
            return this.name || "Velux Scenes";
        },
        labelStyle: function () {
            return this.name ? "node_label_italic" : "";
        },
        oneditprepare: function() {
          $.get( '/velux/scenes')
          .done( function(data) {
            var scenes = JSON.parse(data);
            scenes.forEach(function(scenes){
              $('#scenelist').append("<option value='"+scenes.id+"'>"+scenes.name+"</option>");
            })
          })
        }
    });
</script>