Added GUI for tutorials that runs entirely inside the VM

-fixed issue with webserver not spinning up properly

Change-Id: I3724f1640ba2b84b7d84fab29febbbd047120812
Signed-off-by: Aristeidis Iliopoulos <ailiopou@cisco.com>

1 files changed, 189 insertions, 0 deletions

diff --git a/vpp-userdemo/ui/dist.prod/js/app.min.js b/vpp-userdemo/ui/dist.prod/js/app.min.js
new file mode 100644
index 0000000..7b2b23b
--- /dev/null
+++ b/vpp-userdemo/ui/dist.prod/js/app.min.js
@@ -0,0 +1,189 @@
+vppsb = angular.module('vppsb', ["ui.router", "ngMaterial", "ngclipboard"]);
+vppsb.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider) {
+   $urlRouterProvider.otherwise("/main");
+   $stateProvider
+   .state('main', {
+      url: "/",
+      views:{
+         'main': {
+            templateUrl: "../html/main.html",
+            controller: "mainController"
+         }
+      }
+   });
+   $locationProvider.html5Mode(true);
+}]);
+vppsb.config(['$mdThemingProvider', function($mdThemingProvider) {
+
+	$mdThemingProvider.definePalette('BLUE', {
+	    '50': '258dc4',
+	    '100': '258dc4',
+	    '200': '258dc4',
+	    '300': '258dc4',
+	    '400': '258dc4',
+	    '500': '258dc4',
+	    '600': '258dc4',
+	    '700': '258dc4',
+	    '800': '258dc4',
+	    '900': '258dc4',
+	    'A100': '258dc4',
+	    'A200': '258dc4',
+	    'A400': '258dc4',
+	    'A700': '258dc4',
+	    'contrastDefaultColor': 'light',    // whether, by default, text (contrast)
+	    'contrastDarkColors': ['50', '200', //hues which contrast should be 'dark' by default
+	     '200', '300'],
+	    'contrastLightColors': undefined    // could also specify this if default was 'dark'
+  	});
+
+  	$mdThemingProvider.definePalette('GREY', {
+	    '50': '919199',
+	    '100': '7E7F88',
+	    '200': '6B6D77',
+	    '300': '585B66',
+	    '400': '454955',
+	    '500': '3E424C',
+	    '600': '3E424C',
+	    '700': '373B43',
+	    '800': '373B43',
+	    '900': '30343A',
+	    'A100': '30343A',
+	    'A200': '292D31',
+	    'A400': '222628',
+	    'A700': '222628',
+	    'contrastDefaultColor': 'light',    // whether, by default, text (contrast)
+	    'contrastDarkColors': ['50',//hues which contrast should be 'dark' by default
+	     '200'],
+	    'contrastLightColors': undefined    // could also specify this if default was 'dark'
+  	});
+
+  	$mdThemingProvider.definePalette('RED', {
+	    '50': 'F6767D',
+	    '100': 'F6767D',
+	    '200': 'F4626B',
+	    '300': 'F24E59',
+	    '400': 'F03A47',
+	    '500': 'D83440',
+	    '600': 'D83440',
+	    '700': 'C02E39',
+	    '800': 'C02E39',
+	    '900': 'A82832',
+	    'A100': 'A82832',
+	    'A200': '90222B',
+	    'A400': '90222B',
+	    'A700': '781C24',
+	    'contrastDefaultColor': 'light',    // whether, by default, text (contrast)
+	    'contrastDarkColors': ['50', '200', //hues which contrast should be 'dark' by default
+	     '200', '300'],
+	    'contrastLightColors': undefined    // could also specify this if default was 'dark'
+  	});
+
+
+	$mdThemingProvider.theme('default')
+    	.primaryPalette('BLUE', {
+	    	'default': '400', // by default use shade 400 from the pink palette for primary intentions
+	      	'hue-1': '100', // use shade 100 for the <code>md-hue-1</code> class
+	      	'hue-2': '600', // use shade 600 for the <code>md-hue-2</code> class
+	      	'hue-3': 'A100' // use shade A100 for the <code>md-hue-3</code> class
+	    })
+    	.accentPalette('GREY', {
+	      	'default': '300', // by default use shade 400 from the pink palette for primary intentions
+	      	'hue-1': '100', // use shade 100 for the <code>md-hue-1</code> class
+	      	'hue-2': '600', // use shade 600 for the <code>md-hue-2</code> class
+	      	'hue-3': 'A100' // use shade A100 for the <code>md-hue-3</code> class
+	    })
+	    .warnPalette('RED', {
+	      	'default': '400', // by default use shade 400 from the pink palette for primary intentions
+	      	'hue-1': '100', // use shade 100 for the <code>md-hue-1</code> class
+	      	'hue-2': '600', // use shade 600 for the <code>md-hue-2</code> class
+	      	'hue-3': 'A100' // use shade A100 for the <code>md-hue-3</code> class
+	    });
+}]);
+vppsb.factory('$api', function($http){
+	return {
+        getTutorials: function(){
+           	return $http.get("/api/v1/tutorials");
+        },
+        getFile: function(tutorial){
+            return $http.get("/api/v1/file/"+tutorial);
+        },
+        runCommand: function(data){
+			return $http.post("/api/v1/command", {command: data});
+        }
+    };               
+});
+vppsb.controller('mainController',['$scope', '$state', '$api', function ($scope, $state, $api) {
+	
+
+	$scope.tutorials 			= [];
+	$scope.instructions  		= [];
+	$scope.commands				= [];
+	$scope.selectedTutorial		= '';
+	$scope.response				= '';
+	$scope.stepDone				= true;
+	$scope.copied 				= false;
+
+	$api.getTutorials()
+	.then(function(object) {
+		$scope.tutorials = object.data;
+    }, function() {
+    	console.log("there has been an error");
+    });
+
+	$scope.selectTutorial = function(tutorial){
+		$scope.selectedTutorial	= tutorial;
+		$(".tutorials-row").blur();
+		$api.getFile(tutorial)
+		.then(function(object) {
+			$scope.instructions = object.data.instructions;
+			$scope.commands	   	= object.data.commands;
+			$scope.pointer		= 0;
+			$api.runCommand($scope.commands[$scope.pointer])
+			.then(function(object) {
+				$scope.response = object.data;
+		    }, function() {
+		    	console.log("there has been an error");
+		    });	
+	    }, function() {
+	    	console.log("there has been an error");
+	    });
+	};
+
+	$scope.nextStep = function(){
+		$scope.stepDone = false;
+		$scope.pointer += 1;
+		if($scope.pointer >= $scope.instructions.length){
+			$scope.pointer 			= null;
+			$scope.selectedTutorial = '';
+			$scope.stepDone 		= true;
+			$scope.instructions 	= [];
+			$scope.commands			= [];
+		}
+		else{
+			$api.runCommand($scope.commands[$scope.pointer])
+			.then(function(object) {
+				$scope.response = object.data;
+				$scope.stepDone = true;
+		    }, function() {
+		    	console.log("there has been an error");
+		    });	
+		}
+	};
+
+	// Continuing with space bar
+	jQuery(document).on('keypress', function(e){
+		if(e.keyCode == 32 && $scope.pointer !== null && $scope.stepDone === true){$scope.nextStep();}
+    });
+
+
+}]);
+
+vppsb.directive('header', function() {
+    return {
+        restrict: 'AE',
+        scope: {},
+        templateUrl: '../html/header.html',
+        controller: function($scope){
+        }
+    };
+});
\ No newline at end of file