From 4c4d1ac8abbc3ec45f255d2321ae282d28b5a602 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?B=C3=A1lint=20Bokros?= Date: Fri, 17 Nov 2017 15:42:39 +0100 Subject: [PATCH] Add initial version of frontend --- handlers/main_handler.py | 6 ++++++ static/ws_listener.js | 28 ++++++++++++++++++++++++++++ templates/index.html | 33 +++++++++++++++++++++++++++++++++ 3 files changed, 67 insertions(+) create mode 100644 handlers/main_handler.py create mode 100644 static/ws_listener.js create mode 100644 templates/index.html diff --git a/handlers/main_handler.py b/handlers/main_handler.py new file mode 100644 index 0000000..04c5810 --- /dev/null +++ b/handlers/main_handler.py @@ -0,0 +1,6 @@ +from tornado.web import RequestHandler + + +class MainHandler(RequestHandler): + def get(self, *args, **kwargs): + self.render('index.html') diff --git a/static/ws_listener.js b/static/ws_listener.js new file mode 100644 index 0000000..a91d6f3 --- /dev/null +++ b/static/ws_listener.js @@ -0,0 +1,28 @@ +let ws = new WebSocket('ws://' + document.location.host + '/ws'); + +// ws.onopen = function() { +// ws.send(JSON.stringify({ +// 'anchor': '', +// 'data': 'Hello, World!' +// })); +// }; + +// TODO: annotate objects that can fire events +// TODO: annotate objects that should receive response from events +// TODO: work out object notation for events that are fired +// TODO: work out object notation for responses + +$('#container').on('click', '.anchor', ( function (event) { + let anchorName = $(this).attr('id').replace('_event', ''); + let data = JSON.stringify({ + 'anchor': anchorName, + 'data': $('#' + anchorName).text() + }); + console.log("Sending: " + data); + ws.send(data); + })); + +ws.onmessage = function (messageEvent) { + let message = JSON.parse(messageEvent.data); + $('#' + message['anchor']).text(message['data']); +}; \ No newline at end of file diff --git a/templates/index.html b/templates/index.html new file mode 100644 index 0000000..2801b24 --- /dev/null +++ b/templates/index.html @@ -0,0 +1,33 @@ + + + + + Babylonian Tutorial Proof of Concept + + + + +
+

Tutorial framework Proof of Concept

+
+
+
+ {% for aid in ('a', 'b', 'c') %} +
+

+ Anchor {{ escape(aid).upper() }} content should be inserted here. +

+ +
+ {% end %} +
+
+ + + + + + + \ No newline at end of file