Browse Source

lan and slides script

huaisianhuang 3 years ago
parent
commit
d29130b149

+ 1 - 1
api/templates/make_video_slide.html

@@ -31,7 +31,7 @@
           <h3 class="fs-subtitle">SLIDE 連結<img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="將作為影片的內嵌標題"></h3>
           <input id=slide_raw_url type="text" name='t1' class='title_new' value="" placeholder="連結" /><input id="img3" type="file" class="pttx_uploader">
           <input id ='url_type' type='hidden' value='0'>
-          <label for="myCheck">加入英文:</label> 
+          <label for="myCheck" set-lan="html:add_eng">加入英文:</label> 
           <input type="checkbox" id="multiLang" > <br/>
         </fieldset>
         <fieldset>

+ 15 - 15
html/index.html

@@ -77,38 +77,38 @@
     <div class="price-int mt-5">
         <div class="price-content m-auto">
             <div class="price-content-1 text-center">
-                <h1 class="pb-5 pe-3"><i style="color:#EA5413" class="fas fa-tags pe-2"></i>限時早鳥方案</h1>
+                <h1 class="pb-5 pe-3"><i style="color:#EA5413" class="fas fa-tags pe-2"></i><lan set-lan="html:launch_special">限時早鳥方案</lan></h1>
                 <div class="row">
                     <div class="col-12 col-lg-4">
                         <a href="./pricing.html"><img style="width: 128px;" src="./static/img/book.png" alt=""></a>                     
-                        <h2>語言選擇: 中文 | 英文</h2>
+                        <h2 set-lan="html:pricing_lan">語言選擇: 中文 | 英文</h2>
                         <ul class="price-text ms-lg-5 ms-3">
-                            <li>支援中英文內容</li>
-                            <li>可加入字幕</li>
+                            <li set-lan="html:index_li1_1">支援中英文內容</li>
+                            <li set-lan="html:index_li1_2">可加入字幕</li>
                         </ul>
                     </div>
                     <div class="col-12 col-lg-4">
                         <a href="./pricing.html"><img style="width: 128px;" src="./static/img/news-anchor (1).png" alt=""></a>
-                        <h2>多款預設AI代言主播任你選</h2>
+                        <h2 set-lan="html:pricing_avatars">多款預設AI代言主播任你選</h2>
                             <ul class="price-text ms-3">
-                                <li>無人物肖像權問題</li>
-                                <li>人物表情、動作自然</li>
-                                <li>因應主題,選擇合適人物</li>
+                                <li set-lan="html:index_li2_1">無人物肖像權問題</li>
+                                <li set-lan="html:index_li2_2">人物表情、動作自然</li>
+                                <li set-lan="html:index_li2_3">因應主題,選擇合適人物</li>
                             </ul>
                     </div>
                     <div class="col-12 col-lg-4">
                         <a href="./pricing.html"><img style="width: 128px;" src="./static/img//transfer.png" alt=""></a>                    
-                        <h2>畫面素材支援: 圖檔 | 影檔 | 簡報</h2>
+                        <h2 set-lan="html:pricing_content">畫面素材支援: 圖檔 | 影檔 | 簡報</h2>
                         <ul class="price-text ms-1">
-                            <li>可上傳圖片或是影片作為背景</li>
-                            <li>可輸入文字腳本及投影片</li>
+                            <li set-lan="html:index_li3_1">可上傳圖片或是影片作為背景</li>
+                            <li set-lan="html:index_li3_2">可輸入文字腳本及投影片</li>
                         </ul>
                     </div>
                 </div>
              
                 <!-- <h1 class="mt-5 d-inline pe-5">$1200/7min</h1> -->
-                <p class="mt-5">想要快速製作影音內容?立即註冊,開始創作!</p>
-                <a href="./pricing.html"><button class="get-started my-3">立即查看</button></a>
+                <p class="mt-5" set-lan="html:index_action">想要快速製作影音內容?立即註冊,開始創作!</p>
+                <a href="./pricing.html"><button class="get-started my-3" set-lan="html:pricing_checkout">立即查看</button></a>
             </div>
         </div>
     </div>
