Backport ACE XML editor from webvirtcloud

daniviga · May 22, 2015 · 844668a · 844668a
1 parent e5f9706
commit 844668a
Show file tree

Hide file tree

Showing 6 changed files with 22,001 additions and 31 deletions.
diff --git a/templates/create.html b/templates/create.html
@@ -470,7 +470,7 @@ <h4 class="modal-title">{% trans "Create Instance From XML" %}</h4>
                 <form class="form-horizontal" method="post" role="form">{% csrf_token %}
                     <div class="form-group">
                         <div class="col-sm-12">
-                            <textarea id="xmltextarea" name="from_xml"></textarea>
+                            <textarea id="editor">{{ inst_xml }}</textarea>
                         </div>
                     </div>
                     <div class="modal-footer">
@@ -486,6 +486,16 @@ <h4 class="modal-title">{% trans "Create Instance From XML" %}</h4>
 
 {% endblock %}
 {% block script %}
+    <script src="{{ STATIC_URL }}js/ace.js" type="text/javascript" charset="utf-8"></script>
+    <script>
+        var editor = ace.edit("editor");
+        editor.getSession().setMode("ace/mode/xml");
+
+        var input = $('input[name="inst_xml"]');
+            editor.getSession().on("change", function () {
+            input.val(editor.getSession().getValue());
+        });
+    </script>
     <script src="{% static "js/bootstrap-multiselect.js" %}"></script>
     <script>
         function toggleValue(string, updated_value, checked) {

diff --git a/templates/instance.html b/templates/instance.html
@@ -564,22 +564,25 @@
         <div class="clearfix"></div>
     </div>
     <div class="tab-pane tab-inst" id="instancexml">
-        <div id="viewXMLpre">
-            <pre class="pre-scrollable">{{ inst_xml }}</pre>
-            {% ifequal status 5 %}
-                <button type="button" class="btn btn-lg btn-primary pull-right"
-                        onclick="javascript:$('#viewXMLpre').hide();$('#viewXMLform').show();">{% trans "Edit" %}</button>
-            {% else %}
-                <button type="button" class="btn btn-lg btn-primary pull-right disabled">{% trans "Edit" %}</button>
-            {% endifequal %}
-        </div>
-        <form id="viewXMLform" class="form-horizontal" method="post" role="form" style="display: none">{% csrf_token %}
-            <textarea id="xmltextarea" name="inst_xml">{{ inst_xml }}</textarea>
-            <button type="button" class="btn btn-lg btn-default"
-                    onclick="javascript:$('#viewXMLpre').show();$('#viewXMLform').hide();">{% trans "Close" %}</button>
-            <button type="submit" class="btn btn-lg btn-danger pull-right" name="change_xml">{% trans "Save" %}</button>
-        </form>
-        <div class="clearfix"></div>
+      {% ifnotequal status 5 %}
+      <p>{% trans "To edit XML the instance must be shutdown" %}</p>
+      {% endifnotequal %}
+      <form class="form-horizontal" method="post" role="form">{% csrf_token %}
+          <div class="col-sm-12" id="xmlheight">
+              <textarea id="editor">{{ inst_xml }}</textarea>
+          </div>
+          {% ifequal status 5 %}
+              <input type="hidden" name="inst_xml">
+              <button type="submit" class="btn btn-lg btn-success pull-right" name="change_xml">
+                  {% trans "Change" %}
+              </button>
+          {% else %}
+              <button class="btn btn-lg btn-success pull-right disabled">
+                  {% trans "Change" %}
+              </button>
+          {% endifequal %}
+      </form>
+      <div class="clearfix"></div>
     </div>
     </div>
     </div>
@@ -791,6 +794,16 @@
     {% include 'sidebar_close.html' %}
 {% endblock %}
 {% block script %}
+<script src="{{ STATIC_URL }}js/ace.js" type="text/javascript" charset="utf-8"></script>
+<script>
+    var editor = ace.edit("editor");
+    editor.getSession().setMode("ace/mode/xml");
+
+    var input = $('input[name="inst_xml"]');
+        editor.getSession().on("change", function () {
+        input.val(editor.getSession().getValue());
+    });
+</script>
 <script>
     function open_console() {
         window.open('{% url 'console' %}?token={{ host_id }}-{{ uuid }}', '', 'width=850,height=485')

diff --git a/webvirtmgr/static/css/webvirtmgr.css b/webvirtmgr/static/css/webvirtmgr.css
@@ -221,18 +221,6 @@ p {
     border-top: 0;
 }
 
-#xmltextarea {
-    font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
-    font-size: 12px;
-    width: 100%;
-    height: 340px;
-    padding: 9.5px 0 0 9.5px;
-    margin-bottom: 10px;
-    background-color: rgb(245, 245, 245);
-    border: 1px solid rgb(204, 204, 204);
-    border-radius: 4px;
-}
-
-#viewXMLpre .pre-scrollable {
-    width: 100%;
+.ace_editor {
+    height: 350px;
 }