Added experimental tree based editor for config from Anaerin refs Fle…

…xget#1855 git-svn-id: http://svn.flexget.com/trunk@3205 3942dd89-8c5d-46d7-aeed-044bccf3e60c
umeku · Nov 27, 2012 · 24858fa · 24858fa
1 parent a709c4e
commit 24858fa
Showing 4 changed files with 4,269 additions and 2 deletions.
diff --git a/flexget/ui/plugins/configure/templates/edit_text.html b/flexget/ui/plugins/configure/templates/edit_text.html
@@ -1,5 +1,8 @@
 {% extends "configure/configure.html" %}
 {% block configure %}
+    <script type="text/javascript" language="JavaScript" src="/static/js/yaml.js"></script>
+    <script type="text/javascript" language="JavaScript" src="/static/js/jsoneditor.js"></script>
+    <link rel="stylesheet" type="text/css" href="/static/css/jsoneditor.css">
     <script type="text/javascript">
         $(function (){
             $('#name_input').hide();
@@ -8,7 +11,7 @@
             $('#name_label').replaceWith($('#name_input'));
             $('#name_input').show();
         }
-    </script>
+	</script>
 
 
     <style type="text/css">
@@ -33,7 +36,9 @@ <h2 id="name_input"><input type="text" name="name" value="{{ name }}" style="fon
 
         <p>Fully UI-based editing will be implemented later</p>
 
-        <textarea class="config" name="config" cols=80 rows=25 spellcheck="false" wrap="off">{{ config }}</textarea>
+        <input type="checkbox" name="useJSONEditor" id="useJSONEditor" onchange="showhideJSONEditor(this.checked);" />Use JSONEditor<br />
+        <textarea class="config" name="config" cols=80 rows=25 spellcheck="false" wrap="off" id="config">{{ config }}</textarea>
+        <div id="editArea"></div>
         <div>
             <button type="submit" id="submit">Submit</button>
         </div>
@@ -44,4 +49,24 @@ <h2 id="name_input"><input type="text" name="name" value="{{ name }}" style="fon
             {% endfor %}
         {% endif %}
     </form>
+	<script type="text/javascript">
+        var container = document.getElementById("editArea");
+        var editor = new JSONEditor(container,{change: getJSON},YAML.decode(document.getElementById('config').value));
+        function getJSON() {
+			var json = editor.get();
+			document.getElementById('config').value = YAML.encode(json,200)
+		}
+		//document.getElementById('config').style.display = 'none';
+		function showhideJSONEditor(val) {
+			editor.set(YAML.decode(document.getElementById('config').value));
+			if (val) {
+				document.getElementById('editArea').style.display = '';
+				document.getElementById('config').style.display = 'none';
+			} else {
+				document.getElementById('editArea').style.display = 'none';
+				document.getElementById('config').style.display = '';
+			}
+		}
+		showhideJSONEditor(document.getElementById("useJSONEditor").checked);
+     </script>
 {% endblock %}