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 id="statement-box" 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 %>
        </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: 250px; 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; width: 70px;" %>
        <%= link_to "Cancel", "#", class: "btn btn-danger hide", id: "cancel", style: "vertical-align: top; width: 70px;" %>
      </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>
      <% if @query.persisted? %>
        <% dashboards_count = @query.dashboards.count %>
        <% checks_count = @query.checks.count %>
        <% words = [] %>
        <% words << pluralize(dashboards_count, "dashboard") if dashboards_count > 0 %>
        <% words << pluralize(checks_count, "check") if checks_count > 0 %>
        <% if words.any? %>
          <div class="alert alert-info" style="margin-top: 10px; padding: 8px 12px;">
            Part of <%= words.to_sentence %>. Be careful when editing.
          </div>
        <% end %>
      <% end %>
    </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();
  };

  function getSQL() {
    var selectedText = editor.getSelectedText();
    var text = selectedText.length < 10 ? editor.getValue() : selectedText;
    return text.replace(/\n/g, "\r\n");
  }

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

    if (error_line) {
      error_line = parseInt(error_line[1], 10);
      if (editor.getSelectedText().length >= 10) {
        error_line += editor.getSelectionRange().start.row;
      }
      return error_line;
    }
  }

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

  var error_line = null;
  var runningQuery;
  var params = <%= raw blazer_json_escape(variable_params.to_json) %>;
  var previewStatement = <%= raw blazer_json_escape(Hash[Blazer.data_sources.map { |k, v| [k, v.preview_statement] }].to_json) %>;


  function queryDone() {
    runningQuery = null
    $("#run").removeClass("hide")
    $("#cancel").addClass("hide")
  }

  $("#cancel").click( function (e) {
    e.preventDefault()

    cancelQuery(runningQuery)
    queryDone()

    $("#results").html("")
  })

  $(window).unload(function() {
    if (runningQuery) {
      remoteCancelQuery(runningQuery)
    }
  })

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

    $(this).addClass("hide")
    $("#cancel").removeClass("hide")

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

    $("#results").html('<p class="text-muted">Loading...</p>');

    var data = $.extend({}, params, {statement: getSQL(), data_source: $("#query_data_source").val()});

    runningQuery = {};

    runQuery(data, function (data) {
      queryDone()

      $("#results").html(data);

      error_line = getErrorLine();
      if (error_line) {
        editor.getSession().addGutterDecoration(error_line - 1, "error");
        editor.scrollToLine(error_line, true, true, function () {});
        editor.gotoLine(error_line, 0, true);
        editor.focus();
      }
    }, function (data) {
      // TODO show error
      queryDone()
    }, runningQuery);
  });

  $(document).on("change", "#table_names", function () {
    var val = $(this).val();
    if (val.length > 0) {
      var dataSource = $("#query_data_source").val();
      editor.setValue(previewStatement[dataSource].replace("{table}", val), 1);
      $("#run").click();
    }
  });

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

  preventBackspaceNav();
</script>