Created modal to describe model before creating editor

shiv12095 · Jul 25, 2016 · 9325c13 · 9325c13
1 parent dfba0ca
commit 9325c13
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 28 deletions.
diff --git a/server/devtool/src/main/resources/static/dist/js/controllers.js b/server/devtool/src/main/resources/static/dist/js/controllers.js
@@ -25,11 +25,15 @@ define(["angular"], function(angular) {
     $scope.models = [];
     $scope.queryFilter = "";
 
-    $scope.$on("addTab", function(event, args) {
-      $scope.addEditor(args.language);
+    $scope.$on("addTab", function(event, model) {
+      $scope.addEditor(model);
+    });
+
+    $scope.$on("describeEditor", function(event, editor) {
+      $scope.openDescribeEditorModal(editor);
     });
 
-    $scope.addEditor = function(language) {
+    $scope.addEditor = function(model) {
       $scope.counter++;
       var tabId = $scope.counter;
       var editorParentDivId = "xtext-editor-parent-" + tabId;
@@ -38,18 +42,19 @@ define(["angular"], function(angular) {
         id: tabId,
         editorParentDivId: editorParentDivId,
         editorDivId: editorDivId,
-        language: language
+        language: model.language,
+        name: model.name,
+        filename: model.filename
       };
-      console.log(tab);
       $scope.tabs.push(tab);
       $scope.selectedTabIndex = $scope.tabs.length - 1;
       $scope.selectedTabId = $scope.tabs[$scope.selectedTabIndex]['id'];
       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 (language == 'infomodel') {
+      if (model.language == 'infomodel') {
         $scope.addInfoModelEditor(editorDivId);
-      } else if (language == 'fbmodel') {
+      } else if (model.language == 'fbmodel') {
         $scope.addFunctionBlockEditor(editorDivId);
       }
     }
@@ -92,7 +97,6 @@ define(["angular"], function(angular) {
 
     $scope.getEditor = function(index) {
       var tab = $scope.tabs[index];
-      console.log(tab);
       var tabEditorId = '#' + tab['editorParentDivId'];
       return angular.element(document.querySelector(tabEditorId));
     }
@@ -108,10 +112,9 @@ define(["angular"], function(angular) {
       $scope.selectedTabId = $scope.tabs[$scope.selectedTabIndex]['id']
       $scope.selectedEditor = $scope.editors[$scope.selectedTabIndex];
       $scope.search();
-      console.log('Selected ' + index);
     }
 
-    $scope.openModal = function() {
+    $scope.openAddEditorModal = function() {
       var modalInstance = $uibModal.open({
         animation: true,
         controller: 'AddEditorModalController',
@@ -123,11 +126,19 @@ define(["angular"], function(angular) {
           }
         }
       });
-
-      modalInstance.result.then(function(selectedItem) {
-        $scope.selected = selectedItem;
-      });
     };
+
+    $scope.openDescribeEditorModal = function(editorType) {
+      var modalInstance = $uibModal.open({
+        animation: true,
+        controller: 'DescribeEditorModalController',
+        templateUrl: 'templates/describe-editor-modal-template.html',
+        size: 'sm',
+        resolve: {
+			editorType: editorType			
+        }
+      });
+    };    
 
     $scope.isModelSelected = function() {
       for (i = 0; i < $scope.displayedModels.length; i++) {
@@ -230,24 +241,39 @@ define(["angular"], function(angular) {
   });
 
   app.controller('AddEditorModalController', function($rootScope, $scope, $uibModalInstance, editorTypes) {
-
     $scope.editorTypes = editorTypes;
-    $scope.selected = {
-      language: $scope.editorTypes[0]['language']
-    };
+	$scope.selected = $scope.editorTypes[0];
 
     $scope.ok = function() {
-      $uibModalInstance.close($scope.selected.editorType);
-      $rootScope.$broadcast("addTab", {
-        language: $scope.selected.language
-      });
-      console.log('sent');
+      $uibModalInstance.close($scope.selected.editorType);      
+      $rootScope.$broadcast("describeEditor", $scope.selected);
     };
 
     $scope.cancel = function() {
       $uibModalInstance.dismiss('cancel');
     };
   });
+
+  app.controller('DescribeEditorModalController', function($rootScope, $scope, $uibModalInstance, editorType) {
+
+    $scope.editorType = editorType;
+    $scope.model = {
+    	language: editorType.language,
+		name: "",
+		version: "",
+		description: "",
+    };
+
+    $scope.ok = function() {
+      $uibModalInstance.close($scope.model);
+      $scope.model.filename = $scope.model.name + "." + $scope.model.language;
+      $rootScope.$broadcast("addTab", $scope.model);
+    };
+
+    $scope.cancel = function() {
+      $uibModalInstance.dismiss('cancel');
+    };
+  });  
 
   return app;
 });
diff --git a/server/devtool/src/main/resources/static/templates/add-editor-modal-template.html b/server/devtool/src/main/resources/static/templates/add-editor-modal-template.html
@@ -7,15 +7,15 @@ <h3 class="modal-title"><center>New Vorto Model</center></h3>
 	</div>
 	<div ng-repeat="editorType in editorTypes">
 		<p>
-			<input type="radio" name="response" data-ng-model="selected.language"  value="{{editorType.language}}"/> {{editorType.display}}
+			<input type="radio" ng-model="$parent.selected" ng-value="editorType"/> {{editorType.display}}
 		</p>
 	</div>
 </div>
 <div class="modal-footer">
 	<div class="align-left">
-	    <button class="btn btn-primary" type="button" ng-click="ok()">Create</button>
+	    <button class="btn btn-primary" type="button" ng-click="ok()">Next</button>
 	 </div>
 	<div class="align-right">
 	    <button class="btn btn-primary" type="button" ng-click="cancel()">Cancel</button>
 	</div>
-</div>
+</div>
diff --git a/server/devtool/src/main/resources/static/templates/describe-editor-modal-template.html b/server/devtool/src/main/resources/static/templates/describe-editor-modal-template.html
@@ -0,0 +1,36 @@
+<div class="modal-header">
+	<h3 class="modal-title"><center>Create New {{editorType.display}}</center></h3>
+</div>
+<div class="modal-body">
+	<div>
+		<p>Please enter the following details</p>
+	</div>
+	<div>
+		<p>
+			<div class="describe-modal-label">
+				{{editorType.display}} Name 
+			</div>
+			<input type="text" size="37" data-ng-model="model.name" required/> 
+		</p>
+		<p>
+			<div class="describe-modal-label">
+				{{editorType.display}} Version 
+			</div>
+			<input type="text" size="37" data-ng-model="model.version" required/> 
+		</p>
+		<p>
+			<div class="describe-modal-label">
+				{{editorType.display}} Description 
+			</div>			
+			<textarea rows="4" cols="35" data-ng-model="model.description"/> 
+		</p>
+	</div>
+</div>
+<div class="modal-footer">
+	<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>
diff --git a/server/devtool/src/main/resources/static/templates/editor-template.html b/server/devtool/src/main/resources/static/templates/editor-template.html
@@ -20,12 +20,12 @@ <h3 class="box-title"><i class="fa fa-edit"></i> Describe your Vorto Model</h3>
 			        	<a data-target="#tab" aria-controls="home" role="tab" data-toggle="tab">
 			        		<i class="fa fa-check-circle" aria-hidden="true" ng-show="isValidEditorTab($index)" style="color:green;"></i>
 			        		<i class="fa fa-exclamation-circle" aria-hidden="true" ng-hide="isValidEditorTab($index)" style="color:red;"></i>
-			        		Tab {{tab.id}} 
+			        		{{tab.filename}} 
 			        		<span ng-click="deleteTab($index)" class="glyphicon glyphicon-remove"></span>
 			        	</a>
 					</li>
 			        <li role="presentation">
-			        	<a aria-controls="home" role="tab" data-toggle="tab" ng-click="openModal()"><i class="fa fa-plus" aria-hidden="true"></i></a>
+			        	<a aria-controls="home" role="tab" data-toggle="tab" ng-click="openAddEditorModal()"><i class="fa fa-plus" aria-hidden="true"></i></a>
 			        </li>
 			    </ul>		    
 			</div>