Browse Source

get avatar by role, long video ui

huaisianhuang 3 years ago
parent
commit
e5823eb48a

+ 9 - 9
html/make_video.html

@@ -152,49 +152,49 @@
                             <option value="12">Jocelyn</option>
                             <option value="13">Angela</option>
                         </select>
-                        <div class="owl-carousel owl-theme">
-                            <div class="card item" data-avatar="Peggy" data-img="peggy">
+                        <div class="owl-carousel owl-theme d-flex row">
+                            <!-- <div class="card item col" data-avatar="Peggy" data-img="peggy">
                                 <div class="imgfr"><img src="static/img/peggy.webp" class="card-img-top" alt="..."></div>
                                 <div class="card-body">
                                     <h5 class="card-title">Peggy</h5>
                                 </div>
                             </div>
-                            <div class="card item" data-avatar="Stacy" data-img="stacy">
+                            <div class="card item col" data-avatar="Stacy" data-img="stacy">
                                 <div class="imgfr"><img src="static/img/stacy.webp" class="card-img-top" alt="..."></div>
                                 <div class="card-body">
                                     <h5 class="card-title">Stacy</h5>
                                 </div>
                             </div>
-                            <div class="card item" data-avatar="Nina黑" data-img="ninablack">
+                            <div class="card item col" data-avatar="Nina黑" data-img="ninablack">
                                 <div class="imgfr"><img src="static/img/ninablack.webp" class="card-img-top" alt="..."></div>
                                 <div class="card-body">
                                     <h5 class="card-title">Nina黑</h5>
                                 </div>
                             </div>
-                            <div class="card item" data-avatar="Nina灰" data-img="ninawhite">
+                            <div class="card item col" data-avatar="Nina灰" data-img="ninawhite">
                                 <div class="imgfr"><img src="static/img/ninawhite.webp" class="card-img-top" alt="..."></div>
                                 <div class="card-body">
                                     <h5 class="card-title">Nina灰</h5>
                                 </div>
                             </div>
-                            <div class="card item" data-avatar="Summer韓小夏" data-img="summer">
+                            <div class="card item col" data-avatar="Summer韓小夏" data-img="summer">
                                 <div class="imgfr"><img src="static/img/summer.webp" class="card-img-top" alt="..."></div>
                                 <div class="card-body">
                                     <h5 class="card-title">Summer韓小夏</h5>
                                 </div>
                             </div>
-                            <div class="card item" data-avatar="Jocelyn" data-img="Jocelyn">
+                            <div class="card item col" data-avatar="Jocelyn" data-img="Jocelyn">
                                 <div class="imgfr"><img src="static/img/Jocelyn.webp" class="card-img-top" alt="..."></div>
                                 <div class="card-body">
                                     <h5 class="card-title">Jocelyn</h5>
                                 </div>
                             </div>
-                            <div class="card item" data-avatar="Angela" data-img="Angela">
+                            <div class="card item col" data-avatar="Angela" data-img="Angela">
                                 <div class="imgfr"><img src="static/img/Angela.webp" class="card-img-top" alt="..."></div>
                                 <div class="card-body">
                                     <h5 class="card-title">Angela</h5>
                                 </div>
-                            </div>
+                            </div> -->
                         </div>
                     </fieldset>
                     <fieldset>

+ 2 - 4
html/make_video_long.html

@@ -201,9 +201,7 @@
                     <h3 class="fs-subtitle" set-lan="html:lines">台詞</h3>
                     <label for="myCheck" set-lan="html:add_eng">加入英文:</label> 
                     <input type="checkbox" id="multiLang" > <br/>
-                    <div class="subtitle-inputs">
-                        <!-- <textarea name="" id="" cols="100" rows="15"></textarea> -->
-                    </div>
+                    <textarea name="" id="" cols="100" rows="15" class="fs-txtarea"></textarea>
                     
                 </fieldset>
                 <fieldset id='imgSrc'>
@@ -286,7 +284,7 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> 
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
     <script src="static/owl.carousel.min.js"></script>
-    <script src="static/script_util.js"></script>
+    <script src="./script_long.js"></script>
     <script type="text/javascript" src="static/lan.js"></script>
     <script src="static/common.js"></script>
 <script>

