diff --git a/gemeinsamforschen/src/main/java/unipotsdam/gf/modules/peer2peerfeedback/peerfeedback/Model/Peer2PeerFeedback.java b/gemeinsamforschen/src/main/java/unipotsdam/gf/modules/peer2peerfeedback/peerfeedback/Model/Peer2PeerFeedback.java
index cb3aeb4acb924d76c69818f2237e082ecacaca11..3974138735cb7cba9b824310fcdad5b2eee9e079 100644
--- a/gemeinsamforschen/src/main/java/unipotsdam/gf/modules/peer2peerfeedback/peerfeedback/Model/Peer2PeerFeedback.java
+++ b/gemeinsamforschen/src/main/java/unipotsdam/gf/modules/peer2peerfeedback/peerfeedback/Model/Peer2PeerFeedback.java
@@ -2,6 +2,7 @@ package unipotsdam.gf.modules.peer2peerfeedback.peerfeedback.Model;
import unipotsdam.gf.core.management.user.User;
import unipotsdam.gf.modules.peer2peerfeedback.Category;
+import static unipotsdam.gf.view.MarkdownUtils.convertMarkdownToHtml;
import java.io.File;
@@ -25,7 +26,7 @@ public class Peer2PeerFeedback{
this.id = id;
this.timestamp = timestamp;
this.category = category;
- this.text = text;
+ this.text = convertMarkdownToHtml(text);
this.sender = sender;
this.receiver = receiver;
this.filename = filename;
diff --git a/gemeinsamforschen/src/main/webapp/assets/css/viewfeedback.css b/gemeinsamforschen/src/main/webapp/assets/css/viewfeedback.css
new file mode 100644
index 0000000000000000000000000000000000000000..625f097619306e338664716c6fd15adac0e219c8
--- /dev/null
+++ b/gemeinsamforschen/src/main/webapp/assets/css/viewfeedback.css
@@ -0,0 +1,42 @@
+.feedback-container {
+ border: 2px solid #dedede;
+ background-color: #f1f1f1;
+ border-radius: 5px;
+ padding: 10px;
+ margin: 10px 0;
+}
+
+.darker {
+ border-color: #ccc;
+ background-color: #ddd;
+}
+
+.feedback-container::after {
+ content: "";
+ clear: both;
+ display: table;
+}
+
+.feedback-container img {
+ float: left;
+ max-width: 60px;
+ width: 100%;
+ margin-right: 20px;
+ border-radius: 50%;
+}
+
+.feedback-container img.right {
+ float: right;
+ margin-left: 20px;
+ margin-right:0;
+}
+
+.time-right {
+ float: right;
+ color: #aaa;
+}
+
+.time-left {
+ float: left;
+ color: #999;
+}
\ No newline at end of file
diff --git a/gemeinsamforschen/src/main/webapp/assets/js/givepeerfeedback.js b/gemeinsamforschen/src/main/webapp/assets/js/givepeerfeedback.js
index ba9c45d03d8e8ccd85b945b03559dad1fa852b76..58721539a34d8a5af868d09fd6d25c6e87d8061f 100644
--- a/gemeinsamforschen/src/main/webapp/assets/js/givepeerfeedback.js
+++ b/gemeinsamforschen/src/main/webapp/assets/js/givepeerfeedback.js
@@ -61,13 +61,21 @@ $(document).ready(function() {
'</div><br><br>';*/
var newdiv = document.createElement("div");
- var newcontent = document.createTextNode(data[feedback].text);
- newdiv.appendChild(newcontent); // füge den Textknoten zum neu erstellten div hinzu.
+
+
+ //newdiv.innerHTML = data[feedback].text;
+ //newdiv.append(data[feedback].text);
+ newdiv.insertAdjacentHTML('beforeend',data[feedback].text);
+ newdiv.className = "feedback-container";
+ //var text = convertMarkdownToHtml(data[feedback].text);
+ //var newcontent = document.createTextNode(data[feedback].text);
+ //newdiv.appendChild(newcontent); // füge den Textknoten zum neu erstellten div hinzu.
// füge das neu erstellte Element und seinen Inhalt ins DOM ein
var currentdiv = document.getElementById("div1");
currentdiv.appendChild(newdiv);
//document.body.insertBefore(newDiv, currentDiv);
+ //document.getElementById("div").innerHTML = data[feedback].text;
//$('.Peerfeedback').append(feedbackString)
}};
diff --git a/gemeinsamforschen/src/main/webapp/pages/viewfeedback.jsp b/gemeinsamforschen/src/main/webapp/pages/viewfeedback.jsp
index f3b302b5a26090916c3afdb317a540c066d35408..d444f858ad4ac0803d6d99e233a90ed4e809144b 100644
--- a/gemeinsamforschen/src/main/webapp/pages/viewfeedback.jsp
+++ b/gemeinsamforschen/src/main/webapp/pages/viewfeedback.jsp
@@ -7,6 +7,7 @@
<html>
<head>
+ <link rel="stylesheet" href="../assets/css/viewfeedback.css">
<omniDependencies:omniDependencies/>
<script src="../assets/js/utility.js"></script>
<script src="../assets/js/project-student.js"></script>
@@ -42,28 +43,66 @@
<div>
<table>
<tr>
+ <tr>
+ <th>Feedback Nachrichten von Student X</th>
+ </tr>
- <td id="Peerfeedback">
- <h2>Feedback Nachrichten von Student X</h2>
- <%--<iframe width="90%" height="200%" src="http://rocketchat.westeurope.cloudapp.azure.com/channel/general?layout=embedded"></iframe>
- --%>
- <%--<p id="view"></p> type="hidden"--%>
- <input type="hidden" name="peerfeedbackID" id="peerfeedbackID-input" value=""/>
+ <td id="filter-feedbacks">
- <div id="div1"></div>
- <button class="btn btn-secondary" onclick="goBack()">Zurück</button>
+ <%--<iframe width="90%" height="200%" src="http://rocketchat.westeurope.cloudapp.azure.com/channel/general?layout=embedded"></iframe>
+ --%>
+ <%--<p id="view"></p> type="hidden"--%>
+ <input type="hidden" name="peerfeedbackID" id="peerfeedbackID-input" value=""/>
+ <div style="height: 100px; overflow: auto">
+ <div class="feedback-container">
+ <p>Sender</p>
+ <span class="time-right">11:00</span>
+ </div>
+ </div>
- <script>
- function goBack() {
- window.history.back();
- }
- </script>
+ </td>
+
+
+ <td id="view-feedbacks">
+
+ <div style="height: 300px; overflow: auto">
+
+ <div class="feedback-container">
+ <p>Hello. How are you today?</p>
+ <span class="time-right">11:00</span>
+ </div>
+
+ <div class="feedback-container">
+ <p>Hey! I'm fine. Thanks for asking!</p>
+ <span class="time-left">11:01</span>
+ </div>
+
+ <div class="feedback-container">
+ <p>Sweet! So, what do you wanna do today?</p>
+ <span class="time-right">11:02</span>
+ </div>
+
+ <div id="div1"></div>
+
+ </div>
+ </td>
+
+
+ <button class="btn btn-secondary" onclick="goBack()">Zurück</button>
+
+ <script>
+ function goBack() {
+ window.history.back();
+ }
+ </script>
</td>
+
+
<td id="chat">
<div class="card">
<div class="card-header">