skill_wheel.tpl 25 KB

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