add save/load session btn, move debug message to show on lightbox

fetch/fetch.js

@@ -2,7 +2,7 @@
 
     const baseurl = "https://digitallibrary-external.fastretailing.com/";
     const fetchNumber = 30;
-    const sleepTime = 3000;
+    const sleepTime = 2000;
     let allowDebugMessage = true;
 
     function addLightBox(){
@@ -11,7 +11,6 @@
             .then(response => response.text())
             .then(result => document.body.insertAdjacentHTML('beforeend', result))
             .then(()=>{
-
                 // turn on/ off lightbox
                 document.querySelector("#lightbox-switch").addEventListener("click",function(){
                     document.getElementById("fetch-lightbox").classList.add("on");
@@ -21,6 +20,9 @@
                 });
 
                 // operation
+                document.querySelector("#saveSession").addEventListener("click",saveSession);
+                document.querySelector("#loadSession").addEventListener("click",loadSession);
+
                 document.querySelector("#searchSKUs").addEventListener("click", startFetching);
                 document.querySelector("#downloadSelectedSKUs").addEventListener("click",downloadFetching);
                 document.querySelector("#downloadAllSKUs").addEventListener("click",extensionDownloading);
@@ -51,7 +53,7 @@
             div.appendChild(content);
             document.querySelector("#fetch-lightbox .debug-box").appendChild(div);
         }else{
-            console.log(str);
+            document.querySelector("#fetch-lightbox .info-message").innerHTML = str;
         }
     }
 
@@ -84,6 +86,23 @@
         };
     }
 
+    function saveSession(){
+        let sessionString = document.getElementById("session-string").value;
+        let sessionSigString = document.getElementById("session-sig-string").value;
+        chrome.storage.local.set({
+            "sessionString": sessionString,
+            "sessionSigString": sessionSigString
+        });
+    }
+
+    function loadSession(){
+        chrome.storage.local.get(["sessionString", "sessionSigString"],function(result){
+            document.getElementById("session-string").value = result.sessionString;
+            document.getElementById("session-sig-string").value = result.sessionSigString
+        });
+    }
+
+
     /* End of utility function */
 
     /* Start of main function */
@@ -129,6 +148,11 @@
                 // client side filteing
                 filterByDate();
             }
+
+            addDebugMessage(`SKU search completed.`);
+
+        }else{
+            alert("It is empty on SKU list.");
         }
     }
 
@@ -149,6 +173,8 @@
             await downloadList(downloadlist, `asset_file`);
         else if(downloadlist.length === 1)
             await downloadList(downloadlist, document.querySelector("#fetch-lightbox .debug-box .asset-item.on .asset-name").innerHTML);
+        else
+            alert("There is no selected asset.");
 
         // remove the clicked state on asset item
         document.querySelectorAll("#fetch-lightbox .debug-box .asset-item.on").forEach(x => x.classList.remove("on"));
@@ -174,6 +200,8 @@
                 await downloadList(downloadlist["model"], `${SKU}_model`);
                 await sleep(sleepTime);
             }
+        }else{
+            alert("It is empty on SKU list.");
         }
     }
 

fetch/lightbox.css

@@ -77,7 +77,7 @@
     margin-bottom: 15px;
 }
 
-#fetch-lightbox .debug-box{
+#fetch-lightbox .info-box{
     grid-column-start: 1;
     grid-column-end: 4;
     grid-row-start: 2;
@@ -85,6 +85,20 @@
     border: 2px solid #cccccc;
     border-radius: 5px;
     overflow: scroll;
+
+    position: relative;
+}
+
+#fetch-lightbox .info-message{
+    position: absolute;
+    top: 10px;
+    left: 15px;
+}
+
+#fetch-lightbox .debug-box{
+    width: 100%;
+    height: 100%;
+    padding-top: 10px;
 }
 
 #fetch-lightbox .asset-item{
@@ -119,7 +133,7 @@
 }
 
 
-#searchSKUs, #downloadSelectedSKUs, #downloadAllSKUs{
+#fetch-lightbox button{
     display: inline-block;
     padding: 12px;
     margin-bottom: 5px;
@@ -128,20 +142,28 @@
     cursor: pointer;
 }
 
-#searchSKUs:hover, #downloadSelectedSKUs:hover, #downloadAllSKUs:hover{
+#fetch-lightbox button:hover{
     border-color: black;
 }
 
 #searchSKUs{
-    background-color: hsl(40, 77%, 83%);
+    background-color: hsl(40, 75%, 80%);
 }
 
 #downloadSelectedSKUs{
-    background-color: hsl(60, 77%, 83%);
+    background-color: hsl(60, 75%, 80%);
 }
 
 #downloadAllSKUs{
-    background-color: hsl(80, 77%, 83%);
+    background-color: hsl(80, 75%, 80%);
+}
+
+#saveSession{
+    background-color: hsl(60, 85%, 90%);
+}
+
+#loadSession{
+    background-color: hsl(40, 85%, 90%);
 }
 
 #lightbox-switch{

fetch/lightbox.html

@@ -26,6 +26,11 @@
                 Manuel input required because session cannot obtain from javascript <br />
                 To copy the cookie string, go to:
                 Web Inspector > Application > Storage > Cookie
+                <div>
+                    <button id="saveSession">Save Session</button>
+                    <button id="loadSession">Load Saved Session</button>
+                </div>
+
             </p>
         </div>
 
@@ -46,9 +51,9 @@
 
         </div>
 
-        <div class="debug-box">
-
-
+        <div class="info-box">
+            <div class="info-message"></div>
+            <div class="debug-box"></div>
         </div>
 
     </div>