@extends('layouts.master-2')
@section('navigation')
@if (Auth::user()->role == 1)
@include('local.managers.admins._navigation')
@elseif(Auth::user()->role == 2)
@include('local.managers.sCoords._navigation')
@elseif(Auth::user()->role == 3)
@include('local.managers.pCoords._navigation')
@elseif(Auth::user()->role == 4)
@include('local.professors._navigation')
@endif
@stop
@section('main')
{{-- TODO: look where to place this script.
if placed inside .ready() or before it,
an error that the function is not defined occurs. --}}
{{-- TODO: no reconoce acentos --}}
<div class="row">
<div class="col-md-3">
<select class="form-control selectpicker" id="annual_plan" onchange="fetchInfo('annual_plan')">
<option value='0'> Nothing Selected</option>
@foreach ($annual_plans as $an_plan)
<option value={{ $an_plan->annual_id }}>Plan {{ $an_plan->academic_year }}</option>
@endforeach
</select>
<br>
<div id='allOutcomes'>
</div>
</div>
<div class="col-md-9">
<div id="outcome-display" class="panel panel-default">
<div class="panel-heading">
<h4 class=" panel-title" style="cursor:auto!important;">
Primer Semestre 2019-2020
</h4>
</div>
<div class="panel-body">
<div id='outcomeInfo'>
</div>
<div id="tableOutcome">
</div>
<ul id="levelTabs" class="nav nav-tabs" role="tablist">
</ul>
<div id="allLists" class="tab-content">
</div>
<!-- <div class="table-responsive">
<table class="table table-striped table-condensed datatable" style="table-layout: fixed ; width : 100%">
<thead><tr><th>Objectives for courses</th><th>Criteria per Course</th><th>Transformative Actions</th></tr></thead>
<tbody>
</tbody>
</table>
</div>-->
</div>
</div>
</div>
<div class="col-md-9">
<div class="no-outcome alert alert-info">
<p>Select a Learning Outcome to view its information</p>
</div>
</div>
</div>
<script>
function nextChar(c) {
return String.fromCharCode(c.charCodeAt(0) + 1);
}
changed = false;
$(document).ready(function() {
// --------------------------------------------------------------------------
// Page load
// --------------------------------------------------------------------------
// Hide accordion panel contents by default
$('.panel-group .panel-body').hide();
$('#outcome-display').parent().hide();
// --------------------------------------------------------------------------
// Functions
// --------------------------------------------------------------------------
// --------------------------------------------------------------------------
// Events
// --------------------------------------------------------------------------
// When list item is clicked, load corresponding info
});
function fetchEverything(li) {
var outcome_id = $(li).data('outcome-id');
var name = $(li).data('outcome-name');
var semester_id = $(li).data('semester-id');
var annual_plan_id = $(li).data('annual-plan');
$('#theChange').data('annual-plan', annual_plan);
$.post(
"{{ URL::action('AnnualPlansController@fetchReportWithOutcome') }}", {
semester_id: semester_id,
outcome_id: outcome_id,
program_id: {{ $program->id }},
annual_plan_id: annual_plan_id
},
function(outcome) {
if (outcome.objectives) {
$('table').show();
$('#outcome-display').parent().show();
$('#outcome-display .panel-title').html(name);
$('#allLists').empty();
$('#levelTabs').empty();
$('.no-outcome').hide();
var outcomeHTML = "<h4>Performance of Students by Learning Outcome</h4>" +
'<h5 style = "display: inline; margin:30px;">Target by outcome: </h5>' +
'<p style = "display: inline;"> <i>>= ' + outcome.expected_outcome +
' of the attempts</i>' + '</p>' +
'<br><h5 style = "display: inline; margin:30px;">Expected percent of students achieving the target by outcome: </h5>' +
'<p style = "display: inline;"> <i>' + outcome.outcome_program_goal + '</i></p>';
$('#outcomeInfo').html('<p class="outcome-definition">' + outcome.definition + '</p>' +
outcomeHTML);
//theStudentOutcomeTable = $("<table/>");
//theStudentOutcomeTable.hide();
///$('#outcomeInfo').append(theStudentOutcomeTable);
wholeDict = {};
tableStudent = $('<table/>', {
'class': 'table table-striped table-condensed datatable'
});
tableStudent.html('<thead><tr>' +
'<th>Student</th>' +
'<th>Criteria Attempted</th>' +
'<th>Criteria Achieved</th>' +
'<th>Percentage</th>' +
'<th>Outcome Achieved</th>' +
'</tr></thead><tbody></tbody>');
$.each(outcome.objectives, function(index, objective) {
li = $('<li/>', {
'role': 'presentation'
});
a = $('<a/>', {
'data-toggle': 'tab',
'href': '#' + objective.id,
'role': 'tab'
}).html('Objective ' + (index + 1));
li.append(a);
$('#levelTabs').append(li);
objective_title = "<h3>" + objective.text + '</h3>';
div = $('<div/>', {
'role': 'tabpanel',
'class': 'tab-pane',
'id': objective.id
}).html(objective_title);
div.appendTo($('#allLists'))
if (objective.courses) {
$.each(objective.courses, function(index, course_code) {
if (course_code.criteria.length) {
$.each(course_code.students, function(index, student) {
if (wholeDict[student.student_id] === undefined) {
wholeDict[student.student_id] = {
'student': student.student_id,
'criteria_attempted': 0,
'criteria_achieved': 0
}
}
wholeDict[student.student_id][
"criteria_attempted"] += student
.criteria_attempted;
wholeDict[student.student_id][
"criteria_achieved"] += student
.criteria_achieved;
});
div.append(
'<p>The following results are from the courses in the selected semester with the focused criteria in the selected annual plan</p>'
);
table = $('<table/>', {
'class': 'table table-striped table-condensed datatable'
}).html('<thead><th>Criterion</th><th>' +
'Number of Students Assessed </th>' +
'<th>Number of students that achieved the target</th></thead>'
);
tbody = $('<tbody/>')
$.each(course_code.criteria, function(index, criterion) {
tr = $('<tr/>').append(
"<td>" + criterion.name + "</td>" +
"<td>" + criterion.criteria_attempted +
"</td>" +
"<td>" + criterion.criteria_achieved +
"</td>"
);
tbody.append(tr);
});
table.append(tbody);
Course_and_transformative = '<h3>' + course_code.code + ' ' +
course_code.number + '</h3><hr>';
if (course_code.transforming_actions.length) {
Course_and_transformative +=
'<h5> This course was tied to the following transformative actions</h5>';
Course_and_transformative += '<ol>';
$.each(course_code.transforming_actions, function(index,
transformative_action) {
Course_and_transformative += '<li><p><strong>' +
transformative_action.at_text +
'</strong>: ' + transformative_action
.description + '</p></li>'
})
}
div.append(Course_and_transformative)
div.append(table);
table.DataTable();
}
})
} else {
div.append('<div class="no-outcome alert alert-info"' +
'<p>No Course in plan has assessed yet</p>' +
'</div>')
}
})
theArray = [];
$('#tableOutcome').html(tableStudent);
//tableStudent.appendTo($('#outcomeInfo'));
tableStudent = tableStudent.DataTable({
dom: 'Bfrtip',
buttons: [
'csv', 'excel', 'pdf', 'print'
]
});
students_attempted = 0;
students_achieved = 0;
$.each(wholeDict, function(key, dict) {
if (dict.criteria_attempted) {
students_attempted += 1;
percentage = ((dict.criteria_achieved / dict.criteria_attempted) * 100).toFixed(
2);
if (parseFloat(percentage) >= parseFloat(outcome.expected_outcome)) {
achieved = "Yes"
students_achieved += 1;
} else achieved = "No"
} else {
percentage = "N/A"
achieved = "N/A"
}
tableStudent.row.add([
dict.student,
dict.criteria_attempted,
dict.criteria_achieved,
percentage,
achieved
]);
})
tableStudent.draw();
if (students_attempted) {
studentPercentage = ((students_achieved / students_attempted) * 100).toFixed(2);
if (studentPercentage >= outcome.outcome_program_goal) {
FinalReport = "<br><p><strong>The students achieved the Learning Outcome with " +
studentPercentage + "% of students achieving.</strong></p>";
} else {
FinalReport = "<br><p><strong>The students did not achieve the Learning Outcome with " +
studentPercentage + "% of students achieving.</strong></p>";
}
}
$("#outcomeInfo").append(FinalReport)
/* table.row.add([
objectivesHTML,
courseshtml,
courseTAhtml
]);
table.draw();
*/
} else {
$('table').hide();
}
}
);
}
function posttoTransAnnual(annual_id, selectTransId, typ_course_id) {
ta = $("#" + selectTransId).val();
old_ta = $("#" + selectTransId).data('old-TA');
if (ta == "0") return;
$.post("../annual-plan-postTA", {
annual_id: annual_id,
TA_id: ta,
typ_course_id: typ_course_id,
old_ta: old_ta
},
function(message) {
$("#" + selectTransId).data('old-TA', ta);
}
)
}
function addTAselect(options, master_div, annual_plan_id, objective_id, typ_course_id, selected_ta) {
var $div = $('<div/>', {
'class': 'form-group '
});
counter = parseInt($('#' + master_div).data('amount-ta'));
var selectTA = $('<select/>', {
'class': "selectpicker form-control",
'data-live-search': 'true',
'data-old-TA': '0',
'data-width': '180px',
'id': 'transformativeForObjective' + master_div + '_' + counter,
'onchange': 'posttoTransAnnual(' + annual_plan_id + ', "transformativeForObjective' + master_div +
'_' + counter + '", ' + typ_course_id + ')'
});
selectTA.append(options);
selectTA.appendTo($div);
selectTA.val(selected_ta);
selectTA.data('old-TA', selected_ta);
selectTA.selectpicker('refresh');
$span = $('<span/>', {
'id': 'close',
'onclick': ' postDeleteTA(' + annual_plan_id + ', "transformativeForObjective' + master_div + '_' +
counter + '", ' + typ_course_id +
'); this.parentNode.parentNode.removeChild(this.parentNode);return false;'
}).html('x');
$span.appendTo($div);
$div.append("<br><br>");
$('#' + master_div).append("<br>");
$div.appendTo($('#' + master_div));
$('#' + master_div).data('amount-ta', counter + 1);
}
function postDeleteTA(annual_id, selectTransId, typ_course_id) {
ta = $("#" + selectTransId).val();
if (ta == "0") return;
$.post("../annual-plan-deleteTA", {
annual_id: annual_id,
TA_id: ta,
typ_id: typ_course_id,
});
parent = $("#" + selectTransId).parent().parent().parent();
counter = parseInt(parent.data('amount-ta'));
parent.data('amount-ta', counter - 1);
}
function postToAnnualPlans(typ_course_id, criteria_select) {
var criteria = $('#' + criteria_select).val();
var oldCriteria = $('#' + criteria_select).data('old-criteria');
var criteriaNode = document.getElementById(criteria_select).parentNode.parentNode.parentNode;
var annual = criteriaNode.dataset.annualPlan;
$.post("../annual-plan-postOnChange", {
criteria: criteria,
typ_course_id: typ_course_id,
annual_plan: annual,
old_criteria: oldCriteria
},
function(message) {
if (message == "Duplicate entry, please choose another criteria.") {
alert(message)
} else {
$('#' + criteria_select).data('old-criteria', criteria);
changed = true;
}
})
}
function addCriteriaTest(div, new_id_for_select, typ_course_id, i = null, options) {
if (!i) amount_select = $('#' + div).data("amount-select");
else amount_select = i;
$select = $('<select/>', {
'class': "selectpicker form-control",
'data-live-search': 'true',
'data-old-criteria': '0',
'data-width': '180px',
'id': 'criteriaFor' + new_id_for_select + '_' + amount_select,
'onchange': 'postToAnnualPlans(' + typ_course_id + ', "criteriaFor' + new_id_for_select + '_' +
amount_select + '")'
})
var $div = $('<div/>', {
'id': 'courseSelect_' + new_id_for_select + '_' + amount_select,
'class': 'form-group '
});
$select.append(options);
$select.appendTo($div);
$span = $('<span/>', {
'id': 'close',
'onclick': ' postDelete(' + typ_course_id + ', "criteriaFor' + new_id_for_select + '_' +
amount_select + '"); this.parentNode.parentNode.removeChild(this.parentNode);return false;'
}).html('x');
$div.append($span);
$div.append("<br><br>")
$('#' + div).append("<br>");
$div.appendTo($("#" + div));
$select.selectpicker('refresh');
$("#" + div).data("amount-select", amount_select + 1);
}
$('#allOutcomes').hide();
function postDelete(typ_course_id, criteria_select) {
var criteria = $('#' + criteria_select).val();
var oldCriteria = $('#' + criteria_select).data('old-criteria');
var criteriaNode = document.getElementById(criteria_select).parentNode.parentNode.parentNode;
var annual = criteriaNode.dataset.annualPlan;
$.post("../annual-plan-deleteCriteria", {
criteria: criteria,
typ_course_id: typ_course_id,
annual_plan: annual,
old_criteria: oldCriteria
});
}
function fetchInfo(id) {
annual_id = $("#" + id).val();
program_id = {{ $program->id }};
$.post("{{ URL::action('AnnualPlansController@fetchInfo') }}", {
id: annual_id,
program_id: program_id
},
function(json) {
div = $('<div/>', {
'class': 'list-group',
'id': 'list'
});
header5 = $('<h5/>', {
'style': "padding-left: 10px"
}).html("First Semester");
div.append(header5);
list = '';
for (outcome in json.outcomes.first) {
list +=
"<li style='padding-left: 25px' onclick = 'fetchEverything(this)' data-annual-plan = '" +
json.annual_plans.id + "' data-semester-id = '" + json.allSemesterOrder.first.id +
"' data-outcome-id='" + json.outcomes.first[outcome].id + "' data-outcome-name ='" + json
.outcomes.first[outcome].name + "' class='list-group-item' >" + json.outcomes.first[outcome]
.name + " </li>";
}
div.append(list);
header4 = $('<h5/>', {
'style': "padding-left: 10px"
}).html("Second Semester");
div.append(header4);
list = '';
for (outcome in json.outcomes.second) {
list +=
"<li style='padding-left: 25px' onclick = 'fetchEverything(this)' data-annual-plan = '" +
json.annual_plans.id + "' data-semester-id = '" + json.allSemesterOrder.second.id +
"' data-outcome-id='" + json.outcomes.second[outcome].id + "' data-outcome-name ='" + json
.outcomes.second[outcome].name + "' class='list-group-item' >" + json.outcomes.second[
outcome].name + " </li>";
}
div.append(list);
html = div[0].innerHTML;
$("#allOutcomes").html(div[0].innerHTML);
$("#allOutcomes").show();
},
"json",
);
}
function deleteObjective(objectiveSelectDiv, closeObj) {
$('#' + objectiveSelectDiv).remove();
$('#' + closeObj).remove();
$('#' + div).data("amount-select", $('#' + div).data("amount-select") - 1);
}
</script>
@stop
@section('included-js')
@include('global._datatables_js')
@stop