skill_wheel.tpl 26 KB

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