fritz.html

<script type="text/javascript">
  RED.nodes.registerType("fritzbox-config", {
    category: "config",
    defaults: {
      name: {value:"", required: false},
      host: {value:"fritz.box", required: true},
      port: {value:49000, required: true},
      ssl: {value: false, required: true}
    },
    credentials: {
      username: {type: "text"},
      password: {type: "password"}
    },
    label: function() {
      return this.name ? this.name : "FRITZ!Box";
    }
  });
</script>

<script type="text/x-red" data-template-name="fritzbox-config">
    <div class="form-row">
        <label for="node-config-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-config-input-name"/>
    </div>
    <div class="form-row">
        <label for="node-config-input-host"><i class="fa fa-globe"></i> Host</label>
        <input type="text" id="node-config-input-host" style="width: 40%;"/>
        <input type="text" id="node-config-input-port" style="width:60px" />
    </div>
    <div class="form-row">
      <label>&nbsp;</label>
      <input type="checkbox" id="node-config-input-ssl" placeholder="" style="display: inline-block; width: auto; vertical-align: top;">
      <label for="node-config-input-ssl" style="width: 70%;">Is SSL connection?</label>
    </div>
    <div class="form-row">
        <label for="node-config-input-username"><i class="fa fa-user"></i> Username</label>
        <input type="text" id="node-config-input-username" />
    </div>
    <div class="form-row">
        <label for="node-config-input-password"><i class="fa fa-key"></i> Password</label>
        <input type="password" id="node-config-input-password" />
    </div>
</script>



<script type="text/javascript">
  RED.nodes.registerType("fritzbox-in", {
    category: "fritzbox",
    paletteLabel: "FRITZ!Box",
    color: "#2E90DD",
    defaults: {
      device: {type:"fritzbox-config", required: true},
      name: {value:"", required: false},
      service: {value:"", required: true},
      action: {value:"", required: true},
      arguments: {value:"", required: false}
    },
    inputs:1,
    outputs:1,
    icon: "fritz.png",
    label: function() {
      return this.name ? this.name : "FRITZ!Box";
    },
    oneditprepare: function() {
      var node = this;
      var actions = [];
      if(node.service) {
        $('#node-input-service').append('<option value="' + node.service + '">' + node.service + '</option>').val(node.service);
      }

      if(node.action) {
        $('#node-input-action').append('<option value="' + node.action + '">' + node.action + '</option>').val(node.action);
      }

      if(node.arguments) {
        $('#node-input-arguments').html(node.arguments);
      }

      $('#node-input-scandev').click(function() {
        scanServices();
      });

      $('#node-input-scansrv').click(function() {
        scanActions();
      });

      $('#node-input-action').change(function() {
        var action = actions[$('#node-input-action').val()];
        console.log(action);
        if(action) {
          $('#node-input-arguments').val(formatArguments(action.inArgs));
          $('#node-input-arguments').html($('#node-input-arguments').val());
        }
      });

      function formatArguments(arguments) {
        var example = {};
        arguments.forEach(function(argument) {
          example[argument] = "value";
        });
        return JSON.stringify(example);
      }

      function scanServices() {
        var current = $('#node-input-service').val();
        var config = RED.nodes.node($('#node-input-device').val());

        RED.notify( "Requesting services from fritzbox.", "info");

        if(config && config.host) {
          $.get( 'fritzbox/services', { url: config.host })
            .done( function(data) {
              RED.notify( "Services received.", "info");
              var services = JSON.parse(data);

              //Clear all services
              $('#node-input-service').find('option').remove();

              services.forEach(function(service) {
                $('#node-input-service').append('<option value="' + service + '">' + service + '</option>');
              });
              $('#node-input-service').val(current);
            })
            .fail(function() {
              RED.notify( "Something went wrong. Please retry.", "error");
            })
        } else {
          RED.notify( "Cannot receive services. Please check required informations: host and provider", "warning");
        }
      }

      function scanActions() {
        var current = $('#node-input-action').val();
        var config = RED.nodes.node($('#node-input-device').val());
        var service = $('#node-input-service').val();

        RED.notify( "Requesting actions from fritzbox.", "info");

        console.log("Updating actions");
        if(config && config.host && service) {
          $.get('fritzbox/actions', { url: config.host, service: service })
            .done( function(data) {
              RED.notify( "Actions received.", "info");
              console.log(data);
              actions = JSON.parse(data);

              //Clear all actions
              $('#node-input-action').find('option').remove();

              for(key in actions) {
                $('#node-input-action').append('<option value="' + key + '">' + key + '</option>');
              }

              $('#node-input-action').val(current);
            })
            .fail(function() {
              RED.notify( "Something went wrong. Please retry.", "error");
            });
        } else {
          RED.notify( "Cannot receive actions. Please check required informations: host, provider and service", "warning");
        }
      }
     }
  });

</script>

<script type="text/x-red" data-template-name="fritzbox-in">
  <div class="form-row">
    <label for="node-input-device"><i class="fa fa-server"></i>Device</label>
    <input type="text" id="node-input-device">
  </div>
  <div class="form-row">
    <label for="node-input-name"><i class="fa fa-tag"></i>Name</label>
    <input type="text" id="node-input-name" />
  </div>
  <div class="form-row">
    <label for="node-input-service"><i class="fa fa-tasks"></i>Service</label>
    <select id="node-input-service" name="node-input-service" style="width: 250px;">
    </select>
    <button type="button" id="node-input-scandev" class="btn"><i class="icon-search"></i></button>
  </div>
  <div class="form-row">
    <label for="node-input-action"><i class="fa fa-tasks"></i>Action</label>
    <select id="node-input-action" name="node-input-action" style="width: 250px;">
    </select>
    <button type="button" id="node-input-scansrv" class="btn"><i class="icon-search"></i></button>
  </div>
  <div class="form-tips">
    Use the msg.payload to pass the arguments in the form of. Required arguments are:
    <span id="node-input-arguments"></span>
  </div>
</script>

<script type="text/javascript">
  RED.nodes.registerType("fritzbox-calllist", {
    category: "fritzbox",
    paletteLabel: "FRITZ!Box Calllist",
    color: "#2E90DD",
    defaults: {
      device: {type:"fritzbox-config", required: true},
      name: {value:"", required: false},
      max: {value: "", required: false, validate: function(v) {
        return ( RED.validators.number()(v) || v === "");
      } }
    },
    inputs:1,
    outputs:1,
    icon: "fritz.png",
    label: function() {
      return this.name ? this.name : "FRITZ!Box Calllist";
    }
  });

</script>

<script type="text/x-red" data-template-name="fritzbox-calllist">
  <div class="form-row">
    <label for="node-input-device"><i class="fa fa-server"></i>Device</label>
    <input type="text" id="node-input-device">
  </div>
  <div class="form-row">
    <label for="node-input-name"><i class="fa fa-tag"></i>Name</label>
    <input type="text" id="node-input-name" />
  </div>
  <div class="form-row">
    <label for="node-input-max"><i class="icon-bookmark"></i>Max results</label>
    <input type="text" id="node-input-max" />
  </div>
</script>