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

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

{% load bootstrap3 %}

{% block content %}

<style>
    .go_btn{

        position: absolute;
        width: 100px;
        top: 170px;
        height: calc(100% - 170px);

    }
    .go_btn_disabled{
            background-color: #ffffff;
    }
    .go_forward{
        right: 0px;
        border-left: none;
    }

    .go_back{
        left: 251px;
        border-right: none;
    }


    .btn_wrapper{
        text-align: center;
        margin-bottom: 5px;

    }

    {% if DEBUG %}

    .add_btn_wrapper{
        right: 130px;
        top: 10px;
        position: absolute;
    }
    {% endif %}



    .options{
        position: absolute;
        top: 60px;
        right: 20px;
    }

    #breadcrumbs {
        margin-bottom: 0;
    }

    .btn_wrapper {
        margin: 0;
    }

    .step{
        display: inline;
        padding: 7px;
        margin: 1px;
        font-size: 14pt;
        cursor: default;
    }
    .step:active {
        -webkit-box-shadow: inherit;
        box-shadow: inherit;
    }
    .step_active:active {
        -webkit-box-shadow: inherit;
        box-shadow: inherit;
    }

    .step_active{
        display: inline;
        padding: 7px;
        margin: 1px;
        cursor: default;
        font-size: 14pt;
        padding-bottom: 4px !important;
        border-bottom: 4px solid #41ba78 !important;
    }

    .step_hidden
    {
        background: #EFEFEF;
        color: #999999;
    }

    .step_invalid::after
    {
        content: " \2612";
        color: #CC3300;
    }

    .step_valid::after
    {
        content: " \2611";
        color: #41ba78;
    }

    .step_untouched::after
    {
        content: " \2610";
    }

    .iframe_div {
        width: calc(100% - 450px);
        margin-left: 70px;
        height: calc(100vh - 155px);
        position: absolute;
        border: none;
    }

    .iframe_elem {
        width: 100%;
        height: calc(100vh - 155px);
        border: none;
    }

    #breadcrumbs {
        background-color: inherit;
    }

    #breadcrumbs.breadcrumb > li {
        border: 1px solid #cccccc;
        border-left: none;
    }
    #breadcrumbs.breadcrumb > li:first-child {
        border-left: 1px solid #cccccc;
    }
    #breadcrumbs.breadcrumb > li + li:before {
        content: "";
        width: 0;
        margin: 0;
        padding: 0;
    }
</style>

<button id="gof" onclick="go('next')" class="btn go_btn go_forward">Go Forward</button>
<button id="gob" onclick="go('prev')" class="btn go_btn go_back">Go Back</button>

<div class="options">
    <button id="cancel_btn" class="btn btn-primary" onclick="cancel_wf()">Cancel</button>
</div>
<div class="btn_wrapper">
<ol id="breadcrumbs" class="btn-group breadcrumb">
</ol>
</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) )
        {
            var continueanyway = confirm("The current step has errors that will prevent it from saving. Continue anyway?");
            if( !continueanyway )
            {
                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("go_btn_disabled");
                btn.disabled = true;
        }
        else
        {
                var btn = document.getElementById("gob");
                btn.classList.remove("go_btn_disabled");
                btn.disabled = false;
        }
        if( step == page_count - 1 )
        {
                var btn = document.getElementById("gof");
                btn.classList.add("go_btn_disabled");
                btn.disabled = true;
        }
        else
        {
                var btn = document.getElementById("gof");
                btn.classList.remove("go_btn_disabled");
                btn.disabled = false;
        }
        //remove all children of breadcrumbs so we can redraw
        var container = document.getElementById("breadcrumbs");
        while(container.firstChild){
            container.removeChild(container.firstChild);
        }

        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"]);
            document.getElementById("breadcrumbs").appendChild(step_btn);
        }
    }

    function create_step(step_json, active){
        var step_dom = document.createElement("li");
        if(active){
            step_dom.className = "step_active";

        } else{
            step_dom.className = "step";
        }
        step_dom.appendChild(document.createTextNode(step_json['title']));
        var code = step_json['valid'];
        stat = "";
        msg = "";
        if( code < 100 )
        {
            step_dom.classList.add("step_untouched");

            stat = "";
            msg = "";
        }
        else if( code < 200 )
        {
            step_dom.classList.add("step_invalid");
            stat = "invalid";
            msg = step_json['message'];
        }
        else if( code < 300 )
        {
            step_dom.classList.add("step_valid");
            stat = "valid";
            msg = step_json['message'];
        }
        if( step_json['enabled'] == false )
        {
            step_dom.classList.add("step_hidden");
        }
        if(active)
        {
            update_message(msg, stat);
        }
        step_dom.classList.add("btn");

        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 id="iframe_header" class="row view-header">
    <div class="col-lg-12 step_header">
        <h1 class="step_title" id="view_title"></h1>
        <p class="description" id="view_desc"></p>
        <p class="step_message" id="view_message"></p>
    </div>
    <style>
        #view_desc{
            margin-bottom: 15px;
            margin-top: 5px;
            margin-left: 30px;
            display: inline;
        }
        #view_title{
            margin-top: 5px;
            margin-bottom: 0px;
            display: inline;
        }
        #view_message{
            margin-top: 10px;
            margin-bottom: 5px;
            float: right;
        }
        .message_invalid{
            color: #ff4400;
        }
        .message_valid{
            color: #44cc00;
        }
        .step_header{
            border-bottom: 1px solid #eee;
            border-top: 1px solid #eee;
            left: 101px;
            width: calc(100% - 202px);
        }
    </style>
    <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>
    <!-- /.col-lg-12 -->
</div>
<div style="display: none;" id="workflow_pop_form_div">
<form id="workflow_pop_form" action="/wf/workflow/finish/" method="post">
    {% csrf_token %}
</form>
</div>

<div class="iframe_div">
        <iframe src="/wf/workflow" class="iframe_elem" scrolling="yes" id="viewport-iframe"></iframe>
</div>
{% endblock content %}