@@ -126,7 +126,7 @@
                 <div class="col-xs-12 col-sm-6">
                     <img src="./static/img/contactus/choozmo (2).png" alt="" width="250">
                     <div class="footer-aigirl">Choozmo AI Spokesgirl</div>
-                    <div class="footer-follow">關注我們</div>
+                    <div class="footer-follow" set-lan="html:follow_us">關注我們</div>
                     <div class="footer-socials">
                         <a href="https://www.linkedin.com/company/choozmo/"><img src="./static/img/contactus/linkedin-logo-copy.png" alt="" width="32px" height="32px"></a>
                         <a href="https://www.facebook.com/choozmo/"><img src="./static/img/contactus/facebook_logos_PNG19753.png" alt="" width="32px" height="32px"></a>
@@ -140,7 +140,7 @@
                     <div class="footer-contacts">
                         <h5>CONTACT</h5>
                         <div>
-                            集仕多股份有限公司<br>新竹縣竹北市復興二路229號9樓之9<br>聯絡電話:036670804<br>聯絡信箱:SERVICE@CHOOZMO.COM
+                            <lan set-lan="html:contact_name">集仕多股份有限公司</lan><br><lan set-lan="html:address">新竹縣竹北市復興二路229號9樓之9</lan><br><lan set-lan="html:contact_tel">聯絡電話</lan>:036670804<br><lan set-lan="html:contact_mail">聯絡信箱</lan>:SERVICE@CHOOZMO.COM
                         </div>
                     </div>
                 </div>

+ 3 - 3
html/make_video.html

@@ -138,11 +138,11 @@
                     </div>
                     <!-- fieldsets -->
                     <fieldset>
-                        <h3 class="fs-subtitle"><lan set-lan="html:video_title">標題</lan><img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="將作為影片的內嵌標題"></h3>            
+                        <h3 class="fs-subtitle"><lan set-lan="html:video_title">標題</lan><img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="將作為影片的內嵌標題 The title of your video"></h3>            
                         <input id=title type="text" name='t1' class='title_new' value="" placeholder="標題" /> <br/>
                     </fieldset>
                     <fieldset>
-                        <h3  class="fs-subtitle"><lan set-lan="html:choose_character">選擇人物</lan><img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="將作為影片的講者"></h3>            
+                        <h3  class="fs-subtitle"><lan set-lan="html:choose_character">選擇人物</lan><img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="將作為影片的講者 The spokesgirl of your video"></h3>            
                         <select id="avatar" class='avatar'>
                             <option set-lan="html:p_choose_character" value="請選擇人物" selected="selected" disabled>>請選擇人物</option>              
                             <option value="7">Peggy</option>
@@ -208,7 +208,7 @@
                         <span class="add">+</span>
                     </fieldset>
                     <fieldset id='imgSrc'>
-                        <h3 class="fs-subtitle" style="display: inline-block;"><lan set-lan="html:img_link">影像連結</lan><img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="僅接受png, jpg, mp4格式"></h3><br/>
+                        <h3 class="fs-subtitle" style="display: inline-block;"><lan set-lan="html:img_link">影像連結</lan><img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="僅接受png, jpg, mp4格式 Support File Formats: png, jpg, mp4"></h3><br/>
                         <div class="img-inputs">
                         </div>
                         <span class="addimg">+</span>

+ 1 - 1
html/make_video_long.html

@@ -103,7 +103,7 @@
                     <a style="text-decoration: none;color:white;" href="./user_profile2.html">
                         <li class="nav-list-item pb-1 mb-3" data-bs-toggle="modal">
                             <i class="fas fa-user me-2"></i>
