reiseburo
/
offtopic
mirror of https://github.com/reiseburo/offtopic
1
0
Fork 0
Code Issues Releases Wiki Activity

Introduce handlebars.js to clean up some of the front-end view generation

This commit is contained in:
R. Tyler Croy 2015-09-02 08:09:24 -07:00
parent a66f508ea6
commit d15f1adb5e
No known key found for this signature in database
GPG Key ID: 1426C7DC3F51E16F
4 changed files with 56 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/ratpack/handlebars/bootstrap.hbs
View File

@ -2,3 +2,4 @@
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/bootstrap-theme.min.css">
<script src="/js/bootstrap.min.js"></script>
<script src="/js/handlebars.min-latest.js"></script>

15
src/ratpack/handlebars/topic-watch.html.hbs
View File

@ -33,6 +33,20 @@
</div>
{{=<% %>=}}
<script id="message-display-template" type="text/x-handlebars-template">
<div id="{{message_id}}" class="list-group-item message-container">
<code>{{topic}}:{{partition}}</code>
<span class="offset">(offset: {{offset}})</span>
<pre class="pre-scrollable message-raw">{{raw}}</pre>
<br/>
<div class="message-b64" id="{{message_id}}_b64" style="display: none;">
<pre class="pre-scrollable message-b64">{{b64}}</pre>
</div>
</div>
</script>
<%={{ }}=%>
<script src="/js/ws.js"></script>
<script type="text/javascript">
watchTopic("{{name}}");
@ -57,4 +71,5 @@
watchTopic("{{name}}");
});
</script>
{{> footer}}

29
src/ratpack/public/js/handlebars.min-latest.js Normal file
View File

File diff suppressed because one or more lines are too long

18
src/ratpack/public/js/ws.js
View File

@ -1,3 +1,5 @@
var messageDisplayTemplate = Handlebars.compile($('#message-display-template').html());
function watchTopic(name) {
if (!window.WebSocket) {
alert("This won't work in your browser. Try Chrome or a gooder version of Safari.");
@ -15,13 +17,15 @@ function watchTopic(name) {
var data = $.parseJSON(event.data);
var messages = $('#messages');
var el_id = Math.floor(Math.random() * 1000000);
var el = ["<div id='" + el_id + "' class='list-group-item'>",
"<code>" + data.topic + ":" + data.partition + "</code>",
"<span class='offset'>(offset: " + data.offset + ")</span>",
'<pre class="pre-scrollable message-raw">' + data.raw + '</pre>',
"<br/><div class='message-b64' id='" + el_id + "_b64'",
"style='display:none;'><pre>" + data.b64 + "</pre></div>"].join("\n");
messages.prepend(el);
messages.prepend(messageDisplayTemplate({
message_id: el_id,
topic: data.topic,
partition: data.partition,
offset: data.offset,
raw: data.raw,
b64: data.b64
}));
$("#" + el_id).click(function(ev) {
$("#"+el_id+'_b64').toggle();
});