From 6fc0262d2dbf9e6a72b0db94c0a46cfb9ffeba15 Mon Sep 17 00:00:00 2001
From: Gregor Kleen <gregor.kleen@ifi.lmu.de>
Date: Fri, 7 Feb 2020 15:58:35 +0100
Subject: [PATCH] feat(exam-correct): display backend error messages

---
 frontend/src/utils/exam-correct/exam-correct.js   | 15 ++++++++++++---
 frontend/src/utils/exam-correct/exam-correct.sass | 11 +++++++++++
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/frontend/src/utils/exam-correct/exam-correct.js b/frontend/src/utils/exam-correct/exam-correct.js
index 75ab62a8e..37263bf01 100644
--- a/frontend/src/utils/exam-correct/exam-correct.js
+++ b/frontend/src/utils/exam-correct/exam-correct.js
@@ -23,6 +23,7 @@ const EXAM_CORRECT_USER_INPUT_CANDIDATES_ID = 'exam-correct__user-candidates';
 const EXAM_CORRECT_INPUT_BODY_ID = 'exam-correct__new';
 const EXAM_CORRECT_USER_ATTR = 'exam-correct--user-id';
 const EXAM_CORRECT_USER_DNAME_ATTR = 'exam-correct--user-dname';
+const EXAM_CORRECT_STATUS_CELL_CLASS = 'exam-correct--status-cell';
 
 const STATUS = {
   NONE: null,
@@ -279,6 +280,7 @@ export class ExamCorrect {
         users: null,
         results: null,
         status: STATUS.FAILURE,
+        message: null,
         date: null,
       };
 
@@ -314,11 +316,13 @@ export class ExamCorrect {
                 newEntry.users = response.users;
                 newEntry.results = results;
               }
+              newEntry.message = response.message || null;
               break;
             case 'failure':
               status = STATUS.FAILURE;
               newEntry.users = [user];
               newEntry.results = results;
+              newEntry.message = response.message || null;
               break;
             default:
               // TODO show tooltip with 'invalid response'
@@ -330,6 +334,10 @@ export class ExamCorrect {
           });
           newEntry.status = status || STATUS.FAILURE;
           newEntry.date = response.time || moment().utc().format();
+          if (newEntry.message) {
+            const messageElem = document.createTextNode(newEntry.message);
+            row.querySelector(`.${EXAM_CORRECT_STATUS_CELL_CLASS}`).appendChild(messageElem);
+          }
           savedEntries.push(newEntry);
           this._storageManager.save('entries', savedEntries);
           return;
@@ -468,9 +476,10 @@ export class ExamCorrect {
     }
 
     const statusCell = document.createElement('TD');
-    const statusDiv = document.createElement('DIV');
-    setStatus(statusDiv, rowInfo.status);
-    statusCell.appendChild(statusDiv);
+    statusCell.classList.add(EXAM_CORRECT_STATUS_CELL_CLASS);
+    const statusSymbol = document.createElement('I');
+    setStatus(statusSymbol, rowInfo.status);
+    statusCell.appendChild(statusSymbol);
     cells.set(this._cIndices.get('status'), statusCell);
 
     for (let i = 0; i <= this._lastColumnIndex; i++) {
diff --git a/frontend/src/utils/exam-correct/exam-correct.sass b/frontend/src/utils/exam-correct/exam-correct.sass
index 8e73bd7f7..ed764623d 100644
--- a/frontend/src/utils/exam-correct/exam-correct.sass
+++ b/frontend/src/utils/exam-correct/exam-correct.sass
@@ -34,6 +34,17 @@ table[uw-exam-correct]
         width: max-content
         min-width: max-content
 
+  td.exam-correct--status-cell
+    font-size: .9rem
+    font-weight: 600
+    color: var(--color-fontsec)
+    font-style: italic
+
+    .fas
+      font-size: 1rem
+      text-align: center
+      padding-right: .25rem
+
 
 [uw-exam-correct] input:invalid:not(.no-value)
   border: 2px solid var(--color-error)