save draft function

html/make_video.html

@@ -213,6 +213,7 @@
                         </div>
                         <span class="addimg">+</span>
                         <input id="checker" type="button" name="next" class="next action-button" set-lan="value:submit" value="送出" />
+                        <span class="draft-btn" data-bs-toggle="tooltip" data-bs-placement="right" title="儲存為草稿 Save as draft"><img src="../html/static/img/draft-button.png" width="60" alt=""></span>
                         <h3 style="display: none;" class="fs-subtitle"><lan set-lan="html:processing_progress">處理進度</lan></h3>
                         <div style="display: none;" id="myProgress">
                             <div style="display: none;" id="myBar">0%</div>

html/script_profiles.js

@@ -109,6 +109,34 @@ function renderView() {
 renderView();
 
 
+function getDraft() {
+  let token = getCookie('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 str = '';
+    if(result.length > 0){
+      for(let i = 0;i < result.length; i++) {
+        str += `<tr>
+                  <td>${result[i].title}</td>
+                  <td><span class="me-3"><i class="fas fa-edit"></i></span><span class="ms-3" id="${result[i].id}"><i class="fas fa-trash-alt"></i></span></td>
+                </tr>`
+      }
+      $('.draft-content').html(str);
+    }
+  }).catch(err => {
+    console.log(err);
+  });
+}
+
+getDraft();
 
 function checkLogin() {
     let token = getCookie('jwt_token');
@@ -133,6 +161,12 @@ $( ".check-history" ).click(function() {
   $(".arrowdown").toggleClass("arrowdoup");
   });
 
+$('.draft-table').hide();
+$('.draft .arrowdown').click(function() {
+    $(".draft-table").toggle();
+    $(".draft .arrowdown").toggleClass("arrowdoup");
+});
+
 var loaded_data = ''
 function openNav() {
   document.getElementById("mySidenav").style.width = "250px";

html/static/script_util.js

@@ -546,4 +546,44 @@ $('.owl-carousel').owlCarousel({
   }
 });
 
+$('.draft-btn').click(() => {
+  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 dataOBJ = { "id": -1, "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);
+  }).catch(err => {
+    console.log(err);
+  });
+
+});
+
 

html/static/scss/style.css

@@ -334,6 +334,13 @@ body {
   background-color: grey;
 }
 
+.draft-btn {
+  position: absolute;
+  left: 1rem;
+  bottom: 1rem;
+  cursor: pointer;
+}
+
 /*headings*/
 .fs-title {
   font-size: 15px;

html/static/scss/style.scss

@@ -314,6 +314,13 @@ body {
 #msform .next[disabled] {
 	background-color: grey;
 }
+
+.draft-btn {
+	position: absolute;
+	left: 1rem;
+	bottom: 1rem;
+	cursor: pointer;
+}
 /*headings*/
 .fs-title {
 	font-size: 15px;

html/user_profile2.html

@@ -201,6 +201,29 @@
                                           </table>
                                     </div>
                                 </div>
+                                <div class="draft col-lg-12">
+                                    <div class="card p-4">
+                                        <div class="d-flex justify-content-between">
+                                            <span>草稿夾</span>
+                                            <span><img width="20" class="arrowdown me-2 mb-1" src="./static/img/userprofile/Icon ionic-md-arrow-dropdown-circle.png" alt=""></span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="draft-table col-lg-12">
+                                    <div class="card p-3">
+                                        <table class="table text-center">
+                                            <thead>
+                                              <tr>
+                                                <th scope="col" set-lan="html:video_title">標題</th>
+                                                <th class="px-0" scope="col" set-lan="">編輯</th>
+                                              </tr>
+                                            </thead>
+                                            <tbody class="draft-content">
+                                              
+                                            </tbody>
+                                          </table>
+                                    </div>
+                                </div>
                                 <div class="share col-lg-12">
                                     <div class="card p-4">
                                         <h3>Want to get more minutes?</h3>