Skip to content

Instantly share code, notes, and snippets.

@bunlongheng

bunlongheng/report-header.js

Last active March 1, 2019 18:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bunlongheng/17a199d6b2df9893330e to your computer and use it in GitHub Desktop.
Save bunlongheng/17a199d6b2df9893330e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
report-header.js
'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