user_profile and lan

html/script_profile.js → html/script_profiles.js

@@ -10,9 +10,9 @@ function getCookie(name) {
 
 function renderView() {
     let token = getCookie('jwt_token');
-    if(!token) {
-        return;
-    }
+    // if(!token) {
+    //     return;
+    // }
     // axios.defaults.withCredentials = false;
     axios({
         method: 'post',
@@ -30,12 +30,12 @@ function renderView() {
             <p class="card-profile-cnt">${userInfo.user_info.email}</p>
             <div class="d-flex justify-content-around">
                 <div>
-                    <p>已使用</p>
-                    <p><strong>${userInfo.user_info.total_sec}</strong>秒</p>
+                    <p set-lan="html:used">已使用</p>
+                    <p><strong>${userInfo.user_info.total_sec}</strong><span set-lan="html:sec">秒</span></p>
                 </div>
                 <div>
-                    <p>未使用</p>
-                    <p><strong>${userInfo.user_info.left_sec}</strong>秒</p>
+                    <p set-lan="html:left">未使用</p>
+                    <p><strong>${userInfo.user_info.left_sec}</strong><span set-lan="html:sec">秒</span></p>
                 </div>
             </div>`;
             $('.card-profile').html(str);
@@ -46,6 +46,45 @@ function renderView() {
 
 renderView();
 
+renderHistoryList();
+
+function renderHistoryList() {
+    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);
+    const history = res.data;
+    let str = '';
+    for(let i = 0;i < history.length;i++){
+    str += `<div class="historyList-item row">
+                  <div class="col-3">
+                      <div class="listimg__fr"><img src="${history[i]['image_urls'][0]}" alt="${history[i].name}"></div>
+                  </div>
+                  <div class="col-6">
+                      <p class="my-3">${history[i].name}</p>
+                  </div>
+                  <div class="col-3 d-flex align-items-center">
+                      <span onlick="view()" data-vlink="${history[i].link}"><i class="fas fa-play-circle me-1"></i>觀看影片</span>
+                  </div>
+              </div>`
+    }
+    $('#content_block .col-12').html(str);
+  }).catch(err => {
+    console.log(err);
+  });
+}
+
+function view() {
+    window.open(`http://${event.target.data.vlink}`, '_blank');
+    console.log("link view");
+  }
+
 function checkLogin() {
     let token = getCookie('jwt_token');
     if(token) {

html/static/lan.js

@@ -20,6 +20,7 @@ function getCookie(name)
 var zh = {
     "make_video" : "影片製作",
     "make_slides" : "投影影片製作",
+    "make_video_long": "長影片製作",
     "login" : "登入",
     "user_profile": "會員資料",
     "logout": "登出",
@@ -46,12 +47,16 @@ var zh = {
     "goRegister": "註冊",
     "pricing" : "早鳥方案",
     "errorEmail": "請輸入正確E-mail",
-    "errorPsd": "密碼至少為4個字元"
+    "errorPsd": "密碼至少為4個字元",
+    "used": "已使用",
+    "left": "未使用",
+    "sec": "秒"
 };
 
 var en = {
     "make_video" : "Make Videos",
     "make_slides" : "Make Videos By Slides",
+    "make_video_long": "Make Long Videos",
     "login" : "Login",
     "user_profile": "User Profile",
     "logout": "Logout",
@@ -78,7 +83,10 @@ var en = {
     "goRegister": "REGISTER",
     "pricing" : "Pricing",
     "errorEmail": "Please enter valid Email format.",
-    "errorPsd": "Passwords must be at least 4 characters long."
+    "errorPsd": "Passwords must be at least 4 characters long.",
+    "used": "Already Used",
+    "left": "Left",
+    "sec": "Sec"
 };
 
 

html/static/scss/style.css

@@ -222,17 +222,24 @@ body {
 	height: 90%;
 	overflow: scroll;
 } */
+.history {
+  height: 75vh;
+  overflow: scroll;
+}
+
 .historyList-item {
   padding: 1rem;
   display: block;
   width: 80%;
   margin: 1rem auto;
-  border: 1px solid #b1b1b1;
   border-radius: 10px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   font-size: 0.9rem;
+  -webkit-box-shadow: 1px 1px 4px 1px #cfcfcf;
+          box-shadow: 1px 1px 4px 1px #cfcfcf;
+  background-color: white;
 }
 
 .historyList-link {
@@ -244,6 +251,19 @@ body {
   color: #7c7c7c;
 }
 
+.listimg__fr {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  overflow: hidden;
+  margin: auto .5rem;
+}
+
+.listimg__fr img {
+  width: 100%;
+  height: 100%;
+}
+
 .content {
   width: calc(100% - 250px);
 }
@@ -1011,24 +1031,16 @@ body {
   padding: 10px 50px;
 }
 
-.container-profile {
-  width: 100vw;
-  height: 100vh;
-  overflow-y: hidden;
-}
-
 .container-bg {
   position: absolute;
   width: 600px;
   height: 400px;
   right: 0;
   bottom: 0;
+  z-index: -1;
 }
 
 .container-profile .card-profile {
-  width: 30%;
-  min-width: 320px;
-  margin: auto;
   margin-top: 4rem;
   border-radius: 10px;
   padding: 2rem;

html/static/scss/style.scss

@@ -214,15 +214,21 @@ body {
 	overflow: scroll;
 } */
 
+.history {
+	height: 75vh;
+	overflow: scroll;
+}
+
 .historyList-item {
 	padding: 1rem;
 	display: block;
 	width: 80%;
 	margin: 1rem auto;
-	border: 1px solid rgb(177, 177, 177);
 	border-radius: 10px;
 	display: flex;
 	font-size: 0.9rem;
+	box-shadow: 1px 1px 4px 1px rgb(207, 207, 207);
+	background-color: white;
 }
 
 .historyList-link {
@@ -234,6 +240,19 @@ body {
 	color: rgb(124, 124, 124);
 }
 
+.listimg__fr {
+	width: 50px;
+	height: 50px;
+	border-radius: 50%;
+	overflow: hidden;
+	margin: auto .5rem;
+}
+
+.listimg__fr img {
+	width: 100%;
+	height: 100%;
+}
+
 .content {
 	width: calc(100% - 250px);
 }
@@ -925,11 +944,6 @@ body {
 	padding: 10px 50px;
 }
 
-.container-profile {
-	width: 100vw;
-	height: 100vh;
-	overflow-y: hidden;
-}
 
 .container-bg {
 	position: absolute;
@@ -937,12 +951,10 @@ body {
 	height: 400px;
 	right: 0;
 	bottom: 0;
+	z-index: -1;
 }
 
 .container-profile .card-profile {
-	width: 30%;
-	min-width: 320px;
-	margin: auto;
 	margin-top: 4rem;
 	border-radius: 10px;
 	padding: 2rem;

html/user_profile.html

@@ -43,7 +43,7 @@
                         <a class="nav-link active btn-gocreate text-white" aria-current="page" href="make_video_slide.html" set-lan="html:make_slides">SLIDE製作影片</a>                        
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link active btn-gocreate text-white" aria-current="page" href="make_video_long.html" set-lan="html:make_slides">製作長影片</a>                        
+                        <a class="nav-link active btn-gocreate text-white" aria-current="page" href="make_video_long.html" set-lan="html:make_video_long">製作長影片</a>                        
                     </li>
                 </ul>
                 
@@ -78,14 +78,41 @@
 
     <!-- ================================================================= -->
     <!-- content -->
-    <div class="container-fluid px-0">
-        <div class="container-profile">
-            <img class="img-wave img-wave-profile" src="static/img/wave.png" alt="">
-            <img class="container-bg" src="static/img/undraw_mobile_user_7oqo.svg" alt="">
-            <div class="card card-profile">
-               
+    <div class="container px-0">
+        <div class="row">
+            <div class="col-xs-12 col-md-4">
+                <div class="container-profile">
+                    <img class="img-wave img-wave-profile" src="static/img/wave.png" alt="">
+                    <img class="container-bg" src="static/img/undraw_mobile_user_7oqo.svg" alt="">
+                    <div class="card card-profile">
+                        <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>
+                        <p class="card-profile-cnt">${userInfo.user_info.email}</p>
+                        <div class="d-flex justify-content-around">
+                            <div>
+                                <p set-lan="html:used">已使用</p>
+                                <p><strong>${use}</strong><span set-lan="html:sec">秒</span></p>
+                            </div>
+                            <div>
+                                <p set-lan="html:left">未使用</p>
+                                <p><strong>${user</strong><span set-lan="html:sec">秒</span></p>
+                            </div>
+                        </div>
+                    </div>
+                </div> 
+            </div>
+            <div class="col-xs-12 col-md-8">
+                <div class="history ms-auto">
+                      <div class="row" id="content_block">
+                        <div class="col-12">
+                            
+                          </div>
+                      </div>
+                  </div>
             </div>
-        </div>        
+        </div>
+               
     </div>
     <!-- ================================================================= -->
 
@@ -103,7 +130,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="script_profile.js"></script>
+    <!-- <script src="script_profiles.js"></script> -->
     <script type="text/javascript" src="static/lan.js"></script>
     <script src="static/common.js"></script>
 </body>