new django app descriptionhandler

[osm/LW-UI.git] / descriptorhandler / template / descriptor_view.html

diff --git a/descriptorhandler/template/descriptor_view.html b/descriptorhandler/template/descriptor_view.html
new file mode 100644 (file)
index 0000000..2a18666
--- /dev/null
+++ b/descriptorhandler/template/descriptor_view.html
@@ -0,0 +1,132 @@
+{% 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 %}