add SceemaGroup so that it can display better when there are many configuration item

HollyFang
1 parent ab494596
Showing 7 changed files with 113 additions and 21 deletions
ui/src/app/components/json-form.directive.js
ui/src/app/components/react/json-form-react.jsx
ui/src/app/components/react/json-form-schema-form.jsx
ui/src/app/components/react/json-form.scss
ui/src/app/components/widget/widget-config.directive.js
ui/src/app/components/widget/widget-config.tpl.html
ui/src/app/widget/lib/map-widget2.js
--- a/ui/src/app/components/json-form.directive.js
View file @4dde2ee
+++ b/ui/src/app/components/json-form.directive.js
View file @4dde2ee
@@ -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
--- a/ui/src/app/components/react/json-form-react.jsx
View file @4dde2ee
+++ b/ui/src/app/components/react/json-form-react.jsx
View file @4dde2ee
@@ -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 = {
--- a/ui/src/app/components/react/json-form-schema-form.jsx
View file @4dde2ee
+++ b/ui/src/app/components/react/json-form-schema-form.jsx
View file @4dde2ee
@@ -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>);
+    }
+}
--- a/ui/src/app/components/react/json-form.scss
View file @4dde2ee
+++ b/ui/src/app/components/react/json-form.scss
View file @4dde2ee
@@ -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;
+}
--- a/ui/src/app/components/widget/widget-config.directive.js
View file @4dde2ee
+++ b/ui/src/app/components/widget/widget-config.directive.js
View file @4dde2ee
@@ -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
@@ -189,10 +192,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 = {};
             }
         }
--- a/ui/src/app/components/widget/widget-config.tpl.html
View file @4dde2ee
+++ b/ui/src/app/components/widget/widget-config.tpl.html
View file @4dde2ee
@@ -281,6 +281,7 @@
                 <tb-json-form flex schema="currentSettingsSchema"
                               form="currentSettingsForm"
                               model="currentSettings"
+                              group-infoes="currentSettingsGroupInfoes"
                               form-control="ngform">
                 </tb-json-form>
             </ng-form>
--- a/ui/src/app/widget/lib/map-widget2.js
View file @4dde2ee
+++ b/ui/src/app/widget/lib/map-widget2.js
View file @4dde2ee
@@ -5,7 +5,7 @@
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
  *
- *     http://www.apache.org/licenses/LICENSE-2.0
+ *	 http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
@@ -83,10 +83,10 @@ export default class TbMapWidgetV2 {
 			this.map = new TbGoogleMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, settings.disableScrollZooming, minZoomLevel, settings.gmApiKey, settings.gmDefaultMapType);
 		} else if (mapProvider === 'openstreet-map') {
 			if (settings.useCustomProvider && settings.customProviderTileUrl) {
-                openStreetMapProvider.name = settings.customProviderTileUrl;
-                openStreetMapProvider.isCustom = true;
+				openStreetMapProvider.name = settings.customProviderTileUrl;
+				openStreetMapProvider.isCustom = true;
 			} else {
-                openStreetMapProvider.name = settings.mapProvider;
+				openStreetMapProvider.name = settings.mapProvider;
 			}
 			this.map = new TbOpenStreetMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, settings.disableScrollZooming, minZoomLevel, openStreetMapProvider);
 		} else if (mapProvider === 'here') {
@@ -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;
 	}
@@ -871,16 +898,16 @@ const openstreetMapSettingsSchema =
 					"type": "string",
 					"default": "OpenStreetMap.Mapnik"
 				},
-                "useCustomProvider": {
-                    "title": "Use custom provider",
-                    "type": "boolean",
-                    "default": false
-                },
-                "customProviderTileUrl": {
-                    "title": "Custom provider tile URL",
-                    "type": "string",
-                    "default": "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-                }
+				"useCustomProvider": {
+					"title": "Use custom provider",
+					"type": "boolean",
+					"default": false
+				},
+				"customProviderTileUrl": {
+					"title": "Custom provider tile URL",
+					"type": "string",
+					"default": "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+				}
 			},
 			"required": []
 		},
@@ -920,8 +947,8 @@ const openstreetMapSettingsSchema =
 					}
 				]
 			},
-            "useCustomProvider",
-            "customProviderTileUrl"
+			"useCustomProvider",
+			"customProviderTileUrl"
 		]
 	};