Tried implementing progress for fetchGeoJsonHash

Grandro · Jul 18, 2024 · 36a3c76 · 36a3c76
1 parent c3c65ac
commit 36a3c76
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 1 deletion.
diff --git a/src/qlever-petrimaps/server/Server.cpp b/src/qlever-petrimaps/server/Server.cpp
@@ -74,6 +74,7 @@ util::http::Answer Server::handle(const util::http::Req& req, int con) const {
   try {
     Params params;
     auto cmd = parseUrl(req.url, req.payload, &params);
+    LOG(INFO) << "[SERVER] CMD: " << cmd;
 
     if (cmd == "/") {
       a = util::http::Answer(

diff --git a/web/script.js b/web/script.js
@@ -299,8 +299,74 @@ function fetchQuery(query, backend) {
     fetchLoadStatusInterval(1000, backend_encoded);
 }
 
-function fetchGeoJsonHash(content) {
+async function fetchGeoJsonHash(content) {
     // Fetch MD5-Hash of GeoJson-File content
+    // Track progress because content can be large
+
+    // Method 1: TransformStream
+    // const barElem = document.getElementById("submit-geoJSonFile-load-bar");
+    // const percentElem = document.getElementById("submit-geoJsonFile-load-percent");
+    // const body = "geoJsonFile=" + content;
+    // const blob = new Blob([body]);
+    // const totalBytes = blob.size;
+    // let bytesUploaded = 0;
+
+    // // Custom TransformStream to track upload progress
+    // const stream = new TransformStream({
+    //     transform(chunk, controller) {
+    //         controller.enqueue(chunk);
+    //         bytesUploaded += chunk.byteLength;
+    //         const percent = bytesUploaded / totalBytes * 100.0;
+    //         console.log("upload progress: ", percent);
+    //         barElem.style.width = percent + "%";
+    //         percentElem.innerHTML = percent.toFixed(2) + "%";
+    //     },
+    //     flush(controller) {
+    //         console.log("Completed stream");
+    //     }
+    // });
+    // fetch("geoJsonHash", {
+    //     method: "POST",
+    //     body: blob.stream().pipeThrough(stream),
+    //     headers: {
+    //         "Content-type": "application/json; charset=UTF-8"
+    //     },
+    //     duplex: "half"
+    // })
+    // .then((response) => response.text())
+    // .then(md5_hash => {
+    //     fetchGeoJsonFile(md5_hash);
+    // })
+    // .catch(error => showError(error));
+
+    // Method 2: XMLHttpRequest
+    // const barElem = document.getElementById("submit-geoJSonFile-load-bar");
+    // const percentElem = document.getElementById("submit-geoJsonFile-load-percent");
+
+    // const xhr = new XMLHttpRequest();
+    // const success = await new Promise((resolve) => {
+    //     xhr.upload.addEventListener("progress", (evt) => {
+    //         if (evt.lengthComputable) {
+    //             const percent = evt.loaded / evt.total * 100.0;
+    //             console.log("upload progress: ", percent);
+    //             barElem.style.width = percent + "%";
+    //             percentElem.innerHTML = percent.toFixed(2) + "%";
+    //         }
+    //     });
+    //     xhr.addEventListener("loadend", () => {
+    //         resolve(xhr.readyState === 4 && xhr.status === 200);
+    //     });
+    //     xhr.open("POST", "geoJsonHash", true);
+    //     xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
+    //     xhr.send("geoJsonFile=" + content);
+    // })
+    // .then((response) => response.text())
+    // .then(md5_hash => {
+    //     fetchGeoJsonFile(md5_hash);
+    // })
+    // .catch(error => showError(error));
+
+    // Method 3: Plain fetch
     fetch("geoJsonHash", {
         method: "POST",
         body: "geoJsonFile=" + content,
@@ -415,6 +481,7 @@ function fileToTextOnProgress(evt) {
 
     barElem.style.width = percent + "%";
     percentElem.innerHTML = percent.toFixed(2) + "%";
+    percentElem.innerHTML = percent.toFixed(2) + "%";
 }
 
 function fileToTextOnLoad(evt) {