skill_wheel.html.twig 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641
  1. {% autoescape false %}
  2. <script>
  3. /* Skill search input in the left menu */
  4. function check_skills_sidebar() {
  5. //Selecting only selected skills
  6. $("#skill_id option").each(function () {
  7. var skill_id = $(this).val();
  8. if (skill_id != "") {
  9. $.ajax({
  10. url: "{{ url }}&a=skill_exists",
  11. data: "skill_id=" + skill_id,
  12. async: false,
  13. success: function (return_value) {
  14. if (return_value == 0) {
  15. alert("{{ 'SkillDoesNotExist'|get_lang }}");
  16. //Deleting select option tag
  17. //$("#skill_id option[value="+skill_id+"]").remove();
  18. $("#skill_id").empty();
  19. //Deleting holder
  20. $("#skill_search .holder li").each(function () {
  21. if ($(this).attr("rel") == skill_id) {
  22. $(this).remove();
  23. }
  24. });
  25. } else {
  26. $("#skill_id option[value=" + skill_id + "]").remove();
  27. //Deleting holder
  28. $("#skill_search .holder li").each(function () {
  29. if ($(this).attr("rel") == skill_id) {
  30. $(this).remove();
  31. }
  32. });
  33. if ($('#skill_to_select_id_' + skill_id).length == 0) {
  34. skill_info = get_skill_info(skill_id);
  35. li = fill_skill_search_li(skill_id, skill_info.name);
  36. $("#skill_holder").append(li);
  37. }
  38. }
  39. }
  40. });
  41. }
  42. });
  43. }
  44. function fill_skill_search_li(skill_id, skill_name, checked) {
  45. var checked_condition = '',
  46. activeCondition = '',
  47. iconClassCondition = 'fa fa-square-o fa-fw';
  48. if (checked) {
  49. checked_condition = 'checked=checked';
  50. activeCondition = 'active';
  51. iconClassCondition = 'fa fa-check-square-o fa-fw';
  52. }
  53. return '\
  54. <tr>\n\
  55. <td>' + skill_name + '</td>\n\
  56. <td class="text-right">\n\
  57. <div class="btn-group btn-group-sm" data-toggle="buttons">\n\
  58. <label class="btn btn-default ' + activeCondition + '" aria-label="{{ 'Select'|get_lang }}" title="{{ 'SelectToSearch'|get_lang }}">\n\
  59. <input id="skill_to_select_id_' + skill_id + '" data-id="' + skill_id + '" name="' + skill_name + '" class="skill_to_select" type="checkbox" autocomplete="off" ' + checked_condition + '>\n\
  60. <span class="' + iconClassCondition + '" aria-hidden="true"></span>\n\
  61. </label>\n\
  62. <button class="btn btn-default load_wheel" aria-label="{{ 'Search'|get_lang }}" title="{{ 'PlaceOnTheWheel'|get_lang }}" data-id="' + skill_id + '">\n\
  63. <span class="fa fa-crosshairs fa-fw" aria-hidden="true"></span>\n\
  64. </button>\n\
  65. </div>\n\
  66. </td>\n\
  67. </tr>';
  68. }
  69. function check_skills_edit_form() {
  70. //selecting only selected parents
  71. $("#parent_id option:selected").each(function () {
  72. var skill_id = $(this).val();
  73. if (skill_id != "") {
  74. $.ajax({
  75. async: false,
  76. url: "{{ url }}&a=skill_exists",
  77. data: "skill_id=" + skill_id,
  78. success: function (return_value) {
  79. if (return_value == 0) {
  80. alert("{{ 'SkillDoesNotExist'|get_lang }}");
  81. //Deleting select option tag
  82. $("#parent_id").find('option').remove();
  83. //Deleting holder
  84. $("#skill_row .holder li").each(function () {
  85. if ($(this).attr("rel") == skill_id) {
  86. $(this).remove();
  87. }
  88. });
  89. } else {
  90. $("#parent_id").empty();
  91. $("#skill_edit_holder").find('li').remove();
  92. //Deleting holder
  93. $("#skill_row .holder li").each(function () {
  94. if ($(this).attr("rel") == skill_id) {
  95. $(this).remove();
  96. }
  97. });
  98. skill = get_skill_info(skill_id);
  99. $("#skill_edit_holder").append('<li class="bit-box" id="skill_option_' + skill_id + '"> ' + skill.name + '</li>');
  100. $("#parent_id").append('<option class="selected" selected="selected" value="' + skill_id + '"></option>');
  101. }
  102. }
  103. });
  104. }
  105. });
  106. }
  107. function check_gradebook() {
  108. //selecting only selected users
  109. $("#gradebook_id option:selected").each(function () {
  110. var gradebook_id = $(this).val();
  111. if (gradebook_id != "") {
  112. $.ajax({
  113. url: "{{ url }}&a=gradebook_exists",
  114. data: "gradebook_id=" + gradebook_id,
  115. success: function (return_value) {
  116. if (return_value == 0) {
  117. alert("{{ 'GradebookDoesNotExist'|get_lang }}");
  118. //Deleting select option tag
  119. $("#gradebook_id option[value=" + gradebook_id + "]").remove();
  120. //Deleting holder
  121. $("#gradebook_row .holder li").each(function () {
  122. if ($(this).attr("rel") == gradebook_id) {
  123. $(this).remove();
  124. }
  125. });
  126. } else {
  127. //Deleting holder
  128. $("#gradebook_row .holder li").each(function () {
  129. if ($(this).attr("rel") == gradebook_id) {
  130. $(this).remove();
  131. }
  132. });
  133. if ($('#gradebook_item_' + gradebook_id).length == 0) {
  134. gradebook = get_gradebook_info(gradebook_id);
  135. if (gradebook) {
  136. $("#gradebook_holder").append('<li id="gradebook_item_' + gradebook_id + '" class="bit-box"> ' + gradebook.name +
  137. ' <a rel="' + gradebook_id + '" class="closebutton" href="#"></a></li>');
  138. }
  139. }
  140. }
  141. }
  142. });
  143. }
  144. });
  145. }
  146. function delete_gradebook_from_skill(skill_id, gradebook_id) {
  147. $.ajax({
  148. url: url + '&a=delete_gradebook_from_skill&skill_id=' + skill_id + '&gradebook_id=' + gradebook_id,
  149. async: false,
  150. success: function (result) {
  151. //if (result == 1) {
  152. $('#gradebook_item_' + gradebook_id).remove();
  153. $("#gradebook_id option").each(function () {
  154. if ($(this).attr("value") == gradebook_id) {
  155. $(this).remove();
  156. }
  157. });
  158. //}
  159. }
  160. });
  161. }
  162. function return_skill_list_from_profile_search() {
  163. var skill_list = {};
  164. if ($("#profile_search li").length != 0) {
  165. $("#profile_search li").each(function (index) {
  166. id = $(this).attr("id").split('_')[3];
  167. if (id) {
  168. skill_list[index] = id;
  169. }
  170. });
  171. }
  172. return skill_list;
  173. }
  174. function submit_profile_search_form() {
  175. $("#skill_wheel").remove();
  176. var skill_list = return_skill_list_from_profile_search();
  177. if (skill_list.length != 0) {
  178. skill_list = {'skill_id': skill_list};
  179. skill_params = $.param(skill_list);
  180. $.ajax({
  181. url: url + '&a=profile_matches&' + skill_params,
  182. async: false,
  183. success: function (html) {
  184. //users = jQuery.parseJSON(users);
  185. $('#wheel_container').html(html);
  186. }
  187. });
  188. }
  189. //return skill;
  190. }
  191. function add_skill_in_profile_list(skill_id, skill_name) {
  192. if ($('#profile_match_item_' + skill_id).length == 0) {
  193. $('#profile_search').append('<li class="bit-box" id="profile_match_item_' + skill_id + '">' + skill_name +
  194. ' <a rel="' + skill_id + '" class="closebutton" href="#"></a> </li>');
  195. } else {
  196. $('#profile_match_item_' + skill_id).remove();
  197. }
  198. toogle_save_profile_form();
  199. }
  200. function toogle_save_profile_form() {
  201. //Hiding showing the save this search
  202. if ($('#profile_search li').length == 0) {
  203. $('#profile-options-container').hide();
  204. } else {
  205. $('#profile-options-container').show();
  206. }
  207. }
  208. $(function() {
  209. /* Skill search */
  210. // Tool tip (in exercises)
  211. var tip_options = {
  212. placement: 'right'
  213. }
  214. $('.tooltip_skill').tooltip(tip_options);
  215. /* Skill item list onclick */
  216. $("#skill_holder").on("change", "input.skill_to_select", function () {
  217. var self = $(this);
  218. skill_id = self.data('id') || 0;
  219. skill_name = self.attr('name');
  220. add_skill_in_profile_list(skill_id, skill_name);
  221. if (this.checked) {
  222. self.next('.fa').replaceWith('<span class="fa fa-check-square-o fa-fw" aria-hidden="true"></span>');
  223. } else {
  224. self.next('.fa').replaceWith('<span class="fa fa-square-o fa-fw" aria-hidden="true"></span>');
  225. }
  226. });
  227. /* URL link when searching skills */
  228. $("#skill_holder").on("click", "button.load_wheel", function (e) {
  229. e.preventDefault();
  230. skill_id = $(this).data('id') || 0;
  231. skill_to_load_from_get = 0;
  232. load_nodes(skill_id, main_depth);
  233. });
  234. /* URL link when searching skills */
  235. $("a.load_root").on("click", function (e) {
  236. e.preventDefault();
  237. skill_id = $(this).attr('rel');
  238. skill_to_load_from_get = 0;
  239. load_nodes(skill_id, main_depth);
  240. });
  241. /* Profile matcher */
  242. /* Submit button */
  243. $("#search_profile_form").submit(function () {
  244. submit_profile_search_form();
  245. return false;
  246. });
  247. $("form#save_profile_form_button").on('submit', function (e) {
  248. e.preventDefault();
  249. var profileId = parseInt($('input[name="profile_id"]').val());
  250. var getProfileInfo = $.getJSON(
  251. '{{ url }}',
  252. {
  253. a: 'get_profile',
  254. profile_id: profileId
  255. }
  256. );
  257. $.when(getProfileInfo).done(function (profileInfo) {
  258. $("#name_profile").val(profileInfo.name);
  259. $("#description_profile").val(profileInfo.description);
  260. $('#frm-save-profile').modal('show');
  261. });
  262. });
  263. /* Close button in profile matcher items */
  264. $("#profile_search").on("click", "a.closebutton", function () {
  265. skill_id = $(this).attr('rel');
  266. $('input[id=skill_to_select_id_' + skill_id + ']').attr('checked', false);
  267. $('#profile_match_item_' + skill_id).remove();
  268. submit_profile_search_form();
  269. toogle_save_profile_form();
  270. });
  271. // Fill saved profiles list
  272. update_my_saved_profiles();
  273. /* Click in profile */
  274. $("#saved_profiles").on("click", "button.skill-wheel-load-profile", function (e) {
  275. e.preventDefault();
  276. profile_id = $(this).data('id') || 0;
  277. $('input[name="profile_id"]').val(profile_id);
  278. $.ajax({
  279. url: '{{ url }}&a=get_skills_by_profile&profile_id=' + profile_id,
  280. success: function (json) {
  281. $('#profile_search').empty();
  282. $('#skill_holder').empty();
  283. skill_list = $.parseJSON(json);
  284. $.each(skill_list, function (index, skill_id) {
  285. skill_info = get_skill_info(skill_id);
  286. li = fill_skill_search_li(skill_id, skill_info.name, 1);
  287. $("#skill_holder").append(li);
  288. add_skill_in_profile_list(skill_id, skill_info.name);
  289. });
  290. submit_profile_search_form();
  291. }
  292. });
  293. });
  294. $("#saved_profiles").on('click', 'button.skill-wheel-delete-profile', function (e) {
  295. e.preventDefault();
  296. var self = $(this),
  297. profileId = self.data('id') || 0;
  298. $.getJSON('{{ url }}&a=delete_profile', {
  299. profile: profileId
  300. }, function (response) {
  301. if (response.status) {
  302. update_my_saved_profiles();
  303. }
  304. });
  305. });
  306. /* Wheel skill popup form */
  307. /* Close button in gradebook select */
  308. $("#gradebook_holder").on("click", "a.closebutton", function () {
  309. gradebook_id = $(this).attr('rel');
  310. skill_id = $('input[name="id"]').attr('value');
  311. delete_gradebook_from_skill(skill_id, gradebook_id);
  312. });
  313. $("#skill_id").select2({
  314. ajax: {
  315. url: '{{ url }}&a=find_skills',
  316. processResults: function (data) {
  317. return {
  318. results: data.items
  319. };
  320. }
  321. },
  322. cache: false,
  323. placeholder: '{{ 'EnterTheSkillNameToSearch'|get_lang }}'
  324. }).on('change', function () {
  325. check_skills_sidebar();
  326. });
  327. load_nodes(0, main_depth);
  328. function update_my_saved_profiles() {
  329. $.ajax({
  330. url: '{{ url }}&a=get_saved_profiles',
  331. success: function (data) {
  332. $("#saved_profiles").html(data);
  333. }
  334. });
  335. }
  336. /* change background color */
  337. $('#skill-change-background-options li a').on('click', function (e) {
  338. e.preventDefault();
  339. var newBackgroundColor = $(this).data('color') || '#FFF';
  340. $("#page-back").css("background", newBackgroundColor);
  341. });
  342. /* Generated random colour */
  343. /*
  344. function colour(d) {
  345. if (d.children) {
  346. // There is a maximum of two children!
  347. var colours = d.children.map(colour),
  348. a = d3.hsl(colours[0]),
  349. b = d3.hsl(colours[1]);
  350. // L*a*b* might be better here...
  351. return d3.hsl((a.h + b.h) / 2, a.s * 1.2, a.levels_to_show / 1.2);
  352. }
  353. return d.colour || "#fff";
  354. }*/
  355. $('#form-button-edit').on('click', function (e) {
  356. e.preventDefault();
  357. if (SkillWheel.currentSkill === null) {
  358. return;
  359. }
  360. window.location.href = "{{ _p.web_main }}admin/skill_edit.php?id=" + SkillWheel.currentSkill.id;
  361. });
  362. $('#form-button-create-child').on('click', function (e) {
  363. e.preventDefault();
  364. if (SkillWheel.currentSkill === null) {
  365. return;
  366. }
  367. window.location.href = "{{ _p.web_main }}admin/skill_create.php?parent=" + SkillWheel.currentSkill.id;
  368. });
  369. $('#form-button-add-to-profile').on('click', function (e) {
  370. e.preventDefault();
  371. if (SkillWheel.currentSkill === null) {
  372. return;
  373. }
  374. add_skill_in_profile_list(SkillWheel.currentSkill.id, SkillWheel.currentSkill.name);
  375. });
  376. $('#frm-save-profile').on('hidden.bs.modal', function () {
  377. $("#name_profile").val('');
  378. $("#description_profile").val('');
  379. $('input[name="profile_id"]').val(0);
  380. });
  381. $('#form-button-save-profile').on('click', function (e) {
  382. e.preventDefault();
  383. var saveProfile = $.ajax(
  384. '{{ url }}',
  385. {
  386. data: {
  387. a: 'save_profile',
  388. name: $("#name_profile").val(),
  389. description: $("#description_profile").val(),
  390. skill_id: return_skill_list_from_profile_search(),
  391. profile: $('input[name="profile_id"]').val()
  392. }
  393. }
  394. );
  395. $.when(saveProfile).done(function (response) {
  396. if (parseInt(response) === 1) {
  397. update_my_saved_profiles();
  398. alert("{{ "Saved" | get_lang }}");
  399. } else {
  400. alert("{{ "Error" | get_lang }}");
  401. }
  402. $('#frm-save-profile').modal('hide');
  403. });
  404. });
  405. $(".facebook-auto").css("width","100%");
  406. $(".facebook-auto ul").css("width","100%");
  407. $("ul.holder").css("width","100%");
  408. });
  409. </script>
  410. <div id="page-back" class="page-skill">
  411. <div class="container-fluid">
  412. <div class="row">
  413. <div class="col-md-3 skill-options">
  414. <div class="skill-home">
  415. <a class="btn btn-large btn-block btn-primary" href="{{ _p.web }}user_portal.php">
  416. <em class="fa fa-home"></em> {{ "ReturnToCourseList"|get_lang }}
  417. </a>
  418. </div>
  419. <div class="card">
  420. <div class="card-body">
  421. <div id="saved_profiles"></div>
  422. <h4 class="page-header">{{ 'WhatSkillsAreYouLookingFor'|get_lang }}</h4>
  423. <div class="search-skill">
  424. <form id="skill_search" class="form-search">
  425. <select id="skill_id" name="skill_id" style="width: 100%;" multiple></select>
  426. <table id="skill_holder" class="table table-condensed"></table>
  427. </form>
  428. </div>
  429. <div class="search-profile-skill">
  430. <ul id="profile_search" class="holder holder_simple hide"></ul>
  431. <form id="search_profile_form" class="form-search">
  432. <button class="btn btn-default btn-block" type="submit">
  433. <em class="fa fa-search"></em> {{ "SearchProfileMatches"|get_lang }}
  434. </button>
  435. </form>
  436. <h4 class="page-header">{{ 'IsThisWhatYouWereLookingFor'|get_lang }}</h4>
  437. <form id="save_profile_form_button" class="form-search">
  438. <button class="btn btn-default btn-block" type="submit">
  439. <em class="fa fa-floppy-o"></em> {{ "SaveThisSearch"|get_lang }}
  440. </button>
  441. </form>
  442. </div>
  443. <hr>
  444. <p>
  445. <a class="btn btn-block btn-primary load_root" rel="0" href="#">
  446. <em class="fa fa-eye"></em> {{ "ViewSkillsWheel"|get_lang }}
  447. </a>
  448. </p>
  449. </div>
  450. </div>
  451. <div class="accordion" id="wheel-second-accordion" role="tablist" aria-multiselectable="true">
  452. <div class="card">
  453. <div class="card-header" role="tab" id="wheel-legend-heading">
  454. <h4 class="card-title">
  455. <a role="button" data-toggle="collapse" data-parent="#wheel-second-accordion" href="#wheel-legend-collapse" aria-expanded="true" aria-controls="wheel-legend-collapse">
  456. {{ "Legend"|get_lang }}
  457. </a>
  458. </h4>
  459. </div>
  460. <div id="wheel-legend-collapse" class="collapse in" role="tabpanel" aria-labelledby="wheel-legend-heading">
  461. <div class="card-body">
  462. <ul class="fa-ul">
  463. <li>
  464. <em class="fa fa-li fa-square skill-legend-basic"></em> {{ "BasicSkills"|get_lang }}
  465. </li>
  466. <li>
  467. <em class="fa fa-li fa-square skill-legend-add"></em> {{ "SkillsYouCanLearn"|get_lang }}
  468. </li>
  469. <li>
  470. <em class="fa fa-li fa-square skill-legend-search"></em> {{ "SkillsSearchedFor"|get_lang }}
  471. </li>
  472. </ul>
  473. </div>
  474. </div>
  475. </div>
  476. <div class="card">
  477. <div class="card-header" role="tab" id="wheel-display-heading">
  478. <h4 class="card-title">
  479. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#wheel-second-accordion" href="#wheel-display-collapse" aria-expanded="false" aria-controls="wheel-display-collapse">
  480. {{ 'DisplayOptions' | get_lang }}
  481. </a>
  482. </h4>
  483. </div>
  484. <div id="wheel-display-collapse" class="collapse" role="tabpanel" aria-labelledby="wheel-display-heading">
  485. <div class="card-body">
  486. <p>{{ 'ChooseABackgroundColor' | get_lang }}</p>
  487. <ul class="list-unstyled" id="skill-change-background-options">
  488. <li><a href="#" data-color="#FFFFFF">{{ 'White' | get_lang }}</a></li>
  489. <li><a href="#" data-color="#000000">{{ 'Black' | get_lang }}</a></li>
  490. <li><a href="#" data-color="#A9E2F3">{{ 'LightBlue' }}</a></li>
  491. <li><a href="#" data-color="#848484">{{ 'Gray' | get_lang }}</a></li>
  492. <li><a href="#" data-color="#F7F8E0">{{ 'Corn' | get_lang }}</a></li>
  493. </ul>
  494. </div>
  495. </div>
  496. </div>
  497. </div>
  498. </div>
  499. <div id="wheel_container" class="col-md-9">
  500. <div id="skill_wheel">
  501. <img src="">
  502. </div>
  503. </div>
  504. </div>
  505. </div>
  506. </div>
  507. <div class="modal fade" id="frm-skill" tabindex="-1" role="dialog" aria-labelledby="form-skill-title" aria-hidden="true">
  508. <div class="modal-dialog modal-lg">
  509. <div class="modal-content">
  510. <div class="modal-header">
  511. <button type="button" class="close" data-dismiss="modal" aria-label="{{ "Close" | get_lang }}">
  512. <span aria-hidden="true">&times;</span>
  513. </button>
  514. <h4 class="modal-title" id="form-skill-title">{{ "Skill" | get_lang }}</h4>
  515. </div>
  516. <div class="modal-body">
  517. {{ dialogForm }}
  518. </div>
  519. <div class="modal-footer">
  520. <button id="form-button-edit" class="btn btn-primary">
  521. <em class="fa fa-edit"></em> {{ "Edit" | get_lang }}
  522. </button>
  523. <button id="form-button-create-child" class="btn btn-primary">
  524. <em class="fa fa-plus"></em> {{ "CreateChildSkill" | get_lang }}
  525. </button>
  526. <button id="form-button-add-to-profile" class="btn btn-primary">
  527. <em class="fa fa-check"></em> {{ "AddSkillToProfileSearch" | get_lang }}
  528. </button>
  529. <button type="button" class="btn btn-primary" data-dismiss="modal">
  530. <em class="fa fa-close"></em> {{ "Close" | get_lang }}
  531. </button>
  532. </div>
  533. </div>
  534. </div>
  535. </div>
  536. <div class="modal fade" id="frm-save-profile" tabindex="-1" role="dialog" aria-labelledby="form-save-profile-title" aria-hidden="true">
  537. <div class="modal-dialog modal-lg">
  538. <div class="modal-content">
  539. <div class="modal-header">
  540. <button type="button" class="close" data-dismiss="modal" aria-label="{{ "Close" | get_lang }}">
  541. <span aria-hidden="true">&times;</span>
  542. </button>
  543. <h4 class="modal-title" id="form-save-profile-title">{{ "SkillProfile" | get_lang }}</h4>
  544. </div>
  545. <div class="modal-body">
  546. {{ save_profile_form }}
  547. </div>
  548. <div class="modal-footer">
  549. <button id="form-button-save-profile" class="btn btn-primary">
  550. <em class="fa fa-save"></em> {{ "Save" | get_lang }}
  551. </button>
  552. <button type="button" class="btn btn-primary" data-dismiss="modal">
  553. <em class="fa fa-close"></em> {{ "Close" | get_lang }}
  554. </button>
  555. </div>
  556. </div>
  557. </div>
  558. </div>
  559. {% endautoescape %}