{% extends "apps/base.html" %}
{% load staticfiles %}

{% block extra_css %}
{{ block.super }}
<style>
#output {
    color: #fff;
    background-color: #333;
    border-radius: 3px;
    padding: 10px 20px;
}
</style>
{% endblock %}

{% block navbar %}
    {% include "apps/navbar.html" with active="log" %}
{% endblock %}

{% block app-content %}
<div class="container-fluid">
	<div class="row-fluid">
		<div class="span12">
            <div id="output">
			{% for log in logs %}
			<p>
			<strong>{{ log.Date }} [ {{ log.Source }} ][ {{ log.Unit }} ]:</strong> {{ log.Message }}
			</p>
			{% endfor %}
            </div>
		</div>
	</div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static "js/oboe-browser.min.js" %}"></script>
<script type="text/javascript">
(function() {
oboe(location.pathname + "stream/").done(function(things) {
    $.each(things, function(i, data) {
        deployOutput("<strong>" + data.Date + " - [" + data.Source + "][" + data.Unit + "]:</strong> " + data.Message);
    });
    window.scrollTo(0,document.body.scrollHeight);
});


    function deployOutput(msg) {
        $("#output").append("<p>" + msg + "</p>");
    }

})();
</script>
{% endblock %}
