script_profiles.js 15 KB

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