using new backend logic

public/css/style.css

@@ -87,6 +87,11 @@ table tbody td:nth-child(1) {
     word-break: break-all;
 }
 
+.comment-cell {
+    overflow-wrap: break-word;
+    word-break: break-word;
+}
+
 /* style score header */
 table th:nth-child(3) {
     white-space: nowrap;
@@ -96,4 +101,3 @@ table th:nth-child(3) {
 table tbody td:nth-child(3) {
     text-align: right;
 }
-

public/index.html

@@ -8,7 +8,6 @@
     <title>Dataset Downloader & Answer Uploader</title>
     <link rel="stylesheet" href="css/style.css">
     <script src="/socket.io/socket.io.js"></script>
-    <script defer src="js/socket.js"></script>
     <script defer src="js/index.js"></script>
     <script defer src="js/sorttable.js"></script>
 </head>

public/js/index.js

@@ -1,3 +1,12 @@
+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 resultsContainer = document.getElementById("results-container");
+
 // Download logic
 document.getElementById("downloadBtn").onclick = () => {
     const ds = document.getElementById("datasetSelect").value;
@@ -27,13 +36,52 @@ document.getElementById("uploadBtn").onclick = async () => {
     });
 
     const json = await res.json();
-    const statusEl = document.getElementById("status");
+    if (!res.ok) {
-    if (res.ok) {
-        statusEl.style.color = "green";
-        statusEl.textContent = json.message || "Upload succeeded!";
-    } else {
         statusEl.style.color = "red";
         statusEl.textContent =
             json.error + (json.message ? ": " + json.message : "");
+        return;
     }
+
+    progressContainer.style.display = "none";
+    resultsContainer.style.display = "block";
+    // empty the table besides the header of the table and fill the table. the data is of form id:
+    // {"proposed comment": "bla bla bla", "bleu score": 0.2}
+
+    const tbody = resultsContainer.querySelector("table tbody");
+    tbody.innerHTML = "";
+
+    Object.entries(json).forEach(([id, info]) => {
+        const row = tbody.insertRow(); // create a new row
+        const idCell = row.insertCell(); // cell 1: id
+        const commentCell = row.insertCell(); // cell 2: proposed comment
+        const scoreCell = row.insertCell(); // cell 3: bleu score
+
+        idCell.textContent = id;
+        commentCell.innerHTML = `<span class='comment-cell'>${info["proposed comment"]}</span>`;
+        scoreCell.textContent = info["max bleu score"].toFixed(4);
+    });
 };
+
+function setProgress(percent) {
+    progressBar.value = percent;
+    progressText.textContent = `${percent}%`;
+}
+
+socket.on("progress", (data) => {
+    setProgress(data.percent);
+    if (data.percent == 100) {
+        statusEl.style.color = "green";
+        statusEl.textContent = "Processing complete!";
+    }
+});
+
+socket.on("started-processing", () => {
+    progressContainer.style.display = "block";
+    setProgress(0);
+});
+
+socket.on("successul-upload", () => {
+    statusEl.style.color = "green";
+    statusEl.textContent = "Upload succeeded!";
+});

public/js/socket.js

@@ -1,49 +0,0 @@
-const socket = io();
-
-// 2) Grab our new DOM elements
-const progressContainer = document.getElementById("progress-container");
-const progressBar = document.getElementById("progress-bar");
-const progressText = document.getElementById("progress-text");
-const statusEl = document.getElementById("status");
-
-const resultsContainer = document.getElementById("results-container");
-
-function setProgress(percent) {
-    progressBar.value = percent;
-    progressText.textContent = `${percent}%`;
-}
-
-// 3) Update UI on each progress message
-socket.on("progress", (data) => {
-    setProgress(data.percent);
-    if (data.percent == 100) {
-        statusEl.style.color = "green";
-        statusEl.textContent = "Processing complete!";
-    }
-});
-
-socket.on("started-processing", () => {
-    progressContainer.style.display = "block";
-    setProgress(0);
-});
-
-socket.on("ended-processing", (data) => {
-    progressContainer.style.display = "none";
-    resultsContainer.style.display = "block";
-    // empty the table besides the header of the table and fill the table. the data is of form id:
-    // {"proposed comment": "bla bla bla", "bleu score": 0.2}
-
-    const tbody = resultsContainer.querySelector("table tbody");
-    tbody.innerHTML = "";
-
-    Object.entries(data).forEach(([id, info]) => {
-        const row = tbody.insertRow(); // create a new row
-        const idCell = row.insertCell(); // cell 1: id
-        const commentCell = row.insertCell(); // cell 2: proposed comment
-        const scoreCell = row.insertCell(); // cell 3: bleu score
-
-        idCell.textContent = id;
-        commentCell.textContent = info["proposed comment"];
-        scoreCell.textContent = info["max bleu score"].toFixed(4);
-    });
-});

src/routes/answers.js

@@ -77,6 +77,7 @@ router.post("/submit/comments", upload.single("file"), async (req, res) => {
         const header = req.get("X-Socket-Id");
         const socketId = header && header.trim();
         if (socketId && io.sockets.sockets.has(socketId)) {
+            io.to(socketId).emit("successul-upload");
             io.to(socketId).emit("started-processing");
         }