-                           <lan set-lan="user_profile">會員資料</lan>
+                           <lan set-lan="html:user_profile">會員資料</lan>
                         </li>
                     </a>
                     <li class="nav-list-item pb-1" data-bs-toggle="modal" data-bs-target="#history" onclick="openNav()">

+ 4 - 5
html/make_video_slide.html

@@ -139,12 +139,12 @@
                     </div>
                     <!-- fieldsets -->
                     <fieldset>
-                        <h3 class="fs-subtitle"><lan set-lan="html:slide_link">SLIDE 連結</lan><img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="將作為影片的內嵌標題"></h3>
-                        <input id=slide_raw_url type="text" name='t1' class='title_new' value="" placeholder="連結" /><label for="myCheck">加入英文:</label> 
+                        <h3 class="fs-subtitle"><lan set-lan="html:slide_link">SLIDE 連結</lan><img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="請輸入Google Slides連結 Google Slides Link"></h3>
+                        <input id=slide_raw_url type="text" name='t1' class='title_new' value="" placeholder="連結" /><label for="myCheck" set-lan="html:add_eng">加入英文:</label> 
                         <input type="checkbox" id="multiLang" > <br/>
                     </fieldset>
                     <fieldset>
-                        <h3  class="fs-subtitle"><lan set-lan="html:choose_character">選擇人物</lan><img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="將作為影片的講者"></h3>
+                        <h3  class="fs-subtitle"><lan set-lan="html:choose_character">選擇人物</lan><img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="將作為影片的講者 The spokesgirl of your video"></h3>
                         <select id="avatar" class='avatar'>
                             <option value="7">Peggy</option>
                             <option value="8">Stacy</option>
@@ -271,8 +271,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/script_util.js"></script>
-    <script src="script_index.js"></script>
+    <script src="static/script_slides.js"></script>
     <script type="text/javascript" src="static/lan.js"></script>
     <script src="static/common.js"></script>
 </body>

+ 12 - 13
html/pricing.html

@@ -90,18 +90,18 @@
                             <h3 class="title">早鳥方案</h3>
                         </div>
                         <ul class="pricing-content">
-                            <li>語言選擇: 中文 | 英文</li>
-                            <li>多款預設AI代言主播任你選</li>
-                            <li>畫面素材支援: 圖檔 | 影檔 | 簡報</li>
+                            <li set-lan="html:pricing_lan">語言選擇: 中文 | 英文</li>
+                            <li set-lan="html:pricing_avatars">多款預設AI代言主播任你選</li>
+                            <li set-lan="html:pricing_content">畫面素材支援: 圖檔 | 影檔 | 簡報</li>
                             <!-- <li class="disable">Maintenance</li>
                             <li class="disable">15 Subdomains</li> -->
                         </ul>
                         <div class="price-value">
-                            <span class="price-title">限時優惠</span>
-                            <span class="price-amount">$1200 <span class="duration">7分鐘</span></span>
+                            <span class="price-title" set-lan="html:pricing_discount">限時優惠</span>
+                            <span class="price-amount">$1200 <span class="duration">7<lan set-lan="html:mins">分鐘</lan></span></span>
                         </div>
                         <div class="pricingTable-signup">
-                            <a href="https://p.ecpay.com.tw/B3701C8" target="_blank">立即查看</a>
+                            <a href="https://p.ecpay.com.tw/B3701C8" target="_blank" set-lan="html:pricing_checkout">立即查看</a>
                         </div>
                     </div>
                 </div>
@@ -118,18 +118,18 @@
                             <h3 class="title">早鳥方案</h3>
                         </div>
                         <ul class="pricing-content">
