eng card input/register/invite loading

api/static/style.css

@@ -673,7 +673,7 @@ footer {
 
 .upload-btn {
 	display: inline-block;
-	width: calc(100% - 6rem);
+	width: 6rem;
 	background-color: #75a7dd;
 	color: white;
 	padding: .4rem .5rem;

html/index_eng.html

@@ -233,7 +233,7 @@
                 </div>
               </div>
             </fieldset>
-            <fieldset>
+            <!-- <fieldset>
               <h3 class="fs-subtitle">Lines</h3>
               <div class="subtitle-inputs">
 
@@ -246,19 +246,16 @@
 
               </div>
               <span class="add-subline">+</span>
-            </fieldset>
-            <fieldset id='imgSrc'>
+            </fieldset> -->
+            <fieldset id='imgSrc' style="box-shadow: none;-webkit-box-shadow: none; padding: 0;">
               <h3 class="fs-subtitle" style="display: inline-block;">Image Links<img class="ms-1"
                   src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right"
                   title="Supported File Formats: png, jpg, mp4"></h3><br />
-              <div class="img-inputs">
+              <div class="img-inputTest mt-3 input_eng">
+                
               </div>
-              <span class="addimg">+</span>
+              <span class="addsec">+</span>
               <input id="checker" type="button" name="next" class="next action-button" value="Submit" />
-              <h3 style="display: none;" class="fs-subtitle">處理進度</h3>
-              <div style="display: none;" id="myProgress">
-                <div style="display: none;" id="myBar">0%</div>
-              </div>
             </fieldset>
           </form>
           <!-- <div style="width: 80%;margin: 0 auto;"><iframe src="http://www.choozmo.com:8168/ai_anchor_video/16250306886652043.mp4" frameborder="0" style="width: 100%;height: 400px;"></iframe></div> -->

html/invite.html

@@ -240,6 +240,7 @@
         integrity="sha512-Y/Pox7RqKmT84klgmJCva3drWoXQWO42oHiWWhb9zd1pkIH60NF2SamgBrFHOTzrzHJhwgPGNGjNJ5ZmxLpUAQ=="
         crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="static/owl.carousel.min.js"></script>
+    <script src="static/loading-overlay.js"></script>
     <script src="invite.js"></script>
     <script type="text/javascript" src="static/lan.js"></script>
     <script src="static/common.js"></script>

html/invite.js

@@ -105,6 +105,21 @@ function register() {
     }
 
     if(userName && validateEmail(email) && validatePassword(password)) {
+        JsLoadingOverlay.show({
+            "overlayBackgroundColor": "#666666",
+            "overlayOpacity": 0.6,
+            "spinnerIcon": "ball-circus",
+            "spinnerColor": "#000",
+            "spinnerSize": "3x",
+            "overlayIDName": "overlay",
+            "spinnerIDName": "spinner",
+            "offsetX": 0,
+            "offsetY": 0,
+            "containerID": null,
+            "lockScroll": false,
+            "overlayZIndex": 10,
+            "spinnerZIndex": 11
+        });
         console.log(userObj);
         const headers = {
             "accept": "application/json",
@@ -117,6 +132,7 @@ function register() {
             data: userObj
         }).then(res => {
             console.log(res.data.msg);
+            JsLoadingOverlay.hide();
             let text;
             if (lang == 'en') { 
                 text = res.data.msg.eng;
@@ -130,6 +146,16 @@ function register() {
             });
         }).catch(err => {
             console.log(err);
+            var title = "錯誤處理中，請稍後再試";
+
+            if (lang == 'en') { // 英文版訊息
+                title = "Oops! Errors occurred. Please try it later!"
+            }
+            Swal.fire({
+                title: title,
+                icon: 'error',
+                confirmButtonColor: '#3085d6',
+            });
         })
     }
 }

html/login.js

@@ -119,9 +119,9 @@ function login(){
         console.log(err);
         var title = "錯誤處理中，請稍後再試";
 
-            if (lang == 'en') { // 英文版訊息
-                title = "Oops! Errors occurred. Please try it later!"
-            }
+        if (lang == 'en') { // 英文版訊息
+            title = "Oops! Errors occurred. Please try it later!"
+        }
         Swal.fire({
             title: title,
             icon: 'error',

html/make_video2.html

@@ -301,7 +301,7 @@
                                 <option value="17">Kristina</option>
                                 <option value="18">Paula</option>
                             </select>
-                            <div class="d-flex row row-cols-2 row-cols-lg-6">
+                            <div class="d-flex row row-cols-2 row-cols-lg-6 avatar-cards" id="avatar-cards">
                                 <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">

html/make_video_slide.html

@@ -259,7 +259,7 @@
                                 <option value="17">Kristina</option>
                                 <option value="18">Paula</option>
                             </select>
-                            <div class="d-flex row row-cols-2 row-cols-lg-6">
+                            <div class="d-flex row row-cols-2 row-cols-lg-6 avatar-cards" id="avatar-cards">
                                 <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>
@@ -411,6 +411,7 @@
         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/loading-overlay.js"></script>
     <script src="static/script_slides.js"></script>
     <script type="text/javascript" src="static/lan.js"></script>
     <script src="static/common.js"></script>

html/register.html

@@ -275,6 +275,7 @@
         integrity="sha512-Y/Pox7RqKmT84klgmJCva3drWoXQWO42oHiWWhb9zd1pkIH60NF2SamgBrFHOTzrzHJhwgPGNGjNJ5ZmxLpUAQ=="
         crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="static/owl.carousel.min.js"></script>
+    <script src="static/loading-overlay.js"></script>
     <script src="register.js"></script>
     <script type="text/javascript" src="static/lan.js"></script>
     <script src="static/common.js"></script>

html/register.js

@@ -79,6 +79,21 @@ function register() {
     }
 
     if(userName && validateEmail(email) && validatePassword(password)) {
+        JsLoadingOverlay.show({
+            "overlayBackgroundColor": "#666666",
+            "overlayOpacity": 0.6,
+            "spinnerIcon": "ball-circus",
+            "spinnerColor": "#000",
+            "spinnerSize": "3x",
+            "overlayIDName": "overlay",
+            "spinnerIDName": "spinner",
+            "offsetX": 0,
+            "offsetY": 0,
+            "containerID": null,
+            "lockScroll": false,
+            "overlayZIndex": 10,
+            "spinnerZIndex": 11
+        });
         let userObj = {
             username: userName,
             email,
@@ -96,6 +111,7 @@ function register() {
             data: userObj
         }).then(res => {
             console.log(res.data.msg);
+            JsLoadingOverlay.hide();
             let text;
             if (lang == 'en') { 
                 text = res.data.msg.eng;
@@ -109,6 +125,16 @@ function register() {
             });
         }).catch(err => {
             console.log(err);
+            var title = "錯誤處理中，請稍後再試";
+
+            if (lang == 'en') { // 英文版訊息
+                title = "Oops! Errors occurred. Please try it later!"
+            }
+            Swal.fire({
+                title: title,
+                icon: 'error',
+                confirmButtonColor: '#3085d6',
+            });
         })
     }
 }

html/script_eng.js

@@ -4,7 +4,7 @@ let userBasics = JSON.parse(localStorage.getItem('user_profile')) || [];
 
 
   //userBasics = JSON.parse(userBasics);
-if(userBasics !== [] || typeOf(userBasics) !== 'string'){
+if(userBasics.length > 0 || typeof(userBasics) !== 'string'){
   $('.userName').html(`<h2 class="user-name text-white mt-lg-3 mt-xl-1 fw-bold">Hi ${userBasics.user_info.userName}</h2>`);
 }
 
@@ -167,24 +167,12 @@ $(".next").click(function () {
   xhr.onreadystatechange = function () {
     if (xhr.readyState === 4) {
       responseOBJ = JSON.parse(xhr.responseText);
-      if (responseOBJ.msg=='ok')
-      {
+      console.log(responseOBJ);
         Swal.fire({
-          title: "Data Submitted Successfully!",
-          icon: 'success',
-          text: 'We are working on your video! It might take minutes to get your video.',
+          icon: 'info',
+          text: responseOBJ.msg.eng,
           confirmButtonColor: '#3085d6',
-        });
-      }
-      else{
-        Swal.fire({
-          title: "Oops! Some error occurred!",
-          icon: 'error',
-          text: responseOBJ.msg,
-          confirmButtonColor: '#3085d6',
-        });
-      }
-      
+      });
     }
   };
   var data = renderXHR_data(dataOBJ)
@@ -348,31 +336,40 @@ function load_data() {
 
 }
 
-var subtitleInputs = document.querySelector(".subtitle-inputs");
-var sublineInputs = document.querySelector(".subline-inputs");
-var imgInputs = document.querySelector(".img-inputs");
+// var subtitleInputs = document.querySelector(".subtitle-inputs");
+// var sublineInputs = document.querySelector(".subline-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);
-    renderSublineBlock(i +1);
+    // rendertxtBlock(i + 1);
+    // renderimgBlock(i + 1);
+    // renderSublineBlock(i +1);
+    renderInputSec(i+1);
   }
   console.log(document.querySelectorAll(".txtsrc").length + 1);
 }
 
 initial();
 
-var addbtn = document.querySelector(".add");
+/* var addbtn = document.querySelector(".add");
 var addimgbtn = document.querySelector(".addimg");
 var addSubline = document.querySelector('.add-subline');
 
 addbtn.addEventListener('click', addtxtBlock);
 addimgbtn.addEventListener('click', addimgBlock);
-addSubline.addEventListener('click', addsubBlock);
+addSubline.addEventListener('click', addsubBlock); */
+
+var addsecbtn = document.querySelector(".addsec");
+addsecbtn.addEventListener('click', addsecBlock);
 
+function addsecBlock() {
+  let newsecIdx = document.querySelectorAll(".input-sec").length + 1;
+  renderInputSec(newsecIdx);
+}
 
-function addtxtBlock() {
+/* function addtxtBlock() {
   let newIdx = document.querySelectorAll(".txtsrc").length + 1;
   rendertxtBlock(newIdx);
 }
@@ -385,7 +382,7 @@ function addsubBlock() {
 function addimgBlock() {
   let newimgIdx = document.querySelectorAll(".imgsrc").length + 1;
   renderimgBlock(newimgIdx);
-}
+} */
 
 function rendertxtBlock(i) {
   var txtinput = document.createElement("input");
@@ -428,3 +425,63 @@ function renderimgBlock(i) {
   imgInputs.appendChild(imguploadlabel);
   $('input[type=file]').on('change', prepareUpload);
 }
+
+function renderInputSec(i) {
+  var input_sec = document.createElement('div');
+  var img_box = document.createElement('div');
+
+  input_sec.classList.add('input-sec', `input-sec${i}`, 'p-3', 'mb-3', 'text-end');
+  img_box.classList.add('img-box');
+
+  // subtitle input
+  var subtitleinput = document.createElement("input");
+  subtitleinput.setAttribute('type', 'text');
+  subtitleinput.setAttribute('name', `s${i}`);
+  subtitleinput.classList.add('subsrc', `subsrc${i}`);
+  subtitleinput.value = "";
+  subtitleinput.setAttribute('placeholder', `Subtitle`);
+  input_sec.appendChild(subtitleinput);
+
+  // text input
+  var txtinput = document.createElement("input");
+  txtinput.setAttribute('type', 'text');
+  txtinput.setAttribute('name', `t${i}`);
+  txtinput.classList.add('txtsrc', `txtsrc${i}`);
+  txtinput.value = "";
+  txtinput.setAttribute('placeholder', `Line`);
+  input_sec.appendChild(txtinput);
+
+  // img url input
+  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', 'https://example.com/4VKBo9w.png');
+  img_box.appendChild(imginput);
+
+  // img upload input
+  var imgupload = document.createElement("input");
+  imgupload.setAttribute('id', `img${i}`);
+  imgupload.setAttribute('type', `file`);
+  imgupload.classList.add('img_uploader', 'img_up');
+  imgupload.style.display = "none";
+  img_box.appendChild(imgupload);
+
+  // img upload label
+  var imguploadlabel = document.createElement("label");
+  imguploadlabel.setAttribute('for', `img${i}`);
+  imguploadlabel.classList.add('upload-btn');
+  // imguploadlabel.textContent = 'Upload';
+  imguploadlabel.setAttribute('set-lan', `html:upload_file`);
+  img_box.appendChild(imguploadlabel);
+  imgupload.addEventListener('change', prepareUpload);
+
+  // preview image
+  // var imgPreBox = document.createElement("div");
+  // imgPreBox.classList.add('upload-cta');
+  // img_box.appendChild(imgPreBox);
+
+  input_sec.appendChild(img_box);
+  document.querySelector('.img-inputTest').append(input_sec);
+}

html/static/script_slides.js

@@ -1,4 +1,5 @@
 checkRoute();
+let card;
 
 let userBasics = JSON.parse(localStorage.getItem('user_profile')) || [];
   //userBasics = JSON.parse(userBasics);
@@ -68,6 +69,7 @@ function getAvatar() {
   if(jwt_token == undefined) {
     window.location.replace("login.html");
   }
+  
   axios({
     method: 'post',
     url: 'https://www.choozmo.com:8887/get_avatar_by_role',
@@ -92,16 +94,19 @@ function getAvatar() {
                 </div>`;
     }
     $('#avatar').html(`<option set-lan="html:p_choose_character" value="請選擇人物" selected="selected" disabled>請選擇人物</option>${str}`);
-    $('.owl-carousel').html(carStr);
+    $('.avatar-cards').html(carStr);
+    
     card = document.getElementsByClassName('card');
     console.log(card);
     addCardListener(card);
+    avatarChange()
   }).catch(err => {
     console.log(err);
+    
   });
 }
 
-// getAvatar();
+getAvatar();
 
 var client_id = Date.now();
 var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
@@ -117,22 +122,21 @@ 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];
+
 avatarSelector.addEventListener('change', avatarChange);
-avatarChange();
+// avatarChange();
 
-function addCardListener() {
+function addCardListener(card) {
   for (let i = 0; i < card.length; i++) {
+    console.log(card[i]);
     card[i].addEventListener('click', openavatarModel);
   }
 }
 
-addCardListener();
+// 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) {
@@ -315,7 +319,7 @@ function getpathId() {
   return id.split('=')[1];
   //load_data(id);
 }
-getData();
+// getData();
 
 function getData() {
   let jwt_token = get_jwt_token();

html/static/script_util2.js

@@ -1,5 +1,6 @@
 // Check Route
-// checkRoute();
+ checkRoute();
+// let card;
 
 let userBasics = JSON.parse(localStorage.getItem('user_profile')) || [];
 
@@ -69,9 +70,9 @@ function checkLan() {
 // Get avatars
 function getAvatar() {
   let jwt_token = get_jwt_token();
-  if(jwt_token == undefined) {
+  /* if(jwt_token == undefined) {
     window.location.replace("login.html");
-  }
+  } */
   axios({
     method: 'post',
     url: 'https://www.choozmo.com:8887/get_avatar_by_role',
@@ -96,16 +97,17 @@ function getAvatar() {
                 </div>`;
     }
     $('#avatar').html(`<option set-lan="html:p_choose_character" value="請選擇人物" selected="selected" disabled>>請選擇人物</option>${str}`);
-    $('.owl-carousel').html(carStr);
-   // card = document.getElementsByClassName('card');
+    $('.avatar-cards').html(carStr);
+    //card = document.getElementsByClassName('card');
     console.log(card);
-    addCardListener(card);
+    //addCardListener(card);
+    //avatarChange();
   }).catch(err => {
     console.log(err);
   });
 }
 
-//getAvatar();
+// getAvatar();
 
 
 // Card
@@ -127,7 +129,6 @@ var avatarSelector = document.getElementById("avatar");
 
 
 avatarSelector.addEventListener('change', avatarChange);
-avatarChange();
 
 function addCardListener() {
   for (let i = 0; i < card.length; i++) {
@@ -135,10 +136,11 @@ function addCardListener() {
   }
 }
 
-addCardListener();
+addCardListener()
+avatarChange()
+
 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) {

html/static/scss/style.css

@@ -946,14 +946,14 @@ body {
     margin-top: 77%;
   }
   #msform .input_eng .input-sec > input[type="text"]:nth-of-type(1) {
-    margin-top: 90%;
+    margin-top: 80%;
   }
   #msform .input-sec .upload-btn {
     width: 100%;
     height: 60%;
   }
-  #msform .input-sec .input_eng .upload-btn {
-    height: 50%;
+  #msform .input_eng .input-sec .upload-btn {
+    height: 45%;
   }
 }
 

html/static/scss/style.scss

@@ -908,7 +908,7 @@ body {
   }
 
   #msform .input_eng .input-sec>input[type="text"]:nth-of-type(1) {
-    margin-top: 90%;
+    margin-top: 80%;
   }
   
   #msform .input-sec .upload-btn {
@@ -916,8 +916,8 @@ body {
     height: 60%;
   }
 
-  #msform .input-sec .input_eng .upload-btn {
-    height: 50%;
+  #msform .input_eng .input-sec .upload-btn {
+    height: 45%;
   }
 }