<!DOCTYPE html>

{% extends "overview.html" %}
{% block title %}Редактирование компонента {{ component.name }}{% endblock %}

{% block navigation %}
	<script nonce='{{ common.CSP_SCRIPT_NONCE }}' type='text/javascript' src='/media/js/vendor/jquerymd5.js'></script>
	<table class="nav_table">
		<tbody>
		<tr>
			<td>
				<a href="/{{ component.tag }}" target="_blank">{{ component.tag }}</a>
			</td>
			<td class="navigation-delimiter">
				→
			</td>
			<td>
				<a href="/regress/{{ component.tag }}">Регрессия</a>
			</td>
			<td class="navigation-delimiter">
				→
			</td>
			<td id='service_nav'>
			</td>
			<td class="navigation-delimiter" id='service_nav_arrow'>
			</td>
			<td class="b-navigation-common__firecount">
				<select class="form-control navigation-selector selector-brand selectpicker" data-live-search="true" data-style="btn-secondary btn-sm" size="1" name="component_select" id="component_select" onchange="window.open('/regress/{{ component.tag }}/' + this.value + '/edit', '_top');">
						{% for comp in components %}
							{% if comp.n == component.n %}
								{% if active_service %}
									<script nonce='{{ common.CSP_SCRIPT_NONCE }}'>
										function add_service_nav() {
											$("td#service_nav").html('<a href="/regress/{{ component.tag }}?service={{ active_service }}">Сервис:&nbsp;&quot;{{ active_service }}&quot;</a>');
											var $arrow = $("td#service_nav_arrow");
											$arrow.html('→');
											$arrow.addClass("b-navigation-common__row")
                                        }
                                        add_service_nav();
									</script>
								{% endif %}
								<option selected="selected" value="{{ comp.n }}">{{ comp.n }} - {{ comp.name }}</option>
							{% else %}
								<option value="{{ comp.n }}">{{ comp.n }} - {{ comp.name }}</option>
							{% endif %}
						{% endfor %}
				</select>
			</td>
		</tr>
		</tbody>
	</table>
	
	<script nonce='{{ common.CSP_SCRIPT_NONCE }}' type="text/javascript">
		$(document).ready(function(){
			$('#component_select').selectpicker();
		});
	</script>
	
{% endblock %}

{% block body %}
<div class="container-fluid" style="padding-bottom: 15px;">

{% block panel %}
{% endblock %}


{% block overview %}
{% load lookup %}
{% load split %}

