Last active
March 1, 2019 18:50
-
-
Save bunlongheng/17a199d6b2df9893330e to your computer and use it in GitHub Desktop.
This file contains 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
'use strict'; | |
define(['jquery', 'moment'], function($, moment) { | |
$(function() { | |
// Teacher Report | |
var report_type_car = $('#as-report-type-car'); | |
var report_type_cdr = $('#as-report-type-cdr'); | |
var report_type_title = $('#as-report-type-title'); | |
var section_num = $('#as-section-num'); | |
var problem_set = $('#as-problem-set'); | |
var start_time = $('.as-start-time'); | |
var due_time = $('.as-due-time'); | |
var submit_am = $('#as-submit-am'); | |
var submit_total = $('#as-submit-total'); | |
var avg_score = $('#as-avgscore'); | |
var danger = $('.pc-danger'); | |
var warning = $('.pc-warning'); | |
var success = $('.pc-success'); | |
var total = $('.pc-total'); | |
var danger_list = $('.pc-danger-list'); | |
var warning_list = $('.pc-warning-list'); | |
var success_list = $('.pc-success-list'); | |
var student_am = $('#as-student-am'); | |
var student_total = $('#as-student-total'); | |
// Assignment SUmmary | |
var students_div = $('.as-students-div'); | |
var student_div = $('.as-student-div'); | |
var assignment_div = $('.as-assignment-div'); | |
// Student Report | |
var student_name = $('#as-student-name'); | |
//SE Report Nav | |
var btn_ap = $('#btn-ap'); | |
var btn_std = $('#btn-std'); | |
var btn_rmd = $('#btn-rmd'); | |
// Percent Piechart | |
var percent_item = $('.percent-item'); | |
var percent_skill = $('.percent-skill'); | |
var student_data = $('.student-data'); | |
var href = location.href; | |
var lastSegment = window.location.pathname.split('/').pop(); | |
var segmentArray = window.location.pathname.split('/'); | |
var s3 = segmentArray[3]; | |
var s4 = segmentArray[4]; | |
var s5 = segmentArray[5]; | |
var segment4Array = s4.split('-'); | |
//------------------------------------------------------------------------------------------------------ | |
function parseUrl(url) { | |
var urlParamSplit = url.split("?"); | |
if (urlParamSplit.length !== 2) { | |
return "InvalidUrlNoParamsSet"; | |
} | |
var paramsList = urlParamSplit[1].split("&"); | |
if (paramsList.length < 1) { | |
return "InvalidUrlNoParamsFound"; | |
} | |
var paramsObj = {}; | |
paramsList.forEach(function(item) { | |
var keyValueArray = item.split("="); | |
paramsObj[keyValueArray[0]] = keyValueArray[1]; | |
}); | |
return paramsObj; | |
} | |
var params = parseUrl(href); | |
//------------------------------------------------------------------------------------------------------ | |
function removeParam(key, url) { | |
var rtn = url.split("?")[0], | |
param, | |
params_arr = [], | |
queryString = (url.indexOf("?") !== -1) ? url.split("?")[1] : ""; | |
if (queryString !== "") { | |
params_arr = queryString.split("&"); | |
for (var i = params_arr.length - 1; i >= 0; i -= 1) { | |
param = params_arr[i].split("=")[0]; | |
if (param === key) { | |
params_arr.splice(i, 1); | |
} | |
} | |
rtn = rtn + "?" + params_arr.join("&"); | |
} | |
return rtn; | |
} | |
//------------------------------------------------------------------------------------------------------ | |
function getReportTitle() { | |
var newTitle = segment4Array[0] + " " + segment4Array[1]; | |
return newTitle; | |
} | |
getReportTitle(); | |
//------------------------------------------------------------------------------------------------------ | |
function hightlightReportTab() { | |
if (s3 === 'reports') { | |
$('#reports').addClass("selected"); | |
} | |
} | |
hightlightReportTab(); | |
//------------------------------------------------------------------------------------------------------ | |
function updateReportHeaderBaseOnURL() { | |
if (s5 === 'student') { | |
percent_skill.detach(); | |
percent_item.detach(); | |
assignment_div.hide(); | |
student_div.show(); | |
students_div.hide(); | |
console.log('Run'); | |
} else if (s5 === 'assignment') { | |
btn_ap.removeClass('hidden'); | |
btn_rmd.removeClass('hidden'); | |
btn_ap.addClass('rn-btn-active'); | |
percent_skill.detach(); | |
student_data.detach(); | |
student_div.hide(); | |
students_div.show(); | |
assignment_div.show(); | |
} else if (s5 === 'remediation') { | |
btn_ap.removeClass('hidden'); | |
btn_rmd.removeClass('hidden'); | |
btn_rmd.addClass('rn-btn-active'); | |
percent_item.detach(); | |
student_data.detach(); | |
student_div.hide(); | |
students_div.show(); | |
assignment_div.show(); | |
} else { //Standard | |
btn_rmd.addClass('hidden'); | |
btn_ap.removeClass('hidden'); | |
btn_std.removeClass('hidden'); | |
btn_std.addClass('rn-btn-active'); | |
percent_item.detach(); | |
student_data.detach(); | |
student_div.hide(); | |
students_div.show(); | |
assignment_div.show(); | |
} | |
} | |
updateReportHeaderBaseOnURL(); | |
//------------------------------------------------------------------------------------------------------ | |
function updateReportNavCourseBenchmark() { | |
if (s4 === 'course-benchmark') { | |
btn_rmd.addClass('hidden'); | |
$('.report-nav').removeAttr('style'); | |
if( s5 === 'assignment' || s5 === 'standard' ) { | |
btn_ap.removeClass('hidden'); | |
btn_std.removeClass('hidden'); | |
} | |
else { | |
btn_ap.addClass('hidden'); | |
btn_std.addClass('hidden'); | |
} | |
} | |
} | |
updateReportNavCourseBenchmark(); | |
//------------------------------------------------------------------------------------------------------ | |
function mapReportNavBtn() { | |
btn_ap.click(function() { | |
$(this).attr('href', href.replace(s5, 'assignment')); | |
}); | |
btn_std.click(function() { | |
$(this).attr('href', href.replace(s5, 'standard')); | |
}); | |
btn_rmd.click(function() { | |
$(this).attr('href', href.replace(s5, 'remediation')); | |
}); | |
} | |
mapReportNavBtn(); | |
//------------------------------------------------------------------------------------------------------ | |
function setAjaxEndpointTemp() { | |
if (s5 === 'standard') { | |
lastSegment = 'benchmark'; | |
} | |
// if (s4 === 'chapter-summary') { | |
// lastSegment = 'chapter'; | |
// } | |
} | |
setAjaxEndpointTemp(); | |
//------------------------------------------------------------------------------------------------------ | |
// AJAX | |
function getReportable() { | |
var $data = { | |
assessmentId: params.assessmentId, | |
classroomId: params.classroomId, | |
}; | |
return $.ajax({ | |
data: $data, | |
dataType: 'json', | |
type: 'POST', | |
url: '/BIM/rest/assessment/reportable' | |
}); | |
} | |
function getHeaderReportData() { | |
var $data = {}; | |
if( params !== undefined){ | |
$data.assessmentId = params.assessmentId; | |
$data.classroomId = params.classroomId; | |
$data.studentId = params.userId; | |
$data.courseContentId = params.courseContentId; | |
} | |
console.log($data); | |
return $.ajax({ | |
data: $data, | |
dataType: 'json', | |
type: 'POST', | |
url: '/BIM/rest/report/' + lastSegment, | |
}); | |
} | |
//------------------------------------------------------------------------------------------------------ | |
var reportablePromise = getReportable(); | |
reportablePromise.then(function(students) { | |
// Populate the class-view dropdown-menu | |
$.each(students, function(i, v) { | |
var firstName = v.firstName; | |
var lastName = v.lastName; | |
var userId = v.userId; | |
var name = firstName + " " + lastName; | |
// Auto Populate the dropdown-menu | |
$('#rn-dd').append( | |
'<option value="' + userId + '">' + name + '</option>'); | |
}); | |
// Set the default value of dropdown-menu base on the URL param | |
if (params.userId) { | |
$('#rn-dd').val(params.userId); | |
} | |
// Dropdown-menu change - redirect to the proper URL | |
$('#rn-dd').on('change', function() { | |
var userIdVal = $('option:selected', $(this)).val(); | |
var selectedVal = $(this).val(); | |
var cleanURL; | |
if (selectedVal === "class-view") { | |
cleanURL = removeParam("userId", href); | |
var assignmentHref = cleanURL.replace(s5, 'assignment'); | |
location.href = assignmentHref; | |
} else { | |
cleanURL = removeParam("userId", href); | |
var studentHref = cleanURL.replace(s5, 'student') + "&userId=" + userIdVal; | |
location.href = studentHref; | |
} | |
}); | |
// Disable a certain dropdown-menu | |
$.each(students, function(i, v) { | |
var userId = v.userId; | |
var reportable = v.reportable; | |
$('#rn-dd option[value="' + userId + '"]').prop('disabled', !reportable); | |
}); | |
}); | |
//------------------------------------------------------------------------------------------------------ | |
var headerReportDataPromise = getHeaderReportData(); | |
headerReportDataPromise.then(function(objects) { | |
console.log(objects); | |
function updateAssignmentSummary(x) { | |
var header = objects.assignments[x].header; | |
var name = objects.assignments[x].name; | |
var car, cdr, report_type_full; | |
// Check for space in report_type | |
if (header.report_type.indexOf(' ') >= 0) { | |
if (getReportTitle() === "section exercise") { | |
report_type_full = header.report_type.split(/(\s+)/); | |
car = report_type_full[0]; | |
cdr = report_type_full[2]; | |
} else { | |
report_type_full = getReportTitle().split(" "); | |
car = report_type_full[0]; | |
cdr = report_type_full[1]; | |
} | |
report_type_car.html(car.toUpperCase()); | |
report_type_cdr.html(cdr.toUpperCase()); | |
if (header.section_num !== null) { | |
report_type_title.html(car + " " + cdr + " " + header.section_num); | |
} else { | |
report_type_title.html(car + " " + cdr + " "); | |
$('.section').css({ | |
'line-height': '19px', | |
'min-height': '115px', | |
'padding-top': '36px' | |
}); | |
$('.sa-h5').css({ | |
'font-size': '11px' | |
}); | |
} | |
} else { | |
car = header.report_type; | |
report_type_car.html(car); | |
report_type_title.html(car + " " + header.section_num); | |
} | |
section_num.html(header.section_num); | |
problem_set.html(header.problem_set); | |
// Hide any date if default dropdown = summary | |
if (name === "Summary") { | |
start_time.html(" "); | |
due_time.html(" "); | |
$("#as-due-time-div").hide(); | |
$("#as-start-time-div").hide(); | |
} else { | |
$("#as-due-time-div").show(); | |
$("#as-start-time-div").show(); | |
start_time.html(moment(parseInt(header.start_time)).format("MM/DD/YYYY h:mm A")); | |
due_time.html(moment(parseInt(header.due_time)).format("MM/DD/YYYY h:mm A")); | |
} | |
if (s5 === 'student') { | |
if (objects.hasOwnProperty('students') !== false) { | |
var students = objects.students[0]; | |
student_name.html(students.firstName + " " + students.lastName); | |
} | |
} | |
student_am.html(header.student_am); | |
student_total.html(header.student_total); | |
submit_am.html(header.submit_am); | |
submit_total.html(header.submit_total); | |
avg_score.html(header.avg_score); | |
danger.html(header.danger); | |
warning.html(header.warning); | |
success.html(header.success); | |
total.html(header.danger + header.warning + header.success); | |
danger_list.html(header.danger_list); | |
warning_list.html(header.warning_list); | |
success_list.html(header.success_list); | |
} | |
function updatePercentPieChart() { | |
var data = {}; | |
var chart = new google.visualization.PieChart(document.getElementById('piechart')); | |
var options = { | |
width: 160, | |
height: 160, | |
chartArea: { | |
left: 10, | |
top: 20, | |
width: "100%", | |
height: "100%" | |
}, | |
colors: ['#F46E4E', '#F9C262', '#ADB55E', ], | |
legend: 'none', | |
enableInteractivity: false, | |
pieSliceText: 'none', | |
}; | |
// Gather all the data | |
$.each(objects.assignments, function(i, v) { | |
var header = v.header; | |
var total = header.danger + header.warning + header.success; | |
var dangerPercent, warningPercent, successPercent; | |
if (total === 0) { | |
dangerPercent = 100; | |
warningPercent = 0; | |
successPercent = 0; | |
} else { | |
dangerPercent = (header.danger / total) * 100; | |
warningPercent = (header.warning / total) * 100; | |
successPercent = (header.success / total) * 100; | |
} | |
data[i] = new google.visualization.arrayToDataTable([ | |
['Piechart', 'Number of Skills'], | |
['danger', dangerPercent], | |
['warning', warningPercent], | |
['success', successPercent], | |
]); | |
}); | |
// Populate the dropdown-menu | |
$.each(objects.assignments, function(i, v) { | |
var name = v.name; | |
var assignmentId = v.assignmentId; | |
var studentAssignmentId = v.studentAssignmentId; | |
// Assignment and Remediation reports take an assignmentId; student reports take a studentAssignmentId. | |
// Using the same dropdown for both cases means sometimes we want it to indicate an assignmentId and | |
// sometimes a studentAssignmentId. This could be improved, but at least it works. | |
var idOfChoice; | |
if (assignmentId) { | |
idOfChoice = assignmentId; | |
} else { | |
idOfChoice = studentAssignmentId; | |
} | |
// Auto Populate the dropdown-menu | |
$("#as-dd.dropdown").append('<option value="' + idOfChoice + '">' + name + '</option>'); | |
// Dropdown-menu change | |
$('#as-dd').on('change', function() { | |
var i = $('option:selected', $(this)).index(); | |
updateAssignmentSummary(i); | |
chart.draw(data[i], options); | |
}); | |
}); | |
// Initializing | |
updateAssignmentSummary("0"); | |
chart.draw(data[0], options); | |
} | |
// Load the Visualization API and the piechart package. | |
google.load("visualization", "1", { | |
packages: ["corechart"] | |
}); | |
google.setOnLoadCallback(updatePercentPieChart()); | |
}); | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment