Merge branch 'dev' into apis/update-post-users

uchicago-cs · Nov 30, 2023 · 866f0be · 866f0be
2 parents 730f554 + 1d3d636
commit 866f0be
Show file tree

Hide file tree

Showing 4 changed files with 148 additions and 10 deletions.
diff --git a/src/chigame/games/fixtures/tournaments-chat-fixture.json b/src/chigame/games/fixtures/tournaments-chat-fixture.json
diff --git a/src/static/js/getChatUpdate.js b/src/static/js/getChatUpdate.js
@@ -10,9 +10,9 @@ const fakeMessage = [
   ],
   [{ tokenId: 4, updateOn: null, content: "New message!", sender: "Bob" }],
   [{ tokenId: 5, updateOn: 4, content: "Updated message!", sender: "Bob" }],
-  [{ tokenId: 6, updateOn: null, content: "New Message 1", sender: "tester" }],
+  [{ tokenId: 6, updateOn: null, content: "New Message 1", sender: "test1" }],
   [{ tokenId: 7, updateOn: null, content: "New Message 2", sender: "Bob" }],
-  [{ tokenId: 8, updateOn: null, content: "New Message 3", sender: "Bob" }],
+  [{ tokenId: 8, updateOn: null, content: "New Message 3", sender: "test1" }],
   [{ tokenId: 9, updateOn: null, content: "New Message 4", sender: "Bob" }],
   [{ tokenId: 10, updateOn: null, content: "New Message 5", sender: "Bob" }],
   [{ tokenId: 11, updateOn: null, content: "New Message 6", sender: "Bob" }],
@@ -59,20 +59,27 @@ function updateView(tokenId) {
       const message = messagesFromBackend[i];
       if (message.updateOn != null) {
         const messageElement = document.getElementById(message.updateOn);
-        messageElement.textContent = getMessageText(message);
-        messageElement.id = message.tokenId;
+
+        messageElement.firstChild.textContent = getMessageText(message);
+        messageElement.firstChild.id = message.tokenId;
       } else {
         const messageElement = document.createElement("div");
-        messageElement.textContent = getMessageText(message);
+        messageElement.style.display = "flex";
+        var left = document.createElement("div");
+
+        left.textContent = getMessageText(message);
+        left.style.fontSize = "20px";
+
+        messageElement.appendChild(left);
         messageElement.id = message.tokenId;
-        messageElement.style.fontSize = "20px";
+
         if (message.sender == name) {
-          messageElement.classList.add("message");
+          left.classList.add("message");
         }
+
         messageContainer.appendChild(messageElement);
       }
     }
-    // console.log(messagesFromBackend[messagesFromBackend.length - 1].tokenId);
     currentTokenId =
       messagesFromBackend[messagesFromBackend.length - 1].tokenId;
     scrollToBottom();
@@ -93,11 +100,59 @@ document
   .getElementById("messageContainer")
   .addEventListener("click", function (event) {
     if (event.target.classList.contains("message")) {
-      event.target.style.backgroundColor = "#e0e0e0";
-      console.log("Element clicked:", event.target.textContent);
+
+      document.querySelectorAll(".delete-button").forEach((button) => {
+        button.parentNode.style.backgroundColor = "white";
+        button.remove();
+      });
+
+      event.target.parentNode.style.backgroundColor = "#e0e0e0";
+
+      var deleteButton = document.createElement("button");
+      deleteButton.textContent = "Delete";
+      deleteButton.classList.add("delete-button");
+      deleteButton.style.marginLeft = "10px";
+
+      deleteButton.addEventListener("click", function () {
+        const tokenId = event.target.parentNode.id;
+        deleteMessage(tokenId);
+        deleteButton.parentNode.style.backgroundColor = "white";
+        deleteButton.remove();
+      });
+
+      event.target.parentNode.appendChild(deleteButton);
+
     }
   });
 
+function deleteMessage(tokenId){
+  const email = document.getElementById("email").value;
+  const tID = document.getElementById("tID").value;
+  const csrfToken = document.getElementsByName('csrfmiddlewaretoken')[0].value;
+
+  if (message != "") {
+
+      var messageData ={
+          "sender": email,
+          "content": null,
+          "update_on": tokenId,
+          "tournament": tID
+      }
+
+      fetch("http://127.0.0.1:8000/api/tournaments/chat/", {
+          method: "POST",
+          headers: {
+              'Content-Type': 'application/json',
+              'X-CSRFToken': csrfToken
+          },
+          body: JSON.stringify(messageData),
+      })
+
+  }
+
+  console.log(messageData);
+}
+
 updateView(currentTokenId);
 
 setInterval(() => {

diff --git a/src/static/js/sendMessage.js b/src/static/js/sendMessage.js
@@ -0,0 +1,29 @@
+function sendMessage(){
+    var message = document.getElementById("message").value;
+    const email = document.getElementById("email").value;
+    const tID = document.getElementById("tID").value;
+    const csrfToken = document.getElementsByName('csrfmiddlewaretoken')[0].value;
+
+    if (message != "") {
+
+        var messageData ={
+            "sender": email,
+            "content": message,
+            "update_on": null,
+            "tournament": tID
+        }
+
+        fetch("http://127.0.0.1:8000/api/tournaments/chat/", {
+            method: "POST",
+            headers: {
+                'Content-Type': 'application/json',
+                'X-CSRFToken': csrfToken
+            },
+            body: JSON.stringify(messageData),
+        })
+
+    }
+
+    console.log(messageData);
+    document.getElementById("message").value = "";
+}
diff --git a/src/templates/tournaments/tournament_chat.html b/src/templates/tournaments/tournament_chat.html
@@ -17,6 +17,43 @@ <h1>Chat for Match {{ tournament.pk }}</h1>
       flex-direction: column;
     }
 
+    #sendContainer {
+      width: 50%;
+      left: 50%;
+      top: 85%;
+      transform: translate(-50%, 0);
+      position: absolute;
+      height: 8%;
+      display: flex;
+      justify-content: space-between;
+      font-family: sans-serif;
+    }
+
+    #sendContainer input {
+      width: 80%;
+      height: 100%;
+      padding-left: 10px;
+      border-top-left-radius: 5px;
+      border-bottom-left-radius: 5px;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      border: 0.5px solid black;
+      font-family: sans-serif;
+      color: black;
+    }
+
+    #sendContainer button {
+      width: 20%;
+      height: 100%;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      border-top-right-radius: 5px;
+      border-bottom-right-radius: 5px;
+      border: 0.5px solid black;
+      padding: 0;
+      font-family: sans-serif;
+    }
+
     h1 {
       text-align: center;
     }
@@ -25,8 +62,24 @@ <h1>Chat for Match {{ tournament.pk }}</h1>
          id="name"
          name="variable"
          value="{{ request.user.name }}" />
+  <input type="hidden"
+         id="email"
+         name="variable"
+         value="{{ request.user.email }}" />
+  <input type="hidden" id="tID" name="variable" value="{{ tournament.pk }}" />
   <div id="messageContainer">
     <!-- Messages will be displayed here -->
   </div>
   <script src = {% static 'js/getChatUpdate.js' %}></script>
+  <div id="sendContainer">
+    {% csrf_token %}
+    <! -- Input field for message -->
+    <input type="text"
+           name="message"
+           id="message"
+           placeholder="Type your message here..." />
+    <! -- Button to send message -->
+    <button onclick="sendMessage()">Send</button>
+  </div>
+  <script src = {% static 'js/sendMessage.js' %}></script>
 {% endblock content %}