-                            <li>語言選擇: 中文 | 英文</li>
-                            <li>多款預設AI代言主播任你選</li>
-                            <li>畫面素材支援: 圖檔 | 影檔 | 簡報</li>
+                            <li set-lan="html:pricing_lan">語言選擇: 中文 | 英文</li>
+                            <li set-lan="html:pricing_avatars">多款預設AI代言主播任你選</li>
+                            <li set-lan="html:pricing_content">畫面素材支援: 圖檔 | 影檔 | 簡報</li>
                             <!-- <li class="disable">Maintenance</li>
                             <li class="disable">15 Subdomains</li> -->
                         </ul>
                         <div class="price-value">
-                            <span class="price-title">限時優惠</span>
-                            <span class="price-amount">$1200 <span class="duration">7分鐘</span></span>
+                            <span class="price-title" set-lan="html:pricing_discount">限時優惠</span>
+                            <span class="price-amount">$1200 <span class="duration">7<lan set-lan="html:mins">分鐘</lan></span></span>
                         </div>
                         <div class="pricingTable-signup">
-                            <a href="https://p.ecpay.com.tw/B3701C8" target="_blank">立即查看</a>
+                            <a href="https://p.ecpay.com.tw/B3701C8" target="_blank" set-lan="html:pricing_checkout">立即查看</a>
                         </div>
                     </div>
                 </div>
@@ -166,7 +166,6 @@
         integrity="sha512-Y/Pox7RqKmT84klgmJCva3drWoXQWO42oHiWWhb9zd1pkIH60NF2SamgBrFHOTzrzHJhwgPGNGjNJ5ZmxLpUAQ=="
         crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="static/owl.carousel.min.js"></script>
-    <script src="login.js"></script>
     <script type="text/javascript" src="static/lan.js"></script>
     <script src="static/common.js"></script>
 </body>

+ 42 - 2
html/static/lan.js

