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