+ 1 - 1
html/make_video_slide.html

@@ -153,7 +153,7 @@
                             <option value="12">Jocelyn</option>
                             <option value="12">Angela</option>
                         </select>
-                        <div class="owl-carousel owl-theme">
+                        <div class="owl-carousel owl-theme d-flex row">
                             <div class="card item" data-avatar="Peggy" data-img="peggy">
                                 <div class="imgfr"><img src="static/img/peggy.webp" class="card-img-top" alt="..."></div>
                                 <div class="card-body">

+ 625 - 0
html/script_long.js

@@ -0,0 +1,625 @@
+ checkRoute();
+
+let userBasics = JSON.parse(localStorage.getItem('user_profile')) || [];
+
+(function() {
+    if(userBasics !== []){
+        $('.userName').html(`<h2 class="user-name text-white mt-4 fw-bold">Hi ${userBasics.user_info.userName}</h2>`);
+    }
+})();
+
+
+function checkRoute() {
+  let jwt_token = get_jwt_token();
+  if(jwt_token == undefined) {
+    window.location.replace("login.html");
+  }
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/user_profile',
+    headers: { 
+        'accept': 'text/html',
+        'Authorization': `Bearer ${jwt_token}`
+     }
+  }).then(res => {
+    console.log(res.data);
+    if(res.status !== 200) {
+      window.location.replace("login.html");
+    }
+    var userName='';
+    userName+=`<h2 class="user-name text-white mt-4 fw-bold">Hi ${res.data.user_info.userName}</h2>`;
+    $('.userName').html(userName);
+  }).catch(err => {
+    console.log(err);
+  });
+}
+
+const btnLoginPage = document.querySelector('.btn-login');
+const btnUserProfile = document.querySelector('.btn-userProfile');
+const btnLogout = document.querySelector('.btn-logout');
+function loginControl() {
+  btnLoginPage.style.display = 'none';
+  btnLogout.style.display = 'block';
+  btnUserProfile.style.display = 'block';
+}
+
+loginControl();
+
+let lan = localStorage.getItem('lan');
+
+$('.dropdown-toggle').click(() => {
+  lan = localStorage.getItem('lan');
+  checkLan();
+});
+
+checkLan();
+
+function checkLan() {
+  if(lan == 'en') {
+    $('.btn-makev').css('display', 'none');
+    $('.btn-makelong').css('display', 'none');
+  } else {
+    $('.btn-makev').css('display', 'block');
+    $('.btn-makelong').css('display', 'block');
+  }
+}
+
+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)
+});
+var myModal = new bootstrap.Modal(document.getElementById('history'), {
+  keyboard: false
+})
+var avatarModal = new bootstrap.Modal(document.getElementById('avatarmega'), {
+  keyboard: false
+})
+var modalImg = document.querySelector("#avatarmega .modal-img");
+var modalTitle = document.querySelector("#avatarmega .modal-title");
+var avatarSelector = document.getElementById("avatar");
+var card = document.getElementsByClassName('card');
+card = [...card];
+avatarSelector.addEventListener('change', avatarChange);
+avatarChange();
+
+function addCardListener() {
+  for (let i = 0; i < card.length; i++) {
+    card[i].addEventListener('click', openavatarModel);
+  }
+}
+
+addCardListener();
+
+function avatarChange() {
+  var value = avatarSelector.options[avatarSelector.selectedIndex].text;
+  $('.owl-carousel').trigger('to.owl.carousel', avatarSelector.selectedIndex);
+  for (let i = 0; i < card.length; i++) {
+    card[i].classList.remove('active');
+    if (card[i].dataset.avatar == value) {
+      card[i].classList.add('active');
+    }
+  }
+}
+
+function openavatarModel() {
+  console.log(this.dataset.img);
+  modalImg.setAttribute("src", `static/img/${this.dataset.img}.webp`);
+  modalTitle.textContent = `${this.dataset.avatar}`;
+  avatarModal.show();
+}
+
+$('input[type=file]').on('change', prepareUpload);
+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);
+  $(this).next().text('');
+  $(this).next().html('<img src="static/img/Spinner-1s-181px.gif">');
+  $.ajax({
+    type: 'POST',
+    processData: false, // important
+    contentType: false, // important
+    data: data,
+    url: 'https://www.choozmo.com:8887/uploadfile',
+    dataType: 'json',
+    success: function (jsonData) {
+      event.target.previousSibling.value = jsonData.msg;
+      $(this).prev().val(jsonData.msg);
+      event.target.nextSibling.innerHTML = '';
+      event.target.nextSibling.textContent = '上傳檔案';
+      //console.log($(this).next());
+      //$(this).next().html('上傳檔案');
+      //$(this).next().text('上傳檔案');
+    },
+    error: function (error) {
+      event.target.nextSibling.innerHTML = '';
+      event.target.nextSibling.textContent = '上傳檔案';
+      alert('圖片錯誤');
+    }
+  });
+}
+const button = document.querySelector('.next');
+
+const buttonSend = document.querySelector('#sendBTN');
+$("#sendBTN").click(function () {
+  buttonSend.setAttribute('disabled', '');
+  setTimeout(function () {
+    buttonSend.removeAttribute('disabled')
+  }, 4000);
+  avatar = $('.avatar').val();
+  name_title = $('.title_new').val();
+  imgARR = [];
+  txtARR = [];
+  var step;
+  txtARR.push($('.fs-txtarea').val());
+  let imgIdx = document.querySelectorAll(".imgsrc").length;
+  for (let i = 1; i < (imgIdx + 1); i++) {
+    if ($(`.imgsrc${i}`).val() != "") {
+      imgARR.push($(`.imgsrc${i}`).val())
+    }
+  }
+  multiLang = 0
+  if ($('#multiLang').prop("checked")) {multiLang = 1;}
+  dataOBJ = { "name": name_title, "text_content": txtARR, "image_urls": imgARR, "avatar": avatar,"multiLang":multiLang, "client_id": client_id }
+  objstr = JSON.stringify(dataOBJ);
+  console.log(dataOBJ)
+  jwt_token =  get_jwt_token()
+  var xhr = new XMLHttpRequest();
+  xhr.open("POST", "https://www.choozmo.com:8887/make_anchor_video_long");
+  xhr.setRequestHeader("accept", "application/json");
+  xhr.setRequestHeader("Authorization","Bearer "+jwt_token)
+  xhr.setRequestHeader("Content-Type", "application/json");
+  xhr.onreadystatechange = function () {
+    if (xhr.readyState === 4) {
+      responseOBJ = JSON.parse(xhr.responseText)
+      if (responseOBJ.msg=='ok'){
+        let title = "資料已送出";
+        let text = '資料已傳送,請耐心等候';
+        if (lan == 'en') { // 英文版訊息
+          title = "Submitted Successfully!";
+          text = 'We are working on your video. You will get notfication in line group when your video is done.';
+        }
+        Swal.fire({
+          title: title,
+          icon: 'success',
+          text: text,
+          confirmButtonColor: '#3085d6',
+        });
+      } else {
+        let title = '發生錯誤';
+        let text;
+        if(lan == 'en') {
+          title = 'Error';
+          text = responseOBJ.msg.eng;
+        } else {
+          text = responseOBJ.msg.zh;
+        }
+        Swal.fire({
+          title: title,
+          icon: 'error',
+          text: text,
+          confirmButtonColor: '#3085d6',
+        });
+      }
+      
+    }
+  };
+  var data = renderXHR_data(dataOBJ)
+  console.log(data)
+  result = xhr.send(objstr);
+});
+
+
+var loaded_data = ''
+function openNav() {
+  document.getElementById("mySidenav").style.width = "250px";
+  document.querySelector('.loader').style.display = "block";
+  let jwt_token = get_jwt_token();
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/history_input',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${jwt_token}`
+     }
+  }).then(res => {
+    console.log(res.data);
+    loaded_data = res.data;
+    for (var obj of loaded_data) {
+      var historyList = document.querySelector('.historyList');
+      var list = document.createElement('li');
+      list.id = obj.id;
+      // div-imgfr
+      var divImgfr = document.createElement('div');
+      divImgfr.classList.add('item_imgfr');
+      var img = document.createElement('img');
+      img.setAttribute('src', obj['image_urls'][0]);
+      divImgfr.appendChild(img);
+      // div-content
+      var contentBox = document.createElement('div');
+      contentBox.classList.add('content-box');
+      var boxTitle = document.createElement('p');
+      boxTitle.classList.add('box-title');
+      boxTitle.textContent = obj.name;
+      boxTitle.id = obj.id;
+      console.log(loaded_data);
+      boxTitle.setAttribute('onclick', `direct(${obj.id})`);
+
+      var boxLink = document.createElement('span');
+      boxLink.classList.add('box-link');
+      boxLink.setAttribute("data-url", obj.link);
+      boxLink.setAttribute('onclick', 'view()');
+      boxLink.innerHTML = '<i class="fas fa-play-circle me-1"></i>觀看影片';
+      contentBox.appendChild(boxTitle);
+      contentBox.appendChild(boxLink);
+      list.classList.add("historyList-item");
+      list.setAttribute('onclick', `direct(${obj.id})`);
+      list.appendChild(divImgfr);
+      list.appendChild(contentBox);
+      historyList.appendChild(list);
+    }
+    document.querySelector('.loader').style.display = "none";
+  
+  }).catch(err => {
+    console.log(err);
+  });
+}
+function closeNav() {
+  document.getElementById("mySidenav").style.width = "250px";
+}
+
+function view() {
+  event.stopPropagation();
+  console.log(event.target);
+  if (event.target.nodeName === 'I') {
+    return;
+  } else {
+    window.open(`http://${event.target.dataset.url}`, '_blank');
+  }
+}
+
+function renderXHR_data(jsonObj) {
+  XHRstring = ''
+  for (const [key, value] of Object.entries(jsonObj)) {
+    console.log(value)
+    if (typeof (value) == "object") {
+      XHRstring += (key+'=['+value.join(',')+']&')
+    }
+    else {
+      XHRstring += (key + '=' + value + '&')
+    }
+  }
+  XHRstring = XHRstring.substring(0, XHRstring.length - 1);
+  return XHRstring
+}
+
+function get_jwt_token(){
+  jwt_raw = document.cookie.split(';').filter(s=>s.includes('jwt_token'))[0];
+  if(!jwt_raw) {return}
+  return jwt_raw.split('=')[1];
+}
+
+function direct(id) {
+  location.href = `make_video.html?id=${id}`;
+}
+
+
+function load_data(tid, loaded_data, draft = false) {
+  if(!tid) {
+    return;
+  }
+  var title = document.getElementById("title");
+  var linker = document.getElementById("linker");
+  myModal.hide();
+  if(!draft) {
+    linker.setAttribute('href', `http://${loaded_data.find(item => item.id == tid).link}`)
+    linker.setAttribute('target', '_blank')
+    $("#linker").html(`http://${loaded_data.find(item => item.id == tid).link}`)
+    $("#linker").show();
+    $(".linker__box").show();
+  }
+  console.log(loaded_data);
+  let historyItem = loaded_data.filter(item => item.id == tid)[0];
+  console.log(historyItem.title);
+  if(draft) {
+    $(".title_new").val(historyItem.title);
+    $("#avatar").val(historyItem.avatar);
+  } else {
+    $(".title_new").val(loaded_data.find(item => item.id == tid).name);
+    $("#avatar").val(historyItem.avatar);
+  }
+
+  let txtlength = historyItem.text_content.length;
+  let imglength = historyItem.image_urls.length;
+
+  //subtitleInputs.innerHTML = '';
+  imgInputs.innerHTML = '';
+  
+  for (let i = 0; i < imglength; i++) {
+    var imginput = document.createElement("input");
+    imginput.setAttribute('type', 'text');
+    imginput.setAttribute('name', `m${i + 1}`);
+    imginput.classList.add('imgsrc', `imgsrc${i + 1}`);
+    imginput.value = historyItem.image_urls[i];
+    imginput.setAttribute('placeholder', `${i + 1}`);
+    imgInputs.appendChild(imginput);
+
+    var imgupload = document.createElement("input");
+    imgupload.setAttribute('id', `img${i + 1}`);
+    imgupload.setAttribute('type', `file`);
+    imgupload.classList.add('img_uploader', 'img_up');
+    imgInputs.appendChild(imgupload);
+    var imguploadlabel = document.createElement("label");
+    imguploadlabel.setAttribute('for', `img${i + 1}`);
+    imguploadlabel.classList.add('upload-btn');
+    imguploadlabel.textContent = '上傳檔案';
+    if(lan == 'en') {
+      imguploadlabel.textContent = 'Upload';
+    }
+    imguploadlabel.setAttribute('set-lan', `html:upload_file`);
+    imgInputs.appendChild(imguploadlabel);
+  }
+   setTimeout(() => {
+    JsLoadingOverlay.hide();
+  }, 0);
+}
+
+getpathId();
+
+function getMode() {
+  let id = window.location.search.split('?').pop();
+  let mode = id.split('=')[0];
+  if(mode == 'draftid') {
+    /* JsLoadingOverlay.show({
+      "overlayBackgroundColor": "#FFFFFF",
+      "overlayOpacity": "0.9",
+      "spinnerIcon": "ball-circus",
+      "spinnerColor": "#B9DDF3",
+      "spinnerSize": "2x",
+      "overlayIDName": "overlay",
+      "spinnerIDName": "spinner",
+      "offsetX": 0,
+      "offsetY": 0,
+      "containerID": null,
+      "lockScroll": false,
+      "overlayZIndex": 9998,
+      "spinnerZIndex": 9999
+    }); */
+    getDraftData();
+  } else if(mode == 'id') {
+    /* JsLoadingOverlay.show({
+      "overlayBackgroundColor": "#FFFFFF",
+      "overlayOpacity": "0.9",
+      "spinnerIcon": "ball-circus",
+      "spinnerColor": "#B9DDF3",
+      "spinnerSize": "2x",
+      "overlayIDName": "overlay",
+      "spinnerIDName": "spinner",
+      "offsetX": 0,
+      "offsetY": 0,
+      "containerID": null,
+      "lockScroll": false,
+      "overlayZIndex": 9998,
+      "spinnerZIndex": 9999
+    }); */
+    getData();
+  }
+  return id.split('=')[1];
+  //load_data(id);
+}
+
+getMode();
+
+function getpathId(){
+  let id = window.location.search.split('?').pop();
+  return id.split('=')[1];
+}
+
+function getData() {
+  let jwt_token = get_jwt_token();
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/history_input',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${jwt_token}`
+     }
+  }).then(res => {
+    loaded_data = res.data;
+    console.log(loaded_data);
+    const id = getpathId();
+    load_data(id, loaded_data);
+  }).catch(err => {
+    console.log(err);
+  });
+} 
+
+//var subtitleInputs = document.querySelector(".subtitle-inputs");
+var imgInputs = document.querySelector(".img-inputs");
+let length = 5;
+function initial() {
+  for (let i = 0; i < length; i++) {
+    //rendertxtBlock(i + 1);
+    renderimgBlock(i + 1);
+  }
+}
+
+initial();
+
+
+var addimgbtn = document.querySelector(".addimg");
+
+
+addimgbtn.addEventListener('click', addimgBlock);
+
+
+function addimgBlock() {
+  let newimgIdx = document.querySelectorAll(".imgsrc").length + 1;
+  renderimgBlock(newimgIdx);
+}
+
+function renderimgBlock(i) {
+  var imginput = document.createElement("input");
+  imginput.setAttribute('type', 'text');
+  imginput.setAttribute('name', `m${i}`);
+  imginput.classList.add('imgsrc', `imgsrc${i}`);
+  imginput.value = "";
+  imginput.setAttribute('placeholder', `${i}`);
+  imgInputs.appendChild(imginput);
+
+  var imgupload = document.createElement("input");
+  imgupload.setAttribute('id', `img${i}`);
+  imgupload.setAttribute('type', `file`);
+  imgupload.classList.add('img_uploader', 'img_up');
+  imgInputs.appendChild(imgupload);
+  var imguploadlabel = document.createElement("label");
+  imguploadlabel.setAttribute('for', `img${i}`);
+  imguploadlabel.classList.add('upload-btn');
+  imguploadlabel.textContent = '上傳檔案';
+  if(lan == 'en') {
+    imguploadlabel.textContent = 'Upload';
+  }
+  imguploadlabel.setAttribute('set-lan', `html:upload_file`);
+  imgInputs.appendChild(imguploadlabel);
+  $('input[type=file]').on('change', prepareUpload);
+}
+
+
+$('.owl-carousel').owlCarousel({
+  loop: true,
+  margin: 10,
+  nav: false,
+  mouseDrag: true,
+  touchDrag: true,
+  smartSpeed: 1000,
+  autoplay: true,
+  autoplayTimeout: 8000,
+  autoplayHoverPause: false,
+  responsive: {
+    0: {
+      items: 1
+    },
+    600: {
+      items: 2
+    },
+    1000: {
+      items: 4
+    }
+  }
+});
+
+$('.draft-btn').click(() => {
+  let text = '儲存中...';
+
+  if (lan == 'en') {
+    text = 'Saving...';
+  }
+
+  $('.draft-btn').text(text);
+
+  let jwt_token = get_jwt_token();
+  let avatar = $('.avatar').val();
+  let name_title = $('.title_new').val();
+  let txtARR = [];
+  let imgARR = [];
+  var step;
+  let contentIdx = document.querySelectorAll(".txtsrc").length;
+  for (let i = 1; i < (contentIdx + 1); i++) {
+    if ($(`.txtsrc${i}`).val() != "") {
+      txtARR.push($(`.txtsrc${i}`).val())
+    }
+  }
+  let imgIdx = document.querySelectorAll(".imgsrc").length;
+  for (let i = 1; i < (imgIdx + 1); i++) {
+    if ($(`.imgsrc${i}`).val() != "") {
+      imgARR.push($(`.imgsrc${i}`).val())
+    }
+  }
+  let multiLang = 0
+  if ($('#multiLang').prop("checked")) {multiLang = 1;}
+  let id = window.location.search.split('?').pop();
+  let mode = id.split('=')[0];
+  if(mode == 'draftid') {
+    id = Number(id.split('=')[1]);
+  } else {
+    id = -1;
+  }
+  let dataOBJ = { "id": id, "title": name_title, "text_content": txtARR, "image_urls": imgARR, "avatar": avatar,"multiLang":multiLang }
+  console.log(dataOBJ);
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/save_draft',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${jwt_token}`,
+        'Content-Type': 'application/json',
+     },
+    data: dataOBJ
+  }).then(res => {
+    console.log(res.data);
+    $('.draft-btn').text('存為草稿');
+    let title = "儲存完成";
+    if(lan == 'en') {
+      title = 'Saved!'
+      $('.draft-btn').text('Save as Draft');
+    }
+    Swal.fire({
+      title: title,
+      icon: 'success',
+      confirmButtonColor: '#3085d6',
+    }); 
+  }).catch(err => {
+    console.log(err);
+  });
+});
+
+function getDraftData() {
+  let token = get_jwt_token();
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/draft_list',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${token}`
+     }
+  }).then(res => {
+    console.log(res.data);
+    let result = [...res.data];
+    let id = getpathId();
+    load_data(id, result, true);
+  }).catch(err => {
+    console.log(err);
+  });
+
+}
+
+$(".copy").click(function(){
+  const copyStr = $(this).next().text();
+  copyToClipboard(copyStr);
+});
+
+const copyToClipboard = str => {
+  const el = document.createElement('textarea');
+  el.value = str;
+  el.setAttribute('readonly', '');
+  el.style.position = 'absolute';
+  el.style.left = '-9999px';
+  document.body.appendChild(el);
+  el.select();
+  document.execCommand('copy');
+  document.body.removeChild(el);
+  Swal.fire({
+    toast: true,
+    icon: 'success',
+    position: 'top-end',
+    title: 'Link copied!',
+    timerProgressBar: true,
+    showConfirmButton: false,
+    timer: 1000,
+    backdrop: false
+  })
+};
+

