From 7b7bb468440bfcf3c2a784d2ee90df7cf9820537 Mon Sep 17 00:00:00 2001
From: Michael Crosby <crosby.michael@gmail.com>
Date: Tue, 18 Jun 2013 16:21:27 -0900
Subject: [PATCH] Add Dockerfile view builder

---
 css/app.css                  |  4 +---
 index.html                   |  2 ++
 js/app.js                    |  1 -
 js/controllers.js            | 17 +++++++++++------
 partials/builder.html        | 36 +++++++++++++++++++-----------------
 partials/images.html         | 11 +++++++----
 partials/startcontainer.html |  2 --
 7 files changed, 40 insertions(+), 33 deletions(-)

diff --git a/css/app.css b/css/app.css
index a7311bf20..183e4b127 100644
--- a/css/app.css
+++ b/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;
 }
diff --git a/index.html b/index.html
index e8da9503b..6f8537ccb 100644
--- a/index.html
+++ b/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>
diff --git a/js/app.js b/js/app.js
index 94a2a0885..386179a67 100644
--- a/js/app.js
+++ b/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
diff --git a/js/controllers.js b/js/controllers.js
index 7053e2a5a..57c2ff222 100644
--- a/js/controllers.js
+++ b/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) {
diff --git a/partials/builder.html b/partials/builder.html
index 2ef65e04b..a572322c3 100644
--- a/partials/builder.html
+++ b/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>
diff --git a/partials/images.html b/partials/images.html
index 161ce2d16..7dafb8a4a 100644
--- a/partials/images.html
+++ b/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>
diff --git a/partials/startcontainer.html b/partials/startcontainer.html
index c4e74f502..41293a952 100644
--- a/partials/startcontainer.html
+++ b/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>