script_slides.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494
  1. checkRoute();
  2. let card;
  3. let userBasics = JSON.parse(localStorage.getItem('user_profile')) || [];
  4. //userBasics = JSON.parse(userBasics);
  5. if(userBasics !== [] && typeof(userBasics) !== 'string'){
  6. $('.userName').html(`<h2 class="user-name text-white mt-lg-3 mt-xl-1 fw-bold">Hi ${userBasics.user_info.userName}</h2>`);
  7. }
  8. function checkRoute() {
  9. let jwt_token = get_jwt_token();
  10. if(jwt_token == undefined) {
  11. window.location.replace("login.html");
  12. }
  13. axios({
  14. method: 'post',
  15. url: 'https://www.choozmo.com:8887/user_profile',
  16. headers: {
  17. 'accept': 'text/html',
  18. 'Authorization': `Bearer ${jwt_token}`
  19. }
  20. }).then(res => {
  21. console.log(res.data);
  22. // if(res.status !== 200) {
  23. // window.location.replace("login.html");
  24. // }
  25. var userName='';
  26. userName+=' <h2 class="user-name text-white mt-lg-3 mt-xl-1 fw-bold">Hi '+res.data.user_info.userName+'</h2>';
  27. $('.userName').html(userName);
  28. }).catch(err => {
  29. console.log(err);
  30. window.location.replace("login.html");
  31. });
  32. }
  33. let lan = localStorage.getItem('lan');
  34. $('.dropdown-toggle').click(() => {
  35. lan = localStorage.getItem('lan');
  36. checkLan();
  37. });
  38. checkLan();
  39. function checkLan() {
  40. if(lan == 'en') {
  41. $('.btn-makev').css('display', 'none');
  42. $('.btn-makelong').css('display', 'none');
  43. $('#slide_raw_url').attr('placeholder', 'Slides Link (slides must be public)')
  44. } else {
  45. $('.btn-makev').css('display', 'block');
  46. $('.btn-makelong').css('display', 'block');
  47. }
  48. }
  49. const btnLoginPage = document.querySelector('.btn-login');
  50. const btnUserProfile = document.querySelector('.btn-userProfile');
  51. const btnLogout = document.querySelector('.btn-logout');
  52. function loginControl() {
  53. btnLoginPage.style.display = 'none';
  54. btnLogout.style.display = 'block';
  55. btnUserProfile.style.display = 'block';
  56. }
  57. loginControl();
  58. JsLoadingOverlay.show({
  59. "overlayBackgroundColor": "#FFFFFF",
  60. "overlayOpacity": "1",
  61. "spinnerIcon": "ball-circus",
  62. "spinnerColor": "#B9DDF3",
  63. "spinnerSize": "1x",
  64. "overlayIDName": "overlay",
  65. "spinnerIDName": "spinner",
  66. "offsetX": 0,
  67. "offsetY": 0,
  68. "containerID": "avatar-cards",
  69. "lockScroll": false,
  70. "overlayZIndex": 9998,
  71. "spinnerZIndex": 9999
  72. });
  73. window.setTimeout(() => {
  74. JsLoadingOverlay.hide()
  75. }, 5000)
  76. function getAvatar() {
  77. let jwt_token = get_jwt_token();
  78. if(jwt_token == undefined) {
  79. window.location.replace("login.html");
  80. }
  81. axios({
  82. method: 'post',
  83. url: 'https://www.choozmo.com:8887/get_avatar_by_role',
  84. headers: {
  85. 'accept': 'text/html',
  86. 'Authorization': `Bearer ${jwt_token}`
  87. }
  88. }).then(res => {
  89. console.log(res.data);
  90. let result = [...res.data];
  91. let str = '';
  92. let carStr = '';
  93. for(let i = 0; i < result.length; i++) {
  94. str += `<option value="${result[i].num}">${result[i].name}</option>`
  95. }
  96. for(let i = 0; i < result.length; i++) {
  97. carStr += `<div class="card item col" data-avatar="${result[i].name}" data-img="${result[i].name.toLowerCase()}">
  98. <div class="imgfr"><img src="static/img/${result[i].name.toLowerCase()}.webp" class="card-img-top" alt="..."></div>
  99. <div class="card-body">
  100. <h5 class="card-title">${result[i].name.toLowerCase()}</h5>
  101. </div>
  102. </div>`;
  103. }
  104. $('#avatar').html(`<option set-lan="html:p_choose_character" value="請選擇人物" selected="selected" disabled>請選擇人物</option>${str}`);
  105. $('.avatar-cards').html(carStr);
  106. if(lan = 'en') {
  107. $('#avatar option:disabled').val('Choose Character')
  108. $('#avatar option:disabled').text('Choose Character')
  109. }
  110. card = document.querySelectorAll('.avatar-cards .card');
  111. console.log(card);
  112. addCardListener(card);
  113. avatarChange()
  114. }).catch(err => {
  115. console.log(err);
  116. });
  117. }
  118. getAvatar();
  119. var client_id = Date.now();
  120. var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  121. var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  122. return new bootstrap.Tooltip(tooltipTriggerEl)
  123. });
  124. var myModal = new bootstrap.Modal(document.getElementById('history'), {
  125. keyboard: false
  126. })
  127. var avatarModal = new bootstrap.Modal(document.getElementById('avatarmega'), {
  128. keyboard: false
  129. })
  130. var modalImg = document.querySelector("#avatarmega .modal-img");
  131. var modalTitle = document.querySelector("#avatarmega .modal-title");
  132. var avatarSelector = document.getElementById("avatar");
  133. avatarSelector.addEventListener('change', avatarChange);
  134. // avatarChange();
  135. function addCardListener(card) {
  136. for (let i = 0; i < card.length; i++) {
  137. console.log(card[i]);
  138. card[i].addEventListener('click', openavatarModel);
  139. }
  140. }
  141. // addCardListener();
  142. function avatarChange() {
  143. var value = avatarSelector.options[avatarSelector.selectedIndex].text;
  144. for (let i = 0; i < card.length; i++) {
  145. card[i].classList.remove('active');
  146. if (card[i].dataset.avatar == value) {
  147. card[i].classList.add('active');
  148. }
  149. }
  150. }
  151. function openavatarModel() {
  152. console.log(this.dataset.img);
  153. modalImg.setAttribute("src", `static/img/${this.dataset.img}.webp`);
  154. modalTitle.textContent = `${this.dataset.avatar}`;
  155. avatarModal.show();
  156. }
  157. // Drafts
  158. function getDraft() {
  159. JsLoadingOverlay.show({
  160. "overlayBackgroundColor": "#FFFFFF",
  161. "overlayOpacity": "1",
  162. "spinnerIcon": "ball-circus",
  163. "spinnerColor": "#B9DDF3",
  164. "spinnerSize": "1x",
  165. "overlayIDName": "overlay",
  166. "spinnerIDName": "spinner",
  167. "offsetX": 0,
  168. "offsetY": 0,
  169. "containerID": "draft-table",
  170. "lockScroll": false,
  171. "overlayZIndex": 9998,
  172. "spinnerZIndex": 9999
  173. });
  174. let token = get_jwt_token();
  175. axios({
  176. method: 'post',
  177. url: 'https://www.choozmo.com:8887/draft_list',
  178. headers: {
  179. 'accept': 'application/json',
  180. 'Authorization': `Bearer ${token}`
  181. }
  182. }).then(res => {
  183. console.log(res.data);
  184. let result = [...res.data];
  185. let str = '';
  186. let draftStr = '';
  187. let nodraftTxt = '目前沒有草稿喔';
  188. if(lan == 'en') {
  189. titleTxt = 'Video Title';
  190. editTxt = 'Edit';
  191. nodraftTxt = 'no_draft';
  192. }
  193. if(result.length > 0){
  194. for(let i = 0;i < result.length; i++) {
  195. draftStr += `<tr>
  196. <td>${result[i].title}</td>
  197. <td>
  198. <span class="me-md-3 draft-content-icon" id="${result[i].id}" onclick="gotoDraft(${result[i].id})">
  199. <i class="fas fa-edit"></i>
  200. </span>
  201. <span class="ms-md-3 draft-content-icon draft-content-delete" id="${result[i].id}" onclick="deleteDraft(${result[i].id})">
  202. <i class="fas fa-trash-alt"></i>
  203. </span>
  204. </td>
  205. </tr>`
  206. }
  207. let titleTxt = '標題';
  208. let editTxt = '編輯';
  209. str = `<table class="table text-center">
  210. <thead>
  211. <tr>
  212. <th scope="col" set-lan="html:video_title">${titleTxt}</th>
  213. <th class="px-0" scope="col" set-lan="html:draft_edit">${editTxt}</th>
  214. </tr>
  215. </thead>
  216. <tbody class="draft-content">${draftStr}</tbody>
  217. </table>`
  218. $('.draft-table .card').html(str);
  219. JsLoadingOverlay.hide();
  220. } else {
  221. str = `<div>
  222. <h5 set-lan="html:no_draft">${nodraftTxt}</h5>
  223. <img src="static/img/undraw_void_3ggu.svg" width="80">
  224. </div>`;
  225. $('.draft-table .card').html(str);
  226. JsLoadingOverlay.hide();
  227. }
  228. }).catch(err => {
  229. console.log(err);
  230. });
  231. }
  232. getDraft();
  233. function openDrafts() {
  234. draftsModal.show()
  235. document.querySelector('#draftModal .loader').style.display = "block";
  236. $('#draftModal #draft-table').show();
  237. getDraft();
  238. document.querySelector('#draftModal .loader').style.display = "none";
  239. }
  240. function gotoDraft (id) {
  241. location.href = `make_video2.html?draftid=${id}`;
  242. }
  243. function deleteDraft(id) {
  244. let token = get_jwt_token();
  245. JsLoadingOverlay.show({
  246. "overlayBackgroundColor": "#FFFFFF",
  247. "overlayOpacity": "1",
  248. "spinnerIcon": "ball-circus",
  249. "spinnerColor": "#B9DDF3",
  250. "spinnerSize": "1x",
  251. "overlayIDName": "overlay",
  252. "spinnerIDName": "spinner",
  253. "offsetX": 0,
  254. "offsetY": 0,
  255. "containerID": "draft-table",
  256. "lockScroll": false,
  257. "overlayZIndex": 9998,
  258. "spinnerZIndex": 9999
  259. });
  260. axios({
  261. method: 'post',
  262. url: 'https://www.choozmo.com:8887/del_draft',
  263. headers: {
  264. 'accept': 'application/json',
  265. 'Authorization': `Bearer ${token}`,
  266. 'Content-Type': 'application/json'
  267. },
  268. data: { "id": id }
  269. }).then(res => {
  270. console.log(res.data);
  271. //$('.draft-content-delete').html('<i class="fas fa-trash-alt"></i>');
  272. JsLoadingOverlay.hide();
  273. getDraft();
  274. draftsModal.show();
  275. avatarModal.hide();
  276. }).catch(err => {
  277. console.log(err);
  278. });
  279. }
  280. // Upload
  281. $('input[type=file]').on('change', prepareUpload);
  282. function prepareUpload(event) {
  283. files = event.target.files;
  284. var data = new FormData();
  285. //data.append('file', $('.img_up1').prop('files')[0]);
  286. data.append('file', files[0]);
  287. // append other variables to data if you want: data.append('field_name_x', field_value_x);
  288. $(this).next().text('');
  289. $(this).next().html('<img src="static/img/Spinner-1s-181px.gif">');
  290. $.ajax({
  291. type: 'POST',
  292. processData: false, // important
  293. contentType: false, // important
  294. data: data,
  295. url: 'https://www.choozmo.com:8887/uploadfile',
  296. dataType: 'json',
  297. success: function (jsonData) {
  298. event.target.previousSibling.value = jsonData.msg;
  299. $(this).prev().val(jsonData.msg);
  300. event.target.nextSibling.innerHTML = '';
  301. event.target.nextSibling.textContent = '上傳檔案';
  302. //console.log($(this).next());
  303. //$(this).next().html('上傳檔案');
  304. //$(this).next().text('上傳檔案');
  305. },
  306. error: function (error) {
  307. event.target.nextSibling.innerHTML = '';
  308. event.target.nextSibling.textContent = '上傳檔案';
  309. alert('圖片錯誤');
  310. }
  311. });
  312. }
  313. const slide_button = document.querySelector('#send_slide');
  314. $("#send_slide").click(function () {
  315. slide_button.setAttribute('disabled', '');
  316. setTimeout(function () {
  317. slide_button.removeAttribute('disabled')
  318. }, 15000);
  319. avatar = $('.avatar').val();
  320. var step;
  321. multiLang = 0
  322. if ($('#multiLang').prop("checked")) {multiLang = 1;}
  323. dataOBJ = {'slide_url':$('#slide_raw_url').val(),"avatar": avatar,"multiLang":multiLang, "client_id": client_id, "url_type": 0 }
  324. objstr = JSON.stringify(dataOBJ);
  325. console.log(objstr)
  326. jwt_token = get_jwt_token()
  327. var xhr = new XMLHttpRequest();
  328. xhr.open("POST", "https://www.choozmo.com:8887/make_anchor_video_gSlide");
  329. xhr.setRequestHeader("accept", "application/json");
  330. xhr.setRequestHeader("Authorization","Bearer "+jwt_token);
  331. xhr.setRequestHeader("Content-Type", "application/json");
  332. xhr.onreadystatechange = function () {
  333. if (xhr.readyState === 4) {
  334. Swal.fire({
  335. title: "資料已送出",
  336. icon: 'success',
  337. text: '資料已傳送,請耐心等候',
  338. confirmButtonColor: '#3085d6',
  339. });
  340. }
  341. };
  342. var data = renderXHR_data(dataOBJ)
  343. console.log(data)
  344. result = xhr.send(objstr);
  345. });
  346. var loaded_data = ''
  347. function openNav() {
  348. document.getElementById("mySidenav").style.width = "250px";
  349. document.querySelector('.loader').style.display = "block";
  350. let jwt_token = get_jwt_token();
  351. axios({
  352. method: 'post',
  353. url: 'https://www.choozmo.com:8887/history_input',
  354. headers: {
  355. 'accept': 'application/json',
  356. 'Authorization': `Bearer ${jwt_token}`
  357. }
  358. }).then(res => {
  359. console.log(res.data);
  360. loaded_data = res.data;
  361. var historyList = document.querySelector('.historyList');
  362. historyList.innerHTML = '';
  363. for (var obj of loaded_data) {
  364. var list = document.createElement('li');
  365. list.id = obj.id;
  366. // div-imgfr
  367. var divImgfr = document.createElement('div');
  368. divImgfr.classList.add('item_imgfr');
  369. var img = document.createElement('img');
  370. img.setAttribute('src', obj['image_urls'][0]);
  371. divImgfr.appendChild(img);
  372. // div-content
  373. var contentBox = document.createElement('div');
  374. contentBox.classList.add('content-box');
  375. var boxTitle = document.createElement('p');
  376. boxTitle.classList.add('box-title');
  377. boxTitle.textContent = obj.name;
  378. boxTitle.id = obj.id;
  379. boxTitle.setAttribute('onclick', `direct(${obj.id})`);
  380. var boxLink = document.createElement('span');
  381. boxLink.classList.add('box-link');
  382. boxLink.setAttribute("data-url", obj.link);
  383. boxLink.setAttribute('onclick', 'view()');
  384. boxLink.innerHTML = '<i class="fas fa-play-circle me-1"></i>觀看影片';
  385. contentBox.appendChild(boxTitle);
  386. contentBox.appendChild(boxLink);
  387. list.classList.add("historyList-item");
  388. list.appendChild(divImgfr);
  389. list.appendChild(contentBox);
  390. historyList.appendChild(list);
  391. }
  392. document.querySelector('.loader').style.display = "none";
  393. }).catch(err => {
  394. console.log(err);
  395. });
  396. }
  397. function direct(id) {
  398. location.href = `make_video2.html?id=${id}`;
  399. }
  400. function closeNav() {
  401. document.getElementById("mySidenav").style.width = "250px";
  402. }
  403. function view() {
  404. event.stopPropagation();
  405. console.log(event.target);
  406. if (event.target.nodeName === 'I') {
  407. return;
  408. } else {
  409. window.open(`http://${event.target.dataset.url}`, '_blank');
  410. }
  411. }
  412. function renderXHR_data(jsonObj) {
  413. XHRstring = ''
  414. for (const [key, value] of Object.entries(jsonObj)) {
  415. console.log(value)
  416. if (typeof (value) == "object") {
  417. XHRstring += (key+'=['+value.join(',')+']&')
  418. }
  419. else {
  420. XHRstring += (key + '=' + value + '&')
  421. }
  422. }
  423. XHRstring = XHRstring.substring(0, XHRstring.length - 1);
  424. return XHRstring
  425. }
  426. function get_jwt_token(){
  427. jwt_raw = document.cookie.split(';').filter(s=>s.includes('jwt_token'))[0];
  428. if(!jwt_raw) {return}
  429. return jwt_raw.split('=')[1];
  430. }
  431. getpathId();
  432. function getpathId() {
  433. id = window.location.search.split('?').pop();
  434. return id.split('=')[1];
  435. //load_data(id);
  436. }
  437. // getData();
  438. function getData() {
  439. let jwt_token = get_jwt_token();
  440. axios({
  441. method: 'post',
  442. url: 'https://www.choozmo.com:8887/history_input',
  443. headers: {
  444. 'accept': 'application/json',
  445. 'Authorization': `Bearer ${jwt_token}`
  446. }
  447. }).then(res => {
  448. loaded_data = res.data;
  449. console.log(loaded_data);
  450. const id = getpathId();
  451. load_data(id, loaded_data);
  452. }).catch(err => {
  453. console.log(err);
  454. });
  455. }