mrtoth
/
baseimage-tutorial-framework
mirror of https://github.com/avatao-content/baseimage-tutorial-framework
1
0
Fork 0
Code Issues Releases Wiki Activity

Add initial version of frontend

This commit is contained in:
Bálint Bokros 2017-11-17 15:42:39 +01:00
parent 8e6b432719
commit 4c4d1ac8ab
3 changed files with 67 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
handlers/main_handler.py Normal file
View File

@ -0,0 +1,6 @@
from tornado.web import RequestHandler
class MainHandler(RequestHandler):
def get(self, *args, **kwargs):
self.render('index.html')

28
static/ws_listener.js Normal file
View File

@ -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']);
};

33
templates/index.html Normal file
View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Babylonian Tutorial Proof of Concept</title>
<link rel="stylesheet" href="{{ static_url('vendor/css/bootstrap.min.css') }}">
</head>
<body>
<div class="jumbotron text-center">
<h1>Tutorial framework Proof of Concept</h1>
</div>
<div id="container">
<div class="row">
{% for aid in ('a', 'b', 'c') %}
<div class="col-sm m-3 p-3">
<p id="anchor_{{ escape(aid) }}" >
Anchor {{ escape(aid).upper() }} content should be inserted here.
</p>
<button type="button" class="btn btn-outline-primary anchor" id="anchor_{{ escape(aid) }}_event">
Fire anchor {{ escape(aid).upper() }}
</button>
</div>
{% end %}
</div>
</div>
<script src="{{ static_url('vendor/js/jquery-3.2.1.slim.min.js') }}" defer></script>
<script src="{{ static_url('vendor/js/popper.min.js') }}" defer></script>
<script src="{{ static_url('vendor/js/bootstrap.min.js') }}" defer></script>
<script src="{{ static_url('ws_listener.js') }}" defer></script>
</body>
</html>