se-hub/templates/views/newTask.html

<div layout-padding>
	<div layout="row">
	<div flex="20" layout-padding>
		<md-card layout-padding>
		<h2>
			<i class="fa fa-info-circle"></i> Task Info: 
		</h2>
		<div layout="column">
			<div>
				<md-input-container>
					<label>Title</label>
					<input ng-model="task.task.title" required>
    			</md-input-container>
			</div>
			<div>
				<md-input-container>
				<label>Description</label>
				<textarea ng-model="task.task.description" required></textarea>
			</div>
			<div>
				<md-switch ng-model="task.isPersonal" aria-label="Switch 1">
    				This Is: a {{(task.isPersonal) ? "Personal" : "Project"}} Task
  				</md-switch>
			</div>
			<div>
				Due Date:
				<datepicker date-format="d MMMM yyyy" style="width:100%" ng-click="dueTime()">
				  <input ng-model="task.date" type="text"/>
				</datepicker>
			</div>
			<div layout="row">
				<div flex="60"></div>
				<div>
					<md-button class="md-raised md-primary"><i class="fa fa-paper-plane"></i> Submit</md-button>
				</div>
			</div>
		</div>
			</md-card>
	<div layout="column" layout-padding>
		<md-card layout-padding>
			<div>
				<h2>
					<i class="fa fa-cubes"></i> Add A component: 
				</h2>
			</div>
			<div>
				Select Type:
				<md-select placeholder="Component Type" ng-model="newComp.type">
	        		<md-option ng-repeat="component in componentTypes" value="{{component.type}}">{{component.type}}</md-option>
	      		</md-select> 
			</div>
			<div>
				<md-input-container>
					<label>Label</label>
					<input ng-model="newComp.label" required>
	    		</md-input-container>
			</div>
			<div>
				<md-switch ng-model="newComp.isMandatory" aria-label="Switch 1">
	    			Mandatory?: {{ newComp.isMandatory}}
	  			</md-switch>
	  		</div>
	  		<div layout="row">
	  			<div flex="65"></div>
	  			<md-button class="md-raised" ng-click="addComponent()"><i class="fa fa-plus"></i> Add To Task</md-button>
	  		</div>
	  		</md-card>
  	</div>
	</div>


	<div flex="80" layout-padding>
		<!-- <md-card style="background-image: url('http://www.stationeryhq.com/content/images/thumbs/0000324_clipboard_500.png')">

		</md-card> -->
		<h2>
			<i class="fa fa-eye"></i> Task Preview:
		</h2>
		
		<md-card layout-padding>
			<h3><i class="fa fa-clipboard"></i> {{task.task.title}}</h3>
			<h4>Due At: {{ task.date }}</h4>
			<p>{{ dueTimeFromNow }}</p>
			<p>{{task.task.description}}</p>
			<p>{{(task.isPersonal) ? "Personal" : "Project"}} Task</p>
			<div ng-repeat="component in task.components">
				<!-- if text box -->
				<div ng-if="component.type == 'textbox'">
					<md-input-container>
						<label>{{component.label}}</label>
						<input ng-model="component.value">
    				</md-input-container>
				</div>
				<!-- if Text Area -->
				<div ng-if="component.type == 'textarea'">
					<md-input-container>
						<label>{{component.label}}</label>
						<textarea ng-model="component.value"></textarea>
    				</md-input-container>
				</div>
				<!-- if Checkbox -->
				<div ng-if="component.type == 'checkbox'">
					<md-checkbox ng-model="component.value" aria-label="Checkbox 1">
			          {{ component.label}}
			        </md-checkbox>
				</div>
			</div>
		</md-card>
	</div>

</div>