OLAS/app/views/global/view-objectives-criteria.bl...

@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')
    {{-- 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 --}}
    <script type="text/javascript">
        function filterObjectives() {
            // Declare variables
            var input, filter, div, li, i, objectiveText;
            input = document.getElementById('userInput');
            filter = input.value.toUpperCase();
            div = document.getElementById("list");
            li = div.getElementsByTagName('li');

            // Loop through all list items, and hide those who don't match the search query
            for (i = 0; i < li.length; i++) {
                objectiveText = li[i].textContent;
                if (objectiveText.toUpperCase().indexOf(filter) > -1) {
                    li[i].style.display = "";
                } else {
                    li[i].style.display = "none";
                }
            }
        }
    </script>

    <div class="row">
        <div class="col-md-3">
            <input class="form-control" type="text" id="userInput" onkeyup="filterObjectives()"
                placeholder="Search for Learning Outcomes..">
            <div class="list-group" id='list'>
                @foreach ($outcomes as $outcome)
                    <li data-outcome-id="{{ $outcome->id }}" class="list-group-item">{{ $outcome->name }}</li>
                @endforeach
            </div>
        </div>

        <div class="col-md-9">
            <div id="objective-display" class="panel panel-default">
                <div class="panel-heading">
                    <h4 class=" panel-title" style="cursor:auto!important;">
                    </h4>
                </div>
                <div class="panel-body">
                    <p class="objective-definition "></p>

                    <div class="table-responsive table-responsive-0">
                        <table class="table table-striped table-condensed datatable">
                            <thead id="theHead">
                                <th>Objective</th>
                                <th>Program</th>
                            </thead>
                            <tfoot>

                            </tfoot>
                            <tbody id="table_objectives">
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>

        <div class="col-md-9">
            <div class="no-objective alert alert-info">
                <p>Select a Learning Objective to view its information</p>
            </div>
        </div>

    </div>
    <script>
        $(document).ready(function() {
            // --------------------------------------------------------------------------
            // Page load
            // --------------------------------------------------------------------------

            // Hide accordion panel contents by default
            $('.panel-group .panel-body').hide(); -

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

            // --------------------------------------------------------------------------
            // Functions
            // --------------------------------------------------------------------------
            /*

              */
            function fetchObjectives(li) {
                {

                    var id = $(li).data('outcome-id');

                    $.post(
                        "{{ URL::action('Objective2Controller@fetchObjectivesForOutcome') }}", {
                            id: id,
                        },
                        function(json) {

                            // Retrieve datatable instance
                            //var table = $('.table-responsive-0').;

                            var name = $(li).html();
                            //var definition = json.objective.program.name;
                            //var criteria = json.objective.criteria;

                            $('#objective-display').parent().show();
                            $('.no-objective').parent().hide();

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

                            //Empty table
                            $('#table_objectives').empty();

                            $.each(json, function(ind2, objective) {
                                tr = $("<tr>");
                                td_text = $("<td>").html(objective.text);

                                td_programs = $("<td>");
                                ol = $("<ol>");

                                $.each(objective.programs, function(ind, prog) {
                                    li = $("<li>").html(prog.name);
                                    li.appendTo(ol);
                                })
                                ol.appendTo(td_programs);
                                tr.append(td_text);
                                tr.append(td_programs);
                                tr.appendTo($('#table_objectives'))

                            })
                        },
                        'json'
                    );

                }
            }
            // --------------------------------------------------------------------------
            // Events
            // --------------------------------------------------------------------------

            // When list item is clicked, load corresponding info
            $('.list-group-item').on('click', function() {
                fetchObjectives(this);
            })
        });

        $('.view-scales').on('click', function() {
            var number_of_scales = this.value;

            $('.table-responsive').hide();
            $('.table-responsive-0').show();
            $('.table-' + number_of_scales).show();
        })
    </script>
@stop

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

@section('javascript')