暫無描述

objectives.blade.php 13KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420
  1. @extends('layouts.master')
  2. @section('navigation')
  3. @include('local.managers.admins._navigation')
  4. @stop
  5. @section('main')
  6. <div class="row">
  7. <div class="col-md-6">
  8. <!-- Form to add a new objective -->
  9. <div class="panel panel-default panel-button">
  10. <div class="panel-heading">
  11. Create
  12. </div>
  13. <div class="panel-body">
  14. {{ Form::open(array('action' => 'Objective2Controller@create' )) }}
  15. <div id='outcomeGroup'>
  16. <label> Associated Outcome</label>
  17. <div class="form-group col-md-11" id='outcomeForm'>
  18. {{ Form::select('outcome[0]', $outcomes, null, ['class'=>'form-control selectpicker', 'id' =>'outcome[0]']) }}
  19. </div>
  20. </div>
  21. <input type='hidden' name='counter' id='counter' value=1>
  22. <button id='button-add-outcome' class='btn btn-md btn-secondary' onclick='addOutcomeTest()'>
  23. <span class='glyphicon glyphicon-plus'>
  24. </span>
  25. Add another Outcome
  26. </button>
  27. <!-- Associated Program -->
  28. <div class="form-group">
  29. {{ Form::label('program_id', 'Associated Program') }}
  30. <select id="program_id" name="program_id" class="form-control selectpicker">
  31. <option value="0">All</option>
  32. @foreach ($programs as $program)
  33. <option value="{{ $program->id }}">{{ $program->name }} [{{ $program->school->name }}]</option>
  34. @endforeach
  35. </select>
  36. </div>
  37. <div class="form-group">
  38. {{ Form::label('text', 'Text') }}
  39. {{ Form::text('text', '', array('class' => 'form-control')) }}
  40. </div>
  41. {{ Form::submit('Create', array('class' => 'btn btn-primary btn-block')) }}
  42. {{ Form::close() }}
  43. </div>
  44. </div>
  45. </div>
  46. <div class="col-md-6">
  47. <div class="panel panel-default panel-button">
  48. <div class="panel-heading">
  49. Edit
  50. </div>
  51. <div class="panel-body">
  52. {{ Form::open(array('action' => 'Objective2Controller@update')) }}
  53. <div class="form-group">
  54. {{ Form::label('objective_id', 'Objectives') }}
  55. <select id="select-objective" name="id" class="form-control selectpicker">
  56. @foreach ($objectives as $objective)
  57. <option value="{{ $objective->id }}" data-subtext="
  58. @if($objective->program)
  59. &nbsp;&nbsp;&nbsp;[{{ $objective->program->name }}]
  60. @endif
  61. ">
  62. {{ $objective->text }}
  63. </option>
  64. @endforeach
  65. </select>
  66. </div>
  67. <!-- Associated Outcome -->
  68. <div class="form-group">
  69. <div id='assocOutcomeGroup'>
  70. <label>Associated Outcome</label>
  71. {{ Form::select('assoc_outcome[]', $outcomes, null, ['class'=>'form-control selectpicker', 'id'=>'assoc_outcome0']) }}
  72. </div>
  73. </div>
  74. <button id='button-add-assoc-outcome' class='btn btn-md btn-secondary' onclick='addAssoc()'>
  75. <span class='glyphicon glyphicon-plus'>
  76. </span>
  77. Add another Outcome
  78. </button>
  79. <!-- Associated Program -->
  80. <div class="form-group">
  81. {{ Form::label('program_id2', 'Associated Program') }}
  82. <select id="program_id2" name="program_id" class="form-control selectpicker">
  83. <option value="0">All</option>
  84. @foreach ($programs as $program)
  85. <option value="{{ $program->id }}">{{ $program->name }} [{{ $program->school->name }}]</option>
  86. @endforeach
  87. </select>
  88. </div>
  89. <!-- Status -->
  90. <div class="form-group">
  91. {{ Form::label('status', 'Status') }}
  92. <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>
  93. <select id="status" name="status" class="form-control">
  94. <option value="1">Active</option>
  95. <option value="0">Inactive</option>
  96. </select>
  97. </div>
  98. <div class="form-group">
  99. {{ Form::label('text', 'Text') }}
  100. {{ Form::text('text', Input::old('text'), array('class' => 'form-control', 'id'=>'objective-text')) }}
  101. </div>
  102. {{ Form::submit('Update', array('class' => 'btn btn-primary btn-block')) }}
  103. {{ Form::close() }}
  104. </div>
  105. </div>
  106. </div>
  107. </div>
  108. <script>
  109. var outcomeHTML = document.getElementById('outcomeGroup').innerHTML;
  110. var selectOptions = document.getElementById('outcome[0]').innerHTML;
  111. var ran = false;
  112. var counter = 1;
  113. var counterAssoc = 1;
  114. //Add Another Outcome
  115. function changeOutcomeHtml() {
  116. var outcomeHTML = document.getElementById('outcomeGroup').innerHTML;
  117. outcomeHTML = outcomeHTML.replace('outcome[' + counter.toString() + ']', 'outcome[' + (counter + 1).toString() + ']');
  118. counter += 1;
  119. document.getElementById("outcomeGroup").innerHTML += outcomeHTML;
  120. document.getElementById('button-add-outcome').onclick = addOutcome;
  121. }
  122. function addOutcome() {
  123. outcomeHTML = outcomeHTML.replace('outcome[' + counter.toString() + ']', 'outcome[' + (counter + 1).toString() + ']');
  124. counter += 1;
  125. document.getElementById("outcomeGroup").innerHTML += outcomeHTML;
  126. }
  127. function addOutcomeTest() {
  128. var $select = $('<select/>', {
  129. 'class': "selectpicker form-control",
  130. 'name': "outcome[" + counter.toString() + "]",
  131. 'data-live-search': 'true'
  132. });
  133. var $div = $('<div/>', {
  134. 'id': 'outcomeForm' + counter.toString(),
  135. 'class': 'form-group col-md-11'
  136. });
  137. var $divForButton = $('<div/>', {
  138. 'class': 'col-md-1',
  139. 'id': 'close' + counter.toString()
  140. });
  141. var $button = $('<button/>', {
  142. 'type': 'button',
  143. 'class': 'btn btn-primary',
  144. 'onclick': 'deleteLast()'
  145. });
  146. $button.append('X');
  147. $divForButton.append($button);
  148. $div.appendTo('#outcomeGroup')
  149. $select.append(selectOptions);
  150. $select.appendTo('#outcomeForm' + counter.toString()).selectpicker('refresh');
  151. $divForButton.appendTo('#outcomeGroup');
  152. counter += 1;
  153. $('#counter').val(counter);
  154. }
  155. function deleteLast() {
  156. div = document.getElementById('outcomeForm' + (counter - 1).toString());
  157. div.remove();
  158. button = document.getElementById('close' + (counter - 1).toString());
  159. button.remove();
  160. counter -= 1;
  161. $('#counter').val(counter);
  162. }
  163. function fetchObjectiveForEditing() {
  164. var id = $('#select-objective').find(':selected').val();
  165. $.post(
  166. "{{ URL::action('Objective2Controller@fetchObjectiveWithTrashed') }}", {
  167. id: id
  168. },
  169. function(json) {
  170. var text = json[0].text;
  171. // Display info
  172. $('#objective-text').val(text);
  173. // Select associated outcome
  174. var outcome_id = json[0].outcome_id;
  175. $('#assoc_outcome0').val(outcome_id);
  176. $('#assoc_outcome0').selectpicker('refresh');
  177. var length = json.length;
  178. if (ran == true) {
  179. for (var i = counterAssoc; i != 0; i--) {
  180. deleteLastAssoc(i);
  181. }
  182. counterAssoc = 1
  183. }
  184. for (var i = 1; i < length; i++) {
  185. var $select = $('<select />', {
  186. 'class': "selectpicker form-control",
  187. 'name': "assoc_outcome[]",
  188. 'data-live-search': 'true',
  189. 'id': 'assoc_outcome' + i.toString()
  190. });
  191. var $div = $('<div />', {
  192. 'id': 'assocOutcomeForm' + i.toString(),
  193. 'class': 'form-group col-md-11'
  194. });
  195. var $divForButton = $('<div />', {
  196. 'class': 'col-md-1',
  197. 'id': 'closeAssoc' + i.toString()
  198. });
  199. var $button = $('<button />', {
  200. 'type': 'button',
  201. 'class': 'btn btn-primary',
  202. 'onclick': 'deleteLastAssoc()'
  203. });
  204. $button.append('X');
  205. $divForButton.append($button);
  206. $div.appendTo('#assocOutcomeGroup')
  207. $select.append(selectOptions);
  208. $select.appendTo('#assocOutcomeForm' + i.toString()).selectpicker('refresh');
  209. $divForButton.appendTo('#assocOutcomeGroup');
  210. $('#assoc_outcome' + i.toString()).val(json[i].outcome_id);
  211. $('#assoc_outcome' + i.toString()).selectpicker('refresh');
  212. counterAssoc = i;
  213. ran = true;
  214. }
  215. // Select associated program
  216. if (json[0].program_id) {
  217. $('#program_id2').val(json[0].program_id);
  218. } else {
  219. $('#program_id2').val(0);
  220. }
  221. $('#program_id2').selectpicker('refresh');
  222. // Select status
  223. if (json[0].deleted_at)
  224. $('#status').val(0);
  225. else
  226. $('#status').val(1);
  227. },
  228. 'json'
  229. );
  230. }
  231. function deleteLastAssoc() {
  232. div = document.getElementById('assocOutcomeForm' + (counterAssoc).toString());
  233. div.remove();
  234. button = document.getElementById('closeAssoc' + (counterAssoc).toString());
  235. button.remove();
  236. counterAssoc -= 1;
  237. }
  238. function addAssoc() {
  239. var $select = $('<select />', {
  240. 'class': "selectpicker form-control",
  241. 'name': "assoc_outcome[]",
  242. 'data-live-search': 'true',
  243. 'id': 'assoc_outcome' + counterAssoc.toString()
  244. });
  245. var $div = $('<div />', {
  246. 'id': 'assocOutcomeForm' + counterAssoc.toString(),
  247. 'class': 'form-group col-md-11'
  248. });
  249. var $divForButton = $('<div />', {
  250. 'class': 'col-md-1',
  251. 'id': 'closeAssoc' + counterAssoc.toString()
  252. });
  253. var $button = $('<button />', {
  254. 'type': 'button',
  255. 'class': 'btn btn-primary',
  256. 'onclick': 'deleteLastAssoc()'
  257. });
  258. $button.append('X');
  259. $divForButton.append($button);
  260. $div.appendTo('#assocOutcomeGroup')
  261. $select.append(selectOptions);
  262. $select.appendTo('#assocOutcomeForm' + counterAssoc.toString()).selectpicker('refresh');
  263. $divForButton.appendTo('#assocOutcomeGroup');
  264. ran = true;
  265. counterAssoc += 1;
  266. }
  267. </script>
  268. @stop
  269. @section('javascript')
  270. // --------------------------------------------------------------------------
  271. // Page load
  272. // --------------------------------------------------------------------------
  273. // Hide accordion panel contents by default
  274. $('.panel-group .panel-body').hide();
  275. $('#outcome-display').parent().hide();
  276. fetchObjectiveForEditing();
  277. // setCriterionStatus();
  278. // --------------------------------------------------------------------------
  279. // Functions
  280. // --------------------------------------------------------------------------
  281. // Fetch criterion info for editing
  282. $('#button-add-outcome').on('click', function(e) {
  283. // Prevent the default action of the clicked item. In this case that is submit
  284. e.preventDefault();
  285. return false;
  286. });
  287. $('#button-add-assoc-outcome').on('click', function(e) {
  288. // Prevent the default action of the clicked item. In this case that is submit
  289. e.preventDefault();
  290. return false;
  291. });
  292. // --------------------------------------------------------------------------
  293. // Events
  294. // --------------------------------------------------------------------------
  295. // When panel heading is clicked, toggle it
  296. $('.panel-group .panel-heading').on('click', function()
  297. {
  298. $(this).next().stop().slideToggle();
  299. })
  300. // When list item is clicked, load corresponding info
  301. $('#select-objective').on('change', function()
  302. {
  303. fetchObjectiveForEditing();
  304. $('.selectpicker').selectpicker('refresh');
  305. });
  306. // When list item is clicked, load corresponding info
  307. $('.selectpicker').on('change', function()
  308. {
  309. //alert($(this).find(':selected').val());
  310. $('.selectpicker').selectpicker('refresh');
  311. });
  312. @stop