Implement Pagination instead of Downloading a Blob

AS203038 · Sep 4, 2024 · d4bcba6 · d4bcba6
1 parent e049feb
commit d4bcba6
Showing 1 changed file with 74 additions and 30 deletions.
diff --git a/webui/src/lib/components/execCommand.svelte b/webui/src/lib/components/execCommand.svelte
@@ -12,10 +12,11 @@
     {
       result: Uint8Array | undefined;
       timestamp: Date | undefined;
-      blob: Blob | undefined;
-      download: boolean;
       length: number;
       ready: boolean;
+      pages: Uint8Array[];
+      currentPage: number;
+      pageSize: number;
     }
   > = {};
   let fire: boolean = false;
@@ -38,6 +39,9 @@
         blob: undefined,
         length: 0,
         ready: false,
+        pages: [],
+        currentPage: 0,
+        pageSize: 1024 * 1024 * 1, // 1MB per page
       };
       let res:
         | Pb.PingResponse
@@ -86,12 +90,25 @@
           return;
       }
       outputs[routerId].length = res.result.length;
-      if (res.result.length >= 1024 * 1024 * 10) {
-        outputs[routerId].download = true;
-        outputs[routerId].blob = new Blob([res.result], { type: "text/plain" });
+      if (res.result.length > outputs[routerId].pageSize) {
+        // Split result into pages
+        for (let i = 0; i < res.result.length; ) {
+          let end = i + outputs[routerId].pageSize;
+          if (end < res.result.length) {
+            // Find the next newline character after the pageSize
+            while (end < res.result.length && res.result[end] !== 10) {
+              // 10 is the ASCII code for newline
+              end++;
+            }
+            end++; // Include the newline character in the chunk
+          }
+          outputs[routerId].pages.push(res.result.slice(i, end));
+          i = end;
+        }
       } else {
         outputs[routerId].result = res.result;
       }
+      // }
       outputs[routerId].timestamp = new Date(
         parseInt(res.timestamp.seconds.toString()) * 1000,
       );
@@ -109,6 +126,18 @@
       }
     }
   });
+
+  function nextPage(routerId: string) {
+    if (outputs[routerId].currentPage < outputs[routerId].pages.length - 1) {
+      outputs[routerId].currentPage++;
+    }
+  }
+
+  function prevPage(routerId: string) {
+    if (outputs[routerId].currentPage > 0) {
+      outputs[routerId].currentPage--;
+    }
+  }
 </script>
 
 <div class="flex flex-wrap justify-evenly gap-4 mt-2">
@@ -123,41 +152,56 @@
           {#if outputs[router.id.toString()].ready === false}
             <div
               in:fade|global
-              class="text-center flex flex-col items-center w-full max-w-64"
+              class="text-center flex flex-col items-center max-h-80 h-max max-w-3xl w-max"
             >
               <ProgressRadial />
             </div>
           {:else}
-            {#if outputs[router.id.toString()]?.download}
-              <div class="w-full flex flex-col items-center pb-4">
-                <a
-                  href={window.URL.createObjectURL(
-                    outputs[router.id.toString()]?.blob,
-                  )}
-                  download="output.txt"
-                  class="btn variant-filled-primary"
-                >
-                  Download Output ({(
-                    outputs[router.id.toString()].length /
-                    1024 /
-                    1024
-                  ).toFixed(0)} MB)
-                </a>
-              </div>
+            {#if outputs[router.id.toString()]?.pages.length === 0}
+              <pre
+                in:fade|global
+                class="pre text-left max-h-80 h-max max-w-3xl w-max overflow-scroll"
+                data-clipboard={router.id.toString()}>{new TextDecoder().decode(
+                  outputs[router.id.toString()].result,
+                )}</pre>
             {:else}
               <pre
                 in:fade|global
-                class="pre text-left max-h-80 h-max"
+                class="pre text-left max-h-80 h-max max-w-3xl w-max overflow-scroll"
                 data-clipboard={router.id.toString()}>{new TextDecoder().decode(
-                  outputs[router.id.toString()]?.result,
+                  outputs[router.id.toString()].pages[
+                    outputs[router.id.toString()].currentPage
+                  ],
                 )}</pre>
-              <button
-                class="btn-icon variant-filled-primary absolute top-0 right-0"
-                use:clipboard={{ element: router.id.toString() }}
-              >
-                <Icon icon="ic:baseline-content-copy" />
-              </button>
+              <div class="flex justify-between mt-2">
+                <button
+                  class="btn variant-filled-primary"
+                  on:click={() => prevPage(router.id.toString())}
+                  disabled={outputs[router.id.toString()].currentPage === 0}
+                >
+                  Previous
+                </button>
+                <span>
+                  Page {outputs[router.id.toString()].currentPage + 1} of {outputs[
+                    router.id.toString()
+                  ].pages.length}
+                </span>
+                <button
+                  class="btn variant-filled-primary"
+                  on:click={() => nextPage(router.id.toString())}
+                  disabled={outputs[router.id.toString()].currentPage ===
+                    outputs[router.id.toString()].pages.length - 1}
+                >
+                  Next
+                </button>
+              </div>
             {/if}
+            <button
+              class="btn-icon variant-filled-primary absolute top-0 right-0"
+              use:clipboard={{ element: router.id.toString() }}
+            >
+              <Icon icon="ic:baseline-content-copy" />
+            </button>
             <pre class="text-right text-xs">
                 Timestamp: {outputs[
                 router.id.toString()