123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265 |
- const btnLoginPage = document.querySelector('.btn-login');
- const btnUserProfile = document.querySelector('.btn-userProfile');
- const btnLogout = document.querySelector('.btn-logout');
- function getCookie(name) {
- const value = `; ${document.cookie}`;
- const parts = value.split(`; ${name}=`);
- if (parts.length === 2) return parts.pop().split(';').shift();
- }
- function renderView() {
- let token = getCookie('jwt_token');
- if(!token) {
- return;
- }
- // axios.defaults.withCredentials = false;
- axios({
- method: 'post',
- url: 'https://www.choozmo.com:8887/user_profile',
- headers: {
- 'accept': 'text/html',
- 'Authorization': `Bearer ${token}`
- }
- }).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>
- // <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>${userInfo.user_info.total_sec}</strong><span set-lan="html:sec">秒</span></p>
- // </div>
- // <div>
- // <p set-lan="html:left">未使用</p>
- // <p><strong>${userInfo.user_info.left_sec}</strong><span set-lan="html:sec">秒</span></p>
- // </div>
- // </div>`;
- 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>
- <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>${userInfo.user_info.total_sec}</strong><span set-lan="html:sec">秒</span></p>
- </div>
- <div>
- <p set-lan="html:left">未使用</p>
- <p><strong>${userInfo.user_info.left_sec}</strong><span set-lan="html:sec">秒</span></p>
- </div>
- </div>`;
- // 使用者名稱
- const userName = `<h2 class="user-name text-white mt-4 fw-bold">Hello,${userInfo.user_info.userName}</h2>`;
- // 已使用
- const usedtime=`<h1 class="text-center">${userInfo.user_info.total_sec} <span style="font-size:15px;" set-lan="html:sec">秒</span></h1>`;
- // 未使用
- const NotUsedTime=`<h1 class="text-center">${userInfo.user_info.left_sec} <span style="font-size:15px;" set-lan="html:sec">秒</span></h1>`;
- // user資訊
- const infContent=`
- <div class="inf-content">
- <p>${userInfo.user_info.userName}</p>
- <p>*************** <a href="./reset_pwd_email.html" set-lan="html:resetPsd">更改密碼</a></p>
- <p>${userInfo.user_info.email}</p>
- </div>`;
- // 歷史紀錄
- // const historicalrecord
- var historicalrecord=''
- for (var i = 0; i < userInfo.video_info.length; i++) {
- historicalrecord+='\
- <tr>\
- <td class="px-0">'+userInfo.video_info[i].time_stamp+'</td>\
- <td class="px-0">'+userInfo.video_info[i].title+'</td>\
- <td class="px-0 w-25">'+userInfo.video_info[i].duration+'</td>\
- </tr>`\
- ';
-
- }
- $('.historical-content').html(historicalrecord);
- $('.userinf').html(infContent);
- $('.userName').html(userName);
- $('.used-time').html(usedtime);
- $('.not-used-time').html(NotUsedTime);
- $('.card-profile').html(str);
- $('.card-profile').html(str);
- }).catch(err => {
- console.log(err);
- })
- }
- 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 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);
- }
- }).catch(err => {
- console.log(err);
- });
- }
- getDraft();
- function checkLogin() {
- let token = getCookie('jwt_token');
- if(token) {
- btnLoginPage.style.display = 'none';
- btnLogout.style.display = 'block';
- btnUserProfile.style.display = 'block';
- } else {
- window.location.href = 'login.html';
- btnLoginPage.style.display = 'block';
- btnLogout.style.display = 'none';
- btnUserProfile.style.display = 'none';
- }
- }
- checkLogin();
- $(".historical-record").hide();
- $( ".check-history" ).click(function() {
- $(".historical-record").toggle();
- $(".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";
- 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');
- }
- }
- 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);
- });
- }
|