OLAS/app/views/local/professors/rubrics.blade.php

@extends('layouts.master')

@section('navigation')
  @if($role==1)
    @include('local.managers.admins._navigation')
  @elseif($role==2)
    @include('local.managers.sCoords._navigation')
  @elseif($role==3)
    @include('local.managers.pCoords._navigation')
  @else
    @include('local.professors._navigation')
  @endif
@stop

@section('main')

<!-- No rubric modal -->
<div class="modal fade" id="modal-no-rubric">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">No Rubric Available</h4>
      </div>
        <div class="modal-body">
          There are no existing rubrics for your School. Please contact your Program's Coordinator. You will be redirected to the previous page.
        </div>
      <div class="modal-footer">
        <button id="button-redirect" class="btn btn-primary">Ok</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<div class="row">
  <div class="col-md-12">
    <div>
      {{ HTML::linkAction('ActivitiesController@show', 'Back to Activity', array($activity->id), array('class'=>'btn btn-default btn-sm pull-right')) }}
      <br>
      <br>
    </div>


    <div class="well">
      @if($activity->rubric_id!=NULL)
        <span id="assigned_rubric" class="hidden" data-assigned-rubric="{{{ $activity->rubric_id }}}"></span>
      @endif
      <input id="activity_id" type="hidden" value="{{{ $activity->id}}}">

      <div class="form-group">
        <label>Select a Rubric:</label>
        <select id="select-template" class="form-control selectpicker">
          @foreach ($templates as $template)
            @if($activity->rubric_id!=NULL && $template->name == Rubric::find($activity->rubric_id)->name)
              <option data-template-id="{{ $template->id }}" class="template" selected="selected">{{ $template->name }}</option>
            @else
              <option data-template-id="{{ $template->id }}" class="template">{{ $template->name }}</option>
            @endif
          @endforeach
        </select>
      </div>

      <div class="form-group">
        <label>Expected Criteria Outcome: </label>
        <!-- Select percentage. If there is a rubric, select the saved value -->
        <strong>
          <span id="expected_percentage">

          </span>%
        </strong> of all students must score at least
        <!-- Select points. If there is a rubric, select the saved value -->
        <strong>
          <span id="expected_points">

          </span>
        </strong>
        points in a criterion for it to pass.
      </div>
    </div>
  </div>
</div>

<div id="rubric-container" class="row">
  <div class="col-md-12">

    <table class="table">
      <thead><tr><th colspan="6 "><h3 id="rubric-name"></h3></th></tr></thead>
      <thead><tr><th>Criterion</th><th>Beginning (1-2)</th><th>In Progress (3-4)</th><th>Good (5-6)</th><th>Excellent (7-8)</th></tr></thead>
      <tbody>

      </tbody>
    </table>

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

    @if($activity->outcomes_attempted!=NULL)
    <div class="alert alert-info" role="alert">This activity has already been assessed. Changing the rubric will delete all saved scores.</div>
    @endif
    <div class="text-center">
        <button id="button-save-rubric" class="btn btn-lg btn-primary save"><span class="glyphicon glyphicon-floppy-disk"></span> Save</button>
    </div>
  </div>
</div>
@stop

@section('javascript')

// --------------------------------------------------------------------------
// Page load
// --------------------------------------------------------------------------
console.log({{ $activity }});

//If there are no rubrics to show, alert user and redirect.
if($('#select-template').children().length)
  loadTemplate();
else
{
  $('#modal-no-rubric').modal({
    backdrop: 'static'
  });
}

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

// Fetch criteria associated to a specific learning outcome
function fetchCriteria(outcome)
{
  $.post
  (
    "{{ URL::route('fetchCriteria') }}",
    { id: outcome.find(':selected').data('outcome-id')},
    function(data)
    {
      $('#select-criterion').empty();

      data.forEach( function (arrayItem)
      {
        // If criterion does not belong to a user, display it
        if(arrayItem.user_id==null)
        {
          $('#select-criterion')
            .append('<option data-criterion-id="'+arrayItem.id+'" >'+arrayItem.name+'</option>');
        }
        // If it does, but the user is the one logged on, display.
        // Otherwise, ignore
        else if(arrayItem.user_id!="" && {{{Auth::id()}}}==arrayItem.user_id )
        {
          $('#select-criterion')
            .append('<option data-criterion-id="'+arrayItem.id+'" >'+arrayItem.name+'</option>');
        }

      });

      // Add custom option
      $('#select-criterion')
          .append('<option data-criterion-id="0">Custom</option>');

      $('#select-criterion').prop('disabled', false);
      $('#button-add-criterion').prop('disabled', false);
    }
  );
}

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

  $('tbody tr').each(function( index )
  {
    var criterion = $(this);
    // If there's copyright info
    if(criterion.data('criterion-copyright')!=null)
    {
      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(1)').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(1)').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(1)').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();
  }
}

