No Description

create_annual_plan.blade.php 12KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378
  1. @extends('layouts.master')
  2. @section('navigation')
  3. @if (Auth::user()->role == 1)
  4. @include('local.managers.admins._new_navigation')
  5. @elseif(Auth::user()->role == 2)
  6. @include('local.managers.sCoords._new_navigation')
  7. @elseif(Auth::user()->role == 3)
  8. @include('local.managers.pCoords._new_navigation')
  9. @endif
  10. @stop
  11. @section('main')
  12. <div class="row">
  13. <div class="col-md-12">
  14. <div id="quinquennium" data-quinquennium-id="{{ $current_quinquennium->id }}"></div>
  15. <div id="program" data-program-id="{{ $program->id }}"></div>
  16. <div class="plan">
  17. <table class="table table-bordered">
  18. <thead>
  19. <tr class="bg-danger text-center">
  20. <th class="text-center col-md-3">Learning Outcome to be assessed</th>
  21. <th class="text-center col-md-4">Learning Objectives</th>
  22. <th class="text-center col-md-4">Courses to use for assessment</th>
  23. <th></th>
  24. </tr>
  25. </thead>
  26. <tbody>
  27. <tr>
  28. <td class="outcome-cell">
  29. <select name="outcome" class="outcome form-control">
  30. @foreach ($outcomes as $outcome)
  31. <option value="{{ $outcome->id }}">{{ $outcome->name }}</option>
  32. @endforeach
  33. </select>
  34. </td>
  35. <td class="objectives-cell">
  36. <div class="objective-select-wrapper">
  37. <select name="objectives[]" class="objective shortened-select form-control">
  38. </select>
  39. <span class="glyphicon glyphicon-remove text-danger icon-btn remove-objective"></span>
  40. <br><br>
  41. </div>
  42. <button class="add-objective btn btn-success pull-right btn-xs"><span
  43. class="glyphicon glyphicon-plus"></span></button>
  44. </td>
  45. <td>
  46. <div class="course-select-wrapper">
  47. <select name="courses[]" class="course shortened-select form-control">
  48. @foreach ($courses as $course)
  49. <option value="{{ $course->id }}" data-course-code="{{ $course->code }}"
  50. data-course-number="{{ $course->number }}"
  51. data-course-name="{{ $course->name }}">
  52. {{ $course->code }}{{ $course->number }}: {{ $course->name }}
  53. </option>
  54. @endforeach
  55. </select>
  56. <span class="glyphicon glyphicon-remove text-danger icon-btn remove-course"></span>
  57. <br><br>
  58. </div>
  59. <button class="add-course btn btn-success pull-right btn-xs"><span
  60. class="glyphicon glyphicon-plus"></span></button>
  61. </td>
  62. <td></td>
  63. </tr>
  64. </tbody>
  65. </table>
  66. <div>
  67. <button class="add-outcome btn btn-success pull-right btn-sm"><span
  68. class="glyphicon glyphicon-plus"></span>Add Learning Outcome</button>
  69. <br><br><br>
  70. </div>
  71. </div>
  72. <div class="text-center">
  73. <button id="button-create-rubric" class="btn btn-lg btn-primary save">
  74. <span class="glyphicon glyphicon-floppy-disk"></span>
  75. Save
  76. </button>
  77. </div>
  78. </div>
  79. </div>
  80. @stop
  81. @section('included-js')
  82. @stop
  83. @section('javascript')
  84. // --------------------------------------------------------------------------
  85. // Page Load
  86. // --------------------------------------------------------------------------
  87. // Hide all 'x' buttons for courses and objectives
  88. $('.remove-course, .remove-objective').hide();
  89. $('.outcome').each(function()
  90. {
  91. fetchObjectives($(this));
  92. });
  93. // --------------------------------------------------------------------------
  94. // Events
  95. // --------------------------------------------------------------------------
  96. // On clicking a button to add outcome
  97. $('.add-outcome').on('click', function(e)
  98. {
  99. var table = $(this).closest('.plan').find('table');
  100. addOutcome(table);
  101. });
  102. // On clicking a button to remove a course
  103. $('table').on('click', '.remove-objective', function(e)
  104. {
  105. removeObjective($(this));
  106. });
  107. // On clicking a button to remove a course
  108. $('table').on('click', '.remove-course', function(e)
  109. {
  110. removeCourse($(this));
  111. });
  112. // On clicking the x to remove an outcome from the plan
  113. $('table').on('click', '.remove-outcome', function(e)
  114. {
  115. var table = $(this).closest('.plan').find('table');
  116. var row = $(this).closest('tr');
  117. removeOutcome(table, row);
  118. });
  119. // On clicking a button to add a objective
  120. $('.add-objective').on('click', function(e)
  121. {
  122. var table = $(this).closest('.plan').find('table');
  123. var objective_select_wrapper = $(this).parent().find('.objective-select-wrapper:last');
  124. var select = $(this).parent().find('select:last');
  125. var selected_objective_id = select.find(':selected').val();
  126. var clone = objective_select_wrapper.clone();
  127. clone.insertAfter(objective_select_wrapper);
  128. objective_select_wrapper.parent().find('.remove-objective').show();
  129. });
  130. // On clicking a button to add a course
  131. $('.add-course').on('click', function(e)
  132. {
  133. var table = $(this).closest('.plan').find('table');
  134. var course_select_wrapper = $(this).parent().find('.course-select-wrapper:last');
  135. var select = $(this).parent().find('select:last');
  136. var selected_course_id = select.find(':selected').val();
  137. var clone = course_select_wrapper.clone();
  138. clone.insertAfter(course_select_wrapper);
  139. course_select_wrapper.parent().find('.remove-course').show();
  140. });
  141. // When user selects another outcome
  142. $('.outcome').on('change', function(e)
  143. {
  144. fetchObjectives($(this));
  145. });
  146. // Gather, structure and send data to server for saving
  147. $('.save').on('click', function(e)
  148. {
  149. var five_year_plan = new Object();
  150. five_year_plan.quinquennium_id = $('#quinquennium').data('quinquennium-id');
  151. five_year_plan.program_id = $('#program').data('program-id');
  152. five_year_plan.mini_plans = new Array();
  153. $('.plan').each(function(index){
  154. var mini_plan = new Object();
  155. mini_plan.year_start = $(this).find('.year-start').text();
  156. mini_plan.year_end = $(this).find('.year-end').text();
  157. // Array for outcome objects
  158. mini_plan.outcomes = new Array();
  159. $(this).find('.outcome').each(function(index){
  160. // Outcome object
  161. var outcome = new Object();
  162. outcome.id = $(this).find(':selected').val();
  163. outcome.objectives = new Array();
  164. outcome.courses = new Array();
  165. // Gather objective information
  166. $(this).closest('tr').find('.objective').each(function()
  167. {
  168. var objective = new Object();
  169. objective.original_id = $(this).find(':selected').val();
  170. objective.text = $(this).find(':selected').text();
  171. outcome.objectives.push(jQuery.extend({}, objective));
  172. objective = null;
  173. });
  174. // Gather course information
  175. $(this).closest('tr').find('.course').each(function()
  176. {
  177. var course = new Object();
  178. course.code = $(this).find(':selected').data('course-code');
  179. course.number = $(this).find(':selected').data('course-number');
  180. course.name = $(this).find(':selected').data('course-name');
  181. outcome.courses.push(jQuery.extend({}, course));
  182. course = null;
  183. });
  184. mini_plan.outcomes.push(jQuery.extend({}, outcome));
  185. outcome = null;
  186. });
  187. five_year_plan.mini_plans.push(jQuery.extend({}, mini_plan));
  188. mini_plan = null;
  189. });
  190. //console.log(five_year_plan);
  191. $.post(
  192. "{{ URL::action('FiveYearPlansController@store', [$program->id]) }}",
  193. {
  194. five_year_plan: JSON.stringify(five_year_plan)
  195. },
  196. function(data)
  197. {
  198. //console.log(data);
  199. var response = data;
  200. //console.log('status: '+response.status);
  201. if(response.status == 'success')
  202. {
  203. //console.log('success');
  204. window.location = response.redirect_url;
  205. }
  206. else
  207. {
  208. jsError(response.message);
  209. }
  210. },
  211. "json"
  212. )
  213. .fail( function(xhr, status, error) {
  214. //console.log('fail:'+error);
  215. // Always scroll to the top
  216. $(this).scrollTop(0);
  217. $('html').animate({scrollTop:0}, 1);
  218. $('body').animate({scrollTop:0}, 1);
  219. jsError(error);
  220. // Show js error with default message
  221. $('#js-error-row').fadeIn('slow', function () {
  222. $(this).delay(3000).fadeOut('slow');
  223. });
  224. }
  225. );
  226. });
  227. // --------------------------------------------------------------------------
  228. // Functions
  229. // --------------------------------------------------------------------------
  230. // Removes a objective
  231. function removeObjective(button)
  232. {
  233. var objective_select_wrapper = button.parent();
  234. // If only one objective will remain, hide 'x' button
  235. if(objective_select_wrapper.siblings('.objective-select-wrapper').length == 1)
  236. {
  237. objective_select_wrapper.siblings('.objective-select-wrapper').find('.remove-objective').hide();
  238. }
  239. // Remove objective
  240. objective_select_wrapper.remove();
  241. }
  242. // Removes a course
  243. function removeCourse(button)
  244. {
  245. var course_select_wrapper = button.parent();
  246. // If only one course will remain, hide 'x' button
  247. if(course_select_wrapper.siblings('.course-select-wrapper').length == 1)
  248. {
  249. course_select_wrapper.siblings('.course-select-wrapper').find('.remove-course').hide();
  250. }
  251. // Remove course
  252. course_select_wrapper.remove();
  253. }
  254. // Checks whether a plan has outcomes
  255. function hasOutcomes(table)
  256. {
  257. if(table.find('.outcome-cell').length > 0)
  258. return true;
  259. else
  260. return false;
  261. }
  262. // Add an outcome to an annual plan
  263. function addOutcome(table)
  264. {
  265. var header_rowspan = Number(table.find('.academic-year').attr('rowspan'));
  266. var clone = table.find('tbody tr:first').clone(true, true);
  267. // Remove all objectives and course except the first ones
  268. clone.find('.objective-select-wrapper').not(':first').remove();
  269. clone.find('.course-select-wrapper').not(':first').remove();
  270. // Add removal button
  271. clone.children(':last').append('<span class="glyphicon glyphicon-remove text-danger icon-btn remove-outcome"></span>');
  272. if(hasOutcomes(table))
  273. {
  274. table.find('tbody').append(clone);
  275. table.find('.academic-year').attr('rowspan', header_rowspan+1);
  276. }
  277. }
  278. // Remove an Outcome
  279. function removeOutcome(table, row)
  280. {
  281. var header_rowspan = Number(table.find('.academic-year').attr('rowspan'));
  282. row.remove();
  283. table.find('.academic-year').attr('rowspan', header_rowspan-1);
  284. }
  285. // Fetch objectives associated to an outcome and program
  286. function fetchObjectives(outcome)
  287. {
  288. var outcome_id = outcome.find(':selected').val();
  289. var program_id = $('#program').data('program-id');
  290. $.post(
  291. "{{ URL::action('ObjectivesController@fetch') }}",
  292. {
  293. outcome_id: outcome_id,
  294. program_id: program_id,
  295. format: 'select'
  296. },
  297. function(data)
  298. {
  299. var select = outcome.closest('tr').find('.objective');
  300. if(data == '')
  301. {
  302. select.prop('disabled', true);
  303. select.empty().append('<option value="0"><span class="glyphicon glyphicon-remove"></span> None</option>');
  304. }
  305. else
  306. {
  307. select.prop('disabled', false);
  308. select.empty().append(data);
  309. }
  310. if(select.length > 1) {
  311. select.first().parent().siblings('.objective-select-wrapper').remove();
  312. }
  313. }
  314. );
  315. }
  316. @stop