feat: course page redesign
This commit is contained in:
pateljannat
@@ -1,28 +1,257 @@
|
||||
{% extends "templates/base.html" %}
|
||||
{% block title %}{{ 'Courses' }}{% endblock %}
|
||||
{% from "www/macros/profile.html" import profile %}
|
||||
{% block title %}{{ "Courses" }}{% endblock %}
|
||||
{% block head_include %}
|
||||
<meta name="description" content="Courses" />
|
||||
<meta name="keywords" content="Courses {{course.title}}" />
|
||||
<style>
|
||||
section {
|
||||
padding: 2rem;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.dashboard__profile {
|
||||
width: 150px;
|
||||
height: 155px;
|
||||
border-radius: 50%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.dashboard__profileSmall {
|
||||
width: 59px;
|
||||
height: 57px;
|
||||
border-radius: 50%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.dashboard__abbr {
|
||||
font-size: 50px;
|
||||
width: 155px;
|
||||
height: 155px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.dashboard__abbrSmall {
|
||||
font-size: 20px;
|
||||
width: 59px;
|
||||
height: 57px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.margin-bottom {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.dimensions {
|
||||
max-width: 25%;
|
||||
min-width: 25%;
|
||||
}
|
||||
|
||||
.mentor_message {
|
||||
background: #FFFFDD;
|
||||
border: 1px solid #DDDDAA;
|
||||
box-sizing: border-box;
|
||||
width: 75%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.batch_style {
|
||||
padding: 3px;
|
||||
width: fit-content;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.green_badge {
|
||||
background: #DDFFDD;
|
||||
border: 1px solid #CCDDCC;
|
||||
color: #448844;
|
||||
}
|
||||
|
||||
.yellow_badge {
|
||||
background: #FFFFDD;
|
||||
border: 1px solid #DDDDAA;
|
||||
color: #888844;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="top-section container" style="padding: 1rem 0rem;">
|
||||
<div class='container pb-5'>
|
||||
<div class="container pb-5">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item" aria-current="page"><a href="/courses">Courses</a></li>
|
||||
</ol>
|
||||
</nav>
|
||||
<div class="badge badge-info enrollment-badge hide">Enrolled</div>
|
||||
<div>
|
||||
<!-- {% if not course_enrolled and frappe.session.user != "Guest" %}
|
||||
<button class="btn btn-dark btn-enroll float-right" data-course="{{ course.name }}">Enroll</button>
|
||||
{% endif %} -->
|
||||
<h1>{{ course.title }}</h1>
|
||||
<div class="d-flex justify-content-between">
|
||||
<div class="mr-3">
|
||||
<!-- {% if not course_enrolled and frappe.session.user != "Guest" %}
|
||||
<button class="btn btn-dark btn-enroll float-right" data-course="{{ course.name }}">Enroll</button>
|
||||
{% endif %} -->
|
||||
<h2 class="course-title" data-course={{ course.name | urlencode }}>{{ course.title }}</h2>
|
||||
{{course.short_introduction}}
|
||||
</div>
|
||||
<div>
|
||||
<iframe width="417" height="274" src="{{course.video_link}}" title="YouTube video player"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="nav nav-tabs mt-4" id="myTab" role="tablist">
|
||||
{% if is_mentor %}
|
||||
<h4 class="margin-bottom">Your Batches</h4>
|
||||
{% if mentor_batches %}
|
||||
<div>
|
||||
<div class="mentor_message">
|
||||
You are a mentor for this course. Manage your batches or create a new batch from here.
|
||||
</div>
|
||||
<div class="d-flex flex-wrap">
|
||||
{% for batch in mentor_batches %}
|
||||
<div class="border m-3 dimensions w-50">
|
||||
<div class="p-5">
|
||||
<small class="batch_style {{batch.badge_class}} float-right">{{batch.status}}</small>
|
||||
<div class="mb-3">Starting {{frappe.utils.format_date(batch.start_date, "medium")}}</div>
|
||||
<div>Sessions every {{batch.sessions_on}}</div>
|
||||
<div>{{frappe.utils.format_time(batch.start_time, "short")}} -
|
||||
{{frappe.utils.format_time(batch.end_time, "short")}}
|
||||
</div>
|
||||
</div>
|
||||
{% if batch.mentors %}
|
||||
<div class="mb-3 p-5">
|
||||
<h6>Mentors</h6>
|
||||
{% for mentor in batch.mentors %}
|
||||
<div class="d-flex align-items-center border p-2">
|
||||
<div>
|
||||
{{ profile(mentor.photo, mentor.full_name, mentor.abbr, "small")}}
|
||||
</div>
|
||||
<div class="ml-5">{{mentor.full_name}}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<hr>
|
||||
<div class="text-right mb-5" style="max-height: 10%;">
|
||||
<button class="btn btn-primary mb-2 mr-2 manage-batch" data-batch="{{ batch.name | urlencode }}">Manage</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<a class="btn btn-primary add-batch" href="/add-a-new-batch?course={{course.name}}" data-course="{{course.name | urlencode}}">Add a new batch</a>
|
||||
</div>
|
||||
{% else %}
|
||||
<div>
|
||||
<div class="mentor_message">
|
||||
<p> You are a mentor for this course. </p>
|
||||
<button class="btn btn-primary"> Create your first batch </button>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if not is_mentor and upcoming_batches %}
|
||||
<div class="upcoming-batches">
|
||||
<h4>Upcoming Batches</h4>
|
||||
<div class="d-flex flex-wrap">
|
||||
{% for batch in upcoming_batches %}
|
||||
<div class="border m-3 dimensions">
|
||||
<div class="p-5">
|
||||
<div class="mb-3">Starting {{frappe.utils.format_date(batch.start_date, "medium")}}</div>
|
||||
<div>Sessions every {{batch.sessions_on}}</div>
|
||||
<div>{{frappe.utils.format_time(batch.start_time, "short")}} -
|
||||
{{frappe.utils.format_time(batch.end_time, "short")}}
|
||||
</div>
|
||||
</div>
|
||||
{% if batch.mentors %}
|
||||
<div class="mb-3 p-5" style="">
|
||||
<h6>Mentors</h6>
|
||||
{% for mentor in batch.mentors %}
|
||||
<div class="d-flex align-items-center border p-2">
|
||||
<div>
|
||||
{{ profile(mentor.photo, mentor.full_name, mentor.abbr, "small")}}
|
||||
</div>
|
||||
<div class="ml-5">{{mentor.full_name}}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<hr>
|
||||
<div class="text-right mb-5" style="max-height: 10%;">
|
||||
<button class="btn btn-primary mb-2 mr-2 join-batch" data-batch="{{ batch.name | urlencode }}">Join
|
||||
now</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div>
|
||||
<h4 class="margin-bottom mt-5">About the Course</h4>
|
||||
<div class="p-5"> {{frappe.utils.md_to_html(course.description)}} </div>
|
||||
</div>
|
||||
<div class="margin-bottom">
|
||||
<h4 class="margin-bottom">Instructor</h4>
|
||||
<div class="d-flex align-items-center">
|
||||
<div>
|
||||
{{ profile(instructor.photo, instructor.full_name, instructor.abbr, "small")}}
|
||||
</div>
|
||||
<div>
|
||||
<div>{{instructor.full_name}}</div>
|
||||
<div class="text-muted">{{instructor.course_count}} Courses</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="margin-bottom">
|
||||
<h4 class="margin-bottom">Mentors</h4>
|
||||
<div class="d-flex">
|
||||
{% for mentor in mentors %}
|
||||
<div class="d-flex align-items-center mr-5">
|
||||
<div>
|
||||
{{ profile(mentor.photo, mentor.full_name, mentor.abbr, "small")}}
|
||||
</div>
|
||||
<div>
|
||||
<div>{{mentor.full_name}}</div>
|
||||
{% if mentor.batch_count %}
|
||||
<div class="text-muted">Mentored {{mentor.batch_count}} {% if mentor.batch_count == 1 %} Batch
|
||||
{% else %} Batches {% endif %}</div>
|
||||
{% else %}
|
||||
<div class="text-muted">New Mentor</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-5 mentor-request">
|
||||
Interested to mentor this course? <span class="apply-now" data-course={{course.name | urlencode}}
|
||||
style="color: #2490EF; cursor: pointer;">Apply now!</span>
|
||||
</div>
|
||||
<div class="pt-5 already-applied hide">
|
||||
You've applied to become a mentor for this course. Your request is currently under review. If you are not
|
||||
any more interested to mentor this course, you can <span class="cancel-request" data-course={{course.name |
|
||||
urlencode}} style="color: #2490EF; cursor: pointer;">Cancel your Application</span>.
|
||||
</div>
|
||||
{% if course.topics %}
|
||||
<div class="mt-5">
|
||||
<h4 class="margin-bottom">Topics</h4>
|
||||
<div class="">
|
||||
{% for topic in course.topics %}
|
||||
<div class="">
|
||||
<a class="text-decoration-none" href="/courses/{{course.slug}}/{{topic.slug}}">
|
||||
<h5>{{topic.title}}</h5>
|
||||
</a>
|
||||
<div>{{topic.preview | markdown }}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<!-- <ul class="nav nav-tabs mt-4" id="myTab" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
|
||||
aria-selected="true">Course Details</a>
|
||||
@@ -37,8 +266,8 @@
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane fade py-4 show active" role="tabpanel" id="home">
|
||||
<div class='container'>
|
||||
<div>{{ frappe.utils.md_to_html(course.description) }}</div>
|
||||
<div class="container">
|
||||
<div>{{ frappe.utils.md_to_html(course.description) }}</div>
|
||||
<div class="list-group">
|
||||
{% for topic in course.topics %}
|
||||
<div class="list-group-item">
|
||||
@@ -53,18 +282,19 @@
|
||||
<div>
|
||||
{% if batches %}
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-default dropdown-toggle mb-5" data-toggle="dropdown" aria-expanded="false">
|
||||
<button class="btn btn-default dropdown-toggle margin-botton" data-toggle="dropdown" aria-expanded="false">
|
||||
<span class="current-batch">{{ batches[0] }}</span>
|
||||
<b class="caret"></b>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||||
{% for batch in batches %}
|
||||
<li>
|
||||
<a class="grey-link dropdown-item list-batch" href="#" onclick="return false;" data-label="{{ batch | urlencode}}">
|
||||
<span class="alt-underline"> {{ batch }} </span>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% for batch in batches %}
|
||||
<li>
|
||||
<a class="grey-link dropdown-item list-batch" href="#" onclick="return false;"
|
||||
data-label="{{ batch | urlencode}}">
|
||||
<span class="alt-underline"> {{ batch }} </span>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
@@ -89,6 +319,6 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</section>
|
||||
{% endblock %}
|
||||
@@ -1,4 +1,19 @@
|
||||
frappe.ready(() => {
|
||||
if (frappe.session.user != "Guest") {
|
||||
frappe.call({
|
||||
'method': 'community.lms.doctype.lms_mentor_request.lms_mentor_request.has_requested',
|
||||
'args': {
|
||||
course: $(".course-title").attr("data-course"),
|
||||
},
|
||||
'callback': (data) => {
|
||||
if (data.message) {
|
||||
$(".mentor-request").addClass("hide");
|
||||
$(".already-applied").removeClass("hide")
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
$(".list-batch").click((e) => {
|
||||
var batch = decodeURIComponent($(e.currentTarget).attr("data-label"))
|
||||
$(".current-batch").text(batch)
|
||||
@@ -13,6 +28,7 @@ frappe.ready(() => {
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
$(".send-message").click((e) => {
|
||||
var message = $(".message-text").val().trim();
|
||||
if (message) {
|
||||
@@ -34,6 +50,61 @@ frappe.ready(() => {
|
||||
$(".message-text").val("");
|
||||
}
|
||||
})
|
||||
|
||||
$(".apply-now").click((e) => {
|
||||
if (frappe.session.user == "Guest") {
|
||||
window.location.href = "/login";
|
||||
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")
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
$(".cancel-request").click((e) => {
|
||||
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")
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
$(".join-batch").click((e) => {
|
||||
if (frappe.session.user == "Guest") {
|
||||
window.location.href = "/login";
|
||||
return;
|
||||
}
|
||||
batch = decodeURIComponent($(e.currentTarget).attr("data-batch"))
|
||||
frappe.call({
|
||||
"method": "community.lms.doctype.lms_batch_membership.lms_batch_membership.create_member",
|
||||
"args": {
|
||||
"batch": batch
|
||||
},
|
||||
"callback": (data) => {
|
||||
if (data.message == "OK") {
|
||||
frappe.msgprint(__("You are now a student of this course."))
|
||||
$(".upcoming-batches").addClass("hide")
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
var add_message = (message, session_user = false) => {
|
||||
var author_name = session_user ? "You" : message.author_name
|
||||
return `<div class="list-group-item">
|
||||
@@ -42,13 +113,6 @@ frappe.ready(() => {
|
||||
<div class="small text-muted text-right"> ${message.creation} </div>
|
||||
</div>`;
|
||||
}
|
||||
/* if(frappe.session.user != "Guest"){
|
||||
frappe.call('community.www.courses.course.has_enrolled', { course: get_search_params().get("course") }, (data) => {
|
||||
if (data.message) {
|
||||
show_enrollment_badge()
|
||||
}
|
||||
})
|
||||
} */
|
||||
})
|
||||
/*
|
||||
var show_enrollment_badge = () => {
|
||||
|
||||
@@ -1,19 +1,27 @@
|
||||
import frappe
|
||||
from frappe.utils import nowdate, getdate
|
||||
|
||||
def get_context(context):
|
||||
context.no_cache = 1
|
||||
try:
|
||||
course_id = frappe.form_dict['course']
|
||||
course_id = frappe.form_dict["course"]
|
||||
except KeyError:
|
||||
frappe.local.flags.redirect_location = '/courses'
|
||||
frappe.local.flags.redirect_location = "/courses"
|
||||
raise frappe.Redirect
|
||||
context.course = get_course(course_id)
|
||||
context.batches = get_course_batches(context.course.name)
|
||||
context.upcoming_batches = get_upcoming_batches(context.course.name, context.batches)
|
||||
#context.course_enrolled = has_enrolled(course_id)
|
||||
context.discussions, context.memberships = get_discussions(course_id)
|
||||
context.discussions, context.memberships = get_discussions(context.batches)
|
||||
context.instructor = get_instructor(course_id)
|
||||
context.mentors = get_mentors(context.course.name)
|
||||
if context.memberships:
|
||||
context.member_type = context.memberships[0].member_type
|
||||
if context.member_type != "Student":
|
||||
context.batches = [membership.batch for membership in context.memberships]
|
||||
if context.member_type == "Mentor":
|
||||
context.is_mentor = True
|
||||
context.mentor_batches = get_mentor_batches(context.memberships)
|
||||
context.current_batch = context.memberships[0].batch
|
||||
context.author = context.memberships[0].member
|
||||
else:
|
||||
@@ -23,34 +31,87 @@ def get_context(context):
|
||||
context.author = None
|
||||
|
||||
def get_course(slug):
|
||||
course = frappe.db.get_value('LMS Course', {"slug": slug},
|
||||
['name', 'slug', 'title', 'description'], as_dict=1)
|
||||
course = frappe.db.get_value("LMS Course", {"slug": slug},
|
||||
["name", "slug", "title", "description", "short_introduction", "video_link"], as_dict=1)
|
||||
|
||||
course['topics'] = frappe.db.get_all('LMS Topic',
|
||||
course["topics"] = frappe.db.get_all("LMS Topic",
|
||||
filters={
|
||||
'course': course['name']
|
||||
"course": course["name"]
|
||||
},
|
||||
fields=['name', 'slug', 'title', 'preview'],
|
||||
order_by='creation'
|
||||
fields=["name", "slug", "title", "preview"],
|
||||
order_by="creation"
|
||||
)
|
||||
return course
|
||||
|
||||
def get_discussions(slug):
|
||||
memberships = get_membership(slug)
|
||||
messages = get_messages(memberships[0].batch)
|
||||
def get_upcoming_batches(course, all_batches):
|
||||
memberships = get_membership(all_batches)
|
||||
if not len(memberships):
|
||||
batches = frappe.get_all("LMS Batch", {"course": course, "start_date": [">", nowdate()]}, ["start_date", "start_time", "end_time", "sessions_on", "name"])
|
||||
batches = get_batch_mentors(batches)
|
||||
return batches
|
||||
return []
|
||||
|
||||
def get_batch_mentors(batches):
|
||||
for batch in batches:
|
||||
batch.mentors = []
|
||||
mentors = frappe.get_all("LMS Batch Membership", {"batch": batch.name, "member_type": "Mentor"}, ["member"])
|
||||
for mentor in mentors:
|
||||
member = frappe.db.get_value("Community Member", mentor.member, ["full_name", "photo", "abbr"], as_dict=1)
|
||||
batch.mentors.append(member)
|
||||
return batches
|
||||
|
||||
def get_discussions(batches):
|
||||
messages = []
|
||||
memberships = get_membership(batches)
|
||||
if len(memberships):
|
||||
messages = get_messages(memberships[0].batch)
|
||||
return messages, memberships
|
||||
|
||||
def get_membership(slug):
|
||||
def get_membership(batches):
|
||||
memberships = []
|
||||
course = frappe.db.get_value("LMS Course", {"slug": slug}, "name")
|
||||
member = frappe.db.get_value("Community Member", {"email": frappe.session.user}, "name")
|
||||
batches = frappe.get_all("LMS Batch", {"course": course}, ["name"])
|
||||
for batch in batches:
|
||||
membership = frappe.db.get_value("LMS Batch Membership", {"member": member, "batch": batch.name}, ["batch", "member", "member_type"], as_dict=1)
|
||||
if membership:
|
||||
memberships.append(membership)
|
||||
return memberships
|
||||
|
||||
def get_instructor(slug):
|
||||
owner = frappe.db.get_value("LMS Course", {"slug":slug}, ["owner"])
|
||||
instructor = frappe.get_doc("Community Member", {"email": owner})
|
||||
instructor.course_count = len(frappe.get_all("LMS Course", {"owner": owner}))
|
||||
return instructor
|
||||
|
||||
def get_mentors(course):
|
||||
course_mentors = []
|
||||
mentors = frappe.get_all("LMS Course Mentor Mapping", {"course": course}, ["member"])
|
||||
for mentor in mentors:
|
||||
member = frappe.get_doc("Community Member", mentor.member)
|
||||
member_in_list = list(filter(lambda x: x.name == member.name, course_mentors))
|
||||
if not member_in_list:
|
||||
member.batch_count = len(frappe.get_all("LMS Batch Membership", {"member": member.name, "member_type": "Mentor"}))
|
||||
course_mentors.append(member)
|
||||
return course_mentors
|
||||
|
||||
def get_course_batches(course):
|
||||
return frappe.get_all("LMS Batch", {"course": course}, ["name"])
|
||||
|
||||
def get_mentor_batches(memberships):
|
||||
mentor_batches = []
|
||||
memberships_as_mentor = list(filter(lambda x: x.member_type == "Mentor", memberships))
|
||||
for membership in memberships_as_mentor:
|
||||
batch = frappe.get_doc("LMS Batch", membership.batch)
|
||||
mentor_batches.append(batch)
|
||||
for batch in mentor_batches:
|
||||
if getdate(batch.start_date) < getdate():
|
||||
batch.status = "active"
|
||||
batch.badge_class = "green_badge"
|
||||
else:
|
||||
batch.status = "scheduled"
|
||||
batch.badge_class = "yellow_badge"
|
||||
mentor_batches = get_batch_mentors(mentor_batches)
|
||||
return mentor_batches
|
||||
|
||||
@frappe.whitelist()
|
||||
def get_messages(batch):
|
||||
messages = frappe.get_all("LMS Message", {"batch": batch}, ["*"], order_by="creation desc")
|
||||
|
||||
Reference in New Issue
Block a user