OLAS/app/views/local/managers/shared/annual_report.blade.php

@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>Perfomance by Learning Outcome Student</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);
                      div.append('<h3>'+course_code.code + ' '+ course_code.number+'</h3>')
                      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