Modified the UI of add Vorto Model modal.

Signed-off-by: shiv12095 <shiv12095@iiitd.ac.in>

server/devtool/src/main/resources/static/css/style.css

@@ -855,4 +855,12 @@ a:hover {
     color: #000000;
     text-shadow: none;
     font-weight: bold;
-}
+}
+
+.align-left {
+	float:left;
+}
+
+.align-right {
+	float:right;
+}

server/devtool/src/main/resources/static/dist/js/controllers.js

@@ -17,17 +17,19 @@ define(["angular"], function(angular) {
     $scope.selectedTabId = 0;
     $scope.selectedEditor = null;
 
-    $scope.editorTypes = ['InformationModel', 'FunctionBlock'];
+    $scope.editorTypes = [
+    	{language:'infomodel', display:'Info Model'}, 
+    	{language:'fbmodel', display:'Function Block'}
+    	];
 
     $scope.models = [];
     $scope.queryFilter = "";
 
     $scope.$on("addTab", function(event, args) {
-      console.log(args.editorType);
-      $scope.addEditor(args.editorType);
+      $scope.addEditor(args.language);
     });
 
-    $scope.addEditor = function(editorType) {
+    $scope.addEditor = function(language) {
       $scope.counter++;
       var tabId = $scope.counter;
       var editorParentDivId = "xtext-editor-parent-" + tabId;
@@ -36,7 +38,7 @@ define(["angular"], function(angular) {
         id: tabId,
         editorParentDivId: editorParentDivId,
         editorDivId: editorDivId,
-        language: editorType
+        language: language
       };
       console.log(tab);
       $scope.tabs.push(tab);
@@ -45,9 +47,9 @@ define(["angular"], function(angular) {
       var element = angular.element(document).find('#editors');
       element.append('<div id="' + editorParentDivId + '" ng-show="selectedTabId==' + tabId + '"><div id="' + editorDivId + '" class="custom-xtext-editor"></div></div>');
       $compile(element.contents())($scope);
-      if (editorType == 'InformationModel') {
+      if (language == 'infomodel') {
         $scope.addInfoModelEditor(editorDivId);
-      } else if (editorType == 'FunctionBlock') {
+      } else if (language == 'fbmodel') {
         $scope.addFunctionBlockEditor(editorDivId);
       }
     }
@@ -114,7 +116,7 @@ define(["angular"], function(angular) {
         animation: true,
         controller: 'AddEditorModalController',
         templateUrl: 'templates/add-editor-modal-template.html',
-        size: 'lg',
+        size: 'sm',
         resolve: {
           editorTypes: function() {
             return $scope.editorTypes;
@@ -153,14 +155,14 @@ define(["angular"], function(angular) {
     $scope.importModel = function() {
       if ($scope.isValidModel()) {
         if ($scope.isModelSelected()) {
-          if ($scope.tabs[$scope.selectedTabIndex]['language'] == 'InformationModel') {
-            $http.get('./editor/infomodel/link/functionblock/' + $scope.selectedEditor.xtextServices.validationService._encodedResourceId + '/' + $scope.selectedModelId['namespace'] + '/' + $scope.selectedModelId['name'] + '/' + $scope.selectedModelId['version']).success(
+          if ($scope.tabs[$scope.selectedTabIndex]['language'] == 'infomodel') {
+            $http.get('./editor/infomodel/link/fbmodel/' + $scope.selectedEditor.xtextServices.validationService._encodedResourceId + '/' + $scope.selectedModelId['namespace'] + '/' + $scope.selectedModelId['name'] + '/' + $scope.selectedModelId['version']).success(
               function(data, status, headers, config) {
                 $scope.selectedEditor.setValue(data);
               }).error(function(data, status, headers, config) {
               window.alert('Failed')
             });
-          } else if ($scope.tabs[$scope.selectedTabIndex]['language'] == 'FunctionBlock') {
+          } else if ($scope.tabs[$scope.selectedTabIndex]['language'] == 'fbmodel') {
             $http.get('./editor/functionblock/link/datatype/' + $scope.selectedEditor.xtextServices.validationService._encodedResourceId + '/' + $scope.selectedModelId['namespace'] + '/' + $scope.selectedModelId['name'] + '/' + $scope.selectedModelId['version']).success(
               function(data, status, headers, config) {
                 editor.setValue(data);
@@ -187,16 +189,16 @@ define(["angular"], function(angular) {
       var modelType = null;
       console.log('called here');
       console.log($scope.tabs[$scope.selectedTabIndex]['language']);
-      if ($scope.tabs[$scope.selectedTabIndex]['language'] == 'InformationModel') {
-        modelType = "Functionblock";
+      if ($scope.tabs[$scope.selectedTabIndex]['language'] == 'infomodel') {
+        modelType = "fbmodel";
         filter = $scope.queryFilter + " " + modelType;
         $http.get('./editor/infomodel/search=' + filter).success(
           function(data, status, headers, config) {
             $scope.models = data;
           }).error(function(data, status, headers, config) {
           $scope.models = [];
         });
-      } else if ($scope.tabs[$scope.selectedTabIndex]['language'] == 'FunctionBlock') {
+      } else if ($scope.tabs[$scope.selectedTabIndex]['language'] == 'fbmodel') {
         modelType = "Datatype";
         filter = $scope.queryFilter + " " + modelType;
         $http.get('./editor/functionblock/search=' + filter).success(
@@ -226,13 +228,13 @@ define(["angular"], function(angular) {
 
     $scope.editorTypes = editorTypes;
     $scope.selected = {
-      editorType: $scope.editorTypes[0]
+      language: $scope.editorTypes[0]['language']
     };
 
     $scope.ok = function() {
       $uibModalInstance.close($scope.selected.editorType);
       $rootScope.$broadcast("addTab", {
-        editorType: $scope.selected.editorType
+        language: $scope.selected.language
       });
       console.log('sent');
     };

server/devtool/src/main/resources/static/templates/add-editor-modal-template.html

@@ -1,14 +1,21 @@
 <div class="modal-header">
-	<h3 class="modal-title">Please select the type of Editor</h3>
+	<h3 class="modal-title"><center>New Vorto Model</center></h3>
 </div>
 <div class="modal-body">
-	<ul>
-		<li ng-repeat="editorType in editorTypes">
-			<input type="radio" name="response" data-ng-model="selected.editorType"  value="{{editorType}}"/> {{editorType}}
-		</li>
-	</ul>
+	<div>
+		<p>What kind of model do you want to create?</p>
+	</div>
+	<div ng-repeat="editorType in editorTypes">
+		<p>
+			<input type="radio" name="response" data-ng-model="selected.language"  value="{{editorType.language}}"/> {{editorType.display}}
+		</p>
+	</div>
 </div>
 <div class="modal-footer">
-    <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
-    <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
+	<div class="align-left">
+	    <button class="btn btn-primary" type="button" ng-click="ok()">Create</button>
+	 </div>
+	<div class="align-right">
+	    <button class="btn btn-primary" type="button" ng-click="cancel()">Cancel</button>
+	</div>
 </div>