initial attempt at a textarea for the schema

BigBlueHat · BigBlueHat · commit 7d2018a48c22 · 2014-05-05T17:08:17.000-04:00
Not very Vue-ish...Hope to componentize and fix CSS
class reference. :(
diff --git a/app.css b/app.css
@@ -6,27 +6,38 @@ html, body, #editor {
 }
 small { color:#999 }
 
-#input, #output {
+#left-side, #output {
     display: inline-block;
     width: 49%;
     height: 100%;
     vertical-align: top;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
+}
+#input {
     padding: 0 20px;
 }
 
-#output {
+#schema, #output {
     border: none;
-    border-left: 1px solid #ccc;
+    background-color: #f6f6f6;
     resize: none;
     outline: none;
-    background-color: #f6f6f6;
     font-size: 14px;
     font-family: 'Monaco', courier, monospace;
     padding: 20px;
 }
+#schema {
+    border-top: 1px solid #ccc;
+    margin-top: 3em;
+    width: 100%;
+    height: 100%;
+}
+
+#output {
+    border-left: 1px solid #ccc;
+}
 
 code {
     color: #f66;
diff --git a/app.js b/app.js
@@ -22,6 +22,16 @@ var app = new Vue({
   data: {
     schema: schema
   },
+  created: function () {
+    this.$el.getElementsByClassName('schema')[0].value
+      = JSON.stringify(this.schema, null, "\t");
+  },
+  methods: {
+    updateSchema: function(e) {
+      console.log(e.target.value);
+      e.targetVM.schema = JSON.parse(e.target.value);
+    }
+  },
   computed: {
     output: {
       $get: function() {
@@ -36,6 +46,9 @@ var app = new Vue({
     }
   },
   filters: {
+    pretty: function(value) {
+      return JSON.stringify(value, null, "\t");
+    },
     input_type: function(value) {
       var types = {
           string: 'text',
diff --git a/index.html b/index.html
@@ -6,6 +6,7 @@
 </head>
 <body>
   <div id="editor">
+    <div id="left-side">
       <div id="input">
           <h1>{{schema.title}}</h1>
           <div v-repeat="schema.properties">
@@ -14,7 +15,10 @@ <h1>{{schema.title}}</h1>
               <div v-if="description"><small>{{description}}</small></div>
           </div>
       </div>
-      <textarea id="output" v-model="output"></textarea>
+      <textarea id="schema" class="schema" v-on="change: updateSchema">
+      </textarea>
+    </div>
+    <textarea id="output" v-model="output"></textarea>
   </div>
 
   <script src="vue.min.js"></script>
