descriptorhandler/template/descriptor_view.html

   1 {% extends "descriptor_view_base.html" %}
   2
   3 {% load staticfiles %}
   4
   5
   6 {% block title_header_big %}
   7 {{ block.super }}
   8 Edit {{ descriptor_type|upper }} Descriptor
   9 {% endblock %}
  10
  11
  12 {% block left_sidebar %}
  13 {% include 'osm/osm_project_left_sidebar.html' %}
  14 {% endblock %}
  15
  16 {% block breadcrumb_body %}
  17 {{ block.super }}
  18 <li><a href="{% url 'projects:open_project' %}">{{project_id}}</a></li>
  19 <li><a>{{descriptor_id}}</a></li>
  20 {% endblock %}
  21
  22 {% block tab_pane_button_list %}
  23 {{ block.super }}
  24 <li class="active" id="yaml_li"><a href="#yaml" data-toggle="tab"><i class="fa fa-file-code-o"></i> YAML</a></li>
  25 <li id="json_li"><a href="#json" data-toggle="tab"><i class="fa fa-file-code-o"></i> JSON</a></li>
  26 {% endblock %}
  27
  28 {% block nav_buttons_list %}
  29     {{ block.super }}
  30     <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>
  31     <li class="pull-right"><button id="save_show_graph" type="button" class="btn btn-block btn-primary btn-sm"  onclick="update(this.id, 'true')"><i class="fa fa-save"></i> Update and Show Graph</button></li>
  32     <li class="pull-right"><button type="button" class="btn btn-block btn-primary btn-sm"  onclick="goToGraph()"><i class="fa fa-sitemap"></i> Show Graph</button></li>
  33
  34 {% endblock %}
  35
  36 {% block tab_pane_list %}
  37 {{ block.super }}
  38
  39 <!-- /.tab-pane -->
  40 <div class="active tab-pane" id="yaml">
  41     <textarea id="code_editor_yaml">
  42     </textarea>
  43 </div>
  44 <!-- /.tab-pane-->
  45
  46 <div class="tab-pane" id="json">
  47     <textarea id="code_editor_json">
  48     </textarea>
  49 </div>
  50
  51 {% endblock %}
  52
  53 {% block resource_block %}
  54 {{ block.super }}
  55
  56
  57 <script>
  58     var editorJSON;
  59     var editorYaml;
  60
  61     $(document).ready(function () {
  62         //var cmjsoneditor = CodeMirror.fromTextArea(document.getElementById("code_editor"), json_editor_settings);
  63         var myJsonTextArea = document.getElementById("code_editor_json");
  64         editorJSON = CodeMirror(function (elt) {
  65             myJsonTextArea.parentNode.replaceChild(elt, myJsonTextArea);
  66         }, json_editor_settings);
  67         editorJSON.setValue(JSON.stringify({{descriptor_strings.descriptor_string_json | safe}}, null, "\t"));
  68         editorJSON.setOption("autoRefresh", true);
  69         editorJSON.setSize("auto", "auto");
  70
  71         var myYamlTextArea = document.getElementById("code_editor_yaml");
  72         editorYaml = CodeMirror(function (elt) {
  73             myYamlTextArea.parentNode.replaceChild(elt, myYamlTextArea);
  74         }, yaml_editor_settings);
  75         var des_strings = {{descriptor_strings | safe}};
  76         editorYaml.setValue(des_strings.descriptor_string_yaml);
  77         editorYaml.setSize("auto", "auto");
  78     });
  79
  80
  81     function update(e, show_graph) {
  82         var dialog = bootbox.dialog({
  83             message: '<div class="text-center"><i class="fa fa-spin fa-spinner"></i> Loading...</div>',
  84             closeButton: false
  85         });
  86
  87         var id = $('.nav-tabs .active').attr('id');
  88         var type, text;
  89         switch (id) {
  90             case 'yaml_li':
  91                 type = 'yaml';
  92                 text = editorYaml.getValue();
  93                 break;
  94             case 'json_li':
  95                 type = 'json';
  96                 text = editorJSON.getValue();
  97                 break;
  98         }
  99         $.ajax({
 100             url: "/projects/descriptors/{{descriptor_type}}/{{descriptor_id}}/",
 101             type: 'POST',
 102             dataType: 'json',
 103             data: {
 104                 'csrfmiddlewaretoken': '{{csrf_token}}',
 105                 'type': type,
 106                 'text': text
 107             },
 108             success: function (result) {
 109                 if(show_graph){
 110                     goToGraph();
 111                 }
 112                 dialog.modal('hide');
 113                 $("#success-alert").fadeTo(2000, 500).slideDown(500, function(){
 114                     setTimeout(function () {
 115                         $("#success-alert").slideUp(500);
 116                     }, 2000);
 117
 118                 });
 119             },
 120             error: function (result) {
 121                 dialog.modal('hide');
 122                 var data = result.responseJSON;
 123                 var title = "Error " + (data && data.code ? data.code : 'unknown');
 124                 var message = data && data.detail ? data.detail : 'No detail available.';
 125                 bootbox.alert({
 126                     title: title,
 127                     message: message
 128                 });
 129             }
 130         });
 131     }
 132
 133 </script>
 134 {% endblock %}
 135
 136
 137 {% block footer %}
 138     {% include "footer.html" %}
 139 {% endblock %}