Merge branch 'HollyFang-feature/SceemaGroup'

This commit is contained in:
Igor Kulikov 2019-06-27 09:48:25 +03:00
commit 5554496de1
8 changed files with 116 additions and 22 deletions

View File

@ -145,11 +145,13 @@ function JsonForm($compile, $templateCache, $mdColorPicker) {
};
schema.strict = true;
var form = scope.form ? angular.copy(scope.form) : [ "*" ];
var groupInfoes = scope.groupInfoes ? angular.copy(scope.groupInfoes) : [];
var model = scope.model || {};
scope.model = inspector.sanitize(schema, model).data;
scope.formProps.option.formDefaults.readonly = readonly;
scope.formProps.schema = schema;
scope.formProps.form = form;
scope.formProps.groupInfoes = groupInfoes;
scope.formProps.model = angular.copy(scope.model);
if (!skipRerender) {
recompile();
@ -176,6 +178,12 @@ function JsonForm($compile, $templateCache, $mdColorPicker) {
}
});
scope.$watch('groupInfoes',function(newValue, prevValue) {
if (newValue && newValue != prevValue) {
scope.updateValues();
}
});
scope.validate();
recompile();
@ -189,6 +197,7 @@ function JsonForm($compile, $templateCache, $mdColorPicker) {
form: '=',
model: '=',
formControl: '=',
groupInfoes: '=',
readonly: '='
},
link: linker

View File