<form method="POST" action="/regress/{{ component.tag }}/{{ component.n }}/edit" id="edit_component_form__{{ component.n }}" style="white-space: nowrap;">
{% csrf_token %}
<h4>Редактирование компонента "{{ component.name }}"</h4>
		<table class="regress-edit-table">
		<tr>
			<td>
				<h4>Сортировка стрельб:</h4>
				<p>
				{% if component.job_order == "timeline" %}
					<input type="radio" name="component_xaxis" id="timeline" value="timeline" checked> 
				{% else %}
					<input type="radio" name="component_xaxis" id="timeline" value="timeline">
				{% endif %}
				<label for="timeline">Таймлайн</label>
			  	<Br>
			  	{% if component.job_order == "n_ordered" %}
				  	<input type="radio" name="component_xaxis" id="n_ordered" value="n_ordered" checked> 
				{% else %}
				  	<input type="radio" name="component_xaxis" id="n_ordered" value="n_ordered">
				{% endif %}
			  	<label for="n_ordered">Сортировка стрельб по номеру</label>
				<Br>
				{% if component.job_order == "ver_ordered" %}
				  	<input type="radio" name="component_xaxis" id="ver_ordered" value="ver_ordered" checked> 
				{% else %}
				  	<input type="radio" name="component_xaxis" id="ver_ordered" value="ver_ordered">
				{% endif %}
			  	<label for="ver_ordered">Сортировка стрельб по версии</label>
				<Br>
			  	</p>
			</td>
		</tr>
		<tr>
			<td>
				<h4>Сервисы:</h4>
				<table class="component_services_block">
				{% for service in component.services %}
					<script nonce='{{ common.CSP_SCRIPT_NONCE }}' type="text/javascript">
					var mdserv = $.md5('{{ service }}');
					$('table.component_services_block').append('<tr id="service_new_'+mdserv+'_row_container"><td id="service_new_'+mdserv+'_row"> ' +
						'<div class="input-group service_container">' +
						'<input class="form-control" type="text" maxlength="128" value="{{ service }}" style="width: 500px" id="service_'+mdserv+'" name="service_{{ service }}" readonly>' +
						'<input type="button" style="width: 101px; margin-left:-1px;" class="form-control btn btn-secondary existing_service_delete_button" data-service="{{ service }}" id="service_'+mdserv+'_delete_button" value="Удалить"></input>' +
						'</div>'+
					'</td></tr>');
					$('input.existing_service_delete_button').bind("click", function (event) {
						var i = $.md5($(this).data("service"));
						$('tr#service_new_'+i+'_row_container').remove()
					})
					</script>
				{% endfor %}
				<script nonce='{{ common.CSP_SCRIPT_NONCE }}' type="text/javascript">
					i = 0;
					$('table.component_services_block').append('<tr id="service_new_'+i+'_row_container"><td id="service_new_'+i+'_row"><div id="service_new_'+i+'_container" class="input-group service_container"></div></td></tr>');
					$('div#service_new_'+i+'_container').append('<input placeholder="Новый сервис" class="form-control" style="width: 500px" type="text" maxlength="128" value="" id="service_new_'+i+'" name="service_new_'+i+'">' +
						'<input class="form-control btn btn-secondary service_delete_button" style="border-top-right-radius: 4px; border-bottom-right-radius: 4px; display:none; width: 101px; margin-left:-1px" type="button" id="service_'+i+'_delete_button" data-service="'+i+'" value="Удалить"></input>' +
						'<input class="form-control btn btn-secondary" style="width: 101px; margin-left:-1px" type="button" id="service_'+i+'_add_button" value="Добавить"></input>');
					$('input.service_delete_button').bind("click", function (event) {
						var i = $(this).data("service");
						$('tr#service_new_'+i+'_row_container').remove()
					});
					$('input#service_'+i+'_add_button').bind("click",
							function new_service(event) {
						//$('input#service_new_'+i).attr('readonly', true)
						$('input#service_'+i+'_add_button').hide();
						$('input#service_'+i+'_delete_button').show();
						i += 1;
						$('table.component_services_block').append('<tr id="service_new_'+i+'_row_container"><td id="service_new_'+i+'_row"><div id="service_new_'+i+'_container" class="input-group service_container"></div></td></tr>');
						$('div#service_new_'+i+'_container').append('<input placeholder="Новый сервис" class="form-control" style="width: 500px" type="text" maxlength="128" value="" size="60"" id="service_new_'+i+'" name="service_new_'+i+'">' +
							'<input class="form-control btn btn-secondary service_delete_button" style="border-top-right-radius: 4px; border-bottom-right-radius: 4px; display:none; width: 101px; margin-left:-1px" type="button" id="service_'+i+'_delete_button" data-service="'+i+'" value="Удалить"></input>' +
							'<input class="form-control btn btn-secondary" style="width: 101px; margin-left:-1px;" type="button" id="service_'+i+'_add_button" value="Добавить"></input>');
						$('input#service_'+i+'_add_button').bind("click", new_service);
						$('input#service_'+i+'_delete_button').bind("click", function (event) {
							var i = $(this).data("service");
							$('tr#service_new_'+i+'_row_container').remove()
						})
					})
					
				</script>
				</table>
			</td>
		</tr>
		<tr>
			<td>
				<h4>Прочее:</h4>
				<div class="input-group" style="width: 600px;">
			      <div class="input-group-addon" style="width: 100px;">Имя</div>
			      <input class="form-control" type="text" maxlength="128" value="{{ component.name }}" size="40" id="name_new" name="name_new">
			    </div>
			</td>
		</tr>
		<tr>
			<td>
				<div class="input-group" style="width: 600px;">
			      <div class="input-group-addon" style="width: 100px;">Описание</div>
			      <textarea class="form-control" style="height: auto;" rows="4" cols="40" value="{{ component.dsc }}" id="dsc_new" name="dsc_new">{{ component.dsc }}</textarea>
			    </div>
            </td>
        </tr>
        <tr>
        	<td>
        		<Br>
				<label for="include_quit_status">Включать только стрельбы с кодами выхода (номера кодов выхода через запятую)</label>
				<Br>
				<input class="form-control" type="text" maxlength="16" value="{{ include_quit_status }}" size="20" id="include_quit_status" name="include_quit_status">
			</td>
		</tr>
		<tr>
        	<td>
				<label for="exclude_quit_status">Исключать стрельбы с кодами выхода (номера кодов выхода через запятую)</label>
				<Br>
				<input class="form-control" type="text" maxlength="16" value="{{ exclude_quit_status }}" size="20" id="exclude_quit_status" name="exclude_quit_status">
			</td>
		</tr>
        </table>
