mirror of https://github.com/reiseburo/offtopic
79 lines
2.4 KiB
Handlebars
79 lines
2.4 KiB
Handlebars
{{> header}}
|
|
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<form id="grep" role="form">
|
|
<input id="grepfield" class="form-control" type="search" placeholder="grep for.." size="20"/>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="col-md-1">
|
|
<button id="stop" class="btn-sm btn-danger">
|
|
<span class="glyphicon glyphicon-stop glyphicon-align-left" aria-hidden="true"></span>
|
|
Stop
|
|
</button>
|
|
<button id="start" class="btn-sm btn-success" style="display: none;">
|
|
<span class="glyphicon glyphicon-play glyphicon-align-left" aria-hidden="true"></span>
|
|
Start
|
|
</button>
|
|
</div>
|
|
|
|
<div class="col-md-1">
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
|
|
<span class="sr-only">Loading..</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="messages">
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{{=<% %>=}}
|
|
<script id="message-display-template" type="text/x-handlebars-template">
|
|
<div id="{{message_id}}" class="list-group-item message-container">
|
|
<div class="message-timestamp">{{timestamp}}</div>
|
|
<code>{{topic}}:{{partition}}</code>
|
|
<span class="offset">(offset: {{offset}})</span>
|
|
<pre class="pre-scrollable message-raw">{{raw}}</pre>
|
|
<span class="message-show-b64"><a href="#" onClick="$('#{{message_id}}_b64').toggle();">toggle base64</a></span>
|
|
<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/moment.min.js"></script>
|
|
<script src="/js/ws.js"></script>
|
|
<script type="text/javascript">
|
|
watchTopic("{{name}}");
|
|
|
|
$('#grep').submit(function(e) {
|
|
if (window.ws) {
|
|
window.ws.send($('#grepfield').val());
|
|
}
|
|
$('#grepfield').blur();
|
|
e.preventDefault();
|
|
});
|
|
|
|
$('#stop').click(function(e) {
|
|
$(e.target).toggle();
|
|
$('#start').toggle();
|
|
if (window.ws) { window.ws.close() };
|
|
});
|
|
|
|
$('#start').click(function(e) {
|
|
$(e.target).toggle();
|
|
$('#stop').toggle();
|
|
watchTopic("{{name}}");
|
|
});
|
|
</script>
|
|
|
|
{{> footer}}
|