Systems part of #266.

app/styles/editor/level/system/edit.sass

@@ -1 +1,12 @@
-//#editor-level-system-edit-view
+#editor-level-system-edit-view
+  .navbar-text
+    float: left
+
+  #system-code-editor
+    position: absolute
+    left: 0
+    right: 0
+    bottom: 0
+    top: 50px
+    border: 2px solid black
+    border-top: none

app/templates/editor/level/system/edit.jade

@@ -1,7 +1,21 @@
-h3.edit-system-name
-  span(data-i18n="editor.level_system_edit_title")
-    | Edit System
-  span : 
-    | "#{editTitle}"
-
-#edit-system-treema
+.navbar
+  .navbar-inner
+    p.navbar-text
+      span(data-i18n="editor.level_system_edit_title")
+        | Edit System
+      span : 
+        | "#{editTitle}"
+    ul.nav.nav-pills
+        li
+          a(href="#code" data-toggle="tab") Code
+        li
+          a(href="#config-schema" data-toggle="tab") Config Schema
+        li
+          a(href="#settings" data-toggle="tab") Settings
+.tab-content
+  .tab-pane.active#code
+    #system-code-editor
+  .tab-pane#config-schema
+    #config-schema-treema
+  .tab-pane#settings
+    #edit-system-treema

app/views/editor/level/component/edit.coffee

@@ -5,7 +5,7 @@ LevelComponent = require 'models/LevelComponent'
 module.exports = class LevelComponentEditView extends View
   id: "editor-level-component-edit-view"
   template: template
-  editableSettings: ['name', 'description', 'system', 'language', 'dependencies', 'propertyDocumentation', 'i18n']  # not thangs or scripts or 
+  editableSettings: ['name', 'description', 'system', 'language', 'dependencies', 'propertyDocumentation', 'i18n']
 
   events:
     'click #done-editing-component-button': 'endEditing'

app/views/editor/level/system/edit.coffee

@@ -5,9 +5,11 @@ LevelSystem = require 'models/LevelSystem'
 module.exports = class LevelSystemEditView extends View
   id: "editor-level-system-edit-view"
   template: template
+  editableSettings: ['name', 'description', 'language', 'dependencies', 'propertyDocumentation', 'i18n']
 
   events:
     'click #done-editing-system-button': 'endEditing'
+    'click .nav a': (e) -> $(e.target).tab('show')
 
   constructor: (options) ->
     super options
@@ -21,30 +23,67 @@ module.exports = class LevelSystemEditView extends View
 
   afterRender: ->
     super()
-    @buildTreema()
+    @buildSettingsTreema()
+    @buildConfigSchemaTreema()
+    @buildCodeEditor()
+
+  buildSettingsTreema: ->
+    data = _.pick @levelSystem.attributes, (value, key) => key in @editableSettings
+    schema = _.cloneDeep LevelSystem.schema.attributes
+    schema.properties = _.pick schema.properties, (value, key) => key in @editableSettings
+    schema.required = _.intersection schema.required, @editableSettings
 
-  buildTreema: ->
-    data = $.extend(true, {}, @levelSystem.attributes)
     treemaOptions =
       supermodel: @supermodel
-      schema: LevelSystem.schema.attributes
+      schema: schema
       data: data
-      callbacks: {change: @onSystemEdited}
-    unless me.isAdmin()
-      treemaOptions.readOnly = true
-    @systemTreema = @$el.find('#edit-system-treema').treema treemaOptions
-    @systemTreema.build()
-    @systemTreema.open()
-    # TODO: schema is not loaded for the first one here?
-    @systemTreema.tv4.addSchema('metaschema', LevelSystem.schema.get('properties').configSchema)
+      callbacks: {change: @onSystemSettingsEdited}
+    treemaOptions.readOnly = true unless me.isAdmin()
+    @systemSettingsTreema = @$el.find('#edit-system-treema').treema treemaOptions
+    @systemSettingsTreema.build()
+    @systemSettingsTreema.open()
 
-  onSystemEdited: (e) =>
+  onSystemSettingsEdited: =>
     # Make sure it validates first?
-    for key, value of @systemTreema.data
+    for key, value of @systemSettingsTreema.data
       @levelSystem.set key, value unless key is 'js' # will compile code if needed
     Backbone.Mediator.publish 'level-system-edited', levelSystem: @levelSystem
     null
 
+  buildConfigSchemaTreema: ->
+    treemaOptions =
+      supermodel: @supermodel
+      schema: LevelSystem.schema.get('properties').configSchema
+      data: @levelSystem.get 'configSchema'
+      callbacks: {change: @onConfigSchemaEdited}
+    treemaOptions.readOnly = true unless me.isAdmin()
+    @configSchemaTreema = @$el.find('#config-schema-treema').treema treemaOptions
+    @configSchemaTreema.build()
+    @configSchemaTreema.open()
+    # TODO: schema is not loaded for the first one here?
+    @configSchemaTreema.tv4.addSchema('metaschema', LevelSystem.schema.get('properties').configSchema)
+
+  onConfigSchemaEdited: =>
+    @levelSystem.set 'configSchema', @configSchemaTreema.data
+    Backbone.Mediator.publish 'level-system-edited', levelSystem: @levelSystem
+
+  buildCodeEditor: ->
+    editorEl = @$el.find '#system-code-editor'
+    editorEl.text @levelSystem.get('code')
+    @editor = ace.edit(editorEl[0])
+    @editor.setReadOnly(not me.isAdmin())
+    session = @editor.getSession()
+    session.setMode 'ace/mode/coffee'
+    session.setTabSize 2
+    session.setNewLineMode = 'unix'
+    session.setUseSoftTabs true
+    @editor.on 'change', @onEditorChange
+
+  onEditorChange: =>
+    @levelSystem.set 'code', @editor.getValue()
+    Backbone.Mediator.publish 'level-system-edited', levelSystem: @levelSystem
+    null
+
   endEditing: (e) ->
     Backbone.Mediator.publish 'level-system-editing-ended', levelSystem: @levelSystem
     null