lan and drafts function

html/make_video.html

@@ -213,7 +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>
+                        <span class="draft-btn" data-bs-toggle="tooltip" data-bs-placement="right" title="儲存為草稿 Save as draft" set-lan="html:save_draft_btn">存為草稿</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/make_video_long.html

@@ -290,7 +290,6 @@
     <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_index.js"></script>
     <script type="text/javascript" src="static/lan.js"></script>
     <script src="static/common.js"></script>
 </body>

html/script_profiles.js

@@ -126,7 +126,14 @@ function getDraft() {
       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>
+                  <td>
+                  <span class="me-3 draft-content-icon" id="${result[i].id}" onclick="gotoDraft(${result[i].id})">
+                    <i class="fas fa-edit"></i>
+                    </span>
+                    <span class="ms-3 draft-content-icon" id="${result[i].id}" onclick="deleteDraft(${result[i].id})">
+                    <i class="fas fa-trash-alt"></i>
+                    </span>
+                    </td>
                 </tr>`
       }
       $('.draft-content').html(str);
@@ -233,4 +240,26 @@ function view() {
     } else {
       window.open(`http://${event.target.dataset.url}`, '_blank');
     }
-  }
+  }
+
+function gotoDraft (id) {
+  location.href = `make_video.html?draftid=${id}`;
+}
+function deleteDraft(id) {
+  let token = getCookie('jwt_token');
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/del_draft',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${token}`,
+        'Content-Type': 'application/json'
+    },
+    data: { "id": id }
+  }).then(res => {
+    console.log(res.data);
+    getDraft();
+  }).catch(err => {
+    console.log(err);
+  });
+}

html/static/lan.js

@@ -17,6 +17,12 @@ function getCookie(name)
     return null;
 }
 
