drafts, history link

html/make_video.html

@@ -133,7 +133,7 @@
                 <form id="msform">
                     <div class="linker__box">
                         <p set-lan="html:preview_videos">預覽影片</p>
-                        <i class="fas fa-link"></i>
+                        <i class="fas fa-link copy"></i>
                         <a id='linker' style="display: none;" class="ms-2" set-lan="html:video_link">影片連結</a>
                     </div>
                     <!-- fieldsets -->

html/script_profiles.js

@@ -121,6 +121,21 @@ renderView();
 
 
 function getDraft() {
+  JsLoadingOverlay.show({
+    "overlayBackgroundColor": "#FFFFFF",
+    "overlayOpacity": "0.1",
+    "spinnerIcon": "ball-circus",
+    "spinnerColor": "#B9DDF3",
+    "spinnerSize": "1x",
+    "overlayIDName": "overlay",
+    "spinnerIDName": "spinner",
+    "offsetX": 0,
+    "offsetY": 0,
+    "containerID": "draft-table",
+    "lockScroll": false,
+    "overlayZIndex": 9998,
+    "spinnerZIndex": 9999
+  });
   let token = getCookie('jwt_token');
   axios({
     method: 'post',
@@ -133,9 +148,10 @@ function getDraft() {
     console.log(res.data);
     let result = [...res.data];
     let str = '';
+    let draftStr = '';
     if(result.length > 0){
       for(let i = 0;i < result.length; i++) {
-        str += `<tr>
+        draftStr += `<tr>
                   <td>${result[i].title}</td>
                   <td>
                   <span class="me-3 draft-content-icon" id="${result[i].id}" onclick="gotoDraft(${result[i].id})">
@@ -147,10 +163,24 @@ function getDraft() {
                     </td>
                 </tr>`
       }
-      $('.draft-content').html(str);
+      str = `<table class="table text-center">
+      <thead>
+        <tr>
+          <th scope="col" set-lan="html:video_title">標題</th>
+          <th class="px-0" scope="col" set-lan="html:draft_edit">編輯</th>
+        </tr>
+      </thead>
+      <tbody class="draft-content">${draftStr}</tbody>
+      </table>`
+      $('.draft-table .card').html(str);
+      JsLoadingOverlay.hide();
     } else {
-      str = '<div><h3>目前沒有草稿喔</h3></div>';
-      $('.draft-content').html(str); 
+      str = `<div>
+              <h5 set-lan="html:no_draft">目前沒有草稿喔</h5>
+              <img src="static/img/undraw_void_3ggu.svg" width="80">
+            </div>`;
+      $('.draft-table .card').html(str); 
+      JsLoadingOverlay.hide();
     }
   }).catch(err => {
     console.log(err);

html/static/lan.js

@@ -95,7 +95,8 @@ var zh = {
     "drafts": "草稿夾",
     "save_draft_btn": "存為草稿",
     "upload_file": "上傳檔案",
-    "intro_img": "static/img/intro2.jpg"
+    "intro_img": "static/img/intro2.jpg",
+    "no_draft": "目前沒有草稿喔"
 };
 
 var en = {
@@ -170,7 +171,8 @@ var en = {
     "drafts": "Drafts",
     "save_draft_btn": "Save as Draft",
     "upload_file": "Upload",
-    "intro_img": "static/img/intro_en.png"
+    "intro_img": "static/img/intro_en.png",
+    "no_draft": "No drafts yet."
 };
 
 function switchLanContent(val){

html/static/script_util.js

@@ -328,7 +328,8 @@ function openNav() {
       boxTitle.classList.add('box-title');
       boxTitle.textContent = obj.name;
       boxTitle.id = obj.id;
-      boxTitle.setAttribute('onclick', `load_data(${obj.id}, ${loaded_data})`);
+      console.log(loaded_data);
+      boxTitle.setAttribute('onclick', `direct(${obj.id})`);
 
       var boxLink = document.createElement('span');
       boxLink.classList.add('box-link');
@@ -338,7 +339,7 @@ function openNav() {
       contentBox.appendChild(boxTitle);
       contentBox.appendChild(boxLink);
       list.classList.add("historyList-item");
-      list.setAttribute('onclick', `load_data(${obj.id}, ${loaded_data})`);
+      list.setAttribute('onclick', `direct(${obj.id})`);
       list.appendChild(divImgfr);
       list.appendChild(contentBox);
       historyList.appendChild(list);
@@ -384,6 +385,11 @@ function get_jwt_token(){
   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;
@@ -646,3 +652,30 @@ function getDraftData() {
 
 }
 
+$(".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
+  })
+};
+

html/static/scss/style.css

@@ -45,6 +45,10 @@ body {
   background-color: inherit;
 }
 
+.copy {
+  cursor: pointer;
+}
+
 .navbar {
   background-color: white;
 }

html/static/scss/style.scss

@@ -46,6 +46,10 @@ body {
 	background-color: inherit;
 }
 
+.copy {
+	cursor: pointer;
+}
+
 .navbar {
 	background-color: white;
 }

html/user_profile2.html

@@ -163,7 +163,7 @@
                                     </div>
                                 </div>
                                 <div class="historical-record col-lg-12">
-                                    <div class="card p-3">
+                                    <div class="card p-3 text-center">
                                         <table class="table text-center">
                                             <thead>
                                               <tr>
@@ -210,14 +210,14 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="draft-table col-lg-12">
-                                    <div class="card p-3">
+                                <div class="draft-table col-lg-12" id="draft-table">
+                                    <div class="card p-3 text-center">
                                         <table class="table text-center">
                                             <thead>
-                                              <tr>
+                                             <!--  <tr>
                                                 <th scope="col" set-lan="html:video_title">標題</th>
                                                 <th class="px-0" scope="col" set-lan="html:draft_edit">編輯</th>
-                                              </tr>
+                                              </tr> -->
                                             </thead>
                                             <tbody class="draft-content">
                                               
@@ -304,6 +304,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/loading-overlay.js"></script>
     <script src="./script_profiles.js"></script>
     <script type="text/javascript" src="static/lan.js"></script>
     <script src="static/common.js"></script>