FanaHOVA/blazer

<% if @bind_vars.any? %>
  <form id="bind" method="get" action="<%= action %>" 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 %>").daterangepicker({singleDatePicker: true, locale: {format: "YYYY-MM-DD"}, autoUpdateInput: false});
            // hack to start with empty date
            $("#<%= var %>").on("apply.daterangepicker", function(ev, picker) {
              $(this).val(picker.startDate.format("YYYY-MM-DD"));
              $(this).change();
            });
          </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>
        <%= blazer_js_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()]
            },
            locale: {
              format: format
            },
            startDate: dateStr(29),
            endDate: dateStr(),
            opens: "right"
          },
          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 %>