From cbc48d2c545fc02904c7c934392ece01dc8bfa80 Mon Sep 17 00:00:00 2001
From: fingadumbledore <fingadumbledore@gmail.com>
Date: Mon, 30 Jan 2023 07:58:37 +0100
Subject: [PATCH] chat update

---
 test/database.py => database.py               |  0
 server.py                                     | 27 +++++++++
 static/css/style.css                          | 32 +++++++++-
 static/js/chat.js                             | 60 ++++++++++++++++++-
 .../index.html => templates/chat.html         | 47 ++++++++++++++-
 templates/message.html                        | 12 ----
 {test/templates => templates}/messages.html   |  0
 templates/session.html                        | 16 +----
 test/test.py                                  | 34 -----------
 9 files changed, 164 insertions(+), 64 deletions(-)
 rename test/database.py => database.py (100%)
 rename test/templates/index.html => templates/chat.html (54%)
 delete mode 100644 templates/message.html
 rename {test/templates => templates}/messages.html (100%)
 delete mode 100644 test/test.py

diff --git a/test/database.py b/database.py
similarity index 100%
rename from test/database.py
rename to database.py
diff --git a/server.py b/server.py
index 263dc45..f643014 100644
--- a/server.py
+++ b/server.py
@@ -657,6 +657,33 @@ def server():
             return "File uploaded successfully!"
         return "No file found"
 
+    @app.route("/send", methods=["POST"])
+    def send():
+        message = request.form["message"]
+        username = request.form["username"]
+        
+        conn = sqlite3.connect("chat.db")
+        c = conn.cursor()
+        c.execute("INSERT INTO messages (username, message) VALUES (?, ?)", (username, message))
+        conn.commit()
+        conn.close()
+        
+        return render_template("index.html")
+
+    @app.route("/get")
+    def get():
+        conn = sqlite3.connect("chat.db")
+        c = conn.cursor()
+        c.execute("SELECT username, message, timestamp FROM messages")
+        messages = c.fetchall()
+        conn.close()
+        
+        return render_template("messages.html", messages=messages)
+
+    @app.route("/chat")
+    def chat():
+        return render_template("chat.html")
+
     @app.errorhandler(404)
     def page_not_found(e):
         error_log("called non-existing page")
diff --git a/static/css/style.css b/static/css/style.css
index 7cffeae..150b4b3 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -186,4 +186,34 @@ a {
 
            
             
-        
\ No newline at end of file
+        
+            #messages {
+              width: 50%;
+              height: 50%;
+              overflow-y: scroll;
+              border: 1px solid gray;
+              padding: 10px;
+              margin-bottom: 10px;
+              background-color: white;
+              border-radius: 10px;
+            }
+            
+            .message {
+              margin-bottom: 10px;
+              animation: fadein 0.5s;
+            }
+            
+            @keyframes fadein {
+              from { opacity: 0; }
+              to { opacity: 1; }
+            }
+            
+            .username {
+              font-weight: bold;
+              color: blue;
+            }
+            
+            .timestamp {
+              font-size: 12px;
+              color: gray;
+            }
\ No newline at end of file
diff --git a/static/js/chat.js b/static/js/chat.js
index b5f3702..1a51b31 100644
--- a/static/js/chat.js
+++ b/static/js/chat.js
@@ -1,4 +1,4 @@
-window.onload = function() {
+/*window.onload = function() {
   const username = document.getElementById('userNameEntry').innerHTML;
   const ws = new WebSocket('ws://localhost:5000')
   ws.addEventListener('open', (e) => {
@@ -13,4 +13,62 @@ window.onload = function() {
       'username': username
     }))
   } 
+}*/
+
+<script>
+let unread = 0;
+
+function updateTitle() {
+  document.title = "Chat (" + unread + ")";
 }
+
+function addMessage(username, message, timestamp) {
+  let messagesDiv = document.getElementById("messages");
+  let messageDiv = document.createElement("div");
+  messageDiv.classList.add("message");
+  let usernameSpan = document.createElement("span");
+  usernameSpan.classList.add("username");
+  usernameSpan.innerText = username;
+  let messageSpan = document.createElement("span");
+  messageSpan.innerText = message.substring(0, 80);
+  let timestampSpan = document.createElement("span");
+  timestampSpan.classList.add("timestamp");
+  timestampSpan.innerText = timestamp;
+  messageDiv.appendChild(usernameSpan);
+  messageDiv.appendChild(document.createTextNode(": "));
+  messageDiv.appendChild(messageSpan);
+  messageDiv.appendChild(document.createElement("br"));
+  messageDiv.appendChild(timestampSpan);
+  messagesDiv.appendChild(messageDiv);
+  messagesDiv.scrollTop = messagesDiv.scrollHeight;
+  unread += 1;
+  updateTitle();
+}
+
+let inputField = document.getElementById("input");
+inputField.addEventListener("input", function() {
+  let value = inputField.value;
+  if (value.length > 80) {
+    inputField.value = value.substring(0, 80);
+  }
+});
+
+function getMessages() {
+var xhr = new XMLHttpRequest();
+xhr.open("GET", "/get");
+xhr.onload = function() {
+  document.getElementById("messages").innerHTML = xhr.responseText;
+};
+xhr.send();
+}
+
+function sendMessage() {
+var message = document.getElementById("message").value;
+var username = document.getElementById("username").value;
+
+var xhr = new XMLHttpRequest();
+xhr.open("POST", "/send");
+xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+xhr.send("message=" + message + "&username=" + username);
+}
+</script>
diff --git a/test/templates/index.html b/templates/chat.html
similarity index 54%
rename from test/templates/index.html
rename to templates/chat.html
index c7cbbde..bf84de5 100644
--- a/test/templates/index.html
+++ b/templates/chat.html
@@ -6,7 +6,7 @@
           flex-direction: column;
           align-items: center;
           font-family: Arial, sans-serif;
-          background-color: lightblue;
+          background-image: linear-gradient(to right, rgb(38, 134, 62), rgb(89, 89, 175))
         }
         
         #messages {
