feat: course home

This commit is contained in:
pateljannat
2021-07-06 17:58:36 +05:30
parent 45d88bdc08
commit 5ea3b25d21
14 changed files with 1197 additions and 535 deletions

View File

@@ -3,107 +3,215 @@
{% block title %}{{ course.title }}
{% endblock %}
{% block head_include %}
<meta name="description" content="Courses"/>
<meta name="keywords" content="Courses {{course.title}}"/>
<link rel="stylesheet" href="/assets/frappe/css/font-awesome.css">
<meta name="description" content="Courses" />
<meta name="keywords" content="Courses {{course.title}}" />
<link rel="stylesheet" href="/assets/frappe/css/font-awesome.css">
{% endblock %}
{% block content %}
<div class="common-page-style course-home-page">
<div class="common-card-style course-card-wide">
<div class="course-image-wide" style="background-image: url({{ course.image }});">
<div class="course-tags">
{% for tag in course.get_tags() %}
<div class="course-card-pills">{{ tag }}</div>
{% endfor %}
</div>
</div>
<div class="course-card-wide-content">
<div class="course-card-wide-title">
{{ course.title }}
</div>
<div class="course-card-wide-intro">
{{ course.short_introduction }}
</div>
<div class="course-buttons">
<div class="wide-button start-learning">
Start Learning
<img class="" src="/assets/community/icons/white-arrow.svg"/>
</div>
<div class="wide-button video-preview">
Watch Video Preview
<img class="" src="/assets/community/icons/play.svg"/>
</div>
</div>
</div>
</div>
<div class="course-home-outline">
{{ widgets.CourseOutline(course=course, show_link=membership) }}
</div>
<div class="common-page-style">
<div class="course-home-page">
{{ BreadCrum(course) }}
{{ CourseCardWide(course) }}
{{ CourseOutlineAndCreator(course) }}
{{ Mentors(course) }}
{{ CourseDescriptionAndOverview(course) }}
{{ widgets.Reviews(course=course, membership=membership) }}
</div>
</div>
{% endblock %}
{% macro CourseVideo(course) %}
{% if course.video_link %}
<div class="preview-video">
<iframe width="560" height="315" src="{{course.video_link}}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"></iframe>
</div>
{% endif %}
{% endmacro %}
{% macro CourseDescription(course) %}
<div class="mt-5">
<h3>Course Description</h3>
<div class="course-description text-justify">
{{ frappe.utils.md_to_html(course.description) }}
{% macro BreadCrum(course) %}
<div class="course-instructor breadcrum">
<a class="dark-links" href="/courses">All Courses</a> > <span class="muted-text">{{ course.title }}</span>
</div>
{% endmacro %}
<!-- Course Card -->
{% macro CourseCardWide(course) %}
<div class="common-card-style course-card-wide">
<div class="course-image-wide" style="background-image: url({{ course.image }});">
<div class="course-tags">
{% for tag in course.get_tags() %}
<div class="course-card-pills">{{ tag }}</div>
{% endfor %}
</div>
</div>
{% endmacro %}
{% macro BatchSection(course) %}
<div class="row">
<div class="col-lg-8 col-md-12">
{% if course.is_mentor(frappe.session.user) %}
{{ BatchSectionForMentors(course, course.get_batches(mentor=frappe.session.user)) }}
{% else %}
{{ BatchSectionForStudents(course, course.get_upcoming_batches()) }}
<div class="course-card-wide-content">
<div class="course-card-wide-title">
{{ course.title }}
</div>
<div class="course-card-wide-intro">
{{ course.short_introduction }}
</div>
<div class="course-buttons">
{% if not course.disable_self_learning and not membership %}
<div class="wide-button start-learning is-primary join-batch" data-course="{{ course.name | urlencode }}">
Start Learning
<img class="ml-2" src="/assets/community/icons/white-arrow.svg" />
</div>
{% endif %}
{% if membership %}
{% set lesson_index = course.get_lesson_index(membership.current_lesson) if membership and
membership.current_lesson
else '1.1' %}
<a class="wide-button is-primary" id="continue-learning"
href="{{ course.get_learn_url(lesson_index) }}{{ course.query_parameter }}">
Continue Learning <img class="ml-2" src="/assets/community/icons/white-arrow.svg" />
</a>
{% endif %}
{% if course.video_link %}
<div class="wide-button video-preview">
Watch Video Preview
<img class="ml-2" src="/assets/community/images/play.png" />
</div>
{% endif %}
</div>
</div>
{% endmacro %}
{% macro BatchSectionForMentors(course, mentor_batches) %}
<h2>Your Batches</h2>
</div>
{% if mentor_batches %}
<div class="row">
{% for batch in mentor_batches %}
<div class="col-lg-4 col-md-6">
{{ widgets.RenderBatch(course=course, batch=batch, can_manage=True) }}
</div>
{% endfor %}
</div>
<a class="add-batch margin-bottom" href="/add-a-new-batch?new=1&course={{course.name}}">Add a new batch</a>
{% else %}
<div class="mentor_message">
<p>
You are a mentor for this course.
</p>
<a class="" href="/add-a-new-batch?new=1&course={{course.name}}">Create your first batch</a>
</div>
{% endif %}
{% endmacro %}
{% macro BatchSectionForStudents(course, upcoming_batches) %}
{% if upcoming_batches %}
<div class="mt-5">
<h3 class="upcoming">Upcoming Batches</h3>
<div class="row">
{% for batch in upcoming_batches %}
<div class="col-lg-4 col-md-6">
{{ widgets.RenderBatch(course=course, batch=batch, can_join=True) }}
</div>
{% endfor %}
<div class="modal fade preview-modal" id="video-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="course-home-headings modal-headings">{{ course.title }}</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<iframe class="video-iframe" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen src="{{ course.video_link }}"></iframe>
</div>
</div>
</div>
</div>
{% endmacro%}
<!-- Course Outline and Creator -->
{% macro CourseOutlineAndCreator(course) %}
<div class="course-outline-instructor-parent">
<div class="course-home-outline">
{{ widgets.CourseOutline(course=course, show_link=membership) }}
</div>
<div class="">
<div class="course-home-headings">
Creator
</div>
{{ widgets.MemberCard(member=course.get_instructor(), show_course_count=True, dimension_class="member-card-large") }}
</div>
</div>
{% endmacro %}
<!-- Mentors -->
{% macro Mentors(course) %}
{% if course.get_mentors() | length %}
<div class="course-home-mentors">
<div class="course-home-headings">
Mentors
</div>
<div class="mentors-section">
{% for mentor in course.get_mentors() %}
{{ widgets.MemberCard(member=mentor, show_course_count=False, dimension_class="member-card-medium") }}
{% endfor %}
<div class="view-all-mentors">
<span class="card-divider flex-one"></span>
<span class="course-instructor"><span class="all-mentors-text">View all mentors</span> <img class="mentor-icon"
src="/assets/community/icons/down-arrow.svg" /></span>
<span class="card-divider flex-one"></span>
</div>
</div>
</div>
{% endif %}
{% endmacro %}
<!-- Course Description and Overview -->
{% macro CourseDescriptionAndOverview(course) %}
<div class="course-outline-instructor-parent">
<div>
<div class="course-home-headings">
Course Description
</div>
<div class="common-card-style description-card small-title">
{{ frappe.utils.md_to_html(course.description) }}
</div>
</div>
<div>
<div class="course-home-headings">
Overview
</div>
<div class="common-card-style overview-card small-title">
{% if course.get_students() | length %}
<div class="overtime-item">
<img class="icon-background mr-1" src="/assets/community/icons/user.svg" />
{{ course.get_students() | length }} Enrolled
</div>
{% endif %}
{% set avg_rating = course.get_average_rating() %}
{% if avg_rating %}
<div class="overtime-item">
<img class="icon-background mr-1" src="/assets/community/icons/rating.svg" />
{{ avg_rating }} Rating
</div>
{% endif %}
</div>
</div>
</div>
{% endmacro %}
{% macro BatchSection(course) %}
<div class="row">
<div class="col-lg-8 col-md-12">
{% if course.is_mentor(frappe.session.user) %}
{{ BatchSectionForMentors(course, course.get_batches(mentor=frappe.session.user)) }}
{% else %}
<div class="mt-5 upcoming">There are no Upcoming Batches for this course currently.</div>
{{ BatchSectionForStudents(course, course.get_upcoming_batches()) }}
{% endif %}
</div>
</div>
{% endmacro %}
{% macro BatchSectionForMentors(course, mentor_batches) %}
<h2>Your Batches</h2>
{% if mentor_batches %}
<div class="row">
{% for batch in mentor_batches %}
<div class="col-lg-4 col-md-6">
{{ widgets.RenderBatch(course=course, batch=batch, can_manage=True) }}
</div>
{% endfor %}
</div>
<a class="add-batch margin-bottom" href="/add-a-new-batch?new=1&course={{course.name}}">Add a new batch</a>
{% else %}
<div class="mentor_message">
<p>
You are a mentor for this course.
</p>
<a class="" href="/add-a-new-batch?new=1&course={{course.name}}">Create your first batch</a>
</div>
{% endif %}
{% endmacro %}
{% macro BatchSectionForStudents(course, upcoming_batches) %}
{% if upcoming_batches %}
<div class="mt-5">
<h3 class="upcoming">Upcoming Batches</h3>
<div class="row">
{% for batch in upcoming_batches %}
<div class="col-lg-4 col-md-6">
{{ widgets.RenderBatch(course=course, batch=batch, can_join=True) }}
</div>
{% endfor %}
</div>
{% else %}
<div class="mt-5 upcoming">There are no Upcoming Batches for this course currently.</div>
{% endif %}
</div>
{% endmacro %}