@@ -64,7 +64,27 @@ var zh = {
     "video_duration": "影片時間",
     "slide_link": "SLIDE 連結",
     "new_pwd": "新密碼",
-    "confirm_pwd": "驗證碼"
+    "confirm_pwd": "驗證碼",
+    "pricing_lan": "語言選擇: 中文 | 英文",
+    "pricing_avatars": "多款預設AI代言主播任你選",
+    "pricing_content": "畫面素材支援: 圖檔 | 影檔 | 簡報",
+    "pricing_discount": "限時優惠",
+    "pricing_checkout": "立即查看",
+    "mins": "分鐘",
+    "launch_special": "早鳥方案",
+    "index_li1_1": "支援中英文內容",
+    "index_li1_2": "可加入字幕",
+    "index_li2_1": "無人物肖像權問題",
+    "index_li2_2": "人物表情、動作自然",
+    "index_li2_3": "因應主題,選擇合適人物",
+    "index_li3_1": "可上傳圖片或是影片作為背景",
+    "index_li3_2": "可輸入文字腳本及投影片",
+    "index_action": "想要快速製作影音內容?立即註冊,開始創作!",
+    "follow_us": "關注我們",
+    "contact_name": "集仕多股份有限公司",
+    "address": "新竹縣竹北市復興二路229號9樓之9",
+    "contact_tel": "聯絡電話",
+    "contact_mail": "聯絡信箱"
 };
 
 var en = {
@@ -114,7 +134,27 @@ var en = {
     "video_duration": "Duration",
     "slide_link": "SLIDE Link",
     "new_pwd": "New Password",
-    "confirm_pwd": "Confirmation Code"
+    "confirm_pwd": "Confirmation Code",
+    "pricing_lan": "Language Options: Ch | Eng",
+    "pricing_avatars": "Over 6 Avatars Available",
+    "pricing_content": "You can upload: images, MP4, slides",
+    "pricing_discount": "Special Discount",
+    "pricing_checkout": "Check it out",
+    "mins": "Minutes",
+    "launch_special": "Launch special",
+    "index_li1_1": "Support english & chinese content",
+    "index_li1_2": "Caption included",
+    "index_li2_1": "Free of portrait rights",
+    "index_li2_2": "Natural facial expression",
+    "index_li2_3": "Choose built-in avatars for your need",
+    "index_li3_1": "Generate videos from text",
+    "index_li3_2": "Upload images, video, slides as backgrounds",
+    "index_action": "Want to make video faster? Sign up to start creating!",
+    "follow_us": "Follow us",
+    "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"
 };
 
 

+ 264 - 0
html/static/script_slides.js

@@ -0,0 +1,264 @@
+checkRoute();
+
+function checkRoute() {
+  let jwt_token = get_jwt_token();
+  if(jwt_token == undefined) {
+    window.location.replace("login.html");
+  }
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/user_profile',
+    headers: { 
+        'accept': 'text/html',
+        'Authorization': `Bearer ${jwt_token}`
+     }
+  }).then(res => {
+    console.log(res.data);
+    if(res.status !== 200) {
+      window.location.replace("login.html");
+    }
+    var userName='';
+    userName+=' <h2 class="user-name text-white mt-4 fw-bold">Hello,'+res.data.user_info.userName+'</h2>';
+    $('.userName').html(userName);
+  }).catch(err => {
+    console.log(err);
+  });
+}
+
+const btnLoginPage = document.querySelector('.btn-login');
+const btnUserProfile = document.querySelector('.btn-userProfile');
+const btnLogout = document.querySelector('.btn-logout');
+function loginControl() {
+  btnLoginPage.style.display = 'none';
+  btnLogout.style.display = 'block';
+  btnUserProfile.style.display = 'block';
+}
+
+loginControl();
+
+var client_id = Date.now()
+var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+  return new bootstrap.Tooltip(tooltipTriggerEl)
+});
+var myModal = new bootstrap.Modal(document.getElementById('history'), {
+  keyboard: false
+})
+var avatarModal = new bootstrap.Modal(document.getElementById('avatarmega'), {
+  keyboard: false
+})
+var modalImg = document.querySelector("#avatarmega .modal-img");
+var modalTitle = document.querySelector("#avatarmega .modal-title");
+var avatarSelector = document.getElementById("avatar");
+var card = document.getElementsByClassName('card');
+card = [...card];
+avatarSelector.addEventListener('change', avatarChange);
+avatarChange();
+
+function addCardListener() {
+  for (let i = 0; i < card.length; i++) {
+    card[i].addEventListener('click', openavatarModel);
+  }
+}
+
+addCardListener();
+
+function avatarChange() {
+  var value = avatarSelector.options[avatarSelector.selectedIndex].text;
+  $('.owl-carousel').trigger('to.owl.carousel', avatarSelector.selectedIndex);
+  for (let i = 0; i < card.length; i++) {
+    card[i].classList.remove('active');
+    if (card[i].dataset.avatar == value) {
+      card[i].classList.add('active');
+    }
+  }
+}
+
+function openavatarModel() {
+  console.log(this.dataset.img);
+  modalImg.setAttribute("src", `static/img/${this.dataset.img}.webp`);
+  modalTitle.textContent = `${this.dataset.avatar}`;
+  avatarModal.show();
+}
+
+$('input[type=file]').on('change', prepareUpload);
+function prepareUpload(event) {
+  files = event.target.files;
+  var data = new FormData();
+  //data.append('file', $('.img_up1').prop('files')[0]);
+  data.append('file', files[0]);
+  // append other variables to data if you want: data.append('field_name_x', field_value_x);
+  $(this).next().text('');
+  $(this).next().html('<img src="static/img/Spinner-1s-181px.gif">');
+  $.ajax({
+    type: 'POST',
+    processData: false, // important
+    contentType: false, // important
+    data: data,
+    url: 'https://www.choozmo.com:8887/uploadfile',
+    dataType: 'json',
+    success: function (jsonData) {
+      event.target.previousSibling.value = jsonData.msg;
+      $(this).prev().val(jsonData.msg);
+      event.target.nextSibling.innerHTML = '';
+      event.target.nextSibling.textContent = '上傳檔案';
+      //console.log($(this).next());
+      //$(this).next().html('上傳檔案');
+      //$(this).next().text('上傳檔案');
+    },
+    error: function (error) {
+      event.target.nextSibling.innerHTML = '';
+      event.target.nextSibling.textContent = '上傳檔案';
+      alert('圖片錯誤');
+    }
+  });
+}
+
+const slide_button = document.querySelector('#send_slide');
+$("#send_slide").click(function () {
+  slide_button.setAttribute('disabled', '');
+  setTimeout(function () {
+    slide_button.removeAttribute('disabled')
+  }, 4000);
+  avatar = $('.avatar').val();
+  var step;
+  multiLang = 0
+  if ($('#multiLang').prop("checked")) {multiLang = 1;}
+  dataOBJ = {'slide_url':$('#slide_raw_url').val(),"avatar": avatar,"multiLang":multiLang, "client_id": client_id }
+  objstr = JSON.stringify(dataOBJ);
+  jwt_token =  get_jwt_token()
+  var xhr = new XMLHttpRequest();
+  xhr.open("POST", "https://www.choozmo.com:8887/make_anchor_video_gSlide");
+  xhr.setRequestHeader("accept", "application/json");
+  xhr.setRequestHeader("Authorization","Bearer "+jwt_token);
+  xhr.setRequestHeader("Content-Type", "application/json");
+  xhr.onreadystatechange = function () {
+    if (xhr.readyState === 4) {
+      Swal.fire({
+        title: "資料已送出",
+        icon: 'success',
+        text: '資料已傳送,請耐心等候',
+        confirmButtonColor: '#3085d6',
+      });
+    }
+  };
+  var data = renderXHR_data(dataOBJ)
+  console.log(data)
+  result = xhr.send(objstr);
+});
+
+var loaded_data = ''
+function openNav() {
+  document.getElementById("mySidenav").style.width = "250px";
+  document.querySelector('.loader').style.display = "block";
+  let jwt_token = get_jwt_token();
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/history_input',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${jwt_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;
+
+      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.appendChild(divImgfr);
+      list.appendChild(contentBox);
+      historyList.appendChild(list);
+    }
+    document.querySelector('.loader').style.display = "none";
+  
+  }).catch(err => {
+    console.log(err);
+  });
+}
+function closeNav() {
+  document.getElementById("mySidenav").style.width = "250px";
+}
+
+function view() {
+  event.stopPropagation();
+  console.log(event.target);
+  if (event.target.nodeName === 'I') {
+    return;
+  } else {
+    window.open(`http://${event.target.dataset.url}`, '_blank');
+  }
+}
+
+function renderXHR_data(jsonObj) {
+  XHRstring = ''
+  for (const [key, value] of Object.entries(jsonObj)) {
+    console.log(value)
+    if (typeof (value) == "object") {
+      XHRstring += (key+'=['+value.join(',')+']&')
+    }
+    else {
+      XHRstring += (key + '=' + value + '&')
+    }
+  }
+  XHRstring = XHRstring.substring(0, XHRstring.length - 1);
+  return XHRstring
+}
+
+function get_jwt_token(){
+  jwt_raw = document.cookie.split(';').filter(s=>s.includes('jwt_token'))[0];
+  if(!jwt_raw) {return}
+  return jwt_raw.split('=')[1];
+}
+
+ getpathId();
+
+function getpathId() {
+  id = window.location.search.split('?').pop();
+  return id.split('=')[1];
+  //load_data(id);
+}
+getData();
+
+function getData() {
+  let jwt_token = get_jwt_token();
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/history_input',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${jwt_token}`
+     }
+  }).then(res => {
+    loaded_data = res.data;
+    console.log(loaded_data);
+    const id = getpathId();
+    load_data(id, loaded_data);
+  }).catch(err => {
+    console.log(err);
+  });
+} 
+
+