mirror of
https://github.com/avatao-content/baseimage-tutorial-framework
synced 2024-11-25 09:01:33 +00:00
Add initial version of frontend
This commit is contained in:
parent
8e6b432719
commit
4c4d1ac8ab
6
handlers/main_handler.py
Normal file
6
handlers/main_handler.py
Normal 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
28
static/ws_listener.js
Normal 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
33
templates/index.html
Normal 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>
|
Loading…
Reference in New Issue
Block a user