path: root/src/templates/workflow/viewport-base.html

{% extends "base.html" %}
{% load staticfiles %}

{% load bootstrap4 %}

{% block content %}

<!-- Pagination -->
<div class="row mt-3">
    <div class="col">
        <nav>
            <ul class="pagination d-flex flex-row" id="topPagination">
                <li class="page-item flex-shrink-1 page-control">
                    <a class="page-link" href="#" id="gob" onclick="go('prev')">
                        <i class="fas fa-backward"></i> Back
                    </a>
                </li>
                <li class="page-item flex-grow-1 active">
                    <a class="page-link disabled" href="#">
                        Select <i class="far fa-check-square"></i>
                    </a>
                </li>
                <li class="page-item flex-grow-1">
                    <a class="page-link disabled" href="#">
                        Configure <i class="far fa-square"></i>
                    </a>
                </li>
                <li class="page-item flex-grow-1">
                    <a class="page-link disabled" href="#">
                        Information <i class="far fa-square"></i>
                    </a>
                </li>
                <li class="page-item flex-grow-1">
                    <a class="page-link disabled" href="#">
                        OPNFV <i class="far fa-square"></i>
                    </a>
                </li>
                <li class="page-item flex-grow-1">
                    <a class="page-link disabled" href="#">
                        Confirm <i class="far fa-square"></i>
                    </a>
                </li>
                <li class="page-item flex-shrink-1 page-control">
                    <a class="page-link text-right" href="#" id="gof" onclick="go('next')">
                        Next <i class="fas fa-forward"></i>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</div>
<!-- Top header -->
<div class="row px-4">
    <div class="col">
        <div id="iframe_header" class="row view-header">
            <div class="col-lg-12">
                <h1 class="d-inline-block" id="view_title"></h1>
                <span class="description text-muted" id="view_desc"></span>
                <p id="view_message"></p>
            </div>
            <script>
                function update_description(title, desc) {
                    document.getElementById("view_title").innerText = title;
                    document.getElementById("view_desc").innerText = desc;
                }

                function update_message(message, stepstatus) {
                    document.getElementById("view_message").innerText = message;
                    document.getElementById("view_message").className = "step_message";
                    document.getElementById("view_message").classList.add("message_" + stepstatus);
                }
            </script>
        </div>
    </div>
    <div class="col-auto align-self-center d-flex">
        <button id="cancel_btn" class="btn btn-danger ml-auto" onclick="cancel_wf()">Cancel</button>
    </div>
</div>
<div class="row d-flex flex-column flex-grow-1">
    <div class="container-fluid d-flex flex-column h-100">
        <div class="row d-flex flex-grow-1 p-4">
            <div class="col-12 d-flex border flex-grow-1 px-0">
                <iframe src="/wf/workflow" class="w-100 h-100" scrolling="yes" id="viewport-iframe"
                    frameBorder="0"></iframe>
            </div>
        </div>
    </div>
</div>
{% csrf_token %}

