skill_wheel_student.tpl 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451
  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><a id="skill_to_select_id_'+skill_id+'" href="#" class="load_wheel" rel="'+skill_id+'">'+skill_name+'</a></li>';
  50. }
  51. function load_skill_info(skill_id) {
  52. $.ajax({
  53. url: url+'&a=get_skill_course_info&id='+skill_id,
  54. async: false,
  55. success: function(data) {
  56. $('#skill_info').html(data);
  57. return data;
  58. }
  59. });
  60. }
  61. $(document).ready(function() {
  62. /* Skill search */
  63. /* Skill item list onclick */
  64. $("#skill_holder").on("click", "input.skill_to_select", function() {
  65. skill_id = $(this).attr('rel');
  66. skill_name = $(this).attr('name');
  67. add_skill_in_profile_list(skill_id, skill_name);
  68. });
  69. /* URL link when searching skills */
  70. $("#skill_holder").on("click", "a.load_wheel", function() {
  71. skill_id = $(this).attr('rel');
  72. skill_to_load_from_get = 0;
  73. load_nodes(skill_id, main_depth);
  74. load_skill_info(skill_id);
  75. });
  76. /* URL link when searching skills */
  77. $("#skill_search").on("click", "a.load_root", function() {
  78. skill_id = $(this).attr('rel');
  79. skill_to_load_from_get = 0;
  80. load_nodes(skill_id, main_depth);
  81. });
  82. /* When clicking in a course title */
  83. $("#skill_info").on("click", "a.course_description_popup", function() {
  84. course_code = $(this).attr('rel');
  85. $.ajax({
  86. url: url+'&a=get_course_info_popup&code='+course_code,
  87. async: false,
  88. success: function(data) {
  89. $('#course_info').html(data);
  90. $("#dialog-course-info").dialog({
  91. close: function() {
  92. $('#course_info').html('');
  93. }
  94. });
  95. $("#dialog-course-info").dialog("open");
  96. }
  97. });
  98. });
  99. /* change background color */
  100. $(document).ready(function () {
  101. $("#celestial").click(function () {
  102. $("#page-back").css("background","#A9E2F3");
  103. });
  104. $("#white").click(function () {
  105. $("#page-back").css("background","#FFFFFF");
  106. });
  107. $("#black").click(function () {
  108. $("#page-back").css("background","#000000");
  109. });
  110. $("#lead").click(function () {
  111. $("#page-back").css("background","#848484");
  112. });
  113. $("#light-yellow").click(function () {
  114. $("#page-back").css("background","#F7F8E0");
  115. });
  116. });
  117. /* Wheel skill popup form */
  118. /* Close button in gradebook select */
  119. $("#gradebook_holder").on("click", "a.closebutton", function() {
  120. gradebook_id = $(this).attr('rel');
  121. skill_id = $('#id').attr('value');
  122. delete_gradebook_from_skill(skill_id, gradebook_id);
  123. });
  124. $("#skill_id").fcbkcomplete({
  125. json_url: "{{ url }}&a=find_skills",
  126. cache: false,
  127. filter_case: false,
  128. filter_hide: true,
  129. complete_text:"{{ 'StartToType' | get_lang }}",
  130. firstselected: true,
  131. //onremove: "testme",
  132. onselect:"check_skills_sidebar",
  133. filter_selected: true,
  134. newel: true
  135. });
  136. $("#parent_id").fcbkcomplete({
  137. json_url: "{{ url }}&a=find_skills",
  138. cache: false,
  139. filter_case: false,
  140. filter_hide: true,
  141. complete_text:"{{ 'StartToType' | get_lang }}",
  142. firstselected: true,
  143. //onremove: "testme",
  144. onselect:"check_skills_edit_form",
  145. filter_selected: true,
  146. newel: true
  147. });
  148. $("#gradebook_id").fcbkcomplete({
  149. json_url: "{{ url }}&a=find_gradebooks",
  150. cache: false,
  151. filter_case: false,
  152. filter_hide: true,
  153. complete_text:"{{ 'StartToType' | get_lang }}",
  154. firstselected: true,
  155. //onremove: "testme",
  156. onselect:"check_gradebook",
  157. filter_selected: true,
  158. newel: true
  159. });
  160. //Open dialog
  161. $("#dialog-form").dialog({
  162. autoOpen: false,
  163. modal : true,
  164. width : 600,
  165. height : 550
  166. });
  167. //Open dialog
  168. $("#dialog-course-info").dialog({
  169. autoOpen: false,
  170. modal : true,
  171. width : 550,
  172. height : 250
  173. });
  174. load_nodes(0, main_depth);
  175. function open_popup(skill_id, parent_id) {
  176. //Cleaning selected
  177. $("#gradebook_id").find('option').remove();
  178. $("#parent_id").find('option').remove();
  179. $("#gradebook_holder").find('li').remove();
  180. $("#skill_edit_holder").find('li').remove();
  181. var skill = false;
  182. if (skill_id) {
  183. skill = get_skill_info(skill_id);
  184. }
  185. var parent = false;
  186. if (parent_id) {
  187. parent = get_skill_info(parent_id);
  188. }
  189. if (skill) {
  190. var parent_info = get_skill_info(skill.extra.parent_id);
  191. $("#id").attr('value', skill.id);
  192. $("#name").attr('value', skill.name);
  193. $("#short_code").attr('value', skill.short_code);
  194. $("#description").attr('value', skill.description);
  195. //Filling parent_id
  196. $("#parent_id").append('<option class="selected" value="'+skill.extra.parent_id+'" selected="selected" >');
  197. $("#skill_edit_holder").append('<li class="bit-box">'+parent_info.name+'</li>');
  198. //Filling the gradebook_id
  199. jQuery.each(skill.gradebooks, function(index, data) {
  200. $("#gradebook_id").append('<option class="selected" value="'+data.id+'" selected="selected" >');
  201. $("#gradebook_holder").append('<li id="gradebook_item_'+data.id+'" class="bit-box">'+data.name+' <a rel="'+data.id+'" class="closebutton" href="#"></a> </li>');
  202. });
  203. $("#dialog-form").dialog({
  204. buttons: {
  205. "{{ "Edit"|get_lang }}" : function() {
  206. var params = $("#add_item").find(':input').serialize();
  207. add_skill(params);
  208. },
  209. /*"{{ "Delete"|get_lang }}" : function() {
  210. },*/
  211. "{{ "CreateChildSkill"|get_lang }}" : function() {
  212. open_popup(0, skill.id);
  213. },
  214. "{{ "AddSkillToProfileSearch"|get_lang }}" : function() {
  215. add_skill_in_profile_list(skill.id, skill.name);
  216. }
  217. },
  218. close: function() {
  219. $("#name").attr('value','');
  220. $("#description").attr('value', '');
  221. //Redirect to the main root
  222. load_nodes(0, main_depth);
  223. }
  224. });
  225. $("#dialog-form").dialog("open");
  226. }
  227. }
  228. });
  229. </script>
  230. <div id="page-back">
  231. <div class="container-fluid">
  232. <div class="row">
  233. <div class="col-md-3 skill-options">
  234. <div class="skill-home">
  235. <a class="btn btn-large btn-block btn-success" href="{{ _p.web }}user_portal.php">{{ "ReturnToCourseList"|get_lang }}</a>
  236. </div>
  237. <div class="skill-profile">
  238. <div class="avatar">
  239. <img width="100px" src="{{ userInfo.avatar }}" style="text-align: center">
  240. </div>
  241. <div class="info-user">
  242. <h4 class="title-skill">{{ userInfo.complete_name }}</h4>
  243. <p>
  244. <a href="{{ _p.web_main }}social/skills_ranking.php" class="btn btn-default btn-block" target="_blank">{{ 'YourSkillRankingX' | get_lang | format(ranking) }}</a>
  245. </p>
  246. {% if mySkills is not empty %}
  247. {%for skill in mySkills %}
  248. {% if skill.iconThumb is empty %}
  249. <img src="{{ 'award_red.png' | icon(22) }}" alt="{{ skill.name }}" title="{{ skill.name }}">
  250. {% else %}
  251. <img src="{{ _p.web_data }}{{ skill.iconThumb }}" alt="{{ skill.name }}" title="{{ skill.name }}">
  252. {% endif %}
  253. {% endfor %}
  254. {% endif %}
  255. {% for i in 1..(9 - ranking) %}
  256. <img src="{{ 'award_red_na.png' | icon(22) }}">
  257. {% endfor %}
  258. </div>
  259. </div>
  260. <!-- ACCORDION -->
  261. <div class="accordion" id="accordion2">
  262. {% if mySkills is not empty %}
  263. <div class="panel panel-default">
  264. <div class="accordion-heading">
  265. <a data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
  266. {{ 'MySkills'|get_lang }}
  267. </a>
  268. </div>
  269. <div id="collapseOne" class="panel-collapse collapse">
  270. <div class="panel-body">
  271. <!-- MY SKILLS -->
  272. <div id="my_skills" class="skill-items">
  273. <ul class="skill-winner">
  274. {%for skill in mySkills %}
  275. <li>
  276. <a class="" rel="{{ skill.id}}" href="#">{{ skill.name }}</a>
  277. </li>
  278. {% endfor %}
  279. </ul>
  280. </div>
  281. <!-- MY SKILLS -->
  282. </div>
  283. </div>
  284. </div>
  285. {% endif %}
  286. <div class="panel panel-default">
  287. <div class="panel-heading">
  288. <a data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
  289. {{ 'GetNewSkills' | get_lang }}
  290. </a>
  291. </div>
  292. <div id="collapseTwo" class="panel-collapse collapse">
  293. <div class="panel-body">
  294. <!-- SEARCH -->
  295. <div class="search-skill">
  296. <p>{{ 'EnterTheSkillNameToSearch' | get_lang }}</p>
  297. <form id="skill_search" class="form-search">
  298. <select id="skill_id" name="skill_id" /></select>
  299. <div class="button-skill">
  300. <a class="btn btn-default btn-block btn-large btn-danger load_root" rel="0" href="#">{{ "ViewSkillsWheel"|get_lang }}</a>
  301. <!-- <a id="clear_selection" class="btn">{{ "Clear"|get_lang }}</a> -->
  302. </div>
  303. <ul id="skill_holder" class="holder_simple"></ul>
  304. </form>
  305. </div>
  306. <!-- END SEARCH -->
  307. <!-- INFO SKILL -->
  308. <div class="section-info-skill">
  309. <h4 class="title-skill">{{ 'SkillInfo'|get_lang }}</h4>
  310. <div id="skill_info"></div>
  311. </div>
  312. <!-- END INFO SKILL -->
  313. </div>
  314. </div>
  315. </div>
  316. <div class="panel panel-default">
  317. <div class="panel-heading">
  318. <a data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
  319. {{ 'DisplayOptions' | get_lang }}
  320. </a>
  321. </div>
  322. <div id="collapseThree" class="panel-collapse collapse">
  323. <div class="panel-body">
  324. <p>{{ 'ChooseABackgroundColor' | get_lang }}</p>
  325. <ul>
  326. <li><a href="#" id="white">{{ 'White' | get_lang }}</a></li>
  327. <li><a href="#" id="black">{{ 'Black' | get_lang }}</a></li>
  328. <li><a href="#" id="celestial">{{ 'LightBlue' }}</a></li>
  329. <li><a href="#" id="lead">{{ 'Gray' | get_lang }}</a></li>
  330. <li><a href="#" id="light-yellow">{{ 'Corn' | get_lang }}</a></li>
  331. </ul>
  332. </div>
  333. </div>
  334. </div>
  335. <div class="panel panel-default">
  336. <div class="panel-heading">
  337. <a data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">
  338. {{ "Legend"|get_lang }}
  339. </a>
  340. </div>
  341. <div id="collapseFour" class="panel-collapse collapse">
  342. <div class="panel-body">
  343. <p><span class="label-info">&nbsp;&nbsp;&nbsp;&nbsp;</span> {{ "SkillsYouAcquired"|get_lang }}</p>
  344. <p><span class="label-warning">&nbsp;&nbsp;&nbsp;&nbsp;</span> {{ "SkillsYouCanLearn"|get_lang }}</p>
  345. <p><span class="label-important">&nbsp;&nbsp;&nbsp;&nbsp;</span> {{ "SkillsSearchedFor"|get_lang }}</p>
  346. </div>
  347. </div>
  348. </div>
  349. </div>
  350. <!-- END ACCORDEON -->
  351. </div>
  352. <div id="wheel_container" class="col-md-9">
  353. <div id="skill_wheel">
  354. <img src="">
  355. </div>
  356. </div>
  357. </div>
  358. <div id="dialog-course-info" style="display:none;">
  359. <div id="course_info">
  360. </div>
  361. </div>
  362. </div>
  363. </div>
  364. <div id="dialog-form" style="">
  365. <p class="validateTips"></p>
  366. <form id="add_item" class="form-horizontal" name="form">
  367. <fieldset>
  368. <div class="control-group">
  369. <label class="control-label" for="name">{{ 'Name' | get_lang }}</label>
  370. <div class="controls">
  371. <!--<input type="text" name="name" id="name" class="span4" readonly />-->
  372. <p id="name" class="span4">
  373. </p>
  374. </div>
  375. </div>
  376. <div class="control-group">
  377. <label class="control-label">{{ 'ShortCode' | get_lang }}</label>
  378. <div class="controls">
  379. <!--<input type="text" name="short_code" id="short_code" class="span2" readonly />-->
  380. <p id="short_code" class="span4">
  381. </p>
  382. </div>
  383. </div>
  384. <div id="skill_row" class="control-group">
  385. <label class="control-label" for="name">{{'Parent'|get_lang}}</label>
  386. <div class="controls">
  387. <ul id="skill_edit_holder" class="holder holder_simple">
  388. </ul>
  389. </div>
  390. </div>
  391. <div id="gradebook_row" class="control-group">
  392. <label class="control-label" for="name">{{'Gradebook'|get_lang}}</label>
  393. <div class="controls">
  394. <ul id="gradebook_holder" class="holder holder_simple">
  395. </ul>
  396. <span class="help-block">
  397. {{ 'WithCertificate'|get_lang }}
  398. </span>
  399. </div>
  400. </div>
  401. <div class="control-group">
  402. <label class="control-label" for="name">{{ 'Description'|get_lang }}</label>
  403. <div class="controls">
  404. <!--<textarea name="description" id="description" class="span4" rows="7" readonly>
  405. </textarea>-->
  406. <p id="description" class="span4">
  407. </p>
  408. </div>
  409. </div>
  410. </fieldset>
  411. </form>
  412. </div>