Files
enlight-lms/school/lms/widgets/CourseCard.html
Jannat Patel 6ee1413996 fix: import
2022-02-10 10:32:23 +05:30

134 lines
4.4 KiB
HTML

{% set membership = get_membership(course.name, frappe.session.user) %}
{% set progress = frappe.utils.cint(membership.progress) %}
<div class="common-card-style course-card" data-course="{{ course.name }}">
<div class="course-image {% if not course.image %}default-image{% endif %}" {% if course.image %}
style="background-image: url( {{ course.image }} );" {% endif %}>
<div class="course-tags">
{% for tag in get_tags(course.name) %}
<div class="course-card-pills">{{ tag }}</div>
{% endfor %}
</div>
{% if not course.image %}
<div class="default-image-text">{{ course.title[0] }}</div>
{% endif %}
</div>
<div class="course-card-content">
<div class="course-card-meta">
{% if get_lessons(course.name) | length %}
<span>
{{ get_lessons(course.name) | length }} {{ _("Lessons") }}
</span>
{% endif %}
</div>
<div class="card-heading course-card-title">{{ course.title }}</div>
{% if membership and not read_only %}
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="{{ progress }}"
aria-valuemin="0" aria-valuemax="100" style="width:{{ progress }}%">
<span class="sr-only"> {{ progress }} Complete</span>
</div>
</div>
<div class="progress-percent">{{ progress }}% Completed</div>
{% endif %}
<div class="zindex course-card-footer">
<span class="">
{% set instructors = get_instructors(course.name) %}
{% for instructor in instructors %}
{% if instructors | length > 1 and loop.index == 1 %}
<div class="avatar-group overlap">
{% endif %}
{{ widgets.Avatar(member=instructor, avatar_class="avatar-small") }}
{% if instructors | length > 1 and loop.index == instructors | length %}
</div>
{% endif %}
{% endfor %}
<a class="button-links" href="{{ get_profile_url(instructors[0].username) }}">
<span class="course-instructor">
{% if instructors | length == 1 %}
{{ instructors[0].full_name }}
{% else %}
{{ instructors[0].full_name.split(" ")[0] }} and {{ instructors | length - 1 }} others
{% endif %}
</span>
</a>
</span>
{% set student_count = get_students(course.name) | length %}
<span class="course-student-count">
{% if student_count %}
<span class="vertically-center mr-4">
<img class="icon-background" src="/assets/school/icons/user.svg" />
{{ student_count }}
</span>
{% endif %}
{% set avg_rating = get_average_rating(course.name) %}
{% if avg_rating %}
<span class="vertically-center">
<img class="icon-background" src="/assets/school/icons/rating.svg" />
{{ frappe.utils.flt(avg_rating, frappe.get_system_settings("float_precision") or 3) }}
</span>
{% endif %}
</span>
</div>
{% if read_only %}
<a class="stretched-link" href="/courses/{{ course.name }}"></a>
{% else %}
{% set lesson_index = get_lesson_index(membership.current_lesson) if membership and
membership.current_lesson else '1.1' %}
{% set query_parameter = "?batch=" + membership.batch if membership and
membership.batch else "" %}
{% set certificate = is_certified(course.name) %}
{% if certificate %}
<a class="stretched-link" href="/courses/{{ course.name }}/{{ certificate }}"></a>
{% elif course.enable_certification and progress == 100 %}
<a class="stretched-link" id="certification" data-course="{{ course.name }}"></a>
{% elif progress == 100 %}
<a class="stretched-link" href="/courses/{{ course.name }}"></a>
{% elif course.upcoming %}
<a class="stretched-link" href="/courses/{{ course.name }}"></a>
{% elif membership %}
<a class="stretched-link" href="{{ get_lesson_url(course.name, lesson_index) }}{{ query_parameter }}"></a>
{% else %}
<a class="stretched-link" href="/courses/{{ course.name }}"></a>
{% endif %}
{% endif %}
</div>
</div>
<script>
frappe.ready(() => {
$("#certification").unbind().click((e) => {
create_certificate(e);
});
})
var create_certificate = (e) => {
e.preventDefault();
course = $(e.currentTarget).attr("data-course");
frappe.call({
method: "school.lms.doctype.lms_certification.lms_certification.create_certificate",
args: {
"course": course
},
callback: (data) => {
window.location.href = `/courses/${course}/${data.message}`;
}
})
}
</script>