implement feedback feature

app/app.py

@@ -5,6 +5,7 @@ from flask import jsonify
 import requests
 
 app = Flask(__name__)
+feedback_file = "../data/feedback.txt"
 
 @app.route('/')
 def home():
@@ -32,5 +33,21 @@ def sendmessage():
         
         return jsonify(responses)
 
+@app.route('/feedback', methods=['POST'])
+def feedback():
+    timestamp = request.form['timestamp']
+    name = request.form['name']
+    feedback = request.form['feedback']
+
+    input = [
+        'timestamp:' + str(timestamp) + '\n',
+        'name:' + str(name) + '\n',
+        'feedback:' + str(feedback) + '\n\n'
+    ]
+    with open(feedback_file, 'a') as file:
+        file.writelines(input)
+
+    return "feedback received"
+
 if __name__ == '__main__':
     app.run(debug=True)

app/static/css/index.css

@@ -96,7 +96,7 @@ button {
     top: 0;
     right: 0;
     position: fixed;
-    padding-right: 150px;
+    padding-right: 50px;
     width: 500px;
     padding-top: 50px;
 }

app/static/javascript/frontend.js

@@ -49,6 +49,37 @@ function sendMessage() {
     }
 };
 
+function expandFeedback() {
+    let feedback = document.getElementById('feedback-expandable');
+    if(feedback.style.display === "none")
+        feedback.style.display = "block"
+    else
+        feedback.style.display = "none"
+}
+
+function saveFeedback() {
+    const name = document.getElementById("feedback-name").value;
+    const feedback = document.getElementById("feedback-content").value;
+    if(name!=="" && feedback!=="") {
+        document.getElementById("feedback-name").value = "";
+        document.getElementById("feedback-content").value = "";
+    }
+    const timestamp = new Date().toISOString();
+
+    const message = new URLSearchParams;
+    message.append("timestamp", timestamp);
+    message.append("name", name);
+    message.append("feedback", feedback);
+
+    fetch("http://localhost:5000/feedback", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/x-www-form-urlencoded"
+        },
+        body: message.toString()
+    });
+}
+
 function checkKeyInput(event) {
     if(event.key === 'Enter')
         sendMessage();

app/templates/index.html

@@ -28,7 +28,13 @@
         </div>
 
         <div class="feedback">
-            <button>Feedback</button>
+            <button style="margin-right: 25%;" onclick="expandFeedback()">Feedback</button>
+            <br><br><br><br>
+            <div id="feedback-expandable" style="display: none;">
+                <input id="feedback-name" type="text" placeholder="Your name" style="float:right">
+                <input id="feedback-content" type="text" placeholder="Your feedback" style="float:right">
+                <button style="float:right; margin-top: 10px; width: 74%;" onclick="saveFeedback()">Submit</button>
+            </div>
         </div>
         
         <script src="static/javascript/frontend.js" type="application/javascript"></script>