Merge pull request #471 from vyulabs/ace

Use ACE for JSON editor

public/bundle.json

@@ -6,7 +6,12 @@
 	"/vendor/angular-loading-bar/loading-bar",
 	"/vendor/moment/moment.min",
 	"/vendor/sweetalert/sweetalert.min",
-  "/vendor/scrollglue",
+	"/vendor/ace/ui-ace.min",
+	"/vendor/ace/ace.min",
+	"/vendor/ace/mode-json",
+	"/vendor/ace/mode-yaml",
+	"/vendor/ace/mode-ini",
+	"/vendor/scrollglue",
 
 	"app",
 	"routes/router",

public/css/semaphore.less

@@ -198,3 +198,8 @@ textarea.scroll {
 	border: 1px solid #ccc;
 	border-radius: @border-radius-base;
 }
+
+
+.ace_tooltip {
+	left: initial !important;
+}

public/html/projects/createTaskModal.pug

@@ -10,9 +10,9 @@
 			.col-sm-6
 				input.form-control(type="text" placeholder="Enter playbook name to override template" ng-model="task.playbook")
 		.form-group
-			label.control-label.col-sm-4 Environment Override
+			label.control-label.col-sm-4 Environment Override (*MUST* be valid JSON)
 			.col-sm-6
-				textarea.form-control(rows="10" placeholder="Override playbook environment, *MUST* be valid JSON" ng-model="task.environment")
+				div(ui-ace="{mode: 'json', workerPath: '/public/js/ace/'}" class="form-control" style="height: 100px" ng-model="task.environment")
 		.form-group
 			.col-sm-6.col-sm-offset-4: .checkbox: label
 				input(type="checkbox" ng-model="task.debug")

public/html/projects/environment/add.pug

@@ -8,8 +8,8 @@
 		label.control-label Environment Name
 		input.form-control(type="text" ng-model="env.name" placeholder="Friendly name to identify your environment")
 
-		label.control-label Environment
-		textarea.form-control(ng-model="env.json" rows="20" placeholder="This has to be a JSON object")
+		label.control-label Environment (This has to be a JSON object)
+		div(ui-ace="{mode: 'json', workerPath: '/public/js/ace/'}" class="form-control" style="height: 200px" ng-model="env.json")
 		p.help-block Must be valid JSON
 
 .modal-footer

public/html/projects/inventory/edit.pug

@@ -1,9 +1,8 @@
 .modal-header
 	h3.modal-title Edit Inventory
 
-.modal-body
-	textarea.form-control(ng-model="inventory" rows="20")
-
+.modal-body(style="padding: 0")
+	div(ui-ace="{mode: 'ini', workerPath: '/public/js/ace/'}" style="height: 200px" ng-model="inventory")
 .modal-footer
 	button.btn.btn-default.pull-left(ng-click="$dismiss()") Cancel
 	button.btn.btn-success(ng-click="$close(inventory)") Save Changes

public/html/projects/templates/add.pug

@@ -44,10 +44,9 @@
 
 		hr
 		.form-group
-			label.control-label.col-sm-4 Extra CLI Arguments
+			label.control-label.col-sm-4 Extra CLI Arguments (*MUST* be a JSON array!)
 			.col-sm-6
-				textarea.form-control(placeholder='*MUST* be a JSON array! Each argument must be an element of the array, for example: ["-i", "@myinventory.sh", "--private-key=/there/id_rsa", "-vvvv"]' ng-model="tpl.arguments" rows="5")
-
+				div(ui-ace="{mode: 'json', workerPath: '/public/js/ace/'}" style="height: 100px" class="form-control" ng-model="task.environment")
 		.form-group
 			.col-sm-6.col-sm-offset-4
 				.checkbox: label

public/js/app.js

@@ -1,4 +1,4 @@
-var app = angular.module('semaphore', ['scs.couch-potato', 'ui.router', 'ui.bootstrap', 'angular-loading-bar', 'luegg.directives']);
+var app = angular.module('semaphore', ['scs.couch-potato', 'ui.router', 'ui.bootstrap', 'angular-loading-bar', 'luegg.directives', 'ui.ace']);
 
 couchPotato.configureApp(app);