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 href="{% url 'projects:descriptors:list_descriptors' descriptor_type=descriptor_type %}">{{ descriptor_type }} Descriptors</a></li>
  20 <li><a>{{descriptor_id}}</a></li>
  21 {% endblock %}
  22
  23 {% block tab_pane_button_list %}
  24 {{ block.super }}
  25 <li class="active" id="yaml_li"><a href="#yaml" data-toggle="tab"><i class="fa fa-file-code-o"></i> YAML</a></li>
  26 <li id="json_li"><a href="#json" data-toggle="tab"><i class="fa fa-file-code-o"></i> JSON</a></li>
  27 {% endblock %}
  28
  29 {% block nav_buttons_list %}
  30     {{ block.super }}
  31     <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>
  32     <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>
  33     <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>
  34
  35 {% endblock %}
  36
  37 {% block tab_pane_list %}
  38 {{ block.super }}
  39
  40 <!-- /.tab-pane -->
  41 <div class="active tab-pane" id="yaml">
  42     <textarea id="code_editor_yaml">
  43     </textarea>
  44 </div>
  45 <!-- /.tab-pane-->
  46
  47 <div class="tab-pane" id="json">
  48     <textarea id="code_editor_json">
  49     </textarea>
  50 </div>
  51
  52 {% endblock %}
  53
  54 {% block resource_block %}
  55 {{ block.super }}
  56
  57
  58 <script>
  59     var editorJSON;
  60     var editorYaml;
  61
  62     $(document).ready(function () {
  63         //var cmjsoneditor = CodeMirror.fromTextArea(document.getElementById("code_editor"), json_editor_settings);
  64         var myJsonTextArea = document.getElementById("code_editor_json");
  65         editorJSON = CodeMirror(function (elt) {
  66             myJsonTextArea.parentNode.replaceChild(elt, myJsonTextArea);
  67         }, json_editor_settings);
  68         editorJSON.setValue(JSON.stringify({{descriptor_strings.descriptor_string_json | safe}}, null, "\t"));
  69         editorJSON.setOption("autoRefresh", true);
  70         editorJSON.setSize("auto", "auto");
  71
  72         var myYamlTextArea = document.getElementById("code_editor_yaml");
  73         editorYaml = CodeMirror(function (elt) {
  74             myYamlTextArea.parentNode.replaceChild(elt, myYamlTextArea);
  75         }, yaml_editor_settings);
  76         var des_strings = {{descriptor_strings | safe}};
  77         editorYaml.setValue(des_strings.descriptor_string_yaml);
  78         editorYaml.setSize("auto", "auto");
  79     });
  80
  81
  82     function update(e) {
  83         var dialog = bootbox.dialog({
  84             message: '<div class="text-center"><i class="fa fa-spin fa-spinner"></i> Loading...</div>',
  85             closeButton: false
  86         });
  87
  88         var id = $('.nav-tabs .active').attr('id');
  89         var type, text;
  90         switch (id) {
  91             case 'yaml_li':
  92                 type = 'yaml';
  93                 text = editorYaml.getValue();
  94                 break;
  95             case 'json_li':
  96                 type = 'json';
  97                 text = editorJSON.getValue();
  98                 break;
  99         }
 100         $.ajax({
 101             url: "/projects/descriptors/{{descriptor_type}}/{{descriptor_id}}/",
 102             type: 'POST',
 103             dataType: 'json',
 104             data: {
 105                 'csrfmiddlewaretoken': '{{csrf_token}}',
 106                 'type': type,
 107                 'text': text
 108             },
 109             success: function (result) {
 110                 dialog.modal('hide');
 111                 $("#success-alert").fadeTo(2000, 500).slideDown(500, function(){
 112                     setTimeout(function () {
 113                         $("#success-alert").slideUp(500);
 114                     }, 2000);
 115
 116                 });
 117             },
 118             error: function (result) {
 119                 console.log(result);
 120                 dialog.modal('hide');
 121                 bootbox.alert(result);
 122             }
 123         });
 124     }
 125
 126 </script>
 127 {% endblock %}
 128
 129
 130 {% block footer %}
 131     {% include "footer.html" %}
 132 {% endblock %}