{% extends 'base.html' %}

{% block script %}
<script type="text/javascript">
    $(document).ready(function() {
        let updateTables = function() {
            $('#nodestable').load('/list_nodes');
            $('#jobstable').load('/list_jobs');
        };
        setInterval(updateTables, 1000);
    });
    function formVisibility() {
        let elem = document.getElementById("addcronform");
        if (elem.style.display === "none") {
            elem.style.display = "block";
        } else {
            elem.style.display = "none";
        }
    }
    function logVisibility() {
        let elem = document.getElementById("joblogdiv");
        if (elem.style.display === "none") {
            elem.style.display = "block";
        } else {
            elem.style.display = "none";
        }
    }
    function addJob() {
        let request_data = {
            'command': document.getElementById("command").value,
            'minute': document.getElementById("minute").value,
            'hour': document.getElementById("hour").value,
            'dom': document.getElementById("dom").value,
            'month': document.getElementById("month").value,
            'dow': document.getElementById("dow").value
        };
        if (document.getElementById("disabled").checked) {
            request_data['disabled'] = 'true';
        }
        $.ajax({
            url: '/add_job',
            data: request_data,
            type: 'POST',
            success: function (result) {
                console.log(result);
                let elem = document.getElementById("addcronform");
                elem.style.display = "none";
            },
            error: function (xhr) {
                console.log(xhr.status);
                console.log(xhr.responseText);
            }
        });
    }
    function toggleJob(elem) {
        let kve = $(elem).data("cmd").split(',');
        let request_data = {};
        for (let i = 0; i < kve.length; i++) {
            request_data[kve[i].split(':')[0]] = kve[i].split(':')[1];
        }
        $.ajax({
            url: '/toggle_job',
            data: request_data,
            type: 'POST',
            success: function (result) {
                console.log(result);
            },
            error: function (xhr) {
                console.log(xhr.status);
                console.log(xhr.responseText);
            }
        });
    }
    function removeJob(elem) {
        let kve = $(elem).data("cmd").split(',');
        let request_data = {};
        for (let i = 0; i < kve.length; i++) {
            request_data[kve[i].split(':')[0]] = kve[i].split(':')[1];
        }
        $.ajax({
            url: '/remove_job',
            data: request_data,
            type: 'POST',
            success: function (result) {
                console.log(result);
            },
            error: function (xhr) {
                console.log(xhr.status);
                console.log(xhr.responseText);
            }
        });
    }
    function jobLog(elem) {
        let kve = $(elem).data("cmd").split(',');
        let request_data = {};
        for (let i = 0; i < kve.length; i++) {
            request_data[kve[i].split(':')[0]] = kve[i].split(':')[1];
        }
        $.ajax({
            url: '/get_job_log',
            data: request_data,
            type: 'POST',
            success: function (result) {
                console.log(result);
                $('#joblog').html(result);
            },
            error: function (xhr) {
                console.log(xhr.status);
                console.log(xhr.responseText);
            }
        });
        logVisibility();
    }
    function killJob(elem) {
        let kve = $(elem).data("cmd").split(',');
        let request_data = {};
        for (let i = 0; i < kve.length; i++) {
            request_data[kve[i].split(':')[0]] = kve[i].split(':')[1];
        }
        $.ajax({
            url: '/kill_job',
            data: request_data,
            type: 'POST',
            success: function (result) {
                console.log(result);
            },
            error: function (xhr) {
                console.log(xhr.status);
                console.log(xhr.responseText);
            }
        });
    }
    function runJob(elem) {
        let kve = $(elem).data("cmd").split(',');
        let request_data = {};
        for (let i = 0; i < kve.length; i++) {
            request_data[kve[i].split(':')[0]] = kve[i].split(':')[1];
        }
        $.ajax({
            url: '/run_job',
            data: request_data,
            type: 'POST',
            success: function (result) {
                console.log(result);
            },
            error: function (xhr) {
                console.log(xhr.status);
                console.log(xhr.responseText);
            }
        });
    }
    function importJobs(event) {
        let input = event.target;
        let reader = new FileReader();
        reader.onload = function() {
            let request_data = {'payload': reader.result};
            $.ajax({
                url: '/import',
                data: request_data,
                type: 'POST',
                success: function (result) {
                    console.log(result);
                },
                error: function (xhr) {
                    console.log(xhr.status);
                    console.log(xhr.responseText);
                }
            });
        };
        reader.readAsText(input.files[0]);
    }
    function exportJobs(event) {
        $.ajax({
            url: '/export',
            type: 'GET',
            success: function (result) {
                let dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(result));
                let downloadAnchorNode = document.createElement('a');
                downloadAnchorNode.setAttribute("href",     dataStr);
                downloadAnchorNode.setAttribute("download", "jobs.json");
                document.body.appendChild(downloadAnchorNode); // required for firefox
                downloadAnchorNode.click();
                downloadAnchorNode.remove();
            },
            error: function (xhr) {
                console.log(xhr.status);
                console.log(xhr.responseText);
            }
        });
    }
</script>
{% endblock %}

{% block title %}
dcron console
{% endblock %}

{% block content %}
<div id="nodestable"></div>
<p>overview of active nodes</p>
<br/><br/>
<div align="center">
    <table>
        <tr><td style="text-align:right" width="50%">import jobs</td><td style="text-align:left" width="50%"><input type="file" accept="application/json" onchange="importJobs(event)"></td></tr>
        <tr><td style="text-align:right" width="50%">export jobs</td><td style="text-align:left" width="50%"><input type='button' id='download' value='Download' onclick="exportJobs(event)"></td></tr>
    </table>
</div>
<div id="jobstable"></div>
<p>overview of active jobs</p>
<div align="center" style="display:none" id="joblogdiv">
    <div id="joblog"></div>
    <button id="hidejoblog" onclick="logVisibility();">close log</button>
</div>
<br/><br/>
<div align="center">
    <button id="addcron" onclick="formVisibility();">add cron job</button>
    <br/>
    <form id="addcronform" action="javascript:addJob()" name="addcronform" style="display:none" accept-charset="utf-8" enctype="application/x-www-form-urlencoded">
        <table>
            <tr>
                <td><label for="minute">Minute</label></td>
                <td><input id="minute" name="minute" value="*"/></td>
            </tr>
            <tr>
                <td><label for="hour">Hour</label></td>
                <td><input id="hour" name="hour" value="*"/></td>
            </tr>
            <tr>
                <td><label for="dom">Day of month</label></td>
                <td><input id="dom" name="dom" value="*"/></td>
            </tr>
            <tr>
                <td><label for="month">Month</label></td>
                <td><input id="month" name="month" value="*"/></td>
            </tr>
            <tr>
                <td><label for="dow">Day of week</label></td>
                <td><input id="dow" name="dow" value="*"/></td>
            </tr>
            <tr>
                <td><label for="command">Command</label></td>
                <td><input id="command" name="command" /></td>
            </tr>
            <tr>
                <td><label for="disabled">Disabled</label></td>
                <td><input id="disabled" type="checkbox" name="disabled" checked value="disabled"></td>
            </tr>
        </table>
        <br/>
         <div align="center">
             <button id="addjob" type="submit">submit new job</button>
        </div>
    </form>
</div>
{% endblock %}

{% block footer %}
<p>source available at <a href="https://github.com/witlox/dcron" target="_blank">github.com/witlox/dcron</a></p>
{% endblock %}