1 {% extends
"base.html" %}
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">
14 {% block title_header_big %}
16 Network Slices Templates
18 {% block left_sidebar %}
20 {% include 'osm/osm_project_left_sidebar.html' %}
25 {% block breadcrumb_body %}
27 <li><a href=
"{% url "netslices:list_templates
" %}">NetSlice Templates
</a></li>
30 {% block content_body %}
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>
42 <div class=
"alert alert-success" id=
"success-alert" style=
"position: absolute; z-index: 100; top: 44px; left: 0; width: 100%;
44 background-color: rgba(0, 166, 90, 0.8) !important;
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>
51 <div class=
"tab-content">
52 <div class=
"active tab-pane" id=
"yaml">
53 <textarea id=
"code_editor_yaml">
59 <!-- <div class="box">
60 <div class="box-header with-border">
61 <h3 class="box-title"></h3>
62 <div class="box-tools"></div>
64 <div class="box-body">
65 <textarea id="code_editor_yaml">
74 {% block resource_block %}
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>
92 var csrf_token = '{{csrf_token}}';
95 var yaml_editor_settings = {
97 showCursorWhenSelecting: true,
103 gutters: [
"CodeMirror-linenumbers",
"CodeMirror-foldgutter"],
104 autoCloseBrackets: true,
107 "F11": function (cm) {
108 cm.setOption(
"fullScreen", !cm.getOption(
"fullScreen"));
110 "Esc": function (cm) {
111 if (cm.getOption(
"fullScreen")) cm.setOption(
"fullScreen", false);
113 "Ctrl-Q": function (cm) {
114 cm.foldCode(cm.getCursor());
122 var myYamlTextArea = document.getElementById(
"code_editor_yaml");
123 var editorYaml = CodeMirror(function (elt) {
124 myYamlTextArea.parentNode.replaceChild(elt, myYamlTextArea);
125 }, yaml_editor_settings);
127 var template = {{ template | safe}};
129 $(document).ready(function () {
131 editorYaml.setValue(template.data);
132 editorYaml.setSize(
"auto",
"auto");
137 var dialog = bootbox.dialog({
138 message: '
<div class=
"text-center"><i class=
"fa fa-spin fa-spinner"></i> Loading...
</div>',
143 text = editorYaml.getValue();
146 url: window.location.href,
150 'csrfmiddlewaretoken': '{{csrf_token}}',
153 success: function (result) {
155 dialog.modal('hide');
156 $(
"#success-alert").fadeTo(
2000,
500).slideDown(
500, function(){
157 setTimeout(function () {
158 $(
"#success-alert").slideUp(
500);
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.';