{% extends "layout.html" %}
{% set active_page = "task" %}

{% block title %}Tasks{% endblock title %}

{% block body %}

    <style>
        .task-wrapper {
            border: #dddddd 1px solid;
            border-radius: 4px;
            padding: 5px 10px;
            margin-bottom: 0.5em;
        }

        .task-name {
            color: #9CA0A2;
        }

        .task-info {

        }

        .progress {
            position: relative;
            height: 100%;

        }

        .progress span {
            position: absolute;
            display: block;
            width: 100%;
            color: black;
        }

        .form-inline > * {
            margin: 0 4px;
        }

    </style>

    <div class="container">

        <div class="card">
            <div class="card-header">Add task</div>
            <div class="card-body">
                <form class="form-inline" action="/task/add">
                    <select title="Select task type" class="form-control" id="type" name="type">
                        <option hidden>Create task...</option>
                        <option value="1">Indexing</option>
                        <option value="2">Thumnail Generation</option>
                    </select>

                    <select title="Select directory" class="form-control" id="directory" name="directory" >
                        <option hidden>For directory...</option>
                        {% for dir_id in directories %}
                            <option value="{{ dir_id }}">{{ directories[dir_id].name }}</option>
                        {% endfor %}
                    </select>

                    <button class="form-control btn btn-success"><i class="fas fa-plus"></i> Add</button>
                </form>
            </div>
        </div>

        <script>
            function updateProgressBar() {
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                    if (this.readyState === 4 && this.status === 200) {

                        if(this.responseText.length === 0) {
                            return;
                        }

                        let currentTask = JSON.parse(this.responseText);
                        let percent = currentTask.parsed / currentTask.total * 100;

                        try {

                            if (currentTask.total === 0) {

                                document.getElementById("task-label-" + currentTask.id).innerHTML = "Calculating file count...";

                            } else {
                                let bar = document.getElementById("task-bar-" + currentTask.id);
                                bar.setAttribute("style", "width: " + percent + "%;");
                                document.getElementById("task-label-" + currentTask.id).innerHTML = currentTask.parsed + " / " + currentTask.total + "  (" + percent.toFixed(2) + "%)";

                                if (percent === 100) {
                                    bar.classList.add("bg-success")
                                }
                            }

                        } catch (e) {
                            window.reload();
                        }

                    }
                };
                xhttp.open("GET", "/task/current", true);
                xhttp.send();
            }

            window.setInterval(updateProgressBar, 125);
        </script>

        <div class="card">
            <div class="card-header">Ongoing tasks</div>
            <div class="card-body">
                {% for task_id in tasks | sort() %}
                    <div class="task-wrapper container-fluid">
                        <a class="task-name" href="/directory/{{ tasks[task_id].dir_id }}">{{ directories[tasks[task_id].dir_id].name }}</a>
                        <span class="task-info"> -
                            {% if tasks[task_id].type == 1 %}
                            Indexing
                            {% else %}
                            Thumbnail generation
                            {% endif %}
                        </span>

                        <div class="d-flex p-2">
                            <div class="container-fluid p-2">
                                <div class="progress">
                                    <div id="task-bar-{{ task_id }}" class="progress-bar" role="progressbar" style="width: 0;">
                                        <span id="task-label-{{ task_id }}">Queued</span>
                                    </div>
                                </div>
                            </div>

                            <div class="p-2"><a class="btn btn-danger" href="/task/{{ task_id }}/del">Cancel</a></div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>

    </div>

{% endblock body %}