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