OLAS/app/views/local/managers/admins/view_template.blade.php

@extends('layouts.master')

@section('navigation')
        @if(Auth::user()->role==1)
            @include('local.managers.admins._new_navigation')
        @elseif(Auth::user()->role==2)
            @include('local.managers.sCoords._new_navigation')
        @elseif(Auth::user()->role==3)
            @include('local.managers.pCoords._new_navigation')
        @elseif(Auth::user()->role==4)
            @include('local.professors._navigation')
        @endif
@stop

@section('main')

<div class="row">
  <div class="col-md-12">
    <div class="btn-group pull-right">
      {{ HTML::linkAction('TemplatesController@printview', 'Print', array($template->id), array('class'=>'btn btn-default')) }}
      <button class= 'btn btn-default' onclick ='fetchObjectivesForTemplate("#bodyRubric")'>View Objectives</button>
   
    </div>

    <p>Passing Criteria:
      <span id="expected_percentage">{{{ $template->expected_percentage }}}% of students must obtain at least </span>
      <span id="expected_points">{{{$template->expected_points}}}</span> points
    </p>

    <table class="table datatable" id= "RubricTable">
      <thead>
          <tr>
            <th></th>
            
            <th>Criterion</th>
            @for($i = 0; $i <$template->num_scales; $i++)
              <th>{{$template->titles[$i]}}  ({{1+($i*($template->max_score/$template->num_scales))}} - {{(1+$i)*($template->max_score/$template->num_scales)}})</th>
              
                           
            @endfor
            
            <th>Learning Outcome</th>
            @if($can_edit)

            <th>Show Objectives</th>
            @endif
          </tr>
        </thead>
      <tbody id ="bodyRubric">
        @foreach($template->criteria as $index=> $criterion)
      <tr data-criterion-id = "{{$criterion->id}}" data-criterion-copyright="{{$criterion->copyright}}" data-criterion-notes="{{$criterion->notes}}">
        <td>{{$index+1}}.</td>

        @if($criterion->notes)
            
          <td id='criterion-name'><span><em data-toggle="tooltip" data-placement="top" title="{{$criterion->notes}}">{{$criterion->name}}</em></span><sup></sup></td>
          

        
        @else
          
          <td id='criterion-name'><span>{{$criterion->name}}</span><sup></sup></td>

        
@endif

@foreach ($criterion->scales as $scale)
<td>{{$scale}}</td>
    
@endforeach
<td><ol>
@foreach ($criterion->outcomes as $outcome)
    <p>{{$outcome->name}}</p>
@endforeach
</ol></td>
@if($can_edit)
  <td>
          <a data-criterion-id = '{{$criterion->id}}' onclick = 'pairObjectivesModal(this)'>Show or pair objectives to Criteria</a>

  </td>
  @endif
</tr>
        @endforeach


      </tbody>
    </table>


    <br>
    <br>
    <div id="copyright-info">
      <hr>
      <p class="small"><strong>Copyright Information</strong></p>
      <ul id="copyright-list" class="list-unstyled small">
      </ul>
      <hr>
    </div>


    <br>
    <br>
    <br>

  </div>
</div>


<div class="modal fade" id="objectives-crit-modal">
  <div class="modal-dialog modal-md">
    <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>
        <h4 class="modal-title text-center" id ="modal-title-rubric">These are the objectives in each Criterion in this Rubric</h4>
      </div>
        <div class="modal-body" id ="objectives-crit-modal-body">
            



               
                
                
        </div>
      <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div>


<div class="modal fade" id="pair-objectives">
  <div class="modal-dialog modal-md">
    <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>
        <h4 class="modal-title text-center" id ="pair-objectives-title">Select objectives you want to pair</h4>
      </div>
        <div class="modal-body" id ="pair-objectives-body">
          

          
          
        </div>
      <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div>
