ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-04-08 11:54:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Forms] Add more form controls

Browse Source 
Add remaining platform form controls; amend mct-form
and mct-control directives to better communicate state.
Begin working on problem of communicating validation
back out of the form. WTD-530.
This commit is contained in:
Victor Woeltjen 2014-11-26 12:50:51 -08:00
parent 658d485ccc
commit 77c1b150d9
7 changed files with 77 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
platform/forms/bundle.json
View File

@ -17,6 +17,18 @@
{
"key": "checkbox",
"templateUrl": "templates/controls/checkbox.html"
},
{
"key": "datetime",
"templateUrl": "templates/controls/datetime.html"
},
{
"key": "select",
"templateUrl": "templates/controls/select.html"
},
{
"key": "textfield",
"templateUrl": "templates/controls/textfield.html"
}
],
"templates": [

28
platform/forms/res/templates/controls/datetime.html Normal file
View File

@ -0,0 +1,28 @@
<div class='form-control complex datetime'>
<div class='field-hints'>
<span class='hint date'>Date</span>
<span class='hint time sm'>Hour</span>
<span class='hint time sm'>Min</span>
<span class='hint time sm'>Sec</span>
<span class='hint timezone'>Timezone</span>
</div>
<div class='fields'>
<span class='field control date'>
<input type='text' name='date' />
</span>
<span class='field control time sm'>
<input type='text' name='hour' maxlength='2' />
</span>
<span class='field control time sm'>
<input type='text' name='min' maxlength='2' />
</span>
<span class='field control time sm'>
<input type='text' name='sec' maxlength='2' />
</span>
<span class='field control timezone'>
UTC
</span>
</div>
</div>
</div>

7
platform/forms/res/templates/controls/select.html Normal file
View File

@ -0,0 +1,7 @@
<select class='form-control input select'
ng-model="ngModel[name]"
ng-options="o.name for o in options"
name="name">
<option value="" ng-if="!ngModel[name]">- Select One -</option>
<span class='ui-symbol arw colorKey'>v</span>
</select>

7
platform/forms/res/templates/controls/textfield.html Normal file
View File

@ -0,0 +1,7 @@
<span class='form-control shell'>
<span class='field control'>
<input type="text"
ng-model="ngModel[name]"
name="{{name}}">
</span>
</span>

14
platform/forms/res/templates/form.html
View File

@ -1,4 +1,4 @@
<form name="{{structure.key}}">
<form name="mctForm" novalidate>
<div class="form">
<span ng-repeat="section in structure.sections">
@ -10,13 +10,18 @@
class="form-row validates"
ng-class="{ required: row.required }">
<div class='label'>{{row.name}}</div>
<div class='label' title="{{row.description}}">
{{row.name}}
<span ng-if="row.description"
class="ui-symbol">
i
</span>
</div>
<div class='controls'>
<div class="wrapper" ng-if="row.control">
<div class="wrapper" ng-if="row.control">>
<mct-control key="row.control"
ng-model="ngModel"
ng-required="row.required"
ng-pattern="row.pattern"
options="row.options"
structure="row"
name="{{row.key}}">
@ -26,7 +31,6 @@
<mct-control key="item.control"
ng-model="ngModel"
ng-required="item.required"
ng-pattern="item.pattern"
options="item.options"
structure="item"
name="{{item.key}}">

2
platform/forms/src/MCTControl.js
View File

@ -22,8 +22,6 @@ define(
$scope.$watch("key", function (key) {
// Pass the template URL to ng-include via scope.
$scope.inclusion = controlMap[key];
console.log(key);
console.log($scope.inclusion);
});
}

15
platform/forms/src/MCTForm.js
View File

@ -19,10 +19,23 @@ define(
"templates/form.html"
].join("/");
function controller($scope) {
$scope.$watch("mctForm", function (mctForm) {
if ($scope.name) {
$scope.$parent.mctForm = mctForm;
}
});
}
return {
restrict: "E",
templateUrl: templatePath,
scope: { structure: "=", ngModel: "=ngModel" }
link: controller,
scope: {
structure: "=",
ngModel: "=",
name: "@"
}
};
}