OLAS/app/views/local/managers/shared/annual-plans.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">
            <a role="button" class="btn btn-secondary"
                href="{{ URL::action('AnnualPlansController@viewAllPlans', [$program->id]) }}">View Plans</a>

            <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->id }}>Plan {{ $an_plan->academic_year }}</option>

                @endforeach
            </select>
            <br>



            <div id='allOutcomes'>

            </div>
        </div>


        <div class="col-md-9">
            <div id="expected-outcome" class="panel panel-default" data-semester-id="">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        Expected Target Outcomes
                    </h3>
                    <input style="width: 150px;" min="0" class="form-control" type="number">
                </div>
            </div>
            <div id="outcome-display" class="panel panel-default">
                <div class="panel-heading">
                    <h4 class=" panel-title">
                        Primer Semestre 2019-2020
                    </h4>
                </div>
                <div class="panel-body">
                    <p class="outcome-definition "></p>
                    <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>
    <div class="modal fade" id="modal-view-objective">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h3 class="modal-title"></h3>
                </div>
                <div class="modal-body">
                   
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <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();

            $('.panel-group .panel-body').hide();

            $('#outcome-display').parent().hide();

            // --------------------------------------------------------------------------
            // Functions
            // --------------------------------------------------------------------------

            // --------------------------------------------------------------------------
            // Events
            // --------------------------------------------------------------------------

            // When list item is clicked, load corresponding info


        });
        //   function CreateOrEdit(id){
        //   //send data to the database
        //   console.log(id);
        //   annual_id = $("#"+id);
        //   console.log(console.log(annual_id));
        // }

        function fetchObjectiveInfo(objective_div){
            typ_objective_id = $(objective_div).data('typ-objective-id');
            objective =  $(objective_div).html();
            
            $.ajax({
        type: 'POST',
        url: "{{ URL::action('AnnualPlansController@fetchObjectiveInfo') }}",
        data: {
            typ_objective_id: typ_objective_id
        },
        success: function(courses)
        {
            
            $('.modal-title').html(objective);
            descriptions = '';
            $('.modal-body').empty();
            $.each(courses, function(index, course){

                $('.modal-body').append('<h4>'+course.code+' '+course.number+': '+course.name+'</h4>')
                $('.modal-body').append('<br><p>The following course is tied to these criteria: </p>')
                $.each(course.criteria, function(index,criterion){
                    criterion_html = '<h5 style ="text-indent: 15px;">'+(index+1)+'. '+criterion.name+'</h5>';
                    table = $('<table>', {
                        'style':'margin-left:15px',
                        //'id':'criteria-'+criterion.id,
                        'class':"table table-striped table-condensed table-bordered"
                    });
                    thead = $('<thead/>');
                    tr = $('<tr/>');
                    for(i=0; i<criterion.num_scales;i++){
                        minimumScore = 1+(i*(criterion.max_score/criterion.num_scales));
                maximumScore = (1+i)*(criterion.max_score/criterion.num_scales);
                th = '<th>Scale '+(i+1)+'. ('+minimumScore+' - '+maximumScore+')</th>';
                tr.append(th);
                    }
                    thead.append(tr);
                    table.append(thead);
                    tbody = $('<tbody>')
                    tr_for_body = $('<tr>', {
                        'id':'criterion_'+criterion.id
                    })
                    td_for_criteria = '';
                    $.each(criterion.scales, function(index, scale){
                    
                    td_for_criteria += '<td>'+scale.description+'</td>';
                });
                tr_for_body.html(td_for_criteria);
                    tbody.append(tr_for_body);
                    table.append(tbody);
                    $('.modal-body').append(criterion_html);
                    $('.modal-body').append(table);
                })
                
                $('.modal-body').append('<hr>')
            });
            
           

            $('#modal-view-objective').modal();

        },
        async:true
    });
    
}

        function fetchEverything(li) {
            var id = $(li).data('outcome-id');
            var name = $(li).data('outcome-name');
            var semester = $(li).data('semester-id');
            var annual_plan = $(li).data('annual-plan');
            $('#expected-outcome').data('semester-id', semester);



            $('#theChange').data('annual-plan', annual_plan);
            $.post(
                "../annual-plan-fetchTYP/{{ $program->id }}", {
                    id: id,
                    semester: semester
                },

                function(json) {



                    var table = $('.datatable').DataTable();

                    table.clear();

                    var optionsForTADict = {};




                    var objectives = json.objectives;
                    var courses = json.courses;
                    var criteria = json.criteria;
                    var selected_criteria = json.selected_criteria;
                    var nextLetter = "A";
                    if (courses) {
                        $('table').show();
                        $('#outcome-display').parent().show();
                        $('.no-outcome').parent().hide();

                        //Display title and definition
                        $('#outcome-display .panel-title').html(name);


                        var expected_target = json.expected_target;


                        //check the data type of the expected target   
                        //if the expected_target var is an empty array, set default value

                        $('#expected-outcome .form-control').val(expected_target.expected_target);








                        //Empty table
                        table.clear();
                        var annual_plan = json.annual_plan.id;
                        for (objective in objectives) {
                            var typ_objective_id = json.typ_objective_id[objectives[objective].id].id;
                            var objectivesHTML = '<div class="criterion-field" data-typ-objective-id = "'+typ_objective_id+'" onclick = "fetchObjectiveInfo(this)">';
                            var courseshtml = '';
                            var courseTAhtml = '';



                            var criteriaHTML = '';
                            objectivesHTML += '<strong>' + nextLetter + '.    ' + objectives[objective].text +
                                '</strong></div>';
                            // courseshtml += "<strong>Objective "+nextLetter+"</strong>";
                            // courseshtml += '<ul>';
                            criteriaHTML += "<strong>Objective " + nextLetter + "</strong>";
                            //criteriaHTML+= '<ol>';

                            //var typ_objective_id = json.typ_objective_id[objectives[objective].id].id;
                            nextLetter = nextChar(nextLetter);
                            for (course in courses[objectives[objective].id]) {

                                courseshtml += ' &#8226; ' + courses[objectives[objective].id][course].code + ' ' +
                                    courses[objectives[objective].id][course].name + '<br>'
                                courseTAhtml += ' &#8226; ' + courses[objectives[objective].id][course].code + ' ' +
                                    courses[objectives[objective].id][course].name + '<br>'

                                $divForEach = $('<div/>', {
                                    'id': 'objective-' + objectives[objective].id
                                });
                                $divForSelects = $('<div/>', {
                                    'id': 'forObjective-' + objectives[objective].id + '-course-' + courses[
                                        objectives[objective].id][course].typ_course_id,
                                    'data-amount-select': '0',
                                    'class': 'form-group',
                                    'data-annual-plan': json.annual_plan.id
                                });
                                options = "<option value = '0' >Nothing Selected</option>"
                                for (criterion in criteria[objectives[objective].id]) {
                                    options += "<option value='" + criteria[objectives[objective].id][criterion].id +
                                        "'>" + criteria[objectives[objective].id][criterion].name + "</option>";
                                }
                                var $button = $('<button/>', {
                                    'type': 'button',
                                    'class': 'btn btn-secondary',
                                    'onclick': 'addCriteriaTest("forObjective-' + objectives[objective].id +
                                        "-course-" + courses[objectives[objective].id][course].typ_course_id +
                                        '", "' + objectives[objective].id + "-course-" + courses[objectives[
                                            objective].id][course].typ_course_id + '", ' + courses[objectives[
                                            objective].id][course].typ_course_id + ', null, "' + options + '")'
                                });

                                $button.append("+ Add criteria");

                                $divForEach.append($divForSelects);
                                $divForEach.append("<br>")
                                $divForEach.append($button);
                                $divForTA = $('<div/>', {
                                    'id': 'objectiveTA-' + objectives[objective].id
                                });
                                $divForTASelects = $('<div/>', {
                                    'id': 'forTA-objective-' + objectives[objective].id + '-course-' + courses[
                                        objectives[objective].id][course].typ_course_id,
                                    'class': 'form-group',
                                    'data-amount-ta': '0'
                                });

                                var optionsForTa = "<option value = '0'>Nothing Selected</option>";
                                transformativeDefault = json.transformative_actions;
                                optionsForTa += "<optgroup label='Default'>";
                                for (trans in transformativeDefault) {
                                    optionsForTa += "<option value='" + transformativeDefault[trans].id + "'>" +
                                        transformativeDefault[trans].at_text + "</option> ";

                                }
                                optionsForTa += '</optgroup>';
                                course_id = courses[objectives[objective].id][course].id
                                transformativeDefault = json.custom_transformative[objectives[objective].id][course_id];
                                if (transformativeDefault != undefined) {
                                    optionsForTa += "<optgroup label = 'Custom'>";
                                    for (trans in transformativeDefault) {
                                        optionsForTa += "<option value='" + transformativeDefault[trans].ta_id + "'>" +
                                            transformativeDefault[trans].at_text + "</option> ";

                                    }
                                }
                                typ_course_id = courses[objectives[objective].id][course].typ_course_id
                                var $buttonTA = $('<button/>', {
                                    'type': 'button',
                                    'class': 'btn btn-secondary',

                                    'onclick': 'addTAselect("' + optionsForTa + '", "forTA-objective-' +
                                        objectives[objective].id + '-course-' + courses[objectives[objective]
                                            .id][course].typ_course_id + '", ' + annual_plan + ', ' +
                                        objectives[objective].id + ', ' + typ_course_id + ', 0)'
                                });

                                $buttonTA.append("+ Add TA");
                                typ_course_id = courses[objectives[objective].id][course].typ_course_id
                                optionsForTADict[typ_course_id] = optionsForTa;






                                $divForTA.append($divForTASelects);
                                $divForTA.append('<br>');
                                $divForTA.append($buttonTA)


                                courseshtml += $divForEach[0].innerHTML + "<br><br>";
                                courseTAhtml += $divForTA[0].innerHTML + "<br><br>";


                            }









                            /*$divForTA = $('<div/>',{
                        'id':'objectiveTA-'+objectives[objective].id
                      });
                      $divForTASelects = $('<div/>', {
                        'id': 'forTA-objective-'+objectives[objective].id,
                        'class':'form-group',
                        'data-amount-ta':'0'
                      });

                      var optionsForTa = "<option value = '0'>Nothing Selected</option>";
                      transformativeDefault = json.transformative_actions;
                      optionsForTa+= "<optgroup label='Default'>";
                      for(trans in transformativeDefault){
                        optionsForTa+= "<option value='"+transformativeDefault[trans].id+"'>"+transformativeDefault[trans].at_text+"</option> ";
                        
                      }
                      optionsForTa+='</optgroup>';
                      
                      transformativeDefault = json.custom_transformative[objectives[objective].id];
                      if(transformativeDefault!= undefined){
                      optionsForTa+="<optgroup label = 'Custom'>";
                        for(trans in transformativeDefault){
                        optionsForTa+= "<option value='"+transformativeDefault[trans].id+"'>"+transformativeDefault[trans].at_text+"</option> ";
                        
                      }
                      }
                      var $buttonTA = $('<button/>', {
                       'type': 'button',
                  'class': 'btn btn-secondary',
                  'onclick': 'addTAselect("'+optionsForTa+'", "forTA-objective-'+objectives[objective].id+'", '+annual_plan+', '+objectives[objective].id+', '+typ_objective_id+', 0)'
              });
                       
                      $buttonTA.append("+ Add TA");


                      
                      

                      


                      $divForTA.append($divForTASelects);
                      $divForTA.append('<br>');
                      $divForTA.append($buttonTA)
                      

            */
                            table.row.add([
                                objectivesHTML,
                                courseshtml,

                                courseTAhtml

                            ]);
                            table.draw();


                            for (course in courses[objectives[objective].id]) {
                                typ_course_id = courses[objectives[objective].id][course].typ_course_id
                                if (json.annual_plans_transformative[objectives[objective].id][typ_course_id].length) {
                                    for (i = 0; i < json.annual_plans_transformative[objectives[objective].id][
                                            typ_course_id
                                        ].length; i++) {
                                        selected_ta = json.annual_plans_transformative[objectives[objective].id][
                                            typ_course_id
                                        ][i].trans_id;
                                        addTAselect(optionsForTADict[typ_course_id], "forTA-objective-" + objectives[
                                            objective].id + '-course-' + typ_course_id, annual_plan, objectives[
                                            objective].id, typ_course_id, selected_ta);

                                    }
                                } else {
                                    $('#')
                                    addTAselect(optionsForTADict[typ_course_id], "forTA-objective-" + objectives[
                                        objective].id + '-course-' + typ_course_id, annual_plan, objectives[
                                        objective].id, typ_course_id, 0);
                                }
                                if (json.selected_criteria[objectives[objective].id][typ_course_id].length) {



                                    for (i = 0; i < json.selected_criteria[objectives[objective].id][typ_course_id]
                                        .length; i++) {
                                        addCriteriaTest("forObjective-" + objectives[objective].id + "-course-" +
                                            typ_course_id, "" + objectives[objective].id + "-course-" +
                                            typ_course_id, "" + json.selected_criteria[objectives[objective].id][
                                                typ_course_id
                                            ][i].typ_course_id + "", i, options);
                                        $('#criteriaFor' + objectives[objective].id + "-course-" + typ_course_id + '_' +
                                            i).val(json.selected_criteria[objectives[objective].id][typ_course_id][
                                            i
                                        ].criteria_id);
                                        $('#criteriaFor' + objectives[objective].id + "-course-" + typ_course_id + '_' +
                                            i).data('old-criteria', json.selected_criteria[objectives[objective].id]
                                            [typ_course_id][i].criteria_id);
                                        $('#criteriaFor' + objectives[objective].id + "-course-" + typ_course_id + '_' +
                                            i).selectpicker('refresh');

                                    } // Update display

                                } else {

                                    addCriteriaTest("forObjective-" + objectives[objective].id + "-course-" +
                                        typ_course_id, "" + objectives[objective].id + "-course-" + typ_course_id +
                                        "", "" + typ_course_id + "", 0, options);
                                    $('#criteriaFor' + objectives[objective].id + "-course-" + typ_course_id + '_0')
                                        .val(0);
                                    $('#criteriaFor' + objectives[objective].id + "-course-" + typ_course_id + '_0')
                                        .data('old-criteria', 0);
                                    $('#criteriaFor' + objectives[objective].id + "-course-" + typ_course_id + '_0')
                                        .selectpicker('refresh');

                                }
                            }

                        }
                        table.draw();


                    } else {
                        $('table').hide();
                    }









                },
                'json'
            );

        }

        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