profile to particular make_video page

html/reset_pwd.html

@@ -117,7 +117,42 @@
       </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> -->
     </div>
-    
+    <div class="modal fade" tabindex="-1" id="howto" aria-labelledby="howto" aria-hidden="true">
+      <div class="modal-dialog">
+          <div class="modal-content">
+              <div class="modal-header">
+                  <h5 class="modal-title" id="staticBackdropLabel">使用說明</h5>
+                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+              </div>
+              <div class="modal-body">
+                  <div class="modal-terms">
+                      <ol class="ps-0">
+                          <li>1. 一句台詞請對應提供一個影像連結做為搭配</li>
+                          <li>2. 影像連結檔案格式支援：<stong class="strong">.png, jpg, .mp4</stong></li>
+                          <li>3. 點選“送出”之後需等待一段影片製作的時間，請您耐心等候，待製作完畢可於通知網址查看</li>
+                      </ol>
+                  </div>
+              </div>
+          </div>
+      </div>
+  </div> 
+  <div class="modal" tabindex="-1" id="history" aria-labelledby="history" aria-hidden="true">
+      <div class="modal-dialog modal-dialog-scrollable">
+          <div class="modal-content">
+              <div class="modal-header">
+                  <h5 class="modal-title" id="staticBackdropLabel">歷史紀錄</h5>
+                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+              </div>
+              <div class="modal-body">
+                  <div class="modal-terms">
+                      <div class="loader"><img src="static/img/bx_loader.gif" alt=""></div>
+                      <ol class="ps-0 historyList">
+                      </ol>
+                  </div>
+              </div>
+          </div>
+      </div>
+  </div>
 
 
   </div>

html/reset_pwd.js

@@ -46,3 +46,72 @@ var data = `{"code":"`+ code+`","password":"`+pwd+`"}`
 
 xhr.send(data);
 });
+
+var loaded_data = ''
+function openNav() {
+  document.getElementById("mySidenav").style.width = "250px";
+  document.querySelector('.loader').style.display = "block";
+  let token = getCookie('jwt_token');
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/history_input',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${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;
+      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 direct(id) {
+    location.href = `make_video.html?id=${id}`;
+}
+
+function view() {
+    event.stopPropagation();
+    console.log(event.target);
+    if (event.target.nodeName === 'I') {
+      return;
+    } else {
+      window.open(`http://${event.target.dataset.url}`, '_blank');
+    }
+  }
+

html/reset_pwd_email.html

@@ -115,7 +115,42 @@
       </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> -->
     </div>
-    
+    <div class="modal fade" tabindex="-1" id="howto" aria-labelledby="howto" aria-hidden="true">
+      <div class="modal-dialog">
+          <div class="modal-content">
+              <div class="modal-header">
+                  <h5 class="modal-title" id="staticBackdropLabel">使用說明</h5>
+                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+              </div>
+              <div class="modal-body">
+                  <div class="modal-terms">
+                      <ol class="ps-0">
+                          <li>1. 一句台詞請對應提供一個影像連結做為搭配</li>
+                          <li>2. 影像連結檔案格式支援：<stong class="strong">.png, jpg, .mp4</stong></li>
+                          <li>3. 點選“送出”之後需等待一段影片製作的時間，請您耐心等候，待製作完畢可於通知網址查看</li>
+                      </ol>
+                  </div>
+              </div>
+          </div>
+      </div>
+  </div> 
+  <div class="modal" tabindex="-1" id="history" aria-labelledby="history" aria-hidden="true">
+      <div class="modal-dialog modal-dialog-scrollable">
+          <div class="modal-content">
+              <div class="modal-header">
+                  <h5 class="modal-title" id="staticBackdropLabel">歷史紀錄</h5>
+                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+              </div>
+              <div class="modal-body">
+                  <div class="modal-terms">
+                      <div class="loader"><img src="static/img/bx_loader.gif" alt=""></div>
+                      <ol class="ps-0 historyList">
+                      </ol>
+                  </div>
+              </div>
+          </div>
+      </div>
+  </div>
 
 
   </div>

html/reset_pwd_email.js

@@ -28,3 +28,71 @@ $(".sender").click(function () {
 xhr.send();
 
 });
+
+var loaded_data = ''
+function openNav() {
+  document.getElementById("mySidenav").style.width = "250px";
+  document.querySelector('.loader').style.display = "block";
+  let token = getCookie('jwt_token');
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/history_input',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${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;
+      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 direct(id) {
+    location.href = `make_video.html?id=${id}`;
+}
+
+function view() {
+    event.stopPropagation();
+    console.log(event.target);
+    if (event.target.nodeName === 'I') {
+      return;
+    } else {
+      window.open(`http://${event.target.dataset.url}`, '_blank');
+    }
+  }

html/script_profiles.js

@@ -24,6 +24,21 @@ function renderView() {
     }).then(res => {
         console.log(res.data);
         const userInfo = res.data;
+          if(userInfo.user_info.left_sec < 20){
+            Swal.fire({
+                title: "剩餘秒數不足",
+                text: '您的影片額度即將不足，加值以持續使用',
+                icon: 'warning',
+                showCancelButton: true,
+                cancelButtonText: 'Cancel',
+                confirmButtonColor: '#3085d6',
+                confirmButtonText: '加值'
+            }).then(result => {
+              if (result.isConfirmed) {
+                location.href = "pricing.html";
+              }
+            });
+          }
         // const str = `<img src="static/img/undraw_male_avatar_323b.svg" alt="">
         //     <p class="card-profile-txt">User Profile</p>
         //     <p class="card-profile-cnt">${userInfo.user_info.userName}</p>
@@ -118,7 +133,7 @@ $( ".check-history" ).click(function() {
   $(".arrowdown").toggleClass("arrowdoup");
   });
 
-  var loaded_data = ''
+var loaded_data = ''
 function openNav() {
   document.getElementById("mySidenav").style.width = "250px";
   document.querySelector('.loader').style.display = "block";

html/static/script_util.js

@@ -379,13 +379,13 @@ function get_jwt_token(){
   return jwt_raw.split('=')[1];
 }
 
-function load_data(tid) {
+function load_data(tid, loaded_data) {
+  if(!tid) {
+    return;
+  }
   var title = document.getElementById("title");
   var linker = document.getElementById("linker");
-  //getData();
   myModal.hide()
-  //tid = event.srcElement.id
-  console.log(loaded_data);
   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}`)
@@ -433,12 +433,14 @@ function load_data(tid) {
 
 }
 
-/* getpathId();
+ getpathId();
 
 function getpathId() {
-  let id = window.location.search.split('?').pop();
-  load_data(id);
+  id = window.location.search.split('?').pop();
+  return id.split('=')[1];
+  //load_data(id);
 }
+getData();
 
 function getData() {
   let jwt_token = get_jwt_token();
@@ -450,12 +452,14 @@ function getData() {
         'Authorization': `Bearer ${jwt_token}`
      }
   }).then(res => {
-    console.log(res.data);
     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");
@@ -542,13 +546,4 @@ $('.owl-carousel').owlCarousel({
   }
 });
 
-// $.ajax({
-//   method: "GET",
-//   url: "http://www.choozmo.com:8887/user_profile",
-//   dataType: "json",
-// })
-// .done(function(msg){
-//     console,log(msg);
-// })
-