Merge pull request #17 from sasjs/fix-ui

fix: cancel button should behave as reset when request finishes

Author: allanbowe

.gitpod.dockerfile

@@ -0,0 +1,6 @@
+FROM gitpod/workspace-full
+
+RUN sudo apt-get update \
+ && sudo apt-get install -y \
+    doxygen \
+ && sudo rm -rf /var/lib/apt/lists/*

sasjs/utils/copysas9.sh

@@ -86,8 +86,5 @@ <h1>This is a template <span class="code">SASjs</span> app</h1>
     <hr id="horizontalLine" style="display: none" />
     <h1 id="logTitle" style="display: none">Logs</h1>
     <div id="log" style="display: none"></div>
-    <button id="clearLog" onclick="clearLog()" style="display: none">
-      Clear
-    </button>
   </body>
 </html>

src/index.html

@@ -69,15 +69,12 @@ async function upload() {
   const fileUploadStatus = document.getElementById('fileUploadStatus')
   fileUploadStatus.innerText = '0%'
   progressBar.style.height = '30px'
-  let completed = true
   const file = x.files[0]
   if (file) {
     const numberOfChunks = Math.ceil(file.size / chunkSize)
 
     for (let i = 0; i < numberOfChunks; i++) {
       if (cancelled === true) {
-        completed = false
-        alert('Upload cancelled')
         break
       }
       const chunkStart = chunkSize * i
@@ -104,11 +101,13 @@ async function upload() {
                 displayError(new Error(error))
               }
               if (typeof res?.dirlist === 'object') {
-                fileUploadStatus.innerText = `Uploaded: ${bytesToSize(
-                  chunkEnd
-                )} (${status})`
-                barStatus.style.width = status
-                populateTable(res.dirlist)
+                if (!cancelled) {
+                  fileUploadStatus.innerText = `Uploaded: ${bytesToSize(
+                    chunkEnd
+                  )} (${status})`
+                  barStatus.style.width = status
+                  populateTable(res.dirlist)
+                }
               } else {
                 displayError(new Error('Response does not contain dir list'))
               }
@@ -139,15 +138,18 @@ async function upload() {
           )
       }
     }
-    setTimeout(function () {
-      if (completed) {
-        alert('Successfully Uploaded')
-      }
-      resetPage()
-    }, 10)
+    requestFinished()
   }
 }
 
+function requestFinished() {
+  const cancelButton = document.getElementById('cancel')
+  cancelButton.innerText = 'Reset'
+  cancelButton.removeEventListener('click', cancel)
+  cancelButton.addEventListener('click', resetPage)
+  cancelButton.disabled = false
+}
+
 function cancel() {
   console.log('upload cancelled')
   const cancelButton = document.getElementById('cancel')
@@ -156,26 +158,31 @@ function cancel() {
 }
 
 function resetPage() {
+  const cancelButton = document.getElementById('cancel')
+  cancelButton.disabled = true
+  cancelButton.removeEventListener('click', resetPage)
+  cancelButton.addEventListener('click', cancel)
+  cancelButton.innerText = 'Cancel'
   document.getElementById('upload').disabled = true
-  document.getElementById('cancel').disabled = true
   document.getElementById('filestatus').innerHTML = 'Select file to upload.'
+  document.getElementById('filePath').value = ''
   document.getElementById('myfile').value = ''
   document.getElementById('progressBar').style.height = '0px'
   document.getElementById('barStatus').style.width = '0%'
   document.getElementById('fileUploadStatus').innerText = ''
   document.getElementById('dirlist').style.display = 'none'
   document.getElementById('horizontalLine').style.display = 'none'
+  document.getElementById('logTitle').style.display = 'none'
+  document.getElementById('log').style.display = 'none'
   cancelled = false
 }
 
 function displayError(err) {
-  alert('Error Occurred')
-  resetPage()
+  requestFinished()
   const requests = sasjs.getSasRequests()
   if (requests.length > 0 && requests[0].logFile) {
     const logFile = requests[0].logFile.replace(/\n*$/, '')
     document.getElementById('horizontalLine').style.display = 'block'
-    document.getElementById('clearLog').style.display = 'inline-block'
     document.getElementById('logTitle').style.display = 'inline-block'
     const log = document.getElementById('log')
     log.innerHTML = logFile
@@ -184,13 +191,6 @@ function displayError(err) {
   throw err
 }
 
-function clearLog() {
-  document.getElementById('horizontalLine').style.display = 'none'
-  document.getElementById('logTitle').style.display = 'none'
-  document.getElementById('log').style.display = 'none'
-  document.getElementById('clearLog').style.display = 'none'
-}
-
 function fileChange() {
   const uploadButton = document.getElementById('upload')
   const filePath = document.getElementById('filePath').value