// Load a template
function loadTemplate()
{
  $.post
  (
    "{{ URL::to('loadTemplate') }}",
    { id: $('#select-template').find(':selected').data('template-id')},
    function(data)
    {
      //alert(JSON.stringify(data));

      // Show the container and empty all rows
      $('#rubric-container').show();
      $('tbody').empty();

      //Set the name of the rubric
      $('#rubric-name').val(data.name);

      console.log($('#expected_percentage').text());
      console.log($('#expected_points').text());

      // Set expected values
      $('#expected_percentage').text(data.expected_percentage);
      $('#expected_points').text(data.expected_points);

      // Set the contents of the rubric
      var contents = JSON.parse(data.contents);


      contents.forEach(function (criterion)
      {
        var str ='<tr data-assoc-outcome-id="'+criterion.outcome_id+'"'
          +'data-criterion-id="'+criterion.id+'" data-criterion-copyright="'+criterion.copyright+'" data-criterion-notes="'+criterion.notes+'">';


        var subcriteria = '';
        if(criterion.subcriteria){

            var subcriteria_array = criterion.subcriteria;
            subcriteria = '<ul class="subcriteria list-unstyled">';
            subcriteria_array.forEach(function (value) {
                subcriteria += '<li>'+value+'</li>';
            });
            subcriteria += '</ul>';

        }

        // If the criterion has notes, set the tooltip with them
        if(criterion.notes)
        {
          str+='<td><span><em data-toggle="tooltip" data-placement="top" title="'+criterion.notes+'">'+criterion.name+'</em></span><sup></sup>'+subcriteria+'</td>';
        }
        else
        {
          str+='<td><span>'+criterion.name+'</span><sup></sup>'+subcriteria+'</td>';
        }

        // Add the descriptions
        str+='<td>'+criterion.description12.replace(/\n/gi, '<br>')+'</td>'
          +'<td>'+criterion.description34.replace(/\n/gi, '<br>')+'</td>'
          +'<td>'+criterion.description56.replace(/\n/gi, '<br>')+'</td>'
          +'<td>'+criterion.description78.replace(/\n/gi, '<br>')+'</td></tr>';

        // Append the string to the table
        $('table tbody').append(str);

        // Turn on tooltips again (because content is dynamic)
        $('[data-toggle="tooltip"]').tooltip();
      });

      // Build Copyright List
      buildCopyrightList();
    }
  );
}

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

// When trying to change the template, ask the user to confirm and reset the
// rubric if s/he does
$('#select-template').on('change', function()
{
      loadTemplate();
});

// When a learning outcome changes, update its criteria
$('#select-outcome').on('change', function()
{
  fetchCriteria($(this));
});

// When save button is clicked
$('#button-save-rubric').on('click', function(e)
{
  //Prevent page refresh
  e.preventDefault();

  var criterionObject = new Object();
  var criteriaArray = new Array();

  // For each criterion in the rubric, get its value and put it into an array
  $('tbody tr').each(function( index )
  {
      criterionObject.id = $(this).data('criterion-id');
      criterionObject.outcome_id = $(this).data('assoc-outcome-id');
      criterionObject.name = $(this).children('td:nth-child(1)').find('span').text();

      var subcriteriaArray = new Array();
      $(this).children('td:nth-child(1)').find('.subcriteria li').each(function(index){
          subcriteriaArray.push($(this).text());
      });
      criterionObject.subcriteria = subcriteriaArray;


      criterionObject.description12 = $(this).children('td:nth-child(2)').html().replace(/<br>/gi, '\n');
      criterionObject.description34 = $(this).children('td:nth-child(3)').html().replace(/<br>/gi, '\n');
      criterionObject.description56 = $(this).children('td:nth-child(4)').html().replace(/<br>/gi, '\n');
      criterionObject.description78 = $(this).children('td:nth-child(5)').html().replace(/<br>/gi, '\n');
      criterionObject.copyright = $(this).data('criterion-copyright');
      criterionObject.notes = $(this).data('criterion-notes');

      // Clone the object and push it into the array
      var clone = jQuery.extend({}, criterionObject);
      criteriaArray.push(clone);

  });

  // If activity does not have a rubric, create it
  if($('#assigned_rubric').length === 0)
  {
    $('#js-error-row').hide();

    // Create
    $.post
    (
      "{{ URL::to('professor/saveRubric') }}",
      {
        name: $('#select-template').find(':selected').text(),
        activity_id: parseInt($('#activity_id').val()),
        contents: JSON.stringify(criteriaArray),
        expected_percentage: $('#expected_percentage').text(),
        expected_points: $('#expected_points').text()

      },
      function(data)
      {
        location.replace(data);
      }
    );
  }
  // Else, update it
  else
  {
    // Update database
    $.post
    (
      "{{ URL::to('professor/updateRubric') }}",
      {
        id: $('#assigned_rubric').data('assigned-rubric'),
        name: $('#select-template').find(':selected').text(),
        contents: JSON.stringify(criteriaArray),
        expected_percentage: $('#expected_percentage').text(),
        expected_points: $('#expected_points').text()
      },
      function(data)
      {
        location.replace(data);
      }
    );
  }
});

// When Ok button is clicked, redirect to previous page
// When save button is clicked
$('#button-redirect').on('click', function(e)
{
  e.preventDefault();
  history.go(-1);
});


@stop