script_profiles.js 15 KB

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