169 lines
7.2 KiB
HTML
169 lines
7.2 KiB
HTML
<%page expression_filter="h"/>
|
|
<%!
|
|
from django.utils.translation import ugettext as _
|
|
from openedx.core.djangolib.js_utils import (
|
|
dump_js_escaped_json, js_escaped_string
|
|
)
|
|
%>
|
|
|
|
<%namespace name='static' file='/static_content.html'/>
|
|
|
|
<%block name="jsextra">
|
|
<script>
|
|
var save_url = '${save_url | n, js_escaped_string}';
|
|
var schedule = ${schedule | n, dump_js_escaped_json};
|
|
</script>
|
|
<script src="${static.url('common/js/vendor/backbone.js')}"></script>
|
|
<script src="${static.url('js/vendor/timepicker/jquery.timepicker.js')}"></script>
|
|
<link rel="stylesheet" type="text/css" href="${static.url('js/vendor/timepicker/jquery.timepicker.css')}" />
|
|
<style>
|
|
.ui-timepicker-list { z-index: 100000; }
|
|
.ui-datepicker { z-index: 100000 !important; }
|
|
input.date, input.time { width: auto !important; display: inline !important; }
|
|
</style>
|
|
<%static:js group='ccx'/>
|
|
</%block>
|
|
|
|
%for template_name in ["schedule"]:
|
|
<script type="text/template" id="ccx-${template_name}-template">
|
|
<%static:include path="ccx/${template_name}.underscore" />
|
|
</script>
|
|
%endfor
|
|
|
|
<h2 class="hd hd-2">${_('Schedule')}</h2>
|
|
<div class="ccx-schedule-container">
|
|
<div id="ccx-schedule"></div>
|
|
<div id="new-ccx-schedule"></div>
|
|
</div>
|
|
|
|
<div id="enter-date-modal" class="modal"
|
|
tabindex="-1" role="dialog" aria-labelledby="ccx_schedule_set_date_heading">
|
|
<div class="inner-wrapper">
|
|
<button class="close-modal">
|
|
<span class="icon fa fa-remove" aria-hidden="true"></span>
|
|
<span class="sr">${_("Close")}</span>
|
|
</button>
|
|
<header>
|
|
<h2 id="ccx_schedule_set_date_heading"></h2>
|
|
</header>
|
|
<form class="ccx-form">
|
|
<div class="field datepair">
|
|
## Translators: This explains to people using a screen reader how to interpret the format of YYYY-MM-DD
|
|
<label class="sr form-label" for="ccx_dialog_date">${_('Date format four digit year dash two digit month dash two digit day')}</label>
|
|
<input placeholder="${_('Date')}" class="date" type="text" name="date" id="ccx_dialog_date" size="11" />
|
|
## Translators: This explains to people using a screen reader how to interpret the format of HH:MM
|
|
<label class="sr form-label" for="ccx_dialog_time">${_('Time format two digit hours colon two digit minutes')}</label>
|
|
<input placeholder="${_('Time')}" class="time" type="text" name="time" id="ccx_dialog_time" size="6" />
|
|
</div>
|
|
<div class="field">
|
|
<button type="submit" class="btn btn-primary">${_('Set date')}</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ccx-schedule-sidebar">
|
|
<div class="ccx-sidebar-panel" id="dirty-schedule" tabindex="-1" role="region"
|
|
aria-labelledby="ccx_schedule_save_changes_heading">
|
|
<h3 class="hd hd-3" id="ccx_schedule_save_changes_heading">${_('Save changes')}</h3>
|
|
<form>
|
|
<p id="message_save" class="text-helper">${_("You have unsaved changes.")}</p>
|
|
<div class="field">
|
|
<br/>
|
|
<button id="save-changes" aria-describedby="message_save" class="ccx-schedule-save-changes">${_("Save changes")}</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="ccx-sidebar-panel" id="ajax-error" tabindex="-1" role="region" aria-labelledby="ccx_schedule_error_message">
|
|
<h3 class="hd hd-2">${_('Error')}</h3>
|
|
<p id="ccx_schedule_error_message" class="text-helper">${_("There was an error saving changes.")}</p>
|
|
</div>
|
|
<div class="ccx-sidebar-panel" aria-labelledby="ccx_schedule_unit"
|
|
id="ccx_schedule_unit_panel" role="region">
|
|
<h3 class="hd hd-3" id="ccx_schedule_unit">${_('Schedule a Unit')}</h3>
|
|
<form role="form" id="add-unit" name="add-unit" class="ccx-form">
|
|
<div class="field">
|
|
<label for="ccx_chapter" class="form-label"><b>${_('Section')}</b></label>
|
|
<select name="chapter" id="ccx_chapter" ></select>
|
|
</div>
|
|
<div class="field">
|
|
<label for="ccx_sequential" class="form-label"><b>${_('Subsection')}</b></label>
|
|
<select name="sequential" id="ccx_sequential"></select>
|
|
</div>
|
|
<div class="field">
|
|
<label for="ccx_vertical" class="form-label"><b>${_('Unit')}</b></label>
|
|
<select name="vertical" id="ccx_vertical"></select>
|
|
</div>
|
|
<div class="ccx_start_date_time_fields">
|
|
<div class="field datepair">
|
|
<label for="ccx_start_date" class="form-label">
|
|
<b>${_('Start Date')}</b>
|
|
<span class="sr">
|
|
## Translators: This explains to people using a screen reader how to interpret the format of YYYY-MM-DD
|
|
${_('format four digit year dash two digit month dash two digit day')}
|
|
</span>
|
|
</label>
|
|
<input placeholder="${_('yyyy-mm-dd')}" type="text" class="date" name="start_date" id="ccx_start_date" />
|
|
## Translators: This explains to people using a screen reader how to interpret the format of HH:MM
|
|
<label for="ccx_start_time" class="sr form-label">${_('Start time format two digit hours colon two digit minutes')}</label>
|
|
<input placeholder="${_('time')}" type="text" class="time" name="start_time" id="ccx_start_time"/>
|
|
</div>
|
|
</div>
|
|
<div class="ccx_due_date_time_fields">
|
|
<div class="field datepair">
|
|
<label for="ccx_due_date" class="form-label">
|
|
<b>${_('Due Date')}</b> ${_('(Optional)')}
|
|
<span class="sr">
|
|
## Translators: This explains to people using a screen reader how to interpret the format of YYYY-MM-DD
|
|
${_('format four digit year dash two digit month dash two digit day')}
|
|
</span>
|
|
</label>
|
|
<input placeholder="${_('yyyy-mm-dd')}" type="text" class="date" name="due_date" id="ccx_due_date"/>
|
|
## Translators: This explains to people using a screen reader how to interpret the format of HH:MM
|
|
<label for="ccx_due_time" class="sr form-label">${_('Due Time format two digit hours colon two digit minutes')}</label>
|
|
<input placeholder="${_('time')}" type="text" class="time" name="due_time" id="ccx_due_time"/>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<br/>
|
|
<button id="add-unit-button">${_('Add Unit')}</button>
|
|
</div>
|
|
<div class="field">
|
|
<br/>
|
|
<button id="add-all">${_('Add All Units')}</button>
|
|
</div>
|
|
</form>
|
|
<div id="all-units-added" tabindex="-1" role="region">
|
|
${_("All units have been added.")}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
$(function() {
|
|
schedule_template = _.template($('#ccx-schedule-template').html());
|
|
var view = new edx.ccx.schedule.ScheduleView({
|
|
el: $('#new-ccx-schedule')
|
|
});
|
|
view.render();
|
|
//ccx_schedule.render();
|
|
$('.datepair .time').timepicker({
|
|
'showDuration': true,
|
|
'timeFormat': 'G:i',
|
|
'autoclose': true
|
|
});
|
|
$('.datepair .date').datepicker({
|
|
'dateFormat': 'yy-mm-dd',
|
|
'autoclose': true
|
|
});
|
|
$('.datepair .date').change(function() {
|
|
var date = $(this).datepicker( "getDate" );
|
|
if (date) {
|
|
$(this).val(date.getFullYear() + "-" +
|
|
('0' + (date.getMonth() + 1)).slice(-2) + "-" +
|
|
('0' + date.getDate()).slice(-2));
|
|
}
|
|
});
|
|
});
|
|
</script>
|