219 lines
9.4 KiB
HTML
219 lines
9.4 KiB
HTML
<%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="title">CMS Courseware Overview</%block>
|
||
|
||
<%namespace name='static' file='static_content.html'/>
|
||
<%namespace name="units" file="widgets/units.html" />
|
||
|
||
<%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">
|
||
(function() {
|
||
$body = $('body');
|
||
$('.gradable-status .menu-toggle').bind('click', showGradeMenu);
|
||
$('.gradable-status .menu').bind('click', selectGradeType);
|
||
})();
|
||
|
||
function showGradeMenu(e) {
|
||
|
||
$section = $(this).closest('.gradable-status');
|
||
e.preventDefault();
|
||
$section.toggleClass('is-active');
|
||
}
|
||
|
||
function selectGradeType(e) {
|
||
e.preventDefault();
|
||
|
||
var $section = $(this).closest('.gradable-status');
|
||
$section.find('.menu li a').removeClass('is-selected');
|
||
|
||
|
||
var $target = $(e.target).addClass('is-selected');
|
||
var $label = $section.find('.status-label');
|
||
|
||
$section.removeClass('is-active');
|
||
$label.html($target.html());
|
||
|
||
if ($target.hasClass('gradable-status-notgraded')) {
|
||
$section.removeClass('is-set');
|
||
}
|
||
else {
|
||
$section.addClass('is-set');
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
</%block>
|
||
|
||
<%block name="header_extras">
|
||
<script type="text/template" id="new-section-template">
|
||
<section class="courseware-section branch new-section">
|
||
<header>
|
||
<a href="#" class="expand-collapse-icon collapse"></a>
|
||
<div class="item-details">
|
||
<h3 class="section-name"><input type="text" value="New Section Name" class="new-section-name" /><a href="#" class="new-section-name-save" data-parent="${parent_location}" data-template="${new_section_template}">Save</a><a href="#" class="new-section-name-cancel">Cancel</a></h3>
|
||
</div>
|
||
</header>
|
||
</section>
|
||
</script>
|
||
|
||
<script type="text/template" id="new-subsection-template">
|
||
<li class="branch collapsed">
|
||
<div class="section-item editing">
|
||
<div>
|
||
<span class="folder-icon"></span>
|
||
<span class="subsection-name">
|
||
<input type="text" value="New Subsection" class="new-subsection-name-input" />
|
||
</span>
|
||
<a href="#" class="new-subsection-name-save">Save</a>
|
||
<a href="#" class="new-subsection-name-cancel">Cancel</a>
|
||
</div>
|
||
</div>
|
||
<ol>
|
||
<li>
|
||
<a href="unit.html" class="new-unit-item">
|
||
<span class="new-unit-icon"></span>New Unit
|
||
</a>
|
||
</li>
|
||
</ol>
|
||
</li>
|
||
</script>
|
||
|
||
|
||
</%block>
|
||
|
||
<%block name="content">
|
||
<div class="edit-subsection-publish-settings">
|
||
<div class="settings">
|
||
<h3>Section Release Date</h3>
|
||
<div class="picker datepair">
|
||
<input class="start-date date" type="text" name="start_date" value="" placeholder="MM/DD/YYYY" class="date" size='15' autocomplete="off"/>
|
||
<input class="start-time time" type="text" name="start_time" value="" placeholder="HH:MM" class="time" size='10' autocomplete="off"/>
|
||
<div class="description">
|
||
<p>On the date set above, this section – <strong class="section-name"></strong> – will be released to students along with the 5 subsections within it. Any units marked private will only be visible to admins.</p>
|
||
</div>
|
||
</div>
|
||
<a href="#" class="save-button">Save</a><a href="#" class="cancel-button">Cancel</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="main-wrapper">
|
||
<div class="inner-wrapper">
|
||
<h1>Courseware</h1>
|
||
<div class="page-actions"></div>
|
||
<article class="courseware-overview" data-course-id="${context_course.location.url()}">
|
||
<a href="#" class="new-courseware-section-button"><span class="plus-icon"></span> New Section</a>
|
||
% for section in sections:
|
||
<section class="courseware-section branch" data-id="${section.location}">
|
||
<header>
|
||
<a href="#" data-tooltip="Expand/collapse this section" class="expand-collapse-icon collapse"></a>
|
||
<div class="item-details" data-id="${section.location}">
|
||
<h3 class="section-name">
|
||
<span class="section-name-span">${section.display_name}</span>
|
||
<div class="section-name-edit" style="display:none">
|
||
<input type="text" value="${section.display_name}" class="edit-section-name" autocomplete="off"/>
|
||
<a href="#" class="save-button edit-section-name-save">Save</a><a href="#" class="cancel-button edit-section-name-cancel">Cancel</a>
|
||
</div>
|
||
</h3>
|
||
<div class="section-published-date">
|
||
<%
|
||
start_date = datetime.fromtimestamp(mktime(section.start)) if section.start is not None else None
|
||
start_date_str = start_date.strftime('%m/%d/%Y') if start_date is not None else ''
|
||
start_time_str = start_date.strftime('%H:%M') if start_date is not None else ''
|
||
%>
|
||
%if start_date is None:
|
||
<span class="published-status">This section has not been released.</span>
|
||
<a href="#" class="schedule-button" data-date="" data-time="" data-id="${section.location}">Schedule</a>
|
||
%else:
|
||
<span class="published-status"><strong>Will Release:</strong> ${start_date_str} at ${start_time_str}</span>
|
||
<a href="#" class="edit-button" data-date="${start_date_str}" data-time="${start_time_str}" data-id="${section.location}">Edit</a>
|
||
%endif
|
||
</div>
|
||
</div>
|
||
|
||
<div class="gradable-status">
|
||
<h4 class="status-label">Not Graded</h4>
|
||
|
||
<a data-tooltip="Mark/unmark this section as graded" class="menu-toggle" href="#">
|
||
<span class="ss-icon ss-standard">✓</span>
|
||
</a>
|
||
|
||
<ul class="menu">
|
||
<li><a class="is-selected" href="#">Homework</a></li>
|
||
<li><a href="#">Finger Exercises</a></li>
|
||
<li><a href="#">Lab</a></li>
|
||
<li><a href="#">Midterm Exam</a></li>
|
||
<li><a href="#">Final Exam</a></li>
|
||
<li><a class="gradable-status-notgraded" href="#">Not Graded</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="item-actions">
|
||
<a href="#" class="delete-button delete-section-button" data-tooltip="Delete this section"><span class="delete-icon"></span></a>
|
||
<a href="#" data-tooltip="Sort this section" class="drag-handle"></a>
|
||
</div>
|
||
</header>
|
||
<div class="subsection-list">
|
||
<div class="list-header">
|
||
<a href="#" class="new-subsection-item" data-template="${new_subsection_template}">
|
||
<span class="new-folder-icon"></span>New Subsection
|
||
</a>
|
||
</div>
|
||
<ol data-section-id="${section.location.url()}">
|
||
% for subsection in section.get_children():
|
||
<li class="branch collapsed" data-id="${subsection.location}">
|
||
<div class="section-item">
|
||
<div class="details">
|
||
<a href="#" data-tooltip="Expand/collapse this subsection" class="expand-collapse-icon expand"></a>
|
||
<a href="${reverse('edit_subsection', args=[subsection.location])}">
|
||
<span class="folder-icon"></span>
|
||
<span class="subsection-name"><span class="subsection-name-value">${subsection.display_name}</span></span>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="gradable-status">
|
||
<h4 class="status-label">Not Graded</h4>
|
||
|
||
<a data-tooltip="Mark/unmark this subsection as graded" class="menu-toggle" href="#">
|
||
<span class="ss-icon ss-standard">✓</span>
|
||
</a>
|
||
|
||
<ul class="menu">
|
||
<li><a class="is-selected" href="#">Homework</a></li>
|
||
<li><a href="#">Finger Exercises</a></li>
|
||
<li><a href="#">Lab</a></li>
|
||
<li><a href="#">Midterm Exam</a></li>
|
||
<li><a href="#">Final Exam</a></li>
|
||
<li><a class="gradable-status-notgraded" href="#">Not Graded</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="item-actions">
|
||
<a data-tooltip="Delete this subsection" href="#" class="delete-button delete-subsection-button"><span class="delete-icon"></span></a>
|
||
<a data-tooltip="Sort this subsection" href="#" class="drag-handle"></a>
|
||
</div>
|
||
</div>
|
||
${units.enum_units(subsection)}
|
||
</li>
|
||
% endfor
|
||
</ol>
|
||
</div>
|
||
</section>
|
||
% endfor
|
||
</article>
|
||
</div>
|
||
</div>
|
||
<footer></footer>
|
||
</%block>
|