Add Dockerfile view builder

css/app.css

@@ -104,9 +104,7 @@
 
 #editor { 
     height: 300px;
-    width: 475px;
+    width: 100%;
     border: 1px solid #DDD;
-    border-radius: 4px;
-    border-bottom-right-radius: 0px;
     margin-top: 5px;
 }

index.html

@@ -50,6 +50,8 @@
     <script src="../assets/js/bootstrap-carousel.js"></script>
     <script src="../assets/js/bootstrap-typeahead.js"></script>
 
+    <script src="/lib/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
+
     <script src="lib/angular/angular.js"></script>
     <script src="lib/angular/angular-resource.js"></script>
     <script src="js/app.js"></script>

js/app.js

@@ -8,7 +8,6 @@ angular.module('dockerui', ['dockerui.services', 'dockerui.filters'])
         $routeProvider.when('/images/', {templateUrl: 'partials/images.html', controller: 'ImagesController'});
         $routeProvider.when('/images/:id/', {templateUrl: 'partials/image.html', controller: 'ImageController'});
         $routeProvider.when('/settings', {templateUrl: 'partials/settings.html', controller: 'SettingsController'});
-        $routeProvider.when('/build', {templateUrl: 'partials/builder.html', controller: 'BuilderController'});
         $routeProvider.otherwise({redirectTo: '/'});
     }])
     // This is your docker url that the api will use to make requests

js/controllers.js

@@ -165,12 +165,16 @@ function ImagesController($scope, Image) {
     $('#response').hide();
     $scope.alertClass = 'block';
 
+    $scope.showBuilder = function() {
+        $('#build-modal').modal('show');
+    };
+
     Image.query({}, function(d) {
         $scope.images = d;
     }, function (e) {
         console.log(e);
         setFailedResponse($scope, e.data, '#response');
-    });    
+    });
 }
 
 // Controller for a single image and actions on that image
@@ -238,10 +242,6 @@ function StartContainerController($scope, $routeParams, $location, Container) {
     };
     $scope.commandPlaceholder = '["/bin/echo", "Hello world"]';
 
-    $scope.close = function() {
-        $('#create-modal').modal('hide');
-    };
-
     $scope.create = function() {
         $scope.response = '';
         var cmds = null;
@@ -279,7 +279,12 @@ function StartContainerController($scope, $routeParams, $location, Container) {
 }
 
 function BuilderController($scope, Image) {
-    $('#response').hide();
+    $scope.template = '/partials/builder.html';
+
+    ace.config.set('basePath', '/lib/ace-builds/src-noconflict/');
+
+    $scope.build = function() {
+    };
 }
 
 function setSuccessfulResponse($scope, msg, msgId) {

partials/builder.html

@@ -1,20 +1,22 @@
-<script src="/lib/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
-<h2>Build image:</h2>
-
-<div class="detail">
-    <div id="response" class="alert alert-{{ alertClass }}">
+<div id="build-modal" class="modal hide fade">
+  <div class="modal-header">
+    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+    <h3>Build Image</h3>
+  </div>
+  <div class="modal-body">
+    <div>
         {{ response }}
     </div>
-
-    <div id="editor">
-
-    </div>
-
-    <script>
-        ace.config.set('basePath', '/lib/ace-builds/src-noconflict/');
-
-        var editor = ace.edit("editor");
-        editor.setTheme("ace/theme/clouds");
-        editor.getSession().setMode("ace/mode/batchfile");
-    </script>
+    <div id="editor"></div>
+  </div>
+  <div class="modal-footer">
+    <a href="" class="btn btn-primary" ng-click="build()">Build</a>
+  </div>
 </div>
+<script type="text/javascript">
+    var editor = ace.edit("editor");
+
+    editor.setValue('');
+    editor.setTheme("ace/theme/clouds");
+    editor.getSession().setMode("ace/mode/batchfile");
+</script>

partials/images.html

@@ -1,10 +1,13 @@
 
+<div ng-include="template" ng-controller="BuilderController"></div>
+
 <h2>Images:</h2>
 
-    <div id="response" class="alert alert-{{ alertClass }}">
-        {{ response }}
-    </div>
-<a href="/#/build/">Build Image</a>
+<div id="response" class="alert alert-{{ alertClass }}">
+    {{ response }}
+</div>
+
+<a href="" ng-click="showBuilder()">Build Image</a>
 <table class="table table-striped">
     <thead>
         <tr>

partials/startcontainer.html

@@ -1,4 +1,3 @@
-
 <div id="create-modal" class="modal hide fade">
   <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
@@ -27,7 +26,6 @@
     </form>
   </div>
   <div class="modal-footer">
-    <a href="" class="btn" ng-click="close()">Close</a>
     <a href="" class="btn btn-primary" ng-click="create()">Create</a>
   </div>
 </div>