script_profiles.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375
  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. let title = "剩餘秒數不足";
  34. let text = '您的影片額度即將不足,加值以持續使用';
  35. let confirmButtonText = '加值';
  36. if (lang == 'en') { // 英文版訊息
  37. title = "Insufficient seconds left!";
  38. text = 'Your seconds left is less than 20 seconds, refill to continue making videos.';
  39. confirmButtonText = 'Refill';
  40. }
  41. Swal.fire({
  42. title: title,
  43. text: '您的影片額度即將不足,加值以持續使用',
  44. icon: 'warning',
  45. showCancelButton: true,
  46. cancelButtonText: 'Cancel',
  47. confirmButtonColor: '#3085d6',
  48. confirmButtonText: '加值'
  49. }).then(result => {
  50. if (result.isConfirmed) {
  51. location.href = "pricing.html";
  52. }
  53. });
  54. }
  55. // const str = `<img src="static/img/undraw_male_avatar_323b.svg" alt="">
  56. // <p class="card-profile-txt">User Profile</p>
  57. // <p class="card-profile-cnt">${userInfo.user_info.userName}</p>
  58. // <p class="card-profile-cnt">${userInfo.user_info.email}</p>
  59. // <div class="d-flex justify-content-around">
  60. // <div>
  61. // <p set-lan="html:used">已使用</p>
  62. // <p><strong>${userInfo.user_info.total_sec}</strong><span set-lan="html:sec">秒</span></p>
  63. // </div>
  64. // <div>
  65. // <p set-lan="html:left">未使用</p>
  66. // <p><strong>${userInfo.user_info.left_sec}</strong><span set-lan="html:sec">秒</span></p>
  67. // </div>
  68. // </div>`;
  69. const str = `<img src="static/img/undraw_male_avatar_323b.svg" alt="">
  70. <p class="card-profile-txt">User Profile</p>
  71. <p class="card-profile-cnt">${userInfo.user_info.userName}</p>
  72. <p class="card-profile-cnt">${userInfo.user_info.email}</p>
  73. <div class="d-flex justify-content-around">
  74. <div>
  75. <p set-lan="html:used">已使用</p>
  76. <p><strong>${userInfo.user_info.total_sec}</strong><span set-lan="html:sec">秒</span></p>
  77. </div>
  78. <div>
  79. <p set-lan="html:left">未使用</p>
  80. <p><strong>${userInfo.user_info.left_sec}</strong><span set-lan="html:sec">秒</span></p>
  81. </div>
  82. </div>`;
  83. // 使用者名稱
  84. const userName = `<h2 class="user-name text-white mt-4 fw-bold">Hello,${userInfo.user_info.userName}</h2>`;
  85. // 已使用
  86. const usedtime=`<h1 class="text-center">${userInfo.user_info.total_sec}&ensp;<span style="font-size:15px;" set-lan="html:sec">秒</span></h1>`;
  87. // 未使用
  88. const NotUsedTime=`<h1 class="text-center">${userInfo.user_info.left_sec}&ensp;<span style="font-size:15px;" set-lan="html:sec">秒</span></h1>`;
  89. // user資訊
  90. const infContent=`
  91. <div class="inf-content">
  92. <p>${userInfo.user_info.userName}</p>
  93. <p>***************&nbsp;<a href="./reset_pwd_email.html" set-lan="html:resetPsd">更改密碼</a></p>
  94. <p>${userInfo.user_info.email}</p>
  95. </div>`;
  96. // 歷史紀錄
  97. // const historicalrecord
  98. var historicalrecord=''
  99. for (var i = 0; i < userInfo.video_info.length; i++) {
  100. historicalrecord+='\
  101. <tr>\
  102. <td class="px-0">'+userInfo.video_info[i].time_stamp+'</td>\
  103. <td class="px-0">'+userInfo.video_info[i].title+'</td>\
  104. <td class="px-0 w-25">'+userInfo.video_info[i].duration+'</td>\
  105. </tr>`\
  106. ';
  107. }
  108. $('.historical-content').html(historicalrecord);
  109. $('.userinf').html(infContent);
  110. $('.userName').html(userName);
  111. $('.used-time').html(usedtime);
  112. $('.not-used-time').html(NotUsedTime);
  113. $('.card-profile').html(str);
  114. $('.card-profile').html(str);
  115. }).catch(err => {
  116. console.log(err);
  117. })
  118. }
  119. renderView();
  120. function getDraft() {
  121. JsLoadingOverlay.show({
  122. "overlayBackgroundColor": "#FFFFFF",
  123. "overlayOpacity": "1",
  124. "spinnerIcon": "ball-circus",
  125. "spinnerColor": "#B9DDF3",
  126. "spinnerSize": "1x",
  127. "overlayIDName": "overlay",
  128. "spinnerIDName": "spinner",
  129. "offsetX": 0,
  130. "offsetY": 0,
  131. "containerID": "draft-table",
  132. "lockScroll": false,
  133. "overlayZIndex": 9998,
  134. "spinnerZIndex": 9999
  135. });
  136. let token = getCookie('jwt_token');
  137. axios({
  138. method: 'post',
  139. url: 'https://www.choozmo.com:8887/draft_list',
  140. headers: {
  141. 'accept': 'application/json',
  142. 'Authorization': `Bearer ${token}`
  143. }
  144. }).then(res => {
  145. console.log(res.data);
  146. let result = [...res.data];
  147. let str = '';
  148. let draftStr = '';
  149. if(result.length > 0){
  150. for(let i = 0;i < result.length; i++) {
  151. draftStr += `<tr>
  152. <td>${result[i].title}</td>
  153. <td>
  154. <span class="me-3 draft-content-icon" id="${result[i].id}" onclick="gotoDraft(${result[i].id})">
  155. <i class="fas fa-edit"></i>
  156. </span>
  157. <span class="ms-3 draft-content-icon draft-content-delete" id="${result[i].id}" onclick="deleteDraft(${result[i].id})">
  158. <i class="fas fa-trash-alt"></i>
  159. </span>
  160. </td>
  161. </tr>`
  162. }
  163. str = `<table class="table text-center">
  164. <thead>
  165. <tr>
  166. <th scope="col" set-lan="html:video_title">標題</th>
  167. <th class="px-0" scope="col" set-lan="html:draft_edit">編輯</th>
  168. </tr>
  169. </thead>
  170. <tbody class="draft-content">${draftStr}</tbody>
  171. </table>`
  172. $('.draft-table .card').html(str);
  173. JsLoadingOverlay.hide();
  174. } else {
  175. str = `<div>
  176. <h5 set-lan="html:no_draft">目前沒有草稿喔</h5>
  177. <img src="static/img/undraw_void_3ggu.svg" width="80">
  178. </div>`;
  179. $('.draft-table .card').html(str);
  180. JsLoadingOverlay.hide();
  181. }
  182. }).catch(err => {
  183. console.log(err);
  184. });
  185. }
  186. getDraft();
  187. function checkLogin() {
  188. let token = getCookie('jwt_token');
  189. if(token) {
  190. btnLoginPage.style.display = 'none';
  191. btnLogout.style.display = 'block';
  192. btnUserProfile.style.display = 'block';
  193. } else {
  194. window.location.href = 'login.html';
  195. btnLoginPage.style.display = 'block';
  196. btnLogout.style.display = 'none';
  197. btnUserProfile.style.display = 'none';
  198. }
  199. }
  200. checkLogin();
  201. $(".historical-record").hide();
  202. $( ".check-history" ).click(function() {
  203. $(".historical-record").toggle(150);
  204. $(".arrowdown").toggleClass("arrowdoup");
  205. });
  206. $('.draft-table').hide();
  207. $('.draft .arrowdown').click(function() {
  208. $(".draft-table").toggle(150);
  209. $(".draft .arrowdown").toggleClass("arrowdoup");
  210. });
  211. var loaded_data = ''
  212. function openNav() {
  213. document.getElementById("mySidenav").style.width = "250px";
  214. document.querySelector('.loader').style.display = "block";
  215. let token = getCookie('jwt_token');
  216. axios({
  217. method: 'post',
  218. url: 'https://www.choozmo.com:8887/history_input',
  219. headers: {
  220. 'accept': 'application/json',
  221. 'Authorization': `Bearer ${token}`
  222. }
  223. }).then(res => {
  224. console.log(res.data);
  225. loaded_data = res.data;
  226. for (var obj of loaded_data) {
  227. var historyList = document.querySelector('.historyList');
  228. var list = document.createElement('li');
  229. list.id = obj.id;
  230. // div-imgfr
  231. var divImgfr = document.createElement('div');
  232. divImgfr.classList.add('item_imgfr');
  233. var img = document.createElement('img');
  234. img.setAttribute('src', obj['image_urls'][0]);
  235. divImgfr.appendChild(img);
  236. // div-content
  237. var contentBox = document.createElement('div');
  238. contentBox.classList.add('content-box');
  239. var boxTitle = document.createElement('p');
  240. boxTitle.classList.add('box-title');
  241. boxTitle.textContent = obj.name;
  242. boxTitle.id = obj.id;
  243. boxTitle.setAttribute('onclick', `direct(${obj.id})`);
  244. var boxLink = document.createElement('span');
  245. boxLink.classList.add('box-link');
  246. boxLink.setAttribute("data-url", obj.link);
  247. boxLink.setAttribute('onclick', 'view()');
  248. boxLink.innerHTML = '<i class="fas fa-play-circle me-1"></i>觀看影片';
  249. contentBox.appendChild(boxTitle);
  250. contentBox.appendChild(boxLink);
  251. list.classList.add("historyList-item");
  252. list.setAttribute('onclick', `direct(${obj.id})`);
  253. list.appendChild(divImgfr);
  254. list.appendChild(contentBox);
  255. historyList.appendChild(list);
  256. }
  257. document.querySelector('.loader').style.display = "none";
  258. }).catch(err => {
  259. console.log(err);
  260. });
  261. }
  262. function direct(id) {
  263. location.href = `make_video.html?id=${id}`;
  264. }
  265. function view() {
  266. event.stopPropagation();
  267. console.log(event.target);
  268. if (event.target.nodeName === 'I') {
  269. return;
  270. } else {
  271. window.open(`http://${event.target.dataset.url}`, '_blank');
  272. }
  273. }
  274. function gotoDraft (id) {
  275. location.href = `make_video.html?draftid=${id}`;
  276. }
  277. function deleteDraft(id) {
  278. let token = getCookie('jwt_token');
  279. JsLoadingOverlay.show({
  280. "overlayBackgroundColor": "#FFFFFF",
  281. "overlayOpacity": "1",
  282. "spinnerIcon": "ball-circus",
  283. "spinnerColor": "#B9DDF3",
  284. "spinnerSize": "1x",
  285. "overlayIDName": "overlay",
  286. "spinnerIDName": "spinner",
  287. "offsetX": 0,
  288. "offsetY": 0,
  289. "containerID": "draft-table",
  290. "lockScroll": false,
  291. "overlayZIndex": 9998,
  292. "spinnerZIndex": 9999
  293. });
  294. axios({
  295. method: 'post',
  296. url: 'https://www.choozmo.com:8887/del_draft',
  297. headers: {
  298. 'accept': 'application/json',
  299. 'Authorization': `Bearer ${token}`,
  300. 'Content-Type': 'application/json'
  301. },
  302. data: { "id": id }
  303. }).then(res => {
  304. console.log(res.data);
  305. //$('.draft-content-delete').html('<i class="fas fa-trash-alt"></i>');
  306. JsLoadingOverlay.hide();
  307. getDraft();
  308. }).catch(err => {
  309. console.log(err);
  310. });
  311. }
  312. $('.share-email').click(function() {
  313. var link = `mailto:me@example.com?subject=
  314. ${encodeURIComponent("Check out AI Spokesgirl")}
  315. &body=${encodeURIComponent('I just created a video in 5 minutes, check out this amazing video making tool. https://video.choozmo.com/')}`;
  316. window.location.href = link;
  317. })
  318. function trialStart() {
  319. Swal.fire({
  320. title: '歡迎使用AiSpokesgirl!將你的生活、創作 、宣傳做成影片。',
  321. html: `<p>您有<b>2</b>分鐘影片製作額度。</p><br>
  322. <p>您可以使用:</p>
  323. <ul>
  324. <li>1. 短影片製作</li>
  325. <li>2. 個人歷史紀錄儲存</li>
  326. <li>3. 影片下載(Mp4)</li>
  327. </ul>
  328. <p>欲使用其他功能請升級為Premium方案</p>`,
  329. icon: 'success',
  330. confirmButtonColor: '#3085d6',
  331. confirmButtonText: '我知道了!'
  332. });
  333. }
  334. function trialEnd() {
  335. Swal.fire({
  336. title: '您的試用即將結束!好的idea值得延續,透過影片將你的idea完整呈現。',
  337. html: `<p>前往網站以升級為Premium方案,或是聯絡我們以洽詢細節。</p>`,
  338. icon: 'success',
  339. confirmButtonColor: '#3085d6',
  340. confirmButtonText: '立即升級'
  341. }).then(result => {
  342. if (result.isConfirmed) {
  343. location.href = "pricing.html";
  344. }
  345. });;
  346. }