fritz.html

<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()];
        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, undefined, 2);
      }

      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");

        if (config && config.host && service) {
          $.get('fritzbox/actions', {
              url: config.host,
              service: service
            })
            .done(function (data) {
              RED.notify("Actions received.", "info");
              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="red-ui-button"><i class="fa fa-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="red-ui-button"><i class="fa fa-search"></i></button>
  </div>
  <div class="form-tips">
    Use the msg.payload to pass the arguments in the form of. Required arguments are:
    <pre id="node-input-arguments"></pre>
  </div>
</script>