简柏林 / thingskit · Commits

Commit cc1ad23c4e9244fa43d2217c245f6a4d4e39e8f8

Authored by Igor Kulikov
1 parent acb94868

Improve Entity View UI

Inline Side-by-side
Showing 5 changed files with 200 additions and 105 deletions
@@ -15,7 +15,7 @@ @@ -15,7 +15,7 @@
15 limitations under the License. 15 limitations under the License.
16 16
17 --> 17 -->
18 -<md-dialog aria-label="{{ 'entity-view.add' | translate }}" tb-help="'entityViews'" help-container-id="help-container"> 18 +<md-dialog aria-label="{{ 'entity-view.add' | translate }}" style="width: 800px;" tb-help="'entityViews'" help-container-id="help-container">
19 <form name="theForm" ng-submit="vm.add()"> 19 <form name="theForm" ng-submit="vm.add()">
20 <md-toolbar> 20 <md-toolbar>
21 <div class="md-toolbar-tools"> 21 <div class="md-toolbar-tools">
@@ -60,7 +60,7 @@ @@ -60,7 +60,7 @@
60 entity-type="types.entityType.entityView"> 60 entity-type="types.entityType.entityView">
61 </tb-entity-subtype-autocomplete> 61 </tb-entity-subtype-autocomplete>
62 <section layout="column"> 62 <section layout="column">
63 - <label translate class="tb-title no-padding">entity-view.related-entity</label> 63 + <label translate class="tb-title no-padding">entity-view.target-entity</label>
64 <tb-entity-select flex ng-disabled="!isEdit" 64 <tb-entity-select flex ng-disabled="!isEdit"
65 the-form="theForm" 65 the-form="theForm"
66 tb-required="true" 66 tb-required="true"
@@ -68,110 +68,145 @@ @@ -68,110 +68,145 @@
68 ng-model="entityView.entityId"> 68 ng-model="entityView.entityId">
69 </tb-entity-select> 69 </tb-entity-select>
70 </section> 70 </section>
  71 + <md-expansion-panel-group class="tb-entity-view-panel-group" ng-class="{'disabled': $root.loading || !isEdit}"
  72 + auto-expand="true"
  73 + multiple="true"
  74 + md-component-id="attributesPanelGroup">
  75 + <md-expansion-panel md-component-id="{{attributesPanelId}}">
  76 + <md-expansion-panel-collapsed>
  77 + <div class="tb-panel-title">{{ 'entity-view.attributes-propagation' | translate }}</div>
  78 + <span flex></span>
  79 + <md-expansion-panel-icon></md-expansion-panel-icon>
  80 + </md-expansion-panel-collapsed>
  81 + <md-expansion-panel-expanded>
  82 + <md-expansion-panel-header ng-click="$mdExpansionPanel(attributesPanelId).collapse()">
  83 + <div class="tb-panel-title">{{ 'entity-view.attributes-propagation' | translate }}</div>
  84 + <span flex></span>
  85 + <md-expansion-panel-icon></md-expansion-panel-icon>
  86 + </md-expansion-panel-header>
  87 + <md-expansion-panel-content>
  88 + <div translate class="tb-hint">entity-view.attributes-propagation-hint</div>
  89 + <label translate class="tb-title no-padding">entity-view.client-attributes</label>
  90 + <md-chips style="padding-bottom: 15px;"
  91 + ng-required="false"
  92 + readonly="!isEdit"
  93 + ng-model="entityView.keys.attributes.cs"
  94 + placeholder="{{'entity-view.client-attributes-placeholder' | translate}}"
  95 + md-separator-keys="separatorKeys">
  96 + <md-autocomplete
  97 + md-no-cache="true"
  98 + id="ca_datakey"
  99 + md-selected-item="selectedAttributeDataKey"
  100 + md-search-text="attributeDataKeySearchText"
  101 + md-items="item in dataKeysSearch(attributeDataKeySearchText, types.dataKeyType.attribute)"
  102 + md-item-text="item.name"
  103 + md-min-length="0"
  104 + placeholder="{{'entity-view.client-attributes-placeholder' | translate }}"
  105 + md-menu-class="tb-attribute-datakey-autocomplete">
  106 + <span md-highlight-text="attributeDataKeySearchText" md-highlight-flags="^i">{{item}}</span>
  107 + </md-autocomplete>
  108 + </md-chips>
  109 + <label translate class="tb-title no-padding">entity-view.shared-attributes</label>
  110 + <md-chips style="padding-bottom: 15px;"
  111 + ng-required="false"
  112 + readonly="!isEdit"
  113 + ng-model="entityView.keys.attributes.sh"
  114 + placeholder="{{'entity-view.shared-attributes-placeholder' | translate}}"
  115 + md-separator-keys="separatorKeys">
  116 + <md-autocomplete
  117 + md-no-cache="true"
  118 + id="sh_datakey"
  119 + md-selected-item="selectedAttributeDataKey"
  120 + md-search-text="attributeDataKeySearchText"
  121 + md-items="item in dataKeysSearch(attributeDataKeySearchText, types.dataKeyType.attribute)"
  122 + md-item-text="item.name"
  123 + md-min-length="0"
  124 + placeholder="{{'entity-view.server-attributes-placeholder' | translate }}"
  125 + md-menu-class="tb-attribute-datakey-autocomplete">
  126 + <span md-highlight-text="attributeDataKeySearchText" md-highlight-flags="^i">{{item}}</span>
  127 + </md-autocomplete>
  128 + </md-chips>
  129 + <label translate class="tb-title no-padding">entity-view.server-attributes</label>
  130 + <md-chips style="padding-bottom: 15px;"
  131 + ng-required="false"
  132 + readonly="!isEdit"
  133 + ng-model="entityView.keys.attributes.ss"
  134 + placeholder="{{'entity-view.server-attributes-placeholder' | translate}}"
  135 + md-separator-keys="separatorKeys">
  136 + <md-autocomplete
  137 + md-no-cache="true"
  138 + id="ss_datakey"
  139 + md-selected-item="selectedAttributeDataKey"
  140 + md-search-text="attributeDataKeySearchText"
  141 + md-items="item in dataKeysSearch(attributeDataKeySearchText, types.dataKeyType.attribute)"
  142 + md-item-text="item.name"
  143 + md-min-length="0"
  144 + placeholder="{{'entity-view.server-attributes-placeholder' | translate }}"
  145 + md-menu-class="tb-attribute-datakey-autocomplete">
  146 + <span md-highlight-text="attributeDataKeySearchText" md-highlight-flags="^i">{{item}}</span>
  147 + </md-autocomplete>
  148 + </md-chips>
  149 + </md-expansion-panel-content>
  150 + </md-expansion-panel-expanded>
  151 + </md-expansion-panel>
  152 + <md-expansion-panel md-component-id="{{timeseriesPanelId}}">
  153 + <md-expansion-panel-collapsed>
  154 + <div class="tb-panel-title">{{ 'entity-view.timeseries-data' | translate }}</div>
  155 + <span flex></span>
  156 + <md-expansion-panel-icon></md-expansion-panel-icon>
  157 + </md-expansion-panel-collapsed>
  158 + <md-expansion-panel-expanded>
  159 + <md-expansion-panel-header ng-click="$mdExpansionPanel(timeseriesPanelId).collapse()">
  160 + <div class="tb-panel-title">{{ 'entity-view.timeseries-data' | translate }}</div>
  161 + <span flex></span>
  162 + <md-expansion-panel-icon></md-expansion-panel-icon>
  163 + </md-expansion-panel-header>
  164 + <md-expansion-panel-content>
  165 + <div translate class="tb-hint">entity-view.timeseries-data-hint</div>
  166 + <label translate class="tb-title no-padding">entity-view.timeseries</label>
  167 + <md-chips ng-required="false"
  168 + readonly="!isEdit"
  169 + ng-model="entityView.keys.timeseries"
  170 + placeholder="{{'entity-view.timeseries-placeholder' | translate}}"
  171 + md-separator-keys="separatorKeys">
  172 + <md-autocomplete
  173 + md-no-cache="true"
  174 + id="timeseries_datakey"
  175 + md-selected-item="selectedTimeseriesDataKey"
  176 + md-search-text="timeseriesDataKeySearchText"
  177 + md-items="item in dataKeysSearch(timeseriesDataKeySearchText, types.dataKeyType.timeseries)"
  178 + md-item-text="item.name"
  179 + md-min-length="0"
  180 + placeholder="{{'entity-view.timeseries-placeholder' | translate }}"
  181 + md-menu-class="tb-timeseries-datakey-autocomplete">
  182 + <span md-highlight-text="timeseriesDataKeySearchText" md-highlight-flags="^i">{{item}}</span>
  183 + </md-autocomplete>
  184 + </md-chips>
  185 + </md-expansion-panel-content>
  186 + </md-expansion-panel-expanded>
  187 + </md-expansion-panel>
  188 + </md-expansion-panel-group>
  189 + <section layout="row" layout-align="start start">
  190 + <mdp-date-picker ng-model="startTimeMs"
  191 + mdp-max-date="maxStartTimeMs"
  192 + mdp-placeholder="{{ 'entity-view.start-date' | translate }}"></mdp-date-picker>
  193 + <mdp-time-picker ng-model="startTimeMs"
  194 + mdp-max-date="maxStartTimeMs"
  195 + mdp-placeholder="{{ 'entity-view.start-ts' | translate }}"
  196 + mdp-auto-switch="true"></mdp-time-picker>
  197 + </section>
  198 + <section layout="row" layout-align="start start">
  199 + <mdp-date-picker ng-model="endTimeMs"
  200 + mdp-min-date="minEndTimeMs"
  201 + mdp-placeholder="{{ 'entity-view.end-date' | translate }}"></mdp-date-picker>
  202 + <mdp-time-picker ng-model="endTimeMs"
  203 + mdp-min-date="minEndTimeMs"
  204 + mdp-placeholder="{{ 'entity-view.end-ts' | translate }}"
  205 + mdp-auto-switch="true"></mdp-time-picker>
  206 + </section>