+let lang = localStorage.getItem('lan') || 'zh';
+if(lang == 'undefined') {
+    lang = 'zh'
+}
+
+
 var zh = {
     "logleftbox1": "將你的生活、創作 、宣傳做成影片",
     "logleftbox2": "開始使用 AI Spokesgirl",
@@ -84,7 +90,10 @@ var zh = {
     "contact_name": "集仕多股份有限公司",
     "address": "新竹縣竹北市復興二路229號9樓之9",
     "contact_tel": "聯絡電話",
-    "contact_mail": "聯絡信箱"
+    "contact_mail": "聯絡信箱",
+    "draft_edit": "編輯",
+    "drafts": "草稿夾",
+    "save_draft_btn": "存為草稿"
 };
 
 var en = {
@@ -154,15 +163,13 @@ var en = {
     "contact_name": "Choozmo Inc.",
     "address": "Rm. 9, 9F., No. 229, Fuxing 2nd Rd., Zhubei City, Hsinchu County 302052, Taiwan (R.O.C.)",
     "contact_tel": "Tel",
-    "contact_mail": "Email"
+    "contact_mail": "Email",
+    "draft_edit": "Edit",
+    "drafts": "Drafts",
+    "save_draft_btn": "Save as Draft"
 };
 
-
-// 4. 轉換
-function changeLan(val) {
-    var val = val.value;
-    console.log(`val: ${val}`);
-    setCookie('lan', val);
+function switchLanContent(val){
     $('[set-lan]').each(function(){
         var me = $(this);
         var a = me.attr('set-lan').split(':');
@@ -170,22 +177,18 @@ function changeLan(val) {
         var m = a[1];   //文字標示
         
         //用虎選擇語言後保存在cookie中，這裡讀取cooikes的語言版本
-        var lan = getCookie('lan');
-        console.log(lan);
-    
+        // var lan = getCookie('lan');
+       // console.log(lan);
         //選取語言文字
-        switch(lan){
+        switch(val){
             case 'zh':
                 var t = zh[m];  
-                console.log(t);
                 break;
             case 'en':
                 var t = en[m];
-                console.log(t);
                 break;
             default:
                 var t = zh[m];
-                console.log(t);
         }
     
         //所選語言沒有就換
@@ -202,7 +205,6 @@ function changeLan(val) {
             case 'placeholder':
                 me.placeholder(t);
                 console.log("placeholder");
-                console.log(t);
             case 'val':
             case 'value':
                 me.val(t);
@@ -214,6 +216,22 @@ function changeLan(val) {
     });
 }
 
+changeLang(lang);
+function changeLang(val) {
+    localStorage.setItem('lan', `${val}`);
+    // setCookie('lan', val);
+    switchLanContent(val);
+}
+
+// 4. 轉換
+function changeLan(val) {
+    var val = val.value;
+    console.log(`val: ${val}`);
+    localStorage.setItem('lan', `${val}`);
+    // setCookie('lan', val);
+    switchLanContent(val);
+}
+
 
 
 // js裡面的轉換
@@ -242,12 +260,3 @@ function get_lan(m)
 
     return t;
 }
-
-
-// 預設中文版
-var lan = getCookie('lan');
-
-if(lan) {
-    changeLan(lan);
-}
-console.log(`目前語言版本: ${lan}`);

html/static/script_util.js

@@ -323,7 +323,7 @@ function openNav() {
       boxTitle.classList.add('box-title');
       boxTitle.textContent = obj.name;
       boxTitle.id = obj.id;
-      boxTitle.setAttribute('onclick', `load_data(${obj.id})`);
+      boxTitle.setAttribute('onclick', `load_data(${obj.id}, ${loaded_data})`);
 
       var boxLink = document.createElement('span');
       boxLink.classList.add('box-link');
@@ -333,7 +333,7 @@ function openNav() {
       contentBox.appendChild(boxTitle);
       contentBox.appendChild(boxLink);
       list.classList.add("historyList-item");
-      list.setAttribute('onclick', `load_data(${obj.id})`);
+      list.setAttribute('onclick', `load_data(${obj.id}, ${loaded_data})`);
       list.appendChild(divImgfr);
       list.appendChild(contentBox);
       historyList.appendChild(list);
@@ -379,22 +379,29 @@ function get_jwt_token(){
   return jwt_raw.split('=')[1];
 }
 
-function load_data(tid, loaded_data) {
+function load_data(tid, loaded_data, draft = false) {
   if(!tid) {
     return;
   }
   var title = document.getElementById("title");
   var linker = document.getElementById("linker");
-  myModal.hide()
-  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();
-
+  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_new").val(loaded_data.find(item => item.id == tid).name);
+  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);
+  }
 
   let txtlength = historyItem.text_content.length;
   let imglength = historyItem.image_urls.length;
@@ -435,12 +442,24 @@ function load_data(tid, loaded_data) {
 
  getpathId();
 
-function getpathId() {
-  id = window.location.search.split('?').pop();
+function getMode() {
+  let id = window.location.search.split('?').pop();
+  let mode = id.split('=')[0];
+  if(mode == 'draftid') {
+    getDraftData();
+  } else if(mode == 'id') {
+    getData()
+  }
   return id.split('=')[1];
   //load_data(id);
 }
-getData();
+
+getMode();
+
+function getpathId(){
+  let id = window.location.search.split('?').pop();
+  return id.split('=')[1];
+}
 
 function getData() {
   let jwt_token = get_jwt_token();
@@ -547,6 +566,7 @@ $('.owl-carousel').owlCarousel({
 });
 
 $('.draft-btn').click(() => {
+  $('.draft-btn').text('Loading...');
   let jwt_token = get_jwt_token();
   let avatar = $('.avatar').val();
   let name_title = $('.title_new').val();
@@ -567,7 +587,14 @@ $('.draft-btn').click(() => {
   }
   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 }
+  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',
@@ -580,10 +607,35 @@ $('.draft-btn').click(() => {
     data: dataOBJ
   }).then(res => {
     console.log(res.data);
+    $('.draft-btn').text('存為草稿');
+    Swal.fire({
+      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);
+  });
+
+}
 

html/static/scss/style.css

@@ -335,12 +335,22 @@ body {
 }
 
 .draft-btn {
+  padding: 10px 5px;
+  background-color: #d1d1d1;
+  display: inline-block;
   position: absolute;
   left: 1rem;
   bottom: 1rem;
+  font-size: 1rem;
+  -webkit-transition: all .3s;
+  transition: all .3s;
   cursor: pointer;
 }
 
+.draft-btn:hover {
+  background-color: #aaaaaa;
+}
+
 /*headings*/
 .fs-title {
   font-size: 15px;
@@ -1311,6 +1321,10 @@ body {
           transform: rotate(180deg);
 }
 
+.arrowdown {
+  cursor: pointer;
+}
+
 .userprofile {
   position: relative;
   top: -80px;
@@ -1360,6 +1374,21 @@ body {
   font-size: 15px;
 }
 
+.userprofile .userprofile-content .user-information .draft {
+  color: #183790;
+  font-weight: 900;
+}
+
+.userprofile .userprofile-content .user-information .draft-table th {
+  border-bottom: none !important;
+  color: #183790;
+  font-weight: 900;
+}
+
+.userprofile .userprofile-content .user-information .draft-table .draft-content-icon {
+  cursor: pointer;
+}
+
 .sidenav {
   height: 100%;
   width: 250px;

html/static/scss/style.scss

@@ -316,10 +316,18 @@ body {
 }
 
 .draft-btn {
+	padding: 10px 5px;
+	background-color: rgb(209, 209, 209);
+	display: inline-block;
 	position: absolute;
 	left: 1rem;
 	bottom: 1rem;
+	font-size: 1rem;
+	transition: all .3s;
 	cursor: pointer;
+	&:hover {
+		background-color: rgb(170, 170, 170);
+	}
 }
 /*headings*/
 .fs-title {
@@ -1192,6 +1200,9 @@ body {
 .arrowdoup{
 	transform: rotate(180deg);
 }
+.arrowdown {
+	cursor: pointer;
+}
 .userprofile {
 	position: relative;
 	top: -80px;
@@ -1233,6 +1244,22 @@ body {
 					font-size: 15px;
 				}
 			}
+			.draft {
+				color:#183790;
+				font-weight: 900;
+			}
+			.draft-table {
+				th {
+					border-bottom: none !important;
+					color:#183790;
+					font-weight: 900;
+				}
+				.draft-content {
+					&-icon {
+						cursor: pointer;
+					}
+				}
+			}
 		}
 	}
 }

html/user_profile2.html

@@ -204,7 +204,7 @@
                                 <div class="draft col-lg-12">
                                     <div class="card p-4">
                                         <div class="d-flex justify-content-between">
-                                            <span>草稿夾</span>
+                                            <span set-lan="html:drafts">草稿夾</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>
@@ -215,7 +215,7 @@
                                             <thead>
                                               <tr>
                                                 <th scope="col" set-lan="html:video_title">標題</th>
-                                                <th class="px-0" scope="col" set-lan="">編輯</th>
+                                                <th class="px-0" scope="col" set-lan="html:draft_edit">編輯</th>
                                               </tr>
                                             </thead>
                                             <tbody class="draft-content">