chat update

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")

static/css/style.css

@@ -186,4 +186,34 @@ a {
 
            
             
-        
+        
+            #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;
+            }

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>

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");

templates/message.html

@@ -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>

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">

test/test.py

@@ -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()