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

1 files changed, 42 insertions, 0 deletions

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