<script>
function pairObjectivesModal(a){
  criterion_id = $(a).data('criterion-id')
  $.post(
    "{{URL::action('CriteriaController@fetchFromTemplate')}}",
    {
      criterion_id: criterion_id
    },
    function(objectives){
      $("#pair-objectives-body").html('<label>Objectives Paired to '+$('#criterion-name').html()+'</label>');
      options = makeOptions(objectives.objectives_available);

      if(objectives.objectives_selected.length == 0){
        $("#pair-objectives-body").append(createObjectiveSelect('', options,criterion_id));
      }
      else{
        $.each(objectives.objectives_selected, function (ind, obj){
          $("#pair-objectives-body").append(createObjectiveSelect(obj, options,criterion_id));
        })
      }

      $("#pair-objectives-body").append(addObjectiveButton(criterion_id));
      $("#pair-objectives-body").attr('data-outcome-ids', JSON.stringify(objectives.outcomes));

      $("#pair-objectives").modal('show');
      $('.selectpicker').selectpicker('refresh');


    }
  )
}
options = '';

function makeOptions(objectives){
  options = "<option value = '0'>Nothing Selected</option>";
  $.each(objectives, function(ind, obj){
    //objective_outcome_array = [obj.objective_id,obj.outcome_id];
    options += "<option value = '"+obj.id+"'><p>" +obj.text+"</p></option>";
 
  });
  return options;
}

function addObjectiveButton(criterion_id){
  div_row = $("<div>",{
    "class":'row',
    'id':"objective_button"  
  }
    );
  div_col = $("<div>", {
    'id':'objective_button',
    'class':'col-md-12'
  });

  button = $("<button>", {
    'class':"btn btn-md btn-secondary pull-right",
    'onclick':'addObjectives("#objective_button", '+criterion_id+')'
  }).html('<span class ="glyphicon glyphicon-plus" aria-hidden="true"></span> Add Objective');

  div_col.append(button);
  div_row.append(div_col);
  return div_row;
  
  
  }

  function addObjectives(div, criterion_id){

    $(div).before(createObjectiveSelect('',options, criterion_id));
    $(".selectpicker").selectpicker('refresh');
  }

function createObjectiveSelect(objective = '', options, criterion_id){

  
            
            div_master = $('<div>',{
                'class':'removable_div'
            })
            div_select = $("<div>",{
                'class':'form-group col-md-11',

            })
            select = $('<select>',{
              'name':'objectives[]',
              'class':'selectpicker form-control removable',
              'data-live-search':'true',
              "data-old-objective": ((objective == '') ? 'none': objective.id),
              'data-criterion-id':criterion_id,
              'onchange':'postObjective(this)'

            }).html(options);

            if(objective != ''){
              select.val(objective.id);
            }
            div_rem_button = $('<div>',
                {
                    'class':'col-md-1 remove-btn'
                    
                })
            rem_button = $('<button>',{
                'type':'button',
                'class':'btn btn-primary',
                'onclick':'deleteCriterion(this);'
            }).html("<span class='glyphicon glyphicon-remove'></span>")

            div_select.append(select);
            div_rem_button.append(rem_button);
            div_master.append(div_select);
            div_master.append(div_rem_button);

            return div_master;



}

function postObjective(select){
  old_objective = $(select).data('old-objective');
  criterion_id = $(select).data('criterion-id');
  new_objective = $(select).val();



  if(old_objective == 'none'){
    url = "{{URL::action('Objective2Controller@insertPCOBOFromTemplate')}}";
  }
  else{
    url = "{{URL::action('Objective2Controller@updatePCOBOFromTemplate')}}";
  }

  $.post(
    url,
    {

      old_objective: old_objective,
      template_id: {{$template->id}},
      criterion_id: criterion_id ,
      new_objective:new_objective
    },
    function(){
      $(select).data('old-objective', new_objective);

    }

  )
}

function deleteCriterion(button){
  removable_div = $(button).parent().parent();

  select = removable_div.find('select.removable');

  if(select.data('old-objective')== 'none'){
    modal_body = removable_div.parent();

    removable_div.remove();
    if(modal_body.children('.removable_div').length == 0){
      addObjectives("#objective_button");
     
    }
    return;

  }
  

  $.post(
    "{{URL::action('Objective2Controller@deletePCOBOFromTemplate')}}",
    {
      template_id: {{$template->id}},
      objective_id:select.val(),
      criterion_id:select.data('criterion-id'),



    },
    function (){
      modal_body = removable_div.parent();

      removable_div.remove();
      if(modal_body.children('.removable_div').length == 0){
        addObjectives("#objective_button");
      
      }
      return;


    }
  )
  
}

