143 lines
4.6 KiB
HTML
143 lines
4.6 KiB
HTML
<div ng-if='loading' layout-padding>
|
|
<md-progress-circular md-mode="indeterminate"></md-progress-circular>
|
|
</div>
|
|
|
|
<div layout-padding ng-if='!loading'>
|
|
<div layout="row">
|
|
<div flex="40" layout-padding>
|
|
<md-card layout-padding>
|
|
<h2>
|
|
<i class="fa fa-info-circle"></i> Task Info:
|
|
</h2>
|
|
<div layout="column">
|
|
<div>
|
|
<md-select placeholder="Pick A Course" ng-model="course.title" required ng-change='courseSelected()'>
|
|
<md-option ng-repeat="c in courses" value="{{c.courseName}}">{{c.courseName}}</md-option>
|
|
</md-select>
|
|
</div>
|
|
<div>
|
|
<md-input-container>
|
|
<label>Title</label>
|
|
<input ng-model="task.title" required>
|
|
</md-input-container>
|
|
</div>
|
|
<div>
|
|
<md-input-container>
|
|
<label>Description</label>
|
|
<textarea ng-model="task.description" required></textarea>
|
|
</md-input-container>
|
|
</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" ng-click='submit()' ng-disabled="submitting"><i class="fa fa-paper-plane"></i> Submit</md-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</md-card>
|
|
<div layout="column">
|
|
<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" 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 ng-repeat="detail in compDetails">
|
|
<label>{{detail.detail}}</label>
|
|
<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}}
|
|
</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="60" 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.title}}</h3>
|
|
<h4>Due At: {{ task.date }}</h4>
|
|
<p>{{ dueTimeFromNow }}</p>
|
|
<p style="white-space: pre-wrap;">{{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'">
|
|
<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>
|
|
<!-- 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>
|
|
|
|
</div> |