Now with support for days!

src/program/consumers.py

@@ -13,7 +13,14 @@ class ScheduleConsumer(JsonWebsocketConsumer):
     def connect(self, message, **kwargs):
         camp_slug = message.http_session['campslug']
         camp = Camp.objects.get(slug=camp_slug)
-        days = list(map(lambda x: {'repr': x.lower.strftime('%A %Y-%m-%d'), 'iso': x.lower.strftime('%Y-%m-%d')}, camp.get_days('camp')))
+        days = list(map(
+            lambda day:
+                { 'repr': day.lower.strftime('%A %Y-%m-%d')
+                , 'iso': day.lower.strftime('%Y-%m-%d')
+                , 'day_name': day.lower.strftime('%A')
+                },
+            camp.get_days('camp')
+        ))
         event_instances_query_set = EventInstance.objects.filter(event__camp=camp)
         event_instances = list(map(lambda x: x.to_json(), event_instances_query_set))
         self.send({

src/program/models.py

@@ -472,6 +472,7 @@ class EventInstance(CampRelatedModel):
             'fg-color': '#fff' if self.event.event_type.light_text else '#000',
             'event_type': self.event.event_type.slug,
             'location': self.location.slug,
+            'timeslots': self.timeslots,
         }
 
         if user and user.is_authenticated:

src/program/static/js/event_instance_websocket.js

@@ -1,6 +1,6 @@
 const webSocketBridge = new channels.WebSocketBridge();
 var modals = {};
-var EVENT_INSTANCES, DAYS;
+var EVENT_INSTANCES = [], DAYS = [], CONFIG = {};
 
 function toggleFavoriteButton(button) {
     if(button.getAttribute('data-state') == 'true') {
@@ -27,8 +27,9 @@ function toggleFavoriteButton(button) {
     }
 }
 
-webSocketBridge.connect('/schedule/');
+function setup_websocket() {
-webSocketBridge.listen(function(payload, stream) {
+  webSocketBridge.connect('/schedule/');
+  webSocketBridge.listen(function(payload, stream) {
       if(payload['action'] == 'event_instance') {
           event_instance_id = payload['event_instance']['id'];
           modal = modals[event_instance_id];
@@ -61,8 +62,18 @@ webSocketBridge.listen(function(payload, stream) {
       if(payload['action'] == 'init') {
         EVENT_INSTANCES = payload['event_instances'];
         DAYS = payload['days'];
+        render();
+      }
+  });
+}
 
-      function findGetParameter(parameterName) {
+function init(config) {
+    CONFIG = config;
+    setup_websocket();
+    render();
+}
+
+function findGetParameter(parameterName) {
     var result = null,
         tmp = [];
     location.search
@@ -75,17 +86,140 @@ webSocketBridge.listen(function(payload, stream) {
         }
       });
     return result;
-      }
+}
 
+function get_parameters() {
+
+    var day_parameter = findGetParameter('day');
+    var filter_day = day_parameter != null ? day_parameter.split(',') : [];
     var type_parameter = findGetParameter('type');
-      var types = type_parameter != null ? type_parameter.split(',') : [];
+    var filter_types = type_parameter != null ? type_parameter.split(',') : [];
     var location_parameter = findGetParameter('location')
-      var locations =  location_parameter != null ? location_parameter.split(',') : [];
+    var filter_locations =  location_parameter != null ? location_parameter.split(',') : [];
 
-      toggleFilterBoxes(types, locations);
+    return {
-      render_schedule(types, locations);
+      'day': filter_day[0],
+      'types': filter_types,
+      'locations': filter_locations
     }
-});
+}
+
+function render() {
+    parameters = get_parameters();
+    toggleFilterBoxes(parameters['types'], parameters['locations']);
+    render_day_menu(parameters['day']);
+
+    if(parameters['day'] != null) {
+      render_day(parameters['types'], parameters['locations'], parameters['day']);
+    } else {
+      render_schedule(parameters['types'], parameters['locations']);
+    }
+}
+
+function render_day_menu(active_iso) {
+  var container = document.getElementById('schedule-days');
+  container.innerHTML = '';
+
+  function set_btn_type(classList, primary) {
+    if(primary == true) {
+      classList.add('btn-primary');
+    } else {
+      classList.add('btn-default');
+    }
+  }
+
+  var all_days = document.createElement('a');
+  all_days.classList.add('btn');
+  set_btn_type(all_days.classList, active_iso == null);
+  all_days.innerHTML = 'All days';
+  all_days.addEventListener('click', function(e) {
+    setHistoryState({'day': 'all-days'});
+    render();
+  });
+  container.appendChild(all_days);
+
+  for(var day_id in DAYS) {
+    var day_link = document.createElement('a');
+    day_link.classList.add('btn');
+    set_btn_type(day_link.classList, DAYS[day_id]['iso'] == active_iso);
+    day_link.dataset.iso = DAYS[day_id]['iso'];
+    day_link.innerHTML = DAYS[day_id]['day_name'];
+
+    day_link.addEventListener('click', function(e) {
+      setHistoryState({
+        'day': this.dataset.iso
+      });
+      render();
+    });
+
+    container.appendChild(day_link);
+  }
+}
+
+function render_day(types, locations, day) {
+
+  function hoursTohhmm(hours){
+    var hour = Math.floor(Math.abs(hours));
+    var minutes = Math.floor((Math.abs(hours) * 60) % 60);
+    if(hour > 24) {
+      hour = hour - 24;
+    }
+    return (hour < 10 ? "0" : "") + hour + ":" + (minutes < 10 ? "0" : "") + minutes;
+  }
+
+  var event_instances = get_instances(types, locations, day);
+  var schedule_container = document.getElementById('schedule-container');
+  schedule_container.innerHTML = '';
+
+  var day_table = document.createElement('table');
+  schedule_container.appendChild(day_table);
+  day_table.classList.add('table');
+  day_table.classList.add('day-table');
+  day_table_body = document.createElement('tbody');
+  day_table.appendChild(day_table_body);
+
+  var array_length = (24*60)/CONFIG['schedule_timeslot_length_minutes'];
+  var timeslots_ = Array(array_length);
+  var timeslots = [];
+  for(var i=0; i<timeslots_.length; i++) {
+    timeslots.push(
+        { 'offset': i * CONFIG['schedule_timeslot_length_minutes']
+        , 'minutes_since_midnight': (CONFIG['schedule_midnight_offset_hours'] * 60) + (i * CONFIG['schedule_timeslot_length_minutes'])
+        }
+    );
+  }
+
+  var timeslot_trs = {};
+  for(var timeslots_index in timeslots) {
+    var timeslot_tr = document.createElement('tr');
+    day_table_body.appendChild(timeslot_tr);
+    var timeslot_td = document.createElement('td');
+    timeslot_tr.appendChild(timeslot_td);
+
+    var minutes_since_midnight = timeslots[timeslots_index]['minutes_since_midnight'];
+    if(minutes_since_midnight / 60 % 1 == 0) {
+      timeslot_td.innerHTML = hoursTohhmm(minutes_since_midnight / 60);
+    }
+    timeslot_trs[hoursTohhmm(minutes_since_midnight / 60)] = timeslot_tr;
+  }
+  for(var event_instances_index in event_instances) {
+    var event_instance = event_instances[event_instances_index];
+    var event_instance_td = document.createElement('td');
+    event_instance_td.innerHTML = event_instance['title'];
+    event_instance_td.setAttribute('rowspan', event_instance['timeslots']);
+    event_instance_td.classList.add('event-td');
+    event_instance_td.setAttribute(
+        'style',
+        'background-color: ' + event_instance['bg-color'] +
+        '; color: ' + event_instance['fg-color']);
+    event_instance_td.onclick = openModal
+    event_instance_td.dataset.eventInstanceId = event_instance['id'];
+
+    var timeslot_tr = timeslot_trs[event_instance.from.slice(11, 16)];
+
+    timeslot_tr.appendChild(event_instance_td);
+  }
+}
 
 function render_schedule(types, locations) {
   var event_instances = get_instances(types, locations);
@@ -101,7 +235,7 @@ function render_schedule(types, locations) {
         return event_day == day['iso'];
       }
     );
-    return render_day(day, day_event_instances);
+    return render_schedule_day(day, day_event_instances);
   });
 
   for(day_id in rendered_days) {
@@ -110,7 +244,7 @@ function render_schedule(types, locations) {
   }
 }
 
-function render_day(day, event_instances) {
+function render_schedule_day(day, event_instances) {
     var element = document.createElement('div');
     element.classList.add('schedule-day-row');
     var day_label = document.createElement('h4');
@@ -146,8 +280,15 @@ function render_event_instance(event_instance) {
     return element
 }
 
-function get_instances(types, locations) {
+function get_instances(types, locations, day) {
   var event_instances = EVENT_INSTANCES.slice(0);
+  if(day != undefined && day != null) {
+    event_instances = event_instances.filter(
+      function(event_instance) {
+        return event_instance.from.slice(0, 10) == day;
+      }
+    );
+  }
   if(locations.length != 0) {
     event_instances = event_instances.filter(
       function(event_instance) {
@@ -179,8 +320,75 @@ function openModal(e) {
     modal = modals[event_instance_id];
 
     if(modal == undefined) {
-        template = document.getElementById('event-template');
+        modal = document.createElement('div');
-        modal = template.cloneNode(true);
+        modal.classList.add('modal');
+        modal.setAttribute('tabindex', '-1');
+        modal.setAttribute('role', 'dialog');
+
+        modal_dialog = document.createElement('div');
+        modal_dialog.classList.add('modal-dialog');
+        modal.setAttribute('role', 'document');
+        modal.appendChild(modal_dialog);
+
+        modal_content = document.createElement('div');
+        modal_content.classList.add('modal-content');
+        modal_dialog.appendChild(modal_content);
+
+        modal_header = document.createElement('div');
+        modal_header.classList.add('modal-header');
+        modal_content.appendChild(modal_header);
+
+        modal_close_button = document.createElement('button');
+        modal_close_button.setAttribute('type', 'button');
+        modal_close_button.setAttribute('aria-label', 'Close');
+        modal_close_button.dataset.dismiss = 'modal';
+        modal_close_button.classList.add('close');
+        modal_close_button.innerHTML = '<span aria-hidden="true">&times;</span></button>';
+
+        modal_title = document.createElement('h4');
+        modal_title.classList.add('modal-title')
+
+        modal_header.appendChild(modal_close_button);
+        modal_header.appendChild(modal_title);
+
+
+        modal_body_content = document.createElement('div');
+        modal_body_content.classList.add('modal-body');
+        modal_body_content.classList.add('modal-body-content');
+        modal_content.appendChild(modal_body_content);
+
+        modal_body = document.createElement('div');
+        modal_body.classList.add('modal-body');
+        modal_content.appendChild(modal_body);
+        modal_body.innerHTML = '<h4>Speaker(s):</h4><ul class="speakers"></ul>';
+
+        modal_footer = document.createElement('div');
+        modal_footer.classList.add('modal-footer');
+        modal_content.appendChild(modal_footer);
+
+        close_button = document.createElement('button');
+        close_button.setAttribute('type', 'button');
+        close_button.classList.add('btn');
+        close_button.classList.add('btn-default');
+        close_button.classList.add('pull-left');
+        close_button.dataset.dismiss = "modal";
+        close_button.innerHTML = "Close";
+        modal_footer.appendChild(close_button);
+
+        favorite_button = document.createElement('a');
+        favorite_button.classList.add('btn');
+        favorite_button.classList.add('btn-success');
+        favorite_button.classList.add('favorite-button');
+        favorite_button.innerHTML = '<i class="fa fa-star"></i> Favorite</a>';
+        modal_footer.appendChild(favorite_button);
+
+        more_button = document.createElement('a');
+        more_button.classList.add('btn');
+        more_button.classList.add('btn-info');
+        more_button.classList.add('more-button');
+        more_button.innerHTML = '<i class="fa fa-info"></i> More</a>';
+        modal_footer.appendChild(more_button);
+
         body = document.getElementsByTagName('body')[0];
         body.appendChild(modal);
         modal.setAttribute('id', 'event-modal-' + event_instance_id)
@@ -209,30 +417,60 @@ filter.addEventListener('change', function(e) {
     return box.value
   })
   var location_input = Array.prototype.slice.call(document.querySelectorAll('.location-checkbox:checked'));
-  var event_locations = location_input.map(function(box) {
+  var locations = location_input.map(function(box) {
     return box.value
   })
 
-  var type_part = (types.length == 0) ? [] : ['type='] + types.join(',');
+  toggleFilterBoxes(types, locations);
-  var location_part = (event_locations.length == 0) ? [] : ['location='] + event_locations.join(',');
+  setHistoryState({
-
+    'types': types,
-  history.pushState({}, '', "?" + type_part + "&" + location_part);
+    'locations': locations
-
+  });
-  render_schedule(types, event_locations);
+  render();
 });
 
+
+function setHistoryState(parts) {
+
+  var day = parts['day'];
+  var types = parts['types'];
+  var locations = parts['locations'];
+
+  var query = '?';
+
+  day = day == undefined ? findGetParameter('day') : day;
+  if(day != null && day != 'all-days') {
+    query = query + "day=" + day + "&";
+  }
+
+  types = types == undefined ? findGetParameter('type') : types.join(',');
+  if(types != null && types.length > 0) {
+    var type_part = 'type=' + types;
+    query = query + type_part + "&";
+  }
+
+  locations = locations == undefined ? findGetParameter('location') : locations.join(',');
+  if(locations != null && locations.length > 0) {
+    var location_part = 'location=' + locations;
+    query = query + location_part;
+  }
+
+  history.replaceState({}, '', query);
+
+}
+
 function toggleFilterBoxes(types, locations) {
   var type_input = Array.prototype.slice.call(document.querySelectorAll('.event-type-checkbox'));
   type_input.map(function(box) {
     if(types.includes(box.value)) {
-      box.checked = !box.checked;
+      box.checked = true;
     }
     return box;
   });
   var location_input = Array.prototype.slice.call(document.querySelectorAll('.location-checkbox'));
   location_input.map(function(box) {
     if(locations.includes(box.value)) {
-      box.checked = !box.checked;
+      box.checked = true;
     }
     return box;
   });

src/program/templates/event_modal.html

@@ -1,22 +0,0 @@
-    <div class="modal" id="event-template" tabindex="-1" role="dialog">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-            <h4 class="modal-title"></h4>
-          </div>
-          <div class="modal-body modal-body-content">
-          </div>
-          <div class="modal-body">
-              <h4>Speaker(s):</h4>
-              <ul class="speakers">
-              </ul>
-          </div>
-          <div class="modal-footer">
-            <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
-            <a class="favorite-button btn btn-success"><i class="fa fa-star"></i> Favorite</a>
-            <a class="more-button btn btn-info" href=""><i class="fa fa-info"></i> More</a>
-          </div>
-        </div>
-      </div>
-    </div>

src/program/templates/schedule_base.html

@@ -4,17 +4,7 @@
 {% block program_content %}
 
 <div class="row">
-        <div class="schedule-days btn-group">
+    <div id="schedule-days" class="btn-group schedule-days">
-            <a href="{% url 'schedule_index' camp_slug=camp.slug %}" class="btn btn-{% if request.resolver_match.url_name == 'schedule_index' %}primary{% else %}default{% endif %}">
-            <li>All days</li>
-            </a>
-            {% for day in camp.camp_days %}
-            {% with month_padded=day.lower.date|date:"m" day_padded=day.lower.date|date:"d" %}
-            <a href="{% url 'schedule_day' camp_slug=camp.slug year=day.lower.date.year month=month_padded day=day_padded %}" class="btn btn-{% if urlyear and urlyear|add:"0" == day.lower.date.year and urlmonth == month_padded and urlday == day_padded %}primary{% else %}default{% endif %}">
-                {{ day.lower.date|date:"l" }}
-            </a>
-            {% endwith %}
-            {% endfor %}
     </div>
 </div>
 

src/program/templates/schedule_overview.html

@@ -7,36 +7,15 @@
 
 <div id="schedule-container"></div>
 
-{% comment %}
-{% if eventinstances %}
-{% for day in camp.camp_days %}
-  {{ day.lower.date|date:"D d/m" }} <br />
-  <div style="display: flex; flex-wrap: wrap;">
-    {% for eventinstance in eventinstances %}
-    {% if eventinstance.schedule_date == day.lower.date %}
-    <a class="event"
-       href="{% url 'event_detail' camp_slug=camp.slug slug=eventinstance.event.slug %}"
-       style="background-color: {{ eventinstance.event.event_type.color }}; color: {% if eventinstance.event.event_type.light_text %}white{% else %}black{% endif %};"
-       data-eventinstance-id="{{ eventinstance.id }}"
-       >
-        <small>{{ eventinstance.when.lower|date:"H:i" }} - {{ eventinstance.when.upper|date:"H:i" }}</small>
-        <span class="pull-right" style="font-family: 'FontAwesome';">&#x{{ eventinstance.location.icon }};</span>
-      <br />
-      {{ eventinstance.event.title }}
-      <br />
-    </a>
-    {% endif %}
-  {% endfor %}
-  </div>
-<hr />
-{% endfor %}
-{% else %}
-  <h2>No scheduled events for {{ camp.title }} yet!</h2>
-{% endif %}
-{% endcomment %}
-
-{% include "event_modal.html" %}
 <script src="{% static "channels/js/websocketbridge.js" %}"></script>
 <script src="{% static "js/event_instance_websocket.js" %}"></script>
 
+<script>
+init(
+    { 'schedule_timeslot_length_minutes': Number('{{ schedule_timeslot_length_minutes }}')
+    , 'schedule_midnight_offset_hours': Number('{{ schedule_midnight_offset_hours }}')
+    }
+);
+</script>
+
 {% endblock schedule_content %}

src/program/views.py

@@ -274,6 +274,9 @@ class ScheduleView(CampViewMixin, TemplateView):
             context['urlmonth'] = self.kwargs['month']
             context['urlday'] = self.kwargs['day']
 
+        context['schedule_timeslot_length_minutes'] = settings.SCHEDULE_TIMESLOT_LENGTH_MINUTES;
+        context['schedule_midnight_offset_hours'] = settings.SCHEDULE_MIDNIGHT_OFFSET_HOURS;
+
         return context