script_msg.js 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. //jQuery time
  2. var current_fs, next_fs, previous_fs; //fieldsets
  3. var left, opacity, scale; //fieldset properties which we will animate
  4. var animating; //flag to prevent quick multi-click glitasdaches
  5. var client_id = Date.now()
  6. var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  7. var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  8. return new bootstrap.Tooltip(tooltipTriggerEl)
  9. });
  10. (function(){
  11. $('.imgfr').hover(function(){
  12. $(this).next().css('display', 'block');
  13. }, function(){
  14. $(this).next().css('display', 'none');
  15. })
  16. }());
  17. const button = document.querySelector('.next');
  18. $(".next").click(function(){
  19. button.setAttribute('disabled', '');
  20. setTimeout(function(){
  21. button.removeAttribute('disabled')
  22. }, 4000);
  23. avatar = $('.avatar').val();
  24. name_title = $('.title_new').val();
  25. txtARR=[];
  26. imgARR=[];
  27. var step;
  28. for (step = 1; step <= 10; step++) {
  29. if($(".txtsrc"+step).val()!=""){
  30. txtARR.push($(".txtsrc"+step).val())
  31. }
  32. }
  33. var step2;
  34. for (step2 = 1; step2 <= 10; step2++) {
  35. if($(".imgsrc"+step2).val()!=""){
  36. imgARR.push($(".imgsrc"+step2).val())
  37. }
  38. }
  39. dataOBJ = {"name":name_title,"text_content":txtARR,"image_urls":imgARR,"avatar":avatar,"client_id":client_id}
  40. objstr = JSON.stringify(dataOBJ);
  41. console.log(dataOBJ)
  42. //alert('資料已送出! 請耐心等候')
  43. $.ajax({
  44. url: 'http://192.168.1.106:8889/make_anchor_video_v2',
  45. //url: 'http://www.choozmo.com:8888/qqreq',
  46. dataType : 'json', // 預期從server接收的資料型態
  47. contentType : 'application/json; charset=utf-8', // 要送到server的資料型態
  48. type: 'post',
  49. data: objstr,
  50. success: function(suc_data) {
  51. Swal.fire({
  52. title: `${suc_data.msg}`,
  53. confirmButtonColor: '#3085d6',
  54. });
  55. },
  56. //data:JSON.stringify({n1:"12",n2:"22"}),
  57. error: function (error) {
  58. console.error(error)
  59. }
  60. });
  61. });
  62. $(".gen_avatar").click(function(){
  63. dataOBJ = {"imgurl":$('.img_src').val()}
  64. objstr = JSON.stringify(dataOBJ);
  65. console.log(dataOBJ)
  66. //alert('資料已送出! 請耐心等候')
  67. $.ajax({
  68. url: 'http://192.168.1.106:8889/swapFace',
  69. dataType : 'json', // 預期從server接收的資料型態
  70. contentType : 'application/json; charset=utf-8', // 要送到server的資料型態
  71. type: 'post',
  72. data: objstr,
  73. success: function(suc_data) {
  74. Swal.fire({
  75. title: `${suc_data.msg}`,
  76. confirmButtonColor: '#3085d6',
  77. });
  78. },
  79. //data:JSON.stringify({n1:"12",n2:"22"}),
  80. error: function (error) {
  81. console.error(error)
  82. }
  83. });
  84. });
  85. var loaded_data = ''
  86. function openNav() {
  87. document.getElementById("mySidenav").style.width = "250px";
  88. document.querySelector('.loader').style.display = "block";
  89. $.get("http://www.choozmo.com:8888/history_input", function(data, status){
  90. console.log(data)
  91. loaded_data = data
  92. for (var obj of data) {
  93. var historyList = document.querySelector('.historyList');
  94. var list = document.createElement('li')
  95. var message = document.createElement('a')
  96. list.classList.add("historyList-item");
  97. message.classList.add("historyList-link");
  98. var content = document.createTextNode(obj.name)
  99. message.id = obj.id
  100. message.setAttribute('href', "#")
  101. message.setAttribute('onclick', "load_data()")
  102. message.appendChild(content)
  103. list.appendChild(message);
  104. historyList.appendChild(list);
  105. }
  106. document.querySelector('.loader').style.display = "none";
  107. });
  108. }
  109. var myModal = new bootstrap.Modal(document.getElementById('history'), {
  110. keyboard: false
  111. })
  112. function closeNav() {
  113. document.getElementById("mySidenav").style.width = "250px";
  114. }
  115. function load_data(){
  116. var title = document.getElementById("title");
  117. var linker = document.getElementById("linker");
  118. myModal.hide()
  119. tid = event.srcElement.id
  120. console.log(tid);
  121. linker.setAttribute('href', loaded_data.find(item => item.id == tid).link)
  122. $("#linker").html(loaded_data.find(item => item.id == tid).link)
  123. $("#linker").show()
  124. $(".title_new").val(loaded_data.find(item => item.id == tid).name)
  125. var step;
  126. for (step = 1; step <= 10; step++) {
  127. $(".txtsrc"+step).val(loaded_data.find(item => item.id == tid).text_content[step-1])
  128. }
  129. var step2;
  130. for (step2 = 1; step2 <= 10; step2++) {
  131. $(".imgsrc"+step2).val(loaded_data.find(item => item.id == tid).image_urls[step2-1])
  132. }
  133. }
  134. var ws = new WebSocket(`ws://www.choozmo.com:8888/progress/${client_id}`);
  135. ws.onmessage = function(event) {
  136. console.log(event.data)
  137. var elem = document.getElementById("myBar");
  138. elem.style.width = event.data + "%";
  139. elem.innerHTML = event.data + "%";
  140. };
  141. var err = [];
  142. function listenToimg() {
  143. }
  144. validate();
  145. function validate(){
  146. let imgsrc = document.querySelectorAll('.imgsrc');
  147. imgsrc = [...imgsrc];
  148. for(let i = 0; i < 10; i++){
  149. imgsrc[i].addEventListener('blur', function(){
  150. let srcArray = $(this).val().split('.');
  151. console.log(srcArray);
  152. if(srcArray.includes('png') || srcArray.includes('jpg')){
  153. $(this).removeClass('error');
  154. $(this).next().remove('p');
  155. err.pop();
  156. }else if(srcArray.length <= 1){
  157. $(this).removeClass('error');
  158. $(this).next().remove('p');
  159. err.pop();
  160. }else {
  161. $(this).addClass('error');
  162. if( this.nextSibling.nodeName !== 'P') {
  163. $(this).after('<p class="error-text">未支援該格式</p>');
  164. }
  165. err.push('svg');
  166. console.log(err);
  167. }
  168. });
  169. }
  170. }