script_profiles.js 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265
  1. const btnLoginPage = document.querySelector('.btn-login');
  2. const btnUserProfile = document.querySelector('.btn-userProfile');
  3. const btnLogout = document.querySelector('.btn-logout');
  4. function getCookie(name) {
  5. const value = `; ${document.cookie}`;
  6. const parts = value.split(`; ${name}=`);
  7. if (parts.length === 2) return parts.pop().split(';').shift();
  8. }
  9. function renderView() {
  10. let token = getCookie('jwt_token');
  11. if(!token) {
  12. return;
  13. }
  14. // axios.defaults.withCredentials = false;
  15. axios({
  16. method: 'post',
  17. url: 'https://www.choozmo.com:8887/user_profile',
  18. headers: {
  19. 'accept': 'text/html',
  20. 'Authorization': `Bearer ${token}`
  21. }
  22. }).then(res => {
  23. console.log(res.data);
  24. const userInfo = res.data;
  25. if(userInfo.user_info.left_sec < 20){
  26. Swal.fire({
  27. title: "剩餘秒數不足",
  28. text: '您的影片額度即將不足,加值以持續使用',
  29. icon: 'warning',
  30. showCancelButton: true,
  31. cancelButtonText: 'Cancel',
  32. confirmButtonColor: '#3085d6',
  33. confirmButtonText: '加值'
  34. }).then(result => {
  35. if (result.isConfirmed) {
  36. location.href = "pricing.html";
  37. }
  38. });
  39. }
  40. // const str = `<img src="static/img/undraw_male_avatar_323b.svg" alt="">
  41. // <p class="card-profile-txt">User Profile</p>
  42. // <p class="card-profile-cnt">${userInfo.user_info.userName}</p>
  43. // <p class="card-profile-cnt">${userInfo.user_info.email}</p>
  44. // <div class="d-flex justify-content-around">
  45. // <div>
  46. // <p set-lan="html:used">已使用</p>
  47. // <p><strong>${userInfo.user_info.total_sec}</strong><span set-lan="html:sec">秒</span></p>
  48. // </div>
  49. // <div>
  50. // <p set-lan="html:left">未使用</p>
  51. // <p><strong>${userInfo.user_info.left_sec}</strong><span set-lan="html:sec">秒</span></p>
  52. // </div>
  53. // </div>`;
  54. const str = `<img src="static/img/undraw_male_avatar_323b.svg" alt="">
  55. <p class="card-profile-txt">User Profile</p>
  56. <p class="card-profile-cnt">${userInfo.user_info.userName}</p>
  57. <p class="card-profile-cnt">${userInfo.user_info.email}</p>
  58. <div class="d-flex justify-content-around">
  59. <div>
  60. <p set-lan="html:used">已使用</p>
  61. <p><strong>${userInfo.user_info.total_sec}</strong><span set-lan="html:sec">秒</span></p>
  62. </div>
  63. <div>
  64. <p set-lan="html:left">未使用</p>
  65. <p><strong>${userInfo.user_info.left_sec}</strong><span set-lan="html:sec">秒</span></p>
  66. </div>
  67. </div>`;
  68. // 使用者名稱
  69. const userName = `<h2 class="user-name text-white mt-4 fw-bold">Hello,${userInfo.user_info.userName}</h2>`;
  70. // 已使用
  71. const usedtime=`<h1 class="text-center">${userInfo.user_info.total_sec}&ensp;<span style="font-size:15px;" set-lan="html:sec">秒</span></h1>`;
  72. // 未使用
  73. const NotUsedTime=`<h1 class="text-center">${userInfo.user_info.left_sec}&ensp;<span style="font-size:15px;" set-lan="html:sec">秒</span></h1>`;
  74. // user資訊
  75. const infContent=`
  76. <div class="inf-content">
  77. <p>${userInfo.user_info.userName}</p>
  78. <p>***************&nbsp;<a href="./reset_pwd_email.html" set-lan="html:resetPsd">更改密碼</a></p>
  79. <p>${userInfo.user_info.email}</p>
  80. </div>`;
  81. // 歷史紀錄
  82. // const historicalrecord
  83. var historicalrecord=''
  84. for (var i = 0; i < userInfo.video_info.length; i++) {
  85. historicalrecord+='\
  86. <tr>\
  87. <td class="px-0">'+userInfo.video_info[i].time_stamp+'</td>\
  88. <td class="px-0">'+userInfo.video_info[i].title+'</td>\
  89. <td class="px-0 w-25">'+userInfo.video_info[i].duration+'</td>\
  90. </tr>`\
  91. ';
  92. }
  93. $('.historical-content').html(historicalrecord);
  94. $('.userinf').html(infContent);
  95. $('.userName').html(userName);
  96. $('.used-time').html(usedtime);
  97. $('.not-used-time').html(NotUsedTime);
  98. $('.card-profile').html(str);
  99. $('.card-profile').html(str);
  100. }).catch(err => {
  101. console.log(err);
  102. })
  103. }
  104. renderView();
  105. function getDraft() {
  106. let token = getCookie('jwt_token');
  107. axios({
  108. method: 'post',
  109. url: 'https://www.choozmo.com:8887/draft_list',
  110. headers: {
  111. 'accept': 'application/json',
  112. 'Authorization': `Bearer ${token}`
  113. }
  114. }).then(res => {
  115. console.log(res.data);
  116. let result = [...res.data];
  117. let str = '';
  118. if(result.length > 0){
  119. for(let i = 0;i < result.length; i++) {
  120. str += `<tr>
  121. <td>${result[i].title}</td>
  122. <td>
  123. <span class="me-3 draft-content-icon" id="${result[i].id}" onclick="gotoDraft(${result[i].id})">
  124. <i class="fas fa-edit"></i>
  125. </span>
  126. <span class="ms-3 draft-content-icon" id="${result[i].id}" onclick="deleteDraft(${result[i].id})">
  127. <i class="fas fa-trash-alt"></i>
  128. </span>
  129. </td>
  130. </tr>`
  131. }
  132. $('.draft-content').html(str);
  133. }
  134. }).catch(err => {
  135. console.log(err);
  136. });
  137. }
  138. getDraft();
  139. function checkLogin() {
  140. let token = getCookie('jwt_token');
  141. if(token) {
  142. btnLoginPage.style.display = 'none';
  143. btnLogout.style.display = 'block';
  144. btnUserProfile.style.display = 'block';
  145. } else {
  146. window.location.href = 'login.html';
  147. btnLoginPage.style.display = 'block';
  148. btnLogout.style.display = 'none';
  149. btnUserProfile.style.display = 'none';
  150. }
  151. }
  152. checkLogin();
  153. $(".historical-record").hide();
  154. $( ".check-history" ).click(function() {
  155. $(".historical-record").toggle();
  156. $(".arrowdown").toggleClass("arrowdoup");
  157. });
  158. $('.draft-table').hide();
  159. $('.draft .arrowdown').click(function() {
  160. $(".draft-table").toggle();
  161. $(".draft .arrowdown").toggleClass("arrowdoup");
  162. });
  163. var loaded_data = ''
  164. function openNav() {
  165. document.getElementById("mySidenav").style.width = "250px";
  166. document.querySelector('.loader').style.display = "block";
  167. let token = getCookie('jwt_token');
  168. axios({
  169. method: 'post',
  170. url: 'https://www.choozmo.com:8887/history_input',
  171. headers: {
  172. 'accept': 'application/json',
  173. 'Authorization': `Bearer ${token}`
  174. }
  175. }).then(res => {
  176. console.log(res.data);
  177. loaded_data = res.data;
  178. for (var obj of loaded_data) {
  179. var historyList = document.querySelector('.historyList');
  180. var list = document.createElement('li');
  181. list.id = obj.id;
  182. // div-imgfr
  183. var divImgfr = document.createElement('div');
  184. divImgfr.classList.add('item_imgfr');
  185. var img = document.createElement('img');
  186. img.setAttribute('src', obj['image_urls'][0]);
  187. divImgfr.appendChild(img);
  188. // div-content
  189. var contentBox = document.createElement('div');
  190. contentBox.classList.add('content-box');
  191. var boxTitle = document.createElement('p');
  192. boxTitle.classList.add('box-title');
  193. boxTitle.textContent = obj.name;
  194. boxTitle.id = obj.id;
  195. boxTitle.setAttribute('onclick', `direct(${obj.id})`);
  196. var boxLink = document.createElement('span');
  197. boxLink.classList.add('box-link');
  198. boxLink.setAttribute("data-url", obj.link);
  199. boxLink.setAttribute('onclick', 'view()');
  200. boxLink.innerHTML = '<i class="fas fa-play-circle me-1"></i>觀看影片';
  201. contentBox.appendChild(boxTitle);
  202. contentBox.appendChild(boxLink);
  203. list.classList.add("historyList-item");
  204. list.setAttribute('onclick', `direct(${obj.id})`);
  205. list.appendChild(divImgfr);
  206. list.appendChild(contentBox);
  207. historyList.appendChild(list);
  208. }
  209. document.querySelector('.loader').style.display = "none";
  210. }).catch(err => {
  211. console.log(err);
  212. });
  213. }
  214. function direct(id) {
  215. location.href = `make_video.html?id=${id}`;
  216. }
  217. function view() {
  218. event.stopPropagation();
  219. console.log(event.target);
  220. if (event.target.nodeName === 'I') {
  221. return;
  222. } else {
  223. window.open(`http://${event.target.dataset.url}`, '_blank');
  224. }
  225. }
  226. function gotoDraft (id) {
  227. location.href = `make_video.html?draftid=${id}`;
  228. }
  229. function deleteDraft(id) {
  230. let token = getCookie('jwt_token');
  231. axios({
  232. method: 'post',
  233. url: 'https://www.choozmo.com:8887/del_draft',
  234. headers: {
  235. 'accept': 'application/json',
  236. 'Authorization': `Bearer ${token}`,
  237. 'Content-Type': 'application/json'
  238. },
  239. data: { "id": id }
  240. }).then(res => {
  241. console.log(res.data);
  242. getDraft();
  243. }).catch(err => {
  244. console.log(err);
  245. });
  246. }