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

@extends('layouts.master')

@section('css')
    {{ HTML::style('vendor/jquery-ui-1.11.4.custom/jquery-ui.min.css') }}
    {{ HTML::style('vendor/jquery-ui-1.11.4.custom/jquery-ui.theme.min.css') }}
@stop

@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')

<!-- Edit Activity -->
<div class="modal fade" id="modal-edit-activity">
  <div class="modal-dialog modal-sm">
    <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">Edit Activity</h4>
      </div>
        <div class="modal-body">
            {{ Form::open(array('action' => array('ActivitiesController@update', $activity->id))) }}
                <div class="form-group">
                    {{ Form::label('name', 'Name') }}
                    {{ Form::text('name', $activity->name, array('class' => 'form-control')) }}
                </div>
                <div class="form-group">
                    {{ Form::label('description', 'Description') }}
                    {{ Form::textarea('description', $activity->description, array('class' => 'form-control', 'rows'=> 4, 'placeholder'=>'Minimum 10 characters')) }}
                </div>

                <div class="form-group">
                    {{ Form::label('date', 'Date') }}
                    {{ Form::text('date', $activity->date, array('id'=>'date', 'class' => 'form-control', 'maxLength'=>10)) }}
                </div>
        </div>
      <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <input class="btn btn-primary" name="update_activity_information" value="Save" type="submit"/>
        {{ Form::close() }}
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- Edit Transforming Actions -->
<div class="modal fade" id="modal-edit-transforming-actions">
  <div class="modal-dialog modal-sm">
    <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">Edit Formative Actions</h4>
      </div>
        <div class="modal-body">
            {{ Form::open(array('action' => array('TransformativeActionsController@postActivityCriterion', $activity->id))) }}
                                  

                <p>A Formative Action is the educational action to be taken to address the criteria of an unachieved Learning Outcome.</p>
                <p>Una acción transformadora es una acción educativa a tomarse para atender el o los criterios de un dominio dado que no se alcanzaron.</p>

                <h5>Choose criteria for the transforming action <br>
                Escoge los criterion para la acción transformadora</h5>

                <div class="form-group">

                    {{ Form::label('select-activity-criterion', 'Criteria')}}
                    
                    <select id='select-activity-criterion' name = "trans_act[]"data-count = "1" class="form-control selectpicker" >
                        @foreach ($activity_criterion as $ac)
                       
                        <option value='{{$ac->id}}' selected>{{$ac->name}}</option>

                        @endforeach
                    </select>
                </div>


                <button id='button-add-activity-criterion' class='btn btn-md btn-secondary'>
                    <span class='glyphicon glyphicon-plus'>

                    </span>
                    Add another Criteria
                </button>
                <hr>
                
                <div class ="form-group">
                    {{ Form::label('name_trans', 'Name of Formative Actions')}}
                    {{ Form::text('name_trans', '', array('class' => 'form-control')) }}
                </div>
                
                <div class="form-group">
                    {{ Form::label('transforming_actions', 'Formative Actions') }}
                    {{ Form::textarea('transforming_actions', $activity->transforming_actions, array('class' => 'form-control', 'rows'=> 4, 'placeholder'=>'Actions to improve student performance after assessment (optional)')) }}
                </div>
        </div>
      <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <input class="btn btn-primary" name="update_transforming_actions" value="Save" type="submit"/>
        {{ Form::close() }}
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- Edit Transforming Actions -->
<div class="modal fade" id="modal-edit-assessment-comments">
  <div class="modal-dialog modal-sm">
    <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">Edit Assessment Comments</h4>
      </div>
        <div class="modal-body">
            {{ Form::open(array('action' => array('ActivitiesController@update', $activity->id))) }}

                <p>Write any additional comments about this activity.</p>
                <p>Escriba cualquier comentario adicional sobre esta actividad.</p>

                <div class="form-group">
                    {{ Form::label('assessment_comments', 'Assessment Comments') }}
                    {{ Form::textarea('assessment_comments', $activity->assessment_comments, array('class' => 'form-control', 'rows'=> 4, 'placeholder'=>'(optional)')) }}
                </div>
        </div>
      <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <input class="btn btn-primary" name="update_assessment_comments" value="Save" type="submit"/>
        {{ Form::close() }}
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- Delete Activity Modal -->
<div class="modal fade" id="modal-confirm-delete-activity">
  <div class="modal-dialog modal-sm">
    <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">Delete Activity</h4>
      </div>
      <div class="modal-body">
        <p>Deleting this activity will also delete any related assessment data. Do you want to continue?</p>
      </div>
      <div class="modal-footer">
        <!-- Confirm deletion (must use form, because Laravel needs to use the DELETE method) -->
        {{ Form::open(array('action' => array('ActivitiesController@destroy', $activity->id), 'method'=>'delete')) }}
            <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
            <button class="btn btn-primary" type="submit">Delete</button>
        {{ Form::close() }}
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- Delete Assessment Modal -->
<div class="modal fade" id="modal-confirm-delete-assessment">
  <div class="modal-dialog modal-sm">
    <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">Delete Assessment</h4>
      </div>
      <div class="modal-body">
        <p>Are you sure you want to delete the assessment results?</p>
      </div>
      <div class="modal-footer">
        <!-- Confirm deletion (must use form, because Laravel needs to use the DELETE method) -->
        {{ Form::open(array('action' => array('ActivitiesController@deleteAssessment'))) }}
            <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
            <input type="hidden" id="id" name="id" value="{{ $activity->id }}">
            <button class="btn btn-primary" type="submit">Delete</button>
        {{ Form::close() }}
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="row">
    <div class="col-md-9" id="graph"></div>
	<div class="col-md-3">
        <div class="btn-group-vertical btn-block" role="group" aria-label="...">

            <!-- If semester is active, allow users to delete the activity -->
            @if (in_array($course->semester->id, $active_semesters))
            <button class="btn btn-primary btn-sm btn-block" btn-block data-toggle="modal" data-target="#modal-edit-activity">Edit Activity Information</button>
            @endif

            <!-- If no rubric is assigned and the semester is active -->
            @if(count($activity->rubric) == 0 && in_array($course->semester->id, $active_semesters))
                {{ HTML::linkAction('RubricsController@newRubric', 'Assign Rubric', array($activity->id), array('class'=>'btn btn-primary btn-sm btn-block')) }}
                <!--{{ HTML::linkAction('RubricsController@newOtherMethod', 'Assign Other Assessment Method', array($activity->id), array('class'=>'btn btn-primary btn-sm btn-block')) }}-->
            @else

                {{ HTML::linkAction('RubricsController@show', 'View Rubric', array($activity->id), array('class'=>'btn btn-primary btn-sm btn-block')) }}

                <!-- If semester is active, allow users to change rubrics -->
                @if (in_array($course->semester->id, $active_semesters))
                {{ HTML::linkAction('RubricsController@newRubric', 'Change Rubric', array($activity->id), array('class'=>'btn btn-primary btn-sm btn-block')) }}
                @endif

                <!-- If there is no assessment and the semester is active -->
                @if(!$activity->is_assessed() && in_array($course->semester->id, $active_semesters))
                    {{ HTML::linkAction('ActivitiesController@assess', 'Assess', array($activity->id), array('class'=>'btn btn-primary btn-sm btn-block')) }}
                @else
                    {{ HTML::linkAction('ActivitiesController@viewAssessment', 'View Assessment Sheet', array($activity->id), array('class'=>'btn btn-primary btn-sm btn-block')) }}


                    <!-- If semester is active, allow users to edit assessments -->
                    @if (in_array($course->semester->id, $active_semesters))
                    
                        {{ HTML::linkAction('ActivitiesController@assess', 'Edit Assessment', array($activity->id), array('class'=>'btn btn-primary btn-sm btn-block')) }}
                        <button class="btn btn-primary btn-sm btn-block" btn-block data-toggle="modal" data-target="#modal-confirm-delete-assessment">Delete Assessment</button>
                        <button class="btn btn-primary btn-sm btn-block" btn-block data-toggle="modal" data-target="#modal-edit-transforming-actions">Formative Actions</button>
                        <button class="btn btn-primary btn-sm btn-block" btn-block data-toggle="modal" data-target="#modal-edit-assessment-comments">Assessment Comments</button>

                    @endif
                @endif
            @endif

            <!-- If semester is active, allow users to delete the activity -->
            @if (in_array($course->semester->id, $active_semesters))
            <button class="btn btn-primary btn-sm btn-block" btn-block data-toggle="modal" data-target="#modal-confirm-delete-activity">Delete Activity</button>
            @endif
            {{ HTML::linkAction('CoursesController@show', 'Back to Section', array($course->id), array('class'=>'btn btn-primary btn-sm btn-block')) }}
        </div>

        <hr>
            <h5>Description</h5>
            <p>{{ $activity->description }}</p>

        @if($activity->transforming_actions != NULL)
            <hr>
            <h5>Transforming Actions</h5>
            {{{ $activity->transforming_actions }}}
        @endif

        @if($activity->assessment_comments != NULL)
            <hr>
            <h5>Assessment Comments</h5>
            {{{ $activity->assessment_comments }}}
        @endif
	</div>
