#68 Added Link & RadioButtons components to Task generator

templates/js/controllers/newTasksController.js

@@ -1,6 +1,8 @@
 angular.module('SeHub').controller('newTasksController', ['$scope',
 	function($scope) {
 
+		$scope.newComp = {};
+		$scope.newComp.isMandatory = false;
 
 
 		$scope.componentTypes = [{
@@ -9,6 +11,10 @@ angular.module('SeHub').controller('newTasksController', ['$scope',
 			"type": "textarea"
 		}, {
 			"type": "checkbox"
+		}, {
+			"type": "link"
+		}, {
+			"type": "radiobuttons"
 		}];
 
 		$scope.task = {};
@@ -19,8 +25,58 @@ angular.module('SeHub').controller('newTasksController', ['$scope',
 		// $scope.task = [];
 
 		$scope.addComponent = function() {
-			$scope.task.components.push($scope.newComp);
+			var comp = {};
+			var type = $scope.newComp.type;
+			comp.type = type;
+			comp.isMandatory = $scope.newComp.isMandatory;
+			comp.label = "";
+			var i = 0
+			if (!(type === 'textbox' || type === 'textarea' || type === 'checkbox'))
+				while ($scope.newComp.label[i]) {
+					comp.label += $scope.newComp.label[i] + "|";
+					i++;
+				} else
+				comp.label = $scope.newComp.label[i];
+
+			console.log(comp);
+			$scope.task.components.push(comp);
+
+			// console.log($scope.newComp);
 			$scope.newComp = {};
+			$scope.newComp.isMandatory = false;
+			$scope.compDetails = [];
+			$scope.isRadioButton = false;
+		}
+
+		$scope.ComponentType = function(type) {
+			if (type === 'textbox' || type === 'textarea' || type === 'checkbox')
+				$scope.compDetails = [{
+					detail: "Label"
+				}];
+			else if (type === 'radiobuttons') {
+				$scope.compDetails = [{
+					detail: "Label"
+				}];
+				$scope.compDetails.push({
+					detail: "Option" + $scope.compDetails.length + ": "
+				});
+			} else if (type === 'link')
+				$scope.compDetails = [{
+					detail: "Label"
+				}, {
+					detail: "URL Path"
+				}];
+
+			if (type === 'radiobuttons')
+				$scope.isRadioButton = true;
+			else
+				$scope.isRadioButton = false;
+		}
+
+		$scope.addMoreOptions = function() {
+			$scope.compDetails.push({
+				detail: "Option" + $scope.compDetails.length + ": "
+			});
 		}
 
 		$scope.dueTime = function() {
@@ -29,5 +85,31 @@ angular.module('SeHub').controller('newTasksController', ['$scope',
 			var d = new Date($scope.task.date);
 			$scope.dueTimeFromNow = moment(d).fromNow();
 		}
+
+		$scope.initLinkComp = function(component){
+			var arr = component.label.split("|");
+			for (var i = 0; i < arr.length - 1; i++) {
+				if(i == 0)
+					component.title = arr[i];
+				else
+					component.href = arr[i];
+			};
+		}
+
+		$scope.initRadioButtonsComp = function(component){
+			var arr = component.label.split("|");
+			component.values = [];
+			for (var i = 0; i < arr.length - 1; i++) {
+				if(i == 0)
+					component.title = arr[i];
+				else
+					component.values.push({text: arr[i], id: i});
+			};
+		}
+
+		$scope.RB = function(comp){
+			console.info(comp);
+		}
+
 	}
 ]);

templates/views/newTask.html

@@ -46,16 +46,21 @@
 				</div>
 				<div>
 					Select Type:
-					<md-select placeholder="Component Type" ng-model="newComp.type">
+					<md-select placeholder="Component Type" ng-model="newComp.type" ng-change="ComponentType(newComp.type)">
 		        		<md-option ng-repeat="component in componentTypes" value="{{component.type}}">{{component.type}}</md-option>
 		      		</md-select> 
 				</div>
 				<div>
-					<md-input-container>
+					<md-input-container ng-repeat="detail in compDetails">
-						<label>Label</label>
+						<label>{{detail.detail}}</label>
-						<input ng-model="newComp.label" required>
+						<input ng-model="newComp.label[$index]" required>
 		    		</md-input-container>
 				</div>
+				<div ng-if="isRadioButton">
+					<md-button ng-click="addMoreOptions()" >
+		    			Add An Option
+		  			</md-button>
+		  		</div>
 				<div>
 					<md-switch ng-model="newComp.isMandatory" aria-label="Switch 1">
 		    			Mandatory?: {{ newComp.isMandatory}}
@@ -84,6 +89,9 @@
 			<p>{{ dueTimeFromNow }}</p>
 			<p>{{task.task.description}}</p>
 			<p>{{(task.isPersonal) ? "Personal" : "Project"}} Task</p>
+
+			<md-divider ng-if="!$last"></md-divider>
+
 			<div ng-repeat="component in task.components">
 				<!-- if text box -->
 				<div ng-if="component.type == 'textbox'">
@@ -105,6 +113,20 @@
 			          {{ component.label}}
 			        </md-checkbox>
 				</div>
+				<!-- if Link -->
+				<div ng-if="component.type == 'link'" layout="column" ng-init="initLinkComp(component)" style="width: 100%" layout-align="center">
+					<md-button ng-href="{{component.href}}" style="width: 100%" target="_blank">
+					<i class="fa fa-link"></i> {{component.title}}
+					</md-button>
+				</div>
+				<!-- if RadioButtons -->
+				<div ng-if="component.type == 'radiobuttons'" ng-init="initRadioButtonsComp(component)">
+					{{component.title}}
+					<md-radio-group ng-model="component.value" ng-change="RB(component)">
+				      <md-radio-button ng-repeat="option in component.values" value="{{option.text}}" class="md-primary">{{option.text}}</md-radio-button>
+    				</md-radio-group>
+				</div>
+				<md-divider ng-if="!$last"></md-divider>
 			</div>
 		</md-card>
 	</div>