338 lines
8.0 KiB
HTML
338 lines
8.0 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, published_courses) }}
|
|
</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>
|
|
<div class="mt-1">
|
|
<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>
|
|
{% if class_info.description %}
|
|
<div class="mt-1">
|
|
{{ class_info.description }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if class_info.custom_component %}
|
|
{{ class_info.custom_component }}
|
|
{% endif %}
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
|
|
<!-- Class Sections -->
|
|
{% macro ClassSections(class_info, class_courses, class_students, published_courses) %}
|
|
<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">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" data-toggle="tab" href="#courses">
|
|
{{ _("Courses") }}
|
|
<span class="course-list-count">
|
|
{{ class_courses | length }}
|
|
</span>
|
|
</a>
|
|
</li>
|
|
|
|
<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 class_students | length and (is_moderator or is_student) %}
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-toggle="tab" href="#live-class">
|
|
{{ _("Live Class") }}
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
|
|
</ul>
|
|
|
|
<div class="border-bottom mb-4"></div>
|
|
|
|
<div class="tab-content">
|
|
<div class="tab-pane active" id="courses" role="tabpanel" aria-labelledby="courses">
|
|
{{ CoursesSection(class_info, class_courses, published_courses) }}
|
|
</div>
|
|
|
|
<div class="tab-pane" id="students" role="tabpanel" aria-labelledby="students">
|
|
{{ StudentsSection(class_info, class_students) }}
|
|
</div>
|
|
|
|
{% if class_students | length and (is_moderator or is_student) %}
|
|
<div class="tab-pane" id="live-class" role="tabpanel" aria-labelledby="live-class">
|
|
{{ LiveClassSection(class_info, live_classes) }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
|
|
{% macro CoursesSection(class_info, class_courses, published_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>
|
|
{% for course in class_courses %}
|
|
<div class="list-row level">
|
|
<div {% if is_moderator %} class="clickable" {% endif %}>
|
|
{{ course.title }}
|
|
</div>
|
|
{% if is_moderator %}
|
|
<div type="button" class="btn-remove-course" data-course="{{ course.course }}">
|
|
<svg class="icon icon-sm">
|
|
<use href="#icon-delete"></use>
|
|
</svg>
|
|
</div>
|
|
{% endif %}
|
|
</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>
|
|
{% for student in class_students %}
|
|
{% set last_active = frappe.db.get_value("User", student.student, "last_active") %}
|
|
{% set allow_progress = is_moderator or student.student == frappe.session.user or (frappe.db.get_single_value("LMS Settings", "allow_student_progress") and
|
|
is_student) %}
|
|
|
|
<div class="list-row level">
|
|
<div>
|
|
<a {% if allow_progress %} class="clickable" href="/classes/{{ class_info.name }}/students/{{ student.username }}" {% endif %}>
|
|
{{ student.student_name }}
|
|
</a>
|
|
</div>
|
|
{% if is_moderator %}
|
|
<div type="button" class="btn-remove-student" data-student="{{ student.student }}">
|
|
<svg class="icon icon-sm">
|
|
<use href="#icon-delete"></use>
|
|
</svg>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<p class="text-muted mt-3"> {{ _("No Students") }} </p>
|
|
{% endif %}
|
|
</article>
|
|
{% 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="lms-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="lms-card-title 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 %}
|
|
|
|
{%- block script %}
|
|
{{ super() }}
|
|
{% if is_moderator %}
|
|
<script>
|
|
frappe.boot.user = {
|
|
"can_create": [],
|
|
"can_select": ["User"],
|
|
"can_read": ["User"]
|
|
};
|
|
|
|
frappe.router = {
|
|
slug (name) {
|
|
return name.toLowerCase().replace(/ /g, "-");
|
|
}
|
|
}
|
|
let class_info = {{ class_info | json }};
|
|
</script>
|
|
{% endif %}
|
|
|
|
{{ include_script('controls.bundle.js') }}
|
|
{% endblock %} |