From abd51697be6ca4580c15929ccb2569a1e984ef88 Mon Sep 17 00:00:00 2001 From: TrueKuehli Date: Sat, 29 Sep 2018 21:51:02 +0200 Subject: 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 --- .../NodeJSServer/src/modules/server-client.js | 67 ++++++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 WebInterface/NodeJSServer/src/modules/server-client.js (limited to 'WebInterface/NodeJSServer/src/modules/server-client.js') 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, "&") + .replace(//g, ">"); + let encodedMsg = user + " sagt: " + msg; + }); + } +} + + + +// connection.on('ReceiveMessage', (user, message) => { +// let msg = message.replace(/&/g, "&").replace(//g, ">"); +// let encodedMsg = user + " says " + msg; +// let li = document.createElement("div"); +// li.classList.add('server'); +// li.textContent = encodedMsg; +// document.getElementById('server-list').appendChild(li); +// }); -- cgit v1.2.3-54-g00ecf From 330c49947c82d3d66f65f03abcad75d57d3dc121 Mon Sep 17 00:00:00 2001 From: TrueKuehli Date: Sat, 29 Sep 2018 21:52:43 +0200 Subject: Started work on Modals Started work on the modals, that will be used as dialog boxes to create a new server, or to log into an existing one with the required password. Currently just calls the creation method at start, and with not much content, which will be added later. --- WebInterface/NodeJSServer/src/index.js | 2 ++ .../NodeJSServer/src/modules/server-client.js | 1 + WebInterface/NodeJSServer/src/modules/ui/modal.js | 39 ++++++++++++++++++++++ .../NodeJSServer/src/modules/ui/server-creator.js | 7 ++++ WebInterface/NodeJSServer/src/style/index.scss | 32 ++++++++++++++++++ 5 files changed, 81 insertions(+) create mode 100644 WebInterface/NodeJSServer/src/modules/ui/modal.js create mode 100644 WebInterface/NodeJSServer/src/modules/ui/server-creator.js (limited to 'WebInterface/NodeJSServer/src/modules/server-client.js') diff --git a/WebInterface/NodeJSServer/src/index.js b/WebInterface/NodeJSServer/src/index.js index d1f925d..01a9ba1 100644 --- a/WebInterface/NodeJSServer/src/index.js +++ b/WebInterface/NodeJSServer/src/index.js @@ -1,6 +1,7 @@ import Backdrop from './modules/ui/backdrop.js'; import BannerController from './modules/ui/notification-banner.js'; import ServerClient from './modules/server-client.js' +import Modal from './modules/ui/modal.js'; // TODO: DEBUGGING let backdrop = new Backdrop('menu', 'front-layer', 'show-menu'); backdrop.register(); @@ -13,3 +14,4 @@ let client = new ServerClient('http://89.183.117.197:5000/chatHub', 'server-list document.getElementById('refresh-button') .addEventListener('click', client.loadServers.bind(client)); +new Modal('Test Titel'); diff --git a/WebInterface/NodeJSServer/src/modules/server-client.js b/WebInterface/NodeJSServer/src/modules/server-client.js index 8cf28f6..e550bb7 100644 --- a/WebInterface/NodeJSServer/src/modules/server-client.js +++ b/WebInterface/NodeJSServer/src/modules/server-client.js @@ -1,5 +1,6 @@ import * as signalR from '@aspnet/signalr'; import ServerListing from './ui/server-listing.js'; +import ServerCreator from './ui/server-creator.js'; export default class ServerClient { constructor(url, serverListingId, debug = false) { diff --git a/WebInterface/NodeJSServer/src/modules/ui/modal.js b/WebInterface/NodeJSServer/src/modules/ui/modal.js new file mode 100644 index 0000000..e1aa8a2 --- /dev/null +++ b/WebInterface/NodeJSServer/src/modules/ui/modal.js @@ -0,0 +1,39 @@ +export default class Modal { + constructor(titleString) { + let modalBackground = document.createElement('div'); + let modal = document.createElement('div'); + let title = document.createElement('h1'); + let body = document.createElement('div'); + + modalBackground.className = 'modal-container'; + modal.className = 'modal'; + title.className = 'modal-title'; + body.className = 'modal-body' + + title.textContent = titleString; + + modal.appendChild(title); + modalBackground.appendChild(modal); + document.body.appendChild(modalBackground); + + this.bg = modalBackground; + this.modal = modal; + this.title = title; + this.body = body; + + this.registerEvents(); + } + + registerEvents() { + this.bg.addEventListener('click', () => { + this.bg.classList.add('hidden'); + this.bg.addEventListener('transitionend', () => { + document.body.removeChild(this.bg); + }); + }); + } + + setBodyText(text) { + this.body.textContent = text; + } +} diff --git a/WebInterface/NodeJSServer/src/modules/ui/server-creator.js b/WebInterface/NodeJSServer/src/modules/ui/server-creator.js new file mode 100644 index 0000000..4203dfe --- /dev/null +++ b/WebInterface/NodeJSServer/src/modules/ui/server-creator.js @@ -0,0 +1,7 @@ +import Modal from './modal.js'; + +export default class ServerCreator extends Modal { + constructor() { + super('Neues Spiel') + } +} diff --git a/WebInterface/NodeJSServer/src/style/index.scss b/WebInterface/NodeJSServer/src/style/index.scss index 83f9f0a..b5ca607 100644 --- a/WebInterface/NodeJSServer/src/style/index.scss +++ b/WebInterface/NodeJSServer/src/style/index.scss @@ -391,3 +391,35 @@ body { text-align: center; } } + +.modal-container { + position:absolute; + top: 0; + width: 100vw; + height: 100vh; + background-color: #000000AA; + display: flex; + opacity: 1; + transition: opacity 200ms ease; + + &.hidden { + opacity: 0; + } + + .modal { + background-color: #546e7a; + margin: auto; + padding: 1rem; + border-style: none; + border-radius: 8px; + box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); + } + + .modal-title { + margin: 1rem; + } + + .modal-body { + margin: 0.25rem; + } +} -- cgit v1.2.3-54-g00ecf