descriptorhandler/template/descriptor_view.html

{% extends "descriptor_view_base.html" %}

{% load staticfiles %}


{% block title_header_big %}
{{ block.super }}
Edit {{ descriptor_type|upper }} Descriptor
{% endblock %}


{% block left_sidebar %}
{% include 'osm/osm_project_left_sidebar.html' %}
{% endblock %}

{% block breadcrumb_body %}
{{ block.super }}
<li><a href="{% url 'projects:open_project' %}">{{project_id}}</a></li>
<li><a href="{% url 'projects:descriptors:list_descriptors' descriptor_type=descriptor_type %}">{{ descriptor_type }} Descriptors</a></li>
<li><a>{{descriptor_id}}</a></li>
{% endblock %}

{% block tab_pane_button_list %}
{{ block.super }}
<li class="active" id="yaml_li"><a href="#yaml" data-toggle="tab"><i class="fa fa-file-code-o"></i> YAML</a></li>
<li id="json_li"><a href="#json" data-toggle="tab"><i class="fa fa-file-code-o"></i> JSON</a></li>
{% endblock %}

{% block nav_buttons_list %}
    {{ block.super }}
    <li class="pull-right"><button id="save" type="button" class="btn btn-block btn-primary btn-sm"  onclick="update(this.id)" ><i class="fa fa-save"></i> Update</button></li>
    <li class="pull-right"><button id="save_show_graph" type="button" class="btn btn-block btn-primary btn-sm"  onclick="update(this.id)" disabled><i class="fa fa-save"></i> Update and Show Graph</button></li>
    <li class="pull-right"><button type="button" class="btn btn-block btn-primary btn-sm"  onclick="goToGraph()" disabled><i class="fa fa-sitemap"></i> Show Graph</button></li>

{% endblock %}

{% block tab_pane_list %}
{{ block.super }}

<!-- /.tab-pane -->
<div class="active tab-pane" id="yaml">
    <textarea id="code_editor_yaml">
    </textarea>
</div>
<!-- /.tab-pane-->

<div class="tab-pane" id="json">
    <textarea id="code_editor_json">
    </textarea>
</div>

{% endblock %}

{% block resource_block %}
{{ block.super }}


<script>
    var editorJSON;
    var editorYaml;

    $(document).ready(function () {
        //var cmjsoneditor = CodeMirror.fromTextArea(document.getElementById("code_editor"), json_editor_settings);
        var myJsonTextArea = document.getElementById("code_editor_json");
        editorJSON = CodeMirror(function (elt) {
            myJsonTextArea.parentNode.replaceChild(elt, myJsonTextArea);
        }, json_editor_settings);
        editorJSON.setValue(JSON.stringify({{descriptor_strings.descriptor_string_json | safe}}, null, "\t"));
        editorJSON.setOption("autoRefresh", true);
        editorJSON.setSize("auto", "auto");

        var myYamlTextArea = document.getElementById("code_editor_yaml");
        editorYaml = CodeMirror(function (elt) {
            myYamlTextArea.parentNode.replaceChild(elt, myYamlTextArea);
        }, yaml_editor_settings);
        var des_strings = {{descriptor_strings | safe}};
        editorYaml.setValue(des_strings.descriptor_string_yaml);
        editorYaml.setSize("auto", "auto");
    });


    function update(e) {
        var dialog = bootbox.dialog({
            message: '<div class="text-center"><i class="fa fa-spin fa-spinner"></i> Loading...</div>',
            closeButton: false
        });

        var id = $('.nav-tabs .active').attr('id');
        var type, text;
        switch (id) {
            case 'yaml_li':
                type = 'yaml';
                text = editorYaml.getValue();
                break;
            case 'json_li':
                type = 'json';
                text = editorJSON.getValue();
                break;
        }
        $.ajax({
            url: "/projects/descriptors/{{descriptor_type}}/{{descriptor_id}}/",
            type: 'POST',
            dataType: 'json',
            data: {
                'csrfmiddlewaretoken': '{{csrf_token}}',
                'type': type,
                'text': text
            },
            success: function (result) {
                dialog.modal('hide');
                $("#success-alert").fadeTo(2000, 500).slideDown(500, function(){
                    setTimeout(function () {
                        $("#success-alert").slideUp(500);
                    }, 2000);

                });
            },
            error: function (result) {
                console.log(result);
                dialog.modal('hide');
                bootbox.alert(result);
            }
        });
    }

</script>
{% endblock %}


{% block footer %}
    {% include "footer.html" %}
{% endblock %}