Last active
November 27, 2020 11:40
-
-
Save zgunz42/5178f56bc5530fb5f8da67d3c2fd6069 to your computer and use it in GitHub Desktop.
file dom html
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
if (count($my_students) == 0) { | |
echo '<div class="alert alert-danger">You have no students yet. Please add your student in <a href="'.base_url().'profile">profile</a> page first. Don\'t worry, you can visit this page again later!</div>'; | |
} | |
?> | |
<style type="text/css"> | |
#deassign_student_list ul { | |
margin: 0; | |
padding: 0; | |
} | |
#deassign_student_list .group-title { | |
font-weight: bold; | |
} | |
#deassign_student_list li { | |
padding-right: 0; | |
padding-left: 0; | |
padding-bottom: 0; | |
} | |
#deassign_student_list li > div { | |
padding: 0 12px; | |
height: 30px; | |
} | |
#filter-report{ | |
margin-bottom: 50px; | |
margin-top: 5px; | |
} | |
.div-filter { | |
padding-right: 25px; | |
float: left; | |
} | |
.span-filter { | |
color: #2abb9b; | |
cursor: pointer; | |
} | |
.span-filter .fa { | |
margin-top: 3px; | |
position: absolute; | |
margin-left: 5px; | |
} | |
.dropdown { | |
position: relative; | |
display: inline-block; | |
} | |
.dropdown-content { | |
display: none; | |
position: absolute; | |
background-color: #fff; | |
width: auto; | |
box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.5); | |
z-index: 2; | |
padding: 5px; | |
right: -30px; | |
border-radius: 5px; | |
background-color: #fff; | |
border: 1px solid #f3f3f3; | |
} | |
.dropdown-content a { | |
color: black; | |
padding: 5px; | |
text-decoration: none; | |
display: block; | |
} | |
.dropdown-content a i { | |
font-size: 15px; | |
} | |
/*.dropdown-content a:hover {background-color: #f1f1f1}*/ | |
.dropdown:hover .dropdown-content { | |
display: block; | |
} | |
.width14 { width: 14px; } | |
.input_cb { | |
right: 10px; | |
position: absolute; | |
} | |
.main-button { | |
margin-bottom: 10px; | |
} | |
.big_button { | |
padding:5px 10px; | |
border:2px solid #2abb9b; | |
border-radius: 5px; | |
width: 200px; | |
float: left; | |
margin: 0 10px 10px 0; | |
cursor: pointer; | |
} | |
.big_button:hover, .big_button_active { | |
background-color: #dff0d8; | |
} | |
.big_button img { | |
float: left; | |
width: 45px; | |
margin-right: 10px; | |
} | |
.big_button span { | |
} | |
#loading { | |
text-align: center; | |
} | |
.blank-dropdown { | |
top: 58px !important; | |
left: -173px !important; | |
} | |
.tr_group, .tr_class, .tr_subject_level, .tr_level { | |
border-bottom: 1px solid #ccc; | |
cursor: pointer; | |
} | |
.tr_group:last-child, .tr_class:last-child { | |
border-bottom: 0; | |
} | |
.tr_group td, .tr_class td, .tr_level td, .tr_subject_level td { | |
font-weight: bold; | |
} | |
.tr_item, .tr_item_sl, .tr_item_level { | |
border: 0; | |
background-color: #F9F9F9; | |
display: none; | |
cursor: pointer; | |
} | |
.checkbox_filter { | |
margin-left: 10px !important; | |
cursor: pointer; | |
} | |
.checkbox_filter_ws { | |
margin-left: 10px !important; | |
cursor: pointer; | |
} | |
.dropdown-student { | |
padding: 0 !important; | |
border-radius: 10px; | |
background-color: #fff; | |
border: 1px solid #f3f3f3; | |
} | |
/* The container */ | |
.container-filter { | |
float: right; | |
display: block; | |
position: relative; | |
cursor: pointer; | |
font-size: 12px; | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
user-select: none; | |
} | |
/* Hide the browser's default checkbox */ | |
.container-filter input { | |
opacity: 0; | |
cursor: pointer; | |
height: 0; | |
} | |
/* Create a custom checkbox */ | |
.checkmark { | |
position: absolute; | |
top: 0;left: 10px; | |
height: 19px; | |
width: 19px; | |
background-color: #fff; | |
border-radius: 3px; | |
border: 1px solid #ccc; | |
} | |
.checkmark_small { | |
position: absolute; | |
top: 2px;left: 10px; | |
height: 14px; | |
width: 14px; | |
background-color: #fff; | |
border-radius: 3px; | |
border: 1px solid #ccc; | |
} | |
/* On mouse-over, add a grey background color */ | |
.container-filter:hover input ~ .checkmark,.container-filter:hover input ~ .checkmark_small { | |
background-color: #fff; | |
} | |
/* When the checkbox is checked, add a blue background */ | |
.container-filter input:checked ~ .checkmark,.container-filter input:checked ~ .checkmark_small { | |
background-color: #2ABB9B; | |
border: 0; | |
} | |
/* Create the checkmark/indicator (hidden when not checked) */ | |
.checkmark:after,.checkmark_small:after { | |
content: ""; | |
position: absolute; | |
display: none; | |
} | |
/* Show the checkmark when checked */ | |
.container-filter input:checked ~ .checkmark:after, .container-filter input:checked ~ .checkmark_small:after { | |
display: block; | |
} | |
/* Style the checkmark/indicator */ | |
.container-filter .checkmark:after { | |
left: 6px; | |
top: 1px; | |
width: 7px; | |
height: 14px; | |
border: solid white; | |
border-width: 0 3px 3px 0; | |
-webkit-transform: rotate(45deg); | |
-ms-transform: rotate(45deg); | |
transform: rotate(45deg); | |
} | |
.container-filter .checkmark_small:after { | |
left: 4px; | |
top: 1px; | |
width: 6px; | |
height: 11px; | |
border: solid white; | |
border-width: 0 3px 3px 0; | |
-webkit-transform: rotate(45deg); | |
-ms-transform: rotate(45deg); | |
transform: rotate(45deg); | |
} | |
.container_report { | |
width: auto; | |
padding-right: 15px; | |
padding-left: 45px; | |
margin-right: auto; | |
margin-left: auto; | |
} | |
@media (max-width: 576px) { | |
.container_report { | |
width: auto; | |
padding-right: 15px; | |
padding-left: 0; | |
margin-right: auto; | |
margin-left: auto; | |
} | |
#label_back { | |
float: none; | |
} | |
} | |
.question-content { | |
padding: 10px 0; | |
} | |
.btn-sm { | |
color: #333 !important; | |
font-weight: bold; | |
border-radius: 10px; | |
margin-top: 13px; | |
margin-bottom: 12px; | |
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2); | |
} | |
.btn-outline-secondary:hover { | |
background-color: #ddd !important; | |
} | |
.btn {font-family: 'eligible', 'Lato', 'sans-serif';} | |
.switch_3_ways_v2{ | |
margin: 0 8px 10px 8px; | |
font-size:0.8em; | |
line-height:2em; | |
border-radius:10px; | |
background:#fff; | |
position:relative; | |
display:block; | |
float:left; | |
border: 1px solid #333; | |
border-color: rgba(130, 136, 151, 0.5); | |
} | |
.switch2.monthly, | |
.switch2.semester, | |
.switch2.annual{ | |
cursor:pointer; | |
position:relative; | |
display:block; | |
float:left; | |
-webkit-transition: 300ms ease-out; | |
-moz-transition: 300ms ease-out; | |
transition: 300ms ease-out; | |
padding: 2px 6.7px; | |
} | |
.selector{ | |
text-align:center; | |
position:absolute; | |
padding: 2px 6.4px; | |
width:0; | |
box-sizing:border-box; | |
-webkit-transition: 300ms ease-out; | |
-moz-transition: 300ms ease-out; | |
transition: 300ms ease-out; | |
border-radius:0.3em; | |
color:white; | |
-moz-box-shadow: 0px 2px 13px 0px #9b9b9b; | |
-webkit-box-shadow: 0px 2px 13px 0px #9b9b9b; | |
-o-box-shadow: 0px 2px 13px 0px #9b9b9b; | |
box-shadow: 0px 2px 13px 0px #9b9b9b; | |
filter:progid:DXImageTransform.Microsoft.Shadow(color=#9b9b9b, Direction=180, Strength=13); | |
border-radius:8px; | |
} | |
.table-header-rotated { | |
width: 100%; | |
border-bottom: 1px solid #ccc; | |
margin-top: 35px; | |
} | |
.table-header-rotated th.row-header{ | |
min-width: 205px !important; | |
border-left: 1px solid #ccc; | |
} | |
.table-header-rotated td{ | |
width: 40px; | |
border-top: 1px solid #dddddd; | |
border-left: 1px solid #dddddd; | |
border-right: 1px solid #dddddd; | |
vertical-align: middle; | |
text-align: center; | |
} | |
.table-header-rotated th.rotate-45{ | |
height: 120px; | |
width: 40px; | |
min-width: 40px; | |
max-width: 40px; | |
position: relative; | |
vertical-align: bottom; | |
padding: 0; | |
font-size: 14px; | |
line-height: 0.8; | |
border: 1px solid #dddddd; | |
} | |
.table-header-rotated th.rotate-45 > div{ | |
position: relative; | |
top: -65px; | |
left: -67px; | |
width: 180px; | |
-ms-transform:rotate(-90deg); | |
-moz-transform:rotate(-90deg); | |
-webkit-transform:rotate(-90deg); | |
-o-transform:rotate(-90deg); | |
transform:rotate(-90deg); | |
overflow: hidden; | |
white-space: normal; | |
height: 48px; | |
padding: 5px; | |
line-height: 1.1; | |
border-right: 1px solid #ddd; | |
} | |
.loading-image { | |
position: absolute; | |
top: 90px; | |
left: 90px; | |
} | |
.tooltip { | |
position: fixed !important; | |
z-index:99999999; | |
} | |
.worksheet_report,.question_report { | |
cursor: pointer; | |
} | |
.worksheet_report:hover, .question_report:hover { | |
background-color: #dff0d8; | |
} | |
.btn-img{ | |
margin-left:0; | |
color: #000; | |
background-color: #fff; | |
border: 1px solid #2abb9b; | |
width: 22.95%; | |
cursor: pointer; | |
padding: 7px 2px; | |
margin-right: 7.02px; | |
} | |
.btn-work:hover, .btn-active { | |
background-color: #dff0d8; | |
} | |
.show_working { | |
border:1px solid #ddd; | |
border-radius: 5px; | |
width: 98%; | |
min-height: 200px; | |
max-height: 200px; | |
background-color: #FFF; | |
margin-top: 1px; | |
text-align: center; | |
} | |
.helper { | |
display: inline-block; | |
height: 100%; | |
vertical-align: middle; | |
} | |
.show_working img { | |
width: inherit; | |
min-height: 200px; | |
} | |
.label-radio { | |
border-color: #666 !important;; | |
} | |
.radioUi-success input:checked { | |
border-color: #60ADA7 !important;; | |
} | |
.label-radio::after { | |
background-color: #60ADA7 !important; | |
} | |
.icon_fa { | |
font-size: 18px; | |
color: #2ABB9B; | |
} | |
.icon_false { | |
font-size: 18px; | |
color: red; | |
} | |
.prev_attempt, .next_attempt { | |
cursor: pointer; | |
} | |
.img_grey { | |
filter: gray; | |
-webkit-filter: grayscale(1); | |
filter: grayscale(1); | |
cursor: not-allowed; | |
} | |
.card { | |
/*display: block !important; | |
-webkit-column-break-inside: avoid; | |
page-break-inside: avoid; | |
break-inside: avoid;*/ | |
display: block !important; | |
width: -webkit-fill-available; | |
margin-right: 10px; | |
float: left; | |
margin-bottom: 10px; | |
} | |
.card_hide, .nav_hide { | |
display: none; | |
} | |
.card_question_title { | |
line-height: 1.3; | |
} | |
.btnExpand { | |
line-height: 1.75; | |
} | |
.blankBg:focus { | |
color: #000; | |
} | |
.card_question_text { | |
min-height: 442px; | |
} | |
.card-columns .card { | |
max-width: 366px !important; | |
margin-right: 10px; | |
} | |
.card-div { | |
/*display: flex;*/ | |
max-width: 1130px; | |
} | |
#model-quiz-result-ocr { | |
height: 270px; | |
width: 100%; | |
float: left; | |
} | |
/* Pen color */ | |
.pen-default { | |
color: #FFFFFF; | |
font-size: 10px; | |
} | |
.pen-default::before { | |
content: ""; | |
display: inline-block; | |
width: 10px; | |
height: 10px; | |
background-color: #FFFFFF; | |
border-radius: 50%; | |
-moz-border-radius: 50%; | |
-webkit-border-radius: 50%; | |
} | |
.pen-medium { | |
color: #FFFFFF; | |
font-size: 14px; | |
} | |
.pen-medium::before { | |
content: ""; | |
display: inline-block; | |
width: 15px; | |
height: 15px; | |
background-color: #FFFFFF; | |
border-radius: 50%; | |
-moz-border-radius: 50%; | |
-webkit-border-radius: 50%; | |
margin-top: 3px; | |
} | |
.pen-bold { | |
color: #FFFFFF; | |
font-size: 18px; | |
} | |
.pen-bold::before { | |
content: ""; | |
display: inline-block; | |
width: 20px; | |
height: 20px; | |
background-color: #FFFFFF; | |
border-radius: 50%; | |
-moz-border-radius: 50%; | |
-webkit-border-radius: 50%; | |
margin-top: 6px; | |
} | |
#colorPick * { | |
-webkit-transition: all linear .2s; | |
-moz-transition: all linear .2s; | |
-ms-transition: all linear .2s; | |
-o-transition: all linear .2s; | |
transition: all linear .2s; | |
} | |
#colorPick { | |
background: rgba(255, 255, 255, 0.85); | |
-webkit-backdrop-filter: blur(15px); | |
position: absolute; | |
border-radius: 5px; | |
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2); | |
padding: 5px; | |
width: 60px; | |
z-index: 10000000; | |
} | |
#colorPick span { | |
font-size: 9pt; | |
text-transform: uppercase; | |
font-weight: bold; | |
color: #bbb; | |
margin-bottom: 5px; | |
display: block; | |
clear: both; | |
} | |
.colorPickButton { | |
border-radius: 50%; | |
width: 40px; | |
height: 40px; | |
margin: 1px 4px; | |
cursor: pointer; | |
display: inline-block; | |
} | |
.colorPickButton:hover { | |
transform: scale(1.1); | |
} | |
.colorPickDummy { | |
background: #fff; | |
border: 1px dashed #bbb; | |
} | |
.colorPickSelector { | |
cursor: pointer; | |
display: inline-block; | |
overflow: hidden; | |
position: relative; | |
margin: auto 12px auto auto; | |
padding: 0; | |
line-height: normal; | |
border-radius: 50%; | |
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.225); | |
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.225); | |
-webkit-transition: all linear .2s; | |
-moz-transition: all linear .2s; | |
-ms-transition: all linear .2s; | |
-o-transition: all linear .2s; | |
transition: all linear .2s; | |
} | |
.colorPickSelector:hover { transform: scale(1.1); } | |
#thicknessPick * { | |
-webkit-transition: all linear .2s; | |
-moz-transition: all linear .2s; | |
-ms-transition: all linear .2s; | |
-o-transition: all linear .2s; | |
transition: all linear .2s; | |
} | |
#thicknessPick { | |
background: rgba(255, 255, 255, 0.85); | |
-webkit-backdrop-filter: blur(15px); | |
position: absolute; | |
border-radius: 5px; | |
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2); | |
padding: 5px; | |
width: 60px; | |
z-index: 10000000; | |
left: 415px; | |
margin-top: 15px; | |
} | |
#thicknessPick button { | |
border-radius: 50%; | |
width: 40px; | |
height: 40px; | |
margin: 4px; | |
cursor: pointer; | |
display: inline-block; | |
} | |
#thicknessPick button:hover { | |
transform: scale(1.1); | |
} | |
</style> | |
<div class="row"> | |
<div class="col-lg-6 col-md-6 col-sm-6" style="top: 50%; left: 25%;"> | |
<div class="panel panel-success panel-success-custom-dark"> | |
<div class="panel-heading clearfix">My student list | |
<!-- <a href="#" class="assign_all_students btn btn-custom btn-no-margin pull-right">Assign all</a> --> | |
</div> | |
<div id="select-group" style="margin: 10px;"> | |
Filter By Class | |
</div> | |
<ul class="list-group" id="deassign_student_list"> | |
<?php | |
if (count($my_students) == 0) { | |
echo '<li class="list-group-item question_text helper_text">No classes</li>'; | |
} else { | |
$class_list = ''; | |
$data = $my_students["class_list"]; | |
$data1 = $my_students["class_list_tutor"]; | |
$data2 = $my_students["class_list_student"]; | |
$data3 = $my_students["no_class_list_tutor"]; | |
$data4 = $my_students["no_class_list_student"]; | |
$class_list .= '<li class="list-group-item question_text student_li"> | |
<span>No Class</span> | |
<label class="container-filter"> | |
<input checked type="checkbox" id="no_class" class="checkbox_filter checkbox_filter_ws class_check class_id_no_class" value="no_class" /> | |
<span class="checkmark"></span> | |
</label> | |
</li>'; | |
if (count($data3) > 0) { | |
$class_list .= '<li class="list-group-item class_tutor class_tutor_no_class" style="padding-left: 30px;"> | |
<span> - Tutor </span> | |
<label class="container-filter"> | |
<input checked type="checkbox" id="no_class" class="checkbox_filter checkbox_filter_ws class_tutor class_tutor_no_class" value="no_class" /> | |
<span class="checkmark"></span> | |
</label> | |
</li>'; | |
for ($x = 0; $x < count($my_students["no_class_list_tutor"]); $x++) { | |
$class_list .= '<li class="list-group-item class_tutor_list class_tutor_list_' .$data3[$x]->id . '" style="padding-left: 50px;"> | |
<span>' .$data3[$x]->fullname . '</span> | |
<label class="container-filter"> | |
<input checked type="checkbox" id="' .$data3[$x]->id . '" class="checkbox_filter checkbox_filter_ws class_tutor_each class_tutor_each_no_class" data-id="no_class" value="' .$data3[$x]->id . '" /> | |
<span class="checkmark"></span> | |
</label> | |
</li>'; | |
} | |
} else { | |
$class_list .= '<li class="list-group-item class_tutor class_tutor_no_class" style="padding-left: 30px;"> | |
<span> - Tutor </span> | |
</li>'; | |
} | |
if (count($data4) > 0) { | |
$class_list .= '<li class="list-group-item class_student class_student_no_class" style="padding-left: 30px;"> | |
<span> - Student </span> | |
<label class="container-filter"> | |
<input checked type="checkbox" id="no_class" class="checkbox_filter checkbox_filter_ws class_student class_student_no_class" value="no_class" /> | |
<span class="checkmark"></span> | |
</li>'; | |
for ($x = 0; $x < count($my_students["no_class_list_student"]); $x++) { | |
$class_list .= '<li class="list-group-item class_student_list class_student_list_' .$data4[$x]->id . '"" style="padding-left: 50px;"> | |
<span>' .$data4[$x]->fullname . '</span> | |
<label class="container-filter"> | |
<input checked type="checkbox" id="' .$data4[$x]->id . '" class="checkbox_filter checkbox_filter_ws class_student_each each_student_class_no_class" data-id="no_class" value="' .$data4[$x]->id . '" /> | |
<span class="checkmark"></span> | |
</label> | |
</li>'; | |
} | |
} else { | |
$class_list .= '<li class="list-group-item class_student class_student_no_class" style="padding-left: 30px;"> | |
<span> - Student </span> | |
</li>'; | |
} | |
if (count($data) > 0) { | |
for ($x = 0; $x < count($my_students["class_list"]); $x++) { | |
$class_list .= '<li class="list-group-item question_text student_li"> | |
<span>' . $data[$x]->class_name . '</span> | |
<label class="container-filter"> | |
<input checked type="checkbox" id="' . $data[$x]->class_id . '" class="checkbox_filter checkbox_filter_ws class_check class_id_' . $data[$x]->class_id . '" value="' . $data[$x]->class_id . '" /> | |
<span class="checkmark"></span> | |
</label> | |
</li>'; | |
if (count($data1) > 0) { | |
$tutor_title = ''; | |
$tutor_each = ''; | |
for ($y = 0; $y < count($my_students["class_list_tutor"]); $y++) { | |
if($data1[$y]->class_id == $data[$x]->class_id) { | |
$tutor_title = '<li class="list-group-item class_tutor class_tutor_' . $data[$x]->class_id . '" style="padding-left: 30px;"> | |
<span> - Tutor </span> | |
<label class="container-filter"> | |
<input checked type="checkbox" id="' . $data[$x]->class_id . '" class="checkbox_filter checkbox_filter_ws class_tutor class_tutor_' . $data[$x]->class_id . '" value="' . $data[$x]->class_id . '" /> | |
<span class="checkmark"></span> | |
</label> | |
</li>'; | |
$tutor_each .= '<li class="list-group-item class_tutor_list class_tutor_list' . $data1[$y]->id . '" style="padding-left: 50px;"> | |
<span>' . $data1[$y]->fullname . '</span> | |
<label class="container-filter"> | |
<input checked type="checkbox" id="' . $data1[$y]->id . '" class="checkbox_filter checkbox_filter_ws class_tutor_each each_tutor_class_' . $data1[$y]->class_id . '" data-id="' . $data1[$y]->class_id . '" value="' . $data1[$y]->id . '" /> | |
<span class="checkmark"></span> | |
</label> | |
</li>'; | |
} else { | |
if(isset($tutor_title) && empty($tutor_title) == TRUE) { | |
$tutor_title = '<li class="list-group-item class_tutor class_tutor_' . $data[$x]->class_id . '" style="padding-left: 30px;"> | |
<span> - Tutor </span> | |
</li>'; | |
} | |
} | |
} | |
$class_list .= $tutor_title . $tutor_each; | |
} | |
if (count($data2) > 0) { | |
$student_title = ''; | |
$student_each = ''; | |
for ($z = 0; $z < count($my_students["class_list_student"]); $z++) { | |
if($data2[$z]->class_id == $data[$x]->class_id) { | |
$student_title = '<li class="list-group-item class_student class_student_' . $data[$x]->class_id .'" style="padding-left: 30px;"> | |
<span> - Student </span> | |
<label class="container-filter"> | |
<input checked type="checkbox" id="' . $data[$x]->class_id . '" class="checkbox_filter checkbox_filter_ws class_student class_student_' . $data[$x]->class_id . '" value="' . $data[$x]->class_id . '" /> | |
<span class="checkmark"></span> | |
</label> | |
</li>'; | |
$student_each .= '<li class="eata list-group-item class_student_list class_student_list_' . $data2[$z]->id . '" style="padding-left: 50px;"> | |
<span>' . $data2[$z]->fullname . '</span> | |
<label class="container-filter"> | |
<input checked type="checkbox" id="' . $data2[$z]->id . '" class="checkbox_filter checkbox_filter_ws class_student_each each_student_class_' . $data2[$z]->class_id . '" data-id="' . $data2[$z]->class_id . '" value="' . $data2[$z]->id . '" /> | |
<span class="checkmark"></span> | |
</label> | |
</li>'; | |
} else { | |
if(isset($student_title) && empty($student_title) == TRUE) { | |
$student_title = '<li class="list-group-item class_student class_student_' . $data[$x]->class_id .'" style="padding-left: 30px;"> | |
<span> - Student </span> | |
</li>'; | |
} | |
} | |
} | |
$class_list .= $student_title . $student_each; | |
} | |
} | |
} | |
echo $class_list; | |
} | |
?> | |
</ul> | |
<!-- End --> | |
</div> | |
<div id="pagination"></div> | |
</div> | |
<!-- <div class="col-lg-6 col-md-6 col-sm-6"> | |
<div class="panel panel-success"> | |
<div class="panel-heading clearfix">Assigned student list | |
<a href="#" class="deassign_all_students btn btn-danger btn-no-margin pull-right">Remove all</a> | |
</div> | |
<ul class="list-group" id="assigned_student_list"> | |
<li class="list-group-item question_text helper_text">No assigned student yet</li> | |
</ul> | |
</div> | |
<div id="paginations"></div> | |
</div> --> | |
</div> | |
<form id="assign_lesson_form" method="post" style="display: none"> | |
<input type="hidden" name="lesson_id" id="lesson_id"> | |
</form> | |
<script type='text/javascript'> | |
$(document).ready(function(){ | |
var userId = '<?php echo $this->session->userdata('user_id');?>'; | |
var assigned_student_list = $('#assigned_student_list'); | |
var deassigned_student_list = $('#deassign_student_list'); | |
var one; | |
var pageno; | |
// loadPagination(1); | |
// Load pagination | |
function loadPagination(pageno, exclude){ | |
var exclude = []; | |
// $('#assigned_student_list li a').each(function(){ | |
// exclude.push($(this).attr('id')); | |
// }); | |
$('.deassign_student').each(function() { | |
exclude.push(this.id); | |
}); | |
var group = $('.sort_group').val(); | |
group = (group=="" || group==" ") ? "all-student" : group; | |
$('#loading').show(); | |
$.ajax({ | |
url: '<?php echo base_url()?>smartgen/pagination/'+pageno, | |
data:{exclude:exclude, group:group}, | |
type: 'post', | |
dataType: 'json', | |
success: function(data){ | |
$('#pagination').html(data.pagination); | |
createTable(data.result,data.row); | |
$('#loading').hide(); | |
} | |
}); | |
} | |
function loadPaginations(pageno, exclude, group){ | |
var exclude = []; | |
// $('#assigned_student_list li a').each(function(){ | |
// exclude.push('0'); | |
// }); | |
$('.deassign_student').each(function() { | |
exclude.push(this.id); | |
}); | |
var group = $('.sort_group').val(); | |
group = (group=="" || group==" ") ? "all-student" : group; | |
$.ajax({ | |
url: '<?php echo base_url()?>smartgen/paginations/'+pageno, | |
data:{exclude:exclude, group:group}, | |
type: 'post', | |
dataType: 'json', | |
success: function(data){ | |
$('#paginations').html(data.paginations); | |
createTables(data.result,data.row); | |
var all_result = data.all_result; | |
$('.hidden_assigned_student').remove(); | |
for(index in all_result) { | |
var id = all_result[index].student_id; | |
var name = all_result[index].username; | |
var level = all_result[index].level_name; | |
if($('#pagination').length) { | |
$('#assign_lesson_form').append('<input type="hidden" class="hidden_assigned_student" name="assigned_students[]" value="' + id + '" id="hidden_assigned_student_' + id + '">'); | |
} | |
} | |
} | |
}); | |
} | |
$(".td_class").click(function(){ | |
var group_id = $(this).attr('data-group'); | |
var item_group = $('.tr_item_sl_'+group_id); | |
item_group.toggle(); | |
}); | |
// Detect select Group | |
$(document).on('change', '.sort_group', function(e) { | |
e.preventDefault(); | |
if($('ul.pagination').text()){ | |
var pageno = $('ul.pagination li.page-item-active').text(); | |
} else { | |
var pageno = 1; | |
} | |
var exclude = []; | |
$('#assigned_student_list li a').each(function(){ | |
exclude.push($(this).attr('id')); | |
}); | |
loadPagination(pageno, exclude); | |
}); | |
$(document).on('click', '.assign_student', function(e) { | |
e.preventDefault(); | |
var new_button = $(this).removeClass('assign_student btn-custom').addClass('deassign_student btn-danger').html('De-assign')[0]; | |
var new_row = '<li class="list-group-item question_text student_li"><span>' + $(this).prev().text() + '</span>'+ | |
'<a href="#" id="' + $(this).attr('id') + '" class="btn btn-danger btn-no-margin pull-right deassign_student">Remove</a>' + '</li>'; | |
$(this).parent().remove(); | |
if (assigned_student_list.children('.helper_text').length > 0) { | |
assigned_student_list.children('.helper_text')[0].remove(); | |
} | |
assigned_student_list.append(new_row); | |
if (deassigned_student_list.children().length == 0) { | |
deassigned_student_list.append('<li class="list-group-item question_text helper_text">No students</li>'); | |
} | |
if($('ul.pagination').text()){ | |
var pageno = $('ul.pagination li.page-item-active').text(); | |
} else { | |
var pageno = 1; | |
} | |
var exclude = []; | |
$('#assigned_student_list li a').each(function(){ | |
exclude.push($(this).attr('id')); | |
}); | |
$('#assign_lesson_form').append('<input type="hidden" class="hidden_assigned_class" name="assigned_class" value="no_class" id="hidden_assigned_class">'); | |
$('#assign_lesson_form').append('<input type="hidden" class="hidden_all_class" name="all_class" value="0" id="hidden_all_class">'); | |
$('#assign_lesson_form').append('<input type="hidden" class="hidden_assigned_student" name="assigned_students[]" value="' + $(this).attr('id') + '" id="hidden_assigned_student_' + $(this).attr('id') + '">'); | |
loadPagination(pageno, exclude); | |
}); | |
$(document).on('click', '.assign_all_students', function(e) { | |
e.preventDefault(); | |
var pageno = 1; | |
// var exclude = 'NULL'; | |
var exclude = []; | |
$('#assigned_student_list li a').each(function(){ | |
exclude.push($(this).attr('id')); | |
}); | |
var group = $('.sort_group').val(); | |
group = (group=="" || group==" ") ? "all-student" : group; | |
// alert(group); | |
$('#pagination').empty(); | |
$('#deassign_student_list').empty(); | |
if($('.hidden_all_class').length) { | |
$('.hidden_all_class').remove(); | |
} | |
$('#assign_lesson_form').append('<input type="hidden" class="hidden_assigned_class" name="assigned_class" value="' + group + '" id="hidden_assigned_class">'); | |
if(group == "all-student") { | |
$('#assign_lesson_form').append('<input type="hidden" class="hidden_all_class" name="all_class" value="0" id="hidden_all_class">'); | |
} else { | |
$('#assign_lesson_form').append('<input type="hidden" class="hidden_all_class" name="all_class" value="1" id="hidden_all_class">'); | |
} | |
loadPaginations(pageno, exclude, group); | |
}); | |
$(document).on('click', '.deassign_all_students', function(e) { | |
e.preventDefault(); | |
var pageno = 1; | |
var exclude = ''; | |
$('#paginations').empty(); | |
$('#assigned_student_list').empty(); | |
if($('.hidden_assigned_class').length) { | |
$('.hidden_assigned_class').remove(); | |
} | |
loadPagination(pageno, exclude); | |
}); | |
// Detect pagination click | |
$('#pagination').on('click','a',function(e){ | |
e.preventDefault(); | |
pageno = $(this).attr('data-ci-pagination-page'); | |
loadPagination(pageno); | |
}); | |
// Detect pagination click | |
$('#paginations').on('click','a',function(e){ | |
e.preventDefault(); | |
pageno = $(this).attr('data-ci-pagination-page'); | |
loadPaginations(pageno); | |
}); | |
// Create table list | |
function createTable(result,sno){ | |
sno = Number(sno); | |
$('#deassign_student_list').empty(); | |
for(index in result){ | |
var id = result[index].student_id; | |
var name = result[index].fullname; | |
var level = result[index].level_name; | |
var group_name = result[index].group_name; | |
sno+=1; | |
var tr = "<li class='list-group-item question_text student_li all_deassign' id='student_"+id+"' title='"+group_name+"'>"; | |
tr += "<span>"+ name +" ("+ level +")</span>"; | |
tr += "<a href='#' id='"+ id +"' class='btn btn-custom btn-no-margin pull-right assign_student'>Assign</a>"; | |
tr += "</li>"; | |
$('#deassign_student_list').append(tr); | |
} | |
} | |
// Create table list | |
function createTables(result,sno){ | |
sno = Number(sno); | |
$('#deassign_student_list').empty(); | |
$('#assigned_student_list').empty(); | |
for(index in result){ | |
var id = result[index].student_id; | |
var name = result[index].fullname; | |
var level = result[index].level_name; | |
sno+=1; | |
var tr = "<li class='list-group-item question_text student_li'>"; | |
tr += "<span>"+ name +" ("+ level +")</span>"; | |
tr += "<a href='#' id='"+ id +"' class='btn btn-danger btn-no-margin pull-right deassign_student'>Remove</a>"; | |
tr += "</li>"; | |
$('#assigned_student_list').children('.helper_text').remove(); | |
$('#assigned_student_list').append(tr); | |
} | |
} | |
}); | |
</script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var subject_id_list = []; | |
var worksheet_id_list = []; | |
var subject_id = 0; | |
function getSubjectLevelList(selector) { | |
var gen_level = selector[0].selectize; | |
$.ajax({ | |
url: base_url + 'lesson/getSubjectLevelList', | |
method: 'GET', | |
dataType: 'json', | |
success: function (data) { | |
subject_id_list = []; | |
for (x = 0; x < data.length; x++) { | |
subject = data[x].subject_name.replace(/primary|secondary/gi, ''); | |
subject_status = false; | |
obj = { | |
id: data[x].id, | |
level_id: data[x].level_id, | |
subject_id: data[x].subject_id, | |
level_name: data[x].level_name, | |
subject_level: data[x].level_name + subject, | |
disable: subject_status | |
} | |
subject_id_list.push(obj); | |
} | |
gen_level.clear(); | |
gen_level.clearOptions(); | |
gen_level.addOption(subject_id_list); | |
} | |
}); | |
} | |
function getWorksheetList(selector, subject_id) { | |
var worksheet_list = selector[0].selectize; | |
$.ajax({ | |
url: base_url + 'lesson/getWorksheetList/' + subject_id, | |
method: 'GET', | |
dataType: 'json', | |
success: function (data) { | |
worksheet_id_list = []; | |
for (x = 0; x < data.length; x++) { | |
if(data[x].userType == 'admin'){ | |
obj = { | |
worksheet_id: data[x].admin_worksheet_id, | |
worksheet_name: data[x].admin_worksheet_name, | |
disable: false | |
} | |
} else { | |
obj = { | |
worksheet_id: data[x].worksheet_id, | |
worksheet_name: data[x].worksheet_name, | |
disable: false | |
} | |
} | |
worksheet_id_list.push(obj); | |
} | |
worksheet_list.clear(); | |
worksheet_list.clearOptions(); | |
worksheet_list.addOption(worksheet_id_list); | |
} | |
}); | |
} | |
function createSelectize(selector, valueField, labelField, searchField, placeholder) { | |
selector.selectize({ | |
valueField: valueField, | |
labelField: labelField, | |
searchField: searchField, | |
placeholder: placeholder, | |
options: [], | |
disabledField: 'disable', | |
create: false | |
}); | |
} | |
var section_id = 1; | |
function nextTab(elem) { | |
$(elem).next().find('a[data-toggle="tab"]').click(); | |
} | |
function prevTab(elem) { | |
$(elem).prev().find('a[data-toggle="tab"]').click(); | |
} | |
$(document).ready(function () { | |
createSelectize($('#level_id'), 'id', 'subject_level', 'subject_level', 'Please select Level - Subject'); | |
getSubjectLevelList($('#level_id')); | |
createSelectize($('#worksheet_id'), 'worksheet_id', 'worksheet_name', 'worksheet_name', 'Please choose your worksheet'); | |
$('.datatable').DataTable({ | |
// "sDom": "<'row'<'col-xs-6'l><'col-xs-6'f>r>t<'row'<'col-xs-6'i><'col-xs-6'p>>", | |
"aaSorting": [], | |
"oLanguage": { | |
"sLengthMenu": "_MENU_ records per pages", | |
"sSearch": "" | |
}, | |
//"order": [[ 1, "desc" ]], | |
"aoColumnDefs": [ | |
{ | |
"bSortable": false, | |
"aTargets": [-1] // <-- gets last column and turns off sorting | |
} | |
], | |
"columnDefs": [ | |
{ "orderable": false, "targets": [0, 1, 2, 3] } | |
], | |
// "columnDefs": [{orderable: false, targets: -1}], | |
"bLengthChange": false, | |
"bInfo": false, | |
initComplete: function () { | |
var i = 1; | |
this.api().columns(':visible :not(:last-child)').every(function () { | |
var column = this; | |
var col_header = $(column.header()).html(); | |
console.log(col_header); | |
if (col_header == 'Created Date') { | |
var select = $('<select class="form-control sort_dataTable_' + i + '"><option value="">' + col_header + '</option></select>') | |
.appendTo($(column.header()).empty()) | |
.on('change', function () { | |
var val = $.fn.dataTable.util.escapeRegex( | |
$(this).val() | |
); | |
column | |
.search(val ? "\\b" + val + "\\b" : '', true, false) | |
.draw(); | |
}); | |
//$('<span class="fa fa-sort sort_data"></span>').appendTo( $(column.header())); | |
var date_arr = []; | |
column.data().unique().each(function (d, j) { | |
var date_only = d.substring(0, 10); | |
if (!date_arr.includes(date_only)) { | |
select.append('<option value="' + date_only + '">' + date_only + '</option>'); | |
date_arr.push(date_only); | |
} | |
}); | |
} else if (col_header == 'Group') { | |
var select = $('<select class="form-control sort_dataTable_' + i + '"><option value="">' + col_header + '</option></select>') | |
.appendTo($(column.header()).empty()) | |
.on('change', function () { | |
var val = $.fn.dataTable.util.escapeRegex( | |
$(this).val() | |
); | |
console.log(val); | |
column | |
.search(val ? "\\b" + val + "\\b" : '', true, false) | |
.draw(); | |
}); | |
var group_arr = []; | |
column.data().unique().sort().each(function (d, j) { | |
d = d.replace(/(<([^>]+)>)/ig, ""); | |
if (!group_arr.includes(d)) { | |
select.append('<option value="' + d + '">' + d + '</option>'); | |
group_arr.push(d); | |
} | |
}); | |
} else { | |
var select = $('<select class="form-control sort_dataTable_' + i + '"><option value="">' + col_header + '</option></select>') | |
.appendTo($(column.header()).empty()) | |
.on('change', function () { | |
var val = $.fn.dataTable.util.escapeRegex( | |
$(this).val() | |
); | |
column | |
.search(val ? '^' + val + '$' : '', true, false) | |
.draw(); | |
}); | |
//$('<span class="fa fa-sort sort_data"></span>').appendTo( $(column.header())); | |
column.data().unique().sort().each(function (d, j) { | |
select.append('<option value="' + d + '">' + d + '</option>') | |
}); | |
} | |
i++; | |
}); | |
} | |
}); | |
$('.play-video').magnificPopup({ | |
type: 'iframe', | |
midClick: true | |
}); | |
$('textarea').summernote(); | |
$('.form-lesson').hide(); | |
$(document).on('click', '#OKBtn', function () { | |
$(".class_check").each(function( index ) { | |
var key = $(this).val(); | |
if($(".class_check").prop('checked') == true){ | |
var no = 0; | |
$(".each_tutor_class_" + key).each(function( index ) { | |
var tutor_id = $(this).val(); | |
$('#assign_lesson_form').append(`<input type="hidden" class="hidden_assigned_tutor" name="assigned_tutors[` + key + `_` + no + `]" value="` + tutor_id + `" id="hidden_assigned_tutor_` + tutor_id + `">`); | |
no++; | |
}); | |
var no = 0; | |
$(".each_student_class_" + key).each(function( index ) { | |
var student_id = $(this).val(); | |
$('#assign_lesson_form').append(`<input type="hidden" class="hidden_assigned_student" name="assigned_students[` + key + `_` + no + `]" value="` + student_id + `" id="hidden_assigned_student_` + student_id + `">`); | |
no++; | |
}); | |
$('#assign_lesson_form').append(`<input type="hidden" class="hidden_class_id" name="class_ids[]" value="` + key + `" id="hidden_class_id_` + key + `">`); | |
} else { | |
var no = 0; | |
$(".each_tutor_class_" + key).each(function( index ) { | |
if($(".each_tutor_class_" + key).prop('checked') == true){ | |
var tutor_id = $(this).val(); | |
$('#assign_lesson_form').append(`<input type="hidden" class="hidden_assigned_tutor" name="assigned_tutors[` + key + `_` + no + `]" value="` + tutor_id + `" id="hidden_assigned_tutor_` + tutor_id + `">`); | |
no++; | |
} | |
}); | |
var no = 0; | |
$(".each_student_class_" + key).each(function( index ) { | |
if($(".each_student_class_" + key).prop('checked') == true){ | |
var student_id = $(this).val(); | |
$('#assign_lesson_form').append(`<input type="hidden" class="hidden_assigned_student" name="assigned_students[` + key + `_` + no + `]" value="` + student_id + `" id="hidden_assigned_student_` + student_id + `">`); | |
no++; | |
} | |
}); | |
} | |
}); | |
$.ajax({ | |
type: 'POST', | |
url: base_url + 'lesson/createStudentAssignment', | |
data: new FormData($('#assign_lesson_form')[0]), | |
processData: false, | |
contentType: false, | |
cache: false, | |
async: false, | |
dataType: 'json', | |
beforeSend: function (e) { | |
if (e && e.overrideMimeType) { | |
e.overrideMimeType("application/json;charset=UTF-8"); | |
} | |
}, | |
success: function (res) { | |
if (res.msg == 'success') { | |
swal({ | |
text: "Lesson has been successfully created", | |
icon: "success", | |
button: 'OK' | |
}) | |
.then((willOK) => { | |
if (willOK) { | |
// window.location.href = base_url + 'profile/lessons'; | |
$('.form-lesson').fadeOut(250); | |
$('.list-lesson').fadeIn(500); | |
$('#btnNewLesson').fadeIn(500); | |
loadLesson(); | |
} | |
}); | |
} | |
} | |
}); | |
}); | |
$(document).on('click', '#updateAssignmentBtn', function () { | |
$(".class_check").each(function( index ) { | |
var key = $(this).val(); | |
if($(this).is(":checked")){ | |
$('#assign_lesson_form').append(`<input type="hidden" class="hidden_class_check" name="class_check[` + key + `]" value="1" id="hidden_class_check_` + key + `">`); | |
var no = 0; | |
$(".each_tutor_class_" + key).each(function( index ) { | |
var tutor_id = $(this).val(); | |
$('#assign_lesson_form').append(`<input type="hidden" class="hidden_assigned_tutor" name="assigned_tutors[` + key + `_` + no + `]" value="` + tutor_id + `" id="hidden_assigned_tutor_` + tutor_id + `">`); | |
no++; | |
}); | |
var no = 0; | |
$(".each_student_class_" + key).each(function( index ) { | |
var student_id = $(this).val(); | |
$('#assign_lesson_form').append(`<input type="hidden" class="hidden_assigned_student" name="assigned_students[` + key + `_` + no + `]" value="` + student_id + `" id="hidden_assigned_student_` + student_id + `">`); | |
no++; | |
}); | |
$('#assign_lesson_form').append(`<input type="hidden" class="hidden_class_id" name="class_ids[]" value="` + key + `" id="hidden_class_id_` + key + `">`); | |
} else { | |
$('#assign_lesson_form').append(`<input type="hidden" class="hidden_class_check" name="class_check[` + key + `]" value="0" id="hidden_class_check_` + key + `">`); | |
var no = 0; | |
$(".each_tutor_class_" + key).each(function( index ) { | |
if($(this).is(":checked")){ | |
var tutor_id = $(this).val(); | |
$('#assign_lesson_form').append(`<input type="hidden" class="hidden_assigned_tutor" name="assigned_tutors[` + key + `_` + no + `]" value="` + tutor_id + `" id="hidden_assigned_tutor_` + tutor_id + `">`); | |
no++; | |
} | |
}); | |
var no = 0; | |
$(".each_student_class_" + key).each(function( index ) { | |
if($(this).is(":checked")){ | |
var student_id = $(this).val(); | |
$('#assign_lesson_form').append(`<input type="hidden" class="hidden_assigned_student" name="assigned_students[` + key + `_` + no + `]" value="` + student_id + `" id="hidden_assigned_student_` + student_id + `">`); | |
no++; | |
} | |
}); | |
} | |
}); | |
$.ajax({ | |
type: 'POST', | |
url: base_url + 'lesson/updateStudentAssignment', | |
data: new FormData($('#assign_lesson_form')[0]), | |
processData: false, | |
contentType: false, | |
cache: false, | |
async: false, | |
dataType: 'json', | |
beforeSend: function (e) { | |
if (e && e.overrideMimeType) { | |
e.overrideMimeType("application/json;charset=UTF-8"); | |
} | |
}, | |
success: function (res) { | |
if (res.msg == 'success') { | |
swal({ | |
text: "Assignment has been successfully updated", | |
icon: "success", | |
button: 'OK' | |
}) | |
.then((willOK) => { | |
if (willOK) { | |
// window.location.href = base_url + 'profile/lessons'; | |
$('.form-edit-assignment').fadeOut(250); | |
$('.list-lesson').fadeIn(500); | |
$('#btnNewLesson').fadeIn(500); | |
loadLesson(); | |
} | |
}); | |
} | |
} | |
}); | |
}) | |
$(document).on('click', '#cancelAssignmentBtn', function () { | |
$('.form-edit-assignment').fadeOut(250); | |
$('.list-lesson').fadeIn(500); | |
}) | |
//Initialize tooltips | |
$('.nav-tabs > li a[title]').tooltip(); | |
//Wizard | |
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) { | |
var $target = $(e.target); | |
if ($target.parent().hasClass('disabled')) { | |
return false; | |
} | |
}); | |
$(".next-step").click(function (e) { | |
var $active = $('.wizard .nav-tabs li.active'); | |
$active.next().removeClass('disabled'); | |
nextTab($active); | |
}); | |
$(".prev-step").click(function (e) { | |
var $active = $('.wizard .nav-tabs li.active'); | |
prevTab($active); | |
}); | |
$('#btnNewLesson').click(function () { | |
section_id = 1; | |
$('.list-lesson').hide(); | |
$(this).fadeOut(250); | |
$('.form-lesson').fadeIn(500); | |
}); | |
$('#btnNewSection').click(function () { | |
section_id++; | |
var content = ` | |
<div class="col-lg-6 mt-3" id="card-section`+ section_id + `"> | |
<div class="card"> | |
<div class="card-header-small"> | |
<input type="text" class="form-control input_style1_red section_title" style="width: 80%" id="section_title`+ section_id + `" name="section_title[]" placeholder="Section Title" > | |
<a class="fa-caret icon_expand2"> | |
<i class="fa fa-caret-down"></i> | |
</a> | |
<a class="close_question icon_close"> | |
<i class="fa fa-times"></i> | |
</a> | |
</div> | |
<div class="card-body-small"> | |
<div class="row"> | |
<div class="col-lg-12 subsection1"> | |
<div class="form-inline p-1"> | |
<div class="form-group mb-2" style="width: 100%"> | |
<input type="text" class="form-control input_style1_black subsection" name="subsection`+ section_id + `[]" | |
placeholder="Lecture" style="width: 80%" /> | |
<a style="cursor: pointer; text-decoration: none;" | |
class="removeLecture text-danger-active fs18 ml-2"><i | |
class="fa fa-times"></i></a> | |
</div> | |
</div> | |
</div> | |
<div class="col-lg-12 col-sm-12 m-1 navNewLecture"> | |
<a style="cursor: pointer; text-decoration: none;" | |
class="newLecture text-success-active fs14" data-id="`+ section_id + `"><i | |
class="fa fa-plus mr-1"></i> Add | |
new lecture</a> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
`; | |
$(content).insertAfter('#card-section' + (section_id - 1)); | |
}); | |
$(document).on('click', '.newLecture', function () { | |
var id = $(this).data('id'); | |
var idName = $(this).parent().prev().find('.subsection').attr('id'); | |
var no = idName.split("_")[2]; | |
no = parseInt(no) + 1; | |
var content = ` | |
<div class="col-lg-12 subsection`+ id + `"> | |
<div class="form-inline p-1"> | |
<div class="form-group mb-2" style="width: 100%"> | |
<input type="text" class="form-control input_style1_black subsection subsection_` + id + `" name="subsection`+ id + `[]" | |
placeholder="Lecture Title" style="width: 80%" /> | |
<a style="cursor: pointer; text-decoration: none;" | |
class="removeLecture text-danger-active fs18 ml-2"><i | |
class="fa fa-times"></i></a> | |
</div> | |
</div> | |
</div> | |
`; | |
$(content).insertBefore($(this).parent()); | |
}); | |
$(document).on('click', '.newSection', function () { | |
var idName = $(this).parent().parent().prev().find('.card-section').attr('id'); | |
var no = idName.split("_")[2]; | |
no = parseInt(no) + 1; | |
var content = ` | |
<div class="row p-1 section_detail" style="margin-top: -40px;"> | |
<div class="row card-grid"> | |
<div class="col-lg-10 card-section" id="card_section_` + no + `" style="margin: 0px 90px;"> | |
<div class="card"> | |
<div class="card-header-small"> | |
<input type="text" class="form-control input_style1_red section_title" style="width: 80%" id="section_title_` + no + `" name="section_title[]" placeholder="Chapter Title" /> | |
<a class="fa-caret icon_expand2 ml-5"> | |
<i class="fa fa-caret-down"></i> | |
</a> | |
<a class="close_question icon_close"> | |
<i class="fa fa-times"></i> | |
</a> | |
</div> | |
<div class="card-body-small"> | |
<div class="row"> | |
<div class="col-lg-12 subsection1"> | |
<div class="form-inline p-1"> | |
<div class="form-group mb-2" style="width: 100%"> | |
<input type="text" class="form-control input_style1_black subsection subsection_` + no + `" id="subsection_` + no + `" name="subsection1[]" | |
placeholder="Lesson Title" style="width: 80%" /> | |
<a style="cursor: pointer; text-decoration: none;" | |
class="removeLecture text-danger-active fs18 ml-2"><i | |
class="fa fa-times"></i></a> | |
</div> | |
</div> | |
</div> | |
<div class="col-lg-12 col-sm-12 m-1 navNewLecture"> | |
<a style="cursor: pointer; text-decoration: none;" | |
class="newLecture text-success-active fs14" data-id="` + no + `"><i | |
class="fa fa-plus mr-1"></i> Add lesson</a> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
`; | |
$(content).insertBefore($(this).parent().parent()); | |
}); | |
$(document).on('click', '.removeLecture', function () { | |
$(this).parent().parent().remove(); | |
}); | |
$(".card-grid").on('click', '.card .card-header-small .fa-caret', function (e) { | |
e.preventDefault(); | |
var caret = $(this).find('i').attr('class'); | |
if (caret == 'fa fa-caret-down') { | |
$(this).children().removeClass('fa fa-caret-down').addClass('fa fa-caret-up'); | |
$(this).parent().parent().find('.card-body-small').slideUp(500); | |
} else { | |
$(this).children().removeClass('fa fa-caret-up').addClass('fa fa-caret-down'); | |
$(this).parent().parent().find('.card-body-small').slideDown(500); | |
} | |
}); | |
$('.card-grid').on('click', '.card .icon_close', function (e) { | |
e.preventDefault(); | |
if (section_id > 1) { | |
section_id--; | |
$(this).parent().parent().parent().remove(); | |
} | |
}); | |
$('#level_id').change(function () { | |
subject_id = subject_id_list.find(x => x.id === $(this).val()).subject_id; | |
console.log(subject_id); | |
}) | |
$('#SaveLessonBtn').click(function () { | |
var level_id = $('#level_id').val(); | |
var lesson_title = $('#lesson_title').val(); | |
var tags = $('#tags').val(); | |
var description = $('#description').val(); | |
var subsection; | |
var section_title; | |
var subsectionArray = new Array(); | |
var section_titleArray = new Array(); | |
// $('.subsection').each(function () { | |
// subsection = $(this).val(); | |
// subsectionArray.push(subsection); | |
// }); | |
$(".section_title").each(function () { | |
var subsectionEach = new Array(); | |
section_title = $(this).val(); | |
var idName = $(this).attr("id").split("_")[2]; | |
$('.subsection_' + idName).each(function () { | |
subsection = $(this).val(); | |
subsectionEach.push(subsection); | |
}); | |
subsectionArray.push(subsectionEach); | |
section_titleArray.push(section_title); | |
}); | |
if (level_id == '') { | |
swal('Information', 'Please, select level and subject!', 'warning'); | |
} else if (lesson_title == '') { | |
swal('Information', 'Please, fill lesson title!', 'warning'); | |
} else if (description == '') { | |
swal('Information', 'Please, fill description!', 'warning'); | |
} else if (section_title == '') { | |
swal('Information', 'Please, fill the section title!', 'warning'); | |
} else if (subsection == '') { | |
swal('Information', 'Please, fill the lecture!', 'warning'); | |
} else { | |
$.ajax({ | |
type: 'POST', | |
url: base_url + 'lesson/createLesson', | |
data: { | |
level_id: level_id, | |
title: lesson_title, | |
tags: tags, | |
description: description, | |
section_title: section_titleArray, | |
subsection: subsectionArray | |
}, | |
dataType: 'json', | |
success: function (res) { | |
if (res.msg == 'success') { | |
toastr.success("Lesson is successfully saved"); | |
$('#SaveLessonBtn').hide(); | |
$('#form-lesson').prop('disabled', true); | |
$('#next-step1').show(); | |
$('#next-step1').click(); | |
getWorksheetList($('#worksheet_id'), subject_id); | |
loadSectionLesson(); | |
} | |
} | |
}); | |
} | |
}) | |
$('#SaveSectionBtn').click(function () { | |
var subsection; | |
var section_title; | |
$('.subsection').each(function () { | |
subsection = $(this).val(); | |
}); | |
$(".section_title").each(function () { | |
section_title = $(this).val(); | |
}); | |
if (section_title == '') { | |
swal('Information', 'Please, fill the section title!', 'warning'); | |
} else if (subsection == '') { | |
swal('Information', 'Please, fill the lecture!', 'warning'); | |
} else { | |
$.ajax({ | |
type: 'POST', | |
url: base_url + 'lesson/createSection', | |
data: new FormData($('#form-section')[0]), | |
processData: false, | |
contentType: false, | |
cache: false, | |
async: false, | |
dataType: 'json', | |
beforeSend: function (e) { | |
if (e && e.overrideMimeType) { | |
e.overrideMimeType("application/json;charset=UTF-8"); | |
} | |
}, | |
success: function (res) { | |
if (res.msg == 'success') { | |
toastr.success("Section lesson is successfully saved"); | |
$('#SaveSectionBtn').hide(); | |
$('#form-section').prop('disabled', true); | |
$('#next-step2').show(); | |
$('#next-step2').click(); | |
loadSectionLesson(); | |
} | |
} | |
}); | |
} | |
}); | |
$("body").on('click','.class_check', function(){ | |
var key = $(this).val(); | |
console.log(key); | |
if($('.class_id_' + key).is(":checked")){ | |
$(this).prop("checked", true); | |
$('.class_student_' + key).prop("checked", true); | |
$('.class_tutor_' + key).prop("checked", true); | |
$('.each_tutor_class_' + key).prop("checked", true); | |
$('.each_student_class_' + key).prop("checked", true); | |
} | |
else { | |
$(this).prop("checked", false); | |
$('.class_student_' + key).prop("checked", false); | |
$('.class_tutor_' + key).prop("checked", false); | |
$('.each_tutor_class_' + key).prop("checked", false); | |
$('.each_student_class_' + key).prop("checked", false); | |
} | |
}); | |
$("body").on('click','.class_tutor', function(){ | |
var key = $(this).val(); | |
if($('.class_tutor_' + key).is(":checked")){ | |
$(this).prop("checked", true); | |
$('.each_tutor_class_' + key).prop("checked", true); | |
} | |
else { | |
$(this).prop("checked", false); | |
$('.each_tutor_class_' + key).prop("checked", false); | |
} | |
}); | |
$("body").on('click','.class_student', function(){ | |
var key = $(this).val(); | |
if($('.class_student_' + key).is(":checked")){ | |
$(this).prop("checked", true); | |
$('.each_student_class_' + key).prop("checked", true); | |
} | |
else { | |
$(this).prop("checked", false); | |
$('.each_student_class_' + key).prop("checked", false); | |
} | |
}); | |
$("body").on('click','.class_tutor_each', function(){ | |
var key = $(this).data("id"); | |
if($(this).is(":checked")){ | |
$(this).prop("checked", true); | |
} else { | |
$(this).prop("checked", false); | |
} | |
if($('.each_tutor_class_' + key + ':checked').length == $('.each_tutor_class_' + key).length) { | |
$('.class_tutor_' + key).prop("checked", true); | |
} else { | |
$('.class_tutor_' + key).prop("checked", false); | |
} | |
}); | |
$("body").on('click','.class_student_each', function(){ | |
var key = $(this).data("id"); | |
if($(this).is(":checked")){ | |
$(this).prop("checked", true); | |
} else { | |
$(this).prop("checked", false); | |
} | |
if($('.each_student_class_' + key + ':checked').length == $('.each_student_class_' + key).length) { | |
$('.class_student_' + key).prop("checked", true); | |
} else { | |
$('.class_student_' + key).prop("checked", false); | |
} | |
}); | |
}) | |
function loadLesson() { | |
$.ajax({ | |
type: 'GET', | |
url: base_url + 'lesson/loadLesson', | |
dataType: 'text', | |
success: function (res) { | |
$('.worksheet_div_body').html(res); | |
$('.table-lesson').DataTable(); | |
} | |
}); | |
} | |
function loadSectionLesson() { | |
$.ajax({ | |
type: 'GET', | |
url: base_url + 'lesson/loadSectionLesson', | |
dataType: 'json', | |
success: function (res) { | |
var subject_type = res.data.data_lesson.subject_type; | |
var data_section = res.data.data_section; | |
var data_lecture = res.data.data_lecture; | |
var content = ''; | |
for (x = 0; x < data_section.length; x++) { | |
var listLecture = ''; | |
for (y = 0; y < data_lecture.length; y++) { | |
if (data_lecture[y].section_id == data_section[x].section_id) { | |
if (y == 0) { | |
var rowSet = `<div class="row fs18 pl-4 pb-4 pr-4 b-b" id="list-lecture-` + data_lecture[y].id + `">`; | |
} else { | |
var rowSet = `<div class="row fs18 p-4 b-b" data-id="` + data_lecture[y].id + `">`; | |
} | |
listLecture += rowSet + ` | |
<div class="col-lg-10" style="display: none"> | |
<form id='form-upload` + data_lecture[y].id + `' method='post' enctype="multipart/form-data"> | |
<input type="file" id="file_upload` + data_lecture[y].id + `" name="file_upload` + data_lecture[y].id + `" /> | |
</form> | |
</div> | |
<div class="col-lg-10"> | |
<ul class="ul-section pt-2"> | |
<li class="li-section"> | |
` + data_lecture[y].lecture_title + ` | |
</li> | |
</ul> | |
</div> | |
<div class="col-lg-2" id="actionBtn` + data_lecture[y].id + `"> | |
<div class="dropdown"> | |
<button class="btn btn-icon-o radius100 btn-outline-primary btn-no-margin-top dropdown-toggle" type="button" data-toggle="dropdown"> | |
<span class="fa fa-upload"></span></button> | |
<ul class="dropdown-menu"> | |
<li class="dropdown-header">Upload a video from...</li> | |
<li> | |
<a style="cursor: pointer;" class="embedVideo" onClick="entryEmbedVideo(`+ data_lecture[y].id + `)" title="Embed Video"><i class="fa fa-link mr-2"></i> Embed Link</a> | |
</li> | |
<li> | |
<a style="cursor: pointer;" class="uploadVideo" onClick="startUploadFile(`+ data_lecture[y].id + `, 'video')" title="Upload Video"><i class="fa fa-desktop mr-2"></i> Your Computer</a> | |
</li> | |
<li> | |
<a style="cursor: pointer;" onClick="showPickerDialog(`+ data_lecture[y].id + `, 'video', false)"><i class="fa fa-google text-muted mr-2"></i> Google Drive</a> | |
</li> | |
<li class="divider"></li> | |
<li class="dropdown-header">Upload a document from...</li> | |
<li> | |
<a style="cursor: pointer;" onClick="startUploadFile(`+ data_lecture[y].id + `, 'doc')" title="Upload Document"><i class="fa fa-desktop mr-2"></i> Your Computer</a> | |
</li> | |
<li> | |
<a style="cursor: pointer;" onClick="showPickerDialog(`+ data_lecture[y].id + `, 'doc', false)"><i class="fa fa-google text-muted mr-2"></i> Google Drive</a> | |
</li> | |
<li class="divider"></li> | |
<li class="dropdown-header">Add assessment...</li> | |
<li> | |
<a style="cursor: pointer;" onClick="addAssessment(`+ data_lecture[y].id + `, ` + subject_type + `, 'new')" title="Add Assessment" data-toggle="modal" data-target="#modalAssessment"><i class="fa fa-clipboard mr-2"></i> Your worksheet</a> | |
</li> | |
</ul> | |
</div> | |
</div> | |
</div> | |
`; | |
} | |
} | |
content += ` | |
<div class="col-lg-12 mt-4" id="card-section-lesson`+ x + `"> | |
<div class="card"> | |
<div class="card-header"> | |
<h2 class="mt-1">`+ data_section[x].section_title + `</h2> | |
<a class="fa-caret icon_expand"> | |
<i class="fa fa-caret-down"></i> | |
</a> | |
</div> | |
<div class="card-body"> | |
<ul class="list-group"> | |
`+ listLecture + ` | |
</ul> | |
</div> | |
</div> | |
</div> | |
`; | |
} | |
$('.load-section-lecture').html(content); | |
} | |
}); | |
} | |
function getSectionDetail(id) { | |
$.ajax({ | |
type: 'GET', | |
url: base_url + 'lesson/getSectionDetail/' + id, | |
dataType: 'json', | |
success: function (res) { | |
$('#sectionModule' + id).remove(); | |
var data = res.data_lecture; | |
var moduleContent = ` | |
<div class="col-lg-12" id="sectionModule`+ id + `"> | |
<div class="form-inline p-1"> | |
<div class="form-group mb-2">`; | |
if (data.uploaded_video != '' && data.uploaded_video_type == 'local') { | |
var parts = data.uploaded_video.split("."); | |
var videoType = parts[parts.length - 1]; | |
moduleContent += `<a href="` + base_url + `/uploaded_file/video/` + data.uploaded_video + `" class="btn play-video btn-shadow btn-icon btn-rounded btn-outline-teal" style="width: 150px;"><i class="fa fa-play"></i> Video</a>`; | |
} else if (data.uploaded_video != '' && data.uploaded_video_type == 'embed') { | |
moduleContent += `<a href="` + data.uploaded_video + `" class="btn play-video btn-shadow btn-icon btn-rounded btn-outline-teal" style="width: 150px;"><i class="fa fa-play"></i> Video</a>`; | |
} else if (data.uploaded_video != '' && data.uploaded_video_type == 'gdrive') { | |
moduleContent += `<a href="https://drive.google.com/file/d/` + data.uploaded_video + `/preview" class="btn play-video btn-shadow btn-icon btn-rounded btn-outline-teal" style="width: 150px;"><i class="fa fa-play"></i> Video</a>`; | |
} | |
if (data.uploaded_doc != '') { | |
if (data.uploaded_doc_type == 'gdrive') { | |
if(data.google_doc_type == 'pdf') { | |
var link = `https://drive.google.com/file/d/` + data.uploaded_doc + `/preview`; | |
} else { | |
var link = `https://docs.google.com/` + data.google_doc_type + `/d/`+ data.uploaded_doc + `/edit`; | |
} | |
moduleContent += `<div class="dropdown uploaded_doc_` + id + `" style="display: inline;"> | |
<button class="btn btn-shadow btn-icon btn-rounded btn-outline-danger dropdown-toggle" style="width: 150px;" type="button" data-toggle="dropdown"> | |
<span class="fa fa-file-text-o"></span> Document</button> | |
<ul class="dropdown-menu link_document_` + id + `"> | |
<li class="dropdown-header">Open document in...</li> | |
<li> | |
<a style="cursor: pointer;" href="` + link + `" target="_blank"><i class="fa fa-google mr-2"></i> Google Doc</a> | |
</li> | |
<li class="divider"></li> | |
<li> | |
<a style="cursor: pointer;" href="https://drive.google.com/file/d/` + data.uploaded_doc + `/edit" target="_blank"><i class="fa fa-download mr-2"></i> Download</a> | |
</li> | |
</ul> | |
</div>`; | |
} else { | |
moduleContent += `<div class="dropdown uploaded_doc_` + id + `" style="display: inline;"> | |
<button class="btn btn-shadow btn-icon btn-rounded btn-outline-danger dropdown-toggle" style="width: 150px;" type="button" data-toggle="dropdown"> | |
<span class="fa fa-file-text-o"></span> Document</button> | |
<ul class="dropdown-menu link_document_` + id + `"> | |
<li class="dropdown-header">Open document in...</li> | |
<li> | |
<a style="cursor: pointer;" href="https://docs.google.com/gview?url=`+ base_url + `uploaded_file/doc/` + data.uploaded_doc + `&embedded=true" target="_blank"><i class="fa fa-google mr-2"></i> Google Doc</a> | |
</li> | |
<li> | |
<a style="cursor: pointer;" href="https://view.officeapps.live.com/op/view.aspx?src=`+ base_url + `uploaded_file/doc/` + data.uploaded_doc + `" target="_blank"><i class="fa fa-windows mr-2"></i> Ms. Office Online</a> | |
</li> | |
<li class="divider"></li> | |
<li> | |
<a style="cursor: pointer;" href="` + base_url + `uploaded_file/doc/` + data.uploaded_doc + `" target="_blank"><i class="fa fa-download mr-2"></i> Download</a> | |
</li> | |
</ul> | |
</div>`; | |
} | |
} | |
if (data.worksheet_id != 0) { | |
moduleContent += `<a href="` + base_url + `profile/worksheet/` + data.worksheet_id + `" target="_blank" class="btn btn-shadow btn-icon btn-rounded btn-outline-success" title="View Assessment" style="width: 150px;"><i class="fa fa-clipboard"></i> Assessment</a>`; | |
} | |
moduleContent += `</div></div></div>`; | |
var selector = $('#actionBtn' + id); | |
$(moduleContent).insertAfter(selector); | |
$('.play-video').magnificPopup({ | |
type: 'iframe', | |
midClick: true | |
}); | |
} | |
}); | |
} | |
function entryEmbedVideo(id) { | |
var entryContent = ` | |
<div class="col-lg-12" id = "entryEmbedVideo`+ id + `" > | |
<div class="form-inline p-2"> | |
<div class="form-group mb-2" style="width: 100%"> | |
<input type="text" class="form-control input_style1_black subsection" id="embed_video`+ id + `" | |
placeholder="Copy link youtube or vimeo here..." style="width: 50%" /> | |
<a style="cursor: pointer; text-decoration: none;" | |
class="text-success-active fs26 ml-2 saveEmbedVideo" data-id="`+ id + `"><i | |
class="fa fa-check-circle-o"></i></a> | |
<a style="cursor: pointer; text-decoration: none;" | |
class="text-danger-active fs26 ml-2 cancelEmbedVideo" data-id="`+ id + `"><i | |
class="fa fa-times-circle-o"></i></a> | |
<span class="text-danger fs20 ml-3 msg-embed"></span> | |
</div> | |
</div> | |
</div> | |
`; | |
var selector = $('#actionBtn' + id); | |
$(entryContent).insertAfter(selector); | |
} | |
$(document).on('click', '.saveEmbedVideo', function (e) { | |
e.preventDefault(); | |
var id = $(this).data('id'); | |
if ($('#embed_video' + id).val() == '') { | |
$(this).next().next().html('Please, fill the field'); | |
} else { | |
$.ajax({ | |
type: 'POST', | |
url: base_url + 'lesson/updateVideo', | |
data: { | |
id: id, | |
uploaded_video: $('#embed_video' + id).val(), | |
type: 'embed' | |
}, | |
dataType: 'json', | |
success: function (res) { | |
if (res.msg == 'success') { | |
$('#entryEmbedVideo' + id).remove(); | |
toastr.success('Link has been saved'); | |
getSectionDetail(id); | |
} | |
} | |
}); | |
} | |
}); | |
$(document).on('click', '.cancelEmbedVideo', function (e) { | |
e.preventDefault(); | |
$('#entryEmbedVideo' + $(this).data('id')).remove(); | |
}) | |
var fileType = ''; | |
var selected_id; | |
var statusUpload = ''; | |
function startUploadFile(id, file) { | |
statusUpload = 'create'; | |
fileType = file; | |
var progressContent = ` | |
<div class="col-lg-12 progress progress`+ id + `" style = "display: none;"> | |
<div class="progress-bar" id="progress-bar`+ id + `" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:0%"> | |
<span id="status`+ id + `"></span> | |
</div> | |
</div> | |
`; | |
var selector = $('#actionBtn' + id); | |
$(progressContent).insertAfter(selector); | |
selected_id = id; | |
function uploadFile() { | |
var file = document.getElementById("file_upload" + id).files[0]; | |
var formdata = new FormData(); | |
formdata.append("id", id); | |
formdata.append("file_upload" + id, file); | |
formdata.append("fileType", fileType); | |
formdata.append("type", 'local'); | |
var ajax = new XMLHttpRequest(); | |
ajax.responseType = 'json'; | |
ajax.upload.addEventListener("progress", progressUpload, false); | |
ajax.open('POST', base_url + 'lesson/uploadFile', true); | |
ajax.onload = function () { | |
var jsonResponse = ajax.response; | |
if (jsonResponse.msg == 'success') { | |
if (fileType == 'doc') { | |
toastr.success('Your document has been uploaded!'); | |
} else { | |
toastr.success('Your video has been uploaded!'); | |
} | |
getSectionDetail(id); | |
} else { | |
toastr.error(jsonResponse.msg); | |
} | |
}; | |
ajax.send(formdata); | |
} | |
function progressUpload(event) { | |
var percent = (event.loaded / event.total) * 100; | |
document.getElementById("progress-bar" + id).style.width = Math.round(percent) + '%'; | |
document.getElementById("status" + id).innerHTML = Math.round(percent) + "% Completed"; | |
if (event.loaded == event.total) { | |
setTimeout(function () { | |
$('.progress' + id).remove(); | |
}, 500); | |
} | |
} | |
$(document).on('change', '#file_upload' + id, function () { | |
$('.progress' + id).show(); | |
if (statusUpload == 'create') { | |
uploadFile(); | |
} | |
}); | |
$('#file_upload' + id).click(); | |
} | |
function editLesson(id) { | |
$('.editLessonBtn' + id).prop('disabled', true); | |
$.ajax({ | |
type: 'GET', | |
url: base_url + 'lesson/getLessonById/' + id, | |
dataType: 'json', | |
success: function (res) { | |
var entryContent = ` | |
<tr class="form-edit-lesson-`+ id + `"> | |
<td colspan="5"> | |
<form id="form-edit-lesson-`+ id + `" class="form-horizontal p-3"> | |
<div class="row p-2"> | |
<div class="col-lg-1"></div> | |
<label class="col-lg-3" for="level_id" style="position: right;">Level and Subject <span class="text-danger">*</span></label> | |
<div class="col-lg-7"> | |
<select class="form-control level_id" name="level_id" style="width: 100%"> | |
</select> | |
</div> | |
<div class="col-lg-1"></div> | |
</div> | |
<div class="row p-2"> | |
<div class="col-lg-1"></div> | |
<label class="col-lg-3" for="title">Title <span class="text-danger">*</span></label> | |
<div class="col-lg-7"> | |
<input type="text" style="width: 100%" class="form-control title" name="title" value="`+ res.title + `"> | |
</div> | |
<div class="col-lg-1"></div> | |
</div> | |
<div class="row p-2"> | |
<div class="col-lg-1"></div> | |
<label class="col-lg-3" for="title">Tags (e.g: tag1,tag2)</label> | |
<div class="col-lg-7"> | |
<input type="text" style="width: 100%" class="form-control tags" name="tags" value="`+ res.tags + `"> | |
</div> | |
<div class="col-lg-1"></div> | |
</div> | |
<div class="row p-2"> | |
<div class="col-lg-1"></div> | |
<label class="col-lg-3" for="title">Description <span class="text-danger">*</span></label> | |
<div class="col-lg-7"> | |
<textarea class="form-control description" name="description" | |
placeholder="Enter Description" style="width: 100%">`+ res.description + `</textarea> | |
</div> | |
<div class="col-lg-1"></div> | |
</div> | |
<div class="row"> | |
<div class="col-lg-1"></div> | |
<div class="col-lg-10 text-right"> | |
<button type="button" id="updateLessonBtn`+ id + `" class="btn btn-rounded btn-icon btn-outline-success" style="width: 125px;"><i class="fa fa-check-circle-o"></i>Save</button> | |
<button type="button" id="cancelLessonBtn`+ id + `" class="btn btn-rounded btn-icon btn-outline-danger" style="width: 125px;"><i class="fa fa-times-circle-o"></i>Cancel</button> | |
</div> | |
<div class="col-lg-1"></div> | |
</div> | |
</form> | |
</td> | |
</tr> | |
`; | |
$(entryContent).insertAfter('#sectionRecord' + id); | |
createSelectize($('#form-edit-lesson-' + id + ' .level_id'), 'id', 'subject_level', 'subject_level', 'Please select Level - Subject'); | |
getSubjectLevelList($('#form-edit-lesson-' + id + ' .level_id')); | |
$('#form-edit-lesson-' + id + ' .description').summernote(); | |
setTimeout(function () { | |
$('#form-edit-lesson-' + id + ' .level_id')[0].selectize.setValue(res.level_id); | |
}, 300) | |
$('#updateLessonBtn' + id).click(function () { | |
var level_id = $('#form-edit-lesson-' + id + ' .level_id').val(); | |
var title = $('#form-edit-lesson-' + id + ' .title').val(); | |
var tags = $('#form-edit-lesson-' + id + ' .tags').val(); | |
var description = $('#form-edit-lesson-' + id + ' .description').val(); | |
if (level_id == '') { | |
swal('Warning', 'Please choose level and subject!', 'warning'); | |
} else if (title == '') { | |
swal('Warning', 'Please fill the title!', 'warning'); | |
} else if (description == '') { | |
swal('Warning', 'Please fill the description!', 'warning'); | |
} else { | |
$.ajax({ | |
type: 'POST', | |
url: base_url + 'lesson/updateLesson', | |
data: { | |
lesson_id: id, | |
level_id: level_id, | |
title: title, | |
tags: tags, | |
description: description | |
}, | |
dataType: 'json', | |
success: function (res) { | |
if (res.msg == 'success') { | |
var level_subject = $('#form-edit-lesson-' + id + ' .level_id option:selected').text(); | |
$('#sectionRecord' + id + ' .level_subject').html(level_subject); | |
$('#sectionRecord' + id + ' .title').html(title); | |
$('.form-edit-lesson-' + id).remove(); | |
toastr.success('The lesson has been successfully updated'); | |
$('.editLessonBtn' + id).prop('disabled', false); | |
} | |
} | |
}); | |
} | |
}) | |
$('#cancelLessonBtn' + id).click(function () { | |
$('.form-edit-lesson-' + id).remove(); | |
$('.editLessonBtn' + id).prop('disabled', false); | |
}) | |
} | |
}); | |
} | |
function deleteLesson(id) { | |
swal({ | |
title: "Are you sure?", | |
text: "Once deleted, you will not be able to recover this lesson!", | |
icon: "warning", | |
buttons: true, | |
dangerMode: true, | |
}) | |
.then((willDelete) => { | |
if (willDelete) { | |
$.ajax({ | |
type: 'POST', | |
url: base_url + 'lesson/deleteLesson/' + id, | |
dataType: 'json', | |
success: function (res) { | |
if (res.msg == 'success') { | |
swal("The lesson has been successfully deleted!", { | |
icon: "success", | |
}); | |
loadLesson(); | |
} | |
} | |
}); | |
} | |
}); | |
} | |
function loadTableSectionLesson(tbl_row, lesson_id) { | |
$.ajax({ | |
url: base_url + 'lesson/loadSectionLesson/' + lesson_id, | |
type: 'GET', | |
dataType: 'json', | |
success: function (res) { | |
$('.tbl_row_loading').remove(); | |
var data_lesson = res.data.data_lesson; | |
var subject_type = data_lesson.subject_type; | |
var data_section = res.data.data_section; | |
var data_lecture = res.data.data_lecture; | |
if (data_section.length == 0) { | |
$(tbl_row).after(` | |
<tr class="showLessonSection" id="contentLesson_`+ lesson_id + `"> | |
<td colspan="5"> | |
<table class="table"> | |
<thead> | |
<tr class="info"> | |
<th width="5%"></th> | |
<th width="80%">Section</th> | |
<th></th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr> | |
<td colspan="3" class="text-left">Not section yet.</td> | |
</tr> | |
</tbody> | |
</table> | |
</td> | |
</tr> | |
`); | |
} else { | |
var row = `<tr class="showLessonSection" id="contentLesson_` + lesson_id + `"> | |
<td colspan="5"> | |
<div class="table-responsive"> | |
<table class="table"> | |
<thead> | |
<tr class="info"> | |
<th width="5%"></th> | |
<th width="80%">Section</th> | |
<th width="15%"></th> | |
</tr> | |
</thead> | |
<tbody> | |
`; | |
for (x = 0; x < data_section.length; x++) { | |
var listLecture = ''; | |
for (y = 0; y < data_lecture.length; y++) { | |
if (data_lecture[y].section_id == data_section[x].section_id) { | |
var moduleVideo = ``; | |
var moduleDocument = ``; | |
var moduleAssessment = ``; | |
if (data_lecture[y].uploaded_video != '' && data_lecture[y].uploaded_video_type == 'local') { | |
var parts = data_lecture[y].uploaded_video.split("."); | |
var videoType = parts[parts.length - 1]; | |
moduleVideo += `<div class="dropdown" style="display: inline;"> | |
<button class="btn btn-icon-o radius100 btn-outline-teal btn-no-margin-top dropdown-toggle" type="button" data-toggle="dropdown"> | |
<span class="picons-thin-icon-thin-0588_play_movie_video_cinema_flm"></span></button> | |
<ul class="dropdown-menu list_uploaded_video_` + data_lecture[y].id + `">`; | |
moduleVideo += `<li><a style="cursor: pointer;" href="` + base_url + `/uploaded_file/video/` + data_lecture[y].uploaded_video + `" class="play-video uploaded_video` + data_lecture[y].id + `"><i class="picons-thin-icon-thin-0158_arrow_next_right mr-2"></i> Play Video</a></li> | |
<li class="divider"></li> | |
<li><a style="cursor: pointer;" onClick="studentViewed('`+ data_lecture[y].lecture_title + `', ` + data_lecture[y].id + `, 'video')" ><i class="picons-thin-icon-thin-0704_users_profile_group_couple_man_woman mr-2"></i> Viewer (` + data_lecture[y].total_student_viewed + `)</a></li> | |
`; | |
moduleVideo += `</ul></div>`; | |
} else if (data_lecture[y].uploaded_video != '' && data_lecture[y].uploaded_video_type == 'embed') { | |
moduleVideo += `<div class="dropdown" style="display: inline;"> | |
<button class="btn btn-icon-o radius100 btn-outline-teal btn-no-margin-top dropdown-toggle" type="button" data-toggle="dropdown"> | |
<span class="picons-thin-icon-thin-0588_play_movie_video_cinema_flm"></span></button> | |
<ul class="dropdown-menu list_uploaded_video_` + data_lecture[y].id + `">`; | |
moduleVideo += `<li><a style="cursor: pointer;" href="` + data_lecture[y].uploaded_video + `" class="play-video uploaded_video` + data_lecture[y].id + `"><i class="picons-thin-icon-thin-0158_arrow_next_right mr-2"></i> Play Video</a></li> | |
<li class="divider"></li> | |
<li><a style="cursor: pointer;" onClick="studentViewed('`+ data_lecture[y].lecture_title + `', ` + data_lecture[y].id + `, 'video')" ><i class="picons-thin-icon-thin-0704_users_profile_group_couple_man_woman mr-2"></i> Viewer (` + data_lecture[y].total_student_viewed + `)</a></li> | |
`; | |
moduleVideo += `</ul></div>`; | |
} else if (data_lecture[y].uploaded_video != '' && data_lecture[y].uploaded_video_type == 'gdrive') { | |
moduleVideo += `<div class="dropdown" style="display: inline;"> | |
<button class="btn btn-icon-o radius100 btn-outline-teal btn-no-margin-top dropdown-toggle" type="button" data-toggle="dropdown"> | |
<span class="picons-thin-icon-thin-0588_play_movie_video_cinema_flm"></span></button> | |
<ul class="dropdown-menu list_uploaded_video_` + data_lecture[y].id + `">`; | |
moduleVideo += `<li><a style="cursor: pointer;" href="https://drive.google.com/file/d/` + data_lecture[y].uploaded_video + `/preview" class="play-video uploaded_video` + data_lecture[y].id + `"><i class="picons-thin-icon-thin-0158_arrow_next_right mr-2"></i> Play Video</a></li> | |
<li class="divider"></li> | |
<li><a style="cursor: pointer;" onClick="studentViewed('`+ data_lecture[y].lecture_title + `', ` + data_lecture[y].id + `, 'video')" ><i class="picons-thin-icon-thin-0704_users_profile_group_couple_man_woman mr-2"></i> Viewer (` + data_lecture[y].total_student_viewed + `)</a></li> | |
`; | |
moduleVideo += `</ul></div>`; | |
} else { | |
moduleVideo += `<div class="dropdown btn_uploaded_video_` + data_lecture[y].id + `" style="display: none;"> | |
<button class="btn btn-icon-o radius100 btn-outline-teal btn-no-margin-top dropdown-toggle" type="button" data-toggle="dropdown"> | |
<span class="picons-thin-icon-thin-0588_play_movie_video_cinema_flm"></span></button> | |
<ul class="dropdown-menu list_uploaded_video_` + data_lecture[y].id + `"> | |
</ul> | |
</div> | |
`; | |
} | |
if (data_lecture[y].uploaded_doc != '') { | |
if (data_lecture[y].uploaded_doc_type == 'gdrive') { | |
if(data_lecture[y].google_doc_type == 'pdf') { | |
var link = `https://drive.google.com/file/d/` + data_lecture[y].uploaded_doc + `/preview`; | |
} else { | |
var link = `https://docs.google.com/` + data_lecture[y].google_doc_type + `/d/`+ data_lecture[y].uploaded_doc + `/edit`; | |
} | |
moduleDocument += `<div class="dropdown uploaded_doc_` + data_lecture[y].id + `" style="display: inline;"> | |
<button class="btn btn-icon-o radius100 btn-outline-danger btn-no-margin-top dropdown-toggle" type="button" data-toggle="dropdown"> | |
<span class="fa fa-file-text-o"></span></button> | |
<ul class="dropdown-menu link_document_` + data_lecture[y].id + `"> | |
<li class="dropdown-header">Open document in...</li> | |
<li> | |
<a style="cursor: pointer;" href="` + link + `" target="_blank"><i class="fa fa-google mr-2"></i> Google Doc</a> | |
</li> | |
<li class="divider"></li> | |
<li> | |
<a style="cursor: pointer;" href="https://drive.google.com/file/d/` + data_lecture[y].uploaded_doc + `/edit" target="_blank"><i class="fa fa-download mr-2"></i> Download</a> | |
</li> | |
</ul> | |
</div>`; | |
} else { | |
moduleDocument += `<div class="dropdown uploaded_doc_` + data_lecture[y].id + `" style="display: inline;"> | |
<button class="btn btn-icon-o radius100 btn-outline-danger btn-no-margin-top dropdown-toggle" type="button" data-toggle="dropdown"> | |
<span class="fa fa-file-text-o"></span></button> | |
<ul class="dropdown-menu link_document_` + data_lecture[y].id + `"> | |
<li class="dropdown-header">Open document in...</li> | |
<li> | |
<a style="cursor: pointer;" href="https://docs.google.com/gview?url=`+ base_url + `uploaded_file/doc/` + data_lecture[y].uploaded_doc + `&embedded=true" target="_blank"><i class="fa fa-google mr-2"></i> Google Doc</a> | |
</li> | |
<li> | |
<a style="cursor: pointer;" href="https://view.officeapps.live.com/op/view.aspx?src=`+ base_url + `uploaded_file/doc/` + data_lecture[y].uploaded_doc + `" target="_blank"><i class="fa fa-windows mr-2"></i> Ms. Office Online</a> | |
</li> | |
<li class="divider"></li> | |
<li> | |
<a style="cursor: pointer;" href="` + base_url + `uploaded_file/doc/` + data_lecture[y].uploaded_doc + `" target="_blank"><i class="fa fa-download mr-2"></i> Download</a> | |
</li> | |
</ul> | |
</div>`; | |
} | |
} else { | |
moduleDocument += `<div class="dropdown uploaded_doc_` + data_lecture[y].id + `" style="display: none;"> | |
<button class="btn btn-icon-o radius100 btn-outline-danger btn-no-margin-top dropdown-toggle" type="button" data-toggle="dropdown"> | |
<span class="fa fa-file-text-o"></span></button> | |
<ul class="dropdown-menu link_document_` + data_lecture[y].id + `"> | |
</ul> | |
</div>`; | |
} | |
if (data_lecture[y].worksheet_id != 0) { | |
moduleAssessment += `<a href="` + base_url + `profile/worksheet/` + data_lecture[y].worksheet_id + `" target="_blank" title="View Assessment" class="btn btn-icon-o radius100 btn-shadow btn-outline-success btn-no-margin-top assessment` + data_lecture[y].id + `"><i class="fa fa-clipboard"></i></a>`; | |
} else { | |
moduleAssessment += `<a href="" target="_blank" style="display: none;" class="btn btn-icon-o radius100 btn-shadow btn-outline-success btn-no-margin-top assessment` + data_lecture[y].id + `"><i class="fa fa-clipboard"></i></a>`; | |
} | |
listLecture += ` | |
<tr class="lectureRecord" id="lectureRecord`+ data_lecture[y].id + `"> | |
<td>`+ data_lecture[y].number + ` )</td> | |
<td class="text-left lecture_title">`+ data_lecture[y].lecture_title + `</td> | |
<td class="text-left lectureActionBtn"> | |
<button class="btn btn-icon-o radius100 btn-outline-warning btn-no-margin-top editLectureBtn`+ data_lecture[y].id + `" onClick="editLecture(` + data_lecture[y].id + `)" title="Edit Lecture"><i class="fa fa-pencil-square-o"></i></button> | |
<div class="dropdown" style="display: inline;"> | |
<button class="btn btn-icon-o radius100 btn-outline-primary btn-no-margin-top dropdown-toggle" type="button" data-toggle="dropdown"> | |
<span class="fa fa-upload"></span></button> | |
<ul class="dropdown-menu"> | |
<li class="dropdown-header">Upload a video from...</li> | |
<li> | |
<a style="cursor: pointer;" class="embedVideo" onClick="entryUpdateEmbedVideo(`+ data_lecture[y].id + `)" title="Embed Video"><i class="fa fa-link mr-2"></i> Embed Link</a> | |
</li> | |
<li> | |
<a style="cursor: pointer;" class="uploadVideo" onClick="startUpdateUploadFile(`+ data_lecture[y].id + `, 'video')" title="Upload Video"><i class="fa fa-desktop mr-2"></i> Your Computer</a> | |
</li> | |
<li> | |
<a style="cursor: pointer;" onClick="showPickerDialog(`+ data_lecture[y].id + `, 'video', true)"><i class="fa fa-google mr-2"></i> Google Drive</a> | |
</li> | |
<li class="divider"></li> | |
<li class="dropdown-header">Upload a document from...</li> | |
<li> | |
<a style="cursor: pointer;" onClick="startUpdateUploadFile(`+ data_lecture[y].id + `, 'doc')" title="Upload Document"><i class="fa fa-desktop mr-2"></i> Your Computer</a> | |
</li> | |
<li> | |
<a style="cursor: pointer;" onClick="showPickerDialog(`+ data_lecture[y].id + `, 'doc', true)"><i class="fa fa-google mr-2"></i> Google Drive</a> | |
</li> | |
<li class="divider"></li> | |
<li class="dropdown-header">Add assessment...</li> | |
<li> | |
<a style="cursor: pointer;" onClick="addAssessment(`+ data_lecture[y].id + `, ` + subject_type + `, 'edit')" title="Add Assessment" data-toggle="modal" data-target="#modalAssessment"><i class="fa fa-clipboard mr-2"></i> Your worksheet</a> | |
</li> | |
</ul> | |
</div> | |
`+ moduleVideo + ` | |
`+ moduleDocument + ` | |
`+ moduleAssessment + ` | |
<button class="btn btn-icon-o radius100 btn-outline-danger btn-no-margin-top" onClick="deleteLecture(`+ data_lecture[y].id + `, ` + data_section[x].section_id + `)" title="Delete Lecture"><i class="fa fa-trash-o"></i></button> | |
<form id='form-upload` + data_lecture[y].id + `' method='post' enctype="multipart/form-data" style="display:none"> | |
<input type="file" id="file_upload` + data_lecture[y].id + `" name="file_upload` + data_lecture[y].id + `" /> | |
</form> | |
</td> | |
</tr> | |
`; | |
} | |
} | |
row += ` | |
<tr class='showLessonSectionRecord contentSection_` + data_section[x].section_id + `' id="showLessonSectionRecord` + data_section[x].section_id + `" data-status="showLectureRecord" data-id='` + data_section[x].section_id + `'> | |
<td width="5%">`+ (x + 1) + `</td> | |
<td width="80%" class="text-left section_title">`+ data_section[x].section_title + `</td> | |
<td width="15%"> | |
<button class="btn btn-icon-o radius100 btn-outline-warning btn-no-margin-top editSectionBtn`+ data_section[x].section_id + `" onClick="editSection(` + data_section[x].section_id + `)" title="Edit Section"><i class="fa fa-pencil-square-o"></i></button> | |
<button class="btn btn-icon-o radius100 btn-outline-danger btn-no-margin-top" onClick="deleteSection(`+ data_section[x].section_id + `, ` + lesson_id + `)" title="Delete Section"><i class="fa fa-trash-o"></i></button> | |
<a class="btn-no-margin-top text-dark showLecture" data-status="showLecture" style="cursor: pointer; text-decoration: none" data-id="` + data_section[x].section_id + `" title="Expand/Collapse"><i class="fa fa-caret-down"></i></a> | |
</td> | |
</tr> | |
<tr class='listLecture contentSection_` + data_section[x].section_id + `' id='listLecture` + data_section[x].section_id + `' data-subject="` + subject_type + `" style='display: none;'> | |
<td colspan='3'> | |
<div class="table-responsive"> | |
<table class="table"> | |
<thead> | |
<tr class="info"> | |
<th width="5%"></th> | |
<th width="60%">Lecture</th> | |
<th width="35%"></th> | |
</tr> | |
</thead> | |
<tbody class="list_lecture_` + data_section[x].section_id + `"> | |
`+ listLecture + ` | |
<tr> | |
<td></td> | |
<td colspan="2" class="contentEntryLecture_`+ data_section[x].section_id + `"><a class="text-danger mr-1" style="cursor: pointer; text-decoration: none;" onClick="createNewLecture(` + data_section[x].section_id + `)"><i class="fa fa-plus"></i> New Lecture</a></td> | |
</tr> | |
</tbody> | |
</table> | |
</div> | |
</td> | |
</tr> | |
`; | |
} | |
row += `<tr> | |
<td></td> | |
<td colspan="2" class="contentEntrySection_`+ lesson_id + `"><a class="text-success mr-1" style="cursor: pointer; text-decoration: none;" onClick="createNewSection(` + lesson_id + `)"><i class="fa fa-plus"></i> New Section</a></td> | |
</tr></tbody></table></div></td></tr>`; | |
$(tbl_row).after(row); | |
} | |
$('.showLecture').on('click', function (e) { | |
e.preventDefault(); | |
var section_id = $(this).data('id'); | |
if ($(this).data('status') == "showLecture") { | |
$('#listLecture' + section_id).show("slow"); | |
$(this).data("status", "hideLecture"); | |
$(this).find($(".fa")).removeClass('fa-caret-down').addClass('fa-caret-up'); | |
} else if ($(this).data("status") == "hideLecture") { | |
$('#listLecture' + section_id).hide("slow"); | |
$(this).data("status", "showLecture"); | |
$(this).find($(".fa")).removeClass('fa-caret-up').addClass('fa-caret-down'); | |
} | |
}); | |
$('.showLessonSectionRecord').mouseenter(function () { | |
$(this).css("background-color", "#f6f6f6"); | |
}).mouseleave(function () { | |
$(this).css("background-color", "#ffffff"); | |
}); | |
$('.play-video').magnificPopup({ | |
type: 'iframe', | |
midClick: true | |
}); | |
} | |
}); | |
} | |
$(document).on('click', '.showSectionBtn', function (e) { | |
e.preventDefault(); | |
var lesson_id = $(this).data('id'); | |
var tbl_row = $('#sectionRecord' + lesson_id); | |
var nextRow = tbl_row.next().attr('class'); | |
console.log(nextRow); | |
if (nextRow === 'showLessonSection' || nextRow === 'tbl_row_loading') { | |
tbl_row.find('.fa-caret-up').removeClass('fa-caret-up').addClass('fa-caret-down'); | |
tbl_row.next().remove(); | |
} else { | |
tbl_row.find('.fa-caret-down').removeClass('fa-caret-down').addClass('fa-caret-up'); | |
tbl_row.after('<tr class="tbl_row_loading"><td colspan="5"><i class="fa fa-spinner"></i></td></tr>'); | |
loadTableSectionLesson(tbl_row, lesson_id); | |
} | |
}); | |
function createNewSection(lesson_id) { | |
var entryContent = ` | |
<div class="form-inline p-1 form-add-section-`+ lesson_id + `"> | |
<div class="form-group mb-2" style="width: 100%"> | |
<input type="text" class="form-control input_style1_black section_title" placeholder="Section Title" style="width: 80%" /> | |
<a style="cursor: pointer; text-decoration: none;" id="saveSectionBtn`+ lesson_id + `" class="text-success-active fs22 ml-2"><i class="fa fa-check-circle-o"></i></a> | |
<a style="cursor: pointer; text-decoration: none;" id="cancelSectionBtn`+ lesson_id + `" class="text-danger-active fs22 ml-2"><i class="fa fa-times-circle-o"></i></a> | |
</div> | |
</div>`; | |
$('.contentEntrySection_' + lesson_id).html(entryContent); | |
$('#saveSectionBtn' + lesson_id).click(function () { | |
var section_title = $('.form-add-section-' + lesson_id + ' .section_title').val(); | |
if (section_title == '') { | |
swal("Please fill the field", { | |
icon: "warning", | |
}); | |
} else { | |
$.ajax({ | |
type: 'POST', | |
url: base_url + 'lesson/createNewSection', | |
data: { | |
lesson_id: lesson_id, | |
section_title: section_title | |
}, | |
dataType: 'json', | |
success: function (res) { | |
if (res.msg == 'success') { | |
swal("The new section has been successfully created!", { | |
icon: "success", | |
}); | |
var tbl_row = $('#sectionRecord' + lesson_id); | |
tbl_row.next().remove(); | |
tbl_row.after('<tr class="tbl_row_loading"><td colspan="5"><i class="fa fa-spinner"></i></td></tr>'); | |
loadTableSectionLesson(tbl_row, lesson_id); | |
} | |
} | |
}); | |
} | |
}) | |
$('#cancelSectionBtn' + lesson_id).click(function () { | |
$('.form-add-section-' + lesson_id).remove(); | |
$('.contentEntrySection_' + lesson_id).html(`<a class="text-success mr-1" style="cursor: pointer; text-decoration: none;" onClick="createNewSection(` + lesson_id + `)"><i class="fa fa-plus"></i> New Section</a>`); | |
}) | |
} | |
function editSection(id) { | |
var old_section_title = $('#showLessonSectionRecord' + id + ' .section_title').text(); | |
$('.editSectionBtn' + id).prop('disabled', true); | |
var editContent = ` | |
<div class="form-inline p-1 form-edit-section-`+ id + `"> | |
<div class="form-group mb-2" style="width: 100%"> | |
<input type="text" class="form-control input_style1_black section_title" value="`+ old_section_title + `" placeholder="Section" style="width: 80%" /> | |
<a style="cursor: pointer; text-decoration: none;" id="updateSectionBtn`+ id + `" class="text-success-active fs22 ml-2"><i class="fa fa-check-circle-o"></i></a> | |
<a style="cursor: pointer; text-decoration: none;" id="cancelSectionBtn`+ id + `" class="text-danger-active fs22 ml-2"><i class="fa fa-times-circle-o"></i></a> | |
</div> | |
</div> | |
`; | |
$('#showLessonSectionRecord' + id + ' .section_title').html(editContent); | |
$('#updateSectionBtn' + id).click(function () { | |
var section_title = $('.form-edit-section-' + id + ' .section_title').val(); | |
if (section_title == '') { | |
swal("Please fill the field", { | |
icon: "warning", | |
}); | |
} else { | |
$.ajax({ | |
type: 'POST', | |
url: base_url + 'lesson/updateSection', | |
data: { | |
section_id: id, | |
section_title: section_title | |
}, | |
dataType: 'json', | |
success: function (res) { | |
if (res.msg == 'success') { | |
swal("The section title has been successfully updated!", { | |
icon: "success", | |
}); | |
$('.form-edit-section-' + id).remove(); | |
$('#showLessonSectionRecord' + id + ' .section_title').html(section_title); | |
$('.editSectionBtn' + id).prop('disabled', false); | |
} | |
} | |
}); | |
} | |
}) | |
$('#cancelSectionBtn' + id).click(function () { | |
$('#showLessonSectionRecord' + id + ' .section_title').html(old_section_title); | |
$('.form-edit-section-' + id).remove(); | |
$('.editSectionBtn' + id).prop('disabled', false); | |
}) | |
} | |
function deleteSection(id, lesson_id) { | |
swal({ | |
title: "Are you sure?", | |
text: "Once deleted, you will not be able to recover this section!", | |
icon: "warning", | |
buttons: true, | |
dangerMode: true, | |
}) | |
.then((willDelete) => { | |
if (willDelete) { | |
$.ajax({ | |
type: 'POST', | |
url: base_url + 'lesson/deleteSection/' + id, | |
dataType: 'json', | |
success: function (res) { | |
if (res.msg == 'success') { | |
swal("The section has been successfully deleted!", { | |
icon: "success", | |
}); | |
var tbl_row = $('#sectionRecord' + lesson_id); | |
tbl_row.next().remove(); | |
tbl_row.after('<tr class="tbl_row_loading"><td colspan="5"><i class="fa fa-spinner"></i></td></tr>'); | |
loadTableSectionLesson(tbl_row, lesson_id); | |
} | |
} | |
}); | |
} | |
}); | |
} | |
function loadTableLecture(section_id) { | |
$.ajax({ | |
type: 'GET', | |
url: base_url + 'lesson/loadLectureBySection/' + section_id, | |
dataType: 'json', | |
success: function (res) { | |
var data_lecture = res; | |
var listLecture = ``; | |
var subject_type = $('#listLecture' + section_id).data('subject'); | |
for (var y = 0; y < data_lecture.length; y++) { | |
var moduleVideo = ``; | |
var moduleDocument = ``; | |
var moduleAssessment = ``; | |
if (data_lecture[y].uploaded_video != '' && data_lecture[y].uploaded_video_type == 'local') { | |
var parts = data_lecture[y].uploaded_video.split("."); | |
var videoType = parts[parts.length - 1]; | |
moduleVideo += `<div class="dropdown" style="display: inline;"> | |
<button class="btn btn-icon-o radius100 btn-outline-teal btn-no-margin-top dropdown-toggle" type="button" data-toggle="dropdown"> | |
<span class="picons-thin-icon-thin-0588_play_movie_video_cinema_flm"></span></button> | |
<ul class="dropdown-menu list_uploaded_video_` + data_lecture[y].id + `">`; | |
moduleVideo += `<li><a style="cursor: pointer;" href="` + base_url + `/uploaded_file/video/` + data_lecture[y].uploaded_video + `" class="play-video uploaded_video` + data_lecture[y].id + `"><i class="picons-thin-icon-thin-0158_arrow_next_right mr-2"></i> Play Video</a></li> | |
<li class="divider"></li> | |
<li><a style="cursor: pointer;" onClick="studentViewed('`+ data_lecture[y].lecture_title + `', ` + data_lecture[y].id + `, 'video')" ><i class="picons-thin-icon-thin-0704_users_profile_group_couple_man_woman mr-2"></i> Viewer (` + data_lecture[y].total_student_viewed + `)</a></li> | |
`; | |
moduleVideo += `</ul></div>`; | |
} else if (data_lecture[y].uploaded_video != '' && data_lecture[y].uploaded_video_type == 'embed') { | |
moduleVideo += `<div class="dropdown" style="display: inline;"> | |
<button class="btn btn-icon-o radius100 btn-outline-teal btn-no-margin-top dropdown-toggle" type="button" data-toggle="dropdown"> | |
<span class="picons-thin-icon-thin-0588_play_movie_video_cinema_flm"></span></button> | |
<ul class="dropdown-menu list_uploaded_video_` + data_lecture[y].id + `">`; | |
moduleVideo += `<li><a style="cursor: pointer;" href="` + data_lecture[y].uploaded_video + `" class="play-video uploaded_video` + data_lecture[y].id + `"><i class="picons-thin-icon-thin-0158_arrow_next_right mr-2"></i> Play Video</a></li> | |
<li class="divider"></li> | |
<li><a style="cursor: pointer;" onClick="studentViewed('`+ data_lecture[y].lecture_title + `', ` + data_lecture[y].id + `, 'video')" ><i class="picons-thin-icon-thin-0704_users_profile_group_couple_man_woman mr-2"></i> Viewer (` + data_lecture[y].total_student_viewed + `)</a></li> | |
`; | |
moduleVideo += `</ul></div>`; | |
} else if (data_lecture[y].uploaded_video != '' && data_lecture[y].uploaded_video_type == 'gdrive') { | |
moduleVideo += `<div class="dropdown" style="display: inline;"> | |
<button class="btn btn-icon-o radius100 btn-outline-teal btn-no-margin-top dropdown-toggle" type="button" data-toggle="dropdown"> | |
<span class="picons-thin-icon-thin-0588_play_movie_video_cinema_flm"></span></button> | |
<ul class="dropdown-menu list_uploaded_video_` + data_lecture[y].id + `">`; | |
moduleVideo += `<li><a style="cursor: pointer;" href="https://drive.google.com/file/d/` + data_lecture[y].uploaded_video + `/preview" class="play-video uploaded_video` + data_lecture[y].id + `"><i class="picons-thin-icon-thin-0158_arrow_next_right mr-2"></i> Play Video</a></li> | |
<li class="divider"></li> | |
<li><a style="cursor: pointer;" onClick="studentViewed('`+ data_lecture[y].lecture_title + `', ` + data_lecture[y].id + `, 'video')" ><i class="picons-thin-icon-thin-0704_users_profile_group_couple_man_woman mr-2"></i> Viewer (` + data_lecture[y].total_student_viewed + `)</a></li> | |
`; | |
moduleVideo += `</ul></div>`; | |
} else { | |
moduleVideo += `<div class="dropdown btn_uploaded_video_` + data_lecture[y].id + `" style="display: inline;"> | |
<button class="btn btn-icon-o radius100 btn-outline-teal btn-no-margin-top dropdown-toggle" type="button" data-toggle="dropdown"> | |
<span class="picons-thin-icon-thin-0588_play_movie_video_cinema_flm"></span></button> | |
<ul class="dropdown-menu list_uploaded_video_` + data_lecture[y].id + `"> | |
</ul> | |
</div> | |
`; | |
} | |
if (data_lecture[y].uploaded_doc != '') { | |
if (data_lecture[y].uploaded_doc_type == 'gdrive') { | |
if(data_lecture[y].google_doc_type == 'pdf') { | |
var link = `https://drive.google.com/file/d/` + data_lecture[y].uploaded_doc + `/preview`; | |
} else { | |
var link = `https://docs.google.com/` + data_lecture[y].google_doc_type + `/d/`+ data_lecture[y].uploaded_doc + `/edit`; | |
} | |
moduleDocument += `<div class="dropdown uploaded_doc_` + data_lecture[y].id + `" style="display: inline;"> | |
<button class="btn btn-icon-o radius100 btn-outline-danger btn-no-margin-top dropdown-toggle" type="button" data-toggle="dropdown"> | |
<span class="fa fa-file-text-o"></span></button> | |
<ul class="dropdown-menu link_document_` + data_lecture[y].id + `"> | |
<li class="dropdown-header">Open document in...</li> | |
<li> | |
<a style="cursor: pointer;" href="` + link + `" target="_blank"><i class="fa fa-google mr-2"></i> Google Doc</a> | |
</li> | |
<li class="divider"></li> | |
<li> | |
<a style="cursor: pointer;" href="https://drive.google.com/file/d/` + data_lecture[y].uploaded_doc + `/edit" target="_blank"><i class="fa fa-download mr-2"></i> Download</a> | |
</li> | |
</ul> | |
</div>`; | |
} else { | |
moduleDocument += `<div class="dropdown uploaded_doc_` + data_lecture[y].id + `" style="display: inline;"> | |
<button class="btn btn-icon-o radius100 btn-outline-danger btn-no-margin-top dropdown-toggle" type="button" data-toggle="dropdown"> | |
<span class="fa fa-file-text-o"></span></button> | |
<ul class="dropdown-menu link_document_` + data_lecture[y].id + `"> | |
<li class="dropdown-header">Open document in...</li> | |
<li> | |
<a style="cursor: pointer;" href="https://docs.google.com/gview?url=`+ base_url + `uploaded_file/doc/` + data_lecture[y].uploaded_doc + `&embedded=true" target="_blank"><i class="fa fa-google mr-2"></i> Google Doc</a> | |
</li> | |
<li> | |
<a style="cursor: pointer;" href="https://view.officeapps.live.com/op/view.aspx?src=`+ base_url + `uploaded_file/doc/` + data_lecture[y].uploaded_doc + `" target="_blank"><i class="fa fa-windows mr-2"></i> Ms. Office Online</a> | |
</li> | |
<li class="divider"></li> | |
<li> | |
<a style="cursor: pointer;" href="` + base_url + `uploaded_file/doc/` + data_lecture[y].uploaded_doc + `" target="_blank"><i class="fa fa-download mr-2"></i> Download</a> | |
</li> | |
</ul> | |
</div>`; | |
} | |
} else { | |
moduleDocument += `<div class="dropdown uploaded_doc_` + data_lecture[y].id + `" style="display: none;"> | |
<button class="btn btn-icon-o radius100 btn-outline-danger btn-no-margin-top dropdown-toggle" type="button" data-toggle="dropdown"> | |
<span class="fa fa-file-text-o"></span></button> | |
<ul class="dropdown-menu link_document_` + data_lecture[y].id + `"> | |
</ul> | |
</div>`; | |
} | |
if (data_lecture[y].worksheet_id != 0) { | |
moduleAssessment += `<a href="` + base_url + `profile/worksheet/` + data_lecture[y].worksheet_id + `" target="_blank" title="View Assessment" class="btn btn-icon-o radius100 btn-shadow btn-outline-success btn-no-margin-top assessment` + data_lecture[y].id + `"><i class="fa fa-clipboard"></i></a>`; | |
} else { | |
moduleAssessment += `<a href="" target="_blank" style="display: none;" class="btn btn-icon-o radius100 btn-shadow btn-outline-success btn-no-margin-top assessment` + data_lecture[y].id + `"><i class="fa fa-clipboard"></i></a>`; | |
} | |
listLecture += ` | |
<tr class="lectureRecord" id="lectureRecord`+ data_lecture[y].id + `"> | |
<td>`+ data_lecture[y].number + ` )</td> | |
<td class="text-left lecture_title">`+ data_lecture[y].lecture_title + `</td> | |
<td class="text-left lectureActionBtn"> | |
<button class="btn btn-icon-o radius100 btn-outline-warning btn-no-margin-top editLectureBtn`+ data_lecture[y].id + `" onClick="editLecture(` + data_lecture[y].id + `)" title="Edit Lecture"><i class="fa fa-pencil-square-o"></i></button> | |
<div class="dropdown" style="display: inline;"> | |
<button class="btn btn-icon-o radius100 btn-outline-primary btn-no-margin-top dropdown-toggle" type="button" data-toggle="dropdown"> | |
<span class="fa fa-upload"></span></button> | |
<ul class="dropdown-menu"> | |
<li class="dropdown-header">Upload a video from...</li> | |
<li> | |
<a style="cursor: pointer;" class="embedVideo" onClick="entryUpdateEmbedVideo(`+ data_lecture[y].id + `)" title="Embed Video"><i class="fa fa-link mr-2"></i> Embed Link</a> | |
</li> | |
<li> | |
<a style="cursor: pointer;" class="uploadVideo" onClick="startUpdateUploadFile(`+ data_lecture[y].id + `, 'video')" title="Upload Video"><i class="fa fa-desktop mr-2"></i> Your Computer</a> | |
</li> | |
<li> | |
<a style="cursor: pointer;" onClick="showPickerDialog(`+ data_lecture[y].id + `, 'video', true)"><i class="fa fa-google mr-2"></i> Google Drive</a> | |
</li> | |
<li class="divider"></li> | |
<li class="dropdown-header">Upload a document from...</li> | |
<li> | |
<a style="cursor: pointer;" onClick="startUpdateUploadFile(`+ data_lecture[y].id + `, 'doc')" title="Upload Document"><i class="fa fa-desktop mr-2"></i> Your Computer</a> | |
</li> | |
<li> | |
<a style="cursor: pointer;" onClick="showPickerDialog(`+ data_lecture[y].id + `, 'doc', true)"><i class="fa fa-google mr-2"></i> Google Drive</a> | |
</li> | |
<li class="divider"></li> | |
<li class="dropdown-header">Add assessment...</li> | |
<li> | |
<a style="cursor: pointer;" onClick="addAssessment(`+ data_lecture[y].id + `, ` + subject_type + `, 'edit')" title="Add Assessment" data-toggle="modal" data-target="#modalAssessment"><i class="fa fa-clipboard mr-2"></i> Your worksheet</a> | |
</li> | |
</ul> | |
</div> | |
`+ moduleVideo + ` | |
`+ moduleDocument + ` | |
`+ moduleAssessment + ` | |
<button class="btn btn-icon-o radius100 btn-outline-danger btn-no-margin-top" onClick="deleteLecture(`+ data_lecture[y].id + `, ` + section_id + `)" title="Delete Lecture"><i class="fa fa-trash-o"></i></button> | |
<form id='form-upload` + data_lecture[y].id + `' method='post' enctype="multipart/form-data" style="display:none"> | |
<input type="file" id="file_upload` + data_lecture[y].id + `" name="file_upload` + data_lecture[y].id + `" /> | |
</form> | |
</td> | |
</tr> | |
`; | |
} | |
listLecture += ` | |
<tr> | |
<td></td> | |
<td colspan="2" class="contentEntryLecture_`+ section_id + `"><a class="text-danger mr-1" style="cursor: pointer; text-decoration: none;" onClick="createNewLecture(` + section_id + `)"><i class="fa fa-plus"></i> New Lecture</a></td> | |
</tr>`; | |
$('.list_lecture_' + section_id).html(listLecture); | |
$('.play-video').magnificPopup({ | |
type: 'iframe', | |
midClick: true | |
}); | |
} | |
}); | |
} | |
function createNewLecture(section_id) { | |
var entryContent = ` | |
<div class="form-inline p-1 form-add-lecture-`+ section_id + `"> | |
<div class="form-group mb-2" style="width: 100%"> | |
<input type="text" class="form-control input_style1_black lecture_title" placeholder="Lecture Title" style="width: 80%" /> | |
<a style="cursor: pointer; text-decoration: none;" id="saveLectureBtn`+ section_id + `" class="text-success-active fs22 ml-2"><i class="fa fa-check-circle-o"></i></a> | |
<a style="cursor: pointer; text-decoration: none;" id="cancelLectureBtn`+ section_id + `" class="text-danger-active fs22 ml-2"><i class="fa fa-times-circle-o"></i></a> | |
</div> | |
</div>`; | |
$('.contentEntryLecture_' + section_id).html(entryContent); | |
$('#saveLectureBtn' + section_id).click(function () { | |
var lecture_title = $('.form-add-lecture-' + section_id + ' .lecture_title').val(); | |
if (lecture_title == '') { | |
swal("Please fill the field", { | |
icon: "warning", | |
}); | |
} else { | |
$.ajax({ | |
type: 'POST', | |
url: base_url + 'lesson/createNewLecture', | |
data: { | |
section_id: section_id, | |
lecture_title: lecture_title | |
}, | |
dataType: 'json', | |
success: function (res) { | |
if (res.msg == 'success') { | |
swal("The new lecture has been successfully created!", { | |
icon: "success", | |
}); | |
loadTableLecture(section_id); | |
} | |
} | |
}); | |
} | |
}) | |
$('#cancelLectureBtn' + section_id).click(function () { | |
$('.form-add-lecture-' + section_id).remove(); | |
$('.contentEntryLecture_' + section_id).html(`<a class="text-danger mr-1" style="cursor: pointer; text-decoration: none;" onClick="createNewLecture(` + section_id + `)"><i class="fa fa-plus"></i> New Lecture</a>`); | |
}) | |
} | |
function editLecture(id) { | |
var old_lecture_title = $('#lectureRecord' + id + ' .lecture_title').text(); | |
$('.editLectureBtn' + id).prop('disabled', true); | |
var editContent = ` | |
<div class="form-inline p-1 form-edit-lecture-`+ id + `"> | |
<div class="form-group mb-2" style="width: 100%"> | |
<input type="text" class="form-control input_style1_black lecture_title" value="`+ old_lecture_title + `" placeholder="Lecture" style="width: 80%" /> | |
<a style="cursor: pointer; text-decoration: none;" id="updateLectureBtn`+ id + `" class="text-success-active fs22 ml-2"><i class="fa fa-check-circle-o"></i></a> | |
<a style="cursor: pointer; text-decoration: none;" id="cancelLectureBtn`+ id + `" class="text-danger-active fs22 ml-2"><i class="fa fa-times-circle-o"></i></a> | |
</div> | |
</div> | |
`; | |
$('#lectureRecord' + id + ' .lecture_title').html(editContent); | |
$('#updateLectureBtn' + id).click(function () { | |
var lecture_title = $('.form-edit-lecture-' + id + ' .lecture_title').val(); | |
if (lecture_title == '') { | |
swal("Please fill the field", { | |
icon: "warning", | |
}); | |
} else { | |
$.ajax({ | |
type: 'POST', | |
url: base_url + 'lesson/updateLecture', | |
data: { | |
lecture_id: id, | |
lecture_title: lecture_title | |
}, | |
dataType: 'json', | |
success: function (res) { | |
if (res.msg == 'success') { | |
swal("The lecture has been successfully updated!", { | |
icon: "success", | |
}); | |
$('.form-edit-lecture-' + id).remove(); | |
$('#lectureRecord' + id + ' .lecture_title').html(lecture_title); | |
$('.editLectureBtn' + id).prop('disabled', false); | |
} | |
} | |
}); | |
} | |
}) | |
$('#cancelLectureBtn' + id).click(function () { | |
$('#lectureRecord' + id + ' .lecture_title').html(old_lecture_title); | |
$('.form-edit-lecture-' + id).remove(); | |
$('.editLectureBtn' + id).prop('disabled', false); | |
}) | |
} | |
function deleteLecture(id, section_id) { | |
swal({ | |
title: "Are you sure?", | |
text: "Once deleted, you will not be able to recover this lecture!", | |
icon: "warning", | |
buttons: true, | |
dangerMode: true, | |
}) | |
.then((willDelete) => { | |
if (willDelete) { | |
$.ajax({ | |
type: 'POST', | |
url: base_url + 'lesson/deleteLecture/' + id, | |
dataType: 'json', | |
success: function (res) { | |
if (res.msg == 'success') { | |
swal("The lecture has been successfully deleted!", { | |
icon: "success", | |
}); | |
loadTableLecture(section_id); | |
} | |
} | |
}); | |
} | |
}); | |
} | |
function startUpdateUploadFile(id, file) { | |
statusUpload = 'update'; | |
fileType = file; | |
var progressContent = ` | |
<tr class="rowprogress`+ id + `" style="display: none;"> | |
<td colspan="3"> | |
<div class="progress progress`+ id + `"> | |
<div class="progress-bar" id="progress-bar`+ id + `" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:0%"> | |
<span id="status`+ id + `"></span> | |
</div> | |
</div> | |
</td> | |
</tr> | |
`; | |
var selector = $('#lectureRecord' + id); | |
$(progressContent).insertAfter(selector); | |
selected_id = id; | |
function uploadUpdateFile() { | |
var file = document.getElementById("file_upload" + id).files[0]; | |
var formdata = new FormData(); | |
formdata.append("id", id); | |
formdata.append("file_upload" + id, file); | |
formdata.append("fileType", fileType); | |
formdata.append("type", 'local'); | |
var ajax = new XMLHttpRequest(); | |
ajax.responseType = 'json'; | |
ajax.upload.addEventListener("progress", progressUpload, false); | |
ajax.open('POST', base_url + 'lesson/uploadFile', true); | |
ajax.onload = function () { | |
var jsonResponse = ajax.response; | |
if (jsonResponse.msg == 'success') { | |
if (fileType == 'doc') { | |
toastr.success('Your document has been uploaded!'); | |
} else { | |
toastr.success('Your video has been uploaded!'); | |
} | |
getSectionUpdateDetail(id); | |
} else { | |
toastr.error(jsonResponse.msg); | |
} | |
}; | |
ajax.send(formdata); | |
} | |
function progressUpload(event) { | |
var percent = (event.loaded / event.total) * 100; | |
document.getElementById("progress-bar" + id).style.width = Math.round(percent) + '%'; | |
document.getElementById("status" + id).innerHTML = Math.round(percent) + "% Completed"; | |
if (event.loaded == event.total) { | |
setTimeout(function () { | |
if (statusUpload == 'update') { | |
$('.rowprogress' + id).remove(); | |
} | |
}, 200); | |
} | |
} | |
$('#file_upload' + id).click(); | |
$(document).on('change', '#file_upload' + id, function () { | |
$('.rowprogress' + id).show(); | |
if (statusUpload == 'update') { | |
uploadUpdateFile(); | |
} | |
}); | |
} | |
function getSectionUpdateDetail(id) { | |
$.ajax({ | |
type: 'GET', | |
url: base_url + 'lesson/getSectionDetail/' + id, | |
dataType: 'json', | |
success: function (res) { | |
var data = res.data_lecture; | |
if (data.uploaded_video != '' && data.uploaded_video_type == 'local') { | |
var moduleVideo = ` | |
<li><a style="cursor: pointer;" href="` + base_url + `/uploaded_file/video/` + data.uploaded_video + `" class="play-video uploaded_video` + data.id + `"><i class="picons-thin-icon-thin-0158_arrow_next_right mr-2"></i> Play Video</a></li> | |
<li class="divider"></li> | |
<li><a style="cursor: pointer;" onClick="studentViewed('`+ data.lecture_title + `', ` + data.id + `, 'video')" ><i class="picons-thin-icon-thin-0704_users_profile_group_couple_man_woman mr-2"></i> Viewer (` + data.total_student_viewed + `)</a></li> | |
`; | |
$('.btn_uploaded_video_' + id).attr('style', 'display: inline'); | |
$('.list_uploaded_video_' + id).html(moduleVideo); | |
} else if (data.uploaded_video != '' && data.uploaded_video_type == 'embed') { | |
var moduleVideo = ` | |
<li><a style="cursor: pointer;" href="` + data.uploaded_video + `" class="play-video uploaded_video` + data.id + `"><i class="picons-thin-icon-thin-0158_arrow_next_right mr-2"></i> Play Video</a></li> | |
<li class="divider"></li> | |
<li><a style="cursor: pointer;" onClick="studentViewed('`+ data.lecture_title + `', ` + data.id + `, 'video')" ><i class="picons-thin-icon-thin-0704_users_profile_group_couple_man_woman mr-2"></i> Viewer (` + data.total_student_viewed + `)</a></li> | |
`; | |
$('.btn_uploaded_video_' + id).attr('style', 'display: inline'); | |
$('.list_uploaded_video_' + id).html(moduleVideo); | |
} else if (data.uploaded_video != '' && data.uploaded_video_type == 'gdrive') { | |
var moduleVideo = ` | |
<li><a style="cursor: pointer;" href="https://drive.google.com/file/d/` + data.uploaded_video + `/preview" class="play-video uploaded_video` + data.id + `"><i class="picons-thin-icon-thin-0158_arrow_next_right mr-2"></i> Play Video</a></li> | |
<li class="divider"></li> | |
<li><a style="cursor: pointer;" onClick="studentViewed('`+ data.lecture_title + `', ` + data.id + `, 'video')" ><i class="picons-thin-icon-thin-0704_users_profile_group_couple_man_woman mr-2"></i> Viewer (` + data.total_student_viewed + `)</a></li> | |
`; | |
$('.btn_uploaded_video_' + id).attr('style', 'display: inline'); | |
$('.list_uploaded_video_' + id).html(moduleVideo); | |
} | |
if (data.uploaded_doc != '') { | |
if (data.uploaded_doc_type == 'gdrive') { | |
if(data.google_doc_type == 'pdf') { | |
var link = `https://drive.google.com/file/d/` + data.uploaded_doc + `/preview`; | |
} else { | |
var link = `https://docs.google.com/` + data.google_doc_type + `/d/`+ data.uploaded_doc + `/edit`; | |
} | |
var content = `<li class="dropdown-header">Open document in...</li> | |
<li> | |
<a style="cursor: pointer;" href="` + link + `" target="_blank"><i class="fa fa-google mr-2"></i> Google Doc</a> | |
</li> | |
<li class="divider"></li> | |
<li> | |
<a style="cursor: pointer;" href="https://drive.google.com/file/d/` + data.uploaded_doc + `/edit" target="_blank"><i class="fa fa-download mr-2"></i> Download</a> | |
</li>`; | |
$('.link_document_' + id).html(content); | |
$('.uploaded_doc_' + id).attr('style', 'display:inline'); | |
} else { | |
var content = `<li class="dropdown-header">Open document in...</li> | |
<li> | |
<a style="cursor: pointer;" href="https://docs.google.com/gview?url=`+ base_url + `uploaded_file/doc/` + data.uploaded_doc + `&embedded=true" target="_blank"><i class="fa fa-google mr-2"></i> Google Doc</a> | |
</li> | |
<li> | |
<a style="cursor: pointer;" href="https://view.officeapps.live.com/op/view.aspx?src=`+ base_url + `uploaded_file/doc/` + data.uploaded_doc + `" target="_blank"><i class="fa fa-windows mr-2"></i> Ms. Office Online</a> | |
</li> | |
<li class="divider"></li> | |
<li> | |
<a style="cursor: pointer;" href="` + base_url + `uploaded_file/doc/` + data.uploaded_doc + `" target="_blank"><i class="fa fa-download mr-2"></i> Download</a> | |
</li>`; | |
$('.link_document_' + id).html(content); | |
$('.uploaded_doc_' + id).attr('style', 'display:inline'); | |
} | |
} | |
if (data.worksheet_id != 0) { | |
$('.assessment' + id).attr('href', base_url + 'profile/worksheet/' + data.worksheet_id).show(); | |
} | |
$('.play-video').magnificPopup({ | |
type: 'iframe', | |
midClick: true | |
}); | |
} | |
}); | |
} | |
function entryUpdateEmbedVideo(id) { | |
var entryContent = ` | |
<tr id="entryUpdateEmbedVideo`+ id + `" > | |
<td colspan='3'> | |
<div class="form-inline p-2"> | |
<div class="form-group mb-2" style="width: 100%"> | |
<input type="text" class="form-control input_style1_black subsection" id="embed_video`+ id + `" | |
placeholder="Copy link youtube or vimeo here..." style="width: 50%" /> | |
<a style="cursor: pointer; text-decoration: none;" | |
class="text-success-active fs26 ml-2 updateEmbedVideo`+ id + `"><i | |
class="fa fa-check-circle-o"></i></a> | |
<a style="cursor: pointer; text-decoration: none;" | |
class="text-danger-active fs26 ml-2 cancelUpdateEmbedVideo`+ id + `"><i | |
class="fa fa-times-circle-o"></i></a> | |
<span class="text-danger fs20 ml-3 msg-embed"></span> | |
</div> | |
</div> | |
</td> | |
</tr> | |
`; | |
var selector = $('#lectureRecord' + id); | |
$(entryContent).insertAfter(selector); | |
$('.updateEmbedVideo' + id).click(function (e) { | |
e.preventDefault(); | |
if ($('#embed_video' + id).val() == '') { | |
swal("Please fill the field", { | |
icon: "warning", | |
}); | |
} else { | |
$.ajax({ | |
type: 'POST', | |
url: base_url + 'lesson/updateVideo', | |
data: { | |
id: id, | |
uploaded_video: $('#embed_video' + id).val(), | |
type: 'embed' | |
}, | |
dataType: 'json', | |
success: function (res) { | |
if (res.msg == 'success') { | |
$('#entryUpdateEmbedVideo' + id).remove(); | |
toastr.success('Link has been saved'); | |
getSectionUpdateDetail(id); | |
} | |
} | |
}); | |
} | |
}); | |
$('.cancelUpdateEmbedVideo' + id).click(function (e) { | |
e.preventDefault(); | |
$('#entryUpdateEmbedVideo' + id).remove(); | |
}) | |
} | |
function addAssessment(id, subject, status) { | |
$('#lecture_id').val(id); | |
$('#assessment_status').val(status); | |
getWorksheetList($('#worksheet_id'), subject); | |
} | |
$(document).on('click', '#saveAssessmentBtn', function () { | |
var worksheet_id = $('#worksheet_id').val(); | |
if (worksheet_id == '') { | |
swal("Please, choose your worksheet!", { | |
icon: "warning", | |
}); | |
} else { | |
$.ajax({ | |
type: 'POST', | |
url: base_url + 'lesson/updateAssessment', | |
data: { | |
id: $('#lecture_id').val(), | |
worksheet_id: worksheet_id, | |
worksheet_status: $('#assessment_status').val() | |
}, | |
dataType: 'json', | |
success: function (res) { | |
if (res.msg == 'success') { | |
if ($('#assessment_status').val() == 'new') { | |
swal("Assessment has been added!", { | |
icon: "success", | |
}); | |
getSectionDetail($('#lecture_id').val()); | |
$('#modalAssessment').modal('toggle'); | |
} else { | |
swal("Assessment has been added!", { | |
icon: "success", | |
}); | |
getSectionUpdateDetail($('#lecture_id').val()); | |
$('#modalAssessment').modal('toggle'); | |
} | |
} | |
} | |
}); | |
} | |
}) | |
function playVideo(title, source, type, ext) { | |
$('#modalPlayVideo').modal('toggle'); | |
$('.lecture-title').html(title); | |
var videoContent; | |
if (type == 'embed') { | |
videoContent = ` | |
<iframe | |
src="`+ source + `" | |
frameborder="0" | |
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" style="width:100%; height: 500px;" | |
allowfullscreen> | |
</iframe> | |
`; | |
$('.panel-play-video').html(videoContent); | |
} else if (type == 'local') { | |
videoContent = ` | |
<video autoplay loop controls> | |
<source src="`+ base_url + `uploaded_file/video/` + source + `" type="video/` + ext + `"> | |
</video> | |
`; | |
$('.panel-play-video').html(videoContent); | |
} | |
} | |
function addAssignment() { | |
if ($('.assign_lesson_edit').html().length > 0) { | |
$('.assign_lesson_edit').children().appendTo('.assign_lesson_new'); | |
} | |
$('.hidden_assigned_student').remove(); | |
} | |
function editAssignment(lesson_id) { | |
if ($('.assign_lesson_new').html().length > 0) { | |
$('.assign_lesson_new').children().appendTo('.assign_lesson_edit'); | |
} | |
$('.hidden_assigned_student').remove(); | |
$('.list-lesson').fadeOut(250); | |
$('.form-edit-assignment').fadeIn(500); | |
$('#deassign_student_list').html(`<li class="list-group-item question_text helper_text">No students</li>`); | |
$('#assigned_student_list').html(`<li class="list-group-item question_text helper_text">No assigned student yet</li>`); | |
$('#lesson_id').val(lesson_id); | |
$.ajax({ | |
type: 'GET', | |
url: base_url + 'lesson/getUserClass/' + lesson_id, | |
dataType: 'json', | |
success: function (res) { | |
var class_list = ``; | |
const group = (data, parentID = 0) => { | |
return data.reduce((acc, node) => { | |
if (node.class_id === parentID) { | |
const children = group(data, node.id); | |
node.children = children.length > 0 ? children : undefined; | |
return [...acc, node]; | |
} | |
return acc; | |
}, []); | |
}; | |
function transStudent(user, target, parentId) { | |
return { | |
id: user.id, | |
label: user.fullname, | |
checked: checked(user, target, parentId ), | |
} | |
} | |
function transTutor(user, target, parentId) { | |
return { | |
id: user.id, | |
label: user.fullname, | |
class_id: user.class_id, | |
checked: checked(user, target, parentId ), | |
} | |
} | |
function checked(targets, inGroup, target) { | |
for (var a = 0; a < inGroup.length; a++) { | |
if(targets[a].class_id == target && targets[a].user_id == targets[x] .id){ | |
return 'checked'; | |
} | |
} | |
return false; | |
} | |
function renderCheckBox(label, id, checked, classes = '', width = '0') { | |
const checkAttr = checked ? 'checked' : ''; | |
return "<div class=\""+ classes +"\"style=\"padding-left:"+ width + "\">" + | |
"<span>" + label + | |
"</span><label class=\"container-filter\"> <input multi-check" | |
+ checkAttr | |
+ " type=\"checkbox\" id=\"" + id + | |
"\" class=\"checkbox_filter checkbox_filter_ws\" value=\"" + id + "\" /><span class=\"checkmark\"></span></label>" | |
+ "</div>" | |
} | |
function renderGroup(group, w1 = '10px', w2 = '20px', w3 = '25px') { | |
const sUl = "<ul class=\"list-group collapse\">" | |
const eUl = "</ul>" | |
const sli = "<li class=\"list-group-item\">" | |
const eli = "</li>" | |
const datas = [] | |
group.forEach((group) => { | |
datas.push(sli); | |
Object.entries(group).map(([key, val]) => { | |
if (Array.isArray(val)) { | |
const name = key === 'tutors' ? 'Tutor': 'Student' | |
const slim = val.map((val) => [sli, renderCheckBox(val.label, val.id, val.checked, undefined, w3), eli].join('')) | |
const data = [ | |
sli, | |
renderCheckBox("- " + name, name, false, 'group-title', w2), | |
sUl | |
] | |
data.push.call(data, slim.join('')) | |
data.push(eUl); | |
datas.push.call(datas, data.join('')); | |
} else { | |
const data = renderCheckBox(val.label, val.id, val.checked, 'group-title', w1) | |
datas.push(data, sUl); | |
} | |
}) | |
datas.push(eUl); | |
datas.push(eli); | |
}) | |
return datas | |
} | |
function fromatter(data) { | |
// data | |
const classes = data.class_list; | |
// data1 | |
const tutors = data.class_list_tutor; | |
// data2 | |
const students = data.class_list_student; | |
// data3 | |
const noTutors = data.no_class_list_tutor; | |
// data4 | |
const noStudents = data.no_class_list_student; | |
// data5 | |
const lesson_user = data.lesson_user; | |
// data6 | |
const lesson_class = data.lesson_class; | |
const formatted = classes.map((data) => ({ | |
root: { | |
id: data.class_id, | |
label: data.class_name, | |
}, | |
tutors: group(tutors, data.class_id).map((val) => transTutor(val, lesson_class, data.class_id)), | |
students: group(students, data.class_id).map((val) => transStudent(val, lesson_user, data.class_id)) | |
})) | |
formatted.unshift({ | |
root: { id: undefined, label: 'No Class'}, | |
tutors: noTutors.map((val) => transTutor(val, lesson_class, 'no_class')), | |
students: noStudents.map((val) => transStudent(val, lesson_user, 'no_class')) | |
}) | |
return formatted; | |
} | |
class_list = renderGroup(fromatter(res)).join(''); | |
$('#deassign_student_list').html(class_list); | |
document.addEventListener('change', function(ev) { | |
// do checkbox | |
if (ev.target.hasAttribute('multi-check')) { | |
for (let index = 0; index < ev.path.length; index++) { | |
const element = ev.path[index]; | |
if (element.nodeName === 'LI') { | |
if (element.children.length > 1) { | |
element.lastElementChild.classList.toggle('collapse') | |
} | |
break; | |
} | |
} | |
} | |
}) | |
$("body .class_check").each(function (d, j) { | |
var key = $(this).val(); | |
if($('.class_tutor_' + key + ':checked').length == 0 && $('.class_student_' + key + ':checked').length == 0) { | |
$('.class_id_' + key).prop("checked", false); | |
} else { | |
$('.class_id_' + key).prop("checked", true); | |
} | |
}); | |
$("body .each_student_class_no_class").each(function (d,j) { | |
if($(this).is(":checked")) { | |
$('.class_student_no_class').prop("checked", true); | |
} else { | |
$('.class_student_no_class').prop("checked", false); | |
} | |
}); | |
$("body .each_tutor_class_no_class").each(function (d,j) { | |
if($(this).is(":checked")) { | |
$('.class_tutor_no_class').prop("checked", true); | |
} else { | |
$('.class_tutor_no_class').prop("checked", false); | |
} | |
}); | |
} | |
}); | |
} | |
function studentViewed(lecture_title, lecture_id, module_type) { | |
$('.lecture-title').html(lecture_title); | |
$('#modalStudentList').modal('toggle'); | |
$.ajax({ | |
type: 'GET', | |
url: base_url + 'lesson/getStudentViewed/' + lecture_id, | |
dataType: 'json', | |
success: function (res) { | |
var data = res; | |
console.log(data); | |
var studentList = ``; | |
for (i = 0; i < data.length; i++) { | |
studentList += ` | |
<tr> | |
<td>`+ (i + 1) + `</td> | |
<td><img src="`+ base_url + `img/profile/user_placeholder.jpg" style="border-radius: 30px; height: 40px;"></td> | |
<td>`+ data[i].fullname + `</td> | |
<td>`+ data[i].date_viewed + `</td> | |
</tr> | |
`; | |
} | |
$('.table-student tbody').html(studentList); | |
$('.table-student').dataTable(); | |
} | |
}); | |
} | |
var gdriveType = ""; | |
var gdriveFileType = ""; | |
var updateFileGDrive = false; | |
// The Browser API key obtained from the Google API Console. | |
// Replace with your own Browser API key, or your own key. | |
var developerKey = 'AIzaSyDl09TpbtVZxJ2rCX-ebtprJVIZ8Blx8DQ'; | |
// var developerKey = 'AIzaSyBvO6ebKQZ-QA7_3Fgm3vROFrBlveNd88c'; | |
// The Client ID obtained from the Google API Console. Replace with your own Client ID. | |
var clientId = "970984330576-fm5d8p2d1dffksc2v8sqa6e6ons5ho8r.apps.googleusercontent.com" | |
// var clientId = "600974188866-d7473159cmo2ofoeu49881t0ctslnhps.apps.googleusercontent.com"; | |
// Replace with your own project number from console.developers.google.com. | |
// See "Project number" under "IAM & Admin" > "Settings" | |
var appId = "970984330576"; | |
// var appId = "600974188866"; | |
// Scope to use to access user's Drive items. | |
var scope = ['https://www.googleapis.com/auth/drive.file']; | |
var pickerApiLoaded = false; | |
var oauthToken; | |
// Use the Google API Loader script to load the google.picker script. | |
function loadPicker() { | |
gapi.load('auth', { | |
'callback': onAuthApiLoad | |
}); | |
gapi.load('picker', { | |
'callback': onPickerApiLoad | |
}); | |
} | |
function onAuthApiLoad() { | |
window.gapi.auth.authorize({ | |
'client_id': clientId, | |
'scope': scope, | |
'immediate': false | |
}, | |
handleAuthResult); | |
} | |
function onPickerApiLoad() { | |
pickerApiLoaded = true; | |
createPicker(); | |
} | |
function handleAuthResult(authResult) { | |
if (authResult && !authResult.error) { | |
oauthToken = authResult.access_token; | |
createPicker(); | |
} | |
} | |
// Create and render a Picker object for searching images. | |
function createPicker() { | |
if (pickerApiLoaded && oauthToken) { | |
if (gdriveType == 'video') { | |
var view = new google.picker.View(google.picker.ViewId.DOCS); | |
view.setMimeTypes("video/mp4,video/mpeg,video/mkv,video/flv"); | |
var picker = new google.picker.PickerBuilder() | |
.enableFeature(google.picker.Feature.NAV_HIDDEN) | |
.setAppId(appId) | |
.setOAuthToken(oauthToken) | |
.addView(view) | |
.addView(new google.picker.DocsUploadView()) | |
.setLocale('en') | |
.setDeveloperKey(developerKey) | |
.setCallback(pickerCallback) | |
.build(); | |
} else { | |
var picker = new google.picker.PickerBuilder() | |
.addViewGroup( | |
new google.picker.ViewGroup(google.picker.ViewId.DOCS). | |
addView(google.picker.ViewId.DOCUMENTS). | |
addView(google.picker.ViewId.SPREADSHEETS). | |
addView(google.picker.ViewId.PRESENTATIONS). | |
addView(google.picker.ViewId.PDFS)) | |
.enableFeature(google.picker.Feature.NAV_HIDDEN) | |
.setAppId(appId) | |
.setOAuthToken(oauthToken) | |
.addView(new google.picker.DocsUploadView()) | |
.setLocale('en') | |
.setDeveloperKey(developerKey) | |
.setCallback(pickerCallback) | |
.build(); | |
} | |
picker.setVisible(true); | |
} | |
} | |
// A simple callback implementation. | |
function pickerCallback(data) { | |
if (data.action == google.picker.Action.PICKED) { | |
var fileId = data.docs[0].id; | |
if (gdriveType == 'video') { | |
$.ajax({ | |
type: 'POST', | |
url: base_url + 'lesson/updateVideo', | |
data: { | |
id: $('#lecture_id').val(), | |
uploaded_video: fileId, | |
type: 'gdrive' | |
}, | |
dataType: 'json', | |
success: function (res) { | |
if (res.msg == 'success') { | |
toastr.success('Video has been saved'); | |
if (updateFileGDrive == true) { | |
getSectionUpdateDetail($('#lecture_id').val()); | |
} else { | |
getSectionDetail($('#lecture_id').val()); | |
} | |
Picker.setVisible(false); | |
} | |
} | |
}); | |
} else { | |
var google_doc_type = data.docs[0].serviceId; | |
if(google_doc_type == 'pres') { | |
google_doc_type = 'presentation'; | |
} else if(google_doc_type == 'spread') { | |
google_doc_type = 'spreadsheets'; | |
} else if(google_doc_type == 'doc') { | |
google_doc_type = 'document'; | |
} else if(google_doc_type == 'DoclistBlob') { | |
google_doc_type = 'pdf'; | |
} | |
$.ajax({ | |
type: 'POST', | |
url: base_url + 'lesson/uploadFile', | |
data: { | |
id: $('#lecture_id').val(), | |
uploaded_doc: fileId, | |
fileType: 'doc', | |
type: 'gdrive', | |
google_doc_type : google_doc_type | |
}, | |
dataType: 'json', | |
success: function (res) { | |
if (res.msg == 'success') { | |
toastr.success('Document has been saved'); | |
if (updateFileGDrive == true) { | |
getSectionUpdateDetail($('#lecture_id').val()); | |
} else { | |
getSectionDetail($('#lecture_id').val()); | |
} | |
Picker.setVisible(false); | |
} | |
} | |
}); | |
} | |
} | |
} | |
function showPickerDialog(id, type, updateStatus) { | |
gdriveType = type; | |
updateFileGDrive = updateStatus; | |
$('#lecture_id').val(id); | |
loadPicker(); | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
packages/staging/js/pages/lessons.js
packages/staging/application/views/lessons/tutor/assign_lesson.php