skill_wheel_student.html.twig 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323
  1. {% include template ~ '/skill/skill_wheel.js.html.twig' %}
  2. {% autoescape false %}
  3. <script>
  4. /* Skill search input in the left menu */
  5. function check_skills_sidebar() {
  6. //Selecting only selected skills
  7. $("#skill_id option:selected").each(function () {
  8. var skill_id = $(this).val();
  9. if (skill_id != "") {
  10. $.ajax({
  11. url: "{{ url }}&a=skill_exists",
  12. data: "skill_id=" + skill_id,
  13. // async: false,
  14. success: function (return_value) {
  15. if (return_value == 0) {
  16. alert("{{ 'SkillDoesNotExist'|get_lang }}");
  17. //Deleting select option tag
  18. //$("#skill_id option[value="+skill_id+"]").remove();
  19. $("#skill_id").empty();
  20. //Deleting holder
  21. $("#skill_search .holder li").each(function () {
  22. if ($(this).attr("rel") == skill_id) {
  23. $(this).remove();
  24. }
  25. });
  26. } else {
  27. $("#skill_id option[value=" + skill_id + "]").remove();
  28. //Deleting holder
  29. $("#skill_search .holder li").each(function () {
  30. if ($(this).attr("rel") == skill_id) {
  31. $(this).remove();
  32. }
  33. });
  34. if ($('#skill_to_select_id_' + skill_id).length == 0) {
  35. skill_info = get_skill_info(skill_id);
  36. li = fill_skill_search_li(skill_id, skill_info.name);
  37. $("#skill_holder").append(li);
  38. }
  39. }
  40. }
  41. });
  42. }
  43. });
  44. }
  45. function fill_skill_search_li(skill_id, skill_name, checked) {
  46. checked_condition = '';
  47. if (checked == 1) {
  48. checked_condition = 'checked=checked';
  49. }
  50. return '\
  51. <tr>\n\
  52. <td>' + skill_name + '</td>\n\
  53. <td class="text-right">\n\
  54. <button type="button" id="skill_to_select_id_' + skill_id + '" class="btn btn-warning btn-sm load_wheel" data-id="' + skill_id + '" title="{{ 'PlaceOnTheWheel'|get_lang }}" aria-label="{{ 'PlaceOnTheWheel'|get_lang }}">\n\
  55. <span class="fa fa-crosshairs fa-fw" aria-hidden="true"></span>\n\
  56. </button>\n\
  57. </td>\n\
  58. </tr>';
  59. }
  60. function load_skill_info(skill_id) {
  61. $.ajax({
  62. url: url + '&a=get_skill_course_info&id=' + skill_id,
  63. async: false,
  64. success: function (data) {
  65. $('#skill_info').html(data);
  66. return data;
  67. }
  68. });
  69. }
  70. $(function() {
  71. /* Skill search */
  72. /* Skill item list onclick */
  73. $("#skill_holder").on("click", "input.skill_to_select", function () {
  74. skill_id = $(this).attr('rel');
  75. skill_name = $(this).attr('name');
  76. add_skill_in_profile_list(skill_id, skill_name);
  77. });
  78. /* URL link when searching skills */
  79. $("#skill_holder").on("click", "button.load_wheel", function () {
  80. skill_id = $(this).data('id') || 0;
  81. skill_to_load_from_get = 0;
  82. load_nodes(skill_id, main_depth);
  83. load_skill_info(skill_id);
  84. });
  85. /* URL link when searching skills */
  86. $("a.load_root").on("click", function (e) {
  87. e.preventDefault();
  88. skill_id = $(this).attr('rel');
  89. skill_to_load_from_get = 0;
  90. load_nodes(skill_id, main_depth);
  91. });
  92. /* When clicking in a course title */
  93. $("#skill_info").on("click", "a.course_description_popup[rel]", function (e) {
  94. e.preventDefault();
  95. var getCourseInfo = $.ajax(url, {
  96. data: {
  97. a: 'get_course_info_popup',
  98. code: $(this).attr('rel')
  99. }
  100. }
  101. );
  102. $.when(getCourseInfo).done(function (response) {
  103. $('#frm-course-info').find('.modal-body').html(response);
  104. $('#frm-course-info').modal('show');
  105. });
  106. });
  107. /* change background color */
  108. $('#skill-change-background-options li a').on('click', function (e) {
  109. e.preventDefault();
  110. var newBackgroundColor = $(this).data('color') || '#FFF';
  111. $("#page-back").css("background", newBackgroundColor);
  112. });
  113. /* Wheel skill popup form */
  114. $("#skill_id").select2({
  115. ajax: {
  116. url: '{{ url }}&a=find_skills',
  117. processResults: function (data) {
  118. return {
  119. results: data.items
  120. };
  121. }
  122. },
  123. cache: false,
  124. placeholder: '{{ 'EnterTheSkillNameToSearch'|get_lang }}'
  125. }).on('change', function () {
  126. check_skills_sidebar();
  127. });
  128. load_nodes(0, main_depth);
  129. $('#frm-course-info').on('', function () {
  130. $('#frm-course-info').find('.modal-body').html('');
  131. });
  132. $(".facebook-auto").css("width","100%");
  133. $(".facebook-auto ul").css("width","100%");
  134. $("ul.holder").css("width","100%");
  135. });
  136. </script>
  137. <div id="page-back" class="page-skill">
  138. <div class="container-fluid">
  139. <div class="row">
  140. <div class="col-md-3 skill-options">
  141. <p class="skill-home">
  142. <a class="btn btn-large btn-block btn-primary" href="{{ _p.web }}user_portal.php">
  143. <em class="fa fa-home"></em> {{ "ReturnToCourseList"|get_lang }}
  144. </a>
  145. </p>
  146. <div class="panel panel-default">
  147. <div class="panel-body">
  148. <figure class="text-center">
  149. <img width="100px" src="{{ user_info.avatar }}" class="img-circle center-block">
  150. <figcaption class="avatar-author">{{ user_info.complete_name }}</figcaption>
  151. </figure>
  152. <p class="text-center">
  153. <a href="{{ _p.web_main }}social/skills_ranking.php" class="btn btn-default" target="_blank">
  154. {{ 'YourSkillRankingX'|get_lang|format(ranking) }}
  155. </a>
  156. </p>
  157. <div class="text-center">
  158. {% if skills is not empty %}
  159. {% for skill in skills %}
  160. {{ skill.img_small }}
  161. {% endfor %}
  162. {% endif %}
  163. {% for i in 1..(5 - ranking) %}
  164. <img src="{{ 'badges-default.png'|icon(64) }}" width="64" height="64">
  165. {% endfor %}
  166. </div>
  167. </div>
  168. </div>
  169. <!-- ACCORDION -->
  170. <div class="accordion" id="accordion2">
  171. <div class="panel panel-default">
  172. <div class="panel-heading">
  173. <a data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
  174. {{ 'GetNewSkills'|get_lang }}
  175. </a>
  176. </div>
  177. <div id="collapseTwo" class="panel-collapse collapse">
  178. <div class="panel-body">
  179. <!-- SEARCH -->
  180. <div class="search-skill">
  181. <h5 class="page-header">{{ 'SkillsSearch'|get_lang }}</h5>
  182. <form id="skill_search" class="form-search">
  183. <select id="skill_id" name="skill_id" multiple style="width: 100%;"></select>
  184. <table id="skill_holder" class="table table-condensed"></table>
  185. </form>
  186. </div>
  187. <!-- END SEARCH -->
  188. <!-- INFO SKILL -->
  189. <h5 class="page-header">{{ 'SkillInfo'|get_lang }}</h5>
  190. <div id="skill_info"></div>
  191. <!-- END INFO SKILL -->
  192. <p>
  193. <a class="btn btn-default btn-block load_root" rel="0" href="#">
  194. <em class="fa fa-eye"></em> {{ "ViewSkillsWheel"|get_lang }}
  195. </a>
  196. </p>
  197. </div>
  198. </div>
  199. </div>
  200. </div>
  201. <div class="panel-group" id="wheel-second-accordion" role="tablist" aria-multiselectable="true">
  202. <div class="panel panel-default">
  203. <div class="panel-heading" role="tab" id="wheel-legend-heading">
  204. <h4 class="panel-title">
  205. <a role="button" data-toggle="collapse" data-parent="#wheel-second-accordion" href="#wheel-legend-collapse" aria-expanded="true" aria-controls="wheel-legend-collapse">
  206. {{ "Legend"|get_lang }}
  207. </a>
  208. </h4>
  209. </div>
  210. <div id="wheel-legend-collapse" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="wheel-legend-heading">
  211. <div class="panel-body">
  212. <ul class="fa-ul">
  213. <li>
  214. <em class="fa fa-li fa-square skill-legend-basic"></em> {{ "BasicSkills"|get_lang }}
  215. </li>
  216. <li>
  217. <em class="fa fa-li fa-square skill-legend-badges"></em> {{ "SkillsYouAcquired"|get_lang }}
  218. </li>
  219. <li>
  220. <em class="fa fa-li fa-square skill-legend-add"></em> {{ "SkillsYouCanLearn"|get_lang }}
  221. </li>
  222. <li>
  223. <em class="fa fa-li fa-square skill-legend-search"></em> {{ "SkillsSearchedFor"|get_lang }}
  224. </li>
  225. </ul>
  226. </div>
  227. </div>
  228. </div>
  229. <div class="panel panel-default">
  230. <div class="panel-heading" role="tab" id="wheel-display-heading">
  231. <h4 class="panel-title">
  232. <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">
  233. {{ 'DisplayOptions'|get_lang }}
  234. </a>
  235. </h4>
  236. </div>
  237. <div id="wheel-display-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="wheel-display-heading">
  238. <div class="panel-body">
  239. <p>{{ 'ChooseABackgroundColor'|get_lang }}</p>
  240. <ul class="list-unstyled" id="skill-change-background-options">
  241. <li><a href="#" data-color="#FFFFFF">{{ 'White'|get_lang }}</a></li>
  242. <li><a href="#" data-color="#000000">{{ 'Black'|get_lang }}</a></li>
  243. <li><a href="#" data-color="#A9E2F3">{{ 'LightBlue' }}</a></li>
  244. <li><a href="#" data-color="#848484">{{ 'Gray'|get_lang }}</a></li>
  245. <li><a href="#" data-color="#F7F8E0">{{ 'Corn'|get_lang }}</a></li>
  246. </ul>
  247. </div>
  248. </div>
  249. </div>
  250. </div>
  251. <!-- END ACCORDEON -->
  252. </div>
  253. <div id="wheel_container" class="col-md-9">
  254. <div id="skill_wheel">
  255. <img src="">
  256. </div>
  257. </div>
  258. </div>
  259. </div>
  260. </div>
  261. <div class="modal fade" id="frm-skill" tabindex="-1" role="dialog" aria-labelledby="form-skill-title" aria-hidden="true">
  262. <div class="modal-dialog modal-lg">
  263. <div class="modal-content">
  264. <div class="modal-header">
  265. <button type="button" class="close" data-dismiss="modal" aria-label="{{ "Close" | get_lang }}">
  266. <span aria-hidden="true">&times;</span>
  267. </button>
  268. <h4 class="modal-title" id="form-skill-title">{{ "Skill" | get_lang }}</h4>
  269. </div>
  270. <div class="modal-body">
  271. {{ dialogForm }}
  272. </div>
  273. <div class="modal-footer">
  274. <button type="button" class="btn btn-primary" data-dismiss="modal">
  275. {{ "Close" | get_lang }}
  276. </button>
  277. </div>
  278. </div>
  279. </div>
  280. </div>
  281. <div class="modal fade" id="frm-course-info" tabindex="-1" role="dialog" aria-labelledby="form-course-info-title" aria-hidden="true">
  282. <div class="modal-dialog">
  283. <div class="modal-content">
  284. <div class="modal-header">
  285. <button type="button" class="close" data-dismiss="modal" aria-label="{{ "Close" | get_lang }}">
  286. <span aria-hidden="true">&times;</span>
  287. </button>
  288. <h4 class="modal-title" id="form-course-info-title">{{ "ChooseCourse" | get_lang }}</h4>
  289. </div>
  290. <div class="modal-body"></div>
  291. <div class="modal-footer">
  292. <button type="button" class="btn btn-primary" data-dismiss="modal">{{ "Close" | get_lang }}</button>
  293. </div>
  294. </div>
  295. </div>
  296. </div>
  297. {% endautoescape %}