faas-rs/faas
1
0
Fork 0
mirror of https://github.com/openfaas/faas.git synced 2025-06-21 22:33:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Initial pop-up design

Browse Source
This commit is contained in:
Alex
2017-02-22 08:59:28 +00:00
committed by Alex Ellis
parent f097c75b93
commit edc2c4b29e
2 changed files with 89 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
gateway/assets/newfunction.html Normal file
View File

@ -0,0 +1,34 @@
<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>

77
gateway/assets/script/bootstrap.js vendored
View File

@ -1,7 +1,8 @@
"use strict" "use strict"
var app = angular.module('faasGateway', ['ngMaterial']); 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.functions = [];
$scope.invocationRequest = ""; $scope.invocationRequest = "";
$scope.invocationResponse = ""; $scope.invocationResponse = "";
@ -9,6 +10,9 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$md
$scope.invocation = { $scope.invocation = {
contentType: "text" contentType: "text"
}; };
$scope.functionTemplate = {
image: ""
};
$scope.invocation.request = "" $scope.invocation.request = ""
setInterval(function() { setInterval(function() {
refreshData(); refreshData();
@ -32,9 +36,6 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$md
$scope.invocationResponse = error1; $scope.invocationResponse = error1;
$scope.invocationStatus = null; $scope.invocationStatus = null;
}); });
// console.log("POST /function/"+ $scope.selectedFunction.name);
// console.log("Body: " + $scope.invocation.request);
}; };
var refreshData = function() { var refreshData = function() {
@ -77,29 +78,59 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$md
} }
}; };
var showDialog = function() { var showDialog=function($event) {
var alert = $mdDialog.alert({ var parentEl = angular.element(document.body);
title: 'New function', $mdDialog.show({
textContent: 'New functions are not supported yet, but will be defined here.', parent: parentEl,
ok: 'Close' targetEvent: $event,
}); templateUrl: "newfunction.html",
$mdDialog locals: {
.show(alert) item: $scope.functionTemplate
.finally(function() { },
alert = undefined; 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.newFunction = function() {
// $scope.functions.push({ showDialog();
// name: "f" + ($scope.functions.length + 2),
// replicas: 0,
// invokedCount: 0
// });
showDialog()
}; };
fetch(); fetch();
}]); }]);
// '<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>'