71 <md-input-container class="md-block"> 207 <md-input-container class="md-block">
72 <label translate>entity-view.description</label> 208 <label translate>entity-view.description</label>
73 <textarea ng-model="entityView.additionalInfo.description" rows="2"></textarea> 209 <textarea ng-model="entityView.additionalInfo.description" rows="2"></textarea>
74 </md-input-container> 210 </md-input-container>
75 - <section layout="column">  
76 - <label translate class="tb-title no-padding">entity-view.client-attributes</label>  
77 - <md-chips style="padding-bottom: 15px;"  
78 - ng-required="false"  
79 - readonly="!isEdit"  
80 - ng-model="entityView.keys.attributes.cs"  
81 - placeholder="{{'entity-view.client-attributes-placeholder' | translate}}"  
82 - md-separator-keys="separatorKeys">  
83 - <md-autocomplete  
84 - md-no-cache="true"  
85 - id="ca_datakey"  
86 - md-selected-item="selectedAttributeDataKey"  
87 - md-search-text="attributeDataKeySearchText"  
88 - md-items="item in dataKeysSearch(attributeDataKeySearchText, types.dataKeyType.attribute)"  
89 - md-item-text="item.name"  
90 - md-min-length="0"  
91 - placeholder="{{'entity-view.client-attributes-placeholder' | translate }}"  
92 - md-menu-class="tb-attribute-datakey-autocomplete">  
93 - <span md-highlight-text="attributeDataKeySearchText" md-highlight-flags="^i">{{item}}</span>  
94 - </md-autocomplete>  
95 - </md-chips>  
96 - <label translate class="tb-title no-padding">entity-view.shared-attributes</label>  
97 - <md-chips style="padding-bottom: 15px;"  
98 - ng-required="false"  
99 - readonly="!isEdit"  
100 - ng-model="entityView.keys.attributes.sh"  
101 - placeholder="{{'entity-view.shared-attributes-placeholder' | translate}}"  
102 - md-separator-keys="separatorKeys">  
103 - <md-autocomplete  
104 - md-no-cache="true"  
105 - id="sh_datakey"  
106 - md-selected-item="selectedAttributeDataKey"  
107 - md-search-text="attributeDataKeySearchText"  
108 - md-items="item in dataKeysSearch(attributeDataKeySearchText, types.dataKeyType.attribute)"  
109 - md-item-text="item.name"  
110 - md-min-length="0"  
111 - placeholder="{{'entity-view.server-attributes-placeholder' | translate }}"  
112 - md-menu-class="tb-attribute-datakey-autocomplete">  
113 - <span md-highlight-text="attributeDataKeySearchText" md-highlight-flags="^i">{{item}}</span>  
114 - </md-autocomplete>  
115 - </md-chips>  
116 - <label translate class="tb-title no-padding">entity-view.server-attributes</label>  
117 - <md-chips style="padding-bottom: 15px;"  
118 - ng-required="false"  
119 - readonly="!isEdit"  
120 - ng-model="entityView.keys.attributes.ss"  
121 - placeholder="{{'entity-view.server-attributes-placeholder' | translate}}"  
122 - md-separator-keys="separatorKeys">  
123 - <md-autocomplete  
124 - md-no-cache="true"  
125 - id="ss_datakey"  
126 - md-selected-item="selectedAttributeDataKey"  
127 - md-search-text="attributeDataKeySearchText"  
128 - md-items="item in dataKeysSearch(attributeDataKeySearchText, types.dataKeyType.attribute)"  
129 - md-item-text="item.name"  
130 - md-min-length="0"  
131 - placeholder="{{'entity-view.server-attributes-placeholder' | translate }}"  
132 - md-menu-class="tb-attribute-datakey-autocomplete">  
133 - <span md-highlight-text="attributeDataKeySearchText" md-highlight-flags="^i">{{item}}</span>  
134 - </md-autocomplete>  
135 - </md-chips>  
136 - <label translate class="tb-title no-padding">entity-view.timeseries</label>  
137 - <md-chips ng-required="false"  
138 - readonly="!isEdit"  
139 - ng-model="entityView.keys.timeseries"  
140 - placeholder="{{'entity-view.timeseries-placeholder' | translate}}"  
141 - md-separator-keys="separatorKeys">  
142 - <md-autocomplete  
143 - md-no-cache="true"  
144 - id="timeseries_datakey"  
145 - md-selected-item="selectedTimeseriesDataKey"  
146 - md-search-text="timeseriesDataKeySearchText"  
147 - md-items="item in dataKeysSearch(timeseriesDataKeySearchText, types.dataKeyType.timeseries)"  
148 - md-item-text="item.name"  
149 - md-min-length="0"  
150 - placeholder="{{'entity-view.timeseries-placeholder' | translate }}"  
151 - md-menu-class="tb-timeseries-datakey-autocomplete">  
152 - <span md-highlight-text="timeseriesDataKeySearchText" md-highlight-flags="^i">{{item}}</span>  
153 - </md-autocomplete>  
154 - </md-chips>  
155 - </section>  
156 - <section layout="column">  
157 - <section layout="row" layout-align="start start">  
158 - <mdp-date-picker ng-model="startTimeMs"  
159 - mdp-max-date="maxStartTimeMs"  
160 - mdp-placeholder="{{ 'entity-view.start-ts' | translate }}"></mdp-date-picker>  
161 - <mdp-time-picker ng-model="startTimeMs"  
162 - mdp-max-date="maxStartTimeMs"  
163 - mdp-placeholder="{{ 'entity-view.start-ts' | translate }}"  
164 - mdp-auto-switch="true"></mdp-time-picker>  
165 - </section>  
166 - <section layout="row" layout-align="start start">  
167 - <mdp-date-picker ng-model="endTimeMs"  
168 - mdp-min-date="minEndTimeMs"  
169 - mdp-placeholder="{{ 'entity-view.end-ts' | translate }}"></mdp-date-picker>  
170 - <mdp-time-picker ng-model="endTimeMs"  
171 - mdp-min-date="minEndTimeMs"  
172 - mdp-placeholder="{{ 'entity-view.end-ts' | translate }}"  
173 - mdp-auto-switch="true"></mdp-time-picker>  
174 - </section>  
175 - </section>  
176 </fieldset> 211 </fieldset>
177 </md-content> 212 </md-content>
@@ -13,6 +13,9 @@ @@ -13,6 +13,9 @@
13 * See the License for the specific language governing permissions and 13 * See the License for the specific language governing permissions and
14 * limitations under the License. 14 * limitations under the License.
15 */ 15 */
  16 +
  17 +import './entity-view.scss';
  18 +