View File

@@ -1,78 +1,223 @@
frappe.ready(() => {
if (frappe.session.user != "Guest") {
frappe.call({
'method': 'community.lms.doctype.lms_mentor_request.lms_mentor_request.has_requested',
'args': {
course: decodeURIComponent($("#course-title").attr("data-course")),
},
'callback': (data) => {
if (data.message > 0) {
$("#mentor-request").addClass("hide");
$("#already-applied").removeClass("hide")
}
}
})
check_mentor_request();
}
expand_the_first_chapter();
hide_wrapped_mentor_cards();
$("#apply-now").click((e) => {
e.preventDefault();
if (frappe.session.user == "Guest") {
window.location.href = `/login?redirect-to=/courses/${$(e.currentTarget).attr("data-course")}`;
return;
}
frappe.call({
"method": "community.lms.doctype.lms_mentor_request.lms_mentor_request.create_request",
"args": {
"course": decodeURIComponent($(e.currentTarget).attr("data-course"))
},
"callback": (data) => {
if (data.message == "OK") {
$("#mentor-request").addClass("hide");
$("#already-applied").removeClass("hide")
}
}
})
})
create_mentor_request(e);
});
$("#cancel-request").click((e) => {
e.preventDefault()
frappe.call({
"method": "community.lms.doctype.lms_mentor_request.lms_mentor_request.cancel_request",
"args": {
"course": decodeURIComponent($(e.currentTarget).attr("data-course"))
},
"callback": (data) => {
if (data.message == "OK") {
$("#mentor-request").removeClass("hide");
$("#already-applied").addClass("hide")
}
}
})
})
cancel_mentor_request(e);
});
$(".join-batch").click((e) => {
e.preventDefault();
var course = $(e.currentTarget).attr("data-course")
if (frappe.session.user == "Guest") {
window.location.href = `/login?redirect-to=/courses/${course}`;
return;
}
var batch = $(e.currentTarget).attr("data-batch");
batch = batch ? decodeURIComponent(batch) : "";
frappe.call({
"method": "community.lms.doctype.lms_batch_membership.lms_batch_membership.create_membership",
"args": {
"batch": batch ? batch : "",
"course": course
},
"callback": (data) => {
if (data.message == "OK") {
frappe.msgprint(__("You are now a student of this course."));
setTimeout(function () {
window.location.href = `/courses/${course}/home`;
}, 2000);
}
}
})
join_course(e)
});
$(".view-all-mentors").click((e) => {
view_all_mentors(e);
});
$(".video-preview").click((e) => {
show_video_dialog(e);
});
$(".review-link").click((e) => {
show_review_dialog(e);
});
$(".chapter-title").click((e) => {
rotate_chapter_icon(e);
});
$(".icon-rating").click((e) => {
highlight_rating(e);
});
$("#submit-review").click((e) => {
submit_review(e);
})
})
var check_mentor_request = () => {
frappe.call({
'method': 'community.lms.doctype.lms_mentor_request.lms_mentor_request.has_requested',
'args': {
course: decodeURIComponent($("#course-title").attr("data-course")),
},
'callback': (data) => {
if (data.message > 0) {
$("#mentor-request").addClass("hide");
$("#already-applied").removeClass("hide")
}
}
})
}
var hide_wrapped_mentor_cards = () => {
var offset_top_prev;
$('.member-card-medium').each(function () {
var offset_top = $(this).offset().top;
if (offset_top > offset_top_prev) {
$(this).addClass('wrapped').slideUp("fast");
}
if (!offset_top_prev) {
offset_top_prev = offset_top;
}
});
if ($(".wrapped").length < 1) {
$(".view-all-mentors").hide();
}
}
var create_mentor_request = (e) => {
e.preventDefault();
if (frappe.session.user == "Guest") {
window.location.href = `/login?redirect-to=/courses/${$(e.currentTarget).attr("data-course")}`;
return;
}
frappe.call({
"method": "community.lms.doctype.lms_mentor_request.lms_mentor_request.create_request",
"args": {
"course": decodeURIComponent($(e.currentTarget).attr("data-course"))
},
"callback": (data) => {
if (data.message == "OK") {
$("#mentor-request").addClass("hide");
$("#already-applied").removeClass("hide")
}
}
})
}
var cancel_mentor_request = (e) => {
e.preventDefault()
frappe.call({
"method": "community.lms.doctype.lms_mentor_request.lms_mentor_request.cancel_request",
"args": {
"course": decodeURIComponent($(e.currentTarget).attr("data-course"))
},
"callback": (data) => {
if (data.message == "OK") {
$("#mentor-request").removeClass("hide");
$("#already-applied").addClass("hide")
}
}
})
}
var join_course = (e) => {
e.preventDefault();
var course = $(e.currentTarget).attr("data-course")
if (frappe.session.user == "Guest") {
window.location.href = `/login?redirect-to=/courses/${course}`;
return;
}
var batch = $(e.currentTarget).attr("data-batch");
batch = batch ? decodeURIComponent(batch) : "";
frappe.call({
"method": "community.lms.doctype.lms_batch_membership.lms_batch_membership.create_membership",
"args": {
"batch": batch ? batch : "",
"course": course
},
"callback": (data) => {
if (data.message == "OK") {
frappe.msgprint(__("You are now a student of this course."));
setTimeout(function () {
window.location.href = `/courses/${course}/home`;
}, 2000);
}
}
})
}
var view_all_mentors = (e) => {
$(".wrapped").each((i, element) => {
$(element).slideToggle("slow");
})
var text_element = $(".view-all-mentors .course-instructor .all-mentors-text");
var text = text_element.text() == "View all mentors" ? "View less" : "View all mentors";
text_element.text(text);
if ($(".mentor-icon").css("transform") == "none") {
$(".mentor-icon").css("transform", "rotate(180deg)");
} else {
$(".mentor-icon").css("transform", "");
}
}
var show_video_dialog = (e) => {
e.preventDefault();
$("#video-modal").modal("show");
}
var show_review_dialog = (e) => {
e.preventDefault();
$("#review-modal").modal("show");
}
var rotate_chapter_icon = (e) => {
var icon = $(e.currentTarget).children(".chapter-icon");
if (icon.css("transform") == "none") {
icon.css("transform", "rotate(90deg)");
} else {
icon.css("transform", "none");
}
}
var expand_the_first_chapter = () => {
var elements = $(".collapse");
elements.each((i, elem) => {
if (i <= 1) {
$(elem).addClass("show");
$(elem).siblings(".chapter-title").children(".chapter-icon").css("transform", "rotate(90deg)");
}
});
}
var highlight_rating = (e) => {
var rating = $(e.currentTarget).attr("data-rating");
$(".icon-rating").removeClass("star-click");
$(".icon-rating").each((i, elem) => {
if (i <= rating-1) {
$(elem).addClass("star-click");
}
})
}
var submit_review = (e) => {
e.preventDefault();
var rating = $(".rating-field").children(".star-click").length;
var review = $(".review-field").val();
if (!review || !rating) {
$(".error-field").text("Both Rating and Review are required.");
return;
}
frappe.call({
method: "community.lms.doctype.lms_course_review.lms_course_review.submit_review",
args: {
"rating": rating,
"review": review,
"course": decodeURIComponent($(e.currentTarget).attr("data-course"))
},
callback: (data) => {
if (data.message == "OK") {
$(".review-modal").modal("hide");
frappe.msgprint("Thanks for providing your feedback!");
setTimeout(() => {
window.location.reload();
}, 2000);
}
}
})
}

View File

@@ -36,7 +36,7 @@
</div>
</div>
<div class="course-card-content">
<div class="course-card-meta">
<div class="course-card-meta muted-text">
{% if course.get_chapters() | length %}
<span>
{{ course.get_chapters() | length }} Chapters