script_util.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507
  1. var client_id = Date.now()
  2. var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  3. var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  4. return new bootstrap.Tooltip(tooltipTriggerEl)
  5. });
  6. var myModal = new bootstrap.Modal(document.getElementById('history'), {
  7. keyboard: false
  8. })
  9. var avatarModal = new bootstrap.Modal(document.getElementById('avatarmega'), {
  10. keyboard: false
  11. })
  12. var modalImg = document.querySelector("#avatarmega .modal-img");
  13. var modalTitle = document.querySelector("#avatarmega .modal-title");
  14. var avatarSelector = document.getElementById("avatar");
  15. var card = document.getElementsByClassName('card');
  16. card = [...card];
  17. avatarSelector.addEventListener('change', avatarChange);
  18. avatarChange();
  19. function addCardListener() {
  20. for (let i = 0; i < card.length; i++) {
  21. card[i].addEventListener('click', openavatarModel);
  22. }
  23. }
  24. addCardListener();
  25. function avatarChange() {
  26. var value = avatarSelector.options[avatarSelector.selectedIndex].text;
  27. $('.owl-carousel').trigger('to.owl.carousel', avatarSelector.selectedIndex);
  28. console.log(value);
  29. for (let i = 0; i < card.length; i++) {
  30. card[i].classList.remove('active');
  31. if (card[i].dataset.avatar == value) {
  32. card[i].classList.add('active');
  33. }
  34. }
  35. }
  36. function openavatarModel() {
  37. console.log(this.dataset.img);
  38. modalImg.setAttribute("src", `static/img/${this.dataset.img}.webp`);
  39. modalTitle.textContent = `${this.dataset.avatar}`;
  40. avatarModal.show();
  41. }
  42. $('.pttx_uploader').on('change', prepareUploadPTTX);
  43. function prepareUploadPTTX(event) {
  44. files = event.target.files;
  45. var data = new FormData();
  46. //data.append('file', $('.img_up1').prop('files')[0]);
  47. data.append('file', files[0]);
  48. // append other variables to data if you want: data.append('field_name_x', field_value_x);
  49. $(this).next().text('');
  50. $(this).next().html('<img src="static/img/Spinner-1s-181px.gif">');
  51. $.ajax({
  52. type: 'POST',
  53. processData: false, // important
  54. contentType: false, // important
  55. data: data,
  56. url: '/upload_pttx',
  57. dataType: 'json',
  58. success: function (jsonData) {
  59. event.target.previousSibling.value = jsonData.msg;
  60. $(this).prev().val(jsonData.msg);
  61. event.target.nextSibling.innerHTML = '';
  62. event.target.nextSibling.textContent = '上傳檔案';
  63. //console.log($(this).next());
  64. //$(this).next().html('上傳檔案');
  65. //$(this).next().text('上傳檔案');
  66. $('#url_type').val('1');
  67. },
  68. error: function (error) {
  69. event.target.nextSibling.innerHTML = '';
  70. event.target.nextSibling.textContent = '上傳檔案';
  71. alert('圖片錯誤');
  72. }
  73. });
  74. }
  75. $('.img_uploader').on('change', prepareUpload);
  76. function prepareUpload(event) {
  77. files = event.target.files;
  78. var data = new FormData();
  79. //data.append('file', $('.img_up1').prop('files')[0]);
  80. data.append('file', files[0]);
  81. // append other variables to data if you want: data.append('field_name_x', field_value_x);
  82. $(this).next().text('');
  83. $(this).next().html('<img src="static/img/Spinner-1s-181px.gif">');
  84. $.ajax({
  85. type: 'POST',
  86. processData: false, // important
  87. contentType: false, // important
  88. data: data,
  89. url: '/uploadfile',
  90. dataType: 'json',
  91. success: function (jsonData) {
  92. event.target.previousSibling.value = jsonData.msg;
  93. $(this).prev().val(jsonData.msg);
  94. event.target.nextSibling.innerHTML = '';
  95. event.target.nextSibling.textContent = '上傳檔案';
  96. //console.log($(this).next());
  97. //$(this).next().html('上傳檔案');
  98. //$(this).next().text('上傳檔案');
  99. },
  100. error: function (error) {
  101. event.target.nextSibling.innerHTML = '';
  102. event.target.nextSibling.textContent = '上傳檔案';
  103. alert('圖片錯誤');
  104. }
  105. });
  106. }
  107. const button = document.querySelector('.next');
  108. $(".next").click(function () {
  109. //$(".next").prop("disabled",true);
  110. button.setAttribute('disabled', '');
  111. setTimeout(function () {
  112. button.removeAttribute('disabled')
  113. }, 10000);
  114. avatar = $('.avatar').val();
  115. name_title = $('.title_new').val();
  116. txtARR = [];
  117. imgARR = [];
  118. var step;
  119. let contentIdx = document.querySelectorAll(".txtsrc").length;
  120. for (let i = 1; i < (contentIdx + 1); i++) {
  121. if ($(`.txtsrc${i}`).val() != "") {
  122. txtARR.push($(`.txtsrc${i}`).val())
  123. }
  124. }
  125. let imgIdx = document.querySelectorAll(".imgsrc").length;
  126. for (let i = 1; i < (imgIdx + 1); i++) {
  127. if ($(`.imgsrc${i}`).val() != "") {
  128. imgARR.push($(`.imgsrc${i}`).val())
  129. }
  130. }
  131. multiLang = 0
  132. if ($('#multiLang').prop("checked")) {multiLang = 1;}
  133. dataOBJ = { "name": name_title, "text_content": txtARR, "image_urls": imgARR, "avatar": avatar,"multiLang":multiLang, "client_id": client_id }
  134. objstr = JSON.stringify(dataOBJ);
  135. console.log(dataOBJ)
  136. jwt_token = get_jwt_token()
  137. var xhr = new XMLHttpRequest();
  138. xhr.open("POST", "/make_anchor_video");
  139. xhr.setRequestHeader("accept", "application/json");
  140. xhr.setRequestHeader("Authorization","Bearer "+jwt_token)
  141. xhr.setRequestHeader("Content-Type", "application/json");
  142. xhr.onreadystatechange = function () {
  143. $(".next").prop("disabled",false)
  144. if (xhr.readyState === 4) {
  145. responseOBJ = JSON.parse(xhr.responseText)
  146. if (responseOBJ.msg=='ok')
  147. {
  148. Swal.fire({
  149. title: "資料已送出",
  150. icon: 'success',
  151. text: '資料已傳送,請耐心等候',
  152. confirmButtonColor: '#3085d6',
  153. });
  154. }
  155. else{
  156. Swal.fire({
  157. title: "發生錯誤",
  158. icon: 'error',
  159. text: responseOBJ.msg,
  160. confirmButtonColor: '#3085d6',
  161. });
  162. }
  163. }
  164. };
  165. var data = renderXHR_data(dataOBJ)
  166. console.log(data)
  167. result = xhr.send(objstr);
  168. });
  169. const buttonSend = document.querySelector('#sendBTN');
  170. $("#sendBTN").click(function () {
  171. buttonSend.setAttribute('disabled', '');
  172. setTimeout(function () {
  173. buttonSend.removeAttribute('disabled')
  174. }, 4000);
  175. avatar = $('.avatar').val();
  176. name_title = $('.title_new').val();
  177. txtARR = [];
  178. imgARR = [];
  179. var step;
  180. let contentIdx = document.querySelectorAll(".txtsrc").length;
  181. for (let i = 1; i < (contentIdx + 1); i++) {
  182. if ($(`.txtsrc${i}`).val() != "") {
  183. txtARR.push($(`.txtsrc${i}`).val())
  184. }
  185. }
  186. let imgIdx = document.querySelectorAll(".imgsrc").length;
  187. for (let i = 1; i < (imgIdx + 1); i++) {
  188. if ($(`.imgsrc${i}`).val() != "") {
  189. imgARR.push($(`.imgsrc${i}`).val())
  190. }
  191. }
  192. multiLang = 0
  193. if ($('#multiLang').prop("checked")) {multiLang = 1;}
  194. dataOBJ = { "name": name_title, "text_content": txtARR, "image_urls": imgARR, "avatar": avatar,"multiLang":multiLang, "client_id": client_id }
  195. objstr = JSON.stringify(dataOBJ);
  196. console.log(dataOBJ)
  197. jwt_token = get_jwt_token()
  198. var xhr = new XMLHttpRequest();
  199. xhr.open("POST", "/make_anchor_video_long");
  200. xhr.setRequestHeader("accept", "application/json");
  201. xhr.setRequestHeader("Authorization","Bearer "+jwt_token)
  202. xhr.setRequestHeader("Content-Type", "application/json");
  203. xhr.onreadystatechange = function () {
  204. if (xhr.readyState === 4) {
  205. responseOBJ = JSON.parse(xhr.responseText)
  206. if (responseOBJ.msg=='ok')
  207. {
  208. Swal.fire({
  209. title: "資料已送出",
  210. icon: 'success',
  211. text: '資料已傳送,請耐心等候',
  212. confirmButtonColor: '#3085d6',
  213. });
  214. }
  215. else{
  216. Swal.fire({
  217. title: "發生錯誤",
  218. icon: 'error',
  219. text: responseOBJ.msg,
  220. confirmButtonColor: '#3085d6',
  221. });
  222. }
  223. }
  224. };
  225. var data = renderXHR_data(dataOBJ)
  226. console.log(data)
  227. result = xhr.send(objstr);
  228. });
  229. const slide_button = document.querySelector('#send_slide');
  230. $("#send_slide").click(function () {
  231. slide_button.setAttribute('disabled', '');
  232. setTimeout(function () {
  233. slide_button.removeAttribute('disabled')
  234. }, 4000);
  235. avatar = $('.avatar').val();
  236. var step;
  237. multiLang = 0
  238. if ($('#multiLang').prop("checked")) {multiLang = 1;}
  239. dataOBJ = {'slide_url':$('#slide_raw_url').val(),"avatar": avatar,"multiLang":multiLang, "client_id": client_id,"url_type":$('#url_type').val() }
  240. objstr = JSON.stringify(dataOBJ);
  241. jwt_token = get_jwt_token()
  242. var xhr = new XMLHttpRequest();
  243. xhr.open("POST", "/make_anchor_video_gSlide");
  244. xhr.setRequestHeader("accept", "application/json");
  245. xhr.setRequestHeader("Authorization","Bearer "+jwt_token)
  246. xhr.setRequestHeader("Content-Type", "application/json");
  247. xhr.onreadystatechange = function () {
  248. if (xhr.readyState === 4) {
  249. Swal.fire({
  250. title: "資料已送出",
  251. icon: 'success',
  252. text: '資料已傳送,請耐心等候',
  253. confirmButtonColor: '#3085d6',
  254. });
  255. }
  256. };
  257. var data = renderXHR_data(dataOBJ)
  258. console.log(data)
  259. result = xhr.send(objstr);
  260. });
  261. $(".gen_avatar").click(function () {
  262. dataOBJ = { "imgurl": $('.img_src').val() }
  263. objstr = JSON.stringify(dataOBJ);
  264. console.log(dataOBJ)
  265. //alert('資料已送出! 請耐心等候')
  266. $.ajax({
  267. url: '/swapFace',
  268. dataType: 'json', // 預期從server接收的資料型態
  269. contentType: 'application/json; charset=utf-8', // 要送到server的資料型態
  270. type: 'post',
  271. data: objstr,
  272. success: function (suc_data) {
  273. alert(suc_data.msg)
  274. },
  275. //data:JSON.stringify({n1:"12",n2:"22"}),
  276. error: function (error) {
  277. console.error(error)
  278. }
  279. });
  280. });
  281. var loaded_data = ''
  282. function openNav() {
  283. document.getElementById("mySidenav").style.width = "250px";
  284. document.querySelector('.loader').style.display = "block";
  285. $.get("/history_input_old", function (data, status) {
  286. console.log(data)
  287. loaded_data = data
  288. for (var obj of data) {
  289. var historyList = document.querySelector('.historyList');
  290. var list = document.createElement('li');
  291. list.id = obj.id;
  292. // div-imgfr
  293. var divImgfr = document.createElement('div');
  294. divImgfr.classList.add('item_imgfr');
  295. var img = document.createElement('img');
  296. img.setAttribute('src', obj['image_urls'][0]);
  297. divImgfr.appendChild(img);
  298. // div-content
  299. var contentBox = document.createElement('div');
  300. contentBox.classList.add('content-box');
  301. var boxTitle = document.createElement('p');
  302. boxTitle.classList.add('box-title');
  303. boxTitle.textContent = obj.name;
  304. boxTitle.id = obj.id;
  305. boxTitle.setAttribute('onclick', 'load_data()');
  306. var boxLink = document.createElement('span');
  307. boxLink.classList.add('box-link');
  308. boxLink.setAttribute("data-url", obj.link);
  309. boxLink.setAttribute('onclick', 'view()');
  310. boxLink.innerHTML = '<i class="fas fa-play-circle me-1"></i>觀看影片';
  311. contentBox.appendChild(boxTitle);
  312. contentBox.appendChild(boxLink);
  313. list.classList.add("historyList-item");
  314. list.setAttribute('onclick', 'load_data()');
  315. list.appendChild(divImgfr);
  316. list.appendChild(contentBox);
  317. historyList.appendChild(list);
  318. }
  319. document.querySelector('.loader').style.display = "none";
  320. });
  321. }
  322. function closeNav() {
  323. document.getElementById("mySidenav").style.width = "250px";
  324. }
  325. function view() {
  326. event.stopPropagation();
  327. console.log(event.target);
  328. if (event.target.nodeName === 'I') {
  329. return;
  330. } else {
  331. window.open(`http://${event.target.dataset.url}`, '_blank');
  332. }
  333. }
  334. function renderXHR_data(jsonObj) {
  335. XHRstring = ''
  336. for (const [key, value] of Object.entries(jsonObj)) {
  337. console.log(value)
  338. if (typeof (value) == "object") {
  339. XHRstring += (key+'=['+value.join(',')+']&')
  340. }
  341. else {
  342. XHRstring += (key + '=' + value + '&')
  343. }
  344. }
  345. XHRstring = XHRstring.substring(0, XHRstring.length - 1);
  346. return XHRstring
  347. }
  348. function get_jwt_token(){
  349. jwt_raw = document.cookie.split(';').filter(s=>s.includes('jwt_token'))[0]
  350. return jwt_raw.split('=')[1]
  351. }
  352. function load_data() {
  353. var title = document.getElementById("title");
  354. var linker = document.getElementById("linker");
  355. myModal.hide()
  356. tid = event.srcElement.id
  357. console.log(tid);
  358. linker.setAttribute('href', `http://${loaded_data.find(item => item.id == tid).link}`)
  359. linker.setAttribute('target', '_blank')
  360. $("#linker").html(`http://${loaded_data.find(item => item.id == tid).link}`)
  361. $("#linker").show();
  362. $(".linker__box").show();
  363. let historyItem = loaded_data.filter(item => item.id == tid)[0];
  364. console.log(historyItem);
  365. $(".title_new").val(loaded_data.find(item => item.id == tid).name);
  366. let txtlength = historyItem.text_content.length;
  367. let imglength = historyItem.image_urls.length;
  368. subtitleInputs.innerHTML = '';
  369. imgInputs.innerHTML = '';
  370. for (let i = 0; i < txtlength; i++) {
  371. var txtinput = document.createElement("input");
  372. txtinput.setAttribute('type', 'text');
  373. txtinput.setAttribute('name', `t${i + 1}`);
  374. txtinput.value = historyItem.text_content[i];
  375. txtinput.setAttribute('placeholder', `${i + 1}`);
  376. txtinput.classList.add('txtsrc', `txtsrc${i + 1}`)
  377. subtitleInputs.appendChild(txtinput);
  378. }
  379. for (let i = 0; i < imglength; i++) {
  380. var imginput = document.createElement("input");
  381. imginput.setAttribute('type', 'text');
  382. imginput.setAttribute('name', `m${i + 1}`);
  383. imginput.classList.add('imgsrc', `imgsrc${i + 1}`);
  384. imginput.value = historyItem.image_urls[i];
  385. imginput.setAttribute('placeholder', `${i + 1}`);
  386. imgInputs.appendChild(imginput);
  387. var imgupload = document.createElement("input");
  388. imgupload.setAttribute('id', `img${i + 1}`);
  389. imgupload.setAttribute('type', `file`);
  390. imgupload.classList.add('img_uploader', 'img_up');
  391. imgInputs.appendChild(imgupload);
  392. var imguploadlabel = document.createElement("label");
  393. imguploadlabel.setAttribute('for', `img${i + 1}`);
  394. imguploadlabel.classList.add('upload-btn');
  395. imguploadlabel.textContent = '上傳檔案';
  396. imgInputs.appendChild(imguploadlabel);
  397. }
  398. }
  399. var subtitleInputs = document.querySelector(".subtitle-inputs");
  400. var imgInputs = document.querySelector(".img-inputs");
  401. let length = 5;
  402. function initial() {
  403. for (let i = 0; i < length; i++) {
  404. rendertxtBlock(i + 1);
  405. renderimgBlock(i + 1);
  406. }
  407. console.log(document.querySelectorAll(".txtsrc").length + 1);
  408. }
  409. initial();
  410. var addbtn = document.querySelector(".add");
  411. var addimgbtn = document.querySelector(".addimg");
  412. addbtn.addEventListener('click', addtxtBlock);
  413. addimgbtn.addEventListener('click', addimgBlock);
  414. function addtxtBlock() {
  415. let newIdx = document.querySelectorAll(".txtsrc").length + 1;
  416. rendertxtBlock(newIdx);
  417. }
  418. function addimgBlock() {
  419. let newimgIdx = document.querySelectorAll(".imgsrc").length + 1;
  420. renderimgBlock(newimgIdx);
  421. }
  422. function rendertxtBlock(i) {
  423. var txtinput = document.createElement("input");
  424. txtinput.setAttribute('type', 'text');
  425. txtinput.setAttribute('name', `t${i}`);
  426. txtinput.value = "";
  427. txtinput.setAttribute('placeholder', `${i}`);
  428. txtinput.classList.add('txtsrc', `txtsrc${i}`)
  429. subtitleInputs.appendChild(txtinput);
  430. }
  431. function renderimgBlock(i) {
  432. var imginput = document.createElement("input");
  433. imginput.setAttribute('type', 'text');
  434. imginput.setAttribute('name', `m${i}`);
  435. imginput.classList.add('imgsrc', `imgsrc${i}`);
  436. imginput.value = "";
  437. imginput.setAttribute('placeholder', `${i}`);
  438. imgInputs.appendChild(imginput);
  439. var imgupload = document.createElement("input");
  440. imgupload.setAttribute('id', `img${i}`);
  441. imgupload.setAttribute('type', `file`);
  442. imgupload.classList.add('img_uploader', 'img_up');
  443. imgInputs.appendChild(imgupload);
  444. var imguploadlabel = document.createElement("label");
  445. imguploadlabel.setAttribute('for', `img${i}`);
  446. imguploadlabel.classList.add('upload-btn');
  447. imguploadlabel.textContent = '上傳檔案';
  448. imgInputs.appendChild(imguploadlabel);
  449. $('.img_uploader').on('change', prepareUpload);
  450. }
  451. $('.owl-carousel').owlCarousel({
  452. loop: true,
  453. margin: 10,
  454. nav: false,
  455. mouseDrag: true,
  456. touchDrag: true,
  457. smartSpeed: 1000,
  458. autoplay: true,
  459. autoplayTimeout: 8000,
  460. autoplayHoverPause: false,
  461. responsive: {
  462. 0: {
  463. items: 1
  464. },
  465. 600: {
  466. items: 2
  467. },
  468. 1000: {
  469. items: 4
  470. }
  471. }
  472. })