16 /* eslint-disable import/no-unresolved, import/default */ 19 /* eslint-disable import/no-unresolved, import/default */
17 20
18 import entityViewFieldsetTemplate from './entity-view-fieldset.tpl.html'; 21 import entityViewFieldsetTemplate from './entity-view-fieldset.tpl.html';
@@ -20,12 +23,16 @@ import entityViewFieldsetTemplate from './entity-view-fieldset.tpl.html'; @@ -20,12 +23,16 @@ import entityViewFieldsetTemplate from './entity-view-fieldset.tpl.html';
20 /* eslint-enable import/no-unresolved, import/default */ 23 /* eslint-enable import/no-unresolved, import/default */
21 24
22 /*@ngInject*/ 25 /*@ngInject*/
23 -export default function EntityViewDirective($q, $compile, $templateCache, $filter, toast, $translate, $mdConstant, 26 +export default function EntityViewDirective($q, $compile, $templateCache, $filter, toast, $translate, $mdConstant, $mdExpansionPanel,
24 types, clipboardService, entityViewService, customerService, entityService) { 27 types, clipboardService, entityViewService, customerService, entityService) {
25 var linker = function (scope, element) { 28 var linker = function (scope, element) {
26 var template = $templateCache.get(entityViewFieldsetTemplate); 29 var template = $templateCache.get(entityViewFieldsetTemplate);
27 element.html(template); 30 element.html(template);
28 31
  32 + scope.attributesPanelId = (Math.random()*1000).toFixed(0);
  33 + scope.timeseriesPanelId = (Math.random()*1000).toFixed(0);
  34 + scope.$mdExpansionPanel = $mdExpansionPanel;
  35 +
29 scope.types = types; 36 scope.types = types;
30 scope.isAssignedToCustomer = false; 37 scope.isAssignedToCustomer = false;
31 scope.isPublic = false; 38 scope.isPublic = false;
  1 +/**
  2 + * Copyright © 2016-2018 The Thingsboard Authors
  3 + *
  4 + * Licensed under the Apache License, Version 2.0 (the "License");
  5 + * you may not use this file except in compliance with the License.
  6 + * You may obtain a copy of the License at
  7 + *
  8 + * http://www.apache.org/licenses/LICENSE-2.0
  9 + *
  10 + * Unless required by applicable law or agreed to in writing, software
  11 + * distributed under the License is distributed on an "AS IS" BASIS,
  12 + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13 + * See the License for the specific language governing permissions and
  14 + * limitations under the License.
  15 + */
  16 +
  17 +@import "../../scss/constants";
  18 +
  19 +.tb-entity-view-panel-group {
  20 + .tb-panel-title {
  21 + min-width: 90px;
  22 + user-select: none;
  23 +
  24 + @media (min-width: $layout-breakpoint-sm) {
  25 + min-width: 180px;
  26 + }
  27 + }
  28 +
  29 + .tb-panel-prompt {
  30 + overflow: hidden;
  31 + font-size: 14px;
  32 + color: rgba(0, 0, 0, .87);
  33 + text-overflow: ellipsis;
  34 + white-space: nowrap;
  35 + }
  36 +
  37 + &.disabled {
  38 + .tb-panel-title,
  39 + .tb-panel-prompt {
  40 + color: rgba(0, 0, 0, .38);
  41 + }
  42 + }
  43 +
  44 + md-icon.md-expansion-panel-icon {
  45 + margin-right: 0;
  46 + }
  47 +}
@@ -838,7 +838,9 @@ @@ -838,7 +838,9 @@
838 "unable-entity-view-device-alias-text": "Device alias '{{entityViewAlias}}' can't be deleted as it used by the following widget(s):<br/>{{widgetsList}}", 838 "unable-entity-view-device-alias-text": "Device alias '{{entityViewAlias}}' can't be deleted as it used by the following widget(s):<br/>{{widgetsList}}",
839 "select-entity-view": "Select entity view", 839 "select-entity-view": "Select entity view",
840 "make-public": "Make entity view public", 840 "make-public": "Make entity view public",
  841 + "start-date": "Start date",
841 "start-ts": "Start time", 842 "start-ts": "Start time",
  843 + "end-date": "End date",
842 "end-ts": "End time", 844 "end-ts": "End time",
843 "date-limits": "Date limits", 845 "date-limits": "Date limits",
844 "client-attributes": "Client attributes", 846 "client-attributes": "Client attributes",
@@ -849,7 +851,11 @@ @@ -849,7 +851,11 @@
849 "shared-attributes-placeholder": "Shared attributes", 851 "shared-attributes-placeholder": "Shared attributes",
850 "server-attributes-placeholder": "Server attributes", 852 "server-attributes-placeholder": "Server attributes",
851 "timeseries-placeholder": "Timeseries", 853 "timeseries-placeholder": "Timeseries",
852 - "related-entity": "Related entity" 854 + "target-entity": "Target entity",
  855 + "attributes-propagation": "Attributes propagation",
  856 + "attributes-propagation-hint": "Entity View will automatically copy specified attributes from Target Entity each time you save or update this entity view. For performance reasons target entity attributes are not propagated to entity view on each attribute change. You can enable automatic propagation by configuring \"copy to view\" rule node in your rule chain and linking \"Post attributes\" and \"Attributes Updated\" messages to the new rule node.",
  857 + "timeseries-data": "Timeseries data",
  858 + "timeseries-data-hint": "Configure timeseries data keys of the target entity that will be accessible to the entity view. This timeseries data is read-only."
853 }, 859 },
854 "event": { 860 "event": {
855 "event-type": "Event type", 861 "event-type": "Event type",