Igor Kulikov
3 years ago
60 changed files with 1500 additions and 34 deletions
@ -0,0 +1,14 @@ |
|||||
|
{ |
||||
|
"widgetsBundle": { |
||||
|
"alias": "count_widgets", |
||||
|
"title": "Count widgets", |
||||
|
"image": "data:image/png;base64,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", |
||||
|
"description": "Cards to display the number of alarms or entities based on selected filter.", |
||||
|
"externalId": null, |
||||
|
"name": "Count widgets" |
||||
|
}, |
||||
|
"widgetTypeFqns": [ |
||||
|
"alarm_count", |
||||
|
"entity_count" |
||||
|
] |
||||
|
} |
||||
@ -0,0 +1,23 @@ |
|||||
|
{ |
||||
|
"fqn": "alarm_count", |
||||
|
"name": "Alarm count", |
||||
|
"deprecated": false, |
||||
|
"image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAACgCAMAAAB+IdObAAAAolBMVEXg4ODf39/g4OAAAADg4ODf39/////g4OD8/Pz+/v7RJzD29vb6+vr7+/v09PTt7e3z8/P4+Pjx8fHv7+/ok5fXQkqXl5chISHk5OTIyMi6urqpqamgoKDDw8P55OXurrI8PDzc3NyxsbF0dHRYWFjlhYrUND3V1dXroKT88fLR0dHzycvwu76QkJDieH7eY2pKSkovLy/219jieH1mZmbTND12Tj45AAAABnRSTlPvIL8Ar7DvmsykAAAEx0lEQVR42u2aiXLaMBBATdMuUmU5yEBJgEDanL3v//+1rpDI2khA087U63RfjGRJa4k3a5sMpjgZPCuGfef54KQYFGMFPUfVqPG8hifAGE+r3ufDo4piCE+CoYgwQ0S4ISLcEBFuiAg3RIQbIsINEeGGiHBDRLghItwQEW6ICDdEhBsiwg0R4YaIcENEuCEi3BARbogIN0SEGyLCDRHhhohwQ0S48X+IaDiKBibsiGit/hit/i06J0IatkRsaWPZxoZR3OIgheKYjUHbkoLj/jawOWOjsDQ3rUfTUXcIQ5c9IqhROlPlMf5lwm6saYx2KC4dJSg6BhsKzMZTBK3hSqV0XsQ6p9ic9EexximtMyJaOdMfDURjTnIiyrqe/d5fOauyIgb6ha4wJRmRsoKekRXRyvVPxKUiGkVGEFnfvswwXQMzRiiik4xYEpm+zHILDS4Wy8UFeE7jtfUK/i15Ea2seRB5uQeI0Bs/ew1mcWGw7kKkNjYrUj9aZP7m4o1Zzg1W512IOKVSEZUVufm+XyRu89dwOl/OmWQEdFbkHuD+gMgSNy+yNK+7EcllxLpUZEqXflbk3QIv+HdLc7FYvOlCxFkNuiWitc5dIx8AeU8iKSa8DHRBnd61NOREPoXm5wcRZmBGVJIRlRFZAawxKatbriK/efud+AtkisWkRyKZUwsVosjbKVMR91sZWQMyuW9c77vz1NAVlBGAY3etT9Dgcypy/mU2uz6DzsiLQCqyAs/NDXhWicjZ7Mt88fUaOoJOrWMZmQDEa2TDZFfk7uoO4GoGHUGf7PpIRlbQ4m32Yr+8hI4gETgi8g1arFKR8+uvl3fQFXT7PfKBOJ00uZlmRK5+zD5CJ1BGNBw+tfLALlezGjrgkZ8jKe18nAF8nGHRDfTf79+KzK7Pz7u+2J2Fg9fIbd5jCk2Wlyw+EA/etdbTnMfPNbQ56/5fFLVHpGf4jMDTEMl+r+VGvXqqsO8LOq1c1bPHCuWe736t6VdKdGXKVkbo3KpGJfQFbUeVs9mMqBJNxuPT8SnRbKS940MhcaOOXCgu9whoYTyw3nikIt7EOlONPNWorkeBUFe176lDGxuhDANYhMjQsymo8qMRf1gaQathSZ3bmCqO163p8LlufKybnlooosrSObMX95iBdOR4jHtEqEOPRIRyosLjfB/msLKhahYIFiECxzF486IOfPliU1Fo+ENiUSI0l2/EJeKiYeUQZ2NJK/mmRQ0EMiJqg03xevinwm4Thd1xI9R2YBtfKhqIsc3jFM2llI8uYwD2UMAGmlQhwSMRQVSfCBqpCOgNyuuEDaEq9oYOKg9BR+5O125ovTtCA1TRHKEH0EOnIqTixx8ARaXC2pcB5RsQ+o6zEwR4dLuNTZoqzrpdAFqRcS6gfJAIETUASIl2qBGrGA5JCNAOJKPUBiROQiHxXcBma8ydLpKIJMSc6WYrzkz7YY94eAeNYJonjEWzzHK0FwV20Nsh/T//FLBPiAg3RIQbIsINEeGGiHBDRLghItwQEW6ICDdEhBsiwg0R4YaIcENEuCEi3BARbogIN0SEGyLCDRHhhohwQ0S4ISLcGBZFz37Zn0cNi2djeALUL4pBUfc+J2qMGieD58O+UzwbnPwC9rQ9R9RHLAMAAAAASUVORK5CYII=", |
||||
|
"description": "Displays the number of alarms based on selected filter.", |
||||
|
"descriptor": { |
||||
|
"type": "latest", |
||||
|
"sizeX": 3.5, |
||||
|
"sizeY": 1.5, |
||||
|
"resources": [], |
||||
|
"templateHtml": "<tb-count-widget \n [ctx]=\"ctx\"\n [widgetTitlePanel]=\"widgetTitlePanel\"\n alarmElseEntity=\"true\">\n</tb-count-widget>", |
||||
|
"templateCss": "", |
||||
|
"controllerScript": "self.onInit = function() {\n self.ctx.$scope.countWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n self.ctx.$scope.countWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true,\n previewWidth: '220px',\n previewHeight: '100px',\n embedTitlePanel: true,\n hideDataSettings: true\n };\n};\n\nself.actionSources = function() {\n return {\n 'cardClick': {\n name: 'widget-action.card-click',\n multiple: false\n }\n };\n}\n\nself.onDestroy = function() {\n};\n", |
||||
|
"settingsSchema": "", |
||||
|
"dataKeySettingsSchema": "", |
||||
|
"settingsDirective": "tb-alarm-count-widget-settings", |
||||
|
"hasBasicMode": true, |
||||
|
"basicModeDirective": "tb-alarm-count-basic-config", |
||||
|
"defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"count\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.2392660816082064,\"funcBody\":\"var value = Number((prevValue + Math.random() * 4 - 2).toFixed(0));\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 25) {\\n\\tvalue = 25;\\n}\\nreturn value;\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"],\"assignedToCurrentUser\":false,\"assigneeId\":null}}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{\"showLabel\":true,\"label\":\"Total\",\"labelFont\":{\"family\":\"Roboto\",\"size\":12,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"400\",\"lineHeight\":\"16px\"},\"labelColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.54)\",\"colorFunction\":\"var temperature = value;\\nif (typeof temperature !== undefined) {\\n var percent = (temperature + 60)/120 * 100;\\n return tinycolor.mix('blue', 'red', percent).toHexString();\\n}\\nreturn 'blue';\"},\"showIcon\":true,\"iconSize\":20,\"iconSizeUnit\":\"px\",\"icon\":\"warning\",\"iconColor\":{\"type\":\"constant\",\"color\":\"rgba(255, 255, 255, 1)\",\"colorFunction\":\"var temperature = value;\\nif (typeof temperature !== undefined) {\\n var percent = (temperature + 60)/120 * 100;\\n return tinycolor.mix('blue', 'red', percent).toHexString();\\n}\\nreturn 'blue';\"},\"showIconBackground\":true,\"iconBackgroundSize\":36,\"iconBackgroundSizeUnit\":\"px\",\"iconBackgroundColor\":{\"type\":\"range\",\"color\":\"rgba(0, 105, 92, 1)\",\"rangeList\":[{\"from\":0,\"to\":0,\"color\":\"rgba(0, 105, 92, 1)\"},{\"from\":1,\"to\":null,\"color\":\"rgba(209, 39, 48, 1)\"}],\"colorFunction\":\"var temperature = value;\\nif (typeof temperature !== undefined) {\\n var percent = (temperature + 60)/120 * 100;\\n return tinycolor.mix('blue', 'red', percent).toHexString();\\n}\\nreturn 'blue';\"},\"valueFont\":{\"family\":\"Roboto\",\"size\":20,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"24px\"},\"valueColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"colorFunction\":\"var temperature = value;\\nif (typeof temperature !== undefined) {\\n var percent = (temperature + 60)/120 * 100;\\n return tinycolor.mix('blue', 'red', percent).toHexString();\\n}\\nreturn 'blue';\"},\"showChevron\":false,\"chevronSize\":24,\"chevronSizeUnit\":\"px\",\"chevronColor\":\"rgba(0, 0, 0, 0.38)\",\"layout\":\"column\"},\"title\":\"Alarm count\",\"dropShadow\":true,\"enableFullscreen\":false,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"units\":\"\",\"decimals\":null,\"useDashboardTimewindow\":true,\"showLegend\":false,\"widgetStyle\":{},\"actions\":{},\"configMode\":\"basic\",\"displayTimewindow\":true,\"margin\":\"0px\",\"borderRadius\":\"0px\",\"widgetCss\":\"\",\"pageSize\":1024,\"noDataDisplayMessage\":\"\",\"showTitleIcon\":false,\"titleTooltip\":\"\",\"titleFont\":{\"size\":12,\"sizeUnit\":\"px\",\"family\":null,\"weight\":null,\"style\":null,\"lineHeight\":\"1\"},\"titleIcon\":\"\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"14px\",\"timewindowStyle\":{\"showIcon\":true,\"iconSize\":\"14px\",\"icon\":\"query_builder\",\"iconPosition\":\"left\",\"font\":{\"size\":12,\"sizeUnit\":\"px\",\"family\":null,\"weight\":null,\"style\":null,\"lineHeight\":\"1\"},\"color\":null},\"titleColor\":\"rgba(0, 0, 0, 0.54)\"}" |
||||
|
}, |
||||
|
"externalId": null |
||||
|
} |
||||
@ -0,0 +1,23 @@ |
|||||
|
{ |
||||
|
"fqn": "entity_count", |
||||
|
"name": "Entity count", |
||||
|
"deprecated": false, |
||||
|
"image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAACgCAMAAAB+IdObAAAAnFBMVEXg4ODf39/g4ODg4OAAAAD////9/f3g4ODxjRf7+/v6+vr19fX39/ft7e3z8/P5+fnx8fH2uG4hISH09PTk5OTv7+/51KhYWFisrKzLy8svLy+fn5/61Kg8PDyxsbGpqam6urqXl5fzmzSQkJCCgoJ0dHTc3NzV1dXDw8PHx8fylCX4xIhKSkrU1NT74MD1rFb98eKPj49mZmb+9/EJyyRgAAAABXRSTlPvIL+vAC9A4IoAAATwSURBVHja7ZyJctowEEBNkxX1ATbGYG4IIUBzND3+/9+6QkrWVHacpB13ne6TWVu33kgM08DUu+x88rpt56Jz6XW8kYKWoxLUuEjgAzDCY9X6/dAoz+vCh6ArIswQEW6ICDdEhBsiwg0R4YaIcENEuCEi3BARbogIN0SEGyLCDRHhhohwQ0S4ISLcEBFuiAg3RIQbIsINEeGGiHBDRLghItwQEW78HyIKamHzW9vfRFSbqBbBSt8PEB+TiefYWrxsJTXFOgy22pbQ3RbahsURC8GnsWk+Go6Kn+ZTFSKoEURRWMVwGL6PoZPDQJGoLHQ7I3HgK1Uu4seRz+bQ1+JHsTEhEfJojwaioqBCJPKhVeCCy0VCaBcqxC1xRfxgCC1jWCai/Lh9IrEropQf9cGyuP1cwnYBzOhHvlLujpDI9nMpt1BgP19PgVhB07gi7o58rgAKTKewOQJkPeiFkGGCbA8Q7XvQHEmFSPJGkXAOq+Nqf5ziwxVMV8cNzB/mIVTCVQRX/32zWofzhylcYYIs+76ZT6ExXBHkHSLZGq56vQhWa+2EW5H11jpfQ+M7MiiwdUWu1vMIjuvVA+xPIvvV6ohOTR8tUGciyhW5gwJ3RsQligrP5lVNAzuiwBFZfHWPFjNetyOL8dMH4Ri54ypS+x4hkQEsFl+hLSLwkgi+WiOi3iGSJHRvGBKBcxH1dpHDfZreZwBZnqZ5BsgkTyfQECTypzuSzZabySwHuEnNHa7TfJJBQ9DRqtuRu2/fxiceBzAeu2/2TfpFS0CS3miHA2TpNTQHiaiaHfkJlsFAR0ckybB5vjTr3+CZ2qWT3e6f74grsh1YtrePGB9JhJigRKKP1RxF8tksX84OUEPTR8vFFTnMfmDcpT9u0vQLimSQ4TlrDveTHXmHSLa8P/WY5LtdmuljBrDM4RWw+vcIeiwzsCzvAW5m2H9WJ8JvR7Jlej2ZTNDlyzyf6Vt6c9g1+0GCIvDie+S23GMLBK5boxeez/IDIPNlOruGGpo9WuNtmcftAmrIEqihGZHW/Z81WgQ+ikjp37Va9a0C0o9UmUgctuxrhSAs+9sv+G3bEhVGgbMj5myF/QDagvL7w9gv2REUCdBkNOqNekQx45aOXmpiLyooa4rT1VA+MXZMwsivEMHDhSqaYT9J+obEFCS6JDF5zJhoKjCYlqYEQ/Gmay26m9uCZtPRFlKXoa1PzobTXzFHgfZwjxacvmSP0QWTvohTWXi6m5vO2Ra2goKBss/9Timk0amTzTtDUFPieeIYPVwRRCE+EiBxHAcxRvOgA2ZNQKhCl9kXlfux7W6DzVFn268wVmBvNJQJuoCiKbF3H1EIuCKgTaoIMJVX2MutcB9trrJfUJjKhqByUGU1XJEnCk39KjN19qScyqpe6reuZzNQTpmMUpWTqhMVP+Fo129qtIa7I0WX1wn9VW14ey3ghVSI6FrTQp2S9dKpgBW20eZ1oEQPT42dZBeizKVoMpuzg9CMxRWRhitC0AqKOSeeD0UrKKyvMI6xsZLudAaSd5b07PE//xSwTYgIN0SEGyLCDRHhhohwQ0S4ISLcEBFuiAg3RIQbIsINEeGGiHBDRLghItwQEW6ICDdEhBsiwg0R4YaIcENEuCEi3Oh6Xqt+D1+F6nqfRvABSC68jpe0fk/UCDUuOxfdtuN96lz+Agb8xlnnx/XqAAAAAElFTkSuQmCC", |
||||
|
"description": "Displays the number of entities based on selected filter.", |
||||
|
"descriptor": { |
||||
|
"type": "latest", |
||||
|
"sizeX": 3.5, |
||||
|
"sizeY": 1.5, |
||||
|
"resources": [], |
||||
|
"templateHtml": "<tb-count-widget \n [ctx]=\"ctx\"\n [widgetTitlePanel]=\"widgetTitlePanel\"\n alarmElseEntity=\"false\">\n</tb-count-widget>", |
||||
|
"templateCss": "", |
||||
|
"controllerScript": "self.onInit = function() {\n self.ctx.$scope.countWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n self.ctx.$scope.countWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true,\n previewWidth: '220px',\n previewHeight: '100px',\n embedTitlePanel: true,\n hideDataSettings: true\n };\n};\n\nself.actionSources = function() {\n return {\n 'cardClick': {\n name: 'widget-action.card-click',\n multiple: false\n }\n };\n}\n\nself.onDestroy = function() {\n};\n", |
||||
|
"settingsSchema": "", |
||||
|
"dataKeySettingsSchema": "", |
||||
|
"settingsDirective": "tb-entity-count-widget-settings", |
||||
|
"hasBasicMode": true, |
||||
|
"basicModeDirective": "tb-entity-count-basic-config", |
||||
|
"defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"count\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.2392660816082064,\"funcBody\":\"return 150;\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"],\"assignedToCurrentUser\":false,\"assigneeId\":null}}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{\"showLabel\":true,\"label\":\"Devices\",\"labelFont\":{\"family\":\"Roboto\",\"size\":12,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"400\",\"lineHeight\":\"16px\"},\"labelColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.54)\",\"colorFunction\":\"var temperature = value;\\nif (typeof temperature !== undefined) {\\n var percent = (temperature + 60)/120 * 100;\\n return tinycolor.mix('blue', 'red', percent).toHexString();\\n}\\nreturn 'blue';\"},\"showIcon\":true,\"iconSize\":20,\"iconSizeUnit\":\"px\",\"icon\":\"devices\",\"iconColor\":{\"type\":\"constant\",\"color\":\"rgba(255, 255, 255, 1)\",\"colorFunction\":\"var temperature = value;\\nif (typeof temperature !== undefined) {\\n var percent = (temperature + 60)/120 * 100;\\n return tinycolor.mix('blue', 'red', percent).toHexString();\\n}\\nreturn 'blue';\"},\"showIconBackground\":true,\"iconBackgroundSize\":36,\"iconBackgroundSizeUnit\":\"px\",\"iconBackgroundColor\":{\"type\":\"constant\",\"color\":\"rgb(241, 141, 23)\",\"rangeList\":[],\"colorFunction\":\"var temperature = value;\\nif (typeof temperature !== undefined) {\\n var percent = (temperature + 60)/120 * 100;\\n return tinycolor.mix('blue', 'red', percent).toHexString();\\n}\\nreturn 'blue';\"},\"valueFont\":{\"family\":\"Roboto\",\"size\":20,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"24px\"},\"valueColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"colorFunction\":\"var temperature = value;\\nif (typeof temperature !== undefined) {\\n var percent = (temperature + 60)/120 * 100;\\n return tinycolor.mix('blue', 'red', percent).toHexString();\\n}\\nreturn 'blue';\"},\"showChevron\":false,\"chevronSize\":24,\"chevronSizeUnit\":\"px\",\"chevronColor\":\"rgba(0, 0, 0, 0.38)\",\"layout\":\"column\"},\"title\":\"Entity count\",\"dropShadow\":true,\"enableFullscreen\":false,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"units\":\"\",\"decimals\":null,\"useDashboardTimewindow\":true,\"showLegend\":false,\"widgetStyle\":{},\"actions\":{},\"configMode\":\"basic\",\"displayTimewindow\":true,\"margin\":\"0px\",\"borderRadius\":\"0px\",\"widgetCss\":\"\",\"pageSize\":1024,\"noDataDisplayMessage\":\"\",\"showTitleIcon\":false,\"titleTooltip\":\"\",\"titleFont\":{\"size\":12,\"sizeUnit\":\"px\",\"family\":null,\"weight\":null,\"style\":null,\"lineHeight\":\"1\"},\"titleIcon\":\"\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"14px\",\"timewindowStyle\":{\"showIcon\":true,\"iconSize\":\"14px\",\"icon\":\"query_builder\",\"iconPosition\":\"left\",\"font\":{\"size\":12,\"sizeUnit\":\"px\",\"family\":null,\"weight\":null,\"style\":null,\"lineHeight\":\"1\"},\"color\":null},\"titleColor\":\"rgba(0, 0, 0, 0.54)\"}" |
||||
|
}, |
||||
|
"externalId": null |
||||
|
} |
||||
@ -0,0 +1,61 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2023 The Thingsboard Authors |
||||
|
|
||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
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 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
<ng-container [formGroup]="alarmCountWidgetConfigForm"> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div fxLayout="row" fxLayoutAlign="space-between center"> |
||||
|
<div class="tb-form-panel-title" translate>alarm.filter</div> |
||||
|
<button mat-button color="primary" |
||||
|
(click)="alarmFilterConfig.reset()"> |
||||
|
{{ 'action.reset' | translate }} |
||||
|
</button> |
||||
|
</div> |
||||
|
<tb-alarm-filter-config #alarmFilterConfig buttonMode="false" |
||||
|
propagatedFilter="false" |
||||
|
formControlName="alarmFilterConfig" |
||||
|
[initialAlarmFilterConfig]="{ statusList: [alarmSearchStatus.ACTIVE] }"></tb-alarm-filter-config> |
||||
|
</div> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widget-config.appearance</div> |
||||
|
<tb-count-widget-settings alarmElseEntity="true" formControlName="settings"></tb-count-widget-settings> |
||||
|
</div> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widget-config.card-appearance</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'widgets.background.background' | translate }}</div> |
||||
|
<tb-color-input asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="backgroundColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between column-lt-md"> |
||||
|
<div translate>widget-config.show-card-buttons</div> |
||||
|
<mat-chip-listbox multiple formControlName="cardButtons"> |
||||
|
<mat-chip-option value="fullscreen">{{ 'fullscreen.fullscreen' | translate }}</mat-chip-option> |
||||
|
</mat-chip-listbox> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'widget-config.card-border-radius' | translate }}</div> |
||||
|
<mat-form-field appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</div> |
||||
|
<tb-widget-actions-panel |
||||
|
formControlName="actions"> |
||||
|
</tb-widget-actions-panel> |
||||
|
</ng-container> |
||||
@ -0,0 +1,107 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2023 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// 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
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { Component } from '@angular/core'; |
||||
|
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models'; |
||||
|
import { WidgetConfigComponentData } from '@home/models/widget-component.models'; |
||||
|
import { DatasourceType, WidgetConfig, widgetType, } from '@shared/models/widget.models'; |
||||
|
import { WidgetConfigComponent } from '@home/components/widget/widget-config.component'; |
||||
|
import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; |
||||
|
import { isUndefined } from '@core/utils'; |
||||
|
import { getAlarmFilterConfig, setAlarmFilterConfig } from '@shared/models/widget-settings.models'; |
||||
|
import { UtilsService } from '@core/services/utils.service'; |
||||
|
import { AlarmSearchStatus } from '@shared/models/alarm.models'; |
||||
|
import { |
||||
|
countDefaultSettings, |
||||
|
CountWidgetSettings |
||||
|
} from '@home/components/widget/lib/count/count-widget.models'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-alarm-count-basic-config', |
||||
|
templateUrl: './alarm-count-basic-config.component.html', |
||||
|
styleUrls: ['../basic-config.scss'] |
||||
|
}) |
||||
|
export class AlarmCountBasicConfigComponent extends BasicWidgetConfigComponent { |
||||
|
|
||||
|
alarmSearchStatus = AlarmSearchStatus; |
||||
|
|
||||
|
alarmCountWidgetConfigForm: UntypedFormGroup; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
protected widgetConfigComponent: WidgetConfigComponent, |
||||
|
private utils: UtilsService, |
||||
|
private fb: UntypedFormBuilder) { |
||||
|
super(store, widgetConfigComponent); |
||||
|
} |
||||
|
|
||||
|
protected configForm(): UntypedFormGroup { |
||||
|
return this.alarmCountWidgetConfigForm; |
||||
|
} |
||||
|
|
||||
|
protected setupDefaults(configData: WidgetConfigComponentData) { |
||||
|
let datasources = configData.config.datasources; |
||||
|
if (!datasources || !datasources.length) { |
||||
|
datasources = [{}]; |
||||
|
configData.config.datasources = datasources; |
||||
|
} |
||||
|
datasources[0].type = DatasourceType.alarmCount; |
||||
|
datasources[0].alarmFilterConfig = {statusList: [AlarmSearchStatus.ACTIVE]}; |
||||
|
datasources[0].dataKeys = [this.utils.createKey({name: 'count'}, DataKeyType.count)]; |
||||
|
} |
||||
|
|
||||
|
protected onConfigSet(configData: WidgetConfigComponentData) { |
||||
|
const settings: CountWidgetSettings = {...countDefaultSettings(true), ...(configData.config.settings || {})}; |
||||
|
this.alarmCountWidgetConfigForm = this.fb.group({ |
||||
|
alarmFilterConfig: [getAlarmFilterConfig(configData.config.datasources), []], |
||||
|
|
||||
|
settings: [settings, []], |
||||
|
|
||||
|
backgroundColor: [configData.config.backgroundColor, []], |
||||
|
cardButtons: [this.getCardButtons(configData.config), []], |
||||
|
borderRadius: [configData.config.borderRadius, []], |
||||
|
|
||||
|
actions: [configData.config.actions || {}, []] |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
protected prepareOutputConfig(config: any): WidgetConfigComponentData { |
||||
|
setAlarmFilterConfig(config.alarmFilterConfig, this.widgetConfig.config.datasources); |
||||
|
|
||||
|
this.widgetConfig.config.settings = {...(this.widgetConfig.config.settings || {}), ...config.settings}; |
||||
|
|
||||
|
this.widgetConfig.config.backgroundColor = config.backgroundColor; |
||||
|
this.setCardButtons(config.cardButtons, this.widgetConfig.config); |
||||
|
this.widgetConfig.config.borderRadius = config.borderRadius; |
||||
|
|
||||
|
this.widgetConfig.config.actions = config.actions; |
||||
|
return this.widgetConfig; |
||||
|
} |
||||
|
|
||||
|
private getCardButtons(config: WidgetConfig): string[] { |
||||
|
const buttons: string[] = []; |
||||
|
if (isUndefined(config.enableFullscreen) || config.enableFullscreen) { |
||||
|
buttons.push('fullscreen'); |
||||
|
} |
||||
|
return buttons; |
||||
|
} |
||||
|
|
||||
|
private setCardButtons(buttons: string[], config: WidgetConfig) { |
||||
|
config.enableFullscreen = buttons.includes('fullscreen'); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,56 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2023 The Thingsboard Authors |
||||
|
|
||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
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 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
<ng-container [formGroup]="entityCountWidgetConfigForm"> |
||||
|
<tb-datasources |
||||
|
[configMode]="basicMode" |
||||
|
hideDatasourcesMode |
||||
|
hideDatasourceLabel |
||||
|
hideDataKeys |
||||
|
displayDatasourceFilterForBasicMode |
||||
|
formControlName="datasources"> |
||||
|
</tb-datasources> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widget-config.appearance</div> |
||||
|
<tb-count-widget-settings alarmElseEntity="false" formControlName="settings"></tb-count-widget-settings> |
||||
|
</div> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widget-config.card-appearance</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'widgets.background.background' | translate }}</div> |
||||
|
<tb-color-input asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="backgroundColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between column-lt-md"> |
||||
|
<div translate>widget-config.show-card-buttons</div> |
||||
|
<mat-chip-listbox multiple formControlName="cardButtons"> |
||||
|
<mat-chip-option value="fullscreen">{{ 'fullscreen.fullscreen' | translate }}</mat-chip-option> |
||||
|
</mat-chip-listbox> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'widget-config.card-border-radius' | translate }}</div> |
||||
|
<mat-form-field appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</div> |
||||
|
<tb-widget-actions-panel |
||||
|
formControlName="actions"> |
||||
|
</tb-widget-actions-panel> |
||||
|
</ng-container> |
||||
@ -0,0 +1,98 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2023 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// 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
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { Component } from '@angular/core'; |
||||
|
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models'; |
||||
|
import { WidgetConfigComponentData } from '@home/models/widget-component.models'; |
||||
|
import { DatasourceType, WidgetConfig, } from '@shared/models/widget.models'; |
||||
|
import { WidgetConfigComponent } from '@home/components/widget/widget-config.component'; |
||||
|
import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; |
||||
|
import { isUndefined } from '@core/utils'; |
||||
|
import { UtilsService } from '@core/services/utils.service'; |
||||
|
import { countDefaultSettings, CountWidgetSettings } from '@home/components/widget/lib/count/count-widget.models'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-entity-count-basic-config', |
||||
|
templateUrl: './entity-count-basic-config.component.html', |
||||
|
styleUrls: ['../basic-config.scss'] |
||||
|
}) |
||||
|
export class EntityCountBasicConfigComponent extends BasicWidgetConfigComponent { |
||||
|
|
||||
|
entityCountWidgetConfigForm: UntypedFormGroup; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
protected widgetConfigComponent: WidgetConfigComponent, |
||||
|
private utils: UtilsService, |
||||
|
private fb: UntypedFormBuilder) { |
||||
|
super(store, widgetConfigComponent); |
||||
|
} |
||||
|
|
||||
|
protected configForm(): UntypedFormGroup { |
||||
|
return this.entityCountWidgetConfigForm; |
||||
|
} |
||||
|
|
||||
|
protected setupDefaults(configData: WidgetConfigComponentData) { |
||||
|
let datasources = configData.config.datasources; |
||||
|
if (!datasources || !datasources.length) { |
||||
|
datasources = [{}]; |
||||
|
configData.config.datasources = datasources; |
||||
|
} |
||||
|
datasources[0].type = DatasourceType.entityCount; |
||||
|
datasources[0].dataKeys = [this.utils.createKey({name: 'count'}, DataKeyType.count)]; |
||||
|
} |
||||
|
|
||||
|
protected onConfigSet(configData: WidgetConfigComponentData) { |
||||
|
const settings: CountWidgetSettings = {...countDefaultSettings(false), ...(configData.config.settings || {})}; |
||||
|
this.entityCountWidgetConfigForm = this.fb.group({ |
||||
|
datasources: [configData.config.datasources, []], |
||||
|
settings: [settings, []], |
||||
|
|
||||
|
backgroundColor: [configData.config.backgroundColor, []], |
||||
|
cardButtons: [this.getCardButtons(configData.config), []], |
||||
|
borderRadius: [configData.config.borderRadius, []], |
||||
|
|
||||
|
actions: [configData.config.actions || {}, []] |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
protected prepareOutputConfig(config: any): WidgetConfigComponentData { |
||||
|
this.widgetConfig.config.datasources = config.datasources; |
||||
|
|
||||
|
this.widgetConfig.config.settings = {...(this.widgetConfig.config.settings || {}), ...config.settings}; |
||||
|
|
||||
|
this.widgetConfig.config.backgroundColor = config.backgroundColor; |
||||
|
this.setCardButtons(config.cardButtons, this.widgetConfig.config); |
||||
|
this.widgetConfig.config.borderRadius = config.borderRadius; |
||||
|
|
||||
|
this.widgetConfig.config.actions = config.actions; |
||||
|
return this.widgetConfig; |
||||
|
} |
||||
|
|
||||
|
private getCardButtons(config: WidgetConfig): string[] { |
||||
|
const buttons: string[] = []; |
||||
|
if (isUndefined(config.enableFullscreen) || config.enableFullscreen) { |
||||
|
buttons.push('fullscreen'); |
||||
|
} |
||||
|
return buttons; |
||||
|
} |
||||
|
|
||||
|
private setCardButtons(buttons: string[], config: WidgetConfig) { |
||||
|
config.enableFullscreen = buttons.includes('fullscreen'); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,37 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2023 The Thingsboard Authors |
||||
|
|
||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
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 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
<div class="tb-count-panel" [class.tb-count-pointer]="showChevron" (click)="cardClick($event)"> |
||||
|
<div class="tb-count-panel-column"> |
||||
|
<ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container> |
||||
|
<div class="tb-count-panel-row"> |
||||
|
<div class="tb-count-icon-panel" *ngIf="showIconBackground || showIcon" |
||||
|
[style]="{minWidth: iconBackgroundSize, minHeight: iconBackgroundSize}"> |
||||
|
<div *ngIf="showIconBackground" class="tb-count-icon-background-panel"> |
||||
|
<div [style]="iconBackgroundStyle" [style.background-color]="iconBackgroundColor.color"></div> |
||||
|
</div> |
||||
|
<tb-icon *ngIf="showIcon" [style]="iconStyle" [style.color]="iconColor.color">{{ icon }}</tb-icon> |
||||
|
</div> |
||||
|
<div class="tb-count-label-value-panel" [class.tb-count-layout-row]="layout === countCardLayout.row"> |
||||
|
<div *ngIf="showLabel" [style]="labelStyle" [style.color]="labelColor.color">{{ label }}</div> |
||||
|
<div *ngIf="layout === countCardLayout.row" style="flex: 1;"></div> |
||||
|
<div [style]="valueStyle" [style.color]="valueColor.color">{{ valueText }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<tb-icon *ngIf="showChevron" [style]="chevronStyle">chevron_right</tb-icon> |
||||
|
</div> |
||||
@ -0,0 +1,80 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2023 The Thingsboard Authors |
||||
|
* |
||||
|
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
* 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 |
||||
|
* |
||||
|
* Unless required by applicable law or agreed to in writing, software |
||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
* See the License for the specific language governing permissions and |
||||
|
* limitations under the License. |
||||
|
*/ |
||||
|
:host { |
||||
|
.tb-count-panel { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
gap: 12px; |
||||
|
padding: 12px; |
||||
|
&.tb-count-pointer { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.tb-count-panel-column { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 12px; |
||||
|
} |
||||
|
.tb-count-panel-row { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
gap: 12px; |
||||
|
} |
||||
|
.tb-count-icon-panel { |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
.mat-icon { |
||||
|
z-index: 1; |
||||
|
} |
||||
|
} |
||||
|
.tb-count-icon-background-panel { |
||||
|
position: absolute; |
||||
|
inset: 0; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
.tb-count-label-value-panel { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
place-content: flex-start space-around; |
||||
|
align-items: flex-start; |
||||
|
gap: 0; |
||||
|
&.tb-count-layout-row { |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
:host ::ng-deep { |
||||
|
.tb-count-panel { |
||||
|
.tb-widget-title { |
||||
|
padding: 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,148 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2023 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// 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
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { ChangeDetectorRef, Component, Input, OnInit, TemplateRef } from '@angular/core'; |
||||
|
import { WidgetContext } from '@home/models/widget-component.models'; |
||||
|
import { formatValue } from '@core/utils'; |
||||
|
import { |
||||
|
ColorProcessor, |
||||
|
ComponentStyle, |
||||
|
getSingleTsValue, |
||||
|
iconStyle, |
||||
|
textStyle |
||||
|
} from '@shared/models/widget-settings.models'; |
||||
|
import { WidgetComponent } from '@home/components/widget/widget.component'; |
||||
|
import { |
||||
|
CountCardLayout, |
||||
|
countDefaultSettings, |
||||
|
CountWidgetSettings |
||||
|
} from '@home/components/widget/lib/count/count-widget.models'; |
||||
|
import { coerceBoolean } from '@shared/decorators/coercion'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-count-widget', |
||||
|
templateUrl: './count-widget.component.html', |
||||
|
styleUrls: ['./count-widget.component.scss'] |
||||
|
}) |
||||
|
export class CountWidgetComponent implements OnInit { |
||||
|
|
||||
|
settings: CountWidgetSettings; |
||||
|
|
||||
|
countCardLayout = CountCardLayout; |
||||
|
|
||||
|
@Input() |
||||
|
ctx: WidgetContext; |
||||
|
|
||||
|
@Input() |
||||
|
widgetTitlePanel: TemplateRef<any>; |
||||
|
|
||||
|
@coerceBoolean() |
||||
|
@Input() |
||||
|
alarmElseEntity: boolean; |
||||
|
|
||||
|
layout: CountCardLayout; |
||||
|
|
||||
|
showLabel = true; |
||||
|
label: string; |
||||
|
labelStyle: ComponentStyle = {}; |
||||
|
labelColor: ColorProcessor; |
||||
|
|
||||
|
showIcon = true; |
||||
|
icon = ''; |
||||
|
iconStyle: ComponentStyle = {}; |
||||
|
iconColor: ColorProcessor; |
||||
|
|
||||
|
showIconBackground = true; |
||||
|
iconBackgroundSize: string; |
||||
|
iconBackgroundStyle: ComponentStyle = {}; |
||||
|
iconBackgroundColor: ColorProcessor; |
||||
|
|
||||
|
valueText = 'N/A'; |
||||
|
valueStyle: ComponentStyle = {}; |
||||
|
valueColor: ColorProcessor; |
||||
|
|
||||
|
showChevron = false; |
||||
|
chevronStyle: ComponentStyle = {}; |
||||
|
|
||||
|
constructor(private widgetComponent: WidgetComponent, |
||||
|
private cd: ChangeDetectorRef) { |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.ctx.$scope.countWidget = this; |
||||
|
this.settings = {...countDefaultSettings(this.alarmElseEntity), ...this.ctx.settings}; |
||||
|
|
||||
|
this.layout = this.settings.layout; |
||||
|
|
||||
|
this.showLabel = this.settings.showLabel; |
||||
|
this.label = this.settings.label; |
||||
|
this.labelStyle = textStyle(this.settings.labelFont, '0.4px'); |
||||
|
this.labelColor = ColorProcessor.fromSettings(this.settings.labelColor); |
||||
|
|
||||
|
this.showIcon = this.settings.showIcon; |
||||
|
this.icon = this.settings.icon; |
||||
|
this.iconStyle = iconStyle(this.settings.iconSize, this.settings.iconSizeUnit); |
||||
|
this.iconColor = ColorProcessor.fromSettings(this.settings.iconColor); |
||||
|
|
||||
|
this.showIconBackground = this.settings.showIconBackground; |
||||
|
if (this.showIconBackground) { |
||||
|
this.iconBackgroundSize = this.settings.iconBackgroundSize + this.settings.iconBackgroundSizeUnit; |
||||
|
} else { |
||||
|
this.iconBackgroundSize = this.settings.iconSize + this.settings.iconSizeUnit; |
||||
|
} |
||||
|
this.iconBackgroundStyle = { |
||||
|
width: this.iconBackgroundSize, |
||||
|
height: this.iconBackgroundSize, |
||||
|
borderRadius: '4px' |
||||
|
}; |
||||
|
this.iconBackgroundColor = ColorProcessor.fromSettings(this.settings.iconBackgroundColor); |
||||
|
|
||||
|
this.valueStyle = textStyle(this.settings.valueFont, '0.1px'); |
||||
|
this.valueColor = ColorProcessor.fromSettings(this.settings.valueColor); |
||||
|
|
||||
|
this.showChevron = this.settings.showChevron; |
||||
|
this.chevronStyle = iconStyle(this.settings.chevronSize, this.settings.chevronSizeUnit); |
||||
|
this.chevronStyle.color = this.settings.chevronColor; |
||||
|
} |
||||
|
|
||||
|
public onInit() { |
||||
|
} |
||||
|
|
||||
|
public onDataUpdated() { |
||||
|
const tsValue = getSingleTsValue(this.ctx.data); |
||||
|
let value: any; |
||||
|
if (tsValue) { |
||||
|
value = tsValue[1]; |
||||
|
this.valueText = formatValue(value, 0); |
||||
|
} else { |
||||
|
this.valueText = 'N/A'; |
||||
|
} |
||||
|
this.labelColor.update(value); |
||||
|
this.iconColor.update(value); |
||||
|
this.iconBackgroundColor.update(value); |
||||
|
this.valueColor.update(value); |
||||
|
this.cd.detectChanges(); |
||||
|
} |
||||
|
|
||||
|
public cardClick($event: Event) { |
||||
|
const descriptors = this.ctx.actionsApi.getActionDescriptors('cardClick'); |
||||
|
if (descriptors.length) { |
||||
|
$event.stopPropagation(); |
||||
|
const descriptor = descriptors[0]; |
||||
|
this.ctx.actionsApi.handleWidgetAction($event, descriptor); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,122 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2023 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// 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
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { |
||||
|
ColorSettings, |
||||
|
ColorType, |
||||
|
constantColor, |
||||
|
cssUnit, |
||||
|
defaultColorFunction, |
||||
|
Font |
||||
|
} from '@shared/models/widget-settings.models'; |
||||
|
|
||||
|
export enum CountCardLayout { |
||||
|
column = 'column', |
||||
|
row = 'row' |
||||
|
} |
||||
|
|
||||
|
export const countCardLayouts = Object.keys(CountCardLayout) as CountCardLayout[]; |
||||
|
|
||||
|
export const countCardLayoutTranslations = new Map<CountCardLayout, string>( |
||||
|
[ |
||||
|
[CountCardLayout.column, 'widgets.count.layout-column'], |
||||
|
[CountCardLayout.row, 'widgets.count.layout-row'] |
||||
|
] |
||||
|
); |
||||
|
|
||||
|
export const alarmCountCardLayoutImages = new Map<CountCardLayout, string>( |
||||
|
[ |
||||
|
[CountCardLayout.column, 'assets/widget/alarm-count/column-layout.svg'], |
||||
|
[CountCardLayout.row, 'assets/widget/alarm-count/row-layout.svg'] |
||||
|
] |
||||
|
); |
||||
|
|
||||
|
export const entityCountCardLayoutImages = new Map<CountCardLayout, string>( |
||||
|
[ |
||||
|
[CountCardLayout.column, 'assets/widget/entity-count/column-layout.svg'], |
||||
|
[CountCardLayout.row, 'assets/widget/entity-count/row-layout.svg'] |
||||
|
] |
||||
|
); |
||||
|
|
||||
|
export interface CountWidgetSettings { |
||||
|
layout: CountCardLayout; |
||||
|
showLabel: boolean; |
||||
|
label: string; |
||||
|
labelFont: Font; |
||||
|
labelColor: ColorSettings; |
||||
|
showIcon: boolean; |
||||
|
icon: string; |
||||
|
iconSize: number; |
||||
|
iconSizeUnit: cssUnit; |
||||
|
iconColor: ColorSettings; |
||||
|
showIconBackground: boolean; |
||||
|
iconBackgroundSize: number; |
||||
|
iconBackgroundSizeUnit: cssUnit; |
||||
|
iconBackgroundColor: ColorSettings; |
||||
|
valueFont: Font; |
||||
|
valueColor: ColorSettings; |
||||
|
showChevron: boolean; |
||||
|
chevronSize: number; |
||||
|
chevronSizeUnit: cssUnit; |
||||
|
chevronColor: string; |
||||
|
} |
||||
|
|
||||
|
export const countDefaultSettings = (alarmElseEntity: boolean): CountWidgetSettings => ({ |
||||
|
layout: CountCardLayout.column, |
||||
|
showLabel: true, |
||||
|
label: alarmElseEntity ? 'Total' : 'Devices', |
||||
|
labelFont: { |
||||
|
family: 'Roboto', |
||||
|
size: 12, |
||||
|
sizeUnit: 'px', |
||||
|
style: 'normal', |
||||
|
weight: '400', |
||||
|
lineHeight: '16px' |
||||
|
}, |
||||
|
labelColor: constantColor('rgba(0, 0, 0, 0.54)'), |
||||
|
showIcon: true, |
||||
|
icon: alarmElseEntity ? 'warning' : 'devices', |
||||
|
iconSize: 20, |
||||
|
iconSizeUnit: 'px', |
||||
|
iconColor: constantColor('rgba(255, 255, 255, 1)'), |
||||
|
showIconBackground: true, |
||||
|
iconBackgroundSize: 36, |
||||
|
iconBackgroundSizeUnit: 'px', |
||||
|
iconBackgroundColor: alarmElseEntity |
||||
|
? { |
||||
|
color: 'rgba(0, 105, 92, 1)', |
||||
|
type: ColorType.range, |
||||
|
rangeList: [ |
||||
|
{from: 0, to: 0, color: 'rgba(0, 105, 92, 1)'}, |
||||
|
{from: 1, color: 'rgba(209, 39, 48, 1)'} |
||||
|
], |
||||
|
colorFunction: defaultColorFunction |
||||
|
} |
||||
|
: constantColor('rgba(241, 141, 23, 1)'), |
||||
|
valueFont: { |
||||
|
family: 'Roboto', |
||||
|
size: 20, |
||||
|
sizeUnit: 'px', |
||||
|
style: 'normal', |
||||
|
weight: '500', |
||||
|
lineHeight: '24px' |
||||
|
}, |
||||
|
valueColor: constantColor('rgba(0, 0, 0, 0.87)'), |
||||
|
showChevron: false, |
||||
|
chevronSize: 24, |
||||
|
chevronSizeUnit: 'px', |
||||
|
chevronColor: 'rgba(0, 0, 0, 0.38)' |
||||
|
}); |
||||
@ -0,0 +1,23 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2023 The Thingsboard Authors |
||||
|
|
||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
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 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
<ng-container [formGroup]="alarmCountWidgetSettingsForm"> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widgets.alarm-count.alarm-count-card-style</div> |
||||
|
<tb-count-widget-settings alarmElseEntity="true" formControlName="alarmCountSettings"></tb-count-widget-settings> |
||||
|
</div> |
||||
|
</ng-container> |
||||
@ -0,0 +1,62 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2023 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// 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
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { Component } from '@angular/core'; |
||||
|
import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; |
||||
|
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { countDefaultSettings } from '@home/components/widget/lib/count/count-widget.models'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-alarm-count-widget-settings', |
||||
|
templateUrl: './alarm-count-widget-settings.component.html', |
||||
|
styleUrls: ['./../widget-settings.scss'] |
||||
|
}) |
||||
|
export class AlarmCountWidgetSettingsComponent extends WidgetSettingsComponent { |
||||
|
|
||||
|
alarmCountWidgetSettingsForm: UntypedFormGroup; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private fb: UntypedFormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
protected settingsForm(): UntypedFormGroup { |
||||
|
return this.alarmCountWidgetSettingsForm; |
||||
|
} |
||||
|
|
||||
|
protected defaultSettings(): WidgetSettings { |
||||
|
return {...countDefaultSettings(true)}; |
||||
|
} |
||||
|
|
||||
|
protected onSettingsSet(settings: WidgetSettings) { |
||||
|
this.alarmCountWidgetSettingsForm = this.fb.group({ |
||||
|
alarmCountSettings: [settings.alarmCountSettings, []], |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
protected prepareInputSettings(settings: WidgetSettings): WidgetSettings { |
||||
|
return { |
||||
|
alarmCountSettings: settings |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
protected prepareOutputSettings(settings: any): WidgetSettings { |
||||
|
return settings.alarmCountSettings; |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,103 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2023 The Thingsboard Authors |
||||
|
|
||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
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 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
<ng-container [formGroup]="countWidgetConfigForm"> |
||||
|
<tb-image-cards-select rowHeight="{{ '3:1' }}" |
||||
|
[cols]="2" |
||||
|
[colsLtMd]="1" |
||||
|
label="{{ 'widgets.count.layout' | translate }}" formControlName="layout"> |
||||
|
<tb-image-cards-select-option *ngFor="let layout of countCardLayouts" |
||||
|
[value]="layout" |
||||
|
[image]="countCardLayoutImageMap.get(layout)"> |
||||
|
{{ countCardLayoutTranslationMap.get(layout) | translate }} |
||||
|
</tb-image-cards-select-option> |
||||
|
</tb-image-cards-select> |
||||
|
<div class="tb-form-row column-xs"> |
||||
|
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel"> |
||||
|
{{ 'widgets.count.label' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
<tb-font-settings formControlName="labelFont" |
||||
|
[previewText]="countWidgetConfigForm.get('label').value"> |
||||
|
</tb-font-settings> |
||||
|
<tb-color-settings formControlName="labelColor"> |
||||
|
</tb-color-settings> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row column-xs"> |
||||
|
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon"> |
||||
|
{{ 'widgets.count.icon' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic"> |
||||
|
<input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
<tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select> |
||||
|
<tb-material-icon-select asBoxInput |
||||
|
iconClearButton |
||||
|
[color]="countWidgetConfigForm.get('iconColor').value?.color" |
||||
|
[backgroundColor]="countWidgetConfigForm.get('iconBackgroundColor').enabled |
||||
|
? countWidgetConfigForm.get('iconBackgroundColor').value?.color |
||||
|
: ''" |
||||
|
formControlName="icon"> |
||||
|
</tb-material-icon-select> |
||||
|
<tb-color-settings formControlName="iconColor"> |
||||
|
</tb-color-settings> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row column-xs"> |
||||
|
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIconBackground"> |
||||
|
{{ 'widgets.count.icon-background' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic"> |
||||
|
<input matInput type="number" min="0" formControlName="iconBackgroundSize" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
<tb-css-unit-select fxFlex formControlName="iconBackgroundSizeUnit"></tb-css-unit-select> |
||||
|
<tb-color-settings formControlName="iconBackgroundColor"> |
||||
|
</tb-color-settings> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div translate>widgets.count.value</div> |
||||
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<tb-font-settings formControlName="valueFont" |
||||
|
previewText="10"> |
||||
|
</tb-font-settings> |
||||
|
<tb-color-settings formControlName="valueColor"> |
||||
|
</tb-color-settings> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row column-xs"> |
||||
|
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showChevron"> |
||||
|
{{ 'widgets.count.chevron' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic"> |
||||
|
<input matInput type="number" min="0" formControlName="chevronSize" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
<tb-css-unit-select fxFlex formControlName="chevronSizeUnit"></tb-css-unit-select> |
||||
|
<tb-color-input asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="chevronColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
</ng-container> |
||||
@ -0,0 +1,201 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2023 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// 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
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { |
||||
|
AbstractControl, |
||||
|
ControlValueAccessor, |
||||
|
NG_VALUE_ACCESSOR, |
||||
|
UntypedFormBuilder, |
||||
|
UntypedFormGroup, |
||||
|
Validators |
||||
|
} from '@angular/forms'; |
||||
|
import {Store} from '@ngrx/store'; |
||||
|
import {AppState} from '@core/core.state'; |
||||
|
import { |
||||
|
alarmCountCardLayoutImages, |
||||
|
CountCardLayout, |
||||
|
countCardLayouts, |
||||
|
countCardLayoutTranslations, |
||||
|
CountWidgetSettings, entityCountCardLayoutImages |
||||
|
} from '@home/components/widget/lib/count/count-widget.models'; |
||||
|
import {PageComponent} from '@shared/components/page.component'; |
||||
|
import {Component, forwardRef, Input, OnInit} from '@angular/core'; |
||||
|
import { coerceBoolean } from '@shared/decorators/coercion'; |
||||
|
import { |
||||
|
valueCardLayoutImages, |
||||
|
valueCardLayoutTranslations |
||||
|
} from '@home/components/widget/lib/cards/value-card-widget.models'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-count-widget-settings', |
||||
|
templateUrl: './count-widget-settings.component.html', |
||||
|
styleUrls: ['./../widget-settings.scss'], |
||||
|
providers: [ |
||||
|
{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => CountWidgetSettingsComponent), |
||||
|
multi: true |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
export class CountWidgetSettingsComponent extends PageComponent implements OnInit, ControlValueAccessor { |
||||
|
|
||||
|
@Input() |
||||
|
disabled: boolean; |
||||
|
|
||||
|
@coerceBoolean() |
||||
|
@Input() |
||||
|
alarmElseEntity: boolean; |
||||
|
|
||||
|
private propagateChange = null; |
||||
|
|
||||
|
countCardLayouts = countCardLayouts; |
||||
|
|
||||
|
countCardLayoutTranslationMap = countCardLayoutTranslations; |
||||
|
countCardLayoutImageMap: Map<CountCardLayout, string>; |
||||
|
|
||||
|
countWidgetConfigForm: UntypedFormGroup; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private fb: UntypedFormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.countCardLayoutImageMap = this.alarmElseEntity ? alarmCountCardLayoutImages : entityCountCardLayoutImages; |
||||
|
this.countWidgetConfigForm = this.fb.group({ |
||||
|
layout: [null, []], |
||||
|
showLabel: [null, []], |
||||
|
label: [null, []], |
||||
|
labelFont: [null, []], |
||||
|
labelColor: [null, []], |
||||
|
|
||||
|
showIcon: [null, []], |
||||
|
iconSize: [null, [Validators.min(0)]], |
||||
|
iconSizeUnit: [null, []], |
||||
|
icon: [null, []], |
||||
|
iconColor: [null, []], |
||||
|
|
||||
|
showIconBackground: [null, []], |
||||
|
iconBackgroundSize: [null, [Validators.min(0)]], |
||||
|
iconBackgroundSizeUnit: [null, []], |
||||
|
iconBackgroundColor: [null, []], |
||||
|
|
||||
|
valueFont: [null, []], |
||||
|
valueColor: [null, []], |
||||
|
|
||||
|
showChevron: [null, []], |
||||
|
chevronSize: [null, [Validators.min(0)]], |
||||
|
chevronSizeUnit: [null, []], |
||||
|
chevronColor: [null, []], |
||||
|
}); |
||||
|
this.countWidgetConfigForm.valueChanges.subscribe(() => { |
||||
|
this.updateModel(); |
||||
|
}); |
||||
|
for (const trigger of ['showLabel', 'showIcon', 'showIconBackground', 'showChevron']) { |
||||
|
const path = trigger.split('.'); |
||||
|
let control: AbstractControl = this.countWidgetConfigForm; |
||||
|
for (const part of path) { |
||||
|
control = this.countWidgetConfigForm.get(part); |
||||
|
} |
||||
|
control.valueChanges.subscribe(() => { |
||||
|
this.updateValidators(); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: any): void { |
||||
|
this.propagateChange = fn; |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(fn: any): void { |
||||
|
} |
||||
|
|
||||
|
|
||||
|
setDisabledState(isDisabled: boolean): void { |
||||
|
this.disabled = isDisabled; |
||||
|
if (isDisabled) { |
||||
|
this.countWidgetConfigForm.disable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.countWidgetConfigForm.enable({emitEvent: false}); |
||||
|
this.updateValidators(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
writeValue(value: CountWidgetSettings): void { |
||||
|
this.countWidgetConfigForm.patchValue( |
||||
|
value, {emitEvent: false} |
||||
|
); |
||||
|
this.updateValidators(); |
||||
|
} |
||||
|
|
||||
|
private updateModel() { |
||||
|
const value: CountWidgetSettings = this.countWidgetConfigForm.value; |
||||
|
this.propagateChange(value); |
||||
|
} |
||||
|
|
||||
|
protected updateValidators() { |
||||
|
const showLabel: boolean = this.countWidgetConfigForm.get('showLabel').value; |
||||
|
const showIcon: boolean = this.countWidgetConfigForm.get('showIcon').value; |
||||
|
const showIconBackground: boolean = this.countWidgetConfigForm.get('showIconBackground').value; |
||||
|
const showChevron: boolean = this.countWidgetConfigForm.get('showChevron').value; |
||||
|
|
||||
|
if (showLabel) { |
||||
|
this.countWidgetConfigForm.get('label').enable({emitEvent: false}); |
||||
|
this.countWidgetConfigForm.get('labelFont').enable({emitEvent: false}); |
||||
|
this.countWidgetConfigForm.get('labelColor').enable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.countWidgetConfigForm.get('label').disable({emitEvent: false}); |
||||
|
this.countWidgetConfigForm.get('labelFont').disable({emitEvent: false}); |
||||
|
this.countWidgetConfigForm.get('labelColor').disable({emitEvent: false}); |
||||
|
} |
||||
|
|
||||
|
if (showIcon) { |
||||
|
this.countWidgetConfigForm.get('iconSize').enable({emitEvent: false}); |
||||
|
this.countWidgetConfigForm.get('iconSizeUnit').enable({emitEvent: false}); |
||||
|
this.countWidgetConfigForm.get('icon').enable({emitEvent: false}); |
||||
|
this.countWidgetConfigForm.get('iconColor').enable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.countWidgetConfigForm.get('iconSize').disable({emitEvent: false}); |
||||
|
this.countWidgetConfigForm.get('iconSizeUnit').disable({emitEvent: false}); |
||||
|
this.countWidgetConfigForm.get('icon').disable({emitEvent: false}); |
||||
|
this.countWidgetConfigForm.get('iconColor').disable({emitEvent: false}); |
||||
|
} |
||||
|
|
||||
|
if (showIconBackground) { |
||||
|
this.countWidgetConfigForm.get('iconBackgroundSize').enable({emitEvent: false}); |
||||
|
this.countWidgetConfigForm.get('iconBackgroundSizeUnit').enable({emitEvent: false}); |
||||
|
this.countWidgetConfigForm.get('iconBackgroundColor').enable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.countWidgetConfigForm.get('iconBackgroundSize').disable({emitEvent: false}); |
||||
|
this.countWidgetConfigForm.get('iconBackgroundSizeUnit').disable({emitEvent: false}); |
||||
|
this.countWidgetConfigForm.get('iconBackgroundColor').disable({emitEvent: false}); |
||||
|
} |
||||
|
|
||||
|
if (showChevron) { |
||||
|
this.countWidgetConfigForm.get('chevronSize').enable({emitEvent: false}); |
||||
|
this.countWidgetConfigForm.get('chevronSizeUnit').enable({emitEvent: false}); |
||||
|
this.countWidgetConfigForm.get('chevronColor').enable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.countWidgetConfigForm.get('chevronSize').disable({emitEvent: false}); |
||||
|
this.countWidgetConfigForm.get('chevronSizeUnit').disable({emitEvent: false}); |
||||
|
this.countWidgetConfigForm.get('chevronColor').disable({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
protected readonly valueCardLayoutTranslations = valueCardLayoutTranslations; |
||||
|
protected readonly valueCardLayoutImages = valueCardLayoutImages; |
||||
|
} |
||||
@ -0,0 +1,23 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2023 The Thingsboard Authors |
||||
|
|
||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
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 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
<ng-container [formGroup]="entityCountWidgetSettingsForm"> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widgets.entity-count.entity-count-card-style</div> |
||||
|
<tb-count-widget-settings alarmElseEntity="false" formControlName="entityCountSettings"></tb-count-widget-settings> |
||||
|
</div> |
||||
|
</ng-container> |
||||
@ -0,0 +1,62 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2023 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// 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
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { Component } from '@angular/core'; |
||||
|
import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; |
||||
|
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { countDefaultSettings } from '@home/components/widget/lib/count/count-widget.models'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-entity-count-widget-settings', |
||||
|
templateUrl: './entity-count-widget-settings.component.html', |
||||
|
styleUrls: ['./../widget-settings.scss'] |
||||
|
}) |
||||
|
export class EntityCountWidgetSettingsComponent extends WidgetSettingsComponent { |
||||
|
|
||||
|
entityCountWidgetSettingsForm: UntypedFormGroup; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private fb: UntypedFormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
protected settingsForm(): UntypedFormGroup { |
||||
|
return this.entityCountWidgetSettingsForm; |
||||
|
} |
||||
|
|
||||
|
protected defaultSettings(): WidgetSettings { |
||||
|
return {...countDefaultSettings(false)}; |
||||
|
} |
||||
|
|
||||
|
protected onSettingsSet(settings: WidgetSettings) { |
||||
|
this.entityCountWidgetSettingsForm = this.fb.group({ |
||||
|
entityCountSettings: [settings.entityCountSettings, []], |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
protected prepareInputSettings(settings: WidgetSettings): WidgetSettings { |
||||
|
return { |
||||
|
entityCountSettings: settings |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
protected prepareOutputSettings(settings: any): WidgetSettings { |
||||
|
return settings.entityCountSettings; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 14 KiB |
Loading…
Reference in new issue