359 lines
15 KiB
HTML
359 lines
15 KiB
HTML
<%namespace name='static' file='../static_content.html'/>
|
|
<%!
|
|
from django.utils.translation import ugettext as _
|
|
from django.utils.translation import pgettext
|
|
from django.core.urlresolvers import reverse
|
|
from courseware.courses import get_course_about_section
|
|
from django.conf import settings
|
|
from six import text_type
|
|
from edxmako.shortcuts import marketing_link
|
|
from openedx.core.djangolib.markup import HTML
|
|
from openedx.core.lib.courses import course_image_url
|
|
from six import string_types
|
|
%>
|
|
|
|
<%inherit file="../main.html" />
|
|
<%block name="headextra">
|
|
## OG (Open Graph) title and description added below to give social media info to display
|
|
## (https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content#tags)
|
|
<meta property="og:title" content="${course.display_name_with_default_escaped}" />
|
|
<meta property="og:description" content="${get_course_about_section(request, course, 'short_description')}" />
|
|
</%block>
|
|
|
|
<%block name="js_extra">
|
|
<script type="text/javascript">
|
|
(function() {
|
|
$(".register").click(function(event) {
|
|
$("#class_enroll_form").submit();
|
|
event.preventDefault();
|
|
});
|
|
|
|
% if can_add_course_to_cart:
|
|
add_course_complete_handler = function(jqXHR, textStatus) {
|
|
if (jqXHR.status == 200) {
|
|
location.href = "${cart_link}";
|
|
}
|
|
if (jqXHR.status == 400) {
|
|
$("#register_error")
|
|
.html(jqXHR.responseText ? jqXHR.responseText : "${_("An error occurred. Please try again later.")}")
|
|
.css("display", "block");
|
|
}
|
|
else if (jqXHR.status == 403) {
|
|
location.href = "${reg_then_add_to_cart_link}";
|
|
}
|
|
};
|
|
|
|
$("#add_to_cart_post").click(function(event){
|
|
$.ajax({
|
|
url: "${reverse('add_course_to_cart', args=[text_type(course.id)])}",
|
|
type: "POST",
|
|
/* Rant: HAD TO USE COMPLETE B/C PROMISE.DONE FOR SOME REASON DOES NOT WORK ON THIS PAGE. */
|
|
complete: add_course_complete_handler
|
|
})
|
|
event.preventDefault();
|
|
});
|
|
% endif
|
|
|
|
## making the conditional around this entire JS block for sanity
|
|
%if settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
|
|
<%
|
|
perms_error = _('The currently logged-in user account does not have permission to enroll in this course. '
|
|
'You may need to {start_logout_tag}log out{end_tag} then try the enroll button again. '
|
|
'Please visit the {start_help_tag}help page{end_tag} for a possible solution.').format(
|
|
start_help_tag="<a href='{url}'>".format(url=marketing_link('FAQ')), end_tag='</a>',
|
|
start_logout_tag="<a href='{url}'>".format(url=reverse('logout'))
|
|
)
|
|
%>
|
|
$('#class_enroll_form').on('ajax:complete', function(event, xhr) {
|
|
if(xhr.status == 200) {
|
|
location.href = "${reverse('dashboard')}";
|
|
} else if (xhr.status == 403) {
|
|
location.href = "${reverse('course-specific-register', args=[text_type(course.id)])}?course_id=${course.id | u}&enrollment_action=enroll";
|
|
} else if (xhr.status == 400) { //This means the user did not have permission
|
|
$('#register_error').html("${perms_error}").css("display", "block");
|
|
} else {
|
|
$('#register_error').html(
|
|
(xhr.responseText ? xhr.responseText : "${_("An error occurred. Please try again later.")}")
|
|
).css("display", "block");
|
|
}
|
|
});
|
|
|
|
%else:
|
|
|
|
$('#class_enroll_form').on('ajax:complete', function(event, xhr) {
|
|
if(xhr.status == 200) {
|
|
if (xhr.responseText == "") {
|
|
location.href = "${reverse('dashboard')}";
|
|
}
|
|
else {
|
|
location.href = xhr.responseText;
|
|
}
|
|
} else if (xhr.status == 403) {
|
|
location.href = "${reverse('register_user')}?course_id=${course.id | u}&enrollment_action=enroll";
|
|
} else {
|
|
$('#register_error').html(
|
|
(xhr.responseText ? xhr.responseText : "${_("An error occurred. Please try again later.")}")
|
|
).css("display", "block");
|
|
}
|
|
});
|
|
|
|
%endif
|
|
|
|
})(this)
|
|
</script>
|
|
|
|
<script src="${static.url('js/course_info.js')}"></script>
|
|
</%block>
|
|
|
|
<%block name="pagetitle">${course.display_name_with_default_escaped}</%block>
|
|
|
|
<section class="course-info">
|
|
|
|
<%block name="course_about_header">
|
|
<header class="course-profile">
|
|
<div class="intro-inner-wrapper">
|
|
<div class="table">
|
|
<section class="intro">
|
|
<div class="heading-group">
|
|
<h1>
|
|
${course.display_name_with_default_escaped}
|
|
</h1>
|
|
<br />
|
|
<span>${course.display_org_with_default | h}</span>
|
|
</div>
|
|
|
|
<div class="main-cta">
|
|
%if user.is_authenticated() and registered:
|
|
%if show_courseware_link:
|
|
<a href="${course_target}">
|
|
%endif
|
|
|
|
<span class="register disabled">${_("You are enrolled in this course")}</span>
|
|
|
|
%if show_courseware_link:
|
|
<strong>${_("View Course")}</strong>
|
|
</a>
|
|
%endif
|
|
|
|
%elif in_cart:
|
|
<span class="add-to-cart">
|
|
${_('This course is in your <a href="{cart_link}">cart</a>.').format(cart_link=cart_link)}
|
|
</span>
|
|
% elif is_course_full:
|
|
<span class="register disabled">
|
|
${_("Course is full")}
|
|
</span>
|
|
% elif invitation_only and not can_enroll:
|
|
<span class="register disabled">${_("Enrollment in this course is by invitation only")}</span>
|
|
## Shib courses need the enrollment button to be displayed even when can_enroll is False,
|
|
## because AnonymousUsers cause can_enroll for shib courses to be False, but we need them to be able to click
|
|
## so that they can register and become a real user that can enroll.
|
|
% elif not is_shib_course and not can_enroll:
|
|
<span class="register disabled">${_("Enrollment is Closed")}</span>
|
|
%elif can_add_course_to_cart:
|
|
<%
|
|
if user.is_authenticated():
|
|
reg_href = "#"
|
|
reg_element_id = "add_to_cart_post"
|
|
else:
|
|
reg_href = reg_then_add_to_cart_link
|
|
reg_element_id = "reg_then_add_to_cart"
|
|
%>
|
|
<% if ecommerce_checkout:
|
|
reg_href = ecommerce_checkout_link
|
|
reg_element_id = ""
|
|
%>
|
|
<a href="${reg_href}" class="add-to-cart" id="${reg_element_id}">
|
|
${_("Add {course_name} to Cart <span>({price} USD)</span>")\
|
|
.format(course_name=course.display_number_with_default, price=course_price)}
|
|
</a>
|
|
<div id="register_error"></div>
|
|
%else:
|
|
<%
|
|
if ecommerce_checkout:
|
|
reg_href = ecommerce_checkout_link
|
|
else:
|
|
reg_href="#"
|
|
if professional_mode:
|
|
href_class = "add-to-cart"
|
|
else:
|
|
href_class = "register"
|
|
%>
|
|
<a href="${reg_href}" class="${href_class}">
|
|
${_("Enroll in {course_name}").format(course_name=course.display_number_with_default) | h}
|
|
</a>
|
|
<div id="register_error"></div>
|
|
%endif
|
|
</div>
|
|
|
|
</section>
|
|
% if get_course_about_section(request, course, "video"):
|
|
<a href="#video-modal" class="media" rel="leanModal">
|
|
<div class="hero">
|
|
<img src="${course_image_urls['large']}" alt="" />
|
|
<div class="play-intro"></div>
|
|
</div>
|
|
</a>
|
|
%else:
|
|
<div class="media">
|
|
<div class="hero">
|
|
<img src="${course_image_urls['large']}" alt="" />
|
|
</div>
|
|
</div>
|
|
% endif
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</%block>
|
|
|
|
<div class="container">
|
|
|
|
<%block name="course_about_details">
|
|
<div class="details">
|
|
% if staff_access and studio_url is not None:
|
|
<div class="wrap-instructor-info studio-view">
|
|
<a class="instructor-info-action" href="${studio_url}">${_("View About Page in studio")}</a>
|
|
</div>
|
|
% endif
|
|
|
|
<div class="inner-wrapper">
|
|
${get_course_about_section(request, course, "overview")}
|
|
</div>
|
|
</div>
|
|
</%block>
|
|
|
|
<div class="course-sidebar">
|
|
<div class="course-summary">
|
|
|
|
<%include file="course_about_sidebar_header.html" />
|
|
|
|
<%block name="course_about_important_dates">
|
|
<ol class="important-dates">
|
|
<li class="important-dates-item"><span class="icon fa fa-info-circle" aria-hidden="true"></span><p class="important-dates-item-title">${_("Course Number")}</p><span class="important-dates-item-text course-number">${course.display_number_with_default | h}</span></li>
|
|
% if not course.start_date_is_still_default:
|
|
<%
|
|
course_start_date = course.advertised_start or course.start
|
|
%>
|
|
<li class="important-dates-item">
|
|
<span class="icon fa fa-calendar" aria-hidden="true"></span>
|
|
<p class="important-dates-item-title">${_("Classes Start")}</p>
|
|
% if isinstance(course_start_date, string_types):
|
|
<span class="important-dates-item-text start-date">${course_start_date}</span>
|
|
% else:
|
|
<%
|
|
course_date_string = course_start_date.strftime('%Y-%m-%dT%H:%M:%S%z')
|
|
%>
|
|
<span class="important-dates-item-text start-date localized_datetime" data-format="shortDate" data-datetime="${course_date_string}"></span>
|
|
% endif
|
|
</li>
|
|
% endif
|
|
## We plan to ditch end_date (which is not stored in course metadata),
|
|
## but for backwards compatibility, show about/end_date blob if it exists.
|
|
% if course.end:
|
|
<%
|
|
course_end_date = course.end
|
|
%>
|
|
|
|
<li class="important-dates-item">
|
|
<span class="icon fa fa-calendar" aria-hidden="true"></span>
|
|
<p class="important-dates-item-title">${_("Classes End")}</p>
|
|
% if isinstance(course_end_date, string_types):
|
|
<span class="important-dates-item-text final-date">${course_end_date}</span>
|
|
% else:
|
|
<%
|
|
course_date_string = course_end_date.strftime('%Y-%m-%dT%H:%M:%S%z')
|
|
%>
|
|
<span class="important-dates-item-text final-date localized_datetime" data-format="shortDate" data-datetime="${course_date_string}"></span>
|
|
% endif
|
|
</li>
|
|
% endif
|
|
|
|
% if get_course_about_section(request, course, "effort"):
|
|
<li class="important-dates-item"><span class="icon fa fa-pencil" aria-hidden="true"></span><p class="important-dates-item-title">${_("Estimated Effort")}</p><span class="important-dates-item-text effort">${get_course_about_section(request, course, "effort")}</span></li>
|
|
% endif
|
|
|
|
##<li class="important-dates-item"><span class="icon fa fa-clock-o" aria-hidden="true"></span><p class="important-dates-item-title">${_('Course Length')}</p><span class="important-dates-item-text course-length">${_('{number} weeks').format(number=15)}</span></li>
|
|
|
|
%if course_price and (can_add_course_to_cart or is_cosmetic_price_enabled):
|
|
<li class="important-dates-item">
|
|
<span class="icon fa fa-money" aria-hidden="true"></span>
|
|
<p class="important-dates-item-title">${_("Price")}</p>
|
|
<span class="important-dates-item-text">${course_price}</span>
|
|
</li>
|
|
%endif
|
|
|
|
% if pre_requisite_courses:
|
|
<% prc_target = reverse('about_course', args=[unicode(pre_requisite_courses[0]['key'])]) %>
|
|
<li class="prerequisite-course important-dates-item">
|
|
<span class="icon fa fa-list-ul" aria-hidden="true"></span>
|
|
<p class="important-dates-item-title">${_("Prerequisites")}</p>
|
|
## Multiple pre-requisite courses are not supported on frontend that's why we are pulling first element
|
|
<span class="important-dates-item-text pre-requisite"><a href="${prc_target}">${pre_requisite_courses[0]['display']}</a></span>
|
|
<p class="tip">
|
|
${_("You must successfully complete {link_start}{prc_display}{link_end} before you begin this course.").format(
|
|
link_start='<a href="{}">'.format(prc_target),
|
|
link_end='</a>',
|
|
prc_display=pre_requisite_courses[0]['display'],
|
|
)}
|
|
</p>
|
|
</li>
|
|
% endif
|
|
|
|
% if get_course_about_section(request, course, "prerequisites"):
|
|
<li class="important-dates-item"><span class="icon fa fa-book" aria-hidden="true"></span><p class="important-dates-item-title">${_("Requirements")}</p><span class="important-dates-item-text prerequisites">${get_course_about_section(request, course, "prerequisites")}</span></li>
|
|
% endif
|
|
</ol>
|
|
</%block>
|
|
</div>
|
|
|
|
<%block name="course_about_reviews_tool">
|
|
## Course reviews tool
|
|
% if reviews_fragment_view:
|
|
${HTML(reviews_fragment_view.body_html())}
|
|
% endif
|
|
</%block>
|
|
|
|
## For now, ocw links are the only thing that goes in additional resources
|
|
% if get_course_about_section(request, course, "ocw_links"):
|
|
<div class="additional-resources">
|
|
<header>
|
|
<h1>${_("Additional Resources")}</h1>
|
|
</div>
|
|
|
|
<div>
|
|
## "MITOpenCourseware" should *not* be translated
|
|
<h2 class="opencourseware">MITOpenCourseware</h2>
|
|
${get_course_about_section(request, course, "ocw_links")}
|
|
</div>
|
|
</div>
|
|
%endif
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
## Need to put this hidden form on the page so that the registration button works.
|
|
## Since it's no harm to display a hidden form, we display it with the most permissive conditional
|
|
## which is when the student is not registered.
|
|
%if active_reg_button or is_shib_course:
|
|
<div style="display: none;">
|
|
<form id="class_enroll_form" method="post" data-remote="true" action="${reverse('change_enrollment')}">
|
|
<fieldset class="enroll_fieldset">
|
|
<legend class="sr">${pgettext("self","Enroll")}</legend>
|
|
<input name="course_id" type="hidden" value="${course.id | h}">
|
|
<input name="enrollment_action" type="hidden" value="enroll">
|
|
</fieldset>
|
|
<div class="submit">
|
|
<input name="submit" type="submit" value="${pgettext('self','enroll')}">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
%endif
|
|
|
|
<%include file="../video_modal.html" />
|
|
|
|
<%static:require_module_async module_name="js/dateutil_factory" class_name="DateUtilFactory">
|
|
DateUtilFactory.transform(iterationKey=".localized_datetime");
|
|
</%static:require_module_async>
|