diff --git a/app/classes/web/websocket_handler.py b/app/classes/web/websocket_handler.py index 1b03e855..3d6ed777 100644 --- a/app/classes/web/websocket_handler.py +++ b/app/classes/web/websocket_handler.py @@ -10,15 +10,16 @@ class WebSocketHandler(tornado.websocket.WebSocketHandler): def open(self): websocket_helper.addClient(self) console.debug('Opened WebSocket connection') - websocket_helper.broadcast('client_joined', {}) + websocket_helper.broadcast('notification', 'New client connected') def on_message(self, rawMessage): console.debug('Got message from WebSocket connection {}'.format(rawMessage)) message = json.loads(rawMessage) - console.debug('Type: {}, Data: {}'.format(message['type'], message['data'])) + console.debug('Event Type: {}, Data: {}'.format(message['event'], message['data'])) def on_close(self): websocket_helper.removeClient(self) console.debug('Closed WebSocket connection') + websocket_helper.broadcast('notification', 'Client disconnected') diff --git a/app/classes/web/websocket_helper.py b/app/classes/web/websocket_helper.py index 49eaedcd..4962bb05 100644 --- a/app/classes/web/websocket_helper.py +++ b/app/classes/web/websocket_helper.py @@ -13,7 +13,7 @@ class WebSocketHelper: def broadcast(self, message_type: str, data): console.debug('Sending: ' + str(json.dumps({'type': message_type, 'data': data}))) - message = str(json.dumps({'type': message_type, 'data': data})) + message = str(json.dumps({'event': message_type, 'data': data})) for client in self.clients: try: client.write_message(message) diff --git a/app/frontend/templates/base.html b/app/frontend/templates/base.html index 735b5f6c..23ba1533 100644 --- a/app/frontend/templates/base.html +++ b/app/frontend/templates/base.html @@ -77,6 +77,58 @@ + +
+ + @@ -113,10 +165,10 @@ }); }); - {% if request.protocol == 'https'%} + {% if request.protocol == 'https' %} let usingWebSockets = true; - let socketTypes = []; + let listenEvents = []; try { @@ -124,24 +176,25 @@ wsInternal.onopen = function() { console.log('opened WebSocket connection:', wsInternal) }; - wsInternal.onmessage = function (event) { - var message = JSON.parse(event.data); + wsInternal.onmessage = function (rawMessage) { + var message = JSON.parse(rawMessage.data); console.log('got message: ', message) - socketTypes - .filter(event => event.type == message.type) - .forEach(event => event.callback(message.data)) + listenEvents + .filter(listenedEvent => listenedEvent.event == message.event) + .forEach(listenedEvent => listenedEvent.callback(message.data)) } webSocket = { - on: function (type, callback) { - socketTypes.push({ type: type, callback: callback }) + on: function (event, callback) { + console.log('registered ' + event + ' event'); + listenEvents.push({ event: event, callback: callback }) }, - emit: function (type, data) { + emit: function (event, data) { var message = { - type: type, + event: event, data: data } @@ -155,6 +208,7 @@ {% else %} let usingWebSockets = false; warn('WebSockets are not supported in Crafty if not using the https protocol') + var webSocket; {% end%} function warn(message) { @@ -167,13 +221,12 @@ msgEl.append(strongEL, message); + closeEl.style.float = 'right'; closeEl.style.marginLeft = '15px'; closeEl.style.fontWeight = 'bold'; - closeEl.style.float = 'right'; - closeEl.style.fontSize = '22px'; closeEl.style.lineHeight = '20px'; + closeEl.style.fontSize = '22px'; closeEl.style.cursor = 'pointer'; - closeEl.style.transition = '.3s'; closeEl.addEventListener('click', function () {this.parentElement.style.display='none';}); @@ -188,6 +241,49 @@ document.querySelector('.warnings').appendChild(parentEl); } + function closeNotification(element) { + element.parentElement.classList.add('remove'); + setTimeout(function () { + element.parentElement.remove(); + }, 500); + } + + function notify(message) { + console.log(`notify(${message}})`); + var paragraphEl = document.createElement('p'); + var closeEl = document.createElement('span'); + + paragraphEl.textContent = message; + + closeEl.innerHTML = '×'; + closeEl.addEventListener('click', function () {closeNotification(this)}); + + var parentEl = document.createElement('div'); + parentEl.appendChild(paragraphEl); + parentEl.appendChild(closeEl); + + parentEl.classList.add('notification'); + + document.querySelector('.notifications').appendChild(parentEl); + + + setTimeout(function () { + parentEl.classList.add('active'); + }, 200); + + setTimeout(function (element) { + closeNotification(element); + }, 7500, closeEl); + + ` +
+

Hello, World! This text should overflow

+ × +
+ ` + } + webSocket.on('notification', notify); + {% block js %} diff --git a/app/frontend/templates/panel/dashboard.html b/app/frontend/templates/panel/dashboard.html index f1324728..8bac8512 100644 --- a/app/frontend/templates/panel/dashboard.html +++ b/app/frontend/templates/panel/dashboard.html @@ -266,20 +266,20 @@ $( document ).ready(function() { message: '
  Please be patient while we restart the server
This screen will refresh in a moment
' }); }); + if (webSocket) { + cpu_data = document.getElementById('cpu_data'); + cpu_usage = document.getElementById('cpu_usage'); + mem_usage = document.getElementById('mem_usage'); + mem_percent = document.getElementById('mem_percent'); - cpu_data = document.getElementById('cpu_data'); - cpu_usage = document.getElementById('cpu_usage'); - mem_usage = document.getElementById('mem_usage'); - mem_percent = document.getElementById('mem_percent'); - - webSocket.on('update_host_stats', function (hostStats) { - var cpuDataTitle = `CPU Cores: ${hostStats.cpu_cores}
CPU Cur Freq: ${hostStats.cpu_cur_freq}
CPU Max Freq: ${hostStats.cpu_max_freq}`; - cpu_data.setAttribute('data-original-title', cpuDataTitle); - cpu_usage.textContent = hostStats.cpu_usage; - mem_usage.setAttribute('data-original-title', `Memory Usage: ${hostStats.mem_usage}`); - mem_percent.textContent = hostStats.mem_percent + '%'; - - }); + webSocket.on('update_host_stats', function (hostStats) { + var cpuDataTitle = `CPU Cores: ${hostStats.cpu_cores}
CPU Cur Freq: ${hostStats.cpu_cur_freq}
CPU Max Freq: ${hostStats.cpu_max_freq}`; + cpu_data.setAttribute('data-original-title', cpuDataTitle); + cpu_usage.textContent = hostStats.cpu_usage; + mem_usage.setAttribute('data-original-title', `Memory Usage: ${hostStats.mem_usage}`); + mem_percent.textContent = hostStats.mem_percent + '%'; + }); + } });