Merge pull request #13952 from edx/yro_refactor-course-info-page

Refactor info.html page datetime rendering

lms/djangoapps/courseware/courses.py

@@ -294,18 +294,7 @@ def get_course_info_section(request, user, course, section_key):
     return html
 
 
-def get_course_date_summary(course, user):
-    """
-    Return the snippet of HTML to be included on the course info page
-    in the 'Date Summary' section.
-    """
-    blocks = _get_course_date_summary_blocks(course, user)
-    return '\n'.join(
-        b.render() for b in blocks
-    )
-
-
-def _get_course_date_summary_blocks(course, user):
+def get_course_date_blocks(course, user):
     """
     Return the list of blocks to display on the course info page,
     sorted by date.

lms/djangoapps/courseware/date_summary.py

@@ -11,14 +11,12 @@ from django.core.urlresolvers import reverse
 from django.utils.translation import ugettext as _
 from django.utils.translation import ugettext_lazy
 from django.utils.translation import to_locale, get_language
-from edxmako.shortcuts import render_to_string
 from lazy import lazy
 
 from course_modes.models import CourseMode
 from lms.djangoapps.commerce.utils import EcommerceService
 from lms.djangoapps.verify_student.models import VerificationDeadline, SoftwareSecurePhotoVerification
 from student.models import CourseEnrollment
-from openedx.core.lib.time_zone_utils import get_time_zone_abbr
 
 
 class DateSummary(object):
@@ -78,24 +76,8 @@ class DateSummary(object):
         self.course = course
         self.user = user
 
-    def get_context(self):
-        """Return the template context used to render this summary block."""
-        return {
-            'title': self.title,
-            'date': self._format_date(),
-            'description': self.description,
-            'css_class': self.css_class,
-            'link': self.link,
-            'link_text': self.link_text,
-        }
-
-    def render(self):
-        """
-        Return an HTML representation of this summary block.
-        """
-        return render_to_string('courseware/date_summary.html', self.get_context())
-
-    def _format_date(self):
+    @property
+    def relative_datestring(self):
         """
         Return this block's date in a human-readable format. If the date
         is None, returns the empty string.
@@ -121,7 +103,7 @@ class DateSummary(object):
         date_format = _(u"{relative} ago - {absolute}") if date_has_passed else _(u"in {relative} - {absolute}")
         return date_format.format(
             relative=relative_date,
-            absolute=self.date.astimezone(self.time_zone).strftime(self.date_format.encode('utf-8')).decode('utf-8'),
+            absolute='{date}',
         )
 
     @property
@@ -151,10 +133,6 @@ class TodaysDate(DateSummary):
     css_class = 'todays-date'
     is_enabled = True
 
-    @property
-    def date_format(self):
-        return u'%b %d, %Y (%H:%M {tz_abbr})'.format(tz_abbr=get_time_zone_abbr(self.time_zone))
-
     # The date is shown in the title, no need to display it again.
     def get_context(self):
         context = super(TodaysDate, self).get_context()
@@ -167,9 +145,7 @@ class TodaysDate(DateSummary):
 
     @property
     def title(self):
-        return _(u'Today is {date}').format(
-            date=self.date.astimezone(self.time_zone).strftime(self.date_format.encode('utf-8')).decode('utf-8')
-        )
+        return 'current_datetime'
 
 
 class CourseStartDate(DateSummary):

lms/templates/courseware/date_summary.html

-<div class="date-summary-container">
-    <div class="date-summary date-summary-${css_class}">
-        % if title:
-          <h3 class="heading">${title}</h3>
-        % endif
-        % if date:
-          <h4 class="date">${date}</h4>
-        % endif
-        % if description:
-          <p class="description">${description}</p>
-        % endif
-        % if link and link_text:
-          <span class="date-summary-link">
-              <a href="${link}">${link_text}</a>
-          </span>
-        % endif
-    </div>
-</div>

lms/templates/courseware/info.html

@@ -3,10 +3,12 @@
 <%def name="online_help_token()"><% return "courseinfo" %></%def>
 <%namespace name='static' file='../static_content.html'/>
 <%!
-from django.utils.translation import ugettext as _
+from datetime import datetime
+from pytz import timezone, utc
 
-from courseware.courses import get_course_info_section, get_course_date_summary
+from django.utils.translation import ugettext as _
 
+from courseware.courses import get_course_info_section, get_course_date_blocks
 from openedx.core.djangoapps.self_paced.models import SelfPacedConfiguration
 from openedx.core.djangolib.markup import HTML, Text
 %>
@@ -89,15 +91,40 @@ from openedx.core.djangolib.markup import HTML, Text
           % endif
         </section>
         <section aria-label="${_('Handout Navigation')}" class="handouts">
-          % if SelfPacedConfiguration.current().enable_course_home_improvements:
+
+      % if SelfPacedConfiguration.current().enable_course_home_improvements:
             <h1 class="handouts-header">${_("Important Course Dates")}</h1>
-            ${HTML(get_course_date_summary(course, user))}
-          % endif
+            ## Should be organized by date, last date appearing at the bottom
 
-          <h1 class="handouts-header">${_(course.info_sidebar_name)}</h1>
-          ${HTML(get_course_info_section(request, masquerade_user, course, 'handouts'))}
+            % for course_date in get_course_date_blocks(course, user):
+                <div class="date-summary-container">
+                    <div class="date-summary date-summary-${course_date.css_class}">
+                        % if course_date.title:
+                            % if course_date.title == 'current_datetime':
+                                <h3 class="heading localized-datetime" data-datetime="${course_date.date}" data-string="${_(u'Today is {date}')}" data-timezone="${user_timezone}" data-language="${user_language}"></h3>
+                            % else:
+                                <h3 class="heading">${course_date.title}</h3>
+                            % endif
+                        % endif
+                        % if course_date.date and course_date.title != 'current_datetime':
+                            <h4 class="date localized-datetime" data-format="shortDate" data-datetime="${course_date.date}" data-timezone="${user_timezone}" data-language="${user_language}" data-string="${_(course_date.relative_datestring)}"></h4>
+                        % endif
+                        % if course_date.description:
+                          <p class="description">${course_date.description}</p>
+                        % endif
+                        % if course_date.link and course_date.link_text:
+                          <span class="date-summary-link">
+                              <a href="${course_date.link}">${course_date.link_text}</a>
+                          </span>
+                        % endif
+                    </div>
+                </div>
+            % endfor
+      % endif
+        <h1 class="handouts-header">${_(course.info_sidebar_name)}</h1>
+        ${HTML(get_course_info_section(request, masquerade_user, course, 'handouts'))}
         </section>
-        % else:
+    % else:
         <section class="updates">
           <h1 class="handouts-header">${_("Course Updates and News")}</h1>
           ${HTML(get_course_info_section(request, masquerade_user, course, 'guest_updates'))}
@@ -106,7 +133,12 @@ from openedx.core.djangolib.markup import HTML, Text
           <h1 class="handouts-header">${_("Course Handouts")}</h1>
           ${HTML(get_course_info_section(request, masquerade_user, course, 'guest_handouts'))}
         </section>
-        % endif
+
+    % endif
       </div>
   </div>
 </main>
+
+<%static:require_module_async module_name="js/dateutil_factory" class_name="DateUtilFactory">
+    DateUtilFactory.transform(iterationKey=".localized-datetime");
+</%static:require_module_async>