feat(templates): advanced template creation (#277)

app/app.js

@@ -81,6 +81,9 @@ angular.module('portainer', [
     })
     .state('actions.create.container', {
       url: "/container",
+      params: {
+        template: null
+      },
       templateUrl: 'app/components/createContainer/createcontainer.html',
       controller: 'CreateContainerController'
     })

app/components/createContainer/createContainerController.js

@@ -1,28 +1,29 @@
 angular.module('createContainer', [])
-.controller('CreateContainerController', ['$scope', '$state', 'Config', 'Info', 'Container', 'Image', 'Volume', 'Network', 'Messages',
+.controller('CreateContainerController', ['$scope', '$state', '$stateParams', 'Config', 'Info', 'Container', 'Image', 'Volume', 'Network', 'TemplateHelper', 'Messages',
-function ($scope, $state, Config, Info, Container, Image, Volume, Network, Messages) {
+function ($scope, $state, $stateParams, Config, Info, Container, Image, Volume, Network, TemplateHelper, Messages) {
 
-  $scope.state = {
+  if ($stateParams.template) {
-    alwaysPull: true
+    $scope.template = $stateParams.template;
-  };
+  }
 
   $scope.formValues = {
+    alwaysPull: true,
     Console: 'none',
-    Volumes: [],
+    Volumes: $scope.template && $scope.template.volumes ? TemplateHelper.getVolumeBindings($scope.template.volumes) : [],
-    AvailableRegistries: [],
     Registry: ''
   };
 
   $scope.imageConfig = {};
 
   $scope.config = {
-    Env: [],
+    Image: $scope.template ? $scope.template.image : '',
+    Env: $scope.template && $scope.template.env ? TemplateHelper.getEnvBindings($scope.template.env) : [],
     ExposedPorts: {},
     HostConfig: {
       RestartPolicy: {
         Name: 'no'
       },
-      PortBindings: [],
+      PortBindings: $scope.template ? TemplateHelper.getPortBindings($scope.template.ports) : [],
       Binds: [],
       NetworkMode: 'bridge',
       Privileged: false
@@ -61,8 +62,6 @@ function ($scope, $state, Config, Info, Container, Image, Volume, Network, Messa
       }
     });
 
-    $scope.formValues.AvailableRegistries = c.registries;
-
     Volume.query({}, function (d) {
       $scope.availableVolumes = d.Volumes;
     }, function (e) {
@@ -232,7 +231,7 @@ function ($scope, $state, Config, Info, Container, Image, Volume, Network, Messa
   $scope.create = function () {
     var config = prepareConfiguration();
     $('#createContainerSpinner').show();
-    if ($scope.state.alwaysPull) {
+    if ($scope.formValues.alwaysPull) {
       pullImageAndCreateContainer(config);
     } else {
       createContainer(config);

app/components/createContainer/createcontainer.html

@@ -31,7 +31,7 @@
             <div class="col-sm-offset-1 col-sm-11">
               <div class="checkbox">
                 <label>
-                  <input type="checkbox" ng-model="state.alwaysPull"> Always pull image before creating
+                  <input type="checkbox" ng-model="formValues.alwaysPull"> Always pull image before creating
                 </label>
               </div>
             </div>

app/components/images/imagesController.js

@@ -102,7 +102,6 @@ function ($scope, $state, Config, Image, Messages) {
   }
 
   Config.$promise.then(function (c) {
-    $scope.availableRegistries = c.registries;
     fetchImages();
   });
 }]);

app/components/templates/templates.html

@@ -54,6 +54,7 @@
           <div class="form-group">
             <div class="col-sm-12">
               <button type="button" class="btn btn-default btn-sm" ng-disabled="!formValues.network" ng-click="createTemplate()">Create</button>
+              <button type="button" class="btn btn-default btn-sm" ui-sref="actions.create.container({template: selectedTemplate})">Advanced configuration...</button>
               <i id="createContainerSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
             </div>
           </div>

app/shared/helpers.js

@@ -48,4 +48,42 @@ angular.module('portainer.helpers', [])
       };
     }
   };
-}]);
+}])
+.factory('TemplateHelper', [function TemplateHelperFactory() {
+  'use strict';
+  return {
+    getPortBindings: function(ports) {
+      var bindings = [];
+      ports.forEach(function (port) {
+        var portAndProtocol = _.split(port, '/');
+        var binding = {
+          containerPort: portAndProtocol[0],
+          protocol: portAndProtocol[1]
+        };
+        bindings.push(binding);
+      });
+      return bindings;
+    },
+    getVolumeBindings: function(volumes) {
+      var bindings = [];
+      volumes.forEach(function (volume) {
+        bindings.push({ containerPath: volume });
+      });
+      return bindings;
+    },
+    getEnvBindings: function(env) {
+      var bindings = [];
+      env.forEach(function (envvar) {
+        var binding = {
+          name: envvar.name
+        };
+        if (envvar.set) {
+          binding.value = envvar.set;
+        }
+        bindings.push(binding);
+      });
+      return bindings;
+    }
+  };
+}])
+;