Merge pull request #832 from MITx/feature/cdodge/subsection-edit-page

Feature/cdodge/subsection edit page

cms/djangoapps/contentstore/utils.py

@@ -1,13 +1,14 @@
+from django.conf import settings
 from xmodule.modulestore import Location
 from xmodule.modulestore.django import modulestore
 
-'''
-cdodge: for a given Xmodule, return the course that it belongs to
-NOTE: This makes a lot of assumptions about the format of the course location
-Also we have to assert that this module maps to only one course item - it'll throw an
-assert if not
-'''
 def get_course_location_for_item(location):
+    '''
+    cdodge: for a given Xmodule, return the course that it belongs to
+    NOTE: This makes a lot of assumptions about the format of the course location
+    Also we have to assert that this module maps to only one course item - it'll throw an
+    assert if not
+    '''
     item_loc = Location(location)
 
     # check to see if item is already a course, if so we can skip this
@@ -29,3 +30,18 @@ def get_course_location_for_item(location):
         location = courses[0].location
 
     return location
+
+
+def get_lms_link_for_item(item):
+    if settings.LMS_BASE is not None:
+        lms_link = "{lms_base}/courses/{course_id}/jump_to/{location}".format(
+            lms_base=settings.LMS_BASE,
+            # TODO: These will need to be changed to point to the particular instance of this problem in the particular course
+            course_id = modulestore().get_containing_courses(item.location)[0].id,
+            location=item.location,
+        )
+    else:
+        lms_link = None
+
+    return lms_link
+

cms/djangoapps/contentstore/views.py

@@ -43,7 +43,7 @@ from cache_toolbox.core import set_cached_content, get_cached_content, del_cache
 from auth.authz import is_user_in_course_group_role, get_users_in_course_group_by_role
 from auth.authz import get_user_by_email, add_user_to_course_group, remove_user_from_course_group
 from auth.authz import ADMIN_ROLE_NAME, EDITOR_ROLE_NAME
-from .utils import get_course_location_for_item
+from .utils import get_course_location_for_item, get_lms_link_for_item
 
 from xmodule.templates import all_templates
 
@@ -143,13 +143,18 @@ def edit_subsection(request, location):
 
     item = modulestore().get_item(location)
 
+    lms_link = get_lms_link_for_item(item)
+
     # make sure that location references a 'sequential', otherwise return BadRequest
     if item.location.category != 'sequential':
         return HttpResponseBadRequest
 
+    logging.debug('Start = {0}'.format(item.start))
+
     return render_to_response('edit_subsection.html',
                               {'subsection': item,
-                               'create_new_unit_template': Location('i4x', 'edx', 'templates', 'vertical', 'Empty')
+                               'create_new_unit_template': Location('i4x', 'edx', 'templates', 'vertical', 'Empty'),
+                               'lms_link': lms_link
                                })
 
 @login_required
@@ -167,15 +172,7 @@ def edit_unit(request, location):
 
     item = modulestore().get_item(location)
 
-    if settings.LMS_BASE is not None:
-        lms_link = "{lms_base}/courses/{course_id}/jump_to/{location}".format(
-            lms_base=settings.LMS_BASE,
-            # TODO: These will need to be changed to point to the particular instance of this problem in the particular course
-            course_id = modulestore().get_containing_courses(item.location)[0].id,
-            location=item.location,
-        )
-    else:
-        lms_link = None
+    lms_link = get_lms_link_for_item(item)
 
     component_templates = defaultdict(list)
 
@@ -443,15 +440,29 @@ def save_item(request):
 
     # cdodge: also commit any metadata which might have been passed along in the
     # POST from the client, if it is there
-    # note, that the postback is not the complete metadata, as there's system metadata which is
+    # NOTE, that the postback is not the complete metadata, as there's system metadata which is
     # not presented to the end-user for editing. So let's fetch the original and
     # 'apply' the submitted metadata, so we don't end up deleting system metadata
     if request.POST['metadata']:
         posted_metadata = request.POST['metadata']
         # fetch original
         existing_item = modulestore().get_item(item_location)
+
         # update existing metadata with submitted metadata (which can be partial)
+        # IMPORTANT NOTE: if the client passed pack 'null' (None) for a piece of metadata that means 'remove it'
+        for metadata_key in posted_metadata.keys():
+            # NOTE: We don't want clients to be able to delete 'system metadata' which are not intended to be user
+            # editable
+            if posted_metadata[metadata_key] is None and metadata_key not in existing_item.system_metadata_fields:
+                # remove both from passed in collection as well as the collection read in from the modulestore
+                if metadata_key in existing_item.metadata:
+                    del existing_item.metadata[metadata_key]
+                del posted_metadata[metadata_key]
+
+        # overlay the new metadata over the modulestore sourced collection to support partial updates
         existing_item.metadata.update(posted_metadata)
+
+        # commit to datastore
         modulestore().update_metadata(item_location, existing_item.metadata)
 
     return HttpResponse()

cms/static/js/base.js