function fetchObjectivesForTemplate(tbody){
  
  allCriteria = [];
        $(tbody).children('tr').each(function (index){
            allCriteria.push($(this).data('criterion-id'));
        })
        $.post(
            "{{URL::action('TemplatesController@fetchObjectivesForTemplate')}}",
            {
                allCriteria:allCriteria,
                template_id:{{$template->id}}
            },

            function(crit){
                
                modal_name = '#objectives-crit-modal';
                $(modal_name+'-body').html(' ');
                ol_crit = $("<ol>")
                $(modal_name+'-body').append(ol_crit);
                $.each(crit, function(index, cri){

                    
                    li = $("<li>").html("<strong>"+cri.name+"</strong>");
                    
                    ul_for_ob = $("<ul>");
                    
                        $.each(cri.all_objectives, function(ind, obj){
                            li2 = $("<li>").html(obj.text)
                            ul_for_ob.append(li2);
                        })
                        li.append(ul_for_ob);
                    ol_crit.append(li);

                    
                })
                $(modal_name).modal('show');

            }
        )
    }

/*
  function createTable(){
    $.post("{{URL::action('TemplatesController@onLoadFetch')}}",
        {id :{{$template->id}}},
        function (json){
          table = $('#RubricTable');
        for(criterionIndex in json.criteria ){

          criterion = json.criteria[criterionIndex];
          trFull = '<tr data-criterion-copyright="'+criterion.copyright+'" data-criterion-notes="'+criterion.notes+'">';
          trFull+= '<td>'+(parseInt(criterionIndex)+1)+'.</td>';
          if(criterion.notes){
            
            trFull+= '<td><span><em data-toggle="tooltip" data-placement="top" title="'+criterion.notes+'">'+criterion.name+'</em></span><sup></sup></td>';
            //if(criterion.subcriteria){
              
            //}

          }
          else{
            
            trFull+='<td><span>'+criterion.name+'</span><sup></sup></td>';

          }

          for(scalesIndex in json.scales[criterion.criterion_id]){
            scale = json.scales[criterion.criterion_id][scalesIndex];
            trFull += '<td>'+scale.description+'</td>';
          }
          trFull += '<td>Prueba</td>';
          trFull +='</tr>';
          
          $("#bodyRubric").append(trFull);
        }


        
        
        }, 'json'
        );
  }**/
  </script>
@stop

@section('included-js')
    @include('global._datatables_js')
@stop

@section('javascript')

// --------------------------------------------------------------------------
// Page load
// --------------------------------------------------------------------------

buildCopyrightList();

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

// Build list from copyright info in template
function buildCopyrightList()
{
  // Empty the copyright list
  $('#copyright-list').empty();

  $('tbody tr').each(function( index )
  {
    var criterion = $(this);
    // If there's copyright info (in this particular view, it checks for empty strings)
    if(criterion.data('criterion-copyright')!='')
    {
      var copyright = criterion.data('criterion-copyright');

      // If there is anything in the copyright list
      if($('#copyright-list li').length>0)
      {

        // Check copyright list for the same copyright text
        var found = false;
        $('#copyright-list li').each(function()
        {
          // If found, give the string its number
          if(copyright==$(this).find('span').text())
          {
            copyrightNumber = Number.parseInt($(this).find('sup').text());


            criterion.children('td:nth-child(2)').find('sup').text(copyrightNumber);
            found =true;

            //to break
            return false;
          }
        });

        // Otherwise, give it the next number and append a new item to the
        // list
        if(!found)
        {
          var copyrightNumber = $('#copyright-list li').length+1;
          criterion.children('td:nth-child(2)').find('sup').text(copyrightNumber);
          $('#copyright-list').append('<li><sup>'+copyrightNumber+' </sup><span>'+copyright+'<span></li>');
        }
      }
      // Otherwise, give it number 1 and append it
      else
      {

        criterion.children('td:nth-child(2)').find('sup').text('1');
        $('#copyright-list').append('<li><sup>1 </sup><span>'+copyright+'<span></li>');
      }
    }
  });

  if($('#copyright-info li').length>0)
  {
    $('#copyright-info').show();
  }
  else
  {
    $('#copyright-info').hide();
  }
}


@stop