Initial pop-up design

gateway/assets/newfunction.html

+<md-dialog  aria-label="List dialog" layout="column" flex="80"> 
+    <md-dialog-content class="md-padding">
+        <label>Define a function:</label>
+        <form name="userForm">
+            <div layout-gt-xs="row">
+                <md-input-container class="md-block" flex-gt-sm>
+                <label>Image:</label>
+                <input name="dockerImage" ng-model="item.image" required md-maxlength="200" minlength="4">
+                </md-input-container>
+            </div>
+            <div layout-gt-xs="row">
+                <md-input-container class="md-block" flex-gt-sm>
+                <label>Name:</label>
+                <input name="serviceName" ng-model="item.name" required md-maxlength="200" minlength="4">
+                </md-input-container>
+            </div>
+            <div layout-gt-xs="row">
+                <md-input-container class="md-block" flex-gt-sm>
+                <label>fProcess:</label>
+                <input name="fprocess" ng-model="item.fprocess" required md-maxlength="200" minlength="4">
+                </md-input-container>
+            </div>
+
+        </form>
+    </md-dialog-content> 
+    <md-dialog-actions> 
+        <md-button ng-click="closeDialog()" class="md-secondary"> 
+        Close Dialog 
+        </md-button> 
+        <md-button ng-click="createFunc()" class="md-primary"> 
+        Create 
+        </md-button> 
+    </md-dialog-actions> 
+</md-dialog>

gateway/assets/script/bootstrap.js

 "use strict"
 var app = angular.module('faasGateway', ['ngMaterial']);
 
-app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$mdDialog', function($scope, $log, $http, $location, $timeout, $mdDialog) {
+app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$mdDialog', 
+        function($scope, $log, $http, $location, $timeout, $mdDialog) {
     $scope.functions = [];
     $scope.invocationRequest = "";
     $scope.invocationResponse = "";
@@ -9,6 +10,9 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$md
     $scope.invocation = {
         contentType: "text"
     };
+    $scope.functionTemplate = {
+        image: ""
+    };
     $scope.invocation.request = ""
     setInterval(function() {
         refreshData();
@@ -32,9 +36,6 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$md
                 $scope.invocationResponse = error1;
                 $scope.invocationStatus = null;
             });
-
-        // console.log("POST /function/"+ $scope.selectedFunction.name);
-        // console.log("Body: " + $scope.invocation.request);
     };
 
     var refreshData = function() {
@@ -77,29 +78,59 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$md
         }
     };
 
-    var showDialog = function() {
-        var alert = $mdDialog.alert({
-            title: 'New function',
-            textContent: 'New functions are not supported yet, but will be defined here.',
-            ok: 'Close'
-        });
-        $mdDialog
-            .show(alert)
-            .finally(function() {
-                alert = undefined;
-            });
+    var showDialog=function($event) {
+       var parentEl = angular.element(document.body);
+       $mdDialog.show({
+         parent: parentEl,
+         targetEvent: $event,
+         templateUrl: "newfunction.html",
+         locals: {
+           item: $scope.functionTemplate
+         },
+         controller: DialogController
+      });
+    };
+
+    var DialogController = function($scope, $mdDialog, item) {
+        $scope.item = item;
+        $scope.closeDialog = function() {
+            $mdDialog.hide();
+        };
+
+        $scope.createFunc = function() {
+            console.log($scope.item);
+            $scope.closeDialog();
+        };
     };
 
-    // TODO: popup + form to create new Docker service.
-    // More to follow @ https://material.angularjs.org/latest/demo/dialog
     $scope.newFunction = function() {
-        // $scope.functions.push({
-        //     name: "f" + ($scope.functions.length + 2),
-        //     replicas: 0,
-        //     invokedCount: 0
-        // });
-        showDialog()
+        showDialog();
     };
 
     fetch();
-}]);
\ No newline at end of file
+}]);
+
+
+// '<md-dialog aria-label="List dialog">' +
+//            '  <md-dialog-content class="md-padding">'+
+//            '<label>Define a function</label>'+
+//            '<form name="userForm">'+
+//             '<md-input-container>'+
+//                 '<label>Image:</label>'+
+//                 '<input name="dockerImage" ng-model="item.image" required md-maxlength="200" minlength="4">'+
+//            '</md-input-container>'+
+//             '<md-input-container>'+
+//                 '<label>Name:</label>'+
+//                 '<input name="serviceName" ng-model="item.name" required md-maxlength="200" minlength="4">'+
+//            '</md-input-container>'+
+//            '</form>'+
+//            '  </md-dialog-content>' +
+//            '  <md-dialog-actions>' +
+//            '    <md-button ng-click="closeDialog()" class="md-secondary">' +
+//            '      Close Dialog' +
+//            '    </md-button>' +
+//            '    <md-button ng-click="createFunc()" class="md-primary">' +
+//            '      Create' +
+//            '    </md-button>' +
+//            '  </md-dialog-actions>' +
+//            '</md-dialog>'
\ No newline at end of file