Success mesage on feedback submit (#6)

- Success mesage on feedback submit (b7f6d8bf7e882f5c21c6415608977b5e5d6567de)
- Update chat_application/main.py (fc39adf31ea34f60f39b2a10503357d269d41d1f)
- Update chat_application/static/styles/styles.css (2bee08e65bb19df0147edc8b14b8d426282d493c)
- Update chat_application/templates/room.html (e571747bcf09e7aa757b3ea29f9443e124648afe)

chat_application/main.py

@@ -647,8 +647,6 @@ def choose():
         "created_at": datetime.utcnow(),
         # user identity
         "user_id": user_id,
-        # empty feedback history
-        "feedbacks": [],
     })
 
     session['room'] = room_id
@@ -842,9 +840,12 @@ def handle_message(payload):
         {"_id": room},
         {"$push": {"feedback_responses": db_feedback}}
     )
-
-    #LR TODO: add success/faillure msg and confirmation
-
+    
+    if result:
+        print(result)
+        if result.modified_count > 0:
+            return {'status':'True'}
+    return {'ststus':'False'}
 
 @socketio.on('disconnect')
 def handle_disconnect():

chat_application/static/styles/styles.css

@@ -462,12 +462,12 @@ hr {
   transition: 0.15s ease-in-out;
 }
 
-#abortYesBtn, #abortYesBtn-pre {
+#abortYesBtn, #abortYesBtn-pre,  #cancelFeedbackStatusBtn2 {
   background: #d9534f;
   color: white;
 }
 
-#abortYesBtn:hover, #abortYesBtn-pre:hover {
+#abortYesBtn:hover, #abortYesBtn-pre:hover,  #cancelFeedbackStatusBtn2:hover {
   background: #c9302c;
 }
 
@@ -498,12 +498,12 @@ hr {
   background: #ccc;
 }
 
-#welcomeOkBtn, #timerOkBtn, #submitFeedbackBtn {
+#welcomeOkBtn, #timerOkBtn, #submitFeedbackBtn, #cancelFeedbackStatusBtn {
   background: green;
   color: white;
 }
 
-#welcomeOkBtn:hover, #timerOkBtn:hover, #submitFeedbackBtn:hover {
+#welcomeOkBtn:hover, #timerOkBtn:hover, #submitFeedbackBtn:hover, #cancelFeedbackStatusBtn:hover {
   background: #016601;
 }
 

chat_application/templates/room.html

@@ -30,7 +30,7 @@
     	<h2 id="room-code-display">Topic: <span class="topic-title">{{ topic_info.title }}</span></h2>
       </div>
       <div class="topic-header-buttons">
-        <button id="feedback-btn">Provide Feedback</button>
+        <button id="feedback-btn">Share Feedback and Report Bugs</button>
         <button id="end-exp-btn">End Chat Session</button>
         <button id="abort-exp-btn">Abort Experiment</button>
       </div>
@@ -73,7 +73,7 @@
             <h3>Feedback</h3>
             <form id="feedback-form">
                  <div class="feedback-col">
-                   <label for="enter-feedback">Enter Feedback</label>
+                   <label for="enter-feedback">Tell us if you noticed something confusing, unexpected, or not working.</label>
                     <textarea id="enter-feedback" name="feedback"></textarea>
                   </div>
                   <br>
@@ -84,6 +84,23 @@
               </form>
           </div>
       </div>
+
+    <div id="feedback-status-confirm" class="modal">
+      <div class="modal-content">
+        <p>Feedback submitted.</p>
+        <div class="modal-buttons">
+          <button class="modal-btn" id="cancelFeedbackStatusBtn">Ok</button>
+        </div>
+      </div>
+    </div>
+    <div id="feedback-status-fail" class="modal">
+      <div class="modal-content">
+        <p>Feedback failed to submit.</p>
+        <div class="modal-buttons">
+          <button class="modal-btn" id="cancelFeedbackStatusBtn2">Ok</button>
+        </div>
+      </div>
+    </div>
   </div>
   <div id="chat-room-widget">
     <div id="msgs-container">
@@ -251,6 +268,8 @@
     //handler for feedback modal popup
     let feedbackModal = document.getElementById("feedback-modal");
     let form = document.getElementById("feedback-form");
+    let feedbackConfirm = document.getElementById("feedback-status-confirm");
+    let feedbackFail = document.getElementById("feedback-status-fail");
     document.getElementById("feedback-btn").onclick = function () {
       feedbackModal.style.display = "block";
     };
@@ -258,6 +277,16 @@
       feedbackModal.style.display = "none";
     };
 
+    document.getElementById("cancelFeedbackStatusBtn").onclick = function () {
+      feedbackConfirm.style.display = "none";
+      feedbackFail.style.display = "none";
+    };
+    
+    document.getElementById("cancelFeedbackStatusBtn2").onclick = function () {
+      feedbackConfirm.style.display = "none";
+      feedbackFail.style.display = "none";
+    };
+
     //override form function to instead emit save feedback event
     form.addEventListener("submit", function (e) {
         e.preventDefault();
@@ -266,8 +295,13 @@
         const feedback = data.get("feedback")?.trim();
 
         if (!feedback) return;
-        socketio.emit("feedback_given", { feedback });
-
+      
+        socketio.emit("feedback_given", { feedback }, (response) => {
+          if (response?.status === "True" || response?.status === true) {
+            feedbackConfirm.style.display = "block";
+          }
+        });
+      
         form.reset();
         document.getElementById("feedback-modal").style.display = "none";
     });