Initial commit

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);
+}