skill_wheel_student.tpl 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308
  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. '<a id="skill_to_select_id_' + skill_id + '" href="#" class="load_wheel" rel="' + skill_id + '">' +
  51. skill_name +
  52. '</a>' +
  53. '</li>';
  54. }
  55. function load_skill_info(skill_id) {
  56. $.ajax({
  57. url: url + '&a=get_skill_course_info&id=' + skill_id,
  58. async: false,
  59. success: function (data) {
  60. $('#skill_info').html(data);
  61. return data;
  62. }
  63. });
  64. }
  65. $(document).ready(function () {
  66. /* Skill search */
  67. /* Skill item list onclick */
  68. $("#skill_holder").on("click", "input.skill_to_select", function () {
  69. skill_id = $(this).attr('rel');
  70. skill_name = $(this).attr('name');
  71. add_skill_in_profile_list(skill_id, skill_name);
  72. });
  73. /* URL link when searching skills */
  74. $("#skill_holder").on("click", "a.load_wheel", function () {
  75. skill_id = $(this).attr('rel');
  76. skill_to_load_from_get = 0;
  77. load_nodes(skill_id, main_depth);
  78. load_skill_info(skill_id);
  79. });
  80. /* URL link when searching skills */
  81. $("a.load_root").on("click", function () {
  82. skill_id = $(this).attr('rel');
  83. skill_to_load_from_get = 0;
  84. load_nodes(skill_id, main_depth);
  85. });
  86. /* When clicking in a course title */
  87. $("#skill_info").on("click", "a.course_description_popup[rel]", function (e) {
  88. e.preventDefault();
  89. var getCourseInfo = $.ajax(url, {
  90. data: {
  91. a: 'get_course_info_popup',
  92. code: $(this).attr('rel')
  93. }
  94. }
  95. );
  96. $.when(getCourseInfo).done(function (response) {
  97. $('#frm-course-info').find('.modal-body').html(response);
  98. $('#frm-course-info').modal('show');
  99. });
  100. });
  101. /* change background color */
  102. $('#skill-change-background-options li a').on('click', function (e) {
  103. e.preventDefault();
  104. var newBackgroundColor = $(this).data('color') || '#FFF';
  105. $("#page-back").css("background", newBackgroundColor);
  106. });
  107. /* Wheel skill popup form */
  108. $("#skill_id").fcbkcomplete({
  109. json_url: "{{ url }}&a=find_skills",
  110. cache: false,
  111. filter_case: false,
  112. filter_hide: true,
  113. complete_text: "{{ 'EnterTheSkillNameToSearch'|get_lang }}",
  114. firstselected: true,
  115. //onremove: "testme",
  116. onselect: "check_skills_sidebar",
  117. filter_selected: true,
  118. newel: true
  119. });
  120. load_nodes(0, main_depth);
  121. $('#frm-course-info').on('', function () {
  122. $('#frm-course-info').find('.modal-body').html('');
  123. });
  124. });
  125. </script>
  126. <div id="page-back" class="page-skill">
  127. <div class="container-fluid">
  128. <div class="row">
  129. <div class="col-md-3 skill-options">
  130. <p class="skill-home">
  131. <a class="btn btn-large btn-block btn-success" href="{{ _p.web }}user_portal.php">
  132. <i class="fa fa-home"></i> {{ "ReturnToCourseList"|get_lang }}
  133. </a>
  134. </p>
  135. <div class="panel panel-default">
  136. <div class="panel-body">
  137. <figure class="text-center">
  138. <img width="100px" src="{{ user_info.avatar }}" class="center-block">
  139. <figcaption class="lead">{{ user_info.complete_name }}</figcaption>
  140. </figure>
  141. <p class="text-center">
  142. <a href="{{ _p.web_main }}social/skills_ranking.php" class="btn btn-default" target="_blank">{{ 'YourSkillRankingX'|get_lang|format(ranking) }}</a>
  143. </p>
  144. <div class="text-center">
  145. {% if skills is not empty %}
  146. {% for skill in skills %}
  147. {% if skill.icon is empty %}
  148. <img src="{{ 'badges.png'|icon(32) }}" width="32" height="32" alt="{{ skill.name }}" title="{{ skill.name }}">
  149. {% else %}
  150. <img src="{{ skill.web_icon_thumb_path }}" width="32" height="32" alt="{{ skill.name }}" title="{{ skill.name }}">
  151. {% endif %}
  152. {% endfor %}
  153. {% endif %}
  154. {% for i in 1..(5 - ranking) %}
  155. <img src="{{ 'badges-default.png'|icon(32) }}" width="32" height="32">
  156. {% endfor %}
  157. </div>
  158. </div>
  159. </div>
  160. <!-- ACCORDION -->
  161. <div class="accordion" id="accordion2">
  162. <div class="panel panel-primary">
  163. <div class="panel-heading">
  164. <a data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
  165. {{ 'GetNewSkills'|get_lang }}
  166. </a>
  167. </div>
  168. <div id="collapseTwo" class="panel-collapse collapse">
  169. <div class="panel-body">
  170. <!-- SEARCH -->
  171. <div class="search-skill">
  172. <h5 class="page-header">{{ 'SkillsSearch'|get_lang }}</h5>
  173. <form id="skill_search" class="form-search">
  174. <select id="skill_id" name="skill_id" /></select>
  175. <ul id="skill_holder" class="holder_simple clearfix"></ul>
  176. </form>
  177. </div>
  178. <!-- END SEARCH -->
  179. <!-- INFO SKILL -->
  180. <h5 class="page-header">{{ 'SkillInfo'|get_lang }}</h5>
  181. <div id="skill_info"></div>
  182. <!-- END INFO SKILL -->
  183. <p>
  184. <a class="btn btn-default btn-block load_root" rel="0" href="#">
  185. <i class="fa fa-eye"></i> {{ "ViewSkillsWheel"|get_lang }}
  186. </a>
  187. </p>
  188. </div>
  189. </div>
  190. </div>
  191. </div>
  192. <div class="panel-group" id="wheel-second-accordion" role="tablist" aria-multiselectable="true">
  193. <div class="panel panel-primary">
  194. <div class="panel-heading" role="tab" id="wheel-legend-heading">
  195. <h4 class="panel-title">
  196. <a role="button" data-toggle="collapse" data-parent="#wheel-second-accordion" href="#wheel-legend-collapse" aria-expanded="true" aria-controls="wheel-legend-collapse">
  197. {{ "Legend"|get_lang }}
  198. </a>
  199. </h4>
  200. </div>
  201. <div id="wheel-legend-collapse" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="wheel-legend-heading">
  202. <div class="panel-body">
  203. <ul class="fa-ul">
  204. <li>
  205. <i class="fa fa-li fa-square skill-legend-badges"></i> {{ "SkillsYouAcquired"|get_lang }}
  206. </li>
  207. <li>
  208. <i class="fa fa-li fa-square skill-legend-add"></i> {{ "SkillsYouCanLearn"|get_lang }}
  209. </li>
  210. <li>
  211. <i class="fa fa-li fa-square skill-legend-search"></i> {{ "SkillsSearchedFor"|get_lang }}
  212. </li>
  213. </ul>
  214. </div>
  215. </div>
  216. </div>
  217. <div class="panel panel-primary">
  218. <div class="panel-heading" role="tab" id="wheel-display-heading">
  219. <h4 class="panel-title">
  220. <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">
  221. {{ 'DisplayOptions'|get_lang }}
  222. </a>
  223. </h4>
  224. </div>
  225. <div id="wheel-display-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="wheel-display-heading">
  226. <div class="panel-body">
  227. <p>{{ 'ChooseABackgroundColor'|get_lang }}</p>
  228. <ul class="list-unstyled" id="skill-change-background-options">
  229. <li><a href="#" data-color="#FFFFFF">{{ 'White'|get_lang }}</a></li>
  230. <li><a href="#" data-color="#000000">{{ 'Black'|get_lang }}</a></li>
  231. <li><a href="#" data-color="#A9E2F3">{{ 'LightBlue' }}</a></li>
  232. <li><a href="#" data-color="#848484">{{ 'Gray'|get_lang }}</a></li>
  233. <li><a href="#" data-color="#F7F8E0">{{ 'Corn'|get_lang }}</a></li>
  234. </ul>
  235. </div>
  236. </div>
  237. </div>
  238. </div>
  239. <!-- END ACCORDEON -->
  240. </div>
  241. <div id="wheel_container" class="col-md-9">
  242. <div id="skill_wheel">
  243. <img src="">
  244. </div>
  245. </div>
  246. </div>
  247. </div>
  248. </div>
  249. <div class="modal fade" id="frm-skill" tabindex="-1" role="dialog" aria-labelledby="form-skill-title" aria-hidden="true">
  250. <div class="modal-dialog modal-lg">
  251. <div class="modal-content">
  252. <div class="modal-header">
  253. <button type="button" class="close" data-dismiss="modal" aria-label="{{ "Close" | get_lang }}">
  254. <span aria-hidden="true">&times;</span>
  255. </button>
  256. <h4 class="modal-title" id="form-skill-title">{{ "Skill" | get_lang }}</h4>
  257. </div>
  258. <div class="modal-body">
  259. {{ dialogForm }}
  260. </div>
  261. <div class="modal-footer">
  262. <button type="button" class="btn btn-primary" data-dismiss="modal">
  263. {{ "Close" | get_lang }}
  264. </button>
  265. </div>
  266. </div>
  267. </div>
  268. </div>
  269. <div class="modal fade" id="frm-course-info" tabindex="-1" role="dialog" aria-labelledby="form-course-info-title" aria-hidden="true">
  270. <div class="modal-dialog">
  271. <div class="modal-content">
  272. <div class="modal-header">
  273. <button type="button" class="close" data-dismiss="modal" aria-label="{{ "Close" | get_lang }}">
  274. <span aria-hidden="true">&times;</span>
  275. </button>
  276. <h4 class="modal-title" id="form-course-info-title">{{ "ChooseCourse" | get_lang }}</h4>
  277. </div>
  278. <div class="modal-body"></div>
  279. <div class="modal-footer">
  280. <button type="button" class="btn btn-primary" data-dismiss="modal">{{ "Close" | get_lang }}</button>
  281. </div>
  282. </div>
  283. </div>
  284. </div>