Add progress to packet loading (and download links)

css/main.css

@@ -767,18 +767,36 @@ select option:disabled {
     transition: all 0.2s;
 }
 
+.save-button {
+    display:inline-block;
+    padding-left: 10px;
+    color:#FFFFFF;
+}
+
+.save-button a { 
+    color: inherit; 
+} 
+
+.save-button:hover {
+    color: blue;
+}
+
 .packet-button:hover{
     color:lightblue;
     border-color:blue;
 }
 
-.sk-cube-grid {
-  width: 60px;
-  height: 60px;
+.progress-block {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+  font-size: smaller;
+}
+
+.sk-cube-grid {
+  width: 60px;
+  height: 60px;
 }
 
 .sk-cube-grid .sk-cube {

index.html

@@ -101,6 +101,9 @@
     </div>
 
     <div id="loading" class="fullscreen-overlay">
+        <div class="progress-block">
+        <div id="progress">
+        </div>
         <div class="sk-cube-grid full">
             <div class="sk-cube sk-cube1"></div>
             <div class="sk-cube sk-cube2"></div>
@@ -112,10 +115,12 @@
             <div class="sk-cube sk-cube8"></div>
             <div class="sk-cube sk-cube9"></div>
         </div>
+        </div>
     </div>
 
     <script src="lib/jquery-3.4.1.min.js" type="text/javascript"></script>
     <script src="lib/notify.min.js" type="text/javascript"></script>
+    <script src="lib/jq-ajax-progress.min.js" type="text/javascript"></script>
     <script src="lib/hammer.js"></script>
     <script src="lib/cornerstone.js"></script>
     <script src="lib/dicomParser.min.js"></script>

js/helpers.js

@@ -3,7 +3,9 @@
  * @param {array} array
  */
 export function shuffleArray(array) {
-  var currentIndex = array.length, temporaryValue, randomIndex;
+  var currentIndex = array.length,
+    temporaryValue,
+    randomIndex;
   // While there remain elements to shuffle...
   while (0 !== currentIndex) {
     // Pick a remaining element...
@@ -26,3 +28,15 @@ export function urltoFile(url, filename, mimeType) {
       return new File([buf], filename, { type: mimeType });
     });
 }
+
+export function formatBytes(bytes, decimals = 2) {
+  if (bytes === 0) return "0 Bytes";
+
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+}

js/main.js

@@ -55,9 +55,19 @@ function loadPacketList(data) {
   window.packet_list = data.packets;
   window.packet_list.forEach(function (packet) {
     $("#packet-list").append(
-      $("<div class='packet-button'>" + packet + "</div>").click(function () {
-        loadPacketFromAjax("packets/" + packet);
-      })
+      $("<div class='packet-button' title='Load packet'></div>")
+        .text(packet)
+        .click(function () {
+          loadPacketFromAjax("packets/" + packet);
+        })
+        .append(
+          $(
+            `<div class='save-button' title='Download packet for offline use (or to save bandwidth)'><a href='packets/${packet}'>💾</a></div>`
+          ).click(function () {
+            console.log("packets/" + packet);
+            event.stopPropagation();
+          })
+        )
     );
   });
   $("#options-panel").show();
@@ -69,11 +79,28 @@ function loadPacketList(data) {
  */
 function loadPacketFromAjax(path) {
   console.log("loading packet from " + path);
-  $.getJSON(path, function (data) {
-    setUpPacket(data);
-    $("#options-panel").hide();
+  // $.getJSON(path, function (data) {
+  //   setUpPacket(data);
+  //   $("#options-panel").hide();
+  // })
+  $.ajax({
+    dataType: "json",
+    url: path,
+    progress: function (e) {
+      if (e.lengthComputable) {
+        var completedPercentage = Math.round((e.loaded * 100) / e.total);
+        console.log(completedPercentage);
+
+        $("#progress").html(
+          `${completedPercentage}%<br/>${helper.formatBytes(e.total)}`
+        );
+      }
+    },
   })
-    .done(function () {})
+    .done(function (data) {
+      setUpPacket(data);
+      $("#options-panel").hide();
+    })
     .fail(function () {
       console.log("Unable to load packet at: " + path);
     });
@@ -1643,7 +1670,9 @@ $("#btn-delete-databases").click(function (evt) {
       .then(() => {
         $.notify("Database successfully deleted", "success");
         $.notify("The page will now reload", "warn");
-        setTimeout(() => {location.reload();}, 2000);
+        setTimeout(() => {
+          location.reload();
+        }, 2000);
         console.log("Database successfully deleted");
       })
       .catch((err) => {
@@ -1658,19 +1687,23 @@ $("#btn-delete-databases").click(function (evt) {
 });
 
 $("#btn-delete-current").click(function (evt) {
-db.answers
-    .where("qid").anyOf(window.question_order)
+  db.answers
+    .where("qid")
+    .anyOf(window.question_order)
     .delete()
     .then(function (deleteCount) {
-        $.notify("Packet successfully reset", "success");
-        $.notify("The page will now reload", "warn");
-        setTimeout(() => {location.reload();}, 2000);
-        console.log( "Deleted " + deleteCount + " objects");
-    }).catch((err) => {
-        $.notify("Error reseting packet", "error");
-        console.error("Could not answers");
-      });
-
+      $.notify("Packet successfully reset", "success");
+      $.notify("The page will now reload", "warn");
+      setTimeout(() => {
+        location.reload();
+      }, 2000);
+      console.log("Deleted " + deleteCount + " objects");
+    })
+    .catch((err) => {
+      $.notify("Error reseting packet", "error");
+      $.notify("You may have to delete all answers this time", "info");
+      console.error("Could not answers");
+    });
 });
 
 $(document).ajaxStart(function () {

lib/jq-ajax-progress.min.js

@@ -0,0 +1 @@
+!function(e){"function"==typeof define&&define.amd?define(["jquery"],e):"object"==typeof exports?module.exports=e(require("jquery")):e(jQuery)}(function(e){var t=e.ajax.bind(e);e.ajax=function(n,r){"object"==typeof n&&(r=n,n=void 0);var o=(r=r||{chunking:!1}).xhr?r.xhr():e.ajaxSettings.xhr(),s=r.chunking||e.ajaxSettings.chunking;return r.xhr=function(){if("function"==typeof r.uploadProgress){if(!o.upload)return;o.upload.onprogress=null,o.upload.addEventListener("progress",function(e){r.uploadProgress.call(this,e)},!1)}if("function"==typeof r.progress){var e=0;o.addEventListener("progress",function(t){var n=[t],o="";this.readyState===XMLHttpRequest.LOADING&&s&&(o=this.responseText.substr(e),e=this.responseText.length,n.push(o)),r.progress.apply(this,n)},!1)}return o},t(n,r)}});