bornhack-website/src/program/templates/schedule_base.html

{% extends 'program_base.html' %}
{% load dateutils %}

{% block program_content %}

<style>
  .fa-select {
      font-family: sans-serif, 'FontAwesome';
  }
</style>

<div class="btn-group btn-group-justified">

<form method="get" id="filter" class="form-inline">

  <div class="form-group">
    <select id="day" name="day" class="form-control filter-control">
      <option value="">All Days</option>
      {% for day in camp.camp_days %}
        {% with month_padded=day.lower.date|date:"m" day_padded=day.lower.date|date:"d" %}
        <option
          value="{{ day.lower.date|date:"Y-m-d" }}"
          {% if urlyear and urlyear|add:"0" == day.lower.date.year and urlmonth == month_padded and urlday == day_padded %}
          selected
          {% endif %}>
              {{ day.lower.date|date:"l" }}
        </option>
        {% endwith %}
      {% endfor %}
    </select>

    <select id="event_type" name="event_type" class="form-control filter-control">
      <option value="">All Types</option>
      {% for type in camp.event_types %}
      <option value="{{ type.slug }}"{% if eventtype and eventtype == type %}selected{% endif %}>{{ type.name }}</option>
      {% endfor %}
    </select>

    <select id="location" name="location" class="fa-select form-control filter-control">
      <option value="">&#xf0ac; All Locations</option>
      {% for loc in camp.event_locations %}
        <option value="{{ loc.slug }}" {% if location and location == loc %}selected{% endif %}>&#x{{ loc.icon }}; {{ loc.name }}</option>
      {% endfor %}
    </select>

    {% if request.user.is_authenticated %}
    <a href="{% url 'proposal_list' camp_slug=camp.slug %}" class="btn btn-default">Manage My Proposals</a>
    {% endif %}

  </div>
</form>
</div>

<hr />

{% block schedule_content %}
{% endblock schedule_content %}

{% url 'schedule_index' camp_slug=camp.slug as baseurl %}

<script>
    $('.filter-control').on('change', function() {
        var day = $('#day').val();
        var type = $('#event_type').val();
        var loc = $('#location').val();
        var url = "{{baseurl}}";

        if(day) {
          url = url + day + '/';
        }

        if(type != '' || loc != '') {
          url = url + '?';
          if(type != '') {
              url = url + 'type=' + type;
              if(loc != '') { url = url + '&'; }
          }
          if(loc != '') {
              url = url + 'location=' + loc;
          }
        }

        window.location.href = url;
    });
</script>

{% endblock program_content %}