Partially implements #9 by adding a date selector

planner/urls.py

@@ -5,6 +5,7 @@
 
 urlpatterns = patterns('',
                        (r'^getevents/$', get_events),
+                       (r'^getevents/(\d{4}-\d{2}-\d{2})--(\d{4}-\d{2}-\d{2})/$', get_events),
                        (r"^event/(?P<eventtype>[\w|\W]+)/form/(?P<pk>\d{1,6})/$", event_form),
                        (r"^event/(?P<eventtype>[\w|\W]+)/form/$", event_form),
                        (r"^event/(?P<eventtype>[\w|\W]+)/delete/(?P<pk>\d{1,6})/$", event_delete),

planner/views.py

@@ -4,6 +4,8 @@
 import calendar
 import operator
 import urllib
+import re
+from datetime import date
 
 from django.shortcuts import render_to_response, redirect, render
 from django.template import RequestContext
@@ -31,6 +33,8 @@
 from django.utils.decorators import method_decorator
 import logging
 
+p = re.compile(r'(\d{4})-(\d{2})-(\d{2})')
+
 logger = logging.getLogger("churchplanner")
 
 class AssociateRedirect(OAuthRedirect):
@@ -80,16 +84,20 @@ def handle_new_user(self, provider, access, information):
         return redirect("/register/")
 
 @login_required
-def get_events(request):
+def get_events(request, start, end):
     """This returns all events, or a subset of them. Parameters are passed in the GET request."""
+    start = date(*map(int, p.match(start).groups()))
+    end = date(*map(int, p.match(end).groups())) 
+
     data = []
-    events = []
+    events = Event.objects.filter(event__start_time__gte= start, event__start_time__lte = end).order_by("event__start_time")
     if 'eventtype' in request.GET:
-        for eventtype in request.GET['eventtype'].split(","):
-            events = chain(events, Event.objects.filter(event__start_time__gte= datetime.datetime.now(), event_type__name=eventtype))
-
-    else: #Means we are returning all events
-        events = Event.objects.filter(event__start_time__gte= datetime.datetime.now()).order_by("event__start_time")
+        print request.GET['eventtype']
+        eventtype = [a for a in request.GET['eventtype'].split(",")]   
+        print eventtype 
+        events = events.filter(event_type__name__in = eventtype)
+
+
 
     for event in events:
         data.append({'type': event.event_type.name, 'pk': event.pk, 'verbose_name': event.event_type.name, 'title': event.title, 'timestamp':calendar.timegm(event.event.start_time.timetuple()) * 1000})

static/css/custom-style.css

@@ -12,28 +12,7 @@ The jquery theme can be modified on:
 http://jqueryui.com/themeroller/#!zThemeParams=5d00000100fd05000000000000003d8888d844329a8dfe02723de3e5700cae1f67ed0688a9ba892ddf758bef9acad504773557004be4dc642ad65003de429ed006f5e099f0c7d3a6487ed24bbbeb08218f6afc3c4e4139d665d70e9dabe653dfe2f7a8d2b15be508029c91e123ddd11ee15abdd45535c04fbd2071635f0020bdeec843d32b9c34ec16968e79b68529f83b9a6e76a306069bc6baedbbc153890a5b0bf0b34acf19173a6c0017d9d7f482eaafbc8b268fbcc217189f3cb111980884207bc4e75a7aff7ea40e6976ff2354369e17c7b0876c831278fb0a114b7a31bb70602a48a2cf414316b5c9cfd5cd737ffadf23fe94f7d56f252f00db9e38d290ed2b265fa0c717ae3be18c6f3a78bd2070428a44876939369d3775b879833730614ccdec95d84fb274397ee9c35e2585d445d048de54740623e9751af5812a76f62fd5ad0a87d8dd795d099c588c35da14fe3606326ba198686b53f163563ed97b4999b2b26d7c93cb1d7898547eab2e1a91df41fb6feb6075076f2d18fdd023463728cb11585843286f2d147fe3ea274bacea87de4c27c7f9edd7d759314eb4796239bc332ebb142128cb10bee9d18b48edc7b0502a266a2cdcf5e27332d2e02d4819291dbcc8bb417a3af6e0cbe2b81492212fa911dbcee1badf1b18fef56104dc
 */
 
-/* FONT INCLUDES */
 
-@font-face
-{
-font-family: BreeSerif;
-src: url('/static/fonts/BreeSerif-Regular.ttf');
-}
-
-@font-face
-{
-font-family: OpenSans;
-src: url('/static/fonts/OpenSans-Regular.ttf');
-}
-
-@font-face
-{
-font-family: OpenSansLight;
-src: url('/static/fonts/OpenSans-Light.ttf');
-}
-
-/* FONTS END */
-*{font-family:OpenSans;}
 
 
 h1, h2, h3, .widget-title, .mtt_css_larger_font { font-family: BreeSerif; color: #5da9b0; }

static/css/style.css

@@ -20,6 +20,11 @@ h4 {
     margin-left:20px;
 }
 
+.date_selector{
+    margin-left:35px;
+    width: 8em;
+    }
+
 ul.label_selector{
     margin-top:0;
     margin-left:-15px;
@@ -220,8 +225,10 @@ tr:nth-child(odd)            { background-color:#fff; }
     height: 80px;
 }
 
+
 #table-wrapper {
-  position:relative;
+    margin-left: 15%;
+    position:relative;
 }
 #table-scroll {
   height:300px;
@@ -235,6 +242,6 @@ tr:nth-child(odd)            { background-color:#fff; }
 #table-wrapper table thead th .text {
   position:absolute;   
   top:-10px;
-  z-index:2;
+  z-index:-1;
   height:20px;
 }

templates/main.html

@@ -15,10 +15,14 @@
 
 {% block body %}
 <div id="sidebar">
+    <h4 class="select_title">Datum</h4>
+    <input class="date_selector" type="text" id="event_start_date">
+    <input class="date_selector" style="margin-top: 0.2em;" type="text" id="event_end_date">
+
     <h4 class="select_title">Evenemang</h4>
     <ul class="label_selector" id="event_selector">
     {% for name in eventtype %}
-        <li class="label_selector" value={{name}}>{{name}}</li>
+        <li class="label_selector" value="{{name}}">{{name}}</li>
     {% endfor %}
     </ul>
 </div>
@@ -51,13 +55,14 @@ <h4 class="select_title">Evenemang</h4>
 
 <script>
 function get_events() {
+    var url = "planner/getevents/" + $("#event_start_date").val() + '--' + $("#event_end_date").val() + '/'
     if ($.selected_events.length == 0){
-        $.getJSON( "planner/getevents/", function( data ) {
+        $.getJSON( url, function( data ) {
             update_events(data);
             });
         }
     else {
-        $.getJSON( "planner/getevents/", "eventtype="+$.selected_events, function( data ) {
+        $.getJSON( url, "eventtype="+ encodeURI($.selected_events), function( data ) {
             update_events(data);
             });
     }
@@ -71,8 +76,6 @@ <h4 class="select_title">Evenemang</h4>
 
     items.push( "<tr id=" + val.pk + " type='" + val.type + "'><td>" + val.title + "</td>" + "<td>" + val.verbose_name + "</td>" +  "<td>"+d.getDate() + "/" + (d.getMonth()+1) + "</td></tr>" );
     });
-    console.log(items);
-
 
     $("#table-scroll").html('<table class="eventtable"> \
             <thead>\
@@ -97,12 +100,27 @@ <h4 class="select_title">Evenemang</h4>
 }
 
 $(function () {
+    datepicker_options = {
+        dateFormat: "yy-mm-dd",
+        firstDay: 1,
+        onSelect: function(){
+            get_events();
+        }
+    }
+
     $.selected_events = [];
+
+    $( "#event_start_date" ).datepicker(datepicker_options); 
+    $( "#event_end_date" ).datepicker(datepicker_options);
+
+    $( "#event_start_date").datepicker( "setDate", new Date())
+    $( "#event_end_date" ).datepicker( "setDate", "+6m" );
+
     get_events();
+
     $( "ul.label_selector").bind( "mousedown", function ( e ) {
         e.metaKey = true;
         val = $(e.target).attr("value");
-
         if ($.inArray(val, $.selected_events) != -1){
             $.selected_events.splice($.inArray(val, $.selected_events), 1);
             }
@@ -141,7 +159,10 @@ <h4 class="select_title">Evenemang</h4>
         $("#data").load(encodeURI("/planner/event/" + $(this).attr("value") + "/form/")); 
     });
 
-    $("#sidebar").width($("#logo").width());   
+    $("#sidebar").width($("#logo").width());  
+
+    console.log("here");
+
 });
 </script>
 {% endblock %}