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');
  })
}());

$('input[type=file]').on('change', prepareUpload);

// Grab the files and set them to our variable
function prepareUpload(event) {
  files = event.target.files;
  var data = new FormData();
  //data.append('file', $('.img_up1').prop('files')[0]);
  data.append('file', files[0]);
  // append other variables to data if you want: data.append('field_name_x', field_value_x);
  $.ajax({
    type: 'POST',
    processData: false, // important
    contentType: false, // important
    data: data,
    url: 'http://www.choozmo.com:8888/uploadfile',
    dataType: 'json',
    success: function (jsonData) {
      event.target.previousSibling.value =jsonData.msg;
      $(this).prev().val('http://'+jsonData.msg);
    },
    error: function (error) {
      alert('圖片錯誤');
    }
  });
}
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)
    }
  });

});

$(".gen_avatar").click(function () {

  dataOBJ = { "imgurl": $('.img_src').val() }
  objstr = JSON.stringify(dataOBJ);
  console.log(dataOBJ)
  //alert('資料已送出! 請耐心等候')
  $.ajax({
    url: 'http://www.choozmo.com:8888/swapFace',
    dataType: 'json', // 預期從server接收的資料型態
    contentType: 'application/json; charset=utf-8', // 要送到server的資料型態
    type: 'post',
    data: objstr,
    success: function (suc_data) {
      alert(suc_data.msg)
    },
    //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 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);
      }
    });
  }
}