<script type="text/javascript">
    update_context();
    var step = 0;
    var page_count = 0;
    var context_data = false;

    function go(to) {
        step_on_leave();
        request_leave(to);
    }

    function request_leave(to) {
        $.ajax({
            type: "GET",
            url: "/wf/manager/",
            beforeSend: function (request) {
                request.setRequestHeader("X-CSRFToken",
                    $('input[name="csrfmiddlewaretoken"]').val());
            },
            success: function (data) {
                confirm_permission(to, data);
                update_page(data);
            }
        });
    }

    function confirm_permission(to, data) {
        if (errors_exist(data)) {
            if (to != "prev") {
                return;
            }
        }

        var problem = function () {
            alert("There was a problem");
        }
        //makes an asynch request
        req = new XMLHttpRequest();
        url = "/wf/workflow/?step=" + to;
        req.open("GET", url, true);
        req.onload = function (e) {
            if (req.readyState === 4) {
                if (req.status < 300) {
                    document.getElementById("viewport-iframe").srcdoc = this.responseText;
                } else {
                    problem();
                }
            } else {
                problem();
            }
        }
        req.onerror = problem;
        req.send();
    }

    function step_on_leave() {
        document.getElementById("viewport-iframe").contentWindow.step_on_leave();
    }

    function errors_exist(data) {
        var stat = data['steps'][data['active']]['valid'];
        if (stat >= 100 && stat < 200) {
            return true;
        } else {
            return false;
        }
    }

    function update_context() {
        $.ajax({
            type: "GET",
            url: "/wf/manager/",
            beforeSend: function (request) {
                request.setRequestHeader("X-CSRFToken",
                    $('input[name="csrfmiddlewaretoken"]').val());
            },
            success: function (data) {
                update_page(data);
            }
        });
    }

    function update_page(data) {
        context_data = data;
        update_breadcrumbs(data);
        if (data["workflow_count"] == 1) {
            document.getElementById("cancel_btn").innerText = "Exit Workflow";
        } else {
            document.getElementById("cancel_btn").innerText = "Return to Parent";
        }
    }

    function update_breadcrumbs(meta_json) {
        step = meta_json['active'];
        page_count = meta_json['steps'].length;
        if (step == 0) {
            var btn = document.getElementById("gob");
            btn.classList.add("invisible");
            btn.disabled = true;
        } else {
            var btn = document.getElementById("gob");
            btn.classList.remove("invisible");
            btn.disabled = false;
        }
        if (step == page_count - 1) {
            var btn = document.getElementById("gof");
            btn.classList.add("invisible");
            btn.disabled = true;
        } else {
            var btn = document.getElementById("gof");
            btn.classList.remove("invisible");
            btn.disabled = false;
        }
        //remove all children of breadcrumbs so we can redraw
        $("#topPagination").children().not(".page-control").remove();
        draw_steps(meta_json);
    }

    function draw_steps(meta_json) {
        for (var i = 0; i < meta_json["steps"].length; i++) {
            meta_json["steps"][i]["index"] = i;
            var step_btn = create_step(meta_json["steps"][i], i == meta_json["active"]);
            $("#topPagination li:last-child").before(step_btn);
        }
    }

    function create_step(step_json, active) {
        var step_dom = document.createElement("li");
        // First create the dom object depending on active or not
        if (active) {
            step_dom.className = "topcrumb active";
        } else {
            step_dom.className = "topcrumb";
        }
        $(step_dom).html(`<span class="d-flex align-items-center justify-content-center text-capitalize w-100">${step_json['title']}</span>`)
        var code = step_json['valid'];
        stat = "";
        msg = "";
        if (code < 100) {
            $(step_dom).children().first().append("<i class='ml-2 far fa-square'></i>")
            stat = "";
            msg = "";
        } else if (code < 200) {
            $(step_dom).children().first().append("<i class='ml-2 fas fa-minus-square'></i>")
            stat = "invalid";
            msg = step_json['message'];
        } else if (code < 300) {
            $(step_dom).children().first().append("<i class='ml-2 far fa-check-square'></i>")
            stat = "valid";
            msg = step_json['message'];
        }
        if (step_json['enabled'] == false) {
            step_dom.classList.add("disabled");
        }
        if (active) {
            update_message(msg, stat);
        }

        var step_number = step_json['index'];
        return step_dom;
    }

    function cancel_wf() {
        var form = $("#workflow_pop_form");
        var formData = form.serialize();
        var req = new XMLHttpRequest();
        req.open("POST", "/wf/workflow/finish/", false);
        req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        req.onerror = function () {
            alert("problem occurred while trying to cancel current workflow");
        }
        req.onreadystatechange = function () {
            if (req.readyState === 4) {
                refresh_iframe();
            }
        };
        req.send(formData);
    }

    function refresh_iframe() {
        req = new XMLHttpRequest();
        url = "/wf/workflow/";
        req.open("GET", url, true);
        req.onload = function (e) {
            var doc = document.getElementById("viewport-iframe").contentWindow.document;
            doc.open();
            doc.write(this.responseText);
            doc.close();
        }
        req.send();
    }

    function write_iframe(contents) {
        document.getElementById("viewport-iframe").contentWindow.document.innerHTML = contents;
    }

    function redirect_root() {
        window.location.replace('/wf/');
    }

    function add_wf(type) {
        add_wf_internal(type, false);
    }

    function add_edit_wf(type, target) {
        add_wf_internal(type, target);
    }

    function add_wf_internal(type, itemid) {
        data = {
            "add": type
        };
        if (itemid) {
            data['target'] = itemid;
        }
        $.ajax({
            type: "POST",
            url: "/wf/manager/",
            data: data,
            beforeSend: function (request) {
                request.setRequestHeader("X-CSRFToken",
                    $('input[name="csrfmiddlewaretoken"]').val()
                );
            },
            success: refresh_wf_iframe()
        });
    }

    function refresh_wf_iframe() {
        window.location = window.location;
    }
</script>
<div class="d-none" id="workflow_pop_form_div">
    <form id="workflow_pop_form" action="/wf/workflow/finish/" method="post">
        {% csrf_token %}
    </form>
</div>
{% endblock content %}