netslicehandler/template/nst_edit.html

   1 {% extends "base.html" %}
   2 {% load get %}
   3 {% load staticfiles %}
   4
   5
   6 {% block head_block %}
   7 {{ block.super }}
   8 <link rel="stylesheet" href="/static/bower_components/codemirror/lib/codemirror.css">
   9 <link rel="stylesheet" href="/static/bower_components/codemirror/addon/fold/foldgutter.css" />
  10 <link rel="stylesheet" href="/static/bower_components/codemirror/theme/neat.css">
  11 <link rel="stylesheet" href="/static/bower_components/codemirror/addon/dialog/dialog.css">
  12 <link rel="stylesheet" href="/static/bower_components/codemirror/addon/display/fullscreen.css">
  13 {% endblock %}
  14 {% block title_header_big %}
  15 {{ block.super }}
  16 Network Slices Templates
  17 {% endblock %}
  18 {% block left_sidebar %}
  19
  20 {% include 'osm/osm_project_left_sidebar.html' %}
  21
  22 {% endblock %}
  23
  24
  25 {% block breadcrumb_body %}
  26 {{ block.super }}
  27 <li><a href="{% url "netslices:list_templates" %}">NetSlice Templates</a></li>
  28 {% endblock %}
  29
  30 {% block content_body %}
  31 {{ block.super }}
  32
  33 {% csrf_token %}
  34 <div class="row">
  35     <div class="col-md-12">
  36         <div class="nav-tabs-custom" style="position: relative;">
  37             <ul class="nav nav-tabs" >
  38                 <li class="active" id="yaml_li"><a href="#yaml" data-toggle="tab"><i class="fa fa-file-code-o"></i> YAML</a></li>
  39                 <li class="pull-right"><button id="save" type="button" class="btn btn-block btn-primary btn-sm"  onclick="update()" ><i class="fa fa-save"></i> Update</button></li>
  40
  41             </ul>
  42             <div class="alert alert-success" id="success-alert" style="position: absolute; z-index: 100; top: 44px; left: 0; width: 100%;
  43             border-radius: 1px;
  44             background-color: rgba(0, 166, 90, 0.8) !important;
  45             text-align: center;
  46             border-color: rgba(0, 141, 76, 0.4);" hidden>
  47             <button type="button" class="close" onclick="$('#success-alert').toggle()">x</button>
  48             <strong>Success! </strong>
  49             Template updated!
  50             </div>
  51             <div class="tab-content">
  52                     <div class="active tab-pane" id="yaml">
  53                             <textarea id="code_editor_yaml">
  54                             </textarea>
  55                         </div>
  56             </div>
  57         </div>
  58
  59         <!-- <div class="box">
  60             <div class="box-header with-border">
  61                 <h3 class="box-title"></h3>
  62                 <div class="box-tools"></div>
  63             </div>
  64             <div class="box-body">
  65                 <textarea id="code_editor_yaml">
  66                 </textarea>
  67             </div>
  68         </div> -->
  69     </div>
  70 </div>
  71
  72 {% endblock %}
  73
  74 {% block resource_block %}
  75 {{ block.super }}
  76 <script src="/static/bower_components/codemirror/lib/codemirror.js" ></script>
  77     <script src="/static/bower_components/codemirror/addon/fold/foldcode.js" ></script>
  78     <script src="/static/bower_components/codemirror/addon/fold/foldgutter.js" ></script>
  79     <script src="/static/bower_components/codemirror/addon/fold/brace-fold.js" ></script>
  80     <script src="/static/bower_components/codemirror/mode/javascript/javascript.js" ></script>
  81     <script src="/static/bower_components/codemirror/mode/yaml/yaml.js" ></script>
  82     <script src="/static/bower_components/codemirror/mode/markdown/markdown.js" ></script>
  83     <script src="/static/bower_components/codemirror/addon/search/searchcursor.js" ></script>
  84     <script src="/static/bower_components/codemirror/addon/search/search.js" ></script>
  85     <script src="/static/bower_components/codemirror/addon/dialog/dialog.js" ></script>
  86     <script src="/static/bower_components/codemirror/addon/display/autorefresh.js" ></script>
  87     <script src="/static/bower_components/codemirror/addon/edit/matchbrackets.js" ></script>
  88     <script src="/static/bower_components/codemirror/addon/edit/closebrackets.js" ></script>
  89     <script src="/static/bower_components/codemirror/addon/display/fullscreen.js" ></script>
  90     <script src="/static/bower_components/codemirror/keymap/sublime.js" ></script>
  91 <script>
  92     var csrf_token = '{{csrf_token}}';
  93
  94     var table;
  95     var yaml_editor_settings = {
  96             mode: "yaml",
  97             showCursorWhenSelecting: true,
  98             autofocus: true,
  99             autoRefresh: true,
 100             lineNumbers: true,
 101             lineWrapping: true,
 102             foldGutter: true,
 103             gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
 104             autoCloseBrackets: true,
 105             matchBrackets: true,
 106             extraKeys: {
 107                 "F11": function (cm) {
 108                     cm.setOption("fullScreen", !cm.getOption("fullScreen"));
 109                 },
 110                 "Esc": function (cm) {
 111                     if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
 112                 },
 113                 "Ctrl-Q": function (cm) {
 114                     cm.foldCode(cm.getCursor());
 115                 }
 116             },
 117             theme: "neat",
 118             keyMap: "sublime"
 119         };
 120
 121
 122         var myYamlTextArea = document.getElementById("code_editor_yaml");
 123         var editorYaml = CodeMirror(function (elt) {
 124                 myYamlTextArea.parentNode.replaceChild(elt, myYamlTextArea);
 125             }, yaml_editor_settings);
 126
 127     var template = {{ template | safe}};
 128
 129     $(document).ready(function () {
 130
 131         editorYaml.setValue(template.data);
 132         editorYaml.setSize("auto", "auto");
 133
 134     });
 135
 136     function update() {
 137         var dialog = bootbox.dialog({
 138             message: '<div class="text-center"><i class="fa fa-spin fa-spinner"></i> Loading...</div>',
 139             closeButton: false
 140         });
 141
 142
 143         text = editorYaml.getValue();
 144
 145         $.ajax({
 146             url: window.location.href,
 147             type: 'POST',
 148             dataType: 'json',
 149             data: {
 150                 'csrfmiddlewaretoken': '{{csrf_token}}',
 151                 'text': text
 152             },
 153             success: function (result) {
 154
 155                 dialog.modal('hide');
 156                 $("#success-alert").fadeTo(2000, 500).slideDown(500, function(){
 157                     setTimeout(function () {
 158                         $("#success-alert").slideUp(500);
 159                     }, 2000);
 160
 161                 });
 162             },
 163             error: function (result) {
 164                 dialog.modal('hide');
 165                 var data = result.responseJSON;
 166                 var title = "Error " + (data && data.code ? data.code : 'unknown');
 167                 var message = data && data.detail ? data.detail : 'No detail available.';
 168                 bootbox.alert({
 169                     title: title,
 170                     message: message
 171                 });
 172             }
 173         });
 174     }
 175 </script>
 176
 177 {% endblock %}