edx-platform/cms/templates/overview.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>
</%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="#" 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="item-actions">
              <a href="#" class="delete-button delete-section-button"><span class="delete-icon"></span></a>
              <a href="#" 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>
                    <a href="#" 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="item-actions">
                    <a href="#" class="delete-button delete-subsection-button"><span class="delete-icon"></span></a>                    
                    <a href="#" class="drag-handle"></a>
                  </div>
                </div>
                ${units.enum_units(subsection)}
              </li>
              % endfor
            </ol>
          </div>
        </section>
        % endfor
      </article>
    </div>
  </div>
  <footer></footer>
</%block>