@@ -31,6 +31,11 @@ $(document).ready(function() {
     $('.sortable-unit-list').sortable();
     $('.sortable-unit-list').disableSelection();
     $('.sortable-unit-list').bind('sortstop', onUnitReordered);
+
+    // expand/collapse methods for optional date setters
+    $('.set-date').bind('click', showDateSetter);
+    $('.remove-date').bind('click', removeDateSetter);
+
 });
 
 // This method only changes the ordering of the child objects in a subsection
@@ -55,6 +60,27 @@ function onUnitReordered() {
 	});
 }
 
+function getEdxTimeFromDateTimeInputs(date_id, time_id, format) {
+    var input_date = $('#'+date_id).val();
+    var input_time = $('#'+time_id).val();
+
+    var edxTimeStr = null;
+
+    if (input_date != '') {
+        if (input_time == '') 
+            input_time = '00:00';
+
+        // Note, we are using date.js utility which has better parsing abilities than the built in JS date parsing
+        date = Date.parse(input_date+" "+input_time);
+        if (format == null)
+            format = 'yyyy-MM-ddTHH:mm';
+
+        edxTimeStr = date.toString(format);
+    }
+
+    return edxTimeStr;
+}
+
 function saveSubsection(e) {
     e.preventDefault();
     
@@ -65,10 +91,18 @@ function saveSubsection(e) {
     
     metadata = {};
     for(var i=0; i< metadata_fields.length;i++) {
-	el = metadata_fields[i];
-	metadata[$(el).data("metadata-name")] = el.value;
+	   el = metadata_fields[i];
+	   metadata[$(el).data("metadata-name")] = el.value;
     } 
 
+
+    // Piece back together the date/time UI elements into one date/time string
+    // NOTE: our various "date/time" metadata elements don't always utilize the same formatting string
+    // so make sure we're passing back the correct format
+    metadata['start'] = getEdxTimeFromDateTimeInputs('start_date', 'start_time');
+    metadata['due'] = getEdxTimeFromDateTimeInputs('due_date', 'due_time', 'MMMM dd HH:mm');
+
+    // reordering is done through immediate callbacks when the resorting has completed in the UI
     children =[];
 
     $.ajax({
@@ -198,8 +232,22 @@ function hideHistoryModal(e) {
     $modalCover.hide();
 }
 
-
-
+function showDateSetter(e) {
+    e.preventDefault();
+    var $block = $(this).closest('.due-date-input');
+    $(this).hide();
+    $block.find('.date-setter').show();
+}
+
+function removeDateSetter(e) {
+    e.preventDefault();
+    var $block = $(this).closest('.due-date-input');
+    $block.find('.date-setter').hide();
+    $block.find('.set-date').show();
+    // clear out the values
+    $block.find('.date').val('');
+    $block.find('.time').val('');
+}
 
 
 

cms/templates/edit_subsection.html

@@ -1,9 +1,18 @@
 <%inherit file="base.html" />
+<%!
+   from time import mktime
+   import dateutil.parser
+   import logging
+   from datetime import datetime
+%>
+
 <%! from django.core.urlresolvers import reverse %>
 <%block name="bodyclass">subsection</%block>
 <%block name="title">CMS Subsection</%block>
 
 <%namespace name="units" file="widgets/units.html" />
+<%namespace name='static' file='static_content.html'/>
+<%namespace name='datetime' module='datetime'/>
 
 <%block name="content">
 <div class="main-wrapper">
@@ -15,14 +24,14 @@
 	  <input type="text" value="${subsection.metadata['display_name']}" class="subsection-display-name-input" data-metadata-name="display_name"/>
 	</div>
 	<div>
-	  <label>Subtitle:</label>
-	  <input type="text" value="${subsection.metadata['subtitle'] if 'subtitle' in subsection.metadata else ''}" class="unit-subtitle" data-metadata-name="subtitle"/>
+	  <label>Format:</label>
+	  <input type="text" value="${subsection.metadata['format'] if 'format' in subsection.metadata else ''}" class="unit-subtitle" data-metadata-name="subtitle"/>
 	</div>
 	<div class="unit-list">
 	  <label>Units:</label>
 	  ${units.enum_units(subsection)}
 	</div>
-	<div>
+	<div class='wip-box'>
 	  <label>Policy:</label>
 	  <textarea class="text-editor">Policy blah, blah, blah…</textarea>
 	</div>					
@@ -35,31 +44,52 @@
 	<div class="window-contents">
 	  <div class="scheduled-date-input row">
 	    <label>Release date:<!-- <span class="description">Determines when this subsection and the units within it will be released publicly.</span>--></label>
-	    <div class="date-setter">
-	      <input type="text" value="10/22/2012" class="date-input" />
-	      <input type="text" value="6:00 am" class="time-input" />
+	    <div class="datepair" data-language="javascript">
+	    	<%
+	    		start_time = datetime.fromtimestamp(mktime(subsection.start)) if subsection.start is not None else None
+	    	%>
+	      <input type="text" id="start_date" value="${start_time.strftime('%m/%d/%Y') if start_time is not None else ''}" placeholder="MM/DD/YYYY" class="date" size='15'/>
+	      <input type="text" id="start_time" value="${start_time.strftime('%H:%M') if start_time is not None else ''}" placeholder="HH:MM" class="time" size='10'/> 
 	    </div>
-	    <p class="notice">The date above differs from the release date of Week 1 – 10/10/2012 at 12:00 am. <a href="#" class="sync-date">Sync to Week 1.</a></p>
+	    <p class="notice wip-box">The date above differs from the release date of Week 1 – 10/10/2012 at 12:00 am. <a href="#" class="sync-date">Sync to Week 1.</a></p>
 	  </div>
 	<div class="due-date-input row">
 	  <label>Due date:</label>
 	  <a href="#" class="set-date">Set a due date</a>
-	  <div class="date-setter">
-	    <p class="date-description"><input type="text" value="10/20/2012" class="date-input" /> <input type="text" value="6:00 am" class="time-input" />
+	  <div class="datepair date-setter">
+	    <p class="date-description">
+	      <%
+	      	# due date uses it own formatting for stringifying the date. As with capa_module.py, there's a utility module available for us to use
+		 	due_date = dateutil.parser.parse(subsection.metadata.get('due')) if 'due' in subsection.metadata else None
+		  %>
+	      <input type="text" id="due_date" value="${due_date.strftime('%Y-%m-%d') if due_date is not None else ''}" placeholder="MM/DD/YYYY" class="date" size='15' /> 
+	      <input type="text" id="due_time" value="${due_date.strftime('%H:%M') if due_date is not None else ''}" placeholder="HH:MM" class="time" size='10' />
 	      <a href="#" class="remove-date">Remove due date</a>
 	    </p>
 	  </div>
 	</div>
-	<div class="visibility row">
-	  <label>Visibility:<!-- <span class="description">Shows or hides this subsection and the units within it.</span>--></label>
-	  <a href="#" class="toggle-off">hide</a><a href="#" class="large-toggle"></a><a href="#" class="toggle-on">show</a>
-	</div>
 	<div class="row unit-actions">
 	  <a href="#" class="save-button save-subsection" data-id="${subsection.location}">Save</a>
-	  <a href="preview.html" target="_blank" class="preview-button">Preview</a>
+	  <a href="${lms_link}" target="_blank" class="preview-button">Preview</a>
 	</div>
       </div>
     </div>
   </div>
 </div>
 </%block>
+
+<%block name="jsextra">
+<link rel="stylesheet" type="text/css" href="${static.url('js/vendor/timepicker/jquery.timepicker.css')}" />
+<script src="${static.url('js/vendor/timepicker/jquery.timepicker.js')}"></script>
+<script src="${static.url('js/vendor/timepicker/datepair.js')}"></script>
+<script src="${static.url('js/vendor/date.js')}"></script>
+<script type="text/javascript">
+	$(document).ready(function() {
+		if ($('#due_date').val() != '') {
+		    var $block = $('.set-date').closest('.due-date-input');
+		    $('.set-date').hide();
+		    $block.find('.date-setter').show();
+		}
+	})
+</script>
+</%block>

cms/templates/widgets/units.html

@@ -17,7 +17,7 @@ This def will enumerate through a passed in subsection and list all of the units
       <a href="${reverse('edit_unit', args=[unit.location])}" class="private-item">
         <span class="${unit.category}-icon"></span>
         ${unit.display_name}
-        <span class="private-tag">- private</span>
+        <span class="private-tag wip">- private</span>
       </a>
       % if actions:
       <div class="item-actions">

common/lib/xmodule/xmodule/seq_module.py

@@ -118,8 +118,6 @@ class SequenceDescriptor(MakoModuleDescriptor, XmlDescriptor):
 
     stores_state = True # For remembering where in the sequence the student is
 
-    template_dir_name = 'sequence'
-
     js = {'coffee': [resource_string(__name__, 'js/src/sequence/edit.coffee')]}
     js_module_name = "SequenceDescriptor"
 

common/lib/xmodule/xmodule/vertical_module.py

@@ -45,9 +45,6 @@ class VerticalModule(XModule):
 class VerticalDescriptor(SequenceDescriptor):
     module_class = VerticalModule
 
-    # cdodge: override the SequenceDescript's template_dir_name to point to default template directory
-    template_dir_name = "default"
-
     js = {'coffee': [resource_string(__name__, 'js/src/vertical/edit.coffee')]}
     js_module_name = "VerticalDescriptor"
         

common/static/js/vendor/timepicker/datepair.js

@@ -0,0 +1,209 @@
+/************************
+datepair.js
+
+This is a component of the jquery-timepicker plugin
+
+http://jonthornton.github.com/jquery-timepicker/
+
+requires jQuery 1.6+
+
+version: 1.2.2
+************************/
+
+$(function() {
+
+	$('.datepair input.date').each(function(){
+		var $this = $(this);
+		$this.datepicker({ 'dateFormat': 'm/d/yy' });
+
+		if ($this.hasClass('start') || $this.hasClass('end')) {
+			$this.on('changeDate change', doDatepair);
+		}
+
+	});
+
+	$('.datepair input.time').each(function() {
+		var $this = $(this);
+		var opts = { 'showDuration': true, 'timeFormat': 'g:ia', 'scrollDefaultNow': true };
+
+		if ($this.hasClass('start') || $this.hasClass('end')) {
+			opts.onSelect = doDatepair;
+		}
+
+		$this.timepicker(opts);
+	});
+
+	$('.datepair').each(initDatepair);
+
+	function initDatepair()
+	{
+		var container = $(this);
+
+		var startDateInput = container.find('input.start.date');
+		var endDateInput = container.find('input.end.date');
+		var dateDelta = 0;
+
+		if (startDateInput.length && endDateInput.length) {
+			var startDate = new Date(startDateInput.val());
+			var endDate =  new Date(endDateInput.val());
+
+			dateDelta = endDate.getTime() - startDate.getTime();
+
+			container.data('dateDelta', dateDelta);
+		}
+
+		var startTimeInput = container.find('input.start.time');
+		var endTimeInput = container.find('input.end.time');
+
+		if (startTimeInput.length && endTimeInput.length) {
+			var startInt = startTimeInput.timepicker('getSecondsFromMidnight');
+			var endInt = endTimeInput.timepicker('getSecondsFromMidnight');
+
+			container.data('timeDelta', endInt - startInt);
+
+			if (dateDelta < 86400000) {
+				endTimeInput.timepicker('option', 'minTime', startInt);
+			}
+		}
+	}
+
+	function doDatepair()
+	{
+		var target = $(this);
+		if (target.val() == '') {
+			return;
+		}
+		
+		var container = target.closest('.datepair');
+
+		if (target.hasClass('date')) {
+			updateDatePair(target, container);
+
+		} else if (target.hasClass('time')) {
+			updateTimePair(target, container);
+		}
+	}
+
+	function updateDatePair(target, container)
+	{
+		var start = container.find('input.start.date');
+		var end = container.find('input.end.date');
+
+		if (!start.length || !end.length) {
+			return;
+		}
+
+		var startDate = new Date(start.val());
+		var endDate =  new Date(end.val());
+
+		var oldDelta = container.data('dateDelta');
+
+		if (oldDelta && target.hasClass('start')) {
+			var newEnd = new Date(startDate.getTime()+oldDelta);
+			end.val(newEnd.format('m/d/Y'));
+			end.datepicker('update');
+			return;
+
+		} else {
+			var newDelta = endDate.getTime() - startDate.getTime();
+
+			if (newDelta < 0) {
+				newDelta = 0;
+
+				if (target.hasClass('start')) {
+					end.val(startDate.format('m/d/Y'));
+					end.datepicker('update');
+				} else if (target.hasClass('end')) {
+					start.val(endDate.format('m/d/Y'));
+					start.datepicker('update');
+				}
+			}
+
+			if (newDelta < 86400000) {
+				var startTimeVal = container.find('input.start.time').val();
+
+				if (startTimeVal) {
+					container.find('input.end.time').timepicker('option', {'minTime': startTimeVal});
+				}
+			} else {
+				container.find('input.end.time').timepicker('option', {'minTime': null});
+			}
+
+			container.data('dateDelta', newDelta);
+		}
+	}
+
+	function updateTimePair(target, container)
+	{
+		var start = container.find('input.start.time');
+		var end = container.find('input.end.time');
+
+		if (!start.length || !end.length) {
+			return;
+		}
+
+		var startInt = start.timepicker('getSecondsFromMidnight');
+		var endInt = end.timepicker('getSecondsFromMidnight');
+
+		var oldDelta = container.data('timeDelta');
+		var dateDelta = container.data('dateDelta');
+
+		if (target.hasClass('start') && (!dateDelta || dateDelta < 86400000)) {
+			end.timepicker('option', 'minTime', startInt);
+		}
+
+		var endDateAdvance = 0;
+		var newDelta;
+
+		if (oldDelta && target.hasClass('start')) {
+			// lock the duration and advance the end time
+
+			var newEnd = (startInt+oldDelta)%86400;
+
+			if (newEnd < 0) {
+				newEnd += 86400;
+			}
+
+			end.timepicker('setTime', newEnd);
+			newDelta = newEnd - startInt;
+		} else if (startInt !== null && endInt !== null) {
+			newDelta = endInt - startInt;
+		} else {
+			return;
+		}
+
+		container.data('timeDelta', newDelta);
+
+		if (newDelta < 0 && (!oldDelta || oldDelta > 0)) {
+			// overnight time span. advance the end date 1 day
+			var endDateAdvance = 86400000;
+
+		} else if (newDelta > 0 && oldDelta < 0) {
+			// switching from overnight to same-day time span. decrease the end date 1 day
+			var endDateAdvance = -86400000;
+		}
+
+		var startInput = container.find('.start.date');
+		var endInput = container.find('.end.date');
+
+		if (startInput.val() && !endInput.val()) {
+			endInput.val(startInput.val());
+			endInput.datepicker('update');
+			dateDelta = 0;
+			container.data('dateDelta', 0);
+		}
+
+		if (endDateAdvance != 0) {
+			if (dateDelta || dateDelta === 0) {
+				var endDate =  new Date(endInput.val());
+				var newEnd = new Date(endDate.getTime() + endDateAdvance);
+				endInput.val(newEnd.format('m/d/Y'));
+				endInput.datepicker('update');
+				container.data('dateDelta', dateDelta + endDateAdvance);
+			}
+		}
+	}
+});
+
+// Simulates PHP's date function
+Date.prototype.format=function(format){var returnStr='';var replace=Date.replaceChars;for(var i=0;i<format.length;i++){var curChar=format.charAt(i);if(replace[curChar]){returnStr+=replace[curChar].call(this);}else{returnStr+=curChar;}}return returnStr;};Date.replaceChars={shortMonths:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],longMonths:['January','February','March','April','May','June','July','August','September','October','November','December'],shortDays:['Sun','Mon','Tue','Wed','Thu','Fri','Sat'],longDays:['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],d:function(){return(this.getDate()<10?'0':'')+this.getDate();},D:function(){return Date.replaceChars.shortDays[this.getDay()];},j:function(){return this.getDate();},l:function(){return Date.replaceChars.longDays[this.getDay()];},N:function(){return this.getDay()+1;},S:function(){return(this.getDate()%10==1&&this.getDate()!=11?'st':(this.getDate()%10==2&&this.getDate()!=12?'nd':(this.getDate()%10==3&&this.getDate()!=13?'rd':'th')));},w:function(){return this.getDay();},z:function(){return"Not Yet Supported";},W:function(){return"Not Yet Supported";},F:function(){return Date.replaceChars.longMonths[this.getMonth()];},m:function(){return(this.getMonth()<9?'0':'')+(this.getMonth()+1);},M:function(){return Date.replaceChars.shortMonths[this.getMonth()];},n:function(){return this.getMonth()+1;},t:function(){return"Not Yet Supported";},L:function(){return(((this.getFullYear()%4==0)&&(this.getFullYear()%100!=0))||(this.getFullYear()%400==0))?'1':'0';},o:function(){return"Not Supported";},Y:function(){return this.getFullYear();},y:function(){return(''+this.getFullYear()).substr(2);},a:function(){return this.getHours()<12?'am':'pm';},A:function(){return this.getHours()<12?'AM':'PM';},B:function(){return"Not Yet Supported";},g:function(){return this.getHours()%12||12;},G:function(){return this.getHours();},h:function(){return((this.getHours()%12||12)<10?'0':'')+(this.getHours()%12||12);},H:function(){return(this.getHours()<10?'0':'')+this.getHours();},i:function(){return(this.getMinutes()<10?'0':'')+this.getMinutes();},s:function(){return(this.getSeconds()<10?'0':'')+this.getSeconds();},e:function(){return"Not Yet Supported";},I:function(){return"Not Supported";},O:function(){return(-this.getTimezoneOffset()<0?'-':'+')+(Math.abs(this.getTimezoneOffset()/60)<10?'0':'')+(Math.abs(this.getTimezoneOffset()/60))+'00';},P:function(){return(-this.getTimezoneOffset()<0?'-':'+')+(Math.abs(this.getTimezoneOffset()/60)<10?'0':'')+(Math.abs(this.getTimezoneOffset()/60))+':'+(Math.abs(this.getTimezoneOffset()%60)<10?'0':'')+(Math.abs(this.getTimezoneOffset()%60));},T:function(){var m=this.getMonth();this.setMonth(0);var result=this.toTimeString().replace(/^.+ \(?([^\)]+)\)?$/,'$1');this.setMonth(m);return result;},Z:function(){return-this.getTimezoneOffset()*60;},c:function(){return this.format("Y-m-d")+"T"+this.format("H:i:sP");},r:function(){return this.toString();},U:function(){return this.getTime()/1000;}};

common/static/js/vendor/timepicker/jquery.timepicker.css

@@ -0,0 +1,51 @@
+.ui-timepicker-list {
+	overflow-y: auto;
+	height: 150px;
+	width: 6.5em;
+	background: #fff;
+	border: 1px solid #ddd;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);
+	-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);
+	box-shadow:0 5px 10px rgba(0,0,0,0.2);
+	outline: none;
+	z-index: 10001;
+}
+
+.ui-timepicker-list.ui-timepicker-with-duration {
+	width: 11em;
+}
+
+.ui-timepicker-duration {
+	margin-left: 5px; color: #888;
+}
+
+.ui-timepicker-list:hover .ui-timepicker-duration {
+	color: #888;
+}
+
+.ui-timepicker-list li {
+	padding: 3px 0 3px 5px;
+	cursor: pointer;
+	white-space: nowrap;
+	color: #000;
+	list-style: none;
+	margin: 0;
+}
+
+.ui-timepicker-list:hover .ui-timepicker-selected {
+	background: #fff; color: #000;
+}
+
+li.ui-timepicker-selected,
+.ui-timepicker-list li:hover,
+.ui-timepicker-list:hover .ui-timepicker-selected:hover {
+	background: #1980EC; color: #fff;
+}
+
+li.ui-timepicker-selected .ui-timepicker-duration,
+.ui-timepicker-list li:hover .ui-timepicker-duration {
+	color: #ccc;
+}

common/static/js/vendor/timepicker/jquery.timepicker.js

@@ -0,0 +1,587 @@
+/************************
+jquery-timepicker
+http://jonthornton.github.com/jquery-timepicker/
+
+requires jQuery 1.6+
+
+version: 1.2.2
+************************/
+
+
+!(function($)
+{
+	var _baseDate = new Date(); _baseDate.setHours(0); _baseDate.setMinutes(0); _baseDate.setSeconds(0);
+	var _ONE_DAY = 86400;
+	var _defaults =	{
+		className: null,
+		minTime: null,
+		maxTime: null,
+		durationTime: null,
+		step: 30,
+		showDuration: false,
+		timeFormat: 'g:ia',
+		scrollDefaultNow: false,
+		scrollDefaultTime: false,
+		selectOnBlur: false
+	};
+	var _lang = {
+		decimal: '.',
+		mins: 'mins',
+		hr: 'hr',
+		hrs: 'hrs'
+	};
+
+	var methods =
+	{
+		init: function(options)
+		{
+			return this.each(function()
+			{
+				var self = $(this);
+
+				// convert dropdowns to text input
+				if (self[0].tagName == 'SELECT') {
+					var input = $('<input />');
+					var attrs = { 'type': 'text', 'value': self.val() };
+					var raw_attrs = self[0].attributes;
+
+					for (var i=0; i < raw_attrs.length; i++) {
+						attrs[raw_attrs[i].nodeName] = raw_attrs[i].nodeValue;
+					}
+
+					input.attr(attrs);
+					self.replaceWith(input);
+					self = input;
+				}
+
+				var settings = $.extend({}, _defaults);
+
+				if (options) {
+					settings = $.extend(settings, options);
+				}
+
+				if (settings.minTime) {
+					settings.minTime = _time2int(settings.minTime);
+				}
+
+				if (settings.maxTime) {
+					settings.maxTime = _time2int(settings.maxTime);
+				}
+
+				if (settings.durationTime) {
+					settings.durationTime = _time2int(settings.durationTime);
+				}
+
+				if (settings.lang) {
+					_lang = $.extend(_lang, settings.lang);
+				}
+
+				self.data('timepicker-settings', settings);
+				self.attr('autocomplete', 'off');
+				self.click(methods.show).focus(methods.show).blur(_formatValue).keydown(_keyhandler);
+				self.addClass('ui-timepicker-input');
+
+				if (self.val()) {
+					var prettyTime = _int2time(_time2int(self.val()), settings.timeFormat);
+					self.val(prettyTime);
+				}
+
+				// close the dropdown when container loses focus
+				$("body").attr("tabindex", -1).focusin(function(e) {
+					if ($(e.target).closest('.ui-timepicker-input').length == 0 && $(e.target).closest('.ui-timepicker-list').length == 0) {
+						methods.hide();
+					}
+				});
+
+			});
+		},
+
+		show: function(e)
+		{
+			var self = $(this);
+			var list = self.data('timepicker-list');
+
+			// check if list needs to be rendered
+			if (!list || list.length == 0) {
+				_render(self);
+				list = self.data('timepicker-list');
+			}
+
+			// check if a flag was set to close this picker
+			if (self.hasClass('ui-timepicker-hideme')) {
+				self.removeClass('ui-timepicker-hideme');
+				list.hide();
+				return;
+			}
+
+			if (list.is(':visible')) {
+				return;
+			}
+
+			// make sure other pickers are hidden
+			methods.hide();
+
+
+			var topMargin = parseInt(self.css('marginTop').slice(0, -2));
+			if (!topMargin) topMargin = 0; // correct for IE returning "auto"
+
+			if ((self.offset().top + self.outerHeight(true) + list.outerHeight()) > $(window).height() + $(window).scrollTop()) {
+				// position the dropdown on top
+				list.css({ 'left':(self.offset().left), 'top': self.offset().top + topMargin - list.outerHeight() });
+			} else {
+				// put it under the input
+				list.css({ 'left':(self.offset().left), 'top': self.offset().top + topMargin + self.outerHeight() });
+			}
+
+			list.show();
+
+			var settings = self.data('timepicker-settings');
+			// position scrolling
+			var selected = list.find('.ui-timepicker-selected');
+
+			if (!selected.length) {
+				if (self.val()) {
+					selected = _findRow(self, list, _time2int(self.val()));
+				} else if (settings.minTime === null && settings.scrollDefaultNow) {
+					selected = _findRow(self, list, _time2int(new Date()));
+				} else if (settings.scrollDefaultTime !== false) {
+				  selected = _findRow(self, list, _time2int(settings.scrollDefaultTime));
+				}
+			}
+
+			if (selected && selected.length) {
+				var topOffset = list.scrollTop() + selected.position().top - selected.outerHeight();
+				list.scrollTop(topOffset);
+			} else {
+				list.scrollTop(0);
+			}
+
+			self.trigger('showTimepicker');
+		},
+
+		hide: function(e)
+		{
+			$('.ui-timepicker-list:visible').each(function() {
+				var list = $(this);
+				var self = list.data('timepicker-input');
+				var settings = self.data('timepicker-settings');
+				if (settings.selectOnBlur) {
+					_selectValue(self);
+				}
+
+				list.hide();
+				self.trigger('hideTimepicker');
+			});
+		},
+
+		option: function(key, value)
+		{
+			var self = $(this);
+			var settings = self.data('timepicker-settings');
+			var list = self.data('timepicker-list');
+
+			if (typeof key == 'object') {
+				settings = $.extend(settings, key);
+
+			} else if (typeof key == 'string' && typeof value != 'undefined') {
+				settings[key] = value;
+
+			} else if (typeof key == 'string') {
+				return settings[key];
+			}
+
+			if (settings.minTime) {
+				settings.minTime = _time2int(settings.minTime);
+			}
+
+			if (settings.maxTime) {
+				settings.maxTime = _time2int(settings.maxTime);
+			}
+
+			if (settings.durationTime) {
+				settings.durationTime = _time2int(settings.durationTime);
+			}
+
+			self.data('timepicker-settings', settings);
+
+			if (list) {
+				list.remove();
+				self.data('timepicker-list', false);
+			}
+
+		},
+
+		getSecondsFromMidnight: function()
+		{
+			return _time2int($(this).val());
+		},
+
+		getTime: function()
+		{
+			return new Date(_baseDate.valueOf() + (_time2int($(this).val())*1000));
+		},
+
+		setTime: function(value)
+		{
+			var self = $(this);
+			var prettyTime = _int2time(_time2int(value), self.data('timepicker-settings').timeFormat);
+			self.val(prettyTime);
+		}
+
+	};
+
+	// private methods
+
+	function _render(self)
+	{
+		var settings = self.data('timepicker-settings');
+		var list = self.data('timepicker-list');
+
+		if (list && list.length) {
+			list.remove();
+			self.data('timepicker-list', false);
+		}
+
+		list = $('<ul />');
+		list.attr('tabindex', -1);
+		list.addClass('ui-timepicker-list');
+		if (settings.className) {
+			list.addClass(settings.className);
+		}
+
+		list.css({'display':'none', 'position': 'absolute' });
+
+		if (settings.minTime !== null && settings.showDuration) {
+			list.addClass('ui-timepicker-with-duration');
+		}
+
+		var durStart = (settings.durationTime !== null) ? settings.durationTime : settings.minTime;
+		var start = (settings.minTime !== null) ? settings.minTime : 0;
+		var end = (settings.maxTime !== null) ? settings.maxTime : (start + _ONE_DAY - 1);
+
+		if (end <= start) {
+			// make sure the end time is greater than start time, otherwise there will be no list to show
+			end += _ONE_DAY;
+		}
+
+		for (var i=start; i <= end; i += settings.step*60) {
+			var timeInt = i%_ONE_DAY;
+			var row = $('<li />');
+			row.data('time', timeInt)
+			row.text(_int2time(timeInt, settings.timeFormat));
+
+			if (settings.minTime !== null && settings.showDuration) {
+				var duration = $('<span />');
+				duration.addClass('ui-timepicker-duration');
+				duration.text(' ('+_int2duration(i - durStart)+')');
+				row.append(duration)
+			}
+
+			list.append(row);
+		}
+
+		list.data('timepicker-input', self);
+		self.data('timepicker-list', list);
+
+		$('body').append(list);
+		_setSelected(self, list);
+
+		list.delegate('li', 'click', { 'timepicker': self }, function(e) {
+			self.addClass('ui-timepicker-hideme');
+			self[0].focus();
+
+			// make sure only the clicked row is selected
+			list.find('li').removeClass('ui-timepicker-selected');
+			$(this).addClass('ui-timepicker-selected');
+
+			_selectValue(self);
+			list.hide();
+		});
+	};
+
+	function _findRow(self, list, value)
+	{
+		if (!value && value !== 0) {
+			return false;
+		}
+
+		var settings = self.data('timepicker-settings');
+		var out = false;
+
+		// loop through the menu items
+		list.find('li').each(function(i, obj) {
+			var jObj = $(obj);
+
+			// check if the value is less than half a step from each row
+			if (Math.abs(jObj.data('time') - value) <= settings.step*30) {
+				out = jObj;
+				return false;
+			}
+		});
+
+		return out;
+	}
+
+	function _setSelected(self, list)
+	{
+		var timeValue = _time2int(self.val());
+
+		var selected = _findRow(self, list, timeValue);
+		if (selected) selected.addClass('ui-timepicker-selected');
+	}
+
+
+	function _formatValue()
+	{
+		if (this.value == '') {
+			return;
+		}
+
+		var self = $(this);
+		var prettyTime = _int2time(_time2int(this.value), self.data('timepicker-settings').timeFormat);
+		self.val(prettyTime);
+	}
+
+	function _keyhandler(e)
+	{
+		var self = $(this);
+		var list = self.data('timepicker-list');
+
+		if (!list.is(':visible')) {
+			if (e.keyCode == 40) {
+				self.focus();
+			} else {
+				return true;
+			}
+		};
+
+		switch (e.keyCode) {
+
+			case 13: // return
+				_selectValue(self);
+				methods.hide.apply(this);
+				e.preventDefault();
+				return false;
+				break;
+
+			case 38: // up
+				var selected = list.find('.ui-timepicker-selected');
+
+				if (!selected.length) {
+					var selected;
+					list.children().each(function(i, obj) {
+						if ($(obj).position().top > 0) {
+							selected = $(obj);
+							return false;
+						}
+					});
+					selected.addClass('ui-timepicker-selected');
+
+				} else if (!selected.is(':first-child')) {
+					selected.removeClass('ui-timepicker-selected');
+					selected.prev().addClass('ui-timepicker-selected');
+
+					if (selected.prev().position().top < selected.outerHeight()) {
+						list.scrollTop(list.scrollTop() - selected.outerHeight());
+					}
+				}
+
+				break;
+
+			case 40: // down
+				var selected = list.find('.ui-timepicker-selected');
+
+				if (selected.length == 0) {
+					var selected;
+					list.children().each(function(i, obj) {
+						if ($(obj).position().top > 0) {
+							selected = $(obj);
+							return false;
+						}
+					});
+
+					selected.addClass('ui-timepicker-selected');
+				} else if (!selected.is(':last-child')) {
+					selected.removeClass('ui-timepicker-selected');
+					selected.next().addClass('ui-timepicker-selected');
+
+					if (selected.next().position().top + 2*selected.outerHeight() > list.outerHeight()) {
+						list.scrollTop(list.scrollTop() + selected.outerHeight());
+					}
+				}
+
+				break;
+
+			case 27: // escape
+				list.find('li').removeClass('ui-timepicker-selected');
+				list.hide();
+				break;
+
+			case 9:
+			case 16:
+			case 17:
+			case 18:
+			case 19:
+			case 20:
+			case 33:
+			case 34:
+			case 35:
+			case 36:
+			case 37:
+			case 39:
+			case 45:
+				return;
+
+			default:
+				list.find('li').removeClass('ui-timepicker-selected');
+				return;
+		}
+	};
+
+	function _selectValue(self)
+	{
+		var settings = self.data('timepicker-settings')
+		var list = self.data('timepicker-list');
+		var timeValue = null;
+
+		var cursor = list.find('.ui-timepicker-selected');
+
+		if (cursor.length) {
+			// selected value found
+			var timeValue = cursor.data('time');
+
+		} else if (self.val()) {
+
+			// no selected value; fall back on input value
+			var timeValue = _time2int(self.val());
+
+			_setSelected(self, list);
+		}
+
+		if (timeValue !== null) {
+			var timeString = _int2time(timeValue, settings.timeFormat);
+			self.attr('value', timeString);
+		}
+
+		self.trigger('change').trigger('changeTime');
+	};
+
+	function _int2duration(seconds)
+	{
+		var minutes = Math.round(seconds/60);
+		var duration;
+
+		if (minutes < 60) {
+			duration = [minutes, _lang.mins];
+		} else if (minutes == 60) {
+			duration = ['1', _lang.hr];
+		} else {
+			var hours = (minutes/60).toFixed(1);
+			if (_lang.decimal != '.') hours = hours.replace('.', _lang.decimal);
+			duration = [hours, _lang.hrs];
+		}
+
+		return duration.join(' ');
+	};
+
+	function _int2time(seconds, format)
+	{
+		var time = new Date(_baseDate.valueOf() + (seconds*1000));
+		var output = '';
+
+		for (var i=0; i<format.length; i++) {
+
+			var code = format.charAt(i);
+			switch (code) {
+
+				case 'a':
+					output += (time.getHours() > 11) ? 'pm' : 'am';
+					break;
+
+				case 'A':
+					output += (time.getHours() > 11) ? 'PM' : 'AM';
+					break;
+
+				case 'g':
+					var hour = time.getHours() % 12;
+					output += (hour == 0) ? '12' : hour;
+					break;
+
+				case 'G':
+					output += time.getHours();
+					break;
+
+				case 'h':
+					var hour = time.getHours() % 12;
+
+					if (hour != 0 && hour < 10) {
+						hour = '0'+hour;
+					}
+
+					output += (hour == 0) ? '12' : hour;
+					break;
+
+				case 'H':
+					var hour = time.getHours();
+					output += (hour > 9) ? hour : '0'+hour;
+					break;
+
+				case 'i':
+					var minutes = time.getMinutes();
+					output += (minutes > 9) ? minutes : '0'+minutes;
+					break;
+
+				case 's':
+					var seconds = time.getSeconds();
+					output += (seconds > 9) ? seconds : '0'+seconds;
+					break;
+
+				default:
+					output += code;
+			}
+		}
+
+		return output;
+	};
+
+	function _time2int(timeString)
+	{
+		if (timeString == '') return null;
+		if (timeString+0 == timeString) return timeString;
+
+		if (typeof(timeString) == 'object') {
+			timeString = timeString.getHours()+':'+timeString.getMinutes();
+		}
+
+		var d = new Date(0);
+		var time = timeString.toLowerCase().match(/(\d+)(?::(\d\d))?\s*([pa]?)/);
+
+		if (!time) {
+			return null;
+		}
+
+		var hour = parseInt(time[1]*1);
+
+		if (time[3]) {
+			if (hour == 12) {
+				var hours = (time[3] == 'p') ? 12 : 0;
+			} else {
+				var hours = (hour + (time[3] == 'p' ? 12 : 0));
+			}
+
+		} else {
+			var hours = hour;
+		}
+
+		var minutes = ( time[2]*1 || 0 );
+		return hours*3600 + minutes*60;
+	};
+
+	// Plugin entry
+	$.fn.timepicker = function(method)
+	{
+		if(methods[method]) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); }
+		else if(typeof method === "object" || !method) { return methods.init.apply(this, arguments); }
+		else { $.error("Method "+ method + " does not exist on jQuery.timepicker"); }
+	};
+})(jQuery);