</div>
<div class="row">
    <div class="col-md-12" id="criteriaGraph"></div>
</div>

<script>


$('#button-add-activity-criterion').on('click', function(e){
    e.preventDefault();

    options = $('#select-activity-criterion').html();
    counter = $('#select-activity-criterion').data('count');

    var div = $('<div/>', {
        'id': "selectFor"+counter
        
    });
    var divForSelect = $('<div/>', {
        'class':'col-12 form-group'
    });
    var select = $('<select/>', {
        'class':'selectpicker',
        'name': 'trans_act[]',

    })



    var $button = $('<button/>', {
            'type': 'button',
            'class': 'btn btn-primary',
            'onclick': '$(this).parent().parent().remove();$("#button-add-activity-criterion").show(); '
        }).html('X');
    
    divForSelect.append(select);
    divForSelect.append($button);
    div.append(divForSelect);
  
    $('#select-activity-criterion').parent().parent().after(div);
    select.html(options);

    refreshSelects();

    countSelects = $('.selectpicker').length;
    countOptions = $('#select-activity-criterion option').length;
    if(countOptions == countSelects){
        $('#button-add-activity-criterion').hide();
    }



});

function refreshSelects(){
    $('.selectpicker').each(function(){
        $(this).selectpicker('refresh');
    });
}
$(document).ready(function(){

if({{count($transformative_actions)}}){
    var trans_actions = {{json_encode($transformative_actions)}};
    //$('#select-activity-criterion').val(trans_actions[0].activity_id);
    $('#name_trans').val(trans_actions[0].at_text);
    $('#transforming_actions').val(trans_actions[0].description);
    refreshSelects();

    for(index in trans_actions){
        if(index==0) continue;
        $('#button-add-activity-criterion').click();
    }
    $('.selectpicker').each(function(index){
        $(this).val(trans_actions[index].activity_criterion_id);
    });
    refreshSelects();
}
});


