script_util.js 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810
  1. checkRoute();
  2. let userBasics = JSON.parse(localStorage.getItem('user_profile')) || [];
  3. /* if(userBasics !== []){
  4. $('.userName').html(`<h2 class="user-name text-white mt-lg-3 mt-xl-1 fw-bold">Hi ${userBasics.user_info.userName}</h2>`);
  5. } */
  6. function checkRoute() {
  7. let jwt_token = get_jwt_token();
  8. if(jwt_token == undefined) {
  9. window.location.replace("login.html");
  10. }
  11. axios({
  12. method: 'post',
  13. url: 'https://www.choozmo.com:8887/user_profile',
  14. headers: {
  15. 'accept': 'text/html',
  16. 'Authorization': `Bearer ${jwt_token}`
  17. }
  18. }).then(res => {
  19. console.log(res.data);
  20. if(res.status !== 200) {
  21. window.location.replace("login.html");
  22. }
  23. var userName='';
  24. userName+=`<h2 class="user-name text-white mt-lg-3 mt-xl-1 fw-bold">Hi ${res.data.user_info.userName}</h2>`;
  25. $('.userName').html(userName);
  26. }).catch(err => {
  27. console.log(err);
  28. window.location.replace("login.html");
  29. });
  30. }
  31. const btnLoginPage = document.querySelector('.btn-login');
  32. const btnUserProfile = document.querySelector('.btn-userProfile');
  33. const btnLogout = document.querySelector('.btn-logout');
  34. function loginControl() {
  35. btnLoginPage.style.display = 'none';
  36. btnLogout.style.display = 'block';
  37. btnUserProfile.style.display = 'block';
  38. }
  39. loginControl();
  40. let lan = localStorage.getItem('lan');
  41. $('.dropdown-toggle').click(() => {
  42. lan = localStorage.getItem('lan');
  43. checkLan();
  44. });
  45. checkLan();
  46. function checkLan() {
  47. if(lan == 'en') {
  48. $('.btn-makev').css('display', 'none');
  49. $('.btn-makelong').css('display', 'none');
  50. } else {
  51. $('.btn-makev').css('display', 'block');
  52. $('.btn-makelong').css('display', 'block');
  53. }
  54. }
  55. function getAvatar() {
  56. let jwt_token = get_jwt_token();
  57. if(jwt_token == undefined) {
  58. window.location.replace("login.html");
  59. }
  60. axios({
  61. method: 'post',
  62. url: 'https://www.choozmo.com:8887/get_avatar_by_role',
  63. headers: {
  64. 'accept': 'text/html',
  65. 'Authorization': `Bearer ${jwt_token}`
  66. }
  67. }).then(res => {
  68. console.log(res.data);
  69. let result = [...res.data];
  70. let str = '';
  71. let carStr = '';
  72. for(let i = 0; i < result.length; i++) {
  73. str += `<option value="${result[i].num}">${result[i].name}</option>`
  74. }
  75. for(let i = 0; i < result.length; i++) {
  76. carStr += `<div class="card item col" data-avatar="${result[i].name}" data-img="${result[i].name.toLowerCase()}">
  77. <div class="imgfr"><img src="static/img/${result[i].name.toLowerCase()}.webp" class="card-img-top" alt="..."></div>
  78. <div class="card-body">
  79. <h5 class="card-title">${result[i].name.toLowerCase()}</h5>
  80. </div>
  81. </div>`;
  82. }
  83. $('#avatar').html(`<option set-lan="html:p_choose_character" value="請選擇人物" selected="selected" disabled>>請選擇人物</option>${str}`);
  84. $('.owl-carousel').html(carStr);
  85. card = document.getElementsByClassName('card');
  86. console.log(card);
  87. addCardListener(card);
  88. }).catch(err => {
  89. console.log(err);
  90. });
  91. }
  92. getAvatar();
  93. var client_id = Date.now()
  94. var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  95. var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  96. return new bootstrap.Tooltip(tooltipTriggerEl)
  97. });
  98. var myModal = new bootstrap.Modal(document.getElementById('history'), {
  99. keyboard: false
  100. })
  101. var avatarModal = new bootstrap.Modal(document.getElementById('avatarmega'), {
  102. keyboard: false
  103. })
  104. var modalImg = document.querySelector("#avatarmega .modal-img");
  105. var modalTitle = document.querySelector("#avatarmega .modal-title");
  106. var avatarSelector = document.getElementById("avatar");
  107. var card = '';
  108. avatarSelector.addEventListener('change', avatarChange);
  109. avatarChange();
  110. function addCardListener(arr) {
  111. for (let i = 0; i < arr.length; i++) {
  112. arr[i].addEventListener('click', openavatarModel);
  113. }
  114. }
  115. function avatarChange() {
  116. var value = avatarSelector.options[avatarSelector.selectedIndex].text;
  117. $('.owl-carousel').trigger('to.owl.carousel', avatarSelector.selectedIndex);
  118. for (let i = 0; i < card.length; i++) {
  119. card[i].classList.remove('active');
  120. if (card[i].dataset.avatar == value) {
  121. card[i].classList.add('active');
  122. }
  123. }
  124. }
  125. function openavatarModel() {
  126. console.log(this.dataset.img);
  127. modalImg.setAttribute("src", `static/img/${this.dataset.img}.webp`);
  128. modalTitle.textContent = `${this.dataset.avatar}`;
  129. avatarModal.show();
  130. }
  131. $('input[type=file]').on('change', prepareUpload);
  132. function prepareUpload(event) {
  133. files = event.target.files;
  134. var data = new FormData();
  135. //data.append('file', $('.img_up1').prop('files')[0]);
  136. data.append('file', files[0]);
  137. // append other variables to data if you want: data.append('field_name_x', field_value_x);
  138. $(this).next().text('');
  139. $(this).next().html('<img src="static/img/Spinner-1s-181px.gif">');
  140. $.ajax({
  141. type: 'POST',
  142. processData: false, // important
  143. contentType: false, // important
  144. data: data,
  145. url: 'https://www.choozmo.com:8887/uploadfile',
  146. dataType: 'json',
  147. success: function (jsonData) {
  148. event.target.previousSibling.value = jsonData.msg;
  149. $(this).prev().val(jsonData.msg);
  150. event.target.nextSibling.innerHTML = '';
  151. event.target.nextSibling.textContent = '上傳檔案';
  152. //console.log($(this).next());
  153. //$(this).next().html('上傳檔案');
  154. //$(this).next().text('上傳檔案');
  155. },
  156. error: function (error) {
  157. event.target.nextSibling.innerHTML = '';
  158. event.target.nextSibling.textContent = '上傳檔案';
  159. alert('圖片錯誤');
  160. }
  161. });
  162. }
  163. const button = document.querySelector('.next');
  164. $(".next").click(function () {
  165. button.setAttribute('disabled', '');
  166. setTimeout(function () {
  167. button.removeAttribute('disabled')
  168. }, 10000);
  169. avatar = $('.avatar').val();
  170. name_title = $('.title_new').val();
  171. txtARR = [];
  172. imgARR = [];
  173. var step;
  174. let contentIdx = document.querySelectorAll(".txtsrc").length;
  175. for (let i = 1; i < (contentIdx + 1); i++) {
  176. if ($(`.txtsrc${i}`).val() != "") {
  177. txtARR.push($(`.txtsrc${i}`).val())
  178. }
  179. }
  180. let imgIdx = document.querySelectorAll(".imgsrc").length;
  181. for (let i = 1; i < (imgIdx + 1); i++) {
  182. if ($(`.imgsrc${i}`).val() != "") {
  183. imgARR.push($(`.imgsrc${i}`).val())
  184. }
  185. }
  186. multiLang = 0;
  187. if ($('#multiLang').prop("checked")) {multiLang = 1;}
  188. dataOBJ = { "name": name_title, "text_content": txtARR, "image_urls": imgARR, "avatar": avatar,"multiLang":multiLang, "client_id": client_id }
  189. objstr = JSON.stringify(dataOBJ);
  190. console.log(dataOBJ)
  191. jwt_token = get_jwt_token()
  192. var xhr = new XMLHttpRequest();
  193. xhr.open("POST", "https://www.choozmo.com:8887/make_anchor_video");
  194. xhr.setRequestHeader("accept", "application/json");
  195. xhr.setRequestHeader("Authorization","Bearer "+jwt_token)
  196. xhr.setRequestHeader("Content-Type", "application/json");
  197. xhr.onreadystatechange = function () {
  198. if (xhr.readyState === 4) {
  199. responseOBJ = JSON.parse(xhr.responseText)
  200. console.log(responseOBJ.msg);
  201. //let title = "資料已送出";
  202. let text;
  203. if(lan == 'en') {
  204. //title = 'Submitted Successfully!';
  205. text = responseOBJ.msg.eng;
  206. } else {
  207. text = responseOBJ.msg.zh;
  208. }
  209. Swal.fire({
  210. // title: title,
  211. icon: 'info',
  212. text: text,
  213. confirmButtonColor: '#3085d6',
  214. });
  215. }
  216. };
  217. var data = renderXHR_data(dataOBJ)
  218. console.log(data)
  219. result = xhr.send(objstr);
  220. });
  221. const buttonSend = document.querySelector('#sendBTN');
  222. $("#sendBTN").click(function () {
  223. buttonSend.setAttribute('disabled', '');
  224. setTimeout(function () {
  225. buttonSend.removeAttribute('disabled')
  226. }, 4000);
  227. avatar = $('.avatar').val();
  228. name_title = $('.title_new').val();
  229. txtARR = [];
  230. imgARR = [];
  231. var step;
  232. let contentIdx = document.querySelectorAll(".txtsrc").length;
  233. for (let i = 1; i < (contentIdx + 1); i++) {
  234. if ($(`.txtsrc${i}`).val() != "") {
  235. txtARR.push($(`.txtsrc${i}`).val())
  236. }
  237. }
  238. let imgIdx = document.querySelectorAll(".imgsrc").length;
  239. for (let i = 1; i < (imgIdx + 1); i++) {
  240. if ($(`.imgsrc${i}`).val() != "") {
  241. imgARR.push($(`.imgsrc${i}`).val())
  242. }
  243. }
  244. multiLang = 0
  245. if ($('#multiLang').prop("checked")) {multiLang = 1;}
  246. dataOBJ = { "name": name_title, "text_content": txtARR, "image_urls": imgARR, "avatar": avatar,"multiLang":multiLang, "client_id": client_id }
  247. objstr = JSON.stringify(dataOBJ);
  248. console.log(dataOBJ)
  249. jwt_token = get_jwt_token()
  250. var xhr = new XMLHttpRequest();
  251. xhr.open("POST", "https://www.choozmo.com:8887/make_anchor_video_long");
  252. xhr.setRequestHeader("accept", "application/json");
  253. xhr.setRequestHeader("Authorization","Bearer "+jwt_token)
  254. xhr.setRequestHeader("Content-Type", "application/json");
  255. xhr.onreadystatechange = function () {
  256. if (xhr.readyState === 4) {
  257. responseOBJ = JSON.parse(xhr.responseText)
  258. if (responseOBJ.msg=='ok'){
  259. let title = "資料已送出";
  260. let text = '資料已傳送,請耐心等候';
  261. if (lan == 'en') { // 英文版訊息
  262. title = "Submitted Successfully!";
  263. text = 'We are working on your video. You will get notfication in line group when your video is done.';
  264. }
  265. Swal.fire({
  266. title: title,
  267. icon: 'success',
  268. text: text,
  269. confirmButtonColor: '#3085d6',
  270. });
  271. } else {
  272. let title = '發生錯誤';
  273. let text;
  274. if(lan == 'en') {
  275. title = 'Error';
  276. text = responseOBJ.msg.eng;
  277. } else {
  278. text = responseOBJ.msg.zh;
  279. }
  280. Swal.fire({
  281. title: title,
  282. icon: 'error',
  283. text: text,
  284. confirmButtonColor: '#3085d6',
  285. });
  286. }
  287. }
  288. };
  289. var data = renderXHR_data(dataOBJ)
  290. console.log(data)
  291. result = xhr.send(objstr);
  292. });
  293. const slide_button = document.querySelector('#send_slide');
  294. $("#send_slide").click(function () {
  295. slide_button.setAttribute('disabled', '');
  296. setTimeout(function () {
  297. slide_button.removeAttribute('disabled')
  298. }, 4000);
  299. avatar = $('.avatar').val();
  300. var step;
  301. multiLang = 0
  302. if ($('#multiLang').prop("checked")) {multiLang = 1;}
  303. dataOBJ = {'slide_url':$('#slide_raw_url').val(),"avatar": avatar,"multiLang":multiLang, "client_id": client_id }
  304. objstr = JSON.stringify(dataOBJ);
  305. jwt_token = get_jwt_token()
  306. var xhr = new XMLHttpRequest();
  307. xhr.open("POST", "https://www.choozmo.com:8887/make_anchor_video_gSlide");
  308. xhr.setRequestHeader("accept", "application/json");
  309. xhr.setRequestHeader("Authorization","Bearer "+jwt_token);
  310. xhr.setRequestHeader("Content-Type", "application/json");
  311. xhr.onreadystatechange = function () {
  312. if (xhr.readyState === 4) {
  313. let title = "資料已送出";
  314. let text = '資料已傳送,請耐心等候';
  315. if (lan == 'en') { // 英文版訊息
  316. title = "Submitted Successfully!";
  317. text = 'We are working on your video. You will get notfication in line group when your video is done.';
  318. }
  319. Swal.fire({
  320. title: title,
  321. icon: 'success',
  322. text: text,
  323. confirmButtonColor: '#3085d6',
  324. });
  325. }
  326. };
  327. var data = renderXHR_data(dataOBJ)
  328. console.log(data)
  329. result = xhr.send(objstr);
  330. });
  331. $(".gen_avatar").click(function () {
  332. dataOBJ = { "imgurl": $('.img_src').val() }
  333. objstr = JSON.stringify(dataOBJ);
  334. console.log(dataOBJ)
  335. //alert('資料已送出! 請耐心等候')
  336. $.ajax({
  337. url: 'https://www.choozmo.com:8887/swapFace',
  338. dataType: 'json', // 預期從server接收的資料型態
  339. contentType: 'application/json; charset=utf-8', // 要送到server的資料型態
  340. type: 'post',
  341. data: objstr,
  342. success: function (suc_data) {
  343. alert(suc_data.msg)
  344. },
  345. //data:JSON.stringify({n1:"12",n2:"22"}),
  346. error: function (error) {
  347. console.error(error)
  348. }
  349. });
  350. });
  351. var loaded_data = ''
  352. function openNav() {
  353. document.getElementById("mySidenav").style.width = "250px";
  354. document.querySelector('.loader').style.display = "block";
  355. let jwt_token = get_jwt_token();
  356. axios({
  357. method: 'post',
  358. url: 'https://www.choozmo.com:8887/history_input',
  359. headers: {
  360. 'accept': 'application/json',
  361. 'Authorization': `Bearer ${jwt_token}`
  362. }
  363. }).then(res => {
  364. console.log(res.data);
  365. loaded_data = res.data;
  366. var historyList = document.querySelector('.historyList');
  367. historyList.innerHTML = '';
  368. for (var obj of loaded_data) {
  369. var list = document.createElement('li');
  370. list.id = obj.id;
  371. // div-imgfr
  372. var divImgfr = document.createElement('div');
  373. divImgfr.classList.add('item_imgfr');
  374. var img = document.createElement('img');
  375. img.setAttribute('src', obj['image_urls'][0]);
  376. divImgfr.appendChild(img);
  377. // div-content
  378. var contentBox = document.createElement('div');
  379. contentBox.classList.add('content-box');
  380. var boxTitle = document.createElement('p');
  381. boxTitle.classList.add('box-title');
  382. boxTitle.textContent = obj.name;
  383. boxTitle.id = obj.id;
  384. console.log(loaded_data);
  385. boxTitle.setAttribute('onclick', `direct(${obj.id})`);
  386. var boxLink = document.createElement('span');
  387. boxLink.classList.add('box-link');
  388. boxLink.setAttribute("data-url", obj.link);
  389. boxLink.setAttribute('onclick', 'view()');
  390. boxLink.innerHTML = '<i class="fas fa-play-circle me-1"></i>觀看影片';
  391. contentBox.appendChild(boxTitle);
  392. contentBox.appendChild(boxLink);
  393. list.classList.add("historyList-item");
  394. list.setAttribute('onclick', `direct(${obj.id})`);
  395. list.appendChild(divImgfr);
  396. list.appendChild(contentBox);
  397. historyList.appendChild(list);
  398. }
  399. document.querySelector('.loader').style.display = "none";
  400. }).catch(err => {
  401. console.log(err);
  402. });
  403. }
  404. function closeNav() {
  405. document.getElementById("mySidenav").style.width = "250px";
  406. }
  407. function view() {
  408. event.stopPropagation();
  409. console.log(event.target);
  410. if (event.target.nodeName === 'I') {
  411. return;
  412. } else {
  413. window.open(`http://${event.target.dataset.url}`, '_blank');
  414. }
  415. }
  416. function renderXHR_data(jsonObj) {
  417. XHRstring = ''
  418. for (const [key, value] of Object.entries(jsonObj)) {
  419. console.log(value)
  420. if (typeof (value) == "object") {
  421. XHRstring += (key+'=['+value.join(',')+']&')
  422. }
  423. else {
  424. XHRstring += (key + '=' + value + '&')
  425. }
  426. }
  427. XHRstring = XHRstring.substring(0, XHRstring.length - 1);
  428. return XHRstring
  429. }
  430. function get_jwt_token(){
  431. jwt_raw = document.cookie.split(';').filter(s=>s.includes('jwt_token'))[0];
  432. if(!jwt_raw) {return}
  433. return jwt_raw.split('=')[1];
  434. }
  435. function direct(id) {
  436. location.href = `make_video.html?id=${id}`;
  437. }
  438. function load_data(tid, loaded_data, draft = false) {
  439. if(!tid) {
  440. return;
  441. }
  442. var title = document.getElementById("title");
  443. var linker = document.getElementById("linker");
  444. myModal.hide();
  445. if(!draft) {
  446. linker.setAttribute('href', `http://${loaded_data.find(item => item.id == tid).link}`)
  447. linker.setAttribute('target', '_blank')
  448. $("#linker").html(`http://${loaded_data.find(item => item.id == tid).link}`)
  449. $("#linker").show();
  450. $(".linker__box").show();
  451. }
  452. console.log(loaded_data);
  453. let historyItem = loaded_data.filter(item => item.id == tid)[0];
  454. console.log(historyItem.title);
  455. if(draft) {
  456. $(".title_new").val(historyItem.title);
  457. $("#avatar").val(historyItem.avatar);
  458. } else {
  459. $(".title_new").val(loaded_data.find(item => item.id == tid).name);
  460. $("#avatar").val(historyItem.avatar);
  461. }
  462. let txtlength = historyItem.text_content.length;
  463. let imglength = historyItem.image_urls.length;
  464. subtitleInputs.innerHTML = '';
  465. imgInputs.innerHTML = '';
  466. for (let i = 0; i < txtlength; i++) {
  467. var txtinput = document.createElement("input");
  468. txtinput.setAttribute('type', 'text');
  469. txtinput.setAttribute('name', `t${i + 1}`);
  470. txtinput.value = historyItem.text_content[i];
  471. txtinput.setAttribute('placeholder', `${i + 1}`);
  472. txtinput.classList.add('txtsrc', `txtsrc${i + 1}`)
  473. subtitleInputs.appendChild(txtinput);
  474. }
  475. for (let i = 0; i < imglength; i++) {
  476. var imginput = document.createElement("input");
  477. imginput.setAttribute('type', 'text');
  478. imginput.setAttribute('name', `m${i + 1}`);
  479. imginput.classList.add('imgsrc', `imgsrc${i + 1}`);
  480. imginput.value = historyItem.image_urls[i];
  481. imginput.setAttribute('placeholder', `${i + 1}`);
  482. imgInputs.appendChild(imginput);
  483. var imgupload = document.createElement("input");
  484. imgupload.setAttribute('id', `img${i + 1}`);
  485. imgupload.setAttribute('type', `file`);
  486. imgupload.classList.add('img_uploader', 'img_up');
  487. imgInputs.appendChild(imgupload);
  488. var imguploadlabel = document.createElement("label");
  489. imguploadlabel.setAttribute('for', `img${i + 1}`);
  490. imguploadlabel.classList.add('upload-btn');
  491. imguploadlabel.textContent = '上傳檔案';
  492. if(lan == 'en') {
  493. imguploadlabel.textContent = 'Upload';
  494. }
  495. imguploadlabel.setAttribute('set-lan', `html:upload_file`);
  496. imgInputs.appendChild(imguploadlabel);
  497. }
  498. setTimeout(() => {
  499. JsLoadingOverlay.hide();
  500. }, 0);
  501. }
  502. getpathId();
  503. function getMode() {
  504. let id = window.location.search.split('?').pop();
  505. let mode = id.split('=')[0];
  506. if(mode == 'draftid') {
  507. /* JsLoadingOverlay.show({
  508. "overlayBackgroundColor": "#FFFFFF",
  509. "overlayOpacity": "0.9",
  510. "spinnerIcon": "ball-circus",
  511. "spinnerColor": "#B9DDF3",
  512. "spinnerSize": "2x",
  513. "overlayIDName": "overlay",
  514. "spinnerIDName": "spinner",
  515. "offsetX": 0,
  516. "offsetY": 0,
  517. "containerID": null,
  518. "lockScroll": false,
  519. "overlayZIndex": 9998,
  520. "spinnerZIndex": 9999
  521. }); */
  522. getDraftData();
  523. } else if(mode == 'id') {
  524. /* JsLoadingOverlay.show({
  525. "overlayBackgroundColor": "#FFFFFF",
  526. "overlayOpacity": "0.9",
  527. "spinnerIcon": "ball-circus",
  528. "spinnerColor": "#B9DDF3",
  529. "spinnerSize": "2x",
  530. "overlayIDName": "overlay",
  531. "spinnerIDName": "spinner",
  532. "offsetX": 0,
  533. "offsetY": 0,
  534. "containerID": null,
  535. "lockScroll": false,
  536. "overlayZIndex": 9998,
  537. "spinnerZIndex": 9999
  538. }); */
  539. getData();
  540. }
  541. return id.split('=')[1];
  542. //load_data(id);
  543. }
  544. getMode();
  545. function getpathId(){
  546. let id = window.location.search.split('?').pop();
  547. return id.split('=')[1];
  548. }
  549. function getData() {
  550. let jwt_token = get_jwt_token();
  551. axios({
  552. method: 'post',
  553. url: 'https://www.choozmo.com:8887/history_input',
  554. headers: {
  555. 'accept': 'application/json',
  556. 'Authorization': `Bearer ${jwt_token}`
  557. }
  558. }).then(res => {
  559. loaded_data = res.data;
  560. console.log(loaded_data);
  561. const id = getpathId();
  562. load_data(id, loaded_data);
  563. }).catch(err => {
  564. console.log(err);
  565. });
  566. }
  567. var subtitleInputs = document.querySelector(".subtitle-inputs");
  568. var imgInputs = document.querySelector(".img-inputs");
  569. let length = 5;
  570. function initial() {
  571. for (let i = 0; i < length; i++) {
  572. rendertxtBlock(i + 1);
  573. renderimgBlock(i + 1);
  574. }
  575. console.log(document.querySelectorAll(".txtsrc").length + 1);
  576. }
  577. initial();
  578. var addbtn = document.querySelector(".add");
  579. var addimgbtn = document.querySelector(".addimg");
  580. addbtn.addEventListener('click', addtxtBlock);
  581. addimgbtn.addEventListener('click', addimgBlock);
  582. function addtxtBlock() {
  583. let newIdx = document.querySelectorAll(".txtsrc").length + 1;
  584. rendertxtBlock(newIdx);
  585. }
  586. function addimgBlock() {
  587. let newimgIdx = document.querySelectorAll(".imgsrc").length + 1;
  588. renderimgBlock(newimgIdx);
  589. }
  590. function rendertxtBlock(i) {
  591. var txtinput = document.createElement("input");
  592. txtinput.setAttribute('type', 'text');
  593. txtinput.setAttribute('name', `t${i}`);
  594. txtinput.value = "";
  595. txtinput.setAttribute('placeholder', `${i}`);
  596. txtinput.classList.add('txtsrc', `txtsrc${i}`)
  597. subtitleInputs.appendChild(txtinput);
  598. }
  599. function renderimgBlock(i) {
  600. var imginput = document.createElement("input");
  601. imginput.setAttribute('type', 'text');
  602. imginput.setAttribute('name', `m${i}`);
  603. imginput.classList.add('imgsrc', `imgsrc${i}`);
  604. imginput.value = "";
  605. imginput.setAttribute('placeholder', `${i}`);
  606. imgInputs.appendChild(imginput);
  607. var imgupload = document.createElement("input");
  608. imgupload.setAttribute('id', `img${i}`);
  609. imgupload.setAttribute('type', `file`);
  610. imgupload.classList.add('img_uploader', 'img_up');
  611. imgInputs.appendChild(imgupload);
  612. var imguploadlabel = document.createElement("label");
  613. imguploadlabel.setAttribute('for', `img${i}`);
  614. imguploadlabel.classList.add('upload-btn');
  615. imguploadlabel.textContent = '上傳檔案';
  616. if(lan == 'en') {
  617. imguploadlabel.textContent = 'Upload';
  618. }
  619. imguploadlabel.setAttribute('set-lan', `html:upload_file`);
  620. imgInputs.appendChild(imguploadlabel);
  621. $('input[type=file]').on('change', prepareUpload);
  622. }
  623. $('.owl-carousel').owlCarousel({
  624. loop: true,
  625. margin: 10,
  626. nav: false,
  627. mouseDrag: true,
  628. touchDrag: true,
  629. smartSpeed: 1000,
  630. autoplay: true,
  631. autoplayTimeout: 8000,
  632. autoplayHoverPause: false,
  633. responsive: {
  634. 0: {
  635. items: 1
  636. },
  637. 600: {
  638. items: 2
  639. },
  640. 1000: {
  641. items: 4
  642. }
  643. }
  644. });
  645. $('.draft-btn').click(() => {
  646. let text = '儲存中...';
  647. if (lan == 'en') {
  648. text = 'Saving...';
  649. }
  650. $('.draft-btn').text(text);
  651. let jwt_token = get_jwt_token();
  652. let avatar = $('.avatar').val();
  653. let name_title = $('.title_new').val();
  654. let txtARR = [];
  655. let imgARR = [];
  656. var step;
  657. let contentIdx = document.querySelectorAll(".txtsrc").length;
  658. for (let i = 1; i < (contentIdx + 1); i++) {
  659. if ($(`.txtsrc${i}`).val() != "") {
  660. txtARR.push($(`.txtsrc${i}`).val())
  661. }
  662. }
  663. let imgIdx = document.querySelectorAll(".imgsrc").length;
  664. for (let i = 1; i < (imgIdx + 1); i++) {
  665. if ($(`.imgsrc${i}`).val() != "") {
  666. imgARR.push($(`.imgsrc${i}`).val())
  667. }
  668. }
  669. let multiLang = 0
  670. if ($('#multiLang').prop("checked")) {multiLang = 1;}
  671. let id = window.location.search.split('?').pop();
  672. let mode = id.split('=')[0];
  673. if(mode == 'draftid') {
  674. id = Number(id.split('=')[1]);
  675. } else {
  676. id = -1;
  677. }
  678. let dataOBJ = { "id": id, "title": name_title, "text_content": txtARR, "image_urls": imgARR, "avatar": avatar,"multiLang":multiLang }
  679. console.log(dataOBJ);
  680. axios({
  681. method: 'post',
  682. url: 'https://www.choozmo.com:8887/save_draft',
  683. headers: {
  684. 'accept': 'application/json',
  685. 'Authorization': `Bearer ${jwt_token}`,
  686. 'Content-Type': 'application/json',
  687. },
  688. data: dataOBJ
  689. }).then(res => {
  690. console.log(res.data);
  691. $('.draft-btn').text('存為草稿');
  692. let title = "儲存完成";
  693. if(lan == 'en') {
  694. title = 'Saved!'
  695. $('.draft-btn').text('Save as Draft');
  696. }
  697. Swal.fire({
  698. title: title,
  699. icon: 'success',
  700. confirmButtonColor: '#3085d6',
  701. });
  702. }).catch(err => {
  703. console.log(err);
  704. });
  705. });
  706. function getDraftData() {
  707. let token = get_jwt_token();
  708. axios({
  709. method: 'post',
  710. url: 'https://www.choozmo.com:8887/draft_list',
  711. headers: {
  712. 'accept': 'application/json',
  713. 'Authorization': `Bearer ${token}`
  714. }
  715. }).then(res => {
  716. console.log(res.data);
  717. let result = [...res.data];
  718. let id = getpathId();
  719. load_data(id, result, true);
  720. }).catch(err => {
  721. console.log(err);
  722. });
  723. }
  724. $(".copy").click(function(){
  725. const copyStr = $(this).next().text();
  726. copyToClipboard(copyStr);
  727. });
  728. const copyToClipboard = str => {
  729. const el = document.createElement('textarea');
  730. el.value = str;
  731. el.setAttribute('readonly', '');
  732. el.style.position = 'absolute';
  733. el.style.left = '-9999px';
  734. document.body.appendChild(el);
  735. el.select();
  736. document.execCommand('copy');
  737. document.body.removeChild(el);
  738. Swal.fire({
  739. toast: true,
  740. icon: 'success',
  741. position: 'top-end',
  742. title: 'Link copied!',
  743. timerProgressBar: true,
  744. showConfirmButton: false,
  745. timer: 1000,
  746. backdrop: false
  747. })
  748. };