Added a form and adjusted views and templates accordingly

forms.py

@@ -0,0 +1,7 @@
+import datetime
+from django import forms
+from django.contrib.admin.widgets import AdminDateWidget
+
+class DateRangeForm(forms.Form):
+    start = forms.DateField(widget=AdminDateWidget, required=False)
+    end = forms.DateField(widget=AdminDateWidget, required=False)

templates/beijing_air/index.html

@@ -2,6 +2,7 @@
 
 {% block css.custom %}
 {{ block.super }}
+{# <link href="/media/css/forms.css" rel="stylesheet" type="text/css" media="screen"> #}
 <style type="text/css">
 #timeplot {
 	height: 300px;
@@ -14,6 +15,8 @@
 
 {% block js %}
 {{ block.super }}
+<script src="/media/js/core.js" type="text/javascript"></script>
+{{ form.media }}
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
 <script src="http://api.simile-widgets.org/timeplot/1.1/timeplot-api.js" type="text/javascript"></script>
 <script type="text/javascript">
@@ -25,7 +28,7 @@
 		gridColor: '#333',
 		axisLabelsPlacement: 'left',
 		min: 0,
-		max: 510
+		max: 500
 	});
 	var plotInfo = [
 		Timeplot.createPlotInfo({
@@ -34,9 +37,13 @@
 			valueGeometry: aqiRange,
 			timeGeometry: new Timeplot.DefaultTimeGeometry({
 				gridColor: "#333",
-				axisLabelsPlacement: "top"
+				axisLabelsPlacement: "top",
+				min: "{{ start.date }}",
+				max: "{{ end.date }}"
 			}),
 			showValues: true,
+			lineColor: "#222",
+			fillColor: "#663300"
 		})
 	];
 	timeplot = Timeplot.create(document.getElementById("timeplot"), plotInfo);
@@ -62,6 +69,7 @@
 })
 </script>
 
+
 {% endblock %}
 
 {% block title %}Counting Blue Skies in Beijing{% endblock %}
@@ -77,9 +85,16 @@ <h1>Counting blue skies in Beijing</h1>
 {% endblock %}
 <div id="main" class="clear">
 <div id="now" class="span-15 colborder">
-<h2>Today in Beijing:</h2>
-<h3 class="aqi">{{ today }}</h3>
-<p><strong>{{ definition.name }}</strong>: {{ definition.description }}</p>
+	<h2>Today in Beijing:</h2>
+	<h3 class="aqi">{{ today }}</h3>
+	<p><strong>{{ definition.name }}</strong>: {{ definition.description }}</p>
+	<div id="form">
+		<form action="." method="get">
+		<p class="datetime">{{ form.start.label }}: {{ form.start }}</p>
+		<p class="datetime">{{ form.end.label }}: {{ form.end }}</p>
+		<p><input type="submit" value="Go"></p>
+		</form>
+	</div>
 </div>
 
 <div id="updates" class="span-8 last">

views.py

@@ -6,6 +6,7 @@
 from django.shortcuts import render_to_response
 from django.template import RequestContext
 
+from beijing_air.forms import DateRangeForm
 from beijing_air.models import AqiDefinition, SmogUpdate
 
 DEFAULT_RANGE = 30
@@ -31,6 +32,13 @@ def get_range(request):
 
 
 def index(request):
+    if request.GET:
+        form = DateRangeForm(request.GET)
+        if form.is_valid():
+            form = DateRangeForm(form.cleaned_data)
+    else:
+        form = DateRangeForm()
+
     start, end = get_range(request)
     updates = SmogUpdate.objects.range(start, end)
     today = SmogUpdate.objects.daily_avg()