Did some code splitting and added Server Listing

Split code into different modules
Added method to fetch server list from remote server, and to populate this into the server list of the UI

4 files changed, 113 insertions, 28 deletions

diff --git a/WebInterface/NodeJSServer/src/index.js b/WebInterface/NodeJSServer/src/index.js
index f1a0120..d1f925d 100644
--- a/WebInterface/NodeJSServer/src/index.js
+++ b/WebInterface/NodeJSServer/src/index.js
@@ -1,6 +1,6 @@
 import Backdrop from './modules/ui/backdrop.js';
-import * as signalR from '@aspnet/signalr';
 import BannerController from './modules/ui/notification-banner.js';
+import ServerClient from './modules/server-client.js'
 
 let backdrop = new Backdrop('menu', 'front-layer', 'show-menu');
 backdrop.register();
@@ -9,30 +9,7 @@ let notifications = new BannerController('notifications',
     'banner-info', 'dismiss-banner');
 notifications.register();
 
-const connection = new signalR.HubConnectionBuilder()
-    .withUrl("http://89.183.117.197:5000/chatHub")
-    .configureLogging(signalR.LogLevel.Information)
-    .build();
+let client = new ServerClient('http://89.183.117.197:5000/chatHub', 'server-list', true);
+document.getElementById('refresh-button')
+    .addEventListener('click', client.loadServers.bind(client));
 
-connection.on('ReceiveMessage', (user, message) => {
-  let msg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-  let encodedMsg = user + " says " + msg;
-  let li = document.createElement("div");
-  li.classList.add('server');
-  li.textContent = encodedMsg;
-  document.getElementById('server-list').appendChild(li);
-});
-
-document.getElementById('new-game-button').addEventListener('click', () => {
-  let method = window.prompt('Please enter method:', 'SendMessage');
-  let user = window.prompt('Please enter user:', 'Default');
-  let message = window.prompt('Please enter message:', 'Super duper Nachricht');
-  connection.invoke(method, user, message).catch(function (err) {
-    return console.error(err.toString());
-  });
-  event.preventDefault();
-}),
-
-connection.start()
-    .then(() => console.log('Connected'))
-    .catch(err => console.error(err.toString()));
diff --git a/WebInterface/NodeJSServer/src/modules/server-client.js b/WebInterface/NodeJSServer/src/modules/server-client.js
new file mode 100644
index 0000000..8cf28f6
--- /dev/null
+++ b/WebInterface/NodeJSServer/src/modules/server-client.js
@@ -0,0 +1,67 @@
+import * as signalR from '@aspnet/signalr';
+import ServerListing from './ui/server-listing.js';
+
+export default class ServerClient {
+  constructor(url, serverListingId, debug = false) {
+    const connectionBuilder = new signalR.HubConnectionBuilder()
+        .withUrl(url)
+
+    if (debug) {
+      connectionBuilder.configureLogging(signalR.LogLevel.Debug);
+    } else {
+      connectionBuilder.configureLogging(signalR.LogLevel.Error);
+    }
+
+    this.connection = connectionBuilder.build();
+    this.connection.start()
+        .then(() => this.loadServers())
+        .catch(() => err => console.error(err.toString()));
+
+    this.refreshing = false;
+
+    this.serverListing = new ServerListing(serverListingId);
+  }
+
+  loadServers() {
+    if (this.refreshing) return;
+    this.connection.on('ListGroups', (groups) => {
+      console.log(groups)
+      this.serverListing.flushElements();
+      this.serverListing.addElements(groups);
+      this.connection.off('ListGroups');
+
+      this.refreshing = false;
+    });
+
+    this.connection.invoke('GetGroups')
+        .catch(err => {
+          this.refreshing = false;
+          console.error(err.toString())
+        });
+    this.refreshing = true;
+  }
+
+  createServer(){
+
+  }
+
+  messageHandling(){
+    this.connection.on('ReceiveMessage', (user, message) => {
+      let msg = message.replace(/&/g, "&amp;")
+          .replace(/</g, "&lt;")
+          .replace(/>/g, "&gt;");
+      let encodedMsg = user + " sagt:  " + msg;
+    });
+  }
+}
+
+
+
+// connection.on('ReceiveMessage', (user, message) => {
+//   let msg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+//   let encodedMsg = user + " says " + msg;
+//   let li = document.createElement("div");
+//   li.classList.add('server');
+//   li.textContent = encodedMsg;
+//   document.getElementById('server-list').appendChild(li);
+// });
diff --git a/WebInterface/NodeJSServer/src/modules/ui/server-listing.js b/WebInterface/NodeJSServer/src/modules/ui/server-listing.js
new file mode 100644
index 0000000..be66573
--- /dev/null
+++ b/WebInterface/NodeJSServer/src/modules/ui/server-listing.js
@@ -0,0 +1,42 @@
+export default class ServerListing {
+  constructor(serverListId) {
+    this.serverListing = document.getElementById(serverListId);
+  }
+
+  flushElements() {
+    this.serverListing.innerHTML = '';
+  }
+
+  addElements(array) {
+    for (let server of array) {
+      const name = server['name'];
+      const playerList = server['users'];
+      const playerAmount = playerList.length;
+
+      let serverDiv = document.createElement('div');
+      let nameSpan = document.createElement('span');
+      let onlineDot = document.createElement('div');
+      let playerCountSpan = document.createElement('span');
+      let playerCountStaticSpan = document.createElement('span');
+      let joinButton = document.createElement('button');
+      serverDiv.className = 'server';
+      nameSpan.className = 'server-name';
+      onlineDot.className = 'player-count-dot';
+      playerCountSpan.className = 'player-count';
+      playerCountStaticSpan.className = 'player-count-static';
+      joinButton.className = 'btn join-btn';
+      joinButton.id = 'join';
+      nameSpan.textContent = name;
+      playerCountSpan.textContent = playerAmount;
+      playerCountStaticSpan.textContent = 'Spieler online';
+      joinButton.textContent = 'Beitreten';
+
+      serverDiv.appendChild(nameSpan);
+      serverDiv.appendChild(onlineDot);
+      serverDiv.appendChild(playerCountSpan);
+      serverDiv.appendChild(playerCountStaticSpan);
+      serverDiv.appendChild(joinButton);
+      this.serverListing.appendChild(serverDiv);
+    }
+  }
+}
diff --git a/WebInterface/NodeJSServer/src/style/index.scss b/WebInterface/NodeJSServer/src/style/index.scss
index dc225b0..83f9f0a 100644
--- a/WebInterface/NodeJSServer/src/style/index.scss
+++ b/WebInterface/NodeJSServer/src/style/index.scss
@@ -137,7 +137,6 @@ body {
       margin: 0;
       padding: 16px;
       text-align: center;
-      z-index: 2;
       flex-grow: 1;
 
       @media (min-width: 450px) {