first setup for status check with uuid

public/index.html

@@ -56,7 +56,7 @@
             <input type="file" id="file-cnput" accept="application/json" />
             <br /><br />
             <button id="upload-btn">Upload JSON</button>
-            <span id="status" class="hidden" style="color: green;"> </span>
+            <span id="upload-status" class="hidden" style="color: green;"> </span>
         </fieldset>
 
         <fieldset>
@@ -64,11 +64,13 @@
                 <strong>Get status of ongoing process</strong>
                 <button id="info-results-btn" class='info-btn'><i class="fa fa-info"></i></button>
             </legend>
-            <label for="url">URL:</label>
+            <label for="uuid">UUID:</label>
-            <input type="url" id="url" placeholder="https://gym.si.usi.ch:45003/results/XXXX" size=50 required />
+            <input type="text" id="uuid"
+                pattern="[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89ABab][0-9a-fA-F]{3}-[0-9a-fA-F]{12}"
+                title="Must be a valid UUID, e.g. 123e4567-e89b-12d3-a456-426614174000" required size=50 />
             <br /><br />
             <button id="request-status">Request status</button>
-            <span id="status" class="hidden" style="color: green;"> </span>
+            <span id="status-status" class="hidden" style="color: green;"> </span>
         </fieldset>
 
 

public/js/index.js

@@ -3,7 +3,8 @@ const socket = io();
 const progressContainer = document.getElementById("progress-container");
 const progressBar = document.getElementById("progress-bar");
 const progressText = document.getElementById("progress-text");
-const statusEl = document.getElementById("status");
+const uploadStatusEl = document.getElementById("upload-status");
+const statusStatusEl = document.getElementById("status-status");
 
 const commentResultsContainer = document.querySelector(
     ".results-container#comment",
@@ -28,7 +29,7 @@ document.getElementById("download-dataset").onclick = () => {
 
 // Upload logic
 document.getElementById("upload-btn").onclick = async () => {
-    statusEl.classList.add("hidden");
+    uploadStatusEl.classList.add("hidden");
     progressContainer.classList.add("hidden");
 
     const type = document.getElementById("answer-cype").value;
@@ -50,8 +51,9 @@ document.getElementById("upload-btn").onclick = async () => {
 
     const json = await res.json();
     if (!res.ok) {
-        statusEl.style.color = "red";
+        uploadStatusEl.classList.remove("hidden");
-        statusEl.textContent =
+        uploadStatusEl.style.color = "red";
+        uploadStatusEl.textContent =
             json.error + (json.message ? ": " + json.message : "");
         return;
     }
@@ -119,19 +121,22 @@ function setProgress(percent) {
 socket.on("progress", (data) => {
     setProgress(data.percent);
     if (data.percent == 100) {
-        statusEl.style.color = "green";
+        uploadStatusEl.style.color = "green";
-        statusEl.textContent = "Processing complete!";
+        uploadStatusEl.textContent = "Processing complete!";
     }
 });
 
-socket.on("started-processing", () => {
+socket.on("started-processing", (data) => {
     setProgress(0);
+    uploadStatusEl.classList.remove("hidden");
+    uploadStatusEl.style.color = "green";
+    uploadStatusEl.textContent = data["id"];
 });
 
 socket.on("successful-upload", () => {
-    statusEl.classList.remove("hidden");
+    uploadStatusEl.classList.remove("hidden");
-    statusEl.style.color = "green";
+    uploadStatusEl.style.color = "green";
-    statusEl.textContent = "Upload succeeded!";
+    uploadStatusEl.textContent = "Upload succeeded!";
 });
 
 // INFO-MODAL LOGIC
@@ -177,6 +182,23 @@ modalOverlay.addEventListener("keydown", (e) => {
     });
 });
 
-document.getElementById("request-status").onclick = () => {
+document.getElementById("request-status").onclick = async () => {
-    url.reportValidity();
+    if (!uuid.reportValidity()) return;
+    const res = await fetch(`/answers/status/${uuid.value}`, {
+        headers: {
+            "X-Socket-Id": socket.id,
+        },
+    });
+
+    const json = await res.json();
+    if (!res.ok) {
+        statusStatusEl.classList.remove("hidden");
+        statusStatusEl.style.color = "red";
+        statusStatusEl.textContent =
+            json.error + (json.message ? ": " + json.message : "");
+        return;
+    }
+    statusStatusEl.classList.remove("hidden");
+    statusStatusEl.style.color = "green";
+    statusStatusEl.textContent = json["status"];
 };

src/routes/answers.py

@@ -2,7 +2,8 @@
 from flask import Blueprint, request, jsonify, current_app
 from utils.errors import InvalidJsonFormatError
 from utils.process_data import evaluate_comments, evaluate_refinement
-import json
+from utils.observer import request2status
+import json, uuid
 
 router = Blueprint('answers', __name__, url_prefix='/answers')
 
@@ -78,14 +79,22 @@ def submit_refinement():
     except InvalidJsonFormatError as e:
         return jsonify({'error': 'Invalid JSON format', 'message': str(e)}), 400
 
+    process_id = str(uuid.uuid4())
+    request2status[process_id] = "processing"
+
     socketio = current_app.extensions['socketio']
     sid = request.headers.get('X-Socket-Id')
     if sid:
         socketio.emit('successful-upload', room=sid)
-        socketio.emit('started-processing', room=sid)
+        socketio.emit('started-processing', {"id": process_id}, room=sid)
 
     results = evaluate_refinement(
         validated, lambda p: socketio.emit('progress', {'percent': p}, room=sid)
     )
 
     return jsonify(results)
+
+
+@router.route('/status/<id>')
+def request_status(id):
+    return jsonify({"status": request2status.get(id, "doens't exist")})

src/utils/observer.py

@@ -0,0 +1 @@
+request2status = {}