{% extends 'base.html' %}
{% load custom_tags_and_filters %}
{% block title %}Tool control{% endblock %}
{% block extrahead %}
	{% load static %}
	<script type="text/javascript" src="{% static "datetimepicker/bootstrap-datetimepicker.js" %}"></script>
	<link rel="stylesheet" type="text/css" href="{% static "datetimepicker/bootstrap-datetimepicker.css" %}"/>
{% endblock %}
{% block body %}

	<style>
		h3
		{
			margin-top: 0;
		}
	</style>

	{% if device == 'mobile' %}
		<div id="content" class="container"></div>
	{% else %}
		<div id="sidebar" class="application-sidebar">
			<div id="expand-collapse" class="btn-group sidebar-item">
				<button type="button" class="btn btn-default" style="width:50%" onclick="expand_all_categories()" title="Expand all categories"><span class="glyphicon glyphicon glyphicon-resize-full"></span></button>
				<button type="button" class="btn btn-default" style="width:50%" onclick="collapse_all_categories()" title="Collapse all categories"><span class="glyphicon glyphicon glyphicon-resize-small"></span></button>
			</div>
			<input type="text" id="item_search" placeholder="Search for a tool" class="form-control sidebar-item">
			{{ rendered_item_tree_html }}
			<div style="height:50px"></div>
		</div>
		<div id="content" class="application-content" style="padding-right: 20px; overflow-y:scroll"></div>
		<div id="loading-div" class="application-content spinner-container" style="display: none">
			<div class="glyphicon glyphicon-repeat normal-right-spinner"></div>
		</div>
	{% endif %}
        <div id="interlock_error_contents" style="display: none">
            {% include 'tool_control/interlock_error.html' %}
        </div>

	<script>
        let previous_tasks_and_comments_url;
		function refresh_tool_status()
		{
			let selected_item = {% if device == 'mobile' %}{{ selected_tool }}{% else %}get_selected_item(){% endif %};
			if(selected_item && selected_item !== 'personal_schedule')
			{
			    let item = JSON.parse(selected_item)
			 	{% if device == 'desktop' %}
					$('#loading-div').show()
				{% endif %}
				let url = "{% url 'tool_status' 999 %}".replace('999', {% if device == 'mobile' %} selected_item {% else %} item.id {% endif %})
				$("#content").load(url, undefined, refresh_tool_completion_callback);
			}
			{% if device == 'desktop' %}
				refresh_sidebar_tool_icons();
			{% endif %}
		}

		function reload_page()
		{
			location.reload();
		}

		function refresh_tool_completion_callback(response, status, xml_http_request)
		{
		    {% if device == 'desktop' %}
				$('#loading-div').hide()
			{% endif %}
			if(status === "error")
			{
				let content = "<div class='alert alert-danger'><span class='glyphicon glyphicon-remove'></span> Unable to retrieve tool status.";
				if(xml_http_request.responseText)
					content += " " + xml_http_request.responseText;
				content += "</div>";
				$("#content").html(content);
			}
		}

		function use_tool_for_self()
		{
			$("#project_choice").html("Fetching project list...").show().load("{% url 'get_projects_for_self' %}", undefined, load_projects_completion_callback);
		}

		function select_project(element, project_id)
		{
			$(".project-choice").removeClass('active');
			$(element).addClass('active');
			$("#project_id").val(project_id);
			$("#start").show();
		}

		function load_projects(jquery_event, search_selection, dataset_name)
		{
			$("#user_search").typeahead('val', '').hide();
			$("#customer").text(search_selection.name).show();
			let data = "user_id=" + search_selection.id;
			$("#customer_project").html("Fetching project list...").show().load("{% url 'get_projects_for_tool_control' %}", data, load_projects_completion_callback);
		}

		function load_projects_completion_callback(response, status, xml_http_request)
		{
			if(status === "error")
				$("#customer_project").html("Unable to retrieve a list of projects for this user.")
		}

		function try_post_catch_interlock_error(url, data, success_callback, always_callback)
        {
            ajax_post(url, data, success_callback, function(response, status, xml_http_request) { return interlock_failure_callback(response, status, xml_http_request, url, data, success_callback) }, always_callback);
        }

		function interlock_failure_callback(response, status, xml_http_request, url, data, success_callback, always_callback)
        {
            if(data === undefined)
            {
                data = {};
            }
            {# Specific case here where we have an error but it could be bypassed #}
            if (status === 'error' && response.status === 501)
            {
                let modal_dialog = $('#dialog');
                $("#dialog .modal-content").html($('#interlock_error_contents').html());
		        modal_dialog.modal('show');
		        let bypass_button = $($("#dialog .inter_bypass")[0]);
                let response_data = response.responseJSON;
                $("#dialog .interlock_message").html(response_data['message'])
                bypass_button.hide();
                {# we can bypass, show the button #}
                if (response_data["bypass_allowed"] === true)
                {
                    bypass_button.off("click")
                    $('#dialog .bypass_text').html(response_data['action'] + " anyway");
                    bypass_button.show();
                    bypass_button.one('click', function ()
                    {
                        modal_dialog.on('hidden.bs.modal', function ()
                        {
                            data["bypass"] = 'True';
                            try_post_catch_interlock_error(url, data, success_callback, always_callback);
                            modal_dialog.off();
                        });
                        modal_dialog.modal('hide');
                    });
                }
                {# hook up try again button #}
                let inter_try_again_button = $($("#dialog .inter_try_again")[0]);
                inter_try_again_button.off("click");
                inter_try_again_button.one('click', function ()
                {
		            modal_dialog.on('hidden.bs.modal', function ()
                    {
                        try_post_catch_interlock_error(url, data, success_callback, always_callback);
                        modal_dialog.off();
                    });
                    modal_dialog.modal('hide');
                });
            }
            else
            {
                ajax_failure_callback("Couldn't change tool status")(response, status, xml_http_request);
            }
        }

		function enable_tool(tool_id)
		{
			$("#start button").prop("disabled", true);
			let user_id = parseInt($("#user_id").val());
			let project_id = parseInt($("#project_id").val());
			let staff_charge = false;
			if($("input[name='staff_charge']").length > 0 && $("input[name='staff_charge']:checked").val() === 'true')
			{
			    staff_charge = true;
            }
			let url = "{% url 'enable_tool' tool_id=111 user_id=22222222 project_id=33333333 staff_charge='false' %}".replace('111', tool_id).replace('22222222', user_id.toString()).replace('33333333', project_id.toString()).replace('false', staff_charge.toString())
			let success_callbacks;
			if(staff_charge === true)
				success_callbacks = [reload_page]; {# If there's a new staff charge then we need to reload the whole page so it's displayed in the menu bar. #}
			else
				success_callbacks = [refresh_tool_status, ajax_success_callback];
			let enable_start_button = function() { $("#start button").prop("disabled", false); };
			try_post_catch_interlock_error(url, undefined, success_callbacks, enable_start_button);
		}

		function disable_tool(url)
		{
			$("#stop").prop("disabled", true);
			let contents = serialize("#tool_control");
			let enable_stop_button = function() { $("#stop").prop("disabled", false); };
			try_post_catch_interlock_error(url, contents, [refresh_tool_status, ajax_success_callback], enable_stop_button);
		}

		{% if user.is_staff %}

			{# Only staff can perform the functions in this if-block. #}

			function use_tool_for_other()
			{
				$("#start").hide();
				$("#project_choice").html("Fetching user list...").show().load("{% url 'use_tool_for_other' %}", undefined, load_projects_completion_callback);
			}

			function clear_customer()
			{
				$("#customer").text("").hide();
				$("#customer_project").html("").hide();
				$("#start").hide();
				$("#user_search").show().focus();
			}

			function add_qualified_user(jquery_event, search_selection, dataset_name)
			{
				$(this).typeahead('val', '');
				let failure_dialog = ajax_failure_callback("Failed to qualify user", "There was a problem qualifying this user.");
				let data = serialize("#add_qualified_user_form");
				data['chosen_user[]'] = search_selection.id;
				ajax_post("{% url 'modify_qualifications' %}", data, reload_qualified_users, failure_dialog)
			}

			function remove_qualified_user(user_id, tool_id)
			{
				let failure_dialog = ajax_failure_callback("Failed to remove qualified user", "There was a problem revoking this user's tool qualification.");
				let data = {
					'action': 'disqualify',
					'chosen_tool[]': tool_id,
					'chosen_user[]': user_id
				};
				ajax_post("{% url 'modify_qualifications' %}", data, reload_qualified_users, failure_dialog);
			}

			function reload_qualified_users()
			{
			    let selected_item = {% if device == 'mobile' %}{{ selected_tool }}{% else %}get_selected_item(){% endif %}
				if (selected_item && selected_item !== 'personal_schedule')
				{
					let item = JSON.parse(selected_item)
				    let url = "{% url 'get_qualified_users' %}?tool_id=" + item.id;
					$("#qualified_users_container").load(url);
				}
			}

			function end_staff_charge()
			{
				let failure_dialog = ajax_failure_callback("Unable to end staff charge", "There was a problem ending your staff charge.");
				ajax_post("{% url 'end_staff_charge' %}", undefined, reload_page, failure_dialog);
			}
		{% endif %}

		function load_tasks_and_comments(ten_most_recent)
		{
			let data = serialize("#history_form");
			if (data.start)	data.start = moment(data.start, "MM/DD/YYYY").unix();
			if (data.end) data.end = moment(data.end, "MM/DD/YYYY").add(1, 'day').unix();
			{# Add one day because by default the time is midnight the day of. We want to include the full duration of the last day. #}
            let tasks_and_comments_url = "{% url 'past_comments_and_tasks' %}?" + $.param(data);
			if (ten_most_recent)
            {
                tasks_and_comments_url = "{% url 'ten_most_recent_past_comments_and_tasks' 999 %}?".replace('999', data.tool_id);
            }
            {# Load results, set previous url only if successfull #}
            let failure_dialog = ajax_complete_callback("Unable to find past tasks & comments", "There was a problem looking up past tasks & comments.");
            let callback = function(response, status, xml_header_request)
            {
                if (status !== "error") {
                    previous_tasks_and_comments_url = tasks_and_comments_url;
                }
                return failure_dialog(response, status, xml_header_request);
            }
            $("#past_tasks_and_comments").load(tasks_and_comments_url, callback);
		}

		function export_tasks_and_comments()
        {
            {# Reload and export results of last url used #}
            let export_url = previous_tasks_and_comments_url + "&export=true";
            let export_failure_dialog = ajax_complete_callback("Unable to export past tasks & comments", "There was a problem exporting past tasks & comments.");
            let export_callback = function(response, status, xml_header_request)
            {
                if (status !== "error") {
                    window.location = export_url;
                }
                return export_failure_dialog(response, status, xml_header_request);
            }
            $("#past_tasks_and_comments").load(previous_tasks_and_comments_url, export_callback);
        }

		function load_tasks_and_comments_for_last_three_months()
		{
			let start = moment().subtract(3, 'months').format("MM/DD/YYYY");
			let end = moment().format("MM/DD/YYYY");
			$("#task_and_comment_start").val(start);
			$("#task_and_comment_end").val(end);
			load_tasks_and_comments();
		}

		function load_ten_most_recent_tasks_and_comments()
		{
			load_tasks_and_comments(true);
		}

		function load_usage_data(tool_id, csv_export)
		{
			let failure_dialog = ajax_complete_callback("Unable to find usage data", "There was a problem looking up usage data.");
			let data = serialize("#usage_data_form");
			data.csrfmiddlewaretoken= "{{ csrf_token }}";
			if (data.data_history_start_date) data.start = moment(data.data_history_start_date, "MM/DD/YYYY").unix();
			if (data.data_history_end_date) data.end = moment(data.data_history_end_date, "MM/DD/YYYY").unix();
			$("#usage_data").load("{% url 'usage_data_history' 999 %}".replace('999', tool_id), data, failure_dialog);
			if (csv_export)
			{
				$('#hidden_data_csv').val('true');
				$('#hidden_data_start').val(data.start);
				$('#hidden_data_end').val(data.end);
				$('#usage_data_form').submit();
			}
		}

		function refresh_sidebar_tool_icons()
		{
		    $.getScript('{% url 'refresh_sidebar_icons' item_type='tool' %}')
		}

		function on_load()
		{
			{% if device == 'desktop' %}
				set_item_link_callback(refresh_tool_status);
				enable_item_tree_toggling();
				$('#item_search').autocomplete('tools', on_item_search_selection, {% json_search_base_with_extra_fields tools %}, true);
				$("#item_search").focus();
				load_sidebar_state();
				$(".item_tree").show();
				{# Tool tree is initially hidden so that previous expand/collapse state of categories is configured before it's visible. #}
				{% if selected_tool %}
					expand_to_item({{ selected_tool }}, 'tool');
				{% endif %}
				set_interval_when_visible(document, refresh_sidebar_tool_icons, 30000);
			{% endif %}
			refresh_tool_status();
		}

		$(on_load);

	</script>

{% endblock %}