</script>
@stop

@section('included-js')

<!-- HighCharts -->
<script src="{{ asset('vendor/highcharts/highcharts.js') }}"></script>
<!--script src="http://code.highcharts.com/modules/exporting.js"></script -->

<!-- Datepicker -->
<script src="{{ asset('vendor/jquery-ui-1.11.4.custom/jquery-ui.min.js') }}"></script>

@stop

@section('javascript')
$(function () {

    $('#date').datepicker({
      dateFormat: "yy-mm-dd"
    });

    $('#criteriaGraph').highcharts({
        chart: {
            type: 'bar',
            height: 
            @if($activity->is_assessed())
            
                {{ count($activity->criteria_achieved() )*22+225 }}
            @else
                {{22+225}}
            @endif
            ,
        },
        title: {
            text: 'Criteria Achievement',
        },
        xAxis: {
            categories: [
                @if($activity->is_assessed())
                    @foreach($activity->criteria_achieved() as $id=>$value)
                        "{{{ Criterion::withTrashed()->find($id)->name }}}",
                    @endforeach
                @endif
            ],
            labels: {
                style: {
                    fontSize:'12px'
                },
                step:1,
                useHTML:true,
                formatter: function() {
                    return '<div style="width:200px; word-break:break; text-overflow:ellipsis; overflow:hidden;">'+this.value+'</div>';
                },
            }
        },
        yAxis: {
            min: 0,
            max: 100,
            title: {
                text: 'Percentage'
            },
            @if(isset($activity->rubric[0]) and isset($activity->rubric[0]->expected_percentage)  )
            plotLines:[{
                value:{{ $activity->rubric[0]->expected_percentage }},
                color: '#000',
                width:3,
                zIndex:4,
                label:{
                    text: 'Goal ({{ $activity->rubric[0]->expected_percentage }}%)',
                    style: {
                        color: '#000',
                        fontSize: '14px',
                    }

                }
            }]
            @endif
        },

        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.2f}%</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            bar: {
                //grouping: false,
                shadow: false,
                borderWidth: 0,
            },
            series: {
            pointPadding: 0,
            groupPadding: 0.1
            },
        },
        series: [{
            type:'column',
            name: 'Passed',
            color: '#e70033',
            dataLabels: {
                enabled: true,
                fontSize: 8,
                color: '#fff',
                align: 'right',
                format: '{y:.1f}%',
                style: {
                    //fontWeight: 'bold'
                },
                y:-1
            },
            data:[
                @if($activity->is_assessed())
                    @foreach($activity->cap_array as $id=>$crit)

                        //This conditional is to ignore criteria that weren't assessed. These would have a value of null.
                        @if($crit->score_percentage)
                            {{{ $crit->score_percentage }}},
                        @else
                            0,
                        @endif
                    @endforeach
                @endif
            ],
            pointPadding: 0,
            }
        ]
    });

    $('#graph').highcharts({
        chart: {
            type: 'bar',
        },
        title: {
            text: 'Performance by Learning Outcome Criteria in {{ $title }}'
        },
        xAxis: {
            categories: [
                @foreach($outcomes as $outcome)
                    "{{{ $outcome->name }}}",
                @endforeach
            ],
            labels: {
                style: {
                    fontSize:'11px'
                },
                step:1,
                useHTML:true,
                formatter: function() {
                    return '<div style="width:200px; word-break:break; text-overflow:ellipsis; overflow:hidden;">'+this.value+'</div>';
                },
            }
        },
        yAxis: {
            min: 0,
            max: 100,
            title: {
                text: 'Percentage'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.2f}</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            bar: {
                //grouping: false,
                shadow: false,
                borderWidth: 0,
            },
            series: {
            pointPadding: 0,
            groupPadding: 0.075
            },
        },
        series: [{
            name: 'Obtained Value',
            color: '#e70033',
            dataLabels: {
                enabled: true,
                fontSize: 8,
                color: '#fff',
                align: 'right',
                format: '{y:.1f}%',
                style: {
                    //fontWeight: 'bold'
                },
                y:-1
            },
            data:[
                @foreach($outcomes as $index => $outcome)
                    @if(
                        is_array($outcomes_attempted)
                        && array_key_exists($outcome->id, $outcomes_attempted)
                        && $outcomes_attempted[$outcome->id]!=0)
                        {{{ ($outcomes_achieved[$outcome->id]/$outcomes_attempted[$outcome->id])*100 }}},
                    @else
                        0,
                    @endif
                @endforeach
            ],
            pointPadding: 0,
        }, {
            name: 'Expected Value',
            color: '#555555',
            dataLabels: {
                enabled: true,
                fontSize: 8,
                color: '#fff',
                align: 'right',
                format: '{y:.1f}%',
                style: {
                    //fontWeight: 'bold'
                },
                y:-1
            },
            data: [
                @foreach($outcomes as $index => $outcome)
                    @if(
                        is_array($outcomes_attempted)
                        && array_key_exists($outcome->id, $outcomes_attempted)
                        && $outcomes_attempted[$outcome->id]!=0)
                        {{{ $outcome->expected_outcome }}},
                    @else
                        0,
                    @endif
                @endforeach
            ],
            pointPadding: 0,
        }]
    });

    var chart = $('#graph').highcharts();
    var titletext = $('#graph').highcharts().options.title.text;
    var newtitletext = titletext.replace("&#039;", "\'");
    chart.setTitle({text: newtitletext});

    // Include dummy graph for outcomes
    @include('global.dummy-outcomes')
});

@stop