AI_anchor_openshot/api/static/script_msg.js

//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitasdaches
var client_id = Date.now()
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
});


(function(){
  $('.imgfr').hover(function(){
    $(this).next().css('display', 'block');
  }, function(){
    $(this).next().css('display', 'none');
  })
}());


const button = document.querySelector('.next');

$(".next").click(function(){
  button.setAttribute('disabled', '');
  setTimeout(function(){
    button.removeAttribute('disabled')
  }, 4000);
  avatar = $('.avatar').val();
  name_title = $('.title_new').val();
  txtARR=[];
  imgARR=[];
  var step;
	for (step = 1; step <= 10; step++) {
	  if($(".txtsrc"+step).val()!=""){
		  txtARR.push($(".txtsrc"+step).val())
	  }
	}
	var step2;
	for (step2 = 1; step2 <= 10; step2++) {
	  if($(".imgsrc"+step2).val()!=""){
		  imgARR.push($(".imgsrc"+step2).val())
	  }
	}	
	dataOBJ = {"name":name_title,"text_content":txtARR,"image_urls":imgARR,"avatar":avatar,"client_id":client_id}
	objstr = JSON.stringify(dataOBJ);
	console.log(dataOBJ)
  //alert('資料已送出! 請耐心等候')
  $.ajax({
	url: 'http://www.choozmo.com:8888/make_anchor_video_v2',
	//url: 'http://www.choozmo.com:8888/qqreq',
	dataType : 'json', // 預期從server接收的資料型態
  contentType : 'application/json; charset=utf-8', // 要送到server的資料型態
	type: 'post',
	data: objstr,
	success: function(suc_data) {
    Swal.fire({
      title: `${suc_data.msg}`,
      confirmButtonColor: '#3085d6',
    }); 
	  },
	//data:JSON.stringify({n1:"12",n2:"22"}),
	error: function (error) {
	  console.error(error)
	}
});

});



var loaded_data = ''
function openNav() {
	document.getElementById("mySidenav").style.width = "250px";
  document.querySelector('.loader').style.display = "block";
    $.get("http://www.choozmo.com:8888/history_input", function(data, status){
        console.log(data)
        loaded_data = data
         for (var obj of data) {
            var historyList = document.querySelector('.historyList');
            var list = document.createElement('li')
            var message = document.createElement('a')
            list.classList.add("historyList-item");
            message.classList.add("historyList-link");
            var content = document.createTextNode(obj.name)
            message.id = obj.id
            message.setAttribute('href', "#")
            message.setAttribute('onclick', "load_data()")
            message.appendChild(content)
            list.appendChild(message);
            historyList.appendChild(list);
        } 
        document.querySelector('.loader').style.display = "none";  
        });
}
var myModal = new bootstrap.Modal(document.getElementById('history'), {
  keyboard: false
})
    function closeNav() {
      document.getElementById("mySidenav").style.width = "250px";
    }
    function load_data(){
      var title = document.getElementById("title");
      var linker = document.getElementById("linker");
      
      myModal.hide()
      tid = event.srcElement.id
      console.log(tid);
      linker.setAttribute('href', loaded_data.find(item => item.id == tid).link)
      
      $("#linker").html(loaded_data.find(item => item.id == tid).link)
      $("#linker").show()
      
      $(".title_new").val(loaded_data.find(item => item.id == tid).name)
      var step;
      for (step = 1; step <= 10; step++) {
        $(".txtsrc"+step).val(loaded_data.find(item => item.id == tid).text_content[step-1]) 
      }
      var step2;
      for (step2 = 1; step2 <= 10; step2++) {
        $(".imgsrc"+step2).val(loaded_data.find(item => item.id == tid).image_urls[step2-1]) 
      }
      
    }
            var ws = new WebSocket(`ws://www.choozmo.com:8888/progress/${client_id}`);
            ws.onmessage = function(event) {
              console.log(event.data)
              var elem = document.getElementById("myBar");
              elem.style.width = event.data + "%";
              elem.innerHTML = event.data  + "%";
            };


            var err = [];
            function listenToimg() {
            }
            
            validate();
            function validate(){
              let imgsrc = document.querySelectorAll('.imgsrc');
              imgsrc = [...imgsrc];
              for(let i = 0; i < 10; i++){
                imgsrc[i].addEventListener('blur', function(){
                  let srcArray = $(this).val().split('.');
                  console.log(srcArray);
                  if(srcArray.includes('png') || srcArray.includes('jpg')){
                    $(this).removeClass('error');
                    $(this).next().remove('p');
                    err.pop();
                  }else if(srcArray.length <= 1){
                    $(this).removeClass('error');
                    $(this).next().remove('p');
                    err.pop();
                  }else {
                    $(this).addClass('error');
                    if( this.nextSibling.nodeName !== 'P') {
                      $(this).after('<p class="error-text">未支援該格式</p>');
                    }
                    err.push('svg');
                    console.log(err);
                  }
                });
              }
            }