@extends('layouts.master') @section('navigation') @include('local.managers.admins._navigation') @stop @section('main') <div class="row"> <div class="col-md-6"> <!-- Form to add a new objective --> <div class="panel panel-default panel-button"> <div class="panel-heading"> Create </div> <div class="panel-body"> {{ Form::open(array('action' => 'Objective2Controller@create' )) }} <div id='outcomeGroup'> <label> Associated Outcome</label> <div class="form-group col-md-11" id='outcomeForm'> {{ Form::select('outcome[0]', $outcomes, null, ['class'=>'form-control selectpicker', 'id' =>'outcome[0]']) }} </div> </div> <input type='hidden' name='counter' id='counter' value=1> <button id='button-add-outcome' class='btn btn-md btn-secondary' onclick='addOutcomeTest()'> <span class='glyphicon glyphicon-plus'> </span> Add another Outcome </button> <!-- Associated Program --> <div class="form-group"> {{ Form::label('program_id', 'Associated Program') }} <select id="program_id" name="program_id" class="form-control selectpicker"> <option value="0">All</option> @foreach ($programs as $program) <option value="{{ $program->id }}">{{ $program->name }} [{{ $program->school->name }}]</option> @endforeach </select> </div> <div class="form-group"> {{ Form::label('text', 'Text') }} {{ Form::text('text', '', array('class' => 'form-control')) }} </div> {{ Form::submit('Create', array('class' => 'btn btn-primary btn-block')) }} {{ Form::close() }} </div> </div> </div> <div class="col-md-6"> <div class="panel panel-default panel-button"> <div class="panel-heading"> Edit </div> <div class="panel-body"> {{ Form::open(array('action' => 'Objective2Controller@update')) }} <div class="form-group"> {{ Form::label('objective_id', 'Objectives') }} <select id="select-objective" name="id" class="form-control selectpicker"> @foreach ($objectives as $objective) <option value="{{ $objective->id }}" data-subtext=" @if($objective->program) [{{ $objective->program->name }}] @endif "> {{ $objective->text }} </option> @endforeach </select> </div> <!-- Associated Outcome --> <div class="form-group"> <div id='assocOutcomeGroup'> <label>Associated Outcome</label> {{ Form::select('assoc_outcome[]', $outcomes, null, ['class'=>'form-control selectpicker', 'id'=>'assoc_outcome0']) }} </div> </div> <button id='button-add-assoc-outcome' class='btn btn-md btn-secondary' onclick='addAssoc()'> <span class='glyphicon glyphicon-plus'> </span> Add another Outcome </button> <!-- Associated Program --> <div class="form-group"> {{ Form::label('program_id2', 'Associated Program') }} <select id="program_id2" name="program_id" class="form-control selectpicker"> <option value="0">All</option> @foreach ($programs as $program) <option value="{{ $program->id }}">{{ $program->name }} [{{ $program->school->name }}]</option> @endforeach </select> </div> <!-- Status --> <div class="form-group"> {{ Form::label('status', 'Status') }} <span data-toggle="tooltip" data-placement="top" title="Use this option to deactivate or reactivate objectives. Inactive objective will stay in the system, but will not be available to use in new rubrics." class="glyphicon glyphicon-question-sign"></span> <select id="status" name="status" class="form-control"> <option value="1">Active</option> <option value="0">Inactive</option> </select> </div> <div class="form-group"> {{ Form::label('text', 'Text') }} {{ Form::text('text', Input::old('text'), array('class' => 'form-control', 'id'=>'objective-text')) }} </div> {{ Form::submit('Update', array('class' => 'btn btn-primary btn-block')) }} {{ Form::close() }} </div> </div> </div> </div> <script> var outcomeHTML = document.getElementById('outcomeGroup').innerHTML; var selectOptions = document.getElementById('outcome[0]').innerHTML; var ran = false; var counter = 1; var counterAssoc = 1; //Add Another Outcome function changeOutcomeHtml() { var outcomeHTML = document.getElementById('outcomeGroup').innerHTML; outcomeHTML = outcomeHTML.replace('outcome[' + counter.toString() + ']', 'outcome[' + (counter + 1).toString() + ']'); counter += 1; document.getElementById("outcomeGroup").innerHTML += outcomeHTML; document.getElementById('button-add-outcome').onclick = addOutcome; } function addOutcome() { outcomeHTML = outcomeHTML.replace('outcome[' + counter.toString() + ']', 'outcome[' + (counter + 1).toString() + ']'); counter += 1; document.getElementById("outcomeGroup").innerHTML += outcomeHTML; } function addOutcomeTest() { var $select = $('<select/>', { 'class': "selectpicker form-control", 'name': "outcome[" + counter.toString() + "]", 'data-live-search': 'true' }); var $div = $('<div/>', { 'id': 'outcomeForm' + counter.toString(), 'class': 'form-group col-md-11' }); var $divForButton = $('<div/>', { 'class': 'col-md-1', 'id': 'close' + counter.toString() }); var $button = $('<button/>', { 'type': 'button', 'class': 'btn btn-primary', 'onclick': 'deleteLast()' }); $button.append('X'); $divForButton.append($button); $div.appendTo('#outcomeGroup') $select.append(selectOptions); $select.appendTo('#outcomeForm' + counter.toString()).selectpicker('refresh'); $divForButton.appendTo('#outcomeGroup'); counter += 1; $('#counter').val(counter); } function deleteLast() { div = document.getElementById('outcomeForm' + (counter - 1).toString()); div.remove(); button = document.getElementById('close' + (counter - 1).toString()); button.remove(); counter -= 1; $('#counter').val(counter); } function fetchObjectiveForEditing() { var id = $('#select-objective').find(':selected').val(); $.post( "{{ URL::action('Objective2Controller@fetchObjectiveWithTrashed') }}", { id: id }, function(json) { var text = json[0].text; // Display info $('#objective-text').val(text); // Select associated outcome var outcome_id = json[0].outcome_id; $('#assoc_outcome0').val(outcome_id); $('#assoc_outcome0').selectpicker('refresh'); var length = json.length; if (ran == true) { for (var i = counterAssoc; i != 0; i--) { deleteLastAssoc(i); } counterAssoc = 1 } for (var i = 1; i < length; i++) { var $select = $('<select />', { 'class': "selectpicker form-control", 'name': "assoc_outcome[]", 'data-live-search': 'true', 'id': 'assoc_outcome' + i.toString() }); var $div = $('<div />', { 'id': 'assocOutcomeForm' + i.toString(), 'class': 'form-group col-md-11' }); var $divForButton = $('<div />', { 'class': 'col-md-1', 'id': 'closeAssoc' + i.toString() }); var $button = $('<button />', { 'type': 'button', 'class': 'btn btn-primary', 'onclick': 'deleteLastAssoc()' }); $button.append('X'); $divForButton.append($button); $div.appendTo('#assocOutcomeGroup') $select.append(selectOptions); $select.appendTo('#assocOutcomeForm' + i.toString()).selectpicker('refresh'); $divForButton.appendTo('#assocOutcomeGroup'); $('#assoc_outcome' + i.toString()).val(json[i].outcome_id); $('#assoc_outcome' + i.toString()).selectpicker('refresh'); counterAssoc = i; ran = true; } // Select associated program if (json[0].program_id) { $('#program_id2').val(json[0].program_id); } else { $('#program_id2').val(0); } $('#program_id2').selectpicker('refresh'); // Select status if (json[0].deleted_at) $('#status').val(0); else $('#status').val(1); }, 'json' ); } function deleteLastAssoc() { div = document.getElementById('assocOutcomeForm' + (counterAssoc).toString()); div.remove(); button = document.getElementById('closeAssoc' + (counterAssoc).toString()); button.remove(); counterAssoc -= 1; } function addAssoc() { var $select = $('<select />', { 'class': "selectpicker form-control", 'name': "assoc_outcome[]", 'data-live-search': 'true', 'id': 'assoc_outcome' + counterAssoc.toString() }); var $div = $('<div />', { 'id': 'assocOutcomeForm' + counterAssoc.toString(), 'class': 'form-group col-md-11' }); var $divForButton = $('<div />', { 'class': 'col-md-1', 'id': 'closeAssoc' + counterAssoc.toString() }); var $button = $('<button />', { 'type': 'button', 'class': 'btn btn-primary', 'onclick': 'deleteLastAssoc()' }); $button.append('X'); $divForButton.append($button); $div.appendTo('#assocOutcomeGroup') $select.append(selectOptions); $select.appendTo('#assocOutcomeForm' + counterAssoc.toString()).selectpicker('refresh'); $divForButton.appendTo('#assocOutcomeGroup'); ran = true; counterAssoc += 1; } </script> @stop @section('javascript') // -------------------------------------------------------------------------- // Page load // -------------------------------------------------------------------------- // Hide accordion panel contents by default $('.panel-group .panel-body').hide(); $('#outcome-display').parent().hide(); fetchObjectiveForEditing(); // setCriterionStatus(); // -------------------------------------------------------------------------- // Functions // -------------------------------------------------------------------------- // Fetch criterion info for editing $('#button-add-outcome').on('click', function(e) { // Prevent the default action of the clicked item. In this case that is submit e.preventDefault(); return false; }); $('#button-add-assoc-outcome').on('click', function(e) { // Prevent the default action of the clicked item. In this case that is submit e.preventDefault(); return false; }); // -------------------------------------------------------------------------- // Events // -------------------------------------------------------------------------- // When panel heading is clicked, toggle it $('.panel-group .panel-heading').on('click', function() { $(this).next().stop().slideToggle(); }) // When list item is clicked, load corresponding info $('#select-objective').on('change', function() { fetchObjectiveForEditing(); $('.selectpicker').selectpicker('refresh'); }); // When list item is clicked, load corresponding info $('.selectpicker').on('change', function() { //alert($(this).find(':selected').val()); $('.selectpicker').selectpicker('refresh'); }); @stop