script_profile.js 15 KB

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