From 4dde2eec1a1c53b9291bd832a48b04c40d5c117f Mon Sep 17 00:00:00 2001 From: HollyFang Date: Thu, 13 Jun 2019 13:41:28 +0800 Subject: [PATCH] add SceemaGroup so that it can display better when there are many configuration item --- ui/src/app/components/json-form.directive.js | 9 +++ .../app/components/react/json-form-react.jsx | 4 +- .../react/json-form-schema-form.jsx | 43 ++++++++++++- ui/src/app/components/react/json-form.scss | 9 +++ .../widget/widget-config.directive.js | 5 ++ .../components/widget/widget-config.tpl.html | 1 + ui/src/app/widget/lib/map-widget2.js | 63 +++++++++++++------ 7 files changed, 113 insertions(+), 21 deletions(-) diff --git a/ui/src/app/components/json-form.directive.js b/ui/src/app/components/json-form.directive.js index 80f8a6cdda..f653f576ed 100644 --- a/ui/src/app/components/json-form.directive.js +++ b/ui/src/app/components/json-form.directive.js @@ -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 diff --git a/ui/src/app/components/react/json-form-react.jsx b/ui/src/app/components/react/json-form-react.jsx index 18b2de26ef..ad73359199 100644 --- a/ui/src/app/components/react/json-form-react.jsx +++ b/ui/src/app/components/react/json-form-react.jsx @@ -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 = { diff --git a/ui/src/app/components/react/json-form-schema-form.jsx b/ui/src/app/components/react/json-form-schema-form.jsx index 47d20426b7..8d9ec3e874 100644 --- a/ui/src/app/components/react/json-form-schema-form.jsx +++ b/ui/src/app/components/react/json-form-schema-form.jsx @@ -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 } - 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 {
{forms}
); } + + 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 = ; + content.push(item); + } + return (
{content}
); + } + 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 (
+
{this.props.info.GroupTitle}
+
{this.props.forms}
+
); + } +} \ No newline at end of file diff --git a/ui/src/app/components/react/json-form.scss b/ui/src/app/components/react/json-form.scss index d36ec5c0e8..fb1005fe9f 100644 --- a/ui/src/app/components/react/json-form.scss +++ b/ui/src/app/components/react/json-form.scss @@ -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; +} diff --git a/ui/src/app/components/widget/widget-config.directive.js b/ui/src/app/components/widget/widget-config.directive.js index 3271513d9f..fda531eb02 100644 --- a/ui/src/app/components/widget/widget-config.directive.js +++ b/ui/src/app/components/widget/widget-config.directive.js @@ -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 = {}; } } diff --git a/ui/src/app/components/widget/widget-config.tpl.html b/ui/src/app/components/widget/widget-config.tpl.html index 3b1529f857..7e63ff7d34 100644 --- a/ui/src/app/components/widget/widget-config.tpl.html +++ b/ui/src/app/components/widget/widget-config.tpl.html @@ -281,6 +281,7 @@ diff --git a/ui/src/app/widget/lib/map-widget2.js b/ui/src/app/widget/lib/map-widget2.js index fbba511859..bb8de69134 100644 --- a/ui/src/app/widget/lib/map-widget2.js +++ b/ui/src/app/widget/lib/map-widget2.js @@ -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" ] };