blazer/app/views/blazer/queries/_form.html.erb

<% if @query.errors.any? %>
  <div class="alert alert-danger"><%= @query.errors.full_messages.first %></div>
<% end %>

<%= form_for @query, url: (@query.persisted? ? query_path(@query, variable_params) : queries_path(variable_params)), html: {class: "the_form", autocomplete: "off"} do |f| %>
  <div class="row">
    <div class="col-xs-8">
      <div class= "form-group">
        <%= f.hidden_field :statement %>
        <div id="editor-container">
          <div id="editor"><%= @query.statement %></div>
        </div>
      </div>
      <div class="form-group text-right">
        <div class="pull-left" style="margin-top: 6px;">
          <%= link_to "Back", :back %>
          <% if Blazer.data_sources.size == 1 %>
            <span class="text-muted" style="margin-left: 20px;"> Use {start_time} and {end_time} for time ranges</span>
          <% end %>
        </div>
        <%= f.select :data_source, Blazer.data_sources.values.map { |ds| [ds.name, ds.id] }, {}, class: ("hide" if Blazer.data_sources.size == 1), style: "width: 140px;" %>
        <div id="tables" style="display: inline-block; width: 260px; margin-right: 10px;" class="hide">
          <%= render partial: "tables" %>
        </div>
        <script>
          function updatePreviewSelect() {
            $("#tables").load("<%= tables_queries_path %>?" + $.param({data_source: $("#query_data_source").val()}));
          }
          updatePreviewSelect();
          $("#query_data_source").selectize().change(updatePreviewSelect);
        </script>
        <%= link_to "Run", "#", class: "btn btn-info", id: "run", style: "vertical-align: top;" %>
      </div>
    </div>
    <div class="col-xs-4">
      <div class="form-group">
        <%= f.label :name %>
        <%= f.text_field :name, class: "form-control" %>
      </div>
      <div class="form-group">
        <%= f.label :description %>
        <%= f.text_area :description, placeholder: "Optional", style: "height: 80px;", class: "form-control" %>
      </div>
      <div class="text-right">
        <% if @query.persisted? %>
          <%= link_to "Delete", query_path(@query), method: :delete, "data-confirm" => "Are you sure?", class: "btn btn-danger" %>
          <%= f.submit "Fork", class: "btn btn-info" %>
        <% end %>
        <%= f.submit @query.persisted? ? "Update" : "Create", class: "btn btn-success" %>
      </div>
    </div>
  </div>
<% end %>

<div id="results"></div>

<script>
  var editor = ace.edit("editor");
  editor.setTheme("ace/theme/twilight");
  editor.getSession().setMode("ace/mode/sql");
  editor.setOptions({
    enableBasicAutocompletion: false,
    enableSnippets: false,
    enableLiveAutocompletion: false,
    highlightActiveLine: false,
    fontSize: 12,
    minLines: 10
  });
  editor.renderer.setShowGutter(true);
  editor.renderer.setPrintMarginColumn(false);
  editor.renderer.setPadding(10);
  editor.getSession().setUseWrapMode(true);
  editor.commands.addCommand({
    name: 'run',
    bindKey: {win: 'Ctrl-Enter',  mac: 'Command-Enter'},
    exec: function(editor) {
      $("#run").click();
    },
    readOnly: false // false if this command should not apply in readOnly mode
  });

 // http://stackoverflow.com/questions/11584061/
 function adjustHeight() {
    var lines = editor.getSession().getScreenLength();
    if (lines < 9) {
      lines = 9;
    }

    var newHeight = (lines + 1) * 16;
    $("#editor").height(newHeight.toString() + "px");
    editor.resize();
  };

  editor.getSession().on("change", adjustHeight);
  adjustHeight();
  $("#editor").show();
  editor.focus();

  var error_line = null;
  var xhr;
  var params = <%= raw blazer_json_escape(variable_params.to_json) %>;

  $("#run").click(function (e) {
    e.preventDefault();

    if (error_line) {
      editor.getSession().removeGutterDecoration(error_line - 1, "error");
      error_line = null;
    }

    $("#results").html('<p class="text-muted">Loading...</p>');
    if (xhr) {
      xhr.abort();
    }
    xhr = $.post("<%= run_queries_path %>", $.extend({}, params, {statement: editor.getValue().replace(/\n/g, "\r\n"), data_source: $("#query_data_source").val()}), function (data) {
      $("#results").html(data);

      error_line = /LINE (\d+)/g.exec($("#results").find('.alert-danger').text());

      if (error_line) {
        error_line = parseInt(error_line[1], 10);
        editor.getSession().addGutterDecoration(error_line - 1, "error");
        editor.scrollToLine(error_line, true, true, function () {});
        editor.gotoLine(error_line, 0, true);
        editor.focus();
      }
    });
  });

  if ($("#query_statement").val() != "") {
    $("#run").click();
  }

  $(document).on("change", "#table_names", function () {
    var val = $(this).val();
    if (val.length > 0) {
      editor.setValue("SELECT * FROM " + val + " LIMIT 10");
      $("#run").click();
    }
  });

  $("form.the_form").on("submit", function() {
    $("#query_statement").val(editor.getValue());
    return true;
  });
</script>