razum2um/lurker

<script type="text/jsx">
  /** @jsx React.DOM */
  var SubmitForm = React.createClass({
    mixins: [ReactCatalyst.LinkedStateMixin],

    runsOnLocalhost: function() {
      return window.location.hostname == '127.0.0.1' || window.location.hostname == 'localhost'
    },

    getInitialState: function() {
      var state = {
        payload: JSON.parse('<%= endpoint.post_params.to_json.html_safe %>'),
        values: JSON.parse('<%= endpoint.url_params.map { |k,v| { label:k, value: v} } .to_json.html_safe %>'),
        hosts: JSON.parse('<%= service.domains.to_json.html_safe %>'),
        template: '<%= endpoint.named_path %>',
        method: '<%= endpoint.verb %>',
        host: '<%= service.default_domain %>',
        requestMediaTypes: JSON.parse('<%= service.request_media_types.to_json.html_safe %>'),
        requestMediaType: '<%= service.default_request_media_type %>'
      };
      if (state.method === 'GET') {
        state.requestMediaType = 'application/x-www-form-urlencoded';
        state.requestMediaTypes = [state.requestMediaType];
      }
      return this.autodetectLocalhost(state);
    },

    autodetectLocalhost: function (state) {
      var hosts = state.hosts;

      var includesLocalhost = false;
      for (var name in hosts) {
        if (hosts.hasOwnProperty(name)) {
          if (hosts[name] === '/') {
            includesLocalhost = true;
            if (this.runsOnLocalhost()) {
              hosts[name] = window.location.origin;
            }
          } else {
            hosts[name] = hosts[name].replace(/\$/, '');
          }

          if (hosts[name] === window.location.origin) {
            state.host = hosts[name];
          }
        }
      }

      if (!includesLocalhost && this.runsOnLocalhost()) {
        state.host = hosts['Local'] = window.location.origin;
      }
      return state;
    },

    renderHostOptions: function() {
      var hostOptions = [];
      for (var name in this.state.hosts) {
        hostOptions.push(<option key={name} value={this.state.hosts[name]}>{name}</option>);
      }
      return hostOptions;
    },

    renderRequestMediaTypeOptions: function () {
      var mediaTypes = this.state.requestMediaTypes;
      var requestMediaTypeOptions = [];
      for (var i = 0; i < mediaTypes.length; i++) {
        requestMediaTypeOptions.push(<option key={i}>{mediaTypes[i]}</option>)
      }
      return requestMediaTypeOptions;
    },

    handleSubmit: function() {
      var s = this.state;
      Lurker.performRequest(s.host, s.method, s.template, s.values, s.payload, s.requestMediaType);
      return false;
    },

    render: function() {
      var actionUrl = Lurker.buildActionUrl(this.state.host, this.state.template, this.state.values);
      var curl = Lurker.generateCurlCommand(actionUrl, this.state.method, this.state.payload, this.state.requestMediaType);
      return (
        <form accept-charset="UTF-8" action={actionUrl} onSubmit={this.handleSubmit} id="payload" className="bs-example hidden-print form-horizontal" method="<%= endpoint.form_verb %>">
          <input name="_method" value="<%= endpoint.verb %>" type="hidden" />
          <div className="form-group">
            <label className="control-label col-sm-3" forHtml="hostname">Target Host</label>
            <div className="col-sm-9">
              <select id="hostname" className="form-control" valueLink={this.linkState('host')}>
                {this.renderHostOptions()}
              </select>
            </div>
          </div>
          <% if endpoint.verb != 'GET' && service.request_media_types.size > 1 %>
            <div className="form-group">
              <label className="control-label col-sm-3" forHtml="requestMediaType">Request Media Type</label>
              <div className="col-sm-9">
                <select id="requestMediaType" className="form-control" valueLink={this.linkState('requestMediaType')}>
                  {this.renderRequestMediaTypeOptions()}
                </select>
              </div>
            </div>
          <% end %>

          <div id="curl" className="form-group">
            <p className="control-label col-sm-3">cURL</p>
            <div className="col-sm-9">
              <pre>{curl}</pre>
            </div>
          </div>

          <% if endpoint.url_params.present? %>
            <div className="bs-example url-params" id="url-payload">
              <fieldset ref="url-params">
                <% endpoint.url_params.each_with_index do |(label, value), i| %>
                  <div className="form-group">
                    <label className="control-label col-sm-3" htmlFor="<%= label %>"><%= label %></label>
                    <div className="col-sm-9">
                      <input type="text" valueLink={this.linkState('values.<%= i %>.value')} className="form-control"></input>
                    </div>
                  </div>
                <% end %>
              </fieldset>
            </div>
          <% end %>

          <% if endpoint.post_params.present? %>
            <div className="bs-example post-params" id="post-payload">
              <fieldset ref="post-params">
                <%= Lurker::FormBuilder.new(endpoint.post_params).html.html_safe %>
              </fieldset>
            </div>
          <% end %>

          <div className="form-group row">
            <div className="col-sm-offset-3 col-sm-9">
              <input id="submit-api" type="submit" className="btn btn-primary pull-right"></input>
            </div>
          </div>
        </form>
      );
    }
  });

  var submitForm = <SubmitForm template="<%= endpoint.named_path %>" />;
  // FIXME: see multidomain feature - cannot select node in phantomjs
  window.submitForm = submitForm;
  React.renderComponent(submitForm, document.getElementById('submit-form'));
</script>
<div id="submit-form"></div>