@ -47,6 +47,7 @@ class ReactSchemaForm extends React.Component {
ReactSchemaForm.propTypes = {
schema: React.PropTypes.object,
form: React.PropTypes.array,
groupInfoes: React.PropTypes.array,
model: React.PropTypes.object,
option: React.PropTypes.object,
onModelChange: React.PropTypes.func,
@ -56,7 +57,8 @@ ReactSchemaForm.propTypes = {
ReactSchemaForm.defaultProps = {
schema: {},
form: [ "*" ]
form: [ "*" ],
groupInfoes:[]
}
ReactSchemaForm.childContextTypes = {

View File

@ -83,6 +83,7 @@ class ThingsboardSchemaForm extends React.Component {
this.props.onToggleFullscreen();
}
builder(form, model, index, onChange, onColorClick, onToggleFullscreen, mapper) {
var type = form.type;
let Field = this.mapper[type];
@ -99,8 +100,8 @@ class ThingsboardSchemaForm extends React.Component {
return <Field model={model} form={form} key={index} onChange={onChange} onColorClick={onColorClick} onToggleFullscreen={onToggleFullscreen} mapper={mapper} builder={this.builder}/>
}
render() {
let merged = utils.merge(this.props.schema, this.props.form, this.props.ignore, this.props.option);
createSchema(theForm) {
let merged = utils.merge(this.props.schema, theForm, this.props.ignore, this.props.option);
let mapper = this.mapper;
if(this.props.mapper) {
mapper = _.merge(this.mapper, this.props.mapper);
@ -118,5 +119,43 @@ class ThingsboardSchemaForm extends React.Component {
<div style={{width: '100%'}} className={formClass}>{forms}</div>
);
}
render() {
if(this.props.groupInfoes&&this.props.groupInfoes.length>0){
let content=[];
for(let info of this.props.groupInfoes){
let forms = this.createSchema(this.props.form[info.formIndex]);
let item = <ThingsboardSchemaGroup key={content.length} forms={forms} info={info}></ThingsboardSchemaGroup>;
content.push(item);
}
return (<div>{content}</div>);
}
else
return this.createSchema(this.props.form);
}
}
export default ThingsboardSchemaForm;
class ThingsboardSchemaGroup extends React.Component{
constructor(props) {
super(props);
this.state={
showGroup:true
}
}
toogleGroup(index) {
this.setState({
showGroup:!this.state.showGroup
});
}
render() {
let theCla = "pull-right fa fa-chevron-down md-toggle-icon"+(this.state.showGroup?"":" tb-toggled")
return (<section className="md-whiteframe-z1" style={{marginTop: '10px'}}>
<div className='SchemaGroupname md-button-toggle' onClick={this.toogleGroup.bind(this)}>{this.props.info.GroupTitle}<span className={theCla}></span></div>
<div style={{padding: '20px'}} className={this.state.showGroup?"":"invisible"}>{this.props.forms}</div>
</section>);
}
}

View File

@ -121,3 +121,12 @@ label.tb-label {
.tb-head-label {
color: rgba(0, 0, 0, .54);
}
.SchemaGroupname{
padding: 10px 20px;
background-color: #f1f1f1;
}
.invisible{
display: none;
}

View File

@ -63,6 +63,8 @@ function WidgetConfig($compile, $templateCache, $rootScope, $translate, $timeout
type: "object",
properties: {}
};
scope.emptySettingsGroupInfoes=[];
scope.defaultSettingsForm = [
'*'
];
@ -90,6 +92,7 @@ function WidgetConfig($compile, $templateCache, $rootScope, $translate, $timeout
scope.currentSettingsSchema = {};
scope.currentSettings = angular.copy(scope.emptySettingsSchema);
scope.currentSettingsGroupInfoes = angular.copy(scope.emptySettingsGroupInfoes);
scope.targetDeviceAlias = {
value: null
@ -191,10 +194,12 @@ function WidgetConfig($compile, $templateCache, $rootScope, $translate, $timeout
if (scope.widgetSettingsSchema && scope.widgetSettingsSchema.schema) {
scope.currentSettingsSchema = scope.widgetSettingsSchema.schema;
scope.currentSettingsForm = scope.widgetSettingsSchema.form || angular.copy(scope.defaultSettingsForm);
scope.currentSettingsGroupInfoes = scope.widgetSettingsSchema.groupInfoes;
scope.currentSettings = scope.settings;
} else {
scope.currentSettingsForm = angular.copy(scope.defaultSettingsForm);
scope.currentSettingsSchema = angular.copy(scope.emptySettingsSchema);
scope.currentSettingsGroupInfoes = angular.copy(scope.emptySettingsGroupInfoes);
scope.currentSettings = {};
}
}

View File

@ -286,6 +286,7 @@
<tb-json-form flex schema="currentSettingsSchema"
form="currentSettingsForm"
model="currentSettings"
group-infoes="currentSettingsGroupInfoes"
form-control="ngform">
</tb-json-form>
</ng-form>

View File

@ -669,22 +669,49 @@ export default class TbMapWidgetV2 {
var schema;
if (mapProvider === 'google-map') {
schema = angular.copy(googleMapSettingsSchema);
schema.groupInfoes=[{
"formIndex":0,
"GroupTitle":"Google Map Settings"
}];
} else if (mapProvider === 'openstreet-map') {
schema = angular.copy(openstreetMapSettingsSchema);
schema.groupInfoes=[{
"formIndex":0,
"GroupTitle":"Openstreet Map Settings"
}];
} else if (mapProvider === 'image-map') {
return imageMapSettingsSchema;
} else if (mapProvider === 'tencent-map') {
schema = angular.copy(tencentMapSettingsSchema);
schema.groupInfoes=[{
"formIndex":0,
"GroupTitle":"Tencent Map Settings"
}];
} else if (mapProvider === 'here') {
schema = angular.copy(hereMapSettingsSchema);
schema.groupInfoes=[{
"formIndex":0,
"GroupTitle":"Here Map Settings"
}];
}
if(!schema.groupInfoes)schema.groupInfoes=[];
schema.form = [schema.form];
angular.merge(schema.schema.properties, commonMapSettingsSchema.schema.properties);
schema.schema.required = schema.schema.required.concat(commonMapSettingsSchema.schema.required);
schema.form = schema.form.concat(commonMapSettingsSchema.form);
schema.form.push(commonMapSettingsSchema.form);//schema.form.concat(commonMapSettingsSchema.form);
schema.groupInfoes.push({
"formIndex":schema.groupInfoes.length,
"GroupTitle":"Common Map Settings"
});
if (drawRoutes) {
angular.merge(schema.schema.properties, routeMapSettingsSchema.schema.properties);
schema.schema.required = schema.schema.required.concat(routeMapSettingsSchema.schema.required);
schema.form = schema.form.concat(routeMapSettingsSchema.form);
schema.form.push(routeMapSettingsSchema.form);//schema.form = schema.form.concat(routeMapSettingsSchema.form);
schema.groupInfoes.push({
"formIndex":schema.groupInfoes.length,
"GroupTitle":"Route Map Settings"
});
}
return schema;
}

View File

@ -965,8 +965,10 @@ function tripAnimationController($document, $scope, $log, $http, $timeout, $filt
}
}
if (trip && vm.activeTripIndex !== trip.dSIndex) vm.activeTripIndex = trip.dSIndex;
if (vm.trips.length) {
vm.mainTooltip = vm.trips[vm.activeTripIndex].settings.tooltipText;
}
}
function showHidePointTooltip(text, index) {
if (vm.staticSettings.displayTooltip) {