{% extends "base.html" %}

{% block pagetitle -%}Now Building{%- endblock pagetitle %}

{%- block topcontent -%}
	<div class="row">
	<div class="col-md-4">
		<div id="summary"
			 class="block no-padding block-color primary">
			<div class="header">
				<div class="actions">
					<a class="minimize" href="#"><i class="fa fa-chevron-down"></i></a>
					<a class="refresh" href="#"><i class="fa fa-repeat"></i></a>
					<a class="close-down" href="#"><i class="fa fa-times"></i></a>
				</div>
				<h3>
					<i class="fa fa-archive"></i>

					Build Number: {% if selected.bnum %}{{ selected.bnum }}{% else %}n/a{% endif %}</h3>
			</div>
			<div class="content no-padding">
				<table id="noDt" class="table no-border hover now_building_stats">
					<tbody class="no-border-y">
					<tr>
						<td>Build No.:</td>
						<td>
							{% if bld_objs %}
								<form>
									<select id="build-number-select" name="build_number" class="form-control">
										{% for bnum, bld_obj in bld_objs.items() %}
											<option value="{{ bld_obj.bnum }}" {% if selected.bnum == bld_obj.bnum %}selected{% endif %}>{{ bld_obj.bnum }}</option>
										{% endfor %}
									</select>
								</form>
							{% endif %}
						</td>
					</tr>
					<tr>
						<td>Package:</td>
						<td>{% if selected.pkgname %}{{ selected.pkgname }}{% endif %}</td>
					</tr>
					<tr>
						<td>Version:</td>
						<td>{% if selected.version %}{{ selected.version }}{% endif %}</td>
					</tr>
					<tr>
						<td>Start:</td>
						<td>{% if selected.start %}{{ selected.start }}{% endif %}</td>
					</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
	</div>

{%- endblock topcontent -%}
{% block bottomcontent -%}
	<div class="row">
		<div class="col-md-10">
			<div id="" class="block">
				<div class="header dark">

					<h3 class="hfloat">{% if not idle %}
						<i class="fa fa-cog fa-spin" style="font-size:26px;"></i>{% else %}
						<i class="fa fa-cog"></i>{% endif %} Live Build Output</h3>
					{%- if not idle %}
						<h5 class="hfloat"><strong>Docker Container ID:</strong> {{ selected.container[:7] }}</h5>
					{% else %}
						<h5 class="hfloat">&nbsp;</h5>
					{% endif -%}
					<div class="actions">
						<a class="minimize" href="#"><i class="fa fa-chevron-down"></i></a>
						<a class="refresh" href="#"><i class="fa fa-repeat"></i></a>
						<a class="close-down" href="#"><i class="fa fa-times"></i></a>
					</div>
					<div class="clearfix"></div>

				</div>
				<div class="content no-padding">
					<div id="data" class="no-padding" style=height:350px;"></div>
				</div>
			</div>
		</div>
	</div>
{%- endblock bottomcontent %}
{#<link href="/static/css/prism.css" rel="stylesheet"/>#}
{% block scripts %}
	{{ super() }}

	{# {%- for line in data %}
        <script type="text/javascript">
            $('#data').append('{{ line }}<br/>');
            $('#data').scrollTop($('#data')[0].scrollHeight);
        </script>
    {% endfor -%}#}
	<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js" type="text/javascript" charset="utf-8"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/mode-sh.js" type="text/javascript" charset="utf-8"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/theme-monokai.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		jQuery(window).load(function () {
			var editor = ace.edit("data");
			editor.getSession().setMode("ace/mode/sh");
			editor.setValue("{% if idle %}There are no active builds at this time.{% else %}Loading stream...{% endif %}");
			editor.setTheme("ace/theme/monokai");
			editor.setShowPrintMargin(false);
			editor.getSession().setUseWrapMode(true);
			editor.setReadOnly(true);
			editor.setHighlightActiveLine(false);
			editor.clearSelection();
			var doc = editor.getSession().getDocument();
			var current_stream = null;

			function start_new_sse_stream(bnum) {
				if ('There are no active builds at this time.' !== editor.getValue()) {
					editor.setValue("Loading stream...");
					editor.setHighlightActiveLine(false);
					editor.clearSelection();
				}
				if (null !== current_stream) {
					current_stream.close();
				}

				var sse = new EventSource('/api/get_log/' + bnum);
				current_stream = sse;
				var endOfLog = false,
					lastMsg = '';

				sse.addEventListener("build_output", function (message) {
					if (false === endOfLog) {
						if (message.data.indexOf('ENDOFLOG') >= 0) {
							console.log('ENDOFLOG');
							endOfLog = true;
							sse.close();
							jQuery('.fa-spin').removeClass('fa-spin');
							jQuery('.header_dark h5').css('color', 'transparent');
							return;
						}
						if (message.data.indexOf("There are no active builds") >= 0) {
							editor.insert(message.data);
							jQuery('.fa-spin').removeClass('fa-spin');
							jQuery('.header_dark h5').css('color', 'transparent');
							console.log('NO ACTIVE BUILDS');

							sse.close();
							return;
						}
						if (message.data === lastMsg) return;
						lastMsg = message.data;
						pos = doc.getLength();
						doc.insert({row: pos, column: -1}, '\n' + message.data);
					}
				});
			}

			$('#build-number-select').on('change', function () {
				var bnum = $(this).val();
				start_new_sse_stream(bnum);
			});
			start_new_sse_stream({{ selected.bnum }});
		});
	</script>
	{#    <script src="/static/js/prism.js"></script>#}
{% endblock scripts %}