node-red-trello.html

<!--  CREDENTIALS -->
<script type="text/javascript">
(function() {


    RED.nodes.registerType('trello-credentials',{
      category: 'config',
      defaults: {
        name: {value:""}
      },
      credentials: {
        token: {type: "password"},
        apikey: {type:"password"}
      },
      label: function() {
        return this.name;
      },
      exportable: false,
      oneditprepare: function() {
        var trelloConfigNodeId = this.id;
        var apikeybutton = this._("trello.label.apikeybutton");
        var trelloID = this._("trello.label.trello-id");
        function showTrelloAuthStart(){
          $("#node-config-dialog-ok").button("disable");
          $("#node-config-input-apikey").change(function() {
            $("#node-config-trello-tokenbutton").attr('href', 'https://trello.com/1/authorize?key='+$("#node-config-input-apikey").val()+'&name=NODE-RED&expiration=never&response_type=token&scope=read,write')
          });
          $("#node-config-input-token").change(function() {
            if($("#node-config-input-token").val() && $("#node-config-input-token").val() != "" && $("#node-config-input-apikey").val() && $("#node-config-input-apikey").val() != ""){
              //iuuh
            }
          });
          $("#node-config-trello-startconfig").click(function(){
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function(){
              if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                var username = JSON.parse(xmlhttp.response).username;
                //this.name = username;
                $("#node-config-input-name").val(username);
                $("#node-config-dialog-ok").button("enable");
              }
            }
            xmlhttp.open("GET","https://trello.com/1/members/me?key="+ $("#node-config-input-apikey").val() +"&token=" + $("#node-config-input-token").val() + "",true);
            xmlhttp.send();
          });


        }

        showTrelloAuthStart();
      },
      oneditsave: function() {
        console.log("SAVE");
      }
    });
})();
</script>

<script type="text/x-red" data-template-name="trello-credentials">
    <div class="form-row" id="node-config-trello-row">
      <div style="text-align: center; margin-top: 20px; ">
        <a class="btn" id="node-config-trello-devkey" href="https://trello.com/app-key" target="_blank"><span data-i18n="trello.label.apikeybutton"></span></a>
      </div>
    </div>

    <div class="form-row">
      <label for="node-config-input-apikey"><i class="fa fa-user"></i> <span data-i18n="trello.label.apikey"></span></label>
      <input type="text" id="node-config-input-apikey">
    </div>

    <div style="text-align: center; margin-top: 20px; ">
      <a class="btn" id="node-config-trello-tokenbutton" target="_blank">getToken</a>
    </div>

    <div class="form-row">
      <label for="node-config-input-token"> <span data-i18n="trello.label.token"></span></label>
      <input type="text" id="node-config-input-token">
    </div>

    <div style="text-align: center; margin-top: 20px; ">
      <a class="btn" id="node-config-trello-startconfig" target="_blank">Start Config</a>
    </div>

    <input type="hidden" id="node-config-input-name">

</script>


<!--  CREATE CARD> -->
<script type="text/javascript">
    RED.nodes.registerType('create-card',{
        category: 'social-output',
        color: '#298FCA',
        defaults: {
            trello: {value: "", type:"trello-credentials", required:true},
            name: {value:""}
        },
        inputs:1,
        outputs:0,
        icon: "trello.png",
        align: "right",
        label: function() {
            return this.name||"Create Card";
        }
    });
</script>

<script type="text/x-red" data-template-name="create-card">
  <div class="form-row">
    <label for="node-input-trello"><i class="fa fa-user"></i> <span data-i18n="trello.label.trello-id"></span></label>
    <input type="text" id="node-input-trello">
  </div>
</script>

<script type="text/x-red" data-help-name="create-card">
    <p>A simple node to create a Trello Card</p>
</script>

<!--  GET BOARDS> -->
<script type="text/javascript">
    RED.nodes.registerType('get-boards',{
        category: 'social',
        color: '#298FCA',
        defaults: {
            trello: {type:"trello-credentials", required:true}
        },
        inputs:1,
        outputs:1,
        icon: "trello.png",
        label: function() {
            return this.name||"Get Boards";
        }
    });
</script>

<script type="text/x-red" data-template-name="get-boards">
  <div class="form-row">
    <label for="node-input-trello"><i class="fa fa-user"></i> <span data-i18n="trello.label.trello-id"></span></label>
    <input type="text" id="node-input-trello">
  </div>
</script>

<script type="text/x-red" data-help-name="get-boards">
    <p>A simple node to create a Trello Card</p>
</script>