632 lines
16 KiB
HTML
632 lines
16 KiB
HTML
{% extends "lms/templates/lms_base.html" %}
|
|
{% block title %}
|
|
{{ _(class_info.title) }}
|
|
{% endblock %}
|
|
|
|
|
|
{% block page_content %}
|
|
<div class="common-page-style lms-page-style">
|
|
<div class="container">
|
|
{{ BreadCrumb(class_info) }}
|
|
<div class="">
|
|
{{ ClassDetails(class_info) }}
|
|
{{ ClassSections(class_info, class_courses, class_students, flow) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
|
|
<!-- BreadCrumb -->
|
|
{% macro BreadCrumb(class_info) %}
|
|
<div class="breadcrumb">
|
|
<a class="dark-links" href="/classes">{{ _("All Classes") }}</a>
|
|
<img class="ml-1 mr-1" src="/assets/lms/icons/chevron-right.svg">
|
|
<span class="breadcrumb-destination">{{ class_info.title }}</span>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
|
|
<!-- Class Details -->
|
|
{% macro ClassDetails(class_info) %}
|
|
<div class="class-details" data-class="{{ class_info.name }}">
|
|
|
|
<div class="page-title">
|
|
{{ class_info.title }}
|
|
</div>
|
|
|
|
{% if class_info.description %}
|
|
<div class="mb-4">
|
|
{{ class_info.description }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="vertically-center">
|
|
<div class="">
|
|
<svg class="icon icon-sm">
|
|
<use href="#icon-calendar"></use>
|
|
</svg>
|
|
<span>
|
|
{{ frappe.utils.format_date(class_info.start_date, "long") }} -
|
|
</span>
|
|
<span>
|
|
{{ frappe.utils.format_date(class_info.end_date, "long") }}
|
|
</span>
|
|
</div>
|
|
|
|
<span class="seperator"></span>
|
|
|
|
<div class="">
|
|
<svg class="icon icon-md">
|
|
<use href="#icon-education"></use>
|
|
</svg>
|
|
{{ class_courses | length }} {{ _("Courses") }}
|
|
</div>
|
|
|
|
<span class="seperator"></span>
|
|
|
|
<div class="">
|
|
<svg class="icon icon-md">
|
|
<use href="#icon-users"></use>
|
|
</svg>
|
|
{{ class_students | length }} {{ _("Students") }}
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{% if class_info.custom_component %}
|
|
{{ class_info.custom_component }}
|
|
{% endif %}
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
|
|
<!-- Class Sections -->
|
|
{% macro ClassSections(class_info, class_courses, class_students, flow) %}
|
|
<div class="mt-4">
|
|
|
|
{% if is_moderator %}
|
|
<button class="btn btn-default btn-sm pull-right" id="create-class">
|
|
{{ _("Edit") }}
|
|
</button>
|
|
{% endif %}
|
|
|
|
<ul class="nav lms-nav" id="classes-tab">
|
|
|
|
{% if is_student %}
|
|
<li class="nav-item">
|
|
<a class="nav-link {% if is_student %} active {% endif %}" data-toggle="tab" href="#dashboard">
|
|
{{ _("Dashboard") }}
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link {% if not is_student %} active {% endif %}" data-toggle="tab" href="#courses">
|
|
{{ _("Courses") }}
|
|
<span class="course-list-count">
|
|
{{ class_courses | length }}
|
|
</span>
|
|
</a>
|
|
</li>
|
|
|
|
{% if flow | length %}
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-toggle="tab" href="#schedule">
|
|
{{ _("Schedule") }}
|
|
<span class="course-list-count">
|
|
{{ flow | length }}
|
|
</span>
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-toggle="tab" href="#students">
|
|
{{ _("Students") }}
|
|
<span class="course-list-count">
|
|
{{ class_students | length }}
|
|
</span>
|
|
</a>
|
|
</li>
|
|
|
|
{% if is_moderator %}
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-toggle="tab" href="#assessments">
|
|
{{ _("Assessments") }}
|
|
<span class="course-list-count">
|
|
{{ assessments | length }}
|
|
</span>
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
|
|
{% if class_students | length and (is_moderator or is_student) %}
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-toggle="tab" href="#discussions">
|
|
{{ _("Discussions") }}
|
|
</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-toggle="tab" href="#live-class">
|
|
{{ _("Live Class") }}
|
|
<span class="course-list-count">
|
|
{{ live_classes | length }}
|
|
</span>
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
|
|
</ul>
|
|
|
|
<div class="border-bottom mb-4"></div>
|
|
|
|
<div class="tab-content">
|
|
|
|
{% if is_student %}
|
|
<div class="tab-pane {% if is_student %} active {% endif %}" id="dashboard" role="tabpanel" aria-labelledby="dashboard">
|
|
{{ Dashboard(class_info, class_courses, current_student) }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="tab-pane {% if not is_student %} active {% endif %}" id="courses" role="tabpanel" aria-labelledby="courses">
|
|
{{ CoursesSection(class_info, class_courses) }}
|
|
</div>
|
|
|
|
{% if flow | length %}
|
|
<div class="tab-pane" id="schedule" role="tabpanel" aria-labelledby="schedule">
|
|
{{ ScheduleSection(flow) }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="tab-pane" id="students" role="tabpanel" aria-labelledby="students">
|
|
{{ StudentsSection(class_info, class_students) }}
|
|
</div>
|
|
|
|
{% if is_moderator %}
|
|
<div class="tab-pane" id="assessments" role="tabpanel" aria-labelledby="assessments">
|
|
{{ AssessmentsSection(class_info) }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if class_students | length and (is_moderator or is_student or is_evaluator) %}
|
|
<div class="tab-pane" id="discussions" role="tabpanel" aria-labelledby="discussions">
|
|
{{ Discussions(class_info) }}
|
|
</div>
|
|
|
|
<div class="tab-pane" id="live-class" role="tabpanel" aria-labelledby="live-class">
|
|
{{ LiveClassSection(class_info, live_classes) }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro Dashboard(class_info, class_courses, current_student) %}
|
|
|
|
{% set upcoming_evals = current_student.upcoming_evals %}
|
|
{% set assessments = current_student.assessments %}
|
|
{% set student = current_student %}
|
|
|
|
{% if student.name == frappe.session.user %}
|
|
<button class="btn btn-default btn-sm btn-schedule-eval ml-2 pull-right">
|
|
{{ _("Schedule Evaluation") }}
|
|
</button>
|
|
{% endif %}
|
|
|
|
<div class="mb-8">
|
|
{% include "lms/templates/upcoming_evals.html" %}
|
|
</div>
|
|
<div class="mb-8">
|
|
{% include "lms/templates/assessments.html" %}
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro Discussions(class_info) %}
|
|
<article class="class-discussion">
|
|
{% set condition = is_moderator or is_student or is_evaluator %}
|
|
{% set doctype, docname = _("LMS Class"), class_info.name %}
|
|
{% set single_thread = True %}
|
|
{% set title = "Discussions" %}
|
|
{% set cta_title = "Post" %}
|
|
{% set button_name = _("Start Learning") %}
|
|
{% set redirect_to = "/classes/" + class_info.name %}
|
|
{% set empty_state_title = _("Have a doubt?") %}
|
|
{% set empty_state_subtitle = _("Post it here, our mentors will help you out.") %}
|
|
{% include "frappe/templates/discussions/discussions_section.html" %}
|
|
</article>
|
|
{% endmacro %}
|
|
|
|
{% macro CoursesSection(class_info, class_courses) %}
|
|
<article>
|
|
<header class="mb-5">
|
|
<div class="edit-header">
|
|
<div class="bold-heading">
|
|
{{ _("Courses") }}
|
|
</div>
|
|
{% if is_moderator %}
|
|
<button class="btn btn-default btn-sm btn-add-course">
|
|
{{ _("Add Courses") }}
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
</header>
|
|
|
|
{% if class_courses | length %}
|
|
<div class="cards-parent">
|
|
{% for course in class_courses %}
|
|
<div class="h-100">
|
|
{{ widgets.CourseCard(course=course, read_only=False) }}
|
|
<button class="btn icon-btn btn-default btn-block btn-remove-course" data-course="{{ course.name }}">
|
|
<svg class="icon icon-sm">
|
|
<use href="#icon-delete"></use>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="">
|
|
{{ _("No courses") }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
</article>
|
|
{% endmacro %}
|
|
|
|
|
|
{% macro StudentsSection(class_info, class_students) %}
|
|
<article>
|
|
<header>
|
|
<div class="edit-header mb-5">
|
|
<div class="bold-heading">
|
|
{{ _("Students") }}
|
|
</div>
|
|
{% if is_moderator %}
|
|
<button class="btn btn-default btn-sm btn-add-student">
|
|
{{ _("Add Students") }}
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
</header>
|
|
|
|
{% if class_students | length %}
|
|
<div class="form-grid">
|
|
<div class="grid-heading-row">
|
|
<div class="grid-row">
|
|
<div class="data-row row">
|
|
<div class="col grid-static-col">
|
|
{{ _("Full Name") }}
|
|
</div>
|
|
<div class="col grid-static-col col-xs-2 text-right">
|
|
{{ _("Courses Completed") }}
|
|
</div>
|
|
<div class="col grid-static-col col-xs-2 text-right">
|
|
{{ _("Assessments Completed") }}
|
|
</div>
|
|
<div class="col grid-static-col col-xs-2 text-right">
|
|
{{ _("Assessments Graded") }}
|
|
</div>
|
|
<div class="col grid-static-col">
|
|
{{ _("Last Active") }}
|
|
</div>
|
|
{% if is_moderator %}
|
|
<div class="col grid-static-col col-xs-1">
|
|
<svg class="icon icon-sm" style="filter: opacity(0.5)">
|
|
<use class="" href="#icon-setting-gear"></use>
|
|
</svg>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% for student in class_students %}
|
|
{% set allow_progress = is_moderator or is_evaluator %}
|
|
<div class="grid-row">
|
|
<div class="data-row row">
|
|
<a class="col grid-static-col button-links {% if allow_progress %} clickable {% endif %}" {% if allow_progress %} href="/classes/{{ class_info.name }}/students/{{ student.username }}" {% endif %}>
|
|
{{ student.student_name }}
|
|
</a>
|
|
<div class="col grid-static-col col-xs-2 text-right">
|
|
{{ student.courses_completed }}
|
|
</div>
|
|
<div class="col grid-static-col col-xs-2 text-right">
|
|
{{ student.assessments_completed }}
|
|
</div>
|
|
<div class="col grid-static-col col-xs-2 text-right">
|
|
{{ student.assessments_graded }}
|
|
</div>
|
|
<div class="col grid-static-col">
|
|
{{ frappe.utils.pretty_date(student.last_active) }}
|
|
</div>
|
|
{% if is_moderator %}
|
|
<div type="button" class="col grid-static-col col-xs-1 btn-remove-student" data-student="{{ student.student }}">
|
|
<svg class="icon icon-sm">
|
|
<use href="#icon-delete"></use>
|
|
</svg>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<p class="text-muted mt-3"> {{ _("No Students") }} </p>
|
|
{% endif %}
|
|
</article>
|
|
{% endmacro %}
|
|
|
|
|
|
{% macro AssessmentsSection(class_info) %}
|
|
<article>
|
|
<header class="edit-header mb-5">
|
|
<div class="bold-heading">
|
|
{{ _("Assessments") }}
|
|
</div>
|
|
{% if is_moderator %}
|
|
<button class="btn btn-default btn-sm" id="open-assessment-modal">
|
|
{{ _("Manage Assessments") }}
|
|
</button>
|
|
{% endif %}
|
|
</header>
|
|
{{ AssessmentList(assessments) }}
|
|
</article>
|
|
{% endmacro %}
|
|
|
|
{% macro AssessmentList(assessments) %}
|
|
{% if assessments | length %}
|
|
<div class="form-grid">
|
|
<div class="grid-heading-row">
|
|
<div class="grid-row">
|
|
<div class="row data-row">
|
|
<div class="col grid-static-col">
|
|
{{ _("Title") }}
|
|
</div>
|
|
<div class="col grid-static-col">
|
|
{{ _("Type") }}
|
|
</div>
|
|
<div class="col grid-static-col col-xs-1">
|
|
<svg class="icon icon-sm" style="filter: opacity(0.5)">
|
|
<use href="#icon-setting-gear"></use>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-body">
|
|
<div class="rows">
|
|
{% for assessment in assessments %}
|
|
<div class="grid-row">
|
|
<div class="row data-row">
|
|
<a class="col grid-static-col clickable" href="{{ assessment.edit_url }}">
|
|
{{ assessment.title }}
|
|
</a>
|
|
<div class="col grid-static-col">
|
|
{{ assessment.assessment_type.split("LMS ")[1] }}
|
|
</div>
|
|
<div type="button" class="col grid-static-col col-xs-1 btn-remove-assessment" data-assessment="{{ assessment.assessment_name }}">
|
|
<svg class="icon icon-sm">
|
|
<use href="#icon-delete"></use>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<p class="text-muted mt-3"> {{ _("No Assessments") }} </p>
|
|
{% endif %}
|
|
{% endmacro %}
|
|
|
|
|
|
{% macro LiveClassSection(class_info, live_classes) %}
|
|
<article>
|
|
<header class="edit-header">
|
|
<div class="bold-heading">
|
|
{{ _("Live Class") }}
|
|
</div>
|
|
{% if is_moderator %}
|
|
<button class="btn btn-default btn-sm" id="open-class-modal">
|
|
{{ _("Create a Live Class") }}
|
|
</button>
|
|
{% endif %}
|
|
</header>
|
|
{{ CreateLiveClass(class_info) }}
|
|
{{ LiveClassList(class_info, live_classes) }}
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
|
|
{% macro CreateLiveClass(class_info) %}
|
|
{% if is_moderator %}
|
|
<div class="modal fade live-class-modal" id="live-class-modal" tabindex="-1" role="dialog">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<div class="modal-title">{{ _("Live Class Details") }}</div>
|
|
</div>
|
|
|
|
|
|
<div class="modal-body">
|
|
<form class="live-class-form" id="live-class-form"></form>
|
|
</div>
|
|
|
|
|
|
<div class="modal-footer">
|
|
<button class="btn btn-secondary btn-sm mr-2" data-dismiss="modal" aria-label="Close">
|
|
{{ _("Discard") }}
|
|
</button>
|
|
|
|
<button class="btn btn-primary btn-sm" id="create-live-class">
|
|
{{ _("Submit") }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endmacro %}
|
|
|
|
|
|
{% macro LiveClassList(class_info, live_classes) %}
|
|
<div class="lms-card-parent mt-5">
|
|
{% if live_classes | length %}
|
|
{% for class in live_classes %}
|
|
<div class="common-card-style column-card">
|
|
|
|
<div class="mb-0">
|
|
<div class="dropdown pull-right">
|
|
<svg class="icon icon-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
<use href="#icon-dot-horizontal"></use>
|
|
</svg>
|
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
|
{% if class.owner == frappe.session.user %}
|
|
<li>
|
|
<a class="dropdown-item small" href="{{ class.start_url }}"> {{ _("Start") }} </a>
|
|
</li>
|
|
{% endif %}
|
|
{% if is_student %}
|
|
<li>
|
|
<a class="dropdown-item small" href="{{ class.join_url }}"> {{ _("Join") }} </a>
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
</div>
|
|
<div class="bold-heading mb-4">
|
|
{{ class.title }}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<svg class="icon icon-sm">
|
|
<use href="#icon-calendar"></use>
|
|
</svg>
|
|
{{ frappe.utils.format_date(class.date, "full") }}
|
|
</div>
|
|
<div>
|
|
<svg class="icon icon-sm">
|
|
<use href="#icon-clock"></use>
|
|
</svg>
|
|
{{ frappe.utils.format_time(class.time, "hh:mm a") }}
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
{{ class.description }}
|
|
</div>
|
|
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<p class=""> {{ _("No Live Classes") }} </p>
|
|
{% endif %}
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
|
|
{% macro ScheduleSection(flow) %}
|
|
<article>
|
|
<header class="edit-header mb-5">
|
|
<div class="bold-heading">
|
|
{{ _("Schedule") }}
|
|
</div>
|
|
</header>
|
|
|
|
<div>
|
|
{% for chapter in flow %}
|
|
<div class="chapter-parent">
|
|
<div class="chapter-title" data-toggle="collapse" data-target="#{{ get_slugified_chapter_title(chapter.chapter_title) }}">
|
|
<img class="chapter-icon" src="/assets/lms/icons/chevron-right.svg">
|
|
<div class="chapter-title-main">
|
|
{{ chapter.chapter_title }}
|
|
</div>
|
|
</div>
|
|
<div class="chapter-content lessons collapse navbar-collapse" id="{{ get_slugified_chapter_title(chapter.chapter_title) }}">
|
|
|
|
<div class="schedule-header">
|
|
<div class="w-50">
|
|
{{ _("Lesson") }}
|
|
</div>
|
|
<div class="w-25">
|
|
{{ _("Date") }}
|
|
</div>
|
|
<div class="w-25 text-center">
|
|
{{ _("Start Time") }}
|
|
</div>
|
|
<div class="w-25 text-center">
|
|
{{ _("End Time") }}
|
|
</div>
|
|
</div>
|
|
|
|
{% for lesson in chapter.lessons %}
|
|
<div class="lesson-info flex align-center">
|
|
<a class="lesson-links w-50" href="{{ lesson.url }}">
|
|
<svg class="icon icon-sm mr-2">
|
|
<use class="" href="#{{ lesson.icon }}">
|
|
</svg>
|
|
|
|
{{ lesson.title }}
|
|
|
|
{% if current_student.name and get_membership(lesson.course, current_student.name) %}
|
|
{% set lesson_progress = get_progress(lesson.course, lesson.name, current_student.name) %}
|
|
<svg class="icon icon-md lesson-progress-tick ml-3 {% if lesson_progress != 'Complete' %} hide {% endif %}">
|
|
<use class="" href="#icon-success">
|
|
</svg>
|
|
{% endif %}
|
|
</a>
|
|
<div class="w-25">
|
|
{{ frappe.utils.format_date(lesson.date, "medium") }}
|
|
</div>
|
|
<div class="w-25 text-center">
|
|
{% if lesson.start_time %}
|
|
{{ frappe.utils.format_time(lesson.start_time, "HH:mm a") }}
|
|
{% else %}
|
|
-
|
|
{% endif %}
|
|
</div>
|
|
<div class="w-25 text-center">
|
|
{% if lesson.end_time %}
|
|
{{ frappe.utils.format_time(lesson.end_time, "HH:mm a") }}
|
|
{% else %}
|
|
-
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</article>
|
|
{% endmacro %}
|
|
|
|
{%- block script %}
|
|
{{ super() }}
|
|
{% if is_moderator %}
|
|
<script>
|
|
frappe.boot.user = {
|
|
"can_create": [],
|
|
"can_select": ["User", "LMS Category", "LMS Assignment", "LMS Quiz"],
|
|
"can_read": ["User", "LMS Category", "LMS Assignment", "LMS Quiz"]
|
|
};
|
|
|
|
frappe.boot.single_types = []
|
|
|
|
let class_info = {{ class_info | json }};
|
|
</script>
|
|
{% endif %}
|
|
<script>
|
|
frappe.boot.user = {
|
|
"can_create": [],
|
|
"can_select": ["LMS Course"],
|
|
"can_read": ["LMS Course"]
|
|
};
|
|
let courses = {{ course_list | json }};
|
|
</script>
|
|
|
|
{{ include_script('controls.bundle.js') }}
|
|
{% endblock %} |