Initial commit

2021-06-13 13:51:44 +02:00
commit 15a6bcb07f
13 changed files with 2236 additions and 0 deletions
--- a/public/css/newchat.css
+++ b/public/css/newchat.css
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+  <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 href="./css/newchat.css" rel="stylesheet" type="text/css">
+    <script src="./js/newchat.js"></script>
+    <title>Raspi-Bot</title>
+  </head>
+  <body>
+    <section class="msger">
+      <header class="msger-header">
+        <div class="msger-header-title">
+          <i class="fas fa-comment-alt">Raspberry Pi 4 Chat Bot</i> 
+        </div>
+        <div class="msger-header-options">
+          <span><i class="fas fa-cog"></i></span>
+        </div>
+      </header>
+        
+      <main class="msger-chat"></main>
+        
+      <form class="msger-inputarea" id="test">
+        <input type="text" class="msger-input" placeholder="Enter your message...">
+        <button type="submit" class="msger-send-btn">Send</button>
+      </form>
+    </section>
+  </body>
+</html>
--- a/public/js/newchat.js
+++ b/public/js/newchat.js
@@ -0,0 +1,107 @@
+var msgerChat = null;
+var socketurl = 'ws://127.0.0.1:8181/';
+
+/** Standartnachricht ausgeben und Websocket-Verbindung aufbauen */
+window.onload=function(){
+  /* DOM-Variablen initialisieren */
+  var msgerForm = get(".msger-inputarea");
+  var msgerInput = get(".msger-input");
+  msgerChat = get(".msger-chat");
+
+  /* Standard Wilkommensnachricht ausgeben */
+  appendMessage(BOT_NAME, BOT_IMG, "left", "Hi, wilkommen beim Raspi-Bot!");
+
+  /* Websocket initialisieren */
+  var socket = new WebSocket(socketurl, 'chat');
+  var username = 'u1'
+  socket.onopen = function () {
+    username = "name" + Math.floor(Math.random() * Math.floor(700));
+    socket.send('{"type": "join", "name":" '+username+'"}');
+  }
+
+  /* Aktion bei Nachrichteneingang festlegen */
+  socket.onmessage = function (msg) {
+    var data = JSON.parse(msg.data);
+    if(data.type == 'msg'){
+      if(data.name !== "Raspi-Bot" ){   
+        appendMessage("Nutzer", PERSON_IMG, "right", data.msg);
+      }else{
+        appendMessage(BOT_NAME, BOT_IMG, "left", data.msg);
+      }
+    }
+  };
+
+  /* Aktion zum Absenden einer Nachricht festlegen */ 
+  msgerForm.addEventListener("submit", event => {
+    event.preventDefault();
+    const msgText = msgerInput.value;
+    if (!msgText) return;
+    socket.send('{"type": "msg", "msg": "' + msgerInput.value + '"}');
+    msgerInput.value = "";
+  });
+}
+
+/* Icons und Botname für die Chat-Bubbles */
+const BOT_IMG = "https://image.flaticon.com/icons/svg/327/327779.svg";
+const PERSON_IMG = "https://image.flaticon.com/icons/svg/145/145867.svg";
+const BOT_NAME = "Raspi-Bot";
+
+/**
+ * Neue Nachricht ins HTML hinzufügen
+ * 
+ * @param img for the backround of the bubble
+ * @param side eighter left or right
+ * @param text the message text
+ */
+function appendMessage(name, img, side, text) {
+  const msgHTML = `
+    <div class="msg ${side}-msg">
+      <div class="msg-img" style="background-image: url(${img})"></div>
+
+      <div class="msg-bubble">
+        <div class="msg-info">
+          <div class="msg-info-name">${name}</div>
+          <div class="msg-info-time">${formatDate(new Date())}</div>
+        </div>
+
+        <div class="msg-text">${text}</div>
+      </div>
+    </div>
+  `;
+  msgerChat.insertAdjacentHTML("beforeend", msgHTML);
+  msgerChat.scrollTop += 500;
+}
+
+/**
+ * DOM-Elemente selektieren
+ * 
+ * @param selector der Selektor (z.B. Klasse oder ID)
+ * @param root das Root-Element von dem ausgegangen wird
+ * @returns das DOM-Element
+ */
+function get(selector, root = document) {
+  return root.querySelector(selector);
+}
+
+/**
+ * Formatiert einen Datumswert zum Uhrzeit-Format HH:mm
+ * 
+ * @param {*} date das Datum
+ * @returns die formatierte Uhrzeit
+ */
+function formatDate(date) {
+  const h = "0" + date.getHours();
+  const m = "0" + date.getMinutes();
+  return `${h.slice(-2)}:${m.slice(-2)}`;
+}
+
+/**
+ * Gibt eine zufällige ganze Zahl zwischen min und max zurück
+ * 
+ * @param {*} min die Untergrenze
+ * @param {*} max die Obergrenze
+ * @returns die Zufallszahl
+ */
+function random(min, max) {
+  return Math.floor(Math.random() * (max - min) + min);
+}
--- a/public/pics/pi4.svg
+++ b/public/pics/pi4.svg
--- a/public/pics/pi4_gray.svg
+++ b/public/pics/pi4_gray.svg