mirror of
https://github.com/nasa/openmct.git
synced 2024-12-21 22:17:49 +00:00
[Forms] Initial minimal functionality
Initial minimal working implementation where a two-way binding between form and form user is observable. Notably, change ng-options to options, since ng-options is terminal (it breaks mct-control). WTD-530
This commit is contained in:
Victor Woeltjen
parent
9576673b84
commit
658d485ccc
@ -1,42 +1,53 @@
|
|||||||
{
|
{
|
||||||
"name": "MCT Forms",
|
"name": "MCT Forms",
|
||||||
"description": "Form generator; includes directive and some controls.",
|
"description": "Form generator; includes directive and some controls.",
|
||||||
"extensions": {
|
"extensions": {
|
||||||
"directives": [
|
"directives": [
|
||||||
{
|
{
|
||||||
"key": "mctForm",
|
"key": "mctForm",
|
||||||
"implementation": "MCTForm.js"
|
"implementation": "MCTForm.js"
|
||||||
}
|
},
|
||||||
],
|
{
|
||||||
"templates": [
|
"key": "mctControl",
|
||||||
{
|
"implementation": "MCTControl.js",
|
||||||
"key": "_checkbox",
|
"depends": [ "controls[]" ]
|
||||||
"templateUrl": "templates/_checkbox.html"
|
}
|
||||||
},
|
],
|
||||||
{
|
"controls": [
|
||||||
"key": "_checkboxes",
|
{
|
||||||
"templateUrl": "templates/_checkboxes.html"
|
"key": "checkbox",
|
||||||
},
|
"templateUrl": "templates/controls/checkbox.html"
|
||||||
{
|
}
|
||||||
"key": "_datetime",
|
],
|
||||||
"templateUrl": "templates/_datetime.html"
|
"templates": [
|
||||||
},
|
{
|
||||||
{
|
"key": "_checkbox",
|
||||||
"key": "_select",
|
"templateUrl": "templates/_checkbox.html"
|
||||||
"templateUrl": "templates/_select.html"
|
},
|
||||||
},
|
{
|
||||||
{
|
"key": "_checkboxes",
|
||||||
"key": "_selects",
|
"templateUrl": "templates/_checkboxes.html"
|
||||||
"templateUrl": "templates/_selects.html"
|
},
|
||||||
},
|
{
|
||||||
{
|
"key": "_datetime",
|
||||||
"key": "_textfield",
|
"templateUrl": "templates/_datetime.html"
|
||||||
"templateUrl": "templates/_textfield.html"
|
},
|
||||||
},
|
{
|
||||||
{
|
"key": "_select",
|
||||||
"key": "_textfields",
|
"templateUrl": "templates/_select.html"
|
||||||
"templateUrl": "templates/_textfields.html"
|
},
|
||||||
}
|
{
|
||||||
]
|
"key": "_selects",
|
||||||
}
|
"templateUrl": "templates/_selects.html"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"key": "_textfield",
|
||||||
|
"templateUrl": "templates/_textfield.html"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"key": "_textfields",
|
||||||
|
"templateUrl": "templates/_textfields.html"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
7
platform/forms/res/templates/controls/checkbox.html
Normal file
7
platform/forms/res/templates/controls/checkbox.html
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<label class="checkbox custom no-text">
|
||||||
|
<input type="checkbox"
|
||||||
|
name="{{name}}"
|
||||||
|
ng-model="ngModel[name]"
|
||||||
|
ng-disabled="ngDisabled">
|
||||||
|
<em> </em>
|
||||||
|
</label>
|
||||||
@ -1,38 +1,42 @@
|
|||||||
<b>{{structure.name}}</b>
|
<form name="{{structure.key}}">
|
||||||
|
|
||||||
<div class="form">
|
<div class="form">
|
||||||
<span ng-repeat="section in structure.sections">
|
<span ng-repeat="section in structure.sections">
|
||||||
<div class="section-header">{{section.name}}</div>
|
<div class="section-header" ng-if="section.name">
|
||||||
|
{{section.name}}
|
||||||
|
</div>
|
||||||
<div class="form-section">
|
<div class="form-section">
|
||||||
<!--<div ng-repeat="row in section.rows" class="form-row validates">-->
|
<div ng-repeat="row in section.rows"
|
||||||
<!--<div class='label'>{{row.name}}</div>-->
|
class="form-row validates"
|
||||||
<!--<div class='controls {cssclass}'>-->
|
ng-class="{ required: row.required }">
|
||||||
<!--<div class="wrapper">-->
|
|
||||||
<!--<!–{{row.control}} - {{model[row.key]}}–>-->
|
|
||||||
<!--<span class="ui-symbol req" ng-show="row.required">*</span>-->
|
|
||||||
<!--<mct-include key="row.control" ng-model="model[row.key]"></mct-include>-->
|
|
||||||
<!--</div>-->
|
|
||||||
<!--</div>-->
|
|
||||||
<!--</div>-->
|
|
||||||
<div ng-repeat="row in section.rows" class="form-row validates">
|
|
||||||
<div class='label'>{{row.name}}</div>
|
|
||||||
<div class='controls {cssclass}'>
|
|
||||||
<div ng-repeat="item in row.items" class="validates">
|
|
||||||
|
|
||||||
<div>
|
<div class='label'>{{row.name}}</div>
|
||||||
{{item.control}} | Item.Key={{item.key}} | model={{model[item.key]}}
|
<div class='controls'>
|
||||||
<span class="ui-symbol req" ng-show="item.required">*</span>
|
<div class="wrapper" ng-if="row.control">
|
||||||
<mct-include key="item.control" ng-model="model[item.key]" id="item.key"></mct-include>
|
<mct-control key="row.control"
|
||||||
</div>
|
ng-model="ngModel"
|
||||||
|
ng-required="row.required"
|
||||||
|
ng-pattern="row.pattern"
|
||||||
|
options="row.options"
|
||||||
|
structure="row"
|
||||||
|
name="{{row.key}}">
|
||||||
|
</mct-control>
|
||||||
|
</div>
|
||||||
|
<div ng-repeat="item in row.items" class="validates">
|
||||||
|
<mct-control key="item.control"
|
||||||
|
ng-model="ngModel"
|
||||||
|
ng-required="item.required"
|
||||||
|
ng-pattern="item.pattern"
|
||||||
|
options="item.options"
|
||||||
|
structure="item"
|
||||||
|
name="{{item.key}}">
|
||||||
|
</mct-control>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
<div class="form-section">
|
</div>
|
||||||
<div class="form-row" ng-if="structure.submit">
|
|
||||||
<a class='btn lg major' href=''>{{structure.submit}}</a>
|
</form>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<span ng-click="model.foo='Foo'">CLICK!</span>
|
|
||||||
<div>Model: {{model | json}}</div>
|
|
||||||
</div>
|
|
||||||
@ -21,7 +21,9 @@ define(
|
|||||||
function controller($scope) {
|
function controller($scope) {
|
||||||
$scope.$watch("key", function (key) {
|
$scope.$watch("key", function (key) {
|
||||||
// Pass the template URL to ng-include via scope.
|
// Pass the template URL to ng-include via scope.
|
||||||
$scope.inclusion = controlMap[$scope.key];
|
$scope.inclusion = controlMap[key];
|
||||||
|
console.log(key);
|
||||||
|
console.log($scope.inclusion);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -36,14 +38,35 @@ define(
|
|||||||
// template path
|
// template path
|
||||||
template: '<ng-include src="inclusion"></ng-include>',
|
template: '<ng-include src="inclusion"></ng-include>',
|
||||||
|
|
||||||
|
// ngOptions is terminal, so we need to be higher priority
|
||||||
|
priority: 1000,
|
||||||
|
|
||||||
// Pass through Angular's normal input field attributes
|
// Pass through Angular's normal input field attributes
|
||||||
scope: {
|
scope: {
|
||||||
|
// Used to choose which form control to use
|
||||||
|
key: "=",
|
||||||
|
|
||||||
|
// The state of the form value itself
|
||||||
ngModel: "=",
|
ngModel: "=",
|
||||||
ngOptions: "=",
|
|
||||||
|
// Enabled/disabled state
|
||||||
ngDisabled: "=",
|
ngDisabled: "=",
|
||||||
ngPattern: "="
|
|
||||||
|
// Pattern (for input fields)
|
||||||
|
ngPattern: "=",
|
||||||
|
|
||||||
|
// Set of choices (if any)
|
||||||
|
options: "=",
|
||||||
|
|
||||||
|
// Structure (subtree of Form Structure)
|
||||||
|
structure: "=",
|
||||||
|
|
||||||
|
// Name, as in "<input name="...
|
||||||
|
name: "@"
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return MCTControl;
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
@ -22,7 +22,7 @@ define(
|
|||||||
return {
|
return {
|
||||||
restrict: "E",
|
restrict: "E",
|
||||||
templateUrl: templatePath,
|
templateUrl: templatePath,
|
||||||
scope: { structure: "=", model: "=ngModel" }
|
scope: { structure: "=", ngModel: "=ngModel" }
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user