script_profiles.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317
  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. let userBasics = JSON.parse(localStorage.getItem('user_profile')) || [];
  10. function checkLocal() {
  11. if(userBasics.length == 0){ return };
  12. $('.userName').html(`<h2 class="user-name text-white mt-4 fw-bold">Hello,${userBasics.user_info.userName}</h2>`);
  13. }
  14. checkLocal()
  15. function renderView() {
  16. let token = getCookie('jwt_token');
  17. if(!token) {
  18. return;
  19. }
  20. // axios.defaults.withCredentials = false;
  21. axios({
  22. method: 'post',
  23. url: 'https://www.choozmo.com:8887/user_profile',
  24. headers: {
  25. 'accept': 'text/html',
  26. 'Authorization': `Bearer ${token}`
  27. }
  28. }).then(res => {
  29. console.log(res.data);
  30. const userInfo = res.data;
  31. localStorage.setItem('user_profile', JSON.stringify(res.data));
  32. if(userInfo.user_info.left_sec < 20){
  33. Swal.fire({
  34. title: "剩餘秒數不足",
  35. text: '您的影片額度即將不足,加值以持續使用',
  36. icon: 'warning',
  37. showCancelButton: true,
  38. cancelButtonText: 'Cancel',
  39. confirmButtonColor: '#3085d6',
  40. confirmButtonText: '加值'
  41. }).then(result => {
  42. if (result.isConfirmed) {
  43. location.href = "pricing.html";
  44. }
  45. });
  46. }
  47. // const str = `<img src="static/img/undraw_male_avatar_323b.svg" alt="">
  48. // <p class="card-profile-txt">User Profile</p>
  49. // <p class="card-profile-cnt">${userInfo.user_info.userName}</p>
  50. // <p class="card-profile-cnt">${userInfo.user_info.email}</p>
  51. // <div class="d-flex justify-content-around">
  52. // <div>
  53. // <p set-lan="html:used">已使用</p>
  54. // <p><strong>${userInfo.user_info.total_sec}</strong><span set-lan="html:sec">秒</span></p>
  55. // </div>
  56. // <div>
  57. // <p set-lan="html:left">未使用</p>
  58. // <p><strong>${userInfo.user_info.left_sec}</strong><span set-lan="html:sec">秒</span></p>
  59. // </div>
  60. // </div>`;
  61. const str = `<img src="static/img/undraw_male_avatar_323b.svg" alt="">
  62. <p class="card-profile-txt">User Profile</p>
  63. <p class="card-profile-cnt">${userInfo.user_info.userName}</p>
  64. <p class="card-profile-cnt">${userInfo.user_info.email}</p>
  65. <div class="d-flex justify-content-around">
  66. <div>
  67. <p set-lan="html:used">已使用</p>
  68. <p><strong>${userInfo.user_info.total_sec}</strong><span set-lan="html:sec">秒</span></p>
  69. </div>
  70. <div>
  71. <p set-lan="html:left">未使用</p>
  72. <p><strong>${userInfo.user_info.left_sec}</strong><span set-lan="html:sec">秒</span></p>
  73. </div>
  74. </div>`;
  75. // 使用者名稱
  76. const userName = `<h2 class="user-name text-white mt-4 fw-bold">Hello,${userInfo.user_info.userName}</h2>`;
  77. // 已使用
  78. const usedtime=`<h1 class="text-center">${userInfo.user_info.total_sec}&ensp;<span style="font-size:15px;" set-lan="html:sec">秒</span></h1>`;
  79. // 未使用
  80. const NotUsedTime=`<h1 class="text-center">${userInfo.user_info.left_sec}&ensp;<span style="font-size:15px;" set-lan="html:sec">秒</span></h1>`;
  81. // user資訊
  82. const infContent=`
  83. <div class="inf-content">
  84. <p>${userInfo.user_info.userName}</p>
  85. <p>***************&nbsp;<a href="./reset_pwd_email.html" set-lan="html:resetPsd">更改密碼</a></p>
  86. <p>${userInfo.user_info.email}</p>
  87. </div>`;
  88. // 歷史紀錄
  89. // const historicalrecord
  90. var historicalrecord=''
  91. for (var i = 0; i < userInfo.video_info.length; i++) {
  92. historicalrecord+='\
  93. <tr>\
  94. <td class="px-0">'+userInfo.video_info[i].time_stamp+'</td>\
  95. <td class="px-0">'+userInfo.video_info[i].title+'</td>\
  96. <td class="px-0 w-25">'+userInfo.video_info[i].duration+'</td>\
  97. </tr>`\
  98. ';
  99. }
  100. $('.historical-content').html(historicalrecord);
  101. $('.userinf').html(infContent);
  102. $('.userName').html(userName);
  103. $('.used-time').html(usedtime);
  104. $('.not-used-time').html(NotUsedTime);
  105. $('.card-profile').html(str);
  106. $('.card-profile').html(str);
  107. }).catch(err => {
  108. console.log(err);
  109. })
  110. }
  111. renderView();
  112. function getDraft() {
  113. JsLoadingOverlay.show({
  114. "overlayBackgroundColor": "#FFFFFF",
  115. "overlayOpacity": "0.1",
  116. "spinnerIcon": "ball-circus",
  117. "spinnerColor": "#B9DDF3",
  118. "spinnerSize": "1x",
  119. "overlayIDName": "overlay",
  120. "spinnerIDName": "spinner",
  121. "offsetX": 0,
  122. "offsetY": 0,
  123. "containerID": "draft-table",
  124. "lockScroll": false,
  125. "overlayZIndex": 9998,
  126. "spinnerZIndex": 9999
  127. });
  128. let token = getCookie('jwt_token');
  129. axios({
  130. method: 'post',
  131. url: 'https://www.choozmo.com:8887/draft_list',
  132. headers: {
  133. 'accept': 'application/json',
  134. 'Authorization': `Bearer ${token}`
  135. }
  136. }).then(res => {
  137. console.log(res.data);
  138. let result = [...res.data];
  139. let str = '';
  140. let draftStr = '';
  141. if(result.length > 0){
  142. for(let i = 0;i < result.length; i++) {
  143. draftStr += `<tr>
  144. <td>${result[i].title}</td>
  145. <td>
  146. <span class="me-3 draft-content-icon" id="${result[i].id}" onclick="gotoDraft(${result[i].id})">
  147. <i class="fas fa-edit"></i>
  148. </span>
  149. <span class="ms-3 draft-content-icon" id="${result[i].id}" onclick="deleteDraft(${result[i].id})">
  150. <i class="fas fa-trash-alt"></i>
  151. </span>
  152. </td>
  153. </tr>`
  154. }
  155. str = `<table class="table text-center">
  156. <thead>
  157. <tr>
  158. <th scope="col" set-lan="html:video_title">標題</th>
  159. <th class="px-0" scope="col" set-lan="html:draft_edit">編輯</th>
  160. </tr>
  161. </thead>
  162. <tbody class="draft-content">${draftStr}</tbody>
  163. </table>`
  164. $('.draft-table .card').html(str);
  165. JsLoadingOverlay.hide();
  166. } else {
  167. str = `<div>
  168. <h5 set-lan="html:no_draft">目前沒有草稿喔</h5>
  169. <img src="static/img/undraw_void_3ggu.svg" width="80">
  170. </div>`;
  171. $('.draft-table .card').html(str);
  172. JsLoadingOverlay.hide();
  173. }
  174. }).catch(err => {
  175. console.log(err);
  176. });
  177. }
  178. getDraft();
  179. function checkLogin() {
  180. let token = getCookie('jwt_token');
  181. if(token) {
  182. btnLoginPage.style.display = 'none';
  183. btnLogout.style.display = 'block';
  184. btnUserProfile.style.display = 'block';
  185. } else {
  186. window.location.href = 'login.html';
  187. btnLoginPage.style.display = 'block';
  188. btnLogout.style.display = 'none';
  189. btnUserProfile.style.display = 'none';
  190. }
  191. }
  192. checkLogin();
  193. $(".historical-record").hide();
  194. $( ".check-history" ).click(function() {
  195. $(".historical-record").toggle(150);
  196. $(".arrowdown").toggleClass("arrowdoup");
  197. });
  198. $('.draft-table').hide();
  199. $('.draft .arrowdown').click(function() {
  200. $(".draft-table").toggle(150);
  201. $(".draft .arrowdown").toggleClass("arrowdoup");
  202. });
  203. var loaded_data = ''
  204. function openNav() {
  205. document.getElementById("mySidenav").style.width = "250px";
  206. document.querySelector('.loader').style.display = "block";
  207. let token = getCookie('jwt_token');
  208. axios({
  209. method: 'post',
  210. url: 'https://www.choozmo.com:8887/history_input',
  211. headers: {
  212. 'accept': 'application/json',
  213. 'Authorization': `Bearer ${token}`
  214. }
  215. }).then(res => {
  216. console.log(res.data);
  217. loaded_data = res.data;
  218. for (var obj of loaded_data) {
  219. var historyList = document.querySelector('.historyList');
  220. var list = document.createElement('li');
  221. list.id = obj.id;
  222. // div-imgfr
  223. var divImgfr = document.createElement('div');
  224. divImgfr.classList.add('item_imgfr');
  225. var img = document.createElement('img');
  226. img.setAttribute('src', obj['image_urls'][0]);
  227. divImgfr.appendChild(img);
  228. // div-content
  229. var contentBox = document.createElement('div');
  230. contentBox.classList.add('content-box');
  231. var boxTitle = document.createElement('p');
  232. boxTitle.classList.add('box-title');
  233. boxTitle.textContent = obj.name;
  234. boxTitle.id = obj.id;
  235. boxTitle.setAttribute('onclick', `direct(${obj.id})`);
  236. var boxLink = document.createElement('span');
  237. boxLink.classList.add('box-link');
  238. boxLink.setAttribute("data-url", obj.link);
  239. boxLink.setAttribute('onclick', 'view()');
  240. boxLink.innerHTML = '<i class="fas fa-play-circle me-1"></i>觀看影片';
  241. contentBox.appendChild(boxTitle);
  242. contentBox.appendChild(boxLink);
  243. list.classList.add("historyList-item");
  244. list.setAttribute('onclick', `direct(${obj.id})`);
  245. list.appendChild(divImgfr);
  246. list.appendChild(contentBox);
  247. historyList.appendChild(list);
  248. }
  249. document.querySelector('.loader').style.display = "none";
  250. }).catch(err => {
  251. console.log(err);
  252. });
  253. }
  254. function direct(id) {
  255. location.href = `make_video.html?id=${id}`;
  256. }
  257. function view() {
  258. event.stopPropagation();
  259. console.log(event.target);
  260. if (event.target.nodeName === 'I') {
  261. return;
  262. } else {
  263. window.open(`http://${event.target.dataset.url}`, '_blank');
  264. }
  265. }
  266. function gotoDraft (id) {
  267. location.href = `make_video.html?draftid=${id}`;
  268. }
  269. function deleteDraft(id) {
  270. let token = getCookie('jwt_token');
  271. axios({
  272. method: 'post',
  273. url: 'https://www.choozmo.com:8887/del_draft',
  274. headers: {
  275. 'accept': 'application/json',
  276. 'Authorization': `Bearer ${token}`,
  277. 'Content-Type': 'application/json'
  278. },
  279. data: { "id": id }
  280. }).then(res => {
  281. console.log(res.data);
  282. getDraft();
  283. }).catch(err => {
  284. console.log(err);
  285. });
  286. }
  287. $('.share-email').click(function() {
  288. var link = `mailto:me@example.com?subject=
  289. ${encodeURIComponent("Check out AI Spokesgirl")}
  290. &body=${encodeURIComponent('I just created a video in 5 minutes, check out this amazing video making tool. https://video.choozmo.com/')}`;
  291. window.location.href = link;
  292. })