@@ -22,6 +22,12 @@
         
         .message {
           margin-bottom: 10px;
+          animation: fadein 0.5s;
+        }
+        
+        @keyframes fadein {
+          from { opacity: 0; }
+          to { opacity: 1; }
         }
         
         .username {
@@ -53,7 +59,44 @@
         }
       </style>
       
-    <script>
+      <script>
+        let unread = 0;
+        
+        function updateTitle() {
+          document.title = "Chat (" + unread + ")";
+        }
+        
+        function addMessage(username, message, timestamp) {
+          let messagesDiv = document.getElementById("messages");
+          let messageDiv = document.createElement("div");
+          messageDiv.classList.add("message");
+          let usernameSpan = document.createElement("span");
+          usernameSpan.classList.add("username");
+          usernameSpan.innerText = username;
+          let messageSpan = document.createElement("span");
+          messageSpan.innerText = message.substring(0, 80);
+          let timestampSpan = document.createElement("span");
+          timestampSpan.classList.add("timestamp");
+          timestampSpan.innerText = timestamp;
+          messageDiv.appendChild(usernameSpan);
+          messageDiv.appendChild(document.createTextNode(": "));
+          messageDiv.appendChild(messageSpan);
+          messageDiv.appendChild(document.createElement("br"));
+          messageDiv.appendChild(timestampSpan);
+          messagesDiv.appendChild(messageDiv);
+          messagesDiv.scrollTop = messagesDiv.scrollHeight;
+          unread += 1;
+          updateTitle();
+        }
+        
+        let inputField = document.getElementById("input");
+        inputField.addEventListener("input", function() {
+          let value = inputField.value;
+          if (value.length > 80) {
+            inputField.value = value.substring(0, 80);
+          }
+        });
+      
       function getMessages() {
         var xhr = new XMLHttpRequest();
         xhr.open("GET", "/get");
diff --git a/templates/message.html b/templates/message.html
deleted file mode 100644
index f20ccfc..0000000
--- a/templates/message.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="de">
-    <head>
-        <meta charset="UTF-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="stylesheet" href="{{ url_for('static', filename='../static/css/style.css') }}">
-        <title>Chat</title>
-    </head>
-    <body>
-    </body>
-</html>
\ No newline at end of file
diff --git a/test/templates/messages.html b/templates/messages.html
similarity index 100%
rename from test/templates/messages.html
rename to templates/messages.html
diff --git a/templates/session.html b/templates/session.html
index 11cbad4..2222a29 100644
--- a/templates/session.html
+++ b/templates/session.html
@@ -206,20 +206,8 @@
 		</div>
 		<div hidden class="tmplt_tab" id="_chat">
 			<center>
-			<iframe id="ifr" src="/message" width="800" height="450" frameBorder="0"></iframe>
-			<div id="userNameEntryDiv">
-				<input type="text" placeholder="Username..." id="userNameEntry">
-				<button id="chatUsernameButton" onclick="join_chat()">Join chat</button>
-			</div>
-			<form class="modal-content animate" action="http://127.0.0.1:5000/chat" method="POST">
-				<div class="container">
-					<input type="text" placeholder="Hallo Welt" name="message" required>
-					<button type="submit">
-						&#10148;
-					</button>
-				</div>
-
-			</form>
+				
+				<iframe id="ifr" src="/chat" width="800" height="450" frameBorder="0"></iframe>
 		</center>
 		</div>
 		<div hidden class="tmplt_tab" id="_musik">
diff --git a/test/test.py b/test/test.py
deleted file mode 100644
index 42d8303..0000000
--- a/test/test.py
+++ /dev/null
@@ -1,34 +0,0 @@
-from flask import Flask, request, render_template
-import sqlite3
-
-app = Flask(__name__)
-
-@app.route("/")
-def index():
-    return render_template("index.html")
-
-@app.route("/send", methods=["POST"])
-def send():
-    message = request.form["message"]
-    username = request.form["username"]
-    
-    conn = sqlite3.connect("chat.db")
-    c = conn.cursor()
-    c.execute("INSERT INTO messages (username, message) VALUES (?, ?)", (username, message))
-    conn.commit()
-    conn.close()
-    
-    return render_template("index.html")
-
-@app.route("/get")
-def get():
-    conn = sqlite3.connect("chat.db")
-    c = conn.cursor()
-    c.execute("SELECT username, message, timestamp FROM messages")
-    messages = c.fetchall()
-    conn.close()
-    
-    return render_template("messages.html", messages=messages)
-
-if __name__ == "__main__":
-    app.run()