+ 7 - 6
html/script_profiles.js

@@ -8,7 +8,7 @@ function getCookie(name) {
     const value = `; ${document.cookie}`;
     const parts = value.split(`; ${name}=`);
     if (parts.length === 2) return parts.pop().split(';').shift();
-  }
+}
 
 let userBasics = JSON.parse(localStorage.getItem('user_profile')) || [];
 
@@ -41,7 +41,6 @@ function renderView() {
     if(!token) {
         return;
      }
-    // axios.defaults.withCredentials = false;
     axios({
         method: 'post',
         url: 'https://www.choozmo.com:8887/user_profile',
@@ -91,17 +90,19 @@ function renderView() {
                 <p><strong>${userInfo.user_info.left_sec}</strong><span set-lan="html:sec">秒</span></p>
             </div>
         </div>`;
+        let totalSec = (userInfo.user_info.total_sec == "None") ? 0 : userInfo.user_info.total_sec;
+        let leftSec = (userInfo.user_info.left_sec == null)? 0 : userInfo.user_info.left_sec;
         // 使用者名稱
         let userName = `<h2 class="user-name text-white mt-4 fw-bold">Hi ${userInfo.user_info.userName}</h2>`;
         // 已使用
-        let usedtime=`<h1 class="text-center">${userInfo.user_info.total_sec}&ensp;<span style="font-size:15px;" set-lan="html:sec">秒</span></h1>`;
+        let usedtime=`<h1 class="text-center">${totalSec}&ensp;<span style="font-size:15px;" set-lan="html:sec">秒</span></h1>`;
         if(lang == 'en') {
-          usedtime=`<h1 class="text-center">${userInfo.user_info.total_sec}&ensp;<span style="font-size:15px;" set-lan="html:sec">Sec</span></h1>`;
+          usedtime=`<h1 class="text-center">${totalSec}&ensp;<span style="font-size:15px;" set-lan="html:sec">Sec</span></h1>`;
         }
         // 未使用
-        let NotUsedTime=`<h1  class="text-center">${userInfo.user_info.left_sec}&ensp;<span style="font-size:15px;" set-lan="html:sec">秒</span></h1>`;
+        let NotUsedTime=`<h1  class="text-center">${leftSec}&ensp;<span style="font-size:15px;" set-lan="html:sec">秒</span></h1>`;
         if(lang == 'en') {
-          NotUsedTime=`<h1  class="text-center">${userInfo.user_info.left_sec}&ensp;<span style="font-size:15px;" set-lan="html:sec">Sec</span></h1>`;
+          NotUsedTime=`<h1  class="text-center">${leftSec}&ensp;<span style="font-size:15px;" set-lan="html:sec">Sec</span></h1>`;
         }
         // user資訊
         let infContent=`

BIN
html/static/img/nina灰.webp


BIN
html/static/img/nina黑.webp


BIN
html/static/img/summer韓小夏.webp


+ 46 - 5
html/static/script_slides.js

@@ -60,6 +60,47 @@ function loginControl() {
 
 loginControl();
 
+
+function getAvatar() {
+  let jwt_token = get_jwt_token();
+  if(jwt_token == undefined) {
+    window.location.replace("login.html");
+  }
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/get_avatar_by_role',
+    headers: { 
+        'accept': 'text/html',
+        'Authorization': `Bearer ${jwt_token}`
+     }
+  }).then(res => {
+    console.log(res.data);
+    let result = [...res.data];
+    let str = '';
+    let carStr = '';
+    for(let i = 0; i < result.length; i++) {
+      str += `<option value="${result[i].num}">${result[i].name}</option>`
+    }
+    for(let i = 0; i < result.length; i++) {
+      carStr += `<div class="card item col" data-avatar="${result[i].name}" data-img="${result[i].name.toLowerCase()}">
+                    <div class="imgfr"><img src="static/img/${result[i].name.toLowerCase()}.webp" class="card-img-top" alt="..."></div>
+                    <div class="card-body">
+                        <h5 class="card-title">${result[i].name.toLowerCase()}</h5>
+                    </div>
+                </div>`;
+    }
+    $('#avatar').html(`<option set-lan="html:p_choose_character" value="請選擇人物" selected="selected" disabled>>請選擇人物</option>${str}`);
+    $('.owl-carousel').html(carStr);
+    card = document.getElementsByClassName('card');
+    console.log(card);
+    addCardListener(card);
+  }).catch(err => {
+    console.log(err);
+  });
+}
+
+getAvatar();
+
 var client_id = Date.now()
 var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
 var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
@@ -74,14 +115,14 @@ var avatarModal = new bootstrap.Modal(document.getElementById('avatarmega'), {
 var modalImg = document.querySelector("#avatarmega .modal-img");
 var modalTitle = document.querySelector("#avatarmega .modal-title");
 var avatarSelector = document.getElementById("avatar");
-var card = document.getElementsByClassName('card');
-card = [...card];
+var card = '';
+
 avatarSelector.addEventListener('change', avatarChange);
 avatarChange();
 
-function addCardListener() {
-  for (let i = 0; i < card.length; i++) {
-    card[i].addEventListener('click', openavatarModel);
+function addCardListener(arr) {
+  for (let i = 0; i < arr.length; i++) {
+    arr[i].addEventListener('click', openavatarModel);
   }
 }
 

+ 45 - 6
html/static/script_util.js

@@ -63,6 +63,46 @@ function checkLan() {
   }
 }
 
+function getAvatar() {
+  let jwt_token = get_jwt_token();
+  if(jwt_token == undefined) {
+    window.location.replace("login.html");
+  }
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/get_avatar_by_role',
+    headers: { 
+        'accept': 'text/html',
+        'Authorization': `Bearer ${jwt_token}`
+     }
+  }).then(res => {
+    console.log(res.data);
+    let result = [...res.data];
+    let str = '';
+    let carStr = '';
+    for(let i = 0; i < result.length; i++) {
+      str += `<option value="${result[i].num}">${result[i].name}</option>`
+    }
+    for(let i = 0; i < result.length; i++) {
+      carStr += `<div class="card item col" data-avatar="${result[i].name}" data-img="${result[i].name.toLowerCase()}">
+                    <div class="imgfr"><img src="static/img/${result[i].name.toLowerCase()}.webp" class="card-img-top" alt="..."></div>
+                    <div class="card-body">
+                        <h5 class="card-title">${result[i].name.toLowerCase()}</h5>
+                    </div>
+                </div>`;
+    }
+    $('#avatar').html(`<option set-lan="html:p_choose_character" value="請選擇人物" selected="selected" disabled>>請選擇人物</option>${str}`);
+    $('.owl-carousel').html(carStr);
+    card = document.getElementsByClassName('card');
+    console.log(card);
+    addCardListener(card);
+  }).catch(err => {
+    console.log(err);
+  });
+}
+
+getAvatar();
+
 var client_id = Date.now()
 var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
 var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
@@ -77,18 +117,17 @@ var avatarModal = new bootstrap.Modal(document.getElementById('avatarmega'), {
 var modalImg = document.querySelector("#avatarmega .modal-img");
 var modalTitle = document.querySelector("#avatarmega .modal-title");
 var avatarSelector = document.getElementById("avatar");
-var card = document.getElementsByClassName('card');
-card = [...card];
+var card = '';
+
 avatarSelector.addEventListener('change', avatarChange);
 avatarChange();
 
-function addCardListener() {
-  for (let i = 0; i < card.length; i++) {
-    card[i].addEventListener('click', openavatarModel);
+function addCardListener(arr) {
+  for (let i = 0; i < arr.length; i++) {
+    arr[i].addEventListener('click', openavatarModel);
   }
 }
 
-addCardListener();
 
 function avatarChange() {
   var value = avatarSelector.options[avatarSelector.selectedIndex].text;

+ 1 - 0
html/static/scss/style.css

@@ -182,6 +182,7 @@ body {
 
 .card-title {
   font-family: "Montserrat", sans-serif;
+  font-size: 1rem;
 }
 
 .strong {

File diff suppressed because it is too large
+ 0 - 0
html/static/scss/style.css.map


+ 1 - 0
html/static/scss/style.scss

@@ -174,6 +174,7 @@ body {
 
 .card-title {
 	font-family: "Montserrat", sans-serif;
+	font-size: 1rem;
 }
 
 .strong {

Some files were not shown because too many files changed in this diff