feat(api): respond w/ task.status

.github/workflows/pre-commit.yml

@@ -0,0 +1,18 @@
+name: pre-commit
+
+on:
+  pull_request:
+  push:
+    branches: [main]
+
+jobs:
+  pre-commit:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - uses: actions/setup-python@v3
+      - run: npm install
+      - uses: pre-commit/[email protected]

.pre-commit-config.yaml

@@ -19,7 +19,7 @@ repos:
       - id: ruff
   # Javascript
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: "v8.24.0"
+    rev: "v8.51.0"
     hooks:
       - id: eslint
-        additional_dependencies: ['eslint@8.24.0', 'eslint-plugin-import@2.26.0', '[email protected]']
+        additional_dependencies: ['eslint@8.51.0', 'eslint-plugin-import@2.28.1', '[email protected]']

.stylelintrc.json

@@ -1,6 +1,6 @@
 {
   "extends": "stylelint-config-standard",
   "rules": {
-    "indentation": 4
+    "declaration-property-value-no-unknown": true
   }
 }

client-src/base/base.css

@@ -22,7 +22,7 @@
     --card-sectionning-background-color: #e6e6e6 !important;
 }
 
-@media (min-width: 576px) {
+@media (width >= 576px) {
     :root {
         --logo-text-size: 2.8rem;
     }

client-src/base/results.css

@@ -16,3 +16,7 @@
     height: 3rem;
     font-size: 2rem;
 }
+
+.task-status {
+    font-size: small;
+}

client-src/create/create.css

@@ -1,4 +1,4 @@
-@media screen and (min-width: 992px) {
+@media screen and (width >= 992px) {
     #main-grid.grid {
         grid-template-columns: 2fr 1fr;
     }

client-src/digitize/index.js

@@ -13,7 +13,7 @@ setDisabled("submitBtn", true);
 
 // ...until files are added
 const fileElement = document.querySelector(".filebokz");
-fileElement.addEventListener("file-added", (e) => {
+fileElement.addEventListener("file-added", () => {
     setDisabled("submitBtn", false);
 });
 

client-src/help/index.js

@@ -10,10 +10,10 @@ if (anchor) {
 
 // jump inside page
 [...document.querySelectorAll("[href^='#']")].forEach((anchorLink) => {
-    const anchor = anchorLink.getAttribute("href");
+    const anchorHref = anchorLink.getAttribute("href");
     const onClick = () => {
         closeAllDetailsElements();
-        openDetailsParents(document.querySelector(anchor));
+        openDetailsParents(document.querySelector(anchorHref));
     };
     anchorLink.addEventListener("click", onClick);
 });

client-src/index/index.css

@@ -1,10 +1,10 @@
-@media screen and (max-width: 999px) {
+@media screen and (width < 1000px) {
     .horizontal.step-arrows {
         display: none;
     }
 }
 
-@media screen and (min-width: 1000px) {
+@media screen and (width >= 1000px) {
     .vertical.step-arrows {
         display: none;
     }

client-src/shared/domHelpers.js

@@ -4,6 +4,7 @@
  */
 function getUUIDFromURL() {
     const UUID_V4_PATTERN = /[0-9A-F]{8}-[0-9A-F]{4}-4[0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12}/i;
+    // eslint-disable-next-line no-restricted-globals
     return location.pathname.match(UUID_V4_PATTERN)[0];
 }
 
@@ -15,13 +16,12 @@ function getUUIDFromURL() {
  */
 function fillSelectOptions(selectElementId, optionsMap) {
     const selectElement = document.getElementById(selectElementId);
-    for (const paperformatKey in optionsMap) {
-        if (Object.prototype.hasOwnProperty.call(optionsMap, paperformatKey)) {
+    Object.values(optionsMap)
+        .forEach((paperformatValue) => {
             const option = document.createElement("option");
-            option.text = optionsMap[paperformatKey];
+            option.text = paperformatValue;
             selectElement.appendChild(option);
-        }
-    }
+        });
 }
 
 /**
@@ -34,6 +34,10 @@ function setIsBusy(elementId, isBusy) {
     element.setAttribute("aria-busy", isBusy);
 }
 
+function setTaskStatus(elementId, taskStatus) {
+    const element = document.getElementById(elementId);
+    element.textContent = taskStatus;
+}
 /**
  * set the disabled HTMLAttribute on the given HTMLElement
  * @param elementId
@@ -99,6 +103,7 @@ function openAllDetailsElements() {
 export {
     getUUIDFromURL,
     fillSelectOptions,
+    setTaskStatus,
     setDisabled,
     setDownloadLink,
     setIsBusy,

client-src/shared/poll/poll.js

@@ -1,20 +1,26 @@
 import { PollUntilValid } from "./pollUntilValid.js";
-import { setDownloadLink, setIsBusy, setDisabled } from "../domHelpers.js";
+import {
+    setDownloadLink,
+    setIsBusy,
+    setDisabled,
+    setTaskStatus,
+} from "../domHelpers.js";
 
 /**
  * This function polls repeatedly data from a URL as long as it receives
  *     HTTP 202 Accepted Codes.
- *     It will stop if it get a 200 OK or any Code outside the range of 200-299.
- *     Depending on Success(200), Pending(202), or any failure (!200-299 or NetworkError) it
+ *     It will stop if it gets a 200 OK or any Code outside the range of 200-299.
+ *     Depending on Success(200), Pending(202), or any failure (!200-299) it
  *     will display different messages to the user.
+ *     On NetworkError it will continue polling.
  *
  *     The function assumes the availability of 2 HTML Elements with the following ids:
  *     @example
  *     <span id="YOUR_PREFIX_HERE-status"></span>
  *     <a id="YOUR_PREFIX_HERE-download-button"></a>
  *
- * @param downloadUrl
- * @param prefix
+ * @param url url to poll from
+ * @param prefix identifier used to decide where results or progress messages should be displayed
  * @returns {Promise<Response>}
  */
 async function poll(url, prefix) {
@@ -25,11 +31,14 @@ async function poll(url, prefix) {
 
     async function onProgress(response) {
         // console.log("progress", response);
+        const result = await response.json();
+        setTaskStatus(`${prefix}-status`, `Processing ${result.status}`);
     }
 
     async function onValid(response) {
         const result = await response.json();
-        const { status, href } = result;
+        const { href } = result;
+        setTaskStatus(`${prefix}-status`, "");
         setDownloadLink(`${prefix}-download-button`, href);
         setIsBusy(`${prefix}-download-button`, false);
         setDisabled(`${prefix}-download-button`, false);
@@ -42,6 +51,7 @@ async function poll(url, prefix) {
     /**
      * Displays an error message and disappears the download button
      * @param _prefix sketch-map | quality-report
+     * @param errorText text shown in the error message details
      */
     function handleError(_prefix, errorText) {
         document.querySelectorAll(`#${prefix} :is(.pending, .success)`)
@@ -60,19 +70,35 @@ async function poll(url, prefix) {
     }
 
     async function onError(response) {
+        const { status: httpStatus } = response;
         const resonseJSON = await response.json();
-        const errorText = resonseJSON.error;
-        console.log(response.status, response.statusText, errorText, resonseJSON);
-        handleError(prefix, errorText);
+        const {
+            error: errorText,
+            status: taskStatus,
+        } = resonseJSON;
+        // display error
+        if (httpStatus === 500) {
+            handleError(prefix, `${new Date().toISOString()} ${taskStatus} <br>
+            There was an Internal Server Error.`);
+        } else {
+            handleError(prefix, `${new Date().toISOString()} ${taskStatus} <br> ${errorText}`);
+        }
+        // remove task status
+        setTaskStatus(`${prefix}-status`, "");
     }
 
     try {
         return await PollUntilValid.poll(url, validateFn, 1000, onValid, onProgress, onError);
-    } catch (e) {
-        // Network Error or other reason why the request could not be completed
-        console.log(e);
-        handleError(prefix, e);
-        return null;
+    } catch (error) {
+        if (error instanceof TypeError) {
+            // Chrome and Firefox use different Error messages, so it's hard to be more
+            // specific than checking for TypeError
+            // see: https://developer.mozilla.org/en-US/docs/Web/API/fetch#exceptions
+            setTaskStatus(`${prefix}-status`, "NetworkError: RETRYING to get task status");
+            await PollUntilValid.wait(5000);
+            return poll(url, prefix);
+        }
+        throw error;
     }
 }
 

client-src/shared/poll/pollUntilValid.js

@@ -27,24 +27,8 @@ class PollUntilValid {
         onError = () => {},
     ) {
         do {
-            let response;
-            try {
-                /* eslint-disable no-await-in-loop */
-                response = await fetch(url);
-            } catch (error) {
-                if (error instanceof TypeError) {
-                    // Chrome and Firefox use different Error messages, so it's hard to be more
-                    // specific than checking for TypeError
-                    // see: https://developer.mozilla.org/en-US/docs/Web/API/fetch#exceptions
-                    console.log("NetworkError, continue retrying", error);
-                    await PollUntilValid.wait(5000);
-                } else {
-                    throw error;
-                }
-            }
-
-            // eslint-disable-next-line no-continue
-            if (!response) continue;
+            /* eslint-disable no-await-in-loop */
+            const response = await fetch(url);
 
             // if response code is not between 200-299
             if (!response.ok) {
@@ -60,7 +44,7 @@ class PollUntilValid {
                 return response;
             }
 
-            /* eslint-enable */
+            // eslint-disable-next-line no-constant-condition
         } while (true);
     }