<br>
<h3>Список KPI компонента "{{ component.name }}"</h3>
<br>
	<table border="0" class="regress-edit-table">
		<tr>
			<th>Описание</th>
			<th>SLA</th>
			<th></th>
			<th></th>
		</tr>
		{% for kpi in kpis %}
		<tr class="alert alert-default kpi-list-element">
			<td id="kpi_dsc__{{ kpi.n }}">{{ kpi.dsc }}</td>
			<td>
			<table>
				<tr>
				{% for graph in kpi.params|lookup:"sla" %}
					{% if kpi.params|lookup:"sla"|lookup:graph|lookup:"operator" %}
						<td style="padding:0">{{ graph }}&nbsp;{{ kpi.params|lookup:"sla"|lookup:graph|lookup:"operator" }}&nbsp;{{ kpi.params|lookup:"sla"|lookup:graph|lookup:"threshold" }}&#59;&nbsp;</td>
					{% endif %}
				{% endfor %}
				</tr>
			</table>
			</td>
			<td><input  type="button" class="btn btn-secondary edit_kpi_button" id="edit_kpi_button__{{ kpi.n }}__{{ kpi.ktype }}" value="Редактировать"></td>
			
			<td><input type="button" class="btn btn-secondary delete_kpi" id="delete_kpi__{{ component.tag }}__{{ component.n }}__{{ kpi.n }}" value="Удалить"></td>
		</tr>
		<tr class="kpi-list-editor_form">
			<td>
					{% with kpi.n as kpi_n %}
<div class="kpi_editor" id="edit_kpi_form__{{ kpi_n }}"></div>
					{% endwith %}
			</td>
		</tr>
		{% endfor %}
	</table>
	<br>
	<input class="btn btn-secondary" type="button" id="add_kpi_button" value="Добавить KPI" style="margin: 0 0 0 1.8em;">
	<br>
	<br>
	<br>
	<input class="btn btn-brand" type="submit" id="finish_comp_edit_button" value="Сохранить" style="margin: 0 0 0 0.8em;">
	<input class="btn btn-secondary cancel_edit_component" type="button" id="cancel_edit_component__{{ component.tag }}__{{ component.n }}" value="Отмена">
</form>
<div id="add_kpi_form" style="display: none; margin-left: 1.8em; width: 70%;">
<span style="font-weight:bold;">Добавить KPI:</span>
<br>
<br>
	<script nonce='{{ common.CSP_SCRIPT_NONCE }}' type="text/javascript">
        $(document).ready(function()
        {
            $("#kpi_type_0").change(function()
            {
            	if ($("#kpi_type_0 option:selected").val() !== -1) {
            		console.log($("#kpi_type_0 option:selected").val());
            		var $kpiForm = $("div#edit_kpi_form__0");
                    $kpiForm.show();
                    $kpiForm.html('<div style="padding-top: 2.2em;"><i class="krutilka fa fa-circle-o-notch fa-spin" aria-hidden="true"></i></div>').load(
		    			  location.protocol+'//'+location.host+location.pathname + '/render_kpi_editor?kpi=0&kpitype=' + $("#kpi_type_0 option:selected").val(), function() {
		    					/*
		    					 * кнопка для скрытия формы редактирования KPI
		    					 */
		    					$(".cancel_add_kpi")
		    							.click(
		    									function(event) {
		    										var kpi = this.id.split("__")[1];
		    										console.log(kpi);
		    										$("#add_kpi_form").hide();
		    										$("#add_kpi_button").show();
		    										$("#finish_comp_edit_button").show();
		    										$(".cancel_edit_component").show();
		    										event.preventDefault();
		    										event.stopPropagation();
		    									});
		    					var $addButton = $(".add_kpi_button");
		    					$addButton.unbind();
		    					$addButton
		    							.click(
		    									function(event) {
		    										$('div#edit_kpi_form__0').toggle() 
		    									})
		    			  })
            	}
            	else {
            		$("#edit_kpi_form__0").hide()
            	}
            	//$(".graphs_{{ kpi_n }}").hide();
                //$("#graphs_" + $("#kpi_type_0 option:selected").val() + "_0").show();
            });
        });
    </script>	
    <form method="POST" action="/regress/{{ component.tag }}/{{ component.n }}/add_kpi" id="add_kpi_form" style="white-space: nowrap;">
    {% csrf_token %}
	<select class="form-control selectpicker" title="Выберите тип KPI" size="1" data-live-search="true" name="kpi_type_0" id="kpi_type_0">
		{% for kpitype in kpitypes %}
			<option value="{{ kpitype.0 }}">{{ kpitype.1 }}</option>
		{% endfor %}
	</select>
	<input type="button" class="btn btn-secondary cancel_add_kpi" id="cancel_add_kpi" value="Отмена" style="margin: 0 0 0 2.4em;">
	<br>
	<div class="kpi_editor" id="edit_kpi_form__0"></div>
	<br>
	<br>
	<br>
	</form>
</div>
</div>

<link href="/media/css/regression.css?version=43.4" type="text/css" rel="stylesheet" />
<script nonce='{{ common.CSP_SCRIPT_NONCE }}' type='text/javascript' src='/media/js/vendor/jquerymd5.js'></script>
<script nonce='{{ common.CSP_SCRIPT_NONCE }}' type='text/javascript' src='/media/js/regression.js?version=43.4'></script>
{% endblock %}
{% endblock %}
