descriptorhandler/template/descriptor_view.html

   1 <!--
   2 Copyright 2019 EveryUP srl
   3
   4 Licensed under the Apache License, Version 2.0 (the "License");
   5 you may not use this file except in compliance with the License.
   6 You may obtain a copy of the License at
   7
   8     http://www.apache.org/licenses/LICENSE-2.0
   9
  10 Unless required by applicable law or agreed to in writing, software
  11 distributed under the License is distributed on an  BASIS,
  12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13 See the License for the specific language governing permissions and
  14 limitations under the License.
  15 -->
  16
  17 {% extends "descriptor_view_base.html" %}
  18
  19 {% load staticfiles %}
  20
  21
  22 {% block title_header_big %}
  23 {{ block.super }}
  24 Edit {{ descriptor_type|upper }} Descriptor
  25 {% endblock %}
  26
  27
  28 {% block left_sidebar %}
  29 {% include 'osm/osm_project_left_sidebar.html' %}
  30 {% endblock %}
  31
  32 {% block breadcrumb_body %}
  33 {{ block.super }}
  34 {% if user.is_admin %}
  35         <li><a href="{% url 'projects:projects_list' %}">Projects</a></li>
  36 {% else%}
  37         <li><a href="#">Projects</a></li>
  38 {% endif %}
  39 <li><a href="{% url 'projects:open_project' %}">{{project_name}}</a></li>
  40 <li><a>{{descriptor_id}}</a></li>
  41 {% endblock %}
  42
  43 {% block tab_pane_button_list %}
  44 {{ block.super }}
  45 <li class="active" id="yaml_li"><a href="#yaml" data-toggle="tab"><i class="fa fa-file-code-o"></i> YAML</a></li>
  46 <li id="json_li"><a href="#json" data-toggle="tab"><i class="fa fa-file-code-o"></i> JSON</a></li>
  47 {% endblock %}
  48
  49 {% block nav_buttons_list %}
  50     {{ block.super }}
  51     <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>
  52     <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>
  53     <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>
  54
  55 {% endblock %}
  56
  57 {% block tab_pane_list %}
  58 {{ block.super }}
  59
  60 <!-- /.tab-pane -->
  61 <div class="active tab-pane" id="yaml">
  62     <textarea id="code_editor_yaml">
  63     </textarea>
  64 </div>
  65 <!-- /.tab-pane-->
  66
  67 <div class="tab-pane" id="json">
  68     <textarea id="code_editor_json">
  69     </textarea>
  70 </div>
  71
  72 {% endblock %}
  73
  74 {% block resource_block %}
  75 {{ block.super }}
  76
  77
  78 <script>
  79     var editorJSON;
  80     var editorYaml;
  81
  82     $(document).ready(function () {
  83         //var cmjsoneditor = CodeMirror.fromTextArea(document.getElementById("code_editor"), json_editor_settings);
  84         var myJsonTextArea = document.getElementById("code_editor_json");
  85         editorJSON = CodeMirror(function (elt) {
  86             myJsonTextArea.parentNode.replaceChild(elt, myJsonTextArea);
  87         }, json_editor_settings);
  88         editorJSON.setValue(JSON.stringify({{descriptor_strings.descriptor_string_json | safe}}, null, "\t"));
  89         editorJSON.setOption("autoRefresh", true);
  90         editorJSON.setSize("auto", "auto");
  91
  92         var myYamlTextArea = document.getElementById("code_editor_yaml");
  93         editorYaml = CodeMirror(function (elt) {
  94             myYamlTextArea.parentNode.replaceChild(elt, myYamlTextArea);
  95         }, yaml_editor_settings);
  96         var des_strings = {{descriptor_strings | safe}};
  97         editorYaml.setValue(des_strings.descriptor_string_yaml);
  98         editorYaml.setSize("auto", "auto");
  99     });
 100
 101
 102     function update(e, show_graph) {
 103         var dialog = bootbox.dialog({
 104             message: '<div class="text-center"><i class="fa fa-spin fa-spinner"></i> Loading...</div>',
 105             closeButton: false
 106         });
 107
 108         var id = $('.nav-tabs .active').attr('id');
 109         var type, text;
 110         switch (id) {
 111             case 'yaml_li':
 112                 type = 'yaml';
 113                 text = editorYaml.getValue();
 114                 break;
 115             case 'json_li':
 116                 type = 'json';
 117                 text = editorJSON.getValue();
 118                 break;
 119         }
 120         $.ajax({
 121             url: "/projects/descriptors/{{descriptor_type}}/{{descriptor_id}}/",
 122             type: 'POST',
 123             dataType: 'json',
 124             data: {
 125                 'csrfmiddlewaretoken': '{{csrf_token}}',
 126                 'type': type,
 127                 'text': text
 128             },
 129             success: function (result) {
 130                 if(show_graph){
 131                     goToGraph();
 132                 }
 133                 dialog.modal('hide');
 134                 $("#success-alert").fadeTo(2000, 500).slideDown(500, function(){
 135                     setTimeout(function () {
 136                         $("#success-alert").slideUp(500);
 137                     }, 2000);
 138
 139                 });
 140             },
 141             error: function (result) {
 142                 dialog.modal('hide');
 143                 var data = result.responseJSON;
 144                 var title = "Error " + (data && data.code ? data.code : 'unknown');
 145                 var message = data && data.detail ? data.detail : 'No detail available.';
 146                 bootbox.alert({
 147                     title: title,
 148                     message: message
 149                 });
 150             }
 151         });
 152     }
 153
 154 </script>
 155 {% endblock %}
 156
 157
 158 {% block footer %}
 159     {% include "footer.html" %}
 160 {% endblock %}