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

<% title @query.name %>

<script>
  function submitIfCompleted($form) {
    var completed = true;
    $form.find("input[name], select").each( function () {
      if ($(this).val() == "") {
        completed = false;
      }
    });
    if (completed) {
      $form.submit();
    }
  }
</script>

<div style="position: fixed; top: 0; left: 0; right: 0; background-color: whitesmoke; height: 60px; z-index: 1001;">
  <div class="container">
    <div class="row" style="padding-top: 13px;">
      <div class="col-sm-9">
        <%= link_to "Home", root_path, class: "btn btn-primary", style: "vertical-align: top; margin-right: 5px;" %>
        <h3 style="margin: 0; line-height: 34px; display: inline-block;">
          <%= @query.name %>
        </h3>
      </div>
      <div class="col-sm-3 text-right">
        <%= link_to "Edit", edit_query_path(@query, variable_params), class: "btn btn-default" %>
        <%= link_to "Fork", new_query_path(variable_params.merge(statement: @query.statement, data_source: @query.data_source)), class: "btn btn-info" %>

        <% if !@error && @success %>
          <%= button_to "Download", run_queries_path(statement: @statement, query_id: @query.id, format: "csv"), class: "btn btn-primary" %>
        <% end %>
      </div>
    </div>
  </div>
</div>

<div style="margin-bottom: 60px;"></div>

<% if @sql_errors.any? %>
  <div class="alert alert-danger">
    <ul>
      <% @sql_errors.each do |message| %>
        <li><%= message %></li>
      <% end %>
    </ul>
  </div>
<% end %>

<% if @query.description.present? %>
  <p><%= @query.description %></p>
<% end %>

<% if @bind_vars.any? %>
  <form id="bind" method="get" action="<%= url_for(params) %>" class="form-inline" style="margin-bottom: 10px;">
    <% date_vars = ["start_time", "end_time"] %>
    <% if (date_vars - @bind_vars).empty? %>
      <% @bind_vars = @bind_vars - date_vars %>
    <% else %>
      <% date_vars = nil %>
    <% end %>

    <% @bind_vars.each_with_index do |var, i| %>
      <%= label_tag var, var %>
      <% if (data = @smart_vars[var]) %>
        <%= select_tag var, options_for_select([[nil, nil]] + data, selected: params[var]), style: "margin-right: 20px; width: 200px; display: none;" %>
        <script>
          $("#<%= var %>").selectize({
            create: true
          });
        </script>
      <% else %>
        <%= text_field_tag var, params[var], style: "width: 120px; margin-right: 20px;", autofocus: i == 0 && !var.end_with?("_at") && !params[var], class: "form-control" %>
        <% if var.end_with?("_at") %>
          <script>
            $("#<%= var %>").datepicker({format: "yyyy-mm-dd", autoclose: true, todayBtn: "linked"})
          </script>
        <% end %>
      <% end %>
    <% end %>

    <% if date_vars %>
      <% date_vars.each do |var| %>
        <%= hidden_field_tag var, params[var] %>
      <% end %>

      <%= label_tag nil, date_vars.join(" & ") %>
      <div class="selectize-control single" style="width: 300px;">
        <div id="reportrange" class="selectize-input" style="display: inline-block;">
          <span>Select a time range</span>
        </div>
      </div>

      <script>
        var timeZone = "<%= Blazer.time_zone.tzinfo.name %>";
        var format = "YYYY-MM-DD";
        var now = moment.tz(timeZone);

        function dateStr(daysAgo) {
          return now.clone().subtract(daysAgo || 0, "days").format(format);
        }

        function toDate(time) {
          return moment.tz(time.format(format), timeZone);
        }

        function setTimeInputs(start, end) {
          $("#start_time").val(toDate(start).utc().format());
          $("#end_time").val(toDate(end).endOf("day").utc().format());
        }

        $('#reportrange').daterangepicker(
          {
            ranges: {
             "Today": [dateStr(), dateStr()],
             "Last 7 Days": [dateStr(6), dateStr()],
             "Last 30 Days": [dateStr(29), dateStr()]
            },
            format: format,
            startDate: dateStr(29),
            endDate: dateStr(),
            opens: "left"
          },
          function(start, end) {
            setTimeInputs(start, end);
            submitIfCompleted($("#start_time").closest("form"));
          }
        ).on('apply.daterangepicker', function(ev, picker) {
          setTimeInputs(picker.startDate, picker.endDate);
          $('#reportrange span').html(toDate(picker.startDate).format('MMMM D, YYYY') + ' - ' + toDate(picker.endDate).format('MMMM D, YYYY'));
        })

        if ($("#start_time").val().length > 0) {
          var picker = $("#reportrange").data('daterangepicker');
          picker.setStartDate(moment.tz($("#start_time").val(), timeZone));
          picker.setEndDate(moment.tz($("#end_time").val(), timeZone));
          $("#reportrange").trigger('apply.daterangepicker', picker)
        } else {
          var picker = $("#reportrange").data('daterangepicker');
          $("#reportrange").trigger('apply.daterangepicker', picker);
          submitIfCompleted($("#start_time").closest("form"));
        }
      </script>
    <% end %>

    <input type="submit" class="btn btn-success" value="Run" style="vertical-align: top;" />
  </form>
<% end %>

<pre><code><%= @statement %></code></pre>

<% if @success %>
  <div id="results">
    <p class="text-muted">Loading...</p>
  </div>

  <script>
    var request = $.ajax({
      url: "<%= run_queries_path %>",
      method: "POST",
      data: <%= blazer_json_escape(variable_params.merge(statement: @statement, query_id: @query.id).to_json).html_safe %>,
      dataType: "html"
    }).done(function(data) {
      $("#results").html(data);
      $("#results table").stupidtable().stickyTableHeaders({fixedOffset: 60});
    }).fail(function(jqXHR, textStatus, errorThrown) {
      var message = (typeof errorThrown === "string") ? errorThrown : errorThrown.message;
      $("#results").css("color", "red").html(message);
    });
  </script>
<% end %>

<script>
  hljs.initHighlightingOnLoad();

  $(".form-inline input, .form-inline select").change( function () {
    submitIfCompleted($(this).closest("form"));
  });
</script>