From f079563daf486e0be4ef25998540dcb02f2be092 Mon Sep 17 00:00:00 2001 From: Philip Magyar Date: Thu, 22 Feb 2024 18:10:06 +0100 Subject: [PATCH 001/442] UI: sync country list & add flags to tb-contact country selector --- .../app/modules/home/models/contact.models.ts | 252 ------------------ .../shared/components/contact.component.html | 7 +- .../shared/components/contact.component.ts | 11 +- .../src/app/shared/models/country.models.ts | 15 ++ 4 files changed, 26 insertions(+), 259 deletions(-) diff --git a/ui-ngx/src/app/modules/home/models/contact.models.ts b/ui-ngx/src/app/modules/home/models/contact.models.ts index 41ebecc865..f1b23a0839 100644 --- a/ui-ngx/src/app/modules/home/models/contact.models.ts +++ b/ui-ngx/src/app/modules/home/models/contact.models.ts @@ -14,258 +14,6 @@ /// limitations under the License. /// -export const COUNTRIES = [ - 'Afghanistan', - 'ร…land Islands', - 'Albania', - 'Algeria', - 'American Samoa', - 'Andorra', - 'Angola', - 'Anguilla', - 'Antarctica', - 'Antigua and Barbuda', - 'Argentina', - 'Armenia', - 'Aruba', - 'Australia', - 'Austria', - 'Azerbaijan', - 'Bahamas', - 'Bahrain', - 'Bangladesh', - 'Barbados', - 'Belarus', - 'Belgium', - 'Belize', - 'Benin', - 'Bermuda', - 'Bhutan', - 'Bolivia', - 'Bonaire, Sint Eustatius and Saba', - 'Bosnia and Herzegovina', - 'Botswana', - 'Bouvet Island', - 'Brazil', - 'British Indian Ocean Territory', - 'Brunei Darussalam', - 'Bulgaria', - 'Burkina Faso', - 'Burundi', - 'Cambodia', - 'Cameroon', - 'Canada', - 'Cape Verde', - 'Cayman Islands', - 'Central African Republic', - 'Chad', - 'Chile', - 'China', - 'Christmas Island', - 'Cocos (Keeling) Islands', - 'Colombia', - 'Comoros', - 'Congo', - 'Congo, The Democratic Republic of the', - 'Cook Islands', - 'Costa Rica', - 'Cรดte d\'Ivoire', - 'Croatia', - 'Cuba', - 'Curaรงao', - 'Cyprus', - 'Czech Republic', - 'Denmark', - 'Djibouti', - 'Dominica', - 'Dominican Republic', - 'Ecuador', - 'Egypt', - 'El Salvador', - 'Equatorial Guinea', - 'Eritrea', - 'Estonia', - 'Ethiopia', - 'Falkland Islands (Malvinas)', - 'Faroe Islands', - 'Fiji', - 'Finland', - 'France', - 'French Guiana', - 'French Polynesia', - 'French Southern Territories', - 'Gabon', - 'Gambia', - 'Georgia', - 'Germany', - 'Ghana', - 'Gibraltar', - 'Greece', - 'Greenland', - 'Grenada', - 'Guadeloupe', - 'Guam', - 'Guatemala', - 'Guernsey', - 'Guinea', - 'Guinea-Bissau', - 'Guyana', - 'Haiti', - 'Heard Island and McDonald Islands', - 'Holy See (Vatican City State)', - 'Honduras', - 'Hong Kong', - 'Hungary', - 'Iceland', - 'India', - 'Indonesia', - 'Iran, Islamic Republic of', - 'Iraq', - 'Ireland', - 'Isle of Man', - 'Israel', - 'Italy', - 'Jamaica', - 'Japan', - 'Jersey', - 'Jordan', - 'Kazakhstan', - 'Kenya', - 'Kiribati', - 'Korea, Democratic People\'s Republic of', - 'Korea, Republic of', - 'Kuwait', - 'Kyrgyzstan', - 'Lao People\'s Democratic Republic', - 'Latvia', - 'Lebanon', - 'Lesotho', - 'Liberia', - 'Libya', - 'Liechtenstein', - 'Lithuania', - 'Luxembourg', - 'Macao', - 'Macedonia, Republic Of', - 'Madagascar', - 'Malawi', - 'Malaysia', - 'Maldives', - 'Mali', - 'Malta', - 'Marshall Islands', - 'Martinique', - 'Mauritania', - 'Mauritius', - 'Mayotte', - 'Mexico', - 'Micronesia, Federated States of', - 'Moldova, Republic of', - 'Monaco', - 'Mongolia', - 'Montenegro', - 'Montserrat', - 'Morocco', - 'Mozambique', - 'Myanmar', - 'Namibia', - 'Nauru', - 'Nepal', - 'Netherlands', - 'New Caledonia', - 'New Zealand', - 'Nicaragua', - 'Niger', - 'Nigeria', - 'Niue', - 'Norfolk Island', - 'Northern Mariana Islands', - 'Norway', - 'Oman', - 'Pakistan', - 'Palau', - 'Palestinian Territory, Occupied', - 'Panama', - 'Papua New Guinea', - 'Paraguay', - 'Peru', - 'Philippines', - 'Pitcairn', - 'Poland', - 'Portugal', - 'Puerto Rico', - 'Qatar', - 'Reunion', - 'Romania', - 'Russian Federation', - 'Rwanda', - 'Saint Barthรฉlemy', - 'Saint Helena, Ascension and Tristan da Cunha', - 'Saint Kitts and Nevis', - 'Saint Lucia', - 'Saint Martin (French Part)', - 'Saint Pierre and Miquelon', - 'Saint Vincent and the Grenadines', - 'Samoa', - 'San Marino', - 'Sao Tome and Principe', - 'Saudi Arabia', - 'Senegal', - 'Serbia', - 'Seychelles', - 'Sierra Leone', - 'Singapore', - 'Sint Maarten (Dutch Part)', - 'Slovakia', - 'Slovenia', - 'Solomon Islands', - 'Somalia', - 'South Africa', - 'South Georgia and the South Sandwich Islands', - 'South Sudan', - 'Spain', - 'Sri Lanka', - 'Sudan', - 'Suriname', - 'Svalbard and Jan Mayen', - 'Swaziland', - 'Sweden', - 'Switzerland', - 'Syrian Arab Republic', - 'Taiwan', - 'Tajikistan', - 'Tanzania, United Republic of', - 'Thailand', - 'Timor-Leste', - 'Togo', - 'Tokelau', - 'Tonga', - 'Trinidad and Tobago', - 'Tunisia', - 'Turkey', - 'Turkmenistan', - 'Turks and Caicos Islands', - 'Tuvalu', - 'Uganda', - 'Ukraine', - 'United Arab Emirates', - 'United Kingdom', - 'United States', - 'United States Minor Outlying Islands', - 'Uruguay', - 'Uzbekistan', - 'Vanuatu', - 'Venezuela', - 'Viet Nam', - 'Virgin Islands, British', - 'Virgin Islands, U.S.', - 'Wallis and Futuna', - 'Western Sahara', - 'Yemen', - 'Zambia', - 'Zimbabwe' -]; - /* eslint-disable */ export const POSTAL_CODE_PATTERNS = { 'United States': '(\\d{5}([\\-]\\d{4})?)', diff --git a/ui-ngx/src/app/shared/components/contact.component.html b/ui-ngx/src/app/shared/components/contact.component.html index 059fd09c80..c0688be71a 100644 --- a/ui-ngx/src/app/shared/components/contact.component.html +++ b/ui-ngx/src/app/shared/components/contact.component.html @@ -18,9 +18,10 @@
contact.country - - - {{ country }} + + + {{country.flag}} + {{country.name }} diff --git a/ui-ngx/src/app/shared/components/contact.component.ts b/ui-ngx/src/app/shared/components/contact.component.ts index c5a3daecf8..dae5f2ac0d 100644 --- a/ui-ngx/src/app/shared/components/contact.component.ts +++ b/ui-ngx/src/app/shared/components/contact.component.ts @@ -16,11 +16,13 @@ import { Component, Input } from '@angular/core'; import { UntypedFormGroup } from '@angular/forms'; -import { COUNTRIES } from '@home/models/contact.models'; - +import { CountryData } from '../models/country.models'; @Component({ selector: 'tb-contact', - templateUrl: './contact.component.html' + templateUrl: './contact.component.html', + providers: [ + CountryData + ] }) export class ContactComponent { @@ -29,6 +31,7 @@ export class ContactComponent { @Input() isEdit: boolean; - countries = COUNTRIES; + countries = this.countryData.allCountries; + constructor(private countryData: CountryData) {} } diff --git a/ui-ngx/src/app/shared/models/country.models.ts b/ui-ngx/src/app/shared/models/country.models.ts index 814cb81147..919d362067 100644 --- a/ui-ngx/src/app/shared/models/country.models.ts +++ b/ui-ngx/src/app/shared/models/country.models.ts @@ -32,6 +32,7 @@ export enum CountryISO { Andorra = 'AD', Angola = 'AO', Anguilla = 'AI', + Antarctica = 'AQ', AntiguaAndBarbuda = 'AG', Argentina = 'AR', Armenia = 'AM', @@ -50,6 +51,8 @@ export enum CountryISO { Bermuda = 'BM', Bhutan = 'BT', Bolivia = 'BO', + BonaireAndSintEustatiusAndSaba = 'BQ', + BouvetIsland = 'BV', BosniaAndHerzegovina = 'BA', Botswana = 'BW', Brazil = 'BR', @@ -101,6 +104,7 @@ export enum CountryISO { France = 'FR', FrenchGuiana = 'GF', FrenchPolynesia = 'PF', + FrenchSouthernTerritories = 'TF', Gabon = 'GA', Gambia = 'GM', Georgia = 'GE', @@ -118,6 +122,7 @@ export enum CountryISO { GuineaBissau = 'GW', Guyana = 'GY', Haiti = 'HT', + HeardIslandandMcDonaldIslands = 'HM', Honduras = 'HN', HongKong = 'HK', Hungary = 'HU', @@ -195,6 +200,7 @@ export enum CountryISO { Paraguay = 'PY', Peru = 'PE', Philippines = 'PH', + PitcairnIslands = 'PN', Poland = 'PL', Portugal = 'PT', PuertoRico = 'PR', @@ -225,6 +231,7 @@ export enum CountryISO { SolomonIslands = 'SB', Somalia = 'SO', SouthAfrica = 'ZA', + SouthGeorgiaAndTheSouthSandwichIslands = 'GS', SouthKorea = 'KR', SouthSudan = 'SS', Spain = 'ES', @@ -280,6 +287,7 @@ export class CountryData { {name: 'Andorra', iso2: CountryISO.Andorra, dialCode: '376', flag: '๐Ÿ‡ฆ๐Ÿ‡ฉ'}, {name: 'Angola', iso2: CountryISO.Angola, dialCode: '244', flag: '๐Ÿ‡ฆ๐Ÿ‡ด'}, {name: 'Anguilla', iso2: CountryISO.Anguilla, dialCode: '1', flag: '๐Ÿ‡ฆ๐Ÿ‡ฎ'}, + {name: 'Antarctica', iso2: CountryISO.Antarctica, dialCode: '672', flag: '๐Ÿ‡ฆ๐Ÿ‡ถ'}, {name: 'Antigua and Barbuda', iso2: CountryISO.AntiguaAndBarbuda, dialCode: '1', flag: '๐Ÿ‡ฆ๐Ÿ‡ฌ'}, {name: 'Argentina', iso2: CountryISO.Argentina, dialCode: '54', flag: '๐Ÿ‡ฆ๐Ÿ‡ท'}, {name: 'Armenia', iso2: CountryISO.Armenia, dialCode: '374', flag: '๐Ÿ‡ฆ๐Ÿ‡ฒ'}, @@ -298,6 +306,8 @@ export class CountryData { {name: 'Bermuda', iso2: CountryISO.Bermuda, dialCode: '1', flag: '๐Ÿ‡ง๐Ÿ‡ฒ'}, {name: 'Bhutan', iso2: CountryISO.Bhutan, dialCode: '975', flag: '๐Ÿ‡ง๐Ÿ‡น'}, {name: 'Bolivia', iso2: CountryISO.Bolivia, dialCode: '591', flag: '๐Ÿ‡ง๐Ÿ‡ด'}, + {name: 'Bonaire, Sint Eustatius and Saba', iso2: CountryISO.BonaireAndSintEustatiusAndSaba, dialCode: '599', flag: '๐Ÿ‡ง๐Ÿ‡ถ'}, + {name: 'Bouvet Island', iso2: CountryISO.BouvetIsland, dialCode: '47', flag: '๐Ÿ‡ง๐Ÿ‡ป'}, {name: 'Bosnia and Herzegovina', iso2: CountryISO.BosniaAndHerzegovina, dialCode: '387', flag: '๐Ÿ‡ง๐Ÿ‡ฆ'}, {name: 'Botswana', iso2: CountryISO.Botswana, dialCode: '267', flag: '๐Ÿ‡ง๐Ÿ‡ผ'}, {name: 'Brazil', iso2: CountryISO.Brazil, dialCode: '55', flag: '๐Ÿ‡ง๐Ÿ‡ท'}, @@ -349,6 +359,7 @@ export class CountryData { {name: 'France', iso2: CountryISO.France, dialCode: '33', flag: '๐Ÿ‡ซ๐Ÿ‡ท'}, {name: 'French Guiana', iso2: CountryISO.FrenchGuiana, dialCode: '594', flag: '๐Ÿ‡ฌ๐Ÿ‡ซ'}, {name: 'French Polynesia', iso2: CountryISO.FrenchPolynesia, dialCode: '689', flag: '๐Ÿ‡ต๐Ÿ‡ซ'}, + {name: 'French Southern Territories', iso2: CountryISO.FrenchSouthernTerritories, dialCode: '262', flag: '๐Ÿ‡น๐Ÿ‡ซ'}, {name: 'Gabon', iso2: CountryISO.Gabon, dialCode: '241', flag: '๐Ÿ‡ฌ๐Ÿ‡ฆ'}, {name: 'Gambia', iso2: CountryISO.Gambia, dialCode: '220', flag: '๐Ÿ‡ฌ๐Ÿ‡ฒ'}, {name: 'Georgia', iso2: CountryISO.Georgia, dialCode: '995', flag: '๐Ÿ‡ฌ๐Ÿ‡ช'}, @@ -366,6 +377,7 @@ export class CountryData { {name: 'Guinea-Bissau', iso2: CountryISO.GuineaBissau, dialCode: '245', flag: '๐Ÿ‡ฌ๐Ÿ‡ผ'}, {name: 'Guyana', iso2: CountryISO.Guyana, dialCode: '592', flag: '๐Ÿ‡ฌ๐Ÿ‡พ'}, {name: 'Haiti', iso2: CountryISO.Haiti, dialCode: '509', flag: '๐Ÿ‡ญ๐Ÿ‡น'}, + {name: 'Heard Island and McDonald Islands', iso2: CountryISO.HeardIslandandMcDonaldIslands, dialCode: '672', flag: '๐Ÿ‡ญ๐Ÿ‡ฒ'}, {name: 'Honduras', iso2: CountryISO.Honduras, dialCode: '504', flag: '๐Ÿ‡ญ๐Ÿ‡ณ'}, {name: 'Hong Kong', iso2: CountryISO.HongKong, dialCode: '852', flag: '๐Ÿ‡ญ๐Ÿ‡ฐ'}, {name: 'Hungary', iso2: CountryISO.Hungary, dialCode: '36', flag: '๐Ÿ‡ญ๐Ÿ‡บ'}, @@ -443,6 +455,7 @@ export class CountryData { {name: 'Paraguay', iso2: CountryISO.Paraguay, dialCode: '595', flag: '๐Ÿ‡ต๐Ÿ‡พ'}, {name: 'Peru', iso2: CountryISO.Peru, dialCode: '51', flag: '๐Ÿ‡ต๐Ÿ‡ช'}, {name: 'Philippines', iso2: CountryISO.Philippines, dialCode: '63', flag: '๐Ÿ‡ต๐Ÿ‡ญ'}, + {name: 'Pitcairn Islands', iso2: CountryISO.PitcairnIslands, dialCode: '649', flag: '๐Ÿ‡ต๐Ÿ‡ณ'}, {name: 'Poland', iso2: CountryISO.Poland, dialCode: '48', flag: '๐Ÿ‡ต๐Ÿ‡ฑ'}, {name: 'Portugal', iso2: CountryISO.Portugal, dialCode: '351', flag: '๐Ÿ‡ต๐Ÿ‡น'}, {name: 'Puerto Rico', iso2: CountryISO.PuertoRico, dialCode: '1', flag: '๐Ÿ‡ต๐Ÿ‡ท'}, @@ -473,6 +486,8 @@ export class CountryData { {name: 'Solomon Islands', iso2: CountryISO.SolomonIslands, dialCode: '677', flag: '๐Ÿ‡ธ๐Ÿ‡ง'}, {name: 'Somalia', iso2: CountryISO.Somalia, dialCode: '252', flag: '๐Ÿ‡ธ๐Ÿ‡ด'}, {name: 'South Africa', iso2: CountryISO.SouthAfrica, dialCode: '27', flag: '๐Ÿ‡ฟ๐Ÿ‡ฆ'}, + {name: 'South Georgia and the South Sandwich Islands', + iso2: CountryISO.SouthGeorgiaAndTheSouthSandwichIslands, dialCode: '500', flag: '๐Ÿ‡ฌ๐Ÿ‡ธ'}, {name: 'South Korea', iso2: CountryISO.SouthKorea, dialCode: '82', flag: '๐Ÿ‡ฐ๐Ÿ‡ท'}, {name: 'South Sudan', iso2: CountryISO.SouthSudan, dialCode: '211', flag: '๐Ÿ‡ธ๐Ÿ‡ธ'}, {name: 'Spain', iso2: CountryISO.Spain, dialCode: '34', flag: '๐Ÿ‡ช๐Ÿ‡ธ'}, From 4096a60612a7c3329830620764230e5fa27fb62a Mon Sep 17 00:00:00 2001 From: Philip Magyar Date: Thu, 29 Feb 2024 16:15:26 +0100 Subject: [PATCH 002/442] searchable countries --- .../shared/components/contact.component.html | 11 ++-- .../shared/components/contact.component.ts | 50 +++++++++++++++++-- 2 files changed, 53 insertions(+), 8 deletions(-) diff --git a/ui-ngx/src/app/shared/components/contact.component.html b/ui-ngx/src/app/shared/components/contact.component.html index c0688be71a..6b997da07c 100644 --- a/ui-ngx/src/app/shared/components/contact.component.html +++ b/ui-ngx/src/app/shared/components/contact.component.html @@ -18,12 +18,13 @@
contact.country - - + + + {{country.flag}} {{country.name }} - +
@@ -56,7 +57,9 @@ contact.address2 - diff --git a/ui-ngx/src/app/shared/components/contact.component.ts b/ui-ngx/src/app/shared/components/contact.component.ts index dae5f2ac0d..410944f36a 100644 --- a/ui-ngx/src/app/shared/components/contact.component.ts +++ b/ui-ngx/src/app/shared/components/contact.component.ts @@ -14,9 +14,12 @@ /// limitations under the License. /// -import { Component, Input } from '@angular/core'; +import { Component, Input, OnInit, ViewChild } from '@angular/core'; import { UntypedFormGroup } from '@angular/forms'; -import { CountryData } from '../models/country.models'; +import { Country, CountryData } from '../models/country.models'; +import { Observable, map, startWith } from 'rxjs'; +import { PhoneInputComponent } from './phone-input.component'; +import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete'; @Component({ selector: 'tb-contact', templateUrl: './contact.component.html', @@ -24,14 +27,53 @@ import { CountryData } from '../models/country.models'; CountryData ] }) -export class ContactComponent { +export class ContactComponent implements OnInit { @Input() parentForm: UntypedFormGroup; @Input() isEdit: boolean; + @Input() phoneInputDefaultCountry = 'US'; + + @ViewChild('phoneInput') phoneInput: PhoneInputComponent | undefined; countries = this.countryData.allCountries; + countriesFiltered: Observable; + + constructor(private countryData: CountryData) { + this.displayCountryWithFlag = this.displayCountryWithFlag.bind(this); + } + + ngOnInit() { + this.countriesFiltered = this.parentForm.get('country').valueChanges + .pipe( + startWith(''), + map((countryName: string) => this._filterCountries(countryName)) + ); + } + + private _filterCountries(countryName: string): Country[] { + const filterValue = countryName.toLowerCase(); + return this.countries.filter(country => this.displayCountryWithFlag(country.name).toLowerCase().includes(filterValue)); + } + + displayCountryWithFlag(countryName: string): string { + const country = this.countries.find(c => c.name === countryName); + if (!country) { + return ''; + } + return country ? `${country.flag} ${country.name}` : ''; + } - constructor(private countryData: CountryData) {} + onCountryChange(select: MatAutocompleteSelectedEvent) { + // Get the selected country and check if the phone number is empty + // If it is, set the country code to the selected country + const countryName = select.option.value; + const country = this.countries.find(c => c.name === countryName); + if (country && this.phoneInput) { + if (!this.phoneInput.phoneFormGroup.get('phoneNumber').value) { + this.phoneInput.phoneFormGroup.get('country').setValue(country.iso2); + } + } + } } From d9b77251133551e4b8f933fe0b9a268d06730877 Mon Sep 17 00:00:00 2001 From: Sergey Matvienko Date: Tue, 26 Mar 2024 14:24:18 +0100 Subject: [PATCH 003/442] WIP Redis junit5 test container --- dao/pom.xml | 5 ++ .../server/dao/RedisJUnit5Test.java | 64 +++++++++++++++++++ pom.xml | 12 ++++ 3 files changed, 81 insertions(+) create mode 100644 dao/src/test/java/org/thingsboard/server/dao/RedisJUnit5Test.java diff --git a/dao/pom.xml b/dao/pom.xml index ab62d8f013..700d2b0135 100644 --- a/dao/pom.xml +++ b/dao/pom.xml @@ -216,6 +216,11 @@ jdbc test + + org.testcontainers + junit-jupiter + test + org.springframework spring-context-support diff --git a/dao/src/test/java/org/thingsboard/server/dao/RedisJUnit5Test.java b/dao/src/test/java/org/thingsboard/server/dao/RedisJUnit5Test.java new file mode 100644 index 0000000000..43e788cccb --- /dev/null +++ b/dao/src/test/java/org/thingsboard/server/dao/RedisJUnit5Test.java @@ -0,0 +1,64 @@ +/** + * Copyright ยฉ 2016-2024 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. + */ +package org.thingsboard.server.dao; + +import lombok.extern.slf4j.Slf4j; +import org.junit.jupiter.api.AfterAll; +import org.junit.jupiter.api.BeforeAll; +import org.junit.jupiter.api.Test; +import org.testcontainers.containers.GenericContainer; +import org.testcontainers.containers.output.OutputFrame; +import org.testcontainers.junit.jupiter.Container; +import org.testcontainers.junit.jupiter.Testcontainers; + +import java.util.List; + +import static org.assertj.core.api.Assertions.assertThat; + +@Testcontainers +@Slf4j +public class RedisJUnit5Test { + + @Container + private static final GenericContainer REDIS = new GenericContainer("redis:7.2-bookworm") + .withLogConsumer(s -> log.error(((OutputFrame) s).getUtf8String().trim())) + .withExposedPorts(6379); + + @BeforeAll + static void beforeAll() { + log.warn("Starting redis..."); + REDIS.start(); + System.setProperty("cache.type", "redis"); + System.setProperty("redis.connection.type", "standalone"); + System.setProperty("redis.standalone.host", REDIS.getHost()); + System.setProperty("redis.standalone.port", String.valueOf(REDIS.getMappedPort(6379))); + + } + + @AfterAll + static void afterAll() { + List.of("cache.type", "redis.connection.type", "redis.standalone.host", "redis.standalone.port") + .forEach(System.getProperties()::remove); + REDIS.stop(); + log.warn("Redis is stopped"); + } + + @Test + void test() { + assertThat(REDIS.isRunning()).isTrue(); + } + +} diff --git a/pom.xml b/pom.xml index d2450e0a65..70a35d77d2 100755 --- a/pom.xml +++ b/pom.xml @@ -2021,6 +2021,18 @@ + + org.testcontainers + junit-jupiter + ${testcontainers.version} + test + + + junit + junit + + + org.zeroturnaround zt-exec From 3a86913e24068f020ed7f274c09bd483b6cd39d5 Mon Sep 17 00:00:00 2001 From: Sergey Matvienko Date: Wed, 3 Apr 2024 10:05:01 +0200 Subject: [PATCH 004/442] RedisTbTransactionalCache refactored deprecated methods --- .../cache/RedisTbTransactionalCache.java | 21 +++++++++---------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/common/cache/src/main/java/org/thingsboard/server/cache/RedisTbTransactionalCache.java b/common/cache/src/main/java/org/thingsboard/server/cache/RedisTbTransactionalCache.java index abfbb398c9..cd5db13995 100644 --- a/common/cache/src/main/java/org/thingsboard/server/cache/RedisTbTransactionalCache.java +++ b/common/cache/src/main/java/org/thingsboard/server/cache/RedisTbTransactionalCache.java @@ -29,7 +29,6 @@ import org.springframework.data.redis.core.types.Expiration; import org.springframework.data.redis.serializer.RedisSerializer; import org.springframework.data.redis.serializer.StringRedisSerializer; import org.thingsboard.server.common.data.FstStatsService; -import redis.clients.jedis.Connection; import redis.clients.jedis.Jedis; import redis.clients.jedis.JedisPool; import redis.clients.jedis.util.JedisClusterCRC16; @@ -79,7 +78,7 @@ public abstract class RedisTbTransactionalCache get(K key) { try (var connection = connectionFactory.getConnection()) { byte[] rawKey = getRawKey(key); - byte[] rawValue = connection.get(rawKey); + byte[] rawValue = connection.stringCommands().get(rawKey); if (rawValue == null) { return null; } else if (Arrays.equals(rawValue, BINARY_NULL_VALUE)) { @@ -113,7 +112,7 @@ public abstract class RedisTbTransactionalCache(this, connection); } - private RedisConnection getConnection(byte[] rawKey) { + protected RedisConnection getConnection(byte[] rawKey) { if (!connectionFactory.isRedisClusterAware()) { return connectionFactory.getConnection(); } @@ -168,7 +167,7 @@ public abstract class RedisTbTransactionalCache Date: Wed, 3 Apr 2024 11:46:03 +0200 Subject: [PATCH 005/442] WIP CachedRedisSqlTimeseriesLatestDao.java --- .../src/main/resources/thingsboard.yml | 7 ++ build.sh | 57 ++++++++++ .../server/cache/TbJavaRedisSerializer.java | 35 ++++++ .../util/SqlTsLatestAnyDaoCachedRedis.java | 26 +++++ .../server/common/data/CacheConstants.java | 1 + .../CachedRedisSqlTimeseriesLatestDao.java | 104 ++++++++++++++++++ .../dao/timeseries/TsLatestCacheKey.java | 40 +++++++ .../dao/timeseries/TsLatestRedisCache.java | 35 ++++++ .../resources/application-test.properties | 4 + dao/src/test/resources/logback.xml | 1 + 10 files changed, 310 insertions(+) create mode 100755 build.sh create mode 100644 common/cache/src/main/java/org/thingsboard/server/cache/TbJavaRedisSerializer.java create mode 100644 common/dao-api/src/main/java/org/thingsboard/server/dao/util/SqlTsLatestAnyDaoCachedRedis.java create mode 100644 dao/src/main/java/org/thingsboard/server/dao/sqlts/CachedRedisSqlTimeseriesLatestDao.java create mode 100644 dao/src/main/java/org/thingsboard/server/dao/timeseries/TsLatestCacheKey.java create mode 100644 dao/src/main/java/org/thingsboard/server/dao/timeseries/TsLatestRedisCache.java diff --git a/application/src/main/resources/thingsboard.yml b/application/src/main/resources/thingsboard.yml index daf9f5d1c1..535a396762 100644 --- a/application/src/main/resources/thingsboard.yml +++ b/application/src/main/resources/thingsboard.yml @@ -489,6 +489,10 @@ cache: attributes: # make sure that if cache.type is 'redis' and cache.attributes.enabled is 'true' if you change 'maxmemory-policy' Redis config property to 'allkeys-lru', 'allkeys-lfu' or 'allkeys-random' enabled: "${CACHE_ATTRIBUTES_ENABLED:true}" + ts_latest: + # Will enable cache-aside strategy for SQL timeseries latest DAO. + # make sure that if cache.type is 'redis' and cache.ts_latest.enabled is 'true' if you change 'maxmemory-policy' Redis config property to 'allkeys-lru', 'allkeys-lfu' or 'allkeys-random' + enabled: "${CACHE_TS_LATEST_ENABLED:true}" specs: relations: timeToLiveInMinutes: "${CACHE_SPECS_RELATIONS_TTL:1440}" # Relations cache TTL @@ -539,6 +543,9 @@ cache: attributes: timeToLiveInMinutes: "${CACHE_SPECS_ATTRIBUTES_TTL:1440}" # Attributes cache TTL maxSize: "${CACHE_SPECS_ATTRIBUTES_MAX_SIZE:100000}" # 0 means the cache is disabled + tsLatest: + timeToLiveInMinutes: "${CACHE_SPECS_TS_LATEST_TTL:1440}" # Timeseries latest cache TTL + maxSize: "${CACHE_SPECS_TS_LATEST_MAX_SIZE:100000}" # 0 means the cache is disabled userSessionsInvalidation: # The value of this TTL is ignored and replaced by the JWT refresh token expiration time timeToLiveInMinutes: "0" diff --git a/build.sh b/build.sh new file mode 100755 index 0000000000..2c6a7d23fa --- /dev/null +++ b/build.sh @@ -0,0 +1,57 @@ +#!/bin/bash +# +# Copyright ยฉ 2016-2024 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. +# + +set -e # exit on any error + +#PROJECTS="msa/tb-node,msa/web-ui,rule-engine-pe/rule-node-twilio-sms" +PROJECTS="" + +if [ "$1" ]; then + PROJECTS="--projects $1" +fi + +echo "Building and pushing [amd64,arm64] projects '$PROJECTS' ..." +echo "HELP: usage ./build.sh [projects]" +echo "HELP: example ./build.sh msa/web-ui,msa/web-report" +java -version +#echo "Cleaning ui-ngx/node_modules" && rm -rf ui-ngx/node_modules + +MAVEN_OPTS="-Xmx1024m" NODE_OPTIONS="--max_old_space_size=4096" DOCKER_CLI_EXPERIMENTAL=enabled DOCKER_BUILDKIT=0 \ +mvn -T2 license:format clean install -DskipTests \ + $PROJECTS --also-make +# \ +# -Dpush-docker-amd-arm-images +# -Ddockerfile.skip=false -Dpush-docker-image=true +# --offline +# --projects '!msa/web-report' --also-make + +# push all +# mvn -T 1C license:format clean install -DskipTests -Ddockerfile.skip=false -Dpush-docker-image=true + + +## Build and push AMD and ARM docker images using docker buildx +## Reference to article how to setup docker miltiplatform build environment: https://medium.com/@artur.klauser/building-multi-architecture-docker-images-with-buildx-27d80f7e2408 +## install docker-ce from docker repo https://docs.docker.com/engine/install/ubuntu/ +# sudo apt install -y qemu-user-static binfmt-support +# export DOCKER_CLI_EXPERIMENTAL=enabled +# docker version +# docker run --rm --privileged multiarch/qemu-user-static --reset -p yes +# docker buildx create --name mybuilder +# docker buildx use mybuilder +# docker buildx inspect --bootstrap +# docker buildx ls +# mvn clean install -P push-docker-amd-arm-images \ No newline at end of file diff --git a/common/cache/src/main/java/org/thingsboard/server/cache/TbJavaRedisSerializer.java b/common/cache/src/main/java/org/thingsboard/server/cache/TbJavaRedisSerializer.java new file mode 100644 index 0000000000..92c9f37900 --- /dev/null +++ b/common/cache/src/main/java/org/thingsboard/server/cache/TbJavaRedisSerializer.java @@ -0,0 +1,35 @@ +/** + * Copyright ยฉ 2016-2024 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. + */ +package org.thingsboard.server.cache; + +import org.springframework.data.redis.serializer.RedisSerializer; +import org.springframework.data.redis.serializer.SerializationException; + +public class TbJavaRedisSerializer implements TbRedisSerializer { + + final RedisSerializer serializer = RedisSerializer.java(); + + @Override + public byte[] serialize(V value) throws SerializationException { + return serializer.serialize(value); + } + + @Override + public V deserialize(K key, byte[] bytes) throws SerializationException { + return (V) serializer.deserialize(bytes); + } + +} diff --git a/common/dao-api/src/main/java/org/thingsboard/server/dao/util/SqlTsLatestAnyDaoCachedRedis.java b/common/dao-api/src/main/java/org/thingsboard/server/dao/util/SqlTsLatestAnyDaoCachedRedis.java new file mode 100644 index 0000000000..634302a1f3 --- /dev/null +++ b/common/dao-api/src/main/java/org/thingsboard/server/dao/util/SqlTsLatestAnyDaoCachedRedis.java @@ -0,0 +1,26 @@ +/** + * Copyright ยฉ 2016-2024 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. + */ +package org.thingsboard.server.dao.util; + +import org.springframework.boot.autoconfigure.condition.ConditionalOnExpression; + +import java.lang.annotation.Retention; +import java.lang.annotation.RetentionPolicy; + +@Retention(RetentionPolicy.RUNTIME) +@ConditionalOnExpression("('${database.ts_latest.type}'=='sql' || '${database.ts_latest.type}'=='timescale') && '${cache.ts_latest.enabled:false}'=='true' && '${cache.type:caffeine}'=='redis' ") +public @interface SqlTsLatestAnyDaoCachedRedis { +} diff --git a/common/data/src/main/java/org/thingsboard/server/common/data/CacheConstants.java b/common/data/src/main/java/org/thingsboard/server/common/data/CacheConstants.java index 9fda1c6bb5..50e02fca0a 100644 --- a/common/data/src/main/java/org/thingsboard/server/common/data/CacheConstants.java +++ b/common/data/src/main/java/org/thingsboard/server/common/data/CacheConstants.java @@ -34,6 +34,7 @@ public class CacheConstants { public static final String ASSET_PROFILE_CACHE = "assetProfiles"; public static final String ATTRIBUTES_CACHE = "attributes"; + public static final String TS_LATEST_CACHE = "tsLatest"; public static final String USERS_SESSION_INVALIDATION_CACHE = "userSessionsInvalidation"; public static final String OTA_PACKAGE_CACHE = "otaPackages"; public static final String OTA_PACKAGE_DATA_CACHE = "otaPackagesData"; diff --git a/dao/src/main/java/org/thingsboard/server/dao/sqlts/CachedRedisSqlTimeseriesLatestDao.java b/dao/src/main/java/org/thingsboard/server/dao/sqlts/CachedRedisSqlTimeseriesLatestDao.java new file mode 100644 index 0000000000..6b32808f7d --- /dev/null +++ b/dao/src/main/java/org/thingsboard/server/dao/sqlts/CachedRedisSqlTimeseriesLatestDao.java @@ -0,0 +1,104 @@ +/** + * Copyright ยฉ 2016-2024 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. + */ +package org.thingsboard.server.dao.sqlts; + +import com.google.common.util.concurrent.ListenableFuture; +import jakarta.annotation.PostConstruct; +import lombok.RequiredArgsConstructor; +import lombok.extern.slf4j.Slf4j; +import org.springframework.context.annotation.Primary; +import org.springframework.stereotype.Component; +import org.thingsboard.server.cache.TbTransactionalCache; +import org.thingsboard.server.common.data.id.DeviceProfileId; +import org.thingsboard.server.common.data.id.EntityId; +import org.thingsboard.server.common.data.id.TenantId; +import org.thingsboard.server.common.data.kv.DeleteTsKvQuery; +import org.thingsboard.server.common.data.kv.TsKvEntry; +import org.thingsboard.server.common.data.kv.TsKvLatestRemovingResult; +import org.thingsboard.server.common.stats.DefaultCounter; +import org.thingsboard.server.common.stats.StatsFactory; +import org.thingsboard.server.dao.cache.CacheExecutorService; +import org.thingsboard.server.dao.timeseries.TimeseriesLatestDao; +import org.thingsboard.server.dao.timeseries.TsLatestCacheKey; +import org.thingsboard.server.dao.util.SqlTsLatestAnyDaoCachedRedis; + +import java.util.List; +import java.util.Optional; + +@Slf4j +@Component +@SqlTsLatestAnyDaoCachedRedis +@RequiredArgsConstructor +@Primary +public class CachedRedisSqlTimeseriesLatestDao extends BaseAbstractSqlTimeseriesDao implements TimeseriesLatestDao { + public static final String STATS_NAME = "ts_latest.cache"; + + DefaultCounter hitCounter; + DefaultCounter missCounter; + + final CacheExecutorService cacheExecutorService; + final SqlTimeseriesLatestDao sqlDao; + final StatsFactory statsFactory; + final TbTransactionalCache cache; + + @PostConstruct + public void init() { + log.info("Init Redis cache-aside SQL Timeseries Latest DAO"); + this.hitCounter = statsFactory.createDefaultCounter(STATS_NAME, "result", "hit"); + this.missCounter = statsFactory.createDefaultCounter(STATS_NAME, "result", "miss"); + } + + @Override + public ListenableFuture saveLatest(TenantId tenantId, EntityId entityId, TsKvEntry tsKvEntry) { + return sqlDao.saveLatest(tenantId, entityId, tsKvEntry); + } + + @Override + public ListenableFuture removeLatest(TenantId tenantId, EntityId entityId, DeleteTsKvQuery query) { + return sqlDao.removeLatest(tenantId, entityId, query); + } + + @Override + public ListenableFuture> findLatestOpt(TenantId tenantId, EntityId entityId, String key) { + return sqlDao.findLatestOpt(tenantId, entityId, key); + } + + @Override + public ListenableFuture findLatest(TenantId tenantId, EntityId entityId, String key) { + return sqlDao.findLatest(tenantId, entityId, key); + } + + @Override + public TsKvEntry findLatestSync(TenantId tenantId, EntityId entityId, String key) { + return sqlDao.findLatestSync(tenantId, entityId, key); + } + + @Override + public ListenableFuture> findAllLatest(TenantId tenantId, EntityId entityId) { + return sqlDao.findAllLatest(tenantId, entityId); + } + + @Override + public List findAllKeysByDeviceProfileId(TenantId tenantId, DeviceProfileId deviceProfileId) { + return sqlDao.findAllKeysByDeviceProfileId(tenantId, deviceProfileId); + } + + @Override + public List findAllKeysByEntityIds(TenantId tenantId, List entityIds) { + return sqlDao.findAllKeysByEntityIds(tenantId, entityIds); + } + +} diff --git a/dao/src/main/java/org/thingsboard/server/dao/timeseries/TsLatestCacheKey.java b/dao/src/main/java/org/thingsboard/server/dao/timeseries/TsLatestCacheKey.java new file mode 100644 index 0000000000..adb572922a --- /dev/null +++ b/dao/src/main/java/org/thingsboard/server/dao/timeseries/TsLatestCacheKey.java @@ -0,0 +1,40 @@ +/** + * Copyright ยฉ 2016-2024 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. + */ +package org.thingsboard.server.dao.timeseries; + +import lombok.AllArgsConstructor; +import lombok.EqualsAndHashCode; +import lombok.Getter; +import org.thingsboard.server.common.data.AttributeScope; +import org.thingsboard.server.common.data.id.EntityId; + +import java.io.Serial; +import java.io.Serializable; + +@EqualsAndHashCode +@Getter +@AllArgsConstructor +public class TsLatestCacheKey implements Serializable { + private static final long serialVersionUID = 2024369077925351881L; + + private final EntityId entityId; + private final String key; + + @Override + public String toString() { + return "{" + entityId + "}" + key; + } +} diff --git a/dao/src/main/java/org/thingsboard/server/dao/timeseries/TsLatestRedisCache.java b/dao/src/main/java/org/thingsboard/server/dao/timeseries/TsLatestRedisCache.java new file mode 100644 index 0000000000..d67e9272e3 --- /dev/null +++ b/dao/src/main/java/org/thingsboard/server/dao/timeseries/TsLatestRedisCache.java @@ -0,0 +1,35 @@ +/** + * Copyright ยฉ 2016-2024 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. + */ +package org.thingsboard.server.dao.timeseries; + +import org.springframework.boot.autoconfigure.condition.ConditionalOnProperty; +import org.springframework.data.redis.connection.RedisConnectionFactory; +import org.springframework.stereotype.Service; +import org.thingsboard.server.cache.CacheSpecsMap; +import org.thingsboard.server.cache.RedisTbTransactionalCache; +import org.thingsboard.server.cache.TBRedisCacheConfiguration; +import org.thingsboard.server.cache.TbJavaRedisSerializer; +import org.thingsboard.server.common.data.CacheConstants; +import org.thingsboard.server.common.data.kv.TsKvEntry; + +@ConditionalOnProperty(prefix = "cache", value = "type", havingValue = "redis") +@Service("TsLatestCache") +public class TsLatestRedisCache extends RedisTbTransactionalCache { + + public TsLatestRedisCache(TBRedisCacheConfiguration configuration, CacheSpecsMap cacheSpecsMap, RedisConnectionFactory connectionFactory) { + super(CacheConstants.TS_LATEST_CACHE, cacheSpecsMap, connectionFactory, configuration, new TbJavaRedisSerializer<>()); } + +} diff --git a/dao/src/test/resources/application-test.properties b/dao/src/test/resources/application-test.properties index 73c1495af8..c34d0ad592 100644 --- a/dao/src/test/resources/application-test.properties +++ b/dao/src/test/resources/application-test.properties @@ -10,6 +10,7 @@ audit-log.sink.type=none #cache.type=caffeine # will be injected redis by RedisContainer or will be default (caffeine) cache.maximumPoolSize=16 cache.attributes.enabled=true +cache.ts_latest.enabled=true cache.specs.relations.timeToLiveInMinutes=1440 cache.specs.relations.maxSize=100000 @@ -53,6 +54,9 @@ cache.specs.assetProfiles.maxSize=100000 cache.specs.attributes.timeToLiveInMinutes=1440 cache.specs.attributes.maxSize=100000 +cache.specs.tsLatest.timeToLiveInMinutes=1440 +cache.specs.tsLatest.maxSize=100000 + cache.specs.tokensOutdatageTime.timeToLiveInMinutes=1440 cache.specs.tokensOutdatageTime.maxSize=100000 diff --git a/dao/src/test/resources/logback.xml b/dao/src/test/resources/logback.xml index 5e293b2982..8d4951658e 100644 --- a/dao/src/test/resources/logback.xml +++ b/dao/src/test/resources/logback.xml @@ -9,6 +9,7 @@ + From 44096a7cb7059c1f3d847d5af736dbe4c4c4a7d5 Mon Sep 17 00:00:00 2001 From: Sergey Matvienko Date: Mon, 8 Apr 2024 14:57:20 +0200 Subject: [PATCH 006/442] TS latest dao put to Redis WIP --- .../cache/RedisTbTransactionalCache.java | 6 ++++- .../CachedRedisSqlTimeseriesLatestDao.java | 22 ++++++++++++++++++- .../dao/timeseries/TsLatestRedisCache.java | 19 ++++++++++++++-- .../{logback.xml => logback-test.xml} | 2 ++ 4 files changed, 45 insertions(+), 4 deletions(-) rename dao/src/test/resources/{logback.xml => logback-test.xml} (87%) diff --git a/common/cache/src/main/java/org/thingsboard/server/cache/RedisTbTransactionalCache.java b/common/cache/src/main/java/org/thingsboard/server/cache/RedisTbTransactionalCache.java index cd5db13995..bb5af26c3e 100644 --- a/common/cache/src/main/java/org/thingsboard/server/cache/RedisTbTransactionalCache.java +++ b/common/cache/src/main/java/org/thingsboard/server/cache/RedisTbTransactionalCache.java @@ -214,8 +214,12 @@ public abstract class RedisTbTransactionalCache saveLatest(TenantId tenantId, EntityId entityId, TsKvEntry tsKvEntry) { - return sqlDao.saveLatest(tenantId, entityId, tsKvEntry); + ListenableFuture future = sqlDao.saveLatest(tenantId, entityId, tsKvEntry); + future = Futures.transform(future, x -> { + cache.put(new TsLatestCacheKey(entityId, tsKvEntry.getKey()), tsKvEntry); + return x; + }, + cacheExecutorService); + Futures.addCallback(future, new FutureCallback() { + @Override + public void onSuccess(Void result) { + log.trace("saveLatest onSuccess [{}][{}][{}]", entityId, tsKvEntry.getKey(), tsKvEntry); + } + + @Override + public void onFailure(Throwable t) { + log.trace("saveLatest onFailure [{}][{}][{}]", entityId, tsKvEntry.getKey(), tsKvEntry, t); + } + }, MoreExecutors.directExecutor()); + return future; } @Override diff --git a/dao/src/main/java/org/thingsboard/server/dao/timeseries/TsLatestRedisCache.java b/dao/src/main/java/org/thingsboard/server/dao/timeseries/TsLatestRedisCache.java index d67e9272e3..c0bca607c9 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/timeseries/TsLatestRedisCache.java +++ b/dao/src/main/java/org/thingsboard/server/dao/timeseries/TsLatestRedisCache.java @@ -15,8 +15,10 @@ */ package org.thingsboard.server.dao.timeseries; +import lombok.extern.slf4j.Slf4j; import org.springframework.boot.autoconfigure.condition.ConditionalOnProperty; import org.springframework.data.redis.connection.RedisConnectionFactory; +import org.springframework.data.redis.connection.RedisStringCommands; import org.springframework.stereotype.Service; import org.thingsboard.server.cache.CacheSpecsMap; import org.thingsboard.server.cache.RedisTbTransactionalCache; @@ -25,11 +27,24 @@ import org.thingsboard.server.cache.TbJavaRedisSerializer; import org.thingsboard.server.common.data.CacheConstants; import org.thingsboard.server.common.data.kv.TsKvEntry; +import java.io.Serializable; + @ConditionalOnProperty(prefix = "cache", value = "type", havingValue = "redis") @Service("TsLatestCache") -public class TsLatestRedisCache extends RedisTbTransactionalCache { +@Slf4j +public class TsLatestRedisCache extends RedisTbTransactionalCache { public TsLatestRedisCache(TBRedisCacheConfiguration configuration, CacheSpecsMap cacheSpecsMap, RedisConnectionFactory connectionFactory) { - super(CacheConstants.TS_LATEST_CACHE, cacheSpecsMap, connectionFactory, configuration, new TbJavaRedisSerializer<>()); } + super(CacheConstants.TS_LATEST_CACHE, cacheSpecsMap, connectionFactory, configuration, new TbJavaRedisSerializer<>()); + } + + @Override + public void put(TsLatestCacheKey key, TsKvEntry value) { + log.trace("put [{}][{}]", key, value); + final byte[] rawKey = getRawKey(key); + try (var connection = getConnection(rawKey)) { + put(connection, rawKey, value, RedisStringCommands.SetOption.UPSERT); + } + } } diff --git a/dao/src/test/resources/logback.xml b/dao/src/test/resources/logback-test.xml similarity index 87% rename from dao/src/test/resources/logback.xml rename to dao/src/test/resources/logback-test.xml index 8d4951658e..d7cff4b67b 100644 --- a/dao/src/test/resources/logback.xml +++ b/dao/src/test/resources/logback-test.xml @@ -10,6 +10,8 @@ + + From 3003fccf3b12f4f390b6e7860acbe1b5fc43db3b Mon Sep 17 00:00:00 2001 From: Sergey Matvienko Date: Tue, 16 Apr 2024 16:43:20 +0200 Subject: [PATCH 007/442] BaseTimeseriesServiceTest refactored --- .../timeseries/BaseTimeseriesServiceTest.java | 31 +++---------------- 1 file changed, 4 insertions(+), 27 deletions(-) diff --git a/dao/src/test/java/org/thingsboard/server/dao/service/timeseries/BaseTimeseriesServiceTest.java b/dao/src/test/java/org/thingsboard/server/dao/service/timeseries/BaseTimeseriesServiceTest.java index 390cb9afac..58b28872be 100644 --- a/dao/src/test/java/org/thingsboard/server/dao/service/timeseries/BaseTimeseriesServiceTest.java +++ b/dao/src/test/java/org/thingsboard/server/dao/service/timeseries/BaseTimeseriesServiceTest.java @@ -17,6 +17,7 @@ package org.thingsboard.server.dao.service.timeseries; import com.datastax.oss.driver.api.core.uuid.Uuids; import lombok.extern.slf4j.Slf4j; +import org.assertj.core.data.Offset; import org.junit.After; import org.junit.Assert; import org.junit.Before; @@ -32,6 +33,7 @@ import org.thingsboard.server.common.data.kv.BaseDeleteTsKvQuery; import org.thingsboard.server.common.data.kv.BaseReadTsKvQuery; import org.thingsboard.server.common.data.kv.BasicTsKvEntry; import org.thingsboard.server.common.data.kv.BooleanDataEntry; +import org.thingsboard.server.common.data.kv.DataType; import org.thingsboard.server.common.data.kv.DoubleDataEntry; import org.thingsboard.server.common.data.kv.JsonDataEntry; import org.thingsboard.server.common.data.kv.KvEntry; @@ -50,15 +52,14 @@ import java.util.Arrays; import java.util.Collections; import java.util.Comparator; import java.util.List; +import java.util.Optional; import java.util.concurrent.ExecutionException; import java.util.concurrent.TimeUnit; import java.util.concurrent.TimeoutException; import static org.assertj.core.api.Assertions.assertThat; import static org.junit.Assert.assertEquals; -import static org.junit.Assert.assertFalse; import static org.junit.Assert.assertNotNull; -import static org.junit.Assert.assertTrue; /** * @author Andrew Shvayka @@ -89,6 +90,7 @@ public abstract class BaseTimeseriesServiceTest extends AbstractServiceTest { KvEntry booleanKvEntry = new BooleanDataEntry(BOOLEAN_KEY, Boolean.TRUE); protected TenantId tenantId; + DeviceId deviceId = new DeviceId(Uuids.timeBased()); @Before public void before() { @@ -106,8 +108,6 @@ public abstract class BaseTimeseriesServiceTest extends AbstractServiceTest { @Test public void testFindAllLatest() throws Exception { - DeviceId deviceId = new DeviceId(Uuids.timeBased()); - saveEntries(deviceId, TS - 2); saveEntries(deviceId, TS - 1); saveEntries(deviceId, TS); @@ -150,8 +150,6 @@ public abstract class BaseTimeseriesServiceTest extends AbstractServiceTest { @Test public void testFindLatest() throws Exception { - DeviceId deviceId = new DeviceId(Uuids.timeBased()); - saveEntries(deviceId, TS - 2); saveEntries(deviceId, TS - 1); saveEntries(deviceId, TS); @@ -163,8 +161,6 @@ public abstract class BaseTimeseriesServiceTest extends AbstractServiceTest { @Test public void testFindLatestWithoutLatestUpdate() throws Exception { - DeviceId deviceId = new DeviceId(Uuids.timeBased()); - saveEntries(deviceId, TS - 2); saveEntries(deviceId, TS - 1); saveEntriesWithoutLatest(deviceId, TS); @@ -176,8 +172,6 @@ public abstract class BaseTimeseriesServiceTest extends AbstractServiceTest { @Test public void testFindByQueryAscOrder() throws Exception { - DeviceId deviceId = new DeviceId(Uuids.timeBased()); - saveEntries(deviceId, TS - 3); saveEntries(deviceId, TS - 2); saveEntries(deviceId, TS - 1); @@ -202,7 +196,6 @@ public abstract class BaseTimeseriesServiceTest extends AbstractServiceTest { @Test public void testFindByQuery_whenPeriodEqualsOneMilisecondPeriod() throws Exception { - DeviceId deviceId = new DeviceId(Uuids.timeBased()); saveEntries(deviceId, TS - 1L); saveEntries(deviceId, TS); saveEntries(deviceId, TS + 1L); @@ -222,7 +215,6 @@ public abstract class BaseTimeseriesServiceTest extends AbstractServiceTest { @Test public void testFindByQuery_whenPeriodEqualsInterval() throws Exception { - DeviceId deviceId = new DeviceId(Uuids.timeBased()); saveEntries(deviceId, TS - 1L); for (long i = TS; i <= TS + 100L; i += 10L) { saveEntries(deviceId, i); @@ -244,7 +236,6 @@ public abstract class BaseTimeseriesServiceTest extends AbstractServiceTest { @Test public void testFindByQuery_whenPeriodHaveTwoIntervalWithEqualsLength() throws Exception { - DeviceId deviceId = new DeviceId(Uuids.timeBased()); saveEntries(deviceId, TS - 1L); for (long i = TS; i <= TS + 100000L; i += 10000L) { saveEntries(deviceId, i); @@ -268,7 +259,6 @@ public abstract class BaseTimeseriesServiceTest extends AbstractServiceTest { @Test public void testFindByQuery_whenPeriodHaveTwoInterval_whereSecondShorterThanFirst() throws Exception { - DeviceId deviceId = new DeviceId(Uuids.timeBased()); saveEntries(deviceId, TS - 1L); for (long i = TS; i <= TS + 80000L; i += 10000L) { saveEntries(deviceId, i); @@ -292,7 +282,6 @@ public abstract class BaseTimeseriesServiceTest extends AbstractServiceTest { @Test public void testFindByQuery_whenPeriodHaveTwoIntervalWithEqualsLength_whereNotAllEntriesInRange() throws Exception { - DeviceId deviceId = new DeviceId(Uuids.timeBased()); for (long i = TS - 1L; i <= TS + 100000L + 1L; i += 10000) { saveEntries(deviceId, i); } @@ -314,7 +303,6 @@ public abstract class BaseTimeseriesServiceTest extends AbstractServiceTest { @Test public void testFindByQuery_whenPeriodHaveTwoInterval_whereSecondShorterThanFirst_andNotAllEntriesInRange() throws Exception { - DeviceId deviceId = new DeviceId(Uuids.timeBased()); for (long i = TS - 1L; i <= TS + 100000L + 1L; i += 10000L) { saveEntries(deviceId, i); } @@ -336,8 +324,6 @@ public abstract class BaseTimeseriesServiceTest extends AbstractServiceTest { @Test public void testFindByQueryDescOrder() throws Exception { - DeviceId deviceId = new DeviceId(Uuids.timeBased()); - saveEntries(deviceId, TS - 3); saveEntries(deviceId, TS - 2); saveEntries(deviceId, TS - 1); @@ -362,7 +348,6 @@ public abstract class BaseTimeseriesServiceTest extends AbstractServiceTest { @Test public void testFindAllByQueries_verifyQueryId() throws Exception { - DeviceId deviceId = new DeviceId(Uuids.timeBased()); saveEntries(deviceId, TS); saveEntries(deviceId, TS - 2); saveEntries(deviceId, TS - 10); @@ -373,7 +358,6 @@ public abstract class BaseTimeseriesServiceTest extends AbstractServiceTest { @Test public void testFindAllByQueries_verifyQueryId_forEntityView() throws Exception { - DeviceId deviceId = new DeviceId(Uuids.timeBased()); saveEntries(deviceId, TS); saveEntries(deviceId, TS - 2); saveEntries(deviceId, TS - 12); @@ -392,8 +376,6 @@ public abstract class BaseTimeseriesServiceTest extends AbstractServiceTest { @Test public void testDeleteDeviceTsDataWithOverwritingLatest() throws Exception { - DeviceId deviceId = new DeviceId(Uuids.timeBased()); - saveEntries(deviceId, 10000); saveEntries(deviceId, 20000); saveEntries(deviceId, 30000); @@ -412,7 +394,6 @@ public abstract class BaseTimeseriesServiceTest extends AbstractServiceTest { @Test public void testFindDeviceTsData() throws Exception { - DeviceId deviceId = new DeviceId(Uuids.timeBased()); List entries = new ArrayList<>(); entries.add(save(deviceId, 5000, 100)); @@ -563,7 +544,6 @@ public abstract class BaseTimeseriesServiceTest extends AbstractServiceTest { @Test public void testFindDeviceLongAndDoubleTsData() throws Exception { - DeviceId deviceId = new DeviceId(Uuids.timeBased()); List entries = new ArrayList<>(); entries.add(save(deviceId, 5000, 100)); @@ -654,8 +634,6 @@ public abstract class BaseTimeseriesServiceTest extends AbstractServiceTest { @Test public void testSaveTs_RemoveTs_AndSaveTsAgain() throws Exception { - DeviceId deviceId = new DeviceId(Uuids.timeBased()); - save(deviceId, 2000000L, 95); save(deviceId, 4000000L, 100); save(deviceId, 6000000L, 105); @@ -686,7 +664,6 @@ public abstract class BaseTimeseriesServiceTest extends AbstractServiceTest { BasicTsKvEntry jsonEntry = new BasicTsKvEntry(TimeUnit.MINUTES.toMillis(5), new JsonDataEntry("test", "{\"test\":\"testValue\"}")); List timeseries = List.of(booleanEntry, stringEntry, longEntry, doubleEntry, jsonEntry); - DeviceId deviceId = new DeviceId(Uuids.timeBased()); for (TsKvEntry tsKvEntry : timeseries) { save(tenantId, deviceId, tsKvEntry); } From 771d15a6ddc71d1e95511c17c3b03ad006e750c3 Mon Sep 17 00:00:00 2001 From: Sergey Matvienko Date: Tue, 16 Apr 2024 16:43:47 +0200 Subject: [PATCH 008/442] BaseTimeseriesServiceTest: 3 findLatest related tests added --- .../timeseries/BaseTimeseriesServiceTest.java | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/dao/src/test/java/org/thingsboard/server/dao/service/timeseries/BaseTimeseriesServiceTest.java b/dao/src/test/java/org/thingsboard/server/dao/service/timeseries/BaseTimeseriesServiceTest.java index 58b28872be..83db90ad71 100644 --- a/dao/src/test/java/org/thingsboard/server/dao/service/timeseries/BaseTimeseriesServiceTest.java +++ b/dao/src/test/java/org/thingsboard/server/dao/service/timeseries/BaseTimeseriesServiceTest.java @@ -159,6 +159,36 @@ public abstract class BaseTimeseriesServiceTest extends AbstractServiceTest { Assert.assertEquals(toTsEntry(TS, stringKvEntry), entries.get(0)); } + @Test + public void testFindLatestOpt() throws Exception { + saveEntries(deviceId, TS - 2); + saveEntries(deviceId, TS - 1); + saveEntries(deviceId, TS); + + Optional entryOpt = tsService.findLatest(tenantId, deviceId, STRING_KEY).get(MAX_TIMEOUT, TimeUnit.SECONDS); + assertThat(entryOpt).isNotNull().isPresent(); + Assert.assertEquals(toTsEntry(TS, stringKvEntry), entryOpt.get()); + } + + @Test + public void testFindLatest_NotFound() throws Exception { + List entries = tsService.findLatest(tenantId, deviceId, Collections.singleton(STRING_KEY)).get(MAX_TIMEOUT, TimeUnit.SECONDS); + assertThat(entries).hasSize(1); + TsKvEntry tsKvEntry = entries.get(0); + assertThat(tsKvEntry).isNotNull(); + // null ts latest representation + assertThat(tsKvEntry.getKey()).isEqualTo(STRING_KEY); + assertThat(tsKvEntry.getDataType()).isEqualTo(DataType.STRING); + assertThat(tsKvEntry.getValue()).isNull(); + assertThat(tsKvEntry.getTs()).isCloseTo(System.currentTimeMillis(), Offset.offset(TimeUnit.MINUTES.toMillis(1))); + } + + @Test + public void testFindLatestOpt_NotFound() throws Exception { + Optional entryOpt = tsService.findLatest(tenantId, deviceId, STRING_KEY).get(MAX_TIMEOUT, TimeUnit.SECONDS); + assertThat(entryOpt).isNotNull().isNotPresent(); + } + @Test public void testFindLatestWithoutLatestUpdate() throws Exception { saveEntries(deviceId, TS - 2); From 034b480a6ca641f9b2670c146b0a78e8190c72be Mon Sep 17 00:00:00 2001 From: Sergey Matvienko Date: Tue, 16 Apr 2024 16:47:27 +0200 Subject: [PATCH 009/442] RedisTbTransactionalCache refactored to make doGet using the rawKey and the Redis connection precalculated slot based on hash --- .../thingsboard/server/cache/RedisTbTransactionalCache.java | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/common/cache/src/main/java/org/thingsboard/server/cache/RedisTbTransactionalCache.java b/common/cache/src/main/java/org/thingsboard/server/cache/RedisTbTransactionalCache.java index bb5af26c3e..35ef07f0ce 100644 --- a/common/cache/src/main/java/org/thingsboard/server/cache/RedisTbTransactionalCache.java +++ b/common/cache/src/main/java/org/thingsboard/server/cache/RedisTbTransactionalCache.java @@ -78,7 +78,7 @@ public abstract class RedisTbTransactionalCache get(K key) { try (var connection = connectionFactory.getConnection()) { byte[] rawKey = getRawKey(key); - byte[] rawValue = connection.stringCommands().get(rawKey); + byte[] rawValue = doGet(connection, rawKey); if (rawValue == null) { return null; } else if (Arrays.equals(rawValue, BINARY_NULL_VALUE)) { @@ -95,6 +95,10 @@ public abstract class RedisTbTransactionalCache Date: Tue, 16 Apr 2024 16:50:36 +0200 Subject: [PATCH 010/442] SqlTimeseriesLatestDao refactored to use a common doFindLatestSync for any find request --- .../server/dao/sqlts/SqlTimeseriesLatestDao.java | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/dao/src/main/java/org/thingsboard/server/dao/sqlts/SqlTimeseriesLatestDao.java b/dao/src/main/java/org/thingsboard/server/dao/sqlts/SqlTimeseriesLatestDao.java index a9fb85560a..0f773e83d9 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/sqlts/SqlTimeseriesLatestDao.java +++ b/dao/src/main/java/org/thingsboard/server/dao/sqlts/SqlTimeseriesLatestDao.java @@ -155,17 +155,18 @@ public class SqlTimeseriesLatestDao extends BaseAbstractSqlTimeseriesDao impleme @Override public ListenableFuture> findLatestOpt(TenantId tenantId, EntityId entityId, String key) { - return service.submit(() -> Optional.ofNullable(doFindLatest(entityId, key))); + return service.submit(() -> Optional.ofNullable(doFindLatestSync(entityId, key))); } @Override public ListenableFuture findLatest(TenantId tenantId, EntityId entityId, String key) { - return service.submit(() -> getLatestTsKvEntry(entityId, key)); + log.trace("findLatest [{}][{}][{}]", tenantId, entityId, key); + return service.submit(() -> wrapNullTsKvEntry(key, doFindLatestSync(entityId, key))); } @Override public TsKvEntry findLatestSync(TenantId tenantId, EntityId entityId, String key) { - return getLatestTsKvEntry(entityId, key); + return wrapNullTsKvEntry(key, doFindLatestSync(entityId, key)); } @Override @@ -209,7 +210,7 @@ public class SqlTimeseriesLatestDao extends BaseAbstractSqlTimeseriesDao impleme ReadTsKvQueryResult::getData, MoreExecutors.directExecutor()); } - protected TsKvEntry doFindLatest(EntityId entityId, String key) { + protected TsKvEntry doFindLatestSync(EntityId entityId, String key) { TsKvLatestCompositeKey compositeKey = new TsKvLatestCompositeKey( entityId.getId(), @@ -225,7 +226,7 @@ public class SqlTimeseriesLatestDao extends BaseAbstractSqlTimeseriesDao impleme } protected ListenableFuture getRemoveLatestFuture(TenantId tenantId, EntityId entityId, DeleteTsKvQuery query) { - ListenableFuture latestFuture = service.submit(() -> doFindLatest(entityId, query.getKey())); + ListenableFuture latestFuture = service.submit(() -> doFindLatestSync(entityId, query.getKey())); return Futures.transformAsync(latestFuture, latest -> { if (latest == null) { return Futures.immediateFuture(new TsKvLatestRemovingResult(query.getKey(), false)); @@ -266,10 +267,9 @@ public class SqlTimeseriesLatestDao extends BaseAbstractSqlTimeseriesDao impleme return tsLatestQueue.add(latestEntity); } - private TsKvEntry getLatestTsKvEntry(EntityId entityId, String key) { - TsKvEntry latest = doFindLatest(entityId, key); + protected TsKvEntry wrapNullTsKvEntry(final String key, final TsKvEntry latest) { if (latest == null) { - latest = new BasicTsKvEntry(System.currentTimeMillis(), new StringDataEntry(key, null)); + return new BasicTsKvEntry(System.currentTimeMillis(), new StringDataEntry(key, null)); } return latest; } From 551325b8c7afe8afa58ed2586f6d3e6258b0894e Mon Sep 17 00:00:00 2001 From: Sergey Matvienko Date: Tue, 16 Apr 2024 16:52:31 +0200 Subject: [PATCH 011/442] added CachedRedisSqlTimeseriesLatestDao and TsLatestRedisCache (prototype impl with string commands). Caffeine cache not implemented yet --- .../CachedRedisSqlTimeseriesLatestDao.java | 99 +++++++++++++++---- .../dao/timeseries/TsLatestRedisCache.java | 53 ++++++++++ 2 files changed, 134 insertions(+), 18 deletions(-) diff --git a/dao/src/main/java/org/thingsboard/server/dao/sqlts/CachedRedisSqlTimeseriesLatestDao.java b/dao/src/main/java/org/thingsboard/server/dao/sqlts/CachedRedisSqlTimeseriesLatestDao.java index b283832186..482b456e60 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/sqlts/CachedRedisSqlTimeseriesLatestDao.java +++ b/dao/src/main/java/org/thingsboard/server/dao/sqlts/CachedRedisSqlTimeseriesLatestDao.java @@ -24,6 +24,7 @@ import lombok.RequiredArgsConstructor; import lombok.extern.slf4j.Slf4j; import org.springframework.context.annotation.Primary; import org.springframework.stereotype.Component; +import org.thingsboard.server.cache.TbCacheValueWrapper; import org.thingsboard.server.cache.TbTransactionalCache; import org.thingsboard.server.common.data.id.DeviceProfileId; import org.thingsboard.server.common.data.id.EntityId; @@ -48,14 +49,12 @@ import java.util.Optional; @Primary public class CachedRedisSqlTimeseriesLatestDao extends BaseAbstractSqlTimeseriesDao implements TimeseriesLatestDao { public static final String STATS_NAME = "ts_latest.cache"; - - DefaultCounter hitCounter; - DefaultCounter missCounter; - final CacheExecutorService cacheExecutorService; final SqlTimeseriesLatestDao sqlDao; final StatsFactory statsFactory; final TbTransactionalCache cache; + DefaultCounter hitCounter; + DefaultCounter missCounter; @PostConstruct public void init() { @@ -72,37 +71,101 @@ public class CachedRedisSqlTimeseriesLatestDao extends BaseAbstractSqlTimeseries return x; }, cacheExecutorService); - Futures.addCallback(future, new FutureCallback() { - @Override - public void onSuccess(Void result) { - log.trace("saveLatest onSuccess [{}][{}][{}]", entityId, tsKvEntry.getKey(), tsKvEntry); - } - - @Override - public void onFailure(Throwable t) { - log.trace("saveLatest onFailure [{}][{}][{}]", entityId, tsKvEntry.getKey(), tsKvEntry, t); - } - }, MoreExecutors.directExecutor()); + if (log.isTraceEnabled()) { + Futures.addCallback(future, new FutureCallback<>() { + @Override + public void onSuccess(Void result) { + log.trace("saveLatest onSuccess [{}][{}][{}]", entityId, tsKvEntry.getKey(), tsKvEntry); + } + + @Override + public void onFailure(Throwable t) { + log.info("saveLatest onFailure [{}][{}][{}]", entityId, tsKvEntry.getKey(), tsKvEntry, t); + } + }, MoreExecutors.directExecutor()); + } return future; } @Override public ListenableFuture removeLatest(TenantId tenantId, EntityId entityId, DeleteTsKvQuery query) { - return sqlDao.removeLatest(tenantId, entityId, query); + ListenableFuture future = sqlDao.removeLatest(tenantId, entityId, query); + future = Futures.transform(future, x -> { + cache.evict(new TsLatestCacheKey(entityId, query.getKey())); + return x; + }, + cacheExecutorService); + if (log.isTraceEnabled()) { + Futures.addCallback(future, new FutureCallback<>() { + @Override + public void onSuccess(TsKvLatestRemovingResult result) { + log.trace("removeLatest onSuccess [{}][{}][{}]", entityId, query.getKey(), query); + } + + @Override + public void onFailure(Throwable t) { + log.info("removeLatest onFailure [{}][{}][{}]", entityId, query.getKey(), query, t); + } + }, MoreExecutors.directExecutor()); + } + return future; } @Override public ListenableFuture> findLatestOpt(TenantId tenantId, EntityId entityId, String key) { - return sqlDao.findLatestOpt(tenantId, entityId, key); + log.trace("findLatestOpt"); + return doFindLatest(tenantId, entityId, key); } @Override public ListenableFuture findLatest(TenantId tenantId, EntityId entityId, String key) { - return sqlDao.findLatest(tenantId, entityId, key); + return Futures.transform(doFindLatest(tenantId, entityId, key), x -> sqlDao.wrapNullTsKvEntry(key, x.orElse(null)), MoreExecutors.directExecutor()); + } + + public ListenableFuture> doFindLatest(TenantId tenantId, EntityId entityId, String key) { + final TsLatestCacheKey cacheKey = new TsLatestCacheKey(entityId, key); + ListenableFuture> cacheFuture = cacheExecutorService.submit(() -> cache.get(cacheKey)); + + return Futures.transformAsync(cacheFuture, (cacheValueWrap) -> { + if (cacheValueWrap != null) { + final TsKvEntry tsKvEntry = cacheValueWrap.get(); + log.debug("findLatest cache hit [{}][{}][{}]", entityId, key, tsKvEntry); + return Futures.immediateFuture(Optional.ofNullable(tsKvEntry)); + } + log.debug("findLatest cache miss [{}][{}]", entityId, key); + ListenableFuture> daoFuture = sqlDao.findLatestOpt(tenantId,entityId, key); + + return Futures.transformAsync(daoFuture, (daoValue) -> { + + if (daoValue.isEmpty()) { + //TODO implement the cache logic if no latest found in TS DAO. Currently we are always getting from DB to stay on the safe side + return Futures.immediateFuture(daoValue); + } + ListenableFuture> cachePutFuture = cacheExecutorService.submit(() -> { + cache.put(new TsLatestCacheKey(entityId, key), daoValue.get()); + return daoValue; + }); + + Futures.addCallback(cachePutFuture, new FutureCallback<>() { + @Override + public void onSuccess(Optional result) { + log.trace("saveLatest onSuccess [{}][{}][{}]", entityId, key, result); + } + + @Override + public void onFailure(Throwable t) { + log.info("saveLatest onFailure [{}][{}][{}]", entityId, key, daoValue, t); + } + + }, MoreExecutors.directExecutor()); + return cachePutFuture; + }, MoreExecutors.directExecutor()); + }, MoreExecutors.directExecutor()); } @Override public TsKvEntry findLatestSync(TenantId tenantId, EntityId entityId, String key) { + log.trace("findLatestSync DEPRECATED [{}][{}]", entityId, key); return sqlDao.findLatestSync(tenantId, entityId, key); } diff --git a/dao/src/main/java/org/thingsboard/server/dao/timeseries/TsLatestRedisCache.java b/dao/src/main/java/org/thingsboard/server/dao/timeseries/TsLatestRedisCache.java index c0bca607c9..61d2c8bdb2 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/timeseries/TsLatestRedisCache.java +++ b/dao/src/main/java/org/thingsboard/server/dao/timeseries/TsLatestRedisCache.java @@ -16,18 +16,24 @@ package org.thingsboard.server.dao.timeseries; import lombok.extern.slf4j.Slf4j; +import org.apache.commons.lang3.NotImplementedException; import org.springframework.boot.autoconfigure.condition.ConditionalOnProperty; +import org.springframework.data.redis.connection.RedisConnection; import org.springframework.data.redis.connection.RedisConnectionFactory; import org.springframework.data.redis.connection.RedisStringCommands; import org.springframework.stereotype.Service; import org.thingsboard.server.cache.CacheSpecsMap; import org.thingsboard.server.cache.RedisTbTransactionalCache; import org.thingsboard.server.cache.TBRedisCacheConfiguration; +import org.thingsboard.server.cache.TbCacheTransaction; +import org.thingsboard.server.cache.TbCacheValueWrapper; import org.thingsboard.server.cache.TbJavaRedisSerializer; import org.thingsboard.server.common.data.CacheConstants; import org.thingsboard.server.common.data.kv.TsKvEntry; import java.io.Serializable; +import java.util.Collection; +import java.util.List; @ConditionalOnProperty(prefix = "cache", value = "type", havingValue = "redis") @Service("TsLatestCache") @@ -47,4 +53,51 @@ public class TsLatestRedisCache } } + @Override + public void putIfAbsent(TsLatestCacheKey key, TsKvEntry value) { + log.trace("putIfAbsent [{}][{}]", key, value); + throw new NotImplementedException("putIfAbsent is not supported by TsLatestRedisCache"); + } + + @Override + public TbCacheValueWrapper get(TsLatestCacheKey key) { + log.debug("get [{}]", key); + return super.get(key); + } + + @Override + protected byte[] doGet(RedisConnection connection, byte[] rawKey) { + log.trace("doGet [{}][{}]", connection, rawKey); + return connection.stringCommands().get(rawKey); + } + + @Override + public void evict(TsLatestCacheKey key){ + log.trace("evict [{}]", key); + final byte[] rawKey = getRawKey(key); + try (var connection = getConnection(rawKey)) { + connection.keyCommands().del(rawKey); + } + } + + @Override + public void evict(Collection keys) { + throw new NotImplementedException("evict by many keys is not supported by TsLatestRedisCache"); + } + + @Override + public void evictOrPut(TsLatestCacheKey key, TsKvEntry value) { + throw new NotImplementedException("evictOrPut is not supported by TsLatestRedisCache"); + } + + @Override + public TbCacheTransaction newTransactionForKey(TsLatestCacheKey key) { + throw new NotImplementedException("newTransactionForKey is not supported by TsLatestRedisCache"); + } + + @Override + public TbCacheTransaction newTransactionForKeys(List keys) { + throw new NotImplementedException("newTransactionForKeys is not supported by TsLatestRedisCache"); + } + } From c49d97f7d19d69883a789b2ac2b687f6c34f322a Mon Sep 17 00:00:00 2001 From: Sergey Matvienko Date: Tue, 16 Apr 2024 17:35:04 +0200 Subject: [PATCH 012/442] BaseTimeseriesServiceTest added overwrite TS cases and historical data load case, that fails without condition on update only if ts is the latest --- .../timeseries/BaseTimeseriesServiceTest.java | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/dao/src/test/java/org/thingsboard/server/dao/service/timeseries/BaseTimeseriesServiceTest.java b/dao/src/test/java/org/thingsboard/server/dao/service/timeseries/BaseTimeseriesServiceTest.java index 83db90ad71..d32933684a 100644 --- a/dao/src/test/java/org/thingsboard/server/dao/service/timeseries/BaseTimeseriesServiceTest.java +++ b/dao/src/test/java/org/thingsboard/server/dao/service/timeseries/BaseTimeseriesServiceTest.java @@ -159,6 +159,40 @@ public abstract class BaseTimeseriesServiceTest extends AbstractServiceTest { Assert.assertEquals(toTsEntry(TS, stringKvEntry), entries.get(0)); } + @Test + public void testFindLatestOpt_givenSaveWithHistoricalNonOrderedTS() throws Exception { + save(tenantId, deviceId, toTsEntry(TS - 1, stringKvEntry)); + save(tenantId, deviceId, toTsEntry(TS, stringKvEntry)); + save(tenantId, deviceId, toTsEntry(TS - 10, stringKvEntry)); + save(tenantId, deviceId, toTsEntry(TS - 11, stringKvEntry)); + + Optional entryOpt = tsService.findLatest(tenantId, deviceId, STRING_KEY).get(MAX_TIMEOUT, TimeUnit.SECONDS); + assertThat(entryOpt).isNotNull().isPresent(); + Assert.assertEquals(toTsEntry(TS, stringKvEntry), entryOpt.orElse(null)); + } + + @Test + public void testFindLatestOpt_givenSaveWithSameTSOverwriteValue() throws Exception { + save(tenantId, deviceId, toTsEntry(TS, new StringDataEntry(STRING_KEY, "old"))); + save(tenantId, deviceId, toTsEntry(TS, new StringDataEntry(STRING_KEY, "new"))); + + Optional entryOpt = tsService.findLatest(tenantId, deviceId, STRING_KEY).get(MAX_TIMEOUT, TimeUnit.SECONDS); + assertThat(entryOpt).isNotNull().isPresent(); + Assert.assertEquals(toTsEntry(TS, new StringDataEntry(STRING_KEY, "new")), entryOpt.orElse(null)); + } + + public void testFindLatestOpt_givenSaveWithSameTSOverwriteTypeAndValue() throws Exception { + save(tenantId, deviceId, toTsEntry(TS, new JsonDataEntry("temp", "{\"hello\":\"world\"}"))); + save(tenantId, deviceId, toTsEntry(TS, new BooleanDataEntry("temp", true))); + save(tenantId, deviceId, toTsEntry(TS, new LongDataEntry("temp", 100L))); + save(tenantId, deviceId, toTsEntry(TS, new DoubleDataEntry("temp", Math.PI))); + save(tenantId, deviceId, toTsEntry(TS, new StringDataEntry("temp", "NOOP"))); + + Optional entryOpt = tsService.findLatest(tenantId, deviceId, STRING_KEY).get(MAX_TIMEOUT, TimeUnit.SECONDS); + assertThat(entryOpt).isNotNull().isPresent(); + Assert.assertEquals(toTsEntry(TS, new StringDataEntry("temp", "NOOP")), entryOpt.orElse(null)); + } + @Test public void testFindLatestOpt() throws Exception { saveEntries(deviceId, TS - 2); From a4469f69539ead14b1c926ce103cfdb704741823 Mon Sep 17 00:00:00 2001 From: Sergey Matvienko Date: Wed, 17 Apr 2024 12:14:42 +0200 Subject: [PATCH 013/442] TsLatestRedisCache: added LUA upsert script. load script, eval, evalsha, test for script sha, fetch latest by zRange Redis command --- .../cache/RedisTbTransactionalCache.java | 1 + .../dao/timeseries/TsLatestRedisCache.java | 75 +++++++++++++++---- .../timeseries/TsLatestRedisCacheTest.java | 30 ++++++++ 3 files changed, 91 insertions(+), 15 deletions(-) create mode 100644 dao/src/test/java/org/thingsboard/server/dao/timeseries/TsLatestRedisCacheTest.java diff --git a/common/cache/src/main/java/org/thingsboard/server/cache/RedisTbTransactionalCache.java b/common/cache/src/main/java/org/thingsboard/server/cache/RedisTbTransactionalCache.java index 35ef07f0ce..4277a7bab9 100644 --- a/common/cache/src/main/java/org/thingsboard/server/cache/RedisTbTransactionalCache.java +++ b/common/cache/src/main/java/org/thingsboard/server/cache/RedisTbTransactionalCache.java @@ -51,6 +51,7 @@ public abstract class RedisTbTransactionalCache keySerializer = StringRedisSerializer.UTF_8; private final TbRedisSerializer valueSerializer; diff --git a/dao/src/main/java/org/thingsboard/server/dao/timeseries/TsLatestRedisCache.java b/dao/src/main/java/org/thingsboard/server/dao/timeseries/TsLatestRedisCache.java index 61d2c8bdb2..e9f9ab522c 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/timeseries/TsLatestRedisCache.java +++ b/dao/src/main/java/org/thingsboard/server/dao/timeseries/TsLatestRedisCache.java @@ -15,12 +15,15 @@ */ package org.thingsboard.server.dao.timeseries; +import jakarta.annotation.PostConstruct; import lombok.extern.slf4j.Slf4j; import org.apache.commons.lang3.NotImplementedException; import org.springframework.boot.autoconfigure.condition.ConditionalOnProperty; +import org.springframework.dao.InvalidDataAccessApiUsageException; import org.springframework.data.redis.connection.RedisConnection; import org.springframework.data.redis.connection.RedisConnectionFactory; -import org.springframework.data.redis.connection.RedisStringCommands; +import org.springframework.data.redis.connection.ReturnType; +import org.springframework.data.redis.serializer.StringRedisSerializer; import org.springframework.stereotype.Service; import org.thingsboard.server.cache.CacheSpecsMap; import org.thingsboard.server.cache.RedisTbTransactionalCache; @@ -32,33 +35,42 @@ import org.thingsboard.server.common.data.CacheConstants; import org.thingsboard.server.common.data.kv.TsKvEntry; import java.io.Serializable; +import java.util.Arrays; import java.util.Collection; import java.util.List; +import java.util.Set; @ConditionalOnProperty(prefix = "cache", value = "type", havingValue = "redis") @Service("TsLatestCache") @Slf4j public class TsLatestRedisCache extends RedisTbTransactionalCache { + static final byte[] UPSERT_TS_LATEST_LUA_SCRIPT = StringRedisSerializer.UTF_8.serialize("" + + "redis.call('ZREMRANGEBYSCORE', KEYS[1], ARGV[1], ARGV[1]); " + + "redis.call('ZADD', KEYS[1], ARGV[1], ARGV[2]); " + + "local current_size = redis.call('ZCARD', KEYS[1]); " + + "if current_size > 1 then" + + " redis.call('ZREMRANGEBYRANK', KEYS[1], 0, -2) " + + "end;"); + static final byte[] UPSERT_TS_LATEST_SHA = StringRedisSerializer.UTF_8.serialize("24e226c3ea34e3e850113e8eb1f3cd2b88171988"); + public TsLatestRedisCache(TBRedisCacheConfiguration configuration, CacheSpecsMap cacheSpecsMap, RedisConnectionFactory connectionFactory) { super(CacheConstants.TS_LATEST_CACHE, cacheSpecsMap, connectionFactory, configuration, new TbJavaRedisSerializer<>()); } - @Override - public void put(TsLatestCacheKey key, TsKvEntry value) { - log.trace("put [{}][{}]", key, value); - final byte[] rawKey = getRawKey(key); - try (var connection = getConnection(rawKey)) { - put(connection, rawKey, value, RedisStringCommands.SetOption.UPSERT); + @PostConstruct + public void init() { + try (var connection = getConnection(UPSERT_TS_LATEST_SHA)) { + log.debug("Loading LUA with expected SHA[{}], connection [{}]", new String(UPSERT_TS_LATEST_SHA), connection.getNativeConnection()); + String sha = connection.scriptingCommands().scriptLoad(UPSERT_TS_LATEST_LUA_SCRIPT); + if (!Arrays.equals(UPSERT_TS_LATEST_SHA, StringRedisSerializer.UTF_8.serialize(sha))) { + log.error("SHA for UPSERT_TS_LATEST_LUA_SCRIPT wrong! Expected [{}], but actual [{}], connection [{}]", new String(UPSERT_TS_LATEST_SHA), sha, connection.getNativeConnection()); + } + } catch (Throwable t) { + log.error("Error on Redis TS Latest cache init", t); } } - @Override - public void putIfAbsent(TsLatestCacheKey key, TsKvEntry value) { - log.trace("putIfAbsent [{}][{}]", key, value); - throw new NotImplementedException("putIfAbsent is not supported by TsLatestRedisCache"); - } - @Override public TbCacheValueWrapper get(TsLatestCacheKey key) { log.debug("get [{}]", key); @@ -68,11 +80,38 @@ public class TsLatestRedisCache @Override protected byte[] doGet(RedisConnection connection, byte[] rawKey) { log.trace("doGet [{}][{}]", connection, rawKey); - return connection.stringCommands().get(rawKey); + Set values = connection.commands().zRange(rawKey, -1, -1); + return values == null ? null : values.stream().findFirst().orElse(null); } @Override - public void evict(TsLatestCacheKey key){ + public void put(TsLatestCacheKey key, TsKvEntry value) { + log.trace("put [{}][{}]", key, value); + final byte[] rawKey = getRawKey(key); + try (var connection = getConnection(rawKey)) { + byte[] rawValue = getRawValue(value); + byte[] ts = StringRedisSerializer.UTF_8.serialize(String.valueOf(value.toTsValue().getTs())); + try { + connection.scriptingCommands().evalSha(UPSERT_TS_LATEST_SHA, ReturnType.VALUE, 1, rawKey, ts, rawValue); + } catch (InvalidDataAccessApiUsageException e) { + log.debug("loading LUA [{}]", connection.getNativeConnection()); + String sha = connection.scriptingCommands().scriptLoad(UPSERT_TS_LATEST_LUA_SCRIPT); + if (!Arrays.equals(UPSERT_TS_LATEST_SHA, StringRedisSerializer.UTF_8.serialize(sha))) { + log.error("SHA for UPSERT_TS_LATEST_LUA_SCRIPT wrong! Expected [{}], but actual [{}]", new String(UPSERT_TS_LATEST_SHA), sha); + } + try { + connection.scriptingCommands().evalSha(UPSERT_TS_LATEST_SHA, ReturnType.VALUE, 1, rawKey, ts, rawValue); + } catch (InvalidDataAccessApiUsageException ignored) { + log.debug("Slowly executing eval instead of fast evalsha"); + connection.scriptingCommands().eval(UPSERT_TS_LATEST_LUA_SCRIPT, ReturnType.VALUE, 1, rawKey, ts, rawValue); + } + + } + } + } + + @Override + public void evict(TsLatestCacheKey key) { log.trace("evict [{}]", key); final byte[] rawKey = getRawKey(key); try (var connection = getConnection(rawKey)) { @@ -80,6 +119,12 @@ public class TsLatestRedisCache } } + @Override + public void putIfAbsent(TsLatestCacheKey key, TsKvEntry value) { + log.trace("putIfAbsent [{}][{}]", key, value); + throw new NotImplementedException("putIfAbsent is not supported by TsLatestRedisCache"); + } + @Override public void evict(Collection keys) { throw new NotImplementedException("evict by many keys is not supported by TsLatestRedisCache"); diff --git a/dao/src/test/java/org/thingsboard/server/dao/timeseries/TsLatestRedisCacheTest.java b/dao/src/test/java/org/thingsboard/server/dao/timeseries/TsLatestRedisCacheTest.java new file mode 100644 index 0000000000..5de26c15d3 --- /dev/null +++ b/dao/src/test/java/org/thingsboard/server/dao/timeseries/TsLatestRedisCacheTest.java @@ -0,0 +1,30 @@ +package org.thingsboard.server.dao.timeseries; + +import lombok.SneakyThrows; +import org.junit.jupiter.api.Test; + +import java.security.MessageDigest; + +import static org.assertj.core.api.Assertions.assertThat; + +class TsLatestRedisCacheTest { + + @Test + void testUpsertTsLatestLUAScriptHash() { + assertThat(getSHA1(TsLatestRedisCache.UPSERT_TS_LATEST_LUA_SCRIPT)).isEqualTo(new String(TsLatestRedisCache.UPSERT_TS_LATEST_SHA)); + } + + @SneakyThrows + String getSHA1(byte[] script) { + MessageDigest md = MessageDigest.getInstance("SHA-1"); + byte[] hash = md.digest(script); + + StringBuilder sb = new StringBuilder(); + for (byte b : hash) { + sb.append(String.format("%02x", b)); + } + + return sb.toString(); + } + +} \ No newline at end of file From 67c2392cccea99861bb1f869d4dce55f58a81f3a Mon Sep 17 00:00:00 2001 From: Sergey Matvienko Date: Wed, 17 Apr 2024 12:15:22 +0200 Subject: [PATCH 014/442] RedisClusterSqlTestSuite introduced --- .../dao/AbstractRedisClusterContainer.java | 92 +++++++++++++++++++ .../server/dao/RedisClusterSqlTestSuite.java | 31 +++++++ 2 files changed, 123 insertions(+) create mode 100644 dao/src/test/java/org/thingsboard/server/dao/AbstractRedisClusterContainer.java create mode 100644 dao/src/test/java/org/thingsboard/server/dao/RedisClusterSqlTestSuite.java diff --git a/dao/src/test/java/org/thingsboard/server/dao/AbstractRedisClusterContainer.java b/dao/src/test/java/org/thingsboard/server/dao/AbstractRedisClusterContainer.java new file mode 100644 index 0000000000..cfa4c00ddf --- /dev/null +++ b/dao/src/test/java/org/thingsboard/server/dao/AbstractRedisClusterContainer.java @@ -0,0 +1,92 @@ +/** + * Copyright ยฉ 2016-2024 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. + */ +package org.thingsboard.server.dao; + +import lombok.extern.slf4j.Slf4j; +import org.junit.ClassRule; +import org.junit.rules.ExternalResource; +import org.testcontainers.containers.GenericContainer; +import org.testcontainers.containers.Network; +import org.testcontainers.containers.output.OutputFrame; +import redis.clients.jedis.Jedis; + +import java.util.List; +import java.util.concurrent.TimeUnit; + +@Slf4j +public class AbstractRedisClusterContainer { + + static final String nodes = "127.0.0.1:6371,127.0.0.1:6372,127.0.0.1:6373,127.0.0.1:6374,127.0.0.1:6375,127.0.0.1:6376"; + + @ClassRule(order = 0) + public static Network network = Network.newNetwork(); + @ClassRule(order = 1) + public static GenericContainer redis1 = new GenericContainer("bitnami/redis-cluster:latest").withEnv("REDIS_PORT_NUMBER","6371").withNetworkMode("host").withLogConsumer(x->log.warn("{}", ((OutputFrame)x).getUtf8StringWithoutLineEnding())).withEnv("ALLOW_EMPTY_PASSWORD","yes").withEnv("REDIS_NODES",nodes); + @ClassRule(order = 2) + public static GenericContainer redis2 = new GenericContainer("bitnami/redis-cluster:latest").withEnv("REDIS_PORT_NUMBER","6372").withNetworkMode("host").withLogConsumer(x->log.warn("{}", ((OutputFrame)x).getUtf8StringWithoutLineEnding())).withEnv("ALLOW_EMPTY_PASSWORD","yes").withEnv("REDIS_NODES",nodes); + @ClassRule(order = 3) + public static GenericContainer redis3 = new GenericContainer("bitnami/redis-cluster:latest").withEnv("REDIS_PORT_NUMBER","6373").withNetworkMode("host").withLogConsumer(x->log.warn("{}", ((OutputFrame)x).getUtf8StringWithoutLineEnding())).withEnv("ALLOW_EMPTY_PASSWORD","yes").withEnv("REDIS_NODES",nodes); + @ClassRule(order = 4) + public static GenericContainer redis4 = new GenericContainer("bitnami/redis-cluster:latest").withEnv("REDIS_PORT_NUMBER","6374").withNetworkMode("host").withLogConsumer(x->log.warn("{}", ((OutputFrame)x).getUtf8StringWithoutLineEnding())).withEnv("ALLOW_EMPTY_PASSWORD","yes").withEnv("REDIS_NODES",nodes); + @ClassRule(order = 5) + public static GenericContainer redis5 = new GenericContainer("bitnami/redis-cluster:latest").withEnv("REDIS_PORT_NUMBER","6375").withNetworkMode("host").withLogConsumer(x->log.warn("{}", ((OutputFrame)x).getUtf8StringWithoutLineEnding())).withEnv("ALLOW_EMPTY_PASSWORD","yes").withEnv("REDIS_NODES",nodes); + @ClassRule(order = 6) + public static GenericContainer redis6 = new GenericContainer("bitnami/redis-cluster:latest").withEnv("REDIS_PORT_NUMBER","6376").withNetworkMode("host").withLogConsumer(x->log.warn("{}", ((OutputFrame)x).getUtf8StringWithoutLineEnding())).withEnv("ALLOW_EMPTY_PASSWORD","yes").withEnv("REDIS_NODES",nodes); + + + @ClassRule(order = 100) + public static ExternalResource resource = new ExternalResource() { + @Override + protected void before() throws Throwable { + redis1.start(); + redis2.start(); + redis3.start(); + redis4.start(); + redis5.start(); + redis6.start(); + + String clusterCreateCommand = "echo yes | redis-cli --cluster create " + + "127.0.0.1:6371 127.0.0.1:6372 127.0.0.1:6373 127.0.0.1:6374 127.0.0.1:6375 127.0.0.1:6376 " + + "--cluster-replicas 1"; + + log.warn("Command to init Redis Cluster: {}", clusterCreateCommand); + log.warn("Connect to nodes : {}", nodes); + Thread.sleep(TimeUnit.SECONDS.toMillis(5)); + var result = redis6.execInContainer("/bin/sh", "-c", clusterCreateCommand); + log.warn("Init cluster result: {}", result); + + System.setProperty("cache.type", "redis"); + System.setProperty("redis.connection.type", "cluster"); + System.setProperty("redis.cluster.nodes", nodes); + System.setProperty("redis.password", ""); + + System.setProperty("redis.cluster.useDefaultPoolConfig", "false"); + } + + @Override + protected void after() { + redis1.stop(); + redis2.stop(); + redis3.stop(); + redis4.stop(); + redis5.stop(); + redis6.stop(); + List.of("cache.type", "redis.connection.type", "redis.standalone.host", "redis.standalone.port") + .forEach(System.getProperties()::remove); + } + }; + +} diff --git a/dao/src/test/java/org/thingsboard/server/dao/RedisClusterSqlTestSuite.java b/dao/src/test/java/org/thingsboard/server/dao/RedisClusterSqlTestSuite.java new file mode 100644 index 0000000000..be0bcc6fc7 --- /dev/null +++ b/dao/src/test/java/org/thingsboard/server/dao/RedisClusterSqlTestSuite.java @@ -0,0 +1,31 @@ +/** + * Copyright ยฉ 2016-2024 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. + */ +package org.thingsboard.server.dao; + +import org.junit.extensions.cpsuite.ClasspathSuite; +import org.junit.extensions.cpsuite.ClasspathSuite.ClassnameFilters; +import org.junit.runner.RunWith; + +@RunWith(ClasspathSuite.class) +@ClassnameFilters( + //All the same tests using redis instead of caffeine. + { + "org.thingsboard.server.dao.service.*ServiceSqlTest", + } +) +public class RedisClusterSqlTestSuite extends AbstractRedisClusterContainer { + +} From 743b8b1d801d751fd9fc55e31f5014853a670c5a Mon Sep 17 00:00:00 2001 From: Sergey Matvienko Date: Wed, 17 Apr 2024 12:16:31 +0200 Subject: [PATCH 015/442] logback-test temporary added TRACE for SqlTimeseriesLatestDao and CachedRedisSqlTimeseriesLatestDao --- dao/src/test/resources/logback-test.xml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/dao/src/test/resources/logback-test.xml b/dao/src/test/resources/logback-test.xml index d7cff4b67b..87aa67a67e 100644 --- a/dao/src/test/resources/logback-test.xml +++ b/dao/src/test/resources/logback-test.xml @@ -10,6 +10,8 @@ + + From 168525d3b9e00636e979b36b75538ffb5ea41853 Mon Sep 17 00:00:00 2001 From: Sergey Matvienko Date: Wed, 17 Apr 2024 12:24:16 +0200 Subject: [PATCH 016/442] mvn license:format --- .../dao/timeseries/TsLatestRedisCacheTest.java | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/dao/src/test/java/org/thingsboard/server/dao/timeseries/TsLatestRedisCacheTest.java b/dao/src/test/java/org/thingsboard/server/dao/timeseries/TsLatestRedisCacheTest.java index 5de26c15d3..c463b4630f 100644 --- a/dao/src/test/java/org/thingsboard/server/dao/timeseries/TsLatestRedisCacheTest.java +++ b/dao/src/test/java/org/thingsboard/server/dao/timeseries/TsLatestRedisCacheTest.java @@ -1,3 +1,18 @@ +/** + * Copyright ยฉ 2016-2024 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. + */ package org.thingsboard.server.dao.timeseries; import lombok.SneakyThrows; From 92793360f304687cd48f8dbf5a95834efcda53a1 Mon Sep 17 00:00:00 2001 From: Sergey Matvienko Date: Wed, 17 Apr 2024 12:39:54 +0200 Subject: [PATCH 017/442] CachedRedisSqlTimeseriesLatestDao.java removed deprecated findLatestSync --- .../server/dao/sqlts/CachedRedisSqlTimeseriesLatestDao.java | 6 ------ 1 file changed, 6 deletions(-) diff --git a/dao/src/main/java/org/thingsboard/server/dao/sqlts/CachedRedisSqlTimeseriesLatestDao.java b/dao/src/main/java/org/thingsboard/server/dao/sqlts/CachedRedisSqlTimeseriesLatestDao.java index 482b456e60..32d0ee91c9 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/sqlts/CachedRedisSqlTimeseriesLatestDao.java +++ b/dao/src/main/java/org/thingsboard/server/dao/sqlts/CachedRedisSqlTimeseriesLatestDao.java @@ -163,12 +163,6 @@ public class CachedRedisSqlTimeseriesLatestDao extends BaseAbstractSqlTimeseries }, MoreExecutors.directExecutor()); } - @Override - public TsKvEntry findLatestSync(TenantId tenantId, EntityId entityId, String key) { - log.trace("findLatestSync DEPRECATED [{}][{}]", entityId, key); - return sqlDao.findLatestSync(tenantId, entityId, key); - } - @Override public ListenableFuture> findAllLatest(TenantId tenantId, EntityId entityId) { return sqlDao.findAllLatest(tenantId, entityId); From 20ec210c320648a190d39ad40a78c08a6d4ce172 Mon Sep 17 00:00:00 2001 From: Sergey Matvienko Date: Wed, 17 Apr 2024 12:43:14 +0200 Subject: [PATCH 018/442] AbstractRedisClusterContainer refactored --- .../server/dao/AbstractRedisClusterContainer.java | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/dao/src/test/java/org/thingsboard/server/dao/AbstractRedisClusterContainer.java b/dao/src/test/java/org/thingsboard/server/dao/AbstractRedisClusterContainer.java index cfa4c00ddf..a95f4b8c17 100644 --- a/dao/src/test/java/org/thingsboard/server/dao/AbstractRedisClusterContainer.java +++ b/dao/src/test/java/org/thingsboard/server/dao/AbstractRedisClusterContainer.java @@ -58,21 +58,19 @@ public class AbstractRedisClusterContainer { redis5.start(); redis6.start(); + Thread.sleep(TimeUnit.SECONDS.toMillis(5)); // otherwise not all containers have time to start + String clusterCreateCommand = "echo yes | redis-cli --cluster create " + "127.0.0.1:6371 127.0.0.1:6372 127.0.0.1:6373 127.0.0.1:6374 127.0.0.1:6375 127.0.0.1:6376 " + "--cluster-replicas 1"; - log.warn("Command to init Redis Cluster: {}", clusterCreateCommand); - log.warn("Connect to nodes : {}", nodes); - Thread.sleep(TimeUnit.SECONDS.toMillis(5)); var result = redis6.execInContainer("/bin/sh", "-c", clusterCreateCommand); log.warn("Init cluster result: {}", result); + log.warn("Connect to nodes: {}", nodes); System.setProperty("cache.type", "redis"); System.setProperty("redis.connection.type", "cluster"); System.setProperty("redis.cluster.nodes", nodes); - System.setProperty("redis.password", ""); - System.setProperty("redis.cluster.useDefaultPoolConfig", "false"); } @@ -84,7 +82,7 @@ public class AbstractRedisClusterContainer { redis4.stop(); redis5.stop(); redis6.stop(); - List.of("cache.type", "redis.connection.type", "redis.standalone.host", "redis.standalone.port") + List.of("cache.type", "redis.connection.type", "redis.cluster.nodes", "redis.cluster.useDefaultPoolConfig\"") .forEach(System.getProperties()::remove); } }; From eb50048c5001b61f81c400cf6af97fcff9b16223 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Thu, 2 May 2024 19:44:47 +0300 Subject: [PATCH 019/442] UI: Scada widget test --- .../basic/basic-widget-config.module.ts | 12 +- .../scada-test-basic-config.component.html | 26 ++ .../scada-test-basic-config.component.ts | 64 +++ .../scada/scada-test-widget.component.html | 19 + .../scada/scada-test-widget.component.scss | 22 + .../lib/scada/scada-test-widget.component.ts | 102 +++++ .../lib/scada/scada-test-widget.models.ts | 21 + .../widget/lib/scada/scada.models.ts | 398 ++++++++++++++++++ .../scada-object-settings.component.html | 48 +++ .../scada/scada-object-settings.component.ts | 168 ++++++++ .../common/widget-settings-common.module.ts | 5 + .../widget/widget-components.module.ts | 7 +- ui-ngx/src/assets/widget/scada/drawing.svg | 149 +++++++ 13 files changed, 1036 insertions(+), 5 deletions(-) create mode 100644 ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-test-basic-config.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-test-basic-config.component.ts create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-test-widget.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-test-widget.component.scss create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-test-widget.component.ts create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-test-widget.models.ts create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/scada/scada.models.ts create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-object-settings.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-object-settings.component.ts create mode 100644 ui-ngx/src/assets/widget/scada/drawing.svg diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts index 18b80f86a5..79af9bee18 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts @@ -129,6 +129,9 @@ import { import { RadarChartBasicConfigComponent } from '@home/components/widget/config/basic/chart/radar-chart-basic-config.component'; +import { + ScadaTestBasicConfigComponent +} from '@home/components/widget/config/basic/scada/scada-test-basic-config.component'; @NgModule({ declarations: [ @@ -171,7 +174,8 @@ import { PieChartBasicConfigComponent, BarChartBasicConfigComponent, PolarAreaChartBasicConfigComponent, - RadarChartBasicConfigComponent + RadarChartBasicConfigComponent, + ScadaTestBasicConfigComponent ], imports: [ CommonModule, @@ -216,7 +220,8 @@ import { PieChartBasicConfigComponent, BarChartBasicConfigComponent, PolarAreaChartBasicConfigComponent, - RadarChartBasicConfigComponent + RadarChartBasicConfigComponent, + ScadaTestBasicConfigComponent ] }) export class BasicWidgetConfigModule { @@ -255,5 +260,6 @@ export const basicWidgetConfigComponentsMap: {[key: string]: Type + + + + + diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-test-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-test-basic-config.component.ts new file mode 100644 index 0000000000..3d6a4a6a45 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-test-basic-config.component.ts @@ -0,0 +1,64 @@ +/// +/// Copyright ยฉ 2016-2024 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 { TargetDevice, } from '@shared/models/widget.models'; +import { WidgetConfigComponent } from '@home/components/widget/widget-config.component'; +import { ScadaTestWidgetSettings } from '@home/components/widget/lib/scada/scada-test-widget.models'; + +@Component({ + selector: 'tb-scada-test-basic-config', + templateUrl: './scada-test-basic-config.component.html', + styleUrls: ['../basic-config.scss'] +}) +export class ScadaTestBasicConfigComponent extends BasicWidgetConfigComponent { + + get targetDevice(): TargetDevice { + return this.scadaTestWidgetConfigForm.get('targetDevice').value; + } + + scadaTestWidgetConfigForm: UntypedFormGroup; + + constructor(protected store: Store, + protected widgetConfigComponent: WidgetConfigComponent, + private fb: UntypedFormBuilder) { + super(store, widgetConfigComponent); + } + + protected configForm(): UntypedFormGroup { + return this.scadaTestWidgetConfigForm; + } + + protected onConfigSet(configData: WidgetConfigComponentData) { + const settings: ScadaTestWidgetSettings = {...(configData.config.settings as ScadaTestWidgetSettings || { scadaObject: {}})}; + this.scadaTestWidgetConfigForm = this.fb.group({ + targetDevice: [configData.config.targetDevice, []], + scadaObject: [settings.scadaObject, []] + }); + } + + protected prepareOutputConfig(config: any): WidgetConfigComponentData { + this.widgetConfig.config.targetDevice = config.targetDevice; + this.widgetConfig.config.settings = this.widgetConfig.config.settings || {}; + this.widgetConfig.config.settings.scadaObject = config.scadaObject; + return this.widgetConfig; + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-test-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-test-widget.component.html new file mode 100644 index 0000000000..f811e7f889 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-test-widget.component.html @@ -0,0 +1,19 @@ + +
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-test-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-test-widget.component.scss new file mode 100644 index 0000000000..5012fe3a7c --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-test-widget.component.scss @@ -0,0 +1,22 @@ +/** + * Copyright ยฉ 2016-2024 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. + */ +.tb-scada-shape { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-test-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-test-widget.component.ts new file mode 100644 index 0000000000..25451dcf15 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-test-widget.component.ts @@ -0,0 +1,102 @@ +/// +/// Copyright ยฉ 2016-2024 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 { + AfterViewInit, + ChangeDetectorRef, + Component, + ElementRef, + OnDestroy, + OnInit, + Renderer2, + ViewChild, + ViewEncapsulation +} from '@angular/core'; +import { BasicActionWidgetComponent } from '@home/components/widget/lib/action/action-widget.models'; +import { ImagePipe } from '@shared/pipe/image.pipe'; +import { DomSanitizer } from '@angular/platform-browser'; +import { SVG, Svg } from '@svgdotjs/svg.js'; +import { HttpClient } from '@angular/common/http'; +import { ScadaObject, ScadaObjectSettings } from '@home/components/widget/lib/scada/scada.models'; +import { ResizeObserver } from '@juggle/resize-observer'; +import { ScadaTestWidgetSettings } from '@home/components/widget/lib/scada/scada-test-widget.models'; + +@Component({ + selector: 'tb-scada-test-widget', + templateUrl: './scada-test-widget.component.html', + styleUrls: ['../action/action-widget.scss', './scada-test-widget.component.scss'], + encapsulation: ViewEncapsulation.None +}) +export class ScadaTestWidgetComponent extends + BasicActionWidgetComponent implements OnInit, AfterViewInit, OnDestroy { + + @ViewChild('scadaShape', {static: false}) + scadaShape: ElementRef; + + private settings: ScadaTestWidgetSettings; + + private autoScale = true; + private scadaObject: ScadaObject; + + private shapeResize$: ResizeObserver; + + constructor(protected imagePipe: ImagePipe, + protected sanitizer: DomSanitizer, + private renderer: Renderer2, + protected cd: ChangeDetectorRef, + private http: HttpClient) { + super(cd); + } + + ngOnInit(): void { + super.ngOnInit(); + this.settings = {...this.ctx.settings}; + this.scadaObject = new ScadaObject(this.ctx, '/assets/widget/scada/drawing.svg', this.settings.scadaObject); + this.scadaObject.init().subscribe(); + } + + ngAfterViewInit(): void { + this.scadaObject.addTo(this.scadaShape.nativeElement); + if (this.autoScale) { + this.shapeResize$ = new ResizeObserver(() => { + this.onResize(); + }); + this.shapeResize$.observe(this.scadaShape.nativeElement); + this.onResize(); + } + super.ngAfterViewInit(); + } + + ngOnDestroy() { + if (this.shapeResize$) { + this.shapeResize$.disconnect(); + } + if (this.scadaObject) { + this.scadaObject.destroy(); + } + super.ngOnDestroy(); + } + + public onInit() { + super.onInit(); + } + + private onResize() { + const shapeWidth = this.scadaShape.nativeElement.getBoundingClientRect().width; + const shapeHeight = this.scadaShape.nativeElement.getBoundingClientRect().height; + this.scadaObject.setSize(shapeWidth, shapeHeight); + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-test-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-test-widget.models.ts new file mode 100644 index 0000000000..a74d81e3d5 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-test-widget.models.ts @@ -0,0 +1,21 @@ +/// +/// Copyright ยฉ 2016-2024 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 { ScadaObjectSettings } from '@home/components/widget/lib/scada/scada.models'; + +export interface ScadaTestWidgetSettings { + scadaObject: ScadaObjectSettings; +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada.models.ts new file mode 100644 index 0000000000..7088fe6131 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada.models.ts @@ -0,0 +1,398 @@ +/// +/// Copyright ยฉ 2016-2024 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 { ValueType } from '@shared/models/constants'; +import { Box, Element, Runner, Svg, SVG, Timeline } from '@svgdotjs/svg.js'; +import { DataToValueType, GetValueAction, GetValueSettings } from '@shared/models/action-widget-settings.models'; +import { insertVariable, isDefinedAndNotNull, isNumber, isNumeric, isUndefinedOrNull, mergeDeep } from '@core/utils'; +import { BehaviorSubject, forkJoin, Observable } from 'rxjs'; +import { map, share } from 'rxjs/operators'; +import { ValueAction, ValueGetter } from '@home/components/widget/lib/action/action-widget.models'; +import { WidgetContext } from '@home/models/widget-component.models'; + +export type ValueMatcherType = 'any' | 'constant' | 'range'; + +export interface ValueMatcher { + type: ValueMatcherType; + value?: any; + range?: {from: number; to: number}; +} + +export type ScadaObjectAttributeValueType = 'input' | 'property'; + +export interface ScadaObjectAttributeValue { + type: ScadaObjectAttributeValueType; + propertyId?: string; +} + +export interface ScadaObjectAttributeState { + name: string; + value: ScadaObjectAttributeValue; +} + +export interface ScadaObjectState { + tag: string; + attributes: ScadaObjectAttributeState[]; + animate?: number; +} + +export interface ScadaObjectUpdateState { + matcher: ValueMatcher; + state: ScadaObjectState[]; +} + +export enum ScadaObjectBehaviorType { + setValue = 'setValue', + getValue = 'getValue' +} + +export interface ScadaObjectBehaviorBase { + id: string; + name: string; + type: ScadaObjectBehaviorType; +} + +export interface ScadaObjectBehaviorGet extends ScadaObjectBehaviorBase { + valueType: ValueType; + defaultValue: any; + onUpdate: ScadaObjectUpdateState[]; +} + +export interface ScadaObjectBehaviorSet extends ScadaObjectBehaviorBase { + todo: any; +} + +export type ScadaObjectBehavior = ScadaObjectBehaviorGet | ScadaObjectBehaviorSet; + +export type ScadaObjectPropertyType = 'string' | 'number' | 'color'; + +export interface ScadaObjectPropertyBase { + id: string; + name: string; + type: ScadaObjectPropertyType; + default: any; +} + +export interface ScadaObjectNumberProperty extends ScadaObjectPropertyBase { + min?: number; + max?: number; +} + +export type ScadaObjectProperty = ScadaObjectPropertyBase & ScadaObjectNumberProperty; + +export interface ScadaObjectMetadata { + title: string; + initial: ScadaObjectState[]; + behavior: ScadaObjectBehavior[]; + properties: ScadaObjectProperty[]; +} + +export const emptyMetadata: ScadaObjectMetadata = { + title: '', + initial: [], + behavior: [], + properties: [] +}; + + +export const parseScadaObjectMetadataFromContent = (svgContent: string): ScadaObjectMetadata => { + try { + const svgDoc = new DOMParser().parseFromString(svgContent, 'image/svg+xml'); + return parseScadaObjectMetadataFromDom(svgDoc); + } catch (_e) { + return emptyMetadata; + } +}; + +const parseScadaObjectMetadataFromDom = (svgDoc: Document): ScadaObjectMetadata => { + try { + const elements = svgDoc.getElementsByTagName('tb:metadata'); + if (elements.length) { + return JSON.parse(elements[0].innerHTML); + } else { + return emptyMetadata; + } + } catch (_e) { + return emptyMetadata; + } +}; + +const defaultGetValueSettings = (get: ScadaObjectBehaviorGet): GetValueSettings => ({ + action: GetValueAction.DO_NOTHING, + defaultValue: get.defaultValue, + executeRpc: { + method: 'getState', + requestTimeout: 5000, + requestPersistent: false, + persistentPollingInterval: 1000 + }, + getAttribute: { + key: 'state', + scope: null + }, + getTimeSeries: { + key: 'state' + }, + dataToValue: { + type: DataToValueType.NONE, + compareToValue: true, + dataToValueFunction: '/* Should return boolean value */\nreturn data;' + } + }); + +export const defaultScadaObjectSettings = (metadata: ScadaObjectMetadata): ScadaObjectSettings => { + const settings: ScadaObjectSettings = {}; + for (const behaviour of metadata.behavior) { + //behaviour.id + if (behaviour.type === ScadaObjectBehaviorType.getValue) { + settings[behaviour.id] = defaultGetValueSettings(behaviour as ScadaObjectBehaviorGet); + } else if (behaviour.type === ScadaObjectBehaviorType.setValue) { + // TODO: + } + } + for (const property of metadata.properties) { + settings[property.id] = property.default; + } + return settings; +}; + +export type ScadaObjectSettings = {[id: string]: any}; + +export class ScadaObject { + + private metadata: ScadaObjectMetadata; + private settings: ScadaObjectSettings; + + private rootElement: HTMLElement; + private svgShape: Svg; + private box: Box; + private targetWidth: number; + private targetHeight: number; + + private loadingSubject = new BehaviorSubject(false); + private valueGetters: ValueGetter[] = []; + private valueActions: ValueAction[] = []; + + private animationTimeline: Timeline; + + loading$ = this.loadingSubject.asObservable().pipe(share()); + + constructor(private ctx: WidgetContext, + private svgPath: string, + private inputSettings: ScadaObjectSettings) {} + + public init(): Observable { + return this.ctx.http.get(this.svgPath, {responseType: 'text'}).pipe( + map((inputSvgContent) => { + const doc: XMLDocument = new DOMParser().parseFromString(inputSvgContent, 'image/svg+xml'); + this.metadata = parseScadaObjectMetadataFromDom(doc); + const defaults = defaultScadaObjectSettings(this.metadata); + this.settings = mergeDeep({}, defaults, this.inputSettings || {}); + this.prepareSvgShape(doc); + this.prepareStates(); + }) + ); + } + + public addTo(element: HTMLElement) { + this.rootElement = element; + if (this.svgShape) { + this.svgShape.addTo(element); + } + } + + public destroy() { + this.valueActions.forEach(v => v.destroy()); + this.loadingSubject.complete(); + this.loadingSubject.unsubscribe(); + } + + public setSize(targetWidth: number, targetHeight: number) { + this.targetWidth = targetWidth; + this.targetHeight = targetHeight; + if (this.svgShape) { + this.resize(); + } + } + + private prepareSvgShape(doc: XMLDocument) { + const elements = doc.getElementsByTagName('tb:metadata'); + for (let i=0;i = this.settings[getBehavior.id]; + getValueSettings = {...getValueSettings, actionLabel: getBehavior.name}; + const valueGetter = + ValueGetter.fromSettings(this.ctx, getValueSettings, getBehavior.valueType, { + next: (val) => {this.onValue(getBehavior.id, val);}, + error: (e) => {} + }); + this.valueGetters.push(valueGetter); + this.valueActions.push(valueGetter); + } + } + if (this.metadata.initial) { + this.updateState(this.metadata.initial); + } + if (this.valueGetters.length) { + const getValueObservables: Array> = []; + this.valueGetters.forEach(valueGetter => { + getValueObservables.push(valueGetter.getValue()); + }); + this.loadingSubject.next(true); + forkJoin(getValueObservables).subscribe( + { + next: () => { + this.loadingSubject.next(false); + }, + error: () => { + this.loadingSubject.next(false); + } + } + ); + } + } + + private resize() { + let scale: number; + if (this.targetWidth < this.targetHeight) { + scale = this.targetWidth / this.box.width; + } else { + scale = this.targetHeight / this.box.height; + } + this.svgShape.node.style.transform = `scale(${scale})`; + } + + private onValue(id: string, value: any) { + const getBehavior = this.metadata.behavior.find(b => b.id === id) as ScadaObjectBehaviorGet; + value = this.normalizeValue(value, getBehavior.valueType); + const updateStates = this.filterUpdateStates(getBehavior.onUpdate, value); + if (this.animationTimeline) { + this.animationTimeline.finish(); + } + for (const updateState of updateStates) { + this.updateState(updateState.state, value); + } + } + + private updateState(state: ScadaObjectState[], value?: any) { + for (const stateEntry of state) { + const tag = stateEntry.tag; + const elements = this.svgShape.find(`[tb\\:tag="${tag}"]`); + const attrs = this.computeAttributes(stateEntry.attributes, value); + elements.forEach(e => { + this.setElementAttributes(e, attrs, stateEntry.animate); + }); + } + } + + private normalizeValue(value: any, type: ValueType): any { + if (isUndefinedOrNull(value)) { + switch (type) { + case ValueType.STRING: + return ''; + case ValueType.INTEGER: + case ValueType.DOUBLE: + return 0; + case ValueType.BOOLEAN: + return false; + case ValueType.JSON: + return {}; + } + } else { + return value; + } + } + + private computeAttributes(attributes: ScadaObjectAttributeState[], value: any): {[attr: string]: any} { + const res: {[attr: string]: any} = {}; + for (const attribute of attributes) { + const attr = attribute.name; + res[attr] = this.getAttributeValue(attribute, value); + } + return res; + } + + private setElementAttributes(element: Element, attrs: {[attr: string]: any}, animate?: number) { + if (isDefinedAndNotNull(animate)) { + this.animation(element, animate).attr(attrs); + } else { + element.attr(attrs); + } + } + + private animation(element: Element, duration: number): Runner { + if (!this.animationTimeline) { + this.animationTimeline = new Timeline(); + } + element.timeline(this.animationTimeline); + return element.animate(duration, 0, 'now'); + } + + private getAttributeValue(attribute: ScadaObjectAttributeState, value: any): any { + if (attribute.value.type === 'input') { + return value; + } else if (attribute.value.type === 'property') { + const id = attribute.value.propertyId; + return this.settings[id] || ''; + } else { + return ''; + } + } + + private filterUpdateStates(states: ScadaObjectUpdateState[], val: any): ScadaObjectUpdateState[] { + return states.filter(s => this.valueMatches(s.matcher, val)); + } + + private valueMatches(matcher: ValueMatcher, val: any): boolean { + switch (matcher.type) { + case 'any': + return true; + case 'constant': + return matcher.value === val; + case 'range': + if (isDefinedAndNotNull(val) && isNumeric(val)) { + const num = Number(val); + const range = matcher.range; + return ((!isNumber(range.from) || num >= range.from) && (!isNumber(range.to) || num < range.to)); + } else { + return false; + } + } + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-object-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-object-settings.component.html new file mode 100644 index 0000000000..d5a8cba6df --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-object-settings.component.html @@ -0,0 +1,48 @@ + + +
{{ metadata?.title }}
+
+
widgets.slider.behavior
+
+
{{ behaviour.name }}
+ + +
+
+
+
+
{{ property.name }}
+ + + + + +
+
+ diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-object-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-object-settings.component.ts new file mode 100644 index 0000000000..ad10d681a7 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-object-settings.component.ts @@ -0,0 +1,168 @@ +/// +/// Copyright ยฉ 2016-2024 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, forwardRef, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'; +import { + ControlValueAccessor, + NG_VALUE_ACCESSOR, + UntypedFormBuilder, + UntypedFormGroup, + ValidatorFn, + Validators +} from '@angular/forms'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; +import { + defaultScadaObjectSettings, + parseScadaObjectMetadataFromContent, + ScadaObjectBehaviorType, + ScadaObjectMetadata, + ScadaObjectSettings +} from '@home/components/widget/lib/scada/scada.models'; +import { HttpClient } from '@angular/common/http'; +import { ValueType } from '@shared/models/constants'; +import { IAliasController } from '@core/api/widget-api.models'; +import { TargetDevice, widgetType } from '@shared/models/widget.models'; +import { isDefinedAndNotNull } from '@core/utils'; + +@Component({ + selector: 'tb-scada-object-settings', + templateUrl: './scada-object-settings.component.html', + styleUrls: ['./../../widget-settings.scss'], + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => ScadaObjectSettingsComponent), + multi: true + } + ] +}) +export class ScadaObjectSettingsComponent implements OnInit, OnChanges, ControlValueAccessor { + + ScadaObjectBehaviorType = ScadaObjectBehaviorType; + + @Input() + disabled: boolean; + + @Input() + svgPath = '/assets/widget/scada/drawing.svg'; + + @Input() + aliasController: IAliasController; + + @Input() + targetDevice: TargetDevice; + + @Input() + widgetType: widgetType; + + private modelValue: ScadaObjectSettings; + + private propagateChange = null; + + public scadaObjectSettingsFormGroup: UntypedFormGroup; + + metadata: ScadaObjectMetadata; + + constructor(protected store: Store, + private fb: UntypedFormBuilder, + private http: HttpClient) { + } + + ngOnInit(): void { + this.scadaObjectSettingsFormGroup = this.fb.group({}); + this.scadaObjectSettingsFormGroup.valueChanges.subscribe(() => { + this.updateModel(); + }); + this.loadMetadata(); + } + + ngOnChanges(changes: SimpleChanges): void { + for (const propName of Object.keys(changes)) { + const change = changes[propName]; + if (!change.firstChange && change.currentValue !== change.previousValue) { + if (['svgPath'].includes(propName)) { + this.loadMetadata(); + } + } + } + } + + registerOnChange(fn: any): void { + this.propagateChange = fn; + } + + registerOnTouched(_fn: any): void { + } + + setDisabledState(isDisabled: boolean): void { + this.disabled = isDisabled; + if (isDisabled) { + this.scadaObjectSettingsFormGroup.disable({emitEvent: false}); + } else { + this.scadaObjectSettingsFormGroup.enable({emitEvent: false}); + } + } + + writeValue(value: ScadaObjectSettings): void { + this.modelValue = value || {}; + this.setupValue(); + } + + private loadMetadata() { + this.http.get(this.svgPath, {responseType: 'text'}).subscribe( + (svgContent) => { + this.metadata = parseScadaObjectMetadataFromContent(svgContent); + for (const control of Object.keys(this.scadaObjectSettingsFormGroup.controls)) { + this.scadaObjectSettingsFormGroup.removeControl(control, {emitEvent: false}); + } + for (const behaviour of this.metadata.behavior) { + this.scadaObjectSettingsFormGroup.addControl(behaviour.id, this.fb.control(null, []), {emitEvent: false}); + } + for (const property of this.metadata.properties) { + const validators: ValidatorFn[] = []; + if (property.type === 'number') { + if (isDefinedAndNotNull(property.min)) { + validators.push(Validators.min(property.min)); + } + if (isDefinedAndNotNull(property.max)) { + validators.push(Validators.max(property.max)); + } + } + this.scadaObjectSettingsFormGroup.addControl(property.id, this.fb.control(null, validators), {emitEvent: false}); + } + this.setupValue(); + } + ); + } + + private setupValue() { + if (this.metadata) { + const defaults = defaultScadaObjectSettings(this.metadata); + this.modelValue = {...defaults, ...this.modelValue}; + this.scadaObjectSettingsFormGroup.patchValue( + this.modelValue, {emitEvent: false} + ); + } + } + + private updateModel() { + this.modelValue = this.scadaObjectSettingsFormGroup.getRawValue(); + this.propagateChange(this.modelValue); + } + + protected readonly ValueType = ValueType; +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-settings-common.module.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-settings-common.module.ts index bbe3dfb20c..152cf25b35 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-settings-common.module.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-settings-common.module.ts @@ -149,6 +149,9 @@ import { StatusWidgetStateSettingsComponent } from '@home/components/widget/lib/settings/common/indicator/status-widget-state-settings.component'; import { ChartBarSettingsComponent } from '@home/components/widget/lib/settings/common/chart/chart-bar-settings.component'; +import { + ScadaObjectSettingsComponent +} from '@home/components/widget/lib/settings/common/scada/scada-object-settings.component'; @NgModule({ declarations: [ @@ -204,6 +207,7 @@ import { ChartBarSettingsComponent } from '@home/components/widget/lib/settings/ TimeSeriesChartStateRowComponent, TimeSeriesChartGridSettingsComponent, StatusWidgetStateSettingsComponent, + ScadaObjectSettingsComponent, DataKeyInputComponent, EntityAliasInputComponent ], @@ -265,6 +269,7 @@ import { ChartBarSettingsComponent } from '@home/components/widget/lib/settings/ TimeSeriesChartStateRowComponent, TimeSeriesChartGridSettingsComponent, StatusWidgetStateSettingsComponent, + ScadaObjectSettingsComponent, DataKeyInputComponent, EntityAliasInputComponent ], diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts b/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts index 69185b6dd2..f062494763 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts +++ b/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts @@ -92,6 +92,7 @@ import { PieChartWidgetComponent } from '@home/components/widget/lib/chart/pie-c import { BarChartWidgetComponent } from '@home/components/widget/lib/chart/bar-chart-widget.component'; import { PolarAreaWidgetComponent } from '@home/components/widget/lib/chart/polar-area-widget.component'; import { RadarChartWidgetComponent } from '@home/components/widget/lib/chart/radar-chart-widget.component'; +import { ScadaTestWidgetComponent } from '@home/components/widget/lib/scada/scada-test-widget.component'; @NgModule({ declarations: @@ -150,7 +151,8 @@ import { RadarChartWidgetComponent } from '@home/components/widget/lib/chart/rad PieChartWidgetComponent, BarChartWidgetComponent, PolarAreaWidgetComponent, - RadarChartWidgetComponent + RadarChartWidgetComponent, + ScadaTestWidgetComponent ], imports: [ CommonModule, @@ -212,7 +214,8 @@ import { RadarChartWidgetComponent } from '@home/components/widget/lib/chart/rad PieChartWidgetComponent, BarChartWidgetComponent, PolarAreaWidgetComponent, - RadarChartWidgetComponent + RadarChartWidgetComponent, + ScadaTestWidgetComponent ], providers: [ {provide: WIDGET_COMPONENTS_MODULE_TOKEN, useValue: WidgetComponentsModule } diff --git a/ui-ngx/src/assets/widget/scada/drawing.svg b/ui-ngx/src/assets/widget/scada/drawing.svg new file mode 100644 index 0000000000..972ca550cd --- /dev/null +++ b/ui-ngx/src/assets/widget/scada/drawing.svg @@ -0,0 +1,149 @@ + + + { + "title": "My first SCADA Object", + "initial": [ + { + "tag": "RECT", + "attributes": [ + { + "name": "fill", + "value": { + "type": "property", + "propertyId": "background" + } + }, + { + "name": "stroke", + "value": { + "type": "property", + "propertyId": "strokeColor" + } + }, + { + "name": "stroke-width", + "value": { + "type": "property", + "propertyId": "strokeWidth" + } + } + ] + } + ], + "behavior": [ + { + "id": "initialState", + "name": "Initial state", + "type": "getValue", + "valueType": "DOUBLE", + "defaultValue": 0, + "onUpdate": [ + { + "matcher": { + "type": "any" + }, + "state": [ + { + "tag": "RECT", + "animate": 200, + "attributes": [ + { + "name": "height", + "value": { + "type": "input" + } + }, + { + "name": "width", + "value": { + "type": "input" + } + } + ] + } + ] + } + ] + }, + { + "id": "disabledState", + "name": "Disabled state", + "type": "getValue", + "valueType": "BOOLEAN", + "defaultValue": false, + "onUpdate": [ + { + "matcher": { + "type": "constant", + "value": true + }, + "state": [ + { + "tag": "RECT", + "attributes": [ + { + "name": "fill", + "value": { + "type": "property", + "propertyId": "disabledBackground" + } + } + ] + } + ] + }, + { + "matcher": { + "type": "constant", + "value": false + }, + "state": [ + { + "tag": "RECT", + "attributes": [ + { + "name": "fill", + "value": { + "type": "property", + "propertyId": "background" + } + } + ] + } + ] + } + ] + } + ], + "properties": [ + { + "id": "strokeColor", + "name": "Stroke color", + "type": "color", + "default": "#aaa" + }, + { + "id": "strokeWidth", + "name": "Stroke width", + "type": "number", + "default": 5, + "min": 0, + "max": 20 + }, + { + "id": "background", + "name": "Background", + "type": "color", + "default": "green" + }, + { + "id": "disabledBackground", + "name": "Disabled background", + "type": "color", + "default": "#ccc" + } + ] + } + + + From f01f99e738c8e2d3b2e21dd5cb8770949ee0dc45 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Fri, 3 May 2024 19:21:07 +0300 Subject: [PATCH 020/442] UI: Scada metadata and configuration improvements. --- .../widget/lib/scada/scada.models.ts | 325 +++++++++++++--- .../scada-object-settings.component.html | 47 ++- .../scada/scada-object-settings.component.ts | 75 +++- .../scada/scada-object-settings.models.ts | 43 +++ ui-ngx/src/assets/widget/scada/drawing.svg | 352 +++++++++++++----- 5 files changed, 673 insertions(+), 169 deletions(-) create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-object-settings.models.ts diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada.models.ts index 7088fe6131..542e24844e 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada.models.ts @@ -15,13 +15,23 @@ /// import { ValueType } from '@shared/models/constants'; -import { Box, Element, Runner, Svg, SVG, Timeline } from '@svgdotjs/svg.js'; +import { Box, Element, Runner, Svg, SVG, Timeline, Text } from '@svgdotjs/svg.js'; import { DataToValueType, GetValueAction, GetValueSettings } from '@shared/models/action-widget-settings.models'; -import { insertVariable, isDefinedAndNotNull, isNumber, isNumeric, isUndefinedOrNull, mergeDeep } from '@core/utils'; +import { + formatValue, + insertVariable, + isDefinedAndNotNull, + isNumber, + isNumeric, + isUndefinedOrNull, + mergeDeep, + parseFunction +} from '@core/utils'; import { BehaviorSubject, forkJoin, Observable } from 'rxjs'; import { map, share } from 'rxjs/operators'; import { ValueAction, ValueGetter } from '@home/components/widget/lib/action/action-widget.models'; import { WidgetContext } from '@home/models/widget-component.models'; +import { Font } from '@shared/models/widget-settings.models'; export type ValueMatcherType = 'any' | 'constant' | 'range'; @@ -31,29 +41,85 @@ export interface ValueMatcher { range?: {from: number; to: number}; } -export type ScadaObjectAttributeValueType = 'input' | 'property'; +const valueMatches = (matcher: ValueMatcher, val: any): boolean => { + switch (matcher.type) { + case 'any': + return true; + case 'constant': + return matcher.value === val; + case 'range': + if (isDefinedAndNotNull(val) && isNumeric(val)) { + const num = Number(val); + const range = matcher.range; + return ((!isNumber(range.from) || num >= range.from) && (!isNumber(range.to) || num < range.to)); + } else { + return false; + } + } +}; -export interface ScadaObjectAttributeValue { - type: ScadaObjectAttributeValueType; +export type ScadaObjectValueType = 'input' | 'constant' | 'property' | 'function' | 'valueFormat'; + +export interface ScadaObjectValueBase { + type: ScadaObjectValueType; +} + +export interface ScadaObjectValueConstant extends ScadaObjectValueBase { + constantValue?: any; +} + +export interface ScadaObjectValueProperty extends ScadaObjectValueBase { propertyId?: string; + computedPropertyValue?: any; } -export interface ScadaObjectAttributeState { +export interface ScadaObjectValueFunction extends ScadaObjectValueBase { + valueConvertFunction?: string; + valueConverter?: (val: any) => any; +} + +export interface ScadaObjectValueFormat extends ScadaObjectValueBase { + units?: ScadaObjectValue; + decimals?: ScadaObjectValue; + computedUnits?: string; + computedDecimals?: number; +} + +export type ScadaObjectValue = ScadaObjectValueProperty & ScadaObjectValueConstant & ScadaObjectValueFunction & ScadaObjectValueFormat; + +export interface ScadaObjectAttribute { name: string; - value: ScadaObjectAttributeValue; + value: ScadaObjectValue; } -export interface ScadaObjectState { +export interface ScadaObjectText { + content?: ScadaObjectValue; + font?: ScadaObjectValue; + color?: ScadaObjectValue; +} + +export interface ScadaObjectElementState { tag: string; - attributes: ScadaObjectAttributeState[]; + show?: ScadaObjectValue; + text?: ScadaObjectText; + attributes?: ScadaObjectAttribute[]; animate?: number; } +export interface ScadaObjectState { + initial?: boolean; + value?: any; + state: ScadaObjectElementState[]; +} + export interface ScadaObjectUpdateState { matcher: ValueMatcher; - state: ScadaObjectState[]; + stateId: string; } +const filterUpdateStates = (states: ScadaObjectUpdateState[], val: any): ScadaObjectUpdateState[] => + states.filter(s => valueMatches(s.matcher, val)); + export enum ScadaObjectBehaviorType { setValue = 'setValue', getValue = 'getValue' @@ -77,32 +143,38 @@ export interface ScadaObjectBehaviorSet extends ScadaObjectBehaviorBase { export type ScadaObjectBehavior = ScadaObjectBehaviorGet | ScadaObjectBehaviorSet; -export type ScadaObjectPropertyType = 'string' | 'number' | 'color'; +export type ScadaObjectPropertyType = 'string' | 'number' | 'color' | 'font' | 'units' | 'switch'; export interface ScadaObjectPropertyBase { id: string; name: string; type: ScadaObjectPropertyType; default: any; + required?: boolean; + subLabel?: string; + divider?: boolean; + fieldSuffix?: string; + disableOnProperty?: string; } export interface ScadaObjectNumberProperty extends ScadaObjectPropertyBase { min?: number; max?: number; + step?: number; } export type ScadaObjectProperty = ScadaObjectPropertyBase & ScadaObjectNumberProperty; export interface ScadaObjectMetadata { title: string; - initial: ScadaObjectState[]; + states: {[id: string]: ScadaObjectState}; behavior: ScadaObjectBehavior[]; properties: ScadaObjectProperty[]; } export const emptyMetadata: ScadaObjectMetadata = { title: '', - initial: [], + states: {}, behavior: [], properties: [] }; @@ -126,6 +198,7 @@ const parseScadaObjectMetadataFromDom = (svgDoc: Document): ScadaObjectMetadata return emptyMetadata; } } catch (_e) { + console.error(_e); return emptyMetadata; } }; @@ -201,8 +274,9 @@ export class ScadaObject { this.metadata = parseScadaObjectMetadataFromDom(doc); const defaults = defaultScadaObjectSettings(this.metadata); this.settings = mergeDeep({}, defaults, this.inputSettings || {}); + this.prepareMetadata(); this.prepareSvgShape(doc); - this.prepareStates(); + this.initStates(); }) ); } @@ -228,17 +302,58 @@ export class ScadaObject { } } + private prepareMetadata() { + for (const stateId of Object.keys(this.metadata.states)) { + const state = this.metadata.states[stateId]; + for (const elementState of state.state) { + this.prepareValue(elementState.show); + this.prepareValue(elementState.text?.content); + this.prepareValue(elementState.text?.font); + this.prepareValue(elementState.text?.color); + if (elementState.attributes) { + for (const attribute of elementState.attributes) { + this.prepareValue(attribute.value); + } + } + } + } + } + + private prepareValue(value: ScadaObjectValue) { + if (value) { + if (value.type === 'function' && value.valueConvertFunction) { + try { + value.valueConverter = parseFunction(this.insertVariables(value.valueConvertFunction), ['value']); + } catch (e) { + value.valueConverter = (v) => v; + } + } else if (value.type === 'property') { + value.computedPropertyValue = this.getPropertyValue(value.propertyId); + } else if (value.type === 'valueFormat') { + if (value.units) { + this.prepareValue(value.units); + } + if (value.decimals) { + this.prepareValue(value.decimals); + } + } + } + } + + private insertVariables(content: string): string { + for (const property of this.metadata.properties) { + const value = this.getPropertyValue(property.id); + content = insertVariable(content, property.id, value); + } + return content; + } + private prepareSvgShape(doc: XMLDocument) { const elements = doc.getElementsByTagName('tb:metadata'); for (let i=0;i s.initial); + if (initialState) { + this.updateState(initialState); } if (this.valueGetters.length) { const getValueObservables: Array> = []; @@ -301,23 +417,61 @@ export class ScadaObject { private onValue(id: string, value: any) { const getBehavior = this.metadata.behavior.find(b => b.id === id) as ScadaObjectBehaviorGet; value = this.normalizeValue(value, getBehavior.valueType); - const updateStates = this.filterUpdateStates(getBehavior.onUpdate, value); + const updateStates = filterUpdateStates(getBehavior.onUpdate, value); if (this.animationTimeline) { this.animationTimeline.finish(); } for (const updateState of updateStates) { - this.updateState(updateState.state, value); + const state = this.metadata.states[updateState.stateId]; + this.updateState(state, value); } } - private updateState(state: ScadaObjectState[], value?: any) { - for (const stateEntry of state) { - const tag = stateEntry.tag; - const elements = this.svgShape.find(`[tb\\:tag="${tag}"]`); - const attrs = this.computeAttributes(stateEntry.attributes, value); - elements.forEach(e => { - this.setElementAttributes(e, attrs, stateEntry.animate); - }); + private updateState(state: ScadaObjectState, value?: any) { + if (state) { + for (const elementState of state.state) { + const tag = elementState.tag; + const elements = this.svgShape.find(`[tb\\:tag="${tag}"]`); + if (elements.length) { + if (elementState.show) { + const show: boolean = this.computeValue(elementState.show, value); + elements.forEach(e => { + if (show) { + e.show(); + } else { + e.hide(); + } + }); + } + if (elementState.attributes) { + const attrs = this.computeAttributes(elementState.attributes, value); + elements.forEach(e => { + this.setElementAttributes(e, attrs, elementState.animate); + }); + } + if (elementState.text) { + if (elementState.text.content) { + const text: string = this.computeValue(elementState.text.content, value); + elements.forEach(e => { + this.setElementText(e, text); + }); + } + if (elementState.text.font || elementState.text.color) { + let font: Font = this.computeValue(elementState.text.font, value); + if (typeof font !== 'object') { + font = undefined; + } + let color: string = this.computeValue(elementState.text.color, value); + if (typeof color !== 'string') { + color = undefined; + } + elements.forEach(e => { + this.setElementFont(e, font, color); + }); + } + } + } + } } } @@ -339,11 +493,11 @@ export class ScadaObject { } } - private computeAttributes(attributes: ScadaObjectAttributeState[], value: any): {[attr: string]: any} { + private computeAttributes(attributes: ScadaObjectAttribute[], value: any): {[attr: string]: any} { const res: {[attr: string]: any} = {}; for (const attribute of attributes) { const attr = attribute.name; - res[attr] = this.getAttributeValue(attribute, value); + res[attr] = this.computeValue(attribute.value, value); } return res; } @@ -356,6 +510,41 @@ export class ScadaObject { } } + private setElementText(element: Element, text: string) { + let textElement: Text; + if (element.type === 'text') { + const children = element.children(); + if (children.length && children[0].type === 'tspan') { + textElement = children[0] as Text; + } else { + textElement = element as Text; + } + } else if (element.type === 'tspan') { + textElement = element as Text; + } + if (textElement) { + textElement.text(text); + } + } + + private setElementFont(element: Element, font: Font, color: string) { + if (element.type === 'text') { + const textElement = element as Text; + if (font) { + textElement.font({ + family: font.family, + size: (isDefinedAndNotNull(font.size) && isDefinedAndNotNull(font.sizeUnit)) ? + font.size + font.sizeUnit : null, + weight: font.weight, + style: font.style + }); + } + if (color) { + textElement.fill(color); + } + } + } + private animation(element: Element, duration: number): Runner { if (!this.animationTimeline) { this.animationTimeline = new Timeline(); @@ -364,35 +553,55 @@ export class ScadaObject { return element.animate(duration, 0, 'now'); } - private getAttributeValue(attribute: ScadaObjectAttributeState, value: any): any { - if (attribute.value.type === 'input') { - return value; - } else if (attribute.value.type === 'property') { - const id = attribute.value.propertyId; - return this.settings[id] || ''; + private computeValue(objectValue: ScadaObjectValue, value: any): any { + if (objectValue) { + switch (objectValue.type) { + case 'input': + return value; + case 'constant': + return objectValue.constantValue; + case 'property': + return objectValue.computedPropertyValue; + case 'function': + try { + return objectValue.valueConverter(value); + } catch (_e) { + return value; + } + case 'valueFormat': + let units = ''; + let decimals = 0; + if (objectValue.units) { + units = this.computeValue(objectValue.units, value); + } + if (objectValue.decimals) { + decimals = this.computeValue(objectValue.decimals, value); + } + return formatValue(value, decimals, units, false); + } } else { return ''; } } - private filterUpdateStates(states: ScadaObjectUpdateState[], val: any): ScadaObjectUpdateState[] { - return states.filter(s => this.valueMatches(s.matcher, val)); - } - - private valueMatches(matcher: ValueMatcher, val: any): boolean { - switch (matcher.type) { - case 'any': - return true; - case 'constant': - return matcher.value === val; - case 'range': - if (isDefinedAndNotNull(val) && isNumeric(val)) { - const num = Number(val); - const range = matcher.range; - return ((!isNumber(range.from) || num >= range.from) && (!isNumber(range.to) || num < range.to)); - } else { - return false; + private getPropertyValue(id: string): any { + const property = this.metadata.properties.find(p => p.id === id); + if (property) { + const value = this.settings[id]; + if (isDefinedAndNotNull(value)) { + return value; + } else { + switch (property.type) { + case 'string': + return ''; + case 'number': + return 0; + case 'color': + return '#000'; } + } + } else { + return ''; } } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-object-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-object-settings.component.html index d5a8cba6df..2907a951dd 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-object-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-object-settings.component.html @@ -32,17 +32,42 @@ -
-
-
{{ property.name }}
- - - - - +
+
+ + {{ propertyRow.label }} + +
{{ propertyRow.label }}
+
+ +
{{ property.subLabel }}
+ + +
{{ property.fieldSuffix }}
+ + + + + +
{{ property.fieldSuffix }}
+ + + + + + +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-object-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-object-settings.component.ts index ad10d681a7..3e0bd7409d 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-object-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-object-settings.component.ts @@ -14,12 +14,15 @@ /// limitations under the License. /// -import { Component, forwardRef, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'; +import { ChangeDetectorRef, Component, forwardRef, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'; import { ControlValueAccessor, + NG_VALIDATORS, NG_VALUE_ACCESSOR, UntypedFormBuilder, + UntypedFormControl, UntypedFormGroup, + Validator, ValidatorFn, Validators } from '@angular/forms'; @@ -37,6 +40,11 @@ import { ValueType } from '@shared/models/constants'; import { IAliasController } from '@core/api/widget-api.models'; import { TargetDevice, widgetType } from '@shared/models/widget.models'; import { isDefinedAndNotNull } from '@core/utils'; +import { + ScadaPropertyRow, + toPropertyRows +} from '@home/components/widget/lib/settings/common/scada/scada-object-settings.models'; +import { merge, Observable, Subscription } from 'rxjs'; @Component({ selector: 'tb-scada-object-settings', @@ -47,10 +55,15 @@ import { isDefinedAndNotNull } from '@core/utils'; provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ScadaObjectSettingsComponent), multi: true + }, + { + provide: NG_VALIDATORS, + useExisting: forwardRef(() => ScadaObjectSettingsComponent), + multi: true } ] }) -export class ScadaObjectSettingsComponent implements OnInit, OnChanges, ControlValueAccessor { +export class ScadaObjectSettingsComponent implements OnInit, OnChanges, ControlValueAccessor, Validator { ScadaObjectBehaviorType = ScadaObjectBehaviorType; @@ -73,13 +86,18 @@ export class ScadaObjectSettingsComponent implements OnInit, OnChanges, ControlV private propagateChange = null; + private validatorTriggers: string[]; + private validatorSubscription: Subscription; + public scadaObjectSettingsFormGroup: UntypedFormGroup; metadata: ScadaObjectMetadata; + propertyRows: ScadaPropertyRow[]; constructor(protected store: Store, private fb: UntypedFormBuilder, - private http: HttpClient) { + private http: HttpClient, + private cd: ChangeDetectorRef) { } ngOnInit(): void { @@ -114,6 +132,7 @@ export class ScadaObjectSettingsComponent implements OnInit, OnChanges, ControlV this.scadaObjectSettingsFormGroup.disable({emitEvent: false}); } else { this.scadaObjectSettingsFormGroup.enable({emitEvent: false}); + this.updateValidators(); } } @@ -122,10 +141,25 @@ export class ScadaObjectSettingsComponent implements OnInit, OnChanges, ControlV this.setupValue(); } + validate(c: UntypedFormControl) { + const valid = this.scadaObjectSettingsFormGroup.valid; + return valid ? null : { + scadaObject: { + valid: false, + }, + }; + } + private loadMetadata() { + if (this.validatorSubscription) { + this.validatorSubscription.unsubscribe(); + this.validatorSubscription = null; + } + this.validatorTriggers = []; this.http.get(this.svgPath, {responseType: 'text'}).subscribe( (svgContent) => { this.metadata = parseScadaObjectMetadataFromContent(svgContent); + this.propertyRows = toPropertyRows(this.metadata.properties); for (const control of Object.keys(this.scadaObjectSettingsFormGroup.controls)) { this.scadaObjectSettingsFormGroup.removeControl(control, {emitEvent: false}); } @@ -133,7 +167,15 @@ export class ScadaObjectSettingsComponent implements OnInit, OnChanges, ControlV this.scadaObjectSettingsFormGroup.addControl(behaviour.id, this.fb.control(null, []), {emitEvent: false}); } for (const property of this.metadata.properties) { + if (property.disableOnProperty) { + if (!this.validatorTriggers.includes(property.disableOnProperty)) { + this.validatorTriggers.push(property.disableOnProperty); + } + } const validators: ValidatorFn[] = []; + if (property.required) { + validators.push(Validators.required); + } if (property.type === 'number') { if (isDefinedAndNotNull(property.min)) { validators.push(Validators.min(property.min)); @@ -144,11 +186,37 @@ export class ScadaObjectSettingsComponent implements OnInit, OnChanges, ControlV } this.scadaObjectSettingsFormGroup.addControl(property.id, this.fb.control(null, validators), {emitEvent: false}); } + if (this.validatorTriggers.length) { + const observables: Observable[] = []; + for (const trigger of this.validatorTriggers) { + observables.push(this.scadaObjectSettingsFormGroup.get(trigger).valueChanges); + } + this.validatorSubscription = merge(...observables).subscribe(() => { + this.updateValidators(); + }); + } this.setupValue(); + this.cd.markForCheck(); } ); } + private updateValidators() { + for (const trigger of this.validatorTriggers) { + const value: boolean = this.scadaObjectSettingsFormGroup.get(trigger).value; + this.metadata.properties.filter(p => p.disableOnProperty === trigger).forEach( + (p) => { + const control = this.scadaObjectSettingsFormGroup.get(p.id); + if (value) { + control.enable({emitEvent: false}); + } else { + control.disable({emitEvent: false}); + } + } + ); + } + } + private setupValue() { if (this.metadata) { const defaults = defaultScadaObjectSettings(this.metadata); @@ -156,6 +224,7 @@ export class ScadaObjectSettingsComponent implements OnInit, OnChanges, ControlV this.scadaObjectSettingsFormGroup.patchValue( this.modelValue, {emitEvent: false} ); + this.setDisabledState(this.disabled); } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-object-settings.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-object-settings.models.ts new file mode 100644 index 0000000000..2426b13a0b --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-object-settings.models.ts @@ -0,0 +1,43 @@ +/// +/// Copyright ยฉ 2016-2024 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 { ScadaObjectProperty } from '@home/components/widget/lib/scada/scada.models'; + +export interface ScadaPropertyRow { + label: string; + properties: ScadaObjectProperty[]; + switch?: ScadaObjectProperty; +} + +export const toPropertyRows = (properties: ScadaObjectProperty[]): ScadaPropertyRow[] => { + const result: ScadaPropertyRow[] = []; + for (const property of properties) { + let propertyRow = result.find(r => r.label === property.name); + if (!propertyRow) { + propertyRow = { + label: property.name, + properties: [] + }; + result.push(propertyRow); + } + if (property.type === 'switch') { + propertyRow.switch = property; + } else { + propertyRow.properties.push(property); + } + } + return result; +}; diff --git a/ui-ngx/src/assets/widget/scada/drawing.svg b/ui-ngx/src/assets/widget/scada/drawing.svg index 972ca550cd..03849049f3 100644 --- a/ui-ngx/src/assets/widget/scada/drawing.svg +++ b/ui-ngx/src/assets/widget/scada/drawing.svg @@ -1,39 +1,160 @@ - - { + { "title": "My first SCADA Object", - "initial": [ - { - "tag": "RECT", - "attributes": [ - { - "name": "fill", - "value": { - "type": "property", - "propertyId": "background" + "states": { + "initialState": { + "initial": true, + "state": [ + { + "tag": "level", + "attributes": [ + { + "name": "fill", + "value": { + "type": "property", + "propertyId": "levelBackground" + } + } + ] + }, + { + "tag": "levelValueBackground", + "show": { + "type": "property", + "propertyId": "showValue" } - }, - { - "name": "stroke", - "value": { - "type": "property", - "propertyId": "strokeColor" + }, + { + "tag": "levelValue", + "show": { + "type": "property", + "propertyId": "showValue" + }, + "text": { + "font": { + "type": "property", + "propertyId": "valueFont" + }, + "color": { + "type": "property", + "propertyId": "valueColor" + } } - }, - { - "name": "stroke-width", - "value": { - "type": "property", - "propertyId": "strokeWidth" + }, + { + "tag": "minLevel", + "show": { + "type": "property", + "propertyId": "showMinMaxLevel" + }, + "text": { + "content": { + "type": "property", + "propertyId": "minLevel" + }, + "font": { + "type": "property", + "propertyId": "minMaxLevelFont" + }, + "color": { + "type": "property", + "propertyId": "minMaxLevelColor" + } } - } - ] + }, + { + "tag": "maxLevel", + "show": { + "type": "property", + "propertyId": "showMinMaxLevel" + }, + "text": { + "content": { + "type": "property", + "propertyId": "maxLevel" + }, + "font": { + "type": "property", + "propertyId": "minMaxLevelFont" + }, + "color": { + "type": "property", + "propertyId": "minMaxLevelColor" + } + } + } + ] + }, + "updateLevelState": { + "state": [ + { + "tag": "level", + "animate": 200, + "attributes": [ + { + "name": "height", + "value": { + "type": "function", + "valueConvertFunction": "var level = (value - ${minLevel}) / (${maxLevel} - ${minLevel});\nlevel = Math.max(0, Math.min(1, level));\nreturn level*80;" + } + } + ] + }, + { + "tag": "levelValue", + "text": { + "content": { + "type": "valueFormat", + "units": { + "type": "property", + "propertyId": "valueUnits" + }, + "decimals": { + "type": "property", + "propertyId": "valueDecimals" + } + } + } + } + ] + }, + "disabledState": { + "state": [ + { + "tag": "level", + "attributes": [ + { + "name": "fill", + "value": { + "type": "property", + "propertyId": "disabledLevelBackground" + } + } + ] + } + ] + }, + "enabledState": { + "state": [ + { + "tag": "level", + "attributes": [ + { + "name": "fill", + "value": { + "type": "property", + "propertyId": "levelBackground" + } + } + ] + } + ] } - ], + }, "behavior": [ { - "id": "initialState", - "name": "Initial state", + "id": "levelState", + "name": "Level", "type": "getValue", "valueType": "DOUBLE", "defaultValue": 0, @@ -42,26 +163,7 @@ "matcher": { "type": "any" }, - "state": [ - { - "tag": "RECT", - "animate": 200, - "attributes": [ - { - "name": "height", - "value": { - "type": "input" - } - }, - { - "name": "width", - "value": { - "type": "input" - } - } - ] - } - ] + "stateId": "updateLevelState" } ] }, @@ -77,73 +179,129 @@ "type": "constant", "value": true }, - "state": [ - { - "tag": "RECT", - "attributes": [ - { - "name": "fill", - "value": { - "type": "property", - "propertyId": "disabledBackground" - } - } - ] - } - ] + "stateId": "disabledState" }, { "matcher": { "type": "constant", "value": false }, - "state": [ - { - "tag": "RECT", - "attributes": [ - { - "name": "fill", - "value": { - "type": "property", - "propertyId": "background" - } - } - ] - } - ] + "stateId": "enabledState" } ] } ], "properties": [ { - "id": "strokeColor", - "name": "Stroke color", - "type": "color", - "default": "#aaa" + "id": "showValue", + "name": "Value", + "type": "switch", + "default": true }, { - "id": "strokeWidth", - "name": "Stroke width", + "id": "valueUnits", + "name": "Value", + "type": "units", + "default": "", + "disableOnProperty": "showValue" + }, + { + "id": "valueDecimals", + "name": "Value", "type": "number", - "default": 5, + "default": 2, "min": 0, - "max": 20 + "max": 15, + "step": 1, + "fieldSuffix": "decimals", + "disableOnProperty": "showValue" + }, + { + "id": "valueFont", + "name": "Value", + "type": "font", + "default": { + "size": 6, + "sizeUnit": "px", + "family": "Roboto", + "weight": "normal", + "style": "normal" + }, + "disableOnProperty": "showValue" + }, + { + "id": "valueColor", + "name": "Value", + "type": "color", + "default": "#000000", + "disableOnProperty": "showValue" + }, + { + "id": "minLevel", + "name": "Level range", + "subLabel": "min", + "type": "number", + "required": true, + "default": 0, + "min": 0 }, { - "id": "background", - "name": "Background", + "id": "maxLevel", + "name": "Level range", + "subLabel": "max", + "type": "number", + "required": true, + "default": 100, + "min": 0 + }, + { + "id": "showMinMaxLevel", + "name": "Min/Max label", + "type": "switch", + "default": true + }, + { + "id": "minMaxLevelFont", + "name": "Min/Max label", + "type": "font", + "default": { + "size": 6, + "sizeUnit": "px", + "family": "Roboto", + "weight": "normal", + "style": "normal" + }, + "disableOnProperty": "showMinMaxLevel" + }, + { + "id": "minMaxLevelColor", + "name": "Min/Max label", + "type": "color", + "default": "#666", + "disableOnProperty": "showMinMaxLevel" + }, + { + "id": "levelBackground", + "name": "Level background", + "subLabel": "Enabled", "type": "color", - "default": "green" - }, - { - "id": "disabledBackground", - "name": "Disabled background", - "type": "color", - "default": "#ccc" - } + "default": "#1abb48", + "divider": true + }, + { + "id": "disabledLevelBackground", + "name": "Level background", + "subLabel": "Disabled", + "type": "color", + "default": "#ccc" + } ] - } - - + } + + + + min + + N/A + max From 937b48d85b8819df726e1c929f967de32d2071a3 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Mon, 6 May 2024 19:30:31 +0300 Subject: [PATCH 021/442] UI: Scada test improvements, add actions. --- .../widget/lib/scada/scada.models.ts | 316 ++++++++++++++---- .../scada-object-settings.component.html | 27 +- .../scada/scada-object-settings.models.ts | 4 +- ui-ngx/src/assets/widget/scada/drawing.svg | 272 +++++++++++++-- 4 files changed, 520 insertions(+), 99 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada.models.ts index 542e24844e..d0aeac27a7 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada.models.ts @@ -16,7 +16,12 @@ import { ValueType } from '@shared/models/constants'; import { Box, Element, Runner, Svg, SVG, Timeline, Text } from '@svgdotjs/svg.js'; -import { DataToValueType, GetValueAction, GetValueSettings } from '@shared/models/action-widget-settings.models'; +import { + DataToValueType, + GetValueAction, + GetValueSettings, SetValueAction, + SetValueSettings, ValueToDataType +} from '@shared/models/action-widget-settings.models'; import { formatValue, insertVariable, @@ -29,34 +34,10 @@ import { } from '@core/utils'; import { BehaviorSubject, forkJoin, Observable } from 'rxjs'; import { map, share } from 'rxjs/operators'; -import { ValueAction, ValueGetter } from '@home/components/widget/lib/action/action-widget.models'; +import { ValueAction, ValueGetter, ValueSetter } from '@home/components/widget/lib/action/action-widget.models'; import { WidgetContext } from '@home/models/widget-component.models'; -import { Font } from '@shared/models/widget-settings.models'; - -export type ValueMatcherType = 'any' | 'constant' | 'range'; - -export interface ValueMatcher { - type: ValueMatcherType; - value?: any; - range?: {from: number; to: number}; -} - -const valueMatches = (matcher: ValueMatcher, val: any): boolean => { - switch (matcher.type) { - case 'any': - return true; - case 'constant': - return matcher.value === val; - case 'range': - if (isDefinedAndNotNull(val) && isNumeric(val)) { - const num = Number(val); - const range = matcher.range; - return ((!isNumber(range.from) || num >= range.from) && (!isNumber(range.to) || num < range.to)); - } else { - return false; - } - } -}; +import { ColorProcessor, constantColor, Font } from '@shared/models/widget-settings.models'; +import { AttributeScope } from '@shared/models/telemetry/telemetry.models'; export type ScadaObjectValueType = 'input' | 'constant' | 'property' | 'function' | 'valueFormat'; @@ -100,26 +81,28 @@ export interface ScadaObjectText { export interface ScadaObjectElementState { tag: string; + inputValue?: string; show?: ScadaObjectValue; text?: ScadaObjectText; attributes?: ScadaObjectAttribute[]; animate?: number; + addClass?: string; + removeClass?: string; + animationTimeline?: Timeline; } export interface ScadaObjectState { initial?: boolean; - value?: any; + triggerValues?: string[]; + conditionFunction?: string; + condition?: (values: {[key: string]: any}) => boolean; state: ScadaObjectElementState[]; } export interface ScadaObjectUpdateState { - matcher: ValueMatcher; - stateId: string; + updateValue: string; } -const filterUpdateStates = (states: ScadaObjectUpdateState[], val: any): ScadaObjectUpdateState[] => - states.filter(s => valueMatches(s.matcher, val)); - export enum ScadaObjectBehaviorType { setValue = 'setValue', getValue = 'getValue' @@ -138,12 +121,14 @@ export interface ScadaObjectBehaviorGet extends ScadaObjectBehaviorBase { } export interface ScadaObjectBehaviorSet extends ScadaObjectBehaviorBase { - todo: any; + valueToDataType: ValueToDataType; + constantValue: any; + valueToDataFunction: string; } export type ScadaObjectBehavior = ScadaObjectBehaviorGet | ScadaObjectBehaviorSet; -export type ScadaObjectPropertyType = 'string' | 'number' | 'color' | 'font' | 'units' | 'switch'; +export type ScadaObjectPropertyType = 'string' | 'number' | 'color' | 'color-settings' | 'font' | 'units' | 'switch'; export interface ScadaObjectPropertyBase { id: string; @@ -155,6 +140,8 @@ export interface ScadaObjectPropertyBase { divider?: boolean; fieldSuffix?: string; disableOnProperty?: string; + rowClass?: string; + fieldClass?: string; } export interface ScadaObjectNumberProperty extends ScadaObjectPropertyBase { @@ -165,8 +152,38 @@ export interface ScadaObjectNumberProperty extends ScadaObjectPropertyBase { export type ScadaObjectProperty = ScadaObjectPropertyBase & ScadaObjectNumberProperty; +export interface ScadaObjectCallBehavior { + behaviorId: string; + conditionFunction?: string; + condition?: (value: any) => boolean; +} + +export interface ScadaObjectStateValue { + initialValue: any; + callBehavior?: ScadaObjectCallBehavior[]; +} + +export type ScadaObjectElementActionTrigger = 'click'; + +export type ScadaObjectActionType = 'updateValue'; +export type ScadaObjectActionUpdateValueType = 'toggle' | 'increment' | 'constant'; + +export interface ScadaObjectElementAction { + trigger: ScadaObjectElementActionTrigger; + enabledTriggerValues?: string[]; + enabledConditionFunction?: string; + enabledCondition?: (values: {[key: string]: any}) => boolean; + actionType: ScadaObjectActionType; + updateValueId?: string; + updateValueType?: ScadaObjectActionUpdateValueType; + updateValueConstant?: any; + updateValueInc?: number; +} + export interface ScadaObjectMetadata { title: string; + stateValues: {[id: string]: ScadaObjectStateValue}; + actions: {[tag: string]: ScadaObjectElementAction}; states: {[id: string]: ScadaObjectState}; behavior: ScadaObjectBehavior[]; properties: ScadaObjectProperty[]; @@ -174,6 +191,8 @@ export interface ScadaObjectMetadata { export const emptyMetadata: ScadaObjectMetadata = { title: '', + stateValues: {}, + actions: {}, states: {}, behavior: [], properties: [] @@ -211,7 +230,7 @@ const defaultGetValueSettings = (get: ScadaObjectBehaviorGet): GetValueSettings< requestTimeout: 5000, requestPersistent: false, persistentPollingInterval: 1000 - }, + }, getAttribute: { key: 'state', scope: null @@ -221,19 +240,41 @@ const defaultGetValueSettings = (get: ScadaObjectBehaviorGet): GetValueSettings< }, dataToValue: { type: DataToValueType.NONE, - compareToValue: true, - dataToValueFunction: '/* Should return boolean value */\nreturn data;' + compareToValue: true, + dataToValueFunction: '/* Should return boolean value */\nreturn data;' } }); +const defaultSetValueSettings = (set: ScadaObjectBehaviorSet): SetValueSettings => ({ + action: SetValueAction.EXECUTE_RPC, + executeRpc: { + method: 'setState', + requestTimeout: 5000, + requestPersistent: false, + persistentPollingInterval: 1000 + }, + setAttribute: { + key: 'state', + scope: AttributeScope.SERVER_SCOPE + }, + putTimeSeries: { + key: 'state' + }, + valueToData: { + type: set.valueToDataType, + constantValue: set.constantValue, + valueToDataFunction: set.valueToDataFunction ? set.valueToDataFunction : + '/* Convert input boolean value to RPC parameters or attribute/time-series value */\nreturn value;' + } +}); + export const defaultScadaObjectSettings = (metadata: ScadaObjectMetadata): ScadaObjectSettings => { const settings: ScadaObjectSettings = {}; - for (const behaviour of metadata.behavior) { - //behaviour.id - if (behaviour.type === ScadaObjectBehaviorType.getValue) { - settings[behaviour.id] = defaultGetValueSettings(behaviour as ScadaObjectBehaviorGet); - } else if (behaviour.type === ScadaObjectBehaviorType.setValue) { - // TODO: + for (const behavior of metadata.behavior) { + if (behavior.type === ScadaObjectBehaviorType.getValue) { + settings[behavior.id] = defaultGetValueSettings(behavior as ScadaObjectBehaviorGet); + } else if (behavior.type === ScadaObjectBehaviorType.setValue) { + settings[behavior.id] = defaultSetValueSettings(behavior as ScadaObjectBehaviorSet); } } for (const property of metadata.properties) { @@ -258,8 +299,10 @@ export class ScadaObject { private loadingSubject = new BehaviorSubject(false); private valueGetters: ValueGetter[] = []; private valueActions: ValueAction[] = []; + private valueSetters: {[behaviorId: string]: ValueSetter} = {}; - private animationTimeline: Timeline; + private stateValueSubjects: {[id: string]: BehaviorSubject} = {}; + private stateValues: {[id: string]: any} = {}; loading$ = this.loadingSubject.asObservable().pipe(share()); @@ -289,6 +332,10 @@ export class ScadaObject { } public destroy() { + for (const stateValueId of Object.keys(this.stateValueSubjects)) { + this.stateValueSubjects[stateValueId].complete(); + this.stateValueSubjects[stateValueId].unsubscribe(); + } this.valueActions.forEach(v => v.destroy()); this.loadingSubject.complete(); this.loadingSubject.unsubscribe(); @@ -303,8 +350,33 @@ export class ScadaObject { } private prepareMetadata() { + for (const stateValueId of Object.keys(this.metadata.stateValues)) { + const stateValue = this.metadata.stateValues[stateValueId]; + if (stateValue.callBehavior) { + stateValue.callBehavior.forEach(callBehavior => { + let condition = () => true; + if (callBehavior.conditionFunction) { + try { + condition = parseFunction(this.insertVariables(callBehavior.conditionFunction), ['value']); + } catch (e) { + condition = () => false; + } + } + callBehavior.condition = condition; + }); + } + } for (const stateId of Object.keys(this.metadata.states)) { const state = this.metadata.states[stateId]; + let condition = () => true; + if (state.conditionFunction) { + try { + condition = parseFunction(this.insertVariables(state.conditionFunction), ['values']); + } catch (e) { + condition = () => false; + } + } + state.condition = condition; for (const elementState of state.state) { this.prepareValue(elementState.show); this.prepareValue(elementState.text?.content); @@ -367,6 +439,35 @@ export class ScadaObject { } private initStates() { + for (const stateValueId of Object.keys(this.metadata.stateValues)) { + const stateValue = this.metadata.stateValues[stateValueId]; + this.stateValueSubjects[stateValueId] = new BehaviorSubject(stateValue.initialValue); + this.stateValues[stateValueId] = stateValue.initialValue; + this.stateValueSubjects[stateValueId].subscribe(val => { + this.stateValues[stateValueId] = val; + const states = Object.values(this.metadata.states); + const triggerStates = states.filter(s => s.triggerValues && s.triggerValues.includes(stateValueId)); + for (const state of triggerStates) { + if (state.condition(this.stateValues)) { + this.updateState(state); + } + } + }); + } + for (const tag of Object.keys(this.metadata.actions)) { + const action = this.metadata.actions[tag]; + const elements = this.svgShape.find(`[tb\\:tag="${tag}"]`); + switch (action.trigger) { + case 'click': + elements.forEach(e => { + e.attr('cursor', 'pointer'); + e.on('click', () => { + this.triggerAction(action); + }); + }); + break; + } + } for (const behavior of this.metadata.behavior) { if (behavior.type === ScadaObjectBehaviorType.getValue) { const getBehavior = behavior as ScadaObjectBehaviorGet; @@ -379,6 +480,13 @@ export class ScadaObject { }); this.valueGetters.push(valueGetter); this.valueActions.push(valueGetter); + } else if (behavior.type === ScadaObjectBehaviorType.setValue) { + const setBehavior = behavior as ScadaObjectBehaviorSet; + let setValueSettings: SetValueSettings = this.settings[setBehavior.id]; + setValueSettings = {...setValueSettings, actionLabel: setBehavior.name}; + const valueSetter = ValueSetter.fromSettings(this.ctx, setValueSettings); + this.valueSetters[setBehavior.id] = valueSetter; + this.valueActions.push(valueSetter); } } const initialState = Object.values(this.metadata.states).find(s => s.initial); @@ -404,6 +512,59 @@ export class ScadaObject { } } + private triggerAction(action: ScadaObjectElementAction) { + switch (action.actionType) { + case 'updateValue': + const targetValue = action.updateValueId; + const valueSubject = this.stateValueSubjects[targetValue]; + if (valueSubject) { + const currentVal = valueSubject.value; + let newValue: any; + switch (action.updateValueType) { + case 'toggle': + newValue = !currentVal; + break; + case 'increment': + if (isNumber(currentVal)) { + newValue = currentVal + action.updateValueInc; + } + break; + case 'constant': + newValue = action.updateValueConstant; + break; + } + if (isDefinedAndNotNull(newValue)) { + valueSubject.next(newValue); + const stateValue = this.metadata.stateValues[targetValue]; + if (stateValue.callBehavior) { + const observables: Observable[] = []; + for (const behavior of stateValue.callBehavior) { + if (behavior.condition(newValue)) { + const valueSetter = this.valueSetters[behavior.behaviorId]; + observables.push(valueSetter.setValue(newValue)); + } + } + if (observables.length) { + this.loadingSubject.next(true); + forkJoin(observables).subscribe( + { + next: () => { + this.loadingSubject.next(false); + }, + error: (err) => { + this.loadingSubject.next(false); + valueSubject.next(currentVal); + } + } + ); + } + } + } + } + break; + } + } + private resize() { let scale: number; if (this.targetWidth < this.targetHeight) { @@ -417,20 +578,23 @@ export class ScadaObject { private onValue(id: string, value: any) { const getBehavior = this.metadata.behavior.find(b => b.id === id) as ScadaObjectBehaviorGet; value = this.normalizeValue(value, getBehavior.valueType); - const updateStates = filterUpdateStates(getBehavior.onUpdate, value); - if (this.animationTimeline) { - this.animationTimeline.finish(); - } - for (const updateState of updateStates) { - const state = this.metadata.states[updateState.stateId]; - this.updateState(state, value); + for (const onUpdate of getBehavior.onUpdate) { + const targetStateValueId = onUpdate.updateValue; + this.stateValueSubjects[targetStateValueId].next(value); } } - private updateState(state: ScadaObjectState, value?: any) { + private updateState(state: ScadaObjectState) { if (state) { for (const elementState of state.state) { const tag = elementState.tag; + let value; + if (elementState.inputValue) { + value = this.stateValues[elementState.inputValue]; + } + if (elementState.animationTimeline) { + elementState.animationTimeline.finish(); + } const elements = this.svgShape.find(`[tb\\:tag="${tag}"]`); if (elements.length) { if (elementState.show) { @@ -443,10 +607,20 @@ export class ScadaObject { } }); } + if (elementState.addClass) { + elements.forEach(e => { + e.addClass(elementState.addClass); + }); + } + if (elementState.removeClass) { + elements.forEach(e => { + e.removeClass(elementState.removeClass); + }); + } if (elementState.attributes) { const attrs = this.computeAttributes(elementState.attributes, value); elements.forEach(e => { - this.setElementAttributes(e, attrs, elementState.animate); + this.setElementAttributes(elementState, e, attrs, elementState.animate); }); } if (elementState.text) { @@ -502,9 +676,9 @@ export class ScadaObject { return res; } - private setElementAttributes(element: Element, attrs: {[attr: string]: any}, animate?: number) { + private setElementAttributes(elementState: ScadaObjectElementState, element: Element, attrs: {[attr: string]: any}, animate?: number) { if (isDefinedAndNotNull(animate)) { - this.animation(element, animate).attr(attrs); + this.animation(elementState, element, animate).attr(attrs); } else { element.attr(attrs); } @@ -545,11 +719,11 @@ export class ScadaObject { } } - private animation(element: Element, duration: number): Runner { - if (!this.animationTimeline) { - this.animationTimeline = new Timeline(); + private animation(elementState: ScadaObjectElementState, element: Element, duration: number): Runner { + if (!elementState.animationTimeline) { + elementState.animationTimeline = new Timeline(); } - element.timeline(this.animationTimeline); + element.timeline(elementState.animationTimeline); return element.animate(duration, 0, 'now'); } @@ -561,7 +735,14 @@ export class ScadaObject { case 'constant': return objectValue.constantValue; case 'property': - return objectValue.computedPropertyValue; + const property = this.getProperty(objectValue.propertyId); + if (property.type === 'color-settings') { + const colorProcessor: ColorProcessor = objectValue.computedPropertyValue; + colorProcessor.update(value); + return colorProcessor.color; + } else { + return objectValue.computedPropertyValue; + } case 'function': try { return objectValue.valueConverter(value); @@ -584,11 +765,18 @@ export class ScadaObject { } } + private getProperty(id: string): ScadaObjectProperty { + return this.metadata.properties.find(p => p.id === id); + } + private getPropertyValue(id: string): any { - const property = this.metadata.properties.find(p => p.id === id); + const property = this.getProperty(id); if (property) { const value = this.settings[id]; if (isDefinedAndNotNull(value)) { + if (property.type === 'color-settings') { + return ColorProcessor.fromSettings(value); + } return value; } else { switch (property.type) { @@ -598,6 +786,8 @@ export class ScadaObject { return 0; case 'color': return '#000'; + case 'color-settings': + return constantColor('#000'); } } } else { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-object-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-object-settings.component.html index 2907a951dd..972a5c532c 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-object-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-object-settings.component.html @@ -30,39 +30,54 @@ [widgetType]="widgetType" formControlName="{{ behaviour.id }}"> +
-
+
{{ propertyRow.label }}
{{ propertyRow.label }}
-
+
{{ property.subLabel }}
- + -
{{ property.fieldSuffix }}
+
{{ property.fieldSuffix }}
 - + + + -
{{ property.fieldSuffix }}
+
{{ property.fieldSuffix }}
 diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-object-settings.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-object-settings.models.ts index 2426b13a0b..07009a98cf 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-object-settings.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-object-settings.models.ts @@ -20,6 +20,7 @@ export interface ScadaPropertyRow { label: string; properties: ScadaObjectProperty[]; switch?: ScadaObjectProperty; + rowClass?: string; } export const toPropertyRows = (properties: ScadaObjectProperty[]): ScadaPropertyRow[] => { @@ -29,7 +30,8 @@ export const toPropertyRows = (properties: ScadaObjectProperty[]): ScadaProperty if (!propertyRow) { propertyRow = { label: property.name, - properties: [] + properties: [], + rowClass: property.rowClass }; result.push(propertyRow); } diff --git a/ui-ngx/src/assets/widget/scada/drawing.svg b/ui-ngx/src/assets/widget/scada/drawing.svg index 03849049f3..61e8d3f1ca 100644 --- a/ui-ngx/src/assets/widget/scada/drawing.svg +++ b/ui-ngx/src/assets/widget/scada/drawing.svg @@ -1,12 +1,71 @@ { "title": "My first SCADA Object", + "stateValues": { + "level": { + "initialValue": 0 + }, + "disabled": { + "initialValue": false + }, + "on": { + "initialValue": false, + "callBehavior": [ + { + "behaviorId": "onUpdateState", + "conditionFunction": "return value === true;" + }, + { + "behaviorId": "offUpdateState", + "conditionFunction": "return value === false;" + } + ] + } + }, + "actions": { + "onButton": { + "trigger": "click", + "actionType": "updateValue", + "updateValueId": "on", + "updateValueType": "constant", + "updateValueConstant": true + }, + "offButton": { + "trigger": "click", + "actionType": "updateValue", + "updateValueId": "on", + "updateValueType": "constant", + "updateValueConstant": false + } + }, "states": { "initialState": { "initial": true, "state": [ + { + "tag": "levelTitle", + "show": { + "type": "property", + "propertyId": "showLevelTitle" + }, + "text": { + "content": { + "type": "property", + "propertyId": "levelTitle" + }, + "font": { + "type": "property", + "propertyId": "levelTitleFont" + }, + "color": { + "type": "property", + "propertyId": "levelTitleColor" + } + } + }, { "tag": "level", + "inputValue": "level", "attributes": [ { "name": "fill", @@ -86,9 +145,11 @@ ] }, "updateLevelState": { + "triggerValues": ["level"], "state": [ { "tag": "level", + "inputValue": "level", "animate": 200, "attributes": [ { @@ -102,6 +163,7 @@ }, { "tag": "levelValue", + "inputValue": "level", "text": { "content": { "type": "valueFormat", @@ -118,7 +180,28 @@ } ] }, + "updateLevelBackgroundState": { + "triggerValues": ["disabled", "level"], + "conditionFunction": "return values.disabled === false;", + "state": [ + { + "tag": "level", + "inputValue": "level", + "attributes": [ + { + "name": "fill", + "value": { + "type": "property", + "propertyId": "levelBackground" + } + } + ] + } + ] + }, "disabledState": { + "triggerValues": ["disabled"], + "conditionFunction": "return values.disabled === true;", "state": [ { "tag": "level", @@ -134,16 +217,68 @@ } ] }, - "enabledState": { + "onState": { + "triggerValues": ["on"], + "conditionFunction": "return values.on === true;", "state": [ { - "tag": "level", + "tag": "fan", + "addClass": "fan-rotate" + }, + { + "tag": "onButtonBackground", "attributes": [ { "name": "fill", "value": { - "type": "property", - "propertyId": "levelBackground" + "type": "constant", + "constantValue": "#777" + } + } + ] + }, + { + "tag": "offButtonBackground", + "attributes": [ + { + "name": "fill", + "value": { + "type": "constant", + "constantValue": "#ed121f" + } + } + ] + } + ] + }, + "offState": { + "triggerValues": ["on"], + "conditionFunction": "return values.on === false;", + "state": [ + { + "tag": "fan", + "removeClass": "fan-rotate" + }, + { + "tag": "onButtonBackground", + "attributes": [ + { + "name": "fill", + "value": { + "type": "constant", + "constantValue": "#12ed19" + } + } + ] + }, + { + "tag": "offButtonBackground", + "attributes": [ + { + "name": "fill", + "value": { + "type": "constant", + "constantValue": "#777" } } ] @@ -160,10 +295,7 @@ "defaultValue": 0, "onUpdate": [ { - "matcher": { - "type": "any" - }, - "stateId": "updateLevelState" + "updateValue": "level" } ] }, @@ -175,35 +307,87 @@ "defaultValue": false, "onUpdate": [ { - "matcher": { - "type": "constant", - "value": true - }, - "stateId": "disabledState" - }, + "updateValue": "disabled" + } + ] + }, + { + "id": "onState", + "name": "On/Off state", + "type": "getValue", + "valueType": "BOOLEAN", + "defaultValue": false, + "onUpdate": [ { - "matcher": { - "type": "constant", - "value": false - }, - "stateId": "enabledState" + "updateValue": "on" } ] + }, + { + "id": "onUpdateState", + "name": "Power On", + "type": "setValue", + "valueToDataType": "CONSTANT", + "constantValue": true + }, + { + "id": "offUpdateState", + "name": "Power Off", + "type": "setValue", + "valueToDataType": "CONSTANT", + "constantValue": false } ], "properties": [ + { + "id": "showLevelTitle", + "name": "Level title", + "type": "switch", + "default": true, + "rowClass": "column-xs" + }, + { + "id": "levelTitle", + "name": "Level title", + "type": "string", + "default": "Level", + "disableOnProperty": "showLevelTitle", + "fieldClass": "flex" + }, + { + "id": "levelTitleFont", + "name": "Level title", + "type": "font", + "default": { + "size": 6, + "sizeUnit": "px", + "family": "Roboto", + "weight": "normal", + "style": "normal" + }, + "disableOnProperty": "showLevelTitle" + }, + { + "id": "levelTitleColor", + "name": "Level title", + "type": "color", + "default": "#000000", + "disableOnProperty": "showLevelTitle" + }, { "id": "showValue", "name": "Value", "type": "switch", - "default": true + "default": true, + "rowClass": "column-xs" }, { "id": "valueUnits", "name": "Value", "type": "units", "default": "", - "disableOnProperty": "showValue" + "disableOnProperty": "showValue", + "fieldClass": "flex" }, { "id": "valueDecimals", @@ -214,7 +398,8 @@ "max": 15, "step": 1, "fieldSuffix": "decimals", - "disableOnProperty": "showValue" + "disableOnProperty": "showValue", + "fieldClass": "flex" }, { "id": "valueFont", @@ -243,7 +428,9 @@ "type": "number", "required": true, "default": 0, - "min": 0 + "min": 0, + "rowClass": "column-xs", + "fieldClass": "flex-xs" }, { "id": "maxLevel", @@ -252,7 +439,8 @@ "type": "number", "required": true, "default": 100, - "min": 0 + "min": 0, + "fieldClass": "flex-xs" }, { "id": "showMinMaxLevel", @@ -284,9 +472,14 @@ "id": "levelBackground", "name": "Level background", "subLabel": "Enabled", - "type": "color", - "default": "#1abb48", - "divider": true + "type": "color-settings", + "default": { + "type": "constant", + "color": "#1abb48", + "colorFunction": "return value > 70 ? '#d5280d' : '#1abb48';" + }, + "divider": true, + "rowClass": "column-xs" }, { "id": "disabledLevelBackground", @@ -297,11 +490,32 @@ } ] } + min - N/A - max + + N/A + Level + max + + + + + + On + + + + Off + From ebce8698e346eab5cf1fe5c4369850573f7cc664 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Tue, 7 May 2024 19:58:48 +0300 Subject: [PATCH 022/442] UI: Refactoring. --- ui-ngx/src/app/core/api/widget-api.models.ts | 3 +- .../basic/basic-widget-config.module.ts | 10 +- .../scada-test-basic-config.component.html | 26 - .../svg/iot-svg-basic-config.component.html | 48 ++ .../iot-svg-basic-config.component.ts} | 55 +- .../widget/lib/scada/scada.models.ts | 797 ------------------ .../iot-svg-object-settings.component.html} | 15 +- .../iot-svg-object-settings.component.ts} | 34 +- .../iot-svg-object-settings.models.ts} | 8 +- .../common/widget-settings-common.module.ts | 8 +- .../iot-svg-widget.component.html} | 9 +- .../iot-svg-widget.component.scss} | 34 +- .../iot-svg-widget.component.ts} | 59 +- .../iot-svg-widget.models.ts} | 23 +- .../widget/lib/svg/iot-svg.models.ts | 634 ++++++++++++++ .../widget/widget-components.module.ts | 6 +- .../components/widget/widget.component.ts | 35 +- .../assets/widget/{scada => svg}/drawing.svg | 382 ++------- 18 files changed, 970 insertions(+), 1216 deletions(-) delete mode 100644 ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-test-basic-config.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/config/basic/svg/iot-svg-basic-config.component.html rename ui-ngx/src/app/modules/home/components/widget/config/basic/{scada/scada-test-basic-config.component.ts => svg/iot-svg-basic-config.component.ts} (50%) delete mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/scada/scada.models.ts rename ui-ngx/src/app/modules/home/components/widget/lib/settings/common/{scada/scada-object-settings.component.html => svg/iot-svg-object-settings.component.html} (87%) rename ui-ngx/src/app/modules/home/components/widget/lib/settings/common/{scada/scada-object-settings.component.ts => svg/iot-svg-object-settings.component.ts} (88%) rename ui-ngx/src/app/modules/home/components/widget/lib/settings/common/{scada/scada-object-settings.models.ts => svg/iot-svg-object-settings.models.ts} (82%) rename ui-ngx/src/app/modules/home/components/widget/lib/{scada/scada-test-widget.component.html => svg/iot-svg-widget.component.html} (57%) rename ui-ngx/src/app/modules/home/components/widget/lib/{scada/scada-test-widget.component.scss => svg/iot-svg-widget.component.scss} (54%) rename ui-ngx/src/app/modules/home/components/widget/lib/{scada/scada-test-widget.component.ts => svg/iot-svg-widget.component.ts} (51%) rename ui-ngx/src/app/modules/home/components/widget/lib/{scada/scada-test-widget.models.ts => svg/iot-svg-widget.models.ts} (50%) create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts rename ui-ngx/src/assets/widget/{scada => svg}/drawing.svg (54%) diff --git a/ui-ngx/src/app/core/api/widget-api.models.ts b/ui-ngx/src/app/core/api/widget-api.models.ts index 1fcd18bd93..0300c89d7f 100644 --- a/ui-ngx/src/app/core/api/widget-api.models.ts +++ b/ui-ngx/src/app/core/api/widget-api.models.ts @@ -23,7 +23,7 @@ import { DatasourceType, KeyInfo, LegendConfig, - LegendData, TargetDevice, + LegendData, TargetDevice, WidgetAction, WidgetActionDescriptor, widgetType } from '@shared/models/widget.models'; @@ -95,6 +95,7 @@ export interface WidgetActionsApi { getActionDescriptors: (actionSourceId: string) => Array; handleWidgetAction: ($event: Event, descriptor: WidgetActionDescriptor, entityId?: EntityId, entityName?: string, additionalParams?: any, entityLabel?: string) => void; + onWidgetAction: ($event: Event, action: WidgetAction) => void; elementClick: ($event: Event) => void; cardClick: ($event: Event) => void; click: ($event: Event) => void; diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts index 79af9bee18..6f83f9ac25 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts @@ -129,9 +129,7 @@ import { import { RadarChartBasicConfigComponent } from '@home/components/widget/config/basic/chart/radar-chart-basic-config.component'; -import { - ScadaTestBasicConfigComponent -} from '@home/components/widget/config/basic/scada/scada-test-basic-config.component'; +import { IotSvgBasicConfigComponent } from '@home/components/widget/config/basic/svg/iot-svg-basic-config.component'; @NgModule({ declarations: [ @@ -175,7 +173,7 @@ import { BarChartBasicConfigComponent, PolarAreaChartBasicConfigComponent, RadarChartBasicConfigComponent, - ScadaTestBasicConfigComponent + IotSvgBasicConfigComponent ], imports: [ CommonModule, @@ -221,7 +219,7 @@ import { BarChartBasicConfigComponent, PolarAreaChartBasicConfigComponent, RadarChartBasicConfigComponent, - ScadaTestBasicConfigComponent + IotSvgBasicConfigComponent ] }) export class BasicWidgetConfigModule { @@ -261,5 +259,5 @@ export const basicWidgetConfigComponentsMap: {[key: string]: Type - - - - - diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/svg/iot-svg-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/svg/iot-svg-basic-config.component.html new file mode 100644 index 0000000000..f0dfeacf66 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/svg/iot-svg-basic-config.component.html @@ -0,0 +1,48 @@ + + + + + +
+
widget-config.card-appearance
+
+
{{ 'widgets.background.background' | translate }}
+ + +
+
+
widget-config.show-card-buttons
+ + {{ 'fullscreen.fullscreen' | translate }} + +
+
+
{{ 'widget-config.card-border-radius' | translate }}
+ + + +
+
+ diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-test-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/svg/iot-svg-basic-config.component.ts similarity index 50% rename from ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-test-basic-config.component.ts rename to ui-ngx/src/app/modules/home/components/widget/config/basic/svg/iot-svg-basic-config.component.ts index 3d6a4a6a45..cccdf03aba 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-test-basic-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/svg/iot-svg-basic-config.component.ts @@ -20,22 +20,26 @@ 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 { TargetDevice, } from '@shared/models/widget.models'; +import { TargetDevice, WidgetConfig, } from '@shared/models/widget.models'; import { WidgetConfigComponent } from '@home/components/widget/widget-config.component'; -import { ScadaTestWidgetSettings } from '@home/components/widget/lib/scada/scada-test-widget.models'; +import { + iotSvgWidgetDefaultSettings, + IotSvgWidgetSettings +} from '@home/components/widget/lib/svg/iot-svg-widget.models'; +import { isUndefined } from '@core/utils'; @Component({ - selector: 'tb-scada-test-basic-config', - templateUrl: './scada-test-basic-config.component.html', + selector: 'tb-iot-svg-basic-config', + templateUrl: './iot-svg-basic-config.component.html', styleUrls: ['../basic-config.scss'] }) -export class ScadaTestBasicConfigComponent extends BasicWidgetConfigComponent { +export class IotSvgBasicConfigComponent extends BasicWidgetConfigComponent { get targetDevice(): TargetDevice { - return this.scadaTestWidgetConfigForm.get('targetDevice').value; + return this.iotSvgWidgetConfigForm.get('targetDevice').value; } - scadaTestWidgetConfigForm: UntypedFormGroup; + iotSvgWidgetConfigForm: UntypedFormGroup; constructor(protected store: Store, protected widgetConfigComponent: WidgetConfigComponent, @@ -44,21 +48,48 @@ export class ScadaTestBasicConfigComponent extends BasicWidgetConfigComponent { } protected configForm(): UntypedFormGroup { - return this.scadaTestWidgetConfigForm; + return this.iotSvgWidgetConfigForm; } protected onConfigSet(configData: WidgetConfigComponentData) { - const settings: ScadaTestWidgetSettings = {...(configData.config.settings as ScadaTestWidgetSettings || { scadaObject: {}})}; - this.scadaTestWidgetConfigForm = this.fb.group({ + const settings: IotSvgWidgetSettings = {...iotSvgWidgetDefaultSettings, ...(configData.config.settings || {})}; + this.iotSvgWidgetConfigForm = this.fb.group({ targetDevice: [configData.config.targetDevice, []], - scadaObject: [settings.scadaObject, []] + iotSvg: [settings.iotSvg, []], + iotSvgObject: [settings.iotSvgObject, []], + + background: [settings.background, []], + + cardButtons: [this.getCardButtons(configData.config), []], + borderRadius: [configData.config.borderRadius, []], + + actions: [configData.config.actions || {}, []] }); } protected prepareOutputConfig(config: any): WidgetConfigComponentData { this.widgetConfig.config.targetDevice = config.targetDevice; this.widgetConfig.config.settings = this.widgetConfig.config.settings || {}; - this.widgetConfig.config.settings.scadaObject = config.scadaObject; + this.widgetConfig.config.settings.iotSvg = config.iotSvg; + this.widgetConfig.config.settings.iotSvgObject = config.iotSvgObject; + this.widgetConfig.config.settings.background = config.background; + + 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'); + } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada.models.ts deleted file mode 100644 index d0aeac27a7..0000000000 --- a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada.models.ts +++ /dev/null @@ -1,797 +0,0 @@ -/// -/// Copyright ยฉ 2016-2024 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 { ValueType } from '@shared/models/constants'; -import { Box, Element, Runner, Svg, SVG, Timeline, Text } from '@svgdotjs/svg.js'; -import { - DataToValueType, - GetValueAction, - GetValueSettings, SetValueAction, - SetValueSettings, ValueToDataType -} from '@shared/models/action-widget-settings.models'; -import { - formatValue, - insertVariable, - isDefinedAndNotNull, - isNumber, - isNumeric, - isUndefinedOrNull, - mergeDeep, - parseFunction -} from '@core/utils'; -import { BehaviorSubject, forkJoin, Observable } from 'rxjs'; -import { map, share } from 'rxjs/operators'; -import { ValueAction, ValueGetter, ValueSetter } from '@home/components/widget/lib/action/action-widget.models'; -import { WidgetContext } from '@home/models/widget-component.models'; -import { ColorProcessor, constantColor, Font } from '@shared/models/widget-settings.models'; -import { AttributeScope } from '@shared/models/telemetry/telemetry.models'; - -export type ScadaObjectValueType = 'input' | 'constant' | 'property' | 'function' | 'valueFormat'; - -export interface ScadaObjectValueBase { - type: ScadaObjectValueType; -} - -export interface ScadaObjectValueConstant extends ScadaObjectValueBase { - constantValue?: any; -} - -export interface ScadaObjectValueProperty extends ScadaObjectValueBase { - propertyId?: string; - computedPropertyValue?: any; -} - -export interface ScadaObjectValueFunction extends ScadaObjectValueBase { - valueConvertFunction?: string; - valueConverter?: (val: any) => any; -} - -export interface ScadaObjectValueFormat extends ScadaObjectValueBase { - units?: ScadaObjectValue; - decimals?: ScadaObjectValue; - computedUnits?: string; - computedDecimals?: number; -} - -export type ScadaObjectValue = ScadaObjectValueProperty & ScadaObjectValueConstant & ScadaObjectValueFunction & ScadaObjectValueFormat; - -export interface ScadaObjectAttribute { - name: string; - value: ScadaObjectValue; -} - -export interface ScadaObjectText { - content?: ScadaObjectValue; - font?: ScadaObjectValue; - color?: ScadaObjectValue; -} - -export interface ScadaObjectElementState { - tag: string; - inputValue?: string; - show?: ScadaObjectValue; - text?: ScadaObjectText; - attributes?: ScadaObjectAttribute[]; - animate?: number; - addClass?: string; - removeClass?: string; - animationTimeline?: Timeline; -} - -export interface ScadaObjectState { - initial?: boolean; - triggerValues?: string[]; - conditionFunction?: string; - condition?: (values: {[key: string]: any}) => boolean; - state: ScadaObjectElementState[]; -} - -export interface ScadaObjectUpdateState { - updateValue: string; -} - -export enum ScadaObjectBehaviorType { - setValue = 'setValue', - getValue = 'getValue' -} - -export interface ScadaObjectBehaviorBase { - id: string; - name: string; - type: ScadaObjectBehaviorType; -} - -export interface ScadaObjectBehaviorGet extends ScadaObjectBehaviorBase { - valueType: ValueType; - defaultValue: any; - onUpdate: ScadaObjectUpdateState[]; -} - -export interface ScadaObjectBehaviorSet extends ScadaObjectBehaviorBase { - valueToDataType: ValueToDataType; - constantValue: any; - valueToDataFunction: string; -} - -export type ScadaObjectBehavior = ScadaObjectBehaviorGet | ScadaObjectBehaviorSet; - -export type ScadaObjectPropertyType = 'string' | 'number' | 'color' | 'color-settings' | 'font' | 'units' | 'switch'; - -export interface ScadaObjectPropertyBase { - id: string; - name: string; - type: ScadaObjectPropertyType; - default: any; - required?: boolean; - subLabel?: string; - divider?: boolean; - fieldSuffix?: string; - disableOnProperty?: string; - rowClass?: string; - fieldClass?: string; -} - -export interface ScadaObjectNumberProperty extends ScadaObjectPropertyBase { - min?: number; - max?: number; - step?: number; -} - -export type ScadaObjectProperty = ScadaObjectPropertyBase & ScadaObjectNumberProperty; - -export interface ScadaObjectCallBehavior { - behaviorId: string; - conditionFunction?: string; - condition?: (value: any) => boolean; -} - -export interface ScadaObjectStateValue { - initialValue: any; - callBehavior?: ScadaObjectCallBehavior[]; -} - -export type ScadaObjectElementActionTrigger = 'click'; - -export type ScadaObjectActionType = 'updateValue'; -export type ScadaObjectActionUpdateValueType = 'toggle' | 'increment' | 'constant'; - -export interface ScadaObjectElementAction { - trigger: ScadaObjectElementActionTrigger; - enabledTriggerValues?: string[]; - enabledConditionFunction?: string; - enabledCondition?: (values: {[key: string]: any}) => boolean; - actionType: ScadaObjectActionType; - updateValueId?: string; - updateValueType?: ScadaObjectActionUpdateValueType; - updateValueConstant?: any; - updateValueInc?: number; -} - -export interface ScadaObjectMetadata { - title: string; - stateValues: {[id: string]: ScadaObjectStateValue}; - actions: {[tag: string]: ScadaObjectElementAction}; - states: {[id: string]: ScadaObjectState}; - behavior: ScadaObjectBehavior[]; - properties: ScadaObjectProperty[]; -} - -export const emptyMetadata: ScadaObjectMetadata = { - title: '', - stateValues: {}, - actions: {}, - states: {}, - behavior: [], - properties: [] -}; - - -export const parseScadaObjectMetadataFromContent = (svgContent: string): ScadaObjectMetadata => { - try { - const svgDoc = new DOMParser().parseFromString(svgContent, 'image/svg+xml'); - return parseScadaObjectMetadataFromDom(svgDoc); - } catch (_e) { - return emptyMetadata; - } -}; - -const parseScadaObjectMetadataFromDom = (svgDoc: Document): ScadaObjectMetadata => { - try { - const elements = svgDoc.getElementsByTagName('tb:metadata'); - if (elements.length) { - return JSON.parse(elements[0].innerHTML); - } else { - return emptyMetadata; - } - } catch (_e) { - console.error(_e); - return emptyMetadata; - } -}; - -const defaultGetValueSettings = (get: ScadaObjectBehaviorGet): GetValueSettings => ({ - action: GetValueAction.DO_NOTHING, - defaultValue: get.defaultValue, - executeRpc: { - method: 'getState', - requestTimeout: 5000, - requestPersistent: false, - persistentPollingInterval: 1000 - }, - getAttribute: { - key: 'state', - scope: null - }, - getTimeSeries: { - key: 'state' - }, - dataToValue: { - type: DataToValueType.NONE, - compareToValue: true, - dataToValueFunction: '/* Should return boolean value */\nreturn data;' - } - }); - -const defaultSetValueSettings = (set: ScadaObjectBehaviorSet): SetValueSettings => ({ - action: SetValueAction.EXECUTE_RPC, - executeRpc: { - method: 'setState', - requestTimeout: 5000, - requestPersistent: false, - persistentPollingInterval: 1000 - }, - setAttribute: { - key: 'state', - scope: AttributeScope.SERVER_SCOPE - }, - putTimeSeries: { - key: 'state' - }, - valueToData: { - type: set.valueToDataType, - constantValue: set.constantValue, - valueToDataFunction: set.valueToDataFunction ? set.valueToDataFunction : - '/* Convert input boolean value to RPC parameters or attribute/time-series value */\nreturn value;' - } -}); - -export const defaultScadaObjectSettings = (metadata: ScadaObjectMetadata): ScadaObjectSettings => { - const settings: ScadaObjectSettings = {}; - for (const behavior of metadata.behavior) { - if (behavior.type === ScadaObjectBehaviorType.getValue) { - settings[behavior.id] = defaultGetValueSettings(behavior as ScadaObjectBehaviorGet); - } else if (behavior.type === ScadaObjectBehaviorType.setValue) { - settings[behavior.id] = defaultSetValueSettings(behavior as ScadaObjectBehaviorSet); - } - } - for (const property of metadata.properties) { - settings[property.id] = property.default; - } - return settings; -}; - -export type ScadaObjectSettings = {[id: string]: any}; - -export class ScadaObject { - - private metadata: ScadaObjectMetadata; - private settings: ScadaObjectSettings; - - private rootElement: HTMLElement; - private svgShape: Svg; - private box: Box; - private targetWidth: number; - private targetHeight: number; - - private loadingSubject = new BehaviorSubject(false); - private valueGetters: ValueGetter[] = []; - private valueActions: ValueAction[] = []; - private valueSetters: {[behaviorId: string]: ValueSetter} = {}; - - private stateValueSubjects: {[id: string]: BehaviorSubject} = {}; - private stateValues: {[id: string]: any} = {}; - - loading$ = this.loadingSubject.asObservable().pipe(share()); - - constructor(private ctx: WidgetContext, - private svgPath: string, - private inputSettings: ScadaObjectSettings) {} - - public init(): Observable { - return this.ctx.http.get(this.svgPath, {responseType: 'text'}).pipe( - map((inputSvgContent) => { - const doc: XMLDocument = new DOMParser().parseFromString(inputSvgContent, 'image/svg+xml'); - this.metadata = parseScadaObjectMetadataFromDom(doc); - const defaults = defaultScadaObjectSettings(this.metadata); - this.settings = mergeDeep({}, defaults, this.inputSettings || {}); - this.prepareMetadata(); - this.prepareSvgShape(doc); - this.initStates(); - }) - ); - } - - public addTo(element: HTMLElement) { - this.rootElement = element; - if (this.svgShape) { - this.svgShape.addTo(element); - } - } - - public destroy() { - for (const stateValueId of Object.keys(this.stateValueSubjects)) { - this.stateValueSubjects[stateValueId].complete(); - this.stateValueSubjects[stateValueId].unsubscribe(); - } - this.valueActions.forEach(v => v.destroy()); - this.loadingSubject.complete(); - this.loadingSubject.unsubscribe(); - } - - public setSize(targetWidth: number, targetHeight: number) { - this.targetWidth = targetWidth; - this.targetHeight = targetHeight; - if (this.svgShape) { - this.resize(); - } - } - - private prepareMetadata() { - for (const stateValueId of Object.keys(this.metadata.stateValues)) { - const stateValue = this.metadata.stateValues[stateValueId]; - if (stateValue.callBehavior) { - stateValue.callBehavior.forEach(callBehavior => { - let condition = () => true; - if (callBehavior.conditionFunction) { - try { - condition = parseFunction(this.insertVariables(callBehavior.conditionFunction), ['value']); - } catch (e) { - condition = () => false; - } - } - callBehavior.condition = condition; - }); - } - } - for (const stateId of Object.keys(this.metadata.states)) { - const state = this.metadata.states[stateId]; - let condition = () => true; - if (state.conditionFunction) { - try { - condition = parseFunction(this.insertVariables(state.conditionFunction), ['values']); - } catch (e) { - condition = () => false; - } - } - state.condition = condition; - for (const elementState of state.state) { - this.prepareValue(elementState.show); - this.prepareValue(elementState.text?.content); - this.prepareValue(elementState.text?.font); - this.prepareValue(elementState.text?.color); - if (elementState.attributes) { - for (const attribute of elementState.attributes) { - this.prepareValue(attribute.value); - } - } - } - } - } - - private prepareValue(value: ScadaObjectValue) { - if (value) { - if (value.type === 'function' && value.valueConvertFunction) { - try { - value.valueConverter = parseFunction(this.insertVariables(value.valueConvertFunction), ['value']); - } catch (e) { - value.valueConverter = (v) => v; - } - } else if (value.type === 'property') { - value.computedPropertyValue = this.getPropertyValue(value.propertyId); - } else if (value.type === 'valueFormat') { - if (value.units) { - this.prepareValue(value.units); - } - if (value.decimals) { - this.prepareValue(value.decimals); - } - } - } - } - - private insertVariables(content: string): string { - for (const property of this.metadata.properties) { - const value = this.getPropertyValue(property.id); - content = insertVariable(content, property.id, value); - } - return content; - } - - private prepareSvgShape(doc: XMLDocument) { - const elements = doc.getElementsByTagName('tb:metadata'); - for (let i=0;i(stateValue.initialValue); - this.stateValues[stateValueId] = stateValue.initialValue; - this.stateValueSubjects[stateValueId].subscribe(val => { - this.stateValues[stateValueId] = val; - const states = Object.values(this.metadata.states); - const triggerStates = states.filter(s => s.triggerValues && s.triggerValues.includes(stateValueId)); - for (const state of triggerStates) { - if (state.condition(this.stateValues)) { - this.updateState(state); - } - } - }); - } - for (const tag of Object.keys(this.metadata.actions)) { - const action = this.metadata.actions[tag]; - const elements = this.svgShape.find(`[tb\\:tag="${tag}"]`); - switch (action.trigger) { - case 'click': - elements.forEach(e => { - e.attr('cursor', 'pointer'); - e.on('click', () => { - this.triggerAction(action); - }); - }); - break; - } - } - for (const behavior of this.metadata.behavior) { - if (behavior.type === ScadaObjectBehaviorType.getValue) { - const getBehavior = behavior as ScadaObjectBehaviorGet; - let getValueSettings: GetValueSettings = this.settings[getBehavior.id]; - getValueSettings = {...getValueSettings, actionLabel: getBehavior.name}; - const valueGetter = - ValueGetter.fromSettings(this.ctx, getValueSettings, getBehavior.valueType, { - next: (val) => {this.onValue(getBehavior.id, val);}, - error: (e) => {} - }); - this.valueGetters.push(valueGetter); - this.valueActions.push(valueGetter); - } else if (behavior.type === ScadaObjectBehaviorType.setValue) { - const setBehavior = behavior as ScadaObjectBehaviorSet; - let setValueSettings: SetValueSettings = this.settings[setBehavior.id]; - setValueSettings = {...setValueSettings, actionLabel: setBehavior.name}; - const valueSetter = ValueSetter.fromSettings(this.ctx, setValueSettings); - this.valueSetters[setBehavior.id] = valueSetter; - this.valueActions.push(valueSetter); - } - } - const initialState = Object.values(this.metadata.states).find(s => s.initial); - if (initialState) { - this.updateState(initialState); - } - if (this.valueGetters.length) { - const getValueObservables: Array> = []; - this.valueGetters.forEach(valueGetter => { - getValueObservables.push(valueGetter.getValue()); - }); - this.loadingSubject.next(true); - forkJoin(getValueObservables).subscribe( - { - next: () => { - this.loadingSubject.next(false); - }, - error: () => { - this.loadingSubject.next(false); - } - } - ); - } - } - - private triggerAction(action: ScadaObjectElementAction) { - switch (action.actionType) { - case 'updateValue': - const targetValue = action.updateValueId; - const valueSubject = this.stateValueSubjects[targetValue]; - if (valueSubject) { - const currentVal = valueSubject.value; - let newValue: any; - switch (action.updateValueType) { - case 'toggle': - newValue = !currentVal; - break; - case 'increment': - if (isNumber(currentVal)) { - newValue = currentVal + action.updateValueInc; - } - break; - case 'constant': - newValue = action.updateValueConstant; - break; - } - if (isDefinedAndNotNull(newValue)) { - valueSubject.next(newValue); - const stateValue = this.metadata.stateValues[targetValue]; - if (stateValue.callBehavior) { - const observables: Observable[] = []; - for (const behavior of stateValue.callBehavior) { - if (behavior.condition(newValue)) { - const valueSetter = this.valueSetters[behavior.behaviorId]; - observables.push(valueSetter.setValue(newValue)); - } - } - if (observables.length) { - this.loadingSubject.next(true); - forkJoin(observables).subscribe( - { - next: () => { - this.loadingSubject.next(false); - }, - error: (err) => { - this.loadingSubject.next(false); - valueSubject.next(currentVal); - } - } - ); - } - } - } - } - break; - } - } - - private resize() { - let scale: number; - if (this.targetWidth < this.targetHeight) { - scale = this.targetWidth / this.box.width; - } else { - scale = this.targetHeight / this.box.height; - } - this.svgShape.node.style.transform = `scale(${scale})`; - } - - private onValue(id: string, value: any) { - const getBehavior = this.metadata.behavior.find(b => b.id === id) as ScadaObjectBehaviorGet; - value = this.normalizeValue(value, getBehavior.valueType); - for (const onUpdate of getBehavior.onUpdate) { - const targetStateValueId = onUpdate.updateValue; - this.stateValueSubjects[targetStateValueId].next(value); - } - } - - private updateState(state: ScadaObjectState) { - if (state) { - for (const elementState of state.state) { - const tag = elementState.tag; - let value; - if (elementState.inputValue) { - value = this.stateValues[elementState.inputValue]; - } - if (elementState.animationTimeline) { - elementState.animationTimeline.finish(); - } - const elements = this.svgShape.find(`[tb\\:tag="${tag}"]`); - if (elements.length) { - if (elementState.show) { - const show: boolean = this.computeValue(elementState.show, value); - elements.forEach(e => { - if (show) { - e.show(); - } else { - e.hide(); - } - }); - } - if (elementState.addClass) { - elements.forEach(e => { - e.addClass(elementState.addClass); - }); - } - if (elementState.removeClass) { - elements.forEach(e => { - e.removeClass(elementState.removeClass); - }); - } - if (elementState.attributes) { - const attrs = this.computeAttributes(elementState.attributes, value); - elements.forEach(e => { - this.setElementAttributes(elementState, e, attrs, elementState.animate); - }); - } - if (elementState.text) { - if (elementState.text.content) { - const text: string = this.computeValue(elementState.text.content, value); - elements.forEach(e => { - this.setElementText(e, text); - }); - } - if (elementState.text.font || elementState.text.color) { - let font: Font = this.computeValue(elementState.text.font, value); - if (typeof font !== 'object') { - font = undefined; - } - let color: string = this.computeValue(elementState.text.color, value); - if (typeof color !== 'string') { - color = undefined; - } - elements.forEach(e => { - this.setElementFont(e, font, color); - }); - } - } - } - } - } - } - - private normalizeValue(value: any, type: ValueType): any { - if (isUndefinedOrNull(value)) { - switch (type) { - case ValueType.STRING: - return ''; - case ValueType.INTEGER: - case ValueType.DOUBLE: - return 0; - case ValueType.BOOLEAN: - return false; - case ValueType.JSON: - return {}; - } - } else { - return value; - } - } - - private computeAttributes(attributes: ScadaObjectAttribute[], value: any): {[attr: string]: any} { - const res: {[attr: string]: any} = {}; - for (const attribute of attributes) { - const attr = attribute.name; - res[attr] = this.computeValue(attribute.value, value); - } - return res; - } - - private setElementAttributes(elementState: ScadaObjectElementState, element: Element, attrs: {[attr: string]: any}, animate?: number) { - if (isDefinedAndNotNull(animate)) { - this.animation(elementState, element, animate).attr(attrs); - } else { - element.attr(attrs); - } - } - - private setElementText(element: Element, text: string) { - let textElement: Text; - if (element.type === 'text') { - const children = element.children(); - if (children.length && children[0].type === 'tspan') { - textElement = children[0] as Text; - } else { - textElement = element as Text; - } - } else if (element.type === 'tspan') { - textElement = element as Text; - } - if (textElement) { - textElement.text(text); - } - } - - private setElementFont(element: Element, font: Font, color: string) { - if (element.type === 'text') { - const textElement = element as Text; - if (font) { - textElement.font({ - family: font.family, - size: (isDefinedAndNotNull(font.size) && isDefinedAndNotNull(font.sizeUnit)) ? - font.size + font.sizeUnit : null, - weight: font.weight, - style: font.style - }); - } - if (color) { - textElement.fill(color); - } - } - } - - private animation(elementState: ScadaObjectElementState, element: Element, duration: number): Runner { - if (!elementState.animationTimeline) { - elementState.animationTimeline = new Timeline(); - } - element.timeline(elementState.animationTimeline); - return element.animate(duration, 0, 'now'); - } - - private computeValue(objectValue: ScadaObjectValue, value: any): any { - if (objectValue) { - switch (objectValue.type) { - case 'input': - return value; - case 'constant': - return objectValue.constantValue; - case 'property': - const property = this.getProperty(objectValue.propertyId); - if (property.type === 'color-settings') { - const colorProcessor: ColorProcessor = objectValue.computedPropertyValue; - colorProcessor.update(value); - return colorProcessor.color; - } else { - return objectValue.computedPropertyValue; - } - case 'function': - try { - return objectValue.valueConverter(value); - } catch (_e) { - return value; - } - case 'valueFormat': - let units = ''; - let decimals = 0; - if (objectValue.units) { - units = this.computeValue(objectValue.units, value); - } - if (objectValue.decimals) { - decimals = this.computeValue(objectValue.decimals, value); - } - return formatValue(value, decimals, units, false); - } - } else { - return ''; - } - } - - private getProperty(id: string): ScadaObjectProperty { - return this.metadata.properties.find(p => p.id === id); - } - - private getPropertyValue(id: string): any { - const property = this.getProperty(id); - if (property) { - const value = this.settings[id]; - if (isDefinedAndNotNull(value)) { - if (property.type === 'color-settings') { - return ColorProcessor.fromSettings(value); - } - return value; - } else { - switch (property.type) { - case 'string': - return ''; - case 'number': - return 0; - case 'color': - return '#000'; - case 'color-settings': - return constantColor('#000'); - } - } - } else { - return ''; - } - } -} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-object-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.html similarity index 87% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-object-settings.component.html rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.html index 972a5c532c..6d4345825e 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-object-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.html @@ -21,7 +21,7 @@
widgets.slider.behavior
{{ behaviour.name }}
- - + formControlName="{{ behaviour.id }}"> + + +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-object-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.ts similarity index 88% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-object-settings.component.ts rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.ts index 3e0bd7409d..32cec1be22 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-object-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.ts @@ -31,10 +31,10 @@ import { AppState } from '@core/core.state'; import { defaultScadaObjectSettings, parseScadaObjectMetadataFromContent, - ScadaObjectBehaviorType, - ScadaObjectMetadata, - ScadaObjectSettings -} from '@home/components/widget/lib/scada/scada.models'; + IotSvgBehaviorType, + IotSvgMetadata, + IotSvgObjectSettings +} from '@home/components/widget/lib/svg/iot-svg.models'; import { HttpClient } from '@angular/common/http'; import { ValueType } from '@shared/models/constants'; import { IAliasController } from '@core/api/widget-api.models'; @@ -43,35 +43,36 @@ import { isDefinedAndNotNull } from '@core/utils'; import { ScadaPropertyRow, toPropertyRows -} from '@home/components/widget/lib/settings/common/scada/scada-object-settings.models'; +} from '@home/components/widget/lib/settings/common/svg/iot-svg-object-settings.models'; import { merge, Observable, Subscription } from 'rxjs'; +import { WidgetActionCallbacks } from '@home/components/widget/action/manage-widget-actions.component.models'; @Component({ - selector: 'tb-scada-object-settings', - templateUrl: './scada-object-settings.component.html', + selector: 'tb-iot-svg-object-settings', + templateUrl: './iot-svg-object-settings.component.html', styleUrls: ['./../../widget-settings.scss'], providers: [ { provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => ScadaObjectSettingsComponent), + useExisting: forwardRef(() => IotSvgObjectSettingsComponent), multi: true }, { provide: NG_VALIDATORS, - useExisting: forwardRef(() => ScadaObjectSettingsComponent), + useExisting: forwardRef(() => IotSvgObjectSettingsComponent), multi: true } ] }) -export class ScadaObjectSettingsComponent implements OnInit, OnChanges, ControlValueAccessor, Validator { +export class IotSvgObjectSettingsComponent implements OnInit, OnChanges, ControlValueAccessor, Validator { - ScadaObjectBehaviorType = ScadaObjectBehaviorType; + IotSvgBehaviorType = IotSvgBehaviorType; @Input() disabled: boolean; @Input() - svgPath = '/assets/widget/scada/drawing.svg'; + svgPath = 'drawing.svg'; @Input() aliasController: IAliasController; @@ -79,10 +80,13 @@ export class ScadaObjectSettingsComponent implements OnInit, OnChanges, ControlV @Input() targetDevice: TargetDevice; + @Input() + callbacks: WidgetActionCallbacks; + @Input() widgetType: widgetType; - private modelValue: ScadaObjectSettings; + private modelValue: IotSvgObjectSettings; private propagateChange = null; @@ -91,7 +95,7 @@ export class ScadaObjectSettingsComponent implements OnInit, OnChanges, ControlV public scadaObjectSettingsFormGroup: UntypedFormGroup; - metadata: ScadaObjectMetadata; + metadata: IotSvgMetadata; propertyRows: ScadaPropertyRow[]; constructor(protected store: Store, @@ -136,7 +140,7 @@ export class ScadaObjectSettingsComponent implements OnInit, OnChanges, ControlV } } - writeValue(value: ScadaObjectSettings): void { + writeValue(value: IotSvgObjectSettings): void { this.modelValue = value || {}; this.setupValue(); } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-object-settings.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.models.ts similarity index 82% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-object-settings.models.ts rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.models.ts index 07009a98cf..12231d2b1a 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-object-settings.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.models.ts @@ -14,16 +14,16 @@ /// limitations under the License. /// -import { ScadaObjectProperty } from '@home/components/widget/lib/scada/scada.models'; +import { IotSvgProperty } from '@home/components/widget/lib/svg/iot-svg.models'; export interface ScadaPropertyRow { label: string; - properties: ScadaObjectProperty[]; - switch?: ScadaObjectProperty; + properties: IotSvgProperty[]; + switch?: IotSvgProperty; rowClass?: string; } -export const toPropertyRows = (properties: ScadaObjectProperty[]): ScadaPropertyRow[] => { +export const toPropertyRows = (properties: IotSvgProperty[]): ScadaPropertyRow[] => { const result: ScadaPropertyRow[] = []; for (const property of properties) { let propertyRow = result.find(r => r.label === property.name); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-settings-common.module.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-settings-common.module.ts index 152cf25b35..5f2229cba5 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-settings-common.module.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-settings-common.module.ts @@ -150,8 +150,8 @@ import { } from '@home/components/widget/lib/settings/common/indicator/status-widget-state-settings.component'; import { ChartBarSettingsComponent } from '@home/components/widget/lib/settings/common/chart/chart-bar-settings.component'; import { - ScadaObjectSettingsComponent -} from '@home/components/widget/lib/settings/common/scada/scada-object-settings.component'; + IotSvgObjectSettingsComponent +} from '@home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component'; @NgModule({ declarations: [ @@ -207,7 +207,7 @@ import { TimeSeriesChartStateRowComponent, TimeSeriesChartGridSettingsComponent, StatusWidgetStateSettingsComponent, - ScadaObjectSettingsComponent, + IotSvgObjectSettingsComponent, DataKeyInputComponent, EntityAliasInputComponent ], @@ -269,7 +269,7 @@ import { TimeSeriesChartStateRowComponent, TimeSeriesChartGridSettingsComponent, StatusWidgetStateSettingsComponent, - ScadaObjectSettingsComponent, + IotSvgObjectSettingsComponent, DataKeyInputComponent, EntityAliasInputComponent ], diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-test-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.component.html similarity index 57% rename from ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-test-widget.component.html rename to ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.component.html index f811e7f889..b2f4ce1815 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-test-widget.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.component.html @@ -15,5 +15,12 @@ limitations under the License. --> -
+
+
+ +
+
+
+
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-test-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.component.scss similarity index 54% rename from ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-test-widget.component.scss rename to ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.component.scss index 5012fe3a7c..b109bac863 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-test-widget.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.component.scss @@ -13,10 +13,38 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -.tb-scada-shape { + +.tb-iot-svg-panel { width: 100%; height: 100%; + position: relative; display: flex; - align-items: center; - justify-content: center; + flex-direction: column; + gap: 16px; + padding: 20px 24px 24px 24px; + > div:not(.tb-iot-svg-overlay) { + z-index: 1; + } + .tb-iot-svg-overlay { + position: absolute; + top: 12px; + left: 12px; + bottom: 12px; + right: 12px; + } + div.tb-widget-title { + padding: 0; + } + .tb-iot-svg-content { + flex: 1; + min-width: 0; + min-height: 0; + .tb-iot-svg-shape { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-test-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.component.ts similarity index 51% rename from ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-test-widget.component.ts rename to ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.component.ts index 25451dcf15..c7b5e87723 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-test-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.component.ts @@ -28,28 +28,35 @@ import { import { BasicActionWidgetComponent } from '@home/components/widget/lib/action/action-widget.models'; import { ImagePipe } from '@shared/pipe/image.pipe'; import { DomSanitizer } from '@angular/platform-browser'; -import { SVG, Svg } from '@svgdotjs/svg.js'; import { HttpClient } from '@angular/common/http'; -import { ScadaObject, ScadaObjectSettings } from '@home/components/widget/lib/scada/scada.models'; +import { IotSvgObject } from '@home/components/widget/lib/svg/iot-svg.models'; import { ResizeObserver } from '@juggle/resize-observer'; -import { ScadaTestWidgetSettings } from '@home/components/widget/lib/scada/scada-test-widget.models'; +import { + iotSvgWidgetDefaultSettings, + IotSvgWidgetSettings +} from '@home/components/widget/lib/svg/iot-svg-widget.models'; +import { Observable } from 'rxjs'; +import { backgroundStyle, ComponentStyle, overlayStyle } from '@shared/models/widget-settings.models'; @Component({ - selector: 'tb-scada-test-widget', - templateUrl: './scada-test-widget.component.html', - styleUrls: ['../action/action-widget.scss', './scada-test-widget.component.scss'], + selector: 'tb-iot-svg-widget', + templateUrl: './iot-svg-widget.component.html', + styleUrls: ['../action/action-widget.scss', './iot-svg-widget.component.scss'], encapsulation: ViewEncapsulation.None }) -export class ScadaTestWidgetComponent extends +export class IotSvgWidgetComponent extends BasicActionWidgetComponent implements OnInit, AfterViewInit, OnDestroy { - @ViewChild('scadaShape', {static: false}) - scadaShape: ElementRef; + @ViewChild('iotSvgShape', {static: false}) + iotSvgShape: ElementRef; + + private settings: IotSvgWidgetSettings; - private settings: ScadaTestWidgetSettings; + backgroundStyle$: Observable; + overlayStyle: ComponentStyle = {}; + iotSvgObject: IotSvgObject; private autoScale = true; - private scadaObject: ScadaObject; private shapeResize$: ResizeObserver; @@ -63,18 +70,25 @@ export class ScadaTestWidgetComponent extends ngOnInit(): void { super.ngOnInit(); - this.settings = {...this.ctx.settings}; - this.scadaObject = new ScadaObject(this.ctx, '/assets/widget/scada/drawing.svg', this.settings.scadaObject); - this.scadaObject.init().subscribe(); + this.settings = {...iotSvgWidgetDefaultSettings, ...this.ctx.settings}; + + this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer); + this.overlayStyle = overlayStyle(this.settings.background.overlay); + + this.iotSvgObject = new IotSvgObject(this.ctx, this.settings.iotSvg, this.settings.iotSvgObject); + this.iotSvgObject.onError((error) => { + this.ctx.showErrorToast(error, 'bottom', 'center', this.ctx.toastTargetId, true); + }); + this.iotSvgObject.init().subscribe(); } ngAfterViewInit(): void { - this.scadaObject.addTo(this.scadaShape.nativeElement); + this.iotSvgObject.addTo(this.iotSvgShape.nativeElement); if (this.autoScale) { this.shapeResize$ = new ResizeObserver(() => { this.onResize(); }); - this.shapeResize$.observe(this.scadaShape.nativeElement); + this.shapeResize$.observe(this.iotSvgShape.nativeElement); this.onResize(); } super.ngAfterViewInit(); @@ -84,19 +98,22 @@ export class ScadaTestWidgetComponent extends if (this.shapeResize$) { this.shapeResize$.disconnect(); } - if (this.scadaObject) { - this.scadaObject.destroy(); + if (this.iotSvgObject) { + this.iotSvgObject.destroy(); } super.ngOnDestroy(); } public onInit() { super.onInit(); + const borderRadius = this.ctx.$widgetElement.css('borderRadius'); + this.overlayStyle = {...this.overlayStyle, ...{borderRadius}}; + this.cd.detectChanges(); } private onResize() { - const shapeWidth = this.scadaShape.nativeElement.getBoundingClientRect().width; - const shapeHeight = this.scadaShape.nativeElement.getBoundingClientRect().height; - this.scadaObject.setSize(shapeWidth, shapeHeight); + const shapeWidth = this.iotSvgShape.nativeElement.getBoundingClientRect().width; + const shapeHeight = this.iotSvgShape.nativeElement.getBoundingClientRect().height; + this.iotSvgObject.setSize(shapeWidth, shapeHeight); } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-test-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.models.ts similarity index 50% rename from ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-test-widget.models.ts rename to ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.models.ts index a74d81e3d5..e4992ae62f 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-test-widget.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.models.ts @@ -14,8 +14,25 @@ /// limitations under the License. /// -import { ScadaObjectSettings } from '@home/components/widget/lib/scada/scada.models'; +import { IotSvgObjectSettings } from '@home/components/widget/lib/svg/iot-svg.models'; +import { BackgroundSettings, BackgroundType } from '@shared/models/widget-settings.models'; -export interface ScadaTestWidgetSettings { - scadaObject: ScadaObjectSettings; +export interface IotSvgWidgetSettings { + iotSvg: string; + iotSvgObject: IotSvgObjectSettings; + background: BackgroundSettings; } + +export const iotSvgWidgetDefaultSettings: IotSvgWidgetSettings = { + iotSvg: '/assets/widget/svg/drawing.svg', + iotSvgObject: {}, + background: { + type: BackgroundType.color, + color: '#fff', + overlay: { + enabled: false, + color: 'rgba(255,255,255,0.72)', + blur: 3 + } + } +}; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts new file mode 100644 index 0000000000..d0bd66dcbf --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts @@ -0,0 +1,634 @@ +/// +/// Copyright ยฉ 2016-2024 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 { ValueType } from '@shared/models/constants'; +import { Box, Element, Runner, Svg, SVG, Text } from '@svgdotjs/svg.js'; +import { + DataToValueType, + GetValueAction, + GetValueSettings, + SetValueAction, + SetValueSettings, + ValueToDataType +} from '@shared/models/action-widget-settings.models'; +import { formatValue, isDefinedAndNotNull, isUndefinedOrNull, mergeDeep, parseFunction } from '@core/utils'; +import { BehaviorSubject, forkJoin, Observable, Observer } from 'rxjs'; +import { map, share } from 'rxjs/operators'; +import { ValueAction, ValueGetter, ValueSetter } from '@home/components/widget/lib/action/action-widget.models'; +import { WidgetContext } from '@home/models/widget-component.models'; +import { ColorProcessor, constantColor, Font } from '@shared/models/widget-settings.models'; +import { AttributeScope } from '@shared/models/telemetry/telemetry.models'; +import { UtilsService } from '@core/services/utils.service'; +import { WidgetAction, WidgetActionType } from '@shared/models/widget.models'; + +export interface IotSvgApi { + formatValue: (value: any, dec?: number, units?: string, showZeroDecimals?: boolean) => string | undefined; + text: (element: Element | Element[], text: string) => void; + font: (element: Element | Element[], font: Font, color: string) => void; + animate: (element: Element, duration: number) => Runner; + disable: (element: Element | Element[]) => void; + enable: (element: Element | Element[]) => void; + callAction: (event: Event, behaviorId: string, value?: any, observer?: Partial>) => void; + setValue: (valueId: string, value: any) => void; +} + +export interface IotSvgContext { + api: IotSvgApi; + tags: {[id: string]: Element[]}; + values: {[id: string]: any}; + properties: {[id: string]: any}; +} + +export type IotSvgStateRenderFunction = (svg: Svg, ctx: IotSvgContext) => void; + +export type IotSvgTagStateRenderFunction = (element: Element, ctx: IotSvgContext) => void; + +export type IotSvgActionTrigger = 'click'; + +export type IotSvgActionFunction = (event: Event, ctx: IotSvgContext) => void; +export interface IotSvgAction { + actionFunction?: string; + action?: IotSvgActionFunction; +} + +export interface IotSvgTag { + tag: string; + stateRenderFunction?: string; + stateRender?: IotSvgTagStateRenderFunction; + actions?: {[trigger: string]: IotSvgAction}; +} + +export enum IotSvgBehaviorType { + value = 'value', + action = 'action', + widgetAction = 'widgetAction' +} + +export interface IotSvgBehaviorBase { + id: string; + name: string; + type: IotSvgBehaviorType; +} + +export interface IotSvgBehaviorValue extends IotSvgBehaviorBase { + valueType: ValueType; + defaultValue: any; + valueId: string; +} + +export interface IotSvgBehaviorAction extends IotSvgBehaviorBase { + valueToDataType: ValueToDataType; + constantValue: any; + valueToDataFunction: string; +} + +export type IotSvgBehavior = IotSvgBehaviorValue | IotSvgBehaviorAction; + +export type IotSvgPropertyType = 'string' | 'number' | 'color' | 'color-settings' | 'font' | 'units' | 'switch'; + +export interface IotSvgPropertyBase { + id: string; + name: string; + type: IotSvgPropertyType; + default: any; + required?: boolean; + subLabel?: string; + divider?: boolean; + fieldSuffix?: string; + disableOnProperty?: string; + rowClass?: string; + fieldClass?: string; +} + +export interface IotSvgNumberProperty extends IotSvgPropertyBase { + min?: number; + max?: number; + step?: number; +} + +export type IotSvgProperty = IotSvgPropertyBase & IotSvgNumberProperty; + +export type ScadaObjectElementActionTrigger = 'click'; + +export type ScadaObjectActionType = 'updateValue'; +export type ScadaObjectActionUpdateValueType = 'toggle' | 'increment' | 'constant'; + +export interface ScadaObjectElementAction { + trigger: ScadaObjectElementActionTrigger; + enabledTriggerValues?: string[]; + enabledConditionFunction?: string; + enabledCondition?: (values: {[key: string]: any}) => boolean; + actionType: ScadaObjectActionType; + updateValueId?: string; + updateValueType?: ScadaObjectActionUpdateValueType; + updateValueConstant?: any; + updateValueInc?: number; +} + +export interface IotSvgMetadata { + title: string; + stateRenderFunction?: string; + stateRender?: IotSvgStateRenderFunction; + tags: IotSvgTag[]; + behavior: IotSvgBehavior[]; + properties: IotSvgProperty[]; +} + +export const emptyMetadata: IotSvgMetadata = { + title: '', + tags: [], + behavior: [], + properties: [] +}; + + +export const parseScadaObjectMetadataFromContent = (svgContent: string): IotSvgMetadata => { + try { + const svgDoc = new DOMParser().parseFromString(svgContent, 'image/svg+xml'); + return parseScadaObjectMetadataFromDom(svgDoc); + } catch (_e) { + return emptyMetadata; + } +}; + +const parseScadaObjectMetadataFromDom = (svgDoc: Document): IotSvgMetadata => { + try { + const elements = svgDoc.getElementsByTagName('tb:metadata'); + if (elements.length) { + return JSON.parse(elements[0].textContent); + } else { + return emptyMetadata; + } + } catch (_e) { + console.error(_e); + return emptyMetadata; + } +}; + +const defaultGetValueSettings = (get: IotSvgBehaviorValue): GetValueSettings => ({ + action: GetValueAction.DO_NOTHING, + defaultValue: get.defaultValue, + executeRpc: { + method: 'getState', + requestTimeout: 5000, + requestPersistent: false, + persistentPollingInterval: 1000 + }, + getAttribute: { + key: 'state', + scope: null + }, + getTimeSeries: { + key: 'state' + }, + dataToValue: { + type: DataToValueType.NONE, + compareToValue: true, + dataToValueFunction: '/* Should return boolean value */\nreturn data;' + } + }); + +const defaultSetValueSettings = (set: IotSvgBehaviorAction): SetValueSettings => ({ + action: SetValueAction.EXECUTE_RPC, + executeRpc: { + method: 'setState', + requestTimeout: 5000, + requestPersistent: false, + persistentPollingInterval: 1000 + }, + setAttribute: { + key: 'state', + scope: AttributeScope.SERVER_SCOPE + }, + putTimeSeries: { + key: 'state' + }, + valueToData: { + type: set.valueToDataType, + constantValue: set.constantValue, + valueToDataFunction: set.valueToDataFunction ? set.valueToDataFunction : + '/* Convert input boolean value to RPC parameters or attribute/time-series value */\nreturn value;' + } +}); + +const defaultWidgetActionSettings = (widgetAction: IotSvgBehavior): WidgetAction => ({ + type: WidgetActionType.updateDashboardState, + targetDashboardStateId: null, + openRightLayout: false, + setEntityId: true, + stateEntityParamName: null +}); + +export const defaultScadaObjectSettings = (metadata: IotSvgMetadata): IotSvgObjectSettings => { + const settings: IotSvgObjectSettings = {}; + for (const behavior of metadata.behavior) { + if (behavior.type === IotSvgBehaviorType.value) { + settings[behavior.id] = defaultGetValueSettings(behavior as IotSvgBehaviorValue); + } else if (behavior.type === IotSvgBehaviorType.action) { + settings[behavior.id] = defaultSetValueSettings(behavior as IotSvgBehaviorAction); + } else if (behavior.type === IotSvgBehaviorType.widgetAction) { + settings[behavior.id] = defaultWidgetActionSettings(behavior); + } + } + for (const property of metadata.properties) { + settings[property.id] = property.default; + } + return settings; +}; + +export type IotSvgObjectSettings = {[id: string]: any}; + +const parseError = (ctx: WidgetContext, err: any): string => + ctx.$injector.get(UtilsService).parseException(err).message || 'Unknown Error'; + +export class IotSvgObject { + + private metadata: IotSvgMetadata; + private settings: IotSvgObjectSettings; + private context: IotSvgContext; + + private rootElement: HTMLElement; + private svgShape: Svg; + private box: Box; + private targetWidth: number; + private targetHeight: number; + + private loadingSubject = new BehaviorSubject(false); + private valueGetters: ValueGetter[] = []; + private valueActions: ValueAction[] = []; + private valueSetters: {[behaviorId: string]: ValueSetter} = {}; + + private stateValueSubjects: {[id: string]: BehaviorSubject} = {}; + + loading$ = this.loadingSubject.asObservable().pipe(share()); + + private _onError: (error: string) => void = () => {}; + + constructor(private ctx: WidgetContext, + private svgPath: string, + private inputSettings: IotSvgObjectSettings) {} + + public init(): Observable { + return this.ctx.http.get(this.svgPath, {responseType: 'text'}).pipe( + map((inputSvgContent) => { + const doc: XMLDocument = new DOMParser().parseFromString(inputSvgContent, 'image/svg+xml'); + this.metadata = parseScadaObjectMetadataFromDom(doc); + const defaults = defaultScadaObjectSettings(this.metadata); + this.settings = mergeDeep({}, defaults, this.inputSettings || {}); + this.prepareMetadata(); + this.prepareSvgShape(doc); + this.initialize(); + }) + ); + } + + public onError(onError: (error: string) => void) { + this._onError = onError; + } + + public addTo(element: HTMLElement) { + this.rootElement = element; + if (this.svgShape) { + this.svgShape.addTo(element); + } + } + + public destroy() { + for (const stateValueId of Object.keys(this.stateValueSubjects)) { + this.stateValueSubjects[stateValueId].complete(); + this.stateValueSubjects[stateValueId].unsubscribe(); + } + this.valueActions.forEach(v => v.destroy()); + this.loadingSubject.complete(); + this.loadingSubject.unsubscribe(); + } + + public setSize(targetWidth: number, targetHeight: number) { + this.targetWidth = targetWidth; + this.targetHeight = targetHeight; + if (this.svgShape) { + this.resize(); + } + } + + private prepareMetadata() { + this.metadata.stateRender = parseFunction(this.metadata.stateRenderFunction, ['svg', 'ctx']) || (() => {}); + for (const tag of this.metadata.tags) { + tag.stateRender = parseFunction(tag.stateRenderFunction, ['element', 'ctx']) || (() => {}); + if (tag.actions) { + for (const trigger of Object.keys(tag.actions)) { + const action = tag.actions[trigger]; + action.action = parseFunction(action.actionFunction, ['event', 'ctx']) || (() => {}); + } + } + } + } + + private prepareSvgShape(doc: XMLDocument) { + const elements = doc.getElementsByTagName('tb:metadata'); + for (let i=0;i { + element.attr('cursor', 'pointer'); + element.on(trigger, (event) => { + action.action(event, this.context); + }); + }); + } + } + } + for (const behavior of this.metadata.behavior) { + if (behavior.type === IotSvgBehaviorType.value) { + const getBehavior = behavior as IotSvgBehaviorValue; + let getValueSettings: GetValueSettings = this.settings[getBehavior.id]; + getValueSettings = {...getValueSettings, actionLabel: getBehavior.name}; + const stateValueSubject = new BehaviorSubject(getValueSettings.defaultValue); + this.stateValueSubjects[getBehavior.valueId] = stateValueSubject; + this.context.values[getBehavior.valueId] = getValueSettings.defaultValue; + stateValueSubject.subscribe((value) => { + this.onStateValueChanged(getBehavior.valueId, value); + }); + const valueGetter = + ValueGetter.fromSettings(this.ctx, getValueSettings, getBehavior.valueType, { + next: (val) => {this.onValue(getBehavior.id, val);}, + error: (err) => { + const message = parseError(this.ctx, err); + this._onError(message); + } + }); + this.valueGetters.push(valueGetter); + this.valueActions.push(valueGetter); + } else if (behavior.type === IotSvgBehaviorType.action) { + const setBehavior = behavior as IotSvgBehaviorAction; + let setValueSettings: SetValueSettings = this.settings[setBehavior.id]; + setValueSettings = {...setValueSettings, actionLabel: setBehavior.name}; + const valueSetter = ValueSetter.fromSettings(this.ctx, setValueSettings); + this.valueSetters[setBehavior.id] = valueSetter; + this.valueActions.push(valueSetter); + } else if (behavior.type === IotSvgBehaviorType.widgetAction) { + // TODO: + } + } + this.renderState(); + if (this.valueGetters.length) { + const getValueObservables: Array> = []; + this.valueGetters.forEach(valueGetter => { + getValueObservables.push(valueGetter.getValue()); + }); + this.loadingSubject.next(true); + forkJoin(getValueObservables).subscribe( + { + next: () => { + this.loadingSubject.next(false); + }, + error: () => { + this.loadingSubject.next(false); + } + } + ); + } + } + + private callAction(event: Event, behaviorId: string, value?: any, observer?: Partial>) { + const behavior = this.metadata.behavior.find(b => b.id === behaviorId); + if (behavior) { + if (behavior.type === IotSvgBehaviorType.action) { + const valueSetter = this.valueSetters[behaviorId]; + if (valueSetter) { + this.loadingSubject.next(true); + valueSetter.setValue(value).subscribe( + { + next: () => { + if (observer?.next) { + observer.next(); + } + this.loadingSubject.next(false); + }, + error: (err) => { + this.loadingSubject.next(false); + if (observer?.error) { + observer.error(err); + } + const message = parseError(this.ctx, err); + this._onError(message); + } + } + ); + } + } else if (behavior.type === IotSvgBehaviorType.widgetAction) { + const widgetAction: WidgetAction = this.settings[behavior.id]; + this.ctx.actionsApi.onWidgetAction(event, widgetAction); + } + } + } + + private resize() { + let scale: number; + if (this.targetWidth < this.targetHeight) { + scale = this.targetWidth / this.box.width; + } else { + scale = this.targetHeight / this.box.height; + } + this.svgShape.node.style.transform = `scale(${scale})`; + } + + private onValue(id: string, value: any) { + const valueBehavior = this.metadata.behavior.find(b => b.id === id) as IotSvgBehaviorValue; + value = this.normalizeValue(value, valueBehavior.valueType); + const valueId = valueBehavior.valueId; + this.setValue(valueId, value); + } + + private setValue(valueId: string, value: any) { + const stateValueSubject = this.stateValueSubjects[valueId]; + if (stateValueSubject && stateValueSubject.value !== value) { + stateValueSubject.next(value); + } + } + + private onStateValueChanged(id: string, value: any) { + if (this.context.values[id] !== value) { + this.context.values[id] = value; + this.renderState(); + } + } + + private renderState(): void { + this.metadata.stateRender(this.svgShape, this.context); + for (const tag of this.metadata.tags) { + const elements = this.svgShape.find(`[tb\\:tag="${tag.tag}"]`); + elements.forEach(element => { + tag.stateRender(element, this.context); + }); + } + } + + private normalizeValue(value: any, type: ValueType): any { + if (isUndefinedOrNull(value)) { + switch (type) { + case ValueType.STRING: + return ''; + case ValueType.INTEGER: + case ValueType.DOUBLE: + return 0; + case ValueType.BOOLEAN: + return false; + case ValueType.JSON: + return {}; + } + } else { + return value; + } + } + + private setElementText(e: Element | Element[], text: string) { + this.elements(e).forEach(element => { + let textElement: Text; + if (element.type === 'text') { + const children = element.children(); + if (children.length && children[0].type === 'tspan') { + textElement = children[0] as Text; + } else { + textElement = element as Text; + } + } else if (element.type === 'tspan') { + textElement = element as Text; + } + if (textElement) { + textElement.text(text); + } + }); + } + + private setElementFont(e: Element | Element[], font: Font, color: string) { + this.elements(e).forEach(element => { + if (element.type === 'text') { + const textElement = element as Text; + if (font) { + textElement.font({ + family: font.family, + size: (isDefinedAndNotNull(font.size) && isDefinedAndNotNull(font.sizeUnit)) ? + font.size + font.sizeUnit : null, + weight: font.weight, + style: font.style + }); + } + if (color) { + textElement.fill(color); + } + } + }); + } + + private animate(element: Element, duration: number): Runner { + element.timeline().finish(); + return element.animate(duration, 0, 'now'); + } + + private disableElement(e: Element | Element[]) { + this.elements(e).forEach(element => { + element.attr({'pointer-events': 'none'}); + }); + } + + private enableElement(e: Element | Element[]) { + this.elements(e).forEach(element => { + element.attr({'pointer-events': null}); + }); + } + + private elements(element: Element | Element[]): Element[] { + return Array.isArray(element) ? element : [element]; + } + + private getProperty(id: string): IotSvgProperty { + return this.metadata.properties.find(p => p.id === id); + } + + private getPropertyValue(id: string): any { + const property = this.getProperty(id); + if (property) { + const value = this.settings[id]; + if (isDefinedAndNotNull(value)) { + if (property.type === 'color-settings') { + return ColorProcessor.fromSettings(value); + } + return value; + } else { + switch (property.type) { + case 'string': + return ''; + case 'number': + return 0; + case 'color': + return '#000'; + case 'color-settings': + return constantColor('#000'); + } + } + } else { + return ''; + } + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts b/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts index f062494763..ae9034d1cd 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts +++ b/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts @@ -92,7 +92,7 @@ import { PieChartWidgetComponent } from '@home/components/widget/lib/chart/pie-c import { BarChartWidgetComponent } from '@home/components/widget/lib/chart/bar-chart-widget.component'; import { PolarAreaWidgetComponent } from '@home/components/widget/lib/chart/polar-area-widget.component'; import { RadarChartWidgetComponent } from '@home/components/widget/lib/chart/radar-chart-widget.component'; -import { ScadaTestWidgetComponent } from '@home/components/widget/lib/scada/scada-test-widget.component'; +import { IotSvgWidgetComponent } from '@home/components/widget/lib/svg/iot-svg-widget.component'; @NgModule({ declarations: @@ -152,7 +152,7 @@ import { ScadaTestWidgetComponent } from '@home/components/widget/lib/scada/scad BarChartWidgetComponent, PolarAreaWidgetComponent, RadarChartWidgetComponent, - ScadaTestWidgetComponent + IotSvgWidgetComponent ], imports: [ CommonModule, @@ -215,7 +215,7 @@ import { ScadaTestWidgetComponent } from '@home/components/widget/lib/scada/scad BarChartWidgetComponent, PolarAreaWidgetComponent, RadarChartWidgetComponent, - ScadaTestWidgetComponent + IotSvgWidgetComponent ], providers: [ {provide: WIDGET_COMPONENTS_MODULE_TOKEN, useValue: WidgetComponentsModule } diff --git a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts index a79fa89242..b8f9be3f56 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts @@ -39,7 +39,7 @@ import { } from '@angular/core'; import { DashboardWidget } from '@home/models/dashboard-component.models'; import { - Widget, + Widget, WidgetAction, WidgetActionDescriptor, widgetActionSources, WidgetActionType, @@ -57,7 +57,7 @@ import { WidgetService } from '@core/http/widget.service'; import { UtilsService } from '@core/services/utils.service'; import { forkJoin, Observable, of, ReplaySubject, Subscription, throwError } from 'rxjs'; import { - deepClone, + deepClone, guid, insertVariable, isDefined, isNotEmptyStr, @@ -254,6 +254,7 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI actionDescriptorsBySourceId, getActionDescriptors: this.getActionDescriptors.bind(this), handleWidgetAction: this.handleWidgetAction.bind(this), + onWidgetAction: this.onWidgetAction.bind(this), elementClick: this.elementClick.bind(this), cardClick: this.cardClick.bind(this), click: this.click.bind(this), @@ -1039,7 +1040,7 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI return result; } - private handleWidgetAction($event: Event, descriptor: WidgetActionDescriptor, + private handleWidgetAction($event: Event, descriptor: WidgetAction, entityId?: EntityId, entityName?: string, additionalParams?: any, entityLabel?: string): void { const type = descriptor.type; const targetEntityParamName = descriptor.stateEntityParamName; @@ -1112,7 +1113,7 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI const customHtml = descriptor.customHtml; const customCss = descriptor.customCss; const customResources = descriptor.customResources; - const actionNamespace = `custom-action-pretty-${descriptor.name.toLowerCase()}`; + const actionNamespace = `custom-action-pretty-${guid()}`; let htmlTemplate = ''; if (isDefined(customHtml) && customHtml.length > 0) { htmlTemplate = customHtml; @@ -1420,13 +1421,8 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI const idsList = descriptors.map(descriptor => `#${descriptor.name}`).join(','); const targetElement = $(elementClicked).closest(idsList, this.widgetContext.$container[0]); if (targetElement.length && targetElement[0].id) { - $event.stopPropagation(); const descriptor = descriptors.find(descriptorInfo => descriptorInfo.name === targetElement[0].id); - const entityInfo = this.getActiveEntityInfo(); - const entityId = entityInfo ? entityInfo.entityId : null; - const entityName = entityInfo ? entityInfo.entityName : null; - const entityLabel = entityInfo && entityInfo.entityLabel ? entityInfo.entityLabel : null; - this.handleWidgetAction($event, descriptor, entityId, entityName, null, entityLabel); + this.onWidgetAction($event, descriptor); } } } @@ -1442,18 +1438,23 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI private onClick($event: Event, sourceId: string) { const descriptors = this.getActionDescriptors(sourceId); if (descriptors.length) { + this.onWidgetAction($event, descriptors[0]); + } + } + + private onWidgetAction($event: Event, action: WidgetAction) { + if ($event) { $event.stopPropagation(); - const descriptor = descriptors[0]; - const entityInfo = this.getActiveEntityInfo(); - const entityId = entityInfo ? entityInfo.entityId : null; - const entityName = entityInfo ? entityInfo.entityName : null; - const entityLabel = entityInfo && entityInfo.entityLabel ? entityInfo.entityLabel : null; - this.handleWidgetAction($event, descriptor, entityId, entityName, null, entityLabel); } + const entityInfo = this.getActiveEntityInfo(); + const entityId = entityInfo ? entityInfo.entityId : null; + const entityName = entityInfo ? entityInfo.entityName : null; + const entityLabel = entityInfo && entityInfo.entityLabel ? entityInfo.entityLabel : null; + this.handleWidgetAction($event, action, entityId, entityName, null, entityLabel); } private loadCustomActionResources(actionNamespace: string, customCss: string, customResources: Array, - actionDescriptor: WidgetActionDescriptor): Observable { + actionDescriptor: WidgetAction): Observable { const resourceTasks: Observable[] = []; const modulesTasks: Observable[] = []; diff --git a/ui-ngx/src/assets/widget/scada/drawing.svg b/ui-ngx/src/assets/widget/svg/drawing.svg similarity index 54% rename from ui-ngx/src/assets/widget/scada/drawing.svg rename to ui-ngx/src/assets/widget/svg/drawing.svg index 61e8d3f1ca..91bfb8b47d 100644 --- a/ui-ngx/src/assets/widget/scada/drawing.svg +++ b/ui-ngx/src/assets/widget/svg/drawing.svg @@ -1,341 +1,115 @@ - { - "title": "My first SCADA Object", - "stateValues": { - "level": { - "initialValue": 0 - }, - "disabled": { - "initialValue": false + { + "title": "My first IoT SVG Object", + "stateRenderFunction": "var showMinMaxLevel = ctx.properties.showMinMaxLevel;\nvar minLevelElement = ctx.tags.minLevel[0];\nvar maxLevelElement = ctx.tags.maxLevel[0];\nvar minLevel = ctx.properties.minLevel; \nvar maxLevel = ctx.properties.maxLevel;\n\nif (showMinMaxLevel) {\n \n var minMaxLevelFont = ctx.properties.minMaxLevelFont;\n var minMaxLevelColor = ctx.properties.minMaxLevelColor;\n \n ctx.api.text(minLevelElement, minLevel);\n ctx.api.text(maxLevelElement, maxLevel);\n \n ctx.api.font(minLevelElement, minMaxLevelFont, minMaxLevelColor);\n ctx.api.font(maxLevelElement, minMaxLevelFont, minMaxLevelColor);\n \n} else {\n minLevelElement.hide();\n maxLevelElement.hide();\n}\n\nvar disabled = ctx.values.disabled;\nvar on = ctx.values.on;\nvar level = ctx.values.level;\n\nvar onButton = ctx.tags.onButton;\nvar offButton = ctx.tags.offButton;\nvar levelUpButton = ctx.tags.levelUpButton;\nvar levelDownButton = ctx.tags.levelDownButton;\n\nvar onButtonEnabled = !disabled && !on;\nvar offButtonEnabled = !disabled && on;\nvar levelUpEnabled = !disabled && level < maxLevel;\nvar levelDownEnabled = !disabled && level > minLevel;\n\nif (onButtonEnabled) {\n ctx.api.enable(onButton);\n onButton[0].findOne('rect').attr({fill: '#12ed19'});\n} else {\n ctx.api.disable(onButton);\n onButton[0].findOne('rect').attr({fill: '#777'});\n}\n \nif (offButtonEnabled) {\n ctx.api.enable(offButton);\n offButton[0].findOne('rect').attr({fill: '#ed121f'});\n} else {\n ctx.api.disable(offButton);\n offButton[0].findOne('rect').attr({fill: '#777'});\n} \n\n\nif (levelUpEnabled) {\n ctx.api.enable(levelUpButton);\n levelUpButton[0].findOne('rect').attr({fill: '#fff'});\n} else {\n ctx.api.disable(levelUpButton);\n levelUpButton[0].findOne('rect').attr({fill: '#777'});\n}\n \nif (levelDownEnabled) {\n ctx.api.enable(levelDownButton);\n levelDownButton[0].findOne('rect').attr({fill: '#fff'});\n} else {\n ctx.api.disable(levelDownButton);\n levelDownButton[0].findOne('rect').attr({fill: '#777'});\n}", + "tags": [ + { + "tag": "level", + "stateRenderFunction": "var level = ctx.values.level; \nvar disabled = ctx.values.disabled;\nvar minLevel = ctx.properties.minLevel; \nvar maxLevel = ctx.properties.maxLevel;\n\nvar height = (level - minLevel) / (maxLevel - minLevel);\nheight = Math.max(0, Math.min(1, height))*80; \n\nctx.api.animate(element, 200).attr({height: height});\n\nvar fill;\nif (disabled) {\n fill = ctx.properties.disabledLevelBackground;\n} else {\n var colorProcessor = ctx.properties.levelBackground;\n colorProcessor.update(level);\n fill = colorProcessor.color;\n}\n\nelement.attr({fill: fill});" }, - "on": { - "initialValue": false, - "callBehavior": [ - { - "behaviorId": "onUpdateState", - "conditionFunction": "return value === true;" - }, - { - "behaviorId": "offUpdateState", - "conditionFunction": "return value === false;" - } - ] - } - }, - "actions": { - "onButton": { - "trigger": "click", - "actionType": "updateValue", - "updateValueId": "on", - "updateValueType": "constant", - "updateValueConstant": true + { + "tag": "levelTitle", + "stateRenderFunction": "var showLevelTitle = ctx.properties.showLevelTitle;\n\nif (showLevelTitle) {\n var levelTitle = ctx.properties.levelTitle;\n var levelTitleFont = ctx.properties.levelTitleFont;\n var levelTitleColor = ctx.properties.levelTitleColor;\n \n ctx.api.text(element, levelTitle);\n ctx.api.font(element, levelTitleFont, levelTitleColor);\n \n} else {\n element.hide();\n}" }, - "offButton": { - "trigger": "click", - "actionType": "updateValue", - "updateValueId": "on", - "updateValueType": "constant", - "updateValueConstant": false - } - }, - "states": { - "initialState": { - "initial": true, - "state": [ - { - "tag": "levelTitle", - "show": { - "type": "property", - "propertyId": "showLevelTitle" - }, - "text": { - "content": { - "type": "property", - "propertyId": "levelTitle" - }, - "font": { - "type": "property", - "propertyId": "levelTitleFont" - }, - "color": { - "type": "property", - "propertyId": "levelTitleColor" - } - } - }, - { - "tag": "level", - "inputValue": "level", - "attributes": [ - { - "name": "fill", - "value": { - "type": "property", - "propertyId": "levelBackground" - } - } - ] - }, - { - "tag": "levelValueBackground", - "show": { - "type": "property", - "propertyId": "showValue" - } - }, - { - "tag": "levelValue", - "show": { - "type": "property", - "propertyId": "showValue" - }, - "text": { - "font": { - "type": "property", - "propertyId": "valueFont" - }, - "color": { - "type": "property", - "propertyId": "valueColor" - } - } - }, - { - "tag": "minLevel", - "show": { - "type": "property", - "propertyId": "showMinMaxLevel" - }, - "text": { - "content": { - "type": "property", - "propertyId": "minLevel" - }, - "font": { - "type": "property", - "propertyId": "minMaxLevelFont" - }, - "color": { - "type": "property", - "propertyId": "minMaxLevelColor" - } - } - }, - { - "tag": "maxLevel", - "show": { - "type": "property", - "propertyId": "showMinMaxLevel" - }, - "text": { - "content": { - "type": "property", - "propertyId": "maxLevel" - }, - "font": { - "type": "property", - "propertyId": "minMaxLevelFont" - }, - "color": { - "type": "property", - "propertyId": "minMaxLevelColor" - } - } - } - ] + { + "tag": "levelValue", + "stateRenderFunction": "var showValue = ctx.properties.showValue;\n\nif (showValue) {\n var valueFont = ctx.properties.valueFont;\n var valueColor = ctx.properties.valueColor;\n var level = ctx.values.level; \n \n var levelText = ctx.api.formatValue(level, ctx.properties.valueDecimals, ctx.properties.valueUnits, false);\n\n ctx.api.font(element, valueFont, valueColor);\n ctx.api.text(element, levelText);\n\n} else {\n element.hide();\n ctx.tags.levelValueBackground[0].hide();\n}", + "actions": { + "click": { + "actionFunction": "ctx.api.callAction(event, 'levelValueClick');" + } + } }, - "updateLevelState": { - "triggerValues": ["level"], - "state": [ - { - "tag": "level", - "inputValue": "level", - "animate": 200, - "attributes": [ - { - "name": "height", - "value": { - "type": "function", - "valueConvertFunction": "var level = (value - ${minLevel}) / (${maxLevel} - ${minLevel});\nlevel = Math.max(0, Math.min(1, level));\nreturn level*80;" - } - } - ] - }, - { - "tag": "levelValue", - "inputValue": "level", - "text": { - "content": { - "type": "valueFormat", - "units": { - "type": "property", - "propertyId": "valueUnits" - }, - "decimals": { - "type": "property", - "propertyId": "valueDecimals" - } - } - } - } - ] + { + "tag": "fan", + "stateRenderFunction": "var on = ctx.values.on;\nif (on) {\n element.addClass('fan-rotate');\n} else {\n element.removeClass('fan-rotate');\n}\n" }, - "updateLevelBackgroundState": { - "triggerValues": ["disabled", "level"], - "conditionFunction": "return values.disabled === false;", - "state": [ - { - "tag": "level", - "inputValue": "level", - "attributes": [ - { - "name": "fill", - "value": { - "type": "property", - "propertyId": "levelBackground" - } - } - ] - } - ] + { + "tag": "onButton", + "actions": { + "click": { + "actionFunction": "ctx.api.callAction(event, 'onUpdateState');" + } + } }, - "disabledState": { - "triggerValues": ["disabled"], - "conditionFunction": "return values.disabled === true;", - "state": [ - { - "tag": "level", - "attributes": [ - { - "name": "fill", - "value": { - "type": "property", - "propertyId": "disabledLevelBackground" - } - } - ] - } - ] + { + "tag": "offButton", + "actions": { + "click": { + "actionFunction": "ctx.api.callAction(event, 'offUpdateState');" + } + } }, - "onState": { - "triggerValues": ["on"], - "conditionFunction": "return values.on === true;", - "state": [ - { - "tag": "fan", - "addClass": "fan-rotate" - }, - { - "tag": "onButtonBackground", - "attributes": [ - { - "name": "fill", - "value": { - "type": "constant", - "constantValue": "#777" - } - } - ] - }, - { - "tag": "offButtonBackground", - "attributes": [ - { - "name": "fill", - "value": { - "type": "constant", - "constantValue": "#ed121f" - } - } - ] - } - ] + { + "tag": "levelUpButton", + "actions": { + "click": { + "actionFunction": "var level = ctx.values.level; \nvar maxLevel = ctx.properties.maxLevel;\n\nvar newLevel = Math.min(maxLevel, level + 5);\nctx.api.setValue('level', newLevel);\nctx.api.callAction(event, 'levelUpdateState', newLevel, {\n error: () => {\n ctx.api.setValue('level', level);\n }\n});" + } + } }, - "offState": { - "triggerValues": ["on"], - "conditionFunction": "return values.on === false;", - "state": [ - { - "tag": "fan", - "removeClass": "fan-rotate" - }, - { - "tag": "onButtonBackground", - "attributes": [ - { - "name": "fill", - "value": { - "type": "constant", - "constantValue": "#12ed19" - } - } - ] - }, - { - "tag": "offButtonBackground", - "attributes": [ - { - "name": "fill", - "value": { - "type": "constant", - "constantValue": "#777" - } - } - ] - } - ] + { + "tag": "levelDownButton", + "actions": { + "click": { + "actionFunction": "var level = ctx.values.level; \nvar minLevel = ctx.properties.minLevel;\n\nvar newLevel = Math.max(minLevel, level - 5);\nctx.api.setValue('level', newLevel);\nctx.api.callAction(event, 'levelUpdateState', newLevel, {\n error: () => {\n ctx.api.setValue('level', level);\n }\n});" + } + } } - }, + ], "behavior": [ { "id": "levelState", "name": "Level", - "type": "getValue", + "type": "value", "valueType": "DOUBLE", "defaultValue": 0, - "onUpdate": [ - { - "updateValue": "level" - } - ] + "valueId": "level" }, { "id": "disabledState", "name": "Disabled state", - "type": "getValue", + "type": "value", "valueType": "BOOLEAN", "defaultValue": false, - "onUpdate": [ - { - "updateValue": "disabled" - } - ] + "valueId": "disabled" }, { "id": "onState", "name": "On/Off state", - "type": "getValue", + "type": "value", "valueType": "BOOLEAN", "defaultValue": false, - "onUpdate": [ - { - "updateValue": "on" - } - ] + "valueId": "on" }, { "id": "onUpdateState", "name": "Power On", - "type": "setValue", + "type": "action", + "valueType": "BOOLEAN", "valueToDataType": "CONSTANT", "constantValue": true }, { "id": "offUpdateState", "name": "Power Off", - "type": "setValue", + "type": "action", + "valueType": "BOOLEAN", "valueToDataType": "CONSTANT", "constantValue": false + }, + { + "id": "levelUpdateState", + "name": "Update level", + "type": "action", + "valueType": "DOUBLE", + "valueToDataType": "VALUE", + "constantValue": 0 + }, + { + "id": "levelValueClick", + "name": "On level value click", + "type": "widgetAction" } ], "properties": [ @@ -489,7 +263,7 @@ "default": "#ccc" } ] - }</tb:metadata> + } From c4ff43a840f666ae10740bcb98fb331ab778b4cc Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Tue, 7 May 2024 20:02:06 +0300 Subject: [PATCH 023/442] UI: Minor fix. --- .../modules/home/components/widget/lib/svg/iot-svg.models.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts index d0bd66dcbf..9b16e56649 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts @@ -624,7 +624,7 @@ export class IotSvgObject { case 'color': return '#000'; case 'color-settings': - return constantColor('#000'); + return ColorProcessor.fromSettings(constantColor('#000')); } } } else { From 0beeb99b99df9cb6c809c66c0564194a830c61ba Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Wed, 8 May 2024 17:13:25 +0300 Subject: [PATCH 024/442] UI: Refactoring and improvements --- .../json/system/widget_bundles/cards.json | 4 +- .../json/system/widget_types/iot_svg.json | 26 +++++++++++ .../action-button-basic-config.component.html | 10 ++-- ...command-button-basic-config.component.html | 6 +-- .../power-button-basic-config.component.html | 16 +++---- .../toggle-button-basic-config.component.html | 16 +++---- .../status-widget-basic-config.component.html | 12 ++--- .../single-switch-basic-config.component.html | 16 +++---- .../rpc/slider-basic-config.component.html | 8 ++-- ...tion-button-widget-settings.component.html | 8 ++-- ...mand-button-widget-settings.component.html | 6 +-- ...ower-button-widget-settings.component.html | 16 +++---- ...ggle-button-widget-settings.component.html | 16 +++---- ...value-action-settings-panel.component.html | 4 +- ...t-value-action-settings-panel.component.ts | 4 +- .../get-value-action-settings.component.ts | 12 +++-- ...value-action-settings-panel.component.html | 2 +- ...idget-action-settings-panel.component.html | 2 +- .../iot-svg-object-settings.component.html | 29 ++++++------ .../svg/iot-svg-object-settings.component.ts | 44 +++++++++--------- .../svg/iot-svg-object-settings.models.ts | 6 +-- ...ngle-switch-widget-settings.component.html | 16 +++---- .../slider-widget-settings.component.html | 8 ++-- .../status-widget-settings.component.html | 12 ++--- .../widget/lib/svg/iot-svg.models.ts | 46 +++++++++---------- .../components/value-input.component.html | 4 +- .../components/value-input.component.ts | 12 ++++- .../app/shared/pipe/custom-translate.pipe.ts | 33 +++++++++++++ ui-ngx/src/app/shared/shared.module.ts | 4 ++ .../assets/locale/locale.constant-en_US.json | 3 ++ ui-ngx/src/assets/widget/svg/drawing.svg | 15 ++++-- 31 files changed, 252 insertions(+), 164 deletions(-) create mode 100644 application/src/main/data/json/system/widget_types/iot_svg.json create mode 100644 ui-ngx/src/app/shared/pipe/custom-translate.pipe.ts diff --git a/application/src/main/data/json/system/widget_bundles/cards.json b/application/src/main/data/json/system/widget_bundles/cards.json index 39996839f1..43f1ab4886 100644 --- a/application/src/main/data/json/system/widget_bundles/cards.json +++ b/application/src/main/data/json/system/widget_bundles/cards.json @@ -2,10 +2,9 @@ "widgetsBundle": { "alias": "cards", "title": "Cards", - "image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAACgCAMAAAB+IdObAAAC/VBMVEUAAAAuTILg4ODf398dMkk0SWLg4ODg4OAyP1UrQF8sRH2/v8fDx8dFbHsDCBhKWGvDxsYaNET///8AAADg4OD4+Pjn5+fj4+P6+vrv7+/q8voKCgre3d3R2eft7e3TzMjP1+UdHR3My8vQzs7r6+vz8/PQ0NCKiorS0tPb29zm8Pnp6enQzMrX19j19fXNzc3m5eXW1dacnJzT1NnT2+nJycrx8fHf6vTMztHh7PXP1ePTzswbGxwWFhYsLC3Y4u7Wzcjj7ffT1NTS2OHl4NvZ1tXPz9QhISHVzst3d3jZ2drX1NNKSkrP1N6Xl5fn495tbW3d3uHW0tGysrLs7/HY3OG4ubnl7vbi6fLL0NhSUlLd5/PS0NCqqalXVlbp7e/Zz8rs6eXg4+XLzM0yUI3e4ubf0coSEhLc5vGsrKynp6bl6OvV2eBjY2MkJCbO0tvHxsbT1t3Q0dfBwMCSkpLj5efq5eG1tbU2MihVav/d3+Ta2Nfa09COjo7W3+vMztXl6u7Y3uakpKSEhIQ7Ozxynsy7u7ve2dbDw8QxMTLu8fPg3Nng5+7IzNJLWnHi5ekgN2rw8/ba5PDU2uSfn59AYZqamZlcXF03NzejoqHn6/Ld4+oODg7d2dqvr6/q8fbu7Oo7W5MpKSpsmMdxcXLe1dG9vb2Sf25OTk/j3Nbl1cpMcKZFRUZkjsA2VJJ8fHwiPXJGaaB/f4Dd1dQqRXy3zuWZqsmOiodRYnllZmd1hqJpeZPW2dlchblzdXZBQUEPIDjFyM9WfbVghrBRdq6Xn6tpaWkSI0Oqu9qyxN+4vMJ0gZlteIgcNGANFyagprCgs9GAk7mSmKMeKjiwt75YfalXZoBBTmWssLaGipFBOS4XJCVfcIqBhIl9bFvGvrXAtKCOk5gKGS46JBilq7RVWFwjMyuVoOllb3lsXk8lFg5kdvp3hfK1r6qyo5Gax6iFkKViiJufk4alquKTjIs6cIRXNyiv1LqKpqjE38t8jLCzq6GGvZdrr35uroH7pmE0AAAAEnRSTlMA/u8g/v6/r/4gtyC/v7+wr69GtHW3AAAd4UlEQVR42sTYb0wTZxzAceaSLfvzYrlcr60pjacFet4oLRVE0ris3SQW2u2UIuCk8bBGaRFaqIaillqnlT+rUqUoAXVDQyIbDNwSFifBOaMuJmrYoi/IQjLiC7fwwhfGZVv2e55C/+yYDBj4FcqhJN7H3z3PXU1Keu31ly6/FNeOqc5HOxXpS9ylSD9G+07Qj9ClS1+eeumTQCDw1htJ0MuvLCMXsVdfBgc69S9wU6eNTxwXd+bXcddQ30b6HPrs88+m+3gq/A380bfXLp3/ieM4feANcCyTEotZ9rKXk17HjggEU6KKOMf1eMe1aQaWJChiGJBcBwjJ8/o3k5JezSYWN+krSZd3YIhwItiROBEMAUdMMjUNYSC5duonjud5LpCURBKL3TIMOX/v65m6+/Xd+G7GdyvWVzN269bNu6M8qnopICSCfPHdiriSI61ZAx/THYz2TrTW1tZd0NZIa6dat3a6ra0HO6xLC9lxT+jAlsQijoNCSMwBkGhrd3U0F/Jutztr6SZyL3cGSdxEkhEDIFBsIPEQgeJd+Nza2lwYhOIhu8X4b20LwGsFIdpNRMpm/yeI0IGbYiSvCPlwiRBwQALHu9OtbS5uRJCRGGRb9UkKvvSpurJOp/trKtKIrmrjvt27uw4UHTL6KVXRESYzq8tMmWuNJ2vmBcn914mAIzfX4bF5OI/NJpxIDJKoWL363XXNZxrtUHkUIjITqpMIQqzKJPz+AVEasc3ffcQ8FNj8oXlzLSGvbcuorTFfPX3EX2vOXNCllYwhiQNZkWuw8Dxj5NwdvpkhiQ5QoLasKxZAuovkZvhac2Bb0YHU0xfNFYS6oi0lbYBp22zO2EyI0vpWthUd8Ov9YSbt4nwWey4UHYlwIiYLz13RMnzQFz8SISTKwE1DWjAEV51Wm03MnqjtELzOExIbiWAiGKJVGnmbb03cNiyAJDhgJAjSYG/AkEVNCBFOBIpA0vUMQEKhkC8SWFqFA4k5lmNIA5SzlBBoSgGOaHGXFs8wHO9xOC0eWySPLxGS6Fi+/HkQkhFJRKoUkUilEhOS7BQim0gRkbIUgkghRATJwrfzhkAz7r+xXQsEFqfTY2dZBSpoO4ivrRgk3vFciIQkSLVRQa7UGI0MQZIMo2aMpDEdjtFvyFQaGTN/CPRPiOk+ZFqTHDI4LD6Lz2dxVjndVqlUWihtlNptsWvrORCr1SqciIykjGqVlFRQarGEkrIKmVpKkWqKgBcZQakYsXwBEKHENB6euG8ImXy+kNPncPgsJSUON6WQS6WKbMpuC9+OjOSdXbveAcmMECu0xGsElwhZkTvWZ9s3XHpooKCndKLA2Rtur9ndU7Cvb7h2qDL8oL3y+6sHh1vae0dKS+8nQJa/CEg/vLsFSEyCizhMYwPusH8g7DenFrA9qT2OAX9PWt/QxpPqLnO7d+I2hgxvfdg93otG8p8hKvgFqxqtbfgKC1wk+X8gvwMhnmIwIAuGUGW1RVn+NmWBtVTZYxkYK8jcfGRjZn17dS+GrBlu6d01NjY6ujYi2bJl9VlwxCCF1sINAkhWdhbLsmIxwZByWBxyjZols0npAiGXL1/+3RQLLAan0wA5nVXjB6jysvBJc4V+qOGGviBcGrjYE65IO91UWdkz8jA80hMua6nsKJmYGG9ubi4uLl63ZcuZM2fPRiEnrNbCGSCaDFKsJ0kZQBjSKBOTJMkyYvXCIMcRpKpK63JV4cDidGpR6fDJUQqWoliFtQH2n1JLlcOt2PvBe++RanfQ4wv5LBzalW0dvg6oGUI/VhgHKYSUAohIJVJJRSK4wuQSuUgigWOJSq9YIKS/v/+bKpfLtQHldQEFHCiNRo8hajWlUFihLosWIOe2792rZhV2uMs7mCYZUCB8n4GCdlYxI2T2JAtcI3f6jx//pgQ5cnJAguaCJ+Jy6fMBYldQYlLMIojcbtE63Qr5OQUL39s9cHsxHu2Uybjp4AoRq7efAwhOAFnM8EQAgh05q1aBxOXSolzKTflKDCFlIJFDAME3RDnc2OV2D6yi+qOdnQyDLCRKLBZCGhuXDtIfg6RugJR6SPnRpk0Iwqpl9VdISgGQoKUKIPBvHFEBJL3eCA8VDIcvLj4Ib9BhPcVDwNGoX3II5EUjwW2IQChW3PS+xohGonADhLcrcCxvMZicmveNxvpOBJle7cFESOOSQ0Di9ZbgqnCuDUoEcVNkvV5/hXPb7SxAtBYPj0IPkCYT7Afp7w8ODnZyNlBs3Vpc3Gx/8RDswAYTqsqFIBY3z1zR6+H8bbzbbYGt2eGw4BwIos/XDF64cGGwkww2FEMvEnJnerF7ESMykTgI73HAynca4Pxt6GoyoSdh2Gl9ITiGjS3/ws6dO/cflfENoICEkBNLBTmOtt8NUAkASrw5OS6XExzTE7HB2RtQEUiuwwc3C6u1oSOEIJv2YwgaSXMQgsUuj4egtHOBpIhmuduoVLNBvC4TQFrKc1KVWm0MEvSFsMMZKKrRwk84PEHWrQyMWGAk2vz9b//284X9g4NHGY7LKjqiVMP2uwBIoPTYsUoSeYqGqomZUj2TPwfyQ4kXdi0vLI+W8vKM1FTYuUpu3kIQxm0P2izQ2GGapj/9cAQg7gPDeXn0sRsjBq3m0Hpd3tBHRribpB3Oo+m84bYoZPXcIYE9vRW1ew6LxJXteXlFxExd+fPpv0PuIAjefHPKAZKRsWqV93Fd3ZNNH+kZimXdPEl20/T6snZaVwCQqzTdHgZXaZVTf6zg9sO8NoAOIQWy1CaukRMn5rDYh/I0BHEjL6u6oLYbIDM22UhEgmuwUHhpASQjAyjTkCd1T359jCBuiqLc6mqaLhOLmTKd7hfDbZoOe4KOME3/4gzQ46Gq9RtDoXFwtdg6Wnrp9cp4SLDhhD3nP0OKuiQEsTEvFQ7TAPLc3H8SfzyTPrUmPmvhSysaSB7V3XpcB5eWAz0K8ryfpgM8yT3Q6R4a+nR0Dfx3EDp2rmrvGR3T3Q8Z2uljLo7jO0ZoOu2fkPI57VqKY8PE7BDRU8mk6q8/rE+fSRIngiH4TuJtgfWe86jO+6guH/ZdB4ozD3UbORlzG05+xXjlkCMUWoOOnemZn+p0E6HQqE531cHISI9tmC6LXyNB+wlr1pwgN/bUzArBTUomJwlyUiWAYAeWwGMwnogG7h8oh4UjSU4mY9J0utHk5JADQR7CsVZTX5P5AG4s47QuM93YBA/17sT7CHuO2j4XCAAyCQFkloQQTMEvj+rgQ6ONOIyMDLdyPV0aSoa3ISBpWa8rNWjzBzVajZHjBnS63en1R5uamsTxkIbGc9s/YFfOAdKW10fMF3IHdi0vLPbI2xEXQFwuuK5+fVz3N/tmF9NWGcZxP5jOCzWetD1t0kDaA93BtqOlKcG0IqntKFQptoq6nDqQqCnMWqzSabuosMAMsiVKqpWULAtjYkwweCFzZMLFmA6FBAhMh0OdLmM6o3MzS7zx/76nX7A5SOa48gelb7suOb/zvM/7XZtJ9EDrikscGHhXFTj+DiDv/mwNHH8YIp84HJFC5aDV2htJdAJ7/b5sEYW7RbJ77SL+inflWSIlGEu3MVfFoGDYAtKvKFIiMzM5OROvwaJ0iwbzERtfigdyBLxmaqYikUgHGBhUqYq3U4vmByut1uoXXzA56Hyk8JEhldWLmRXaabY+PUOEyKPu+voWz9r7kYr9rX6/P5gS2dlW7e+G2ZXkKyRMrmGz3ihhUyInT54881UXiQYvcBzHaziNjf/iFcKvVKRZ73Cg6+74VKW6mNhOPR7+zmrdhLGMKZLACB5N2Ddoi3sIe5Ej2SKddne9sGaRwQrKoZSIvzjYzlwdli2QyAown2AyImeIiGaLyejR6TgNkeF/hQb4shlAhFCtUvUNJLaD5mbkdg1fVPTai8iPVx/b/s4bUyrVNw+8TUy+69uULVKvra/3rllEoaUoUCzQSsnASipfc47A40xlVyknuFxOp05nseg4j+sXUeRPcQ3CBeIq69YDHR1VhHiFdSvPcw1dpYJNT8bGj5kCqg8e6Ol5443mgKpmW5YIb+Nttesz+rWePDPzVVeRxemsc5bn5VmAx5WMyBceF/AAX4X1IWf0wCegozWg2sp5BE6tVhchfkVFQkRZg5D0vLp9S5+qwpstQhaV2tdH5P6TM2cg4iyvq6srdxIsHk8yRyxOTzTqwVvnA1bVQ09R8s7vJ+Wt4KmQjgLD6C6r6qO+QxiBDeYvE9GPjPSvV0RGZ4gIPIgEAc9//gKPMWeKamuaYCxdrFjME8ENCG7F6NiqCtQkIHJvWkQ/ojeuT0SQ7JOjokg5NARqgmvTjY2VZ1j8NE1epnwxmJfBGW6r6fs05K5fKbJeEZmZGaUi5fAQNEAQLE5ylzPkrQWnK4KVIYmhXguRe9NVq2rdqtaZmZljEMmDCPUQVUSTOoJzbSIWwWZDa8zKiAhMIPIWIoJ1loxIAZvPMjcEiOw/diwlwmkyJsiUumj0wIFoNFqXHZN/iZUFzZeG5/VKIvI4RAAVMdlMGRG5UmrAwCOfuS6ky15orypSmlERPC5HB4g4okgfJA2g7QCN07MidU4LPggEQYNZjMfR6SYij2dERkwjKyMik1+XR6yyss1vTNtsTudIWgS3VZNB4F0YY0UiEQfWSWCiA9AQJT589kPKs3UCr4/A1iVgOiZ4HANURDS5763Xt5l4/j/OkeJGjADU3UNtu9MuK0XKIYKYpOBdLkckKQITBKUcEoBKpEQsroTEblc6BARE8EQH7C2y199/HOAsCiJiq9LzqzS/CulVarxMIf93D0p+b+UmtTxLRDWZLbI8JA5KlIjUQYVqLFPB+9FOt9tt74hadE7kFBFpeh87cPilIiN60yoReel5M7Mc/eDOnZvGtcxySlgAjwyyxsqdhWmRQADN71iDDrdcx5GQXClCLODhrANwSstQwQOddrt9oCMKJSyeDgy4W5qeoJvu92HlcRtv2rLl2mMt5Sam+qUCJoN2507ikDu+IiZt1aB2Zeg0aZGKwI8QUetIEhQVpTSgRLKd4BIsOhELQBl9BoWKoWn7BKB1I4WOgQG7+2XsJgIcBexpwqpM6crRr1yazaBEKg0eUqdebvZVasSS5og0G59felXk6bGWdfLHs2azWm3GnwaYpEX4pAiHfwL4SIM5SAtJ4AQ5jrN4MNAELqMD0107u3fvW4QebMeNYZJ2zapV66dPjUMsfQ7XcJlp1ktMhqqhVQeNoA8XZyZAhJpwEAmFiUjE4QqGzWmq8WjvVwNzY2ORLuQTOIgAQeB5G3q/RKddwmLDp0nWJHuZlWyc2G2+1nxEXpMssEM+hikaDy/Lnt2Z7mJcupqIKhAIVJrVYkTQ9KTp97rUjT51q683Zg7G23tj3eHW1pg33tgdr437NFywUYjH/R5za6u5OxaMx9Vo4xIJpcTNGsg+8L592GuUXXx319nplSIKr9cbFnvFmJpJ4R08Ur0iLSpzU6WhwlV79gARUQPUK0KWiJHrjat94ZC/IdjdjmlnazUO6vlj3tri3laXS+3jfEGvQ9cbCwcb28PBWqUSFm5DS339PqAg7Dsfv/jumytFtKFQqL9t0Iw2tDK7EcplVsC2yZOSjczqImVlZYNYKIVGiqRIsb893h3yd4eK1eZYt/+l1t7ixuJWX3Vt3NsYdrl0Pk/c542EfLFQvDoYb7TYRYukh/izuHg+1pclUmLA1Se7+daa7kG8vBbe1hJCVeVqAxbaagX2DxaBBrDMBB0cqr7OaREzuxjJrdZZ8KvDsITMHMnc0eHwRJ3nY2iF3e4WaADqkmQxfP7vC9kiSjmTK2OScGFmFXybKNc4CMmmx1okIkVcUgQXq6PtEZpZmsQ6MjehBHVJ6GSY4omK5JVHO+wtokdLixvQF+D77xcX/84SUaB0I4DIX+CgBV0IkkRNPVIiFIigp8QbGYuUCOkrD6RAl57Ebe9EG2x3Uw5euPDbhfWZj1ScPn36oIVWLWKQlxRxUiP6jpOU0jVOAGJXGUmQZbsUdrfoQccrHfCgnDq1tPT5+ogE9pedPqgjFUs0EK/e4rRw4hIJRKCZ7eGBB1l8xEJqB1ZS7QQiQoEORDrdyWr2PfhtnUTKIFKkBmmRBswsoi6eoOGIUzr/aZYjFsAhPqEWoRoREUJS5JNOeFCWixgYeYG8wCBn5HKcLJUUyFn5ZqZKyjIFOHSK4nVAWy2INKQ8dGSix7sS2EQg6I0eOOFEB3LCSC89gUAk9DYe/T96cpcDJiQvUiIodzowtGcNoEX2G8jkCE6X8pJCPWPIL1QaZRJjYSGvwdlZJcMXkqMg1ycyOTpaUYmKlRQR9Ep6yEf2Ms43sE8/LRFhk9AXyiqbpkFtVnM8DI0JN+68OxUQpLoRy69Vj5E1bZb95ofq2KeZiBjYwlxWK92sxLNEppQZZFpGKzXIJaykimWvT2QUfNXVlUwRvgobHISmvdhxo4dk8JqcqMFfLexexZZPYZVpC91t1PBAL9Hm5stgIpKwlXZ1YcueHpF45A+wcJUckUpXLq9jJH+dIsdycg5jl4q2WUIVm68AuduaerB5iLEfHBQlAGebmiD3Ku70Y4VVIyZatxARnjcqceBGa0iadDpKx8Zg8uQLJtPIiO35msqhI+uT7Dlff3wzdqyoCOeQ5FONbU17e6hHE+IhiiBGe58hW+6FpD5jAdEGjEYs7j4iy1XkaluIBXA1jKVN+Ivn3tz1Xtl6nUW59Nns5Q0bd+3a9e3gccJPR6d+mp09vvv48RPTn01MHA0Fg6HQid/BxMTE4Yf6as4eGR8/e+j5Q89/dRYcGVr06IK7gwcpF8axcwQ2btgzPDx8+tz83Nye9RHZcOny7OU/cmYwCD50orZ2dnZ26kRte3//CcLU9JS3NoQvqoanP/uMaBxemN+TYRiP+T3f9bb3h0LBv08BqAQmJ3/8cXT0GFzmITI8DJFbmBsMRO4cnrv8xyXi8fPvR48iGD9NHZ0CKE/T1/g5+ju1WJhbOLychYXDE99MT+M/4NMHRU6dTJtsJCJ77r7pptsUzI2l5Pab7sjZcOnSxgDYMze8QJgbnpsjD9xLVA8RFMH8xqx4zBM2EDbmkL/zNUmTpcmUyZunz8HmDvJd3RLmRqK4hXzr+J4NZX99S9jx7Y4d3+JBilcQIOP9K98WP1mxY8f+wNLSKbC0tHRukqpMTj537tz9d8EDJrdLbiC33HbrTf/zTztn05q4Ewbw7/CYSSYoAVtTI8E0DZjT6qGXRRERAjkU9CoRLIJCTl5iEXuXqiAeFikeCgu97aW99XP9JxN1zeo22epm/S/7a5uXdtLpj8zL4xOnp0cEa+YjqCSKNfPRVBLJmvkoKolkzXwUlUQSPURRyd8rgpnMHnRYodNTziua2Fv0RESyyfgusx6sGNHzO+/ifHwP2omIXOVje0jDCo2e3oNLIr6vaOWERBp+NiJIELo+kZ2i8ZMSyZ8xPsprkVEy2fCLJNuMj2WwCE7JsoxhB1E8ukhSBR83a5EecfCLfGbARz1YhHutvjyz4KfUgYH5W0R0wYPHnghtV73ZjLSd+Gx2tyXiKxpGZKwDCG3ANh62tSvAj1qW7b8xjArM1NLhsa1dHE+Ef0163NprkX4y+cIw6VhsmWDULRF+si76GE6knpMSmRZWnpRxpXnDO0WjftWryo7FjueVr2jcNV7R0USELzGPeG0tUozFqnTUqmOALRHh07qoEbJpFZ9tT6SlwlKtcsCgQQ8ca/4MQivRkuFG/s0ib6JYicVueJGAPipCm1aCinxzRd444D0RKw06Famzv1nk02TymYy4E5dvyiEiQn04XYlo/bM3brgQHIupd6ZVFIGIj7uPivAWItvL/nyKDR2aOqr1zwClL6QrSKQ1EQwRauL/QSQU/0T+XpFCzGNmBYp8PmURbDQ9atyWSLnZ/BaLTabN9JYImm+KhhPBx/j4cKzlnxDPqciHYi2M0THA+A+LEA1R5w9FFxWEg0XiraqP25+LzMY7RQNERAzHAIsoWGSH/SIfeYWIEX8kER7hPyqipBDZif63NOkcvIcCgFhwkckhICCglBIgIvfSe8hRkfuXl6/p9HPxZUxFhL1Fz98VoSt14HE6ryHYwJnwc/RaBZSRYQCAZVdEZjSgIrK4IxISbx5pAdTW80hI/CKsKzC4gFGqPbXBbI6QOprauDa65i3HsEY78SLSNbjogIUASdDJKIwnwp6EiFkbOKjNjlKOaEqOmjBzl4rGGVBJZU3wkUiAqAHnMA86APAaBi6kiOBoDpG3NB8SgNVqTajI5bfWkoroI80HF/6OdNpDGLU12UKd3EjhzIEKTskEDTE2+MiUiAjZDacYQLQE8IuEj7UoW8mHFhD2d/a48QtNC0/VXrunEpHLoW3YjNNx2B0RChVh5znIogcjx5yMCO3sZKMiucQhAXhRyTI6cFmEdVBB5+FHMEtEVAAVl0olHpAerrNz1dZbV3t4a41nJLhqrXjWXNKt1ldN61CR24rWj/ttq7RQ9v3hl4ocTrAIIJRJxvPnSL6NxQfIQ1zEXRYIPcTjYzqPxMh57AdoIS1wHjmc4HmEwuVjjWvgiUhnXf9LjOCbECkfmBAFQZDZQ5HJbwkhItefyo5pJdcil6ZdJ23p6alomgvSO2zTeXK5I/fglR5t7k3h6Wn+vggvM5lS9kAyDMuHEAGM5UKMsBIhFoQ+xt9TptilRKLfBCbw97EVDsYQcEcwHAMUfEcowpctkRtv4Pp57lfciDQBgkRQRCIoKxHarwXC/VxyGRcKJJJcSJLXU2ZfCnXv4kmhrAJkpbY3WCcLhQdJSoUZtXiZfEF4ELvag8CyQqjOnv08IyRzOkEuz1yaulCluWuvK9wIugIUUgQD/2U2W+UpdH08m41CzCOXRsdCFxAa3ulYbqxZyeKrnGl5w2+oML5xTf1fYy4WHbU21DFss5tFCZ7Z59dwIdpqc9SGUHhBIyhn7p81SISd2Qkz0qgwoFbBRZMui/QgTwwLhdallPlB5JY2RNKuvhUKzRAivKWV0EOiBhaCYNRrRkvQ/3jsivAmDi1CIK0rs370MZ41+vSAJE/GguDkZ3d+kfijQJBvZrOpwKMQIgkkdlMPCQMsBYLhrkQaNHoi7QsIL0JVSrtPrNZh/P0PImdAQEtv1Aoh0jFzFTG0CKyCRkxFHDGcSLaQ97jdtJ9W/lMFQGTZdD6/oCIF9jtXRMRkWQRonM+PWFYM0dlBUDHoIAKGcIg6APlEmO5CdXbErUGwIsVxPH1iVeQ4gYrEk99x+3o+mSwBCBzXSiadUwka97NOPgAV2YO0yWudSNCIU/tAAP1GowguRr4xIzel4W5jjRX5LACfSo0beS1gZk+x3OGwwUFj5q6wy/0IgJUkFVz0K8nt72eSGY8lB9IKBPgtcGanIiqTOBRGlXnlg3ktHzsp061R61SCRlck7scTQaILAsCiOCQ5eVmUNiKKSEjdxOPW6QSNRCRv5ny8UpHuxKUPYE4mBSJ7T7YrEWU8IdyNcjnaroJHLZyb5zCEhGkD5GqG6F43B8EeiAGdPSgb789rUTZh/C8mH3ImzCVgGAA1AQGwZgXA0cFl8AwD4fwxYPiNRoTO7E0GkDIwjbbk2DkIQNQAHqwOBmDsHtnMr34hHaS/lT2Wwy2RpW2ny+WFYXfJ5G7ZhOkNLeTYLsSf/NgMI8IBxj0QHXX0KIYREbDBgTJl0iJw1nmASMDD0N1sPCGRpIXOgBI6jG93kJnVZHWeyUi1ECLKQDRUJA7bz8xQuLZPR0TJDTrADoyU2hkwEAB+BDjrtOEaAZjADUz+YJHkcnn/M5Hq8oZsz+ZG4n2RCGKtYBGP/SKFTWc/kaDxcJETCRrfE7nrufQXiyLd9hHoGv3Wgpz0upkQIog/TqaR59FhnR3WrxCHJD7RgULnESnUgx6aamRV7jBUNkVjxuhFjv+cHaFwIihd9Ph6vhaxi8WXft8mJYrFLgD3tZhGkOr2eyIVqfbTiSARCsYYHQzG+MC3y7bAB+nsDS58iELBcBT+vAglEpFGv+vjnoq0u11iNKHfaQJwle4IgfBcLepUpF5dkMtKJyWyi//9Wvs7u/cK8Z/I0UWYenmXZQ1gtHVeBcjelFsKeKBFeckA7pfLndMR2eZ/vTSJ8E/kT4pEsmY+ikoiWTMfRSWRrJmPopJI1sxHUcl/Q8/cLJgt7e8AAAAASUVORK5CYII=", + "image": "tb-image:Y2FyZHNfc3lzdGVtX2J1bmRsZV9pbWFnZS5wbmc=:IkNhcmRzIiBzeXN0ZW0gYnVuZGxlIGltYWdl;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAACgCAMAAAB+IdObAAAC/VBMVEUAAAAuTILg4ODf398dMkk0SWLg4ODg4OAyP1UrQF8sRH2/v8fDx8dFbHsDCBhKWGvDxsYaNET///8AAADg4OD4+Pjn5+fj4+P6+vrv7+/q8voKCgre3d3R2eft7e3TzMjP1+UdHR3My8vQzs7r6+vz8/PQ0NCKiorS0tPb29zm8Pnp6enQzMrX19j19fXNzc3m5eXW1dacnJzT1NnT2+nJycrx8fHf6vTMztHh7PXP1ePTzswbGxwWFhYsLC3Y4u7Wzcjj7ffT1NTS2OHl4NvZ1tXPz9QhISHVzst3d3jZ2drX1NNKSkrP1N6Xl5fn495tbW3d3uHW0tGysrLs7/HY3OG4ubnl7vbi6fLL0NhSUlLd5/PS0NCqqalXVlbp7e/Zz8rs6eXg4+XLzM0yUI3e4ubf0coSEhLc5vGsrKynp6bl6OvV2eBjY2MkJCbO0tvHxsbT1t3Q0dfBwMCSkpLj5efq5eG1tbU2MihVav/d3+Ta2Nfa09COjo7W3+vMztXl6u7Y3uakpKSEhIQ7Ozxynsy7u7ve2dbDw8QxMTLu8fPg3Nng5+7IzNJLWnHi5ekgN2rw8/ba5PDU2uSfn59AYZqamZlcXF03NzejoqHn6/Ld4+oODg7d2dqvr6/q8fbu7Oo7W5MpKSpsmMdxcXLe1dG9vb2Sf25OTk/j3Nbl1cpMcKZFRUZkjsA2VJJ8fHwiPXJGaaB/f4Dd1dQqRXy3zuWZqsmOiodRYnllZmd1hqJpeZPW2dlchblzdXZBQUEPIDjFyM9WfbVghrBRdq6Xn6tpaWkSI0Oqu9qyxN+4vMJ0gZlteIgcNGANFyagprCgs9GAk7mSmKMeKjiwt75YfalXZoBBTmWssLaGipFBOS4XJCVfcIqBhIl9bFvGvrXAtKCOk5gKGS46JBilq7RVWFwjMyuVoOllb3lsXk8lFg5kdvp3hfK1r6qyo5Gax6iFkKViiJufk4alquKTjIs6cIRXNyiv1LqKpqjE38t8jLCzq6GGvZdrr35uroH7pmE0AAAAEnRSTlMA/u8g/v6/r/4gtyC/v7+wr69GtHW3AAAd4UlEQVR42sTYb0wTZxzAceaSLfvzYrlcr60pjacFet4oLRVE0ris3SQW2u2UIuCk8bBGaRFaqIaillqnlT+rUqUoAXVDQyIbDNwSFifBOaMuJmrYoi/IQjLiC7fwwhfGZVv2e55C/+yYDBj4FcqhJN7H3z3PXU1Keu31ly6/FNeOqc5HOxXpS9ylSD9G+07Qj9ClS1+eeumTQCDw1htJ0MuvLCMXsVdfBgc69S9wU6eNTxwXd+bXcddQ30b6HPrs88+m+3gq/A380bfXLp3/ieM4feANcCyTEotZ9rKXk17HjggEU6KKOMf1eMe1aQaWJChiGJBcBwjJ8/o3k5JezSYWN+krSZd3YIhwItiROBEMAUdMMjUNYSC5duonjud5LpCURBKL3TIMOX/v65m6+/Xd+G7GdyvWVzN269bNu6M8qnopICSCfPHdiriSI61ZAx/THYz2TrTW1tZd0NZIa6dat3a6ra0HO6xLC9lxT+jAlsQijoNCSMwBkGhrd3U0F/Jutztr6SZyL3cGSdxEkhEDIFBsIPEQgeJd+Nza2lwYhOIhu8X4b20LwGsFIdpNRMpm/yeI0IGbYiSvCPlwiRBwQALHu9OtbS5uRJCRGGRb9UkKvvSpurJOp/trKtKIrmrjvt27uw4UHTL6KVXRESYzq8tMmWuNJ2vmBcn914mAIzfX4bF5OI/NJpxIDJKoWL363XXNZxrtUHkUIjITqpMIQqzKJPz+AVEasc3ffcQ8FNj8oXlzLSGvbcuorTFfPX3EX2vOXNCllYwhiQNZkWuw8Dxj5NwdvpkhiQ5QoLasKxZAuovkZvhac2Bb0YHU0xfNFYS6oi0lbYBp22zO2EyI0vpWthUd8Ov9YSbt4nwWey4UHYlwIiYLz13RMnzQFz8SISTKwE1DWjAEV51Wm03MnqjtELzOExIbiWAiGKJVGnmbb03cNiyAJDhgJAjSYG/AkEVNCBFOBIpA0vUMQEKhkC8SWFqFA4k5lmNIA5SzlBBoSgGOaHGXFs8wHO9xOC0eWySPLxGS6Fi+/HkQkhFJRKoUkUilEhOS7BQim0gRkbIUgkghRATJwrfzhkAz7r+xXQsEFqfTY2dZBSpoO4ivrRgk3vFciIQkSLVRQa7UGI0MQZIMo2aMpDEdjtFvyFQaGTN/CPRPiOk+ZFqTHDI4LD6Lz2dxVjndVqlUWihtlNptsWvrORCr1SqciIykjGqVlFRQarGEkrIKmVpKkWqKgBcZQakYsXwBEKHENB6euG8ImXy+kNPncPgsJSUON6WQS6WKbMpuC9+OjOSdXbveAcmMECu0xGsElwhZkTvWZ9s3XHpooKCndKLA2Rtur9ndU7Cvb7h2qDL8oL3y+6sHh1vae0dKS+8nQJa/CEg/vLsFSEyCizhMYwPusH8g7DenFrA9qT2OAX9PWt/QxpPqLnO7d+I2hgxvfdg93otG8p8hKvgFqxqtbfgKC1wk+X8gvwMhnmIwIAuGUGW1RVn+NmWBtVTZYxkYK8jcfGRjZn17dS+GrBlu6d01NjY6ujYi2bJl9VlwxCCF1sINAkhWdhbLsmIxwZByWBxyjZols0npAiGXL1/+3RQLLAan0wA5nVXjB6jysvBJc4V+qOGGviBcGrjYE65IO91UWdkz8jA80hMua6nsKJmYGG9ubi4uLl63ZcuZM2fPRiEnrNbCGSCaDFKsJ0kZQBjSKBOTJMkyYvXCIMcRpKpK63JV4cDidGpR6fDJUQqWoliFtQH2n1JLlcOt2PvBe++RanfQ4wv5LBzalW0dvg6oGUI/VhgHKYSUAohIJVJJRSK4wuQSuUgigWOJSq9YIKS/v/+bKpfLtQHldQEFHCiNRo8hajWlUFihLosWIOe2792rZhV2uMs7mCYZUCB8n4GCdlYxI2T2JAtcI3f6jx//pgQ5cnJAguaCJ+Jy6fMBYldQYlLMIojcbtE63Qr5OQUL39s9cHsxHu2Uybjp4AoRq7efAwhOAFnM8EQAgh05q1aBxOXSolzKTflKDCFlIJFDAME3RDnc2OV2D6yi+qOdnQyDLCRKLBZCGhuXDtIfg6RugJR6SPnRpk0Iwqpl9VdISgGQoKUKIPBvHFEBJL3eCA8VDIcvLj4Ib9BhPcVDwNGoX3II5EUjwW2IQChW3PS+xohGonADhLcrcCxvMZicmveNxvpOBJle7cFESOOSQ0Di9ZbgqnCuDUoEcVNkvV5/hXPb7SxAtBYPj0IPkCYT7Afp7w8ODnZyNlBs3Vpc3Gx/8RDswAYTqsqFIBY3z1zR6+H8bbzbbYGt2eGw4BwIos/XDF64cGGwkww2FEMvEnJnerF7ESMykTgI73HAynca4Pxt6GoyoSdh2Gl9ITiGjS3/ws6dO/cflfENoICEkBNLBTmOtt8NUAkASrw5OS6XExzTE7HB2RtQEUiuwwc3C6u1oSOEIJv2YwgaSXMQgsUuj4egtHOBpIhmuduoVLNBvC4TQFrKc1KVWm0MEvSFsMMZKKrRwk84PEHWrQyMWGAk2vz9b//284X9g4NHGY7LKjqiVMP2uwBIoPTYsUoSeYqGqomZUj2TPwfyQ4kXdi0vLI+W8vKM1FTYuUpu3kIQxm0P2izQ2GGapj/9cAQg7gPDeXn0sRsjBq3m0Hpd3tBHRribpB3Oo+m84bYoZPXcIYE9vRW1ew6LxJXteXlFxExd+fPpv0PuIAjefHPKAZKRsWqV93Fd3ZNNH+kZimXdPEl20/T6snZaVwCQqzTdHgZXaZVTf6zg9sO8NoAOIQWy1CaukRMn5rDYh/I0BHEjL6u6oLYbIDM22UhEgmuwUHhpASQjAyjTkCd1T359jCBuiqLc6mqaLhOLmTKd7hfDbZoOe4KOME3/4gzQ46Gq9RtDoXFwtdg6Wnrp9cp4SLDhhD3nP0OKuiQEsTEvFQ7TAPLc3H8SfzyTPrUmPmvhSysaSB7V3XpcB5eWAz0K8ryfpgM8yT3Q6R4a+nR0Dfx3EDp2rmrvGR3T3Q8Z2uljLo7jO0ZoOu2fkPI57VqKY8PE7BDRU8mk6q8/rE+fSRIngiH4TuJtgfWe86jO+6guH/ZdB4ozD3UbORlzG05+xXjlkCMUWoOOnemZn+p0E6HQqE531cHISI9tmC6LXyNB+wlr1pwgN/bUzArBTUomJwlyUiWAYAeWwGMwnogG7h8oh4UjSU4mY9J0utHk5JADQR7CsVZTX5P5AG4s47QuM93YBA/17sT7CHuO2j4XCAAyCQFkloQQTMEvj+rgQ6ONOIyMDLdyPV0aSoa3ISBpWa8rNWjzBzVajZHjBnS63en1R5uamsTxkIbGc9s/YFfOAdKW10fMF3IHdi0vLPbI2xEXQFwuuK5+fVz3N/tmF9NWGcZxP5jOCzWetD1t0kDaA93BtqOlKcG0IqntKFQptoq6nDqQqCnMWqzSabuosMAMsiVKqpWULAtjYkwweCFzZMLFmA6FBAhMh0OdLmM6o3MzS7zx/76nX7A5SOa48gelb7suOb/zvM/7XZtJ9EDrikscGHhXFTj+DiDv/mwNHH8YIp84HJFC5aDV2htJdAJ7/b5sEYW7RbJ77SL+inflWSIlGEu3MVfFoGDYAtKvKFIiMzM5OROvwaJ0iwbzERtfigdyBLxmaqYikUgHGBhUqYq3U4vmByut1uoXXzA56Hyk8JEhldWLmRXaabY+PUOEyKPu+voWz9r7kYr9rX6/P5gS2dlW7e+G2ZXkKyRMrmGz3ihhUyInT54881UXiQYvcBzHaziNjf/iFcKvVKRZ73Cg6+74VKW6mNhOPR7+zmrdhLGMKZLACB5N2Ddoi3sIe5Ej2SKddne9sGaRwQrKoZSIvzjYzlwdli2QyAown2AyImeIiGaLyejR6TgNkeF/hQb4shlAhFCtUvUNJLaD5mbkdg1fVPTai8iPVx/b/s4bUyrVNw+8TUy+69uULVKvra/3rllEoaUoUCzQSsnASipfc47A40xlVyknuFxOp05nseg4j+sXUeRPcQ3CBeIq69YDHR1VhHiFdSvPcw1dpYJNT8bGj5kCqg8e6Ol5443mgKpmW5YIb+Nttesz+rWePDPzVVeRxemsc5bn5VmAx5WMyBceF/AAX4X1IWf0wCegozWg2sp5BE6tVhchfkVFQkRZg5D0vLp9S5+qwpstQhaV2tdH5P6TM2cg4iyvq6srdxIsHk8yRyxOTzTqwVvnA1bVQ09R8s7vJ+Wt4KmQjgLD6C6r6qO+QxiBDeYvE9GPjPSvV0RGZ4gIPIgEAc9//gKPMWeKamuaYCxdrFjME8ENCG7F6NiqCtQkIHJvWkQ/ojeuT0SQ7JOjokg5NARqgmvTjY2VZ1j8NE1epnwxmJfBGW6r6fs05K5fKbJeEZmZGaUi5fAQNEAQLE5ylzPkrQWnK4KVIYmhXguRe9NVq2rdqtaZmZljEMmDCPUQVUSTOoJzbSIWwWZDa8zKiAhMIPIWIoJ1loxIAZvPMjcEiOw/diwlwmkyJsiUumj0wIFoNFqXHZN/iZUFzZeG5/VKIvI4RAAVMdlMGRG5UmrAwCOfuS6ky15orypSmlERPC5HB4g4okgfJA2g7QCN07MidU4LPggEQYNZjMfR6SYij2dERkwjKyMik1+XR6yyss1vTNtsTudIWgS3VZNB4F0YY0UiEQfWSWCiA9AQJT589kPKs3UCr4/A1iVgOiZ4HANURDS5763Xt5l4/j/OkeJGjADU3UNtu9MuK0XKIYKYpOBdLkckKQITBKUcEoBKpEQsroTEblc6BARE8EQH7C2y199/HOAsCiJiq9LzqzS/CulVarxMIf93D0p+b+UmtTxLRDWZLbI8JA5KlIjUQYVqLFPB+9FOt9tt74hadE7kFBFpeh87cPilIiN60yoReel5M7Mc/eDOnZvGtcxySlgAjwyyxsqdhWmRQADN71iDDrdcx5GQXClCLODhrANwSstQwQOddrt9oCMKJSyeDgy4W5qeoJvu92HlcRtv2rLl2mMt5Sam+qUCJoN2507ikDu+IiZt1aB2Zeg0aZGKwI8QUetIEhQVpTSgRLKd4BIsOhELQBl9BoWKoWn7BKB1I4WOgQG7+2XsJgIcBexpwqpM6crRr1yazaBEKg0eUqdebvZVasSS5og0G59felXk6bGWdfLHs2azWm3GnwaYpEX4pAiHfwL4SIM5SAtJ4AQ5jrN4MNAELqMD0107u3fvW4QebMeNYZJ2zapV66dPjUMsfQ7XcJlp1ktMhqqhVQeNoA8XZyZAhJpwEAmFiUjE4QqGzWmq8WjvVwNzY2ORLuQTOIgAQeB5G3q/RKddwmLDp0nWJHuZlWyc2G2+1nxEXpMssEM+hikaDy/Lnt2Z7mJcupqIKhAIVJrVYkTQ9KTp97rUjT51q683Zg7G23tj3eHW1pg33tgdr437NFywUYjH/R5za6u5OxaMx9Vo4xIJpcTNGsg+8L592GuUXXx319nplSIKr9cbFnvFmJpJ4R08Ur0iLSpzU6WhwlV79gARUQPUK0KWiJHrjat94ZC/IdjdjmlnazUO6vlj3tri3laXS+3jfEGvQ9cbCwcb28PBWqUSFm5DS339PqAg7Dsfv/jumytFtKFQqL9t0Iw2tDK7EcplVsC2yZOSjczqImVlZYNYKIVGiqRIsb893h3yd4eK1eZYt/+l1t7ixuJWX3Vt3NsYdrl0Pk/c542EfLFQvDoYb7TYRYukh/izuHg+1pclUmLA1Se7+daa7kG8vBbe1hJCVeVqAxbaagX2DxaBBrDMBB0cqr7OaREzuxjJrdZZ8KvDsITMHMnc0eHwRJ3nY2iF3e4WaADqkmQxfP7vC9kiSjmTK2OScGFmFXybKNc4CMmmx1okIkVcUgQXq6PtEZpZmsQ6MjehBHVJ6GSY4omK5JVHO+wtokdLixvQF+D77xcX/84SUaB0I4DIX+CgBV0IkkRNPVIiFIigp8QbGYuUCOkrD6RAl57Ebe9EG2x3Uw5euPDbhfWZj1ScPn36oIVWLWKQlxRxUiP6jpOU0jVOAGJXGUmQZbsUdrfoQccrHfCgnDq1tPT5+ogE9pedPqgjFUs0EK/e4rRw4hIJRKCZ7eGBB1l8xEJqB1ZS7QQiQoEORDrdyWr2PfhtnUTKIFKkBmmRBswsoi6eoOGIUzr/aZYjFsAhPqEWoRoREUJS5JNOeFCWixgYeYG8wCBn5HKcLJUUyFn5ZqZKyjIFOHSK4nVAWy2INKQ8dGSix7sS2EQg6I0eOOFEB3LCSC89gUAk9DYe/T96cpcDJiQvUiIodzowtGcNoEX2G8jkCE6X8pJCPWPIL1QaZRJjYSGvwdlZJcMXkqMg1ycyOTpaUYmKlRQR9Ep6yEf2Ms43sE8/LRFhk9AXyiqbpkFtVnM8DI0JN+68OxUQpLoRy69Vj5E1bZb95ofq2KeZiBjYwlxWK92sxLNEppQZZFpGKzXIJaykimWvT2QUfNXVlUwRvgobHISmvdhxo4dk8JqcqMFfLexexZZPYZVpC91t1PBAL9Hm5stgIpKwlXZ1YcueHpF45A+wcJUckUpXLq9jJH+dIsdycg5jl4q2WUIVm68AuduaerB5iLEfHBQlAGebmiD3Ku70Y4VVIyZatxARnjcqceBGa0iadDpKx8Zg8uQLJtPIiO35msqhI+uT7Dlff3wzdqyoCOeQ5FONbU17e6hHE+IhiiBGe58hW+6FpD5jAdEGjEYs7j4iy1XkaluIBXA1jKVN+Ivn3tz1Xtl6nUW59Nns5Q0bd+3a9e3gccJPR6d+mp09vvv48RPTn01MHA0Fg6HQid/BxMTE4Yf6as4eGR8/e+j5Q89/dRYcGVr06IK7gwcpF8axcwQ2btgzPDx8+tz83Nye9RHZcOny7OU/cmYwCD50orZ2dnZ26kRte3//CcLU9JS3NoQvqoanP/uMaBxemN+TYRiP+T3f9bb3h0LBv08BqAQmJ3/8cXT0GFzmITI8DJFbmBsMRO4cnrv8xyXi8fPvR48iGD9NHZ0CKE/T1/g5+ju1WJhbOLychYXDE99MT+M/4NMHRU6dTJtsJCJ77r7pptsUzI2l5Pab7sjZcOnSxgDYMze8QJgbnpsjD9xLVA8RFMH8xqx4zBM2EDbmkL/zNUmTpcmUyZunz8HmDvJd3RLmRqK4hXzr+J4NZX99S9jx7Y4d3+JBilcQIOP9K98WP1mxY8f+wNLSKbC0tHRukqpMTj537tz9d8EDJrdLbiC33HbrTf/zTztn05q4Ewbw7/CYSSYoAVtTI8E0DZjT6qGXRRERAjkU9CoRLIJCTl5iEXuXqiAeFikeCgu97aW99XP9JxN1zeo22epm/S/7a5uXdtLpj8zL4xOnp0cEa+YjqCSKNfPRVBLJmvkoKolkzXwUlUQSPURRyd8rgpnMHnRYodNTziua2Fv0RESyyfgusx6sGNHzO+/ifHwP2omIXOVje0jDCo2e3oNLIr6vaOWERBp+NiJIELo+kZ2i8ZMSyZ8xPsprkVEy2fCLJNuMj2WwCE7JsoxhB1E8ukhSBR83a5EecfCLfGbARz1YhHutvjyz4KfUgYH5W0R0wYPHnghtV73ZjLSd+Gx2tyXiKxpGZKwDCG3ANh62tSvAj1qW7b8xjArM1NLhsa1dHE+Ef0163NprkX4y+cIw6VhsmWDULRF+si76GE6knpMSmRZWnpRxpXnDO0WjftWryo7FjueVr2jcNV7R0USELzGPeG0tUozFqnTUqmOALRHh07qoEbJpFZ9tT6SlwlKtcsCgQQ8ca/4MQivRkuFG/s0ib6JYicVueJGAPipCm1aCinxzRd444D0RKw06Famzv1nk02TymYy4E5dvyiEiQn04XYlo/bM3brgQHIupd6ZVFIGIj7uPivAWItvL/nyKDR2aOqr1zwClL6QrSKQ1EQwRauL/QSQU/0T+XpFCzGNmBYp8PmURbDQ9atyWSLnZ/BaLTabN9JYImm+KhhPBx/j4cKzlnxDPqciHYi2M0THA+A+LEA1R5w9FFxWEg0XiraqP25+LzMY7RQNERAzHAIsoWGSH/SIfeYWIEX8kER7hPyqipBDZif63NOkcvIcCgFhwkckhICCglBIgIvfSe8hRkfuXl6/p9HPxZUxFhL1Fz98VoSt14HE6ryHYwJnwc/RaBZSRYQCAZVdEZjSgIrK4IxISbx5pAdTW80hI/CKsKzC4gFGqPbXBbI6QOprauDa65i3HsEY78SLSNbjogIUASdDJKIwnwp6EiFkbOKjNjlKOaEqOmjBzl4rGGVBJZU3wkUiAqAHnMA86APAaBi6kiOBoDpG3NB8SgNVqTajI5bfWkoroI80HF/6OdNpDGLU12UKd3EjhzIEKTskEDTE2+MiUiAjZDacYQLQE8IuEj7UoW8mHFhD2d/a48QtNC0/VXrunEpHLoW3YjNNx2B0RChVh5znIogcjx5yMCO3sZKMiucQhAXhRyTI6cFmEdVBB5+FHMEtEVAAVl0olHpAerrNz1dZbV3t4a41nJLhqrXjWXNKt1ldN61CR24rWj/ttq7RQ9v3hl4ocTrAIIJRJxvPnSL6NxQfIQ1zEXRYIPcTjYzqPxMh57AdoIS1wHjmc4HmEwuVjjWvgiUhnXf9LjOCbECkfmBAFQZDZQ5HJbwkhItefyo5pJdcil6ZdJ23p6alomgvSO2zTeXK5I/fglR5t7k3h6Wn+vggvM5lS9kAyDMuHEAGM5UKMsBIhFoQ+xt9TptilRKLfBCbw97EVDsYQcEcwHAMUfEcowpctkRtv4Pp57lfciDQBgkRQRCIoKxHarwXC/VxyGRcKJJJcSJLXU2ZfCnXv4kmhrAJkpbY3WCcLhQdJSoUZtXiZfEF4ELvag8CyQqjOnv08IyRzOkEuz1yaulCluWuvK9wIugIUUgQD/2U2W+UpdH08m41CzCOXRsdCFxAa3ulYbqxZyeKrnGl5w2+oML5xTf1fYy4WHbU21DFss5tFCZ7Z59dwIdpqc9SGUHhBIyhn7p81SISd2Qkz0qgwoFbBRZMui/QgTwwLhdallPlB5JY2RNKuvhUKzRAivKWV0EOiBhaCYNRrRkvQ/3jsivAmDi1CIK0rs370MZ41+vSAJE/GguDkZ3d+kfijQJBvZrOpwKMQIgkkdlMPCQMsBYLhrkQaNHoi7QsIL0JVSrtPrNZh/P0PImdAQEtv1Aoh0jFzFTG0CKyCRkxFHDGcSLaQ97jdtJ9W/lMFQGTZdD6/oCIF9jtXRMRkWQRonM+PWFYM0dlBUDHoIAKGcIg6APlEmO5CdXbErUGwIsVxPH1iVeQ4gYrEk99x+3o+mSwBCBzXSiadUwka97NOPgAV2YO0yWudSNCIU/tAAP1GowguRr4xIzel4W5jjRX5LACfSo0beS1gZk+x3OGwwUFj5q6wy/0IgJUkFVz0K8nt72eSGY8lB9IKBPgtcGanIiqTOBRGlXnlg3ktHzsp061R61SCRlck7scTQaILAsCiOCQ5eVmUNiKKSEjdxOPW6QSNRCRv5ny8UpHuxKUPYE4mBSJ7T7YrEWU8IdyNcjnaroJHLZyb5zCEhGkD5GqG6F43B8EeiAGdPSgb789rUTZh/C8mH3ImzCVgGAA1AQGwZgXA0cFl8AwD4fwxYPiNRoTO7E0GkDIwjbbk2DkIQNQAHqwOBmDsHtnMr34hHaS/lT2Wwy2RpW2ny+WFYXfJ5G7ZhOkNLeTYLsSf/NgMI8IBxj0QHXX0KIYREbDBgTJl0iJw1nmASMDD0N1sPCGRpIXOgBI6jG93kJnVZHWeyUi1ECLKQDRUJA7bz8xQuLZPR0TJDTrADoyU2hkwEAB+BDjrtOEaAZjADUz+YJHkcnn/M5Hq8oZsz+ZG4n2RCGKtYBGP/SKFTWc/kaDxcJETCRrfE7nrufQXiyLd9hHoGv3Wgpz0upkQIog/TqaR59FhnR3WrxCHJD7RgULnESnUgx6aamRV7jBUNkVjxuhFjv+cHaFwIihd9Ph6vhaxi8WXft8mJYrFLgD3tZhGkOr2eyIVqfbTiSARCsYYHQzG+MC3y7bAB+nsDS58iELBcBT+vAglEpFGv+vjnoq0u11iNKHfaQJwle4IgfBcLepUpF5dkMtKJyWyi//9Wvs7u/cK8Z/I0UWYenmXZQ1gtHVeBcjelFsKeKBFeckA7pfLndMR2eZ/vTSJ8E/kT4pEsmY+ikoiWTMfRSWRrJmPopJI1sxHUcl/Q8/cLJgt7e8AAAAASUVORK5CYII=", "description": "Includes cards that display dynamic content based on data from one or more entities. It also includes static HTML cards.", "order": 2000, - "externalId": null, "name": "Cards" }, "widgetTypeFqns": [ @@ -14,6 +13,7 @@ "cards.aggregated_value_card", "simple_value_and_chart_card", "progress_bar", + "iot_svg", "cards.label_widget", "cards.dashboard_state_widget", "cards.qr_code", diff --git a/application/src/main/data/json/system/widget_types/iot_svg.json b/application/src/main/data/json/system/widget_types/iot_svg.json new file mode 100644 index 0000000000..fde568de95 --- /dev/null +++ b/application/src/main/data/json/system/widget_types/iot_svg.json @@ -0,0 +1,26 @@ +{ + "fqn": "iot_svg", + "name": "IoT SVG", + "deprecated": false, + "image": null, + "description": "IoT SVG", + "descriptor": { + "type": "rpc", + "sizeX": 3.5, + "sizeY": 3.5, + "resources": [], + "templateHtml": "\n", + "templateCss": "", + "controllerScript": "self.onInit = function() {\n self.ctx.$scope.actionWidget.onInit();\n}\n\nself.typeParameters = function() {\n return {\n previewWidth: '280px',\n previewHeight: '280px',\n embedTitlePanel: true,\n displayRpcMessageToast: false\n };\n};\n\nself.onDestroy = function() {\n}\n", + "settingsSchema": "", + "dataKeySettingsSchema": "{}\n", + "settingsDirective": "", + "hasBasicMode": true, + "basicModeDirective": "tb-iot-svg-basic-config", + "defaultConfig": "{\"showTitle\":true,\"backgroundColor\":\"#ffffff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{},\"title\":\"IoT SVG\",\"dropShadow\":true,\"enableFullscreen\":false,\"widgetStyle\":{},\"actions\":{},\"widgetCss\":\"\",\"noDataDisplayMessage\":\"\",\"titleFont\":{\"size\":16,\"sizeUnit\":\"px\",\"family\":\"Roboto\",\"weight\":\"500\",\"style\":null,\"lineHeight\":\"1.6\"},\"showTitleIcon\":false,\"titleTooltip\":\"\",\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"pageSize\":1024,\"titleIcon\":\"mdi:lightbulb-outline\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\",\"configMode\":\"basic\",\"targetDevice\":null,\"titleColor\":null,\"borderRadius\":null}" + }, + "tags": [ + "svg", + "scada" + ] +} \ No newline at end of file diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/action-button-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/action-button-basic-config.component.html index 6940cffc1f..49a50afc30 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/action-button-basic-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/action-button-basic-config.component.html @@ -29,7 +29,7 @@
widgets.action-button.on-click
@@ -38,9 +38,9 @@
widgets.button-state.activated-state
widgets.button-state.disabled-state
widgets.command-button.on-click
widgets.button-state.disabled-state
widgets.rpc-state.initial-state
widgets.power-button.power-on
widgets.power-button.power-off
widgets.rpc-state.disabled-state
widgets.rpc-state.initial-state
widgets.toggle-button.check
widgets.toggle-button.uncheck
widgets.rpc-state.disabled-state
widgets.rpc-state.initial-state
widgets.rpc-state.disabled-state
widgets.rpc-state.initial-state
widgets.rpc-state.turn-on
widgets.rpc-state.turn-off
widgets.rpc-state.disabled-state
widgets.slider.initial-value
widgets.slider.on-value-change
widgets.rpc-state.disabled-state
widgets.button-state.activated-state
widgets.button-state.disabled-state
widgets.command-button.on-click
widgets.button-state.disabled-state
widgets.rpc-state.initial-state
widgets.power-button.power-on
widgets.power-button.power-off
widgets.rpc-state.disabled-state
widgets.rpc-state.initial-state
widgets.toggle-button.check
widgets.toggle-button.uncheck
widgets.rpc-state.disabled-state
-
{{ panelTitle | translate }}
+
{{ panelTitle }}
{{ 'widgets.value-action.action' | translate }}
@@ -122,7 +122,7 @@ helpId="widget/lib/rpc/parse_value_fn">
-
{{ 'widgets.value-action.state-when-result-is' | translate:{state: (stateLabel | translate)} }}
+
{{ 'widgets.value-action.state-when-result-is' | translate:{state: stateLabel} }}
-
{{ panelTitle | translate }}
+
{{ panelTitle }}
{{ 'widgets.value-action.action' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action-settings-panel.component.html index c5b4b50272..3fffd3f424 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action-settings-panel.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action-settings-panel.component.html @@ -16,7 +16,7 @@ -->
-
{{ panelTitle | translate }}
+
{{ panelTitle }}
- -
{{ metadata?.title }}
+ +
{{ metadata?.title | customTranslate }}
-
widgets.slider.behavior
+
iot-svg.behavior
-
{{ behaviour.name }}
+
{{ behaviour.name | customTranslate }}
@@ -51,15 +54,15 @@
- {{ propertyRow.label }} + {{ propertyRow.label | customTranslate }} -
{{ propertyRow.label }}
+
{{ propertyRow.label | customTranslate }}
-
{{ property.subLabel }}
+
{{ property.subLabel | customTranslate }}
-
{{ property.fieldSuffix }}
+
{{ property.fieldSuffix | customTranslate }}
 + settingsKey="{{ property.name | customTranslate }}"> -
{{ property.fieldSuffix }}
+
{{ property.fieldSuffix | customTranslate }}
 , private fb: UntypedFormBuilder, @@ -105,8 +105,8 @@ export class IotSvgObjectSettingsComponent implements OnInit, OnChanges, Control } ngOnInit(): void { - this.scadaObjectSettingsFormGroup = this.fb.group({}); - this.scadaObjectSettingsFormGroup.valueChanges.subscribe(() => { + this.iotSvgObjectSettingsFormGroup = this.fb.group({}); + this.iotSvgObjectSettingsFormGroup.valueChanges.subscribe(() => { this.updateModel(); }); this.loadMetadata(); @@ -133,9 +133,9 @@ export class IotSvgObjectSettingsComponent implements OnInit, OnChanges, Control setDisabledState(isDisabled: boolean): void { this.disabled = isDisabled; if (isDisabled) { - this.scadaObjectSettingsFormGroup.disable({emitEvent: false}); + this.iotSvgObjectSettingsFormGroup.disable({emitEvent: false}); } else { - this.scadaObjectSettingsFormGroup.enable({emitEvent: false}); + this.iotSvgObjectSettingsFormGroup.enable({emitEvent: false}); this.updateValidators(); } } @@ -146,9 +146,9 @@ export class IotSvgObjectSettingsComponent implements OnInit, OnChanges, Control } validate(c: UntypedFormControl) { - const valid = this.scadaObjectSettingsFormGroup.valid; + const valid = this.iotSvgObjectSettingsFormGroup.valid; return valid ? null : { - scadaObject: { + iotSvgObject: { valid: false, }, }; @@ -162,13 +162,13 @@ export class IotSvgObjectSettingsComponent implements OnInit, OnChanges, Control this.validatorTriggers = []; this.http.get(this.svgPath, {responseType: 'text'}).subscribe( (svgContent) => { - this.metadata = parseScadaObjectMetadataFromContent(svgContent); + this.metadata = parseIotSvgMetadataFromContent(svgContent); this.propertyRows = toPropertyRows(this.metadata.properties); - for (const control of Object.keys(this.scadaObjectSettingsFormGroup.controls)) { - this.scadaObjectSettingsFormGroup.removeControl(control, {emitEvent: false}); + for (const control of Object.keys(this.iotSvgObjectSettingsFormGroup.controls)) { + this.iotSvgObjectSettingsFormGroup.removeControl(control, {emitEvent: false}); } for (const behaviour of this.metadata.behavior) { - this.scadaObjectSettingsFormGroup.addControl(behaviour.id, this.fb.control(null, []), {emitEvent: false}); + this.iotSvgObjectSettingsFormGroup.addControl(behaviour.id, this.fb.control(null, []), {emitEvent: false}); } for (const property of this.metadata.properties) { if (property.disableOnProperty) { @@ -188,12 +188,12 @@ export class IotSvgObjectSettingsComponent implements OnInit, OnChanges, Control validators.push(Validators.max(property.max)); } } - this.scadaObjectSettingsFormGroup.addControl(property.id, this.fb.control(null, validators), {emitEvent: false}); + this.iotSvgObjectSettingsFormGroup.addControl(property.id, this.fb.control(null, validators), {emitEvent: false}); } if (this.validatorTriggers.length) { const observables: Observable[] = []; for (const trigger of this.validatorTriggers) { - observables.push(this.scadaObjectSettingsFormGroup.get(trigger).valueChanges); + observables.push(this.iotSvgObjectSettingsFormGroup.get(trigger).valueChanges); } this.validatorSubscription = merge(...observables).subscribe(() => { this.updateValidators(); @@ -207,10 +207,10 @@ export class IotSvgObjectSettingsComponent implements OnInit, OnChanges, Control private updateValidators() { for (const trigger of this.validatorTriggers) { - const value: boolean = this.scadaObjectSettingsFormGroup.get(trigger).value; + const value: boolean = this.iotSvgObjectSettingsFormGroup.get(trigger).value; this.metadata.properties.filter(p => p.disableOnProperty === trigger).forEach( (p) => { - const control = this.scadaObjectSettingsFormGroup.get(p.id); + const control = this.iotSvgObjectSettingsFormGroup.get(p.id); if (value) { control.enable({emitEvent: false}); } else { @@ -223,9 +223,9 @@ export class IotSvgObjectSettingsComponent implements OnInit, OnChanges, Control private setupValue() { if (this.metadata) { - const defaults = defaultScadaObjectSettings(this.metadata); + const defaults = defaultIotSvgObjectSettings(this.metadata); this.modelValue = {...defaults, ...this.modelValue}; - this.scadaObjectSettingsFormGroup.patchValue( + this.iotSvgObjectSettingsFormGroup.patchValue( this.modelValue, {emitEvent: false} ); this.setDisabledState(this.disabled); @@ -233,7 +233,7 @@ export class IotSvgObjectSettingsComponent implements OnInit, OnChanges, Control } private updateModel() { - this.modelValue = this.scadaObjectSettingsFormGroup.getRawValue(); + this.modelValue = this.iotSvgObjectSettingsFormGroup.getRawValue(); this.propagateChange(this.modelValue); } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.models.ts index 12231d2b1a..ebb8b908a9 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.models.ts @@ -16,15 +16,15 @@ import { IotSvgProperty } from '@home/components/widget/lib/svg/iot-svg.models'; -export interface ScadaPropertyRow { +export interface IotSvgPropertyRow { label: string; properties: IotSvgProperty[]; switch?: IotSvgProperty; rowClass?: string; } -export const toPropertyRows = (properties: IotSvgProperty[]): ScadaPropertyRow[] => { - const result: ScadaPropertyRow[] = []; +export const toPropertyRows = (properties: IotSvgProperty[]): IotSvgPropertyRow[] => { + const result: IotSvgPropertyRow[] = []; for (const property of properties) { let propertyRow = result.find(r => r.label === property.name); if (!propertyRow) { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html index 9208efd68a..db6d0371f9 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html @@ -21,11 +21,11 @@
widgets.rpc-state.initial-state
widgets.rpc-state.turn-on
widgets.rpc-state.turn-off
widgets.rpc-state.disabled-state
widgets.slider.initial-value
widgets.slider.on-value-change
widgets.rpc-state.disabled-state
widgets.rpc-state.initial-state
widgets.rpc-state.disabled-state
boolean; - actionType: ScadaObjectActionType; - updateValueId?: string; - updateValueType?: ScadaObjectActionUpdateValueType; - updateValueConstant?: any; - updateValueInc?: number; -} - export interface IotSvgMetadata { title: string; stateRenderFunction?: string; @@ -155,16 +149,16 @@ export const emptyMetadata: IotSvgMetadata = { }; -export const parseScadaObjectMetadataFromContent = (svgContent: string): IotSvgMetadata => { +export const parseIotSvgMetadataFromContent = (svgContent: string): IotSvgMetadata => { try { const svgDoc = new DOMParser().parseFromString(svgContent, 'image/svg+xml'); - return parseScadaObjectMetadataFromDom(svgDoc); + return parseIotSvgMetadataFromDom(svgDoc); } catch (_e) { return emptyMetadata; } }; -const parseScadaObjectMetadataFromDom = (svgDoc: Document): IotSvgMetadata => { +const parseIotSvgMetadataFromDom = (svgDoc: Document): IotSvgMetadata => { try { const elements = svgDoc.getElementsByTagName('tb:metadata'); if (elements.length) { @@ -232,7 +226,7 @@ const defaultWidgetActionSettings = (widgetAction: IotSvgBehavior): WidgetAction stateEntityParamName: null }); -export const defaultScadaObjectSettings = (metadata: IotSvgMetadata): IotSvgObjectSettings => { +export const defaultIotSvgObjectSettings = (metadata: IotSvgMetadata): IotSvgObjectSettings => { const settings: IotSvgObjectSettings = {}; for (const behavior of metadata.behavior) { if (behavior.type === IotSvgBehaviorType.value) { @@ -285,8 +279,8 @@ export class IotSvgObject { return this.ctx.http.get(this.svgPath, {responseType: 'text'}).pipe( map((inputSvgContent) => { const doc: XMLDocument = new DOMParser().parseFromString(inputSvgContent, 'image/svg+xml'); - this.metadata = parseScadaObjectMetadataFromDom(doc); - const defaults = defaultScadaObjectSettings(this.metadata); + this.metadata = parseIotSvgMetadataFromDom(doc); + const defaults = defaultIotSvgObjectSettings(this.metadata); this.settings = mergeDeep({}, defaults, this.inputSettings || {}); this.prepareMetadata(); this.prepareSvgShape(doc); @@ -613,6 +607,10 @@ export class IotSvgObject { if (isDefinedAndNotNull(value)) { if (property.type === 'color-settings') { return ColorProcessor.fromSettings(value); + } else if (property.type === 'string') { + const result = this.ctx.utilsService.customTranslation(value, value); + const entityInfo = this.ctx.defaultSubscription.getFirstEntityInfo(); + return createLabelFromSubscriptionEntityInfo(entityInfo, result); } return value; } else { diff --git a/ui-ngx/src/app/shared/components/value-input.component.html b/ui-ngx/src/app/shared/components/value-input.component.html index 269ec33a5d..e3b3e12b83 100644 --- a/ui-ngx/src/app/shared/components/value-input.component.html +++ b/ui-ngx/src/app/shared/components/value-input.component.html @@ -70,8 +70,8 @@ - {{ trueLabel | translate }} - {{ falseLabel | translate }} + {{ trueLabel }} + {{ falseLabel }}
diff --git a/ui-ngx/src/app/shared/components/value-input.component.ts b/ui-ngx/src/app/shared/components/value-input.component.ts index 0479b2f0df..83b6a4d432 100644 --- a/ui-ngx/src/app/shared/components/value-input.component.ts +++ b/ui-ngx/src/app/shared/components/value-input.component.ts @@ -35,6 +35,7 @@ import { } from '@shared/components/dialog/json-object-edit-dialog.component'; import { BreakpointObserver } from '@angular/cdk/layout'; import { Subscription } from 'rxjs'; +import { TranslateService } from '@ngx-translate/core'; type Layout = 'column' | 'row'; @@ -67,10 +68,10 @@ export class ValueInputComponent implements OnInit, OnDestroy, OnChanges, Contro valueType: ValueType; @Input() - trueLabel = 'value.true'; + trueLabel: string; @Input() - falseLabel = 'value.false'; + falseLabel: string; @Input() layout: ValueInputLayout | Layout = 'row'; @@ -96,12 +97,19 @@ export class ValueInputComponent implements OnInit, OnDestroy, OnChanges, Contro constructor( private breakpointObserver: BreakpointObserver, private cd: ChangeDetectorRef, + private translate: TranslateService, public dialog: MatDialog, ) { } ngOnInit(): void { + if (!this.trueLabel) { + this.trueLabel = this.translate.instant('value.true'); + } + if (!this.falseLabel) { + this.falseLabel = this.translate.instant('value.false'); + } this._subscription = new Subscription(); this.showValueType = !this.valueType; this.computedLayout = this._computeLayout(); diff --git a/ui-ngx/src/app/shared/pipe/custom-translate.pipe.ts b/ui-ngx/src/app/shared/pipe/custom-translate.pipe.ts new file mode 100644 index 0000000000..141d24015e --- /dev/null +++ b/ui-ngx/src/app/shared/pipe/custom-translate.pipe.ts @@ -0,0 +1,33 @@ +/// +/// Copyright ยฉ 2016-2024 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 { Pipe, PipeTransform } from '@angular/core'; +import { UtilsService } from '@core/services/utils.service'; + +@Pipe({ + name: 'customTranslate' +}) +export class CustomTranslatePipe implements PipeTransform { + + constructor(private utils: UtilsService) { } + + transform(translationValue: string, defaultValue?: string): string { + if (!defaultValue) { + defaultValue = translationValue; + } + return this.utils.customTranslation(translationValue, defaultValue); + } +} diff --git a/ui-ngx/src/app/shared/shared.module.ts b/ui-ngx/src/app/shared/shared.module.ts index 71f121ab17..45725f0331 100644 --- a/ui-ngx/src/app/shared/shared.module.ts +++ b/ui-ngx/src/app/shared/shared.module.ts @@ -218,6 +218,7 @@ import { EmbedImageDialogComponent } from '@shared/components/image/embed-image- import { ImageGalleryDialogComponent } from '@shared/components/image/image-gallery-dialog.component'; import { RuleChainSelectPanelComponent } from '@shared/components/rule-chain/rule-chain-select-panel.component'; import { WidgetButtonComponent } from '@shared/components/button/widget-button.component'; +import { CustomTranslatePipe } from '@shared/pipe/custom-translate.pipe'; export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) { return markedOptionsService; @@ -236,6 +237,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) SafePipe, ShortNumberPipe, ImagePipe, + CustomTranslatePipe, { provide: FlowInjectionToken, useValue: Flow @@ -361,6 +363,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) FileSizePipe, DateAgoPipe, ImagePipe, + CustomTranslatePipe, SafePipe, ShortNumberPipe, SelectableColumnsPipe, @@ -614,6 +617,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) FileSizePipe, DateAgoPipe, ImagePipe, + CustomTranslatePipe, SafePipe, ShortNumberPipe, SelectableColumnsPipe, diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index b13d169cdc..2203545179 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -3216,6 +3216,9 @@ "error-entities": "There was an error creating {{count}} entities." } }, + "iot-svg": { + "behavior": "Behavior" + }, "item": { "selected": "Selected" }, diff --git a/ui-ngx/src/assets/widget/svg/drawing.svg b/ui-ngx/src/assets/widget/svg/drawing.svg index 91bfb8b47d..55d60d04c1 100644 --- a/ui-ngx/src/assets/widget/svg/drawing.svg +++ b/ui-ngx/src/assets/widget/svg/drawing.svg @@ -68,7 +68,9 @@ }, { "id": "disabledState", - "name": "Disabled state", + "name": "{i18n:widgets.rpc-state.disabled-state}", + "hint": "{i18n:widgets.rpc-state.disabled-state-hint}", + "stateLabel": "{i18n:widgets.rpc-state.disabled}", "type": "value", "valueType": "BOOLEAN", "defaultValue": false, @@ -77,6 +79,9 @@ { "id": "onState", "name": "On/Off state", + "trueLabel": "{i18n:widgets.rpc-state.on}", + "falseLabel": "{i18n:widgets.rpc-state.off}", + "stateLabel": "{i18n:widgets.rpc-state.on}", "type": "value", "valueType": "BOOLEAN", "defaultValue": false, @@ -84,7 +89,8 @@ }, { "id": "onUpdateState", - "name": "Power On", + "name": "{i18n:widgets.rpc-state.turn-on}", + "hint": "{i18n:widgets.rpc-state.turn-on-hint}", "type": "action", "valueType": "BOOLEAN", "valueToDataType": "CONSTANT", @@ -92,7 +98,8 @@ }, { "id": "offUpdateState", - "name": "Power Off", + "name": "{i18n:widgets.rpc-state.turn-off}", + "hint": "{i18n:widgets.rpc-state.turn-off-hint}", "type": "action", "valueType": "BOOLEAN", "valueToDataType": "CONSTANT", @@ -124,7 +131,7 @@ "id": "levelTitle", "name": "Level title", "type": "string", - "default": "Level", + "default": "{i18n:widgets.battery-level.value}", "disableOnProperty": "showLevelTitle", "fieldClass": "flex" }, From 7d0e5b330b95b7c85023925bc842eee5274cf908 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Wed, 8 May 2024 20:00:32 +0300 Subject: [PATCH 025/442] Introduce ResourceSubType for image resources. --- .../main/data/upgrade/3.7.0/schema_update.sql | 32 ++++++++++ .../controller/ControllerConstants.java | 2 + .../server/controller/ImageController.java | 28 ++++++++- .../install/ThingsboardInstallService.java | 4 ++ .../install/SqlDatabaseUpgradeService.java | 3 + .../controller/ImageControllerTest.java | 62 ++++++++++++++++++- .../server/dao/resource/ImageService.java | 5 +- .../server/common/data/ImageExportData.java | 1 + .../server/common/data/ResourceSubType.java | 6 ++ .../server/common/data/TbResourceInfo.java | 3 + .../common/data/TbResourceInfoFilter.java | 1 + .../server/common/util/ProtoUtils.java | 7 +++ common/proto/src/main/proto/queue.proto | 1 + .../server/dao/model/ModelConstants.java | 1 + .../dao/model/sql/TbResourceEntity.java | 9 +++ .../dao/model/sql/TbResourceInfoEntity.java | 9 +++ .../server/dao/resource/BaseImageService.java | 10 ++- .../dao/resource/BaseResourceService.java | 4 +- .../server/dao/resource/TbResourceDao.java | 3 + .../dao/sql/resource/JpaTbResourceDao.java | 5 ++ .../sql/resource/JpaTbResourceInfoDao.java | 7 +++ .../resource/TbResourceInfoRepository.java | 6 +- .../sql/resource/TbResourceRepository.java | 4 ++ .../main/resources/sql/schema-entities.sql | 1 + .../thingsboard/rest/client/RestClient.java | 12 +++- 25 files changed, 214 insertions(+), 12 deletions(-) create mode 100644 application/src/main/data/upgrade/3.7.0/schema_update.sql create mode 100644 common/data/src/main/java/org/thingsboard/server/common/data/ResourceSubType.java diff --git a/application/src/main/data/upgrade/3.7.0/schema_update.sql b/application/src/main/data/upgrade/3.7.0/schema_update.sql new file mode 100644 index 0000000000..6ef2074ffe --- /dev/null +++ b/application/src/main/data/upgrade/3.7.0/schema_update.sql @@ -0,0 +1,32 @@ +-- +-- Copyright ยฉ 2016-2024 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. +-- + +-- UPDATE RESOURCE SUB TYPE START + +DO +$$ + BEGIN + IF NOT EXISTS ( + SELECT FROM information_schema.columns + WHERE table_name = 'resource' AND column_name = 'resource_sub_type' + ) THEN + ALTER TABLE resource ADD COLUMN resource_sub_type varchar(32); + UPDATE resource SET resource_sub_type = 'IMAGE' WHERE resource_type = 'IMAGE'; + END IF; + END; +$$; + +-- UPDATE RESOURCE SUB TYPE END diff --git a/application/src/main/java/org/thingsboard/server/controller/ControllerConstants.java b/application/src/main/java/org/thingsboard/server/controller/ControllerConstants.java index d9232cda78..3a39eb5177 100644 --- a/application/src/main/java/org/thingsboard/server/controller/ControllerConstants.java +++ b/application/src/main/java/org/thingsboard/server/controller/ControllerConstants.java @@ -115,6 +115,8 @@ public class ControllerConstants { protected static final String RESOURCE_INFO_DESCRIPTION = "Resource Info is a lightweight object that includes main information about the Resource excluding the heavyweight data. "; protected static final String RESOURCE_DESCRIPTION = "Resource is a heavyweight object that includes main information about the Resource and also data. "; + protected static final String RESOURCE_IMAGE_SUB_TYPE_DESCRIPTION = "A string value representing resource sub-type."; + protected static final String RESOURCE_INCLUDE_SYSTEM_IMAGES_DESCRIPTION = "Use 'true' to include system images. Disabled by default. Ignored for requests by users with system administrator authority."; protected static final String RESOURCE_TEXT_SEARCH_DESCRIPTION = "The case insensitive 'substring' filter based on the resource title."; diff --git a/application/src/main/java/org/thingsboard/server/controller/ImageController.java b/application/src/main/java/org/thingsboard/server/controller/ImageController.java index c8d24d6081..b81dcd326d 100644 --- a/application/src/main/java/org/thingsboard/server/controller/ImageController.java +++ b/application/src/main/java/org/thingsboard/server/controller/ImageController.java @@ -40,6 +40,7 @@ import org.springframework.web.bind.annotation.RestController; import org.springframework.web.multipart.MultipartFile; import org.thingsboard.server.common.data.ImageDescriptor; import org.thingsboard.server.common.data.ImageExportData; +import org.thingsboard.server.common.data.ResourceSubType; import org.thingsboard.server.common.data.ResourceType; import org.thingsboard.server.common.data.TbImageDeleteResult; import org.thingsboard.server.common.data.TbResource; @@ -64,6 +65,7 @@ import java.util.concurrent.TimeUnit; import static org.thingsboard.server.controller.ControllerConstants.PAGE_NUMBER_DESCRIPTION; import static org.thingsboard.server.controller.ControllerConstants.PAGE_SIZE_DESCRIPTION; +import static org.thingsboard.server.controller.ControllerConstants.RESOURCE_IMAGE_SUB_TYPE_DESCRIPTION; import static org.thingsboard.server.controller.ControllerConstants.RESOURCE_INCLUDE_SYSTEM_IMAGES_DESCRIPTION; import static org.thingsboard.server.controller.ControllerConstants.RESOURCE_TEXT_SEARCH_DESCRIPTION; import static org.thingsboard.server.controller.ControllerConstants.SORT_ORDER_DESCRIPTION; @@ -95,7 +97,8 @@ public class ImageController extends BaseController { @PreAuthorize("hasAnyAuthority('SYS_ADMIN', 'TENANT_ADMIN')") @PostMapping("/api/image") public TbResourceInfo uploadImage(@RequestPart MultipartFile file, - @RequestPart(required = false) String title) throws Exception { + @RequestPart(required = false) String title, + @RequestPart(required = false) String imageSubType) throws Exception { SecurityUser user = getCurrentUser(); TbResource image = new TbResource(); image.setTenantId(user.getTenantId()); @@ -108,7 +111,14 @@ public class ImageController extends BaseController { } else { image.setTitle(file.getOriginalFilename()); } + + ResourceSubType subType = ResourceSubType.IMAGE; + if (StringUtils.isNotEmpty(imageSubType)) { + subType = ResourceSubType.valueOf(imageSubType); + } + image.setResourceType(ResourceType.IMAGE); + image.setResourceSubType(subType); ImageDescriptor descriptor = new ImageDescriptor(); descriptor.setMediaType(file.getContentType()); image.setDescriptorValue(descriptor); @@ -193,6 +203,7 @@ public class ImageController extends BaseController { .mediaType(descriptor.getMediaType()) .fileName(imageInfo.getFileName()) .title(imageInfo.getTitle()) + .subType(imageInfo.getResourceSubType().name()) .resourceKey(imageInfo.getResourceKey()) .isPublic(imageInfo.isPublic()) .publicResourceKey(imageInfo.getPublicResourceKey()) @@ -214,6 +225,11 @@ public class ImageController extends BaseController { } else { image.setTitle(imageData.getFileName()); } + if (StringUtils.isNotEmpty(imageData.getSubType())) { + image.setResourceSubType(ResourceSubType.valueOf(imageData.getSubType())); + } else { + image.setResourceSubType(ResourceSubType.IMAGE); + } image.setResourceType(ResourceType.IMAGE); image.setResourceKey(imageData.getResourceKey()); image.setPublic(imageData.isPublic()); @@ -250,6 +266,8 @@ public class ImageController extends BaseController { @RequestParam int pageSize, @Parameter(description = PAGE_NUMBER_DESCRIPTION, required = true) @RequestParam int page, + @Parameter(description = RESOURCE_IMAGE_SUB_TYPE_DESCRIPTION, schema = @Schema(allowableValues = {"IMAGE", "IOT_SVG"})) + @RequestParam(required = false) String imageSubType, @Parameter(description = RESOURCE_INCLUDE_SYSTEM_IMAGES_DESCRIPTION) @RequestParam(required = false) boolean includeSystemImages, @Parameter(description = RESOURCE_TEXT_SEARCH_DESCRIPTION) @@ -261,10 +279,14 @@ public class ImageController extends BaseController { // PE: generic permission PageLink pageLink = createPageLink(pageSize, page, textSearch, sortProperty, sortOrder); TenantId tenantId = getTenantId(); + ResourceSubType subType = ResourceSubType.IMAGE; + if (StringUtils.isNotEmpty(imageSubType)) { + subType = ResourceSubType.valueOf(imageSubType); + } if (getCurrentUser().getAuthority() == Authority.SYS_ADMIN || !includeSystemImages) { - return checkNotNull(imageService.getImagesByTenantId(tenantId, pageLink)); + return checkNotNull(imageService.getImagesByTenantId(tenantId, subType, pageLink)); } else { - return checkNotNull(imageService.getAllImagesByTenantId(tenantId, pageLink)); + return checkNotNull(imageService.getAllImagesByTenantId(tenantId, subType, pageLink)); } } diff --git a/application/src/main/java/org/thingsboard/server/install/ThingsboardInstallService.java b/application/src/main/java/org/thingsboard/server/install/ThingsboardInstallService.java index 33e2ddee01..eba35157c9 100644 --- a/application/src/main/java/org/thingsboard/server/install/ThingsboardInstallService.java +++ b/application/src/main/java/org/thingsboard/server/install/ThingsboardInstallService.java @@ -137,6 +137,10 @@ public class ThingsboardInstallService { entityDatabaseSchemaService.createCustomerTitleUniqueConstraintIfNotExists(); systemDataLoaderService.updateDefaultNotificationConfigs(false); systemDataLoaderService.updateJwtSettings(); + break; + case "3.7.0": + log.info("Upgrading ThingsBoard from version 3.7.0 to 3.7.1 ..."); + databaseEntitiesUpgradeService.upgradeDatabase("3.7.0"); //TODO DON'T FORGET to update switch statement in the CacheCleanupService if you need to clear the cache break; default: diff --git a/application/src/main/java/org/thingsboard/server/service/install/SqlDatabaseUpgradeService.java b/application/src/main/java/org/thingsboard/server/service/install/SqlDatabaseUpgradeService.java index 86d922c305..000c0536cc 100644 --- a/application/src/main/java/org/thingsboard/server/service/install/SqlDatabaseUpgradeService.java +++ b/application/src/main/java/org/thingsboard/server/service/install/SqlDatabaseUpgradeService.java @@ -121,6 +121,9 @@ public class SqlDatabaseUpgradeService implements DatabaseEntitiesUpgradeService case "3.6.4": updateSchema("3.6.4", 3006004, "3.7.0", 3007000, null); break; + case "3.7.0": + updateSchema("3.7.0", 3007000, "3.7.1", 3007001, null); + break; default: throw new RuntimeException("Unable to upgrade SQL database, unsupported fromVersion: " + fromVersion); } diff --git a/application/src/test/java/org/thingsboard/server/controller/ImageControllerTest.java b/application/src/test/java/org/thingsboard/server/controller/ImageControllerTest.java index e272a40857..53b36c955b 100644 --- a/application/src/test/java/org/thingsboard/server/controller/ImageControllerTest.java +++ b/application/src/test/java/org/thingsboard/server/controller/ImageControllerTest.java @@ -23,11 +23,14 @@ import org.junit.Test; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.http.HttpMethod; import org.springframework.mock.web.MockMultipartFile; +import org.springframework.mock.web.MockPart; import org.springframework.test.web.servlet.request.MockMvcRequestBuilders; import org.thingsboard.common.util.JacksonUtil; import org.thingsboard.server.common.data.ImageDescriptor; import org.thingsboard.server.common.data.ImageExportData; +import org.thingsboard.server.common.data.ResourceSubType; import org.thingsboard.server.common.data.ResourceType; +import org.thingsboard.server.common.data.StringUtils; import org.thingsboard.server.common.data.SystemParams; import org.thingsboard.server.common.data.TbResourceInfo; import org.thingsboard.server.common.data.page.PageData; @@ -35,6 +38,7 @@ import org.thingsboard.server.common.data.page.PageLink; import org.thingsboard.server.dao.service.DaoSqlTest; import org.thingsboard.server.dao.sql.resource.TbResourceRepository; +import java.nio.charset.StandardCharsets; import java.util.Base64; import java.util.List; @@ -53,6 +57,7 @@ public class ImageControllerTest extends AbstractControllerTest { @Before public void beforeEach() throws Exception { + resourceRepository.deleteAll(); loginTenantAdmin(); } @@ -66,6 +71,8 @@ public class ImageControllerTest extends AbstractControllerTest { String filename = "my_png_image.png"; TbResourceInfo imageInfo = uploadImage(HttpMethod.POST, "/api/image", filename, "image/png", PNG_IMAGE); + assertThat(imageInfo.getResourceSubType()).isEqualTo(ResourceSubType.IMAGE); + assertThat(imageInfo.getTitle()).isEqualTo(filename); assertThat(imageInfo.getResourceType()).isEqualTo(ResourceType.IMAGE); assertThat(imageInfo.getResourceKey()).isEqualTo(filename); @@ -85,6 +92,8 @@ public class ImageControllerTest extends AbstractControllerTest { String filename = "my_jpeg_image.jpg"; TbResourceInfo imageInfo = uploadImage(HttpMethod.POST, "/api/image", filename, "image/jpeg", JPEG_IMAGE); + assertThat(imageInfo.getResourceSubType()).isEqualTo(ResourceSubType.IMAGE); + ImageDescriptor imageDescriptor = imageInfo.getDescriptor(ImageDescriptor.class); checkJpegImageDescriptor(imageDescriptor); @@ -97,6 +106,22 @@ public class ImageControllerTest extends AbstractControllerTest { String filename = "my_svg_image.svg"; TbResourceInfo imageInfo = uploadImage(HttpMethod.POST, "/api/image", filename, "image/svg+xml", SVG_IMAGE); + assertThat(imageInfo.getResourceSubType()).isEqualTo(ResourceSubType.IMAGE); + + ImageDescriptor imageDescriptor = imageInfo.getDescriptor(ImageDescriptor.class); + checkSvgImageDescriptor(imageDescriptor); + + assertThat(downloadImage("tenant", filename)).containsExactly(SVG_IMAGE); + assertThat(downloadImagePreview("tenant", filename)).hasSize((int) imageDescriptor.getPreviewDescriptor().getSize()); + } + + @Test + public void testUploadIoTSvgImage() throws Exception { + String filename = "my_iot_svg_image.svg"; + TbResourceInfo imageInfo = uploadImage(HttpMethod.POST, "/api/image", ResourceSubType.IOT_SVG.name(), filename, "image/svg+xml", SVG_IMAGE); + + assertThat(imageInfo.getResourceSubType()).isEqualTo(ResourceSubType.IOT_SVG); + ImageDescriptor imageDescriptor = imageInfo.getDescriptor(ImageDescriptor.class); checkSvgImageDescriptor(imageDescriptor); @@ -175,6 +200,7 @@ public class ImageControllerTest extends AbstractControllerTest { assertThat(exportData.getMediaType()).isEqualTo("image/png"); assertThat(exportData.getFileName()).isEqualTo(filename); assertThat(exportData.getTitle()).isEqualTo(filename); + assertThat(exportData.getSubType()).isEqualTo(ResourceSubType.IMAGE.name()); assertThat(exportData.getResourceKey()).isEqualTo(filename); assertThat(exportData.getData()).isEqualTo(Base64.getEncoder().encodeToString(PNG_IMAGE)); assertThat(exportData.isPublic()).isTrue(); @@ -184,6 +210,7 @@ public class ImageControllerTest extends AbstractControllerTest { TbResourceInfo importedImageInfo = doPut("/api/image/import", exportData, TbResourceInfo.class); assertThat(importedImageInfo.getTitle()).isEqualTo(filename); + assertThat(exportData.getSubType()).isEqualTo(ResourceSubType.IMAGE.name()); assertThat(importedImageInfo.getResourceKey()).isEqualTo(filename); assertThat(importedImageInfo.getFileName()).isEqualTo(filename); assertThat(importedImageInfo.isPublic()).isTrue(); @@ -198,20 +225,37 @@ public class ImageControllerTest extends AbstractControllerTest { String systemImageName = "my_system_png_image.png"; TbResourceInfo systemImage = uploadImage(HttpMethod.POST, "/api/image", systemImageName, "image/png", PNG_IMAGE); + String systemIotSvgName = "my_system_iot_svg_image.svg"; + TbResourceInfo systemIotSvg = uploadImage(HttpMethod.POST, "/api/image", ResourceSubType.IOT_SVG.name(), systemIotSvgName, "image/svg+xml", SVG_IMAGE); + loginTenantAdmin(); String tenantImageName = "my_jpeg_image.jpg"; TbResourceInfo tenantImage = uploadImage(HttpMethod.POST, "/api/image", tenantImageName, "image/jpeg", JPEG_IMAGE); + String tenantIotSvgName = "my_iot_svg_image.svg"; + TbResourceInfo tenantIotSvg = uploadImage(HttpMethod.POST, "/api/image", ResourceSubType.IOT_SVG.name(), tenantIotSvgName, "image/svg+xml", SVG_IMAGE); + List tenantImages = getImages(null, false, 10); assertThat(tenantImages).containsOnly(tenantImage); + List tenantIotSvgs = getImages(null, ResourceSubType.IOT_SVG.name(), false, 10); + assertThat(tenantIotSvgs).containsOnly(tenantIotSvg); + List allImages = getImages(null, true, 10); assertThat(allImages).containsOnly(tenantImage, systemImage); + List allIotSvgs = getImages(null, ResourceSubType.IOT_SVG.name(), true, 10); + assertThat(allIotSvgs).containsOnly(tenantIotSvg, systemIotSvg); + assertThat(getImages("png", true, 10)) .containsOnly(systemImage); assertThat(getImages("jpg", true, 10)) .containsOnly(tenantImage); + + assertThat(getImages("my_system_iot", ResourceSubType.IOT_SVG.name(), true, 10)) + .containsOnly(systemIotSvg); + assertThat(getImages("my_iot_svg", ResourceSubType.IOT_SVG.name(),true, 10)) + .containsOnly(tenantIotSvg); } @Test @@ -312,7 +356,15 @@ public class ImageControllerTest extends AbstractControllerTest { } private List getImages(String searchText, boolean includeSystemImages, int limit) throws Exception { - PageData images = doGetTypedWithPageLink("/api/images?includeSystemImages=" + includeSystemImages + "&", new TypeReference<>() {}, new PageLink(limit, 0, searchText)); + return this.getImages(searchText, null, includeSystemImages, limit); + } + + private List getImages(String searchText, String imageSubType, boolean includeSystemImages, int limit) throws Exception { + var url = "/api/images?includeSystemImages=" + includeSystemImages + "&"; + if (StringUtils.isNotEmpty(imageSubType)) { + url += "imageSubType=" + imageSubType+ "&"; + } + PageData images = doGetTypedWithPageLink(url, new TypeReference<>() {}, new PageLink(limit, 0, searchText)); return images.getData(); } @@ -332,8 +384,16 @@ public class ImageControllerTest extends AbstractControllerTest { } private TbResourceInfo uploadImage(HttpMethod httpMethod, String url, String filename, String mediaType, byte[] content) throws Exception { + return this.uploadImage(httpMethod, url, null, filename, mediaType, content); + } + + private TbResourceInfo uploadImage(HttpMethod httpMethod, String url, String subType, String filename, String mediaType, byte[] content) throws Exception { MockMultipartFile file = new MockMultipartFile("file", filename, mediaType, content); var request = MockMvcRequestBuilders.multipart(httpMethod, url).file(file); + if (StringUtils.isNotEmpty(subType)) { + var imageSubTypePart = new MockPart("imageSubType", subType.getBytes(StandardCharsets.UTF_8)); + request.part(imageSubTypePart); + } setJwtToken(request); return readResponse(mockMvc.perform(request).andExpect(status().isOk()), TbResourceInfo.class); } diff --git a/common/dao-api/src/main/java/org/thingsboard/server/dao/resource/ImageService.java b/common/dao-api/src/main/java/org/thingsboard/server/dao/resource/ImageService.java index 9a65fcfdae..e1253ae568 100644 --- a/common/dao-api/src/main/java/org/thingsboard/server/dao/resource/ImageService.java +++ b/common/dao-api/src/main/java/org/thingsboard/server/dao/resource/ImageService.java @@ -17,6 +17,7 @@ package org.thingsboard.server.dao.resource; import org.thingsboard.server.common.data.Dashboard; import org.thingsboard.server.common.data.HasImage; +import org.thingsboard.server.common.data.ResourceSubType; import org.thingsboard.server.common.data.TbImageDeleteResult; import org.thingsboard.server.common.data.TbResource; import org.thingsboard.server.common.data.TbResourceInfo; @@ -36,9 +37,9 @@ public interface ImageService { TbResourceInfo getPublicImageInfoByKey(String publicResourceKey); - PageData getImagesByTenantId(TenantId tenantId, PageLink pageLink); + PageData getImagesByTenantId(TenantId tenantId, ResourceSubType imageSubType, PageLink pageLink); - PageData getAllImagesByTenantId(TenantId tenantId, PageLink pageLink); + PageData getAllImagesByTenantId(TenantId tenantId, ResourceSubType imageSubType, PageLink pageLink); byte[] getImageData(TenantId tenantId, TbResourceId imageId); diff --git a/common/data/src/main/java/org/thingsboard/server/common/data/ImageExportData.java b/common/data/src/main/java/org/thingsboard/server/common/data/ImageExportData.java index b407563d24..3be7b6f92d 100644 --- a/common/data/src/main/java/org/thingsboard/server/common/data/ImageExportData.java +++ b/common/data/src/main/java/org/thingsboard/server/common/data/ImageExportData.java @@ -33,6 +33,7 @@ public class ImageExportData { private String mediaType; private String fileName; private String title; + private String subType; private String resourceKey; private boolean isPublic; private String publicResourceKey; diff --git a/common/data/src/main/java/org/thingsboard/server/common/data/ResourceSubType.java b/common/data/src/main/java/org/thingsboard/server/common/data/ResourceSubType.java new file mode 100644 index 0000000000..e7e8b0747a --- /dev/null +++ b/common/data/src/main/java/org/thingsboard/server/common/data/ResourceSubType.java @@ -0,0 +1,6 @@ +package org.thingsboard.server.common.data; + +public enum ResourceSubType { + IMAGE, + IOT_SVG +} diff --git a/common/data/src/main/java/org/thingsboard/server/common/data/TbResourceInfo.java b/common/data/src/main/java/org/thingsboard/server/common/data/TbResourceInfo.java index f1318c2257..8537fe68ed 100644 --- a/common/data/src/main/java/org/thingsboard/server/common/data/TbResourceInfo.java +++ b/common/data/src/main/java/org/thingsboard/server/common/data/TbResourceInfo.java @@ -46,6 +46,8 @@ public class TbResourceInfo extends BaseData implements HasName, H private String title; @Schema(description = "Resource type.", example = "LWM2M_MODEL", accessMode = Schema.AccessMode.READ_ONLY) private ResourceType resourceType; + @Schema(description = "Resource sub type.", example = "IOT_SVG", accessMode = Schema.AccessMode.READ_ONLY) + private ResourceSubType resourceSubType; @NoXss @Length(fieldName = "resourceKey") @Schema(description = "Resource key.", example = "19_1.0", accessMode = Schema.AccessMode.READ_ONLY) @@ -78,6 +80,7 @@ public class TbResourceInfo extends BaseData implements HasName, H this.tenantId = resourceInfo.tenantId; this.title = resourceInfo.title; this.resourceType = resourceInfo.resourceType; + this.resourceSubType = resourceInfo.resourceSubType; this.resourceKey = resourceInfo.resourceKey; this.searchText = resourceInfo.searchText; this.isPublic = resourceInfo.isPublic; diff --git a/common/data/src/main/java/org/thingsboard/server/common/data/TbResourceInfoFilter.java b/common/data/src/main/java/org/thingsboard/server/common/data/TbResourceInfoFilter.java index 87d9b69749..60583dbb96 100644 --- a/common/data/src/main/java/org/thingsboard/server/common/data/TbResourceInfoFilter.java +++ b/common/data/src/main/java/org/thingsboard/server/common/data/TbResourceInfoFilter.java @@ -27,5 +27,6 @@ public class TbResourceInfoFilter { private TenantId tenantId; private Set resourceTypes; + private Set resourceSubTypes; } diff --git a/common/proto/src/main/java/org/thingsboard/server/common/util/ProtoUtils.java b/common/proto/src/main/java/org/thingsboard/server/common/util/ProtoUtils.java index e89ce5634c..0ddc309b46 100644 --- a/common/proto/src/main/java/org/thingsboard/server/common/util/ProtoUtils.java +++ b/common/proto/src/main/java/org/thingsboard/server/common/util/ProtoUtils.java @@ -27,6 +27,7 @@ import org.thingsboard.server.common.data.DeviceProfileProvisionType; import org.thingsboard.server.common.data.DeviceProfileType; import org.thingsboard.server.common.data.DeviceTransportType; import org.thingsboard.server.common.data.EntityType; +import org.thingsboard.server.common.data.ResourceSubType; import org.thingsboard.server.common.data.ResourceType; import org.thingsboard.server.common.data.TbResource; import org.thingsboard.server.common.data.Tenant; @@ -827,6 +828,9 @@ public class ProtoUtils { if (isNotNull(resource.getPreview())) { builder.setPreview(ByteString.copyFrom(resource.getPreview())); } + if (isNotNull(resource.getResourceSubType())) { + builder.setResourceSubType(resource.getResourceSubType().name()); + } return builder.build(); } @@ -858,6 +862,9 @@ public class ProtoUtils { if (proto.hasPreview()) { resource.setPreview(proto.getPreview().toByteArray()); } + if (proto.hasResourceSubType()) { + resource.setResourceSubType(ResourceSubType.valueOf(proto.getResourceSubType())); + } return resource; } diff --git a/common/proto/src/main/proto/queue.proto b/common/proto/src/main/proto/queue.proto index 7b2aa2fe1b..afc157e476 100644 --- a/common/proto/src/main/proto/queue.proto +++ b/common/proto/src/main/proto/queue.proto @@ -286,6 +286,7 @@ message TbResourceProto { optional int64 externalIdLSB = 16; optional bytes data = 17; optional bytes preview = 18; + optional string resourceSubType = 19; } message ApiUsageStateProto { diff --git a/dao/src/main/java/org/thingsboard/server/dao/model/ModelConstants.java b/dao/src/main/java/org/thingsboard/server/dao/model/ModelConstants.java index 8f0502efbf..fdaf7fa96c 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/model/ModelConstants.java +++ b/dao/src/main/java/org/thingsboard/server/dao/model/ModelConstants.java @@ -498,6 +498,7 @@ public class ModelConstants { public static final String RESOURCE_TABLE_NAME = "resource"; public static final String RESOURCE_TENANT_ID_COLUMN = TENANT_ID_COLUMN; public static final String RESOURCE_TYPE_COLUMN = "resource_type"; + public static final String RESOURCE_SUB_TYPE_COLUMN = "resource_sub_type"; public static final String RESOURCE_KEY_COLUMN = "resource_key"; public static final String RESOURCE_TITLE_COLUMN = TITLE_PROPERTY; public static final String RESOURCE_FILE_NAME_COLUMN = "file_name"; diff --git a/dao/src/main/java/org/thingsboard/server/dao/model/sql/TbResourceEntity.java b/dao/src/main/java/org/thingsboard/server/dao/model/sql/TbResourceEntity.java index f507a8661f..ef12d656b6 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/model/sql/TbResourceEntity.java +++ b/dao/src/main/java/org/thingsboard/server/dao/model/sql/TbResourceEntity.java @@ -20,6 +20,7 @@ import jakarta.persistence.Convert; import lombok.Data; import lombok.EqualsAndHashCode; import org.hibernate.annotations.Type; +import org.thingsboard.server.common.data.ResourceSubType; import org.thingsboard.server.common.data.ResourceType; import org.thingsboard.server.common.data.TbResource; import org.thingsboard.server.common.data.id.TbResourceId; @@ -42,6 +43,7 @@ import static org.thingsboard.server.dao.model.ModelConstants.RESOURCE_IS_PUBLIC import static org.thingsboard.server.dao.model.ModelConstants.RESOURCE_KEY_COLUMN; import static org.thingsboard.server.dao.model.ModelConstants.RESOURCE_PREVIEW_COLUMN; import static org.thingsboard.server.dao.model.ModelConstants.PUBLIC_RESOURCE_KEY_COLUMN; +import static org.thingsboard.server.dao.model.ModelConstants.RESOURCE_SUB_TYPE_COLUMN; import static org.thingsboard.server.dao.model.ModelConstants.RESOURCE_TABLE_NAME; import static org.thingsboard.server.dao.model.ModelConstants.RESOURCE_TENANT_ID_COLUMN; import static org.thingsboard.server.dao.model.ModelConstants.RESOURCE_TITLE_COLUMN; @@ -63,6 +65,9 @@ public class TbResourceEntity extends BaseSqlEntity { @Column(name = RESOURCE_TYPE_COLUMN) private String resourceType; + @Column(name = RESOURCE_SUB_TYPE_COLUMN) + private String resourceSubType; + @Column(name = RESOURCE_KEY_COLUMN) private String resourceKey; @@ -107,6 +112,9 @@ public class TbResourceEntity extends BaseSqlEntity { } this.title = resource.getTitle(); this.resourceType = resource.getResourceType().name(); + if (resource.getResourceSubType() != null) { + this.resourceSubType = resource.getResourceSubType().name(); + } this.resourceKey = resource.getResourceKey(); this.searchText = resource.getSearchText(); this.fileName = resource.getFileName(); @@ -126,6 +134,7 @@ public class TbResourceEntity extends BaseSqlEntity { resource.setTenantId(TenantId.fromUUID(tenantId)); resource.setTitle(title); resource.setResourceType(ResourceType.valueOf(resourceType)); + resource.setResourceSubType(resourceSubType != null ? ResourceSubType.valueOf(resourceSubType) : null); resource.setResourceKey(resourceKey); resource.setSearchText(searchText); resource.setFileName(fileName); diff --git a/dao/src/main/java/org/thingsboard/server/dao/model/sql/TbResourceInfoEntity.java b/dao/src/main/java/org/thingsboard/server/dao/model/sql/TbResourceInfoEntity.java index 8f525916bf..35394d5baa 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/model/sql/TbResourceInfoEntity.java +++ b/dao/src/main/java/org/thingsboard/server/dao/model/sql/TbResourceInfoEntity.java @@ -19,6 +19,7 @@ import com.fasterxml.jackson.databind.JsonNode; import jakarta.persistence.Convert; import lombok.Data; import lombok.EqualsAndHashCode; +import org.thingsboard.server.common.data.ResourceSubType; import org.thingsboard.server.common.data.ResourceType; import org.thingsboard.server.common.data.TbResourceInfo; import org.thingsboard.server.common.data.id.TbResourceId; @@ -39,6 +40,7 @@ import static org.thingsboard.server.dao.model.ModelConstants.RESOURCE_FILE_NAME import static org.thingsboard.server.dao.model.ModelConstants.RESOURCE_IS_PUBLIC_COLUMN; import static org.thingsboard.server.dao.model.ModelConstants.RESOURCE_KEY_COLUMN; import static org.thingsboard.server.dao.model.ModelConstants.PUBLIC_RESOURCE_KEY_COLUMN; +import static org.thingsboard.server.dao.model.ModelConstants.RESOURCE_SUB_TYPE_COLUMN; import static org.thingsboard.server.dao.model.ModelConstants.RESOURCE_TABLE_NAME; import static org.thingsboard.server.dao.model.ModelConstants.RESOURCE_TENANT_ID_COLUMN; import static org.thingsboard.server.dao.model.ModelConstants.RESOURCE_TITLE_COLUMN; @@ -60,6 +62,9 @@ public class TbResourceInfoEntity extends BaseSqlEntity implemen @Column(name = RESOURCE_TYPE_COLUMN) private String resourceType; + @Column(name = RESOURCE_SUB_TYPE_COLUMN) + private String resourceSubType; + @Column(name = RESOURCE_KEY_COLUMN) private String resourceKey; @@ -96,6 +101,9 @@ public class TbResourceInfoEntity extends BaseSqlEntity implemen this.tenantId = resource.getTenantId().getId(); this.title = resource.getTitle(); this.resourceType = resource.getResourceType().name(); + if (resource.getResourceSubType() != null) { + this.resourceSubType = resource.getResourceSubType().name(); + } this.resourceKey = resource.getResourceKey(); this.searchText = resource.getSearchText(); this.etag = resource.getEtag(); @@ -113,6 +121,7 @@ public class TbResourceInfoEntity extends BaseSqlEntity implemen resource.setTenantId(TenantId.fromUUID(tenantId)); resource.setTitle(title); resource.setResourceType(ResourceType.valueOf(resourceType)); + resource.setResourceSubType(resourceSubType != null ? ResourceSubType.valueOf(resourceSubType) : null); resource.setResourceKey(resourceKey); resource.setSearchText(searchText); resource.setEtag(etag); diff --git a/dao/src/main/java/org/thingsboard/server/dao/resource/BaseImageService.java b/dao/src/main/java/org/thingsboard/server/dao/resource/BaseImageService.java index 953037a864..28d00f8b5d 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/resource/BaseImageService.java +++ b/dao/src/main/java/org/thingsboard/server/dao/resource/BaseImageService.java @@ -36,6 +36,7 @@ import org.thingsboard.server.common.data.DataConstants; import org.thingsboard.server.common.data.EntityType; import org.thingsboard.server.common.data.HasImage; import org.thingsboard.server.common.data.ImageDescriptor; +import org.thingsboard.server.common.data.ResourceSubType; import org.thingsboard.server.common.data.ResourceType; import org.thingsboard.server.common.data.TbImageDeleteResult; import org.thingsboard.server.common.data.TbResource; @@ -140,6 +141,9 @@ public class BaseImageService extends BaseResourceService implements ImageServic if (image.getId() == null) { image.setResourceKey(getUniqueKey(image.getTenantId(), StringUtils.defaultIfEmpty(image.getResourceKey(), image.getFileName()))); } + if (image.getResourceSubType() == null) { + image.setResourceSubType(ResourceSubType.IMAGE); + } resourceValidator.validate(image, TbResourceInfo::getTenantId); ImageDescriptor descriptor = image.getDescriptor(ImageDescriptor.class); @@ -220,21 +224,23 @@ public class BaseImageService extends BaseResourceService implements ImageServic } @Override - public PageData getImagesByTenantId(TenantId tenantId, PageLink pageLink) { + public PageData getImagesByTenantId(TenantId tenantId, ResourceSubType imageSubType, PageLink pageLink) { log.trace("Executing getImagesByTenantId [{}]", tenantId); TbResourceInfoFilter filter = TbResourceInfoFilter.builder() .tenantId(tenantId) .resourceTypes(Set.of(ResourceType.IMAGE)) + .resourceSubTypes(Set.of(imageSubType)) .build(); return findTenantResourcesByTenantId(filter, pageLink); } @Override - public PageData getAllImagesByTenantId(TenantId tenantId, PageLink pageLink) { + public PageData getAllImagesByTenantId(TenantId tenantId, ResourceSubType imageSubType, PageLink pageLink) { log.trace("Executing getAllImagesByTenantId [{}]", tenantId); TbResourceInfoFilter filter = TbResourceInfoFilter.builder() .tenantId(tenantId) .resourceTypes(Set.of(ResourceType.IMAGE)) + .resourceSubTypes(Set.of(imageSubType)) .build(); return findAllTenantResourcesByTenantId(filter, pageLink); } diff --git a/dao/src/main/java/org/thingsboard/server/dao/resource/BaseResourceService.java b/dao/src/main/java/org/thingsboard/server/dao/resource/BaseResourceService.java index 723d0e8861..93cc662472 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/resource/BaseResourceService.java +++ b/dao/src/main/java/org/thingsboard/server/dao/resource/BaseResourceService.java @@ -184,7 +184,7 @@ public class BaseResourceService extends AbstractCachedEntityService findTenantResourcesByResourceTypeAndObjectIds(TenantId tenantId, ResourceType resourceType, String[] objectIds) { log.trace("Executing findTenantResourcesByResourceTypeAndObjectIds [{}][{}][{}]", tenantId, resourceType, objectIds); validateId(tenantId, id -> INCORRECT_TENANT_ID + id); - return resourceDao.findResourcesByTenantIdAndResourceType(tenantId, resourceType, objectIds, null); + return resourceDao.findResourcesByTenantIdAndResourceType(tenantId, resourceType, null, objectIds, null); } @Override @@ -198,7 +198,7 @@ public class BaseResourceService extends AbstractCachedEntityService findTenantResourcesByResourceTypeAndPageLink(TenantId tenantId, ResourceType resourceType, PageLink pageLink) { log.trace("Executing findTenantResourcesByResourceTypeAndPageLink [{}][{}][{}]", tenantId, resourceType, pageLink); validateId(tenantId, id -> INCORRECT_TENANT_ID + id); - return resourceDao.findResourcesByTenantIdAndResourceType(tenantId, resourceType, pageLink); + return resourceDao.findResourcesByTenantIdAndResourceType(tenantId, resourceType, null, pageLink); } @Override diff --git a/dao/src/main/java/org/thingsboard/server/dao/resource/TbResourceDao.java b/dao/src/main/java/org/thingsboard/server/dao/resource/TbResourceDao.java index b776b49cc9..c236a4a5d5 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/resource/TbResourceDao.java +++ b/dao/src/main/java/org/thingsboard/server/dao/resource/TbResourceDao.java @@ -15,6 +15,7 @@ */ package org.thingsboard.server.dao.resource; +import org.thingsboard.server.common.data.ResourceSubType; import org.thingsboard.server.common.data.ResourceType; import org.thingsboard.server.common.data.TbResource; import org.thingsboard.server.common.data.id.TbResourceId; @@ -35,10 +36,12 @@ public interface TbResourceDao extends Dao, TenantEntityWithDataDao, PageData findResourcesByTenantIdAndResourceType(TenantId tenantId, ResourceType resourceType, + ResourceSubType resourceSubType, PageLink pageLink); List findResourcesByTenantIdAndResourceType(TenantId tenantId, ResourceType resourceType, + ResourceSubType resourceSubType, String[] objectIds, String searchText); diff --git a/dao/src/main/java/org/thingsboard/server/dao/sql/resource/JpaTbResourceDao.java b/dao/src/main/java/org/thingsboard/server/dao/sql/resource/JpaTbResourceDao.java index cb2ab5aa42..f8927aaa81 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/sql/resource/JpaTbResourceDao.java +++ b/dao/src/main/java/org/thingsboard/server/dao/sql/resource/JpaTbResourceDao.java @@ -19,6 +19,7 @@ import lombok.extern.slf4j.Slf4j; import org.springframework.data.jpa.repository.JpaRepository; import org.springframework.stereotype.Component; import org.thingsboard.server.common.data.EntityType; +import org.thingsboard.server.common.data.ResourceSubType; import org.thingsboard.server.common.data.ResourceType; import org.thingsboard.server.common.data.TbResource; import org.thingsboard.server.common.data.id.TbResourceId; @@ -68,11 +69,13 @@ public class JpaTbResourceDao extends JpaAbstractDao findResourcesByTenantIdAndResourceType(TenantId tenantId, ResourceType resourceType, + ResourceSubType resourceSubType, PageLink pageLink) { return DaoUtil.toPageData(resourceRepository.findResourcesPage( tenantId.getId(), TenantId.SYS_TENANT_ID.getId(), resourceType.name(), + resourceSubType != null ? resourceSubType.name() : null, pageLink.getTextSearch(), DaoUtil.toPageable(pageLink) )); @@ -80,6 +83,7 @@ public class JpaTbResourceDao extends JpaAbstractDao findResourcesByTenantIdAndResourceType(TenantId tenantId, ResourceType resourceType, + ResourceSubType resourceSubType, String[] objectIds, String searchText) { return objectIds == null ? @@ -87,6 +91,7 @@ public class JpaTbResourceDao extends JpaAbstractDao resourceSubTypes = filter.getResourceSubTypes(); return DaoUtil.toPageData(resourceInfoRepository .findAllTenantResourcesByTenantId( filter.getTenantId().getId(), TenantId.NULL_UUID, resourceTypes.stream().map(Enum::name).collect(Collectors.toList()), + CollectionsUtil.isEmpty(resourceSubTypes) ? null : + resourceSubTypes.stream().map(Enum::name).collect(Collectors.toList()), Objects.toString(pageLink.getTextSearch(), ""), DaoUtil.toPageable(pageLink))); } @@ -77,10 +81,13 @@ public class JpaTbResourceInfoDao extends JpaAbstractDao resourceSubTypes = filter.getResourceSubTypes(); return DaoUtil.toPageData(resourceInfoRepository .findTenantResourcesByTenantId( filter.getTenantId().getId(), resourceTypes.stream().map(Enum::name).collect(Collectors.toList()), + CollectionsUtil.isEmpty(resourceSubTypes) ? null : + resourceSubTypes.stream().map(Enum::name).collect(Collectors.toList()), pageLink.getTextSearch(), DaoUtil.toPageable(pageLink))); } diff --git a/dao/src/main/java/org/thingsboard/server/dao/sql/resource/TbResourceInfoRepository.java b/dao/src/main/java/org/thingsboard/server/dao/sql/resource/TbResourceInfoRepository.java index c092ea3292..00c51b50a2 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/sql/resource/TbResourceInfoRepository.java +++ b/dao/src/main/java/org/thingsboard/server/dao/sql/resource/TbResourceInfoRepository.java @@ -37,19 +37,23 @@ public interface TbResourceInfoRepository extends JpaRepository findAllTenantResourcesByTenantId(@Param("tenantId") UUID tenantId, @Param("systemTenantId") UUID systemTenantId, @Param("resourceTypes") List resourceTypes, + @Param("resourceSubTypes") List resourceSubTypes, @Param("searchText") String searchText, Pageable pageable); @Query("SELECT ri FROM TbResourceInfoEntity ri WHERE " + "ri.tenantId = :tenantId " + "AND ri.resourceType IN :resourceTypes " + + "AND (:resourceSubTypes IS NULL OR ri.resourceSubType IN :resourceSubTypes) " + "AND (:searchText IS NULL OR ilike(ri.title, CONCAT('%', :searchText, '%')) = true)") Page findTenantResourcesByTenantId(@Param("tenantId") UUID tenantId, @Param("resourceTypes") List resourceTypes, + @Param("resourceSubTypes") List resourceSubTypes, @Param("searchText") String searchText, Pageable pageable); diff --git a/dao/src/main/java/org/thingsboard/server/dao/sql/resource/TbResourceRepository.java b/dao/src/main/java/org/thingsboard/server/dao/sql/resource/TbResourceRepository.java index f5a831ff64..ce2e6b890b 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/sql/resource/TbResourceRepository.java +++ b/dao/src/main/java/org/thingsboard/server/dao/sql/resource/TbResourceRepository.java @@ -34,6 +34,7 @@ public interface TbResourceRepository extends JpaRepository findResources(@Param("tenantId") UUID tenantId, @Param("systemAdminId") UUID sysAdminId, @Param("resourceType") String resourceType, + @Param("resourceSubType") String resourceSubType, @Param("searchText") String searchText); @Query("SELECT tr FROM TbResourceEntity tr " + diff --git a/dao/src/main/resources/sql/schema-entities.sql b/dao/src/main/resources/sql/schema-entities.sql index 9c1841240b..375cd9f689 100644 --- a/dao/src/main/resources/sql/schema-entities.sql +++ b/dao/src/main/resources/sql/schema-entities.sql @@ -715,6 +715,7 @@ CREATE TABLE IF NOT EXISTS resource ( tenant_id uuid NOT NULL, title varchar(255) NOT NULL, resource_type varchar(32) NOT NULL, + resource_sub_type varchar(32), resource_key varchar(255) NOT NULL, search_text varchar(255), file_name varchar(255) NOT NULL, diff --git a/rest-client/src/main/java/org/thingsboard/rest/client/RestClient.java b/rest-client/src/main/java/org/thingsboard/rest/client/RestClient.java index 8783770be3..39d408464f 100644 --- a/rest-client/src/main/java/org/thingsboard/rest/client/RestClient.java +++ b/rest-client/src/main/java/org/thingsboard/rest/client/RestClient.java @@ -58,6 +58,7 @@ import org.thingsboard.server.common.data.EventInfo; import org.thingsboard.server.common.data.ImageExportData; import org.thingsboard.server.common.data.OtaPackage; import org.thingsboard.server.common.data.OtaPackageInfo; +import org.thingsboard.server.common.data.ResourceSubType; import org.thingsboard.server.common.data.SaveDeviceWithCredentialsRequest; import org.thingsboard.server.common.data.StringUtils; import org.thingsboard.server.common.data.SystemInfo; @@ -3603,10 +3604,19 @@ public class RestClient implements Closeable { } public PageData getImages(PageLink pageLink, boolean includeSystemImages) { + return this.getImages(pageLink, null, includeSystemImages); + } + + public PageData getImages(PageLink pageLink, ResourceSubType imageSubType, boolean includeSystemImages) { Map params = new HashMap<>(); + var url = baseURL + "/api/images?includeSystemImages={includeSystemImages}&"; addPageLinkToParam(params, pageLink); params.put("includeSystemImages", String.valueOf(includeSystemImages)); - return restTemplate.exchange(baseURL + "/api/images?includeSystemImages={includeSystemImages}&" + getUrlParams(pageLink), + if (imageSubType != null) { + url += "imageSubType={imageSubType}&"; + params.put("imageSubType", imageSubType.name()); + } + return restTemplate.exchange(url + getUrlParams(pageLink), HttpMethod.GET, HttpEntity.EMPTY, new ParameterizedTypeReference>() {}, From 69e1455e4089c1a7266c6cbc81de06141cfd9d00 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Wed, 8 May 2024 20:01:23 +0300 Subject: [PATCH 026/442] Update license header --- .../server/common/data/ResourceSubType.java | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/common/data/src/main/java/org/thingsboard/server/common/data/ResourceSubType.java b/common/data/src/main/java/org/thingsboard/server/common/data/ResourceSubType.java index e7e8b0747a..13203f908f 100644 --- a/common/data/src/main/java/org/thingsboard/server/common/data/ResourceSubType.java +++ b/common/data/src/main/java/org/thingsboard/server/common/data/ResourceSubType.java @@ -1,3 +1,18 @@ +/** + * Copyright ยฉ 2016-2024 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. + */ package org.thingsboard.server.common.data; public enum ResourceSubType { From a8647c71896b946173077ef6aa5320b05feda1eb Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Thu, 9 May 2024 09:55:42 +0300 Subject: [PATCH 027/442] Fix tests --- .../server/LwM2mVersionedModelProvider.java | 4 +-- .../lwm2m/server/client/LwM2mClient.java | 30 ++++++++++--------- .../server/store/util/LwM2MClientSerDes.java | 3 +- 3 files changed, 20 insertions(+), 17 deletions(-) diff --git a/common/transport/lwm2m/src/main/java/org/thingsboard/server/transport/lwm2m/server/LwM2mVersionedModelProvider.java b/common/transport/lwm2m/src/main/java/org/thingsboard/server/transport/lwm2m/server/LwM2mVersionedModelProvider.java index 78f76adc1d..ab52a024da 100644 --- a/common/transport/lwm2m/src/main/java/org/thingsboard/server/transport/lwm2m/server/LwM2mVersionedModelProvider.java +++ b/common/transport/lwm2m/src/main/java/org/thingsboard/server/transport/lwm2m/server/LwM2mVersionedModelProvider.java @@ -108,9 +108,9 @@ public class LwM2mVersionedModelProvider implements LwM2mModelProvider { @Override public ObjectModel getObjectModel(int objectId) { LwM2mClient lwM2mClient = lwM2mClientContext.getClientByEndpoint(registration.getEndpoint()); - String version = lwM2mClient.getSupportedObjectVersion(objectId).toString(); + var version = lwM2mClient.getSupportedObjectVersion(objectId); if (version != null) { - return this.getObjectModelDynamic(objectId, version); + return this.getObjectModelDynamic(objectId, version.toString()); } return null; } diff --git a/common/transport/lwm2m/src/main/java/org/thingsboard/server/transport/lwm2m/server/client/LwM2mClient.java b/common/transport/lwm2m/src/main/java/org/thingsboard/server/transport/lwm2m/server/client/LwM2mClient.java index e267561cd2..908b16a1db 100644 --- a/common/transport/lwm2m/src/main/java/org/thingsboard/server/transport/lwm2m/server/client/LwM2mClient.java +++ b/common/transport/lwm2m/src/main/java/org/thingsboard/server/transport/lwm2m/server/client/LwM2mClient.java @@ -211,11 +211,11 @@ public class LwM2mClient { } private LwM2m.Version getObjectIDVerFromDeviceProfile(DeviceProfile deviceProfile) { - String defaultObjectIdVer = ((Lwm2mDeviceProfileTransportConfiguration)deviceProfile + String defaultObjectIdVer = deviceProfile != null ? ((Lwm2mDeviceProfileTransportConfiguration)deviceProfile .getProfileData() .getTransportConfiguration()) .getClientLwM2mSettings() - .getDefaultObjectIDVer(); + .getDefaultObjectIDVer() : null; return new Version(defaultObjectIdVer == null ? LWM2M_OBJECT_VERSION_DEFAULT : defaultObjectIdVer); } @@ -454,19 +454,21 @@ public class LwM2mClient { private void setSupportedClientObjects(){ this.supportedClientObjects = new ConcurrentHashMap<>(); for (Link link: this.registration.getSortedObjectLinks()) { - MixedLwM2mLink mixedLwM2mLink = (MixedLwM2mLink)link; - if(!mixedLwM2mLink.getPath().isRoot()){ - LwM2mPath lwM2mPath = mixedLwM2mLink.getPath(); - if (lwM2mPath.isObject()) { - LwM2m.Version ver; - if (mixedLwM2mLink.getAttributes().get("ver")!= null) { - ver = (Version) mixedLwM2mLink.getAttributes().get("ver").getValue(); - } else { - ver = getDefaultObjectIDVer(); + if (link instanceof MixedLwM2mLink) { + MixedLwM2mLink mixedLwM2mLink = (MixedLwM2mLink) link; + if (!mixedLwM2mLink.getPath().isRoot()) { + LwM2mPath lwM2mPath = mixedLwM2mLink.getPath(); + if (lwM2mPath.isObject()) { + LwM2m.Version ver; + if (mixedLwM2mLink.getAttributes().get("ver") != null) { + ver = (Version) mixedLwM2mLink.getAttributes().get("ver").getValue(); + } else { + ver = getDefaultObjectIDVer(); + } + this.supportedClientObjects.put(lwM2mPath.getObjectId(), ver); + } else if (this.supportedClientObjects.get(lwM2mPath.getObjectId()) == null) { + this.supportedClientObjects.put(lwM2mPath.getObjectId(), getDefaultObjectIDVer()); } - this.supportedClientObjects.put(lwM2mPath.getObjectId(), ver); - } else if (this.supportedClientObjects.get(lwM2mPath.getObjectId()) == null){ - this.supportedClientObjects.put(lwM2mPath.getObjectId(), getDefaultObjectIDVer()); } } } diff --git a/common/transport/lwm2m/src/main/java/org/thingsboard/server/transport/lwm2m/server/store/util/LwM2MClientSerDes.java b/common/transport/lwm2m/src/main/java/org/thingsboard/server/transport/lwm2m/server/store/util/LwM2MClientSerDes.java index 21cdc356a4..ece90b2116 100644 --- a/common/transport/lwm2m/src/main/java/org/thingsboard/server/transport/lwm2m/server/store/util/LwM2MClientSerDes.java +++ b/common/transport/lwm2m/src/main/java/org/thingsboard/server/transport/lwm2m/server/store/util/LwM2MClientSerDes.java @@ -23,6 +23,7 @@ import com.google.gson.JsonObject; import com.google.gson.JsonParser; import com.google.protobuf.util.JsonFormat; import lombok.SneakyThrows; +import org.eclipse.leshan.core.LwM2m; import org.eclipse.leshan.core.model.ResourceModel; import org.eclipse.leshan.core.node.LwM2mMultipleResource; import org.eclipse.leshan.core.node.LwM2mNodeException; @@ -345,7 +346,7 @@ public class LwM2MClientSerDes { if (defaultObjectIDVer != null) { Field defaultObjectIDVerField = lwM2mClientClass.getDeclaredField("defaultObjectIDVer"); defaultObjectIDVerField.setAccessible(true); - defaultObjectIDVerField.set(lwM2mClient, defaultObjectIDVer.getAsString()); + defaultObjectIDVerField.set(lwM2mClient, new LwM2m.Version(defaultObjectIDVer.getAsString())); } JsonElement registration = o.get("registration"); From 25d733324ff640a32f2dd7c24a8a4aedfdfdc559 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Thu, 9 May 2024 11:14:55 +0300 Subject: [PATCH 028/442] Update test --- .../org/thingsboard/server/controller/ImageControllerTest.java | 1 - 1 file changed, 1 deletion(-) diff --git a/application/src/test/java/org/thingsboard/server/controller/ImageControllerTest.java b/application/src/test/java/org/thingsboard/server/controller/ImageControllerTest.java index 53b36c955b..cf43f54df9 100644 --- a/application/src/test/java/org/thingsboard/server/controller/ImageControllerTest.java +++ b/application/src/test/java/org/thingsboard/server/controller/ImageControllerTest.java @@ -57,7 +57,6 @@ public class ImageControllerTest extends AbstractControllerTest { @Before public void beforeEach() throws Exception { - resourceRepository.deleteAll(); loginTenantAdmin(); } From 667536aba76d2af3f3e66c036fa309eb81ac6945 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Thu, 9 May 2024 14:49:05 +0300 Subject: [PATCH 029/442] Fix install script --- .../thingsboard/server/install/ThingsboardInstallService.java | 1 - 1 file changed, 1 deletion(-) diff --git a/application/src/main/java/org/thingsboard/server/install/ThingsboardInstallService.java b/application/src/main/java/org/thingsboard/server/install/ThingsboardInstallService.java index eba35157c9..bab9e1fbc9 100644 --- a/application/src/main/java/org/thingsboard/server/install/ThingsboardInstallService.java +++ b/application/src/main/java/org/thingsboard/server/install/ThingsboardInstallService.java @@ -137,7 +137,6 @@ public class ThingsboardInstallService { entityDatabaseSchemaService.createCustomerTitleUniqueConstraintIfNotExists(); systemDataLoaderService.updateDefaultNotificationConfigs(false); systemDataLoaderService.updateJwtSettings(); - break; case "3.7.0": log.info("Upgrading ThingsBoard from version 3.7.0 to 3.7.1 ..."); databaseEntitiesUpgradeService.upgradeDatabase("3.7.0"); From ecb11b6a3ad1d9dec7d8bcafc2ce8bab7cdd710e Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Thu, 9 May 2024 18:56:31 +0300 Subject: [PATCH 030/442] UI: SCADA symbol edit page. --- ui-ngx/src/app/app.module.ts | 21 +++- ui-ngx/src/app/core/http/image.service.ts | 39 ++++++- ui-ngx/src/app/core/services/menu.service.ts | 14 +++ ui-ngx/src/app/core/utils.ts | 7 ++ .../components/details-panel.component.html | 2 +- .../components/details-panel.component.ts | 5 + .../widget/lib/svg/iot-svg.models.ts | 50 +++++++++ .../home/pages/admin/admin-routing.module.ts | 67 +++++++++++- .../modules/home/pages/home-pages.module.ts | 4 +- .../scada-symbol/scada-symbol.component.html | 42 ++++++++ .../scada-symbol/scada-symbol.component.scss | 35 ++++++ .../scada-symbol/scada-symbol.component.ts | 102 ++++++++++++++++++ .../pages/scada-symbol/scada-symbol.models.ts | 22 ++++ .../pages/scada-symbol/scada-symbol.module.ts | 34 ++++++ .../components/image-input.component.html | 2 +- .../components/image-input.component.ts | 38 +++++-- .../image/gallery-image-input.component.ts | 15 ++- .../image/image-dialog.component.ts | 1 + .../image/image-gallery-dialog.component.html | 1 + .../image/image-gallery-dialog.component.ts | 23 ++-- .../image/image-gallery.component.html | 54 +++++----- .../image/image-gallery.component.ts | 71 ++++++++---- .../components/image/images-datasource.ts | 10 +- .../multiple-gallery-image-input.component.ts | 15 ++- .../image/upload-image-dialog.component.html | 6 +- .../image/upload-image-dialog.component.ts | 9 +- .../src/app/shared/models/resource.models.ts | 7 ++ .../assets/locale/locale.constant-en_US.json | 20 ++++ 28 files changed, 610 insertions(+), 106 deletions(-) create mode 100644 ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html create mode 100644 ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.scss create mode 100644 ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts create mode 100644 ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts create mode 100644 ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.module.ts diff --git a/ui-ngx/src/app/app.module.ts b/ui-ngx/src/app/app.module.ts index e18c909c9a..1ebd87c119 100644 --- a/ui-ngx/src/app/app.module.ts +++ b/ui-ngx/src/app/app.module.ts @@ -27,6 +27,23 @@ import { AppComponent } from './app.component'; import { DashboardRoutingModule } from '@modules/dashboard/dashboard-routing.module'; import { RouterModule, Routes } from '@angular/router'; +import { DefaultUrlSerializer, UrlSerializer, UrlTree } from '@angular/router'; + +export default class TbUrlSerializer implements UrlSerializer { + private _defaultUrlSerializer: DefaultUrlSerializer = new DefaultUrlSerializer(); + + parse(url: string): UrlTree { + // Encode parentheses + url = url.replace(/\(/g, '%28').replace(/\)/g, '%29'); + // Use the default serializer. + return this._defaultUrlSerializer.parse(url) + } + + serialize(tree: UrlTree): string { + return this._defaultUrlSerializer.serialize(tree).replace(/%28/g, '(').replace(/%29/g, ')'); + } +} + const routes: Routes = [ { path: '**', redirectTo: 'home' @@ -55,7 +72,9 @@ export class PageNotFoundRoutingModule { } DashboardRoutingModule, PageNotFoundRoutingModule ], - providers: [], + providers: [ + { provide: UrlSerializer, useClass: TbUrlSerializer } + ], bootstrap: [AppComponent] }) export class AppModule { } diff --git a/ui-ngx/src/app/core/http/image.service.ts b/ui-ngx/src/app/core/http/image.service.ts index 2339801e2b..eb15b658e5 100644 --- a/ui-ngx/src/app/core/http/image.service.ts +++ b/ui-ngx/src/app/core/http/image.service.ts @@ -25,11 +25,11 @@ import { ImageResourceInfo, imageResourceType, ImageResourceType, - IMAGES_URL_PREFIX, isImageResourceUrl, ImageExportData, removeTbImagePrefix + IMAGES_URL_PREFIX, isImageResourceUrl, ImageExportData, removeTbImagePrefix, ResourceSubType } from '@shared/models/resource.models'; import { catchError, map, switchMap } from 'rxjs/operators'; import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; -import { blobToBase64 } from '@core/utils'; +import { blobToBase64, blobToText } from '@core/utils'; import { ResourcesService } from '@core/services/resources.service'; @Injectable({ @@ -46,13 +46,14 @@ export class ImageService { ) { } - public uploadImage(file: File, title: string, config?: RequestConfig): Observable { + public uploadImage(file: File, title: string, imageSubType: ResourceSubType, config?: RequestConfig): Observable { if (!config) { config = {}; } const formData = new FormData(); formData.append('file', file); formData.append('title', title); + formData.append('imageSubType', imageSubType); return this.http.post('/api/image', formData, defaultHttpUploadOptions(config.ignoreLoading, config.ignoreErrors, config.resendRequest)); } @@ -81,9 +82,10 @@ export class ImageService { imageInfo, defaultHttpOptionsFromConfig(config)); } - public getImages(pageLink: PageLink, includeSystemImages = false, config?: RequestConfig): Observable> { + public getImages(pageLink: PageLink, imageSubType: ResourceSubType, + includeSystemImages = false, config?: RequestConfig): Observable> { return this.http.get>( - `${IMAGES_URL_PREFIX}${pageLink.toQuery()}&includeSystemImages=${includeSystemImages}`, + `${IMAGES_URL_PREFIX}${pageLink.toQuery()}&imageSubType=${imageSubType}&includeSystemImages=${includeSystemImages}`, defaultHttpOptionsFromConfig(config)); } @@ -130,6 +132,33 @@ export class ImageService { ); } + public getImageString(imageUrl: string): Observable { + imageUrl = removeTbImagePrefix(imageUrl); + let request: ReplaySubject; + if (this.imagesLoading[imageUrl]) { + request = this.imagesLoading[imageUrl]; + } else { + request = new ReplaySubject(1); + this.imagesLoading[imageUrl] = request; + const options = defaultHttpOptionsFromConfig({ignoreLoading: true, ignoreErrors: true}); + this.http.get(imageUrl, {...options, ...{ responseType: 'blob' } }).subscribe({ + next: (value) => { + request.next(value); + request.complete(); + }, + error: err => { + request.error(err); + }, + complete: () => { + delete this.imagesLoading[imageUrl]; + } + }); + } + return request.pipe( + switchMap(val => blobToText(val)) + ); + } + public resolveImageUrl(imageUrl: string, preview = false, asString = false, emptyUrl = NO_IMAGE_DATA_URI): Observable { imageUrl = removeTbImagePrefix(imageUrl); if (isImageResourceUrl(imageUrl)) { diff --git a/ui-ngx/src/app/core/services/menu.service.ts b/ui-ngx/src/app/core/services/menu.service.ts index 1f2d76a8b8..256c1031ea 100644 --- a/ui-ngx/src/app/core/services/menu.service.ts +++ b/ui-ngx/src/app/core/services/menu.service.ts @@ -150,6 +150,13 @@ export class MenuService { path: '/resources/images', icon: 'filter' }, + { + id: 'scada_symbols', + name: 'scada.symbols', + type: 'link', + path: '/resources/scada-symbols', + icon: 'precision_manufacturing' + }, { id: 'resources_library', name: 'resource.resources-library', @@ -541,6 +548,13 @@ export class MenuService { path: '/resources/images', icon: 'filter' }, + { + id: 'scada_symbols', + name: 'scada.symbols', + type: 'link', + path: '/resources/scada-symbols', + icon: 'precision_manufacturing' + }, { id: 'resources_library', name: 'resource.resources-library', diff --git a/ui-ngx/src/app/core/utils.ts b/ui-ngx/src/app/core/utils.ts index dc9ed5004b..c9aebfc39b 100644 --- a/ui-ngx/src/app/core/utils.ts +++ b/ui-ngx/src/app/core/utils.ts @@ -217,6 +217,13 @@ export const blobToBase64 = (blob: Blob): Observable => from(new Promise } )); +export const blobToText = (blob: Blob): Observable => from(new Promise((resolve) => { + const reader = new FileReader(); + reader.onloadend = () => resolve(reader.result as string); + reader.readAsText(blob); + } +)); + const scrollRegex = /(auto|scroll)/; function parentNodes(node: Node, nodes: Node[]): Node[] { diff --git a/ui-ngx/src/app/modules/home/components/details-panel.component.html b/ui-ngx/src/app/modules/home/components/details-panel.component.html index d3e50ca1d7..2483a5b5e3 100644 --- a/ui-ngx/src/app/modules/home/components/details-panel.component.html +++ b/ui-ngx/src/app/modules/home/components/details-panel.component.html @@ -40,7 +40,7 @@ search -
diff --git a/ui-ngx/src/app/modules/home/components/details-panel.component.ts b/ui-ngx/src/app/modules/home/components/details-panel.component.ts index bdcfbd636b..3b536c809e 100644 --- a/ui-ngx/src/app/modules/home/components/details-panel.component.ts +++ b/ui-ngx/src/app/modules/home/components/details-panel.component.ts @@ -28,6 +28,7 @@ import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; import { UntypedFormGroup } from '@angular/forms'; import { Subscription } from 'rxjs'; +import { coerceBoolean } from '@shared/decorators/coercion'; @Component({ selector: 'tb-details-panel', @@ -44,6 +45,10 @@ export class DetailsPanelComponent extends PageComponent implements OnDestroy { @Input() isShowSearch = false; @Input() backgroundColor = '#FFF'; + @Input() + @coerceBoolean() + showCloseDetails = true; + private theFormValue: UntypedFormGroup; private formSubscription: Subscription = null; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts index 4a19709228..8e369cf580 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts @@ -40,6 +40,7 @@ import { ColorProcessor, constantColor, Font } from '@shared/models/widget-setti import { AttributeScope } from '@shared/models/telemetry/telemetry.models'; import { UtilsService } from '@core/services/utils.service'; import { WidgetAction, WidgetActionType } from '@shared/models/widget.models'; +import { ResizeObserver } from '@juggle/resize-observer'; export interface IotSvgApi { formatValue: (value: any, dec?: number, units?: string, showZeroDecimals?: boolean) => string | undefined; @@ -248,6 +249,55 @@ export type IotSvgObjectSettings = {[id: string]: any}; const parseError = (ctx: WidgetContext, err: any): string => ctx.$injector.get(UtilsService).parseException(err).message || 'Unknown Error'; +export class IotSvgEditObject { + + private svgShape: Svg; + private box: Box; + + private shapeResize$: ResizeObserver; + constructor(private rootElement: HTMLElement) { + this.shapeResize$ = new ResizeObserver(() => { + this.resize(); + }); + this.shapeResize$.observe(this.rootElement); + } + + public setContent(svgContent: string) { + if (this.svgShape) { + this.svgShape.remove(); + } + const doc: XMLDocument = new DOMParser().parseFromString(svgContent, 'image/svg+xml'); + this.svgShape = SVG().svg(doc.documentElement.innerHTML); + this.svgShape.node.style.overflow = 'visible'; + this.svgShape.node.style['user-select'] = 'none'; + this.box = this.svgShape.bbox(); + this.svgShape.size(this.box.width, this.box.height); + this.svgShape.addTo(this.rootElement); + this.resize(); + } + + public destroy() { + if (this.shapeResize$) { + this.shapeResize$.disconnect(); + } + } + + private resize() { + if (this.svgShape) { + const targetWidth = this.rootElement.getBoundingClientRect().width; + const targetHeight = this.rootElement.getBoundingClientRect().height; + let scale: number; + if (targetWidth < targetHeight) { + scale = targetWidth / this.box.width; + } else { + scale = targetHeight / this.box.height; + } + this.svgShape.node.style.transform = `scale(${scale})`; + } + } + +} + export class IotSvgObject { private metadata: IotSvgMetadata; diff --git a/ui-ngx/src/app/modules/home/pages/admin/admin-routing.module.ts b/ui-ngx/src/app/modules/home/pages/admin/admin-routing.module.ts index 63fb9a14de..e292f3cfbb 100644 --- a/ui-ngx/src/app/modules/home/pages/admin/admin-routing.module.ts +++ b/ui-ngx/src/app/modules/home/pages/admin/admin-routing.module.ts @@ -14,8 +14,8 @@ /// limitations under the License. /// -import { Injectable, NgModule } from '@angular/core'; -import { Resolve, RouterModule, Routes } from '@angular/router'; +import { inject, Injectable, NgModule } from '@angular/core'; +import { ActivatedRouteSnapshot, Resolve, ResolveFn, RouterModule, RouterStateSnapshot, Routes } from '@angular/router'; import { MailServerComponent } from '@modules/home/pages/admin/mail-server.component'; import { ConfirmOnExitGuard } from '@core/guards/confirm-on-exit.guard'; @@ -23,7 +23,7 @@ import { Authority } from '@shared/models/authority.enum'; import { GeneralSettingsComponent } from '@modules/home/pages/admin/general-settings.component'; import { SecuritySettingsComponent } from '@modules/home/pages/admin/security-settings.component'; import { OAuth2SettingsComponent } from '@home/pages/admin/oauth2-settings.component'; -import { Observable } from 'rxjs'; +import { forkJoin, Observable } from 'rxjs'; import { OAuth2Service } from '@core/http/oauth2.service'; import { SmsProviderComponent } from '@home/pages/admin/sms-provider.component'; import { HomeSettingsComponent } from '@home/pages/admin/home-settings.component'; @@ -31,7 +31,7 @@ import { EntitiesTableComponent } from '@home/components/entity/entities-table.c import { ResourcesLibraryTableConfigResolver } from '@home/pages/admin/resource/resources-library-table-config.resolve'; import { EntityDetailsPageComponent } from '@home/components/entity/entity-details-page.component'; import { entityDetailsPageBreadcrumbLabelFunction } from '@home/pages/home-pages.models'; -import { BreadCrumbConfig } from '@shared/components/breadcrumb'; +import { BreadCrumbConfig, BreadCrumbLabelFunction } from '@shared/components/breadcrumb'; import { QueuesTableConfigResolver } from '@home/pages/admin/queue/queues-table-config.resolver'; import { RepositoryAdminSettingsComponent } from '@home/pages/admin/repository-admin-settings.component'; import { AutoCommitAdminSettingsComponent } from '@home/pages/admin/auto-commit-admin-settings.component'; @@ -40,6 +40,10 @@ import { widgetsLibraryRoutes } from '@home/pages/widget/widget-library-routing. import { RouterTabsComponent } from '@home/components/router-tabs.component'; import { auditLogsRoutes } from '@home/pages/audit-log/audit-log-routing.module'; import { ImageGalleryComponent } from '@shared/components/image/image-gallery.component'; +import { ImageResourceType, IMAGES_URL_PREFIX, ResourceSubType } from '@shared/models/resource.models'; +import { ScadaSymbolComponent } from '@home/pages/scada-symbol/scada-symbol.component'; +import { ImageService } from '@core/http/image.service'; +import { ScadaSymbolData } from '@home/pages/scada-symbol/scada-symbol.models'; @Injectable() export class OAuth2LoginProcessingUrlResolver implements Resolve { @@ -52,6 +56,22 @@ export class OAuth2LoginProcessingUrlResolver implements Resolve { } } +export const scadaSymbolResolver: ResolveFn = + (route: ActivatedRouteSnapshot, + state: RouterStateSnapshot, + imageService = inject(ImageService)) => { + const type: ImageResourceType = route.params.type; + const key = decodeURIComponent(route.params.key); + return forkJoin({ + imageResource: imageService.getImageInfo(type, key), + svgContent: imageService.getImageString(`${IMAGES_URL_PREFIX}/${type}/${encodeURIComponent(key)}`) + }); +}; + +export const scadaSymbolBreadcumbLabelFunction: BreadCrumbLabelFunction + = ((route, translate, component) => + component.symbolData?.imageResource?.title); + const routes: Routes = [ { path: 'resources', @@ -87,8 +107,45 @@ const routes: Routes = [ data: { auth: [Authority.TENANT_ADMIN, Authority.SYS_ADMIN], title: 'image.gallery', - }, + imageSubType: ResourceSubType.IMAGE + } + } + ] + }, + { + path: 'scada-symbols', + data: { + breadcrumb: { + label: 'scada.symbols', + icon: 'precision_manufacturing' } + }, + children: [ + { + path: '', + component: ImageGalleryComponent, + data: { + auth: [Authority.TENANT_ADMIN, Authority.SYS_ADMIN], + title: 'scada.symbols', + imageSubType: ResourceSubType.IOT_SVG + } + }, + { + path: ':type/:key', + component: ScadaSymbolComponent, + canDeactivate: [ConfirmOnExitGuard], + data: { + breadcrumb: { + labelFunction: scadaSymbolBreadcumbLabelFunction, + icon: 'precision_manufacturing' + } as BreadCrumbConfig, + auth: [Authority.TENANT_ADMIN, Authority.SYS_ADMIN], + title: 'scada.symbol' + }, + resolve: { + symbolData: scadaSymbolResolver + } + }, ] }, { diff --git a/ui-ngx/src/app/modules/home/pages/home-pages.module.ts b/ui-ngx/src/app/modules/home/pages/home-pages.module.ts index 63a3aace21..0b1a70996e 100644 --- a/ui-ngx/src/app/modules/home/pages/home-pages.module.ts +++ b/ui-ngx/src/app/modules/home/pages/home-pages.module.ts @@ -43,6 +43,7 @@ import { EntitiesModule } from '@home/pages/entities/entities.module'; import { FeaturesModule } from '@home/pages/features/features.module'; import { NotificationModule } from '@home/pages/notification/notification.module'; import { AccountModule } from '@home/pages/account/account.module'; +import { ScadaSymbolModule } from '@home/pages/scada-symbol/scada-symbol.module'; @NgModule({ exports: [ @@ -72,7 +73,8 @@ import { AccountModule } from '@home/pages/account/account.module'; OtaUpdateModule, UserModule, VcModule, - AccountModule + AccountModule, + ScadaSymbolModule ] }) export class HomePagesModule { } diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html new file mode 100644 index 0000000000..cd366abbde --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html @@ -0,0 +1,42 @@ + +
+
+
+ + + +
+ {{ metadata | json }} +
+ + + +
+ + +
+
+
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.scss b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.scss new file mode 100644 index 0000000000..783e2d842b --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.scss @@ -0,0 +1,35 @@ +/** + * Copyright ยฉ 2016-2024 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. + */ +.tb-scada-symbol { + width: 100%; + height: 100%; + .tb-scada-symbol-details-drawer { + width: 50%; + } + .tb-scada-symbol-content { + flex: 1; + min-width: 0; + min-height: 0; + background: #fff; + .tb-scada-symbol-shape { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + } +} diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts new file mode 100644 index 0000000000..d75ac137e6 --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts @@ -0,0 +1,102 @@ +/// +/// Copyright ยฉ 2016-2024 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 { + AfterViewInit, + Component, + ElementRef, + HostBinding, + OnDestroy, + OnInit, + ViewChild, + ViewEncapsulation +} from '@angular/core'; +import { PageComponent } from '@shared/components/page.component'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; +import { ActivatedRoute, Router } from '@angular/router'; +import { takeUntil } from 'rxjs/operators'; +import { Subject } from 'rxjs'; +import { ScadaSymbolData } from '@home/pages/scada-symbol/scada-symbol.models'; +import { + IotSvgEditObject, + IotSvgMetadata, + parseIotSvgMetadataFromContent +} from '@home/components/widget/lib/svg/iot-svg.models'; + +@Component({ + selector: 'tb-scada-symbol', + templateUrl: './scada-symbol.component.html', + styleUrls: ['./scada-symbol.component.scss'], + encapsulation: ViewEncapsulation.None +}) +export class ScadaSymbolComponent extends PageComponent implements OnInit, OnDestroy, AfterViewInit { + + @HostBinding('style.width') width = '100%'; + @HostBinding('style.height') height = '100%'; + + @ViewChild('iotSvgShape', {static: false}) + iotSvgShape: ElementRef; + + symbolData: ScadaSymbolData; + + iotSvgObjectEdit: IotSvgEditObject; + metadata: IotSvgMetadata; + + private destroy$ = new Subject(); + + constructor(protected store: Store, + private router: Router, + private route: ActivatedRoute) { + super(store); + this.route.data.pipe( + takeUntil(this.destroy$) + ).subscribe( + () => { + this.reset(); + this.init(); + } + ); + } + + ngOnInit(): void { + } + + ngAfterViewInit() { + this.iotSvgObjectEdit = new IotSvgEditObject(this.iotSvgShape.nativeElement); + if (this.symbolData) { + this.iotSvgObjectEdit.setContent(this.symbolData.svgContent); + } + } + + ngOnDestroy() { + super.ngOnDestroy(); + this.destroy$.next(); + this.destroy$.complete(); + } + + private reset(): void { + } + + private init() { + this.symbolData = this.route.snapshot.data.symbolData; + this.metadata = parseIotSvgMetadataFromContent(this.symbolData.svgContent); + if (this.iotSvgObjectEdit) { + this.iotSvgObjectEdit.setContent(this.symbolData.svgContent); + } + } +} + diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts new file mode 100644 index 0000000000..32b05f2265 --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts @@ -0,0 +1,22 @@ +/// +/// Copyright ยฉ 2016-2024 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 { ImageResourceInfo } from '@shared/models/resource.models'; + +export interface ScadaSymbolData { + imageResource: ImageResourceInfo; + svgContent: string; +} diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.module.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.module.ts new file mode 100644 index 0000000000..2ed9a0bb4c --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.module.ts @@ -0,0 +1,34 @@ +/// +/// Copyright ยฉ 2016-2024 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 { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { SharedModule } from '@app/shared/shared.module'; +import { HomeComponentsModule } from '@modules/home/components/home-components.module'; +import { ScadaSymbolComponent } from '@home/pages/scada-symbol/scada-symbol.component'; + +@NgModule({ + declarations: + [ + ScadaSymbolComponent + ], + imports: [ + CommonModule, + SharedModule, + HomeComponentsModule + ] +}) +export class ScadaSymbolModule { } diff --git a/ui-ngx/src/app/shared/components/image-input.component.html b/ui-ngx/src/app/shared/components/image-input.component.html index 6a657f70b1..3b7130b634 100644 --- a/ui-ngx/src/app/shared/components/image-input.component.html +++ b/ui-ngx/src/app/shared/components/image-input.component.html @@ -47,7 +47,7 @@ - +
diff --git a/ui-ngx/src/app/shared/components/image-input.component.ts b/ui-ngx/src/app/shared/components/image-input.component.ts index acbff9844f..5bf98c65a9 100644 --- a/ui-ngx/src/app/shared/components/image-input.component.ts +++ b/ui-ngx/src/app/shared/components/image-input.component.ts @@ -53,6 +53,9 @@ import { ImagePipe } from '@shared/pipe/image.pipe'; }) export class ImageInputComponent extends PageComponent implements AfterViewInit, OnDestroy, ControlValueAccessor { + @Input() + accept = 'image/*'; + @Input() label: string; @@ -85,6 +88,9 @@ export class ImageInputComponent extends PageComponent implements AfterViewInit, @Input() inputId = this.utils.guid(); + @Input() + allowedExtensions: string; + @Input() @coerceBoolean() processImageApiLink = false; @@ -141,17 +147,19 @@ export class ImageInputComponent extends PageComponent implements AfterViewInit, ); return false; } - const reader = new FileReader(); - reader.onload = (_loadEvent) => { - if (typeof reader.result === 'string' && reader.result.startsWith('data:image/')) { - this.imageUrl = reader.result; - this.safeImageUrl = this.sanitizer.bypassSecurityTrustUrl(this.imageUrl); - this.file = file; - this.fileName = fileName; - this.updateModel(); - } - }; - reader.readAsDataURL(file); + if (this.filterFile(flowFile)) { + const reader = new FileReader(); + reader.onload = (_loadEvent) => { + if (typeof reader.result === 'string' && reader.result.startsWith('data:image/')) { + this.imageUrl = reader.result; + this.safeImageUrl = this.sanitizer.bypassSecurityTrustUrl(this.imageUrl); + this.file = file; + this.fileName = fileName; + this.updateModel(); + } + }; + reader.readAsDataURL(file); + } } }); } @@ -198,6 +206,14 @@ export class ImageInputComponent extends PageComponent implements AfterViewInit, this.fileNameChanged.emit(this.fileName); } + private filterFile(file: flowjs.FlowFile): boolean { + if (this.allowedExtensions) { + return this.allowedExtensions.split(',').indexOf(file.getExtension()) > -1; + } else { + return true; + } + } + clearImage() { this.imageUrl = null; this.safeImageUrl = null; diff --git a/ui-ngx/src/app/shared/components/image/gallery-image-input.component.ts b/ui-ngx/src/app/shared/components/image/gallery-image-input.component.ts index 9b81a0eaba..fd44b6cfec 100644 --- a/ui-ngx/src/app/shared/components/image/gallery-image-input.component.ts +++ b/ui-ngx/src/app/shared/components/image/gallery-image-input.component.ts @@ -26,11 +26,15 @@ import { isBase64DataImageUrl, isImageResourceUrl, prependTbImagePrefix, - removeTbImagePrefix + removeTbImagePrefix, + ResourceSubType } from '@shared/models/resource.models'; import { ImageService } from '@core/http/image.service'; import { MatDialog } from '@angular/material/dialog'; -import { ImageGalleryDialogComponent } from '@shared/components/image/image-gallery-dialog.component'; +import { + ImageGalleryDialogComponent, + ImageGalleryDialogData +} from '@shared/components/image/image-gallery-dialog.component'; export enum ImageLinkType { none = 'none', @@ -188,11 +192,14 @@ export class GalleryImageInputComponent extends PageComponent implements OnInit, if ($event) { $event.stopPropagation(); } - this.dialog.open(ImageGalleryDialogComponent, { autoFocus: false, disableClose: false, - panelClass: ['tb-dialog', 'tb-fullscreen-dialog'] + panelClass: ['tb-dialog', 'tb-fullscreen-dialog'], + data: { + imageSubType: ResourceSubType.IMAGE + } }).afterClosed().subscribe((image) => { if (image) { this.linkType = ImageLinkType.resource; diff --git a/ui-ngx/src/app/shared/components/image/image-dialog.component.ts b/ui-ngx/src/app/shared/components/image/image-dialog.component.ts index 40e7d2ec89..fd2b941382 100644 --- a/ui-ngx/src/app/shared/components/image/image-dialog.component.ts +++ b/ui-ngx/src/app/shared/components/image/image-dialog.component.ts @@ -146,6 +146,7 @@ export class ImageDialogComponent extends disableClose: true, panelClass: ['tb-dialog', 'tb-fullscreen-dialog'], data: { + imageSubType: this.image.resourceSubType, image: this.image } }).afterClosed().subscribe((result) => { diff --git a/ui-ngx/src/app/shared/components/image/image-gallery-dialog.component.html b/ui-ngx/src/app/shared/components/image/image-gallery-dialog.component.html index 8e24e2ffb2..3c4b6b62fd 100644 --- a/ui-ngx/src/app/shared/components/image/image-gallery-dialog.component.html +++ b/ui-ngx/src/app/shared/components/image/image-gallery-dialog.component.html @@ -24,6 +24,7 @@ , protected router: Router, - private imageService: ImageService, - private dialog: MatDialog, + @Inject(MAT_DIALOG_DATA) public data: ImageGalleryDialogData, public dialogRef: MatDialogRef) { super(store, router, dialogRef); } diff --git a/ui-ngx/src/app/shared/components/image/image-gallery.component.html b/ui-ngx/src/app/shared/components/image/image-gallery.component.html index 21b10e8c66..d9768baf8a 100644 --- a/ui-ngx/src/app/shared/components/image/image-gallery.component.html +++ b/ui-ngx/src/app/shared/components/image/image-gallery.component.html @@ -22,7 +22,7 @@ [fxShow]="!textSearchMode && (mode === 'grid' || dataSource?.selection.isEmpty())" [ngClass.lt-lg]="{'multi-row': !isSysAdmin}">
- image.gallery + {{ (isScada ? 'scada.symbols' : 'image.gallery') | translate }}
@@ -46,7 +46,7 @@ {{ 'image.include-system-images' | translate }} + (ngModelChange)="includeSystemImagesChanged($event)">{{ (isScada ? 'scada.include-system-symbols' : 'image.include-system-images') | translate }}
@@ -68,7 +68,7 @@ @@ -77,7 +77,7 @@ mat-icon-button color="primary" (click)="uploadImage()" - matTooltip="{{'image.upload-image' | translate }}" + matTooltip="{{ (isScada ? 'scada.upload-symbol' : 'image.upload-image' ) | translate }}" matTooltipPosition="above"> add @@ -87,18 +87,18 @@ mat-flat-button color="primary" (click)="uploadImage()"> - {{ 'image.upload-image' | translate }} + {{ (isScada ? 'scada.upload-symbol' : 'image.upload-image' ) | translate }}
{{ 'image.include-system-images' | translate }} + (ngModelChange)="includeSystemImagesChanged($event)">{{ (isScada ? 'scada.include-system-symbols' : 'image.include-system-images') | translate }}
@@ -106,7 +106,7 @@   + placeholder="{{ (isScada ? 'scada.search' : 'image.search' ) | translate }}"/> - -
@@ -318,7 +318,7 @@
-
image.no-images
+
{{ (isScada ? 'scada.no-symbols' : 'image.no-images') | translate }}
 @@ -326,18 +326,18 @@
- +
`); + const addTagButton = addTagPanel.find('.add-tag-button'); + addTagButton.on('click', () => { + this.setupAddTagInputPanel(); + }); + this.tooltip.content(addTagPanel); + this.tooltip.off('closing'); + } + + private setupAddTagInputPanel() { + const addTagInputPanel = + $(`
+ Enter tag: + + done + close +
`); + const tagInput = addTagInputPanel.find('input.tag-input'); + const applyTagButton = addTagInputPanel.find('span.apply-icon'); + const closeButton = addTagInputPanel.find('span.close-icon'); + textTooltip(applyTagButton, 'Apply'); + textTooltip(closeButton, 'Cancel'); + + tagInput.on('keypress', (event) => { + if (event.which === 13) { + const newTag: string = tagInput.val() as string; + if (newTag) { + this.setTag(newTag); + } + } + }); + applyTagButton.on('click', () => { + const newTag: string = tagInput.val() as string; + if (newTag) { + this.setTag(newTag); + } else { + this.tooltip.close(); + } + }); + closeButton.on('click', () => { + this.tooltip.close(); + }); + this.tooltip.content(addTagInputPanel); + this.tooltip.on('closing', () => { + this.setupAddTagPanel(); + }); + tagInput.trigger('focus'); + } + + private innerTooltipPosition(instance: ITooltipsterInstance, helper: ITooltipsterHelper, position: ITooltipPosition): ITooltipPosition { + if (!this.isGroup()) { + const clientRect = helper.origin.getBoundingClientRect(); + position.coord.top = clientRect.top + (clientRect.height - position.size.height) / 2 + + this.innerTooltipOffset; + position.coord.left = clientRect.left + (clientRect.width - position.size.width) / 2; + } + return position; + } + + private hasTag() { + return !!this.tag; + } + + private isGroup() { + return this.element.type === 'g'; + } + } export class IotSvgObject { From b034cd1532175adf5b7283ee9a73ec58223305cd Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Thu, 16 May 2024 18:07:53 +0300 Subject: [PATCH 033/442] UI: Improve scada symbol editor --- ui-ngx/package.json | 1 + .../widget/lib/svg/iot-svg.models.ts | 379 +++++++++++++++--- .../scada-symbol/scada-symbol.component.html | 1 + ui-ngx/src/styles.scss | 143 +++++++ ui-ngx/yarn.lock | 9 +- 5 files changed, 482 insertions(+), 51 deletions(-) diff --git a/ui-ngx/package.json b/ui-ngx/package.json index b8a8e4c9a9..dc1c00f024 100644 --- a/ui-ngx/package.json +++ b/ui-ngx/package.json @@ -45,6 +45,7 @@ "@ngx-translate/core": "^14.0.0", "@svgdotjs/svg.filter.js": "^3.0.8", "@svgdotjs/svg.js": "^3.2.0", + "@svgdotjs/svg.panzoom.js": "^2.1.2", "@tinymce/tinymce-angular": "^7.0.0", "ace-builds": "1.4.13", "ace-diff": "^3.0.3", diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts index fbab201b72..e128a26675 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts @@ -16,7 +16,8 @@ import { ValueType } from '@shared/models/constants'; import * as svgjs from '@svgdotjs/svg.js'; -import { Box, Element, Rect, Runner, SVG, Svg, Text } from '@svgdotjs/svg.js'; +import { Box, Element, Rect, Runner, SVG, Svg, Text, Timeline, Style } from '@svgdotjs/svg.js'; +import '@svgdotjs/svg.panzoom.js'; import { DataToValueType, GetValueAction, @@ -45,6 +46,7 @@ import { ResizeObserver } from '@juggle/resize-observer'; import ITooltipsterInstance = JQueryTooltipster.ITooltipsterInstance; import ITooltipPosition = JQueryTooltipster.ITooltipPosition; import ITooltipsterHelper = JQueryTooltipster.ITooltipsterHelper; +import TooltipPositioningSide = JQueryTooltipster.TooltipPositioningSide; export interface IotSvgApi { formatValue: (value: any, dec?: number, units?: string, showZeroDecimals?: boolean) => string | undefined; @@ -281,30 +283,36 @@ export class IotSvgEditObject { private box: Box; private elements: IotSvgElement[] = []; private readonly shapeResize$: ResizeObserver; + private performSetup = false; + private hoverFilterStyle: Style; public scale = 1; constructor(private rootElement: HTMLElement) { this.shapeResize$ = new ResizeObserver(() => { this.resize(); }); - this.shapeResize$.observe(this.rootElement); } public setContent(svgContent: string) { + this.shapeResize$.unobserve(this.rootElement); if (this.svgShape) { + this.elements.length = 0; this.svgShape.remove(); } const doc: XMLDocument = new DOMParser().parseFromString(svgContent, 'image/svg+xml'); - this.svgShape = SVG().svg(doc.documentElement.innerHTML); + this.svgShape = SVG().addTo(this.rootElement).svg(doc.documentElement.innerHTML); this.svgShape.node.style.overflow = 'visible'; this.svgShape.node.style['user-select'] = 'none'; this.box = this.svgShape.bbox(); this.svgShape.size(this.box.width, this.box.height); - this.svgShape.addTo(this.rootElement); - this.resize(); - //this.svgShape.cre - this.svgShape.style().rule('.hovered', {filter: 'drop-shadow(0px 0px 1px #FFC107)'}); - //this.svgShape.style().rule('.hovered', {filter: 'opacity(50%)'}); + this.svgShape.viewbox(`0 0 ${this.box.width} ${this.box.height}`); this.svgShape.style().rule('.tb-element', {cursor: 'pointer', transition: '0.2s filter ease-in-out'}); + this.updateHoverFilterStyle(); + this.performSetup = true; + this.shapeResize$.observe(this.rootElement); + } + + private doSetup() { + this.setupZoomPan(0); (window as any).SVG = svgjs; forkJoin([ from(import('tooltipster')), @@ -314,6 +322,49 @@ export class IotSvgEditObject { }); } + private setupZoomPan(margin: number) { + this.svgShape.on('zoom', (e) => { + const { + detail: { level, focus } + } = e as any; + this.svgShape.zoom(level, focus); + const box = this.restrictToMargins(this.svgShape.viewbox(), margin); + this.svgShape.viewbox(box); + setTimeout(() => { + this.updateTooltipPositions(); + }); + e.preventDefault(); + }); + this.svgShape.on('panning', (e) => { + const box = (e as any).detail.box; + this.svgShape.viewbox(this.restrictToMargins(box, margin)); + setTimeout(() => { + this.updateTooltipPositions(); + }); + e.preventDefault(); + }); + this.svgShape.on('panStart', (e) => { + this.svgShape.node.style.cursor = 'grab'; + }); + this.svgShape.on('panEnd', (e) => { + this.svgShape.node.style.cursor = 'default'; + }); + } + + private restrictToMargins(box: Box, margin: number): Box { + if (box.x < -margin) { + box.x = -margin; + } else if ((box.x + box.width) > (this.box.width + margin)) { + box.x = this.box.width + margin - box.width; + } + if (box.y < -margin) { + box.y = -margin; + } else if ((box.y + box.height) > (this.box.height + margin)) { + box.y = this.box.height + margin - box.height; + } + return box; + } + private setupElements() { this.svgShape.children().forEach(child => { this.addElement(child); @@ -343,9 +394,20 @@ export class IotSvgEditObject { } } for (const group of overlappingGroups) { - let offset = - (elementTooltipMinHeight * group.length) / 2 + elementTooltipMinHeight / 2; + const centers = group.map(e => e.box.cy); + const center = centers.reduce((a, b) => a + b, 0) / centers.length; + const textElement = group.find(e => e.isText()); + const slots = textElement ? group.length % 2 === 0 ? (group.length + 1) : group.length : group.length; + if (textElement) { + textElement.setInnerTooltipOffset(0, center); + group.splice(group.indexOf(textElement), 1); + } + let offset = - (elementTooltipMinHeight * slots) / 2 + elementTooltipMinHeight / 2; for (const element of group) { - element.innerTooltipOffset = offset; + if (textElement && offset === 0) { + offset += elementTooltipMinHeight; + } + element.setInnerTooltipOffset(offset, center); offset += elementTooltipMinHeight; } } @@ -376,12 +438,55 @@ export class IotSvgEditObject { if (this.svgShape) { const targetWidth = this.rootElement.getBoundingClientRect().width; const targetHeight = this.rootElement.getBoundingClientRect().height; + let scale: number; if (targetWidth < targetHeight) { - this.scale = targetWidth / this.box.width; + scale = targetWidth / this.box.width; } else { - this.scale = targetHeight / this.box.height; + scale = targetHeight / this.box.height; + } + if (this.scale !== scale) { + this.scale = scale; + this.svgShape.node.style.transform = `scale(${this.scale})`; + this.updateHoverFilterStyle(); + this.updateZoomOptions(); + this.updateTooltipPositions(); + } + if (this.performSetup) { + this.performSetup = false; + this.doSetup(); } - this.svgShape.node.style.transform = `scale(${this.scale})`; + } + } + + private updateHoverFilterStyle() { + if (this.hoverFilterStyle) { + this.hoverFilterStyle.remove(); + } + const whiteBlur = (2.8 / this.scale).toFixed(2); + const blackBlur = (1.2 / this.scale).toFixed(2); + this.hoverFilterStyle = + this.svgShape.style().rule('.hovered', + { + filter: + `drop-shadow(0px 0px ${whiteBlur}px white) drop-shadow(0px 0px ${whiteBlur}px white) + drop-shadow(0px 0px ${whiteBlur}px white) drop-shadow(0px 0px ${whiteBlur}px white) + drop-shadow(0px 0px ${blackBlur}px black)` + } + ); + } + + private updateZoomOptions() { + this.svgShape.panZoom({ + zoomMin: 1, + zoomMax: 4, + zoomFactor: 2 / this.scale + }); + } + + private updateTooltipPositions() { + const container = this.rootElement.getBoundingClientRect(); + for (const e of this.elements) { + e.updateTooltipPosition(container); } } @@ -390,8 +495,8 @@ export class IotSvgEditObject { const hasBBox = (e: Element): boolean => { try { if (e.bbox) { - e.bbox(); - return true; + const box = e.bbox(); + return !!box.width || !!box.height; } else { return false; } @@ -402,31 +507,45 @@ const hasBBox = (e: Element): boolean => { const textTooltip = (el: JQuery, text: string) => { el.tooltipster({ - theme: ['tooltipster-tb'], + theme: ['iot-svg'], trigger: 'hover', content: text }); }; +const isDomRectContained = (target: DOMRect, container: DOMRect, horizontalGap = 0, verticalGap = 0): boolean => ( + target.left >= container.left - horizontalGap && + target.left + target.width <= container.left + container.width + horizontalGap && + target.top >= container.top - verticalGap && + target.top + target.height <= container.top + container.height + verticalGap +); + const elementTooltipMinHeight = 36 + 8; const elementTooltipMinWidth = 100; -const groupRectStroke = 10; +const groupRectStroke = 2; +const groupRectPadding = 2; class IotSvgElement { private highlightRect: Rect; + private highlightRectTimeline: Timeline; private tooltip: ITooltipsterInstance; private tag: string; - public innerTooltipOffset = 0; + private isEditing = false; + + private innerTooltipOffset = 0; public readonly box: Box; private highlighted = false; + private tooltipMouseX: number; + private tooltipMouseY: number; + constructor(private editObject: IotSvgEditObject, private element: Element) { this.tag = element.attr('tb:tag'); @@ -437,10 +556,18 @@ class IotSvgElement { if (this.isGroup()) { this.highlightRect = this.editObject.svgShape - .rect(this.box.width + this.unscaled(groupRectStroke * 4), this.box.height + this.unscaled(groupRectStroke * 4)) - .x(this.box.x - this.unscaled(groupRectStroke * 2)) - .y(this.box.y - this.unscaled(groupRectStroke * 2)) - .attr({fill: 'none', stroke: '#ccc', 'stroke-width': this.unscaled(groupRectStroke), opacity: 0}); + .rect(this.box.width + groupRectPadding * 2, this.box.height + groupRectPadding * 2) + .x(this.box.x - groupRectPadding) + .y(this.box.y - groupRectPadding) + .attr({ + fill: 'none', + rx: this.unscaled(6), + stroke: 'rgba(0, 0, 0, 0.38)', + 'stroke-dasharray': '1', + 'stroke-width': this.unscaled(groupRectStroke), + opacity: 0}); + this.highlightRectTimeline = new Timeline(); + this.highlightRect.timeline(this.highlightRectTimeline); this.highlightRect.hide(); } else { this.element.addClass('tb-element'); @@ -470,18 +597,22 @@ class IotSvgElement { if (!this.highlighted) { this.highlighted = true; if (this.isGroup()) { - this.highlightRect.width(this.box.width + this.unscaled(groupRectStroke * 4)) - .height(this.box.height + this.unscaled(groupRectStroke * 4)) - .x(this.box.x - this.unscaled(groupRectStroke * 2)) - .y(this.box.y - this.unscaled(groupRectStroke * 2)) - .attr({'stroke-width': this.unscaled(groupRectStroke)}); + this.highlightRectTimeline.finish(); + this.highlightRect + .attr({ + rx: this.unscaled(6), + 'stroke-width': this.unscaled(groupRectStroke) + }); this.highlightRect.show(); this.highlightRect.animate(300).attr({opacity: 1}); } else { this.element.addClass('hovered'); } if (this.hasTag()) { - this.tooltip.reposition(); + if (!this.isEditing) { + this.tooltip.reposition(); + } + $(this.tooltip.elementTooltip()).addClass('tb-active'); } } } @@ -490,12 +621,16 @@ class IotSvgElement { if (this.highlighted) { this.highlighted = false; if (this.isGroup()) { + this.highlightRectTimeline.finish(); this.highlightRect.animate(300).attr({opacity: 0}).after(() => { this.highlightRect.hide(); }); } else { this.element.removeClass('hovered'); } + if (this.hasTag()) { + $(this.tooltip.elementTooltip()).removeClass('tb-active'); + } } } @@ -503,6 +638,7 @@ class IotSvgElement { this.tooltip.destroy(); this.tag = null; this.element.attr('tb:tag', null); + this.unhighlight(); this.createAddTagTooltip(); } @@ -513,8 +649,31 @@ class IotSvgElement { this.createTagTooltip(); } + public updateTooltipPosition(container: DOMRect) { + if (this.tooltip && !this.tooltip.status().destroyed) { + this.tooltip.reposition(); + const tooltipElement = this.tooltip.elementTooltip(); + if (tooltipElement) { + if (isDomRectContained(tooltipElement.getBoundingClientRect(), container, + elementTooltipMinWidth, elementTooltipMinHeight)) { + tooltipElement.style.visibility = null; + } else { + tooltipElement.style.visibility = 'hidden'; + } + } + } + } + + public setInnerTooltipOffset(offset: number, center: number) { + this.innerTooltipOffset = offset + (center - this.box.cy) * this.editObject.scale; + } + private unscaled(size: number): number { - return size / this.editObject.scale; + return size / (this.editObject.scale * this.editObject.svgShape.zoom()); + } + + private scaled(size: number): number { + return size * (this.editObject.scale * this.editObject.svgShape.zoom()); } private createTagTooltip() { @@ -522,17 +681,26 @@ class IotSvgElement { el.tooltipster( { arrow: this.isGroup(), - distance: this.isGroup() ? 20 : 6, - theme: ['tooltipster-tb'], + distance: this.isGroup() ? (this.scaled(groupRectPadding) + groupRectStroke) : 6, + theme: ['iot-svg'], delay: 0, animationDuration: 0, interactive: true, trigger: 'custom', side: 'top', - trackOrigin: true, + trackOrigin: false, content: '', functionPosition: (instance, helper, position) => - this.innerTooltipPosition(instance, helper, position) + this.innerTagTooltipPosition(instance, helper, position), + functionReady: (instance, helper) => { + const tooltipEl = $(helper.tooltip); + tooltipEl.on('mouseenter', () => { + this.highlight(); + }); + tooltipEl.on('mouseleave', () => { + this.unhighlight(); + }); + } } ); this.tooltip = el.tooltipster('instance'); @@ -540,6 +708,8 @@ class IotSvgElement { } private setupTagPanel() { + this.isEditing = false; + this.unhighlight(); const tagPanel = $(`
${this.element.type}: @@ -547,12 +717,6 @@ class IotSvgElement { edit delete
`); - tagPanel.on('mouseenter', () => { - this.highlight(); - }); - tagPanel.on('mouseleave', () => { - this.unhighlight(); - }); const updateTagButton = tagPanel.find('.edit-icon'); textTooltip(updateTagButton, 'Update tag'); updateTagButton.on('click', () => { @@ -568,6 +732,7 @@ class IotSvgElement { } private setupEditTagPanel() { + this.isEditing = true; const editTagInputPanel = $(`
Update tag: @@ -621,17 +786,38 @@ class IotSvgElement { const el = $(this.element.node); el.tooltipster( { - arrow: this.isGroup(), - distance: this.isGroup() ? 20 : 6, - theme: ['tooltipster-tb'], - delay: 200, + arrow: true, + theme: ['iot-svg', 'tb-active'], + delay: [0, 300], interactive: true, trigger: 'hover', - side: 'top', - trackOrigin: true, + side: ['top', 'left', 'bottom', 'right'], + trackOrigin: false, content: '', + functionBefore: (instance, helper) => { + const mouseEvent = (helper.event as MouseEvent); + this.tooltipMouseX = mouseEvent.clientX; + this.tooltipMouseY = mouseEvent.clientY; + let side: TooltipPositioningSide; + if (this.isGroup()) { + side = 'top'; + } else { + side = this.calculateTooltipSide(helper.origin.getBoundingClientRect(), + mouseEvent.clientX, mouseEvent.clientY); + } + instance.option('side', side); + }, functionPosition: (instance, helper, position) => - this.innerTooltipPosition(instance, helper, position) + this.innerAddTagTooltipPosition(instance, helper, position), + functionReady: (instance, helper) => { + const tooltipEl = $(helper.tooltip); + tooltipEl.on('mouseenter', () => { + this.highlight(); + }); + tooltipEl.on('mouseleave', () => { + this.unhighlight(); + }); + } } ); this.tooltip = el.tooltipster('instance'); @@ -639,6 +825,7 @@ class IotSvgElement { } private setupAddTagPanel() { + this.isEditing = false; const addTagPanel = $(`
${this.element.type}: @@ -653,6 +840,7 @@ class IotSvgElement { } private setupAddTagInputPanel() { + this.isEditing = true; const addTagInputPanel = $(`
Enter tag: @@ -666,50 +854,141 @@ class IotSvgElement { textTooltip(applyTagButton, 'Apply'); textTooltip(closeButton, 'Cancel'); + let addPanelClosed = false; tagInput.on('keypress', (event) => { if (event.which === 13) { const newTag: string = tagInput.val() as string; if (newTag) { + addPanelClosed = true; this.setTag(newTag); } } }); applyTagButton.on('click', () => { const newTag: string = tagInput.val() as string; + addPanelClosed = true; if (newTag) { this.setTag(newTag); } else { + this.unhighlight(); this.tooltip.close(); } }); closeButton.on('click', () => { + addPanelClosed = true; + this.unhighlight(); this.tooltip.close(); }); + tagInput.on('blur', () => { + setTimeout(() => { + if (!addPanelClosed) { + addPanelClosed = true; + this.tooltip.close(); + } + }); + }); this.tooltip.content(addTagInputPanel); + this.tooltip.option('delay', [0, 10000000]); this.tooltip.on('closing', () => { + this.tooltip.option('delay', [0, 300]); this.setupAddTagPanel(); }); tagInput.trigger('focus'); } - private innerTooltipPosition(instance: ITooltipsterInstance, helper: ITooltipsterHelper, position: ITooltipPosition): ITooltipPosition { + private innerTagTooltipPosition(instance: ITooltipsterInstance, helper: ITooltipsterHelper, + position: ITooltipPosition): ITooltipPosition { + const clientRect = helper.origin.getBoundingClientRect(); if (!this.isGroup()) { - const clientRect = helper.origin.getBoundingClientRect(); position.coord.top = clientRect.top + (clientRect.height - position.size.height) / 2 - + this.innerTooltipOffset; + + this.innerTooltipOffset * this.editObject.svgShape.zoom(); position.coord.left = clientRect.left + (clientRect.width - position.size.width) / 2; + } else { + position.distance = this.scaled(groupRectPadding) + groupRectStroke; + position.coord.top = clientRect.top - position.size.height - (this.scaled(groupRectPadding) + groupRectStroke); + } + return position; + } + + private innerAddTagTooltipPosition(instance: ITooltipsterInstance, + helper: ITooltipsterHelper, position: ITooltipPosition): ITooltipPosition { + const distance = 10; + switch (position.side) { + case 'right': + position.coord.top = this.tooltipMouseY - position.size.height / 2; + position.coord.left = this.tooltipMouseX + distance; + position.target = this.tooltipMouseY; + break; + case 'top': + position.coord.top = this.tooltipMouseY - position.size.height - distance; + position.coord.left = this.tooltipMouseX - position.size.width / 2; + position.target = this.tooltipMouseX; + if (this.isGroup()) { + position.coord.top -= elementTooltipMinHeight; + } + break; + case 'left': + position.coord.top = this.tooltipMouseY - position.size.height / 2; + position.coord.left = this.tooltipMouseX - position.size.width - distance; + position.target = this.tooltipMouseY; + break; + case 'bottom': + position.coord.top = this.tooltipMouseY + distance; + position.coord.left = this.tooltipMouseX - position.size.width / 2; + position.target = this.tooltipMouseX; + break; } return position; } + private calculateTooltipSide(clientRect: DOMRect, mouseX: number, mouseY: number): TooltipPositioningSide { + let side: TooltipPositioningSide; + const cx = clientRect.left + clientRect.width / 2; + const cy = clientRect.top + clientRect.height / 2; + if (clientRect.width > clientRect.height) { + if (Math.abs(cx - mouseX) > clientRect.width / 4) { + if (mouseX < cx) { + side = 'left'; + } else { + side = 'right'; + } + } else { + if (mouseY < cy) { + side = 'top'; + } else { + side = 'bottom'; + } + } + } else { + if (Math.abs(cy - mouseY) > clientRect.height / 4) { + if (mouseY < cy) { + side = 'top'; + } else { + side = 'bottom'; + } + } else { + if (mouseX < cx) { + side = 'left'; + } else { + side = 'right'; + } + } + } + return side; + } + private hasTag() { return !!this.tag; } - private isGroup() { + public isGroup() { return this.element.type === 'g'; } + public isText() { + return this.element.type === 'text'; + } + } export class IotSvgObject { diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html index cd366abbde..0aa5a589f3 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html @@ -27,6 +27,7 @@
{{ metadata | json }} diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss index 4d5ae09a15..0c59e74ee5 100644 --- a/ui-ngx/src/styles.scss +++ b/ui-ngx/src/styles.scss @@ -460,6 +460,149 @@ mat-icon { } } +.tooltipster-sidetip.iot-svg { + .tooltipster-box { + user-select: none; + background: rgba(0, 0, 0, 0.54); + border: 1px solid rgba(0, 0, 0, 0); + border-radius: 8px; + .tooltipster-content { + padding: 4px 8px; + font-size: 12px; + line-height: 12px; + font-weight: 500; + color: #ffffff; + } + } + &.tb-active { + .tooltipster-box { + background: #fff; + border: 1px solid rgba(0, 0, 0, 0.38); + box-shadow: 0 0 10px 6px rgba(0, 0, 0, .2); + .tooltipster-content { + color: #000; + } + } + .tooltipster-arrow { + .tooltipster-arrow-uncropped { + .tooltipster-arrow-background { + border-width: 12px; + } + } + } + &.tooltipster-top { + .tooltipster-arrow { + bottom: -1px; + .tooltipster-arrow-uncropped { + .tooltipster-arrow-border { + border-top-color: rgba(0, 0, 0, 0.38); + } + .tooltipster-arrow-background { + border-top-color: #fff; + left: -2px; + } + } + } + } + &.tooltipster-bottom { + .tooltipster-arrow { + top: -1px; + .tooltipster-arrow-uncropped { + .tooltipster-arrow-border { + border-bottom-color: rgba(0, 0, 0, 0.38); + } + .tooltipster-arrow-background { + border-bottom-color: #fff; + left: -2px; + top: -1px; + } + } + } + } + &.tooltipster-left { + .tooltipster-arrow { + right: -1px; + .tooltipster-arrow-uncropped { + .tooltipster-arrow-border { + border-left-color: rgba(0, 0, 0, 0.38); + } + .tooltipster-arrow-background { + border-left-color: #fff; + top: -2px; + } + } + } + } + &.tooltipster-right { + .tooltipster-arrow { + left: -1px; + .tooltipster-arrow-uncropped { + .tooltipster-arrow-border { + border-right-color: rgba(0, 0, 0, 0.38); + } + .tooltipster-arrow-background { + border-right-color: #fff; + top: -2px; + left: -1px; + } + } + } + } + } + &.tooltipster-top { + .tooltipster-arrow { + bottom: -2px; + .tooltipster-arrow-uncropped { + .tooltipster-arrow-border { + border-top-color: rgba(0, 0, 0, 0.54); + } + .tooltipster-arrow-background { + border-top-color: transparent; + } + } + } + } + &.tooltipster-bottom { + .tooltipster-arrow { + top: -2px; + .tooltipster-arrow-uncropped { + .tooltipster-arrow-border { + border-bottom-color: rgba(0, 0, 0, 0.54); + } + .tooltipster-arrow-background { + border-bottom-color: transparent; + } + } + } + } + &.tooltipster-left { + .tooltipster-arrow { + right: -2px; + .tooltipster-arrow-uncropped { + .tooltipster-arrow-border { + border-left-color: rgba(0, 0, 0, 0.54); + } + .tooltipster-arrow-background { + border-left-color: transparent; + } + } + } + } + &.tooltipster-right { + .tooltipster-arrow { + left: -2px; + .tooltipster-arrow-uncropped { + .tooltipster-arrow-border { + border-right-color: rgba(0, 0, 0, 0.54); + } + .tooltipster-arrow-background { + border-right-color: transparent; + } + } + } + } +} + .tb-default, .tb-dark { /********************************* diff --git a/ui-ngx/yarn.lock b/ui-ngx/yarn.lock index 68e9ea2523..0f46efe018 100644 --- a/ui-ngx/yarn.lock +++ b/ui-ngx/yarn.lock @@ -2695,11 +2695,18 @@ dependencies: "@svgdotjs/svg.js" "^3.1.1" -"@svgdotjs/svg.js@^3.1.1", "@svgdotjs/svg.js@^3.2.0": +"@svgdotjs/svg.js@^3.0.16", "@svgdotjs/svg.js@^3.1.1", "@svgdotjs/svg.js@^3.2.0": version "3.2.0" resolved "https://registry.yarnpkg.com/@svgdotjs/svg.js/-/svg.js-3.2.0.tgz#6baa8cef6778a93818ac18faa2055222e60aa644" integrity sha512-Tr8p+QVP7y+QT1GBlq1Tt57IvedVH8zCPoYxdHLX0Oof3a/PqnC/tXAkVufv1JQJfsDHlH/UrjcDfgxSofqSNA== +"@svgdotjs/svg.panzoom.js@^2.1.2": + version "2.1.2" + resolved "https://registry.yarnpkg.com/@svgdotjs/svg.panzoom.js/-/svg.panzoom.js-2.1.2.tgz#50e66a861f7c4f9e3992707f8e62e6e8da5c5223" + integrity sha512-0Nzo2TRlTebW3pzfAPtHx8Ye7Y3kuMEkK7hwVJi0SgQUB/vstjg7fvCJxB++EqsuDEetP0/SC+4CpLMVm6Lh2g== + dependencies: + "@svgdotjs/svg.js" "^3.0.16" + "@tinymce/tinymce-angular@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/@tinymce/tinymce-angular/-/tinymce-angular-7.0.0.tgz#010de497d5774a8bdc5d5936bf4fb976adf05f56" From 97adcde9d18667e9f9ec3eb40a47bd8c2f85253b Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Fri, 17 May 2024 19:31:35 +0300 Subject: [PATCH 034/442] UI: Edit SCADA symbol UI refactoring. --- .../widget/lib/svg/iot-svg.models.ts | 724 +--------------- .../scada-symbol-editor.component.html | 18 + .../scada-symbol-editor.component.scss | 22 + .../scada-symbol-editor.component.ts | 83 ++ .../scada-symbol-tooltip.component.scss | 52 ++ .../scada-symbol-tooltip.components.ts | 295 +++++++ .../scada-symbol/scada-symbol.component.html | 2 +- .../scada-symbol/scada-symbol.component.scss | 7 - .../scada-symbol/scada-symbol.component.ts | 29 +- .../pages/scada-symbol/scada-symbol.models.ts | 799 ++++++++++++++++++ .../pages/scada-symbol/scada-symbol.module.ts | 6 +- ui-ngx/src/styles.scss | 9 +- 12 files changed, 1287 insertions(+), 759 deletions(-) create mode 100644 ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.html create mode 100644 ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.scss create mode 100644 ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts create mode 100644 ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.component.scss create mode 100644 ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts index e128a26675..db649d8ad1 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts @@ -15,8 +15,7 @@ /// import { ValueType } from '@shared/models/constants'; -import * as svgjs from '@svgdotjs/svg.js'; -import { Box, Element, Rect, Runner, SVG, Svg, Text, Timeline, Style } from '@svgdotjs/svg.js'; +import { Box, Element, Runner, SVG, Svg, Text } from '@svgdotjs/svg.js'; import '@svgdotjs/svg.panzoom.js'; import { DataToValueType, @@ -34,7 +33,7 @@ import { mergeDeep, parseFunction } from '@core/utils'; -import { BehaviorSubject, forkJoin, from, Observable, Observer } from 'rxjs'; +import { BehaviorSubject, forkJoin, Observable, Observer } from 'rxjs'; import { map, share } from 'rxjs/operators'; import { ValueAction, ValueGetter, ValueSetter } from '@home/components/widget/lib/action/action-widget.models'; import { WidgetContext } from '@home/models/widget-component.models'; @@ -42,11 +41,6 @@ import { ColorProcessor, constantColor, Font } from '@shared/models/widget-setti import { AttributeScope } from '@shared/models/telemetry/telemetry.models'; import { UtilsService } from '@core/services/utils.service'; import { WidgetAction, WidgetActionType } from '@shared/models/widget.models'; -import { ResizeObserver } from '@juggle/resize-observer'; -import ITooltipsterInstance = JQueryTooltipster.ITooltipsterInstance; -import ITooltipPosition = JQueryTooltipster.ITooltipPosition; -import ITooltipsterHelper = JQueryTooltipster.ITooltipsterHelper; -import TooltipPositioningSide = JQueryTooltipster.TooltipPositioningSide; export interface IotSvgApi { formatValue: (value: any, dec?: number, units?: string, showZeroDecimals?: boolean) => string | undefined; @@ -277,720 +271,6 @@ export type IotSvgObjectSettings = {[id: string]: any}; const parseError = (ctx: WidgetContext, err: any): string => ctx.$injector.get(UtilsService).parseException(err).message || 'Unknown Error'; -export class IotSvgEditObject { - - public svgShape: Svg; - private box: Box; - private elements: IotSvgElement[] = []; - private readonly shapeResize$: ResizeObserver; - private performSetup = false; - private hoverFilterStyle: Style; - public scale = 1; - constructor(private rootElement: HTMLElement) { - this.shapeResize$ = new ResizeObserver(() => { - this.resize(); - }); - } - - public setContent(svgContent: string) { - this.shapeResize$.unobserve(this.rootElement); - if (this.svgShape) { - this.elements.length = 0; - this.svgShape.remove(); - } - const doc: XMLDocument = new DOMParser().parseFromString(svgContent, 'image/svg+xml'); - this.svgShape = SVG().addTo(this.rootElement).svg(doc.documentElement.innerHTML); - this.svgShape.node.style.overflow = 'visible'; - this.svgShape.node.style['user-select'] = 'none'; - this.box = this.svgShape.bbox(); - this.svgShape.size(this.box.width, this.box.height); - this.svgShape.viewbox(`0 0 ${this.box.width} ${this.box.height}`); - this.svgShape.style().rule('.tb-element', {cursor: 'pointer', transition: '0.2s filter ease-in-out'}); - this.updateHoverFilterStyle(); - this.performSetup = true; - this.shapeResize$.observe(this.rootElement); - } - - private doSetup() { - this.setupZoomPan(0); - (window as any).SVG = svgjs; - forkJoin([ - from(import('tooltipster')), - from(import('tooltipster/dist/js/plugins/tooltipster/SVG/tooltipster-SVG.min.js')) - ]).subscribe(() => { - this.setupElements(); - }); - } - - private setupZoomPan(margin: number) { - this.svgShape.on('zoom', (e) => { - const { - detail: { level, focus } - } = e as any; - this.svgShape.zoom(level, focus); - const box = this.restrictToMargins(this.svgShape.viewbox(), margin); - this.svgShape.viewbox(box); - setTimeout(() => { - this.updateTooltipPositions(); - }); - e.preventDefault(); - }); - this.svgShape.on('panning', (e) => { - const box = (e as any).detail.box; - this.svgShape.viewbox(this.restrictToMargins(box, margin)); - setTimeout(() => { - this.updateTooltipPositions(); - }); - e.preventDefault(); - }); - this.svgShape.on('panStart', (e) => { - this.svgShape.node.style.cursor = 'grab'; - }); - this.svgShape.on('panEnd', (e) => { - this.svgShape.node.style.cursor = 'default'; - }); - } - - private restrictToMargins(box: Box, margin: number): Box { - if (box.x < -margin) { - box.x = -margin; - } else if ((box.x + box.width) > (this.box.width + margin)) { - box.x = this.box.width + margin - box.width; - } - if (box.y < -margin) { - box.y = -margin; - } else if ((box.y + box.height) > (this.box.height + margin)) { - box.y = this.box.height + margin - box.height; - } - return box; - } - - private setupElements() { - this.svgShape.children().forEach(child => { - this.addElement(child); - }); - const overlappingGroups: IotSvgElement[][] = []; - for (const el of this.elements) { - for (const other of this.elements) { - if (el !== other && el.overlappingCenters(other)) { - let overlappingGroup: IotSvgElement[]; - for (const list of overlappingGroups) { - if (list.includes(other) || list.includes(el)) { - overlappingGroup = list; - break; - } - } - if (!overlappingGroup) { - overlappingGroup = [el, other]; - overlappingGroups.push(overlappingGroup); - } else { - if (!overlappingGroup.includes(el)) { - overlappingGroup.push(el); - } else if (!overlappingGroup.includes(other)){ - overlappingGroup.push(other); - } - } - } - } - } - for (const group of overlappingGroups) { - const centers = group.map(e => e.box.cy); - const center = centers.reduce((a, b) => a + b, 0) / centers.length; - const textElement = group.find(e => e.isText()); - const slots = textElement ? group.length % 2 === 0 ? (group.length + 1) : group.length : group.length; - if (textElement) { - textElement.setInnerTooltipOffset(0, center); - group.splice(group.indexOf(textElement), 1); - } - let offset = - (elementTooltipMinHeight * slots) / 2 + elementTooltipMinHeight / 2; - for (const element of group) { - if (textElement && offset === 0) { - offset += elementTooltipMinHeight; - } - element.setInnerTooltipOffset(offset, center); - offset += elementTooltipMinHeight; - } - } - for (const el of this.elements) { - el.init(); - } - } - - private addElement(e: Element) { - if (hasBBox(e)) { - const iotSvgElement = new IotSvgElement(this, e); - this.elements.push(iotSvgElement); - e.children().forEach(child => { - if (!(child.type === 'tspan' && e.type === 'text')) { - this.addElement(child); - } - }, true); - } - } - - public destroy() { - if (this.shapeResize$) { - this.shapeResize$.disconnect(); - } - } - - private resize() { - if (this.svgShape) { - const targetWidth = this.rootElement.getBoundingClientRect().width; - const targetHeight = this.rootElement.getBoundingClientRect().height; - let scale: number; - if (targetWidth < targetHeight) { - scale = targetWidth / this.box.width; - } else { - scale = targetHeight / this.box.height; - } - if (this.scale !== scale) { - this.scale = scale; - this.svgShape.node.style.transform = `scale(${this.scale})`; - this.updateHoverFilterStyle(); - this.updateZoomOptions(); - this.updateTooltipPositions(); - } - if (this.performSetup) { - this.performSetup = false; - this.doSetup(); - } - } - } - - private updateHoverFilterStyle() { - if (this.hoverFilterStyle) { - this.hoverFilterStyle.remove(); - } - const whiteBlur = (2.8 / this.scale).toFixed(2); - const blackBlur = (1.2 / this.scale).toFixed(2); - this.hoverFilterStyle = - this.svgShape.style().rule('.hovered', - { - filter: - `drop-shadow(0px 0px ${whiteBlur}px white) drop-shadow(0px 0px ${whiteBlur}px white) - drop-shadow(0px 0px ${whiteBlur}px white) drop-shadow(0px 0px ${whiteBlur}px white) - drop-shadow(0px 0px ${blackBlur}px black)` - } - ); - } - - private updateZoomOptions() { - this.svgShape.panZoom({ - zoomMin: 1, - zoomMax: 4, - zoomFactor: 2 / this.scale - }); - } - - private updateTooltipPositions() { - const container = this.rootElement.getBoundingClientRect(); - for (const e of this.elements) { - e.updateTooltipPosition(container); - } - } - -} - -const hasBBox = (e: Element): boolean => { - try { - if (e.bbox) { - const box = e.bbox(); - return !!box.width || !!box.height; - } else { - return false; - } - } catch (_e) { - return false; - } -}; - -const textTooltip = (el: JQuery, text: string) => { - el.tooltipster({ - theme: ['iot-svg'], - trigger: 'hover', - content: text - }); -}; - -const isDomRectContained = (target: DOMRect, container: DOMRect, horizontalGap = 0, verticalGap = 0): boolean => ( - target.left >= container.left - horizontalGap && - target.left + target.width <= container.left + container.width + horizontalGap && - target.top >= container.top - verticalGap && - target.top + target.height <= container.top + container.height + verticalGap -); - -const elementTooltipMinHeight = 36 + 8; -const elementTooltipMinWidth = 100; - -const groupRectStroke = 2; -const groupRectPadding = 2; - -class IotSvgElement { - - private highlightRect: Rect; - private highlightRectTimeline: Timeline; - - private tooltip: ITooltipsterInstance; - - private tag: string; - - private isEditing = false; - - private innerTooltipOffset = 0; - - public readonly box: Box; - - private highlighted = false; - - private tooltipMouseX: number; - private tooltipMouseY: number; - - constructor(private editObject: IotSvgEditObject, - private element: Element) { - this.tag = element.attr('tb:tag'); - this.box = element.rbox(this.editObject.svgShape); - } - - public init() { - if (this.isGroup()) { - this.highlightRect = - this.editObject.svgShape - .rect(this.box.width + groupRectPadding * 2, this.box.height + groupRectPadding * 2) - .x(this.box.x - groupRectPadding) - .y(this.box.y - groupRectPadding) - .attr({ - fill: 'none', - rx: this.unscaled(6), - stroke: 'rgba(0, 0, 0, 0.38)', - 'stroke-dasharray': '1', - 'stroke-width': this.unscaled(groupRectStroke), - opacity: 0}); - this.highlightRectTimeline = new Timeline(); - this.highlightRect.timeline(this.highlightRectTimeline); - this.highlightRect.hide(); - } else { - this.element.addClass('tb-element'); - } - this.element.on('mouseenter', (event) => { - this.highlight(); - }); - this.element.on('mouseleave', (event) => { - this.unhighlight(); - }); - if (this.hasTag()) { - this.createTagTooltip(); - } else { - this.createAddTagTooltip(); - } - } - - public overlappingCenters(otherElement: IotSvgElement): boolean { - if (this.isGroup() || otherElement.isGroup()) { - return false; - } - return Math.abs(this.box.cx - otherElement.box.cx) * this.editObject.scale < elementTooltipMinWidth && - Math.abs(this.box.cy - otherElement.box.cy) * this.editObject.scale < elementTooltipMinHeight; - } - - public highlight() { - if (!this.highlighted) { - this.highlighted = true; - if (this.isGroup()) { - this.highlightRectTimeline.finish(); - this.highlightRect - .attr({ - rx: this.unscaled(6), - 'stroke-width': this.unscaled(groupRectStroke) - }); - this.highlightRect.show(); - this.highlightRect.animate(300).attr({opacity: 1}); - } else { - this.element.addClass('hovered'); - } - if (this.hasTag()) { - if (!this.isEditing) { - this.tooltip.reposition(); - } - $(this.tooltip.elementTooltip()).addClass('tb-active'); - } - } - } - - public unhighlight() { - if (this.highlighted) { - this.highlighted = false; - if (this.isGroup()) { - this.highlightRectTimeline.finish(); - this.highlightRect.animate(300).attr({opacity: 0}).after(() => { - this.highlightRect.hide(); - }); - } else { - this.element.removeClass('hovered'); - } - if (this.hasTag()) { - $(this.tooltip.elementTooltip()).removeClass('tb-active'); - } - } - } - - public clearTag() { - this.tooltip.destroy(); - this.tag = null; - this.element.attr('tb:tag', null); - this.unhighlight(); - this.createAddTagTooltip(); - } - - public setTag(tag: string) { - this.tooltip.destroy(); - this.tag = tag; - this.element.attr('tb:tag', tag); - this.createTagTooltip(); - } - - public updateTooltipPosition(container: DOMRect) { - if (this.tooltip && !this.tooltip.status().destroyed) { - this.tooltip.reposition(); - const tooltipElement = this.tooltip.elementTooltip(); - if (tooltipElement) { - if (isDomRectContained(tooltipElement.getBoundingClientRect(), container, - elementTooltipMinWidth, elementTooltipMinHeight)) { - tooltipElement.style.visibility = null; - } else { - tooltipElement.style.visibility = 'hidden'; - } - } - } - } - - public setInnerTooltipOffset(offset: number, center: number) { - this.innerTooltipOffset = offset + (center - this.box.cy) * this.editObject.scale; - } - - private unscaled(size: number): number { - return size / (this.editObject.scale * this.editObject.svgShape.zoom()); - } - - private scaled(size: number): number { - return size * (this.editObject.scale * this.editObject.svgShape.zoom()); - } - - private createTagTooltip() { - const el = $(this.element.node); - el.tooltipster( - { - arrow: this.isGroup(), - distance: this.isGroup() ? (this.scaled(groupRectPadding) + groupRectStroke) : 6, - theme: ['iot-svg'], - delay: 0, - animationDuration: 0, - interactive: true, - trigger: 'custom', - side: 'top', - trackOrigin: false, - content: '', - functionPosition: (instance, helper, position) => - this.innerTagTooltipPosition(instance, helper, position), - functionReady: (instance, helper) => { - const tooltipEl = $(helper.tooltip); - tooltipEl.on('mouseenter', () => { - this.highlight(); - }); - tooltipEl.on('mouseleave', () => { - this.unhighlight(); - }); - } - } - ); - this.tooltip = el.tooltipster('instance'); - this.setupTagPanel(); - } - - private setupTagPanel() { - this.isEditing = false; - this.unhighlight(); - const tagPanel = - $(`
- ${this.element.type}: - ${this.tag} - edit - delete -
`); - const updateTagButton = tagPanel.find('.edit-icon'); - textTooltip(updateTagButton, 'Update tag'); - updateTagButton.on('click', () => { - this.setupEditTagPanel(); - }); - const deleteButton = tagPanel.find('.delete-icon'); - textTooltip(deleteButton, 'Remove tag'); - deleteButton.on('click', () => { - this.clearTag(); - }); - this.tooltip.content(tagPanel); - this.tooltip.open(); - } - - private setupEditTagPanel() { - this.isEditing = true; - const editTagInputPanel = - $(`
- Update tag: - - done - close -
`); - const tagInput = editTagInputPanel.find('input.tag-input'); - const applyTagButton = editTagInputPanel.find('span.apply-icon'); - const closeButton = editTagInputPanel.find('span.close-icon'); - textTooltip(applyTagButton, 'Apply'); - textTooltip(closeButton, 'Cancel'); - tagInput.val(this.tag); - let editPanelClosed = false; - - tagInput.on('keypress', (event) => { - if (event.which === 13) { - const newTag: string = tagInput.val() as string; - if (newTag) { - editPanelClosed = true; - this.setTag(newTag); - } - } - }); - applyTagButton.on('click', () => { - const newTag: string = tagInput.val() as string; - editPanelClosed = true; - if (newTag) { - this.setTag(newTag); - } else { - this.setupTagPanel(); - } - }); - closeButton.on('click', () => { - editPanelClosed = true; - this.setupTagPanel(); - }); - tagInput.on('blur', () => { - setTimeout(() => { - if (!editPanelClosed) { - editPanelClosed = true; - this.setupTagPanel(); - } - }); - }); - this.tooltip.content(editTagInputPanel); - tagInput.trigger('focus'); - } - - private createAddTagTooltip() { - const el = $(this.element.node); - el.tooltipster( - { - arrow: true, - theme: ['iot-svg', 'tb-active'], - delay: [0, 300], - interactive: true, - trigger: 'hover', - side: ['top', 'left', 'bottom', 'right'], - trackOrigin: false, - content: '', - functionBefore: (instance, helper) => { - const mouseEvent = (helper.event as MouseEvent); - this.tooltipMouseX = mouseEvent.clientX; - this.tooltipMouseY = mouseEvent.clientY; - let side: TooltipPositioningSide; - if (this.isGroup()) { - side = 'top'; - } else { - side = this.calculateTooltipSide(helper.origin.getBoundingClientRect(), - mouseEvent.clientX, mouseEvent.clientY); - } - instance.option('side', side); - }, - functionPosition: (instance, helper, position) => - this.innerAddTagTooltipPosition(instance, helper, position), - functionReady: (instance, helper) => { - const tooltipEl = $(helper.tooltip); - tooltipEl.on('mouseenter', () => { - this.highlight(); - }); - tooltipEl.on('mouseleave', () => { - this.unhighlight(); - }); - } - } - ); - this.tooltip = el.tooltipster('instance'); - this.setupAddTagPanel(); - } - - private setupAddTagPanel() { - this.isEditing = false; - const addTagPanel = - $(`
- ${this.element.type}: - -
`); - const addTagButton = addTagPanel.find('.add-tag-button'); - addTagButton.on('click', () => { - this.setupAddTagInputPanel(); - }); - this.tooltip.content(addTagPanel); - this.tooltip.off('closing'); - } - - private setupAddTagInputPanel() { - this.isEditing = true; - const addTagInputPanel = - $(`
- Enter tag: - - done - close -
`); - const tagInput = addTagInputPanel.find('input.tag-input'); - const applyTagButton = addTagInputPanel.find('span.apply-icon'); - const closeButton = addTagInputPanel.find('span.close-icon'); - textTooltip(applyTagButton, 'Apply'); - textTooltip(closeButton, 'Cancel'); - - let addPanelClosed = false; - tagInput.on('keypress', (event) => { - if (event.which === 13) { - const newTag: string = tagInput.val() as string; - if (newTag) { - addPanelClosed = true; - this.setTag(newTag); - } - } - }); - applyTagButton.on('click', () => { - const newTag: string = tagInput.val() as string; - addPanelClosed = true; - if (newTag) { - this.setTag(newTag); - } else { - this.unhighlight(); - this.tooltip.close(); - } - }); - closeButton.on('click', () => { - addPanelClosed = true; - this.unhighlight(); - this.tooltip.close(); - }); - tagInput.on('blur', () => { - setTimeout(() => { - if (!addPanelClosed) { - addPanelClosed = true; - this.tooltip.close(); - } - }); - }); - this.tooltip.content(addTagInputPanel); - this.tooltip.option('delay', [0, 10000000]); - this.tooltip.on('closing', () => { - this.tooltip.option('delay', [0, 300]); - this.setupAddTagPanel(); - }); - tagInput.trigger('focus'); - } - - private innerTagTooltipPosition(instance: ITooltipsterInstance, helper: ITooltipsterHelper, - position: ITooltipPosition): ITooltipPosition { - const clientRect = helper.origin.getBoundingClientRect(); - if (!this.isGroup()) { - position.coord.top = clientRect.top + (clientRect.height - position.size.height) / 2 - + this.innerTooltipOffset * this.editObject.svgShape.zoom(); - position.coord.left = clientRect.left + (clientRect.width - position.size.width) / 2; - } else { - position.distance = this.scaled(groupRectPadding) + groupRectStroke; - position.coord.top = clientRect.top - position.size.height - (this.scaled(groupRectPadding) + groupRectStroke); - } - return position; - } - - private innerAddTagTooltipPosition(instance: ITooltipsterInstance, - helper: ITooltipsterHelper, position: ITooltipPosition): ITooltipPosition { - const distance = 10; - switch (position.side) { - case 'right': - position.coord.top = this.tooltipMouseY - position.size.height / 2; - position.coord.left = this.tooltipMouseX + distance; - position.target = this.tooltipMouseY; - break; - case 'top': - position.coord.top = this.tooltipMouseY - position.size.height - distance; - position.coord.left = this.tooltipMouseX - position.size.width / 2; - position.target = this.tooltipMouseX; - if (this.isGroup()) { - position.coord.top -= elementTooltipMinHeight; - } - break; - case 'left': - position.coord.top = this.tooltipMouseY - position.size.height / 2; - position.coord.left = this.tooltipMouseX - position.size.width - distance; - position.target = this.tooltipMouseY; - break; - case 'bottom': - position.coord.top = this.tooltipMouseY + distance; - position.coord.left = this.tooltipMouseX - position.size.width / 2; - position.target = this.tooltipMouseX; - break; - } - return position; - } - - private calculateTooltipSide(clientRect: DOMRect, mouseX: number, mouseY: number): TooltipPositioningSide { - let side: TooltipPositioningSide; - const cx = clientRect.left + clientRect.width / 2; - const cy = clientRect.top + clientRect.height / 2; - if (clientRect.width > clientRect.height) { - if (Math.abs(cx - mouseX) > clientRect.width / 4) { - if (mouseX < cx) { - side = 'left'; - } else { - side = 'right'; - } - } else { - if (mouseY < cy) { - side = 'top'; - } else { - side = 'bottom'; - } - } - } else { - if (Math.abs(cy - mouseY) > clientRect.height / 4) { - if (mouseY < cy) { - side = 'top'; - } else { - side = 'bottom'; - } - } else { - if (mouseX < cx) { - side = 'left'; - } else { - side = 'right'; - } - } - } - return side; - } - - private hasTag() { - return !!this.tag; - } - - public isGroup() { - return this.element.type === 'g'; - } - - public isText() { - return this.element.type === 'text'; - } - -} - export class IotSvgObject { private metadata: IotSvgMetadata; diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.html new file mode 100644 index 0000000000..96e1018eec --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.html @@ -0,0 +1,18 @@ + +
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.scss b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.scss new file mode 100644 index 0000000000..7bad327b9a --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.scss @@ -0,0 +1,22 @@ +/** + * Copyright ยฉ 2016-2024 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. + */ +.tb-scada-symbol-shape { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts new file mode 100644 index 0000000000..6f73ae7ac4 --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts @@ -0,0 +1,83 @@ +/// +/// Copyright ยฉ 2016-2024 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 { + AfterViewInit, + Component, + ElementRef, + Input, + OnChanges, + OnDestroy, + OnInit, + SimpleChanges, + ViewChild, + ViewContainerRef, + ViewEncapsulation +} from '@angular/core'; +import { Subject } from 'rxjs'; +import { ScadaSymbolEditObject } from '@home/pages/scada-symbol/scada-symbol.models'; + +@Component({ + selector: 'tb-scada-symbol-editor', + templateUrl: './scada-symbol-editor.component.html', + styleUrls: ['./scada-symbol-editor.component.scss'], + encapsulation: ViewEncapsulation.None +}) +export class ScadaSymbolEditorComponent implements OnInit, OnDestroy, AfterViewInit, OnChanges { + + @ViewChild('iotSvgShape', {static: false}) + iotSvgShape: ElementRef; + + @Input() + svgContent: string; + + scadaSymbolEditObject: ScadaSymbolEditObject; + + private destroy$ = new Subject(); + + constructor(private viewContainerRef: ViewContainerRef) { + } + + ngOnInit(): void { + } + + ngAfterViewInit() { + this.scadaSymbolEditObject = new ScadaSymbolEditObject(this.iotSvgShape.nativeElement, + this.viewContainerRef); + if (this.svgContent) { + this.scadaSymbolEditObject.setContent(this.svgContent); + } + } + + ngOnChanges(changes: SimpleChanges): void { + for (const propName of Object.keys(changes)) { + const change = changes[propName]; + if (!change.firstChange && change.currentValue !== change.previousValue) { + if (propName === 'svgContent') { + if (this.scadaSymbolEditObject) { + this.scadaSymbolEditObject.setContent(this.svgContent); + } + } + } + } + } + + ngOnDestroy() { + this.scadaSymbolEditObject.destroy(); + } + +} + diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.component.scss b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.component.scss new file mode 100644 index 0000000000..c7fc243dc0 --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.component.scss @@ -0,0 +1,52 @@ +/** + * Copyright ยฉ 2016-2024 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. + */ +.tb-scada-symbol-tooltip-panel { + display: flex; + flex-direction: row; + align-items: center; + gap: 8px; + + .mdc-button { + line-height: 20px; + font-size: 12px; + &.mat-mdc-button-base { + height: 20px; + .mat-mdc-button-touch-target { + height: 20px; + } + } + } + + .mat-mdc-form-field.tb-inline-field { + font-size: 12px; + line-height: 12px; + .mat-mdc-text-field-wrapper { + padding: 0 8px; + .mat-mdc-form-field-flex { + .mat-mdc-form-field-infix { + padding-top: 4px; + padding-bottom: 4px; + min-height: 20px; + .mat-mdc-input-element { + font-size: 12px; + line-height: 12px; + height: 12px; + } + } + } + } + } +} diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts new file mode 100644 index 0000000000..cf38552f7a --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts @@ -0,0 +1,295 @@ +/// +/// Copyright ยฉ 2016-2024 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 { + AfterViewInit, + Component, + ComponentRef, + Directive, + ElementRef, + EventEmitter, + Input, + NgModule, + Output, + Type, + ViewChild, + ViewContainerRef, + ViewEncapsulation +} from '@angular/core'; +import { ScadaSymbolElement } from '@home/pages/scada-symbol/scada-symbol.models'; +import { CommonModule } from '@angular/common'; +import { SharedModule } from '@shared/shared.module'; +import { ENTER } from '@angular/cdk/keycodes'; + +@Directive() +abstract class ScadaSymbolPanelComponent implements AfterViewInit { + + @Input() + symbolElement: ScadaSymbolElement; + + @Output() + viewInited = new EventEmitter(); + + protected constructor(public element: ElementRef) { + } + + ngAfterViewInit() { + this.viewInited.emit(); + } +} + +@Component({ + template: `
+ {{ symbolElement?.element?.type }}: + +
`, + styleUrls: ['./scada-symbol-tooltip.component.scss'], + encapsulation: ViewEncapsulation.None +}) +class ScadaSymbolAddTagPanelComponent extends ScadaSymbolPanelComponent { + + @Output() + addTag = new EventEmitter(); + + constructor(public element: ElementRef) { + super(element); + } + + public onAddTag() { + this.addTag.emit(); + } + +} + +@Component({ + template: `
+ {{ isAdd ? 'Enter tag:' : 'Update tag:' }} + + + + + +
`, + styleUrls: ['./scada-symbol-tooltip.component.scss'], + encapsulation: ViewEncapsulation.None +}) +class ScadaSymbolTagInputPanelComponent extends ScadaSymbolPanelComponent implements AfterViewInit { + + @ViewChild('tagField') + tagField: ElementRef; + + @Input() + isAdd: boolean; + + @Input() + tag: string; + + @Output() + apply = new EventEmitter(); + + @Output() + cancel = new EventEmitter(); + + private closed = false; + + constructor(public element: ElementRef) { + super(element); + } + + ngAfterViewInit() { + super.ngAfterViewInit(); + setTimeout(() => { + this.tagField.nativeElement.focus(); + }); + } + + public tagEnter($event: KeyboardEvent) { + if ($event.keyCode === ENTER) { + $event.preventDefault(); + if (this.tag) { + this.closed = true; + this.apply.emit(this.tag); + } + } + } + + public onApply() { + this.closed = true; + if (this.tag) { + this.apply.emit(this.tag); + } else { + this.cancel.emit(); + } + } + + public onCancel() { + this.closed = true; + this.cancel.emit(); + } + + public onBlur() { + setTimeout(() => { + if (!this.closed) { + this.closed = true; + this.cancel.emit(); + } + }, 300); + } + +} + +@Component({ + template: `
+ {{ symbolElement?.element?.type }}: + {{ symbolElement?.tag }} + + +
`, + styleUrls: ['./scada-symbol-tooltip.component.scss'], + encapsulation: ViewEncapsulation.None +}) +class ScadaSymbolTagPanelComponent extends ScadaSymbolPanelComponent implements AfterViewInit { + + @Output() + updateTag = new EventEmitter(); + + @Output() + removeTag = new EventEmitter(); + + constructor(public element: ElementRef) { + super(element); + } + + public onUpdateTag() { + this.updateTag.emit(); + } + + public onRemoveTag() { + this.removeTag.emit(); + } +} + +@NgModule({ + declarations: + [ + ScadaSymbolAddTagPanelComponent, + ScadaSymbolTagInputPanelComponent, + ScadaSymbolTagPanelComponent + ], + imports: [ + CommonModule, + SharedModule + ] +}) +export class ScadaSymbolTooltipComponentsModule { } + +export const setupAddTagPanelTooltip = (symbolElement: ScadaSymbolElement, container: ViewContainerRef) => { + symbolElement.setEditing(false); + symbolElement.tooltip.off('close'); + const componentRef = setTooltipComponent(symbolElement, container, ScadaSymbolAddTagPanelComponent); + componentRef.instance.addTag.subscribe(() => { + componentRef.destroy(); + setupTagInputPanelTooltip(symbolElement, container, true); + }); +}; + +export const setupTagPanelTooltip = (symbolElement: ScadaSymbolElement, container: ViewContainerRef) => { + symbolElement.setEditing(false); + symbolElement.unhighlight(); + const componentRef = setTooltipComponent(symbolElement, container, ScadaSymbolTagPanelComponent); + componentRef.instance.updateTag.subscribe(() => { + componentRef.destroy(); + setupTagInputPanelTooltip(symbolElement, container, false); + }); + componentRef.instance.removeTag.subscribe(() => { + componentRef.destroy(); + symbolElement.clearTag(); + }); + symbolElement.tooltip.open(); +}; + +const setupTagInputPanelTooltip = (symbolElement: ScadaSymbolElement, container: ViewContainerRef, isAdd: boolean) => { + symbolElement.setEditing(true); + const componentRef = setTooltipComponent(symbolElement, container, ScadaSymbolTagInputPanelComponent); + + componentRef.instance.isAdd = isAdd; + if (!isAdd) { + componentRef.instance.tag = symbolElement.tag; + } + componentRef.instance.apply.subscribe((newTag) => { + componentRef.destroy(); + if (isAdd) { + symbolElement.tooltip.off('close'); + } + symbolElement.setTag(newTag); + }); + componentRef.instance.cancel.subscribe(() => { + if (isAdd) { + symbolElement.unhighlight(); + symbolElement.tooltip.close(); + } else { + componentRef.destroy(); + setupTagPanelTooltip(symbolElement, container); + } + }); + if (isAdd) { + symbolElement.tooltip.option('delay', [0, 10000000]); + symbolElement.tooltip.on('close', () => { + componentRef.destroy(); + symbolElement.tooltip.option('delay', [0, 300]); + setupAddTagPanelTooltip(symbolElement, container); + }); + } +}; + +const setTooltipComponent = (symbolElement: ScadaSymbolElement, + container: ViewContainerRef, componentType: Type): ComponentRef => { + const componentRef = container.createComponent(componentType); + componentRef.instance.symbolElement = symbolElement; + componentRef.instance.viewInited.subscribe(() => { + if (symbolElement.tooltip.status().open) { + symbolElement.repositionTooltip(); + } + }); + const parentElement = componentRef.instance.element.nativeElement; + const content = parentElement.firstChild; + parentElement.removeChild(content); + parentElement.style.display = 'none'; + symbolElement.tooltip.content(content); + return componentRef; +}; diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html index 0aa5a589f3..dc4e620f94 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html @@ -35,7 +35,7 @@ -
+
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.scss b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.scss index 783e2d842b..1f3208cc91 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.scss +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.scss @@ -24,12 +24,5 @@ min-width: 0; min-height: 0; background: #fff; - .tb-scada-symbol-shape { - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - } } } diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts index d75ac137e6..0d521d0a4f 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts @@ -14,16 +14,7 @@ /// limitations under the License. /// -import { - AfterViewInit, - Component, - ElementRef, - HostBinding, - OnDestroy, - OnInit, - ViewChild, - ViewEncapsulation -} from '@angular/core'; +import { AfterViewInit, Component, HostBinding, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import { PageComponent } from '@shared/components/page.component'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; @@ -31,11 +22,7 @@ import { ActivatedRoute, Router } from '@angular/router'; import { takeUntil } from 'rxjs/operators'; import { Subject } from 'rxjs'; import { ScadaSymbolData } from '@home/pages/scada-symbol/scada-symbol.models'; -import { - IotSvgEditObject, - IotSvgMetadata, - parseIotSvgMetadataFromContent -} from '@home/components/widget/lib/svg/iot-svg.models'; +import { IotSvgMetadata, parseIotSvgMetadataFromContent } from '@home/components/widget/lib/svg/iot-svg.models'; @Component({ selector: 'tb-scada-symbol', @@ -48,12 +35,7 @@ export class ScadaSymbolComponent extends PageComponent implements OnInit, OnDes @HostBinding('style.width') width = '100%'; @HostBinding('style.height') height = '100%'; - @ViewChild('iotSvgShape', {static: false}) - iotSvgShape: ElementRef; - symbolData: ScadaSymbolData; - - iotSvgObjectEdit: IotSvgEditObject; metadata: IotSvgMetadata; private destroy$ = new Subject(); @@ -76,10 +58,6 @@ export class ScadaSymbolComponent extends PageComponent implements OnInit, OnDes } ngAfterViewInit() { - this.iotSvgObjectEdit = new IotSvgEditObject(this.iotSvgShape.nativeElement); - if (this.symbolData) { - this.iotSvgObjectEdit.setContent(this.symbolData.svgContent); - } } ngOnDestroy() { @@ -94,9 +72,6 @@ export class ScadaSymbolComponent extends PageComponent implements OnInit, OnDes private init() { this.symbolData = this.route.snapshot.data.symbolData; this.metadata = parseIotSvgMetadataFromContent(this.symbolData.svgContent); - if (this.iotSvgObjectEdit) { - this.iotSvgObjectEdit.setContent(this.symbolData.svgContent); - } } } diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts index 32b05f2265..d8ee8c1a64 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts @@ -15,8 +15,807 @@ /// import { ImageResourceInfo } from '@shared/models/resource.models'; +import * as svgjs from '@svgdotjs/svg.js'; +import { Box, Element, Rect, Style, SVG, Svg, Timeline } from '@svgdotjs/svg.js'; +import { ResizeObserver } from '@juggle/resize-observer'; +import { DynamicComponentFactoryService } from '@core/services/dynamic-component-factory.service'; +import { Directive, ElementRef, OnDestroy, Type, ViewContainerRef } from '@angular/core'; +import { forkJoin, from } from 'rxjs'; +import { TbInject } from '@shared/decorators/tb-inject'; +import { + setupAddTagPanelTooltip, + setupTagPanelTooltip +} from '@home/pages/scada-symbol/scada-symbol-tooltip.components'; +import ITooltipsterInstance = JQueryTooltipster.ITooltipsterInstance; +import TooltipPositioningSide = JQueryTooltipster.TooltipPositioningSide; +import ITooltipsterHelper = JQueryTooltipster.ITooltipsterHelper; +import ITooltipPosition = JQueryTooltipster.ITooltipPosition; export interface ScadaSymbolData { imageResource: ImageResourceInfo; svgContent: string; } + +export class ScadaSymbolEditObject { + + public svgShape: Svg; + private box: Box; + private elements: ScadaSymbolElement[] = []; + private readonly shapeResize$: ResizeObserver; + private performSetup = false; + private hoverFilterStyle: Style; + public scale = 1; + constructor(private rootElement: HTMLElement, + public viewContainerRef: ViewContainerRef) { + this.shapeResize$ = new ResizeObserver(() => { + this.resize(); + }); + } + + public setContent(svgContent: string) { + this.shapeResize$.unobserve(this.rootElement); + if (this.svgShape) { + this.elements.length = 0; + this.svgShape.remove(); + } + const doc: XMLDocument = new DOMParser().parseFromString(svgContent, 'image/svg+xml'); + this.svgShape = SVG().addTo(this.rootElement).svg(doc.documentElement.innerHTML); + this.svgShape.node.style.overflow = 'visible'; + this.svgShape.node.style['user-select'] = 'none'; + this.box = this.svgShape.bbox(); + this.svgShape.size(this.box.width, this.box.height); + this.svgShape.viewbox(`0 0 ${this.box.width} ${this.box.height}`); + this.svgShape.style().rule('.tb-element', {cursor: 'pointer', transition: '0.2s filter ease-in-out'}); + this.updateHoverFilterStyle(); + this.performSetup = true; + this.shapeResize$.observe(this.rootElement); + } + + public editingElement() { + return this.elements.find(e => e.isEditing()); + } + + private doSetup() { + this.setupZoomPan(0); + (window as any).SVG = svgjs; + forkJoin([ + from(import('tooltipster')), + from(import('tooltipster/dist/js/plugins/tooltipster/SVG/tooltipster-SVG.min.js')) + ]).subscribe(() => { + this.setupElements(); + }); + } + + private setupZoomPan(margin: number) { + this.svgShape.on('zoom', (e) => { + const { + detail: { level, focus } + } = e as any; + this.svgShape.zoom(level, focus); + const box = this.restrictToMargins(this.svgShape.viewbox(), margin); + this.svgShape.viewbox(box); + setTimeout(() => { + this.updateTooltipPositions(); + }); + e.preventDefault(); + }); + this.svgShape.on('panning', (e) => { + const box = (e as any).detail.box; + this.svgShape.viewbox(this.restrictToMargins(box, margin)); + setTimeout(() => { + this.updateTooltipPositions(); + }); + e.preventDefault(); + }); + this.svgShape.on('panStart', (e) => { + this.svgShape.node.style.cursor = 'grab'; + }); + this.svgShape.on('panEnd', (e) => { + this.svgShape.node.style.cursor = 'default'; + }); + } + + private restrictToMargins(box: Box, margin: number): Box { + if (box.x < -margin) { + box.x = -margin; + } else if ((box.x + box.width) > (this.box.width + margin)) { + box.x = this.box.width + margin - box.width; + } + if (box.y < -margin) { + box.y = -margin; + } else if ((box.y + box.height) > (this.box.height + margin)) { + box.y = this.box.height + margin - box.height; + } + return box; + } + + private setupElements() { + this.svgShape.children().forEach(child => { + this.addElement(child); + }); + const overlappingGroups: ScadaSymbolElement[][] = []; + for (const el of this.elements) { + for (const other of this.elements) { + if (el !== other && el.overlappingCenters(other)) { + let overlappingGroup: ScadaSymbolElement[]; + for (const list of overlappingGroups) { + if (list.includes(other) || list.includes(el)) { + overlappingGroup = list; + break; + } + } + if (!overlappingGroup) { + overlappingGroup = [el, other]; + overlappingGroups.push(overlappingGroup); + } else { + if (!overlappingGroup.includes(el)) { + overlappingGroup.push(el); + } else if (!overlappingGroup.includes(other)){ + overlappingGroup.push(other); + } + } + } + } + } + for (const group of overlappingGroups) { + const centers = group.map(e => e.box.cy); + const center = centers.reduce((a, b) => a + b, 0) / centers.length; + const textElement = group.find(e => e.isText()); + const slots = textElement ? group.length % 2 === 0 ? (group.length + 1) : group.length : group.length; + if (textElement) { + textElement.setInnerTooltipOffset(0, center); + group.splice(group.indexOf(textElement), 1); + } + let offset = - (elementTooltipMinHeight * slots) / 2 + elementTooltipMinHeight / 2; + for (const element of group) { + if (textElement && offset === 0) { + offset += elementTooltipMinHeight; + } + element.setInnerTooltipOffset(offset, center); + offset += elementTooltipMinHeight; + } + } + for (const el of this.elements) { + el.init(); + } + } + + private addElement(e: Element) { + if (hasBBox(e)) { + const scadaSymbolElement = new ScadaSymbolElement(this, e); + this.elements.push(scadaSymbolElement); + e.children().forEach(child => { + if (!(child.type === 'tspan' && e.type === 'text')) { + this.addElement(child); + } + }, true); + } + } + + public destroy() { + if (this.shapeResize$) { + this.shapeResize$.disconnect(); + } + } + + private resize() { + if (this.svgShape) { + const targetWidth = this.rootElement.getBoundingClientRect().width; + const targetHeight = this.rootElement.getBoundingClientRect().height; + let scale: number; + if (targetWidth < targetHeight) { + scale = targetWidth / this.box.width; + } else { + scale = targetHeight / this.box.height; + } + if (this.scale !== scale) { + this.scale = scale; + this.svgShape.node.style.transform = `scale(${this.scale})`; + this.updateHoverFilterStyle(); + this.updateZoomOptions(); + this.updateTooltipPositions(); + } + if (this.performSetup) { + this.performSetup = false; + this.doSetup(); + } + } + } + + private updateHoverFilterStyle() { + if (this.hoverFilterStyle) { + this.hoverFilterStyle.remove(); + } + const whiteBlur = (2.8 / this.scale).toFixed(2); + const blackBlur = (1.2 / this.scale).toFixed(2); + this.hoverFilterStyle = + this.svgShape.style().rule('.hovered', + { + filter: + `drop-shadow(0px 0px ${whiteBlur}px white) drop-shadow(0px 0px ${whiteBlur}px white) + drop-shadow(0px 0px ${whiteBlur}px white) drop-shadow(0px 0px ${whiteBlur}px white) + drop-shadow(0px 0px ${blackBlur}px black)` + } + ); + } + + private updateZoomOptions() { + this.svgShape.panZoom({ + zoomMin: 1, + zoomMax: 4, + zoomFactor: 2 / this.scale + }); + } + + private updateTooltipPositions() { + const container = this.rootElement.getBoundingClientRect(); + for (const e of this.elements) { + e.updateTooltipPosition(container); + } + } + +} + +const hasBBox = (e: Element): boolean => { + try { + if (e.bbox) { + const box = e.bbox(); + return !!box.width || !!box.height; + } else { + return false; + } + } catch (_e) { + return false; + } +}; + +const textTooltip = (el: JQuery, text: string) => { + el.tooltipster({ + theme: ['iot-svg'], + trigger: 'hover', + content: text + }); +}; + +const isDomRectContained = (target: DOMRect, container: DOMRect, horizontalGap = 0, verticalGap = 0): boolean => ( + target.left >= container.left - horizontalGap && + target.left + target.width <= container.left + container.width + horizontalGap && + target.top >= container.top - verticalGap && + target.top + target.height <= container.top + container.height + verticalGap +); + +const elementTooltipMinHeight = 36 + 8; +const elementTooltipMinWidth = 100; + +const groupRectStroke = 2; +const groupRectPadding = 2; + +export class ScadaSymbolElement { + + private highlightRect: Rect; + private highlightRectTimeline: Timeline; + + public tooltip: ITooltipsterInstance; + + public tag: string; + + private editing = false; + + private innerTooltipOffset = 0; + + public readonly box: Box; + + private highlighted = false; + + private tooltipMouseX: number; + private tooltipMouseY: number; + + constructor(private editObject: ScadaSymbolEditObject, + public element: Element) { + this.tag = element.attr('tb:tag'); + this.box = element.rbox(this.editObject.svgShape); + } + + public init() { + if (this.isGroup()) { + this.highlightRect = + this.editObject.svgShape + .rect(this.box.width + groupRectPadding * 2, this.box.height + groupRectPadding * 2) + .x(this.box.x - groupRectPadding) + .y(this.box.y - groupRectPadding) + .attr({ + fill: 'none', + rx: this.unscaled(6), + stroke: 'rgba(0, 0, 0, 0.38)', + 'stroke-dasharray': '1', + 'stroke-width': this.unscaled(groupRectStroke), + opacity: 0}); + this.highlightRectTimeline = new Timeline(); + this.highlightRect.timeline(this.highlightRectTimeline); + this.highlightRect.hide(); + } else { + this.element.addClass('tb-element'); + } + this.element.on('mouseenter', (event) => { + this.highlight(); + }); + this.element.on('mouseleave', (event) => { + this.unhighlight(); + }); + if (this.hasTag()) { + this.createTagTooltip(); + } else { + this.createAddTagTooltip(); + } + } + + public overlappingCenters(otherElement: ScadaSymbolElement): boolean { + if (this.isGroup() || otherElement.isGroup()) { + return false; + } + return Math.abs(this.box.cx - otherElement.box.cx) * this.editObject.scale < elementTooltipMinWidth && + Math.abs(this.box.cy - otherElement.box.cy) * this.editObject.scale < elementTooltipMinHeight; + } + + public highlight() { + if (!this.highlighted) { + this.highlighted = true; + if (this.isGroup()) { + this.highlightRectTimeline.finish(); + this.highlightRect + .attr({ + rx: this.unscaled(6), + 'stroke-width': this.unscaled(groupRectStroke) + }); + this.highlightRect.show(); + this.highlightRect.animate(300).attr({opacity: 1}); + } else { + this.element.addClass('hovered'); + } + if (this.hasTag()) { + this.repositionTooltip(); + $(this.tooltip.elementTooltip()).addClass('tb-active'); + } + } + } + + public unhighlight() { + if (this.highlighted) { + this.highlighted = false; + if (this.isGroup()) { + this.highlightRectTimeline.finish(); + this.highlightRect.animate(300).attr({opacity: 0}).after(() => { + this.highlightRect.hide(); + }); + } else { + this.element.removeClass('hovered'); + } + if (this.hasTag() && !this.editing) { + $(this.tooltip.elementTooltip()).removeClass('tb-active'); + } + } + } + + public repositionTooltip() { + const editingElement = this.editObject.editingElement(); + if (!editingElement || editingElement === this) { + this.tooltip.reposition(); + } + } + + public clearTag() { + this.tooltip.destroy(); + this.tag = null; + this.element.attr('tb:tag', null); + this.unhighlight(); + this.createAddTagTooltip(); + } + + public setTag(tag: string) { + this.tooltip.destroy(); + this.tag = tag; + this.element.attr('tb:tag', tag); + this.createTagTooltip(); + } + + public setEditing(editing: boolean) { + this.editing = editing; + if (this.hasTag() && !this.editing && !this.highlighted) { + $(this.tooltip.elementTooltip()).removeClass('tb-active'); + } + } + + public isEditing() { + return this.editing; + } + + public updateTooltipPosition(container: DOMRect) { + if (this.tooltip && !this.tooltip.status().destroyed) { + this.tooltip.reposition(); + const tooltipElement = this.tooltip.elementTooltip(); + if (tooltipElement) { + if (isDomRectContained(tooltipElement.getBoundingClientRect(), container, + elementTooltipMinWidth, elementTooltipMinHeight)) { + tooltipElement.style.visibility = null; + } else { + tooltipElement.style.visibility = 'hidden'; + } + } + } + } + + public setInnerTooltipOffset(offset: number, center: number) { + this.innerTooltipOffset = offset + (center - this.box.cy) * this.editObject.scale; + } + + private unscaled(size: number): number { + return size / (this.editObject.scale * this.editObject.svgShape.zoom()); + } + + private scaled(size: number): number { + return size * (this.editObject.scale * this.editObject.svgShape.zoom()); + } + + private createTagTooltip() { + const el = $(this.element.node); + el.tooltipster( + { + zIndex: 100, + arrow: this.isGroup(), + distance: this.isGroup() ? (this.scaled(groupRectPadding) + groupRectStroke) : 6, + theme: ['iot-svg'], + delay: 0, + animationDuration: 0, + interactive: true, + trigger: 'custom', + side: 'top', + trackOrigin: false, + content: '', + functionPosition: (instance, helper, position) => + this.innerTagTooltipPosition(instance, helper, position), + functionReady: (instance, helper) => { + const tooltipEl = $(helper.tooltip); + tooltipEl.on('mouseenter', () => { + this.highlight(); + }); + tooltipEl.on('mouseleave', () => { + this.unhighlight(); + }); + } + } + ); + this.tooltip = el.tooltipster('instance'); + this.setupTagPanel(); + } + + private setupTagPanel() { + setupTagPanelTooltip(this, this.editObject.viewContainerRef); + /*this.isEditing = false; + this.unhighlight(); + const tagPanel = + $(`
+ ${this.element.type}: + ${this.tag} + edit + delete +
`); + const updateTagButton = tagPanel.find('.edit-icon'); + textTooltip(updateTagButton, 'Update tag'); + updateTagButton.on('click', () => { + this.setupEditTagPanel(); + }); + const deleteButton = tagPanel.find('.delete-icon'); + textTooltip(deleteButton, 'Remove tag'); + deleteButton.on('click', () => { + this.clearTag(); + }); + this.tooltip.content(tagPanel); + this.tooltip.open();*/ + } + + private setupEditTagPanel() { + this.editing = true; + const editTagInputPanel = + $(`
+ Update tag: + + done + close +
`); + const tagInput = editTagInputPanel.find('input.tag-input'); + const applyTagButton = editTagInputPanel.find('span.apply-icon'); + const closeButton = editTagInputPanel.find('span.close-icon'); + textTooltip(applyTagButton, 'Apply'); + textTooltip(closeButton, 'Cancel'); + tagInput.val(this.tag); + let editPanelClosed = false; + + tagInput.on('keypress', (event) => { + if (event.which === 13) { + const newTag: string = tagInput.val() as string; + if (newTag) { + editPanelClosed = true; + this.setTag(newTag); + } + } + }); + applyTagButton.on('click', () => { + const newTag: string = tagInput.val() as string; + editPanelClosed = true; + if (newTag) { + this.setTag(newTag); + } else { + this.setupTagPanel(); + } + }); + closeButton.on('click', () => { + editPanelClosed = true; + this.setupTagPanel(); + }); + tagInput.on('blur', () => { + setTimeout(() => { + if (!editPanelClosed) { + editPanelClosed = true; + this.setupTagPanel(); + } + }); + }); + this.tooltip.content(editTagInputPanel); + tagInput.trigger('focus'); + } + + private createAddTagTooltip() { + const el = $(this.element.node); + el.tooltipster( + { + zIndex: 100, + arrow: true, + theme: ['iot-svg', 'tb-active'], + delay: [0, 300], + interactive: true, + trigger: 'hover', + side: ['top', 'left', 'bottom', 'right'], + trackOrigin: false, + content: '', + functionBefore: (instance, helper) => { + const mouseEvent = (helper.event as MouseEvent); + this.tooltipMouseX = mouseEvent.clientX; + this.tooltipMouseY = mouseEvent.clientY; + let side: TooltipPositioningSide; + if (this.isGroup()) { + side = 'top'; + } else { + side = this.calculateTooltipSide(helper.origin.getBoundingClientRect(), + mouseEvent.clientX, mouseEvent.clientY); + } + instance.option('side', side); + }, + functionPosition: (instance, helper, position) => + this.innerAddTagTooltipPosition(instance, helper, position), + functionReady: (instance, helper) => { + const tooltipEl = $(helper.tooltip); + tooltipEl.on('mouseenter', () => { + this.highlight(); + }); + tooltipEl.on('mouseleave', () => { + this.unhighlight(); + }); + } + } + ); + this.tooltip = el.tooltipster('instance'); + this.setupAddTagPanel(); + } + + private setupAddTagPanel() { + setupAddTagPanelTooltip(this, this.editObject.viewContainerRef); + /*this.isEditing = false; + this.tooltip.off('close'); + this.editObject.dynamicComponentFactoryService.createDynamicComponent( + class TbTooltipComponentInstance extends TbTooltipContent {}, + `
+ ${this.element.type}: + +
`, + [this.editObject.sharedModule] + ).subscribe(componentData => { + const tooltipComponentRef = + this.editObject.viewContainerRef.createComponent(componentData.componentType, + {index: 0, ngModuleRef: componentData.componentModuleRef}); + tooltipComponentRef.instance.componentType = componentData.componentType; + tooltipComponentRef.instance.dynamicComponentFactoryService = this.editObject.dynamicComponentFactoryService; + tooltipComponentRef.instance.addTag = new EventEmitter(); + tooltipComponentRef.instance.addTag.subscribe(() => { + tooltipComponentRef.destroy(); + this.setupAddTagInputPanel(); + }); + const parentElement = tooltipComponentRef.instance.element.nativeElement; + const content = parentElement.firstChild; + parentElement.removeChild(content); + parentElement.style.display = 'none'; + this.tooltip.content(content); + });*/ + /* + const addTagPanel = + $(`
+ ${this.element.type}: + +
`); + const addTagButton = addTagPanel.find('.add-tag-button'); + addTagButton.on('click', () => { + this.setupAddTagInputPanel(); + }); + this.tooltip.content(addTagPanel); + */ + // this.tooltip.off('closing'); + } + + private setupAddTagInputPanel() { + this.editing = true; + const addTagInputPanel = + $(`
+ Enter tag: + + done + close +
`); + const tagInput = addTagInputPanel.find('input.tag-input'); + const applyTagButton = addTagInputPanel.find('span.apply-icon'); + const closeButton = addTagInputPanel.find('span.close-icon'); + textTooltip(applyTagButton, 'Apply'); + textTooltip(closeButton, 'Cancel'); + + let addPanelClosed = false; + tagInput.on('keypress', (event) => { + if (event.which === 13) { + const newTag: string = tagInput.val() as string; + if (newTag) { + addPanelClosed = true; + this.tooltip.off('close'); + this.setTag(newTag); + } + } + }); + applyTagButton.on('click', () => { + const newTag: string = tagInput.val() as string; + addPanelClosed = true; + if (newTag) { + this.tooltip.off('close'); + this.setTag(newTag); + } else { + this.unhighlight(); + this.tooltip.close(); + } + }); + closeButton.on('click', () => { + addPanelClosed = true; + this.unhighlight(); + this.tooltip.close(); + }); + tagInput.on('blur', () => { + setTimeout(() => { + if (!addPanelClosed) { + addPanelClosed = true; + this.tooltip.close(); + } + }); + }); + this.tooltip.content(addTagInputPanel); + this.tooltip.option('delay', [0, 10000000]); + this.tooltip.on('close', () => { + this.tooltip.option('delay', [0, 300]); + this.setupAddTagPanel(); + }); + tagInput.trigger('focus'); + } + + private innerTagTooltipPosition(instance: ITooltipsterInstance, helper: ITooltipsterHelper, + position: ITooltipPosition): ITooltipPosition { + const clientRect = helper.origin.getBoundingClientRect(); + if (!this.isGroup()) { + position.coord.top = clientRect.top + (clientRect.height - position.size.height) / 2 + + this.innerTooltipOffset * this.editObject.svgShape.zoom(); + position.coord.left = clientRect.left + (clientRect.width - position.size.width) / 2; + } else { + position.distance = this.scaled(groupRectPadding) + groupRectStroke; + position.coord.top = clientRect.top - position.size.height - (this.scaled(groupRectPadding) + groupRectStroke); + } + return position; + } + + private innerAddTagTooltipPosition(instance: ITooltipsterInstance, + helper: ITooltipsterHelper, position: ITooltipPosition): ITooltipPosition { + const distance = 10; + switch (position.side) { + case 'right': + position.coord.top = this.tooltipMouseY - position.size.height / 2; + position.coord.left = this.tooltipMouseX + distance; + position.target = this.tooltipMouseY; + break; + case 'top': + position.coord.top = this.tooltipMouseY - position.size.height - distance; + position.coord.left = this.tooltipMouseX - position.size.width / 2; + position.target = this.tooltipMouseX; + if (this.isGroup()) { + position.coord.top -= elementTooltipMinHeight; + } + break; + case 'left': + position.coord.top = this.tooltipMouseY - position.size.height / 2; + position.coord.left = this.tooltipMouseX - position.size.width - distance; + position.target = this.tooltipMouseY; + break; + case 'bottom': + position.coord.top = this.tooltipMouseY + distance; + position.coord.left = this.tooltipMouseX - position.size.width / 2; + position.target = this.tooltipMouseX; + break; + } + return position; + } + + private calculateTooltipSide(clientRect: DOMRect, mouseX: number, mouseY: number): TooltipPositioningSide { + let side: TooltipPositioningSide; + const cx = clientRect.left + clientRect.width / 2; + const cy = clientRect.top + clientRect.height / 2; + if (clientRect.width > clientRect.height) { + if (Math.abs(cx - mouseX) > clientRect.width / 4) { + if (mouseX < cx) { + side = 'left'; + } else { + side = 'right'; + } + } else { + if (mouseY < cy) { + side = 'top'; + } else { + side = 'bottom'; + } + } + } else { + if (Math.abs(cy - mouseY) > clientRect.height / 4) { + if (mouseY < cy) { + side = 'top'; + } else { + side = 'bottom'; + } + } else { + if (mouseX < cx) { + side = 'left'; + } else { + side = 'right'; + } + } + } + return side; + } + + private hasTag() { + return !!this.tag; + } + + public isGroup() { + return this.element.type === 'g'; + } + + public isText() { + return this.element.type === 'text'; + } + +} + +@Directive() +class TbTooltipContent implements OnDestroy { + + componentType: Type; + dynamicComponentFactoryService: DynamicComponentFactoryService; + + [key: string]: any; + constructor(@TbInject(ElementRef) public element: ElementRef) { + } + + ngOnDestroy(): void { + this.dynamicComponentFactoryService.destroyDynamicComponent(this.componentType); + } +} diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.module.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.module.ts index 2ed9a0bb4c..9366321392 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.module.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.module.ts @@ -19,16 +19,20 @@ import { CommonModule } from '@angular/common'; import { SharedModule } from '@app/shared/shared.module'; import { HomeComponentsModule } from '@modules/home/components/home-components.module'; import { ScadaSymbolComponent } from '@home/pages/scada-symbol/scada-symbol.component'; +import { ScadaSymbolEditorComponent } from '@home/pages/scada-symbol/scada-symbol-editor.component'; +import { ScadaSymbolTooltipComponentsModule } from '@home/pages/scada-symbol/scada-symbol-tooltip.components'; @NgModule({ declarations: [ + ScadaSymbolEditorComponent, ScadaSymbolComponent ], imports: [ CommonModule, SharedModule, - HomeComponentsModule + HomeComponentsModule, + ScadaSymbolTooltipComponentsModule ] }) export class ScadaSymbolModule { } diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss index 0c59e74ee5..f741fa5a31 100644 --- a/ui-ngx/src/styles.scss +++ b/ui-ngx/src/styles.scss @@ -466,6 +466,8 @@ mat-icon { background: rgba(0, 0, 0, 0.54); border: 1px solid rgba(0, 0, 0, 0); border-radius: 8px; + display: flex; + align-items: center; .tooltipster-content { padding: 4px 8px; font-size: 12px; @@ -480,7 +482,7 @@ mat-icon { border: 1px solid rgba(0, 0, 0, 0.38); box-shadow: 0 0 10px 6px rgba(0, 0, 0, .2); .tooltipster-content { - color: #000; + color: rgba(0, 0, 0, 0.76); } } .tooltipster-arrow { @@ -549,6 +551,11 @@ mat-icon { } } } + &.tooltipster-left, &.tooltipster-right { + .tooltipster-box { + min-height: 36px; + } + } &.tooltipster-top { .tooltipster-arrow { bottom: -2px; From 64f858a73b7008b518e56627e99b059d178c9244 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Fri, 17 May 2024 20:25:51 +0300 Subject: [PATCH 035/442] UI: Improve element tags editing. --- .../scada-symbol-tooltip.components.ts | 42 ++-- .../pages/scada-symbol/scada-symbol.models.ts | 207 ++---------------- 2 files changed, 50 insertions(+), 199 deletions(-) diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts index cf38552f7a..df9e299cda 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts @@ -22,7 +22,7 @@ import { ElementRef, EventEmitter, Input, - NgModule, + NgModule, OnDestroy, Output, Type, ViewChild, @@ -33,6 +33,7 @@ import { ScadaSymbolElement } from '@home/pages/scada-symbol/scada-symbol.models import { CommonModule } from '@angular/common'; import { SharedModule } from '@shared/shared.module'; import { ENTER } from '@angular/cdk/keycodes'; +import Timeout = NodeJS.Timeout; @Directive() abstract class ScadaSymbolPanelComponent implements AfterViewInit { @@ -98,7 +99,7 @@ class ScadaSymbolAddTagPanelComponent extends ScadaSymbolPanelComponent { styleUrls: ['./scada-symbol-tooltip.component.scss'], encapsulation: ViewEncapsulation.None }) -class ScadaSymbolTagInputPanelComponent extends ScadaSymbolPanelComponent implements AfterViewInit { +class ScadaSymbolTagInputPanelComponent extends ScadaSymbolPanelComponent implements AfterViewInit, OnDestroy { @ViewChild('tagField') tagField: ElementRef; @@ -117,6 +118,8 @@ class ScadaSymbolTagInputPanelComponent extends ScadaSymbolPanelComponent implem private closed = false; + private blurTimeout: Timeout; + constructor(public element: ElementRef) { super(element); } @@ -128,6 +131,13 @@ class ScadaSymbolTagInputPanelComponent extends ScadaSymbolPanelComponent implem }); } + ngOnDestroy() { + if (this.blurTimeout) { + clearTimeout(this.blurTimeout); + this.blurTimeout = null; + } + } + public tagEnter($event: KeyboardEvent) { if ($event.keyCode === ENTER) { $event.preventDefault(); @@ -153,7 +163,7 @@ class ScadaSymbolTagInputPanelComponent extends ScadaSymbolPanelComponent implem } public onBlur() { - setTimeout(() => { + this.blurTimeout = setTimeout(() => { if (!this.closed) { this.closed = true; this.cancel.emit(); @@ -219,7 +229,7 @@ class ScadaSymbolTagPanelComponent extends ScadaSymbolPanelComponent implements export class ScadaSymbolTooltipComponentsModule { } export const setupAddTagPanelTooltip = (symbolElement: ScadaSymbolElement, container: ViewContainerRef) => { - symbolElement.setEditing(false); + symbolElement.stopEdit(); symbolElement.tooltip.off('close'); const componentRef = setTooltipComponent(symbolElement, container, ScadaSymbolAddTagPanelComponent); componentRef.instance.addTag.subscribe(() => { @@ -229,7 +239,7 @@ export const setupAddTagPanelTooltip = (symbolElement: ScadaSymbolElement, conta }; export const setupTagPanelTooltip = (symbolElement: ScadaSymbolElement, container: ViewContainerRef) => { - symbolElement.setEditing(false); + symbolElement.stopEdit(); symbolElement.unhighlight(); const componentRef = setTooltipComponent(symbolElement, container, ScadaSymbolTagPanelComponent); componentRef.instance.updateTag.subscribe(() => { @@ -244,7 +254,17 @@ export const setupTagPanelTooltip = (symbolElement: ScadaSymbolElement, containe }; const setupTagInputPanelTooltip = (symbolElement: ScadaSymbolElement, container: ViewContainerRef, isAdd: boolean) => { - symbolElement.setEditing(true); + + symbolElement.startEdit(() => { + if (isAdd) { + symbolElement.unhighlight(); + symbolElement.tooltip.close(); + } else { + componentRef.destroy(); + setupTagPanelTooltip(symbolElement, container); + } + }); + const componentRef = setTooltipComponent(symbolElement, container, ScadaSymbolTagInputPanelComponent); componentRef.instance.isAdd = isAdd; @@ -259,13 +279,7 @@ const setupTagInputPanelTooltip = (symbolElement: ScadaSymbolElement, container: symbolElement.setTag(newTag); }); componentRef.instance.cancel.subscribe(() => { - if (isAdd) { - symbolElement.unhighlight(); - symbolElement.tooltip.close(); - } else { - componentRef.destroy(); - setupTagPanelTooltip(symbolElement, container); - } + symbolElement.stopEdit(true); }); if (isAdd) { symbolElement.tooltip.option('delay', [0, 10000000]); @@ -283,7 +297,7 @@ const setTooltipComponent = (symbolElement: componentRef.instance.symbolElement = symbolElement; componentRef.instance.viewInited.subscribe(() => { if (symbolElement.tooltip.status().open) { - symbolElement.repositionTooltip(); + symbolElement.tooltip.reposition(); } }); const parentElement = componentRef.instance.element.nativeElement; diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts index d8ee8c1a64..fe843f8cf9 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts @@ -71,8 +71,8 @@ export class ScadaSymbolEditObject { this.shapeResize$.observe(this.rootElement); } - public editingElement() { - return this.elements.find(e => e.isEditing()); + public cancelEdit() { + this.elements.filter(e => e.isEditing()).forEach(e => e.stopEdit(true)); } private doSetup() { @@ -300,6 +300,7 @@ export class ScadaSymbolElement { public tag: string; private editing = false; + private onCancelEdit: () => void; private innerTooltipOffset = 0; @@ -373,7 +374,7 @@ export class ScadaSymbolElement { this.element.addClass('hovered'); } if (this.hasTag()) { - this.repositionTooltip(); + this.tooltip.reposition(); $(this.tooltip.elementTooltip()).addClass('tb-active'); } } @@ -396,13 +397,6 @@ export class ScadaSymbolElement { } } - public repositionTooltip() { - const editingElement = this.editObject.editingElement(); - if (!editingElement || editingElement === this) { - this.tooltip.reposition(); - } - } - public clearTag() { this.tooltip.destroy(); this.tag = null; @@ -418,10 +412,24 @@ export class ScadaSymbolElement { this.createTagTooltip(); } - public setEditing(editing: boolean) { - this.editing = editing; - if (this.hasTag() && !this.editing && !this.highlighted) { - $(this.tooltip.elementTooltip()).removeClass('tb-active'); + public startEdit(onCancelEdit: () => void) { + if (!this.editing) { + this.editObject.cancelEdit(); + this.editing = true; + this.onCancelEdit = onCancelEdit; + } + } + + public stopEdit(cancel = false) { + if (this.editing) { + this.editing = false; + if (cancel && this.onCancelEdit) { + this.onCancelEdit(); + } + this.onCancelEdit = null; + if (this.hasTag() && !this.highlighted) { + $(this.tooltip.elementTooltip()).removeClass('tb-active'); + } } } @@ -490,78 +498,6 @@ export class ScadaSymbolElement { private setupTagPanel() { setupTagPanelTooltip(this, this.editObject.viewContainerRef); - /*this.isEditing = false; - this.unhighlight(); - const tagPanel = - $(`
- ${this.element.type}: - ${this.tag} - edit - delete -
`); - const updateTagButton = tagPanel.find('.edit-icon'); - textTooltip(updateTagButton, 'Update tag'); - updateTagButton.on('click', () => { - this.setupEditTagPanel(); - }); - const deleteButton = tagPanel.find('.delete-icon'); - textTooltip(deleteButton, 'Remove tag'); - deleteButton.on('click', () => { - this.clearTag(); - }); - this.tooltip.content(tagPanel); - this.tooltip.open();*/ - } - - private setupEditTagPanel() { - this.editing = true; - const editTagInputPanel = - $(`
- Update tag: - - done - close -
`); - const tagInput = editTagInputPanel.find('input.tag-input'); - const applyTagButton = editTagInputPanel.find('span.apply-icon'); - const closeButton = editTagInputPanel.find('span.close-icon'); - textTooltip(applyTagButton, 'Apply'); - textTooltip(closeButton, 'Cancel'); - tagInput.val(this.tag); - let editPanelClosed = false; - - tagInput.on('keypress', (event) => { - if (event.which === 13) { - const newTag: string = tagInput.val() as string; - if (newTag) { - editPanelClosed = true; - this.setTag(newTag); - } - } - }); - applyTagButton.on('click', () => { - const newTag: string = tagInput.val() as string; - editPanelClosed = true; - if (newTag) { - this.setTag(newTag); - } else { - this.setupTagPanel(); - } - }); - closeButton.on('click', () => { - editPanelClosed = true; - this.setupTagPanel(); - }); - tagInput.on('blur', () => { - setTimeout(() => { - if (!editPanelClosed) { - editPanelClosed = true; - this.setupTagPanel(); - } - }); - }); - this.tooltip.content(editTagInputPanel); - tagInput.trigger('focus'); } private createAddTagTooltip() { @@ -609,105 +545,6 @@ export class ScadaSymbolElement { private setupAddTagPanel() { setupAddTagPanelTooltip(this, this.editObject.viewContainerRef); - /*this.isEditing = false; - this.tooltip.off('close'); - this.editObject.dynamicComponentFactoryService.createDynamicComponent( - class TbTooltipComponentInstance extends TbTooltipContent {}, - `
- ${this.element.type}: - -
`, - [this.editObject.sharedModule] - ).subscribe(componentData => { - const tooltipComponentRef = - this.editObject.viewContainerRef.createComponent(componentData.componentType, - {index: 0, ngModuleRef: componentData.componentModuleRef}); - tooltipComponentRef.instance.componentType = componentData.componentType; - tooltipComponentRef.instance.dynamicComponentFactoryService = this.editObject.dynamicComponentFactoryService; - tooltipComponentRef.instance.addTag = new EventEmitter(); - tooltipComponentRef.instance.addTag.subscribe(() => { - tooltipComponentRef.destroy(); - this.setupAddTagInputPanel(); - }); - const parentElement = tooltipComponentRef.instance.element.nativeElement; - const content = parentElement.firstChild; - parentElement.removeChild(content); - parentElement.style.display = 'none'; - this.tooltip.content(content); - });*/ - /* - const addTagPanel = - $(`
- ${this.element.type}: - -
`); - const addTagButton = addTagPanel.find('.add-tag-button'); - addTagButton.on('click', () => { - this.setupAddTagInputPanel(); - }); - this.tooltip.content(addTagPanel); - */ - // this.tooltip.off('closing'); - } - - private setupAddTagInputPanel() { - this.editing = true; - const addTagInputPanel = - $(`
- Enter tag: - - done - close -
`); - const tagInput = addTagInputPanel.find('input.tag-input'); - const applyTagButton = addTagInputPanel.find('span.apply-icon'); - const closeButton = addTagInputPanel.find('span.close-icon'); - textTooltip(applyTagButton, 'Apply'); - textTooltip(closeButton, 'Cancel'); - - let addPanelClosed = false; - tagInput.on('keypress', (event) => { - if (event.which === 13) { - const newTag: string = tagInput.val() as string; - if (newTag) { - addPanelClosed = true; - this.tooltip.off('close'); - this.setTag(newTag); - } - } - }); - applyTagButton.on('click', () => { - const newTag: string = tagInput.val() as string; - addPanelClosed = true; - if (newTag) { - this.tooltip.off('close'); - this.setTag(newTag); - } else { - this.unhighlight(); - this.tooltip.close(); - } - }); - closeButton.on('click', () => { - addPanelClosed = true; - this.unhighlight(); - this.tooltip.close(); - }); - tagInput.on('blur', () => { - setTimeout(() => { - if (!addPanelClosed) { - addPanelClosed = true; - this.tooltip.close(); - } - }); - }); - this.tooltip.content(addTagInputPanel); - this.tooltip.option('delay', [0, 10000000]); - this.tooltip.on('close', () => { - this.tooltip.option('delay', [0, 300]); - this.setupAddTagPanel(); - }); - tagInput.trigger('focus'); } private innerTagTooltipPosition(instance: ITooltipsterInstance, helper: ITooltipsterHelper, From 9dc76ec308fd08f935de0a73b320b3e66ba28600 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Mon, 20 May 2024 18:08:25 +0300 Subject: [PATCH 036/442] UI: Scada symbol editor --- .../widget/lib/svg/iot-svg.models.ts | 40 ++++++ .../scada-symbol-editor.component.ts | 27 ++-- .../scada-symbol-metadata.component.html | 55 ++++++++ .../scada-symbol-metadata.component.scss | 65 +++++++++ .../scada-symbol-metadata.component.ts | 129 ++++++++++++++++++ .../scada-symbol-tooltip.component.scss | 10 ++ .../scada-symbol-tooltip.components.ts | 123 +++++++++++++++-- .../scada-symbol/scada-symbol.component.html | 47 ++++++- .../scada-symbol/scada-symbol.component.ts | 67 +++++++-- .../pages/scada-symbol/scada-symbol.models.ts | 63 +++++++-- .../pages/scada-symbol/scada-symbol.module.ts | 4 +- .../assets/locale/locale.constant-en_US.json | 9 +- 12 files changed, 593 insertions(+), 46 deletions(-) create mode 100644 ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-metadata.component.html create mode 100644 ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-metadata.component.scss create mode 100644 ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-metadata.component.ts diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts index db649d8ad1..7277ea0751 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts @@ -195,6 +195,46 @@ const updateIotSvgMetadataInDom = (svgDoc: Document, metadata: IotSvgMetadata) = metadataElement.appendChild(cdata); }; +const svgPartsRegex = /()(.*)<\/svg>/gms; + +const svgMetadataRegex = /.*<\/tb:metadata>/gs; + +export const svgRootNodePart = (svgContent: string): string => { + let result = svgContent; + svgPartsRegex.lastIndex = 0; + const match = svgPartsRegex.exec(svgContent); + if (match != null && match.length > 1) { + result = match[1]; + } + return result; +}; + +export const innerSvgContent = (svgContent: string): string => { + let result = svgContent; + svgPartsRegex.lastIndex = 0; + const match = svgPartsRegex.exec(svgContent); + if (match != null && match.length > 2) { + result = match[2]; + } + return result; +}; + +export const stripSvgMetadata = (svgContent: string) => { + let result = svgContent; + svgMetadataRegex.lastIndex = 0; + const match = svgMetadataRegex.exec(svgContent); + if (match !== null && match.length) { + const metadata = match[0]; + result = result.replace(metadata, ''); + } + return result; +}; + +export const innerSvgContentFromSvgjs = (svgContent: string): string => { + const result = innerSvgContent(svgContent); + return result.replace(/svgjs:.*?=".*?"/gs, ''); +}; + const defaultGetValueSettings = (get: IotSvgBehaviorValue): GetValueSettings => ({ action: GetValueAction.DO_NOTHING, defaultValue: get.defaultValue, diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts index 6f73ae7ac4..833f96ea67 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts @@ -27,9 +27,12 @@ import { ViewContainerRef, ViewEncapsulation } from '@angular/core'; -import { Subject } from 'rxjs'; import { ScadaSymbolEditObject } from '@home/pages/scada-symbol/scada-symbol.models'; +export interface ScadaSymbolEditorData { + svgContent: string; +} + @Component({ selector: 'tb-scada-symbol-editor', templateUrl: './scada-symbol-editor.component.html', @@ -42,12 +45,10 @@ export class ScadaSymbolEditorComponent implements OnInit, OnDestroy, AfterViewI iotSvgShape: ElementRef; @Input() - svgContent: string; + data: ScadaSymbolEditorData; scadaSymbolEditObject: ScadaSymbolEditObject; - private destroy$ = new Subject(); - constructor(private viewContainerRef: ViewContainerRef) { } @@ -57,8 +58,8 @@ export class ScadaSymbolEditorComponent implements OnInit, OnDestroy, AfterViewI ngAfterViewInit() { this.scadaSymbolEditObject = new ScadaSymbolEditObject(this.iotSvgShape.nativeElement, this.viewContainerRef); - if (this.svgContent) { - this.scadaSymbolEditObject.setContent(this.svgContent); + if (this.data) { + this.scadaSymbolEditObject.setContent(this.data.svgContent); } } @@ -66,9 +67,11 @@ export class ScadaSymbolEditorComponent implements OnInit, OnDestroy, AfterViewI for (const propName of Object.keys(changes)) { const change = changes[propName]; if (!change.firstChange && change.currentValue !== change.previousValue) { - if (propName === 'svgContent') { + if (propName === 'data') { if (this.scadaSymbolEditObject) { - this.scadaSymbolEditObject.setContent(this.svgContent); + setTimeout(() => { + this.scadaSymbolEditObject.setContent(this.data.svgContent); + }); } } } @@ -79,5 +82,13 @@ export class ScadaSymbolEditorComponent implements OnInit, OnDestroy, AfterViewI this.scadaSymbolEditObject.destroy(); } + get dirty(): boolean { + return this.scadaSymbolEditObject?.dirty; + } + + getContent(): string { + return this.scadaSymbolEditObject?.getContent(); + } + } diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-metadata.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-metadata.component.html new file mode 100644 index 0000000000..f4770bd823 --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-metadata.component.html @@ -0,0 +1,55 @@ + +
+
+ + +
+ + +
+
+
+
+
+
+
scada.title
+ + + +
+
+ + + + {{ 'scada.state-render-function' | translate }} + + + + + + + +
+
+
+
+
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-metadata.component.scss b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-metadata.component.scss new file mode 100644 index 0000000000..48cc8471b8 --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-metadata.component.scss @@ -0,0 +1,65 @@ +/** + * Copyright ยฉ 2016-2024 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 '../../../../../scss/constants'; + +.tb-scada-symbol-metadata { + display: flex; + flex-direction: column; + gap: 8px; + .tb-scada-symbol-metadata-header { + padding: 24px 24px 0; + display: flex; + gap: 12px; + flex-direction: column-reverse; + align-items: flex-start; + @media #{$mat-gt-sm} { + gap: 0; + flex-direction: row; + align-items: center; + justify-content: space-between; + } + .tb-scada-symbol-metadata-header-components { + width: 100%; + flex: 1; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + } + } + .tb-scada-symbol-metadata-content { + & > .mat-content { + padding-top: 8px; + @media #{$mat-xs} { + padding-left: 8px; + padding-right: 8px; + } + } + flex: 1; + overflow: auto; + & > div { + padding: 16px; + } + .mat-content { + display: flex; + flex-direction: column; + gap: 16px; + @media #{$mat-xs} { + gap: 8px; + } + } + } +} diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-metadata.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-metadata.component.ts new file mode 100644 index 0000000000..56f0a2d16b --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-metadata.component.ts @@ -0,0 +1,129 @@ +/// +/// Copyright ยฉ 2016-2024 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, forwardRef, Input, OnInit } from '@angular/core'; +import { + ControlValueAccessor, + NG_VALUE_ACCESSOR, + UntypedFormBuilder, + UntypedFormGroup, + Validators +} from '@angular/forms'; +import { PageComponent } from '@shared/components/page.component'; +import { IotSvgMetadata } from '@home/components/widget/lib/svg/iot-svg.models'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; +import { WidgetConfigMode, widgetType } from '@shared/models/widget.models'; +import { ToggleHeaderOption } from '@shared/components/toggle-header.component'; +import { TranslateService } from '@ngx-translate/core'; + +@Component({ + selector: 'tb-scada-symbol-metadata', + templateUrl: './scada-symbol-metadata.component.html', + styleUrls: ['./scada-symbol-metadata.component.scss'], + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => ScadaSymbolMetadataComponent), + multi: true + } + ] +}) +export class ScadaSymbolMetadataComponent extends PageComponent implements OnInit, ControlValueAccessor { + + @Input() + disabled: boolean; + + private modelValue: IotSvgMetadata; + + private propagateChange = null; + + public metadataFormGroup: UntypedFormGroup; + + headerOptions: ToggleHeaderOption[] = [ + { + name: this.translate.instant('scada.general'), + value: 'general' + }, + { + name: this.translate.instant('scada.tags'), + value: 'tags' + }, + { + name: this.translate.instant('scada.behavior'), + value: 'behavior' + }, + { + name: this.translate.instant('scada.properties'), + value: 'properties' + } + ]; + + selectedOption = 'general'; + + constructor(protected store: Store, + private fb: UntypedFormBuilder, + private translate: TranslateService) { + super(store); + } + + ngOnInit(): void { + this.metadataFormGroup = this.fb.group({ + title: [null, [Validators.required]], + stateRenderFunction: [null], + tags: [null], + behavior: [null], + properties: [null] + }); + + this.metadataFormGroup.valueChanges.subscribe(() => { + this.updateModel(); + }); + } + + registerOnChange(fn: any): void { + this.propagateChange = fn; + } + + registerOnTouched(fn: any): void { + } + + setDisabledState(isDisabled: boolean): void { + this.disabled = isDisabled; + if (isDisabled) { + this.metadataFormGroup.disable({emitEvent: false}); + } else { + this.metadataFormGroup.enable({emitEvent: false}); + } + } + + writeValue(value: IotSvgMetadata): void { + this.selectedOption = 'general'; + this.modelValue = value; + this.metadataFormGroup.patchValue( + value, {emitEvent: false} + ); + } + + private updateModel() { + const metadata: IotSvgMetadata = this.metadataFormGroup.getRawValue(); + this.modelValue = metadata; + this.propagateChange(this.modelValue); + } + + protected readonly WidgetConfigMode = WidgetConfigMode; + protected readonly widgetType = widgetType; +} diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.component.scss b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.component.scss index c7fc243dc0..1ea820b6a2 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.component.scss +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.component.scss @@ -18,6 +18,16 @@ flex-direction: row; align-items: center; gap: 8px; + &.column { + flex-direction: column; + } + + .tb-confirm-text { + font-size: 14px; + line-height: 16px; + text-align: center; + font-weight: 400; + } .mdc-button { line-height: 20px; diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts index df9e299cda..faf091c5b7 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts @@ -23,6 +23,7 @@ import { EventEmitter, Input, NgModule, OnDestroy, + OnInit, Output, Type, ViewChild, @@ -34,6 +35,8 @@ import { CommonModule } from '@angular/common'; import { SharedModule } from '@shared/shared.module'; import { ENTER } from '@angular/cdk/keycodes'; import Timeout = NodeJS.Timeout; +import { MatButton } from '@angular/material/button'; +import ITooltipsterInstance = JQueryTooltipster.ITooltipsterInstance; @Directive() abstract class ScadaSymbolPanelComponent implements AfterViewInit { @@ -55,7 +58,10 @@ abstract class ScadaSymbolPanelComponent implements AfterViewInit { @Component({ template: `
{{ symbolElement?.element?.type }}: - +
`, styleUrls: ['./scada-symbol-tooltip.component.scss'], encapsulation: ViewEncapsulation.None @@ -87,13 +93,13 @@ class ScadaSymbolAddTagPanelComponent extends ScadaSymbolPanelComponent { matTooltipPosition="above" [disabled]="!tag" (click)="onApply()"> - done + done
`, styleUrls: ['./scada-symbol-tooltip.component.scss'], @@ -181,13 +187,13 @@ class ScadaSymbolTagInputPanelComponent extends ScadaSymbolPanelComponent implem matTooltip="Update tag" matTooltipPosition="above" (click)="onUpdateTag()"> - edit + edit -
`, styleUrls: ['./scada-symbol-tooltip.component.scss'], @@ -195,19 +201,99 @@ class ScadaSymbolTagInputPanelComponent extends ScadaSymbolPanelComponent implem }) class ScadaSymbolTagPanelComponent extends ScadaSymbolPanelComponent implements AfterViewInit { + @ViewChild('removeTagButton', {read: ElementRef}) + removeTagButton: ElementRef; + @Output() updateTag = new EventEmitter(); @Output() removeTag = new EventEmitter(); - constructor(public element: ElementRef) { + constructor(public element: ElementRef, + private container: ViewContainerRef) { super(element); } + ngAfterViewInit() { + super.ngAfterViewInit(); + setTimeout(() => { + const el = $(this.removeTagButton.nativeElement); + el.tooltipster( + { + zIndex: 200, + arrow: true, + theme: ['iot-svg', 'tb-active'], + interactive: true, + trigger: 'click', + side: 'top', + content: '' + } + ); + const tooltip = el.tooltipster('instance'); + const compRef = + setTooltipComponent(this.symbolElement, this.container, ScadaSymbolRemoveTagConfirmComponent, tooltip); + compRef.instance.removeTag.subscribe(() => { + tooltip.destroy(); + this.removeTag.emit(); + }); + compRef.instance.cancel.subscribe(() => { + tooltip.close(); + }); + tooltip.on('ready', () => { + compRef.instance.yesButton.focus(); + }); + }); + } + public onUpdateTag() { this.updateTag.emit(); } +} + +@Component({ + template: `
+
+
+ + +
+
`, + styleUrls: ['./scada-symbol-tooltip.component.scss'], + encapsulation: ViewEncapsulation.None +}) +class ScadaSymbolRemoveTagConfirmComponent extends ScadaSymbolPanelComponent implements OnInit, AfterViewInit { + + @ViewChild('yesButton') + yesButton: MatButton; + + deleteText: string; + + @Output() + cancel = new EventEmitter(); + + @Output() + removeTag = new EventEmitter(); + + constructor(public element: ElementRef) { + super(element); + } + + ngOnInit() { + this.deleteText = `Are you sure you want to delete tag
${this.symbolElement?.tag} + from ${this.symbolElement?.element?.type} element?`; + } + + public onCancel() { + this.cancel.emit(); + } public onRemoveTag() { this.removeTag.emit(); @@ -219,7 +305,8 @@ class ScadaSymbolTagPanelComponent extends ScadaSymbolPanelComponent implements [ ScadaSymbolAddTagPanelComponent, ScadaSymbolTagInputPanelComponent, - ScadaSymbolTagPanelComponent + ScadaSymbolTagPanelComponent, + ScadaSymbolRemoveTagConfirmComponent ], imports: [ CommonModule, @@ -292,18 +379,26 @@ const setupTagInputPanelTooltip = (symbolElement: ScadaSymbolElement, container: }; const setTooltipComponent = (symbolElement: ScadaSymbolElement, - container: ViewContainerRef, componentType: Type): ComponentRef => { + container: ViewContainerRef, + componentType: Type, + tooltip?: ITooltipsterInstance): ComponentRef => { + if (!tooltip) { + tooltip = symbolElement.tooltip; + } const componentRef = container.createComponent(componentType); componentRef.instance.symbolElement = symbolElement; componentRef.instance.viewInited.subscribe(() => { - if (symbolElement.tooltip.status().open) { - symbolElement.tooltip.reposition(); + if (tooltip.status().open) { + tooltip.reposition(); } }); + tooltip.on('destroyed', () => { + componentRef.destroy(); + }); const parentElement = componentRef.instance.element.nativeElement; const content = parentElement.firstChild; parentElement.removeChild(content); parentElement.style.display = 'none'; - symbolElement.tooltip.content(content); + tooltip.content(content); return componentRef; }; diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html index dc4e620f94..fb32b1decc 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html @@ -29,13 +29,54 @@ [showCloseDetails]="false" headerHeightPx="64" headerTitle="{{symbolData?.imageResource?.title}}"> -
- {{ metadata | json }} +
+ +
+ + +
+
+ +
+ + +
+
+
- +
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts index 0d521d0a4f..7b19df3ff3 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts @@ -14,7 +14,16 @@ /// limitations under the License. /// -import { AfterViewInit, Component, HostBinding, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { + AfterViewInit, + ChangeDetectorRef, + Component, + HostBinding, + OnDestroy, + OnInit, + ViewChild, + ViewEncapsulation +} from '@angular/core'; import { PageComponent } from '@shared/components/page.component'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; @@ -23,6 +32,12 @@ import { takeUntil } from 'rxjs/operators'; import { Subject } from 'rxjs'; import { ScadaSymbolData } from '@home/pages/scada-symbol/scada-symbol.models'; import { IotSvgMetadata, parseIotSvgMetadataFromContent } from '@home/components/widget/lib/svg/iot-svg.models'; +import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; +import { deepClone } from '@core/utils'; +import { + ScadaSymbolEditorComponent, + ScadaSymbolEditorData +} from '@home/pages/scada-symbol/scada-symbol-editor.component'; @Component({ selector: 'tb-scada-symbol', @@ -35,28 +50,43 @@ export class ScadaSymbolComponent extends PageComponent implements OnInit, OnDes @HostBinding('style.width') width = '100%'; @HostBinding('style.height') height = '100%'; + @ViewChild('symbolEditor') + symbolEditor: ScadaSymbolEditorComponent; + symbolData: ScadaSymbolData; + symbolEditorData: ScadaSymbolEditorData; metadata: IotSvgMetadata; + previewMode = false; + + scadaSymbolFormGroup: UntypedFormGroup; + private destroy$ = new Subject(); + private origSymbolData: ScadaSymbolData; + constructor(protected store: Store, private router: Router, - private route: ActivatedRoute) { + private route: ActivatedRoute, + private fb: UntypedFormBuilder, + private cd: ChangeDetectorRef) { super(store); + } + + ngOnInit(): void { + this.scadaSymbolFormGroup = this.fb.group({ + metadata: [null] + }); this.route.data.pipe( takeUntil(this.destroy$) ).subscribe( () => { this.reset(); - this.init(); + this.init(this.route.snapshot.data.symbolData); } ); } - ngOnInit(): void { - } - ngAfterViewInit() { } @@ -66,12 +96,33 @@ export class ScadaSymbolComponent extends PageComponent implements OnInit, OnDes this.destroy$.complete(); } + onApplyScadaSymbolConfig() { + if (this.scadaSymbolFormGroup.valid) { + const svgContent = this.symbolEditor.getContent(); + console.log(svgContent); + } + } + + onRevertScadaSymbolConfig() { + this.init(this.origSymbolData); + } + private reset(): void { + this.previewMode = false; } - private init() { - this.symbolData = this.route.snapshot.data.symbolData; + private init(data: ScadaSymbolData) { + this.origSymbolData = data; + this.symbolData = deepClone(data); + this.symbolEditorData = { + svgContent: this.symbolData.svgContent + }; this.metadata = parseIotSvgMetadataFromContent(this.symbolData.svgContent); + this.scadaSymbolFormGroup.patchValue({ + metadata: this.metadata + }, {emitEvent: false}); + this.scadaSymbolFormGroup.markAsPristine(); + this.cd.markForCheck(); } } diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts index fe843f8cf9..1fc4af8459 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts @@ -30,6 +30,12 @@ import ITooltipsterInstance = JQueryTooltipster.ITooltipsterInstance; import TooltipPositioningSide = JQueryTooltipster.TooltipPositioningSide; import ITooltipsterHelper = JQueryTooltipster.ITooltipsterHelper; import ITooltipPosition = JQueryTooltipster.ITooltipPosition; +import { + innerSvgContent, + innerSvgContentFromSvgjs, + stripSvgMetadata, + svgRootNodePart +} from '@home/components/widget/lib/svg/iot-svg.models'; export interface ScadaSymbolData { imageResource: ImageResourceInfo; @@ -39,12 +45,15 @@ export interface ScadaSymbolData { export class ScadaSymbolEditObject { public svgShape: Svg; + private svgRootNodePart: string; private box: Box; private elements: ScadaSymbolElement[] = []; private readonly shapeResize$: ResizeObserver; private performSetup = false; private hoverFilterStyle: Style; public scale = 1; + + public dirty = false; constructor(private rootElement: HTMLElement, public viewContainerRef: ViewContainerRef) { this.shapeResize$ = new ResizeObserver(() => { @@ -55,11 +64,17 @@ export class ScadaSymbolEditObject { public setContent(svgContent: string) { this.shapeResize$.unobserve(this.rootElement); if (this.svgShape) { - this.elements.length = 0; + this.destroyElements(); this.svgShape.remove(); } - const doc: XMLDocument = new DOMParser().parseFromString(svgContent, 'image/svg+xml'); - this.svgShape = SVG().addTo(this.rootElement).svg(doc.documentElement.innerHTML); + this.scale = 1; + this.dirty = false; + this.svgRootNodePart = svgRootNodePart(svgContent); + svgContent = innerSvgContent(svgContent); + svgContent = stripSvgMetadata(svgContent); + console.log(svgContent); + // const doc: XMLDocument = new DOMParser().parseFromString(svgContent, 'image/svg+xml'); + this.svgShape = SVG().addTo(this.rootElement).svg(svgContent); this.svgShape.node.style.overflow = 'visible'; this.svgShape.node.style['user-select'] = 'none'; this.box = this.svgShape.bbox(); @@ -71,6 +86,24 @@ export class ScadaSymbolEditObject { this.shapeResize$.observe(this.rootElement); } + public getContent(): string { + if (this.svgShape) { + let svgContent = innerSvgContentFromSvgjs(this.svgShape.svg()); + console.log(svgContent); + svgContent = `${this.svgRootNodePart}\n${svgContent}\n`; + const doc: XMLDocument = new DOMParser().parseFromString(svgContent, 'image/svg+xml'); + const root = $(doc.documentElement); + root.find('.tb-element').removeClass('tb-element').each((i, e) => { + // + }); + root.find('.tooltipstered').removeClass('tooltipstered'); + svgContent = doc.documentElement.outerHTML; + return svgContent; + } else { + return null; + } + } + public cancelEdit() { this.elements.filter(e => e.isEditing()).forEach(e => e.stopEdit(true)); } @@ -196,6 +229,14 @@ export class ScadaSymbolEditObject { if (this.shapeResize$) { this.shapeResize$.disconnect(); } + this.destroyElements(); + } + + private destroyElements() { + this.elements.forEach(e => { + e.destroy(); + }); + this.elements.length = 0; } private resize() { @@ -269,14 +310,6 @@ const hasBBox = (e: Element): boolean => { } }; -const textTooltip = (el: JQuery, text: string) => { - el.tooltipster({ - theme: ['iot-svg'], - trigger: 'hover', - content: text - }); -}; - const isDomRectContained = (target: DOMRect, container: DOMRect, horizontalGap = 0, verticalGap = 0): boolean => ( target.left >= container.left - horizontalGap && target.left + target.width <= container.left + container.width + horizontalGap && @@ -403,6 +436,7 @@ export class ScadaSymbolElement { this.element.attr('tb:tag', null); this.unhighlight(); this.createAddTagTooltip(); + this.editObject.dirty = true; } public setTag(tag: string) { @@ -410,6 +444,7 @@ export class ScadaSymbolElement { this.tag = tag; this.element.attr('tb:tag', tag); this.createTagTooltip(); + this.editObject.dirty = true; } public startEdit(onCancelEdit: () => void) { @@ -456,6 +491,12 @@ export class ScadaSymbolElement { this.innerTooltipOffset = offset + (center - this.box.cy) * this.editObject.scale; } + public destroy() { + if (this.tooltip) { + this.tooltip.destroy(); + } + } + private unscaled(size: number): number { return size / (this.editObject.scale * this.editObject.svgShape.zoom()); } diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.module.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.module.ts index 9366321392..36d4cab1a2 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.module.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.module.ts @@ -21,12 +21,14 @@ import { HomeComponentsModule } from '@modules/home/components/home-components.m import { ScadaSymbolComponent } from '@home/pages/scada-symbol/scada-symbol.component'; import { ScadaSymbolEditorComponent } from '@home/pages/scada-symbol/scada-symbol-editor.component'; import { ScadaSymbolTooltipComponentsModule } from '@home/pages/scada-symbol/scada-symbol-tooltip.components'; +import { ScadaSymbolMetadataComponent } from '@home/pages/scada-symbol/scada-symbol-metadata.component'; @NgModule({ declarations: [ ScadaSymbolEditorComponent, - ScadaSymbolComponent + ScadaSymbolComponent, + ScadaSymbolMetadataComponent ], imports: [ CommonModule, diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index 265c2c10d2..fbb815fc40 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -3410,7 +3410,14 @@ "delete-symbols-title": "Are you sure you want to delete { count, plural, =1 {1 SCADA symbol} other {# SCADA symbols} }?", "delete-symbols-text": "Be careful, after the confirmation all selected SCADA symbols will be removed and all related data will become unrecoverable.", "include-system-symbols": "Include system symbols", - "symbol-preview": "Symbol preview" + "symbol-preview": "Symbol preview", + "general": "General", + "tags": "Tags", + "behavior": "Behavior", + "properties": "Properties", + "title": "Title", + "state-render-function": "State render function", + "preview": "Preview" }, "item": { "selected": "Selected" From 32d34e0acc54a24ecc6068dabb392d49c1506e6a Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Tue, 21 May 2024 19:26:48 +0300 Subject: [PATCH 037/442] UI: SCADA symbol preview mode. --- ui-ngx/src/app/core/utils.ts | 5 + .../lib/svg/iot-svg-widget.component.html | 2 +- .../lib/svg/iot-svg-widget.component.ts | 39 ++++- .../widget/lib/svg/iot-svg-widget.models.ts | 4 +- .../widget/lib/svg/iot-svg.models.ts | 87 +++++----- .../scada-symbol/scada-symbol.component.html | 44 +++-- .../scada-symbol/scada-symbol.component.ts | 150 ++++++++++++++++-- .../pages/scada-symbol/scada-symbol.models.ts | 63 +++----- 8 files changed, 269 insertions(+), 125 deletions(-) diff --git a/ui-ngx/src/app/core/utils.ts b/ui-ngx/src/app/core/utils.ts index 04c0a9fc9b..545f82ddf5 100644 --- a/ui-ngx/src/app/core/utils.ts +++ b/ui-ngx/src/app/core/utils.ts @@ -229,6 +229,11 @@ export const updateFileContent = (file: File, newContent: string): File => { return new File([blob], file.name, {type: file.type}); }; +export const createFileFromContent = (content: string, name: string, type: string): File => { + const blob = new Blob([content], { type }); + return new File([blob], name, { type }); +}; + const scrollRegex = /(auto|scroll)/; function parentNodes(node: Node, nodes: Node[]): Node[] { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.component.html index b2f4ce1815..ee005b98c0 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.component.html @@ -22,5 +22,5 @@
- +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.component.ts index c7b5e87723..608feee493 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.component.ts @@ -35,8 +35,9 @@ import { iotSvgWidgetDefaultSettings, IotSvgWidgetSettings } from '@home/components/widget/lib/svg/iot-svg-widget.models'; -import { Observable } from 'rxjs'; +import { Observable, of } from 'rxjs'; import { backgroundStyle, ComponentStyle, overlayStyle } from '@shared/models/widget-settings.models'; +import { ImageService } from '@core/http/image.service'; @Component({ selector: 'tb-iot-svg-widget', @@ -63,6 +64,7 @@ export class IotSvgWidgetComponent extends constructor(protected imagePipe: ImagePipe, protected sanitizer: DomSanitizer, private renderer: Renderer2, + private imageService: ImageService, protected cd: ChangeDetectorRef, private http: HttpClient) { super(cd); @@ -75,15 +77,40 @@ export class IotSvgWidgetComponent extends this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer); this.overlayStyle = overlayStyle(this.settings.background.overlay); - this.iotSvgObject = new IotSvgObject(this.ctx, this.settings.iotSvg, this.settings.iotSvgObject); + let svgContent$: Observable; + if (this.settings.iotSvgContent) { + svgContent$ = of(this.settings.iotSvgContent); + } else if (this.settings.iotSvgUrl) { + svgContent$ = this.imageService.getImageString(this.settings.iotSvgUrl); + } else { + svgContent$ = this.http.get(this.settings.iotSvg, {responseType: 'text'}); + } + + svgContent$.subscribe( + (content) => { + this.initObject(content); + } + ); + } + + private initObject(svgContent: string) { + this.iotSvgObject = new IotSvgObject(this.ctx, svgContent, this.settings.iotSvgObject); this.iotSvgObject.onError((error) => { this.ctx.showErrorToast(error, 'bottom', 'center', this.ctx.toastTargetId, true); }); - this.iotSvgObject.init().subscribe(); + this.iotSvgObject.init(); + if (this.iotSvgShape) { + this.iotSvgObject.addTo(this.iotSvgShape.nativeElement); + if (this.autoScale) { + this.onResize(); + } + } } ngAfterViewInit(): void { - this.iotSvgObject.addTo(this.iotSvgShape.nativeElement); + if (this.iotSvgObject) { + this.iotSvgObject.addTo(this.iotSvgShape.nativeElement); + } if (this.autoScale) { this.shapeResize$ = new ResizeObserver(() => { this.onResize(); @@ -114,6 +141,8 @@ export class IotSvgWidgetComponent extends private onResize() { const shapeWidth = this.iotSvgShape.nativeElement.getBoundingClientRect().width; const shapeHeight = this.iotSvgShape.nativeElement.getBoundingClientRect().height; - this.iotSvgObject.setSize(shapeWidth, shapeHeight); + if (this.iotSvgObject) { + this.iotSvgObject.setSize(shapeWidth, shapeHeight); + } } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.models.ts index e4992ae62f..b3223c5b79 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.models.ts @@ -18,7 +18,9 @@ import { IotSvgObjectSettings } from '@home/components/widget/lib/svg/iot-svg.mo import { BackgroundSettings, BackgroundType } from '@shared/models/widget-settings.models'; export interface IotSvgWidgetSettings { - iotSvg: string; + iotSvg?: string; + iotSvgUrl?: string; + iotSvgContent?: string; iotSvgObject: IotSvgObjectSettings; background: BackgroundSettings; } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts index 7277ea0751..b037b947ed 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts @@ -34,7 +34,7 @@ import { parseFunction } from '@core/utils'; import { BehaviorSubject, forkJoin, Observable, Observer } from 'rxjs'; -import { map, share } from 'rxjs/operators'; +import { share } from 'rxjs/operators'; import { ValueAction, ValueGetter, ValueSetter } from '@home/components/widget/lib/action/action-widget.models'; import { WidgetContext } from '@home/models/widget-component.models'; import { ColorProcessor, constantColor, Font } from '@shared/models/widget-settings.models'; @@ -196,45 +196,38 @@ const updateIotSvgMetadataInDom = (svgDoc: Document, metadata: IotSvgMetadata) = }; const svgPartsRegex = /()(.*)<\/svg>/gms; +const tbMetadataRegex = /.*<\/tb:metadata>/gs; -const svgMetadataRegex = /.*<\/tb:metadata>/gs; - -export const svgRootNodePart = (svgContent: string): string => { - let result = svgContent; - svgPartsRegex.lastIndex = 0; - const match = svgPartsRegex.exec(svgContent); - if (match != null && match.length > 1) { - result = match[1]; - } - return result; -}; +export interface IoTSvgContentData { + svgRootNode: string; + innerSvg: string; +} -export const innerSvgContent = (svgContent: string): string => { - let result = svgContent; +export const iotSvgContentData = (svgContent: string): IoTSvgContentData => { + const result: IoTSvgContentData = { + svgRootNode: '', + innerSvg: '' + }; svgPartsRegex.lastIndex = 0; const match = svgPartsRegex.exec(svgContent); - if (match != null && match.length > 2) { - result = match[2]; - } - return result; -}; - -export const stripSvgMetadata = (svgContent: string) => { - let result = svgContent; - svgMetadataRegex.lastIndex = 0; - const match = svgMetadataRegex.exec(svgContent); - if (match !== null && match.length) { - const metadata = match[0]; - result = result.replace(metadata, ''); + if (match != null) { + if (match.length > 1) { + result.svgRootNode = match[1]; + } + if (match.length > 2) { + let innerSvgContent = match[2]; + tbMetadataRegex.lastIndex = 0; + const metadataMatch = tbMetadataRegex.exec(svgContent); + if (metadataMatch !== null && metadataMatch.length) { + const metadata = metadataMatch[0]; + innerSvgContent = innerSvgContent.replace(metadata, ''); + } + result.innerSvg = innerSvgContent; + } } return result; }; -export const innerSvgContentFromSvgjs = (svgContent: string): string => { - const result = innerSvgContent(svgContent); - return result.replace(/svgjs:.*?=".*?"/gs, ''); -}; - const defaultGetValueSettings = (get: IotSvgBehaviorValue): GetValueSettings => ({ action: GetValueAction.DO_NOTHING, defaultValue: get.defaultValue, @@ -335,21 +328,18 @@ export class IotSvgObject { private _onError: (error: string) => void = () => {}; constructor(private ctx: WidgetContext, - private svgPath: string, - private inputSettings: IotSvgObjectSettings) {} - - public init(): Observable { - return this.ctx.http.get(this.svgPath, {responseType: 'text'}).pipe( - map((inputSvgContent) => { - const doc: XMLDocument = new DOMParser().parseFromString(inputSvgContent, 'image/svg+xml'); - this.metadata = parseIotSvgMetadataFromDom(doc); - const defaults = defaultIotSvgObjectSettings(this.metadata); - this.settings = mergeDeep({}, defaults, this.inputSettings || {}); - this.prepareMetadata(); - this.prepareSvgShape(doc); - this.initialize(); - }) - ); + private svgContent: string, + private inputSettings: IotSvgObjectSettings) { + } + + public init() { + const doc: XMLDocument = new DOMParser().parseFromString(this.svgContent, 'image/svg+xml'); + this.metadata = parseIotSvgMetadataFromDom(doc); + const defaults = defaultIotSvgObjectSettings(this.metadata); + this.settings = mergeDeep({}, defaults, this.inputSettings || {}); + this.prepareMetadata(); + this.prepareSvgShape(doc); + this.initialize(); } public onError(onError: (error: string) => void) { @@ -371,6 +361,9 @@ export class IotSvgObject { this.valueActions.forEach(v => v.destroy()); this.loadingSubject.complete(); this.loadingSubject.unsubscribe(); + if (this.svgShape) { + this.svgShape.remove(); + } } public setSize(targetWidth: number, targetHeight: number) { diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html index fb32b1decc..b04247b916 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html @@ -29,41 +29,39 @@ [showCloseDetails]="false" headerHeightPx="64" headerTitle="{{symbolData?.imageResource?.title}}"> -
+ +
- -
-
- -
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts index 7b19df3ff3..55f1abdfd2 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts @@ -18,6 +18,7 @@ import { AfterViewInit, ChangeDetectorRef, Component, + EventEmitter, HostBinding, OnDestroy, OnInit, @@ -28,16 +29,35 @@ import { PageComponent } from '@shared/components/page.component'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; import { ActivatedRoute, Router } from '@angular/router'; -import { takeUntil } from 'rxjs/operators'; +import { map, switchMap, takeUntil } from 'rxjs/operators'; import { Subject } from 'rxjs'; import { ScadaSymbolData } from '@home/pages/scada-symbol/scada-symbol.models'; -import { IotSvgMetadata, parseIotSvgMetadataFromContent } from '@home/components/widget/lib/svg/iot-svg.models'; +import { + IotSvgMetadata, IotSvgObjectSettings, + parseIotSvgMetadataFromContent, + updateIotSvgMetadataInContent +} from '@home/components/widget/lib/svg/iot-svg.models'; import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; -import { deepClone } from '@core/utils'; +import { createFileFromContent, deepClone } from '@core/utils'; import { ScadaSymbolEditorComponent, ScadaSymbolEditorData } from '@home/pages/scada-symbol/scada-symbol-editor.component'; +import { ImageService } from '@core/http/image.service'; +import { imageResourceType, IMAGES_URL_PREFIX } from '@shared/models/resource.models'; +import { HasDirtyFlag } from '@core/guards/confirm-on-exit.guard'; +import { IAliasController, IStateController, StateParams } from '@core/api/widget-api.models'; +import { EntityAliases } from '@shared/models/alias.models'; +import { Filters } from '@shared/models/query/query.models'; +import { AliasController } from '@core/api/alias-controller'; +import { EntityService } from '@core/http/entity.service'; +import { UtilsService } from '@core/services/utils.service'; +import { TranslateService } from '@ngx-translate/core'; +import { Widget, widgetType } from '@shared/models/widget.models'; +import { + iotSvgWidgetDefaultSettings, + IotSvgWidgetSettings +} from '@home/components/widget/lib/svg/iot-svg-widget.models'; @Component({ selector: 'tb-scada-symbol', @@ -45,17 +65,16 @@ import { styleUrls: ['./scada-symbol.component.scss'], encapsulation: ViewEncapsulation.None }) -export class ScadaSymbolComponent extends PageComponent implements OnInit, OnDestroy, AfterViewInit { +export class ScadaSymbolComponent extends PageComponent implements OnInit, OnDestroy, AfterViewInit, HasDirtyFlag { @HostBinding('style.width') width = '100%'; @HostBinding('style.height') height = '100%'; - @ViewChild('symbolEditor') + @ViewChild('symbolEditor', {static: false}) symbolEditor: ScadaSymbolEditorComponent; symbolData: ScadaSymbolData; symbolEditorData: ScadaSymbolEditorData; - metadata: IotSvgMetadata; previewMode = false; @@ -65,11 +84,33 @@ export class ScadaSymbolComponent extends PageComponent implements OnInit, OnDes private origSymbolData: ScadaSymbolData; + updateBreadcrumbs = new EventEmitter(); + + aliasController: IAliasController; + + previewWidgets: Array = []; + + private previewWidget: Widget; + + private forcePristine = false; + + get isDirty(): boolean { + return (this.scadaSymbolFormGroup.dirty || this.symbolEditor?.dirty) && !this.forcePristine; + } + + set isDirty(value: boolean) { + this.forcePristine = !value; + } + constructor(protected store: Store, private router: Router, private route: ActivatedRoute, private fb: UntypedFormBuilder, - private cd: ChangeDetectorRef) { + private cd: ChangeDetectorRef, + private entityService: EntityService, + private utils: UtilsService, + private translate: TranslateService, + private imageService: ImageService) { super(store); } @@ -77,6 +118,21 @@ export class ScadaSymbolComponent extends PageComponent implements OnInit, OnDes this.scadaSymbolFormGroup = this.fb.group({ metadata: [null] }); + + const entitiAliases: EntityAliases = {}; + + // @ts-ignore + const stateController: IStateController = { + getStateParams: (): StateParams => ({}) + }; + + const filters: Filters = {}; + + this.aliasController = new AliasController(this.utils, + this.entityService, + this.translate, + () => stateController, entitiAliases, filters); + this.route.data.pipe( takeUntil(this.destroy$) ).subscribe( @@ -98,8 +154,33 @@ export class ScadaSymbolComponent extends PageComponent implements OnInit, OnDes onApplyScadaSymbolConfig() { if (this.scadaSymbolFormGroup.valid) { - const svgContent = this.symbolEditor.getContent(); - console.log(svgContent); + const svgContent = this.prepareSvgContent(); + const file = createFileFromContent(svgContent, this.symbolData.imageResource.fileName, + this.symbolData.imageResource.descriptor.mediaType); + const type = imageResourceType(this.symbolData.imageResource); + let imageInfoObservable = + this.imageService.updateImage(type, this.symbolData.imageResource.resourceKey, file); + const metadata: IotSvgMetadata = this.scadaSymbolFormGroup.get('metadata').value; + if (metadata.title !== this.symbolData.imageResource.title) { + imageInfoObservable = imageInfoObservable.pipe( + switchMap(imageInfo => { + imageInfo.title = metadata.title; + return this.imageService.updateImageInfo(imageInfo); + }) + ); + } + imageInfoObservable.pipe( + switchMap(imageInfo => this.imageService.getImageString( + `${IMAGES_URL_PREFIX}/${type}/${encodeURIComponent(imageInfo.resourceKey)}`).pipe( + map(content => ({ + imageResource: imageInfo, + svgContent: content + })) + )) + ).subscribe(data => { + this.init(data); + this.updateBreadcrumbs.emit(); + }); } } @@ -107,6 +188,53 @@ export class ScadaSymbolComponent extends PageComponent implements OnInit, OnDes this.init(this.origSymbolData); } + enterPreviewMode() { + this.symbolData.svgContent = this.prepareSvgContent(); + const iotSvgObject: IotSvgObjectSettings = {}; + const settings: IotSvgWidgetSettings = {...iotSvgWidgetDefaultSettings, + ...{iotSvg: null, iotSvgContent: this.symbolData.svgContent, iotSvgObject}}; + this.previewWidget = { + typeFullFqn: 'system.iot_svg', + type: widgetType.rpc, + sizeX: 24, + sizeY: 24, + row: 0, + col: 0, + config: { + settings, + dropShadow: false, + padding: '0', + margin: '0' + } + }; + this.previewWidgets = [this.previewWidget]; + this.previewMode = true; + /*setTimeout(() => { + this.updatePreviewWidgetSettings(); + }, 2000);*/ + } + + exitPreviewMode() { + this.symbolEditorData = { + svgContent: this.symbolData.svgContent + }; + this.previewMode = false; + } + + private updatePreviewWidgetSettings() { + this.previewWidget = deepClone(this.previewWidget); + this.previewWidget.config.title = this.symbolData.imageResource.title; + this.previewWidget.config.showTitle = true; + this.previewWidget.config.padding = '48px'; + this.previewWidgets = [this.previewWidget]; + } + + private prepareSvgContent(): string { + const svgContent = this.symbolEditor.getContent(); + const metadata: IotSvgMetadata = this.scadaSymbolFormGroup.get('metadata').value; + return updateIotSvgMetadataInContent(svgContent, metadata); + } + private reset(): void { this.previewMode = false; } @@ -117,9 +245,9 @@ export class ScadaSymbolComponent extends PageComponent implements OnInit, OnDes this.symbolEditorData = { svgContent: this.symbolData.svgContent }; - this.metadata = parseIotSvgMetadataFromContent(this.symbolData.svgContent); + const metadata = parseIotSvgMetadataFromContent(this.symbolData.svgContent); this.scadaSymbolFormGroup.patchValue({ - metadata: this.metadata + metadata }, {emitEvent: false}); this.scadaSymbolFormGroup.markAsPristine(); this.cd.markForCheck(); diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts index 1fc4af8459..4cb280697b 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts @@ -18,24 +18,17 @@ import { ImageResourceInfo } from '@shared/models/resource.models'; import * as svgjs from '@svgdotjs/svg.js'; import { Box, Element, Rect, Style, SVG, Svg, Timeline } from '@svgdotjs/svg.js'; import { ResizeObserver } from '@juggle/resize-observer'; -import { DynamicComponentFactoryService } from '@core/services/dynamic-component-factory.service'; -import { Directive, ElementRef, OnDestroy, Type, ViewContainerRef } from '@angular/core'; +import { ViewContainerRef } from '@angular/core'; import { forkJoin, from } from 'rxjs'; -import { TbInject } from '@shared/decorators/tb-inject'; import { setupAddTagPanelTooltip, setupTagPanelTooltip } from '@home/pages/scada-symbol/scada-symbol-tooltip.components'; +import { iotSvgContentData } from '@home/components/widget/lib/svg/iot-svg.models'; import ITooltipsterInstance = JQueryTooltipster.ITooltipsterInstance; import TooltipPositioningSide = JQueryTooltipster.TooltipPositioningSide; import ITooltipsterHelper = JQueryTooltipster.ITooltipsterHelper; import ITooltipPosition = JQueryTooltipster.ITooltipPosition; -import { - innerSvgContent, - innerSvgContentFromSvgjs, - stripSvgMetadata, - svgRootNodePart -} from '@home/components/widget/lib/svg/iot-svg.models'; export interface ScadaSymbolData { imageResource: ImageResourceInfo; @@ -69,18 +62,15 @@ export class ScadaSymbolEditObject { } this.scale = 1; this.dirty = false; - this.svgRootNodePart = svgRootNodePart(svgContent); - svgContent = innerSvgContent(svgContent); - svgContent = stripSvgMetadata(svgContent); - console.log(svgContent); - // const doc: XMLDocument = new DOMParser().parseFromString(svgContent, 'image/svg+xml'); - this.svgShape = SVG().addTo(this.rootElement).svg(svgContent); + const contentData = iotSvgContentData(svgContent); + this.svgRootNodePart = contentData.svgRootNode; + this.svgShape = SVG().addTo(this.rootElement).svg(contentData.innerSvg); this.svgShape.node.style.overflow = 'visible'; this.svgShape.node.style['user-select'] = 'none'; this.box = this.svgShape.bbox(); this.svgShape.size(this.box.width, this.box.height); this.svgShape.viewbox(`0 0 ${this.box.width} ${this.box.height}`); - this.svgShape.style().rule('.tb-element', {cursor: 'pointer', transition: '0.2s filter ease-in-out'}); + this.svgShape.style().attr('tb:inner', true).rule('.tb-element', {cursor: 'pointer', transition: '0.2s filter ease-in-out'}); this.updateHoverFilterStyle(); this.performSetup = true; this.shapeResize$.observe(this.rootElement); @@ -88,17 +78,18 @@ export class ScadaSymbolEditObject { public getContent(): string { if (this.svgShape) { - let svgContent = innerSvgContentFromSvgjs(this.svgShape.svg()); - console.log(svgContent); - svgContent = `${this.svgRootNodePart}\n${svgContent}\n`; - const doc: XMLDocument = new DOMParser().parseFromString(svgContent, 'image/svg+xml'); - const root = $(doc.documentElement); - root.find('.tb-element').removeClass('tb-element').each((i, e) => { - // - }); - root.find('.tooltipstered').removeClass('tooltipstered'); - svgContent = doc.documentElement.outerHTML; - return svgContent; + const svgContent = this.svgShape.svg((e: Element) => { + if (e.node.hasAttribute('tb:inner')) { + return false; + } else { + e.node.classList.remove('tb-element', 'tooltipstered'); + if (!e.node.classList.length) { + e.node.removeAttribute('class'); + } + e.attr('svgjs:data', null); + } + }, false); + return `${this.svgRootNodePart}\n${svgContent}\n`; } else { return null; } @@ -270,7 +261,7 @@ export class ScadaSymbolEditObject { const whiteBlur = (2.8 / this.scale).toFixed(2); const blackBlur = (1.2 / this.scale).toFixed(2); this.hoverFilterStyle = - this.svgShape.style().rule('.hovered', + this.svgShape.style().attr('tb:inner', true).rule('.hovered', { filter: `drop-shadow(0px 0px ${whiteBlur}px white) drop-shadow(0px 0px ${whiteBlur}px white) @@ -358,6 +349,7 @@ export class ScadaSymbolElement { .x(this.box.x - groupRectPadding) .y(this.box.y - groupRectPadding) .attr({ + 'tb:inner': true, fill: 'none', rx: this.unscaled(6), stroke: 'rgba(0, 0, 0, 0.38)', @@ -682,18 +674,3 @@ export class ScadaSymbolElement { } } - -@Directive() -class TbTooltipContent implements OnDestroy { - - componentType: Type; - dynamicComponentFactoryService: DynamicComponentFactoryService; - - [key: string]: any; - constructor(@TbInject(ElementRef) public element: ElementRef) { - } - - ngOnDestroy(): void { - this.dynamicComponentFactoryService.destroyDynamicComponent(this.componentType); - } -} From d8d62979fc50b6f24ac0bc316f1ba2564345f983 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Wed, 22 May 2024 19:40:49 +0300 Subject: [PATCH 038/442] UI: Implement metadata tags section. --- .../svg/iot-svg-object-settings.component.ts | 23 ++- .../lib/svg/iot-svg-widget.component.html | 4 +- .../lib/svg/iot-svg-widget.component.ts | 4 +- ...scada-symbol-metadata-components.module.ts | 43 +++++ .../scada-symbol-metadata-tag.component.html | 74 ++++++++ .../scada-symbol-metadata-tag.component.scss | 22 +++ .../scada-symbol-metadata-tag.component.ts | 154 ++++++++++++++++ .../scada-symbol-metadata-tags.component.html | 36 ++++ .../scada-symbol-metadata-tags.component.scss | 25 +++ .../scada-symbol-metadata-tags.component.ts | 171 ++++++++++++++++++ .../scada-symbol-metadata.component.html | 6 + .../scada-symbol-metadata.component.scss | 9 +- .../scada-symbol-metadata.component.ts | 27 ++- .../scada-symbol-editor.component.ts | 8 +- .../scada-symbol/scada-symbol.component.html | 47 ++++- .../scada-symbol/scada-symbol.component.scss | 41 +++++ .../scada-symbol/scada-symbol.component.ts | 43 ++++- .../pages/scada-symbol/scada-symbol.models.ts | 22 ++- .../pages/scada-symbol/scada-symbol.module.ts | 12 +- .../assets/locale/locale.constant-en_US.json | 8 +- 20 files changed, 748 insertions(+), 31 deletions(-) create mode 100644 ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-components.module.ts create mode 100644 ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.html create mode 100644 ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.scss create mode 100644 ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.ts create mode 100644 ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.html create mode 100644 ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.scss create mode 100644 ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.ts rename ui-ngx/src/app/modules/home/pages/scada-symbol/{ => metadata-components}/scada-symbol-metadata.component.html (91%) rename ui-ngx/src/app/modules/home/pages/scada-symbol/{ => metadata-components}/scada-symbol-metadata.component.scss (88%) rename ui-ngx/src/app/modules/home/pages/scada-symbol/{ => metadata-components}/scada-symbol-metadata.component.ts (85%) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.ts index 1154dad79c..613e8b26f9 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.ts @@ -44,8 +44,9 @@ import { IotSvgPropertyRow, toPropertyRows } from '@home/components/widget/lib/settings/common/svg/iot-svg-object-settings.models'; -import { merge, Observable, Subscription } from 'rxjs'; +import { merge, Observable, of, Subscription } from 'rxjs'; import { WidgetActionCallbacks } from '@home/components/widget/action/manage-widget-actions.component.models'; +import { ImageService } from '@core/http/image.service'; @Component({ selector: 'tb-iot-svg-object-settings', @@ -74,6 +75,12 @@ export class IotSvgObjectSettingsComponent implements OnInit, OnChanges, Control @Input() svgPath = 'drawing.svg'; + @Input() + svgUrl: string; + + @Input() + svgContent: string; + @Input() aliasController: IAliasController; @@ -101,6 +108,7 @@ export class IotSvgObjectSettingsComponent implements OnInit, OnChanges, Control constructor(protected store: Store, private fb: UntypedFormBuilder, private http: HttpClient, + private imageService: ImageService, private cd: ChangeDetectorRef) { } @@ -116,7 +124,7 @@ export class IotSvgObjectSettingsComponent implements OnInit, OnChanges, Control for (const propName of Object.keys(changes)) { const change = changes[propName]; if (!change.firstChange && change.currentValue !== change.previousValue) { - if (['svgPath'].includes(propName)) { + if (['svgPath', 'svgUrl', 'svgContent'].includes(propName)) { this.loadMetadata(); } } @@ -160,7 +168,16 @@ export class IotSvgObjectSettingsComponent implements OnInit, OnChanges, Control this.validatorSubscription = null; } this.validatorTriggers = []; - this.http.get(this.svgPath, {responseType: 'text'}).subscribe( + + let svgContent$: Observable; + if (this.svgContent) { + svgContent$ = of(this.svgContent); + } else if (this.svgUrl) { + svgContent$ = this.imageService.getImageString(this.svgUrl); + } else { + svgContent$ = this.http.get(this.svgPath, {responseType: 'text'}); + } + svgContent$.subscribe( (svgContent) => { this.metadata = parseIotSvgMetadataFromContent(svgContent); this.propertyRows = toPropertyRows(this.metadata.properties); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.component.html index ee005b98c0..3a9afa0048 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.component.html @@ -17,7 +17,9 @@ -->
- + + +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.component.ts index 608feee493..2dadb5b48d 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.component.ts @@ -38,6 +38,7 @@ import { import { Observable, of } from 'rxjs'; import { backgroundStyle, ComponentStyle, overlayStyle } from '@shared/models/widget-settings.models'; import { ImageService } from '@core/http/image.service'; +import { WidgetComponent } from '@home/components/widget/widget.component'; @Component({ selector: 'tb-iot-svg-widget', @@ -61,7 +62,8 @@ export class IotSvgWidgetComponent extends private shapeResize$: ResizeObserver; - constructor(protected imagePipe: ImagePipe, + constructor(public widgetComponent: WidgetComponent, + protected imagePipe: ImagePipe, protected sanitizer: DomSanitizer, private renderer: Renderer2, private imageService: ImageService, diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-components.module.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-components.module.ts new file mode 100644 index 0000000000..5b86c23f04 --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-components.module.ts @@ -0,0 +1,43 @@ +/// +/// Copyright ยฉ 2016-2024 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 { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { SharedModule } from '@shared/shared.module'; +import { + ScadaSymbolMetadataTagComponent +} from '@home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component'; +import { ScadaSymbolMetadataComponent } from '@home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component'; +import { + ScadaSymbolMetadataTagsComponent +} from '@home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component'; + +@NgModule({ + declarations: + [ + ScadaSymbolMetadataComponent, + ScadaSymbolMetadataTagComponent, + ScadaSymbolMetadataTagsComponent + ], + imports: [ + CommonModule, + SharedModule + ], + exports: [ + ScadaSymbolMetadataComponent + ] +}) +export class ScadaSymbolMetadataComponentsModule { } diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.html new file mode 100644 index 0000000000..830a629764 --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.html @@ -0,0 +1,74 @@ + +
+ + +
+
+
scada.tag
+ + + + {{ tag }} + + + +
+ +
+ + +
+ + + + {{ 'scada.state-render-function' | translate }} + + + + + + + +
+
+ + + + {{ 'scada.on-click-action' | translate }} + + + + + + + +
+ + +
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.scss b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.scss new file mode 100644 index 0000000000..1e0bacd858 --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.scss @@ -0,0 +1,22 @@ +/** + * Copyright ยฉ 2016-2024 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. + */ +.tb-scada-symbol-metadata-tag-header { + flex: 1; + display: flex; + flex-direction: row; + gap: 8px; + padding-right: 8px; +} diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.ts new file mode 100644 index 0000000000..7ca3c909d4 --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.ts @@ -0,0 +1,154 @@ +/// +/// Copyright ยฉ 2016-2024 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, EventEmitter, + forwardRef, + Input, + OnChanges, + OnInit, Output, + SimpleChanges, ViewChild, + ViewEncapsulation +} from '@angular/core'; +import { + ControlValueAccessor, + NG_VALUE_ACCESSOR, + UntypedFormBuilder, + UntypedFormGroup, + Validators +} from '@angular/forms'; +import { IotSvgTag } from '@home/components/widget/lib/svg/iot-svg.models'; +import { MatExpansionPanel } from '@angular/material/expansion'; + +@Component({ + selector: 'tb-scada-symbol-metadata-tag', + templateUrl: './scada-symbol-metadata-tag.component.html', + styleUrls: ['./scada-symbol-metadata-tag.component.scss'], + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => ScadaSymbolMetadataTagComponent), + multi: true + } + ], + encapsulation: ViewEncapsulation.None +}) +export class ScadaSymbolMetadataTagComponent implements ControlValueAccessor, OnInit, OnChanges { + + @ViewChild('expansionPanel') + expansionPanel: MatExpansionPanel; + + @Input() + disabled: boolean; + + @Input() + tags: string[]; + + @Output() + tagRemoved = new EventEmitter(); + + availableTags: string[]; + + tagFormGroup: UntypedFormGroup; + + modelValue: IotSvgTag; + + private propagateChange = (_val: any) => {}; + + constructor(private fb: UntypedFormBuilder, + private cd: ChangeDetectorRef) { + } + + ngOnInit() { + this.availableTags = (this.tags || []).concat(); + this.tagFormGroup = this.fb.group({ + tag: [null, [Validators.required]], + stateRenderFunction: [null, []], + clickAction: [null, []] + }); + this.tagFormGroup.valueChanges.subscribe( + () => this.updateModel() + ); + } + + ngOnChanges(changes: SimpleChanges): void { + for (const propName of Object.keys(changes)) { + const change = changes[propName]; + if (!change.firstChange && change.currentValue !== change.previousValue) { + if (['tags'].includes(propName)) { + this.availableTags = (this.tags || []).concat(); + if (this.modelValue?.tag && !this.availableTags.includes(this.modelValue?.tag)) { + this.availableTags.push(this.modelValue?.tag); + this.availableTags.sort(); + } + } + } + } + } + + registerOnChange(fn: any): void { + this.propagateChange = fn; + } + + registerOnTouched(fn: any): void { + } + + setDisabledState(isDisabled: boolean): void { + this.disabled = isDisabled; + if (isDisabled) { + this.tagFormGroup.disable({emitEvent: false}); + } else { + this.tagFormGroup.enable({emitEvent: false}); + } + } + + writeValue(value: IotSvgTag): void { + this.modelValue = value; + if (value?.tag && !(this.tags || []).includes(value?.tag)) { + this.availableTags = (this.tags || []).concat(value.tag).sort(); + } + const clickAction = value?.actions && value?.actions.click ? value.actions.click.actionFunction : null; + this.tagFormGroup.patchValue( + { + tag: value?.tag, + stateRenderFunction: value?.stateRenderFunction, + clickAction + }, {emitEvent: false} + ); + } + + private updateModel() { + const value = this.tagFormGroup.value; + if (value.tag && !this.modelValue?.tag) { + this.expansionPanel.open(); + } + this.modelValue = { + tag: value.tag, + stateRenderFunction: value.stateRenderFunction + }; + if (value.clickAction) { + this.modelValue.actions = { + click: { + actionFunction: value.clickAction + } + }; + } else { + this.modelValue.actions = null; + } + this.propagateChange(this.modelValue); + } +} diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.html new file mode 100644 index 0000000000..fc6a6c5265 --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.html @@ -0,0 +1,36 @@ + +
+
+
+ + +
+
+
+ +
+
+ + {{ 'scada.no-tags' | translate }} + diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.scss b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.scss new file mode 100644 index 0000000000..1e2ce80fce --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.scss @@ -0,0 +1,25 @@ +/** + * Copyright ยฉ 2016-2024 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. + */ +.tb-scada-symbol-metadata-tags { + .tb-scada-symbol-metadata-tags-list { + display: flex; + flex-direction: column; + gap: 8px; + } + .tb-no-tags { + height: 60px; + } +} diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.ts new file mode 100644 index 0000000000..d30c33aa0f --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.ts @@ -0,0 +1,171 @@ +/// +/// Copyright ยฉ 2016-2024 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, forwardRef, Input, OnChanges, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core'; +import { + AbstractControl, + ControlValueAccessor, + NG_VALIDATORS, + NG_VALUE_ACCESSOR, + UntypedFormArray, + UntypedFormBuilder, + UntypedFormControl, + UntypedFormGroup, + ValidationErrors, + Validator +} from '@angular/forms'; +import { IotSvgTag } from '@home/components/widget/lib/svg/iot-svg.models'; + +const tagValidator = (control: AbstractControl): ValidationErrors | null => { + const tag: IotSvgTag = control.value; + if (!tag.tag) { + return { + tag: true + }; + } + return null; +}; + +@Component({ + selector: 'tb-scada-symbol-metadata-tags', + templateUrl: './scada-symbol-metadata-tags.component.html', + styleUrls: ['./scada-symbol-metadata-tags.component.scss'], + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => ScadaSymbolMetadataTagsComponent), + multi: true + }, + { + provide: NG_VALIDATORS, + useExisting: forwardRef(() => ScadaSymbolMetadataTagsComponent), + multi: true + } + ], + encapsulation: ViewEncapsulation.None +}) +export class ScadaSymbolMetadataTagsComponent implements ControlValueAccessor, OnInit, Validator, OnChanges { + + @Input() + disabled: boolean; + + @Input() + tags: string[]; + + availableTags: string[]; + + tagsFormGroup: UntypedFormGroup; + + private propagateChange = (_val: any) => {}; + + constructor(private fb: UntypedFormBuilder) { + } + + ngOnInit() { + this.tagsFormGroup = this.fb.group({ + tags: this.fb.array([]) + }); + this.updateAvailableTags(); + this.tagsFormGroup.valueChanges.subscribe( + () => { + let tags: IotSvgTag[] = this.tagsFormGroup.get('tags').value; + if (tags) { + tags = tags.filter(t => !!t.tag); + } + this.updateAvailableTags(); + this.propagateChange(tags); + } + ); + } + + ngOnChanges(changes: SimpleChanges): void { + for (const propName of Object.keys(changes)) { + const change = changes[propName]; + if (!change.firstChange && change.currentValue !== change.previousValue) { + if (['tags'].includes(propName)) { + this.updateAvailableTags(); + } + } + } + } + + registerOnChange(fn: any): void { + this.propagateChange = fn; + } + + registerOnTouched(fn: any): void { + } + + setDisabledState(isDisabled: boolean): void { + this.disabled = isDisabled; + if (isDisabled) { + this.tagsFormGroup.disable({emitEvent: false}); + } else { + this.tagsFormGroup.enable({emitEvent: false}); + } + } + + writeValue(value: IotSvgTag[] | undefined): void { + const tags= value || []; + this.tagsFormGroup.setControl('tags', this.prepareTagsFormArray(tags), {emitEvent: false}); + } + + public validate(c: UntypedFormControl) { + const valid = this.tagsFormGroup.valid; + return valid ? null : { + tags: { + valid: false, + }, + }; + } + + tagsFormArray(): UntypedFormArray { + return this.tagsFormGroup.get('tags') as UntypedFormArray; + } + + trackByTag(index: number, tagControl: AbstractControl): any { + return tagControl; + } + + removeTag(index: number) { + (this.tagsFormGroup.get('tags') as UntypedFormArray).removeAt(index); + } + + addTag() { + const tag: IotSvgTag = { + tag: null + }; + const tagsArray = this.tagsFormGroup.get('tags') as UntypedFormArray; + const tagControl = this.fb.control(tag, [tagValidator]); + tagsArray.push(tagControl); + } + + private prepareTagsFormArray(tags: IotSvgTag[] | undefined): UntypedFormArray { + const tagsControls: Array = []; + if (tags) { + tags.forEach((tag) => { + tagsControls.push(this.fb.control(tag, [tagValidator])); + }); + } + return this.fb.array(tagsControls); + } + + private updateAvailableTags() { + const svgTags: IotSvgTag[] = this.tagsFormGroup.get('tags').value; + const usedTags = (svgTags || []).filter(t => !!t.tag).map(t => t.tag); + this.availableTags = (this.tags || []).filter(t => !usedTags.includes(t)); + } +} diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-metadata.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.html similarity index 91% rename from ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-metadata.component.html rename to ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.html index f4770bd823..13348302d0 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-metadata.component.html +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.html @@ -51,5 +51,11 @@
+
+ + +
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-metadata.component.scss b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.scss similarity index 88% rename from ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-metadata.component.scss rename to ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.scss index 48cc8471b8..bfaf8b0529 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-metadata.component.scss +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.scss @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -@import '../../../../../scss/constants'; +@import '../../../../../../scss/constants'; .tb-scada-symbol-metadata { display: flex; @@ -61,5 +61,12 @@ gap: 8px; } } + .tb-form-panel { + .mat-expansion-panel.tb-settings { + & > .mat-expansion-panel-header { + font-weight: 400; + } + } + } } } diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-metadata.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.ts similarity index 85% rename from ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-metadata.component.ts rename to ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.ts index 56f0a2d16b..966115c44e 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-metadata.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.ts @@ -14,12 +14,15 @@ /// limitations under the License. /// -import { Component, forwardRef, Input, OnInit } from '@angular/core'; +import { Component, forwardRef, Input, OnInit, ViewEncapsulation } from '@angular/core'; import { ControlValueAccessor, + NG_VALIDATORS, NG_VALUE_ACCESSOR, UntypedFormBuilder, + UntypedFormControl, UntypedFormGroup, + Validator, Validators } from '@angular/forms'; import { PageComponent } from '@shared/components/page.component'; @@ -39,14 +42,23 @@ import { TranslateService } from '@ngx-translate/core'; provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ScadaSymbolMetadataComponent), multi: true + }, + { + provide: NG_VALIDATORS, + useExisting: forwardRef(() => ScadaSymbolMetadataComponent), + multi: true } - ] + ], + encapsulation: ViewEncapsulation.None }) -export class ScadaSymbolMetadataComponent extends PageComponent implements OnInit, ControlValueAccessor { +export class ScadaSymbolMetadataComponent extends PageComponent implements OnInit, ControlValueAccessor, Validator { @Input() disabled: boolean; + @Input() + tags: string[]; + private modelValue: IotSvgMetadata; private propagateChange = null; @@ -118,6 +130,15 @@ export class ScadaSymbolMetadataComponent extends PageComponent implements OnIni ); } + public validate(c: UntypedFormControl) { + const valid = this.metadataFormGroup.valid; + return valid ? null : { + metadata: { + valid: false, + }, + }; + } + private updateModel() { const metadata: IotSvgMetadata = this.metadataFormGroup.getRawValue(); this.modelValue = metadata; diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts index 833f96ea67..cd25aa7063 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts @@ -17,11 +17,11 @@ import { AfterViewInit, Component, - ElementRef, + ElementRef, EventEmitter, Input, OnChanges, OnDestroy, - OnInit, + OnInit, Output, SimpleChanges, ViewChild, ViewContainerRef, @@ -47,6 +47,9 @@ export class ScadaSymbolEditorComponent implements OnInit, OnDestroy, AfterViewI @Input() data: ScadaSymbolEditorData; + @Output() + tags = new EventEmitter(); + scadaSymbolEditObject: ScadaSymbolEditObject; constructor(private viewContainerRef: ViewContainerRef) { @@ -58,6 +61,7 @@ export class ScadaSymbolEditorComponent implements OnInit, OnDestroy, AfterViewI ngAfterViewInit() { this.scadaSymbolEditObject = new ScadaSymbolEditObject(this.iotSvgShape.nativeElement, this.viewContainerRef); + this.scadaSymbolEditObject.tagsUpdated.subscribe(tags => this.tags.emit(tags)); if (this.data) { this.scadaSymbolEditObject.setContent(this.data.svgContent); } diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html index b04247b916..82b415e570 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html @@ -29,14 +29,43 @@ [showCloseDetails]="false" headerHeightPx="64" headerTitle="{{symbolData?.imageResource?.title}}"> - +
+
+ + + + +
+
+
+ + +
+
+
- +
-
+
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.scss b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.scss index bfaf8b0529..7b923e1688 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.scss +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.scss @@ -41,6 +41,7 @@ } } .tb-scada-symbol-metadata-content { + display: flex; & > .mat-content { padding-top: 8px; @media #{$mat-xs} { @@ -60,6 +61,9 @@ @media #{$mat-xs} { gap: 8px; } + &.overflow-hidden { + overflow: hidden; + } } .tb-form-panel { .mat-expansion-panel.tb-settings { diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.ts index 966115c44e..d8b6267a8f 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.ts @@ -14,7 +14,7 @@ /// limitations under the License. /// -import { Component, forwardRef, Input, OnInit, ViewEncapsulation } from '@angular/core'; +import { Component, forwardRef, Input, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; import { ControlValueAccessor, NG_VALIDATORS, @@ -29,9 +29,11 @@ import { PageComponent } from '@shared/components/page.component'; import { IotSvgMetadata } from '@home/components/widget/lib/svg/iot-svg.models'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; -import { WidgetConfigMode, widgetType } from '@shared/models/widget.models'; import { ToggleHeaderOption } from '@shared/components/toggle-header.component'; import { TranslateService } from '@ngx-translate/core'; +import { + ScadaSymbolMetadataTagsComponent +} from '@home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component'; @Component({ selector: 'tb-scada-symbol-metadata', @@ -53,6 +55,9 @@ import { TranslateService } from '@ngx-translate/core'; }) export class ScadaSymbolMetadataComponent extends PageComponent implements OnInit, ControlValueAccessor, Validator { + @ViewChild('symbolMetadataTags') + symbolMetadataTags: ScadaSymbolMetadataTagsComponent; + @Input() disabled: boolean; @@ -130,6 +135,16 @@ export class ScadaSymbolMetadataComponent extends PageComponent implements OnIni ); } + editTagStateRenderFunction(tag: string): void { + this.selectedOption = 'tags'; + this.symbolMetadataTags.editTagStateRenderFunction(tag); + } + + editTagClickAction(tag: string): void { + this.selectedOption = 'tags'; + this.symbolMetadataTags.editTagClickAction(tag); + } + public validate(c: UntypedFormControl) { const valid = this.metadataFormGroup.valid; return valid ? null : { @@ -144,7 +159,4 @@ export class ScadaSymbolMetadataComponent extends PageComponent implements OnIni this.modelValue = metadata; this.propagateChange(this.modelValue); } - - protected readonly WidgetConfigMode = WidgetConfigMode; - protected readonly widgetType = widgetType; } diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts index cd25aa7063..10c2b3f7f0 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts @@ -17,17 +17,17 @@ import { AfterViewInit, Component, - ElementRef, EventEmitter, + ElementRef, Input, OnChanges, OnDestroy, - OnInit, Output, + OnInit, SimpleChanges, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core'; -import { ScadaSymbolEditObject } from '@home/pages/scada-symbol/scada-symbol.models'; +import { ScadaSymbolEditObject, ScadaSymbolEditObjectCallbacks } from '@home/pages/scada-symbol/scada-symbol.models'; export interface ScadaSymbolEditorData { svgContent: string; @@ -47,8 +47,8 @@ export class ScadaSymbolEditorComponent implements OnInit, OnDestroy, AfterViewI @Input() data: ScadaSymbolEditorData; - @Output() - tags = new EventEmitter(); + @Input() + editObjectCallbacks: ScadaSymbolEditObjectCallbacks; scadaSymbolEditObject: ScadaSymbolEditObject; @@ -60,8 +60,7 @@ export class ScadaSymbolEditorComponent implements OnInit, OnDestroy, AfterViewI ngAfterViewInit() { this.scadaSymbolEditObject = new ScadaSymbolEditObject(this.iotSvgShape.nativeElement, - this.viewContainerRef); - this.scadaSymbolEditObject.tagsUpdated.subscribe(tags => this.tags.emit(tags)); + this.viewContainerRef, this.editObjectCallbacks); if (this.data) { this.scadaSymbolEditObject.setContent(this.data.svgContent); } @@ -86,13 +85,8 @@ export class ScadaSymbolEditorComponent implements OnInit, OnDestroy, AfterViewI this.scadaSymbolEditObject.destroy(); } - get dirty(): boolean { - return this.scadaSymbolEditObject?.dirty; - } - getContent(): string { return this.scadaSymbolEditObject?.getContent(); } - } diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.component.scss b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.component.scss index 1ea820b6a2..43613b6d40 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.component.scss +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.component.scss @@ -21,6 +21,9 @@ &.column { flex-direction: column; } + &.flex-start { + align-items: start; + } .tb-confirm-text { font-size: 14px; diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts index faf091c5b7..813a652af1 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts @@ -189,6 +189,12 @@ class ScadaSymbolTagInputPanelComponent extends ScadaSymbolPanelComponent implem (click)="onUpdateTag()"> edit + + +
scada.on-click-action
+ + +
`, + styleUrls: ['./scada-symbol-tooltip.component.scss'], + encapsulation: ViewEncapsulation.None +}) +class ScadaSymbolTagSettingsComponent extends ScadaSymbolPanelComponent implements OnInit, AfterViewInit { + + hasStateRenderFunction = false; + + hasClickAction = false; + + constructor(public element: ElementRef) { + super(element); + } + + ngOnInit() { + } + + updateFunctionsState() { + this.hasStateRenderFunction = this.symbolElement.hasStateRenderFunction(); + this.hasClickAction = this.symbolElement.hasClickAction(); + } + + editStateRenderFunction() { + this.symbolElement.editStateRenderFunction(); + } + + editClickAction() { + this.symbolElement.editClickAction(); + } +} + @NgModule({ declarations: [ ScadaSymbolAddTagPanelComponent, ScadaSymbolTagInputPanelComponent, ScadaSymbolTagPanelComponent, - ScadaSymbolRemoveTagConfirmComponent + ScadaSymbolRemoveTagConfirmComponent, + ScadaSymbolTagSettingsComponent ], imports: [ CommonModule, diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html index 82b415e570..449bf95bc7 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html @@ -64,6 +64,7 @@
@@ -84,13 +85,13 @@ {{ 'scada.preview' | translate }}
- - + +
+
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-row.component.scss b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-row.component.scss new file mode 100644 index 0000000000..d0592c431e --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-row.component.scss @@ -0,0 +1,26 @@ +/** + * Copyright ยฉ 2016-2024 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. + */ +.tb-scada-symbol-metadata-behavior-row { + .tb-id-field { + flex: 1 1 40%; + } + .tb-name-field { + flex: 1 1 40%; + } + .tb-type-field { + flex: 1 1 20%; + } +} diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-row.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-row.component.ts new file mode 100644 index 0000000000..277d9fe4ce --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-row.component.ts @@ -0,0 +1,172 @@ +/// +/// Copyright ยฉ 2016-2024 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, + ElementRef, + EventEmitter, + forwardRef, + Input, + OnInit, + Output, + ViewChild, + ViewEncapsulation +} from '@angular/core'; +import { + AbstractControl, + ControlValueAccessor, + NG_VALUE_ACCESSOR, + UntypedFormBuilder, + UntypedFormGroup, + ValidationErrors +} from '@angular/forms'; +import { MatDialog } from '@angular/material/dialog'; +import { + IotSvgBehavior, + IotSvgBehaviorAction, + IotSvgBehaviorType, + iotSvgBehaviorTypes, + iotSvgBehaviorTypeTranslations, + IotSvgBehaviorValue +} from '@home/components/widget/lib/svg/iot-svg.models'; + +export const behaviorValid = (behavior: IotSvgBehavior): boolean => { + if (!behavior.id || !behavior.name || !behavior.type) { + return false; + } + switch (behavior.type) { + case IotSvgBehaviorType.value: + const valueBehavior = behavior as IotSvgBehaviorValue; + if (!valueBehavior.valueType) { + return false; + } + break; + case IotSvgBehaviorType.action: + const actionBehavior = behavior as IotSvgBehaviorAction; + if (!actionBehavior.valueToDataType) { + return false; + } + break; + case IotSvgBehaviorType.widgetAction: + break; + } + return true; +}; + +export const behaviorValidator = (control: AbstractControl): ValidationErrors | null => { + const behavior: IotSvgBehavior = control.value; + if (!behaviorValid(behavior)) { + return { + behavior: true + }; + } + return null; +}; + +@Component({ + selector: 'tb-scada-symbol-metadata-behavior-row', + templateUrl: './scada-symbol-behavior-row.component.html', + styleUrls: ['./scada-symbol-behavior-row.component.scss'], + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => ScadaSymbolBehaviorRowComponent), + multi: true + } + ], + encapsulation: ViewEncapsulation.None +}) +export class ScadaSymbolBehaviorRowComponent implements ControlValueAccessor, OnInit { + + @ViewChild('idInput') + idInput: ElementRef; + + iotSvgBehaviorTypes = iotSvgBehaviorTypes; + iotSvgBehaviorTypeTranslations = iotSvgBehaviorTypeTranslations; + + @Input() + disabled: boolean; + + @Output() + behaviorRemoved = new EventEmitter(); + + behaviorRowFormGroup: UntypedFormGroup; + + modelValue: IotSvgBehavior; + + private propagateChange = (_val: any) => {}; + + constructor(private fb: UntypedFormBuilder, + private dialog: MatDialog, + private cd: ChangeDetectorRef) { + } + + ngOnInit() { + this.behaviorRowFormGroup = this.fb.group({ + id: [null, []], + name: [null, []], + type: [null, []] + }); + this.behaviorRowFormGroup.valueChanges.subscribe( + () => this.updateModel() + ); + } + + registerOnChange(fn: any): void { + this.propagateChange = fn; + } + + registerOnTouched(fn: any): void { + } + + setDisabledState(isDisabled: boolean): void { + this.disabled = isDisabled; + if (isDisabled) { + this.behaviorRowFormGroup.disable({emitEvent: false}); + } else { + this.behaviorRowFormGroup.enable({emitEvent: false}); + } + } + + writeValue(value: IotSvgBehavior): void { + this.modelValue = value; + this.behaviorRowFormGroup.patchValue( + { + id: value?.id, + name: value?.name, + type: value?.type + }, {emitEvent: false} + ); + this.cd.markForCheck(); + } + + editBehavior() { + + } + + focus() { + this.idInput.nativeElement.scrollIntoView(); + this.idInput.nativeElement.focus(); + } + + private updateModel() { + const value: IotSvgBehavior = this.behaviorRowFormGroup.value; + this.modelValue = {...this.modelValue, ...value}; + this.propagateChange(this.modelValue); + } + +} diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.html new file mode 100644 index 0000000000..28efaca269 --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.html @@ -0,0 +1,60 @@ + +
+
+
+
scada.behavior.id
+
scada.behavior.name
+
scada.behavior.type
+
+
+
+
+ + +
+ +
+
+
+
+
+ +
+
+ + + {{ 'scada.behavior.no-behaviors' | translate }} + diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.scss b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.scss new file mode 100644 index 0000000000..a9fd4df110 --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.scss @@ -0,0 +1,43 @@ +/** + * Copyright ยฉ 2016-2024 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. + */ +.tb-scada-symbol-behaviors { + flex: 1; + margin: 12px; + .tb-form-table-header-cell { + &.tb-id-header { + flex: 1 1 40%; + } + &.tb-name-header { + flex: 1 1 40%; + } + &.tb-type-header { + flex: 1 1 20%; + } + &.tb-actions-header { + width: 120px; + min-width: 120px; + } + } + .tb-form-table { + overflow: hidden; + } + .tb-form-table-body { + overflow: auto; + tb-scada-symbol-metadata-behavior-row { + overflow: hidden; + } + } +} diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.ts new file mode 100644 index 0000000000..d06e790784 --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.ts @@ -0,0 +1,177 @@ +/// +/// Copyright ยฉ 2016-2024 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, + forwardRef, + HostBinding, + Input, + OnInit, + QueryList, + ViewChildren, + ViewEncapsulation +} from '@angular/core'; +import { + AbstractControl, + ControlValueAccessor, + NG_VALIDATORS, + NG_VALUE_ACCESSOR, + UntypedFormArray, + UntypedFormBuilder, + UntypedFormControl, + UntypedFormGroup, + Validator +} from '@angular/forms'; +import { IotSvgBehavior, IotSvgBehaviorType } from '@home/components/widget/lib/svg/iot-svg.models'; +import { ValueType } from '@shared/models/constants'; +import { CdkDragDrop } from '@angular/cdk/drag-drop'; +import { + behaviorValid, + behaviorValidator, + ScadaSymbolBehaviorRowComponent +} from '@home/pages/scada-symbol/metadata-components/scada-symbol-behavior-row.component'; + +@Component({ + selector: 'tb-scada-symbol-metadata-behaviors', + templateUrl: './scada-symbol-behaviors.component.html', + styleUrls: ['./scada-symbol-behaviors.component.scss'], + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => ScadaSymbolBehaviorsComponent), + multi: true + }, + { + provide: NG_VALIDATORS, + useExisting: forwardRef(() => ScadaSymbolBehaviorsComponent), + multi: true + } + ], + encapsulation: ViewEncapsulation.None +}) +export class ScadaSymbolBehaviorsComponent implements ControlValueAccessor, OnInit, Validator { + + @HostBinding('style.display') styleDisplay = 'flex'; + @HostBinding('style.overflow') styleOverflow = 'hidden'; + + @ViewChildren(ScadaSymbolBehaviorRowComponent) + behaviorRows: QueryList; + + @Input() + disabled: boolean; + + behaviorsFormGroup: UntypedFormGroup; + + get dragEnabled(): boolean { + return this.behaviorsFormArray().controls.length > 1; + } + + private propagateChange = (_val: any) => {}; + + constructor(private fb: UntypedFormBuilder) { + } + + ngOnInit() { + this.behaviorsFormGroup = this.fb.group({ + behaviors: this.fb.array([]) + }); + this.behaviorsFormGroup.valueChanges.subscribe( + () => { + let behaviors: IotSvgBehavior[] = this.behaviorsFormGroup.get('behaviors').value; + if (behaviors) { + behaviors = behaviors.filter(b => behaviorValid(b)); + } + this.propagateChange(behaviors); + } + ); + } + + registerOnChange(fn: any): void { + this.propagateChange = fn; + } + + registerOnTouched(fn: any): void { + } + + setDisabledState(isDisabled: boolean): void { + this.disabled = isDisabled; + if (isDisabled) { + this.behaviorsFormGroup.disable({emitEvent: false}); + } else { + this.behaviorsFormGroup.enable({emitEvent: false}); + } + } + + writeValue(value: IotSvgBehavior[] | undefined): void { + const behaviors= value || []; + this.behaviorsFormGroup.setControl('behaviors', this.prepareBehaviorsFormArray(behaviors), {emitEvent: false}); + } + + public validate(c: UntypedFormControl) { + const valid = this.behaviorsFormGroup.valid; + return valid ? null : { + behaviors: { + valid: false, + }, + }; + } + + behaviorDrop(event: CdkDragDrop) { + const behaviorsArray = this.behaviorsFormGroup.get('behaviors') as UntypedFormArray; + const behavior = behaviorsArray.at(event.previousIndex); + behaviorsArray.removeAt(event.previousIndex); + behaviorsArray.insert(event.currentIndex, behavior); + } + + behaviorsFormArray(): UntypedFormArray { + return this.behaviorsFormGroup.get('behaviors') as UntypedFormArray; + } + + trackByBehavior(index: number, behaviorControl: AbstractControl): any { + return behaviorControl; + } + + removeBehavior(index: number, emitEvent = true) { + (this.behaviorsFormGroup.get('behaviors') as UntypedFormArray).removeAt(index, {emitEvent}); + } + + addBehavior() { + const behavior: IotSvgBehavior = { + id: '', + name: '', + type: IotSvgBehaviorType.value, + valueType: ValueType.BOOLEAN, + defaultValue: false + }; + const behaviorsArray = this.behaviorsFormGroup.get('behaviors') as UntypedFormArray; + const behaviorControl = this.fb.control(behavior, [behaviorValidator]); + behaviorsArray.push(behaviorControl); + setTimeout(() => { + const behaviorRow = this.behaviorRows.get(this.behaviorRows.length-1); + behaviorRow.focus(); + }); + } + + private prepareBehaviorsFormArray(behaviors: IotSvgBehavior[] | undefined): UntypedFormArray { + const behaviorsControls: Array = []; + if (behaviors) { + behaviors.forEach((behavior) => { + behaviorsControls.push(this.fb.control(behavior, [behaviorValidator])); + }); + } + return this.fb.array(behaviorsControls); + } +} diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-components.module.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-components.module.ts index 5b86c23f04..469f7e9782 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-components.module.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-components.module.ts @@ -24,13 +24,21 @@ import { ScadaSymbolMetadataComponent } from '@home/pages/scada-symbol/metadata- import { ScadaSymbolMetadataTagsComponent } from '@home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component'; +import { + ScadaSymbolBehaviorsComponent +} from '@home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component'; +import { + ScadaSymbolBehaviorRowComponent +} from '@home/pages/scada-symbol/metadata-components/scada-symbol-behavior-row.component'; @NgModule({ declarations: [ ScadaSymbolMetadataComponent, ScadaSymbolMetadataTagComponent, - ScadaSymbolMetadataTagsComponent + ScadaSymbolMetadataTagsComponent, + ScadaSymbolBehaviorsComponent, + ScadaSymbolBehaviorRowComponent ], imports: [ CommonModule, diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.html index e3e0b82d82..01914d1e32 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.html +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.html @@ -22,7 +22,7 @@
scada.tag
- + {{ tag }} diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.ts index f074955776..663a87d8fa 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.ts @@ -37,6 +37,7 @@ import { import { IotSvgTag } from '@home/components/widget/lib/svg/iot-svg.models'; import { MatExpansionPanel } from '@angular/material/expansion'; import { JsFuncComponent } from '@shared/components/js-func.component'; +import { MatSelect } from '@angular/material/select'; @Component({ selector: 'tb-scada-symbol-metadata-tag', @@ -53,6 +54,9 @@ import { JsFuncComponent } from '@shared/components/js-func.component'; }) export class ScadaSymbolMetadataTagComponent implements ControlValueAccessor, OnInit, OnChanges { + @ViewChild('tagSelect') + tagSelect: MatSelect; + @ViewChild('expansionPanel') expansionPanel: MatExpansionPanel; @@ -163,6 +167,11 @@ export class ScadaSymbolMetadataTagComponent implements ControlValueAccessor, On }); } + focus() { + this.tagSelect._elementRef.nativeElement.scrollIntoView(); + this.tagSelect.focus(); + } + private openPanelWithCallback(panel: MatExpansionPanel, callback: () => void) { if (!panel.expanded) { const s = panel.afterExpand.subscribe(() => { diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.ts index 13bebfe72d..5b6c8210db 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.ts @@ -164,6 +164,10 @@ export class ScadaSymbolMetadataTagsComponent implements ControlValueAccessor, O addTag() { this.addNewTag(null); + setTimeout(() => { + const tagComponent = this.metadataTags.get(this.metadataTags.length-1); + tagComponent.focus(); + }); } editTagStateRenderFunction(tag: string): void { diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.html index 16573951a7..395f6c67f0 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.html +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.html @@ -58,5 +58,10 @@ formControlName="tags">
+
+ + +
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.ts index d8b6267a8f..96f4b0b184 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.ts @@ -80,7 +80,7 @@ export class ScadaSymbolMetadataComponent extends PageComponent implements OnIni value: 'tags' }, { - name: this.translate.instant('scada.behavior'), + name: this.translate.instant('scada.behavior.behavior'), value: 'behavior' }, { diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts index d3b08fd795..c595f63071 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts @@ -218,13 +218,22 @@ export class ScadaSymbolComponent extends PageComponent enterPreviewMode() { this.symbolData.svgContent = this.prepareSvgContent(); - this.previewIotSvgObjectSettings = {}; + this.previewIotSvgObjectSettings = { + behavior: {}, + properties: {} + }; this.scadaPreviewFormGroup.patchValue({ iotSvgObject: this.previewIotSvgObjectSettings }, {emitEvent: false}); this.scadaPreviewFormGroup.markAsPristine(); const settings: IotSvgWidgetSettings = {...iotSvgWidgetDefaultSettings, - ...{iotSvg: null, iotSvgContent: this.symbolData.svgContent, iotSvgObject: this.previewIotSvgObjectSettings}}; + ...{ + simulated: true, + iotSvg: null, + iotSvgContent: this.symbolData.svgContent, + iotSvgObject: this.previewIotSvgObjectSettings + } + }; this.previewWidget = { typeFullFqn: 'system.iot_svg', type: widgetType.rpc, diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index f6a81e8f1d..8ac12e376e 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -3389,9 +3389,6 @@ "error-entities": "There was an error creating {{count}} entities." } }, - "iot-svg": { - "behavior": "Behavior" - }, "scada": { "symbol": "SCADA symbol", "symbols": "SCADA symbols", @@ -3413,7 +3410,6 @@ "symbol-preview": "Symbol preview", "general": "General", "tags": "Tags", - "behavior": "Behavior", "properties": "Properties", "title": "Title", "state-render-function": "State render function", @@ -3423,7 +3419,21 @@ "remove-tag": "Remove tag", "add-tag": "Add tag", "no-tags": "No tags configured", - "select-tag": "Select tag" + "select-tag": "Select tag", + "preview-widget-action-text": "Widget action '{{type}}' successfully invoked!", + "behavior": { + "behavior": "Behavior", + "id": "Id", + "name": "Name", + "type": "Type", + "no-behaviors": "No behaviors configured", + "add-behavior": "Add behavior", + "type-action": "Action", + "type-value": "Value", + "type-widget-action": "Widget action", + "behavior-settings": "Behavior settings", + "remove-behavior": "Remove behavior" + } }, "item": { "selected": "Selected" diff --git a/ui-ngx/src/assets/widget/svg/drawing.svg b/ui-ngx/src/assets/widget/svg/drawing.svg index 55d60d04c1..5f64fc6643 100644 --- a/ui-ngx/src/assets/widget/svg/drawing.svg +++ b/ui-ngx/src/assets/widget/svg/drawing.svg @@ -28,7 +28,7 @@ "tag": "onButton", "actions": { "click": { - "actionFunction": "ctx.api.callAction(event, 'onUpdateState');" + "actionFunction": "ctx.api.callAction(event, 'onUpdateState', undefined, {\n next: () => {\n ctx.api.setValue('on', true);\n }\n});" } } }, @@ -36,7 +36,7 @@ "tag": "offButton", "actions": { "click": { - "actionFunction": "ctx.api.callAction(event, 'offUpdateState');" + "actionFunction": "ctx.api.callAction(event, 'offUpdateState', undefined, {\n next: () => {\n ctx.api.setValue('on', false);\n }\n});\n" } } }, @@ -59,33 +59,30 @@ ], "behavior": [ { - "id": "levelState", + "id": "level", "name": "Level", "type": "value", "valueType": "DOUBLE", - "defaultValue": 0, - "valueId": "level" + "defaultValue": 0 }, { - "id": "disabledState", + "id": "disabled", "name": "{i18n:widgets.rpc-state.disabled-state}", "hint": "{i18n:widgets.rpc-state.disabled-state-hint}", "stateLabel": "{i18n:widgets.rpc-state.disabled}", "type": "value", "valueType": "BOOLEAN", - "defaultValue": false, - "valueId": "disabled" + "defaultValue": false }, { - "id": "onState", + "id": "on", "name": "On/Off state", "trueLabel": "{i18n:widgets.rpc-state.on}", "falseLabel": "{i18n:widgets.rpc-state.off}", "stateLabel": "{i18n:widgets.rpc-state.on}", "type": "value", "valueType": "BOOLEAN", - "defaultValue": false, - "valueId": "on" + "defaultValue": false }, { "id": "onUpdateState", diff --git a/ui-ngx/src/form.scss b/ui-ngx/src/form.scss index 18f5f6755d..88d0df0e29 100644 --- a/ui-ngx/src/form.scss +++ b/ui-ngx/src/form.scss @@ -564,6 +564,7 @@ .tb-form-table-header { height: 48px; + min-height: 48px; border-bottom: 1px solid rgba(0, 0, 0, 0.12); &-cell { color: rgba(0, 0, 0, 0.54); From 2e4e580036a3ededbd73d31f75460d7f4573cfa9 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Fri, 24 May 2024 19:39:37 +0300 Subject: [PATCH 041/442] UI: SCADA symbol: Implement behavior settings. Improve iot svg widget initialization. --- .../iot-svg-object-settings.component.html | 12 +- .../svg/iot-svg-object-settings.component.ts | 10 +- .../svg/iot-svg-object-settings.models.ts | 4 +- .../lib/svg/iot-svg-widget.component.ts | 96 +-- .../widget/lib/svg/iot-svg.models.ts | 160 +++-- ...scada-symbol-behavior-panel.component.html | 138 ++++ ...scada-symbol-behavior-panel.component.scss | 67 ++ .../scada-symbol-behavior-panel.component.ts | 148 +++++ .../scada-symbol-behavior-row.component.html | 3 +- .../scada-symbol-behavior-row.component.ts | 106 +++- .../scada-symbol-behaviors.component.ts | 10 +- ...scada-symbol-metadata-components.module.ts | 6 +- .../scada-symbol-metadata-tags.component.html | 2 +- .../pages/scada-symbol/scada-symbol.models.ts | 37 +- .../assets/locale/locale.constant-en_US.json | 26 +- ui-ngx/src/assets/widget/svg/drawing.svg | 589 +++++++++--------- 16 files changed, 945 insertions(+), 469 deletions(-) create mode 100644 ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.html create mode 100644 ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.scss create mode 100644 ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.ts diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.html index 1e9bd9616d..3e0684fd75 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.html @@ -60,35 +60,35 @@
{{ property.subLabel | customTranslate }}
- +
{{ property.fieldSuffix | customTranslate }}
 - - - +
{{ property.fieldSuffix | customTranslate }}
 - - diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.ts index 58d4346e53..7073d034ff 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.ts @@ -30,13 +30,13 @@ import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; import { defaultIotSvgObjectSettings, - parseIotSvgMetadataFromContent, IotSvgBehaviorType, IotSvgMetadata, - IotSvgObjectSettings + IotSvgObjectSettings, + IotSvgPropertyType, + parseIotSvgMetadataFromContent } from '@home/components/widget/lib/svg/iot-svg.models'; import { HttpClient } from '@angular/common/http'; -import { ValueType } from '@shared/models/constants'; import { IAliasController } from '@core/api/widget-api.models'; import { TargetDevice, widgetType } from '@shared/models/widget.models'; import { isDefinedAndNotNull, mergeDeep } from '@core/utils'; @@ -69,6 +69,8 @@ export class IotSvgObjectSettingsComponent implements OnInit, OnChanges, Control IotSvgBehaviorType = IotSvgBehaviorType; + IotSvgPropertyType = IotSvgPropertyType; + @Input() disabled: boolean; @@ -205,7 +207,7 @@ export class IotSvgObjectSettingsComponent implements OnInit, OnChanges, Control if (property.required) { validators.push(Validators.required); } - if (property.type === 'number') { + if (property.type === IotSvgPropertyType.number) { if (isDefinedAndNotNull(property.min)) { validators.push(Validators.min(property.min)); } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.models.ts index ebb8b908a9..807dffcc56 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.models.ts @@ -14,7 +14,7 @@ /// limitations under the License. /// -import { IotSvgProperty } from '@home/components/widget/lib/svg/iot-svg.models'; +import { IotSvgProperty, IotSvgPropertyType } from '@home/components/widget/lib/svg/iot-svg.models'; export interface IotSvgPropertyRow { label: string; @@ -35,7 +35,7 @@ export const toPropertyRows = (properties: IotSvgProperty[]): IotSvgPropertyRow[ }; result.push(propertyRow); } - if (property.type === 'switch') { + if (property.type === IotSvgPropertyType.switch) { propertyRow.switch = property; } else { propertyRow.properties.push(property); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.component.ts index fc443bcd39..52f40152a0 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.component.ts @@ -19,18 +19,18 @@ import { ChangeDetectorRef, Component, ElementRef, + Input, OnDestroy, OnInit, Renderer2, + TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; -import { BasicActionWidgetComponent } from '@home/components/widget/lib/action/action-widget.models'; import { ImagePipe } from '@shared/pipe/image.pipe'; import { DomSanitizer } from '@angular/platform-browser'; import { HttpClient } from '@angular/common/http'; -import { IotSvgObject } from '@home/components/widget/lib/svg/iot-svg.models'; -import { ResizeObserver } from '@juggle/resize-observer'; +import { IotSvgObject, IotSvgObjectCallbacks } from '@home/components/widget/lib/svg/iot-svg.models'; import { iotSvgWidgetDefaultSettings, IotSvgWidgetSettings @@ -40,6 +40,7 @@ import { backgroundStyle, ComponentStyle, overlayStyle } from '@shared/models/wi import { ImageService } from '@core/http/image.service'; import { WidgetComponent } from '@home/components/widget/widget.component'; import { isDefinedAndNotNull, mergeDeep } from '@core/utils'; +import { WidgetContext } from '@home/models/widget-component.models'; @Component({ selector: 'tb-iot-svg-widget', @@ -47,110 +48,79 @@ import { isDefinedAndNotNull, mergeDeep } from '@core/utils'; styleUrls: ['../action/action-widget.scss', './iot-svg-widget.component.scss'], encapsulation: ViewEncapsulation.None }) -export class IotSvgWidgetComponent extends - BasicActionWidgetComponent implements OnInit, AfterViewInit, OnDestroy { +export class IotSvgWidgetComponent implements OnInit, AfterViewInit, OnDestroy, IotSvgObjectCallbacks { @ViewChild('iotSvgShape', {static: false}) iotSvgShape: ElementRef; + @Input() + ctx: WidgetContext; + + @Input() + widgetTitlePanel: TemplateRef; + private settings: IotSvgWidgetSettings; + private svgContent$: Observable; backgroundStyle$: Observable; overlayStyle: ComponentStyle = {}; iotSvgObject: IotSvgObject; - private autoScale = true; - - private shapeResize$: ResizeObserver; - constructor(public widgetComponent: WidgetComponent, protected imagePipe: ImagePipe, protected sanitizer: DomSanitizer, - private renderer: Renderer2, private imageService: ImageService, protected cd: ChangeDetectorRef, private http: HttpClient) { - super(cd); } ngOnInit(): void { - super.ngOnInit(); + this.ctx.$scope.actionWidget = this; this.settings = mergeDeep({} as IotSvgWidgetSettings, iotSvgWidgetDefaultSettings, this.ctx.settings || {}); this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer); this.overlayStyle = overlayStyle(this.settings.background.overlay); - let svgContent$: Observable; if (this.settings.iotSvgContent) { - svgContent$ = of(this.settings.iotSvgContent); + this.svgContent$ = of(this.settings.iotSvgContent); } else if (this.settings.iotSvgUrl) { - svgContent$ = this.imageService.getImageString(this.settings.iotSvgUrl); + this.svgContent$ = this.imageService.getImageString(this.settings.iotSvgUrl); } else { - svgContent$ = this.http.get(this.settings.iotSvg, {responseType: 'text'}); - } - - svgContent$.subscribe( - (content) => { - this.initObject(content); - } - ); - } - - private initObject(svgContent: string) { - const simulated = this.ctx.utilsService.widgetEditMode || - this.ctx.isPreview || (isDefinedAndNotNull(this.settings.simulated) ? this.settings.simulated : false); - this.iotSvgObject = new IotSvgObject(this.ctx, svgContent, this.settings.iotSvgObject, simulated); - this.iotSvgObject.onError((error) => { - this.ctx.showErrorToast(error, 'bottom', 'center', this.ctx.toastTargetId, true); - }); - this.iotSvgObject.onMessage((message) => { - this.ctx.showSuccessToast(message, 3000, 'bottom', 'center', this.ctx.toastTargetId, true); - }); - this.iotSvgObject.init(); - if (this.iotSvgShape) { - this.iotSvgObject.addTo(this.iotSvgShape.nativeElement); - if (this.autoScale) { - this.onResize(); - } + this.svgContent$ = this.http.get(this.settings.iotSvg, {responseType: 'text'}); } } ngAfterViewInit(): void { - if (this.iotSvgObject) { - this.iotSvgObject.addTo(this.iotSvgShape.nativeElement); - } - if (this.autoScale) { - this.shapeResize$ = new ResizeObserver(() => { - this.onResize(); - }); - this.shapeResize$.observe(this.iotSvgShape.nativeElement); - this.onResize(); - } - super.ngAfterViewInit(); + this.svgContent$.subscribe((content) => { + this.initObject(this.iotSvgShape.nativeElement, content); + }); } ngOnDestroy() { - if (this.shapeResize$) { - this.shapeResize$.disconnect(); - } if (this.iotSvgObject) { this.iotSvgObject.destroy(); } - super.ngOnDestroy(); } public onInit() { - super.onInit(); const borderRadius = this.ctx.$widgetElement.css('borderRadius'); this.overlayStyle = {...this.overlayStyle, ...{borderRadius}}; this.cd.detectChanges(); } - private onResize() { - const shapeWidth = this.iotSvgShape.nativeElement.getBoundingClientRect().width; - const shapeHeight = this.iotSvgShape.nativeElement.getBoundingClientRect().height; - if (this.iotSvgObject) { - this.iotSvgObject.setSize(shapeWidth, shapeHeight); - } + onSvgObjectError(error: string) { + this.ctx.showErrorToast(error, 'bottom', 'center', this.ctx.toastTargetId, true); } + + onSvgObjectMessage(message: string) { + this.ctx.showSuccessToast(message, 3000, 'bottom', 'center', this.ctx.toastTargetId, true); + } + + private initObject(rootElement: HTMLElement, + svgContent: string) { + const simulated = this.ctx.utilsService.widgetEditMode || + this.ctx.isPreview || (isDefinedAndNotNull(this.settings.simulated) ? this.settings.simulated : false); + this.iotSvgObject = new IotSvgObject(rootElement, this.ctx, svgContent, this.settings.iotSvgObject, this, simulated); + } + } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts index 1302afefd1..5c463b7165 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts @@ -15,7 +15,7 @@ /// import { ValueType } from '@shared/models/constants'; -import { Box, Element, Runner, SVG, Svg, Text } from '@svgdotjs/svg.js'; +import { Box, Element, Runner, SVG, Svg, Text, Timeline } from '@svgdotjs/svg.js'; import '@svgdotjs/svg.panzoom.js'; import { DataToValueType, @@ -33,7 +33,7 @@ import { mergeDeep, parseFunction } from '@core/utils'; -import { BehaviorSubject, forkJoin, Observable, Observer, of } from 'rxjs'; +import { BehaviorSubject, forkJoin, Observable, Observer } from 'rxjs'; import { share } from 'rxjs/operators'; import { ValueAction, ValueGetter, ValueSetter } from '@home/components/widget/lib/action/action-widget.models'; import { WidgetContext } from '@home/models/widget-component.models'; @@ -41,6 +41,7 @@ import { ColorProcessor, constantColor, Font } from '@shared/models/widget-setti import { AttributeScope } from '@shared/models/telemetry/telemetry.models'; import { UtilsService } from '@core/services/utils.service'; import { WidgetAction, WidgetActionType, widgetActionTypeTranslationMap } from '@shared/models/widget.models'; +import { ResizeObserver } from '@juggle/resize-observer'; export interface IotSvgApi { formatValue: (value: any, dec?: number, units?: string, showZeroDecimals?: boolean) => string | undefined; @@ -112,14 +113,37 @@ export interface IotSvgBehaviorValue extends IotSvgBehaviorBase { } export interface IotSvgBehaviorAction extends IotSvgBehaviorBase { + valueType: ValueType; valueToDataType: ValueToDataType; constantValue: any; valueToDataFunction: string; } -export type IotSvgBehavior = IotSvgBehaviorValue | IotSvgBehaviorAction; +export type IotSvgBehavior = IotSvgBehaviorValue & IotSvgBehaviorAction; + +export enum IotSvgPropertyType { + text = 'text', + number = 'number', + switch = 'switch', + color = 'color', + color_settings = 'color_settings', + font = 'font', + units = 'units' +} + +export const iotSvgPropertyTypes = Object.keys(IotSvgPropertyType) as IotSvgPropertyType[]; -export type IotSvgPropertyType = 'string' | 'number' | 'color' | 'color-settings' | 'font' | 'units' | 'switch'; +export const iotSvgPropertyTypeTranslations = new Map( + [ + [IotSvgPropertyType.text, 'scada.property.type-text'], + [IotSvgPropertyType.number, 'scada.property.type-number'], + [IotSvgPropertyType.switch, 'scada.property.type-switch'], + [IotSvgPropertyType.color, 'scada.property.type-color'], + [IotSvgPropertyType.color_settings, 'scada.property.type-color-settings'], + [IotSvgPropertyType.font, 'scada.property.type-font'], + [IotSvgPropertyType.units, 'scada.property.type-units'] + ] +); export interface IotSvgPropertyBase { id: string; @@ -320,17 +344,19 @@ export type IotSvgObjectSettings = { const parseError = (ctx: WidgetContext, err: any): string => ctx.$injector.get(UtilsService).parseException(err).message || 'Unknown Error'; +export interface IotSvgObjectCallbacks { + onSvgObjectError: (error: string) => void; + onSvgObjectMessage: (message: string) => void; +} + export class IotSvgObject { private metadata: IotSvgMetadata; private settings: IotSvgObjectSettings; private context: IotSvgContext; - private rootElement: HTMLElement; private svgShape: Svg; private box: Box; - private targetWidth: number; - private targetHeight: number; private loadingSubject = new BehaviorSubject(false); private valueGetters: ValueGetter[] = []; @@ -339,19 +365,22 @@ export class IotSvgObject { private stateValueSubjects: {[id: string]: BehaviorSubject} = {}; - loading$ = this.loadingSubject.asObservable().pipe(share()); + private readonly shapeResize$: ResizeObserver; + private scale = 1; - private _onError: (error: string) => void = () => {}; + private performInit = true; - private _onMessage: (message: string) => void = () => {}; + loading$ = this.loadingSubject.asObservable().pipe(share()); - constructor(private ctx: WidgetContext, + constructor(private rootElement: HTMLElement, + private ctx: WidgetContext, private svgContent: string, private inputSettings: IotSvgObjectSettings, + private callbacks: IotSvgObjectCallbacks, private simulated: boolean) { - } - - public init() { + this.shapeResize$ = new ResizeObserver(() => { + this.resize(); + }); const doc: XMLDocument = new DOMParser().parseFromString(this.svgContent, 'image/svg+xml'); this.metadata = parseIotSvgMetadataFromDom(doc); const defaults = defaultIotSvgObjectSettings(this.metadata); @@ -359,25 +388,13 @@ export class IotSvgObject { defaults, this.inputSettings || {} as IotSvgObjectSettings); this.prepareMetadata(); this.prepareSvgShape(doc); - this.initialize(); - } - - public onError(onError: (error: string) => void) { - this._onError = onError; - } - - public onMessage(onMessage: (message: string) => void) { - this._onMessage = onMessage; - } - - public addTo(element: HTMLElement) { - this.rootElement = element; - if (this.svgShape) { - this.svgShape.addTo(element); - } + this.shapeResize$.observe(this.rootElement); } public destroy() { + if (this.shapeResize$) { + this.shapeResize$.disconnect(); + } for (const stateValueId of Object.keys(this.stateValueSubjects)) { this.stateValueSubjects[stateValueId].complete(); this.stateValueSubjects[stateValueId].unsubscribe(); @@ -385,16 +402,15 @@ export class IotSvgObject { this.valueActions.forEach(v => v.destroy()); this.loadingSubject.complete(); this.loadingSubject.unsubscribe(); - if (this.svgShape) { - this.svgShape.remove(); + for (const tag of this.metadata.tags) { + const elements = this.context.tags[tag.tag]; + elements.forEach(element => { + element.timeline().finish(); + element.timeline(null); + }); } - } - - public setSize(targetWidth: number, targetHeight: number) { - this.targetWidth = targetWidth; - this.targetHeight = targetHeight; if (this.svgShape) { - this.resize(); + this.svgShape.remove(); } } @@ -421,15 +437,10 @@ export class IotSvgObject { this.svgShape.node.style['user-select'] = 'none'; this.box = this.svgShape.bbox(); this.svgShape.size(this.box.width, this.box.height); - if (this.rootElement) { - this.svgShape.addTo(this.rootElement); - } - if (this.targetWidth && this.targetHeight) { - this.resize(); - } + this.svgShape.addTo(this.rootElement); } - private initialize() { + private init() { this.context = { api: { formatValue, @@ -447,7 +458,7 @@ export class IotSvgObject { }; const taggedElements = this.svgShape.find(`[tb\\:tag]`); for (const element of taggedElements) { - const tag = element.attr('tb:tag'); + const tag: string = element.attr('tb:tag'); let elements = this.context.tags[tag]; if (!elements) { elements = []; @@ -489,7 +500,7 @@ export class IotSvgObject { next: (val) => {this.onValue(getBehavior.id, val);}, error: (err) => { const message = parseError(this.ctx, err); - this._onError(message); + this.onError(message); } }, this.simulated); this.valueGetters.push(valueGetter); @@ -526,6 +537,14 @@ export class IotSvgObject { } } + private onError(error: string) { + this.callbacks.onSvgObjectError(error); + } + + private onMessage(message: string) { + this.callbacks.onSvgObjectMessage(message); + } + private callAction(event: Event, behaviorId: string, value?: any, observer?: Partial>) { const behavior = this.metadata.behavior.find(b => b.id === behaviorId); if (behavior) { @@ -547,7 +566,7 @@ export class IotSvgObject { observer.error(err); } const message = parseError(this.ctx, err); - this._onError(message); + this.onError(message); } } ); @@ -557,22 +576,38 @@ export class IotSvgObject { if (this.simulated) { const translatedType = this.ctx.translate.instant(widgetActionTypeTranslationMap.get(widgetAction.type)); const message = this.ctx.translate.instant('scada.preview-widget-action-text', {type: translatedType}); - this._onMessage(message); + this.onMessage(message); } else { this.ctx.actionsApi.onWidgetAction(event, widgetAction); } + if (observer?.next) { + observer.next(); + } } } } private resize() { - let scale: number; - if (this.targetWidth < this.targetHeight) { - scale = this.targetWidth / this.box.width; - } else { - scale = this.targetHeight / this.box.height; + if (this.svgShape) { + const targetWidth = this.rootElement.getBoundingClientRect().width; + const targetHeight = this.rootElement.getBoundingClientRect().height; + if (targetWidth && targetHeight) { + let scale: number; + if (targetWidth < targetHeight) { + scale = targetWidth / this.box.width; + } else { + scale = targetHeight / this.box.height; + } + if (this.scale !== scale) { + this.scale = scale; + this.svgShape.node.style.transform = `scale(${this.scale})`; + } + if (this.performInit) { + this.performInit = false; + this.init(); + } + } } - this.svgShape.node.style.transform = `scale(${scale})`; } private onValue(id: string, value: any) { @@ -598,7 +633,7 @@ export class IotSvgObject { private renderState(): void { this.metadata.stateRender(this.svgShape, this.context); for (const tag of this.metadata.tags) { - const elements = this.svgShape.find(`[tb\\:tag="${tag.tag}"]`); + const elements = this.context.tags[tag.tag];// this.svgShape.find(`[tb\\:tag="${tag.tag}"]`); elements.forEach(element => { tag.stateRender(element, this.context); }); @@ -664,6 +699,7 @@ export class IotSvgObject { private animate(element: Element, duration: number): Runner { element.timeline().finish(); + element.timeline(new Timeline()); return element.animate(duration, 0, 'now'); } @@ -692,9 +728,9 @@ export class IotSvgObject { if (property) { const value = this.settings.properties[id]; if (isDefinedAndNotNull(value)) { - if (property.type === 'color-settings') { + if (property.type === IotSvgPropertyType.color_settings) { return ColorProcessor.fromSettings(value); - } else if (property.type === 'string') { + } else if (property.type === IotSvgPropertyType.text) { const result = this.ctx.utilsService.customTranslation(value, value); const entityInfo = this.ctx.defaultSubscription.getFirstEntityInfo(); return createLabelFromSubscriptionEntityInfo(entityInfo, result); @@ -702,13 +738,13 @@ export class IotSvgObject { return value; } else { switch (property.type) { - case 'string': + case IotSvgPropertyType.text: return ''; - case 'number': + case IotSvgPropertyType.number: return 0; - case 'color': + case IotSvgPropertyType.color: return '#000'; - case 'color-settings': + case IotSvgPropertyType.color_settings: return ColorProcessor.fromSettings(constantColor('#000')); } } diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.html new file mode 100644 index 0000000000..12d308ed7c --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.html @@ -0,0 +1,138 @@ + +
+
{{ panelTitle | translate }}
+
+
+
scada.behavior.id
+ + + +
+
+
scada.behavior.name
+ + + +
+
+
scada.behavior.hint
+ + + +
+
+
scada.behavior.type
+ + + + {{ iotSvgBehaviorTypeTranslations.get(type) | translate }} + + + +
+
+
scada.behavior.value-type
+ + + +
+ + {{ valueTypesMap.get(behaviorFormGroup.get('valueType').value).name | translate }} +
+ + + + {{ valueTypesMap.get(valueType).name | translate }} + + + +
+ +
+
scada.behavior.default-value
+ +
+ +
+
scada.behavior.true-label
+ + + +
+
+
scada.behavior.false-label
+ + + +
+
+
scada.behavior.state-label
+ + + +
+ + + +
+
+
{{ 'scada.behavior.default-payload' | translate }}
+ + {{ 'widgets.value-action.converter-value' | translate }} + {{ 'widgets.value-action.converter-constant' | translate }} + {{ 'widgets.value-action.converter-function' | translate }} + {{ 'widgets.value-action.converter-none' | translate }} + +
+ + + + +
+ +
+
+ + +
+
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.scss b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.scss new file mode 100644 index 0000000000..3fbbd245a7 --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.scss @@ -0,0 +1,67 @@ +/** + * Copyright ยฉ 2016-2024 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 '../../../../../../scss/constants'; + +.tb-scada-symbol-behavior-settings-panel { + width: 540px; + display: flex; + flex-direction: column; + gap: 16px; + @media #{$mat-lt-md} { + width: 90vw; + } + .tb-scada-symbol-behavior-settings-panel-content { + display: flex; + flex-direction: column; + gap: 16px; + overflow: auto; + margin: -10px; + padding: 10px; + .mat-mdc-form-field.tb-value-type { + .mat-mdc-form-field-infix { + max-height: 40px; + } + mat-select-trigger { + .tb-value-type-row { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + gap: 10px; + .mat-icon { + color: rgba(0, 0, 0, 0.38); + vertical-align: bottom; + } + } + } + } + } + .tb-scada-symbol-behavior-settings-title { + font-size: 16px; + font-weight: 500; + line-height: 24px; + letter-spacing: 0.25px; + color: rgba(0, 0, 0, 0.87); + } + .tb-scada-symbol-behavior-settings-panel-buttons { + height: 40px; + display: flex; + flex-direction: row; + gap: 16px; + justify-content: flex-end; + align-items: flex-end; + } +} diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.ts new file mode 100644 index 0000000000..bdb2827dac --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.ts @@ -0,0 +1,148 @@ +/// +/// Copyright ยฉ 2016-2024 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, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core'; +import { TbPopoverComponent } from '@shared/components/popover.component'; +import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; +import { merge } from 'rxjs'; +import { + IotSvgBehavior, + IotSvgBehaviorType, + iotSvgBehaviorTypes, + iotSvgBehaviorTypeTranslations +} from '@app/modules/home/components/widget/lib/svg/iot-svg.models'; +import { ValueType, valueTypesMap } from '@shared/models/constants'; +import { ValueToDataType } from '@shared/models/action-widget-settings.models'; +import { WidgetService } from '@core/http/widget.service'; + +@Component({ + selector: 'tb-scada-symbol-behavior-panel', + templateUrl: './scada-symbol-behavior-panel.component.html', + styleUrls: ['./scada-symbol-behavior-panel.component.scss'], + encapsulation: ViewEncapsulation.None +}) +export class ScadaSymbolBehaviorPanelComponent implements OnInit { + + IotSvgBehaviorType = IotSvgBehaviorType; + + ValueType = ValueType; + + ValueToDataType = ValueToDataType; + + iotSvgBehaviorTypes = iotSvgBehaviorTypes; + iotSvgBehaviorTypeTranslations = iotSvgBehaviorTypeTranslations; + + valueTypes = Object.keys(ValueType) as ValueType[]; + + valueTypesMap = valueTypesMap; + + @Input() + isAdd = false; + + @Input() + behavior: IotSvgBehavior; + + @Input() + popover: TbPopoverComponent; + + @Output() + behaviorSettingsApplied = new EventEmitter(); + + functionScopeVariables = this.widgetService.getWidgetScopeVariables(); + + panelTitle: string; + + behaviorFormGroup: UntypedFormGroup; + + constructor(private fb: UntypedFormBuilder, + private widgetService: WidgetService) { + } + + ngOnInit(): void { + this.panelTitle = this.isAdd ? 'scada.behavior.add-behavior' : 'scada.behavior.behavior-settings'; + this.behaviorFormGroup = this.fb.group( + { + id: [this.behavior.id, [Validators.required]], + name: [this.behavior.name, [Validators.required]], + hint: [this.behavior.hint, []], + type: [this.behavior.type, [Validators.required]], + valueType: [this.behavior.valueType, [Validators.required]], + defaultValue: [this.behavior.defaultValue, [Validators.required]], + trueLabel: [this.behavior.trueLabel, []], + falseLabel: [this.behavior.falseLabel, []], + stateLabel: [this.behavior.stateLabel, []], + valueToDataType: [this.behavior.valueToDataType, [Validators.required]], + constantValue: [this.behavior.constantValue, [Validators.required]], + valueToDataFunction: [this.behavior.valueToDataFunction, [Validators.required]] + } + ); + merge(this.behaviorFormGroup.get('type').valueChanges, + this.behaviorFormGroup.get('valueType').valueChanges, + this.behaviorFormGroup.get('valueToDataType').valueChanges).subscribe(() => { + this.updateValidators(); + }); + this.updateValidators(); + } + + cancel() { + this.popover?.hide(); + } + + applyBehaviorSettings() { + const behavior = this.behaviorFormGroup.getRawValue(); + this.behaviorSettingsApplied.emit(behavior); + } + + private updateValidators() { + const type: IotSvgBehaviorType = this.behaviorFormGroup.get('type').value; + const valueType: ValueType = this.behaviorFormGroup.get('valueType').value; + let valueToDataType: ValueToDataType = this.behaviorFormGroup.get('valueToDataType').value; + this.behaviorFormGroup.disable({emitEvent: false}); + this.behaviorFormGroup.get('id').enable({emitEvent: false}); + this.behaviorFormGroup.get('name').enable({emitEvent: false}); + this.behaviorFormGroup.get('type').enable({emitEvent: false}); + this.behaviorFormGroup.get('hint').enable({emitEvent: false}); + switch (type) { + case IotSvgBehaviorType.value: + this.behaviorFormGroup.get('valueType').enable({emitEvent: false}); + this.behaviorFormGroup.get('defaultValue').enable({emitEvent: false}); + if (valueType === ValueType.BOOLEAN) { + this.behaviorFormGroup.get('trueLabel').enable({emitEvent: false}); + this.behaviorFormGroup.get('falseLabel').enable({emitEvent: false}); + this.behaviorFormGroup.get('stateLabel').enable({emitEvent: false}); + } + break; + case IotSvgBehaviorType.action: + if (valueType === ValueType.BOOLEAN && valueToDataType === ValueToDataType.VALUE) { + this.behaviorFormGroup.patchValue({valueToDataType: ValueToDataType.CONSTANT}, {emitEvent: false}); + valueToDataType = ValueToDataType.CONSTANT; + } else if (valueType !== ValueType.BOOLEAN && valueToDataType === ValueToDataType.CONSTANT) { + this.behaviorFormGroup.patchValue({valueToDataType: ValueToDataType.VALUE}, {emitEvent: false}); + valueToDataType = ValueToDataType.VALUE; + } + this.behaviorFormGroup.get('valueType').enable({emitEvent: false}); + this.behaviorFormGroup.get('valueToDataType').enable({emitEvent: false}); + if (valueToDataType === ValueToDataType.CONSTANT) { + this.behaviorFormGroup.get('constantValue').enable({emitEvent: false}); + } else if (valueToDataType === ValueToDataType.FUNCTION) { + this.behaviorFormGroup.get('valueToDataFunction').enable({emitEvent: false}); + } + break; + case IotSvgBehaviorType.widgetAction: + break; + } + } +} diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-row.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-row.component.html index 5b9c4d2cf9..766cce736b 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-row.component.html +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-row.component.html @@ -32,7 +32,8 @@
-
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts index c34da44d23..3cb586218b 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts @@ -74,13 +74,14 @@ export class ScadaSymbolEditObject { this.scale = 1; const contentData = iotSvgContentData(svgContent); this.svgRootNodePart = contentData.svgRootNode; - this.svgShape = SVG().addTo(this.rootElement).svg(contentData.innerSvg); + this.svgShape = SVG().svg(contentData.innerSvg); this.svgShape.node.style.overflow = 'visible'; this.svgShape.node.style['user-select'] = 'none'; this.box = this.svgShape.bbox(); this.svgShape.size(this.box.width, this.box.height); this.svgShape.viewbox(`0 0 ${this.box.width} ${this.box.height}`); this.svgShape.style().attr('tb:inner', true).rule('.tb-element', {cursor: 'pointer', transition: '0.2s filter ease-in-out'}); + this.svgShape.addTo(this.rootElement); this.updateHoverFilterStyle(); this.performSetup = true; this.shapeResize$.observe(this.rootElement); @@ -245,22 +246,24 @@ export class ScadaSymbolEditObject { if (this.svgShape) { const targetWidth = this.rootElement.getBoundingClientRect().width; const targetHeight = this.rootElement.getBoundingClientRect().height; - let scale: number; - if (targetWidth < targetHeight) { - scale = targetWidth / this.box.width; - } else { - scale = targetHeight / this.box.height; - } - if (this.scale !== scale) { - this.scale = scale; - this.svgShape.node.style.transform = `scale(${this.scale})`; - this.updateHoverFilterStyle(); - this.updateZoomOptions(); - this.updateTooltipPositions(); - } - if (this.performSetup) { - this.performSetup = false; - this.doSetup(); + if (targetWidth && targetHeight) { + let scale: number; + if (targetWidth < targetHeight) { + scale = targetWidth / this.box.width; + } else { + scale = targetHeight / this.box.height; + } + if (this.scale !== scale) { + this.scale = scale; + this.svgShape.node.style.transform = `scale(${this.scale})`; + this.updateHoverFilterStyle(); + this.updateZoomOptions(); + this.updateTooltipPositions(); + } + if (this.performSetup) { + this.performSetup = false; + this.doSetup(); + } } } } diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index 8ac12e376e..42c5a644c2 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -3432,7 +3432,31 @@ "type-value": "Value", "type-widget-action": "Widget action", "behavior-settings": "Behavior settings", - "remove-behavior": "Remove behavior" + "remove-behavior": "Remove behavior", + "hint": "Hint", + "value-type": "Value type", + "default-value": "Default value", + "true-label": "True label", + "false-label": "False label", + "state-label": "State label", + "default-payload": "Default payload" + }, + "property": { + "property": "Property", + "id": "Id", + "name": "Name", + "type": "Type", + "type-text": "Text", + "type-number": "Number", + "type-switch": "Switch", + "type-color": "Color", + "type-color-settings": "Color settings", + "type-font": "Font", + "type-units": "Units", + "no-properties": "No properties configured", + "add-property": "Add property", + "property-settings": "Property settings", + "remove-property": "Remove property" } }, "item": { diff --git a/ui-ngx/src/assets/widget/svg/drawing.svg b/ui-ngx/src/assets/widget/svg/drawing.svg index 5f64fc6643..23759d17a5 100644 --- a/ui-ngx/src/assets/widget/svg/drawing.svg +++ b/ui-ngx/src/assets/widget/svg/drawing.svg @@ -1,307 +1,310 @@ - - { - "title": "My first IoT SVG Object", - "stateRenderFunction": "var showMinMaxLevel = ctx.properties.showMinMaxLevel;\nvar minLevelElement = ctx.tags.minLevel[0];\nvar maxLevelElement = ctx.tags.maxLevel[0];\nvar minLevel = ctx.properties.minLevel; \nvar maxLevel = ctx.properties.maxLevel;\n\nif (showMinMaxLevel) {\n \n var minMaxLevelFont = ctx.properties.minMaxLevelFont;\n var minMaxLevelColor = ctx.properties.minMaxLevelColor;\n \n ctx.api.text(minLevelElement, minLevel);\n ctx.api.text(maxLevelElement, maxLevel);\n \n ctx.api.font(minLevelElement, minMaxLevelFont, minMaxLevelColor);\n ctx.api.font(maxLevelElement, minMaxLevelFont, minMaxLevelColor);\n \n} else {\n minLevelElement.hide();\n maxLevelElement.hide();\n}\n\nvar disabled = ctx.values.disabled;\nvar on = ctx.values.on;\nvar level = ctx.values.level;\n\nvar onButton = ctx.tags.onButton;\nvar offButton = ctx.tags.offButton;\nvar levelUpButton = ctx.tags.levelUpButton;\nvar levelDownButton = ctx.tags.levelDownButton;\n\nvar onButtonEnabled = !disabled && !on;\nvar offButtonEnabled = !disabled && on;\nvar levelUpEnabled = !disabled && level < maxLevel;\nvar levelDownEnabled = !disabled && level > minLevel;\n\nif (onButtonEnabled) {\n ctx.api.enable(onButton);\n onButton[0].findOne('rect').attr({fill: '#12ed19'});\n} else {\n ctx.api.disable(onButton);\n onButton[0].findOne('rect').attr({fill: '#777'});\n}\n \nif (offButtonEnabled) {\n ctx.api.enable(offButton);\n offButton[0].findOne('rect').attr({fill: '#ed121f'});\n} else {\n ctx.api.disable(offButton);\n offButton[0].findOne('rect').attr({fill: '#777'});\n} \n\n\nif (levelUpEnabled) {\n ctx.api.enable(levelUpButton);\n levelUpButton[0].findOne('rect').attr({fill: '#fff'});\n} else {\n ctx.api.disable(levelUpButton);\n levelUpButton[0].findOne('rect').attr({fill: '#777'});\n}\n \nif (levelDownEnabled) {\n ctx.api.enable(levelDownButton);\n levelDownButton[0].findOne('rect').attr({fill: '#fff'});\n} else {\n ctx.api.disable(levelDownButton);\n levelDownButton[0].findOne('rect').attr({fill: '#777'});\n}", - "tags": [ - { - "tag": "level", - "stateRenderFunction": "var level = ctx.values.level; \nvar disabled = ctx.values.disabled;\nvar minLevel = ctx.properties.minLevel; \nvar maxLevel = ctx.properties.maxLevel;\n\nvar height = (level - minLevel) / (maxLevel - minLevel);\nheight = Math.max(0, Math.min(1, height))*80; \n\nctx.api.animate(element, 200).attr({height: height});\n\nvar fill;\nif (disabled) {\n fill = ctx.properties.disabledLevelBackground;\n} else {\n var colorProcessor = ctx.properties.levelBackground;\n colorProcessor.update(level);\n fill = colorProcessor.color;\n}\n\nelement.attr({fill: fill});" - }, - { - "tag": "levelTitle", - "stateRenderFunction": "var showLevelTitle = ctx.properties.showLevelTitle;\n\nif (showLevelTitle) {\n var levelTitle = ctx.properties.levelTitle;\n var levelTitleFont = ctx.properties.levelTitleFont;\n var levelTitleColor = ctx.properties.levelTitleColor;\n \n ctx.api.text(element, levelTitle);\n ctx.api.font(element, levelTitleFont, levelTitleColor);\n \n} else {\n element.hide();\n}" - }, - { - "tag": "levelValue", - "stateRenderFunction": "var showValue = ctx.properties.showValue;\n\nif (showValue) {\n var valueFont = ctx.properties.valueFont;\n var valueColor = ctx.properties.valueColor;\n var level = ctx.values.level; \n \n var levelText = ctx.api.formatValue(level, ctx.properties.valueDecimals, ctx.properties.valueUnits, false);\n\n ctx.api.font(element, valueFont, valueColor);\n ctx.api.text(element, levelText);\n\n} else {\n element.hide();\n ctx.tags.levelValueBackground[0].hide();\n}", - "actions": { - "click": { - "actionFunction": "ctx.api.callAction(event, 'levelValueClick');" - } - } - }, - { - "tag": "fan", - "stateRenderFunction": "var on = ctx.values.on;\nif (on) {\n element.addClass('fan-rotate');\n} else {\n element.removeClass('fan-rotate');\n}\n" - }, - { - "tag": "onButton", - "actions": { - "click": { - "actionFunction": "ctx.api.callAction(event, 'onUpdateState', undefined, {\n next: () => {\n ctx.api.setValue('on', true);\n }\n});" - } - } - }, - { - "tag": "offButton", - "actions": { - "click": { - "actionFunction": "ctx.api.callAction(event, 'offUpdateState', undefined, {\n next: () => {\n ctx.api.setValue('on', false);\n }\n});\n" - } - } - }, - { - "tag": "levelUpButton", - "actions": { - "click": { - "actionFunction": "var level = ctx.values.level; \nvar maxLevel = ctx.properties.maxLevel;\n\nvar newLevel = Math.min(maxLevel, level + 5);\nctx.api.setValue('level', newLevel);\nctx.api.callAction(event, 'levelUpdateState', newLevel, {\n error: () => {\n ctx.api.setValue('level', level);\n }\n});" - } - } - }, - { - "tag": "levelDownButton", - "actions": { - "click": { - "actionFunction": "var level = ctx.values.level; \nvar minLevel = ctx.properties.minLevel;\n\nvar newLevel = Math.max(minLevel, level - 5);\nctx.api.setValue('level', newLevel);\nctx.api.callAction(event, 'levelUpdateState', newLevel, {\n error: () => {\n ctx.api.setValue('level', level);\n }\n});" - } - } +<svg xmlns="http://www.w3.org/2000/svg" xmlns:tb="https://thingsboard.io/svg" width="100" height="100" version="1.1" viewBox="0 0 100 100"> +<tb:metadata xmlns=""><![CDATA[{ + "title": "Level and Fan12", + "stateRenderFunction": "var showMinMaxLevel = ctx.properties.showMinMaxLevel;\nvar minLevelElement = ctx.tags.minLevel[0];\nvar maxLevelElement = ctx.tags.maxLevel[0];\nvar minLevel = ctx.properties.minLevel; \nvar maxLevel = ctx.properties.maxLevel;\n\nif (showMinMaxLevel) {\n \n var minMaxLevelFont = ctx.properties.minMaxLevelFont;\n var minMaxLevelColor = ctx.properties.minMaxLevelColor;\n \n ctx.api.text(minLevelElement, minLevel);\n ctx.api.text(maxLevelElement, maxLevel);\n \n ctx.api.font(minLevelElement, minMaxLevelFont, minMaxLevelColor);\n ctx.api.font(maxLevelElement, minMaxLevelFont, minMaxLevelColor);\n \n} else {\n minLevelElement.hide();\n maxLevelElement.hide();\n}\n\nvar disabled = ctx.values.disabled;\nvar on = ctx.values.on;\nvar level = ctx.values.level;\n\nvar onButton = ctx.tags.onButton;\nvar offButton = ctx.tags.offButton;\nvar levelUpButton = ctx.tags.levelUpButton;\nvar levelDownButton = ctx.tags.levelDownButton;\n\nvar onButtonEnabled = !disabled && !on;\nvar offButtonEnabled = !disabled && on;\nvar levelUpEnabled = !disabled && level < maxLevel;\nvar levelDownEnabled = !disabled && level > minLevel;\n\nif (onButtonEnabled) {\n ctx.api.enable(onButton);\n onButton[0].findOne('rect').attr({fill: '#12ed19'});\n} else {\n ctx.api.disable(onButton);\n onButton[0].findOne('rect').attr({fill: '#777'});\n}\n \nif (offButtonEnabled) {\n ctx.api.enable(offButton);\n offButton[0].findOne('rect').attr({fill: '#ed121f'});\n} else {\n ctx.api.disable(offButton);\n offButton[0].findOne('rect').attr({fill: '#777'});\n} \n\n\nif (levelUpEnabled) {\n ctx.api.enable(levelUpButton);\n levelUpButton[0].findOne('rect').attr({fill: '#fff'});\n} else {\n ctx.api.disable(levelUpButton);\n levelUpButton[0].findOne('rect').attr({fill: '#777'});\n}\n \nif (levelDownEnabled) {\n ctx.api.enable(levelDownButton);\n levelDownButton[0].findOne('rect').attr({fill: '#fff'});\n} else {\n ctx.api.disable(levelDownButton);\n levelDownButton[0].findOne('rect').attr({fill: '#777'});\n}", + "tags": [ + { + "tag": "level", + "stateRenderFunction": "var level = ctx.values.level; \nvar disabled = ctx.values.disabled;\nvar minLevel = ctx.properties.minLevel; \nvar maxLevel = ctx.properties.maxLevel;\n\nvar height = (level - minLevel) / (maxLevel - minLevel);\nheight = Math.max(0, Math.min(1, height))*80; \n\nctx.api.animate(element, 200).attr({height: height});\n\nvar fill;\nif (disabled) {\n fill = ctx.properties.disabledLevelBackground;\n} else {\n var colorProcessor = ctx.properties.levelBackground;\n colorProcessor.update(level);\n fill = colorProcessor.color;\n}\n\nelement.attr({fill: fill});" + }, + { + "tag": "levelTitle", + "stateRenderFunction": "var showLevelTitle = ctx.properties.showLevelTitle;\n\nif (showLevelTitle) {\n var levelTitle = ctx.properties.levelTitle;\n var levelTitleFont = ctx.properties.levelTitleFont;\n var levelTitleColor = ctx.properties.levelTitleColor;\n \n ctx.api.text(element, levelTitle);\n ctx.api.font(element, levelTitleFont, levelTitleColor);\n \n} else {\n element.hide();\n}" + }, + { + "tag": "levelValue", + "stateRenderFunction": "var showValue = ctx.properties.showValue;\n\nif (showValue) {\n var valueFont = ctx.properties.valueFont;\n var valueColor = ctx.properties.valueColor;\n var level = ctx.values.level; \n \n var levelText = ctx.api.formatValue(level, ctx.properties.valueDecimals, ctx.properties.valueUnits, false);\n\n ctx.api.font(element, valueFont, valueColor);\n ctx.api.text(element, levelText);\n\n} else {\n element.hide();\n ctx.tags.levelValueBackground[0].hide();\n}", + "actions": { + "click": { + "actionFunction": "ctx.api.callAction(event, 'levelValueClick');" } - ], - "behavior": [ - { - "id": "level", - "name": "Level", - "type": "value", - "valueType": "DOUBLE", - "defaultValue": 0 - }, - { - "id": "disabled", - "name": "{i18n:widgets.rpc-state.disabled-state}", - "hint": "{i18n:widgets.rpc-state.disabled-state-hint}", - "stateLabel": "{i18n:widgets.rpc-state.disabled}", - "type": "value", - "valueType": "BOOLEAN", - "defaultValue": false - }, - { - "id": "on", - "name": "On/Off state", - "trueLabel": "{i18n:widgets.rpc-state.on}", - "falseLabel": "{i18n:widgets.rpc-state.off}", - "stateLabel": "{i18n:widgets.rpc-state.on}", - "type": "value", - "valueType": "BOOLEAN", - "defaultValue": false - }, - { - "id": "onUpdateState", - "name": "{i18n:widgets.rpc-state.turn-on}", - "hint": "{i18n:widgets.rpc-state.turn-on-hint}", - "type": "action", - "valueType": "BOOLEAN", - "valueToDataType": "CONSTANT", - "constantValue": true - }, - { - "id": "offUpdateState", - "name": "{i18n:widgets.rpc-state.turn-off}", - "hint": "{i18n:widgets.rpc-state.turn-off-hint}", - "type": "action", - "valueType": "BOOLEAN", - "valueToDataType": "CONSTANT", - "constantValue": false - }, - { - "id": "levelUpdateState", - "name": "Update level", - "type": "action", - "valueType": "DOUBLE", - "valueToDataType": "VALUE", - "constantValue": 0 - }, - { - "id": "levelValueClick", - "name": "On level value click", - "type": "widgetAction" + } + }, + { + "tag": "fan", + "stateRenderFunction": "var on = ctx.values.on;\nif (on) {\n var level = ctx.values.level; \n var minLevel = ctx.properties.minLevel; \n var maxLevel = ctx.properties.maxLevel;\n\n var speed = (level - minLevel) / (maxLevel - minLevel);\n speed = Math.max(0, Math.min(1, speed))*2; \n\n var t = element.timeline();\n if (!t.active()) {\n ctx.api.animate(element, 1000).ease('-').rotate(360).loop();\n t = element.timeline();\n }\n t.speed(speed);\n} else {\n element.timeline().stop();\n}\n", + "actions": null + }, + { + "tag": "onButton", + "actions": { + "click": { + "actionFunction": "ctx.api.callAction(event, 'onUpdateState', undefined, {\n next: () => {\n ctx.api.setValue('on', true);\n }\n});\n\n" } - ], - "properties": [ - { - "id": "showLevelTitle", - "name": "Level title", - "type": "switch", - "default": true, - "rowClass": "column-xs" - }, - { - "id": "levelTitle", - "name": "Level title", - "type": "string", - "default": "{i18n:widgets.battery-level.value}", - "disableOnProperty": "showLevelTitle", - "fieldClass": "flex" - }, - { - "id": "levelTitleFont", - "name": "Level title", - "type": "font", - "default": { - "size": 6, - "sizeUnit": "px", - "family": "Roboto", - "weight": "normal", - "style": "normal" - }, - "disableOnProperty": "showLevelTitle" - }, - { - "id": "levelTitleColor", - "name": "Level title", - "type": "color", - "default": "#000000", - "disableOnProperty": "showLevelTitle" - }, - { - "id": "showValue", - "name": "Value", - "type": "switch", - "default": true, - "rowClass": "column-xs" - }, - { - "id": "valueUnits", - "name": "Value", - "type": "units", - "default": "", - "disableOnProperty": "showValue", - "fieldClass": "flex" - }, - { - "id": "valueDecimals", - "name": "Value", - "type": "number", - "default": 2, - "min": 0, - "max": 15, - "step": 1, - "fieldSuffix": "decimals", - "disableOnProperty": "showValue", - "fieldClass": "flex" - }, - { - "id": "valueFont", - "name": "Value", - "type": "font", - "default": { - "size": 6, - "sizeUnit": "px", - "family": "Roboto", - "weight": "normal", - "style": "normal" - }, - "disableOnProperty": "showValue" - }, - { - "id": "valueColor", - "name": "Value", - "type": "color", - "default": "#000000", - "disableOnProperty": "showValue" - }, - { - "id": "minLevel", - "name": "Level range", - "subLabel": "min", - "type": "number", - "required": true, - "default": 0, - "min": 0, - "rowClass": "column-xs", - "fieldClass": "flex-xs" - }, - { - "id": "maxLevel", - "name": "Level range", - "subLabel": "max", - "type": "number", - "required": true, - "default": 100, - "min": 0, - "fieldClass": "flex-xs" - }, - { - "id": "showMinMaxLevel", - "name": "Min/Max label", - "type": "switch", - "default": true - }, - { - "id": "minMaxLevelFont", - "name": "Min/Max label", - "type": "font", - "default": { - "size": 6, - "sizeUnit": "px", - "family": "Roboto", - "weight": "normal", - "style": "normal" - }, - "disableOnProperty": "showMinMaxLevel" - }, - { - "id": "minMaxLevelColor", - "name": "Min/Max label", - "type": "color", - "default": "#666", - "disableOnProperty": "showMinMaxLevel" - }, - { - "id": "levelBackground", - "name": "Level background", - "subLabel": "Enabled", - "type": "color-settings", - "default": { - "type": "constant", - "color": "#1abb48", - "colorFunction": "return value &gt; 70 ? '#d5280d' : '#1abb48';" - }, - "divider": true, - "rowClass": "column-xs" - }, - { - "id": "disabledLevelBackground", - "name": "Level background", - "subLabel": "Disabled", - "type": "color", - "default": "#ccc" - } - ] - } - - - - - min - - + } + }, + { + "tag": "offButton", + "actions": { + "click": { + "actionFunction": "ctx.api.callAction(event, 'offUpdateState', undefined, {\n next: () => {\n ctx.api.setValue('on', false);\n }\n});\n" + } + } + }, + { + "tag": "levelUpButton", + "actions": { + "click": { + "actionFunction": "var level = ctx.values.level; \nvar maxLevel = ctx.properties.maxLevel;\n\nvar newLevel = Math.min(maxLevel, level + 5);\nctx.api.setValue('level', newLevel);\nctx.api.callAction(event, 'levelUpdateState', newLevel, {\n error: () => {\n ctx.api.setValue('level', level);\n }\n});" + } + } + }, + { + "tag": "levelDownButton", + "actions": { + "click": { + "actionFunction": "var level = ctx.values.level; \nvar minLevel = ctx.properties.minLevel;\n\nvar newLevel = Math.max(minLevel, level - 5);\nctx.api.setValue('level', newLevel);\nctx.api.callAction(event, 'levelUpdateState', newLevel, {\n error: () => {\n ctx.api.setValue('level', level);\n }\n});" + } + } + }, + { + "tag": "ramka", + "stateRenderFunction": "var on = ctx.values.on;\nif (on) {\n if (!element.timeline().active()) {\n ctx.api.animate(element, 1000).scale(1.1).loop(0, true);\n }\n} else {\n element.timeline().stop();\n}", + "actions": null + } + ], + "behavior": [ + { + "id": "level", + "name": "Level", + "hint": null, + "type": "value", + "valueType": "DOUBLE", + "defaultValue": 10, + "trueLabel": null, + "falseLabel": null, + "stateLabel": null, + "valueToDataType": null, + "constantValue": null, + "valueToDataFunction": null + }, + { + "id": "disabled", + "name": "{i18n:widgets.rpc-state.disabled-state}", + "hint": "{i18n:widgets.rpc-state.disabled-state-hint}", + "type": "value", + "valueType": "BOOLEAN", + "defaultValue": false, + "trueLabel": "", + "falseLabel": "", + "stateLabel": "{i18n:widgets.rpc-state.disabled}", + "valueToDataType": null, + "constantValue": null, + "valueToDataFunction": null + }, + { + "id": "on", + "name": "On/Off state", + "hint": null, + "type": "value", + "valueType": "BOOLEAN", + "defaultValue": true, + "trueLabel": "{i18n:widgets.rpc-state.on}", + "falseLabel": "{i18n:widgets.rpc-state.off}", + "stateLabel": "{i18n:widgets.rpc-state.on}", + "valueToDataType": null, + "constantValue": null, + "valueToDataFunction": null + }, + { + "id": "onUpdateState", + "name": "{i18n:widgets.rpc-state.turn-on}", + "hint": "{i18n:widgets.rpc-state.turn-on-hint}", + "type": "action", + "valueType": "BOOLEAN", + "valueToDataType": "CONSTANT", + "constantValue": true + }, + { + "id": "offUpdateState", + "name": "{i18n:widgets.rpc-state.turn-off}", + "hint": "{i18n:widgets.rpc-state.turn-off-hint}", + "type": "action", + "valueType": "BOOLEAN", + "valueToDataType": "CONSTANT", + "constantValue": false + }, + { + "id": "levelUpdateState", + "name": "Update level", + "type": "action", + "valueType": "DOUBLE", + "valueToDataType": "VALUE", + "constantValue": 0 + }, + { + "id": "levelValueClick", + "name": "On level value click", + "type": "widgetAction" + } + ], + "properties": [ + { + "id": "showLevelTitle", + "name": "Level title", + "type": "switch", + "default": true, + "rowClass": "column-xs" + }, + { + "id": "levelTitle", + "name": "Level title", + "type": "text", + "default": "{i18n:widgets.battery-level.value}", + "disableOnProperty": "showLevelTitle", + "fieldClass": "flex" + }, + { + "id": "levelTitleFont", + "name": "Level title", + "type": "font", + "default": { + "size": 6, + "sizeUnit": "px", + "family": "Roboto", + "weight": "normal", + "style": "normal" + }, + "disableOnProperty": "showLevelTitle" + }, + { + "id": "levelTitleColor", + "name": "Level title", + "type": "color", + "default": "#000000", + "disableOnProperty": "showLevelTitle" + }, + { + "id": "showValue", + "name": "Value", + "type": "switch", + "default": true, + "rowClass": "column-xs" + }, + { + "id": "valueUnits", + "name": "Value", + "type": "units", + "default": "", + "disableOnProperty": "showValue", + "fieldClass": "flex" + }, + { + "id": "valueDecimals", + "name": "Value", + "type": "number", + "default": 2, + "min": 0, + "max": 15, + "step": 1, + "fieldSuffix": "decimals", + "disableOnProperty": "showValue", + "fieldClass": "flex" + }, + { + "id": "valueFont", + "name": "Value", + "type": "font", + "default": { + "size": 6, + "sizeUnit": "px", + "family": "Roboto", + "weight": "normal", + "style": "normal" + }, + "disableOnProperty": "showValue" + }, + { + "id": "valueColor", + "name": "Value", + "type": "color", + "default": "#000000", + "disableOnProperty": "showValue" + }, + { + "id": "minLevel", + "name": "Level range", + "subLabel": "min", + "type": "number", + "required": true, + "default": 0, + "min": 0, + "rowClass": "column-xs", + "fieldClass": "flex-xs" + }, + { + "id": "maxLevel", + "name": "Level range", + "subLabel": "max", + "type": "number", + "required": true, + "default": 100, + "min": 0, + "fieldClass": "flex-xs" + }, + { + "id": "showMinMaxLevel", + "name": "Min/Max label", + "type": "switch", + "default": true + }, + { + "id": "minMaxLevelFont", + "name": "Min/Max label", + "type": "font", + "default": { + "size": 6, + "sizeUnit": "px", + "family": "Roboto", + "weight": "normal", + "style": "normal" + }, + "disableOnProperty": "showMinMaxLevel" + }, + { + "id": "minMaxLevelColor", + "name": "Min/Max label", + "type": "color", + "default": "#666", + "disableOnProperty": "showMinMaxLevel" + }, + { + "id": "levelBackground", + "name": "Level background", + "subLabel": "Enabled", + "type": "color_settings", + "default": { + "type": "constant", + "color": "#1abb48", + "colorFunction": "return value > 70 ? '#d5280d' : '#1abb48';" + }, + "divider": true, + "rowClass": "column-xs" + }, + { + "id": "disabledLevelBackground", + "name": "Level background", + "subLabel": "Disabled", + "type": "color", + "default": "#ccc" + } + ] +}]]> + min N/A Level max - - - - + On - - + Off - - + - - + - + \ No newline at end of file From 1aca952eca39dedfb134f96de41aaf646edd5d60 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Mon, 27 May 2024 18:17:23 +0300 Subject: [PATCH 042/442] UI: Implement SCADA symbol properties section. --- .../widget/lib/svg/iot-svg.models.ts | 6 + ...scada-symbol-behavior-panel.component.html | 2 +- .../scada-symbol-behavior-row.component.ts | 70 ++++- .../scada-symbol-behaviors.component.html | 2 + .../scada-symbol-behaviors.component.ts | 36 ++- ...scada-symbol-metadata-components.module.ts | 22 +- .../scada-symbol-metadata.component.html | 5 + .../scada-symbol-metadata.component.ts | 1 - .../scada-symbol-properties.component.html | 63 ++++ .../scada-symbol-properties.component.scss | 43 +++ .../scada-symbol-properties.component.ts | 207 +++++++++++++ ...scada-symbol-property-panel.component.html | 184 ++++++++++++ ...scada-symbol-property-panel.component.scss | 49 +++ .../scada-symbol-property-panel.component.ts | 129 ++++++++ .../scada-symbol-property-row.component.html | 49 +++ .../scada-symbol-property-row.component.scss | 26 ++ .../scada-symbol-property-row.component.ts | 280 ++++++++++++++++++ .../scada-symbol/scada-symbol.component.ts | 3 + .../assets/locale/locale.constant-en_US.json | 19 +- 19 files changed, 1168 insertions(+), 28 deletions(-) create mode 100644 ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.html create mode 100644 ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.scss create mode 100644 ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.ts create mode 100644 ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component.html create mode 100644 ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component.scss create mode 100644 ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component.ts create mode 100644 ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-row.component.html create mode 100644 ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-row.component.scss create mode 100644 ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-row.component.ts diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts index 5c463b7165..c77065fbf8 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts @@ -145,6 +145,12 @@ export const iotSvgPropertyTypeTranslations = new Mapscada.behavior.value-type
- +
{{ valueTypesMap.get(behaviorFormGroup.get('valueType').value).name | translate }} diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-row.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-row.component.ts index 1fba319cb2..12bc0d2ecc 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-row.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-row.component.ts @@ -30,11 +30,11 @@ import { } from '@angular/core'; import { AbstractControl, - ControlValueAccessor, + ControlValueAccessor, NG_VALIDATORS, NG_VALUE_ACCESSOR, - UntypedFormBuilder, + UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, - ValidationErrors, + ValidationErrors, Validator, ValidatorFn, Validators } from '@angular/forms'; import { @@ -50,6 +50,9 @@ import { ScadaSymbolBehaviorPanelComponent } from '@home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component'; import { ValueToDataType } from '@shared/models/action-widget-settings.models'; +import { + ScadaSymbolBehaviorsComponent +} from '@home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component'; export const behaviorValid = (behavior: IotSvgBehavior): boolean => { if (!behavior.id || !behavior.name || !behavior.type) { @@ -80,16 +83,6 @@ export const behaviorValid = (behavior: IotSvgBehavior): boolean => { return true; }; -export const behaviorValidator = (control: AbstractControl): ValidationErrors | null => { - const behavior: IotSvgBehavior = control.value; - if (!behaviorValid(behavior)) { - return { - behavior: true - }; - } - return null; -}; - @Component({ selector: 'tb-scada-symbol-metadata-behavior-row', templateUrl: './scada-symbol-behavior-row.component.html', @@ -99,11 +92,16 @@ export const behaviorValidator = (control: AbstractControl): ValidationErrors | provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ScadaSymbolBehaviorRowComponent), multi: true + }, + { + provide: NG_VALIDATORS, + useExisting: forwardRef(() => ScadaSymbolBehaviorRowComponent), + multi: true } ], encapsulation: ViewEncapsulation.None }) -export class ScadaSymbolBehaviorRowComponent implements ControlValueAccessor, OnInit { +export class ScadaSymbolBehaviorRowComponent implements ControlValueAccessor, OnInit, Validator { @ViewChild('idInput') idInput: ElementRef; @@ -117,6 +115,9 @@ export class ScadaSymbolBehaviorRowComponent implements ControlValueAccessor, On @Input() disabled: boolean; + @Input() + index: number; + @Output() behaviorRemoved = new EventEmitter(); @@ -130,12 +131,13 @@ export class ScadaSymbolBehaviorRowComponent implements ControlValueAccessor, On private cd: ChangeDetectorRef, private popoverService: TbPopoverService, private renderer: Renderer2, - private viewContainerRef: ViewContainerRef) { + private viewContainerRef: ViewContainerRef, + private behaviorsComponent: ScadaSymbolBehaviorsComponent) { } ngOnInit() { this.behaviorRowFormGroup = this.fb.group({ - id: [null, [Validators.required]], + id: [null, [this.behaviorIdValidator()]], name: [null, [Validators.required]], type: [null, [Validators.required]] }); @@ -223,6 +225,42 @@ export class ScadaSymbolBehaviorRowComponent implements ControlValueAccessor, On this.editBehavior(null, this.editButton, true, onCanceled); } + public validate(c: UntypedFormControl) { + const idControl = this.behaviorRowFormGroup.get('id'); + if (idControl.hasError('behaviorIdNotUnique')) { + idControl.updateValueAndValidity({onlySelf: false, emitEvent: false}); + } + if (idControl.hasError('behaviorIdNotUnique')) { + this.behaviorRowFormGroup.get('id').markAsTouched(); + return { + behaviorIdNotUnique: true + }; + } + const behavior: IotSvgBehavior = {...this.modelValue, ...this.behaviorRowFormGroup.value}; + if (!behaviorValid(behavior)) { + return { + behavior: true + }; + } + return null; + } + + private behaviorIdValidator(): ValidatorFn { + return control => { + if (!control.value) { + return { + required: true + }; + } + if (!this.behaviorsComponent.behaviorIdUnique(control.value, this.index)) { + return { + behaviorIdNotUnique: true + }; + } + return null; + }; + } + private onTypeChanged(newType: IotSvgBehaviorType) { const prevType = this.modelValue.type; this.modelValue = {...this.modelValue, ...{type: newType}}; diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.html index 28efaca269..7d5991ed4b 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.html +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.html @@ -31,6 +31,7 @@ class="tb-draggable-form-table-row" *ngFor="let behaviorControl of behaviorsFormArray().controls; trackBy: trackByBehavior; let $index = index;"> @@ -46,6 +47,7 @@
+
+
+ + +
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.ts index 96f4b0b184..75e6fcc8bb 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.ts @@ -128,7 +128,6 @@ export class ScadaSymbolMetadataComponent extends PageComponent implements OnIni } writeValue(value: IotSvgMetadata): void { - this.selectedOption = 'general'; this.modelValue = value; this.metadataFormGroup.patchValue( value, {emitEvent: false} diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.html new file mode 100644 index 0000000000..c0f3316bbe --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.html @@ -0,0 +1,63 @@ + +
+
+
+
scada.property.id
+
scada.property.name
+
scada.property.type
+
+
+
+
+ + +
+ +
+
+
+ +
+
+ +
+
+ + + {{ 'scada.property.no-properties' | translate }} + diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.scss b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.scss new file mode 100644 index 0000000000..9bafbf2ccb --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.scss @@ -0,0 +1,43 @@ +/** + * Copyright ยฉ 2016-2024 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. + */ +.tb-scada-symbol-properties { + flex: 1; + margin: 12px; + .tb-form-table-header-cell { + &.tb-id-header { + flex: 1 1 40%; + } + &.tb-name-header { + flex: 1 1 40%; + } + &.tb-type-header { + flex: 1 1 20%; + } + &.tb-actions-header { + width: 120px; + min-width: 120px; + } + } + .tb-form-table { + overflow: hidden; + } + .tb-form-table-body { + overflow: auto; + tb-scada-symbol-metadata-property-row { + overflow: hidden; + } + } +} diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.ts new file mode 100644 index 0000000000..a36536464f --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.ts @@ -0,0 +1,207 @@ +/// +/// Copyright ยฉ 2016-2024 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, + forwardRef, + HostBinding, + Input, + OnInit, + QueryList, + ViewChildren, + ViewEncapsulation +} from '@angular/core'; +import { + AbstractControl, + ControlValueAccessor, + NG_VALIDATORS, + NG_VALUE_ACCESSOR, + UntypedFormArray, + UntypedFormBuilder, + UntypedFormControl, + UntypedFormGroup, + Validator +} from '@angular/forms'; +import { IotSvgProperty, IotSvgPropertyType } from '@home/components/widget/lib/svg/iot-svg.models'; +import { CdkDragDrop } from '@angular/cdk/drag-drop'; +import { + propertyValid, + ScadaSymbolPropertyRowComponent +} from '@home/pages/scada-symbol/metadata-components/scada-symbol-property-row.component'; +import { TranslateService } from '@ngx-translate/core'; + +@Component({ + selector: 'tb-scada-symbol-metadata-properties', + templateUrl: './scada-symbol-properties.component.html', + styleUrls: ['./scada-symbol-properties.component.scss'], + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => ScadaSymbolPropertiesComponent), + multi: true + }, + { + provide: NG_VALIDATORS, + useExisting: forwardRef(() => ScadaSymbolPropertiesComponent), + multi: true + } + ], + encapsulation: ViewEncapsulation.None +}) +export class ScadaSymbolPropertiesComponent implements ControlValueAccessor, OnInit, Validator { + + @HostBinding('style.display') styleDisplay = 'flex'; + @HostBinding('style.overflow') styleOverflow = 'hidden'; + + @ViewChildren(ScadaSymbolPropertyRowComponent) + propertyRows: QueryList; + + @Input() + disabled: boolean; + + booleanPropertyIds: string[] = []; + + propertiesFormGroup: UntypedFormGroup; + + errorText = ''; + + get dragEnabled(): boolean { + return this.propertiesFormArray().controls.length > 1; + } + + private propagateChange = (_val: any) => {}; + + constructor(private fb: UntypedFormBuilder, + private translate: TranslateService) { + } + + ngOnInit() { + this.propertiesFormGroup = this.fb.group({ + properties: this.fb.array([]) + }); + this.propertiesFormGroup.valueChanges.subscribe( + () => { + let properties: IotSvgProperty[] = this.propertiesFormGroup.get('properties').value; + if (properties) { + properties = properties.filter(p => propertyValid(p)); + } + this.booleanPropertyIds = properties.filter(p => p.type === IotSvgPropertyType.switch).map(p => p.id); + this.propagateChange(properties); + } + ); + } + + registerOnChange(fn: any): void { + this.propagateChange = fn; + } + + registerOnTouched(fn: any): void { + } + + setDisabledState(isDisabled: boolean): void { + this.disabled = isDisabled; + if (isDisabled) { + this.propertiesFormGroup.disable({emitEvent: false}); + } else { + this.propertiesFormGroup.enable({emitEvent: false}); + } + } + + writeValue(value: IotSvgProperty[] | undefined): void { + const properties= value || []; + this.propertiesFormGroup.setControl('properties', this.preparePropertiesFormArray(properties), {emitEvent: false}); + this.booleanPropertyIds = properties.filter(p => p.type === IotSvgPropertyType.switch).map(p => p.id); + } + + public validate(c: UntypedFormControl) { + this.errorText = ''; + const propertiesArray = this.propertiesFormGroup.get('properties') as UntypedFormArray; + const notUniqueControls = + propertiesArray.controls.filter(control => control.hasError('propertyIdNotUnique')); + for (const control of notUniqueControls) { + control.updateValueAndValidity({onlySelf: false, emitEvent: false}); + if (control.hasError('propertyIdNotUnique')) { + this.errorText = this.translate.instant('scada.property.not-unique-property-ids-error'); + } + } + const valid = this.propertiesFormGroup.valid; + return valid ? null : { + properties: { + valid: false, + }, + }; + } + + public propertyIdUnique(id: string, index: number): boolean { + const propertiesArray = this.propertiesFormGroup.get('properties') as UntypedFormArray; + for (let i = 0; i < propertiesArray.controls.length; i++) { + if (i !== index) { + const otherControl = propertiesArray.controls[i]; + if (id === otherControl.value.id) { + return false; + } + } + } + return true; + } + + propertyDrop(event: CdkDragDrop) { + const propertiesArray = this.propertiesFormGroup.get('properties') as UntypedFormArray; + const property = propertiesArray.at(event.previousIndex); + propertiesArray.removeAt(event.previousIndex); + propertiesArray.insert(event.currentIndex, property); + } + + propertiesFormArray(): UntypedFormArray { + return this.propertiesFormGroup.get('properties') as UntypedFormArray; + } + + trackByProperty(index: number, propertyControl: AbstractControl): any { + return propertyControl; + } + + removeProperty(index: number, emitEvent = true) { + (this.propertiesFormGroup.get('properties') as UntypedFormArray).removeAt(index, {emitEvent}); + } + + addProperty() { + const property: IotSvgProperty = { + id: '', + name: '', + type: IotSvgPropertyType.text, + default: '' + }; + const propertiesArray = this.propertiesFormGroup.get('properties') as UntypedFormArray; + const propertyControl = this.fb.control(property, []); + propertiesArray.push(propertyControl); + setTimeout(() => { + const propertyRow = this.propertyRows.get(this.propertyRows.length-1); + propertyRow.onAdd(() => { + this.removeProperty(propertiesArray.length-1); + }); + }); + } + + private preparePropertiesFormArray(properties: IotSvgProperty[] | undefined): UntypedFormArray { + const propertiesControls: Array = []; + if (properties) { + properties.forEach((property) => { + propertiesControls.push(this.fb.control(property, [])); + }); + } + return this.fb.array(propertiesControls); + } +} diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component.html new file mode 100644 index 0000000000..8a76578487 --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component.html @@ -0,0 +1,184 @@ + +
+
{{ panelTitle | translate }}
+
+
+
scada.property.id
+ + + +
+
+
scada.property.name
+ + + +
+
+
scada.property.type
+ + + + {{ iotSvgPropertyTypeTranslations.get(type) | translate }} + + + +
+
+
scada.property.default-value
+ + + + + + + + + + + + + + +
+
+
scada.property.number-settings
+
+
scada.property.min
+ + + + +
scada.property.max
+ + + + +
scada.property.step
+ + + +
+
+
+ + {{ 'scada.property.value-required' | translate }} + +
+
+ + + + {{ 'scada.property.advanced-ui-settings' | translate }} + + + +
+
scada.property.sub-label
+ + + +
+
+ + {{ 'scada.property.vertical-divider-after' | translate }} + +
+
+
scada.property.input-field-suffix
+ + + +
+
+
scada.property.disable-on-property
+ + + + {{ prop }} + + + +
+
+
scada.property.property-row-classes
+ + + + {{ clazz }} + + + +
+
+
scada.property.property-field-classes
+ + + + {{ clazz }} + + + +
+ + +
+
+
+ + +
+
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component.scss b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component.scss new file mode 100644 index 0000000000..c4b5b153d9 --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component.scss @@ -0,0 +1,49 @@ +/** + * Copyright ยฉ 2016-2024 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 '../../../../../../scss/constants'; + +.tb-scada-symbol-property-settings-panel { + width: 540px; + display: flex; + flex-direction: column; + gap: 16px; + @media #{$mat-lt-md} { + width: 90vw; + } + .tb-scada-symbol-property-settings-panel-content { + display: flex; + flex-direction: column; + gap: 16px; + overflow: auto; + margin: -10px; + padding: 10px; + } + .tb-scada-symbol-property-settings-title { + font-size: 16px; + font-weight: 500; + line-height: 24px; + letter-spacing: 0.25px; + color: rgba(0, 0, 0, 0.87); + } + .tb-scada-symbol-property-settings-panel-buttons { + height: 40px; + display: flex; + flex-direction: row; + gap: 16px; + justify-content: flex-end; + align-items: flex-end; + } +} diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component.ts new file mode 100644 index 0000000000..9be8959dca --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component.ts @@ -0,0 +1,129 @@ +/// +/// Copyright ยฉ 2016-2024 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, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core'; +import { TbPopoverComponent } from '@shared/components/popover.component'; +import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; +import { + IotSvgProperty, iotSvgPropertyFieldClasses, iotSvgPropertyRowClasses, + IotSvgPropertyType, + iotSvgPropertyTypes, + iotSvgPropertyTypeTranslations +} from '@home/components/widget/lib/svg/iot-svg.models'; +import { WidgetService } from '@core/http/widget.service'; +import { defaultPropertyValue } from '@home/pages/scada-symbol/metadata-components/scada-symbol-property-row.component'; +import { ValueType } from '@shared/models/constants'; + +@Component({ + selector: 'tb-scada-symbol-property-panel', + templateUrl: './scada-symbol-property-panel.component.html', + styleUrls: ['./scada-symbol-property-panel.component.scss'], + encapsulation: ViewEncapsulation.None +}) +export class ScadaSymbolPropertyPanelComponent implements OnInit { + + ValueType = ValueType; + + IotSvgPropertyType = IotSvgPropertyType; + + iotSvgPropertyTypes = iotSvgPropertyTypes; + iotSvgPropertyTypeTranslations = iotSvgPropertyTypeTranslations; + + iotSvgPropertyRowClasses = iotSvgPropertyRowClasses; + + iotSvgPropertyFieldClasses = iotSvgPropertyFieldClasses; + + @Input() + isAdd = false; + + @Input() + property: IotSvgProperty; + + @Input() + booleanPropertyIds: string[]; + + @Input() + popover: TbPopoverComponent; + + @Output() + propertySettingsApplied = new EventEmitter(); + + panelTitle: string; + + propertyFormGroup: UntypedFormGroup; + + private propertyType: IotSvgPropertyType; + + constructor(private fb: UntypedFormBuilder, + private widgetService: WidgetService) { + } + + ngOnInit(): void { + this.panelTitle = this.isAdd ? 'scada.property.add-property' : 'scada.property.property-settings'; + this.propertyType = this.property.type; + this.propertyFormGroup = this.fb.group( + { + id: [this.property.id, [Validators.required]], + name: [this.property.name, [Validators.required]], + type: [this.property.type, [Validators.required]], + default: [this.property.default, []], + required: [this.property.required, []], + subLabel: [this.property.subLabel, []], + divider: [this.property.divider, []], + fieldSuffix: [this.property.fieldSuffix, []], + disableOnProperty: [this.property.disableOnProperty, []], + rowClass: [(this.property.rowClass || '').split(' '), []], + fieldClass: [(this.property.fieldClass || '').split(' '), []], + min: [this.property.min, []], + max: [this.property.max, []], + step: [this.property.step, [Validators.min(0)]] + } + ); + this.propertyFormGroup.get('type').valueChanges.subscribe(() => { + this.updateValidators(); + }); + this.updateValidators(); + } + + cancel() { + this.popover?.hide(); + } + + applyPropertySettings() { + const property = this.propertyFormGroup.getRawValue(); + property.rowClass = (property.rowClass || []).join(' '); + property.fieldClass = (property.fieldClass || []).join(' '); + this.propertySettingsApplied.emit(property); + } + + private updateValidators() { + const type: IotSvgPropertyType = this.propertyFormGroup.get('type').value; + if (type === IotSvgPropertyType.number) { + this.propertyFormGroup.get('min').enable({emitEvent: false}); + this.propertyFormGroup.get('max').enable({emitEvent: false}); + this.propertyFormGroup.get('step').enable({emitEvent: false}); + } else { + this.propertyFormGroup.get('min').disable({emitEvent: false}); + this.propertyFormGroup.get('max').disable({emitEvent: false}); + this.propertyFormGroup.get('step').disable({emitEvent: false}); + } + if (this.propertyType !== type) { + const defaultValue = defaultPropertyValue(type); + this.propertyFormGroup.get('default').patchValue(defaultValue, {emitEvent: false}); + this.propertyType = type; + } + } +} diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-row.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-row.component.html new file mode 100644 index 0000000000..7016461cce --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-row.component.html @@ -0,0 +1,49 @@ + +
+ + + + + + + + + + {{ iotSvgPropertyTypeTranslations.get(type) | translate }} + + + +
+ + +
+
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-row.component.scss b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-row.component.scss new file mode 100644 index 0000000000..5c0b4f0166 --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-row.component.scss @@ -0,0 +1,26 @@ +/** + * Copyright ยฉ 2016-2024 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. + */ +.tb-scada-symbol-metadata-property-row { + .tb-id-field { + flex: 1 1 40%; + } + .tb-name-field { + flex: 1 1 40%; + } + .tb-type-field { + flex: 1 1 20%; + } +} diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-row.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-row.component.ts new file mode 100644 index 0000000000..60a56aae50 --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-row.component.ts @@ -0,0 +1,280 @@ +/// +/// Copyright ยฉ 2016-2024 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, + ElementRef, + EventEmitter, + forwardRef, + Input, + OnInit, + Output, + Renderer2, + ViewChild, + ViewContainerRef, + ViewEncapsulation +} from '@angular/core'; +import { + ControlValueAccessor, + NG_VALIDATORS, + NG_VALUE_ACCESSOR, + UntypedFormBuilder, + UntypedFormControl, + UntypedFormGroup, + Validator, + ValidatorFn, + Validators +} from '@angular/forms'; +import { + IotSvgProperty, + IotSvgPropertyType, + iotSvgPropertyTypes, + iotSvgPropertyTypeTranslations +} from '@home/components/widget/lib/svg/iot-svg.models'; +import { deepClone } from '@core/utils'; +import { MatButton } from '@angular/material/button'; +import { TbPopoverService } from '@shared/components/popover.service'; +import { constantColor, Font } from '@shared/models/widget-settings.models'; +import { + ScadaSymbolPropertyPanelComponent +} from '@home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component'; +import { + ScadaSymbolPropertiesComponent +} from '@home/pages/scada-symbol/metadata-components/scada-symbol-properties.component'; + +export const propertyValid = (property: IotSvgProperty): boolean => !(!property.id || !property.name || !property.type); + +export const defaultPropertyValue = (type: IotSvgPropertyType): any => { + switch (type) { + case IotSvgPropertyType.text: + return ''; + case IotSvgPropertyType.number: + return 0; + case IotSvgPropertyType.switch: + return false; + case IotSvgPropertyType.color: + return '#000'; + case IotSvgPropertyType.color_settings: + return constantColor('#000'); + case IotSvgPropertyType.font: + return { + size: 12, + sizeUnit: 'px', + family: 'Roboto', + weight: 'normal', + style: 'normal', + lineHeight: '1' + } as Font; + case IotSvgPropertyType.units: + return ''; + } +}; + +@Component({ + selector: 'tb-scada-symbol-metadata-property-row', + templateUrl: './scada-symbol-property-row.component.html', + styleUrls: ['./scada-symbol-property-row.component.scss'], + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => ScadaSymbolPropertyRowComponent), + multi: true + }, + { + provide: NG_VALIDATORS, + useExisting: forwardRef(() => ScadaSymbolPropertyRowComponent), + multi: true + } + ], + encapsulation: ViewEncapsulation.None +}) +export class ScadaSymbolPropertyRowComponent implements ControlValueAccessor, OnInit, Validator { + + @ViewChild('idInput') + idInput: ElementRef; + + @ViewChild('editButton') + editButton: MatButton; + + iotSvgPropertyTypes = iotSvgPropertyTypes; + iotSvgPropertyTypeTranslations = iotSvgPropertyTypeTranslations; + + @Input() + disabled: boolean; + + @Input() + index: number; + + @Input() + booleanPropertyIds: string[]; + + @Output() + propertyRemoved = new EventEmitter(); + + propertyRowFormGroup: UntypedFormGroup; + + modelValue: IotSvgProperty; + + private propagateChange = (_val: any) => {}; + + constructor(private fb: UntypedFormBuilder, + private cd: ChangeDetectorRef, + private popoverService: TbPopoverService, + private renderer: Renderer2, + private viewContainerRef: ViewContainerRef, + private propertiesComponent: ScadaSymbolPropertiesComponent) { + } + + ngOnInit() { + this.propertyRowFormGroup = this.fb.group({ + id: [null, [this.propertyIdValidator()]], + name: [null, [Validators.required]], + type: [null, [Validators.required]] + }); + this.propertyRowFormGroup.valueChanges.subscribe( + () => this.updateModel() + ); + this.propertyRowFormGroup.get('type').valueChanges.subscribe((newType: IotSvgPropertyType) => { + this.onTypeChanged(newType); + }); + } + + registerOnChange(fn: any): void { + this.propagateChange = fn; + } + + registerOnTouched(fn: any): void { + } + + setDisabledState(isDisabled: boolean): void { + this.disabled = isDisabled; + if (isDisabled) { + this.propertyRowFormGroup.disable({emitEvent: false}); + } else { + this.propertyRowFormGroup.enable({emitEvent: false}); + } + } + + writeValue(value: IotSvgProperty): void { + this.modelValue = value; + this.propertyRowFormGroup.patchValue( + { + id: value?.id, + name: value?.name, + type: value?.type + }, {emitEvent: false} + ); + this.cd.markForCheck(); + } + + editProperty($event: Event, matButton: MatButton, add = false, editCanceled = () => {}) { + if ($event) { + $event.stopPropagation(); + } + const trigger = matButton._elementRef.nativeElement; + if (this.popoverService.hasPopover(trigger)) { + this.popoverService.hidePopover(trigger); + } else { + const ctx: any = { + isAdd: add, + booleanPropertyIds: this.booleanPropertyIds, + property: deepClone(this.modelValue) + }; + const scadaSymbolPropertyPanelPopover = this.popoverService.displayPopover(trigger, this.renderer, + this.viewContainerRef, ScadaSymbolPropertyPanelComponent, ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], true, null, + ctx, + {}, + {}, {}, true); + scadaSymbolPropertyPanelPopover.tbComponentRef.instance.popover = scadaSymbolPropertyPanelPopover; + scadaSymbolPropertyPanelPopover.tbComponentRef.instance.propertySettingsApplied.subscribe((property) => { + scadaSymbolPropertyPanelPopover.hide(); + this.propertyRowFormGroup.patchValue( + { + id: property.id, + name: property.name, + type: property.type + }, {emitEvent: false} + ); + this.modelValue = property; + this.propagateChange(this.modelValue); + }); + scadaSymbolPropertyPanelPopover.tbDestroy.subscribe(() => { + if (!propertyValid(this.modelValue)) { + editCanceled(); + } + }); + } + } + + focus() { + this.idInput.nativeElement.scrollIntoView(); + this.idInput.nativeElement.focus(); + } + + onAdd(onCanceled: () => void) { + this.idInput.nativeElement.scrollIntoView(); + this.editProperty(null, this.editButton, true, onCanceled); + } + + public validate(c: UntypedFormControl) { + const idControl = this.propertyRowFormGroup.get('id'); + if (idControl.hasError('propertyIdNotUnique')) { + idControl.updateValueAndValidity({onlySelf: false, emitEvent: false}); + } + if (idControl.hasError('propertyIdNotUnique')) { + this.propertyRowFormGroup.get('id').markAsTouched(); + return { + propertyIdNotUnique: true + }; + } + const property: IotSvgProperty = {...this.modelValue, ...this.propertyRowFormGroup.value}; + if (!propertyValid(property)) { + return { + property: true + }; + } + return null; + } + + private propertyIdValidator(): ValidatorFn { + return control => { + if (!control.value) { + return { + required: true + }; + } + if (!this.propertiesComponent.propertyIdUnique(control.value, this.index)) { + return { + propertyIdNotUnique: true + }; + } + return null; + }; + } + + private onTypeChanged(newType: IotSvgPropertyType) { + this.modelValue = {...this.modelValue, ...{type: newType}}; + this.modelValue.default = defaultPropertyValue(newType); + } + + private updateModel() { + const value: IotSvgProperty = this.propertyRowFormGroup.value; + this.modelValue = {...this.modelValue, ...value}; + this.propagateChange(this.modelValue); + } + +} diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts index c595f63071..086ca454d7 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts @@ -320,6 +320,9 @@ export class ScadaSymbolComponent extends PageComponent } private reset(): void { + if (this.symbolMetadata) { + this.symbolMetadata.selectedOption = 'general'; + } this.previewMode = false; } diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index 42c5a644c2..1d49829f21 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -3439,7 +3439,8 @@ "true-label": "True label", "false-label": "False label", "state-label": "State label", - "default-payload": "Default payload" + "default-payload": "Default payload", + "not-unique-behavior-ids-error": "Behavior Ids must be unique!" }, "property": { "property": "Property", @@ -3456,7 +3457,21 @@ "no-properties": "No properties configured", "add-property": "Add property", "property-settings": "Property settings", - "remove-property": "Remove property" + "remove-property": "Remove property", + "default-value": "Default value", + "value-required": "Value required", + "number-settings": "Number settings", + "min": "Min", + "max": "Max", + "step": "Step", + "advanced-ui-settings": "Advanced UI settings", + "disable-on-property": "Disable on property", + "sub-label": "Sub label", + "vertical-divider-after": "Vertical divider after", + "input-field-suffix": "Input field suffix", + "property-row-classes": "Property row classes", + "property-field-classes": "Property field classes", + "not-unique-property-ids-error": "Property Ids must be unique!" } }, "item": { From a4504ad9ce79e7c1897454471beef5793909b264 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Tue, 28 May 2024 16:49:18 +0300 Subject: [PATCH 043/442] UI: SCADA symbol functions completers and highlights. --- .../widget/lib/svg/iot-svg.models.ts | 18 +- .../scada-symbol-metadata-tag.component.html | 10 +- .../scada-symbol-metadata-tag.component.ts | 19 ++ .../scada-symbol-metadata-tags.component.html | 2 + .../scada-symbol-metadata-tags.component.ts | 7 + .../scada-symbol-metadata.component.html | 7 +- .../scada-symbol-metadata.component.scss | 36 +++ .../scada-symbol-metadata.component.ts | 72 ++++- .../pages/scada-symbol/scada-symbol.models.ts | 253 +++++++++++++++++- .../shared/components/js-func.component.ts | 34 ++- .../src/app/shared/models/ace/ace.models.ts | 6 + .../shared/models/ace/completion.models.ts | 4 + 12 files changed, 449 insertions(+), 19 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts index c77065fbf8..61fdcb9b58 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts @@ -61,13 +61,13 @@ export interface IotSvgContext { properties: {[id: string]: any}; } -export type IotSvgStateRenderFunction = (svg: Svg, ctx: IotSvgContext) => void; +export type IotSvgStateRenderFunction = (ctx: IotSvgContext, svg: Svg) => void; -export type IotSvgTagStateRenderFunction = (element: Element, ctx: IotSvgContext) => void; +export type IotSvgTagStateRenderFunction = (ctx: IotSvgContext, element: Element) => void; export type IotSvgActionTrigger = 'click'; -export type IotSvgActionFunction = (event: Event, ctx: IotSvgContext) => void; +export type IotSvgActionFunction = (ctx: IotSvgContext, event: Event) => void; export interface IotSvgAction { actionFunction?: string; action?: IotSvgActionFunction; @@ -421,13 +421,13 @@ export class IotSvgObject { } private prepareMetadata() { - this.metadata.stateRender = parseFunction(this.metadata.stateRenderFunction, ['svg', 'ctx']) || (() => {}); + this.metadata.stateRender = parseFunction(this.metadata.stateRenderFunction, ['ctx', 'svg']) || (() => {}); for (const tag of this.metadata.tags) { - tag.stateRender = parseFunction(tag.stateRenderFunction, ['element', 'ctx']) || (() => {}); + tag.stateRender = parseFunction(tag.stateRenderFunction, ['ctx', 'element']) || (() => {}); if (tag.actions) { for (const trigger of Object.keys(tag.actions)) { const action = tag.actions[trigger]; - action.action = parseFunction(action.actionFunction, ['event', 'ctx']) || (() => {}); + action.action = parseFunction(action.actionFunction, ['ctx', 'event']) || (() => {}); } } } @@ -483,7 +483,7 @@ export class IotSvgObject { elements.forEach(element => { element.attr('cursor', 'pointer'); element.on(trigger, (event) => { - action.action(event, this.context); + action.action(this.context, event); }); }); } @@ -637,11 +637,11 @@ export class IotSvgObject { } private renderState(): void { - this.metadata.stateRender(this.svgShape, this.context); + this.metadata.stateRender(this.context, this.svgShape); for (const tag of this.metadata.tags) { const elements = this.context.tags[tag.tag];// this.svgShape.find(`[tb\\:tag="${tag.tag}"]`); elements.forEach(element => { - tag.stateRender(element, this.context); + tag.stateRender(this.context, element); }); } } diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.html index 01914d1e32..88302152c5 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.html +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.html @@ -49,7 +49,10 @@ @@ -65,7 +68,10 @@ diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.ts index 663a87d8fa..7b5e36266b 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.ts @@ -38,6 +38,13 @@ import { IotSvgTag } from '@home/components/widget/lib/svg/iot-svg.models'; import { MatExpansionPanel } from '@angular/material/expansion'; import { JsFuncComponent } from '@shared/components/js-func.component'; import { MatSelect } from '@angular/material/select'; +import { TbEditorCompleter } from '@shared/models/ace/completion.models'; +import { + scadaSymbolClickActionHighlightRules, + scadaSymbolClickActionPropertiesHighlightRules, + scadaSymbolElementStateRenderHighlightRules, + scadaSymbolElementStateRenderPropertiesHighlightRules +} from '@home/pages/scada-symbol/scada-symbol.models'; @Component({ selector: 'tb-scada-symbol-metadata-tag', @@ -78,6 +85,12 @@ export class ScadaSymbolMetadataTagComponent implements ControlValueAccessor, On @Input() tags: string[]; + @Input() + elementStateRenderFunctionCompleter: TbEditorCompleter; + + @Input() + clickActionFunctionCompleter: TbEditorCompleter; + @Output() tagRemoved = new EventEmitter(); @@ -87,6 +100,12 @@ export class ScadaSymbolMetadataTagComponent implements ControlValueAccessor, On modelValue: IotSvgTag; + scadaSymbolElementStateRenderHighlightRules = scadaSymbolElementStateRenderHighlightRules; + scadaSymbolElementStateRenderPropertiesHighlightRules = scadaSymbolElementStateRenderPropertiesHighlightRules; + + scadaSymbolClickActionHighlightRules = scadaSymbolClickActionHighlightRules; + scadaSymbolClickActionPropertiesHighlightRules = scadaSymbolClickActionPropertiesHighlightRules; + private propagateChange = (_val: any) => {}; constructor(private fb: UntypedFormBuilder, diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.html index 5e3b49a4aa..6ce57301af 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.html +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.html @@ -19,6 +19,8 @@
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.ts index 5b6c8210db..3d77c90d0b 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.ts @@ -40,6 +40,7 @@ import { IotSvgTag } from '@home/components/widget/lib/svg/iot-svg.models'; import { ScadaSymbolMetadataTagComponent } from '@home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component'; +import { TbEditorCompleter } from '@shared/models/ace/completion.models'; const tagValidator = (control: AbstractControl): ValidationErrors | null => { const tag: IotSvgTag = control.value; @@ -83,6 +84,12 @@ export class ScadaSymbolMetadataTagsComponent implements ControlValueAccessor, O @Input() tags: string[]; + @Input() + elementStateRenderFunctionCompleter: TbEditorCompleter; + + @Input() + clickActionFunctionCompleter: TbEditorCompleter; + availableTags: string[]; tagsFormGroup: UntypedFormGroup; diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.html index 134dc9bb06..e9fb61bc73 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.html +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.html @@ -43,7 +43,10 @@ @@ -55,6 +58,8 @@
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.scss b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.scss index 7b923e1688..75ab006bc0 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.scss +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.scss @@ -73,4 +73,40 @@ } } } + .ace_tb { + &.ace_scada-symbol { + &-ctx { + color: orangered; + font-weight: bold; + &-properties, &-property { + color: #0c959c; + } + &-values, &-value { + color: #669900; + } + &-tags, &-tag { + color: #cc8500; + } + &-api, &-api-method { + color: #ff00fe; + } + &-properties, &-values, &-tags, &-api { + font-style: italic; + // font-weight: bold; + } + &-property, &-value, &-tag, &-api-method { + font-weight: bold; + // font-weight: bold; + } + } + &-svg, &-element, &-event { + color: orangered; + font-weight: bold; + &-properties { + color: #0c959c; + font-weight: bold; + } + } + } + } } diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.ts index 75e6fcc8bb..fba374b848 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.ts @@ -14,7 +14,16 @@ /// limitations under the License. /// -import { Component, forwardRef, Input, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; +import { + Component, + forwardRef, + Input, + OnChanges, + OnInit, + SimpleChanges, + ViewChild, + ViewEncapsulation +} from '@angular/core'; import { ControlValueAccessor, NG_VALIDATORS, @@ -26,7 +35,7 @@ import { Validators } from '@angular/forms'; import { PageComponent } from '@shared/components/page.component'; -import { IotSvgMetadata } from '@home/components/widget/lib/svg/iot-svg.models'; +import { emptyMetadata, IotSvgMetadata } from '@home/components/widget/lib/svg/iot-svg.models'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; import { ToggleHeaderOption } from '@shared/components/toggle-header.component'; @@ -34,6 +43,16 @@ import { TranslateService } from '@ngx-translate/core'; import { ScadaSymbolMetadataTagsComponent } from '@home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component'; +import { TbEditorCompleter } from '@shared/models/ace/completion.models'; +import { + clickActionFunctionCompletions, + elementStateRenderFunctionCompletions, + generalStateRenderFunctionCompletions, + iotSvgContextCompletion, + scadaSymbolGeneralStateRenderHighlightRules, + scadaSymbolGeneralStateRenderPropertiesHighlightRules +} from '@home/pages/scada-symbol/scada-symbol.models'; +import { CustomTranslatePipe } from '@shared/pipe/custom-translate.pipe'; @Component({ selector: 'tb-scada-symbol-metadata', @@ -53,7 +72,7 @@ import { ], encapsulation: ViewEncapsulation.None }) -export class ScadaSymbolMetadataComponent extends PageComponent implements OnInit, ControlValueAccessor, Validator { +export class ScadaSymbolMetadataComponent extends PageComponent implements OnInit, OnChanges, ControlValueAccessor, Validator { @ViewChild('symbolMetadataTags') symbolMetadataTags: ScadaSymbolMetadataTagsComponent; @@ -91,9 +110,18 @@ export class ScadaSymbolMetadataComponent extends PageComponent implements OnIni selectedOption = 'general'; + generalStateRenderFunctionCompleter: TbEditorCompleter; + elementStateRenderFunctionCompleter: TbEditorCompleter; + clickActionFunctionCompleter: TbEditorCompleter; + + scadaSymbolGeneralStateRenderHighlightRules = scadaSymbolGeneralStateRenderHighlightRules; + + scadaSymbolGeneralStateRenderPropertiesHighlightRules = scadaSymbolGeneralStateRenderPropertiesHighlightRules; + constructor(protected store: Store, private fb: UntypedFormBuilder, - private translate: TranslateService) { + private translate: TranslateService, + private customTranslate: CustomTranslatePipe) { super(store); } @@ -105,12 +133,24 @@ export class ScadaSymbolMetadataComponent extends PageComponent implements OnIni behavior: [null], properties: [null] }); + this.updateFunctionCompleters(emptyMetadata()); this.metadataFormGroup.valueChanges.subscribe(() => { this.updateModel(); }); } + ngOnChanges(changes: SimpleChanges): void { + for (const propName of Object.keys(changes)) { + const change = changes[propName]; + if (!change.firstChange && change.currentValue !== change.previousValue) { + if (['tags'].includes(propName)) { + this.updateFunctionCompleters(this.modelValue); + } + } + } + } + registerOnChange(fn: any): void { this.propagateChange = fn; } @@ -132,6 +172,7 @@ export class ScadaSymbolMetadataComponent extends PageComponent implements OnIni this.metadataFormGroup.patchValue( value, {emitEvent: false} ); + this.updateFunctionCompleters(value); } editTagStateRenderFunction(tag: string): void { @@ -157,5 +198,28 @@ export class ScadaSymbolMetadataComponent extends PageComponent implements OnIni const metadata: IotSvgMetadata = this.metadataFormGroup.getRawValue(); this.modelValue = metadata; this.propagateChange(this.modelValue); + this.updateFunctionCompleters(metadata); + } + + private updateFunctionCompleters(metadata: IotSvgMetadata) { + const contextCompleter = iotSvgContextCompletion(metadata, this.tags, this.customTranslate); + const generalStateRender = generalStateRenderFunctionCompletions(contextCompleter); + if (!this.generalStateRenderFunctionCompleter) { + this.generalStateRenderFunctionCompleter = new TbEditorCompleter(generalStateRender); + } else { + this.generalStateRenderFunctionCompleter.updateCompletions(generalStateRender); + } + const elementStateRender = elementStateRenderFunctionCompletions(contextCompleter); + if (!this.elementStateRenderFunctionCompleter) { + this.elementStateRenderFunctionCompleter = new TbEditorCompleter(elementStateRender); + } else { + this.elementStateRenderFunctionCompleter.updateCompletions(elementStateRender); + } + const clickAction = clickActionFunctionCompletions(contextCompleter); + if (!this.clickActionFunctionCompleter) { + this.clickActionFunctionCompleter = new TbEditorCompleter(clickAction); + } else { + this.clickActionFunctionCompleter.updateCompletions(clickAction); + } } } diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts index 3cb586218b..421ddce343 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts @@ -24,11 +24,22 @@ import { setupAddTagPanelTooltip, setupTagPanelTooltip } from '@home/pages/scada-symbol/scada-symbol-tooltip.components'; -import { iotSvgContentData } from '@home/components/widget/lib/svg/iot-svg.models'; +import { + IotSvgBehavior, + IotSvgBehaviorType, + iotSvgContentData, + IotSvgMetadata, + IotSvgProperty, + IotSvgPropertyType +} from '@home/components/widget/lib/svg/iot-svg.models'; +import { TbEditorCompletion, TbEditorCompletions } from '@shared/models/ace/completion.models'; +import { CustomTranslatePipe } from '@shared/pipe/custom-translate.pipe'; +import { TbHighlightRule } from '@shared/models/ace/ace.models'; import ITooltipsterInstance = JQueryTooltipster.ITooltipsterInstance; import TooltipPositioningSide = JQueryTooltipster.TooltipPositioningSide; import ITooltipsterHelper = JQueryTooltipster.ITooltipsterHelper; import ITooltipPosition = JQueryTooltipster.ITooltipPosition; +import { ValueType } from '@shared/models/constants'; export interface ScadaSymbolData { imageResource: ImageResourceInfo; @@ -747,3 +758,243 @@ export class ScadaSymbolElement { } } + +const scadaSymbolCtxObjectHighlightRules: TbHighlightRule[] = [ + { + class: 'scada-symbol-ctx', + regex: /(?<=\W|^)(ctx)(?=\.)\b/ + } +]; + +export const scadaSymbolGeneralStateRenderHighlightRules: TbHighlightRule[] = + scadaSymbolCtxObjectHighlightRules.concat({ + class: 'scada-symbol-svg', + regex: /(?<=\W|^)(svg)(?=\.)\b/ + }); + +export const scadaSymbolElementStateRenderHighlightRules: TbHighlightRule[] = + scadaSymbolCtxObjectHighlightRules.concat({ + class: 'scada-symbol-element', + regex: /(?<=\W|^)(element)(?=\.)\b/ + }); + +export const scadaSymbolClickActionHighlightRules: TbHighlightRule[] = + scadaSymbolCtxObjectHighlightRules.concat({ + class: 'scada-symbol-event', + regex: /(?<=\W|^)(event)(?=\.)\b/ + }); + +const scadaSymbolCtxPropertyHighlightRules: TbHighlightRule[] = [ + { + class: 'scada-symbol-ctx-properties', + regex: /(?<=ctx\.)(properties)\b/ + }, + { + class: 'scada-symbol-ctx-tags', + regex: /(?<=ctx\.)(tags)\b/ + }, + { + class: 'scada-symbol-ctx-values', + regex: /(?<=ctx\.)(values)\b/ + }, + { + class: 'scada-symbol-ctx-api', + regex: /(?<=ctx\.)(api)\b/ + }, + { + class: 'scada-symbol-ctx-property', + regex: /(?<=ctx\.properties\.)([a-zA-Z\$_\u00a1-\uffff][a-zA-Z\d\$_\u00a1-\uffff]*)\b/ + }, + { + class: 'scada-symbol-ctx-tag', + regex: /(?<=ctx\.tags\.)([a-zA-Z\$_\u00a1-\uffff][a-zA-Z\d\$_\u00a1-\uffff]*)\b/ + }, + { + class: 'scada-symbol-ctx-value', + regex: /(?<=ctx\.values\.)([a-zA-Z\$_\u00a1-\uffff][a-zA-Z\d\$_\u00a1-\uffff]*)\b/ + }, + { + class: 'scada-symbol-ctx-api-method', + regex: /(?<=ctx\.api\.)([a-zA-Z\$_\u00a1-\uffff][a-zA-Z\d\$_\u00a1-\uffff]*)\b/ + } +]; + +export const scadaSymbolGeneralStateRenderPropertiesHighlightRules: TbHighlightRule[] = + scadaSymbolCtxPropertyHighlightRules.concat({ + class: 'scada-symbol-svg-properties', + regex: /(?<=svg\.)([a-zA-Z\$_\u00a1-\uffff][a-zA-Z\d\$_\u00a1-\uffff]*)\b/ + }); + +export const scadaSymbolElementStateRenderPropertiesHighlightRules: TbHighlightRule[] = + scadaSymbolCtxPropertyHighlightRules.concat({ + class: 'scada-symbol-element-properties', + regex: /(?<=element\.)([a-zA-Z\$_\u00a1-\uffff][a-zA-Z\d\$_\u00a1-\uffff]*)\b/ + }); + +export const scadaSymbolClickActionPropertiesHighlightRules: TbHighlightRule[] = + scadaSymbolCtxPropertyHighlightRules.concat({ + class: 'scada-symbol-event-properties', + regex: /(?<=event\.)([a-zA-Z\$_\u00a1-\uffff][a-zA-Z\d\$_\u00a1-\uffff]*)\b/ + }); + +export const generalStateRenderFunctionCompletions = (ctxCompletion: TbEditorCompletion): TbEditorCompletions => { + return { + ctx: ctxCompletion, + svg: { + meta: 'argument', + type: 'Svg', + description: 'A root svg node. Instance of SVG.Svg.' + } + }; +}; + +export const elementStateRenderFunctionCompletions = (ctxCompletion: TbEditorCompletion): TbEditorCompletions => { + return { + ctx: ctxCompletion, + element: { + meta: 'argument', + type: 'Element', + description: 'An SVG element.' + }, + }; +}; + +export const clickActionFunctionCompletions = (ctxCompletion: TbEditorCompletion): TbEditorCompletions => { + return { + ctx: ctxCompletion, + event: { + meta: 'argument', + type: 'Event', + description: 'DOM event.' + }, + }; +}; + +export const iotSvgContextCompletion = (metadata: IotSvgMetadata, tags: string[], + customTranslate: CustomTranslatePipe): TbEditorCompletion => { + const properties: TbEditorCompletion = { + meta: 'object', + type: 'object', + description: 'An object holding all defined SVG object properties.', + children: {} + }; + for (const property of metadata.properties) { + properties.children[property.id] = iotSvgPropertyCompletion(property, customTranslate); + } + const values: TbEditorCompletion = { + meta: 'object', + type: 'object', + description: 'An object holding all values obtained using behaviors of type \'Value\'', + children: {} + }; + const getValues = metadata.behavior.filter(b => b.type === IotSvgBehaviorType.value); + for (const value of getValues) { + values.children[value.id] = iotSvgValueCompletion(value, customTranslate); + } + const tagsCompletions: TbEditorCompletion = { + meta: 'object', + type: 'object', + description: 'An object holding all tagged SVG elements grouped by tags (object keys).', + children: {} + }; + if (tags?.length) { + for (const tag of tags) { + tagsCompletions.children[tag] = { + meta: 'property', + description: 'An array of SVG elements.', + type: 'Array' + }; + } + } + return { + meta: 'argument', + type: 'IotSvgContext', + description: 'Context of svg object.', + children: { + api: { + meta: 'object', + type: 'IotSvgApi', + description: 'Svg object API', + children: { + animate: { + meta: 'function', + description: 'Animate SVG element', + args: [ + { + name: 'element', + description: 'SVG element', + type: 'Element' + }, + { + name: 'duration', + description: 'Animation duretion is milliseconds', + type: 'number' + } + ], + return: { + description: 'Instance of SVG.Runner which has the same methods as any element and additional methods to control the runner.', + type: 'SVG.Runner' + } + } + } + }, + properties, + values, + tags: tagsCompletions + } + }; +}; + +const iotSvgPropertyCompletion = (property: IotSvgProperty, customTranslate: CustomTranslatePipe): TbEditorCompletion => { + let description = customTranslate.transform(property.name, property.name); + if (property.subLabel) { + description += ` ${customTranslate.transform(property.subLabel, property.subLabel)}`; + } + return { + meta: 'property', + description, + type: iotSvgPropertyCompletionType(property.type) + }; +}; + +const iotSvgValueCompletion = (value: IotSvgBehavior, customTranslate: CustomTranslatePipe): TbEditorCompletion => { + const description = customTranslate.transform(value.name, value.name); + return { + meta: 'property', + description, + type: iotSvgValueCompletionType(value.valueType) + }; +}; + +const iotSvgPropertyCompletionType = (type: IotSvgPropertyType): string => { + switch (type) { + case IotSvgPropertyType.text: + return 'string'; + case IotSvgPropertyType.number: + return 'number'; + case IotSvgPropertyType.switch: + return 'boolean'; + case IotSvgPropertyType.color: + return 'color string'; + case IotSvgPropertyType.color_settings: + return 'ColorProcessor'; + case IotSvgPropertyType.font: + return 'Font'; + case IotSvgPropertyType.units: + return 'units string'; + } +}; + +const iotSvgValueCompletionType = (type: ValueType): string => { + switch (type) { + case ValueType.STRING: + return 'string'; + case ValueType.INTEGER: + case ValueType.DOUBLE: + return 'number'; + case ValueType.BOOLEAN: + return 'boolean'; + case ValueType.JSON: + return 'object'; + } +}; diff --git a/ui-ngx/src/app/shared/components/js-func.component.ts b/ui-ngx/src/app/shared/components/js-func.component.ts index 857982c718..8c3fa0a423 100644 --- a/ui-ngx/src/app/shared/components/js-func.component.ts +++ b/ui-ngx/src/app/shared/components/js-func.component.ts @@ -27,13 +27,13 @@ import { } from '@angular/core'; import { ControlValueAccessor, UntypedFormControl, NG_VALIDATORS, NG_VALUE_ACCESSOR, Validator } from '@angular/forms'; import { Ace } from 'ace-builds'; -import { getAce, Range } from '@shared/models/ace/ace.models'; +import { getAce, Range, TbHighlightRule } from '@shared/models/ace/ace.models'; import { coerceBooleanProperty } from '@angular/cdk/coercion'; import { ActionNotificationHide, ActionNotificationShow } from '@core/notification/notification.actions'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; import { UtilsService } from '@core/services/utils.service'; -import { guid, isUndefined } from '@app/core/utils'; +import { deepClone, guid, isUndefined } from '@app/core/utils'; import { TranslateService } from '@ngx-translate/core'; import { CancelAnimationFrame, RafService } from '@core/services/raf.service'; import { ResizeObserver } from '@juggle/resize-observer'; @@ -90,6 +90,10 @@ export class JsFuncComponent implements OnInit, OnDestroy, ControlValueAccessor, @Input() editorCompleter: TbEditorCompleter; + @Input() propertyHighlightRules: TbHighlightRule[]; + + @Input() objectHighlightRules: TbHighlightRule[]; + @Input() globalVariables: Array; @Input() disableUndefinedCheck = false; @@ -216,6 +220,32 @@ export class JsFuncComponent implements OnInit, OnDestroy, ControlValueAccessor, }); } // @ts-ignore + if ((this.propertyHighlightRules?.length || this.objectHighlightRules?.length) && !!this.jsEditor.session.$mode) { + // @ts-ignore + const newMode = new this.jsEditor.session.$mode.constructor(); + newMode.$highlightRules = new newMode.HighlightRules(); + if (this.propertyHighlightRules?.length) { + const propertiesRules: { token: string; regex: RegExp }[] = newMode.$highlightRules.$rules.property; + const index = propertiesRules.findIndex(p => p.token === 'support.constant'); + const additionalPropertyRules: { token: string; regex: RegExp }[] = this.propertyHighlightRules.map(r => ({ + token: `tb.${r.class}`, + regex: r.regex + })); + propertiesRules.splice(index, 0, ...additionalPropertyRules); + } + if (this.objectHighlightRules?.length) { + const noRegexRules: { token: string; regex: RegExp }[] = newMode.$highlightRules.$rules.no_regex; + const index = noRegexRules.findIndex(p => Array.isArray(p.token) && p.token[0] === 'support.constant'); + const additionalNoRegexRules: { token: string; regex: RegExp }[] = this.objectHighlightRules.map(r => ({ + token: `tb.${r.class}`, + regex: r.regex + })); + noRegexRules.splice(index, 0, ...additionalNoRegexRules); + } + // @ts-ignore + this.jsEditor.session.$onChangeMode(newMode); + } + // @ts-ignore if (!!this.jsEditor.session.$worker) { const jsWorkerOptions = { undef: !this.disableUndefinedCheck, diff --git a/ui-ngx/src/app/shared/models/ace/ace.models.ts b/ui-ngx/src/app/shared/models/ace/ace.models.ts index a63064da43..d21859e531 100644 --- a/ui-ngx/src/app/shared/models/ace/ace.models.ts +++ b/ui-ngx/src/app/shared/models/ace/ace.models.ts @@ -347,3 +347,9 @@ export class Range implements Ace.Range { } } + +export interface TbHighlightRule { + class: string; + regex: RegExp; +} + diff --git a/ui-ngx/src/app/shared/models/ace/completion.models.ts b/ui-ngx/src/app/shared/models/ace/completion.models.ts index 9a8613d6f1..bfba8e5616 100644 --- a/ui-ngx/src/app/shared/models/ace/completion.models.ts +++ b/ui-ngx/src/app/shared/models/ace/completion.models.ts @@ -59,6 +59,10 @@ export class TbEditorCompleter implements Ace.Completer { constructor(private editorCompletions: TbEditorCompletions) { } + updateCompletions(completions: TbEditorCompletions): void { + this.editorCompletions = completions; + } + getCompletions(editor: Ace.Editor, session: Ace.EditSession, position: Ace.Point, prefix: string, callback: Ace.CompleterCallback): void { const result = this.prepareCompletions(prefix); From 16c2f5af60c8155d41e260884ca2b57c08e5c059 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Tue, 28 May 2024 19:16:46 +0300 Subject: [PATCH 044/442] UI: Improve SCADA synbol tags functions. --- .../widget/lib/svg/iot-svg.models.ts | 6 ++--- .../scada-symbol-metadata-tag.component.html | 2 +- .../scada-symbol-metadata-tag.component.ts | 25 +++++++++++++++---- .../scada-symbol-metadata-tags.component.ts | 6 ++--- .../scada-symbol-metadata.component.scss | 3 +++ .../pages/scada-symbol/scada-symbol.models.ts | 25 +++++++++---------- 6 files changed, 42 insertions(+), 25 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts index 61fdcb9b58..f2ed7c201b 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts @@ -67,7 +67,7 @@ export type IotSvgTagStateRenderFunction = (ctx: IotSvgContext, element: Element export type IotSvgActionTrigger = 'click'; -export type IotSvgActionFunction = (ctx: IotSvgContext, event: Event) => void; +export type IotSvgActionFunction = (ctx: IotSvgContext, element: Element, event: Event) => void; export interface IotSvgAction { actionFunction?: string; action?: IotSvgActionFunction; @@ -427,7 +427,7 @@ export class IotSvgObject { if (tag.actions) { for (const trigger of Object.keys(tag.actions)) { const action = tag.actions[trigger]; - action.action = parseFunction(action.actionFunction, ['ctx', 'event']) || (() => {}); + action.action = parseFunction(action.actionFunction, ['ctx', 'element', 'event']) || (() => {}); } } } @@ -483,7 +483,7 @@ export class IotSvgObject { elements.forEach(element => { element.attr('cursor', 'pointer'); element.on(trigger, (event) => { - action.action(this.context, event); + action.action(this.context, element, event); }); }); } diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.html index 88302152c5..20dfc9b203 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.html +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.html @@ -71,7 +71,7 @@ [objectHighlightRules]="scadaSymbolClickActionHighlightRules" [propertyHighlightRules]="scadaSymbolClickActionPropertiesHighlightRules" [editorCompleter]="clickActionFunctionCompleter" - [functionArgs]="['ctx', 'event']" + [functionArgs]="['ctx', 'element', 'event']" helpId="widget/lib/timeseries/cell_style_fn"> diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.ts index 7b5e36266b..91de73e76c 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.ts @@ -15,7 +15,6 @@ /// import { - ChangeDetectorRef, Component, EventEmitter, forwardRef, @@ -29,9 +28,12 @@ import { } from '@angular/core'; import { ControlValueAccessor, + NG_VALIDATORS, NG_VALUE_ACCESSOR, UntypedFormBuilder, + UntypedFormControl, UntypedFormGroup, + Validator, Validators } from '@angular/forms'; import { IotSvgTag } from '@home/components/widget/lib/svg/iot-svg.models'; @@ -55,11 +57,16 @@ import { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ScadaSymbolMetadataTagComponent), multi: true + }, + { + provide: NG_VALIDATORS, + useExisting: forwardRef(() => ScadaSymbolMetadataTagComponent), + multi: true } ], encapsulation: ViewEncapsulation.None }) -export class ScadaSymbolMetadataTagComponent implements ControlValueAccessor, OnInit, OnChanges { +export class ScadaSymbolMetadataTagComponent implements ControlValueAccessor, OnInit, OnChanges, Validator { @ViewChild('tagSelect') tagSelect: MatSelect; @@ -108,8 +115,7 @@ export class ScadaSymbolMetadataTagComponent implements ControlValueAccessor, On private propagateChange = (_val: any) => {}; - constructor(private fb: UntypedFormBuilder, - private cd: ChangeDetectorRef) { + constructor(private fb: UntypedFormBuilder) { } ngOnInit() { @@ -143,7 +149,7 @@ export class ScadaSymbolMetadataTagComponent implements ControlValueAccessor, On this.propagateChange = fn; } - registerOnTouched(fn: any): void { + registerOnTouched(_fn: any): void { } setDisabledState(isDisabled: boolean): void { @@ -170,6 +176,15 @@ export class ScadaSymbolMetadataTagComponent implements ControlValueAccessor, On ); } + public validate(_c: UntypedFormControl) { + const valid = this.tagFormGroup.valid; + return valid ? null : { + tag: { + valid: false, + }, + }; + } + editTagStateRenderFunction(): void { this.openPanelWithCallback(this.expansionPanel, () => { this.openPanelWithCallback(this.renderFunctionExpansionPanel, () => { diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.ts index 3d77c90d0b..ae0a75b69f 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.ts @@ -131,7 +131,7 @@ export class ScadaSymbolMetadataTagsComponent implements ControlValueAccessor, O this.propagateChange = fn; } - registerOnTouched(fn: any): void { + registerOnTouched(_fn: any): void { } setDisabledState(isDisabled: boolean): void { @@ -148,7 +148,7 @@ export class ScadaSymbolMetadataTagsComponent implements ControlValueAccessor, O this.tagsFormGroup.setControl('tags', this.prepareTagsFormArray(tags), {emitEvent: false}); } - public validate(c: UntypedFormControl) { + public validate(_c: UntypedFormControl) { const valid = this.tagsFormGroup.valid; return valid ? null : { tags: { @@ -161,7 +161,7 @@ export class ScadaSymbolMetadataTagsComponent implements ControlValueAccessor, O return this.tagsFormGroup.get('tags') as UntypedFormArray; } - trackByTag(index: number, tagControl: AbstractControl): any { + trackByTag(_index: number, tagControl: AbstractControl): any { return tagControl; } diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.scss b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.scss index 75ab006bc0..2fec4381cc 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.scss +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.scss @@ -73,6 +73,9 @@ } } } +} + +.tb-js-func { .ace_tb { &.ace_scada-symbol { &-ctx { diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts index 421ddce343..72571662f5 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts @@ -762,26 +762,26 @@ export class ScadaSymbolElement { const scadaSymbolCtxObjectHighlightRules: TbHighlightRule[] = [ { class: 'scada-symbol-ctx', - regex: /(?<=\W|^)(ctx)(?=\.)\b/ + regex: /(?<=\W|^)(ctx)(?=\W|$)\b/ } ]; export const scadaSymbolGeneralStateRenderHighlightRules: TbHighlightRule[] = scadaSymbolCtxObjectHighlightRules.concat({ class: 'scada-symbol-svg', - regex: /(?<=\W|^)(svg)(?=\.)\b/ + regex: /(?<=\W|^)(svg)(?=\W|$)\b/ }); export const scadaSymbolElementStateRenderHighlightRules: TbHighlightRule[] = scadaSymbolCtxObjectHighlightRules.concat({ class: 'scada-symbol-element', - regex: /(?<=\W|^)(element)(?=\.)\b/ + regex: /(?<=\W|^)(element)(?=\W|$)\b/ }); export const scadaSymbolClickActionHighlightRules: TbHighlightRule[] = - scadaSymbolCtxObjectHighlightRules.concat({ + scadaSymbolElementStateRenderHighlightRules.concat({ class: 'scada-symbol-event', - regex: /(?<=\W|^)(event)(?=\.)\b/ + regex: /(?<=\W|^)(event)(?=\W|$)\b/ }); const scadaSymbolCtxPropertyHighlightRules: TbHighlightRule[] = [ @@ -832,7 +832,7 @@ export const scadaSymbolElementStateRenderPropertiesHighlightRules: TbHighlightR }); export const scadaSymbolClickActionPropertiesHighlightRules: TbHighlightRule[] = - scadaSymbolCtxPropertyHighlightRules.concat({ + scadaSymbolElementStateRenderPropertiesHighlightRules.concat({ class: 'scada-symbol-event-properties', regex: /(?<=event\.)([a-zA-Z\$_\u00a1-\uffff][a-zA-Z\d\$_\u00a1-\uffff]*)\b/ }); @@ -860,14 +860,13 @@ export const elementStateRenderFunctionCompletions = (ctxCompletion: TbEditorCom }; export const clickActionFunctionCompletions = (ctxCompletion: TbEditorCompletion): TbEditorCompletions => { - return { - ctx: ctxCompletion, - event: { - meta: 'argument', - type: 'Event', - description: 'DOM event.' - }, + const completions = elementStateRenderFunctionCompletions(ctxCompletion); + completions.event = { + meta: 'argument', + type: 'Event', + description: 'DOM event.' }; + return completions; }; export const iotSvgContextCompletion = (metadata: IotSvgMetadata, tags: string[], From d58600ffd4588dcdc71a07e45846e347c7a6bc72 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Wed, 29 May 2024 19:47:02 +0300 Subject: [PATCH 045/442] UI: Improve scada symbol tags panel. --- .../iot-svg-object-settings.component.html | 3 +- .../iot-svg-object-settings.component.scss | 23 +++ .../svg/iot-svg-object-settings.component.ts | 2 +- ...scada-symbol-metadata-components.module.ts | 4 + ...metadata-tag-function-panel.component.html | 55 +++++++ ...metadata-tag-function-panel.component.scss | 55 +++++++ ...l-metadata-tag-function-panel.component.ts | 121 ++++++++++++++++ .../scada-symbol-metadata-tag.component.html | 33 ++++- .../scada-symbol-metadata-tag.component.scss | 25 +++- .../scada-symbol-metadata-tag.component.ts | 134 +++++++++--------- .../scada-symbol-metadata-tags.component.html | 32 +++-- .../scada-symbol-metadata-tags.component.scss | 32 ++++- .../scada-symbol-metadata-tags.component.ts | 116 +++++++-------- .../scada-symbol-metadata.component.scss | 24 ++-- .../scada-symbol-tooltip.components.ts | 36 ++--- .../assets/locale/locale.constant-en_US.json | 17 ++- ui-ngx/src/styles.scss | 1 + 17 files changed, 510 insertions(+), 203 deletions(-) create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.scss create mode 100644 ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag-function-panel.component.html create mode 100644 ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag-function-panel.component.scss create mode 100644 ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag-function-panel.component.ts diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.html index 3e0684fd75..6ddb440827 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.html @@ -16,7 +16,7 @@ --> -
{{ metadata?.title | customTranslate }}
+
{{ metadata?.title | customTranslate }}
scada.behavior.behavior
@@ -52,6 +52,7 @@
+
widget-config.appearance
{{ propertyRow.label | customTranslate }} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.scss new file mode 100644 index 0000000000..8e51b991ff --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.scss @@ -0,0 +1,23 @@ +/** + * Copyright ยฉ 2016-2024 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 { + .iot-svg-object-title { + font-size: 18px; + font-style: normal; + font-weight: 500; + line-height: 24px; + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.ts index 7073d034ff..29c1d83332 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.ts @@ -51,7 +51,7 @@ import { ImageService } from '@core/http/image.service'; @Component({ selector: 'tb-iot-svg-object-settings', templateUrl: './iot-svg-object-settings.component.html', - styleUrls: ['./../../widget-settings.scss'], + styleUrls: ['./iot-svg-object-settings.component.scss', './../../widget-settings.scss'], providers: [ { provide: NG_VALUE_ACCESSOR, diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-components.module.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-components.module.ts index 13fdcd848b..7507b4cdcb 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-components.module.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-components.module.ts @@ -45,6 +45,9 @@ import { ScadaSymbolPropertyPanelComponent } from '@home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component'; import { WidgetSettingsCommonModule } from '@home/components/widget/lib/settings/common/widget-settings-common.module'; +import { + ScadaSymbolMetadataTagFunctionPanelComponent +} from '@home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag-function-panel.component'; @NgModule({ declarations: @@ -52,6 +55,7 @@ import { WidgetSettingsCommonModule } from '@home/components/widget/lib/settings ScadaSymbolMetadataComponent, ScadaSymbolMetadataTagComponent, ScadaSymbolMetadataTagsComponent, + ScadaSymbolMetadataTagFunctionPanelComponent, ScadaSymbolBehaviorsComponent, ScadaSymbolBehaviorRowComponent, ScadaSymbolBehaviorPanelComponent, diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag-function-panel.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag-function-panel.component.html new file mode 100644 index 0000000000..9ca5f0b998 --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag-function-panel.component.html @@ -0,0 +1,55 @@ + +
+
+ + + + {{ tag }} + + + +
{{ panelTitle | translate }}
+
+
+ + +
+
+ + +
+
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag-function-panel.component.scss b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag-function-panel.component.scss new file mode 100644 index 0000000000..31b00469ca --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag-function-panel.component.scss @@ -0,0 +1,55 @@ +/** + * Copyright ยฉ 2016-2024 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 '../../../../../../scss/constants'; + +.tb-scada-symbol-metadata-tag-function-panel { + width: 800px; + display: flex; + flex-direction: column; + gap: 16px; + @media #{$mat-lt-md} { + width: 90vw; + } + .tb-scada-symbol-metadata-tag-function-panel-content { + display: flex; + flex-direction: column; + gap: 16px; + overflow: auto; + margin: -10px; + padding: 10px; + } + .tb-scada-symbol-metadata-tag-function-title-container { + display: flex; + flex-direction: row; + gap: 16px; + align-items: center; + } + .tb-scada-symbol-metadata-tag-function-title { + font-size: 16px; + font-weight: 500; + line-height: 24px; + letter-spacing: 0.25px; + color: rgba(0, 0, 0, 0.87); + } + .tb-scada-symbol-metadata-tag-function-panel-buttons { + height: 40px; + display: flex; + flex-direction: row; + gap: 16px; + justify-content: flex-end; + align-items: flex-end; + } +} diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag-function-panel.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag-function-panel.component.ts new file mode 100644 index 0000000000..127724938d --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag-function-panel.component.ts @@ -0,0 +1,121 @@ +/// +/// Copyright ยฉ 2016-2024 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 { + AfterViewInit, + Component, + EventEmitter, + Input, + OnInit, + Output, + ViewChild, + ViewEncapsulation +} from '@angular/core'; +import { TbPopoverComponent } from '@shared/components/popover.component'; +import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; +import { WidgetService } from '@core/http/widget.service'; +import { TranslateService } from '@ngx-translate/core'; +import { TbEditorCompleter } from '@shared/models/ace/completion.models'; +import { TbHighlightRule } from '@shared/models/ace/ace.models'; +import { + scadaSymbolClickActionHighlightRules, + scadaSymbolClickActionPropertiesHighlightRules, + scadaSymbolElementStateRenderHighlightRules, + scadaSymbolElementStateRenderPropertiesHighlightRules +} from '@home/pages/scada-symbol/scada-symbol.models'; +import { JsFuncComponent } from '@shared/components/js-func.component'; + +@Component({ + selector: 'tb-scada-symbol-metadata-tag-function-panel', + templateUrl: './scada-symbol-metadata-tag-function-panel.component.html', + styleUrls: ['./scada-symbol-metadata-tag-function-panel.component.scss'], + encapsulation: ViewEncapsulation.None +}) +export class ScadaSymbolMetadataTagFunctionPanelComponent implements OnInit, AfterViewInit { + + @ViewChild('tagFunctionComponent') + tagFunctionComponent: JsFuncComponent; + + @Input() + tagFunction: string; + + @Input() + tagFunctionType: 'renderFunction' | 'clickAction'; + + @Input() + tag: string; + + @Input() + completer: TbEditorCompleter; + + @Input() + popover: TbPopoverComponent; + + @Output() + tagFunctionApplied = new EventEmitter(); + + functionScopeVariables = this.widgetService.getWidgetScopeVariables(); + + tagFunctionFormGroup: UntypedFormGroup; + + panelTitle: string; + + tagFunctionArgs: string[]; + + tagFunctionHelpId: string; + + objectHighlightRules: TbHighlightRule[]; + + propertyHighlightRules: TbHighlightRule[]; + + constructor(private fb: UntypedFormBuilder, + private widgetService: WidgetService) { + } + + ngOnInit(): void { + this.tagFunctionFormGroup = this.fb.group( + { + tagFunction: [this.tagFunction, []] + } + ); + if (this.tagFunctionType === 'renderFunction') { + this.panelTitle = 'scada.state-render-function'; + this.tagFunctionArgs = ['ctx', 'element']; + this.objectHighlightRules = scadaSymbolElementStateRenderHighlightRules; + this.propertyHighlightRules = scadaSymbolElementStateRenderPropertiesHighlightRules; + this.tagFunctionHelpId = 'widget/lib/timeseries/cell_style_fn'; // TODO: + } else if (this.tagFunctionType === 'clickAction') { + this.panelTitle = 'scada.tag.on-click-action'; + this.tagFunctionArgs = ['ctx', 'element', 'event']; + this.objectHighlightRules = scadaSymbolClickActionHighlightRules; + this.propertyHighlightRules = scadaSymbolClickActionPropertiesHighlightRules; + this.tagFunctionHelpId = 'widget/lib/timeseries/cell_style_fn'; // TODO: + } + } + + ngAfterViewInit() { + this.tagFunctionComponent.focus(); + } + + cancel() { + this.popover?.hide(); + } + + applyTagFunction() { + const tagFunction: string = this.tagFunctionFormGroup.get('tagFunction').value; + this.tagFunctionApplied.emit(tagFunction); + } +} diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.html index 20dfc9b203..3e57c1ef30 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.html +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.html @@ -15,8 +15,35 @@ limitations under the License. --> -
- +
+
+ + + + {{ tagFormGroup.get('tag').value }} + + + +
+
+ +
+
+ +
+
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.scss b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.scss index 1e0bacd858..08296a986e 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.scss +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.scss @@ -13,10 +13,23 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -.tb-scada-symbol-metadata-tag-header { - flex: 1; - display: flex; - flex-direction: row; - gap: 8px; - padding-right: 8px; +.tb-scada-symbol-metadata-tag-row { + .tb-tag-field { + flex: 1 1 70%; + } + .tb-state-render-function-field { + flex: 1 1 15%; + } + .tb-on-click-action-field { + flex: 1 1 15%; + } + .tb-state-render-function-field, .tb-on-click-action-field { + display: flex; + justify-content: flex-end; + .mdc-button { + .mat-mdc-button-touch-target { + height: 36px; + } + } + } } diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.ts index 91de73e76c..cb9b950f2c 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.ts @@ -21,12 +21,13 @@ import { Input, OnChanges, OnInit, - Output, + Output, Renderer2, SimpleChanges, - ViewChild, + ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core'; import { + AbstractControl, ControlValueAccessor, NG_VALIDATORS, NG_VALUE_ACCESSOR, @@ -47,6 +48,15 @@ import { scadaSymbolElementStateRenderHighlightRules, scadaSymbolElementStateRenderPropertiesHighlightRules } from '@home/pages/scada-symbol/scada-symbol.models'; +import { MatButton } from '@angular/material/button'; +import { TbPopoverService } from '@shared/components/popover.service'; +import { deepClone } from '@core/utils'; +import { + ScadaSymbolBehaviorPanelComponent +} from '@home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component'; +import { + ScadaSymbolMetadataTagFunctionPanelComponent +} from '@home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag-function-panel.component'; @Component({ selector: 'tb-scada-symbol-metadata-tag', @@ -66,83 +76,41 @@ import { ], encapsulation: ViewEncapsulation.None }) -export class ScadaSymbolMetadataTagComponent implements ControlValueAccessor, OnInit, OnChanges, Validator { - - @ViewChild('tagSelect') - tagSelect: MatSelect; - - @ViewChild('expansionPanel') - expansionPanel: MatExpansionPanel; +export class ScadaSymbolMetadataTagComponent implements ControlValueAccessor, OnInit, Validator { - @ViewChild('renderFunctionExpansionPanel') - renderFunctionExpansionPanel: MatExpansionPanel; + @ViewChild('editStateRenderFunctionButton') + editStateRenderFunctionButton: MatButton; - @ViewChild('clickActionExpansionPanel') - clickActionExpansionPanel: MatExpansionPanel; - - @ViewChild('stateRenderFunction') - stateRenderFunction: JsFuncComponent; - - @ViewChild('clickAction') - clickAction: JsFuncComponent; + @ViewChild('editClickActionButton') + editClickActionButton: MatButton; @Input() disabled: boolean; - @Input() - tags: string[]; - @Input() elementStateRenderFunctionCompleter: TbEditorCompleter; @Input() clickActionFunctionCompleter: TbEditorCompleter; - @Output() - tagRemoved = new EventEmitter(); - - availableTags: string[]; - tagFormGroup: UntypedFormGroup; modelValue: IotSvgTag; - scadaSymbolElementStateRenderHighlightRules = scadaSymbolElementStateRenderHighlightRules; - scadaSymbolElementStateRenderPropertiesHighlightRules = scadaSymbolElementStateRenderPropertiesHighlightRules; - - scadaSymbolClickActionHighlightRules = scadaSymbolClickActionHighlightRules; - scadaSymbolClickActionPropertiesHighlightRules = scadaSymbolClickActionPropertiesHighlightRules; - private propagateChange = (_val: any) => {}; - constructor(private fb: UntypedFormBuilder) { + constructor(private fb: UntypedFormBuilder, + private popoverService: TbPopoverService, + private renderer: Renderer2, + private viewContainerRef: ViewContainerRef) { } ngOnInit() { - this.availableTags = (this.tags || []).concat(); this.tagFormGroup = this.fb.group({ - tag: [null, [Validators.required]], + tag: [null, []], stateRenderFunction: [null, []], clickAction: [null, []] }); - this.tagFormGroup.valueChanges.subscribe( - () => this.updateModel() - ); - } - - ngOnChanges(changes: SimpleChanges): void { - for (const propName of Object.keys(changes)) { - const change = changes[propName]; - if (!change.firstChange && change.currentValue !== change.previousValue) { - if (['tags'].includes(propName)) { - this.availableTags = (this.tags || []).concat(); - if (this.modelValue?.tag && !this.availableTags.includes(this.modelValue?.tag)) { - this.availableTags.push(this.modelValue?.tag); - this.availableTags.sort(); - } - } - } - } } registerOnChange(fn: any): void { @@ -163,9 +131,6 @@ export class ScadaSymbolMetadataTagComponent implements ControlValueAccessor, On writeValue(value: IotSvgTag): void { this.modelValue = value; - if (value?.tag && !(this.tags || []).includes(value?.tag)) { - this.availableTags = (this.tags || []).concat(value.tag).sort(); - } const clickAction = value?.actions && value?.actions.click ? value.actions.click.actionFunction : null; this.tagFormGroup.patchValue( { @@ -186,27 +151,61 @@ export class ScadaSymbolMetadataTagComponent implements ControlValueAccessor, On } editTagStateRenderFunction(): void { - this.openPanelWithCallback(this.expansionPanel, () => { + this.openTagFunction('renderFunction', this.editStateRenderFunctionButton); + /*this.openPanelWithCallback(this.expansionPanel, () => { this.openPanelWithCallback(this.renderFunctionExpansionPanel, () => { this.stateRenderFunction.focus(); }); - }); + });*/ } editClickAction(): void { - this.openPanelWithCallback(this.expansionPanel, () => { + this.openTagFunction('clickAction', this.editClickActionButton); + /*this.openPanelWithCallback(this.expansionPanel, () => { this.openPanelWithCallback(this.clickActionExpansionPanel, () => { this.clickAction.focus(); }); - }); + });*/ } - focus() { - this.tagSelect._elementRef.nativeElement.scrollIntoView(); - this.tagSelect.focus(); + private openTagFunction(tagFunctionType: 'renderFunction' | 'clickAction', + button: MatButton) { + const trigger = button._elementRef.nativeElement; + trigger.scrollIntoView(); + if (this.popoverService.hasPopover(trigger)) { + this.popoverService.hidePopover(trigger); + } else { + let tagFunctionControl: AbstractControl; + let completer: TbEditorCompleter; + if (tagFunctionType === 'renderFunction') { + tagFunctionControl = this.tagFormGroup.get('stateRenderFunction'); + completer = this.elementStateRenderFunctionCompleter; + } else if (tagFunctionType === 'clickAction') { + tagFunctionControl = this.tagFormGroup.get('clickAction'); + completer = this.clickActionFunctionCompleter; + } + const ctx: any = { + tagFunction: tagFunctionControl.value, + tagFunctionType, + tag: this.tagFormGroup.get('tag').value, + completer + }; + const scadaSymbolTagFunctionPanelPopover = this.popoverService.displayPopover(trigger, this.renderer, + this.viewContainerRef, ScadaSymbolMetadataTagFunctionPanelComponent, + ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], true, null, + ctx, + {}, + {}, {}, true); + scadaSymbolTagFunctionPanelPopover.tbComponentRef.instance.popover = scadaSymbolTagFunctionPanelPopover; + scadaSymbolTagFunctionPanelPopover.tbComponentRef.instance.tagFunctionApplied.subscribe((tagFunction) => { + scadaSymbolTagFunctionPanelPopover.hide(); + tagFunctionControl.patchValue(tagFunction, {emitEvent: false}); + this.updateModel(); + }); + } } - private openPanelWithCallback(panel: MatExpansionPanel, callback: () => void) { +/* private openPanelWithCallback(panel: MatExpansionPanel, callback: () => void) { if (!panel.expanded) { const s = panel.afterExpand.subscribe(() => { s.unsubscribe(); @@ -218,13 +217,10 @@ export class ScadaSymbolMetadataTagComponent implements ControlValueAccessor, On } else { callback(); } - } + }*/ private updateModel() { const value = this.tagFormGroup.value; - if (value.tag && !this.modelValue?.tag) { - this.expansionPanel.open(); - } this.modelValue = { tag: value.tag, stateRenderFunction: value.stateRenderFunction diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.html index 6ce57301af..ec0f69a7f0 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.html +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.html @@ -16,23 +16,25 @@ -->
-
-
- - +
+
+
scada.tag.tag
+
scada.state-render-function
+
scada.tag.on-click-action
+
+
+
+ + + +
-
-
-
- {{ 'scada.no-tags' | translate }} + {{ 'scada.tag.no-tags' | translate }} diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.scss b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.scss index d4a1366a27..1c4238a11d 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.scss +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.scss @@ -16,13 +16,31 @@ .tb-scada-symbol-metadata-tags { flex: 1; margin: 12px; - .tb-scada-symbol-metadata-tags-list { - overflow: auto; - display: flex; - flex-direction: column; - gap: 8px; + .tb-form-table-header-cell { + &.tb-tag-header { + flex: 1 1 70%; + } + &.tb-state-render-function-header { + flex: 1 1 15%; + } + &.tb-on-click-action-header { + flex: 1 1 15%; + } + &.tb-state-render-function-header, &.tb-on-click-action-header { + display: flex; + justify-content: flex-end; + } + } + .tb-form-table { + overflow: hidden; } - .tb-no-tags { - height: 60px; + .tb-form-table-body { + overflow: auto; + tb-scada-symbol-metadata-tag { + overflow: hidden; + } + .mat-divider { + margin-top: 8px; + } } } diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.ts index ae0a75b69f..c429b5c0b4 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.ts @@ -16,10 +16,12 @@ import { Component, - forwardRef, HostBinding, + forwardRef, + HostBinding, Input, OnChanges, - OnInit, QueryList, + OnInit, + QueryList, SimpleChanges, ViewChildren, ViewEncapsulation @@ -33,7 +35,6 @@ import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, - ValidationErrors, Validator } from '@angular/forms'; import { IotSvgTag } from '@home/components/widget/lib/svg/iot-svg.models'; @@ -42,15 +43,8 @@ import { } from '@home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component'; import { TbEditorCompleter } from '@shared/models/ace/completion.models'; -const tagValidator = (control: AbstractControl): ValidationErrors | null => { - const tag: IotSvgTag = control.value; - if (!tag.tag) { - return { - tag: true - }; - } - return null; -}; +const tagIsEmpty = (tag: IotSvgTag): boolean => + !tag.stateRenderFunction && !tag.actions?.click?.actionFunction; @Component({ selector: 'tb-scada-symbol-metadata-tags', @@ -90,10 +84,10 @@ export class ScadaSymbolMetadataTagsComponent implements ControlValueAccessor, O @Input() clickActionFunctionCompleter: TbEditorCompleter; - availableTags: string[]; - tagsFormGroup: UntypedFormGroup; + private modelValue: IotSvgTag[]; + private propagateChange = (_val: any) => {}; constructor(private fb: UntypedFormBuilder) { @@ -103,15 +97,17 @@ export class ScadaSymbolMetadataTagsComponent implements ControlValueAccessor, O this.tagsFormGroup = this.fb.group({ tags: this.fb.array([]) }); - this.updateAvailableTags(); + const tagsResult = this.setupTags(); + this.tagsFormGroup.setControl('tags', this.prepareTagsFormArray(tagsResult.tags), {emitEvent: false}); + this.tagsFormGroup.valueChanges.subscribe( () => { - let tags: IotSvgTag[] = this.tagsFormGroup.get('tags').value; - if (tags) { - tags = tags.filter(t => !!t.tag); + let value: IotSvgTag[] = this.tagsFormGroup.get('tags').value; + if (value) { + value = value.filter(t => !tagIsEmpty(t)); } - this.updateAvailableTags(); - this.propagateChange(tags); + this.modelValue = value; + this.propagateChange(this.modelValue); } ); } @@ -121,7 +117,15 @@ export class ScadaSymbolMetadataTagsComponent implements ControlValueAccessor, O const change = changes[propName]; if (!change.firstChange && change.currentValue !== change.previousValue) { if (['tags'].includes(propName)) { - this.updateAvailableTags(); + const tagsResult = this.setupTags(this.modelValue); + const tagsControls = this.prepareTagsFormArray(tagsResult.tags); + if (tagsResult.emitEvent) { + setTimeout(() => { + this.tagsFormGroup.setControl('tags', tagsControls, {emitEvent: true}); + }); + } else { + this.tagsFormGroup.setControl('tags', tagsControls, {emitEvent: false}); + } } } } @@ -144,8 +148,9 @@ export class ScadaSymbolMetadataTagsComponent implements ControlValueAccessor, O } writeValue(value: IotSvgTag[] | undefined): void { - const tags= value || []; - this.tagsFormGroup.setControl('tags', this.prepareTagsFormArray(tags), {emitEvent: false}); + this.modelValue = value || []; + const tagsResult= this.setupTags(this.modelValue); + this.tagsFormGroup.setControl('tags', this.prepareTagsFormArray(tagsResult.tags), {emitEvent: false}); } public validate(_c: UntypedFormControl) { @@ -165,20 +170,7 @@ export class ScadaSymbolMetadataTagsComponent implements ControlValueAccessor, O return tagControl; } - removeTag(index: number, emitEvent = true) { - (this.tagsFormGroup.get('tags') as UntypedFormArray).removeAt(index, {emitEvent}); - } - - addTag() { - this.addNewTag(null); - setTimeout(() => { - const tagComponent = this.metadataTags.get(this.metadataTags.length-1); - tagComponent.focus(); - }); - } - editTagStateRenderFunction(tag: string): void { - this.addTagIfNotPresent(tag); setTimeout(() => { const tags: IotSvgTag[] = this.tagsFormGroup.get('tags').value; const index = tags.findIndex(t => t.tag === tag); @@ -188,7 +180,6 @@ export class ScadaSymbolMetadataTagsComponent implements ControlValueAccessor, O } editTagClickAction(tag: string): void { - this.addTagIfNotPresent(tag); setTimeout(() => { const tags: IotSvgTag[] = this.tagsFormGroup.get('tags').value; const index = tags.findIndex(t => t.tag === tag); @@ -197,44 +188,39 @@ export class ScadaSymbolMetadataTagsComponent implements ControlValueAccessor, O }); } - private addTagIfNotPresent(tag: string) { - const tags: IotSvgTag[] = this.tagsFormGroup.get('tags').value; - if (!tags || !tags.find(t => t.tag === tag)) { - this.addNewTag(tag); + private setupTags(existing?: IotSvgTag[]): {tags: IotSvgTag[]; emitEvent: boolean} { + existing = (existing || []).filter(t => !tagIsEmpty(t)); + const result = (this.tags || []).sort().map(tag => ({ + tag, + stateRenderFunction: null, + actions: { + click: { + actionFunction: null + } + } + })); + for (const tag of existing) { + const found = result.find(t => t.tag === tag.tag); + if (found) { + found.stateRenderFunction = tag.stateRenderFunction; + found.actions.click.actionFunction = tag.actions?.click?.actionFunction; + } } - } - - private addNewTag(tagLabel: string) { - const tag: IotSvgTag = { - tag: tagLabel + const tagRemoved = !!existing.find(existingTag => + !result.find(t => t.tag === existingTag.tag)); + return { + tags: result, + emitEvent: tagRemoved }; - const tagsArray = this.tagsFormGroup.get('tags') as UntypedFormArray; - const tagControl = this.fb.control(tag, [tagValidator]); - tagsArray.push(tagControl); } private prepareTagsFormArray(tags: IotSvgTag[] | undefined): UntypedFormArray { const tagsControls: Array = []; if (tags) { tags.forEach((tag) => { - tagsControls.push(this.fb.control(tag, [tagValidator])); + tagsControls.push(this.fb.control(tag, [])); }); } return this.fb.array(tagsControls); } - - private updateAvailableTags() { - if (this.tags) { - for (const c of this.tagsFormArray().controls) { - const svgTag: IotSvgTag = c.value; - if (svgTag.tag && !this.tags.includes(svgTag.tag)) { - const index = this.tagsFormArray().controls.indexOf(c); - this.removeTag(index, false); - } - } - } - const svgTags: IotSvgTag[] = this.tagsFormGroup.get('tags').value; - const usedTags = (svgTags || []).filter(t => !!t.tag).map(t => t.tag); - this.availableTags = (this.tags || []).filter(t => !usedTags.includes(t)); - } } diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.scss b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.scss index 2fec4381cc..c553338969 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.scss +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.scss @@ -79,35 +79,33 @@ .ace_tb { &.ace_scada-symbol { &-ctx { - color: orangered; - font-weight: bold; + color: #C52F00; &-properties, &-property { - color: #0c959c; + color: #185F2A; } &-values, &-value { - color: #669900; + color: #2CAA00; } &-tags, &-tag { - color: #cc8500; + color: #DF8600; } &-api, &-api-method { - color: #ff00fe; + color: #7214D0; } &-properties, &-values, &-tags, &-api { - font-style: italic; + // font-style: italic; // font-weight: bold; } &-property, &-value, &-tag, &-api-method { - font-weight: bold; - // font-weight: bold; + font-weight: 700; } } &-svg, &-element, &-event { - color: orangered; - font-weight: bold; + color: #C52F00; + // font-weight: bold; &-properties { - color: #0c959c; - font-weight: bold; + color: #7214D0; + font-weight: 700; } } } diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts index 813a652af1..4dcac6038f 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts @@ -37,6 +37,7 @@ import { ENTER } from '@angular/cdk/keycodes'; import Timeout = NodeJS.Timeout; import { MatButton } from '@angular/material/button'; import ITooltipsterInstance = JQueryTooltipster.ITooltipsterInstance; +import { TranslateService } from '@ngx-translate/core'; @Directive() abstract class ScadaSymbolPanelComponent implements AfterViewInit { @@ -60,7 +61,7 @@ abstract class ScadaSymbolPanelComponent implements AfterViewInit { {{ symbolElement?.element?.type }}:
`, styleUrls: ['./scada-symbol-tooltip.component.scss'], @@ -83,20 +84,20 @@ class ScadaSymbolAddTagPanelComponent extends ScadaSymbolPanelComponent { @Component({ template: `
- {{ isAdd ? 'Enter tag:' : 'Update tag:' }} + {{ (isAdd ? 'scada.tag.enter-tag' : 'scada.tag.update-tag' ) | translate }}: @@ -288,12 +289,12 @@ class ScadaSymbolTagPanelComponent extends ScadaSymbolPanelComponent implements
`, @@ -313,13 +314,14 @@ class ScadaSymbolRemoveTagConfirmComponent extends ScadaSymbolPanelComponent imp @Output() removeTag = new EventEmitter(); - constructor(public element: ElementRef) { + constructor(public element: ElementRef, + private translate: TranslateService) { super(element); } ngOnInit() { - this.deleteText = `Are you sure you want to delete tag
${this.symbolElement?.tag} - from ${this.symbolElement?.element?.type} element?`; + this.deleteText = this.translate.instant('scada.tag.delete-tag-text', + {tag: this.symbolElement?.tag, elementType: this.symbolElement?.element?.type}); } public onCancel() { @@ -339,29 +341,29 @@ class ScadaSymbolRemoveTagConfirmComponent extends ScadaSymbolPanelComponent imp color="primary" (click)="editStateRenderFunction()"> edit - Edit + action.edit -
scada.on-click-action
+
scada.tag.on-click-action
`, styleUrls: ['./scada-symbol-tooltip.component.scss'], diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index 1d49829f21..b70f4cee72 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -3414,13 +3414,18 @@ "title": "Title", "state-render-function": "State render function", "preview": "Preview", - "tag": "Tag", - "on-click-action": "On click action", - "remove-tag": "Remove tag", - "add-tag": "Add tag", - "no-tags": "No tags configured", - "select-tag": "Select tag", "preview-widget-action-text": "Widget action '{{type}}' successfully invoked!", + "tag": { + "tag": "Tag", + "on-click-action": "On click action", + "no-tags": "No tags configured", + "delete-tag-text": "Are you sure you want to delete tag
{{tag}} from {{elementType}} element?", + "update-tag": "Update tag", + "enter-tag": "Enter tag", + "tag-settings": "Tag settings", + "remove-tag": "Remove tag", + "add-tag": "Add tag" + }, "behavior": { "behavior": "Behavior", "id": "Id", diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss index f741fa5a31..d6a5d0c8ea 100644 --- a/ui-ngx/src/styles.scss +++ b/ui-ngx/src/styles.scss @@ -392,6 +392,7 @@ mat-icon { } .tb-ace-doc-tooltip { + white-space: pre-wrap; code { color: #444; &.title { From 9e8fe8ad73d446089122abe213877ed01f2d9ecb Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Thu, 30 May 2024 18:20:50 +0300 Subject: [PATCH 046/442] UI: SCADA symbol components refactoring. --- .../json/system/widget_bundles/cards.json | 1 - .../system/widget_bundles/scada_symbols.json | 13 + .../json/system/widget_types/iot_svg.json | 26 -- .../system/widget_types/scada_symbol.json | 28 +++ .../server/controller/ImageController.java | 2 +- .../controller/ImageControllerTest.java | 32 +-- .../server/common/data/ResourceSubType.java | 2 +- .../server/dao/resource/BaseImageService.java | 17 +- .../basic/basic-widget-config.module.ts | 8 +- .../scada-symbol-basic-config.component.html | 100 ++++++++ .../scada-symbol-basic-config.component.ts | 157 ++++++++++++ .../svg/iot-svg-basic-config.component.html | 48 ---- .../svg/iot-svg-basic-config.component.ts | 95 -------- .../time-series-chart-widget.component.html | 4 +- .../time-series-chart-widget.component.ts | 4 +- .../scada-symbol-widget.component.html} | 11 +- .../scada-symbol-widget.component.scss} | 16 +- .../scada-symbol-widget.component.ts} | 80 +++--- .../scada-symbol-widget.models.ts} | 20 +- .../scada-symbol.models.ts} | 230 +++++++++--------- ...ada-symbol-object-settings.component.html} | 50 ++-- ...ada-symbol-object-settings.component.scss} | 11 +- ...scada-symbol-object-settings.component.ts} | 129 +++++----- .../scada-symbol-object-settings.models.ts} | 14 +- .../common/widget-settings-common.module.ts | 8 +- .../widget/widget-components.module.ts | 6 +- .../home/pages/admin/admin-routing.module.ts | 6 +- ...scada-symbol-behavior-panel.component.html | 10 +- .../scada-symbol-behavior-panel.component.ts | 28 +-- .../scada-symbol-behavior-row.component.html | 4 +- .../scada-symbol-behavior-row.component.ts | 50 ++-- .../scada-symbol-behaviors.component.ts | 12 +- ...l-metadata-tag-function-panel.component.ts | 3 +- .../scada-symbol-metadata-tag.component.ts | 56 +---- .../scada-symbol-metadata-tags.component.ts | 32 +-- .../scada-symbol-metadata.component.ts | 16 +- .../scada-symbol-properties.component.ts | 16 +- ...scada-symbol-property-panel.component.html | 28 +-- .../scada-symbol-property-panel.component.ts | 36 +-- .../scada-symbol-property-row.component.html | 4 +- .../scada-symbol-property-row.component.ts | 44 ++-- .../scada-symbol-editor.component.html | 2 +- .../scada-symbol-editor.component.scss | 2 +- .../scada-symbol-editor.component.ts | 14 +- ...odels.ts => scada-symbol-editor.models.ts} | 114 +++++---- .../scada-symbol-tooltip.components.ts | 6 +- .../scada-symbol/scada-symbol.component.html | 31 ++- .../scada-symbol/scada-symbol.component.scss | 16 +- .../scada-symbol/scada-symbol.component.ts | 72 +++--- .../image/gallery-image-input.component.ts | 33 +-- .../image/image-gallery.component.ts | 2 +- .../image/scada-symbol-input.component.html | 65 +++++ .../image/scada-symbol-input.component.scss | 149 ++++++++++++ .../image/scada-symbol-input.component.ts | 198 +++++++++++++++ .../image/upload-image-dialog.component.ts | 32 +-- .../src/app/shared/models/resource.models.ts | 8 +- ui-ngx/src/app/shared/shared.module.ts | 7 +- .../assets/locale/locale.constant-en_US.json | 4 + ui-ngx/src/styles.scss | 2 +- 59 files changed, 1395 insertions(+), 819 deletions(-) create mode 100644 application/src/main/data/json/system/widget_bundles/scada_symbols.json delete mode 100644 application/src/main/data/json/system/widget_types/iot_svg.json create mode 100644 application/src/main/data/json/system/widget_types/scada_symbol.json create mode 100644 ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-symbol-basic-config.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-symbol-basic-config.component.ts delete mode 100644 ui-ngx/src/app/modules/home/components/widget/config/basic/svg/iot-svg-basic-config.component.html delete mode 100644 ui-ngx/src/app/modules/home/components/widget/config/basic/svg/iot-svg-basic-config.component.ts rename ui-ngx/src/app/modules/home/components/widget/lib/{svg/iot-svg-widget.component.html => scada/scada-symbol-widget.component.html} (69%) rename ui-ngx/src/app/modules/home/components/widget/lib/{svg/iot-svg-widget.component.scss => scada/scada-symbol-widget.component.scss} (82%) rename ui-ngx/src/app/modules/home/components/widget/lib/{svg/iot-svg-widget.component.ts => scada/scada-symbol-widget.component.ts} (52%) rename ui-ngx/src/app/modules/home/components/widget/lib/{svg/iot-svg-widget.models.ts => scada/scada-symbol-widget.models.ts} (70%) rename ui-ngx/src/app/modules/home/components/widget/lib/{svg/iot-svg.models.ts => scada/scada-symbol.models.ts} (73%) rename ui-ngx/src/app/modules/home/components/widget/lib/settings/common/{svg/iot-svg-object-settings.component.html => scada/scada-symbol-object-settings.component.html} (64%) rename ui-ngx/src/app/modules/home/components/widget/lib/settings/common/{svg/iot-svg-object-settings.component.scss => scada/scada-symbol-object-settings.component.scss} (82%) rename ui-ngx/src/app/modules/home/components/widget/lib/settings/common/{svg/iot-svg-object-settings.component.ts => scada/scada-symbol-object-settings.component.ts} (61%) rename ui-ngx/src/app/modules/home/components/widget/lib/settings/common/{svg/iot-svg-object-settings.models.ts => scada/scada-symbol-object-settings.models.ts} (71%) rename ui-ngx/src/app/modules/home/pages/scada-symbol/{scada-symbol.models.ts => scada-symbol-editor.models.ts} (89%) create mode 100644 ui-ngx/src/app/shared/components/image/scada-symbol-input.component.html create mode 100644 ui-ngx/src/app/shared/components/image/scada-symbol-input.component.scss create mode 100644 ui-ngx/src/app/shared/components/image/scada-symbol-input.component.ts diff --git a/application/src/main/data/json/system/widget_bundles/cards.json b/application/src/main/data/json/system/widget_bundles/cards.json index 43f1ab4886..5b6b928015 100644 --- a/application/src/main/data/json/system/widget_bundles/cards.json +++ b/application/src/main/data/json/system/widget_bundles/cards.json @@ -13,7 +13,6 @@ "cards.aggregated_value_card", "simple_value_and_chart_card", "progress_bar", - "iot_svg", "cards.label_widget", "cards.dashboard_state_widget", "cards.qr_code", diff --git a/application/src/main/data/json/system/widget_bundles/scada_symbols.json b/application/src/main/data/json/system/widget_bundles/scada_symbols.json new file mode 100644 index 0000000000..47615e6137 --- /dev/null +++ b/application/src/main/data/json/system/widget_bundles/scada_symbols.json @@ -0,0 +1,13 @@ +{ + "widgetsBundle": { + "alias": "scada_symbols", + "title": "SCADA symbols", + "image": null, + "description": "Bundle with SCADA symbols", + "order": 9200, + "name": "SCADA symbols" + }, + "widgetTypeFqns": [ + "scada_symbol" + ] +} \ No newline at end of file diff --git a/application/src/main/data/json/system/widget_types/iot_svg.json b/application/src/main/data/json/system/widget_types/iot_svg.json deleted file mode 100644 index fde568de95..0000000000 --- a/application/src/main/data/json/system/widget_types/iot_svg.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "fqn": "iot_svg", - "name": "IoT SVG", - "deprecated": false, - "image": null, - "description": "IoT SVG", - "descriptor": { - "type": "rpc", - "sizeX": 3.5, - "sizeY": 3.5, - "resources": [], - "templateHtml": "\n", - "templateCss": "", - "controllerScript": "self.onInit = function() {\n self.ctx.$scope.actionWidget.onInit();\n}\n\nself.typeParameters = function() {\n return {\n previewWidth: '280px',\n previewHeight: '280px',\n embedTitlePanel: true,\n displayRpcMessageToast: false\n };\n};\n\nself.onDestroy = function() {\n}\n", - "settingsSchema": "", - "dataKeySettingsSchema": "{}\n", - "settingsDirective": "", - "hasBasicMode": true, - "basicModeDirective": "tb-iot-svg-basic-config", - "defaultConfig": "{\"showTitle\":true,\"backgroundColor\":\"#ffffff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{},\"title\":\"IoT SVG\",\"dropShadow\":true,\"enableFullscreen\":false,\"widgetStyle\":{},\"actions\":{},\"widgetCss\":\"\",\"noDataDisplayMessage\":\"\",\"titleFont\":{\"size\":16,\"sizeUnit\":\"px\",\"family\":\"Roboto\",\"weight\":\"500\",\"style\":null,\"lineHeight\":\"1.6\"},\"showTitleIcon\":false,\"titleTooltip\":\"\",\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"pageSize\":1024,\"titleIcon\":\"mdi:lightbulb-outline\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\",\"configMode\":\"basic\",\"targetDevice\":null,\"titleColor\":null,\"borderRadius\":null}" - }, - "tags": [ - "svg", - "scada" - ] -} \ No newline at end of file diff --git a/application/src/main/data/json/system/widget_types/scada_symbol.json b/application/src/main/data/json/system/widget_types/scada_symbol.json new file mode 100644 index 0000000000..e7e56176f9 --- /dev/null +++ b/application/src/main/data/json/system/widget_types/scada_symbol.json @@ -0,0 +1,28 @@ +{ + "fqn": "scada_symbol", + "name": "SCADA symbol", + "deprecated": false, + "image": null, + "description": "SCADA symbol widget", + "descriptor": { + "type": "rpc", + "sizeX": 3.5, + "sizeY": 3.5, + "resources": [], + "templateHtml": "\n", + "templateCss": "", + "controllerScript": "self.onInit = function() {\n self.ctx.$scope.actionWidget.onInit();\n}\n\nself.typeParameters = function() {\n return {\n previewWidth: '280px',\n previewHeight: '280px',\n embedTitlePanel: true,\n displayRpcMessageToast: false\n };\n};\n\nself.onDestroy = function() {\n}\n", + "settingsSchema": "", + "dataKeySettingsSchema": "{}\n", + "settingsDirective": "", + "hasBasicMode": true, + "basicModeDirective": "tb-scada-symbol-basic-config", + "defaultConfig": "{\"showTitle\":true,\"backgroundColor\":\"rgba(0, 0, 0, 0)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{\"iotSvgObject\":{\"behavior\":{},\"properties\":{}},\"background\":{\"type\":\"color\",\"imageUrl\":null,\"color\":\"rgb(255, 255, 255)\",\"overlay\":{\"enabled\":false,\"color\":\"rgba(255,255,255,0.72)\",\"blur\":3}},\"padding\":\"12px\",\"scadaSymbolUrl\":\"tb-image:ZHJhd2luZy5zdmc=:TGV2ZWwgYW5kIEZhbg==:U0NBREFfU1lNQk9M;data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnRiPSJodHRwczovL3RoaW5nc2JvYXJkLmlvL3N2ZyIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEwMCAxMDAiPgo8dGI6bWV0YWRhdGEgeG1sbnM9IiI+PCFbQ0RBVEFbewogICJ0aXRsZSI6ICJMZXZlbCBhbmQgRmFuIiwKICAic3RhdGVSZW5kZXJGdW5jdGlvbiI6ICJ2YXIgc2hvd01pbk1heExldmVsID0gY3R4LnByb3BlcnRpZXMuc2hvd01pbk1heExldmVsO1xudmFyIG1pbkxldmVsRWxlbWVudCA9IGN0eC50YWdzLm1pbkxldmVsWzBdO1xudmFyIG1heExldmVsRWxlbWVudCA9IGN0eC50YWdzLm1heExldmVsWzBdO1xudmFyIG1pbkxldmVsID0gY3R4LnByb3BlcnRpZXMubWluTGV2ZWw7IFxudmFyIG1heExldmVsID0gY3R4LnByb3BlcnRpZXMubWF4TGV2ZWw7XG5cbmlmIChzaG93TWluTWF4TGV2ZWwpIHtcbiAgIFxuICAgdmFyIG1pbk1heExldmVsRm9udCA9IGN0eC5wcm9wZXJ0aWVzLm1pbk1heExldmVsRm9udDtcbiAgIHZhciBtaW5NYXhMZXZlbENvbG9yID0gY3R4LnByb3BlcnRpZXMubWluTWF4TGV2ZWxDb2xvcjtcbiAgIFxuICAgY3R4LmFwaS50ZXh0KG1pbkxldmVsRWxlbWVudCwgbWluTGV2ZWwpO1xuICAgY3R4LmFwaS50ZXh0KG1heExldmVsRWxlbWVudCwgbWF4TGV2ZWwpO1xuICAgXG4gICBjdHguYXBpLmZvbnQobWluTGV2ZWxFbGVtZW50LCBtaW5NYXhMZXZlbEZvbnQsIG1pbk1heExldmVsQ29sb3IpO1xuICAgY3R4LmFwaS5mb250KG1heExldmVsRWxlbWVudCwgbWluTWF4TGV2ZWxGb250LCBtaW5NYXhMZXZlbENvbG9yKTtcbiAgICAgIFxufSBlbHNlIHtcbiAgIG1pbkxldmVsRWxlbWVudC5oaWRlKCk7XG4gICBtYXhMZXZlbEVsZW1lbnQuaGlkZSgpO1xufVxuXG52YXIgZGlzYWJsZWQgPSBjdHgudmFsdWVzLmRpc2FibGVkO1xudmFyIG9uID0gY3R4LnZhbHVlcy5vbjtcbnZhciBsZXZlbCA9IGN0eC52YWx1ZXMubGV2ZWw7XG5cbnZhciBvbkJ1dHRvbiA9IGN0eC50YWdzLm9uQnV0dG9uO1xudmFyIG9mZkJ1dHRvbiA9IGN0eC50YWdzLm9mZkJ1dHRvbjtcbnZhciBsZXZlbFVwQnV0dG9uID0gY3R4LnRhZ3MubGV2ZWxVcEJ1dHRvbjtcbnZhciBsZXZlbERvd25CdXR0b24gPSBjdHgudGFncy5sZXZlbERvd25CdXR0b247XG5cbnZhciBvbkJ1dHRvbkVuYWJsZWQgPSAhZGlzYWJsZWQgJiYgIW9uO1xudmFyIG9mZkJ1dHRvbkVuYWJsZWQgPSAhZGlzYWJsZWQgJiYgb247XG52YXIgbGV2ZWxVcEVuYWJsZWQgPSAhZGlzYWJsZWQgJiYgbGV2ZWwgPCBtYXhMZXZlbDtcbnZhciBsZXZlbERvd25FbmFibGVkID0gIWRpc2FibGVkICYmIGxldmVsID4gbWluTGV2ZWw7XG5cbmlmIChvbkJ1dHRvbkVuYWJsZWQpIHtcbiAgICBjdHguYXBpLmVuYWJsZShvbkJ1dHRvbik7XG4gICAgb25CdXR0b25bMF0uZmluZE9uZSgncmVjdCcpLmF0dHIoe2ZpbGw6ICcjMTJlZDE5J30pO1xufSBlbHNlIHtcbiAgICBjdHguYXBpLmRpc2FibGUob25CdXR0b24pO1xuICAgIG9uQnV0dG9uWzBdLmZpbmRPbmUoJ3JlY3QnKS5hdHRyKHtmaWxsOiAnIzc3Nyd9KTtcbn1cbiAgIFxuaWYgKG9mZkJ1dHRvbkVuYWJsZWQpIHtcbiAgICBjdHguYXBpLmVuYWJsZShvZmZCdXR0b24pO1xuICAgIG9mZkJ1dHRvblswXS5maW5kT25lKCdyZWN0JykuYXR0cih7ZmlsbDogJyNlZDEyMWYnfSk7XG59IGVsc2Uge1xuICAgIGN0eC5hcGkuZGlzYWJsZShvZmZCdXR0b24pO1xuICAgIG9mZkJ1dHRvblswXS5maW5kT25lKCdyZWN0JykuYXR0cih7ZmlsbDogJyM3NzcnfSk7XG59ICAgIFxuXG5cbmlmIChsZXZlbFVwRW5hYmxlZCkge1xuICAgIGN0eC5hcGkuZW5hYmxlKGxldmVsVXBCdXR0b24pO1xuICAgIGxldmVsVXBCdXR0b25bMF0uZmluZE9uZSgncmVjdCcpLmF0dHIoe2ZpbGw6ICcjZmZmJ30pO1xufSBlbHNlIHtcbiAgICBjdHguYXBpLmRpc2FibGUobGV2ZWxVcEJ1dHRvbik7XG4gICAgbGV2ZWxVcEJ1dHRvblswXS5maW5kT25lKCdyZWN0JykuYXR0cih7ZmlsbDogJyM3NzcnfSk7XG59XG4gICBcbmlmIChsZXZlbERvd25FbmFibGVkKSB7XG4gICAgY3R4LmFwaS5lbmFibGUobGV2ZWxEb3duQnV0dG9uKTtcbiAgICBsZXZlbERvd25CdXR0b25bMF0uZmluZE9uZSgncmVjdCcpLmF0dHIoe2ZpbGw6ICcjZmZmJ30pO1xufSBlbHNlIHtcbiAgICBjdHguYXBpLmRpc2FibGUobGV2ZWxEb3duQnV0dG9uKTtcbiAgICBsZXZlbERvd25CdXR0b25bMF0uZmluZE9uZSgncmVjdCcpLmF0dHIoe2ZpbGw6ICcjNzc3J30pO1xufSIsCiAgInRhZ3MiOiBbCiAgICB7CiAgICAgICJ0YWciOiAiZmFuIiwKICAgICAgInN0YXRlUmVuZGVyRnVuY3Rpb24iOiAidmFyIG9uID0gY3R4LnZhbHVlcy5vbjtcbmlmIChvbikge1xuICAgIHZhciBsZXZlbCA9IGN0eC52YWx1ZXMubGV2ZWw7IFxuICAgIHZhciBtaW5MZXZlbCA9IGN0eC5wcm9wZXJ0aWVzLm1pbkxldmVsOyBcbiAgICB2YXIgbWF4TGV2ZWwgPSBjdHgucHJvcGVydGllcy5tYXhMZXZlbDtcblxuICAgIHZhciBzcGVlZCA9IChsZXZlbCAtIG1pbkxldmVsKSAvIChtYXhMZXZlbCAtIG1pbkxldmVsKTtcbiAgICBzcGVlZCA9IE1hdGgubWF4KDAsIE1hdGgubWluKDEsIHNwZWVkKSkqMjsgXG5cbiAgICB2YXIgdCA9IGVsZW1lbnQudGltZWxpbmUoKTtcbiAgICBpZiAoIXQuYWN0aXZlKCkpIHtcbiAgICAgIGN0eC5hcGkuYW5pbWF0ZShlbGVtZW50LCAxMDAwKS5lYXNlKCctJykucm90YXRlKDM2MCkubG9vcCgpO1xuICAgICAgdCA9IGVsZW1lbnQudGltZWxpbmUoKTtcbiAgICB9XG4gICAgdC5zcGVlZChzcGVlZCk7XG59IGVsc2Uge1xuICAgIGVsZW1lbnQudGltZWxpbmUoKS5zdG9wKCk7XG59XG4iLAogICAgICAiYWN0aW9ucyI6IG51bGwKICAgIH0sCiAgICB7CiAgICAgICJ0YWciOiAibGV2ZWwiLAogICAgICAic3RhdGVSZW5kZXJGdW5jdGlvbiI6ICJ2YXIgbGV2ZWwgPSBjdHgudmFsdWVzLmxldmVsOyBcbnZhciBkaXNhYmxlZCA9IGN0eC52YWx1ZXMuZGlzYWJsZWQ7XG52YXIgbWluTGV2ZWwgPSBjdHgucHJvcGVydGllcy5taW5MZXZlbDsgXG52YXIgbWF4TGV2ZWwgPSBjdHgucHJvcGVydGllcy5tYXhMZXZlbDtcblxudmFyIGhlaWdodCA9IChsZXZlbCAtIG1pbkxldmVsKSAvIChtYXhMZXZlbCAtIG1pbkxldmVsKTtcbmhlaWdodCA9IE1hdGgubWF4KDAsIE1hdGgubWluKDEsIGhlaWdodCkpKjgwOyBcblxuY3R4LmFwaS5hbmltYXRlKGVsZW1lbnQsIDIwMCkuYXR0cih7aGVpZ2h0OiBoZWlnaHR9KTtcblxudmFyIGZpbGw7XG5pZiAoZGlzYWJsZWQpIHtcbiAgZmlsbCA9IGN0eC5wcm9wZXJ0aWVzLmRpc2FibGVkTGV2ZWxCYWNrZ3JvdW5kO1xufSBlbHNlIHtcbiAgdmFyIGNvbG9yUHJvY2Vzc29yID0gY3R4LnByb3BlcnRpZXMubGV2ZWxCYWNrZ3JvdW5kO1xuICBjb2xvclByb2Nlc3Nvci51cGRhdGUobGV2ZWwpO1xuICBmaWxsID0gY29sb3JQcm9jZXNzb3IuY29sb3I7XG59XG5cbmVsZW1lbnQuYXR0cih7ZmlsbDogZmlsbH0pOyIsCiAgICAgICJhY3Rpb25zIjogbnVsbAogICAgfSwKICAgIHsKICAgICAgInRhZyI6ICJsZXZlbERvd25CdXR0b24iLAogICAgICAiYWN0aW9ucyI6IHsKICAgICAgICAiY2xpY2siOiB7CiAgICAgICAgICAiYWN0aW9uRnVuY3Rpb24iOiAidmFyIGxldmVsID0gY3R4LnZhbHVlcy5sZXZlbDsgXG52YXIgbWluTGV2ZWwgPSBjdHgucHJvcGVydGllcy5taW5MZXZlbDtcblxudmFyIG5ld0xldmVsID0gTWF0aC5tYXgobWluTGV2ZWwsIGxldmVsIC0gNSk7XG5jdHguYXBpLnNldFZhbHVlKCdsZXZlbCcsIG5ld0xldmVsKTtcbmN0eC5hcGkuY2FsbEFjdGlvbihldmVudCwgJ2xldmVsVXBkYXRlU3RhdGUnLCBuZXdMZXZlbCwge1xuICBlcnJvcjogKCkgPT4ge1xuICAgICBjdHguYXBpLnNldFZhbHVlKCdsZXZlbCcsIGxldmVsKTtcbiAgfVxufSk7IgogICAgICAgIH0KICAgICAgfQogICAgfSwKICAgIHsKICAgICAgInRhZyI6ICJsZXZlbFRpdGxlIiwKICAgICAgInN0YXRlUmVuZGVyRnVuY3Rpb24iOiAidmFyIHNob3dMZXZlbFRpdGxlID0gY3R4LnByb3BlcnRpZXMuc2hvd0xldmVsVGl0bGU7XG5cbmlmIChzaG93TGV2ZWxUaXRsZSkge1xuICAgdmFyIGxldmVsVGl0bGUgPSBjdHgucHJvcGVydGllcy5sZXZlbFRpdGxlO1xuICAgdmFyIGxldmVsVGl0bGVGb250ID0gY3R4LnByb3BlcnRpZXMubGV2ZWxUaXRsZUZvbnQ7XG4gICB2YXIgbGV2ZWxUaXRsZUNvbG9yID0gY3R4LnByb3BlcnRpZXMubGV2ZWxUaXRsZUNvbG9yO1xuICAgXG4gICBjdHguYXBpLnRleHQoZWxlbWVudCwgbGV2ZWxUaXRsZSk7XG4gICBjdHguYXBpLmZvbnQoZWxlbWVudCwgbGV2ZWxUaXRsZUZvbnQsIGxldmVsVGl0bGVDb2xvcik7XG4gICBcbn0gZWxzZSB7XG4gICBlbGVtZW50LmhpZGUoKTtcbn0iLAogICAgICAiYWN0aW9ucyI6IG51bGwKICAgIH0sCiAgICB7CiAgICAgICJ0YWciOiAibGV2ZWxVcEJ1dHRvbiIsCiAgICAgICJhY3Rpb25zIjogewogICAgICAgICJjbGljayI6IHsKICAgICAgICAgICJhY3Rpb25GdW5jdGlvbiI6ICJ2YXIgbGV2ZWwgPSBjdHgudmFsdWVzLmxldmVsOyBcbnZhciBtYXhMZXZlbCA9IGN0eC5wcm9wZXJ0aWVzLm1heExldmVsO1xuXG52YXIgbmV3TGV2ZWwgPSBNYXRoLm1pbihtYXhMZXZlbCwgbGV2ZWwgKyA1KTtcbmN0eC5hcGkuc2V0VmFsdWUoJ2xldmVsJywgbmV3TGV2ZWwpO1xuY3R4LmFwaS5jYWxsQWN0aW9uKGV2ZW50LCAnbGV2ZWxVcGRhdGVTdGF0ZScsIG5ld0xldmVsLCB7XG4gIGVycm9yOiAoKSA9PiB7XG4gICAgIGN0eC5hcGkuc2V0VmFsdWUoJ2xldmVsJywgbGV2ZWwpO1xuICB9XG59KTsiCiAgICAgICAgfQogICAgICB9CiAgICB9LAogICAgewogICAgICAidGFnIjogImxldmVsVmFsdWUiLAogICAgICAic3RhdGVSZW5kZXJGdW5jdGlvbiI6ICJ2YXIgc2hvd1ZhbHVlID0gY3R4LnByb3BlcnRpZXMuc2hvd1ZhbHVlO1xuXG5pZiAoc2hvd1ZhbHVlKSB7XG4gIHZhciB2YWx1ZUZvbnQgPSBjdHgucHJvcGVydGllcy52YWx1ZUZvbnQ7XG4gIHZhciB2YWx1ZUNvbG9yID0gY3R4LnByb3BlcnRpZXMudmFsdWVDb2xvcjtcbiAgdmFyIGxldmVsID0gY3R4LnZhbHVlcy5sZXZlbDsgXG4gIFxuICB2YXIgbGV2ZWxUZXh0ID0gY3R4LmFwaS5mb3JtYXRWYWx1ZShsZXZlbCwgY3R4LnByb3BlcnRpZXMudmFsdWVEZWNpbWFscywgY3R4LnByb3BlcnRpZXMudmFsdWVVbml0cywgZmFsc2UpO1xuXG4gIGN0eC5hcGkuZm9udChlbGVtZW50LCB2YWx1ZUZvbnQsIHZhbHVlQ29sb3IpO1xuICBjdHguYXBpLnRleHQoZWxlbWVudCwgbGV2ZWxUZXh0KTtcblxufSBlbHNlIHtcbiAgZWxlbWVudC5oaWRlKCk7XG4gIGN0eC50YWdzLmxldmVsVmFsdWVCYWNrZ3JvdW5kWzBdLmhpZGUoKTtcbn0iLAogICAgICAiYWN0aW9ucyI6IHsKICAgICAgICAiY2xpY2siOiB7CiAgICAgICAgICAiYWN0aW9uRnVuY3Rpb24iOiAiY3R4LmFwaS5jYWxsQWN0aW9uKGV2ZW50LCAnbGV2ZWxWYWx1ZUNsaWNrJyk7IgogICAgICAgIH0KICAgICAgfQogICAgfSwKICAgIHsKICAgICAgInRhZyI6ICJvZmZCdXR0b24iLAogICAgICAiYWN0aW9ucyI6IHsKICAgICAgICAiY2xpY2siOiB7CiAgICAgICAgICAiYWN0aW9uRnVuY3Rpb24iOiAiY3R4LmFwaS5jYWxsQWN0aW9uKGV2ZW50LCAnb2ZmVXBkYXRlU3RhdGUnLCB1bmRlZmluZWQsIHtcbiAgbmV4dDogKCkgPT4ge1xuICAgICBjdHguYXBpLnNldFZhbHVlKCdvbicsIGZhbHNlKTtcbiAgfVxufSk7XG4iCiAgICAgICAgfQogICAgICB9CiAgICB9LAogICAgewogICAgICAidGFnIjogIm9uQnV0dG9uIiwKICAgICAgImFjdGlvbnMiOiB7CiAgICAgICAgImNsaWNrIjogewogICAgICAgICAgImFjdGlvbkZ1bmN0aW9uIjogImN0eC5hcGkuY2FsbEFjdGlvbihldmVudCwgJ29uVXBkYXRlU3RhdGUnLCB1bmRlZmluZWQsIHtcbiAgbmV4dDogKCkgPT4ge1xuICAgICBjdHguYXBpLnNldFZhbHVlKCdvbicsIHRydWUpO1xuICB9XG59KTtcblxuIgogICAgICAgIH0KICAgICAgfQogICAgfSwKICAgIHsKICAgICAgInRhZyI6ICJyYW1rYSIsCiAgICAgICJzdGF0ZVJlbmRlckZ1bmN0aW9uIjogInZhciBvbiA9IGN0eC52YWx1ZXMub247XG5pZiAob24pIHtcbiAgICBpZiAoIWVsZW1lbnQudGltZWxpbmUoKS5hY3RpdmUoKSkge1xuICAgICAgICBjdHguYXBpLmFuaW1hdGUoZWxlbWVudCwgMTAwMCkuc2NhbGUoMS4xKS5sb29wKDAsIHRydWUpO1xuICAgIH1cbn0gZWxzZSB7XG4gICAgZWxlbWVudC50aW1lbGluZSgpLnN0b3AoKTtcbn0iLAogICAgICAiYWN0aW9ucyI6IG51bGwKICAgIH0KICBdLAogICJiZWhhdmlvciI6IFsKICAgIHsKICAgICAgImlkIjogImxldmVsIiwKICAgICAgIm5hbWUiOiAiTGV2ZWwiLAogICAgICAiaGludCI6IG51bGwsCiAgICAgICJ0eXBlIjogInZhbHVlIiwKICAgICAgInZhbHVlVHlwZSI6ICJET1VCTEUiLAogICAgICAiZGVmYXVsdFZhbHVlIjogMTAsCiAgICAgICJ0cnVlTGFiZWwiOiBudWxsLAogICAgICAiZmFsc2VMYWJlbCI6IG51bGwsCiAgICAgICJzdGF0ZUxhYmVsIjogbnVsbCwKICAgICAgInZhbHVlVG9EYXRhVHlwZSI6IG51bGwsCiAgICAgICJjb25zdGFudFZhbHVlIjogbnVsbCwKICAgICAgInZhbHVlVG9EYXRhRnVuY3Rpb24iOiBudWxsCiAgICB9LAogICAgewogICAgICAiaWQiOiAiZGlzYWJsZWQiLAogICAgICAibmFtZSI6ICJ7aTE4bjp3aWRnZXRzLnJwYy1zdGF0ZS5kaXNhYmxlZC1zdGF0ZX0iLAogICAgICAiaGludCI6ICJ7aTE4bjp3aWRnZXRzLnJwYy1zdGF0ZS5kaXNhYmxlZC1zdGF0ZS1oaW50fSIsCiAgICAgICJ0eXBlIjogInZhbHVlIiwKICAgICAgInZhbHVlVHlwZSI6ICJCT09MRUFOIiwKICAgICAgImRlZmF1bHRWYWx1ZSI6IGZhbHNlLAogICAgICAidHJ1ZUxhYmVsIjogIiIsCiAgICAgICJmYWxzZUxhYmVsIjogIiIsCiAgICAgICJzdGF0ZUxhYmVsIjogIntpMThuOndpZGdldHMucnBjLXN0YXRlLmRpc2FibGVkfSIsCiAgICAgICJ2YWx1ZVRvRGF0YVR5cGUiOiBudWxsLAogICAgICAiY29uc3RhbnRWYWx1ZSI6IG51bGwsCiAgICAgICJ2YWx1ZVRvRGF0YUZ1bmN0aW9uIjogbnVsbAogICAgfSwKICAgIHsKICAgICAgImlkIjogIm9uIiwKICAgICAgIm5hbWUiOiAiT24vT2ZmIHN0YXRlIiwKICAgICAgImhpbnQiOiBudWxsLAogICAgICAidHlwZSI6ICJ2YWx1ZSIsCiAgICAgICJ2YWx1ZVR5cGUiOiAiQk9PTEVBTiIsCiAgICAgICJkZWZhdWx0VmFsdWUiOiB0cnVlLAogICAgICAidHJ1ZUxhYmVsIjogIntpMThuOndpZGdldHMucnBjLXN0YXRlLm9ufSIsCiAgICAgICJmYWxzZUxhYmVsIjogIntpMThuOndpZGdldHMucnBjLXN0YXRlLm9mZn0iLAogICAgICAic3RhdGVMYWJlbCI6ICJ7aTE4bjp3aWRnZXRzLnJwYy1zdGF0ZS5vbn0iLAogICAgICAidmFsdWVUb0RhdGFUeXBlIjogbnVsbCwKICAgICAgImNvbnN0YW50VmFsdWUiOiBudWxsLAogICAgICAidmFsdWVUb0RhdGFGdW5jdGlvbiI6IG51bGwKICAgIH0sCiAgICB7CiAgICAgICJpZCI6ICJvblVwZGF0ZVN0YXRlIiwKICAgICAgIm5hbWUiOiAie2kxOG46d2lkZ2V0cy5ycGMtc3RhdGUudHVybi1vbn0iLAogICAgICAiaGludCI6ICJ7aTE4bjp3aWRnZXRzLnJwYy1zdGF0ZS50dXJuLW9uLWhpbnR9IiwKICAgICAgInR5cGUiOiAiYWN0aW9uIiwKICAgICAgInZhbHVlVHlwZSI6ICJCT09MRUFOIiwKICAgICAgInZhbHVlVG9EYXRhVHlwZSI6ICJDT05TVEFOVCIsCiAgICAgICJjb25zdGFudFZhbHVlIjogdHJ1ZQogICAgfSwKICAgIHsKICAgICAgImlkIjogIm9mZlVwZGF0ZVN0YXRlIiwKICAgICAgIm5hbWUiOiAie2kxOG46d2lkZ2V0cy5ycGMtc3RhdGUudHVybi1vZmZ9IiwKICAgICAgImhpbnQiOiAie2kxOG46d2lkZ2V0cy5ycGMtc3RhdGUudHVybi1vZmYtaGludH0iLAogICAgICAidHlwZSI6ICJhY3Rpb24iLAogICAgICAidmFsdWVUeXBlIjogIkJPT0xFQU4iLAogICAgICAidmFsdWVUb0RhdGFUeXBlIjogIkNPTlNUQU5UIiwKICAgICAgImNvbnN0YW50VmFsdWUiOiBmYWxzZQogICAgfSwKICAgIHsKICAgICAgImlkIjogImxldmVsVXBkYXRlU3RhdGUiLAogICAgICAibmFtZSI6ICJVcGRhdGUgbGV2ZWwiLAogICAgICAidHlwZSI6ICJhY3Rpb24iLAogICAgICAidmFsdWVUeXBlIjogIkRPVUJMRSIsCiAgICAgICJ2YWx1ZVRvRGF0YVR5cGUiOiAiVkFMVUUiLAogICAgICAiY29uc3RhbnRWYWx1ZSI6IDAKICAgIH0sCiAgICB7CiAgICAgICJpZCI6ICJsZXZlbFZhbHVlQ2xpY2siLAogICAgICAibmFtZSI6ICJPbiBsZXZlbCB2YWx1ZSBjbGljayIsCiAgICAgICJ0eXBlIjogIndpZGdldEFjdGlvbiIKICAgIH0KICBdLAogICJwcm9wZXJ0aWVzIjogWwogICAgewogICAgICAiaWQiOiAic2hvd0xldmVsVGl0bGUiLAogICAgICAibmFtZSI6ICJMZXZlbCB0aXRsZSIsCiAgICAgICJ0eXBlIjogInN3aXRjaCIsCiAgICAgICJkZWZhdWx0IjogdHJ1ZSwKICAgICAgInJvd0NsYXNzIjogImNvbHVtbi14cyIKICAgIH0sCiAgICB7CiAgICAgICJpZCI6ICJsZXZlbFRpdGxlIiwKICAgICAgIm5hbWUiOiAiTGV2ZWwgdGl0bGUiLAogICAgICAidHlwZSI6ICJ0ZXh0IiwKICAgICAgImRlZmF1bHQiOiAie2kxOG46d2lkZ2V0cy5iYXR0ZXJ5LWxldmVsLnZhbHVlfSIsCiAgICAgICJkaXNhYmxlT25Qcm9wZXJ0eSI6ICJzaG93TGV2ZWxUaXRsZSIsCiAgICAgICJmaWVsZENsYXNzIjogImZsZXgiCiAgICB9LAogICAgewogICAgICAiaWQiOiAibGV2ZWxUaXRsZUZvbnQiLAogICAgICAibmFtZSI6ICJMZXZlbCB0aXRsZSIsCiAgICAgICJ0eXBlIjogImZvbnQiLAogICAgICAiZGVmYXVsdCI6IHsKICAgICAgICAic2l6ZSI6IDYsCiAgICAgICAgInNpemVVbml0IjogInB4IiwKICAgICAgICAiZmFtaWx5IjogIlJvYm90byIsCiAgICAgICAgIndlaWdodCI6ICJub3JtYWwiLAogICAgICAgICJzdHlsZSI6ICJub3JtYWwiCiAgICAgIH0sCiAgICAgICJkaXNhYmxlT25Qcm9wZXJ0eSI6ICJzaG93TGV2ZWxUaXRsZSIKICAgIH0sCiAgICB7CiAgICAgICJpZCI6ICJsZXZlbFRpdGxlQ29sb3IiLAogICAgICAibmFtZSI6ICJMZXZlbCB0aXRsZSIsCiAgICAgICJ0eXBlIjogImNvbG9yIiwKICAgICAgImRlZmF1bHQiOiAiIzAwMDAwMCIsCiAgICAgICJkaXNhYmxlT25Qcm9wZXJ0eSI6ICJzaG93TGV2ZWxUaXRsZSIKICAgIH0sCiAgICB7CiAgICAgICJpZCI6ICJzaG93VmFsdWUiLAogICAgICAibmFtZSI6ICJWYWx1ZSIsCiAgICAgICJ0eXBlIjogInN3aXRjaCIsCiAgICAgICJkZWZhdWx0IjogdHJ1ZSwKICAgICAgInJvd0NsYXNzIjogImNvbHVtbi14cyIKICAgIH0sCiAgICB7CiAgICAgICJpZCI6ICJ2YWx1ZVVuaXRzIiwKICAgICAgIm5hbWUiOiAiVmFsdWUiLAogICAgICAidHlwZSI6ICJ1bml0cyIsCiAgICAgICJkZWZhdWx0IjogIiIsCiAgICAgICJkaXNhYmxlT25Qcm9wZXJ0eSI6ICJzaG93VmFsdWUiLAogICAgICAiZmllbGRDbGFzcyI6ICJmbGV4IgogICAgfSwKICAgIHsKICAgICAgImlkIjogInZhbHVlRGVjaW1hbHMiLAogICAgICAibmFtZSI6ICJWYWx1ZSIsCiAgICAgICJ0eXBlIjogIm51bWJlciIsCiAgICAgICJkZWZhdWx0IjogMiwKICAgICAgIm1pbiI6IDAsCiAgICAgICJtYXgiOiAxNSwKICAgICAgInN0ZXAiOiAxLAogICAgICAiZmllbGRTdWZmaXgiOiAiZGVjaW1hbHMiLAogICAgICAiZGlzYWJsZU9uUHJvcGVydHkiOiAic2hvd1ZhbHVlIiwKICAgICAgImZpZWxkQ2xhc3MiOiAiZmxleCIKICAgIH0sCiAgICB7CiAgICAgICJpZCI6ICJ2YWx1ZUZvbnQiLAogICAgICAibmFtZSI6ICJWYWx1ZSIsCiAgICAgICJ0eXBlIjogImZvbnQiLAogICAgICAiZGVmYXVsdCI6IHsKICAgICAgICAic2l6ZSI6IDYsCiAgICAgICAgInNpemVVbml0IjogInB4IiwKICAgICAgICAiZmFtaWx5IjogIlJvYm90byIsCiAgICAgICAgIndlaWdodCI6ICJub3JtYWwiLAogICAgICAgICJzdHlsZSI6ICJub3JtYWwiCiAgICAgIH0sCiAgICAgICJkaXNhYmxlT25Qcm9wZXJ0eSI6ICJzaG93VmFsdWUiCiAgICB9LAogICAgewogICAgICAiaWQiOiAidmFsdWVDb2xvciIsCiAgICAgICJuYW1lIjogIlZhbHVlIiwKICAgICAgInR5cGUiOiAiY29sb3IiLAogICAgICAiZGVmYXVsdCI6ICIjMDAwMDAwIiwKICAgICAgImRpc2FibGVPblByb3BlcnR5IjogInNob3dWYWx1ZSIKICAgIH0sCiAgICB7CiAgICAgICJpZCI6ICJtaW5MZXZlbCIsCiAgICAgICJuYW1lIjogIkxldmVsIHJhbmdlIiwKICAgICAgInN1YkxhYmVsIjogIm1pbiIsCiAgICAgICJ0eXBlIjogIm51bWJlciIsCiAgICAgICJyZXF1aXJlZCI6IHRydWUsCiAgICAgICJkZWZhdWx0IjogMCwKICAgICAgIm1pbiI6IDAsCiAgICAgICJyb3dDbGFzcyI6ICJjb2x1bW4teHMiLAogICAgICAiZmllbGRDbGFzcyI6ICJmbGV4LXhzIgogICAgfSwKICAgIHsKICAgICAgImlkIjogIm1heExldmVsIiwKICAgICAgIm5hbWUiOiAiTGV2ZWwgcmFuZ2UiLAogICAgICAic3ViTGFiZWwiOiAibWF4IiwKICAgICAgInR5cGUiOiAibnVtYmVyIiwKICAgICAgInJlcXVpcmVkIjogdHJ1ZSwKICAgICAgImRlZmF1bHQiOiAxMDAsCiAgICAgICJtaW4iOiAwLAogICAgICAiZmllbGRDbGFzcyI6ICJmbGV4LXhzIgogICAgfSwKICAgIHsKICAgICAgImlkIjogInNob3dNaW5NYXhMZXZlbCIsCiAgICAgICJuYW1lIjogIk1pbi9NYXggbGFiZWwiLAogICAgICAidHlwZSI6ICJzd2l0Y2giLAogICAgICAiZGVmYXVsdCI6IHRydWUKICAgIH0sCiAgICB7CiAgICAgICJpZCI6ICJtaW5NYXhMZXZlbEZvbnQiLAogICAgICAibmFtZSI6ICJNaW4vTWF4IGxhYmVsIiwKICAgICAgInR5cGUiOiAiZm9udCIsCiAgICAgICJkZWZhdWx0IjogewogICAgICAgICJzaXplIjogNiwKICAgICAgICAic2l6ZVVuaXQiOiAicHgiLAogICAgICAgICJmYW1pbHkiOiAiUm9ib3RvIiwKICAgICAgICAid2VpZ2h0IjogIm5vcm1hbCIsCiAgICAgICAgInN0eWxlIjogIm5vcm1hbCIKICAgICAgfSwKICAgICAgImRpc2FibGVPblByb3BlcnR5IjogInNob3dNaW5NYXhMZXZlbCIKICAgIH0sCiAgICB7CiAgICAgICJpZCI6ICJtaW5NYXhMZXZlbENvbG9yIiwKICAgICAgIm5hbWUiOiAiTWluL01heCBsYWJlbCIsCiAgICAgICJ0eXBlIjogImNvbG9yIiwKICAgICAgImRlZmF1bHQiOiAiIzY2NiIsCiAgICAgICJkaXNhYmxlT25Qcm9wZXJ0eSI6ICJzaG93TWluTWF4TGV2ZWwiCiAgICB9LAogICAgewogICAgICAiaWQiOiAibGV2ZWxCYWNrZ3JvdW5kIiwKICAgICAgIm5hbWUiOiAiTGV2ZWwgYmFja2dyb3VuZCIsCiAgICAgICJzdWJMYWJlbCI6ICJFbmFibGVkIiwKICAgICAgInR5cGUiOiAiY29sb3Jfc2V0dGluZ3MiLAogICAgICAiZGVmYXVsdCI6IHsKICAgICAgICAidHlwZSI6ICJjb25zdGFudCIsCiAgICAgICAgImNvbG9yIjogIiMxYWJiNDgiLAogICAgICAgICJjb2xvckZ1bmN0aW9uIjogInJldHVybiB2YWx1ZSA+IDcwID8gJyNkNTI4MGQnIDogJyMxYWJiNDgnOyIKICAgICAgfSwKICAgICAgImRpdmlkZXIiOiB0cnVlLAogICAgICAicm93Q2xhc3MiOiAiY29sdW1uLXhzIgogICAgfSwKICAgIHsKICAgICAgImlkIjogImRpc2FibGVkTGV2ZWxCYWNrZ3JvdW5kIiwKICAgICAgIm5hbWUiOiAiTGV2ZWwgYmFja2dyb3VuZCIsCiAgICAgICJzdWJMYWJlbCI6ICJEaXNhYmxlZCIsCiAgICAgICJ0eXBlIjogImNvbG9yIiwKICAgICAgImRlZmF1bHQiOiAiI2NjYyIKICAgIH0KICBdCn1dXT48L3RiOm1ldGFkYXRhPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjY2NjIiBzdHJva2Utd2lkdGg9IjIiIHRiOnRhZz0icmVjdCIvPjxyZWN0IHg9IjgiIHk9IjE1IiB3aWR0aD0iMjAiIGhlaWdodD0iODEiIHJ4PSIyIiBmaWxsPSIjZWNlY2VjIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS4wMzU5Ii8+PHJlY3QgdHJhbnNmb3JtPSJzY2FsZSgxIC0xKSIgeD0iOC41IiB5PSItOTUuNSIgd2lkdGg9IjE5IiBoZWlnaHQ9IjQwIiByeD0iMS41IiBmaWxsPSIjMWFiYjQ4IiB0Yjp0YWc9ImxldmVsIi8+PHRleHQgeD0iMzIiIHk9Ijk1IiBmaWxsPSIjNjY2IiBmb250LWZhbWlseT0iUm9ib3RvIiBmb250LXNpemU9IjZweCIgdGI6dGFnPSJtaW5MZXZlbCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHRzcGFuIHg9IjMxLjM1NDMwNyIgeT0iOTYuNjI2MjUxIj5taW48L3RzcGFuPjwvdGV4dD48cmVjdCB4PSIxMC45NDEiIHk9IjQ5LjU0NCIgd2lkdGg9IjE0LjE1NSIgaGVpZ2h0PSIxMiIgcng9IjIuODY2OCIgZmlsbD0iI2ZmZiIgZmlsbC1vcGFjaXR5PSIuNDUxNDgiIHRiOnRhZz0ibGV2ZWxWYWx1ZUJhY2tncm91bmQiLz48ZyBmb250LWZhbWlseT0iUm9ib3RvIiBmb250LXNpemU9IjZweCI+CiAgPHRleHQgeD0iMTgiIHk9IjU2IiBkb21pbmFudC1iYXNlbGluZT0ibWlkZGxlIiBmaWxsPSIjMDAwMDAwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiB0Yjp0YWc9ImxldmVsVmFsdWUiIHhtbDpzcGFjZT0icHJlc2VydmUiPjx0c3Bhbj5OL0E8L3RzcGFuPjwvdGV4dD4KICA8dGV4dCB4PSIxNy42MzY4MDUiIHk9IjEwLjM0NzkzMyIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgZmlsbD0iIzAwMDAwMCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgdGI6dGFnPSJsZXZlbFRpdGxlIiB4bWw6c3BhY2U9InByZXNlcnZlIj48dHNwYW4+TGV2ZWw8L3RzcGFuPjwvdGV4dD4KICA8dGV4dCB4PSIzMiIgeT0iMjAiIGZpbGw9IiM2NjY2NjYiIHRiOnRhZz0ibWF4TGV2ZWwiIHhtbDpzcGFjZT0icHJlc2VydmUiPjx0c3BhbiB4PSIyOS44NjU0OTYiIHk9IjE4LjcxNjEyNyI+bWF4PC90c3Bhbj48L3RleHQ+CiA8L2c+PHBhdGggZD0ibTgyLjE0MyAyNy41MzhoLTIwLjQ5OWMtMS4xMDQ1IDAtMS45OTk5IDAuODk1NC0xLjk5OTkgMS45OTk5djIwLjQ5OWMwIDEuMTA0NSAwLjg5NTQgMS45OTk5IDEuOTk5OSAxLjk5OTloMjAuNDk5YzEuMTA0NSAwIDEuOTk5OS0wLjg5NTQgMS45OTk5LTEuOTk5OXYtMjAuNDk5YzAtMS4xMDQ1LTAuODk1NC0xLjk5OTktMS45OTk5LTEuOTk5OXptLTIwLjQ5OSAxLjQ5OTljMC4yNzYxMyAwIDAuNDk5OTggMC4yMjM4NSAwLjQ5OTk4IDAuNDk5OThzLTAuMjIzODUgMC40OTk5OC0wLjQ5OTk4IDAuNDk5OTgtMC40OTk5OC0wLjIyMzg1LTAuNDk5OTgtMC40OTk5OCAwLjIyMzg1LTAuNDk5OTggMC40OTk5OC0wLjQ5OTk4em0wIDIxLjQ5OWMtMC4yNzYxMyAwLTAuNDk5OTgtMC4yMjM4NS0wLjQ5OTk4LTAuNDk5OThzMC4yMjM4NS0wLjQ5OTk4IDAuNDk5OTgtMC40OTk5OCAwLjQ5OTk4IDAuMjIzODUgMC40OTk5OCAwLjQ5OTk4LTAuMjIzODUgMC40OTk5OC0wLjQ5OTk4IDAuNDk5OTh6bTEwLjI0OS0wLjc5OTk3Yy01LjQ5NSAwLTkuOTQ5NS00LjQ1NDUtOS45NDk1LTkuOTQ5NXM0LjQ1NDUtOS45NDk1IDkuOTQ5NS05Ljk0OTUgOS45NDk1IDQuNDU0NSA5Ljk0OTUgOS45NDk1LTQuNDU0NSA5Ljk0OTUtOS45NDk1IDkuOTQ5NXptMTAuMjQ5IDAuNzk5OTdjLTAuMjc2MTMgMC0wLjQ5OTk4LTAuMjIzODUtMC40OTk5OC0wLjQ5OTk4czAuMjIzODUtMC40OTk5OCAwLjQ5OTk4LTAuNDk5OTggMC40OTk5OCAwLjIyMzg1IDAuNDk5OTggMC40OTk5OC0wLjIyMzg1IDAuNDk5OTgtMC40OTk5OCAwLjQ5OTk4em0wLTIwLjQ5OWMtMC4yNzYxMyAwLTAuNDk5OTgtMC4yMjM4NS0wLjQ5OTk4LTAuNDk5OThzMC4yMjM4NS0wLjQ5OTk4IDAuNDk5OTgtMC40OTk5OCAwLjQ5OTk4IDAuMjIzODUgMC40OTk5OCAwLjQ5OTk4LTAuMjIzODUgMC40OTk5OC0wLjQ5OTk4IDAuNDk5OTh6IiBmaWxsPSIjMDgwZDdkIiBzdHJva2Utd2lkdGg9Ii4wNDAwMzEiIHRiOnRhZz0icmFta2EiLz48cGF0aCBkPSJtODAuNjYgMzcuOTgzYy0wLjA0OTU2LTAuMjQwNzgtMC4xNTI4OC0wLjQxMjYtMC4zNDI0Mi0wLjU2OTE2LTEuNTE0OC0xLjI1MTgtMy42MTU0LTEuMTY3Ny02LjMwMjEgMC4yNTIzOS0wLjE3NTMzLTAuMTc1MzMtMC4zNjUxMi0wLjMyMzUzLTAuNTc3OC0wLjQ1MTE0IDEuODUxNy0xLjY2MTIgMy41Mzk2LTIuMzU4NiA1LjA2MzctMi4wOTI0IDAuNDQ5MzQgMC4wNzg1IDAuNzYwNS0wLjQzNjM3IDAuNDgyMDktMC43OTc2NS0wLjYxNzk1LTAuODAyMDEtMS4zMjEyLTEuNDU1LTIuMTY2OC0yLjAxMTktMC4yMDUzNi0wLjEzNTIyLTAuMzk5ODctMC4xODM1OC0wLjY0NDYxLTAuMTYwMzItMS45NTYzIDAuMTg1OTQtMy4zODIyIDEuNzMwOC00LjI3NzggNC42MzQ3LTAuMjQ3OTkgMC0wLjQ4Njk3IDAuMDI5MzgtMC43Mjc1NiAwLjA4OTU1IDAuMTM0Ny0yLjQ4NCAwLjgzNTA0LTQuMTcwNyAyLjEwMS01LjA2MDEgMC4zNzMyNC0wLjI2MjIgMC4yMjkxOC0wLjg0NjI5LTAuMjIzMTMtMC45MDQ5Ny0xLjAwNDEtMC4xMzAxNC0xLjk2MzEtMC4wOTQ1OS0yLjk1NDggMC4xMDk1Ni0wLjI0MDc4IDAuMDQ5NTYtMC40MTI2IDAuMTUyODgtMC41NjkxNiAwLjM0MjQyLTEuMjUxOCAxLjUxNDgtMS4xNjc3IDMuNjE1NCAwLjI1MjM5IDYuMzAyMS0wLjE3NTMzIDAuMTc1MzMtMC4zMjM1MyAwLjM2NTEyLTAuNDUxMTQgMC41Nzc4LTEuNjYxMi0xLjg1MTctMi4zNTg2LTMuNTM5Ni0yLjA5MjQtNS4wNjM3IDAuMDc4NS0wLjQ0OTM0LTAuNDM2MzctMC43NjA1LTAuNzk3NjUtMC40ODIxMy0wLjgwMjAxIDAuNjE3OTUtMS40NTUgMS4zMjEyLTIuMDExOSAyLjE2NjgtMC4xMzUyMiAwLjIwNTM2LTAuMTgzNTggMC4zOTk4Ni0wLjE2MDMyIDAuNjQ0NjEgMC4xODU5NCAxLjk1NjMgMS43MzA4IDMuMzgyMiA0LjYzNDcgNC4yNzc4IDAgMC4yNDc5OSAwLjAyOTM4IDAuNDg2OTcgMC4wODk1NSAwLjcyNzU2LTIuNDg0LTAuMTM0Ny00LjE3MDctMC44MzUwNC01LjA2MDEtMi4xMDEtMC4yNjIyLTAuMzczMjQtMC44NDYyOS0wLjIyOTE4LTAuOTA0OTcgMC4yMjMxMy0wLjEzMDE0IDEuMDA0MS0wLjA5NDU5IDEuOTYzMSAwLjEwOTU2IDIuOTU0OCAwLjA0OTU2IDAuMjQwNzggMC4xNTI4OCAwLjQxMjYgMC4zNDI0MiAwLjU2OTE2IDEuNTE0OCAxLjI1MTggMy42MTU0IDEuMTY3NyA2LjMwMjEtMC4yNTIzOSAwLjE3NTMzIDAuMTc1MzMgMC4zNjUxMiAwLjMyMzUzIDAuNTc3OCAwLjQ1MTE0LTEuODUxNyAxLjY2MTItMy41Mzk2IDIuMzU4Ni01LjA2MzcgMi4wOTI0LTAuNDQ5MzQtMC4wNzg1LTAuNzYwNSAwLjQzNjM3LTAuNDgyMDkgMC43OTc2NSAwLjYxNzk1IDAuODAyMDEgMS4zMjEyIDEuNDU1IDIuMTY2OCAyLjAxMTkgMC4yMDUzNiAwLjEzNTIyIDAuMzk5ODYgMC4xODM1OCAwLjY0NDYxIDAuMTYwMzIgMS45NTYzLTAuMTg1OTQgMy4zODIyLTEuNzMwOCA0LjI3NzgtNC42MzQ3IDAuMjQ3OTkgMCAwLjQ4Njk3LTAuMDI5MzggMC43Mjc1Ni0wLjA4OTU5LTAuMTM0NyAyLjQ4NC0wLjgzNTA0IDQuMTcwNy0yLjEwMSA1LjA2MDEtMC4zNzMyNCAwLjI2MjItMC4yMjkxOCAwLjg0NjI5IDAuMjIzMTMgMC45MDQ5NyAxLjAwNDEgMC4xMzAxNCAxLjk2MzEgMC4wOTQ1OSAyLjk1NDgtMC4xMDk1NiAwLjI0MDc4LTAuMDQ5NTYgMC40MTI2LTAuMTUyODggMC41NjkxNi0wLjM0MjQyIDEuMjUxOC0xLjUxNDggMS4xNjc3LTMuNjE1NC0wLjI1MjM5LTYuMzAyMSAwLjE3NTMzLTAuMTc1MzMgMC4zMjM1My0wLjM2NTEyIDAuNDUxMTQtMC41Nzc4IDEuNjYxMiAxLjg1MTcgMi4zNTg2IDMuNTM5NiAyLjA5MjQgNS4wNjM3LTAuMDc4NSAwLjQ0OTM0IDAuNDM2MzcgMC43NjA1IDAuNzk3NjUgMC40ODIwOSAwLjgwMjAxLTAuNjE3OTUgMS40NTUtMS4zMjEyIDIuMDExOS0yLjE2NjggMC4xMzUyMi0wLjIwNTM2IDAuMTgzNTgtMC4zOTk4NyAwLjE2MDMyLTAuNjQ0NjEtMC4xODU5NC0xLjk1NjMtMS43MzA4LTMuMzgyMi00LjYzNDctNC4yNzc4IDAtMC4yNDc5OS0wLjAyOTM4LTAuNDg2OTctMC4wODk1NS0wLjcyNzU2IDIuNDg0IDAuMTM0NyA0LjE3MDcgMC44MzUwNCA1LjA2MDEgMi4xMDEgMC4yNjIyIDAuMzczMjQgMC44NDYyOSAwLjIyOTE4IDAuOTA0OTctMC4yMjMxMyAwLjEzMDE0LTEuMDA0IDAuMDk0NTktMS45NjMtMC4xMDk1Ni0yLjk1NDd6bS04Ljc2NTcgNC4zMDQzYy0xLjM4MDYgMC0yLjQ5OTktMS4xMTkzLTIuNDk5OS0yLjQ5OTlzMS4xMTkzLTIuNDk5OSAyLjQ5OTktMi40OTk5IDIuNDk5OSAxLjExOTMgMi40OTk5IDIuNDk5OS0xLjExOTMgMi40OTk5LTIuNDk5OSAyLjQ5OTl6IiBmaWxsPSIjN2QwODFlIiBzdHJva2Utd2lkdGg9Ii4wNDAwMzEiIHRiOnRhZz0iZmFuIi8+PGcgdGI6dGFnPSJvbkJ1dHRvbiI+CiAgPHJlY3QgeD0iNTQuNzAyIiB5PSI2MC4zNzIiIHdpZHRoPSIxNC4yNjMiIGhlaWdodD0iNy40MjYxIiByeD0iMS41IiBmaWxsPSIjMTJlZDE5IiBzdHJva2U9IiMwMDAiIHRiOnRhZz0ib25CdXR0b25CYWNrZ3JvdW5kIi8+CiAgPHRleHQgeD0iNjEuODU1NTE4IiB5PSI2NC40OTEyOCIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9IlJvYm90byIgZm9udC1zaXplPSI0LjQ0NjFweCIgc3Ryb2tlLXdpZHRoPSIuNzQxMDEiIHRleHQtYW5jaG9yPSJtaWRkbGUiIHhtbDpzcGFjZT0icHJlc2VydmUiPjx0c3BhbiBzdHJva2Utd2lkdGg9Ii43NDEwMSI+T248L3RzcGFuPjwvdGV4dD4KIDwvZz48ZyB0Yjp0YWc9Im9mZkJ1dHRvbiI+CiAgPHJlY3QgeD0iNzQuMzY3IiB5PSI2MC4zMTEiIHdpZHRoPSIxNC4yNjMiIGhlaWdodD0iNy40MjYxIiByeD0iMS41IiBmaWxsPSIjZWQxMjFmIiBzdHJva2U9IiMwMDAiIHRiOnRhZz0ib2ZmQnV0dG9uQmFja2dyb3VuZCIvPgogIDx0ZXh0IHg9IjgxLjM2NTk0NCIgeT0iNjQuNTE4MzQ5IiBkb21pbmFudC1iYXNlbGluZT0ibWlkZGxlIiBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0iUm9ib3RvIiBmb250LXNpemU9IjQuNDQ2MXB4IiBzdHJva2Utd2lkdGg9Ii43NDEwMSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHRzcGFuIHN0cm9rZS13aWR0aD0iLjc0MTAxIj5PZmY8L3RzcGFuPjwvdGV4dD4KIDwvZz48ZyBzdHJva2U9IiMwMDAiIHN0cm9rZS1taXRlcmxpbWl0PSIxIiB0Yjp0YWc9ImxldmVsVXBCdXR0b24iPgogIDxyZWN0IHg9IjM0Ljk3IiB5PSIzOS4zNzciIHdpZHRoPSI5LjUwMDUiIGhlaWdodD0iMTIuNTg0IiByeD0iLjc1IiBmaWxsPSJub25lIi8+CiAgPHBhdGggdHJhbnNmb3JtPSJtYXRyaXgoLjQ3NTMgLS4yOTM4IC4yOTM4IC40NzUzIDQuODgyMSAzMS4wNCkiIGQ9Im00MS41NDQgNjAuMjQtNy44OTMtNC45NzYyIDguMjU2LTQuMzQ3NC0wLjE4MTUzIDQuNjYxOHoiIGZpbGw9IiMxMmVkMTkiLz4KIDwvZz48ZyBzdHJva2U9IiMwMDAiIHN0cm9rZS1taXRlcmxpbWl0PSIxIiB0Yjp0YWc9ImxldmVsRG93bkJ1dHRvbiI+CiAgPHJlY3QgeD0iMzQuOTciIHk9IjU5LjAzOSIgd2lkdGg9IjkuNTAwNSIgaGVpZ2h0PSIxMi41ODQiIHJ4PSIuNzUiIGZpbGw9Im5vbmUiLz4KICA8cGF0aCB0cmFuc2Zvcm09Im1hdHJpeCgtLjQ3NTE0IC4yOTQwNSAtLjI5NDA1IC0uNDc1MTQgNzQuNTY4IDc5Ljc3MSkiIGQ9Im00MS41NDQgNjAuMjQtNy44OTMtNC45NzYyIDguMjU2LTQuMzQ3NC0wLjE4MTUzIDQuNjYxOHoiIGZpbGw9IiMxMmVkMTkiLz4KIDwvZz4KPC9zdmc+\",\"scadaSymbolObjectSettings\":{\"behavior\":{},\"properties\":{}}},\"title\":\"SCADA symbol\",\"dropShadow\":true,\"enableFullscreen\":false,\"widgetStyle\":{},\"actions\":{},\"widgetCss\":\"\",\"noDataDisplayMessage\":\"\",\"titleFont\":{\"size\":16,\"sizeUnit\":\"px\",\"family\":\"Roboto\",\"weight\":\"500\",\"style\":null,\"lineHeight\":\"1.6\"},\"showTitleIcon\":false,\"titleTooltip\":\"\",\"titleStyle\":null,\"pageSize\":1024,\"titleIcon\":\"mdi:lightbulb-outline\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\",\"configMode\":\"basic\",\"targetDevice\":null,\"titleColor\":null,\"borderRadius\":\"0px\",\"margin\":\"0px\"}" + }, + "tags": [ + "svg", + "scada", + "SCADA", + "symbol" + ] +} \ No newline at end of file diff --git a/application/src/main/java/org/thingsboard/server/controller/ImageController.java b/application/src/main/java/org/thingsboard/server/controller/ImageController.java index b81dcd326d..d93afab66d 100644 --- a/application/src/main/java/org/thingsboard/server/controller/ImageController.java +++ b/application/src/main/java/org/thingsboard/server/controller/ImageController.java @@ -266,7 +266,7 @@ public class ImageController extends BaseController { @RequestParam int pageSize, @Parameter(description = PAGE_NUMBER_DESCRIPTION, required = true) @RequestParam int page, - @Parameter(description = RESOURCE_IMAGE_SUB_TYPE_DESCRIPTION, schema = @Schema(allowableValues = {"IMAGE", "IOT_SVG"})) + @Parameter(description = RESOURCE_IMAGE_SUB_TYPE_DESCRIPTION, schema = @Schema(allowableValues = {"IMAGE", "SCADA_SYMBOL"})) @RequestParam(required = false) String imageSubType, @Parameter(description = RESOURCE_INCLUDE_SYSTEM_IMAGES_DESCRIPTION) @RequestParam(required = false) boolean includeSystemImages, diff --git a/application/src/test/java/org/thingsboard/server/controller/ImageControllerTest.java b/application/src/test/java/org/thingsboard/server/controller/ImageControllerTest.java index cf43f54df9..29bf048082 100644 --- a/application/src/test/java/org/thingsboard/server/controller/ImageControllerTest.java +++ b/application/src/test/java/org/thingsboard/server/controller/ImageControllerTest.java @@ -115,11 +115,11 @@ public class ImageControllerTest extends AbstractControllerTest { } @Test - public void testUploadIoTSvgImage() throws Exception { - String filename = "my_iot_svg_image.svg"; - TbResourceInfo imageInfo = uploadImage(HttpMethod.POST, "/api/image", ResourceSubType.IOT_SVG.name(), filename, "image/svg+xml", SVG_IMAGE); + public void testUploadScadaSymbolImage() throws Exception { + String filename = "my_scada_symbol_image.svg"; + TbResourceInfo imageInfo = uploadImage(HttpMethod.POST, "/api/image", ResourceSubType.SCADA_SYMBOL.name(), filename, "image/svg+xml", SVG_IMAGE); - assertThat(imageInfo.getResourceSubType()).isEqualTo(ResourceSubType.IOT_SVG); + assertThat(imageInfo.getResourceSubType()).isEqualTo(ResourceSubType.SCADA_SYMBOL); ImageDescriptor imageDescriptor = imageInfo.getDescriptor(ImageDescriptor.class); checkSvgImageDescriptor(imageDescriptor); @@ -224,37 +224,37 @@ public class ImageControllerTest extends AbstractControllerTest { String systemImageName = "my_system_png_image.png"; TbResourceInfo systemImage = uploadImage(HttpMethod.POST, "/api/image", systemImageName, "image/png", PNG_IMAGE); - String systemIotSvgName = "my_system_iot_svg_image.svg"; - TbResourceInfo systemIotSvg = uploadImage(HttpMethod.POST, "/api/image", ResourceSubType.IOT_SVG.name(), systemIotSvgName, "image/svg+xml", SVG_IMAGE); + String systemScadaSymbolName = "my_system_scada_symbol_image.svg"; + TbResourceInfo systemScadaSymbol = uploadImage(HttpMethod.POST, "/api/image", ResourceSubType.SCADA_SYMBOL.name(), systemScadaSymbolName, "image/svg+xml", SVG_IMAGE); loginTenantAdmin(); String tenantImageName = "my_jpeg_image.jpg"; TbResourceInfo tenantImage = uploadImage(HttpMethod.POST, "/api/image", tenantImageName, "image/jpeg", JPEG_IMAGE); - String tenantIotSvgName = "my_iot_svg_image.svg"; - TbResourceInfo tenantIotSvg = uploadImage(HttpMethod.POST, "/api/image", ResourceSubType.IOT_SVG.name(), tenantIotSvgName, "image/svg+xml", SVG_IMAGE); + String tenantScadaSymbolName = "my_scada_symbol_image.svg"; + TbResourceInfo tenantScadaSymbol = uploadImage(HttpMethod.POST, "/api/image", ResourceSubType.SCADA_SYMBOL.name(), tenantScadaSymbolName, "image/svg+xml", SVG_IMAGE); List tenantImages = getImages(null, false, 10); assertThat(tenantImages).containsOnly(tenantImage); - List tenantIotSvgs = getImages(null, ResourceSubType.IOT_SVG.name(), false, 10); - assertThat(tenantIotSvgs).containsOnly(tenantIotSvg); + List tenantScadaSymbols = getImages(null, ResourceSubType.SCADA_SYMBOL.name(), false, 10); + assertThat(tenantScadaSymbols).containsOnly(tenantScadaSymbol); List allImages = getImages(null, true, 10); assertThat(allImages).containsOnly(tenantImage, systemImage); - List allIotSvgs = getImages(null, ResourceSubType.IOT_SVG.name(), true, 10); - assertThat(allIotSvgs).containsOnly(tenantIotSvg, systemIotSvg); + List allScadaSymbols = getImages(null, ResourceSubType.SCADA_SYMBOL.name(), true, 10); + assertThat(allScadaSymbols).containsOnly(tenantScadaSymbol, systemScadaSymbol); assertThat(getImages("png", true, 10)) .containsOnly(systemImage); assertThat(getImages("jpg", true, 10)) .containsOnly(tenantImage); - assertThat(getImages("my_system_iot", ResourceSubType.IOT_SVG.name(), true, 10)) - .containsOnly(systemIotSvg); - assertThat(getImages("my_iot_svg", ResourceSubType.IOT_SVG.name(),true, 10)) - .containsOnly(tenantIotSvg); + assertThat(getImages("my_system_scada_symbol", ResourceSubType.SCADA_SYMBOL.name(), true, 10)) + .containsOnly(systemScadaSymbol); + assertThat(getImages("my_scada_symbol", ResourceSubType.SCADA_SYMBOL.name(),true, 10)) + .containsOnly(tenantScadaSymbol); } @Test diff --git a/common/data/src/main/java/org/thingsboard/server/common/data/ResourceSubType.java b/common/data/src/main/java/org/thingsboard/server/common/data/ResourceSubType.java index 13203f908f..10a033f75d 100644 --- a/common/data/src/main/java/org/thingsboard/server/common/data/ResourceSubType.java +++ b/common/data/src/main/java/org/thingsboard/server/common/data/ResourceSubType.java @@ -17,5 +17,5 @@ package org.thingsboard.server.common.data; public enum ResourceSubType { IMAGE, - IOT_SVG + SCADA_SYMBOL } diff --git a/dao/src/main/java/org/thingsboard/server/dao/resource/BaseImageService.java b/dao/src/main/java/org/thingsboard/server/dao/resource/BaseImageService.java index 28d00f8b5d..79427f8d06 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/resource/BaseImageService.java +++ b/dao/src/main/java/org/thingsboard/server/dao/resource/BaseImageService.java @@ -104,6 +104,7 @@ public class BaseImageService extends BaseResourceService implements ImageServic WIDGET_TYPE_BASE64_MAPPING.put("settings.markerImages", "Map marker image $index"); WIDGET_TYPE_BASE64_MAPPING.put("settings.background.imageUrl", "$prefix background"); WIDGET_TYPE_BASE64_MAPPING.put("settings.background.imageBase64", "$prefix background"); + WIDGET_TYPE_BASE64_MAPPING.put("settings.scadaSymbolUrl", "$prefix SCADA symbol"); WIDGET_TYPE_BASE64_MAPPING.put("datasources.*.dataKeys.*.settings.customIcon", "$prefix custom icon"); } @@ -425,7 +426,7 @@ public class BaseImageService extends BaseResourceService implements ImageServic return base64ToImageUrl(tenantId, name, data, false); } - private static final Pattern TB_IMAGE_METADATA_PATTERN = Pattern.compile("^tb-image:(.*):(.*);data:(.*);.*"); + private static final Pattern TB_IMAGE_METADATA_PATTERN = Pattern.compile("^tb-image:([^:]*):([^:]*):?([^:]*)?;data:(.*);.*"); private UpdateResult base64ToImageUrl(TenantId tenantId, String name, String data, boolean strict) { if (StringUtils.isBlank(data)) { @@ -435,11 +436,15 @@ public class BaseImageService extends BaseResourceService implements ImageServic boolean matches = matcher.matches(); String mdResourceKey = null; String mdResourceName = null; + String mdResourceSubType = null; String mdMediaType; if (matches) { mdResourceKey = new String(Base64.getDecoder().decode(matcher.group(1)), StandardCharsets.UTF_8); mdResourceName = new String(Base64.getDecoder().decode(matcher.group(2)), StandardCharsets.UTF_8); - mdMediaType = matcher.group(3); + if (StringUtils.isNotBlank(matcher.group(3))) { + mdResourceSubType = new String(Base64.getDecoder().decode(matcher.group(3)), StandardCharsets.UTF_8); + }; + mdMediaType = matcher.group(4); } else if (data.startsWith(DataConstants.TB_IMAGE_PREFIX + "data:image/") || (!strict && data.startsWith("data:image/"))) { mdMediaType = StringUtils.substringBetween(data, "data:", ";base64"); } else { @@ -468,6 +473,11 @@ public class BaseImageService extends BaseResourceService implements ImageServic } else { fileName = mdResourceKey; } + if (StringUtils.isBlank(mdResourceSubType)) { + image.setResourceSubType(ResourceSubType.IMAGE); + } else { + image.setResourceSubType(ResourceSubType.valueOf(mdResourceSubType)); + } image.setFileName(fileName); image.setDescriptor(JacksonUtil.newObjectNode().put("mediaType", mdMediaType)); image.setData(imageData); @@ -629,7 +639,8 @@ public class BaseImageService extends BaseResourceService implements ImageServic String tbImagePrefix = ""; if (addTbImagePrefix) { tbImagePrefix = "tb-image:" + Base64.getEncoder().encodeToString(imageInfo.getResourceKey().getBytes(StandardCharsets.UTF_8)) + ":" - + Base64.getEncoder().encodeToString(imageInfo.getName().getBytes(StandardCharsets.UTF_8)) + ";"; + + Base64.getEncoder().encodeToString(imageInfo.getName().getBytes(StandardCharsets.UTF_8)) + ":" + + Base64.getEncoder().encodeToString(imageInfo.getResourceSubType().name().getBytes(StandardCharsets.UTF_8)) + ";"; } return tbImagePrefix + "data:" + descriptor.getMediaType() + ";base64," + Base64.getEncoder().encodeToString(data); } diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts index 6f83f9ac25..97829fcf2c 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts @@ -129,7 +129,7 @@ import { import { RadarChartBasicConfigComponent } from '@home/components/widget/config/basic/chart/radar-chart-basic-config.component'; -import { IotSvgBasicConfigComponent } from '@home/components/widget/config/basic/svg/iot-svg-basic-config.component'; +import { ScadaSymbolBasicConfigComponent } from '@home/components/widget/config/basic/scada/scada-symbol-basic-config.component'; @NgModule({ declarations: [ @@ -173,7 +173,7 @@ import { IotSvgBasicConfigComponent } from '@home/components/widget/config/basic BarChartBasicConfigComponent, PolarAreaChartBasicConfigComponent, RadarChartBasicConfigComponent, - IotSvgBasicConfigComponent + ScadaSymbolBasicConfigComponent ], imports: [ CommonModule, @@ -219,7 +219,7 @@ import { IotSvgBasicConfigComponent } from '@home/components/widget/config/basic BarChartBasicConfigComponent, PolarAreaChartBasicConfigComponent, RadarChartBasicConfigComponent, - IotSvgBasicConfigComponent + ScadaSymbolBasicConfigComponent ] }) export class BasicWidgetConfigModule { @@ -259,5 +259,5 @@ export const basicWidgetConfigComponentsMap: {[key: string]: Type + + +
+
scada.symbol
+ +
+ +
+
+ + {{ 'widget-config.title' | translate }} + +
+ + + + + + + +
+
+
+ + {{ 'widget-config.card-icon' | translate }} + +
+ + + + + + + + +
+
+
+ +
+
widget-config.card-appearance
+
+
{{ 'widgets.background.background' | translate }}
+ + +
+
+
widget-config.show-card-buttons
+ + {{ 'fullscreen.fullscreen' | translate }} + +
+
+
{{ 'widget-config.card-border-radius' | translate }}
+ + + +
+
+
{{ 'widget-config.card-padding' | translate }}
+ + + +
+
+ diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-symbol-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-symbol-basic-config.component.ts new file mode 100644 index 0000000000..42b0dae3d8 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-symbol-basic-config.component.ts @@ -0,0 +1,157 @@ +/// +/// Copyright ยฉ 2016-2024 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 { TargetDevice, WidgetConfig, } from '@shared/models/widget.models'; +import { WidgetConfigComponent } from '@home/components/widget/widget-config.component'; +import { + scadaSymbolWidgetDefaultSettings, + ScadaSymbolWidgetSettings +} from '@home/components/widget/lib/scada/scada-symbol-widget.models'; +import { isUndefined } from '@core/utils'; +import { cssSizeToStrSize, resolveCssSize } from '@shared/models/widget-settings.models'; + +@Component({ + selector: 'tb-scada-symbol-basic-config', + templateUrl: './scada-symbol-basic-config.component.html', + styleUrls: ['../basic-config.scss'] +}) +export class ScadaSymbolBasicConfigComponent extends BasicWidgetConfigComponent { + + get targetDevice(): TargetDevice { + return this.scadaSymbolWidgetConfigForm.get('targetDevice').value; + } + + scadaSymbolWidgetConfigForm: UntypedFormGroup; + + constructor(protected store: Store, + protected widgetConfigComponent: WidgetConfigComponent, + private fb: UntypedFormBuilder) { + super(store, widgetConfigComponent); + } + + protected configForm(): UntypedFormGroup { + return this.scadaSymbolWidgetConfigForm; + } + + protected onConfigSet(configData: WidgetConfigComponentData) { + const settings: ScadaSymbolWidgetSettings = {...scadaSymbolWidgetDefaultSettings, ...(configData.config.settings || {})}; + const iconSize = resolveCssSize(configData.config.iconSize); + this.scadaSymbolWidgetConfigForm = this.fb.group({ + targetDevice: [configData.config.targetDevice, []], + scadaSymbolUrl: [settings.scadaSymbolUrl, []], + scadaSymbolObjectSettings: [settings.scadaSymbolObjectSettings, []], + + showTitle: [configData.config.showTitle, []], + title: [configData.config.title, []], + titleFont: [configData.config.titleFont, []], + titleColor: [configData.config.titleColor, []], + + showIcon: [configData.config.showTitleIcon, []], + iconSize: [iconSize[0], [Validators.min(0)]], + iconSizeUnit: [iconSize[1], []], + icon: [configData.config.titleIcon, []], + iconColor: [configData.config.iconColor, []], + + background: [settings.background, []], + + cardButtons: [this.getCardButtons(configData.config), []], + borderRadius: [configData.config.borderRadius, []], + padding: [settings.padding, []], + + actions: [configData.config.actions || {}, []] + }); + } + + protected prepareOutputConfig(config: any): WidgetConfigComponentData { + this.widgetConfig.config.targetDevice = config.targetDevice; + + this.widgetConfig.config.showTitle = config.showTitle; + this.widgetConfig.config.title = config.title; + this.widgetConfig.config.titleFont = config.titleFont; + this.widgetConfig.config.titleColor = config.titleColor; + + this.widgetConfig.config.showTitleIcon = config.showIcon; + this.widgetConfig.config.iconSize = cssSizeToStrSize(config.iconSize, config.iconSizeUnit); + this.widgetConfig.config.titleIcon = config.icon; + this.widgetConfig.config.iconColor = config.iconColor; + + this.widgetConfig.config.settings = this.widgetConfig.config.settings || {}; + this.widgetConfig.config.settings.scadaSymbolUrl = config.scadaSymbolUrl; + this.widgetConfig.config.settings.scadaSymbolObjectSettings = config.scadaSymbolObjectSettings; + this.widgetConfig.config.settings.background = config.background; + + this.setCardButtons(config.cardButtons, this.widgetConfig.config); + this.widgetConfig.config.borderRadius = config.borderRadius; + this.widgetConfig.config.settings.padding = config.padding; + + this.widgetConfig.config.actions = config.actions; + return this.widgetConfig; + } + + protected validatorTriggers(): string[] { + return ['showTitle', 'showIcon']; + } + + protected updateValidators(emitEvent: boolean, trigger?: string) { + const showTitle: boolean = this.scadaSymbolWidgetConfigForm.get('showTitle').value; + const showIcon: boolean = this.scadaSymbolWidgetConfigForm.get('showIcon').value; + + if (showTitle) { + this.scadaSymbolWidgetConfigForm.get('title').enable(); + this.scadaSymbolWidgetConfigForm.get('titleFont').enable(); + this.scadaSymbolWidgetConfigForm.get('titleColor').enable(); + this.scadaSymbolWidgetConfigForm.get('showIcon').enable({emitEvent: false}); + if (showIcon) { + this.scadaSymbolWidgetConfigForm.get('iconSize').enable(); + this.scadaSymbolWidgetConfigForm.get('iconSizeUnit').enable(); + this.scadaSymbolWidgetConfigForm.get('icon').enable(); + this.scadaSymbolWidgetConfigForm.get('iconColor').enable(); + } else { + this.scadaSymbolWidgetConfigForm.get('iconSize').disable(); + this.scadaSymbolWidgetConfigForm.get('iconSizeUnit').disable(); + this.scadaSymbolWidgetConfigForm.get('icon').disable(); + this.scadaSymbolWidgetConfigForm.get('iconColor').disable(); + } + } else { + this.scadaSymbolWidgetConfigForm.get('title').disable(); + this.scadaSymbolWidgetConfigForm.get('titleFont').disable(); + this.scadaSymbolWidgetConfigForm.get('titleColor').disable(); + this.scadaSymbolWidgetConfigForm.get('showIcon').disable({emitEvent: false}); + this.scadaSymbolWidgetConfigForm.get('iconSize').disable(); + this.scadaSymbolWidgetConfigForm.get('iconSizeUnit').disable(); + this.scadaSymbolWidgetConfigForm.get('icon').disable(); + this.scadaSymbolWidgetConfigForm.get('iconColor').disable(); + } + } + + 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'); + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/svg/iot-svg-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/svg/iot-svg-basic-config.component.html deleted file mode 100644 index f0dfeacf66..0000000000 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/svg/iot-svg-basic-config.component.html +++ /dev/null @@ -1,48 +0,0 @@ - - - - - -
-
widget-config.card-appearance
-
-
{{ 'widgets.background.background' | translate }}
- - -
-
-
widget-config.show-card-buttons
- - {{ 'fullscreen.fullscreen' | translate }} - -
-
-
{{ 'widget-config.card-border-radius' | translate }}
- - - -
-
- diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/svg/iot-svg-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/svg/iot-svg-basic-config.component.ts deleted file mode 100644 index cccdf03aba..0000000000 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/svg/iot-svg-basic-config.component.ts +++ /dev/null @@ -1,95 +0,0 @@ -/// -/// Copyright ยฉ 2016-2024 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 { TargetDevice, WidgetConfig, } from '@shared/models/widget.models'; -import { WidgetConfigComponent } from '@home/components/widget/widget-config.component'; -import { - iotSvgWidgetDefaultSettings, - IotSvgWidgetSettings -} from '@home/components/widget/lib/svg/iot-svg-widget.models'; -import { isUndefined } from '@core/utils'; - -@Component({ - selector: 'tb-iot-svg-basic-config', - templateUrl: './iot-svg-basic-config.component.html', - styleUrls: ['../basic-config.scss'] -}) -export class IotSvgBasicConfigComponent extends BasicWidgetConfigComponent { - - get targetDevice(): TargetDevice { - return this.iotSvgWidgetConfigForm.get('targetDevice').value; - } - - iotSvgWidgetConfigForm: UntypedFormGroup; - - constructor(protected store: Store, - protected widgetConfigComponent: WidgetConfigComponent, - private fb: UntypedFormBuilder) { - super(store, widgetConfigComponent); - } - - protected configForm(): UntypedFormGroup { - return this.iotSvgWidgetConfigForm; - } - - protected onConfigSet(configData: WidgetConfigComponentData) { - const settings: IotSvgWidgetSettings = {...iotSvgWidgetDefaultSettings, ...(configData.config.settings || {})}; - this.iotSvgWidgetConfigForm = this.fb.group({ - targetDevice: [configData.config.targetDevice, []], - iotSvg: [settings.iotSvg, []], - iotSvgObject: [settings.iotSvgObject, []], - - background: [settings.background, []], - - cardButtons: [this.getCardButtons(configData.config), []], - borderRadius: [configData.config.borderRadius, []], - - actions: [configData.config.actions || {}, []] - }); - } - - protected prepareOutputConfig(config: any): WidgetConfigComponentData { - this.widgetConfig.config.targetDevice = config.targetDevice; - this.widgetConfig.config.settings = this.widgetConfig.config.settings || {}; - this.widgetConfig.config.settings.iotSvg = config.iotSvg; - this.widgetConfig.config.settings.iotSvgObject = config.iotSvgObject; - this.widgetConfig.config.settings.background = config.background; - - 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'); - } -} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.html index 147214c355..13e672a3fe 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.html @@ -18,7 +18,9 @@
- + + +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.ts index 48a328613e..992660b3dc 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.ts @@ -43,6 +43,7 @@ import { TimeSeriesChartWidgetSettings } from '@home/components/widget/lib/chart/time-series-chart-widget.models'; import { mergeDeep } from '@core/utils'; +import { WidgetComponent } from '@home/components/widget/widget.component'; @Component({ selector: 'tb-time-series-chart-widget', @@ -85,7 +86,8 @@ export class TimeSeriesChartWidgetComponent implements OnInit, OnDestroy, AfterV private timeSeriesChart: TbTimeSeriesChart; - constructor(private imagePipe: ImagePipe, + constructor(public widgetComponent: WidgetComponent, + private imagePipe: ImagePipe, private sanitizer: DomSanitizer, private renderer: Renderer2, private cd: ChangeDetectorRef) { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol-widget.component.html similarity index 69% rename from ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.component.html rename to ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol-widget.component.html index 3a9afa0048..bece57e381 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol-widget.component.html @@ -15,14 +15,15 @@ limitations under the License. --> -
-
+
+
-
-
+
+
- +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol-widget.component.scss similarity index 82% rename from ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.component.scss rename to ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol-widget.component.scss index b109bac863..13543851ad 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol-widget.component.scss @@ -14,18 +14,20 @@ * limitations under the License. */ -.tb-iot-svg-panel { +.tb-scada-symbol-panel { width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; - gap: 16px; - padding: 20px 24px 24px 24px; - > div:not(.tb-iot-svg-overlay) { + gap: 8px; + &.overlay { + padding: 20px 24px 24px 24px; + } + > div:not(.tb-scada-symbol-overlay) { z-index: 1; } - .tb-iot-svg-overlay { + .tb-scada-symbol-overlay { position: absolute; top: 12px; left: 12px; @@ -35,11 +37,11 @@ div.tb-widget-title { padding: 0; } - .tb-iot-svg-content { + .tb-scada-symbol-content { flex: 1; min-width: 0; min-height: 0; - .tb-iot-svg-shape { + .tb-scada-symbol-shape { width: 100%; height: 100%; display: flex; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol-widget.component.ts similarity index 52% rename from ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.component.ts rename to ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol-widget.component.ts index 52f40152a0..7f275cd09a 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol-widget.component.ts @@ -22,36 +22,35 @@ import { Input, OnDestroy, OnInit, - Renderer2, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; import { ImagePipe } from '@shared/pipe/image.pipe'; import { DomSanitizer } from '@angular/platform-browser'; -import { HttpClient } from '@angular/common/http'; -import { IotSvgObject, IotSvgObjectCallbacks } from '@home/components/widget/lib/svg/iot-svg.models'; +import { ScadaSymbolObject, ScadaSymbolObjectCallbacks } from '@home/components/widget/lib/scada/scada-symbol.models'; import { - iotSvgWidgetDefaultSettings, - IotSvgWidgetSettings -} from '@home/components/widget/lib/svg/iot-svg-widget.models'; -import { Observable, of } from 'rxjs'; + scadaSymbolWidgetDefaultSettings, + ScadaSymbolWidgetSettings +} from '@home/components/widget/lib/scada/scada-symbol-widget.models'; +import { BehaviorSubject, Observable, of } from 'rxjs'; import { backgroundStyle, ComponentStyle, overlayStyle } from '@shared/models/widget-settings.models'; import { ImageService } from '@core/http/image.service'; import { WidgetComponent } from '@home/components/widget/widget.component'; import { isDefinedAndNotNull, mergeDeep } from '@core/utils'; import { WidgetContext } from '@home/models/widget-component.models'; +import { catchError, share } from 'rxjs/operators'; @Component({ - selector: 'tb-iot-svg-widget', - templateUrl: './iot-svg-widget.component.html', - styleUrls: ['../action/action-widget.scss', './iot-svg-widget.component.scss'], + selector: 'tb-scada-symbol-widget', + templateUrl: './scada-symbol-widget.component.html', + styleUrls: ['../action/action-widget.scss', './scada-symbol-widget.component.scss'], encapsulation: ViewEncapsulation.None }) -export class IotSvgWidgetComponent implements OnInit, AfterViewInit, OnDestroy, IotSvgObjectCallbacks { +export class ScadaSymbolWidgetComponent implements OnInit, AfterViewInit, OnDestroy, ScadaSymbolObjectCallbacks { - @ViewChild('iotSvgShape', {static: false}) - iotSvgShape: ElementRef; + @ViewChild('scadaSymbolShape', {static: false}) + scadaSymbolShape: ElementRef; @Input() ctx: WidgetContext; @@ -59,47 +58,57 @@ export class IotSvgWidgetComponent implements OnInit, AfterViewInit, OnDestroy, @Input() widgetTitlePanel: TemplateRef; - private settings: IotSvgWidgetSettings; - private svgContent$: Observable; + private loadingSubject = new BehaviorSubject(false); + private settings: ScadaSymbolWidgetSettings; + private scadaSymbolContent$: Observable; backgroundStyle$: Observable; overlayStyle: ComponentStyle = {}; - iotSvgObject: IotSvgObject; + overlayEnabled: boolean; + padding: string; + + loading$ = this.loadingSubject.asObservable().pipe(share()); + + scadaSymbolObject: ScadaSymbolObject; constructor(public widgetComponent: WidgetComponent, protected imagePipe: ImagePipe, protected sanitizer: DomSanitizer, private imageService: ImageService, - protected cd: ChangeDetectorRef, - private http: HttpClient) { + protected cd: ChangeDetectorRef) { } ngOnInit(): void { this.ctx.$scope.actionWidget = this; - this.settings = mergeDeep({} as IotSvgWidgetSettings, iotSvgWidgetDefaultSettings, this.ctx.settings || {}); + this.settings = mergeDeep({} as ScadaSymbolWidgetSettings, scadaSymbolWidgetDefaultSettings, this.ctx.settings || {}); this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer); this.overlayStyle = overlayStyle(this.settings.background.overlay); - - if (this.settings.iotSvgContent) { - this.svgContent$ = of(this.settings.iotSvgContent); - } else if (this.settings.iotSvgUrl) { - this.svgContent$ = this.imageService.getImageString(this.settings.iotSvgUrl); + this.overlayEnabled = this.settings.background.overlay.enabled; + this.padding = this.overlayEnabled ? undefined : this.settings.padding; + + if (this.settings.scadaSymbolContent) { + this.scadaSymbolContent$ = of(this.settings.scadaSymbolContent); + } else if (this.settings.scadaSymbolUrl) { + this.scadaSymbolContent$ = this.imageService.getImageString(this.settings.scadaSymbolUrl) + .pipe(catchError(() => of(''))); } else { - this.svgContent$ = this.http.get(this.settings.iotSvg, {responseType: 'text'}); + this.scadaSymbolContent$ = of(''); } } ngAfterViewInit(): void { - this.svgContent$.subscribe((content) => { - this.initObject(this.iotSvgShape.nativeElement, content); + this.scadaSymbolContent$.subscribe((content) => { + this.initObject(this.scadaSymbolShape.nativeElement, content); }); } ngOnDestroy() { - if (this.iotSvgObject) { - this.iotSvgObject.destroy(); + if (this.scadaSymbolObject) { + this.scadaSymbolObject.destroy(); } + this.loadingSubject.complete(); + this.loadingSubject.unsubscribe(); } public onInit() { @@ -108,19 +117,24 @@ export class IotSvgWidgetComponent implements OnInit, AfterViewInit, OnDestroy, this.cd.detectChanges(); } - onSvgObjectError(error: string) { + onScadaSymbolObjectLoadingState(loading: boolean) { + this.loadingSubject.next(loading); + } + + onScadaSymbolObjectError(error: string) { this.ctx.showErrorToast(error, 'bottom', 'center', this.ctx.toastTargetId, true); } - onSvgObjectMessage(message: string) { + onScadaSymbolObjectMessage(message: string) { this.ctx.showSuccessToast(message, 3000, 'bottom', 'center', this.ctx.toastTargetId, true); } private initObject(rootElement: HTMLElement, - svgContent: string) { + content: string) { const simulated = this.ctx.utilsService.widgetEditMode || this.ctx.isPreview || (isDefinedAndNotNull(this.settings.simulated) ? this.settings.simulated : false); - this.iotSvgObject = new IotSvgObject(rootElement, this.ctx, svgContent, this.settings.iotSvgObject, this, simulated); + this.scadaSymbolObject = new ScadaSymbolObject(rootElement, this.ctx, content, + this.settings.scadaSymbolObjectSettings, this, simulated); } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol-widget.models.ts similarity index 70% rename from ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.models.ts rename to ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol-widget.models.ts index 6d25e94c71..691bffd1c0 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg-widget.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol-widget.models.ts @@ -14,21 +14,20 @@ /// limitations under the License. /// -import { IotSvgObjectSettings } from '@home/components/widget/lib/svg/iot-svg.models'; +import { ScadaSymbolObjectSettings } from '@home/components/widget/lib/scada/scada-symbol.models'; import { BackgroundSettings, BackgroundType } from '@shared/models/widget-settings.models'; -export interface IotSvgWidgetSettings { - iotSvg?: string; - iotSvgUrl?: string; - iotSvgContent?: string; +export interface ScadaSymbolWidgetSettings { + scadaSymbolUrl?: string; + scadaSymbolContent?: string; simulated?: boolean; - iotSvgObject: IotSvgObjectSettings; + scadaSymbolObjectSettings: ScadaSymbolObjectSettings; background: BackgroundSettings; + padding: string; } -export const iotSvgWidgetDefaultSettings: IotSvgWidgetSettings = { - iotSvg: '/assets/widget/svg/drawing.svg', - iotSvgObject: { +export const scadaSymbolWidgetDefaultSettings: ScadaSymbolWidgetSettings = { + scadaSymbolObjectSettings: { behavior: {}, properties: {} }, @@ -40,5 +39,6 @@ export const iotSvgWidgetDefaultSettings: IotSvgWidgetSettings = { color: 'rgba(255,255,255,0.72)', blur: 3 } - } + }, + padding: '12px' }; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts similarity index 73% rename from ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts rename to ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts index f2ed7c201b..82dd2de1cc 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts @@ -33,8 +33,7 @@ import { mergeDeep, parseFunction } from '@core/utils'; -import { BehaviorSubject, forkJoin, Observable, Observer } from 'rxjs'; -import { share } from 'rxjs/operators'; +import { BehaviorSubject, forkJoin, Observable, Observer, Subject } from 'rxjs'; import { ValueAction, ValueGetter, ValueSetter } from '@home/components/widget/lib/action/action-widget.models'; import { WidgetContext } from '@home/models/widget-component.models'; import { ColorProcessor, constantColor, Font } from '@shared/models/widget-settings.models'; @@ -42,8 +41,9 @@ import { AttributeScope } from '@shared/models/telemetry/telemetry.models'; import { UtilsService } from '@core/services/utils.service'; import { WidgetAction, WidgetActionType, widgetActionTypeTranslationMap } from '@shared/models/widget.models'; import { ResizeObserver } from '@juggle/resize-observer'; +import { takeUntil } from 'rxjs/operators'; -export interface IotSvgApi { +export interface ScadaSymbolApi { formatValue: (value: any, dec?: number, units?: string, showZeroDecimals?: boolean) => string | undefined; text: (element: Element | Element[], text: string) => void; font: (element: Element | Element[], font: Font, color: string) => void; @@ -54,57 +54,57 @@ export interface IotSvgApi { setValue: (valueId: string, value: any) => void; } -export interface IotSvgContext { - api: IotSvgApi; +export interface ScadaSymbolContext { + api: ScadaSymbolApi; tags: {[id: string]: Element[]}; values: {[id: string]: any}; properties: {[id: string]: any}; } -export type IotSvgStateRenderFunction = (ctx: IotSvgContext, svg: Svg) => void; +export type ScadaSymbolStateRenderFunction = (ctx: ScadaSymbolContext, svg: Svg) => void; -export type IotSvgTagStateRenderFunction = (ctx: IotSvgContext, element: Element) => void; +export type ScadaSymbolTagStateRenderFunction = (ctx: ScadaSymbolContext, element: Element) => void; -export type IotSvgActionTrigger = 'click'; +export type ScadaSymbolActionTrigger = 'click'; -export type IotSvgActionFunction = (ctx: IotSvgContext, element: Element, event: Event) => void; -export interface IotSvgAction { +export type ScadaSymbolActionFunction = (ctx: ScadaSymbolContext, element: Element, event: Event) => void; +export interface ScadaSymbolAction { actionFunction?: string; - action?: IotSvgActionFunction; + action?: ScadaSymbolActionFunction; } -export interface IotSvgTag { +export interface ScadaSymbolTag { tag: string; stateRenderFunction?: string; - stateRender?: IotSvgTagStateRenderFunction; - actions?: {[trigger: string]: IotSvgAction}; + stateRender?: ScadaSymbolTagStateRenderFunction; + actions?: {[trigger: string]: ScadaSymbolAction}; } -export enum IotSvgBehaviorType { +export enum ScadaSymbolBehaviorType { value = 'value', action = 'action', widgetAction = 'widgetAction' } -export const iotSvgBehaviorTypes = Object.keys(IotSvgBehaviorType) as IotSvgBehaviorType[]; +export const scadaSymbolBehaviorTypes = Object.keys(ScadaSymbolBehaviorType) as ScadaSymbolBehaviorType[]; -export const iotSvgBehaviorTypeTranslations = new Map( +export const scadaSymbolBehaviorTypeTranslations = new Map( [ - [IotSvgBehaviorType.value, 'scada.behavior.type-value'], - [IotSvgBehaviorType.action, 'scada.behavior.type-action'], - [IotSvgBehaviorType.widgetAction, 'scada.behavior.type-widget-action'] + [ScadaSymbolBehaviorType.value, 'scada.behavior.type-value'], + [ScadaSymbolBehaviorType.action, 'scada.behavior.type-action'], + [ScadaSymbolBehaviorType.widgetAction, 'scada.behavior.type-widget-action'] ] ); -export interface IotSvgBehaviorBase { +export interface ScadaSymbolBehaviorBase { id: string; name: string; hint?: string; - type: IotSvgBehaviorType; + type: ScadaSymbolBehaviorType; } -export interface IotSvgBehaviorValue extends IotSvgBehaviorBase { +export interface ScadaSymbolBehaviorValue extends ScadaSymbolBehaviorBase { valueType: ValueType; defaultValue: any; trueLabel?: string; @@ -112,16 +112,16 @@ export interface IotSvgBehaviorValue extends IotSvgBehaviorBase { stateLabel?: string; } -export interface IotSvgBehaviorAction extends IotSvgBehaviorBase { +export interface ScadaSymbolBehaviorAction extends ScadaSymbolBehaviorBase { valueType: ValueType; valueToDataType: ValueToDataType; constantValue: any; valueToDataFunction: string; } -export type IotSvgBehavior = IotSvgBehaviorValue & IotSvgBehaviorAction; +export type ScadaSymbolBehavior = ScadaSymbolBehaviorValue & ScadaSymbolBehaviorAction; -export enum IotSvgPropertyType { +export enum ScadaSymbolPropertyType { text = 'text', number = 'number', switch = 'switch', @@ -131,30 +131,30 @@ export enum IotSvgPropertyType { units = 'units' } -export const iotSvgPropertyTypes = Object.keys(IotSvgPropertyType) as IotSvgPropertyType[]; +export const scadaSymbolPropertyTypes = Object.keys(ScadaSymbolPropertyType) as ScadaSymbolPropertyType[]; -export const iotSvgPropertyTypeTranslations = new Map( +export const scadaSymbolPropertyTypeTranslations = new Map( [ - [IotSvgPropertyType.text, 'scada.property.type-text'], - [IotSvgPropertyType.number, 'scada.property.type-number'], - [IotSvgPropertyType.switch, 'scada.property.type-switch'], - [IotSvgPropertyType.color, 'scada.property.type-color'], - [IotSvgPropertyType.color_settings, 'scada.property.type-color-settings'], - [IotSvgPropertyType.font, 'scada.property.type-font'], - [IotSvgPropertyType.units, 'scada.property.type-units'] + [ScadaSymbolPropertyType.text, 'scada.property.type-text'], + [ScadaSymbolPropertyType.number, 'scada.property.type-number'], + [ScadaSymbolPropertyType.switch, 'scada.property.type-switch'], + [ScadaSymbolPropertyType.color, 'scada.property.type-color'], + [ScadaSymbolPropertyType.color_settings, 'scada.property.type-color-settings'], + [ScadaSymbolPropertyType.font, 'scada.property.type-font'], + [ScadaSymbolPropertyType.units, 'scada.property.type-units'] ] ); -export const iotSvgPropertyRowClasses = +export const scadaSymbolPropertyRowClasses = ['column', 'column-xs', 'column-lt-md', 'align-start', 'no-border', 'no-gap', 'no-padding', 'same-padding']; -export const iotSvgPropertyFieldClasses = +export const scadaSymbolPropertyFieldClasses = ['medium-width', 'flex', 'flex-xs', 'flex-lt-md']; -export interface IotSvgPropertyBase { +export interface ScadaSymbolPropertyBase { id: string; name: string; - type: IotSvgPropertyType; + type: ScadaSymbolPropertyType; default: any; required?: boolean; subLabel?: string; @@ -165,24 +165,24 @@ export interface IotSvgPropertyBase { fieldClass?: string; } -export interface IotSvgNumberProperty extends IotSvgPropertyBase { +export interface ScadaSymbolNumberProperty extends ScadaSymbolPropertyBase { min?: number; max?: number; step?: number; } -export type IotSvgProperty = IotSvgPropertyBase & IotSvgNumberProperty; +export type ScadaSymbolProperty = ScadaSymbolPropertyBase & ScadaSymbolNumberProperty; -export interface IotSvgMetadata { +export interface ScadaSymbolMetadata { title: string; stateRenderFunction?: string; - stateRender?: IotSvgStateRenderFunction; - tags: IotSvgTag[]; - behavior: IotSvgBehavior[]; - properties: IotSvgProperty[]; + stateRender?: ScadaSymbolStateRenderFunction; + tags: ScadaSymbolTag[]; + behavior: ScadaSymbolBehavior[]; + properties: ScadaSymbolProperty[]; } -export const emptyMetadata = (): IotSvgMetadata => ({ +export const emptyMetadata = (): ScadaSymbolMetadata => ({ title: '', tags: [], behavior: [], @@ -190,16 +190,16 @@ export const emptyMetadata = (): IotSvgMetadata => ({ }); -export const parseIotSvgMetadataFromContent = (svgContent: string): IotSvgMetadata => { +export const parseScadaSymbolMetadataFromContent = (svgContent: string): ScadaSymbolMetadata => { try { const svgDoc = new DOMParser().parseFromString(svgContent, 'image/svg+xml'); - return parseIotSvgMetadataFromDom(svgDoc); + return parseScadaSymbolMetadataFromDom(svgDoc); } catch (_e) { return emptyMetadata(); } }; -const parseIotSvgMetadataFromDom = (svgDoc: Document): IotSvgMetadata => { +const parseScadaSymbolMetadataFromDom = (svgDoc: Document): ScadaSymbolMetadata => { try { const elements = svgDoc.getElementsByTagName('tb:metadata'); if (elements.length) { @@ -213,13 +213,13 @@ const parseIotSvgMetadataFromDom = (svgDoc: Document): IotSvgMetadata => { } }; -export const updateIotSvgMetadataInContent = (svgContent: string, metadata: IotSvgMetadata): string => { +export const updateScadaSymbolMetadataInContent = (svgContent: string, metadata: ScadaSymbolMetadata): string => { const svgDoc = new DOMParser().parseFromString(svgContent, 'image/svg+xml'); - updateIotSvgMetadataInDom(svgDoc, metadata); + updateScadaSymbolMetadataInDom(svgDoc, metadata); return svgDoc.documentElement.outerHTML; }; -const updateIotSvgMetadataInDom = (svgDoc: Document, metadata: IotSvgMetadata) => { +const updateScadaSymbolMetadataInDom = (svgDoc: Document, metadata: ScadaSymbolMetadata) => { svgDoc.documentElement.setAttribute('xmlns:tb', 'https://thingsboard.io/svg'); let metadataElement: Node; const elements = svgDoc.getElementsByTagName('tb:metadata'); @@ -238,13 +238,13 @@ const updateIotSvgMetadataInDom = (svgDoc: Document, metadata: IotSvgMetadata) = const svgPartsRegex = /()(.*)<\/svg>/gms; const tbMetadataRegex = /.*<\/tb:metadata>/gs; -export interface IoTSvgContentData { +export interface ScadaSymbolContentData { svgRootNode: string; innerSvg: string; } -export const iotSvgContentData = (svgContent: string): IoTSvgContentData => { - const result: IoTSvgContentData = { +export const scadaSymbolContentData = (svgContent: string): ScadaSymbolContentData => { + const result: ScadaSymbolContentData = { svgRootNode: '', innerSvg: '' }; @@ -268,7 +268,7 @@ export const iotSvgContentData = (svgContent: string): IoTSvgContentData => { return result; }; -const defaultGetValueSettings = (get: IotSvgBehaviorValue): GetValueSettings => ({ +const defaultGetValueSettings = (get: ScadaSymbolBehaviorValue): GetValueSettings => ({ action: GetValueAction.DO_NOTHING, defaultValue: get.defaultValue, executeRpc: { @@ -291,7 +291,7 @@ const defaultGetValueSettings = (get: IotSvgBehaviorValue): GetValueSettings ({ +const defaultSetValueSettings = (set: ScadaSymbolBehaviorAction): SetValueSettings => ({ action: SetValueAction.EXECUTE_RPC, executeRpc: { method: 'setState', @@ -314,7 +314,7 @@ const defaultSetValueSettings = (set: IotSvgBehaviorAction): SetValueSettings => } }); -const defaultWidgetActionSettings = (widgetAction: IotSvgBehavior): WidgetAction => ({ +const defaultWidgetActionSettings = (widgetAction: ScadaSymbolBehavior): WidgetAction => ({ type: WidgetActionType.updateDashboardState, targetDashboardStateId: null, openRightLayout: false, @@ -322,17 +322,17 @@ const defaultWidgetActionSettings = (widgetAction: IotSvgBehavior): WidgetAction stateEntityParamName: null }); -export const defaultIotSvgObjectSettings = (metadata: IotSvgMetadata): IotSvgObjectSettings => { - const settings: IotSvgObjectSettings = { +export const defaultScadaSymbolObjectSettings = (metadata: ScadaSymbolMetadata): ScadaSymbolObjectSettings => { + const settings: ScadaSymbolObjectSettings = { behavior: {}, properties: {} }; for (const behavior of metadata.behavior) { - if (behavior.type === IotSvgBehaviorType.value) { - settings.behavior[behavior.id] = defaultGetValueSettings(behavior as IotSvgBehaviorValue); - } else if (behavior.type === IotSvgBehaviorType.action) { - settings.behavior[behavior.id] = defaultSetValueSettings(behavior as IotSvgBehaviorAction); - } else if (behavior.type === IotSvgBehaviorType.widgetAction) { + if (behavior.type === ScadaSymbolBehaviorType.value) { + settings.behavior[behavior.id] = defaultGetValueSettings(behavior as ScadaSymbolBehaviorValue); + } else if (behavior.type === ScadaSymbolBehaviorType.action) { + settings.behavior[behavior.id] = defaultSetValueSettings(behavior as ScadaSymbolBehaviorAction); + } else if (behavior.type === ScadaSymbolBehaviorType.widgetAction) { settings.behavior[behavior.id] = defaultWidgetActionSettings(behavior); } } @@ -342,7 +342,7 @@ export const defaultIotSvgObjectSettings = (metadata: IotSvgMetadata): IotSvgObj return settings; }; -export type IotSvgObjectSettings = { +export type ScadaSymbolObjectSettings = { behavior: {[id: string]: any}; properties: {[id: string]: any}; }; @@ -350,21 +350,21 @@ export type IotSvgObjectSettings = { const parseError = (ctx: WidgetContext, err: any): string => ctx.$injector.get(UtilsService).parseException(err).message || 'Unknown Error'; -export interface IotSvgObjectCallbacks { - onSvgObjectError: (error: string) => void; - onSvgObjectMessage: (message: string) => void; +export interface ScadaSymbolObjectCallbacks { + onScadaSymbolObjectLoadingState: (loading: boolean) => void; + onScadaSymbolObjectError: (error: string) => void; + onScadaSymbolObjectMessage: (message: string) => void; } -export class IotSvgObject { +export class ScadaSymbolObject { - private metadata: IotSvgMetadata; - private settings: IotSvgObjectSettings; - private context: IotSvgContext; + private metadata: ScadaSymbolMetadata; + private settings: ScadaSymbolObjectSettings; + private context: ScadaSymbolContext; private svgShape: Svg; private box: Box; - private loadingSubject = new BehaviorSubject(false); private valueGetters: ValueGetter[] = []; private valueActions: ValueAction[] = []; private valueSetters: {[behaviorId: string]: ValueSetter} = {}; @@ -372,32 +372,34 @@ export class IotSvgObject { private stateValueSubjects: {[id: string]: BehaviorSubject} = {}; private readonly shapeResize$: ResizeObserver; + private readonly destroy$ = new Subject(); + private scale = 1; private performInit = true; - loading$ = this.loadingSubject.asObservable().pipe(share()); - constructor(private rootElement: HTMLElement, private ctx: WidgetContext, private svgContent: string, - private inputSettings: IotSvgObjectSettings, - private callbacks: IotSvgObjectCallbacks, + private inputSettings: ScadaSymbolObjectSettings, + private callbacks: ScadaSymbolObjectCallbacks, private simulated: boolean) { this.shapeResize$ = new ResizeObserver(() => { this.resize(); }); const doc: XMLDocument = new DOMParser().parseFromString(this.svgContent, 'image/svg+xml'); - this.metadata = parseIotSvgMetadataFromDom(doc); - const defaults = defaultIotSvgObjectSettings(this.metadata); - this.settings = mergeDeep({} as IotSvgObjectSettings, - defaults, this.inputSettings || {} as IotSvgObjectSettings); + this.metadata = parseScadaSymbolMetadataFromDom(doc); + const defaults = defaultScadaSymbolObjectSettings(this.metadata); + this.settings = mergeDeep({} as ScadaSymbolObjectSettings, + defaults, this.inputSettings || {} as ScadaSymbolObjectSettings); this.prepareMetadata(); this.prepareSvgShape(doc); this.shapeResize$.observe(this.rootElement); } public destroy() { + this.destroy$.next(); + this.destroy$.complete(); if (this.shapeResize$) { this.shapeResize$.disconnect(); } @@ -406,8 +408,6 @@ export class IotSvgObject { this.stateValueSubjects[stateValueId].unsubscribe(); } this.valueActions.forEach(v => v.destroy()); - this.loadingSubject.complete(); - this.loadingSubject.unsubscribe(); for (const tag of this.metadata.tags) { const elements = this.context.tags[tag.tag]; elements.forEach(element => { @@ -490,15 +490,15 @@ export class IotSvgObject { } } for (const behavior of this.metadata.behavior) { - if (behavior.type === IotSvgBehaviorType.value) { - const getBehavior = behavior as IotSvgBehaviorValue; + if (behavior.type === ScadaSymbolBehaviorType.value) { + const getBehavior = behavior as ScadaSymbolBehaviorValue; let getValueSettings: GetValueSettings = this.settings.behavior[getBehavior.id]; getValueSettings = {...getValueSettings, actionLabel: this.ctx.utilsService.customTranslation(getBehavior.name, getBehavior.name)}; const stateValueSubject = new BehaviorSubject(getValueSettings.defaultValue); this.stateValueSubjects[getBehavior.id] = stateValueSubject; this.context.values[getBehavior.id] = getValueSettings.defaultValue; - stateValueSubject.subscribe((value) => { + stateValueSubject.pipe(takeUntil(this.destroy$)).subscribe((value) => { this.onStateValueChanged(getBehavior.id, value); }); const valueGetter = @@ -511,15 +511,15 @@ export class IotSvgObject { }, this.simulated); this.valueGetters.push(valueGetter); this.valueActions.push(valueGetter); - } else if (behavior.type === IotSvgBehaviorType.action) { - const setBehavior = behavior as IotSvgBehaviorAction; + } else if (behavior.type === ScadaSymbolBehaviorType.action) { + const setBehavior = behavior as ScadaSymbolBehaviorAction; let setValueSettings: SetValueSettings = this.settings.behavior[setBehavior.id]; setValueSettings = {...setValueSettings, actionLabel: this.ctx.utilsService.customTranslation(setBehavior.name, setBehavior.name)}; const valueSetter = ValueSetter.fromSettings(this.ctx, setValueSettings, this.simulated); this.valueSetters[setBehavior.id] = valueSetter; this.valueActions.push(valueSetter); - } else if (behavior.type === IotSvgBehaviorType.widgetAction) { + } else if (behavior.type === ScadaSymbolBehaviorType.widgetAction) { // TODO: } } @@ -529,45 +529,49 @@ export class IotSvgObject { this.valueGetters.forEach(valueGetter => { getValueObservables.push(valueGetter.getValue()); }); - this.loadingSubject.next(true); - forkJoin(getValueObservables).subscribe( + this.onLoadingState(true); + forkJoin(getValueObservables).pipe(takeUntil(this.destroy$)).subscribe( { next: () => { - this.loadingSubject.next(false); + this.onLoadingState(false); }, error: () => { - this.loadingSubject.next(false); + this.onLoadingState(false); } } ); } } + private onLoadingState(loading: boolean) { + this.callbacks.onScadaSymbolObjectLoadingState(loading); + } + private onError(error: string) { - this.callbacks.onSvgObjectError(error); + this.callbacks.onScadaSymbolObjectError(error); } private onMessage(message: string) { - this.callbacks.onSvgObjectMessage(message); + this.callbacks.onScadaSymbolObjectMessage(message); } private callAction(event: Event, behaviorId: string, value?: any, observer?: Partial>) { const behavior = this.metadata.behavior.find(b => b.id === behaviorId); if (behavior) { - if (behavior.type === IotSvgBehaviorType.action) { + if (behavior.type === ScadaSymbolBehaviorType.action) { const valueSetter = this.valueSetters[behaviorId]; if (valueSetter) { - this.loadingSubject.next(true); - valueSetter.setValue(value).subscribe( + this.onLoadingState(true); + valueSetter.setValue(value).pipe(takeUntil(this.destroy$)).subscribe( { next: () => { if (observer?.next) { observer.next(); } - this.loadingSubject.next(false); + this.onLoadingState(false); }, error: (err) => { - this.loadingSubject.next(false); + this.onLoadingState(false); if (observer?.error) { observer.error(err); } @@ -577,7 +581,7 @@ export class IotSvgObject { } ); } - } else if (behavior.type === IotSvgBehaviorType.widgetAction) { + } else if (behavior.type === ScadaSymbolBehaviorType.widgetAction) { const widgetAction: WidgetAction = this.settings.behavior[behavior.id]; if (this.simulated) { const translatedType = this.ctx.translate.instant(widgetActionTypeTranslationMap.get(widgetAction.type)); @@ -598,8 +602,10 @@ export class IotSvgObject { const targetWidth = this.rootElement.getBoundingClientRect().width; const targetHeight = this.rootElement.getBoundingClientRect().height; if (targetWidth && targetHeight) { + const svgAspect = this.box.width / this.box.height; + const shapeAspect = targetWidth / targetHeight; let scale: number; - if (targetWidth < targetHeight) { + if (svgAspect > shapeAspect) { scale = targetWidth / this.box.width; } else { scale = targetHeight / this.box.height; @@ -617,7 +623,7 @@ export class IotSvgObject { } private onValue(id: string, value: any) { - const valueBehavior = this.metadata.behavior.find(b => b.id === id) as IotSvgBehaviorValue; + const valueBehavior = this.metadata.behavior.find(b => b.id === id) as ScadaSymbolBehaviorValue; value = this.normalizeValue(value, valueBehavior.valueType); this.setValue(valueBehavior.id, value); } @@ -725,7 +731,7 @@ export class IotSvgObject { return Array.isArray(element) ? element : [element]; } - private getProperty(id: string): IotSvgProperty { + private getProperty(id: string): ScadaSymbolProperty { return this.metadata.properties.find(p => p.id === id); } @@ -734,9 +740,9 @@ export class IotSvgObject { if (property) { const value = this.settings.properties[id]; if (isDefinedAndNotNull(value)) { - if (property.type === IotSvgPropertyType.color_settings) { + if (property.type === ScadaSymbolPropertyType.color_settings) { return ColorProcessor.fromSettings(value); - } else if (property.type === IotSvgPropertyType.text) { + } else if (property.type === ScadaSymbolPropertyType.text) { const result = this.ctx.utilsService.customTranslation(value, value); const entityInfo = this.ctx.defaultSubscription.getFirstEntityInfo(); return createLabelFromSubscriptionEntityInfo(entityInfo, result); @@ -744,13 +750,13 @@ export class IotSvgObject { return value; } else { switch (property.type) { - case IotSvgPropertyType.text: + case ScadaSymbolPropertyType.text: return ''; - case IotSvgPropertyType.number: + case ScadaSymbolPropertyType.number: return 0; - case IotSvgPropertyType.color: + case ScadaSymbolPropertyType.color: return '#000'; - case IotSvgPropertyType.color_settings: + case ScadaSymbolPropertyType.color_settings: return ColorProcessor.fromSettings(constantColor('#000')); } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.html similarity index 64% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.html rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.html index 6ddb440827..1271f8b4bb 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.html @@ -15,44 +15,44 @@ limitations under the License. --> - -
{{ metadata?.title | customTranslate }}
+
scada.behavior.behavior
-
-
{{ behaviour.name | customTranslate }}
- +
{{ behavior.name | customTranslate }}
+ + formControlName="{{ behavior.id }}"> - + formControlName="{{ behavior.id }}"> - + formControlName="{{ behavior.id }}">
-
+
widget-config.appearance
+
{{ propertyRow.label | customTranslate }} @@ -61,35 +61,35 @@
{{ property.subLabel | customTranslate }}
- +
{{ property.fieldSuffix | customTranslate }}
 - - - +
{{ property.fieldSuffix | customTranslate }}
 - - diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.scss similarity index 82% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.scss rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.scss index 8e51b991ff..99b5c5df13 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.scss @@ -13,11 +13,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -:host { - .iot-svg-object-title { - font-size: 18px; - font-style: normal; - font-weight: 500; - line-height: 24px; - } +.tb-scada-symbol-appearance-properties { + gap: 16px; + display: flex; + flex-direction: column; } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.ts similarity index 61% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.ts rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.ts index 29c1d83332..5048c53213 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.ts @@ -14,7 +14,16 @@ /// limitations under the License. /// -import { ChangeDetectorRef, Component, forwardRef, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'; +import { + ChangeDetectorRef, + Component, + forwardRef, + Input, + OnChanges, + OnInit, + SimpleChanges, + ViewEncapsulation +} from '@angular/core'; import { ControlValueAccessor, NG_VALIDATORS, @@ -29,59 +38,60 @@ import { import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; import { - defaultIotSvgObjectSettings, - IotSvgBehaviorType, - IotSvgMetadata, - IotSvgObjectSettings, - IotSvgPropertyType, - parseIotSvgMetadataFromContent -} from '@home/components/widget/lib/svg/iot-svg.models'; -import { HttpClient } from '@angular/common/http'; + defaultScadaSymbolObjectSettings, + parseScadaSymbolMetadataFromContent, + ScadaSymbolBehaviorType, + ScadaSymbolMetadata, + ScadaSymbolObjectSettings, + ScadaSymbolPropertyType +} from '@home/components/widget/lib/scada/scada-symbol.models'; import { IAliasController } from '@core/api/widget-api.models'; import { TargetDevice, widgetType } from '@shared/models/widget.models'; import { isDefinedAndNotNull, mergeDeep } from '@core/utils'; import { - IotSvgPropertyRow, + ScadaSymbolPropertyRow, toPropertyRows -} from '@home/components/widget/lib/settings/common/svg/iot-svg-object-settings.models'; +} from '@home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.models'; import { merge, Observable, of, Subscription } from 'rxjs'; import { WidgetActionCallbacks } from '@home/components/widget/action/manage-widget-actions.component.models'; import { ImageService } from '@core/http/image.service'; +import { map } from 'rxjs/operators'; @Component({ - selector: 'tb-iot-svg-object-settings', - templateUrl: './iot-svg-object-settings.component.html', - styleUrls: ['./iot-svg-object-settings.component.scss', './../../widget-settings.scss'], + selector: 'tb-scada-symbol-object-settings', + templateUrl: './scada-symbol-object-settings.component.html', + styleUrls: ['./scada-symbol-object-settings.component.scss', './../../widget-settings.scss'], providers: [ { provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => IotSvgObjectSettingsComponent), + useExisting: forwardRef(() => ScadaSymbolObjectSettingsComponent), multi: true }, { provide: NG_VALIDATORS, - useExisting: forwardRef(() => IotSvgObjectSettingsComponent), + useExisting: forwardRef(() => ScadaSymbolObjectSettingsComponent), multi: true } - ] + ], + encapsulation: ViewEncapsulation.None }) -export class IotSvgObjectSettingsComponent implements OnInit, OnChanges, ControlValueAccessor, Validator { +export class ScadaSymbolObjectSettingsComponent implements OnInit, OnChanges, ControlValueAccessor, Validator { - IotSvgBehaviorType = IotSvgBehaviorType; + ScadaSymbolBehaviorType = ScadaSymbolBehaviorType; - IotSvgPropertyType = IotSvgPropertyType; + ScadaSymbolPropertyType = ScadaSymbolPropertyType; @Input() disabled: boolean; @Input() - svgPath = 'drawing.svg'; + scadaSymbolUrl: string; @Input() - svgUrl: string; + scadaSymbolContent: string; @Input() - svgContent: string; + scadaSymbolMetadata: ScadaSymbolMetadata; @Input() aliasController: IAliasController; @@ -95,31 +105,30 @@ export class IotSvgObjectSettingsComponent implements OnInit, OnChanges, Control @Input() widgetType: widgetType; - private modelValue: IotSvgObjectSettings; + private modelValue: ScadaSymbolObjectSettings; private propagateChange = null; private validatorTriggers: string[]; private validatorSubscription: Subscription; - public iotSvgObjectSettingsFormGroup: UntypedFormGroup; + public scadaSymbolObjectSettingsFormGroup: UntypedFormGroup; - metadata: IotSvgMetadata; - propertyRows: IotSvgPropertyRow[]; + metadata: ScadaSymbolMetadata; + propertyRows: ScadaSymbolPropertyRow[]; constructor(protected store: Store, private fb: UntypedFormBuilder, - private http: HttpClient, private imageService: ImageService, private cd: ChangeDetectorRef) { } ngOnInit(): void { - this.iotSvgObjectSettingsFormGroup = this.fb.group({ + this.scadaSymbolObjectSettingsFormGroup = this.fb.group({ behavior: this.fb.group({}), properties: this.fb.group({}) }); - this.iotSvgObjectSettingsFormGroup.valueChanges.subscribe(() => { + this.scadaSymbolObjectSettingsFormGroup.valueChanges.subscribe(() => { this.updateModel(); }); this.loadMetadata(); @@ -129,7 +138,7 @@ export class IotSvgObjectSettingsComponent implements OnInit, OnChanges, Control for (const propName of Object.keys(changes)) { const change = changes[propName]; if (!change.firstChange && change.currentValue !== change.previousValue) { - if (['svgPath', 'svgUrl', 'svgContent'].includes(propName)) { + if (['scadaSymbolUrl', 'scadaSymbolContent', 'scadaSymbolMetadata'].includes(propName)) { this.loadMetadata(); } } @@ -146,22 +155,22 @@ export class IotSvgObjectSettingsComponent implements OnInit, OnChanges, Control setDisabledState(isDisabled: boolean): void { this.disabled = isDisabled; if (isDisabled) { - this.iotSvgObjectSettingsFormGroup.disable({emitEvent: false}); + this.scadaSymbolObjectSettingsFormGroup.disable({emitEvent: false}); } else { - this.iotSvgObjectSettingsFormGroup.enable({emitEvent: false}); + this.scadaSymbolObjectSettingsFormGroup.enable({emitEvent: false}); this.updateValidators(); } } - writeValue(value: IotSvgObjectSettings): void { + writeValue(value: ScadaSymbolObjectSettings): void { this.modelValue = value || { behavior: {}, properties: {} }; this.setupValue(); } - validate(c: UntypedFormControl) { - const valid = this.iotSvgObjectSettingsFormGroup.valid; + validate(_c: UntypedFormControl) { + const valid = this.scadaSymbolObjectSettingsFormGroup.valid; return valid ? null : { - iotSvgObject: { + scadaSymbolObjectSettings: { valid: false, }, }; @@ -174,28 +183,36 @@ export class IotSvgObjectSettingsComponent implements OnInit, OnChanges, Control } this.validatorTriggers = []; - let svgContent$: Observable; - if (this.svgContent) { - svgContent$ = of(this.svgContent); - } else if (this.svgUrl) { - svgContent$ = this.imageService.getImageString(this.svgUrl); + let metadata$: Observable; + if (this.scadaSymbolMetadata) { + metadata$ = of(this.scadaSymbolMetadata); } else { - svgContent$ = this.http.get(this.svgPath, {responseType: 'text'}); + let content$: Observable; + if (this.scadaSymbolContent) { + content$ = of(this.scadaSymbolContent); + } else if (this.scadaSymbolUrl) { + content$ = this.imageService.getImageString(this.scadaSymbolUrl); + } else { + content$ = of(''); + } + metadata$ = content$.pipe( + map(content => parseScadaSymbolMetadataFromContent(content)) + ); } - svgContent$.subscribe( - (svgContent) => { - this.metadata = parseIotSvgMetadataFromContent(svgContent); + metadata$.subscribe( + (metadata) => { + this.metadata = metadata; this.propertyRows = toPropertyRows(this.metadata.properties); - const behaviorFormGroup = this.iotSvgObjectSettingsFormGroup.get('behavior') as UntypedFormGroup; + const behaviorFormGroup = this.scadaSymbolObjectSettingsFormGroup.get('behavior') as UntypedFormGroup; for (const control of Object.keys(behaviorFormGroup.controls)) { behaviorFormGroup.removeControl(control, {emitEvent: false}); } - const propertiesFormGroup = this.iotSvgObjectSettingsFormGroup.get('properties') as UntypedFormGroup; + const propertiesFormGroup = this.scadaSymbolObjectSettingsFormGroup.get('properties') as UntypedFormGroup; for (const control of Object.keys(propertiesFormGroup.controls)) { propertiesFormGroup.removeControl(control, {emitEvent: false}); } - for (const behaviour of this.metadata.behavior) { - behaviorFormGroup.addControl(behaviour.id, this.fb.control(null, []), {emitEvent: false}); + for (const behavior of this.metadata.behavior) { + behaviorFormGroup.addControl(behavior.id, this.fb.control(null, []), {emitEvent: false}); } for (const property of this.metadata.properties) { if (property.disableOnProperty) { @@ -207,7 +224,7 @@ export class IotSvgObjectSettingsComponent implements OnInit, OnChanges, Control if (property.required) { validators.push(Validators.required); } - if (property.type === IotSvgPropertyType.number) { + if (property.type === ScadaSymbolPropertyType.number) { if (isDefinedAndNotNull(property.min)) { validators.push(Validators.min(property.min)); } @@ -233,7 +250,7 @@ export class IotSvgObjectSettingsComponent implements OnInit, OnChanges, Control } private updateValidators() { - const propertiesFormGroup = this.iotSvgObjectSettingsFormGroup.get('properties') as UntypedFormGroup; + const propertiesFormGroup = this.scadaSymbolObjectSettingsFormGroup.get('properties') as UntypedFormGroup; for (const trigger of this.validatorTriggers) { const value: boolean = propertiesFormGroup.get(trigger).value; this.metadata.properties.filter(p => p.disableOnProperty === trigger).forEach( @@ -251,9 +268,9 @@ export class IotSvgObjectSettingsComponent implements OnInit, OnChanges, Control private setupValue() { if (this.metadata) { - const defaults = defaultIotSvgObjectSettings(this.metadata); - this.modelValue = mergeDeep(defaults, this.modelValue); - this.iotSvgObjectSettingsFormGroup.patchValue( + const defaults = defaultScadaSymbolObjectSettings(this.metadata); + this.modelValue = mergeDeep(defaults, this.modelValue); + this.scadaSymbolObjectSettingsFormGroup.patchValue( this.modelValue, {emitEvent: false} ); this.setDisabledState(this.disabled); @@ -261,7 +278,7 @@ export class IotSvgObjectSettingsComponent implements OnInit, OnChanges, Control } private updateModel() { - this.modelValue = this.iotSvgObjectSettingsFormGroup.getRawValue(); + this.modelValue = this.scadaSymbolObjectSettingsFormGroup.getRawValue(); this.propagateChange(this.modelValue); } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.models.ts similarity index 71% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.models.ts rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.models.ts index 807dffcc56..60cef4fe95 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.models.ts @@ -14,17 +14,17 @@ /// limitations under the License. /// -import { IotSvgProperty, IotSvgPropertyType } from '@home/components/widget/lib/svg/iot-svg.models'; +import { ScadaSymbolProperty, ScadaSymbolPropertyType } from '@home/components/widget/lib/scada/scada-symbol.models'; -export interface IotSvgPropertyRow { +export interface ScadaSymbolPropertyRow { label: string; - properties: IotSvgProperty[]; - switch?: IotSvgProperty; + properties: ScadaSymbolProperty[]; + switch?: ScadaSymbolProperty; rowClass?: string; } -export const toPropertyRows = (properties: IotSvgProperty[]): IotSvgPropertyRow[] => { - const result: IotSvgPropertyRow[] = []; +export const toPropertyRows = (properties: ScadaSymbolProperty[]): ScadaSymbolPropertyRow[] => { + const result: ScadaSymbolPropertyRow[] = []; for (const property of properties) { let propertyRow = result.find(r => r.label === property.name); if (!propertyRow) { @@ -35,7 +35,7 @@ export const toPropertyRows = (properties: IotSvgProperty[]): IotSvgPropertyRow[ }; result.push(propertyRow); } - if (property.type === IotSvgPropertyType.switch) { + if (property.type === ScadaSymbolPropertyType.switch) { propertyRow.switch = property; } else { propertyRow.properties.push(property); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-settings-common.module.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-settings-common.module.ts index 5f2229cba5..b9c41c5ced 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-settings-common.module.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-settings-common.module.ts @@ -150,8 +150,8 @@ import { } from '@home/components/widget/lib/settings/common/indicator/status-widget-state-settings.component'; import { ChartBarSettingsComponent } from '@home/components/widget/lib/settings/common/chart/chart-bar-settings.component'; import { - IotSvgObjectSettingsComponent -} from '@home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component'; + ScadaSymbolObjectSettingsComponent +} from '@home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component'; @NgModule({ declarations: [ @@ -207,7 +207,7 @@ import { TimeSeriesChartStateRowComponent, TimeSeriesChartGridSettingsComponent, StatusWidgetStateSettingsComponent, - IotSvgObjectSettingsComponent, + ScadaSymbolObjectSettingsComponent, DataKeyInputComponent, EntityAliasInputComponent ], @@ -269,7 +269,7 @@ import { TimeSeriesChartStateRowComponent, TimeSeriesChartGridSettingsComponent, StatusWidgetStateSettingsComponent, - IotSvgObjectSettingsComponent, + ScadaSymbolObjectSettingsComponent, DataKeyInputComponent, EntityAliasInputComponent ], diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts b/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts index ead107dd62..b39ec1c73f 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts +++ b/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts @@ -99,7 +99,7 @@ import { PieChartWidgetComponent } from '@home/components/widget/lib/chart/pie-c import { BarChartWidgetComponent } from '@home/components/widget/lib/chart/bar-chart-widget.component'; import { PolarAreaWidgetComponent } from '@home/components/widget/lib/chart/polar-area-widget.component'; import { RadarChartWidgetComponent } from '@home/components/widget/lib/chart/radar-chart-widget.component'; -import { IotSvgWidgetComponent } from '@home/components/widget/lib/svg/iot-svg-widget.component'; +import { ScadaSymbolWidgetComponent } from '@home/components/widget/lib/scada/scada-symbol-widget.component'; @NgModule({ declarations: @@ -166,7 +166,7 @@ import { IotSvgWidgetComponent } from '@home/components/widget/lib/svg/iot-svg-w BarChartWidgetComponent, PolarAreaWidgetComponent, RadarChartWidgetComponent, - IotSvgWidgetComponent + ScadaSymbolWidgetComponent ], imports: [ CommonModule, @@ -236,7 +236,7 @@ import { IotSvgWidgetComponent } from '@home/components/widget/lib/svg/iot-svg-w BarChartWidgetComponent, PolarAreaWidgetComponent, RadarChartWidgetComponent, - IotSvgWidgetComponent + ScadaSymbolWidgetComponent ], providers: [ {provide: WIDGET_COMPONENTS_MODULE_TOKEN, useValue: WidgetComponentsModule } diff --git a/ui-ngx/src/app/modules/home/pages/admin/admin-routing.module.ts b/ui-ngx/src/app/modules/home/pages/admin/admin-routing.module.ts index e292f3cfbb..ef9126e02c 100644 --- a/ui-ngx/src/app/modules/home/pages/admin/admin-routing.module.ts +++ b/ui-ngx/src/app/modules/home/pages/admin/admin-routing.module.ts @@ -43,7 +43,7 @@ import { ImageGalleryComponent } from '@shared/components/image/image-gallery.co import { ImageResourceType, IMAGES_URL_PREFIX, ResourceSubType } from '@shared/models/resource.models'; import { ScadaSymbolComponent } from '@home/pages/scada-symbol/scada-symbol.component'; import { ImageService } from '@core/http/image.service'; -import { ScadaSymbolData } from '@home/pages/scada-symbol/scada-symbol.models'; +import { ScadaSymbolData } from '@home/pages/scada-symbol/scada-symbol-editor.models'; @Injectable() export class OAuth2LoginProcessingUrlResolver implements Resolve { @@ -64,7 +64,7 @@ export const scadaSymbolResolver: ResolveFn = const key = decodeURIComponent(route.params.key); return forkJoin({ imageResource: imageService.getImageInfo(type, key), - svgContent: imageService.getImageString(`${IMAGES_URL_PREFIX}/${type}/${encodeURIComponent(key)}`) + scadaSymbolContent: imageService.getImageString(`${IMAGES_URL_PREFIX}/${type}/${encodeURIComponent(key)}`) }); }; @@ -127,7 +127,7 @@ const routes: Routes = [ data: { auth: [Authority.TENANT_ADMIN, Authority.SYS_ADMIN], title: 'scada.symbols', - imageSubType: ResourceSubType.IOT_SVG + imageSubType: ResourceSubType.SCADA_SYMBOL } }, { diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.html index c1698f8fe3..456b209d09 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.html +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.html @@ -40,13 +40,13 @@
scada.behavior.type
- - {{ iotSvgBehaviorTypeTranslations.get(type) | translate }} + + {{ scadaSymbolBehaviorTypeTranslations.get(type) | translate }}
-
+
scada.behavior.value-type
@@ -63,7 +63,7 @@
- +
scada.behavior.default-value
- +
{{ 'scada.behavior.default-payload' | translate }}
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.ts index bdb2827dac..9b23ccbc75 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.ts @@ -19,11 +19,11 @@ import { TbPopoverComponent } from '@shared/components/popover.component'; import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; import { merge } from 'rxjs'; import { - IotSvgBehavior, - IotSvgBehaviorType, - iotSvgBehaviorTypes, - iotSvgBehaviorTypeTranslations -} from '@app/modules/home/components/widget/lib/svg/iot-svg.models'; + ScadaSymbolBehavior, + ScadaSymbolBehaviorType, + scadaSymbolBehaviorTypes, + scadaSymbolBehaviorTypeTranslations +} from '@app/modules/home/components/widget/lib/scada/scada-symbol.models'; import { ValueType, valueTypesMap } from '@shared/models/constants'; import { ValueToDataType } from '@shared/models/action-widget-settings.models'; import { WidgetService } from '@core/http/widget.service'; @@ -36,14 +36,14 @@ import { WidgetService } from '@core/http/widget.service'; }) export class ScadaSymbolBehaviorPanelComponent implements OnInit { - IotSvgBehaviorType = IotSvgBehaviorType; + ScadaSymbolBehaviorType = ScadaSymbolBehaviorType; ValueType = ValueType; ValueToDataType = ValueToDataType; - iotSvgBehaviorTypes = iotSvgBehaviorTypes; - iotSvgBehaviorTypeTranslations = iotSvgBehaviorTypeTranslations; + scadaSymbolBehaviorTypes = scadaSymbolBehaviorTypes; + scadaSymbolBehaviorTypeTranslations = scadaSymbolBehaviorTypeTranslations; valueTypes = Object.keys(ValueType) as ValueType[]; @@ -53,13 +53,13 @@ export class ScadaSymbolBehaviorPanelComponent implements OnInit { isAdd = false; @Input() - behavior: IotSvgBehavior; + behavior: ScadaSymbolBehavior; @Input() popover: TbPopoverComponent; @Output() - behaviorSettingsApplied = new EventEmitter(); + behaviorSettingsApplied = new EventEmitter(); functionScopeVariables = this.widgetService.getWidgetScopeVariables(); @@ -107,7 +107,7 @@ export class ScadaSymbolBehaviorPanelComponent implements OnInit { } private updateValidators() { - const type: IotSvgBehaviorType = this.behaviorFormGroup.get('type').value; + const type: ScadaSymbolBehaviorType = this.behaviorFormGroup.get('type').value; const valueType: ValueType = this.behaviorFormGroup.get('valueType').value; let valueToDataType: ValueToDataType = this.behaviorFormGroup.get('valueToDataType').value; this.behaviorFormGroup.disable({emitEvent: false}); @@ -116,7 +116,7 @@ export class ScadaSymbolBehaviorPanelComponent implements OnInit { this.behaviorFormGroup.get('type').enable({emitEvent: false}); this.behaviorFormGroup.get('hint').enable({emitEvent: false}); switch (type) { - case IotSvgBehaviorType.value: + case ScadaSymbolBehaviorType.value: this.behaviorFormGroup.get('valueType').enable({emitEvent: false}); this.behaviorFormGroup.get('defaultValue').enable({emitEvent: false}); if (valueType === ValueType.BOOLEAN) { @@ -125,7 +125,7 @@ export class ScadaSymbolBehaviorPanelComponent implements OnInit { this.behaviorFormGroup.get('stateLabel').enable({emitEvent: false}); } break; - case IotSvgBehaviorType.action: + case ScadaSymbolBehaviorType.action: if (valueType === ValueType.BOOLEAN && valueToDataType === ValueToDataType.VALUE) { this.behaviorFormGroup.patchValue({valueToDataType: ValueToDataType.CONSTANT}, {emitEvent: false}); valueToDataType = ValueToDataType.CONSTANT; @@ -141,7 +141,7 @@ export class ScadaSymbolBehaviorPanelComponent implements OnInit { this.behaviorFormGroup.get('valueToDataFunction').enable({emitEvent: false}); } break; - case IotSvgBehaviorType.widgetAction: + case ScadaSymbolBehaviorType.widgetAction: break; } } diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-row.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-row.component.html index 766cce736b..72aad310e4 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-row.component.html +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-row.component.html @@ -24,8 +24,8 @@ - - {{ iotSvgBehaviorTypeTranslations.get(type) | translate }} + + {{ scadaSymbolBehaviorTypeTranslations.get(type) | translate }} diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-row.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-row.component.ts index 12bc0d2ecc..14ae531008 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-row.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-row.component.ts @@ -29,21 +29,23 @@ import { ViewEncapsulation } from '@angular/core'; import { - AbstractControl, - ControlValueAccessor, NG_VALIDATORS, + ControlValueAccessor, + NG_VALIDATORS, NG_VALUE_ACCESSOR, - UntypedFormBuilder, UntypedFormControl, + UntypedFormBuilder, + UntypedFormControl, UntypedFormGroup, - ValidationErrors, Validator, ValidatorFn, + Validator, + ValidatorFn, Validators } from '@angular/forms'; import { - IotSvgBehavior, - IotSvgBehaviorType, - iotSvgBehaviorTypes, - iotSvgBehaviorTypeTranslations -} from '@home/components/widget/lib/svg/iot-svg.models'; -import { deepClone, isDefinedAndNotNull, isUndefinedOrNull } from '@core/utils'; + ScadaSymbolBehavior, + ScadaSymbolBehaviorType, + scadaSymbolBehaviorTypes, + scadaSymbolBehaviorTypeTranslations +} from '@home/components/widget/lib/scada/scada-symbol.models'; +import { deepClone, isUndefinedOrNull } from '@core/utils'; import { MatButton } from '@angular/material/button'; import { TbPopoverService } from '@shared/components/popover.service'; import { @@ -54,17 +56,17 @@ import { ScadaSymbolBehaviorsComponent } from '@home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component'; -export const behaviorValid = (behavior: IotSvgBehavior): boolean => { +export const behaviorValid = (behavior: ScadaSymbolBehavior): boolean => { if (!behavior.id || !behavior.name || !behavior.type) { return false; } switch (behavior.type) { - case IotSvgBehaviorType.value: + case ScadaSymbolBehaviorType.value: if (!behavior.valueType || isUndefinedOrNull(behavior.defaultValue)) { return false; } break; - case IotSvgBehaviorType.action: + case ScadaSymbolBehaviorType.action: if (!behavior.valueToDataType) { return false; } @@ -77,7 +79,7 @@ export const behaviorValid = (behavior: IotSvgBehavior): boolean => { return false; } break; - case IotSvgBehaviorType.widgetAction: + case ScadaSymbolBehaviorType.widgetAction: break; } return true; @@ -109,8 +111,8 @@ export class ScadaSymbolBehaviorRowComponent implements ControlValueAccessor, On @ViewChild('editButton') editButton: MatButton; - iotSvgBehaviorTypes = iotSvgBehaviorTypes; - iotSvgBehaviorTypeTranslations = iotSvgBehaviorTypeTranslations; + scadaSymbolBehaviorTypes = scadaSymbolBehaviorTypes; + scadaSymbolBehaviorTypeTranslations = scadaSymbolBehaviorTypeTranslations; @Input() disabled: boolean; @@ -123,7 +125,7 @@ export class ScadaSymbolBehaviorRowComponent implements ControlValueAccessor, On behaviorRowFormGroup: UntypedFormGroup; - modelValue: IotSvgBehavior; + modelValue: ScadaSymbolBehavior; private propagateChange = (_val: any) => {}; @@ -144,7 +146,7 @@ export class ScadaSymbolBehaviorRowComponent implements ControlValueAccessor, On this.behaviorRowFormGroup.valueChanges.subscribe( () => this.updateModel() ); - this.behaviorRowFormGroup.get('type').valueChanges.subscribe((newType: IotSvgBehaviorType) => { + this.behaviorRowFormGroup.get('type').valueChanges.subscribe((newType: ScadaSymbolBehaviorType) => { this.onTypeChanged(newType); }); } @@ -153,7 +155,7 @@ export class ScadaSymbolBehaviorRowComponent implements ControlValueAccessor, On this.propagateChange = fn; } - registerOnTouched(fn: any): void { + registerOnTouched(_fn: any): void { } setDisabledState(isDisabled: boolean): void { @@ -165,7 +167,7 @@ export class ScadaSymbolBehaviorRowComponent implements ControlValueAccessor, On } } - writeValue(value: IotSvgBehavior): void { + writeValue(value: ScadaSymbolBehavior): void { this.modelValue = value; this.behaviorRowFormGroup.patchValue( { @@ -225,7 +227,7 @@ export class ScadaSymbolBehaviorRowComponent implements ControlValueAccessor, On this.editBehavior(null, this.editButton, true, onCanceled); } - public validate(c: UntypedFormControl) { + public validate(_c: UntypedFormControl) { const idControl = this.behaviorRowFormGroup.get('id'); if (idControl.hasError('behaviorIdNotUnique')) { idControl.updateValueAndValidity({onlySelf: false, emitEvent: false}); @@ -236,7 +238,7 @@ export class ScadaSymbolBehaviorRowComponent implements ControlValueAccessor, On behaviorIdNotUnique: true }; } - const behavior: IotSvgBehavior = {...this.modelValue, ...this.behaviorRowFormGroup.value}; + const behavior: ScadaSymbolBehavior = {...this.modelValue, ...this.behaviorRowFormGroup.value}; if (!behaviorValid(behavior)) { return { behavior: true @@ -261,7 +263,7 @@ export class ScadaSymbolBehaviorRowComponent implements ControlValueAccessor, On }; } - private onTypeChanged(newType: IotSvgBehaviorType) { + private onTypeChanged(newType: ScadaSymbolBehaviorType) { const prevType = this.modelValue.type; this.modelValue = {...this.modelValue, ...{type: newType}}; if (!behaviorValid(this.modelValue)) { @@ -276,7 +278,7 @@ export class ScadaSymbolBehaviorRowComponent implements ControlValueAccessor, On } private updateModel() { - const value: IotSvgBehavior = this.behaviorRowFormGroup.value; + const value: ScadaSymbolBehavior = this.behaviorRowFormGroup.value; this.modelValue = {...this.modelValue, ...value}; this.propagateChange(this.modelValue); } diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.ts index 7217c7ccef..02afbb6966 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.ts @@ -35,7 +35,7 @@ import { UntypedFormGroup, Validator } from '@angular/forms'; -import { IotSvgBehavior, IotSvgBehaviorType } from '@home/components/widget/lib/svg/iot-svg.models'; +import { ScadaSymbolBehavior, ScadaSymbolBehaviorType } from '@home/components/widget/lib/scada/scada-symbol.models'; import { ValueType } from '@shared/models/constants'; import { CdkDragDrop } from '@angular/cdk/drag-drop'; import { @@ -94,7 +94,7 @@ export class ScadaSymbolBehaviorsComponent implements ControlValueAccessor, OnIn }); this.behaviorsFormGroup.valueChanges.subscribe( () => { - let behaviors: IotSvgBehavior[] = this.behaviorsFormGroup.get('behaviors').value; + let behaviors: ScadaSymbolBehavior[] = this.behaviorsFormGroup.get('behaviors').value; if (behaviors) { behaviors = behaviors.filter(b => behaviorValid(b)); } @@ -119,7 +119,7 @@ export class ScadaSymbolBehaviorsComponent implements ControlValueAccessor, OnIn } } - writeValue(value: IotSvgBehavior[] | undefined): void { + writeValue(value: ScadaSymbolBehavior[] | undefined): void { const behaviors= value || []; this.behaviorsFormGroup.setControl('behaviors', this.prepareBehaviorsFormArray(behaviors), {emitEvent: false}); } @@ -176,10 +176,10 @@ export class ScadaSymbolBehaviorsComponent implements ControlValueAccessor, OnIn } addBehavior() { - const behavior: IotSvgBehavior = { + const behavior: ScadaSymbolBehavior = { id: '', name: '', - type: IotSvgBehaviorType.value, + type: ScadaSymbolBehaviorType.value, valueType: ValueType.BOOLEAN, defaultValue: false, valueToDataType: ValueToDataType.CONSTANT, @@ -197,7 +197,7 @@ export class ScadaSymbolBehaviorsComponent implements ControlValueAccessor, OnIn }); } - private prepareBehaviorsFormArray(behaviors: IotSvgBehavior[] | undefined): UntypedFormArray { + private prepareBehaviorsFormArray(behaviors: ScadaSymbolBehavior[] | undefined): UntypedFormArray { const behaviorsControls: Array = []; if (behaviors) { behaviors.forEach((behavior) => { diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag-function-panel.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag-function-panel.component.ts index 127724938d..ce04b5510d 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag-function-panel.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag-function-panel.component.ts @@ -27,7 +27,6 @@ import { import { TbPopoverComponent } from '@shared/components/popover.component'; import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; import { WidgetService } from '@core/http/widget.service'; -import { TranslateService } from '@ngx-translate/core'; import { TbEditorCompleter } from '@shared/models/ace/completion.models'; import { TbHighlightRule } from '@shared/models/ace/ace.models'; import { @@ -35,7 +34,7 @@ import { scadaSymbolClickActionPropertiesHighlightRules, scadaSymbolElementStateRenderHighlightRules, scadaSymbolElementStateRenderPropertiesHighlightRules -} from '@home/pages/scada-symbol/scada-symbol.models'; +} from '@home/pages/scada-symbol/scada-symbol-editor.models'; import { JsFuncComponent } from '@shared/components/js-func.component'; @Component({ diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.ts index cb9b950f2c..820ad84832 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.ts @@ -16,14 +16,12 @@ import { Component, - EventEmitter, forwardRef, Input, - OnChanges, OnInit, - Output, Renderer2, - SimpleChanges, - ViewChild, ViewContainerRef, + Renderer2, + ViewChild, + ViewContainerRef, ViewEncapsulation } from '@angular/core'; import { @@ -34,26 +32,12 @@ import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, - Validator, - Validators + Validator } from '@angular/forms'; -import { IotSvgTag } from '@home/components/widget/lib/svg/iot-svg.models'; -import { MatExpansionPanel } from '@angular/material/expansion'; -import { JsFuncComponent } from '@shared/components/js-func.component'; -import { MatSelect } from '@angular/material/select'; +import { ScadaSymbolTag } from '@home/components/widget/lib/scada/scada-symbol.models'; import { TbEditorCompleter } from '@shared/models/ace/completion.models'; -import { - scadaSymbolClickActionHighlightRules, - scadaSymbolClickActionPropertiesHighlightRules, - scadaSymbolElementStateRenderHighlightRules, - scadaSymbolElementStateRenderPropertiesHighlightRules -} from '@home/pages/scada-symbol/scada-symbol.models'; import { MatButton } from '@angular/material/button'; import { TbPopoverService } from '@shared/components/popover.service'; -import { deepClone } from '@core/utils'; -import { - ScadaSymbolBehaviorPanelComponent -} from '@home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component'; import { ScadaSymbolMetadataTagFunctionPanelComponent } from '@home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag-function-panel.component'; @@ -95,7 +79,7 @@ export class ScadaSymbolMetadataTagComponent implements ControlValueAccessor, On tagFormGroup: UntypedFormGroup; - modelValue: IotSvgTag; + modelValue: ScadaSymbolTag; private propagateChange = (_val: any) => {}; @@ -129,9 +113,9 @@ export class ScadaSymbolMetadataTagComponent implements ControlValueAccessor, On } } - writeValue(value: IotSvgTag): void { + writeValue(value: ScadaSymbolTag): void { this.modelValue = value; - const clickAction = value?.actions && value?.actions.click ? value.actions.click.actionFunction : null; + const clickAction = value?.actions?.click?.actionFunction; this.tagFormGroup.patchValue( { tag: value?.tag, @@ -152,20 +136,10 @@ export class ScadaSymbolMetadataTagComponent implements ControlValueAccessor, On editTagStateRenderFunction(): void { this.openTagFunction('renderFunction', this.editStateRenderFunctionButton); - /*this.openPanelWithCallback(this.expansionPanel, () => { - this.openPanelWithCallback(this.renderFunctionExpansionPanel, () => { - this.stateRenderFunction.focus(); - }); - });*/ } editClickAction(): void { this.openTagFunction('clickAction', this.editClickActionButton); - /*this.openPanelWithCallback(this.expansionPanel, () => { - this.openPanelWithCallback(this.clickActionExpansionPanel, () => { - this.clickAction.focus(); - }); - });*/ } private openTagFunction(tagFunctionType: 'renderFunction' | 'clickAction', @@ -205,20 +179,6 @@ export class ScadaSymbolMetadataTagComponent implements ControlValueAccessor, On } } -/* private openPanelWithCallback(panel: MatExpansionPanel, callback: () => void) { - if (!panel.expanded) { - const s = panel.afterExpand.subscribe(() => { - s.unsubscribe(); - setTimeout(() => { - callback(); - }); - }); - panel.open(); - } else { - callback(); - } - }*/ - private updateModel() { const value = this.tagFormGroup.value; this.modelValue = { diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.ts index c429b5c0b4..e480bb06cc 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.ts @@ -37,13 +37,13 @@ import { UntypedFormGroup, Validator } from '@angular/forms'; -import { IotSvgTag } from '@home/components/widget/lib/svg/iot-svg.models'; +import { ScadaSymbolTag } from '@home/components/widget/lib/scada/scada-symbol.models'; import { ScadaSymbolMetadataTagComponent } from '@home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component'; import { TbEditorCompleter } from '@shared/models/ace/completion.models'; -const tagIsEmpty = (tag: IotSvgTag): boolean => +const tagIsEmpty = (tag: ScadaSymbolTag): boolean => !tag.stateRenderFunction && !tag.actions?.click?.actionFunction; @Component({ @@ -86,7 +86,7 @@ export class ScadaSymbolMetadataTagsComponent implements ControlValueAccessor, O tagsFormGroup: UntypedFormGroup; - private modelValue: IotSvgTag[]; + private modelValue: ScadaSymbolTag[]; private propagateChange = (_val: any) => {}; @@ -102,7 +102,7 @@ export class ScadaSymbolMetadataTagsComponent implements ControlValueAccessor, O this.tagsFormGroup.valueChanges.subscribe( () => { - let value: IotSvgTag[] = this.tagsFormGroup.get('tags').value; + let value: ScadaSymbolTag[] = this.tagsFormGroup.get('tags').value; if (value) { value = value.filter(t => !tagIsEmpty(t)); } @@ -147,7 +147,7 @@ export class ScadaSymbolMetadataTagsComponent implements ControlValueAccessor, O } } - writeValue(value: IotSvgTag[] | undefined): void { + writeValue(value: ScadaSymbolTag[] | undefined): void { this.modelValue = value || []; const tagsResult= this.setupTags(this.modelValue); this.tagsFormGroup.setControl('tags', this.prepareTagsFormArray(tagsResult.tags), {emitEvent: false}); @@ -172,7 +172,7 @@ export class ScadaSymbolMetadataTagsComponent implements ControlValueAccessor, O editTagStateRenderFunction(tag: string): void { setTimeout(() => { - const tags: IotSvgTag[] = this.tagsFormGroup.get('tags').value; + const tags: ScadaSymbolTag[] = this.tagsFormGroup.get('tags').value; const index = tags.findIndex(t => t.tag === tag); const tagComponent = this.metadataTags.get(index); tagComponent?.editTagStateRenderFunction(); @@ -181,29 +181,31 @@ export class ScadaSymbolMetadataTagsComponent implements ControlValueAccessor, O editTagClickAction(tag: string): void { setTimeout(() => { - const tags: IotSvgTag[] = this.tagsFormGroup.get('tags').value; + const tags: ScadaSymbolTag[] = this.tagsFormGroup.get('tags').value; const index = tags.findIndex(t => t.tag === tag); const tagComponent = this.metadataTags.get(index); tagComponent?.editClickAction(); }); } - private setupTags(existing?: IotSvgTag[]): {tags: IotSvgTag[]; emitEvent: boolean} { + private setupTags(existing?: ScadaSymbolTag[]): {tags: ScadaSymbolTag[]; emitEvent: boolean} { existing = (existing || []).filter(t => !tagIsEmpty(t)); const result = (this.tags || []).sort().map(tag => ({ tag, stateRenderFunction: null, - actions: { - click: { - actionFunction: null - } - } + actions: null })); for (const tag of existing) { const found = result.find(t => t.tag === tag.tag); if (found) { found.stateRenderFunction = tag.stateRenderFunction; - found.actions.click.actionFunction = tag.actions?.click?.actionFunction; + if (tag.actions?.click?.actionFunction) { + found.actions = { + click: { + actionFunction: tag.actions.click.actionFunction + } + }; + } } } const tagRemoved = !!existing.find(existingTag => @@ -214,7 +216,7 @@ export class ScadaSymbolMetadataTagsComponent implements ControlValueAccessor, O }; } - private prepareTagsFormArray(tags: IotSvgTag[] | undefined): UntypedFormArray { + private prepareTagsFormArray(tags: ScadaSymbolTag[] | undefined): UntypedFormArray { const tagsControls: Array = []; if (tags) { tags.forEach((tag) => { diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.ts index fba374b848..788ab4b17a 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.ts @@ -35,7 +35,7 @@ import { Validators } from '@angular/forms'; import { PageComponent } from '@shared/components/page.component'; -import { emptyMetadata, IotSvgMetadata } from '@home/components/widget/lib/svg/iot-svg.models'; +import { emptyMetadata, ScadaSymbolMetadata } from '@home/components/widget/lib/scada/scada-symbol.models'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; import { ToggleHeaderOption } from '@shared/components/toggle-header.component'; @@ -48,10 +48,10 @@ import { clickActionFunctionCompletions, elementStateRenderFunctionCompletions, generalStateRenderFunctionCompletions, - iotSvgContextCompletion, + scadaSymbolContextCompletion, scadaSymbolGeneralStateRenderHighlightRules, scadaSymbolGeneralStateRenderPropertiesHighlightRules -} from '@home/pages/scada-symbol/scada-symbol.models'; +} from '@home/pages/scada-symbol/scada-symbol-editor.models'; import { CustomTranslatePipe } from '@shared/pipe/custom-translate.pipe'; @Component({ @@ -83,7 +83,7 @@ export class ScadaSymbolMetadataComponent extends PageComponent implements OnIni @Input() tags: string[]; - private modelValue: IotSvgMetadata; + private modelValue: ScadaSymbolMetadata; private propagateChange = null; @@ -167,7 +167,7 @@ export class ScadaSymbolMetadataComponent extends PageComponent implements OnIni } } - writeValue(value: IotSvgMetadata): void { + writeValue(value: ScadaSymbolMetadata): void { this.modelValue = value; this.metadataFormGroup.patchValue( value, {emitEvent: false} @@ -195,14 +195,14 @@ export class ScadaSymbolMetadataComponent extends PageComponent implements OnIni } private updateModel() { - const metadata: IotSvgMetadata = this.metadataFormGroup.getRawValue(); + const metadata: ScadaSymbolMetadata = this.metadataFormGroup.getRawValue(); this.modelValue = metadata; this.propagateChange(this.modelValue); this.updateFunctionCompleters(metadata); } - private updateFunctionCompleters(metadata: IotSvgMetadata) { - const contextCompleter = iotSvgContextCompletion(metadata, this.tags, this.customTranslate); + private updateFunctionCompleters(metadata: ScadaSymbolMetadata) { + const contextCompleter = scadaSymbolContextCompletion(metadata, this.tags, this.customTranslate); const generalStateRender = generalStateRenderFunctionCompletions(contextCompleter); if (!this.generalStateRenderFunctionCompleter) { this.generalStateRenderFunctionCompleter = new TbEditorCompleter(generalStateRender); diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.ts index a36536464f..7a2fff993a 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.ts @@ -35,7 +35,7 @@ import { UntypedFormGroup, Validator } from '@angular/forms'; -import { IotSvgProperty, IotSvgPropertyType } from '@home/components/widget/lib/svg/iot-svg.models'; +import { ScadaSymbolProperty, ScadaSymbolPropertyType } from '@home/components/widget/lib/scada/scada-symbol.models'; import { CdkDragDrop } from '@angular/cdk/drag-drop'; import { propertyValid, @@ -94,11 +94,11 @@ export class ScadaSymbolPropertiesComponent implements ControlValueAccessor, OnI }); this.propertiesFormGroup.valueChanges.subscribe( () => { - let properties: IotSvgProperty[] = this.propertiesFormGroup.get('properties').value; + let properties: ScadaSymbolProperty[] = this.propertiesFormGroup.get('properties').value; if (properties) { properties = properties.filter(p => propertyValid(p)); } - this.booleanPropertyIds = properties.filter(p => p.type === IotSvgPropertyType.switch).map(p => p.id); + this.booleanPropertyIds = properties.filter(p => p.type === ScadaSymbolPropertyType.switch).map(p => p.id); this.propagateChange(properties); } ); @@ -120,10 +120,10 @@ export class ScadaSymbolPropertiesComponent implements ControlValueAccessor, OnI } } - writeValue(value: IotSvgProperty[] | undefined): void { + writeValue(value: ScadaSymbolProperty[] | undefined): void { const properties= value || []; this.propertiesFormGroup.setControl('properties', this.preparePropertiesFormArray(properties), {emitEvent: false}); - this.booleanPropertyIds = properties.filter(p => p.type === IotSvgPropertyType.switch).map(p => p.id); + this.booleanPropertyIds = properties.filter(p => p.type === ScadaSymbolPropertyType.switch).map(p => p.id); } public validate(c: UntypedFormControl) { @@ -178,10 +178,10 @@ export class ScadaSymbolPropertiesComponent implements ControlValueAccessor, OnI } addProperty() { - const property: IotSvgProperty = { + const property: ScadaSymbolProperty = { id: '', name: '', - type: IotSvgPropertyType.text, + type: ScadaSymbolPropertyType.text, default: '' }; const propertiesArray = this.propertiesFormGroup.get('properties') as UntypedFormArray; @@ -195,7 +195,7 @@ export class ScadaSymbolPropertiesComponent implements ControlValueAccessor, OnI }); } - private preparePropertiesFormArray(properties: IotSvgProperty[] | undefined): UntypedFormArray { + private preparePropertiesFormArray(properties: ScadaSymbolProperty[] | undefined): UntypedFormArray { const propertiesControls: Array = []; if (properties) { properties.forEach((property) => { diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component.html index 8a76578487..7ab700a5a3 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component.html +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component.html @@ -34,29 +34,29 @@
scada.property.type
- - {{ iotSvgPropertyTypeTranslations.get(type) | translate }} + + {{ scadaSymbolPropertyTypeTranslations.get(type) | translate }}
scada.property.default-value
- - - - @@ -66,18 +66,18 @@ [step]="propertyFormGroup.get('step').value" type="number" placeholder="{{ 'widget-config.set' | translate }}"> - - -
-
+
scada.property.number-settings
scada.property.min
@@ -124,7 +124,7 @@ {{ 'scada.property.vertical-divider-after' | translate }}
-
scada.property.input-field-suffix
scada.property.property-row-classes
- + {{ clazz }}
-
+
scada.property.property-field-classes
- + {{ clazz }} diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component.ts index 9be8959dca..8db37fd4e5 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component.ts @@ -18,12 +18,13 @@ import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } fro import { TbPopoverComponent } from '@shared/components/popover.component'; import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; import { - IotSvgProperty, iotSvgPropertyFieldClasses, iotSvgPropertyRowClasses, - IotSvgPropertyType, - iotSvgPropertyTypes, - iotSvgPropertyTypeTranslations -} from '@home/components/widget/lib/svg/iot-svg.models'; -import { WidgetService } from '@core/http/widget.service'; + ScadaSymbolProperty, + scadaSymbolPropertyFieldClasses, + scadaSymbolPropertyRowClasses, + ScadaSymbolPropertyType, + scadaSymbolPropertyTypes, + scadaSymbolPropertyTypeTranslations +} from '@home/components/widget/lib/scada/scada-symbol.models'; import { defaultPropertyValue } from '@home/pages/scada-symbol/metadata-components/scada-symbol-property-row.component'; import { ValueType } from '@shared/models/constants'; @@ -37,20 +38,20 @@ export class ScadaSymbolPropertyPanelComponent implements OnInit { ValueType = ValueType; - IotSvgPropertyType = IotSvgPropertyType; + ScadaSymbolPropertyType = ScadaSymbolPropertyType; - iotSvgPropertyTypes = iotSvgPropertyTypes; - iotSvgPropertyTypeTranslations = iotSvgPropertyTypeTranslations; + scadaSymbolPropertyTypes = scadaSymbolPropertyTypes; + scadaSymbolPropertyTypeTranslations = scadaSymbolPropertyTypeTranslations; - iotSvgPropertyRowClasses = iotSvgPropertyRowClasses; + scadaSymbolPropertyRowClasses = scadaSymbolPropertyRowClasses; - iotSvgPropertyFieldClasses = iotSvgPropertyFieldClasses; + scadaSymbolPropertyFieldClasses = scadaSymbolPropertyFieldClasses; @Input() isAdd = false; @Input() - property: IotSvgProperty; + property: ScadaSymbolProperty; @Input() booleanPropertyIds: string[]; @@ -59,16 +60,15 @@ export class ScadaSymbolPropertyPanelComponent implements OnInit { popover: TbPopoverComponent; @Output() - propertySettingsApplied = new EventEmitter(); + propertySettingsApplied = new EventEmitter(); panelTitle: string; propertyFormGroup: UntypedFormGroup; - private propertyType: IotSvgPropertyType; + private propertyType: ScadaSymbolPropertyType; - constructor(private fb: UntypedFormBuilder, - private widgetService: WidgetService) { + constructor(private fb: UntypedFormBuilder) { } ngOnInit(): void { @@ -110,8 +110,8 @@ export class ScadaSymbolPropertyPanelComponent implements OnInit { } private updateValidators() { - const type: IotSvgPropertyType = this.propertyFormGroup.get('type').value; - if (type === IotSvgPropertyType.number) { + const type: ScadaSymbolPropertyType = this.propertyFormGroup.get('type').value; + if (type === ScadaSymbolPropertyType.number) { this.propertyFormGroup.get('min').enable({emitEvent: false}); this.propertyFormGroup.get('max').enable({emitEvent: false}); this.propertyFormGroup.get('step').enable({emitEvent: false}); diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-row.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-row.component.html index 7016461cce..bfc715e05a 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-row.component.html +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-row.component.html @@ -24,8 +24,8 @@ - - {{ iotSvgPropertyTypeTranslations.get(type) | translate }} + + {{ scadaSymbolPropertyTypeTranslations.get(type) | translate }} diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-row.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-row.component.ts index 60a56aae50..36d5f50436 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-row.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-row.component.ts @@ -40,11 +40,11 @@ import { Validators } from '@angular/forms'; import { - IotSvgProperty, - IotSvgPropertyType, - iotSvgPropertyTypes, - iotSvgPropertyTypeTranslations -} from '@home/components/widget/lib/svg/iot-svg.models'; + ScadaSymbolProperty, + ScadaSymbolPropertyType, + scadaSymbolPropertyTypes, + scadaSymbolPropertyTypeTranslations +} from '@home/components/widget/lib/scada/scada-symbol.models'; import { deepClone } from '@core/utils'; import { MatButton } from '@angular/material/button'; import { TbPopoverService } from '@shared/components/popover.service'; @@ -56,21 +56,21 @@ import { ScadaSymbolPropertiesComponent } from '@home/pages/scada-symbol/metadata-components/scada-symbol-properties.component'; -export const propertyValid = (property: IotSvgProperty): boolean => !(!property.id || !property.name || !property.type); +export const propertyValid = (property: ScadaSymbolProperty): boolean => !(!property.id || !property.name || !property.type); -export const defaultPropertyValue = (type: IotSvgPropertyType): any => { +export const defaultPropertyValue = (type: ScadaSymbolPropertyType): any => { switch (type) { - case IotSvgPropertyType.text: + case ScadaSymbolPropertyType.text: return ''; - case IotSvgPropertyType.number: + case ScadaSymbolPropertyType.number: return 0; - case IotSvgPropertyType.switch: + case ScadaSymbolPropertyType.switch: return false; - case IotSvgPropertyType.color: + case ScadaSymbolPropertyType.color: return '#000'; - case IotSvgPropertyType.color_settings: + case ScadaSymbolPropertyType.color_settings: return constantColor('#000'); - case IotSvgPropertyType.font: + case ScadaSymbolPropertyType.font: return { size: 12, sizeUnit: 'px', @@ -79,7 +79,7 @@ export const defaultPropertyValue = (type: IotSvgPropertyType): any => { style: 'normal', lineHeight: '1' } as Font; - case IotSvgPropertyType.units: + case ScadaSymbolPropertyType.units: return ''; } }; @@ -110,8 +110,8 @@ export class ScadaSymbolPropertyRowComponent implements ControlValueAccessor, On @ViewChild('editButton') editButton: MatButton; - iotSvgPropertyTypes = iotSvgPropertyTypes; - iotSvgPropertyTypeTranslations = iotSvgPropertyTypeTranslations; + scadaSymbolPropertyTypes = scadaSymbolPropertyTypes; + scadaSymbolPropertyTypeTranslations = scadaSymbolPropertyTypeTranslations; @Input() disabled: boolean; @@ -127,7 +127,7 @@ export class ScadaSymbolPropertyRowComponent implements ControlValueAccessor, On propertyRowFormGroup: UntypedFormGroup; - modelValue: IotSvgProperty; + modelValue: ScadaSymbolProperty; private propagateChange = (_val: any) => {}; @@ -148,7 +148,7 @@ export class ScadaSymbolPropertyRowComponent implements ControlValueAccessor, On this.propertyRowFormGroup.valueChanges.subscribe( () => this.updateModel() ); - this.propertyRowFormGroup.get('type').valueChanges.subscribe((newType: IotSvgPropertyType) => { + this.propertyRowFormGroup.get('type').valueChanges.subscribe((newType: ScadaSymbolPropertyType) => { this.onTypeChanged(newType); }); } @@ -169,7 +169,7 @@ export class ScadaSymbolPropertyRowComponent implements ControlValueAccessor, On } } - writeValue(value: IotSvgProperty): void { + writeValue(value: ScadaSymbolProperty): void { this.modelValue = value; this.propertyRowFormGroup.patchValue( { @@ -241,7 +241,7 @@ export class ScadaSymbolPropertyRowComponent implements ControlValueAccessor, On propertyIdNotUnique: true }; } - const property: IotSvgProperty = {...this.modelValue, ...this.propertyRowFormGroup.value}; + const property: ScadaSymbolProperty = {...this.modelValue, ...this.propertyRowFormGroup.value}; if (!propertyValid(property)) { return { property: true @@ -266,13 +266,13 @@ export class ScadaSymbolPropertyRowComponent implements ControlValueAccessor, On }; } - private onTypeChanged(newType: IotSvgPropertyType) { + private onTypeChanged(newType: ScadaSymbolPropertyType) { this.modelValue = {...this.modelValue, ...{type: newType}}; this.modelValue.default = defaultPropertyValue(newType); } private updateModel() { - const value: IotSvgProperty = this.propertyRowFormGroup.value; + const value: ScadaSymbolProperty = this.propertyRowFormGroup.value; this.modelValue = {...this.modelValue, ...value}; this.propagateChange(this.modelValue); } diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.html index 96e1018eec..3f73cfbcbd 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.html +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.html @@ -15,4 +15,4 @@ limitations under the License. --> -
+
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.scss b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.scss index 7bad327b9a..cbdd38f7b0 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.scss +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.scss @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -.tb-scada-symbol-shape { +.tb-scada-symbol-editor-shape { width: 100%; height: 100%; display: flex; diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts index 10c2b3f7f0..bda484d640 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts @@ -27,10 +27,10 @@ import { ViewContainerRef, ViewEncapsulation } from '@angular/core'; -import { ScadaSymbolEditObject, ScadaSymbolEditObjectCallbacks } from '@home/pages/scada-symbol/scada-symbol.models'; +import { ScadaSymbolEditObject, ScadaSymbolEditObjectCallbacks } from '@home/pages/scada-symbol/scada-symbol-editor.models'; export interface ScadaSymbolEditorData { - svgContent: string; + scadaSymbolContent: string; } @Component({ @@ -41,8 +41,8 @@ export interface ScadaSymbolEditorData { }) export class ScadaSymbolEditorComponent implements OnInit, OnDestroy, AfterViewInit, OnChanges { - @ViewChild('iotSvgShape', {static: false}) - iotSvgShape: ElementRef; + @ViewChild('scadaSymbolShape', {static: false}) + scadaSymbolShape: ElementRef; @Input() data: ScadaSymbolEditorData; @@ -59,10 +59,10 @@ export class ScadaSymbolEditorComponent implements OnInit, OnDestroy, AfterViewI } ngAfterViewInit() { - this.scadaSymbolEditObject = new ScadaSymbolEditObject(this.iotSvgShape.nativeElement, + this.scadaSymbolEditObject = new ScadaSymbolEditObject(this.scadaSymbolShape.nativeElement, this.viewContainerRef, this.editObjectCallbacks); if (this.data) { - this.scadaSymbolEditObject.setContent(this.data.svgContent); + this.scadaSymbolEditObject.setContent(this.data.scadaSymbolContent); } } @@ -73,7 +73,7 @@ export class ScadaSymbolEditorComponent implements OnInit, OnDestroy, AfterViewI if (propName === 'data') { if (this.scadaSymbolEditObject) { setTimeout(() => { - this.scadaSymbolEditObject.setContent(this.data.svgContent); + this.scadaSymbolEditObject.setContent(this.data.scadaSymbolContent); }); } } diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.models.ts similarity index 89% rename from ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts rename to ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.models.ts index 72571662f5..bbece3b3de 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.models.ts @@ -25,25 +25,25 @@ import { setupTagPanelTooltip } from '@home/pages/scada-symbol/scada-symbol-tooltip.components'; import { - IotSvgBehavior, - IotSvgBehaviorType, - iotSvgContentData, - IotSvgMetadata, - IotSvgProperty, - IotSvgPropertyType -} from '@home/components/widget/lib/svg/iot-svg.models'; + ScadaSymbolBehavior, + ScadaSymbolBehaviorType, + scadaSymbolContentData, + ScadaSymbolMetadata, + ScadaSymbolProperty, + ScadaSymbolPropertyType +} from '@home/components/widget/lib/scada/scada-symbol.models'; import { TbEditorCompletion, TbEditorCompletions } from '@shared/models/ace/completion.models'; import { CustomTranslatePipe } from '@shared/pipe/custom-translate.pipe'; import { TbHighlightRule } from '@shared/models/ace/ace.models'; +import { ValueType } from '@shared/models/constants'; import ITooltipsterInstance = JQueryTooltipster.ITooltipsterInstance; import TooltipPositioningSide = JQueryTooltipster.TooltipPositioningSide; import ITooltipsterHelper = JQueryTooltipster.ITooltipsterHelper; import ITooltipPosition = JQueryTooltipster.ITooltipPosition; -import { ValueType } from '@shared/models/constants'; export interface ScadaSymbolData { imageResource: ImageResourceInfo; - svgContent: string; + scadaSymbolContent: string; } export interface ScadaSymbolEditObjectCallbacks { @@ -83,7 +83,7 @@ export class ScadaSymbolEditObject { this.svgShape.remove(); } this.scale = 1; - const contentData = iotSvgContentData(svgContent); + const contentData = scadaSymbolContentData(svgContent); this.svgRootNodePart = contentData.svgRootNode; this.svgShape = SVG().svg(contentData.innerSvg); this.svgShape.node.style.overflow = 'visible'; @@ -153,10 +153,10 @@ export class ScadaSymbolEditObject { }); e.preventDefault(); }); - this.svgShape.on('panStart', (e) => { + this.svgShape.on('panStart', (_e) => { this.svgShape.node.style.cursor = 'grab'; }); - this.svgShape.on('panEnd', (e) => { + this.svgShape.on('panEnd', (_e) => { this.svgShape.node.style.cursor = 'default'; }); } @@ -258,8 +258,10 @@ export class ScadaSymbolEditObject { const targetWidth = this.rootElement.getBoundingClientRect().width; const targetHeight = this.rootElement.getBoundingClientRect().height; if (targetWidth && targetHeight) { + const svgAspect = this.box.width / this.box.height; + const shapeAspect = targetWidth / targetHeight; let scale: number; - if (targetWidth < targetHeight) { + if (svgAspect > shapeAspect) { scale = targetWidth / this.box.width; } else { scale = targetHeight / this.box.height; @@ -416,10 +418,10 @@ export class ScadaSymbolElement { } else { this.element.addClass('tb-element'); } - this.element.on('mouseenter', (event) => { + this.element.on('mouseenter', (_event) => { this.highlight(); }); - this.element.on('mouseleave', (event) => { + this.element.on('mouseleave', (_event) => { this.unhighlight(); }); if (this.hasTag()) { @@ -588,7 +590,7 @@ export class ScadaSymbolElement { zIndex: 100, arrow: this.isGroup(), distance: this.isGroup() ? (this.scaled(groupRectPadding) + groupRectStroke) : 6, - theme: ['iot-svg'], + theme: ['scada-symbol'], delay: 0, animationDuration: 0, interactive: true, @@ -598,7 +600,7 @@ export class ScadaSymbolElement { content: '', functionPosition: (instance, helper, position) => this.innerTagTooltipPosition(instance, helper, position), - functionReady: (instance, helper) => { + functionReady: (_instance, helper) => { const tooltipEl = $(helper.tooltip); tooltipEl.on('mouseenter', () => { this.highlight(); @@ -623,7 +625,7 @@ export class ScadaSymbolElement { { zIndex: 100, arrow: true, - theme: ['iot-svg', 'tb-active'], + theme: ['scada-symbol', 'tb-active'], delay: [0, 300], interactive: true, trigger: 'hover', @@ -645,7 +647,7 @@ export class ScadaSymbolElement { }, functionPosition: (instance, helper, position) => this.innerAddTagTooltipPosition(instance, helper, position), - functionReady: (instance, helper) => { + functionReady: (_instance, helper) => { const tooltipEl = $(helper.tooltip); tooltipEl.on('mouseenter', () => { this.highlight(); @@ -664,7 +666,7 @@ export class ScadaSymbolElement { setupAddTagPanelTooltip(this, this.editObject.viewContainerRef); } - private innerTagTooltipPosition(instance: ITooltipsterInstance, helper: ITooltipsterHelper, + private innerTagTooltipPosition(_instance: ITooltipsterInstance, helper: ITooltipsterHelper, position: ITooltipPosition): ITooltipPosition { const clientRect = helper.origin.getBoundingClientRect(); if (!this.isGroup()) { @@ -678,8 +680,8 @@ export class ScadaSymbolElement { return position; } - private innerAddTagTooltipPosition(instance: ITooltipsterInstance, - helper: ITooltipsterHelper, position: ITooltipPosition): ITooltipPosition { + private innerAddTagTooltipPosition(_instance: ITooltipsterInstance, + _helper: ITooltipsterHelper, position: ITooltipPosition): ITooltipPosition { const distance = 10; switch (position.side) { case 'right': @@ -803,61 +805,57 @@ const scadaSymbolCtxPropertyHighlightRules: TbHighlightRule[] = [ }, { class: 'scada-symbol-ctx-property', - regex: /(?<=ctx\.properties\.)([a-zA-Z\$_\u00a1-\uffff][a-zA-Z\d\$_\u00a1-\uffff]*)\b/ + regex: /(?<=ctx\.properties\.)([a-zA-Z$_\u00a1-\uffff][a-zA-Z\d$_\u00a1-\uffff]*)\b/ }, { class: 'scada-symbol-ctx-tag', - regex: /(?<=ctx\.tags\.)([a-zA-Z\$_\u00a1-\uffff][a-zA-Z\d\$_\u00a1-\uffff]*)\b/ + regex: /(?<=ctx\.tags\.)([a-zA-Z$_\u00a1-\uffff][a-zA-Z\d$_\u00a1-\uffff]*)\b/ }, { class: 'scada-symbol-ctx-value', - regex: /(?<=ctx\.values\.)([a-zA-Z\$_\u00a1-\uffff][a-zA-Z\d\$_\u00a1-\uffff]*)\b/ + regex: /(?<=ctx\.values\.)([a-zA-Z$_\u00a1-\uffff][a-zA-Z\d$_\u00a1-\uffff]*)\b/ }, { class: 'scada-symbol-ctx-api-method', - regex: /(?<=ctx\.api\.)([a-zA-Z\$_\u00a1-\uffff][a-zA-Z\d\$_\u00a1-\uffff]*)\b/ + regex: /(?<=ctx\.api\.)([a-zA-Z$_\u00a1-\uffff][a-zA-Z\d$_\u00a1-\uffff]*)\b/ } ]; export const scadaSymbolGeneralStateRenderPropertiesHighlightRules: TbHighlightRule[] = scadaSymbolCtxPropertyHighlightRules.concat({ class: 'scada-symbol-svg-properties', - regex: /(?<=svg\.)([a-zA-Z\$_\u00a1-\uffff][a-zA-Z\d\$_\u00a1-\uffff]*)\b/ + regex: /(?<=svg\.)([a-zA-Z$_\u00a1-\uffff][a-zA-Z\d$_\u00a1-\uffff]*)\b/ }); export const scadaSymbolElementStateRenderPropertiesHighlightRules: TbHighlightRule[] = scadaSymbolCtxPropertyHighlightRules.concat({ class: 'scada-symbol-element-properties', - regex: /(?<=element\.)([a-zA-Z\$_\u00a1-\uffff][a-zA-Z\d\$_\u00a1-\uffff]*)\b/ + regex: /(?<=element\.)([a-zA-Z$_\u00a1-\uffff][a-zA-Z\d$_\u00a1-\uffff]*)\b/ }); export const scadaSymbolClickActionPropertiesHighlightRules: TbHighlightRule[] = scadaSymbolElementStateRenderPropertiesHighlightRules.concat({ class: 'scada-symbol-event-properties', - regex: /(?<=event\.)([a-zA-Z\$_\u00a1-\uffff][a-zA-Z\d\$_\u00a1-\uffff]*)\b/ + regex: /(?<=event\.)([a-zA-Z$_\u00a1-\uffff][a-zA-Z\d$_\u00a1-\uffff]*)\b/ }); -export const generalStateRenderFunctionCompletions = (ctxCompletion: TbEditorCompletion): TbEditorCompletions => { - return { +export const generalStateRenderFunctionCompletions = (ctxCompletion: TbEditorCompletion): TbEditorCompletions => ({ ctx: ctxCompletion, svg: { meta: 'argument', type: 'Svg', description: 'A root svg node. Instance of SVG.Svg.' } - }; -}; + }); -export const elementStateRenderFunctionCompletions = (ctxCompletion: TbEditorCompletion): TbEditorCompletions => { - return { +export const elementStateRenderFunctionCompletions = (ctxCompletion: TbEditorCompletion): TbEditorCompletions => ({ ctx: ctxCompletion, element: { meta: 'argument', type: 'Element', description: 'An SVG element.' }, - }; -}; + }); export const clickActionFunctionCompletions = (ctxCompletion: TbEditorCompletion): TbEditorCompletions => { const completions = elementStateRenderFunctionCompletions(ctxCompletion); @@ -869,8 +867,8 @@ export const clickActionFunctionCompletions = (ctxCompletion: TbEditorCompletion return completions; }; -export const iotSvgContextCompletion = (metadata: IotSvgMetadata, tags: string[], - customTranslate: CustomTranslatePipe): TbEditorCompletion => { +export const scadaSymbolContextCompletion = (metadata: ScadaSymbolMetadata, tags: string[], + customTranslate: CustomTranslatePipe): TbEditorCompletion => { const properties: TbEditorCompletion = { meta: 'object', type: 'object', @@ -878,7 +876,7 @@ export const iotSvgContextCompletion = (metadata: IotSvgMetadata, tags: string[] children: {} }; for (const property of metadata.properties) { - properties.children[property.id] = iotSvgPropertyCompletion(property, customTranslate); + properties.children[property.id] = scadaSymbolPropertyCompletion(property, customTranslate); } const values: TbEditorCompletion = { meta: 'object', @@ -886,9 +884,9 @@ export const iotSvgContextCompletion = (metadata: IotSvgMetadata, tags: string[] description: 'An object holding all values obtained using behaviors of type \'Value\'', children: {} }; - const getValues = metadata.behavior.filter(b => b.type === IotSvgBehaviorType.value); + const getValues = metadata.behavior.filter(b => b.type === ScadaSymbolBehaviorType.value); for (const value of getValues) { - values.children[value.id] = iotSvgValueCompletion(value, customTranslate); + values.children[value.id] = scadaSymbolValueCompletion(value, customTranslate); } const tagsCompletions: TbEditorCompletion = { meta: 'object', @@ -907,12 +905,12 @@ export const iotSvgContextCompletion = (metadata: IotSvgMetadata, tags: string[] } return { meta: 'argument', - type: 'IotSvgContext', + type: 'ScadaSymbolContext', description: 'Context of svg object.', children: { api: { meta: 'object', - type: 'IotSvgApi', + type: 'ScadaSymbolApi', description: 'Svg object API', children: { animate: { @@ -926,7 +924,7 @@ export const iotSvgContextCompletion = (metadata: IotSvgMetadata, tags: string[] }, { name: 'duration', - description: 'Animation duretion is milliseconds', + description: 'Animation duration in milliseconds', type: 'number' } ], @@ -944,7 +942,7 @@ export const iotSvgContextCompletion = (metadata: IotSvgMetadata, tags: string[] }; }; -const iotSvgPropertyCompletion = (property: IotSvgProperty, customTranslate: CustomTranslatePipe): TbEditorCompletion => { +const scadaSymbolPropertyCompletion = (property: ScadaSymbolProperty, customTranslate: CustomTranslatePipe): TbEditorCompletion => { let description = customTranslate.transform(property.name, property.name); if (property.subLabel) { description += ` ${customTranslate.transform(property.subLabel, property.subLabel)}`; @@ -952,39 +950,39 @@ const iotSvgPropertyCompletion = (property: IotSvgProperty, customTranslate: Cus return { meta: 'property', description, - type: iotSvgPropertyCompletionType(property.type) + type: scadaSymbolPropertyCompletionType(property.type) }; }; -const iotSvgValueCompletion = (value: IotSvgBehavior, customTranslate: CustomTranslatePipe): TbEditorCompletion => { +const scadaSymbolValueCompletion = (value: ScadaSymbolBehavior, customTranslate: CustomTranslatePipe): TbEditorCompletion => { const description = customTranslate.transform(value.name, value.name); return { meta: 'property', description, - type: iotSvgValueCompletionType(value.valueType) + type: scadaSymbolValueCompletionType(value.valueType) }; }; -const iotSvgPropertyCompletionType = (type: IotSvgPropertyType): string => { +const scadaSymbolPropertyCompletionType = (type: ScadaSymbolPropertyType): string => { switch (type) { - case IotSvgPropertyType.text: + case ScadaSymbolPropertyType.text: return 'string'; - case IotSvgPropertyType.number: + case ScadaSymbolPropertyType.number: return 'number'; - case IotSvgPropertyType.switch: + case ScadaSymbolPropertyType.switch: return 'boolean'; - case IotSvgPropertyType.color: + case ScadaSymbolPropertyType.color: return 'color string'; - case IotSvgPropertyType.color_settings: + case ScadaSymbolPropertyType.color_settings: return 'ColorProcessor'; - case IotSvgPropertyType.font: + case ScadaSymbolPropertyType.font: return 'Font'; - case IotSvgPropertyType.units: + case ScadaSymbolPropertyType.units: return 'units string'; } }; -const iotSvgValueCompletionType = (type: ValueType): string => { +const scadaSymbolValueCompletionType = (type: ValueType): string => { switch (type) { case ValueType.STRING: return 'string'; diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts index 4dcac6038f..e0adf2892b 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts @@ -30,7 +30,7 @@ import { ViewContainerRef, ViewEncapsulation } from '@angular/core'; -import { ScadaSymbolElement } from '@home/pages/scada-symbol/scada-symbol.models'; +import { ScadaSymbolElement } from '@home/pages/scada-symbol/scada-symbol-editor.models'; import { CommonModule } from '@angular/common'; import { SharedModule } from '@shared/shared.module'; import { ENTER } from '@angular/cdk/keycodes'; @@ -234,7 +234,7 @@ class ScadaSymbolTagPanelComponent extends ScadaSymbolPanelComponent implements { zIndex: 200, arrow: true, - theme: ['iot-svg', 'tb-active'], + theme: ['scada-symbol', 'tb-active'], interactive: true, trigger: 'click', side: 'top', @@ -254,7 +254,7 @@ class ScadaSymbolTagPanelComponent extends ScadaSymbolPanelComponent implements { zIndex: 200, arrow: true, - theme: ['iot-svg', 'tb-active'], + theme: ['scada-symbol', 'tb-active'], interactive: true, trigger: 'click', side: 'top', diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html index 449bf95bc7..8a6da0f84f 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html @@ -15,11 +15,11 @@ limitations under the License. --> -
-
-
+
+
+
- -
-
+
+
-
+
- +
scada.symbol
+ + +
+ - +
@@ -103,7 +110,7 @@
- + diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.scss b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.scss index ca6a01b972..bf9fb9de5e 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.scss +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.scss @@ -16,16 +16,16 @@ @import '../../../../../scss/constants'; -.tb-scada-symbol { +.tb-scada-symbol-editor { width: 100%; height: 100%; - .tb-scada-symbol-details-drawer { + .tb-scada-symbol-editor-details-drawer { width: 50%; - .tb-scada-symbol-preview-content { + .tb-scada-symbol-editor-preview-content { display: flex; flex-direction: column; gap: 8px; - .tb-scada-symbol-preview-header { + .tb-scada-symbol-editor-preview-header { padding: 24px 24px 0; display: flex; gap: 12px; @@ -33,7 +33,7 @@ align-items: center; justify-content: space-between; } - .tb-scada-symbol-preview-settings { + .tb-scada-symbol-editor-preview-settings { & > .mat-content { padding-top: 8px; @media #{$mat-xs} { @@ -57,13 +57,11 @@ } } } - .tb-scada-symbol-content { + .tb-scada-symbol-editor-content { flex: 1; min-width: 0; min-height: 0; + max-width: 50%; background: #fff; - .tb-iot-svg-panel { - padding: 0; - } } } diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts index 086ca454d7..feba6296dc 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts @@ -28,15 +28,16 @@ import { import { PageComponent } from '@shared/components/page.component'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; -import { ActivatedRoute, Router } from '@angular/router'; +import { ActivatedRoute } from '@angular/router'; import { map, switchMap, takeUntil } from 'rxjs/operators'; import { Subject } from 'rxjs'; -import { ScadaSymbolData, ScadaSymbolEditObjectCallbacks } from '@home/pages/scada-symbol/scada-symbol.models'; +import { ScadaSymbolData, ScadaSymbolEditObjectCallbacks } from '@home/pages/scada-symbol/scada-symbol-editor.models'; import { - IotSvgMetadata, IotSvgObjectSettings, - parseIotSvgMetadataFromContent, - updateIotSvgMetadataInContent -} from '@home/components/widget/lib/svg/iot-svg.models'; + parseScadaSymbolMetadataFromContent, + ScadaSymbolMetadata, + ScadaSymbolObjectSettings, + updateScadaSymbolMetadataInContent +} from '@home/components/widget/lib/scada/scada-symbol.models'; import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; import { createFileFromContent, deepClone } from '@core/utils'; import { @@ -55,9 +56,9 @@ import { UtilsService } from '@core/services/utils.service'; import { TranslateService } from '@ngx-translate/core'; import { Widget, widgetType } from '@shared/models/widget.models'; import { - iotSvgWidgetDefaultSettings, - IotSvgWidgetSettings -} from '@home/components/widget/lib/svg/iot-svg-widget.models'; + scadaSymbolWidgetDefaultSettings, + ScadaSymbolWidgetSettings +} from '@home/components/widget/lib/scada/scada-symbol-widget.models'; import { WidgetActionCallbacks } from '@home/components/widget/action/manage-widget-actions.component.models'; import { ScadaSymbolMetadataComponent @@ -87,6 +88,7 @@ export class ScadaSymbolComponent extends PageComponent symbolEditorData: ScadaSymbolEditorData; previewMode = false; + previewMetadata: ScadaSymbolMetadata; scadaSymbolFormGroup: UntypedFormGroup; @@ -113,7 +115,7 @@ export class ScadaSymbolComponent extends PageComponent symbolEditorDirty = false; - private previewIotSvgObjectSettings: IotSvgObjectSettings; + private previewScadaSymbolObjectSettings: ScadaSymbolObjectSettings; private previewWidget: Widget; @@ -128,7 +130,6 @@ export class ScadaSymbolComponent extends PageComponent } constructor(protected store: Store, - private router: Router, private route: ActivatedRoute, private fb: UntypedFormBuilder, private cd: ChangeDetectorRef, @@ -144,7 +145,7 @@ export class ScadaSymbolComponent extends PageComponent metadata: [null] }); this.scadaPreviewFormGroup = this.fb.group({ - iotSvgObject: [null] + scadaSymbolObjectSettings: [null] }); const entitiAliases: EntityAliases = {}; @@ -182,13 +183,13 @@ export class ScadaSymbolComponent extends PageComponent onApplyScadaSymbolConfig() { if (this.scadaSymbolFormGroup.valid) { - const svgContent = this.prepareSvgContent(); - const file = createFileFromContent(svgContent, this.symbolData.imageResource.fileName, + const metadata: ScadaSymbolMetadata = this.scadaSymbolFormGroup.get('metadata').value; + const scadaSymbolContent = this.prepareScadaSymbolContent(metadata); + const file = createFileFromContent(scadaSymbolContent, this.symbolData.imageResource.fileName, this.symbolData.imageResource.descriptor.mediaType); const type = imageResourceType(this.symbolData.imageResource); let imageInfoObservable = this.imageService.updateImage(type, this.symbolData.imageResource.resourceKey, file); - const metadata: IotSvgMetadata = this.scadaSymbolFormGroup.get('metadata').value; if (metadata.title !== this.symbolData.imageResource.title) { imageInfoObservable = imageInfoObservable.pipe( switchMap(imageInfo => { @@ -202,7 +203,7 @@ export class ScadaSymbolComponent extends PageComponent `${IMAGES_URL_PREFIX}/${type}/${encodeURIComponent(imageInfo.resourceKey)}`).pipe( map(content => ({ imageResource: imageInfo, - svgContent: content + scadaSymbolContent: content })) )) ).subscribe(data => { @@ -217,25 +218,27 @@ export class ScadaSymbolComponent extends PageComponent } enterPreviewMode() { - this.symbolData.svgContent = this.prepareSvgContent(); - this.previewIotSvgObjectSettings = { + this.previewMetadata = this.scadaSymbolFormGroup.get('metadata').value; + this.symbolData.scadaSymbolContent = this.prepareScadaSymbolContent(this.previewMetadata); + this.previewScadaSymbolObjectSettings = { behavior: {}, properties: {} }; this.scadaPreviewFormGroup.patchValue({ - iotSvgObject: this.previewIotSvgObjectSettings + scadaSymbolObjectSettings: this.previewScadaSymbolObjectSettings }, {emitEvent: false}); this.scadaPreviewFormGroup.markAsPristine(); - const settings: IotSvgWidgetSettings = {...iotSvgWidgetDefaultSettings, + const settings: ScadaSymbolWidgetSettings = {...scadaSymbolWidgetDefaultSettings, ...{ simulated: true, - iotSvg: null, - iotSvgContent: this.symbolData.svgContent, - iotSvgObject: this.previewIotSvgObjectSettings + scadaSymbolUrl: null, + scadaSymbolContent: this.symbolData.scadaSymbolContent, + scadaSymbolObjectSettings: this.previewScadaSymbolObjectSettings, + padding: '0' } }; this.previewWidget = { - typeFullFqn: 'system.iot_svg', + typeFullFqn: 'system.scada_symbol', type: widgetType.rpc, sizeX: 24, sizeY: 24, @@ -255,21 +258,21 @@ export class ScadaSymbolComponent extends PageComponent exitPreviewMode() { this.symbolEditorData = { - svgContent: this.symbolData.svgContent + scadaSymbolContent: this.symbolData.scadaSymbolContent }; this.previewMode = false; } onRevertPreviewSettings() { this.scadaPreviewFormGroup.patchValue({ - iotSvgObject: this.previewIotSvgObjectSettings + scadaSymbolObjectSettings: this.previewScadaSymbolObjectSettings }, {emitEvent: false}); this.scadaPreviewFormGroup.markAsPristine(); } onApplyPreviewSettings() { this.scadaPreviewFormGroup.markAsPristine(); - this.previewIotSvgObjectSettings = this.scadaPreviewFormGroup.get('iotSvgObject').value; + this.previewScadaSymbolObjectSettings = this.scadaPreviewFormGroup.get('scadaSymbolObjectSettings').value; this.updatePreviewWidgetSettings(); } @@ -278,7 +281,7 @@ export class ScadaSymbolComponent extends PageComponent } tagHasStateRenderFunction(tag: string): boolean { - const metadata: IotSvgMetadata = this.scadaSymbolFormGroup.get('metadata').value; + const metadata: ScadaSymbolMetadata = this.scadaSymbolFormGroup.get('metadata').value; if (metadata.tags) { const found = metadata.tags.find(t => t.tag === tag); return !!found?.stateRenderFunction; @@ -287,7 +290,7 @@ export class ScadaSymbolComponent extends PageComponent } tagHasClickAction(tag: string): boolean { - const metadata: IotSvgMetadata = this.scadaSymbolFormGroup.get('metadata').value; + const metadata: ScadaSymbolMetadata = this.scadaSymbolFormGroup.get('metadata').value; if (metadata.tags) { const found = metadata.tags.find(t => t.tag === tag); return !!found?.actions?.click?.actionFunction; @@ -309,14 +312,13 @@ export class ScadaSymbolComponent extends PageComponent private updatePreviewWidgetSettings() { this.previewWidget = deepClone(this.previewWidget); - this.previewWidget.config.settings.iotSvgObject = this.previewIotSvgObjectSettings; + this.previewWidget.config.settings.scadaSymbolObjectSettings = this.previewScadaSymbolObjectSettings; this.previewWidgets = [this.previewWidget]; } - private prepareSvgContent(): string { + private prepareScadaSymbolContent(metadata: ScadaSymbolMetadata): string { const svgContent = this.symbolEditor.getContent(); - const metadata: IotSvgMetadata = this.scadaSymbolFormGroup.get('metadata').value; - return updateIotSvgMetadataInContent(svgContent, metadata); + return updateScadaSymbolMetadataInContent(svgContent, metadata); } private reset(): void { @@ -330,9 +332,9 @@ export class ScadaSymbolComponent extends PageComponent this.origSymbolData = data; this.symbolData = deepClone(data); this.symbolEditorData = { - svgContent: this.symbolData.svgContent + scadaSymbolContent: this.symbolData.scadaSymbolContent }; - const metadata = parseIotSvgMetadataFromContent(this.symbolData.svgContent); + const metadata = parseScadaSymbolMetadataFromContent(this.symbolData.scadaSymbolContent); this.scadaSymbolFormGroup.patchValue({ metadata }, {emitEvent: false}); diff --git a/ui-ngx/src/app/shared/components/image/gallery-image-input.component.ts b/ui-ngx/src/app/shared/components/image/gallery-image-input.component.ts index fd44b6cfec..5894ce9bb4 100644 --- a/ui-ngx/src/app/shared/components/image/gallery-image-input.component.ts +++ b/ui-ngx/src/app/shared/components/image/gallery-image-input.component.ts @@ -124,21 +124,26 @@ export class GalleryImageInputComponent extends PageComponent implements OnInit, this.detectLinkType(); if (this.linkType === ImageLinkType.resource) { const params = extractParamsFromImageResourceUrl(this.imageUrl); - this.loadingImageResource = true; - this.imageService.getImageInfo(params.type, params.key, {ignoreLoading: true, ignoreErrors: true}).subscribe( - { - next: (res) => { - this.imageResource = res; - this.loadingImageResource = false; - this.cd.markForCheck(); - }, - error: () => { - this.reset(); - this.loadingImageResource = false; - this.cd.markForCheck(); + if (params) { + this.loadingImageResource = true; + this.imageService.getImageInfo(params.type, params.key, {ignoreLoading: true, ignoreErrors: true}).subscribe( + { + next: (res) => { + this.imageResource = res; + this.loadingImageResource = false; + this.cd.markForCheck(); + }, + error: () => { + this.reset(); + this.loadingImageResource = false; + this.cd.markForCheck(); + } } - } - ); + ); + } else { + this.reset(); + this.cd.markForCheck(); + } } else if (this.linkType === ImageLinkType.base64) { this.cd.markForCheck(); } else if (this.linkType === ImageLinkType.external) { diff --git a/ui-ngx/src/app/shared/components/image/image-gallery.component.ts b/ui-ngx/src/app/shared/components/image/image-gallery.component.ts index b0d4217eaa..0ea85837a8 100644 --- a/ui-ngx/src/app/shared/components/image/image-gallery.component.ts +++ b/ui-ngx/src/app/shared/components/image/image-gallery.component.ts @@ -178,7 +178,7 @@ export class ImageGalleryComponent extends PageComponent implements OnInit, OnDe actionColumnWidth = '240px'; get isScada() { - return this.imageSubType === ResourceSubType.IOT_SVG; + return this.imageSubType === ResourceSubType.SCADA_SYMBOL; } private updateDataSubscription: Subscription; diff --git a/ui-ngx/src/app/shared/components/image/scada-symbol-input.component.html b/ui-ngx/src/app/shared/components/image/scada-symbol-input.component.html new file mode 100644 index 0000000000..cbe1bb6567 --- /dev/null +++ b/ui-ngx/src/app/shared/components/image/scada-symbol-input.component.html @@ -0,0 +1,65 @@ + +
+ +
+
+ +
+
+
+ +
+ {{ imageResource.title | customTranslate }} +
+ +
+
+
+ {{ scadaSymbolMetadata.title | customTranslate }} +
+
+ +
+
+ +
+
+
+ + +
{{ (disabled ? 'scada.no-symbol' : 'scada.no-symbol-selected') | translate }}
+ + + + diff --git a/ui-ngx/src/app/shared/components/image/scada-symbol-input.component.scss b/ui-ngx/src/app/shared/components/image/scada-symbol-input.component.scss new file mode 100644 index 0000000000..2392f8185d --- /dev/null +++ b/ui-ngx/src/app/shared/components/image/scada-symbol-input.component.scss @@ -0,0 +1,149 @@ +/** + * Copyright ยฉ 2016-2024 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 "../../../../scss/constants"; + +$containerHeight: 96px !default; + +:host { + .tb-container { + margin-top: 0; + padding: 0 0 16px; + display: flex; + flex-direction: column; + gap: 8px; + label.tb-title { + display: block; + padding-bottom: 0; + } + } + + .tb-scada-symbol-select-container { + width: 100%; + height: $containerHeight; + border-radius: 4px; + border: 1px solid rgba(0, 0, 0, 0.12); + display: flex; + align-items: center; + &.disabled { + width: $containerHeight; + .tb-scada-symbol-container { + width: $containerHeight - 2px; + border-right: none; + } + } + } + + .tb-scada-symbol-container { + width: $containerHeight - 1px; + height: $containerHeight - 2px; + padding: 8px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 4px; + border-right: 1px solid rgba(0, 0, 0, 0.12); + background: #fff; + overflow: hidden; + } + + .tb-scada-symbol-preview { + width: auto; + max-width: $containerHeight - 2px; + height: auto; + max-height: $containerHeight - 2px; + } + + .tb-no-symbol { + text-align: center; + color: rgba(0, 0, 0, 0.38); + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 16px; + letter-spacing: 0.4px; + } + + .tb-scada-symbol-info-container { + display: flex; + flex: 1; + align-self: stretch; + padding: 0 8px; + justify-content: flex-end; + align-items: center; + gap: 4px; + .tb-resource-scada-symbol-container { + padding: 8px; + display: flex; + flex: 1; + align-self: stretch; + justify-content: center; + align-items: flex-start; + flex-direction: column; + gap: 4px; + .tb-scada-symbol-title { + overflow: hidden; + text-overflow: ellipsis; + -webkit-line-clamp: 2; + display: -webkit-box; + -webkit-box-orient: vertical; + font-size: 18px; + font-style: normal; + font-weight: 500; + line-height: 24px; + letter-spacing: 0.25px; + } + &.loading { + align-items: center; + } + } + + .tb-scada-symbol-clear-btn { + color: rgba(0,0,0,0.38); + } + } + + .tb-scada-symbol-select-buttons-container { + display: flex; + flex: 1; + align-self: stretch; + padding: 8px; + gap: 8px; + justify-content: center; + align-items: flex-start; + .tb-scada-symbol-select-button { + width: 100%; + height: 100%; + align-self: stretch; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 4px; + padding: 8px; + line-height: normal; + font-size: 12px; + @media #{$mat-gt-xs} { + padding: 16px; + } + .mat-icon { + width: 24px; + height: 24px; + font-size: 24px; + margin: 0; + } + } + } +} diff --git a/ui-ngx/src/app/shared/components/image/scada-symbol-input.component.ts b/ui-ngx/src/app/shared/components/image/scada-symbol-input.component.ts new file mode 100644 index 0000000000..78aca19ce5 --- /dev/null +++ b/ui-ngx/src/app/shared/components/image/scada-symbol-input.component.ts @@ -0,0 +1,198 @@ +/// +/// Copyright ยฉ 2016-2024 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, forwardRef, Input, OnDestroy, OnInit } from '@angular/core'; +import { PageComponent } from '@shared/components/page.component'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; +import { ControlValueAccessor, NG_VALUE_ACCESSOR, } from '@angular/forms'; +import { coerceBoolean } from '@shared/decorators/coercion'; +import { + extractParamsFromImageResourceUrl, + IMAGE_BASE64_URL_PREFIX, + ImageResourceInfo, + prependTbImagePrefix, + removeTbImagePrefix, + ResourceSubType +} from '@shared/models/resource.models'; +import { ImageService } from '@core/http/image.service'; +import { MatDialog } from '@angular/material/dialog'; +import { + ImageGalleryDialogComponent, + ImageGalleryDialogData +} from '@shared/components/image/image-gallery-dialog.component'; +import { ScadaSymbolMetadata } from '@home/components/widget/lib/scada/scada-symbol.models'; +import { stringToBase64 } from '@core/utils'; + +export enum ScadaSymbolLinkType { + none = 'none', + content = 'content', + resource = 'resource' +} + +@Component({ + selector: 'tb-scada-symbol-input', + templateUrl: './scada-symbol-input.component.html', + styleUrls: ['./scada-symbol-input.component.scss'], + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => ScadaSymbolInputComponent), + multi: true + } + ] +}) +export class ScadaSymbolInputComponent extends PageComponent implements OnInit, OnDestroy, ControlValueAccessor { + + @Input() + label: string; + + @Input() + @coerceBoolean() + required = false; + + @Input() + disabled: boolean; + + @Input() + scadaSymbolContent: string; + + @Input() + scadaSymbolMetadata: ScadaSymbolMetadata; + + scadaSymbolUrl: string; + + imageResource: ImageResourceInfo; + + loadingImageResource = false; + + ScadaSymbolLinkType = ScadaSymbolLinkType; + + linkType: ScadaSymbolLinkType = ScadaSymbolLinkType.none; + + private propagateChange = null; + + constructor(protected store: Store, + private imageService: ImageService, + private dialog: MatDialog, + private cd: ChangeDetectorRef) { + super(store); + } + + ngOnInit() { + if (this.scadaSymbolContent && this.scadaSymbolMetadata) { + this.scadaSymbolUrl = IMAGE_BASE64_URL_PREFIX + 'svg+xml;base64,' + stringToBase64(this.scadaSymbolContent); + this.linkType = ScadaSymbolLinkType.content; + } + } + + ngOnDestroy() { + } + + registerOnChange(fn: any): void { + this.propagateChange = fn; + } + + registerOnTouched(_fn: any): void { + } + + setDisabledState(isDisabled: boolean): void { + this.disabled = isDisabled; + if (this.disabled) { + this.detectLinkType(); + } + } + + writeValue(value: string): void { + value = removeTbImagePrefix(value); + if (this.scadaSymbolUrl !== value) { + this.reset(); + this.scadaSymbolUrl = value; + this.detectLinkType(); + if (this.linkType === ScadaSymbolLinkType.resource) { + const params = extractParamsFromImageResourceUrl(this.scadaSymbolUrl); + if (params) { + this.loadingImageResource = true; + this.imageService.getImageInfo(params.type, params.key, {ignoreLoading: true, ignoreErrors: true}).subscribe( + { + next: (res) => { + this.imageResource = res; + this.loadingImageResource = false; + this.cd.markForCheck(); + }, + error: () => { + this.reset(); + this.loadingImageResource = false; + this.cd.markForCheck(); + } + } + ); + } else { + this.reset(); + this.cd.markForCheck(); + } + } + } + } + + private detectLinkType() { + if (this.scadaSymbolUrl) { + this.linkType = ScadaSymbolLinkType.resource; + } else { + this.linkType = ScadaSymbolLinkType.none; + } + } + + private updateModel(value: string) { + this.cd.markForCheck(); + if (this.scadaSymbolUrl !== value) { + this.scadaSymbolUrl = value; + this.propagateChange(prependTbImagePrefix(this.scadaSymbolUrl)); + } + } + + private reset() { + this.linkType = ScadaSymbolLinkType.none; + this.imageResource = null; + } + + clearSymbol() { + this.reset(); + this.updateModel(null); + } + + openGallery($event: Event): void { + if ($event) { + $event.stopPropagation(); + } + this.dialog.open(ImageGalleryDialogComponent, { + autoFocus: false, + disableClose: false, + panelClass: ['tb-dialog', 'tb-fullscreen-dialog'], + data: { + imageSubType: ResourceSubType.SCADA_SYMBOL + } + }).afterClosed().subscribe((image) => { + if (image) { + this.linkType = ScadaSymbolLinkType.resource; + this.imageResource = image; + this.updateModel(image.link); + } + }); + } + +} diff --git a/ui-ngx/src/app/shared/components/image/upload-image-dialog.component.ts b/ui-ngx/src/app/shared/components/image/upload-image-dialog.component.ts index 4438034062..7c02505913 100644 --- a/ui-ngx/src/app/shared/components/image/upload-image-dialog.component.ts +++ b/ui-ngx/src/app/shared/components/image/upload-image-dialog.component.ts @@ -36,10 +36,10 @@ import { forkJoin } from 'rxjs'; import { blobToBase64, blobToText, updateFileContent } from '@core/utils'; import { emptyMetadata, - IotSvgMetadata, - parseIotSvgMetadataFromContent, - updateIotSvgMetadataInContent -} from '@home/components/widget/lib/svg/iot-svg.models'; + ScadaSymbolMetadata, + parseScadaSymbolMetadataFromContent, + updateScadaSymbolMetadataInContent +} from '@home/components/widget/lib/scada/scada-symbol.models'; export interface UploadImageDialogData { imageSubType: ResourceSubType; @@ -64,11 +64,11 @@ export class UploadImageDialogComponent extends maxResourceSize = getCurrentAuthState(this.store).maxResourceSize; get isScada() { - return this.data.imageSubType === ResourceSubType.IOT_SVG; + return this.data.imageSubType === ResourceSubType.SCADA_SYMBOL; } - private iotSvgContent: string; - private iotSvgMetadata: IotSvgMetadata; + private scadaSymbolContent: string; + private scadaSymbolMetadata: ScadaSymbolMetadata; constructor(protected store: Store, protected router: Router, @@ -91,11 +91,11 @@ export class UploadImageDialogComponent extends this.uploadImageFormGroup.get('file').valueChanges.subscribe((file: File) => { if (file) { blobToText(file).subscribe(content => { - this.iotSvgContent = content; - this.iotSvgMetadata = parseIotSvgMetadataFromContent(this.iotSvgContent); + this.scadaSymbolContent = content; + this.scadaSymbolMetadata = parseScadaSymbolMetadataFromContent(this.scadaSymbolContent); const titleControl = this.uploadImageFormGroup.get('title'); - if (this.iotSvgMetadata.title && (!titleControl.value || !titleControl.touched)) { - titleControl.setValue(this.iotSvgMetadata.title); + if (this.scadaSymbolMetadata.title && (!titleControl.value || !titleControl.touched)) { + titleControl.setValue(this.scadaSymbolMetadata.title); } }); } @@ -129,13 +129,13 @@ export class UploadImageDialogComponent extends if (this.uploadImage) { const title: string = this.uploadImageFormGroup.get('title').value; if (this.isScada) { - if (!this.iotSvgMetadata) { - this.iotSvgMetadata = emptyMetadata(); + if (!this.scadaSymbolMetadata) { + this.scadaSymbolMetadata = emptyMetadata(); } - if (this.iotSvgMetadata.title !== title) { - this.iotSvgMetadata.title = title; + if (this.scadaSymbolMetadata.title !== title) { + this.scadaSymbolMetadata.title = title; } - const newContent = updateIotSvgMetadataInContent(this.iotSvgContent, this.iotSvgMetadata); + const newContent = updateScadaSymbolMetadataInContent(this.scadaSymbolContent, this.scadaSymbolMetadata); file = updateFileContent(file, newContent); } forkJoin([ diff --git a/ui-ngx/src/app/shared/models/resource.models.ts b/ui-ngx/src/app/shared/models/resource.models.ts index f090e67522..688493d22f 100644 --- a/ui-ngx/src/app/shared/models/resource.models.ts +++ b/ui-ngx/src/app/shared/models/resource.models.ts @@ -29,7 +29,7 @@ export enum ResourceType { export enum ResourceSubType { IMAGE = 'IMAGE', - IOT_SVG = 'IOT_SVG' + SCADA_SYMBOL = 'SCADA_SYMBOL' } export const ResourceTypeMIMETypes = new Map( @@ -167,7 +167,11 @@ export const isImageResourceUrl = (url: string): boolean => url && IMAGES_URL_RE export const extractParamsFromImageResourceUrl = (url: string): {type: ImageResourceType; key: string} => { const res = url.match(IMAGES_URL_REGEXP); - return {type: res[1] as ImageResourceType, key: res[2]}; + if (res?.length > 2) { + return {type: res[1] as ImageResourceType, key: res[2]}; + } else { + return null; + } }; export const isBase64DataImageUrl = (url: string): boolean => url && url.startsWith(IMAGE_BASE64_URL_PREFIX); diff --git a/ui-ngx/src/app/shared/shared.module.ts b/ui-ngx/src/app/shared/shared.module.ts index 127ced222c..4e925484ca 100644 --- a/ui-ngx/src/app/shared/shared.module.ts +++ b/ui-ngx/src/app/shared/shared.module.ts @@ -220,6 +220,7 @@ import { RuleChainSelectPanelComponent } from '@shared/components/rule-chain/rul import { WidgetButtonComponent } from '@shared/components/button/widget-button.component'; import { HexInputComponent } from '@shared/components/color-picker/hex-input.component'; import { CustomTranslatePipe } from '@shared/pipe/custom-translate.pipe'; +import { ScadaSymbolInputComponent } from '@shared/components/image/scada-symbol-input.component'; export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) { return markedOptionsService; @@ -421,7 +422,8 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) EmbedImageDialogComponent, ImageGalleryDialogComponent, WidgetButtonComponent, - HexInputComponent + HexInputComponent, + ScadaSymbolInputComponent ], imports: [ CommonModule, @@ -675,7 +677,8 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) MultipleGalleryImageInputComponent, EmbedImageDialogComponent, ImageGalleryDialogComponent, - WidgetButtonComponent + WidgetButtonComponent, + ScadaSymbolInputComponent ] }) export class SharedModule { } diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index b70f4cee72..163eec5a71 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -3415,6 +3415,10 @@ "state-render-function": "State render function", "preview": "Preview", "preview-widget-action-text": "Widget action '{{type}}' successfully invoked!", + "no-symbol": "No SCADA symbol", + "no-symbol-selected": "No SCADA symbol selected", + "clear-symbol": "Clear SCADA symbol", + "browse-symbol-from-gallery": "Browse SCADA symbol from gallery", "tag": { "tag": "Tag", "on-click-action": "On click action", diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss index d6a5d0c8ea..d9346ce416 100644 --- a/ui-ngx/src/styles.scss +++ b/ui-ngx/src/styles.scss @@ -461,7 +461,7 @@ mat-icon { } } -.tooltipster-sidetip.iot-svg { +.tooltipster-sidetip.scada-symbol { .tooltipster-box { user-select: none; background: rgba(0, 0, 0, 0.54); From 5385653e6cd35de66da523e8e349eb4f7a439ee5 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Fri, 31 May 2024 14:23:41 +0300 Subject: [PATCH 047/442] UI: SCADA symbol editor permission check and readonly mode. --- ...scada-symbol-behavior-panel.component.html | 5 +- .../scada-symbol-behavior-panel.component.ts | 17 ++- .../scada-symbol-behavior-row.component.html | 3 +- .../scada-symbol-behavior-row.component.ts | 1 + .../scada-symbol-behaviors.component.html | 9 +- .../scada-symbol-behaviors.component.scss | 4 + .../scada-symbol-behaviors.component.ts | 2 +- ...metadata-tag-function-panel.component.html | 4 +- ...l-metadata-tag-function-panel.component.ts | 6 + .../scada-symbol-metadata-tag.component.html | 77 ++-------- .../scada-symbol-metadata-tag.component.ts | 3 +- .../scada-symbol-metadata-tags.component.ts | 3 + .../scada-symbol-properties.component.html | 9 +- .../scada-symbol-properties.component.scss | 4 + .../scada-symbol-properties.component.ts | 2 +- ...scada-symbol-property-panel.component.html | 5 +- .../scada-symbol-property-panel.component.ts | 13 +- .../scada-symbol-property-row.component.html | 3 +- .../scada-symbol-property-row.component.ts | 1 + .../scada-symbol-editor.component.ts | 7 +- .../scada-symbol-editor.models.ts | 13 +- .../scada-symbol-tooltip.components.ts | 132 ++++++++++-------- .../scada-symbol/scada-symbol.component.html | 7 +- .../scada-symbol/scada-symbol.component.ts | 17 +++ 24 files changed, 187 insertions(+), 160 deletions(-) diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.html index 456b209d09..c0c1ab328f 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.html +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.html @@ -125,9 +125,10 @@ color="primary" type="button" (click)="cancel()"> - {{ 'action.cancel' | translate }} + {{ (disabled ? 'action.close' : 'action.cancel') | translate }} - -
-
+
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.scss b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.scss index a9fd4df110..11506a3c0e 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.scss +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.scss @@ -29,6 +29,10 @@ &.tb-actions-header { width: 120px; min-width: 120px; + &.disabled { + width: 40px; + min-width: 40px; + } } } .tb-form-table { diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.ts index 02afbb6966..c53e6031a2 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.ts @@ -79,7 +79,7 @@ export class ScadaSymbolBehaviorsComponent implements ControlValueAccessor, OnIn errorText = ''; get dragEnabled(): boolean { - return this.behaviorsFormArray().controls.length > 1; + return !this.disabled && this.behaviorsFormArray().controls.length > 1; } private propagateChange = (_val: any) => {}; diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag-function-panel.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag-function-panel.component.html index 9ca5f0b998..27c22df7a8 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag-function-panel.component.html +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag-function-panel.component.html @@ -42,9 +42,9 @@ color="primary" type="button" (click)="cancel()"> - {{ 'action.cancel' | translate }} + {{ (disabled ? 'action.close' : 'action.cancel') | translate }} -
-
-
-
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.ts index 820ad84832..3894838bb6 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.ts @@ -162,7 +162,8 @@ export class ScadaSymbolMetadataTagComponent implements ControlValueAccessor, On tagFunction: tagFunctionControl.value, tagFunctionType, tag: this.tagFormGroup.get('tag').value, - completer + completer, + disabled: this.disabled }; const scadaSymbolTagFunctionPanelPopover = this.popoverService.displayPopover(trigger, this.renderer, this.viewContainerRef, ScadaSymbolMetadataTagFunctionPanelComponent, diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.ts index e480bb06cc..42dfe8b7e2 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.ts @@ -122,9 +122,11 @@ export class ScadaSymbolMetadataTagsComponent implements ControlValueAccessor, O if (tagsResult.emitEvent) { setTimeout(() => { this.tagsFormGroup.setControl('tags', tagsControls, {emitEvent: true}); + this.setDisabledState(this.disabled); }); } else { this.tagsFormGroup.setControl('tags', tagsControls, {emitEvent: false}); + this.setDisabledState(this.disabled); } } } @@ -151,6 +153,7 @@ export class ScadaSymbolMetadataTagsComponent implements ControlValueAccessor, O this.modelValue = value || []; const tagsResult= this.setupTags(this.modelValue); this.tagsFormGroup.setControl('tags', this.prepareTagsFormArray(tagsResult.tags), {emitEvent: false}); + this.setDisabledState(this.disabled); } public validate(_c: UntypedFormControl) { diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.html index c0f3316bbe..1b553a5130 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.html +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.html @@ -17,18 +17,18 @@ -->
-
+
scada.property.id
scada.property.name
scada.property.type
-
+
-
+
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.scss b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.scss index 9bafbf2ccb..094ea0668b 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.scss +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.scss @@ -29,6 +29,10 @@ &.tb-actions-header { width: 120px; min-width: 120px; + &.disabled { + width: 40px; + min-width: 40px; + } } } .tb-form-table { diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.ts index 7a2fff993a..d636a25c51 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.ts @@ -79,7 +79,7 @@ export class ScadaSymbolPropertiesComponent implements ControlValueAccessor, OnI errorText = ''; get dragEnabled(): boolean { - return this.propertiesFormArray().controls.length > 1; + return !this.disabled && this.propertiesFormArray().controls.length > 1; } private propagateChange = (_val: any) => {}; diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component.html index 7ab700a5a3..9fd461c229 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component.html +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component.html @@ -171,9 +171,10 @@ color="primary" type="button" (click)="cancel()"> - {{ 'action.cancel' | translate }} + {{ (disabled ? 'action.close' : 'action.cancel') | translate }} - - - - - -
scada.tag.on-click-action
+
scada.tag.on-click-action
-
-
+
+ +
+
+
+ +
+
+ +
+
+
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.scss b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.scss index cbdd38f7b0..05909caf90 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.scss +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.scss @@ -20,3 +20,196 @@ align-items: center; justify-content: center; } +.tb-scada-symbol-editor-tooltips { + position: absolute; + inset: 0; + pointer-events: none; +} +.tb-scada-symbol-editor-buttons { + pointer-events: none; + position: absolute; + left: 20px; + top: 20px; + right: 20px; + display: flex; + justify-content: space-between; + align-items: flex-start; + + .tb-scada-symbol-editor-zoom-buttons { + display: flex; + flex-direction: column; + z-index: 101; + background: #fff; + border-radius: 24px; + &.tb-primary-fill { + &:before { + opacity: 0.1; + } + } + } + + .tb-scada-symbol-editor-upload-buttons { + display: flex; + flex-direction: row; + gap: 8px; + z-index: 101; + .tb-primary-fill { + background: #fff; + border-radius: 50%; + &:before { + opacity: 0.1; + } + } + } +} + +.tooltipster-sidetip.scada-symbol { + position: fixed; + .tooltipster-box { + user-select: none; + background: rgba(0, 0, 0, 0.54); + border: 1px solid rgba(0, 0, 0, 0); + border-radius: 8px; + display: flex; + align-items: center; + .tooltipster-content { + padding: 4px 8px; + font-size: 12px; + line-height: 12px; + font-weight: 500; + color: #ffffff; + } + } + &.tb-active { + .tooltipster-box { + background: #fff; + border: 1px solid rgba(0, 0, 0, 0.38); + box-shadow: 0 0 10px 6px rgba(0, 0, 0, .2); + .tooltipster-content { + color: rgba(0, 0, 0, 0.76); + } + } + .tooltipster-arrow { + .tooltipster-arrow-uncropped { + .tooltipster-arrow-background { + border-width: 12px; + } + } + } + &.tooltipster-top { + .tooltipster-arrow { + bottom: -1px; + .tooltipster-arrow-uncropped { + .tooltipster-arrow-border { + border-top-color: rgba(0, 0, 0, 0.38); + } + .tooltipster-arrow-background { + border-top-color: #fff; + left: -2px; + } + } + } + } + &.tooltipster-bottom { + .tooltipster-arrow { + top: -1px; + .tooltipster-arrow-uncropped { + .tooltipster-arrow-border { + border-bottom-color: rgba(0, 0, 0, 0.38); + } + .tooltipster-arrow-background { + border-bottom-color: #fff; + left: -2px; + top: -1px; + } + } + } + } + &.tooltipster-left { + .tooltipster-arrow { + right: -1px; + .tooltipster-arrow-uncropped { + .tooltipster-arrow-border { + border-left-color: rgba(0, 0, 0, 0.38); + } + .tooltipster-arrow-background { + border-left-color: #fff; + top: -2px; + } + } + } + } + &.tooltipster-right { + .tooltipster-arrow { + left: -1px; + .tooltipster-arrow-uncropped { + .tooltipster-arrow-border { + border-right-color: rgba(0, 0, 0, 0.38); + } + .tooltipster-arrow-background { + border-right-color: #fff; + top: -2px; + left: -1px; + } + } + } + } + } + &.tooltipster-left, &.tooltipster-right { + .tooltipster-box { + min-height: 36px; + } + } + &.tooltipster-top { + .tooltipster-arrow { + bottom: -2px; + .tooltipster-arrow-uncropped { + .tooltipster-arrow-border { + border-top-color: rgba(0, 0, 0, 0.54); + } + .tooltipster-arrow-background { + border-top-color: transparent; + } + } + } + } + &.tooltipster-bottom { + .tooltipster-arrow { + top: -2px; + .tooltipster-arrow-uncropped { + .tooltipster-arrow-border { + border-bottom-color: rgba(0, 0, 0, 0.54); + } + .tooltipster-arrow-background { + border-bottom-color: transparent; + } + } + } + } + &.tooltipster-left { + .tooltipster-arrow { + right: -2px; + .tooltipster-arrow-uncropped { + .tooltipster-arrow-border { + border-left-color: rgba(0, 0, 0, 0.54); + } + .tooltipster-arrow-background { + border-left-color: transparent; + } + } + } + } + &.tooltipster-right { + .tooltipster-arrow { + left: -2px; + .tooltipster-arrow-uncropped { + .tooltipster-arrow-border { + border-right-color: rgba(0, 0, 0, 0.54); + } + .tooltipster-arrow-background { + border-right-color: transparent; + } + } + } + } +} diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts index 41e8ebb735..84cc868749 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts @@ -15,7 +15,7 @@ /// import { - AfterViewInit, + AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, @@ -28,6 +28,7 @@ import { ViewEncapsulation } from '@angular/core'; import { ScadaSymbolEditObject, ScadaSymbolEditObjectCallbacks } from '@home/pages/scada-symbol/scada-symbol-editor.models'; +import { TbAnchorComponent } from '@shared/components/tb-anchor.component'; export interface ScadaSymbolEditorData { scadaSymbolContent: string; @@ -44,6 +45,12 @@ export class ScadaSymbolEditorComponent implements OnInit, OnDestroy, AfterViewI @ViewChild('scadaSymbolShape', {static: false}) scadaSymbolShape: ElementRef; + @ViewChild('tooltipsContainer', {static: false}) + tooltipsContainer: ElementRef; + + @ViewChild('tooltipsContainerComponent', {static: true}) + tooltipsContainerComponent: TbAnchorComponent; + @Input() data: ScadaSymbolEditorData; @@ -55,17 +62,24 @@ export class ScadaSymbolEditorComponent implements OnInit, OnDestroy, AfterViewI scadaSymbolEditObject: ScadaSymbolEditObject; - constructor(private viewContainerRef: ViewContainerRef) { + zoomInDisabled = false; + zoomOutDisabled = false; + + constructor(private cd: ChangeDetectorRef) { } ngOnInit(): void { } ngAfterViewInit() { + this.editObjectCallbacks.onZoom = () => { + this.updateZoomButtonsState(); + }; this.scadaSymbolEditObject = new ScadaSymbolEditObject(this.scadaSymbolShape.nativeElement, - this.viewContainerRef, this.editObjectCallbacks, this.readonly); + this.tooltipsContainer.nativeElement, + this.tooltipsContainerComponent.viewContainerRef, this.editObjectCallbacks, this.readonly); if (this.data) { - this.scadaSymbolEditObject.setContent(this.data.scadaSymbolContent); + this.updateContent(this.data.scadaSymbolContent); } } @@ -76,7 +90,7 @@ export class ScadaSymbolEditorComponent implements OnInit, OnDestroy, AfterViewI if (propName === 'data') { if (this.scadaSymbolEditObject) { setTimeout(() => { - this.scadaSymbolEditObject.setContent(this.data.scadaSymbolContent); + this.updateContent(this.data.scadaSymbolContent); }); } } else if (propName === 'readonly') { @@ -93,5 +107,26 @@ export class ScadaSymbolEditorComponent implements OnInit, OnDestroy, AfterViewI getContent(): string { return this.scadaSymbolEditObject?.getContent(); } + + zoomIn() { + this.scadaSymbolEditObject.zoomIn(); + } + + zoomOut() { + this.scadaSymbolEditObject.zoomOut(); + } + + private updateContent(content: string) { + this.scadaSymbolEditObject.setContent(content); + setTimeout(() => { + this.updateZoomButtonsState(); + }); + } + + private updateZoomButtonsState() { + this.zoomInDisabled = this.scadaSymbolEditObject.zoomInDisabled(); + this.zoomOutDisabled = this.scadaSymbolEditObject.zoomOutDisabled(); + this.cd.markForCheck(); + } } diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.models.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.models.ts index e891baec41..c60cade6ad 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.models.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.models.ts @@ -53,8 +53,12 @@ export interface ScadaSymbolEditObjectCallbacks { editTagClickAction: (tag: string) => void; tagsUpdated: (tags: string[]) => void; onSymbolEditObjectDirty: (dirty: boolean) => void; + onZoom?: () => void; } +const minSymbolZoom = 1; +const maxSymbolZoom = 4; + export class ScadaSymbolEditObject { public svgShape: Svg; @@ -68,7 +72,10 @@ export class ScadaSymbolEditObject { public tags: string[] = []; + private zoomFactor = 0.34; + constructor(private rootElement: HTMLElement, + public tooltipsContainer: HTMLElement, public viewContainerRef: ViewContainerRef, private callbacks: ScadaSymbolEditObjectCallbacks, public readonly: boolean) { @@ -126,6 +133,40 @@ export class ScadaSymbolEditObject { this.elements.filter(e => e.isEditing()).forEach(e => e.stopEdit(true)); } + public zoomIn() { + const level = Math.min(Math.pow(1 + this.zoomFactor, 1.2) * this.svgShape.zoom(), maxSymbolZoom); + this.zoomAnimate(level); + } + + public zoomOut() { + const level = Math.max(Math.pow(1 + this.zoomFactor, -1.2) * this.svgShape.zoom(), minSymbolZoom); + this.zoomAnimate(level); + } + + private zoomAnimate(level: number, animationMs = 200) { + if (level !== this.svgShape.zoom()) { + this.hideTooltips(); + const runner = this.svgShape.animate(animationMs).ease('<>'); + runner + .zoom(level) + .during(() => { + const box = this.restrictToMargins(this.svgShape.viewbox(), 0); + this.svgShape.viewbox(box); + }) + .after(() => { + this.postZoom(this.callbacks.onZoom); + }); + } + } + + public zoomInDisabled() { + return Number(this.svgShape.zoom().toFixed(5)) >= maxSymbolZoom; + } + + public zoomOutDisabled() { + return Number(this.svgShape.zoom().toFixed(5)) <= minSymbolZoom; + } + private doSetup() { this.setupZoomPan(0); (window as any).SVG = svgjs; @@ -143,29 +184,37 @@ export class ScadaSymbolEditObject { detail: { level, focus } } = e as any; this.svgShape.zoom(level, focus); - const box = this.restrictToMargins(this.svgShape.viewbox(), margin); - this.svgShape.viewbox(box); - setTimeout(() => { - this.updateTooltipPositions(); - }); - e.preventDefault(); + this.postZoom(this.callbacks.onZoom, e, margin); }); this.svgShape.on('panning', (e) => { const box = (e as any).detail.box; this.svgShape.viewbox(this.restrictToMargins(box, margin)); - setTimeout(() => { - this.updateTooltipPositions(); - }); e.preventDefault(); }); this.svgShape.on('panStart', (_e) => { - this.svgShape.node.style.cursor = 'grab'; + if (this.svgShape.zoom() > minSymbolZoom) { + this.hideTooltips(); + this.svgShape.node.style.cursor = 'grab'; + } }); this.svgShape.on('panEnd', (_e) => { + this.restoreTooltips(); this.svgShape.node.style.cursor = 'default'; }); } + private postZoom(callback?: () => void, e?: any, margin = 0) { + const box = this.restrictToMargins(this.svgShape.viewbox(), margin); + this.svgShape.viewbox(box); + setTimeout(() => { + this.updateTooltipPositions(); + }); + e?.preventDefault(); + if (callback) { + callback(); + } + } + private restrictToMargins(box: Box, margin: number): Box { if (box.x < -margin) { box.x = -margin; @@ -304,17 +353,29 @@ export class ScadaSymbolEditObject { } private updateZoomOptions() { + // this.zoomFactor = 2 / this.scale; this.svgShape.panZoom({ - zoomMin: 1, - zoomMax: 4, - zoomFactor: 2 / this.scale + zoomMin: minSymbolZoom, + zoomMax: maxSymbolZoom, + zoomFactor: this.zoomFactor }); } private updateTooltipPositions() { - const container = this.rootElement.getBoundingClientRect(); for (const e of this.elements) { - e.updateTooltipPosition(container); + e.updateTooltipPosition(); + } + } + + private hideTooltips() { + for (const e of this.elements) { + e.hideTooltip(); + } + } + + private restoreTooltips() { + for (const e of this.elements) { + e.restoreTooltip(); } } @@ -362,12 +423,12 @@ const hasBBox = (e: Element): boolean => { } }; -const isDomRectContained = (target: DOMRect, container: DOMRect, horizontalGap = 0, verticalGap = 0): boolean => ( +/*const isDomRectContained = (target: DOMRect, container: DOMRect, horizontalGap = 0, verticalGap = 0): boolean => ( target.left >= container.left - horizontalGap && target.left + target.width <= container.left + container.width + horizontalGap && target.top >= container.top - verticalGap && target.top + target.height <= container.top + container.height + verticalGap -); +);*/ const elementTooltipMinHeight = 36 + 8; const elementTooltipMinWidth = 100; @@ -559,21 +620,29 @@ export class ScadaSymbolElement { return this.editing; } - public updateTooltipPosition(container: DOMRect) { + public updateTooltipPosition() { if (this.tooltip && !this.tooltip.status().destroyed) { this.tooltip.reposition(); const tooltipElement = this.tooltip.elementTooltip(); if (tooltipElement) { - if (isDomRectContained(tooltipElement.getBoundingClientRect(), container, - elementTooltipMinWidth, elementTooltipMinHeight)) { - tooltipElement.style.visibility = null; - } else { - tooltipElement.style.visibility = 'hidden'; - } + tooltipElement.style.visibility = null; } } } + public hideTooltip() { + if (this.tooltip && !this.tooltip.status().destroyed) { + const tooltipElement = this.tooltip.elementTooltip(); + if (tooltipElement) { + tooltipElement.style.visibility = 'hidden'; + } + } + } + + public restoreTooltip() { + this.updateTooltipPosition(); + } + public setInnerTooltipOffset(offset: number, center: number) { this.innerTooltipOffset = offset + (center - this.box.cy) * this.editObject.scale; } @@ -584,6 +653,10 @@ export class ScadaSymbolElement { } } + public get tooltipContainer(): JQuery { + return $(this.editObject.tooltipsContainer); + } + private unscaled(size: number): number { return size / (this.editObject.scale * this.editObject.svgShape.zoom()); } @@ -596,6 +669,7 @@ export class ScadaSymbolElement { const el = $(this.element.node); el.tooltipster( { + parent: this.tooltipContainer, zIndex: 100, arrow: this.isGroup(), distance: this.isGroup() ? (this.scaled(groupRectPadding) + groupRectStroke) : 6, @@ -611,6 +685,7 @@ export class ScadaSymbolElement { this.innerTagTooltipPosition(instance, helper, position), functionReady: (_instance, helper) => { const tooltipEl = $(helper.tooltip); + // tooltipEl.detach().appendTo($(this.editObject.tooltipsContainer)); tooltipEl.on('mouseenter', () => { this.highlight(); }); @@ -632,6 +707,7 @@ export class ScadaSymbolElement { const el = $(this.element.node); el.tooltipster( { + parent: this.tooltipContainer, zIndex: 100, arrow: true, theme: ['scada-symbol', 'tb-active'], diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts index d6afec4932..d1b9278816 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts @@ -244,6 +244,7 @@ class ScadaSymbolTagPanelComponent extends ScadaSymbolPanelComponent implements const tagSettingsButton = $(this.tagSettingsButton.nativeElement); tagSettingsButton.tooltipster( { + parent: this.symbolElement.tooltipContainer, zIndex: 200, arrow: true, theme: ['scada-symbol', 'tb-active'], @@ -264,6 +265,7 @@ class ScadaSymbolTagPanelComponent extends ScadaSymbolPanelComponent implements const removeTagButton = $(this.removeTagButton.nativeElement); removeTagButton.tooltipster( { + parent: this.symbolElement.tooltipContainer, zIndex: 200, arrow: true, theme: ['scada-symbol', 'tb-active'], diff --git a/ui-ngx/src/app/shared/models/widget.models.ts b/ui-ngx/src/app/shared/models/widget.models.ts index 20f2062c77..88d537220e 100644 --- a/ui-ngx/src/app/shared/models/widget.models.ts +++ b/ui-ngx/src/app/shared/models/widget.models.ts @@ -43,6 +43,7 @@ import { ComponentStyle, Font, TimewindowStyle } from '@shared/models/widget-set import { NULL_UUID } from '@shared/models/id/has-uuid'; import { HasTenantId } from '@shared/models/entity.models'; import { DataKeysCallbacks, DataKeySettingsFunction } from '@home/components/widget/config/data-keys.component.models'; +import { WidgetConfigCallbacks } from '@home/components/widget/config/widget-config.component.models'; export enum widgetType { timeseries = 'timeseries', @@ -833,6 +834,7 @@ export interface WidgetSize { export interface IWidgetSettingsComponent { aliasController: IAliasController; + callbacks: WidgetConfigCallbacks; dataKeyCallbacks: DataKeysCallbacks; dashboard: Dashboard; widget: Widget; @@ -851,6 +853,8 @@ export abstract class WidgetSettingsComponent extends PageComponent implements aliasController: IAliasController; + callbacks: WidgetConfigCallbacks; + dataKeyCallbacks: DataKeysCallbacks; dashboard: Dashboard; diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index 6734e1b2d6..c9cf8ef663 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -3432,6 +3432,7 @@ "export-symbol": "Export SCADA symbol to JSON", "import-symbol": "Import SCADA symbol from JSON", "upload-symbol": "Upload SCADA symbol", + "update-symbol": "Update SCADA symbol", "edit-symbol": "Edit SCADA symbol", "symbol-details": "SCADA symbol details", "no-symbols": "No symbols found", @@ -3446,6 +3447,8 @@ "tags": "Tags", "properties": "Properties", "title": "Title", + "description": "Description", + "search-tags": "Search tags", "state-render-function": "State render function", "preview": "Preview", "preview-widget-action-text": "Widget action '{{type}}' successfully invoked!", @@ -3453,6 +3456,8 @@ "no-symbol-selected": "No SCADA symbol selected", "clear-symbol": "Clear SCADA symbol", "browse-symbol-from-gallery": "Browse SCADA symbol from gallery", + "zoom-in": "Zoom In", + "zoom-out": "Zoom Out", "tag": { "tag": "Tag", "on-click-action": "On click action", diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss index d9346ce416..c1465ceb3c 100644 --- a/ui-ngx/src/styles.scss +++ b/ui-ngx/src/styles.scss @@ -461,156 +461,6 @@ mat-icon { } } -.tooltipster-sidetip.scada-symbol { - .tooltipster-box { - user-select: none; - background: rgba(0, 0, 0, 0.54); - border: 1px solid rgba(0, 0, 0, 0); - border-radius: 8px; - display: flex; - align-items: center; - .tooltipster-content { - padding: 4px 8px; - font-size: 12px; - line-height: 12px; - font-weight: 500; - color: #ffffff; - } - } - &.tb-active { - .tooltipster-box { - background: #fff; - border: 1px solid rgba(0, 0, 0, 0.38); - box-shadow: 0 0 10px 6px rgba(0, 0, 0, .2); - .tooltipster-content { - color: rgba(0, 0, 0, 0.76); - } - } - .tooltipster-arrow { - .tooltipster-arrow-uncropped { - .tooltipster-arrow-background { - border-width: 12px; - } - } - } - &.tooltipster-top { - .tooltipster-arrow { - bottom: -1px; - .tooltipster-arrow-uncropped { - .tooltipster-arrow-border { - border-top-color: rgba(0, 0, 0, 0.38); - } - .tooltipster-arrow-background { - border-top-color: #fff; - left: -2px; - } - } - } - } - &.tooltipster-bottom { - .tooltipster-arrow { - top: -1px; - .tooltipster-arrow-uncropped { - .tooltipster-arrow-border { - border-bottom-color: rgba(0, 0, 0, 0.38); - } - .tooltipster-arrow-background { - border-bottom-color: #fff; - left: -2px; - top: -1px; - } - } - } - } - &.tooltipster-left { - .tooltipster-arrow { - right: -1px; - .tooltipster-arrow-uncropped { - .tooltipster-arrow-border { - border-left-color: rgba(0, 0, 0, 0.38); - } - .tooltipster-arrow-background { - border-left-color: #fff; - top: -2px; - } - } - } - } - &.tooltipster-right { - .tooltipster-arrow { - left: -1px; - .tooltipster-arrow-uncropped { - .tooltipster-arrow-border { - border-right-color: rgba(0, 0, 0, 0.38); - } - .tooltipster-arrow-background { - border-right-color: #fff; - top: -2px; - left: -1px; - } - } - } - } - } - &.tooltipster-left, &.tooltipster-right { - .tooltipster-box { - min-height: 36px; - } - } - &.tooltipster-top { - .tooltipster-arrow { - bottom: -2px; - .tooltipster-arrow-uncropped { - .tooltipster-arrow-border { - border-top-color: rgba(0, 0, 0, 0.54); - } - .tooltipster-arrow-background { - border-top-color: transparent; - } - } - } - } - &.tooltipster-bottom { - .tooltipster-arrow { - top: -2px; - .tooltipster-arrow-uncropped { - .tooltipster-arrow-border { - border-bottom-color: rgba(0, 0, 0, 0.54); - } - .tooltipster-arrow-background { - border-bottom-color: transparent; - } - } - } - } - &.tooltipster-left { - .tooltipster-arrow { - right: -2px; - .tooltipster-arrow-uncropped { - .tooltipster-arrow-border { - border-left-color: rgba(0, 0, 0, 0.54); - } - .tooltipster-arrow-background { - border-left-color: transparent; - } - } - } - } - &.tooltipster-right { - .tooltipster-arrow { - left: -2px; - .tooltipster-arrow-uncropped { - .tooltipster-arrow-border { - border-right-color: rgba(0, 0, 0, 0.54); - } - .tooltipster-arrow-background { - border-right-color: transparent; - } - } - } - } -} - .tb-default, .tb-dark { /********************************* From 4d42ba3fe00459526c29d00b482a5afafee63054 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Fri, 7 Jun 2024 15:41:57 +0300 Subject: [PATCH 050/442] UI: Upload/Download SCADA symbol support. --- .../scada/scada-symbol-widget.component.ts | 8 ++- .../widget/lib/scada/scada-symbol.models.ts | 57 +++++++++++++++--- ...cada-symbol-object-settings.component.scss | 10 ++-- .../scada-symbol-object-settings.component.ts | 3 +- .../scada-symbol-editor.component.html | 2 + .../scada-symbol-editor.component.ts | 10 +++- .../scada-symbol-editor.models.ts | 58 +++++++++---------- .../scada-symbol/scada-symbol.component.html | 4 +- .../scada-symbol/scada-symbol.component.ts | 51 +++++++++++++++- .../image/image-dialog.component.ts | 12 ++-- .../image/image-gallery.component.ts | 12 ++-- .../image/upload-image-dialog.component.html | 2 +- .../image/upload-image-dialog.component.ts | 31 ++++++---- 13 files changed, 187 insertions(+), 73 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol-widget.component.ts index 92c5f08f3d..2f5136bf2a 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol-widget.component.ts @@ -131,8 +131,12 @@ export class ScadaSymbolWidgetComponent implements OnInit, AfterViewInit, OnDest content: string) { const simulated = this.ctx.utilsService.widgetEditMode || this.ctx.isPreview || (isDefinedAndNotNull(this.settings.simulated) ? this.settings.simulated : false); - this.scadaSymbolObject = new ScadaSymbolObject(rootElement, this.ctx, content, - this.settings.scadaSymbolObjectSettings, this, simulated); + if (content.startsWith(' ({ properties: [] }); +const svgPartsRegex = /()(.*)<\/svg>/gms; + +const tbNamespaceRegex = //gms; + +export const applyTbNamespaceToSvgContent = (svgContent: string): string => { + svgPartsRegex.lastIndex = 0; + let svgRootNode: string; + let innerSvg = ''; + let match = svgPartsRegex.exec(svgContent); + if (match != null) { + if (match.length > 1) { + svgRootNode = match[1]; + } + if (match.length > 2) { + innerSvg = match[2]; + } + } + if (!svgRootNode) { + throw new Error('Invalid SVG document.'); + } + tbNamespaceRegex.lastIndex = 0; + match = tbNamespaceRegex.exec(svgRootNode); + if (match === null || !match.length) { + svgRootNode = svgRootNode.slice(0, -1) + ' xmlns:tb="https://thingsboard.io/svg">'; + return `${svgRootNode}\n${innerSvg}\n`; + } + return svgContent; +}; export const parseScadaSymbolMetadataFromContent = (svgContent: string): ScadaSymbolMetadata => { try { + svgContent = applyTbNamespaceToSvgContent(svgContent); const svgDoc = new DOMParser().parseFromString(svgContent, 'image/svg+xml'); return parseScadaSymbolMetadataFromDom(svgDoc); } catch (_e) { @@ -216,13 +245,17 @@ const parseScadaSymbolMetadataFromDom = (svgDoc: Document): ScadaSymbolMetadata }; export const updateScadaSymbolMetadataInContent = (svgContent: string, metadata: ScadaSymbolMetadata): string => { + svgContent = applyTbNamespaceToSvgContent(svgContent); const svgDoc = new DOMParser().parseFromString(svgContent, 'image/svg+xml'); + const parsererror = svgDoc.getElementsByTagName('parsererror'); + if (parsererror?.length) { + return parsererror[0].outerHTML; + } updateScadaSymbolMetadataInDom(svgDoc, metadata); return svgDoc.documentElement.outerHTML; }; const updateScadaSymbolMetadataInDom = (svgDoc: Document, metadata: ScadaSymbolMetadata) => { - svgDoc.documentElement.setAttribute('xmlns:tb', 'https://thingsboard.io/svg'); let metadataElement: Node; const elements = svgDoc.getElementsByTagName('tb:metadata'); if (elements?.length) { @@ -237,7 +270,6 @@ const updateScadaSymbolMetadataInDom = (svgDoc: Document, metadata: ScadaSymbolM metadataElement.appendChild(cdata); }; -const svgPartsRegex = /()(.*)<\/svg>/gms; const tbMetadataRegex = /.*<\/tb:metadata>/gs; export interface ScadaSymbolContentData { @@ -389,6 +421,7 @@ export class ScadaSymbolObject { this.shapeResize$ = new ResizeObserver(() => { this.resize(); }); + this.svgContent = applyTbNamespaceToSvgContent(this.svgContent); const doc: XMLDocument = new DOMParser().parseFromString(this.svgContent, 'image/svg+xml'); this.metadata = parseScadaSymbolMetadataFromDom(doc); const defaults = defaultScadaSymbolObjectSettings(this.metadata); @@ -645,12 +678,22 @@ export class ScadaSymbolObject { } private renderState(): void { - this.metadata.stateRender(this.context, this.svgShape); + try { + this.metadata.stateRender(this.context, this.svgShape); + } catch (e) { + console.error(e); + } for (const tag of this.metadata.tags) { - const elements = this.context.tags[tag.tag];// this.svgShape.find(`[tb\\:tag="${tag.tag}"]`); - elements.forEach(element => { - tag.stateRender(this.context, element); - }); + const elements = this.context.tags[tag.tag]; + if (elements) { + elements.forEach(element => { + try { + tag.stateRender(this.context, element); + } catch (e) { + console.error(e); + } + }); + } } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.scss index 99b5c5df13..7f67f6ca37 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.scss @@ -13,8 +13,10 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -.tb-scada-symbol-appearance-properties { - gap: 16px; - display: flex; - flex-direction: column; +:host ::ng-deep { + .tb-scada-symbol-appearance-properties { + gap: 16px; + display: flex; + flex-direction: column; + } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.ts index 5048c53213..80f2ef8a74 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.ts @@ -72,8 +72,7 @@ import { map } from 'rxjs/operators'; useExisting: forwardRef(() => ScadaSymbolObjectSettingsComponent), multi: true } - ], - encapsulation: ViewEncapsulation.None + ] }) export class ScadaSymbolObjectSettingsComponent implements OnInit, OnChanges, ControlValueAccessor, Validator { diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.html index e2e272cda3..20cc6fb40e 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.html +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.html @@ -39,6 +39,7 @@
-
+
this.dashboardWidgets.sortWidgets(), @@ -530,7 +552,7 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo if (autofillHeight) { this.gridsterOpts.gridType = this.isMobileSize ? GridType.Fixed : GridType.Fit; } else { - this.gridsterOpts.gridType = this.isMobileSize ? GridType.Fixed : GridType.ScrollVertical; + this.gridsterOpts.gridType = this.isMobileSize ? GridType.Fixed : this.gridType || GridType.ScrollVertical; } const mobileBreakPoint = this.isMobileSize ? 20000 : 0; this.gridsterOpts.mobileBreakpoint = mobileBreakPoint; diff --git a/ui-ngx/src/app/modules/home/components/widget/config/target-device.component.html b/ui-ngx/src/app/modules/home/components/widget/config/target-device.component.html index ad2728484c..7adea38000 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/target-device.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/config/target-device.component.html @@ -24,13 +24,13 @@
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/target-device.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/target-device.component.ts index c1d09f50b6..58893cb2a7 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/target-device.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/config/target-device.component.ts @@ -60,6 +60,10 @@ export class TargetDeviceComponent implements ControlValueAccessor, OnInit, Vali return this.widgetConfigComponent.widgetConfigCallbacks; } + public get targetDeviceOptional(): boolean { + return this.widgetConfigComponent.modelValue?.typeParameters?.targetDeviceOptional; + } + targetDeviceType = TargetDeviceType; entityType = EntityType; @@ -103,9 +107,9 @@ export class TargetDeviceComponent implements ControlValueAccessor, OnInit, Vali ngOnInit() { this.targetDeviceFormGroup = this.fb.group({ - type: [null, !this.widgetEditMode ? [Validators.required] : []], - deviceId: [null, !this.widgetEditMode ? [Validators.required] : []], - entityAliasId: [null, !this.widgetEditMode ? [Validators.required] : []] + type: [null, (!this.widgetEditMode && !this.targetDeviceOptional) ? [Validators.required] : []], + deviceId: [null, (!this.widgetEditMode && !this.targetDeviceOptional) ? [Validators.required] : []], + entityAliasId: [null, (!this.widgetEditMode && !this.targetDeviceOptional) ? [Validators.required] : []] }); this.targetDeviceFormGroup.get('type').valueChanges.subscribe(() => { this.updateValidators(); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts index 75adedc16d..45f54b80df 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts @@ -177,6 +177,8 @@ export interface ScadaSymbolMetadata { title: string; description?: string; searchTags?: string[]; + widgetSizeX: number; + widgetSizeY: number; stateRenderFunction?: string; stateRender?: ScadaSymbolStateRenderFunction; tags: ScadaSymbolTag[]; @@ -186,6 +188,8 @@ export interface ScadaSymbolMetadata { export const emptyMetadata = (): ScadaSymbolMetadata => ({ title: '', + widgetSizeX: 3, + widgetSizeY: 3, tags: [], behavior: [], properties: [] @@ -443,12 +447,14 @@ export class ScadaSymbolObject { this.stateValueSubjects[stateValueId].unsubscribe(); } this.valueActions.forEach(v => v.destroy()); - for (const tag of this.metadata.tags) { - const elements = this.context.tags[tag.tag]; - elements.forEach(element => { - element.timeline().finish(); - element.timeline(null); - }); + if (this.context) { + for (const tag of this.metadata.tags) { + const elements = this.context.tags[tag.tag]; + elements.forEach(element => { + element.timeline().finish(); + element.timeline(null); + }); + } } if (this.svgShape) { this.svgShape.remove(); diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-component.service.ts b/ui-ngx/src/app/modules/home/components/widget/widget-component.service.ts index f1801561bd..ace991c6a6 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-component.service.ts +++ b/ui-ngx/src/app/modules/home/components/widget/widget-component.service.ts @@ -589,6 +589,9 @@ export class WidgetComponentService { if (isUndefined(result.typeParameters.displayRpcMessageToast)) { result.typeParameters.displayRpcMessageToast = true; } + if (isUndefined(result.typeParameters.targetDeviceOptional)) { + result.typeParameters.targetDeviceOptional = false; + } if (isFunction(widgetTypeInstance.actionSources)) { result.actionSources = widgetTypeInstance.actionSources(); } else { diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts index 2914ed4391..f4c2eb1fa8 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts @@ -962,7 +962,7 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, OnDe if (this.modelValue) { const config = this.modelValue.config; if (this.widgetType === widgetType.rpc && this.modelValue.isDataEnabled) { - if (!this.widgetEditMode && !targetDeviceValid(config.targetDevice)) { + if ((!this.widgetEditMode && !this.modelValue?.typeParameters.targetDeviceOptional) && !targetDeviceValid(config.targetDevice)) { return { targetDevice: { valid: false diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.html index fd92d16521..573ea27af0 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.html +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.html @@ -52,6 +52,23 @@
+
+
scada.widget-size
+
+
{{ 'scada.cols' | translate }}
+ + + +
{{ 'scada.rows' | translate }}
+ + + +
+
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.ts index 0d6e6771ce..db266f5a08 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.ts @@ -130,6 +130,8 @@ export class ScadaSymbolMetadataComponent extends PageComponent implements OnIni title: [null, [Validators.required]], description: [null], searchTags: [null], + widgetSizeX: [null, [Validators.min(1), Validators.max(24), Validators.required]], + widgetSizeY: [null, [Validators.min(1), Validators.max(24), Validators.required]], stateRenderFunction: [null], tags: [null], behavior: [null], @@ -176,6 +178,8 @@ export class ScadaSymbolMetadataComponent extends PageComponent implements OnIni title: value?.title, description: value?.description, searchTags: value?.searchTags, + widgetSizeX: value?.widgetSizeX || 3, + widgetSizeY: value?.widgetSizeY || 3, stateRenderFunction: value?.stateRenderFunction, tags: value?.tags, behavior: value?.behavior, diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html index e487201440..72792c835c 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html @@ -29,6 +29,13 @@ [showCloseDetails]="false" headerHeightPx="64" headerTitle="{{symbolData?.imageResource?.title}}"> +
+ +
diff --git a/ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.ts b/ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.ts index e5a0fa3712..3685b553ef 100644 --- a/ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.ts +++ b/ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.ts @@ -14,8 +14,8 @@ /// limitations under the License. /// -import { Component, OnInit } from '@angular/core'; -import { MatDialogRef } from '@angular/material/dialog'; +import { Component, Inject, OnInit } from '@angular/core'; +import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @@ -29,6 +29,12 @@ export interface SaveWidgetTypeAsDialogResult { widgetBundleId?: string; } +export interface SaveWidgetTypeAsDialogData { + dialogTitle?: string; + title?: string; + saveAsActionTitle?: string; +} + @Component({ selector: 'tb-save-widget-type-as-dialog', templateUrl: './save-widget-type-as-dialog.component.html', @@ -39,9 +45,12 @@ export class SaveWidgetTypeAsDialogComponent extends saveWidgetTypeAsFormGroup: FormGroup; bundlesScope: string; + dialogTitle = 'widget.save-widget-as'; + saveAsActionTitle = 'action.saveAs'; constructor(protected store: Store, protected router: Router, + @Inject(MAT_DIALOG_DATA) private data: SaveWidgetTypeAsDialogData, public dialogRef: MatDialogRef, public fb: FormBuilder) { super(store, router, dialogRef); @@ -52,11 +61,18 @@ export class SaveWidgetTypeAsDialogComponent extends } else { this.bundlesScope = 'system'; } + + if (this.data?.dialogTitle) { + this.dialogTitle = this.data.dialogTitle; + } + if (this.data?.saveAsActionTitle) { + this.saveAsActionTitle = this.data.saveAsActionTitle; + } } ngOnInit(): void { this.saveWidgetTypeAsFormGroup = this.fb.group({ - title: [null, [Validators.required]], + title: [this.data?.title, [Validators.required]], widgetsBundle: [null] }); } diff --git a/ui-ngx/src/app/shared/models/widget.models.ts b/ui-ngx/src/app/shared/models/widget.models.ts index 01a7e98215..3646f3cdc5 100644 --- a/ui-ngx/src/app/shared/models/widget.models.ts +++ b/ui-ngx/src/app/shared/models/widget.models.ts @@ -187,6 +187,7 @@ export interface WidgetTypeParameters { defaultLatestDataKeysFunction?: (configComponent: any, configData: any) => DataKey[]; dataKeySettingsFunction?: DataKeySettingsFunction; displayRpcMessageToast?: boolean; + targetDeviceOptional?: boolean; } export interface WidgetControllerDescriptor { diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index b922ff1b10..16822eb2a5 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -3455,6 +3455,9 @@ "title": "Title", "description": "Description", "search-tags": "Search tags", + "widget-size": "Widget size", + "cols": "cols", + "rows": "rows", "state-render-function": "State render function", "preview": "Preview", "preview-widget-action-text": "Widget action '{{type}}' successfully invoked!", @@ -3464,6 +3467,8 @@ "browse-symbol-from-gallery": "Browse SCADA symbol from gallery", "zoom-in": "Zoom In", "zoom-out": "Zoom Out", + "create-widget": "Create widget", + "create-widget-from-symbol": "Create widget from SCADA symbol", "tag": { "tag": "Tag", "on-click-action": "On click action", From f96d9c377a3cbf945e528c38fa627a63f8e9527f Mon Sep 17 00:00:00 2001 From: Sergey Matvienko Date: Mon, 10 Jun 2024 20:41:06 +0200 Subject: [PATCH 058/442] StatsPersistTick singleton enum implementation --- .../server/actors/shared/ComponentMsgProcessor.java | 2 +- .../org/thingsboard/server/actors/stats/StatsPersistTick.java | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/application/src/main/java/org/thingsboard/server/actors/shared/ComponentMsgProcessor.java b/application/src/main/java/org/thingsboard/server/actors/shared/ComponentMsgProcessor.java index 86e9fc6982..298874cc51 100644 --- a/application/src/main/java/org/thingsboard/server/actors/shared/ComponentMsgProcessor.java +++ b/application/src/main/java/org/thingsboard/server/actors/shared/ComponentMsgProcessor.java @@ -78,7 +78,7 @@ public abstract class ComponentMsgProcessor extends Abstract } public void scheduleStatsPersistTick(TbActorCtx context, long statsPersistFrequency) { - schedulePeriodicMsgWithDelay(context, new StatsPersistTick(), statsPersistFrequency, statsPersistFrequency); + schedulePeriodicMsgWithDelay(context, StatsPersistTick.INSTANCE, statsPersistFrequency, statsPersistFrequency); } protected boolean checkMsgValid(TbMsg tbMsg) { diff --git a/application/src/main/java/org/thingsboard/server/actors/stats/StatsPersistTick.java b/application/src/main/java/org/thingsboard/server/actors/stats/StatsPersistTick.java index 541da7494f..25271262b5 100644 --- a/application/src/main/java/org/thingsboard/server/actors/stats/StatsPersistTick.java +++ b/application/src/main/java/org/thingsboard/server/actors/stats/StatsPersistTick.java @@ -18,7 +18,9 @@ package org.thingsboard.server.actors.stats; import org.thingsboard.server.common.msg.MsgType; import org.thingsboard.server.common.msg.TbActorMsg; -public final class StatsPersistTick implements TbActorMsg { +public enum StatsPersistTick implements TbActorMsg { + INSTANCE; + @Override public MsgType getMsgType() { return MsgType.STATS_PERSIST_TICK_MSG; From 47ac4ae56aa723689106ec015b42e9fdbcd64534 Mon Sep 17 00:00:00 2001 From: Sergey Matvienko Date: Mon, 10 Jun 2024 20:44:49 +0200 Subject: [PATCH 059/442] TbLogNode optimization: skip processing with success when logger disabled during run-rime --- .../java/org/thingsboard/rule/engine/action/TbLogNode.java | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/rule-engine/rule-engine-components/src/main/java/org/thingsboard/rule/engine/action/TbLogNode.java b/rule-engine/rule-engine-components/src/main/java/org/thingsboard/rule/engine/action/TbLogNode.java index d00b287cef..6b07d41a42 100644 --- a/rule-engine/rule-engine-components/src/main/java/org/thingsboard/rule/engine/action/TbLogNode.java +++ b/rule-engine/rule-engine-components/src/main/java/org/thingsboard/rule/engine/action/TbLogNode.java @@ -67,6 +67,10 @@ public class TbLogNode implements TbNode { @Override public void onMsg(TbContext ctx, TbMsg msg) { + if (!log.isInfoEnabled()) { + ctx.tellSuccess(msg); + return; + } if (standard) { logStandard(ctx, msg); return; From b666f9499ae0d7d41817edce15ff3fd7993dfe3f Mon Sep 17 00:00:00 2001 From: YevhenBondarenko Date: Tue, 11 Jun 2024 15:41:33 +0200 Subject: [PATCH 060/442] added sequence number for attributes --- .../server/controller/DeviceController.java | 4 +- .../DefaultTelemetrySubscriptionService.java | 2 +- .../dao/timeseries/TimeseriesService.java | 2 +- .../common/data/util/CollectionsUtil.java | 8 + .../dao/AbstractSequenceInsertRepository.java | 128 ++++++++++ .../server/dao/sql/TbSqlBlockingQueue.java | 47 ++-- .../dao/sql/TbSqlBlockingQueueParams.java | 1 + .../dao/sql/TbSqlBlockingQueueWrapper.java | 15 +- .../server/dao/sql/TbSqlQueue.java | 8 +- .../server/dao/sql/TbSqlQueueElement.java | 6 +- .../AttributeKvInsertRepository.java | 226 +++++++----------- .../dao/sql/attributes/JpaAttributeDao.java | 5 +- .../SqlAttributesInsertRepository.java | 27 --- .../dao/sql/edge/JpaBaseEdgeEventDao.java | 2 +- .../server/dao/sql/event/JpaBaseEventDao.java | 2 +- ...stractChunkedAggregationTimeseriesDao.java | 2 +- .../dao/sqlts/SqlTimeseriesLatestDao.java | 36 +-- .../sql/SqlLatestInsertTsRepository.java | 224 ++++++----------- .../timescale/TimescaleTimeseriesDao.java | 8 +- .../dao/timeseries/BaseTimeseriesService.java | 4 +- .../CassandraBaseTimeseriesLatestDao.java | 2 +- .../dao/timeseries/TimeseriesLatestDao.java | 2 +- .../main/resources/sql/schema-entities.sql | 3 + 23 files changed, 382 insertions(+), 382 deletions(-) create mode 100644 dao/src/main/java/org/thingsboard/server/dao/AbstractSequenceInsertRepository.java delete mode 100644 dao/src/main/java/org/thingsboard/server/dao/sql/attributes/SqlAttributesInsertRepository.java diff --git a/application/src/main/java/org/thingsboard/server/controller/DeviceController.java b/application/src/main/java/org/thingsboard/server/controller/DeviceController.java index fedbd48503..8544f60ca0 100644 --- a/application/src/main/java/org/thingsboard/server/controller/DeviceController.java +++ b/application/src/main/java/org/thingsboard/server/controller/DeviceController.java @@ -20,6 +20,7 @@ import com.google.common.util.concurrent.Futures; import com.google.common.util.concurrent.ListenableFuture; import com.google.common.util.concurrent.MoreExecutors; import io.swagger.v3.oas.annotations.Parameter; +import io.swagger.v3.oas.annotations.media.ArraySchema; import io.swagger.v3.oas.annotations.media.Content; import io.swagger.v3.oas.annotations.media.Schema; import io.swagger.v3.oas.annotations.responses.ApiResponse; @@ -30,6 +31,7 @@ import org.springframework.http.HttpStatus; import org.springframework.http.MediaType; import org.springframework.http.ResponseEntity; import org.springframework.security.access.prepost.PreAuthorize; +import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestBody; @@ -488,7 +490,7 @@ public class DeviceController extends BaseController { @RequestMapping(value = "/devices", params = {"deviceIds"}, method = RequestMethod.GET) @ResponseBody public List getDevicesByIds( - @Parameter(description = "A list of devices ids, separated by comma ','") + @Parameter(description = "A list of devices ids, separated by comma ','", array = @ArraySchema(schema = @Schema(type = "string"))) @RequestParam("deviceIds") String[] strDeviceIds) throws ThingsboardException, ExecutionException, InterruptedException { checkArrayParameter("deviceIds", strDeviceIds); SecurityUser user = getCurrentUser(); diff --git a/application/src/main/java/org/thingsboard/server/service/telemetry/DefaultTelemetrySubscriptionService.java b/application/src/main/java/org/thingsboard/server/service/telemetry/DefaultTelemetrySubscriptionService.java index b19fde2983..3aace70533 100644 --- a/application/src/main/java/org/thingsboard/server/service/telemetry/DefaultTelemetrySubscriptionService.java +++ b/application/src/main/java/org/thingsboard/server/service/telemetry/DefaultTelemetrySubscriptionService.java @@ -280,7 +280,7 @@ public class DefaultTelemetrySubscriptionService extends AbstractSubscriptionSer @Override public void saveLatestAndNotifyInternal(TenantId tenantId, EntityId entityId, List ts, FutureCallback callback) { - ListenableFuture> saveFuture = tsService.saveLatest(tenantId, entityId, ts); + ListenableFuture> saveFuture = tsService.saveLatest(tenantId, entityId, ts); addVoidCallback(saveFuture, callback); addWsCallback(saveFuture, success -> onTimeSeriesUpdate(tenantId, entityId, ts)); } diff --git a/common/dao-api/src/main/java/org/thingsboard/server/dao/timeseries/TimeseriesService.java b/common/dao-api/src/main/java/org/thingsboard/server/dao/timeseries/TimeseriesService.java index ffea217da7..eaba144042 100644 --- a/common/dao-api/src/main/java/org/thingsboard/server/dao/timeseries/TimeseriesService.java +++ b/common/dao-api/src/main/java/org/thingsboard/server/dao/timeseries/TimeseriesService.java @@ -50,7 +50,7 @@ public interface TimeseriesService { ListenableFuture saveWithoutLatest(TenantId tenantId, EntityId entityId, List tsKvEntry, long ttl); - ListenableFuture> saveLatest(TenantId tenantId, EntityId entityId, List tsKvEntry); + ListenableFuture> saveLatest(TenantId tenantId, EntityId entityId, List tsKvEntry); ListenableFuture> remove(TenantId tenantId, EntityId entityId, List queries); diff --git a/common/data/src/main/java/org/thingsboard/server/common/data/util/CollectionsUtil.java b/common/data/src/main/java/org/thingsboard/server/common/data/util/CollectionsUtil.java index 4c9006e829..e89f3c1ad8 100644 --- a/common/data/src/main/java/org/thingsboard/server/common/data/util/CollectionsUtil.java +++ b/common/data/src/main/java/org/thingsboard/server/common/data/util/CollectionsUtil.java @@ -17,6 +17,7 @@ package org.thingsboard.server.common.data.util; import java.util.Collection; import java.util.HashMap; +import java.util.List; import java.util.Map; import java.util.Set; import java.util.stream.Collectors; @@ -37,6 +38,13 @@ public class CollectionsUtil { return b.stream().filter(p -> !a.contains(p)).collect(Collectors.toSet()); } + /** + * Returns new list with elements that are present in list B(new) but absent in list A(old). + */ + public static List diffLists(List a, List b) { + return b.stream().filter(p -> !a.contains(p)).collect(Collectors.toList()); + } + public static boolean contains(Collection collection, T element) { return isNotEmpty(collection) && collection.contains(element); } diff --git a/dao/src/main/java/org/thingsboard/server/dao/AbstractSequenceInsertRepository.java b/dao/src/main/java/org/thingsboard/server/dao/AbstractSequenceInsertRepository.java new file mode 100644 index 0000000000..0808f5341f --- /dev/null +++ b/dao/src/main/java/org/thingsboard/server/dao/AbstractSequenceInsertRepository.java @@ -0,0 +1,128 @@ +/** + * Copyright ยฉ 2016-2024 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. + */ +package org.thingsboard.server.dao; + +import org.springframework.jdbc.core.BatchPreparedStatementSetter; +import org.springframework.jdbc.core.PreparedStatementCreator; +import org.springframework.jdbc.core.SqlProvider; +import org.springframework.jdbc.support.GeneratedKeyHolder; +import org.springframework.jdbc.support.KeyHolder; +import org.thingsboard.server.dao.sqlts.insert.AbstractInsertRepository; + +import java.sql.Connection; +import java.sql.PreparedStatement; +import java.sql.SQLException; +import java.util.ArrayList; +import java.util.List; +import java.util.Map; + +public abstract class AbstractSequenceInsertRepository extends AbstractInsertRepository { + + public static final String SEQ_NUMBER = "seq_number"; + + public List saveOrUpdate(List entities) { + return transactionTemplate.execute(status -> { + List seqNumbers = new ArrayList<>(entities.size()); + + KeyHolder keyHolder = new GeneratedKeyHolder(); + + int[] updateResult = onBatchUpdate(entities, keyHolder); + + List> seqNumbersList = keyHolder.getKeyList(); + + int notUpdatedCount = entities.size() - seqNumbersList.size(); + + List toInsertIndexes = new ArrayList<>(notUpdatedCount); + List insertEntities = new ArrayList<>(notUpdatedCount); + int keyHolderIndex = 0; + for (int i = 0; i < updateResult.length; i++) { + if (updateResult[i] == 0) { + insertEntities.add(entities.get(i)); + seqNumbers.add(0L); + toInsertIndexes.add(i); + } else { + seqNumbers.add((Long) seqNumbersList.get(keyHolderIndex).get(SEQ_NUMBER)); + keyHolderIndex++; + } + } + + if (insertEntities.isEmpty()) { + return seqNumbers; + } + + onInsertOrUpdate(insertEntities, keyHolder); + + seqNumbersList = keyHolder.getKeyList(); + + for (int i = 0; i < seqNumbersList.size(); i++) { + seqNumbers.set(toInsertIndexes.get(i), (Long) seqNumbersList.get(i).get(SEQ_NUMBER)); + } + + return seqNumbers; + }); + } + + private int[] onBatchUpdate(List entities, KeyHolder keyHolder) { + return jdbcTemplate.batchUpdate(new SequencePreparedStatementCreator(getBatchUpdateQuery()), new BatchPreparedStatementSetter() { + @Override + public void setValues(PreparedStatement ps, int i) throws SQLException { + setOnBatchUpdateValues(ps, i, entities); + } + + @Override + public int getBatchSize() { + return entities.size(); + } + }, keyHolder); + } + + private void onInsertOrUpdate(List insertEntities, KeyHolder keyHolder) { + jdbcTemplate.batchUpdate(new SequencePreparedStatementCreator(getInsertOrUpdateQuery()), new BatchPreparedStatementSetter() { + @Override + public void setValues(PreparedStatement ps, int i) throws SQLException { + setOnInsertOrUpdateValues(ps, i, insertEntities); + } + + @Override + public int getBatchSize() { + return insertEntities.size(); + } + }, keyHolder); + } + + protected abstract void setOnBatchUpdateValues(PreparedStatement ps, int i, List entities) throws SQLException; + + protected abstract void setOnInsertOrUpdateValues(PreparedStatement ps, int i, List entities) throws SQLException; + + protected abstract String getBatchUpdateQuery(); + + protected abstract String getInsertOrUpdateQuery(); + + private record SequencePreparedStatementCreator(String sql) implements PreparedStatementCreator, SqlProvider { + + private static final String[] COLUMNS = {SEQ_NUMBER}; + + @Override + public PreparedStatement createPreparedStatement(Connection con) throws SQLException { + return con.prepareStatement(sql, COLUMNS); + } + + @Override + public String getSql() { + return this.sql; + } + } +} diff --git a/dao/src/main/java/org/thingsboard/server/dao/sql/TbSqlBlockingQueue.java b/dao/src/main/java/org/thingsboard/server/dao/sql/TbSqlBlockingQueue.java index 8f580811a1..68221ad0ae 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/sql/TbSqlBlockingQueue.java +++ b/dao/src/main/java/org/thingsboard/server/dao/sql/TbSqlBlockingQueue.java @@ -19,6 +19,7 @@ import com.google.common.util.concurrent.ListenableFuture; import com.google.common.util.concurrent.SettableFuture; import lombok.extern.slf4j.Slf4j; import org.thingsboard.common.util.ThingsBoardThreadFactory; +import org.thingsboard.server.common.data.util.CollectionsUtil; import org.thingsboard.server.common.stats.MessagesStats; import java.util.ArrayList; @@ -29,14 +30,13 @@ import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; import java.util.concurrent.LinkedBlockingQueue; import java.util.concurrent.TimeUnit; -import java.util.function.Consumer; +import java.util.function.Function; import java.util.stream.Collectors; -import java.util.stream.Stream; @Slf4j -public class TbSqlBlockingQueue implements TbSqlQueue { +public class TbSqlBlockingQueue implements TbSqlQueue { - private final BlockingQueue> queue = new LinkedBlockingQueue<>(); + private final BlockingQueue> queue = new LinkedBlockingQueue<>(); private final TbSqlBlockingQueueParams params; private ExecutorService executor; @@ -48,17 +48,17 @@ public class TbSqlBlockingQueue implements TbSqlQueue { } @Override - public void init(ScheduledLogExecutorComponent logExecutor, Consumer> saveFunction, Comparator batchUpdateComparator, int index) { + public void init(ScheduledLogExecutorComponent logExecutor, Function, List> saveFunction, Comparator batchUpdateComparator, Function>, List>> filter, int index) { executor = Executors.newSingleThreadExecutor(ThingsBoardThreadFactory.forName("sql-queue-" + index + "-" + params.getLogName().toLowerCase())); executor.submit(() -> { String logName = params.getLogName(); int batchSize = params.getBatchSize(); long maxDelay = params.getMaxDelay(); - final List> entities = new ArrayList<>(batchSize); + final List> entities = new ArrayList<>(batchSize); while (!Thread.interrupted()) { try { long currentTs = System.currentTimeMillis(); - TbSqlQueueElement attr = queue.poll(maxDelay, TimeUnit.MILLISECONDS); + TbSqlQueueElement attr = queue.poll(maxDelay, TimeUnit.MILLISECONDS); if (attr == null) { continue; } else { @@ -70,12 +70,27 @@ public class TbSqlBlockingQueue implements TbSqlQueue { log.debug("[{}] Going to save {} entities", logName, entities.size()); log.trace("[{}] Going to save entities: {}", logName, entities); } - Stream entitiesStream = entities.stream().map(TbSqlQueueElement::getEntity); - saveFunction.accept( - (params.isBatchSortEnabled() ? entitiesStream.sorted(batchUpdateComparator) : entitiesStream) - .collect(Collectors.toList()) - ); - entities.forEach(v -> v.getFuture().set(null)); + + List> entitiesToSave = filter.apply(entities); + + if (params.isBatchSortEnabled()) { + entitiesToSave = entitiesToSave.stream().sorted((o1, o2) -> batchUpdateComparator.compare(o1.getEntity(), o2.getEntity())).toList(); + } + + List result = saveFunction.apply(entitiesToSave.stream().map(TbSqlQueueElement::getEntity).collect(Collectors.toList())); + + if (params.isWithResponse()) { + for (int i = 0; i < entitiesToSave.size(); i++) { + entitiesToSave.get(i).getFuture().set(result.get(i)); + } + + if (entities.size() > entitiesToSave.size()) { + CollectionsUtil.diffLists(entitiesToSave, entities).forEach(v -> v.getFuture().set(null)); + } + } else { + entities.forEach(v -> v.getFuture().set(null)); + } + stats.incrementSuccessful(entities.size()); if (!fullPack) { long remainingDelay = maxDelay - (System.currentTimeMillis() - currentTs); @@ -104,7 +119,7 @@ public class TbSqlBlockingQueue implements TbSqlQueue { }); logExecutor.scheduleAtFixedRate(() -> { - if (queue.size() > 0 || stats.getTotal() > 0 || stats.getSuccessful() > 0 || stats.getFailed() > 0) { + if (!queue.isEmpty() || stats.getTotal() > 0 || stats.getSuccessful() > 0 || stats.getFailed() > 0) { log.info("Queue-{} [{}] queueSize [{}] totalAdded [{}] totalSaved [{}] totalFailed [{}]", index, params.getLogName(), queue.size(), stats.getTotal(), stats.getSuccessful(), stats.getFailed()); stats.reset(); @@ -120,8 +135,8 @@ public class TbSqlBlockingQueue implements TbSqlQueue { } @Override - public ListenableFuture add(E element) { - SettableFuture future = SettableFuture.create(); + public ListenableFuture add(E element) { + SettableFuture future = SettableFuture.create(); queue.add(new TbSqlQueueElement<>(future, element)); stats.incrementTotal(); return future; diff --git a/dao/src/main/java/org/thingsboard/server/dao/sql/TbSqlBlockingQueueParams.java b/dao/src/main/java/org/thingsboard/server/dao/sql/TbSqlBlockingQueueParams.java index 56b7ad3af7..42ab6be049 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/sql/TbSqlBlockingQueueParams.java +++ b/dao/src/main/java/org/thingsboard/server/dao/sql/TbSqlBlockingQueueParams.java @@ -30,4 +30,5 @@ public class TbSqlBlockingQueueParams { private final long statsPrintIntervalMs; private final String statsNamePrefix; private final boolean batchSortEnabled; + private final boolean withResponse; } diff --git a/dao/src/main/java/org/thingsboard/server/dao/sql/TbSqlBlockingQueueWrapper.java b/dao/src/main/java/org/thingsboard/server/dao/sql/TbSqlBlockingQueueWrapper.java index 9c5bbbc855..3e9620de76 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/sql/TbSqlBlockingQueueWrapper.java +++ b/dao/src/main/java/org/thingsboard/server/dao/sql/TbSqlBlockingQueueWrapper.java @@ -29,10 +29,9 @@ import java.util.function.Function; @Slf4j @Data -public class TbSqlBlockingQueueWrapper { - private final CopyOnWriteArrayList> queues = new CopyOnWriteArrayList<>(); +public class TbSqlBlockingQueueWrapper { + private final CopyOnWriteArrayList> queues = new CopyOnWriteArrayList<>(); private final TbSqlBlockingQueueParams params; - private ScheduledLogExecutorComponent logExecutor; private final Function hashCodeFunction; private final int maxThreads; private final StatsFactory statsFactory; @@ -46,15 +45,19 @@ public class TbSqlBlockingQueueWrapper { * NOTE: you must use all of primary key parts in your comparator */ public void init(ScheduledLogExecutorComponent logExecutor, Consumer> saveFunction, Comparator batchUpdateComparator) { + init(logExecutor, l -> { saveFunction.accept(l); return null; }, batchUpdateComparator, l -> l); + } + + public void init(ScheduledLogExecutorComponent logExecutor, Function, List> saveFunction, Comparator batchUpdateComparator, Function>, List>> filter) { for (int i = 0; i < maxThreads; i++) { MessagesStats stats = statsFactory.createMessagesStats(params.getStatsNamePrefix() + ".queue." + i); - TbSqlBlockingQueue queue = new TbSqlBlockingQueue<>(params, stats); + TbSqlBlockingQueue queue = new TbSqlBlockingQueue<>(params, stats); queues.add(queue); - queue.init(logExecutor, saveFunction, batchUpdateComparator, i); + queue.init(logExecutor, saveFunction, batchUpdateComparator, filter, i); } } - public ListenableFuture add(E element) { + public ListenableFuture add(E element) { int queueIndex = element != null ? (hashCodeFunction.apply(element) & 0x7FFFFFFF) % maxThreads : 0; return queues.get(queueIndex).add(element); } diff --git a/dao/src/main/java/org/thingsboard/server/dao/sql/TbSqlQueue.java b/dao/src/main/java/org/thingsboard/server/dao/sql/TbSqlQueue.java index 90b4e0fe67..e1ed8c299c 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/sql/TbSqlQueue.java +++ b/dao/src/main/java/org/thingsboard/server/dao/sql/TbSqlQueue.java @@ -19,13 +19,13 @@ import com.google.common.util.concurrent.ListenableFuture; import java.util.Comparator; import java.util.List; -import java.util.function.Consumer; +import java.util.function.Function; -public interface TbSqlQueue { +public interface TbSqlQueue { - void init(ScheduledLogExecutorComponent logExecutor, Consumer> saveFunction, Comparator batchUpdateComparator, int queueIndex); + void init(ScheduledLogExecutorComponent logExecutor, Function, List> saveFunction, Comparator batchUpdateComparator, Function>, List>> filter, int queueIndex); void destroy(); - ListenableFuture add(E element); + ListenableFuture add(E element); } diff --git a/dao/src/main/java/org/thingsboard/server/dao/sql/TbSqlQueueElement.java b/dao/src/main/java/org/thingsboard/server/dao/sql/TbSqlQueueElement.java index 15031be244..016c5c9527 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/sql/TbSqlQueueElement.java +++ b/dao/src/main/java/org/thingsboard/server/dao/sql/TbSqlQueueElement.java @@ -20,13 +20,13 @@ import lombok.Getter; import lombok.ToString; @ToString(exclude = "future") -public final class TbSqlQueueElement { +public final class TbSqlQueueElement { @Getter - private final SettableFuture future; + private final SettableFuture future; @Getter private final E entity; - public TbSqlQueueElement(SettableFuture future, E entity) { + public TbSqlQueueElement(SettableFuture future, E entity) { this.future = future; this.entity = entity; } diff --git a/dao/src/main/java/org/thingsboard/server/dao/sql/attributes/AttributeKvInsertRepository.java b/dao/src/main/java/org/thingsboard/server/dao/sql/attributes/AttributeKvInsertRepository.java index 856b2be381..9e188d39b1 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/sql/attributes/AttributeKvInsertRepository.java +++ b/dao/src/main/java/org/thingsboard/server/dao/sql/attributes/AttributeKvInsertRepository.java @@ -15,162 +15,110 @@ */ package org.thingsboard.server.dao.sql.attributes; -import lombok.extern.slf4j.Slf4j; -import org.springframework.beans.factory.annotation.Autowired; -import org.springframework.beans.factory.annotation.Value; -import org.springframework.jdbc.core.BatchPreparedStatementSetter; -import org.springframework.jdbc.core.JdbcTemplate; import org.springframework.stereotype.Repository; -import org.springframework.transaction.TransactionStatus; -import org.springframework.transaction.support.TransactionCallbackWithoutResult; -import org.springframework.transaction.support.TransactionTemplate; +import org.springframework.transaction.annotation.Transactional; +import org.thingsboard.server.dao.AbstractSequenceInsertRepository; import org.thingsboard.server.dao.model.sql.AttributeKvEntity; import org.thingsboard.server.dao.util.SqlDao; import java.sql.PreparedStatement; import java.sql.SQLException; import java.sql.Types; -import java.util.ArrayList; import java.util.List; -import java.util.regex.Pattern; @Repository -@Slf4j +@Transactional @SqlDao -public abstract class AttributeKvInsertRepository { +public class AttributeKvInsertRepository extends AbstractSequenceInsertRepository { - private static final ThreadLocal PATTERN_THREAD_LOCAL = ThreadLocal.withInitial(() -> Pattern.compile(String.valueOf(Character.MIN_VALUE))); - private static final String EMPTY_STR = ""; - - private static final String BATCH_UPDATE = "UPDATE attribute_kv SET str_v = ?, long_v = ?, dbl_v = ?, bool_v = ?, json_v = cast(? AS json), last_update_ts = ? " + - "WHERE entity_id = ? and attribute_type =? and attribute_key = ?;"; + private static final String BATCH_UPDATE = "UPDATE attribute_kv SET str_v = ?, long_v = ?, dbl_v = ?, bool_v = ?, json_v = cast(? AS json), last_update_ts = ?, seq_number = nextval('attribute_kv_latest_seq') " + + "WHERE entity_id = ? and attribute_type =? and attribute_key = ? RETURNING seq_number;"; private static final String INSERT_OR_UPDATE = - "INSERT INTO attribute_kv (entity_id, attribute_type, attribute_key, str_v, long_v, dbl_v, bool_v, json_v, last_update_ts) " + - "VALUES(?, ?, ?, ?, ?, ?, ?, cast(? AS json), ?) " + + "INSERT INTO attribute_kv (entity_id, attribute_type, attribute_key, str_v, long_v, dbl_v, bool_v, json_v, last_update_ts, seq_number) " + + "VALUES(?, ?, ?, ?, ?, ?, ?, cast(? AS json), ?, nextval('attribute_kv_latest_seq')) " + "ON CONFLICT (entity_id, attribute_type, attribute_key) " + - "DO UPDATE SET str_v = ?, long_v = ?, dbl_v = ?, bool_v = ?, json_v = cast(? AS json), last_update_ts = ?;"; - - @Autowired - protected JdbcTemplate jdbcTemplate; - - @Autowired - private TransactionTemplate transactionTemplate; - - @Value("${sql.remove_null_chars:true}") - private boolean removeNullChars; - - public void saveOrUpdate(List entities) { - transactionTemplate.execute(new TransactionCallbackWithoutResult() { - @Override - protected void doInTransactionWithoutResult(TransactionStatus status) { - int[] result = jdbcTemplate.batchUpdate(BATCH_UPDATE, new BatchPreparedStatementSetter() { - @Override - public void setValues(PreparedStatement ps, int i) throws SQLException { - AttributeKvEntity kvEntity = entities.get(i); - ps.setString(1, replaceNullChars(kvEntity.getStrValue())); - - if (kvEntity.getLongValue() != null) { - ps.setLong(2, kvEntity.getLongValue()); - } else { - ps.setNull(2, Types.BIGINT); - } - - if (kvEntity.getDoubleValue() != null) { - ps.setDouble(3, kvEntity.getDoubleValue()); - } else { - ps.setNull(3, Types.DOUBLE); - } - - if (kvEntity.getBooleanValue() != null) { - ps.setBoolean(4, kvEntity.getBooleanValue()); - } else { - ps.setNull(4, Types.BOOLEAN); - } - - ps.setString(5, replaceNullChars(kvEntity.getJsonValue())); - - ps.setLong(6, kvEntity.getLastUpdateTs()); - ps.setObject(7, kvEntity.getId().getEntityId()); - ps.setInt(8, kvEntity.getId().getAttributeType()); - ps.setInt(9, kvEntity.getId().getAttributeKey()); - } - - @Override - public int getBatchSize() { - return entities.size(); - } - }); - - int updatedCount = 0; - for (int i = 0; i < result.length; i++) { - if (result[i] == 0) { - updatedCount++; - } - } - - List insertEntities = new ArrayList<>(updatedCount); - for (int i = 0; i < result.length; i++) { - if (result[i] == 0) { - insertEntities.add(entities.get(i)); - } - } - - jdbcTemplate.batchUpdate(INSERT_OR_UPDATE, new BatchPreparedStatementSetter() { - @Override - public void setValues(PreparedStatement ps, int i) throws SQLException { - AttributeKvEntity kvEntity = insertEntities.get(i); - ps.setObject(1, kvEntity.getId().getEntityId()); - ps.setInt(2, kvEntity.getId().getAttributeType()); - ps.setInt(3, kvEntity.getId().getAttributeKey()); - - ps.setString(4, replaceNullChars(kvEntity.getStrValue())); - ps.setString(10, replaceNullChars(kvEntity.getStrValue())); - - if (kvEntity.getLongValue() != null) { - ps.setLong(5, kvEntity.getLongValue()); - ps.setLong(11, kvEntity.getLongValue()); - } else { - ps.setNull(5, Types.BIGINT); - ps.setNull(11, Types.BIGINT); - } - - if (kvEntity.getDoubleValue() != null) { - ps.setDouble(6, kvEntity.getDoubleValue()); - ps.setDouble(12, kvEntity.getDoubleValue()); - } else { - ps.setNull(6, Types.DOUBLE); - ps.setNull(12, Types.DOUBLE); - } - - if (kvEntity.getBooleanValue() != null) { - ps.setBoolean(7, kvEntity.getBooleanValue()); - ps.setBoolean(13, kvEntity.getBooleanValue()); - } else { - ps.setNull(7, Types.BOOLEAN); - ps.setNull(13, Types.BOOLEAN); - } - - ps.setString(8, replaceNullChars(kvEntity.getJsonValue())); - ps.setString(14, replaceNullChars(kvEntity.getJsonValue())); - - ps.setLong(9, kvEntity.getLastUpdateTs()); - ps.setLong(15, kvEntity.getLastUpdateTs()); - } - - @Override - public int getBatchSize() { - return insertEntities.size(); - } - }); - } - }); + "DO UPDATE SET str_v = ?, long_v = ?, dbl_v = ?, bool_v = ?, json_v = cast(? AS json), last_update_ts = ?, seq_number = nextval('attribute_kv_latest_seq') RETURNING seq_number;"; + + @Override + protected void setOnBatchUpdateValues(PreparedStatement ps, int i, List entities) throws SQLException { + AttributeKvEntity kvEntity = entities.get(i); + ps.setString(1, replaceNullChars(kvEntity.getStrValue())); + + if (kvEntity.getLongValue() != null) { + ps.setLong(2, kvEntity.getLongValue()); + } else { + ps.setNull(2, Types.BIGINT); + } + + if (kvEntity.getDoubleValue() != null) { + ps.setDouble(3, kvEntity.getDoubleValue()); + } else { + ps.setNull(3, Types.DOUBLE); + } + + if (kvEntity.getBooleanValue() != null) { + ps.setBoolean(4, kvEntity.getBooleanValue()); + } else { + ps.setNull(4, Types.BOOLEAN); + } + + ps.setString(5, replaceNullChars(kvEntity.getJsonValue())); + + ps.setLong(6, kvEntity.getLastUpdateTs()); + ps.setObject(7, kvEntity.getId().getEntityId()); + ps.setInt(8, kvEntity.getId().getAttributeType()); + ps.setInt(9, kvEntity.getId().getAttributeKey()); } - private String replaceNullChars(String strValue) { - if (removeNullChars && strValue != null) { - return PATTERN_THREAD_LOCAL.get().matcher(strValue).replaceAll(EMPTY_STR); + @Override + protected void setOnInsertOrUpdateValues(PreparedStatement ps, int i, List insertEntities) throws SQLException { + AttributeKvEntity kvEntity = insertEntities.get(i); + ps.setObject(1, kvEntity.getId().getEntityId()); + ps.setInt(2, kvEntity.getId().getAttributeType()); + ps.setInt(3, kvEntity.getId().getAttributeKey()); + + ps.setString(4, replaceNullChars(kvEntity.getStrValue())); + ps.setString(10, replaceNullChars(kvEntity.getStrValue())); + + if (kvEntity.getLongValue() != null) { + ps.setLong(5, kvEntity.getLongValue()); + ps.setLong(11, kvEntity.getLongValue()); + } else { + ps.setNull(5, Types.BIGINT); + ps.setNull(11, Types.BIGINT); } - return strValue; + + if (kvEntity.getDoubleValue() != null) { + ps.setDouble(6, kvEntity.getDoubleValue()); + ps.setDouble(12, kvEntity.getDoubleValue()); + } else { + ps.setNull(6, Types.DOUBLE); + ps.setNull(12, Types.DOUBLE); + } + + if (kvEntity.getBooleanValue() != null) { + ps.setBoolean(7, kvEntity.getBooleanValue()); + ps.setBoolean(13, kvEntity.getBooleanValue()); + } else { + ps.setNull(7, Types.BOOLEAN); + ps.setNull(13, Types.BOOLEAN); + } + + ps.setString(8, replaceNullChars(kvEntity.getJsonValue())); + ps.setString(14, replaceNullChars(kvEntity.getJsonValue())); + + ps.setLong(9, kvEntity.getLastUpdateTs()); + ps.setLong(15, kvEntity.getLastUpdateTs()); + } + + @Override + protected String getBatchUpdateQuery() { + return BATCH_UPDATE; + } + + @Override + protected String getInsertOrUpdateQuery() { + return INSERT_OR_UPDATE; } } \ No newline at end of file diff --git a/dao/src/main/java/org/thingsboard/server/dao/sql/attributes/JpaAttributeDao.java b/dao/src/main/java/org/thingsboard/server/dao/sql/attributes/JpaAttributeDao.java index 320e0e67fb..d8b4a9fedf 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/sql/attributes/JpaAttributeDao.java +++ b/dao/src/main/java/org/thingsboard/server/dao/sql/attributes/JpaAttributeDao.java @@ -88,7 +88,7 @@ public class JpaAttributeDao extends JpaAbstractDaoListeningExecutorService impl @Value("${sql.batch_sort:true}") private boolean batchSortEnabled; - private TbSqlBlockingQueueWrapper queue; + private TbSqlBlockingQueueWrapper queue; @PostConstruct private void init() { @@ -99,6 +99,7 @@ public class JpaAttributeDao extends JpaAbstractDaoListeningExecutorService impl .statsPrintIntervalMs(statsPrintIntervalMs) .statsNamePrefix("attributes") .batchSortEnabled(batchSortEnabled) + .withResponse(true) .build(); Function hashcodeFunction = entity -> entity.getId().getEntityId().hashCode(); @@ -106,7 +107,7 @@ public class JpaAttributeDao extends JpaAbstractDaoListeningExecutorService impl queue.init(logExecutor, v -> attributeKvInsertRepository.saveOrUpdate(v), Comparator.comparing((AttributeKvEntity attributeKvEntity) -> attributeKvEntity.getId().getEntityId()) .thenComparing(attributeKvEntity -> attributeKvEntity.getId().getAttributeType()) - .thenComparing(attributeKvEntity -> attributeKvEntity.getId().getAttributeKey()) + .thenComparing(attributeKvEntity -> attributeKvEntity.getId().getAttributeKey()), l -> l ); } diff --git a/dao/src/main/java/org/thingsboard/server/dao/sql/attributes/SqlAttributesInsertRepository.java b/dao/src/main/java/org/thingsboard/server/dao/sql/attributes/SqlAttributesInsertRepository.java deleted file mode 100644 index a99f5a24e7..0000000000 --- a/dao/src/main/java/org/thingsboard/server/dao/sql/attributes/SqlAttributesInsertRepository.java +++ /dev/null @@ -1,27 +0,0 @@ -/** - * Copyright ยฉ 2016-2024 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. - */ -package org.thingsboard.server.dao.sql.attributes; - -import org.springframework.stereotype.Repository; -import org.springframework.transaction.annotation.Transactional; -import org.thingsboard.server.dao.util.SqlDao; - -@Repository -@Transactional -@SqlDao -public class SqlAttributesInsertRepository extends AttributeKvInsertRepository { - -} \ No newline at end of file diff --git a/dao/src/main/java/org/thingsboard/server/dao/sql/edge/JpaBaseEdgeEventDao.java b/dao/src/main/java/org/thingsboard/server/dao/sql/edge/JpaBaseEdgeEventDao.java index 1c64973d94..d9d2282fca 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/sql/edge/JpaBaseEdgeEventDao.java +++ b/dao/src/main/java/org/thingsboard/server/dao/sql/edge/JpaBaseEdgeEventDao.java @@ -90,7 +90,7 @@ public class JpaBaseEdgeEventDao extends JpaPartitionedAbstractDao queue; + private TbSqlBlockingQueueWrapper queue; @Override protected Class getEntityClass() { diff --git a/dao/src/main/java/org/thingsboard/server/dao/sql/event/JpaBaseEventDao.java b/dao/src/main/java/org/thingsboard/server/dao/sql/event/JpaBaseEventDao.java index afd6608774..33e7567664 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/sql/event/JpaBaseEventDao.java +++ b/dao/src/main/java/org/thingsboard/server/dao/sql/event/JpaBaseEventDao.java @@ -110,7 +110,7 @@ public class JpaBaseEventDao implements EventDao { @Value("${sql.batch_sort:true}") private boolean batchSortEnabled; - private TbSqlBlockingQueueWrapper queue; + private TbSqlBlockingQueueWrapper queue; private final Map> repositories = new ConcurrentHashMap<>(); diff --git a/dao/src/main/java/org/thingsboard/server/dao/sqlts/AbstractChunkedAggregationTimeseriesDao.java b/dao/src/main/java/org/thingsboard/server/dao/sqlts/AbstractChunkedAggregationTimeseriesDao.java index 9a52f3a192..f3b7b96c87 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/sqlts/AbstractChunkedAggregationTimeseriesDao.java +++ b/dao/src/main/java/org/thingsboard/server/dao/sqlts/AbstractChunkedAggregationTimeseriesDao.java @@ -60,7 +60,7 @@ public abstract class AbstractChunkedAggregationTimeseriesDao extends AbstractSq @Autowired protected InsertTsRepository insertRepository; - protected TbSqlBlockingQueueWrapper tsQueue; + protected TbSqlBlockingQueueWrapper tsQueue; @Autowired private StatsFactory statsFactory; diff --git a/dao/src/main/java/org/thingsboard/server/dao/sqlts/SqlTimeseriesLatestDao.java b/dao/src/main/java/org/thingsboard/server/dao/sqlts/SqlTimeseriesLatestDao.java index 425bb10a0e..513414b8ac 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/sqlts/SqlTimeseriesLatestDao.java +++ b/dao/src/main/java/org/thingsboard/server/dao/sqlts/SqlTimeseriesLatestDao.java @@ -46,6 +46,7 @@ import org.thingsboard.server.dao.model.sqlts.latest.TsKvLatestEntity; import org.thingsboard.server.dao.sql.ScheduledLogExecutorComponent; import org.thingsboard.server.dao.sql.TbSqlBlockingQueueParams; import org.thingsboard.server.dao.sql.TbSqlBlockingQueueWrapper; +import org.thingsboard.server.dao.sql.TbSqlQueueElement; import org.thingsboard.server.dao.sqlts.insert.latest.InsertLatestTsRepository; import org.thingsboard.server.dao.sqlts.latest.SearchTsKvLatestRepository; import org.thingsboard.server.dao.sqlts.latest.TsKvLatestRepository; @@ -81,7 +82,7 @@ public class SqlTimeseriesLatestDao extends BaseAbstractSqlTimeseriesDao impleme @Autowired private InsertLatestTsRepository insertLatestTsRepository; - private TbSqlBlockingQueueWrapper tsLatestQueue; + private TbSqlBlockingQueueWrapper tsLatestQueue; @Value("${sql.ts_latest.batch_size:1000}") private int tsLatestBatchSize; @@ -115,25 +116,26 @@ public class SqlTimeseriesLatestDao extends BaseAbstractSqlTimeseriesDao impleme .maxDelay(tsLatestMaxDelay) .statsPrintIntervalMs(tsLatestStatsPrintIntervalMs) .statsNamePrefix("ts.latest") - .batchSortEnabled(false) + .batchSortEnabled(batchSortEnabled) + .withResponse(true) .build(); java.util.function.Function hashcodeFunction = entity -> entity.getEntityId().hashCode(); tsLatestQueue = new TbSqlBlockingQueueWrapper<>(tsLatestParams, hashcodeFunction, tsLatestBatchThreads, statsFactory); - tsLatestQueue.init(logExecutor, v -> { - Map trueLatest = new HashMap<>(); - v.forEach(ts -> { - TsKey key = new TsKey(ts.getEntityId(), ts.getKey()); - trueLatest.merge(key, ts, (oldTs, newTs) -> oldTs.getTs() <= newTs.getTs() ? newTs : oldTs); - }); - List latestEntities = new ArrayList<>(trueLatest.values()); - if (batchSortEnabled) { - latestEntities.sort(Comparator.comparing((Function) AbstractTsKvEntity::getEntityId) - .thenComparingInt(AbstractTsKvEntity::getKey)); - } - insertLatestTsRepository.saveOrUpdate(latestEntities); - }, (l, r) -> 0); + tsLatestQueue.init(logExecutor, + v -> insertLatestTsRepository.saveOrUpdate(v), + Comparator.comparing((Function) AbstractTsKvEntity::getEntityId) + .thenComparingInt(AbstractTsKvEntity::getKey), + v -> { + Map> trueLatest = new HashMap<>(); + v.forEach(element -> { + var entity = element.getEntity(); + TsKey key = new TsKey(entity.getEntityId(), entity.getKey()); + trueLatest.merge(key, element, (oldElement, newElement) -> oldElement.getEntity().getTs() <= newElement.getEntity().getTs() ? newElement : oldElement); + }); + return new ArrayList<>(trueLatest.values()); + }); } @PreDestroy @@ -144,7 +146,7 @@ public class SqlTimeseriesLatestDao extends BaseAbstractSqlTimeseriesDao impleme } @Override - public ListenableFuture saveLatest(TenantId tenantId, EntityId entityId, TsKvEntry tsKvEntry) { + public ListenableFuture saveLatest(TenantId tenantId, EntityId entityId, TsKvEntry tsKvEntry) { return getSaveLatestFuture(entityId, tsKvEntry); } @@ -247,7 +249,7 @@ public class SqlTimeseriesLatestDao extends BaseAbstractSqlTimeseriesDao impleme searchTsKvLatestRepository.findAllByEntityId(entityId.getId())))); } - protected ListenableFuture getSaveLatestFuture(EntityId entityId, TsKvEntry tsKvEntry) { + protected ListenableFuture getSaveLatestFuture(EntityId entityId, TsKvEntry tsKvEntry) { TsKvLatestEntity latestEntity = new TsKvLatestEntity(); latestEntity.setEntityId(entityId.getId()); latestEntity.setTs(tsKvEntry.getTs()); diff --git a/dao/src/main/java/org/thingsboard/server/dao/sqlts/insert/latest/sql/SqlLatestInsertTsRepository.java b/dao/src/main/java/org/thingsboard/server/dao/sqlts/insert/latest/sql/SqlLatestInsertTsRepository.java index 48b54c2281..5b953dfe59 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/sqlts/insert/latest/sql/SqlLatestInsertTsRepository.java +++ b/dao/src/main/java/org/thingsboard/server/dao/sqlts/insert/latest/sql/SqlLatestInsertTsRepository.java @@ -17,33 +17,25 @@ package org.thingsboard.server.dao.sqlts.insert.latest.sql; import jakarta.annotation.PostConstruct; import org.springframework.beans.factory.annotation.Value; -import org.springframework.jdbc.core.BatchPreparedStatementSetter; -import org.springframework.jdbc.core.PreparedStatementCreator; -import org.springframework.jdbc.core.SqlProvider; -import org.springframework.jdbc.support.GeneratedKeyHolder; -import org.springframework.jdbc.support.KeyHolder; import org.springframework.stereotype.Repository; import org.springframework.transaction.annotation.Transactional; +import org.thingsboard.server.dao.AbstractSequenceInsertRepository; import org.thingsboard.server.dao.model.sqlts.latest.TsKvLatestEntity; -import org.thingsboard.server.dao.sqlts.insert.AbstractInsertRepository; import org.thingsboard.server.dao.sqlts.insert.latest.InsertLatestTsRepository; import org.thingsboard.server.dao.util.SqlDao; import org.thingsboard.server.dao.util.SqlTsLatestAnyDao; -import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.SQLException; import java.sql.Types; -import java.util.ArrayList; import java.util.List; -import java.util.Map; @SqlTsLatestAnyDao @Repository @Transactional @SqlDao -public class SqlLatestInsertTsRepository extends AbstractInsertRepository implements InsertLatestTsRepository { +public class SqlLatestInsertTsRepository extends AbstractSequenceInsertRepository implements InsertLatestTsRepository { @Value("${sql.ts_latest.update_by_latest_ts:true}") private Boolean updateByLatestTs; @@ -61,8 +53,6 @@ public class SqlLatestInsertTsRepository extends AbstractInsertRepository implem private static final String RETURNING = " RETURNING seq_number"; - private static final String SEQ_NUMBER = "seq_number"; - private String batchUpdateQuery; private String insertOrUpdateQuery; @@ -73,161 +63,89 @@ public class SqlLatestInsertTsRepository extends AbstractInsertRepository implem } @Override - public List saveOrUpdate(List entities) { - return transactionTemplate.execute(status -> { - List seqNumbers = new ArrayList<>(entities.size()); + protected void setOnBatchUpdateValues(PreparedStatement ps, int i, List entities) throws SQLException { + TsKvLatestEntity tsKvLatestEntity = entities.get(i); + ps.setLong(1, tsKvLatestEntity.getTs()); + + if (tsKvLatestEntity.getBooleanValue() != null) { + ps.setBoolean(2, tsKvLatestEntity.getBooleanValue()); + } else { + ps.setNull(2, Types.BOOLEAN); + } - KeyHolder keyHolder = new GeneratedKeyHolder(); + ps.setString(3, replaceNullChars(tsKvLatestEntity.getStrValue())); - int[] updateResult = onBatchUpdate(entities, keyHolder); + if (tsKvLatestEntity.getLongValue() != null) { + ps.setLong(4, tsKvLatestEntity.getLongValue()); + } else { + ps.setNull(4, Types.BIGINT); + } - List> seqNumbersList = keyHolder.getKeyList(); + if (tsKvLatestEntity.getDoubleValue() != null) { + ps.setDouble(5, tsKvLatestEntity.getDoubleValue()); + } else { + ps.setNull(5, Types.DOUBLE); + } - int notUpdatedCount = entities.size() - seqNumbersList.size(); + ps.setString(6, replaceNullChars(tsKvLatestEntity.getJsonValue())); - List toInsertIndexes = new ArrayList<>(notUpdatedCount); - List insertEntities = new ArrayList<>(notUpdatedCount); - int keyHolderIndex = 0; - for (int i = 0; i < updateResult.length; i++) { - if (updateResult[i] == 0) { - insertEntities.add(entities.get(i)); - seqNumbers.add(0L); - toInsertIndexes.add(i); - } else { - seqNumbers.add((Long) seqNumbersList.get(keyHolderIndex).get(SEQ_NUMBER)); - keyHolderIndex++; - } - } + ps.setObject(7, tsKvLatestEntity.getEntityId()); + ps.setInt(8, tsKvLatestEntity.getKey()); + if (updateByLatestTs) { + ps.setLong(9, tsKvLatestEntity.getTs()); + } + } - if (insertEntities.isEmpty()) { - return seqNumbers; - } + @Override + protected void setOnInsertOrUpdateValues(PreparedStatement ps, int i, List insertEntities) throws SQLException { + TsKvLatestEntity tsKvLatestEntity = insertEntities.get(i); + ps.setObject(1, tsKvLatestEntity.getEntityId()); + ps.setInt(2, tsKvLatestEntity.getKey()); + + ps.setLong(3, tsKvLatestEntity.getTs()); + ps.setLong(9, tsKvLatestEntity.getTs()); + if (updateByLatestTs) { + ps.setLong(15, tsKvLatestEntity.getTs()); + } - onInsertOrUpdate(insertEntities, keyHolder); + if (tsKvLatestEntity.getBooleanValue() != null) { + ps.setBoolean(4, tsKvLatestEntity.getBooleanValue()); + ps.setBoolean(10, tsKvLatestEntity.getBooleanValue()); + } else { + ps.setNull(4, Types.BOOLEAN); + ps.setNull(10, Types.BOOLEAN); + } - seqNumbersList = keyHolder.getKeyList(); + ps.setString(5, replaceNullChars(tsKvLatestEntity.getStrValue())); + ps.setString(11, replaceNullChars(tsKvLatestEntity.getStrValue())); - for (int i = 0; i < seqNumbersList.size(); i++) { - seqNumbers.set(toInsertIndexes.get(i), (Long) seqNumbersList.get(i).get(SEQ_NUMBER)); - } + if (tsKvLatestEntity.getLongValue() != null) { + ps.setLong(6, tsKvLatestEntity.getLongValue()); + ps.setLong(12, tsKvLatestEntity.getLongValue()); + } else { + ps.setNull(6, Types.BIGINT); + ps.setNull(12, Types.BIGINT); + } - return seqNumbers; - }); - } + if (tsKvLatestEntity.getDoubleValue() != null) { + ps.setDouble(7, tsKvLatestEntity.getDoubleValue()); + ps.setDouble(13, tsKvLatestEntity.getDoubleValue()); + } else { + ps.setNull(7, Types.DOUBLE); + ps.setNull(13, Types.DOUBLE); + } - private int[] onBatchUpdate(List entities, KeyHolder keyHolder) { - return jdbcTemplate.batchUpdate(new SimplePreparedStatementCreator(batchUpdateQuery), new BatchPreparedStatementSetter() { - @Override - public void setValues(PreparedStatement ps, int i) throws SQLException { - TsKvLatestEntity tsKvLatestEntity = entities.get(i); - ps.setLong(1, tsKvLatestEntity.getTs()); - - if (tsKvLatestEntity.getBooleanValue() != null) { - ps.setBoolean(2, tsKvLatestEntity.getBooleanValue()); - } else { - ps.setNull(2, Types.BOOLEAN); - } - - ps.setString(3, replaceNullChars(tsKvLatestEntity.getStrValue())); - - if (tsKvLatestEntity.getLongValue() != null) { - ps.setLong(4, tsKvLatestEntity.getLongValue()); - } else { - ps.setNull(4, Types.BIGINT); - } - - if (tsKvLatestEntity.getDoubleValue() != null) { - ps.setDouble(5, tsKvLatestEntity.getDoubleValue()); - } else { - ps.setNull(5, Types.DOUBLE); - } - - ps.setString(6, replaceNullChars(tsKvLatestEntity.getJsonValue())); - - ps.setObject(7, tsKvLatestEntity.getEntityId()); - ps.setInt(8, tsKvLatestEntity.getKey()); - if (updateByLatestTs) { - ps.setLong(9, tsKvLatestEntity.getTs()); - } - } - - @Override - public int getBatchSize() { - return entities.size(); - } - }, keyHolder); + ps.setString(8, replaceNullChars(tsKvLatestEntity.getJsonValue())); + ps.setString(14, replaceNullChars(tsKvLatestEntity.getJsonValue())); } - private void onInsertOrUpdate(List insertEntities, KeyHolder keyHolder) { - jdbcTemplate.batchUpdate(new SimplePreparedStatementCreator(insertOrUpdateQuery), new BatchPreparedStatementSetter() { - @Override - public void setValues(PreparedStatement ps, int i) throws SQLException { - TsKvLatestEntity tsKvLatestEntity = insertEntities.get(i); - ps.setObject(1, tsKvLatestEntity.getEntityId()); - ps.setInt(2, tsKvLatestEntity.getKey()); - - ps.setLong(3, tsKvLatestEntity.getTs()); - ps.setLong(9, tsKvLatestEntity.getTs()); - if (updateByLatestTs) { - ps.setLong(15, tsKvLatestEntity.getTs()); - } - - if (tsKvLatestEntity.getBooleanValue() != null) { - ps.setBoolean(4, tsKvLatestEntity.getBooleanValue()); - ps.setBoolean(10, tsKvLatestEntity.getBooleanValue()); - } else { - ps.setNull(4, Types.BOOLEAN); - ps.setNull(10, Types.BOOLEAN); - } - - ps.setString(5, replaceNullChars(tsKvLatestEntity.getStrValue())); - ps.setString(11, replaceNullChars(tsKvLatestEntity.getStrValue())); - - if (tsKvLatestEntity.getLongValue() != null) { - ps.setLong(6, tsKvLatestEntity.getLongValue()); - ps.setLong(12, tsKvLatestEntity.getLongValue()); - } else { - ps.setNull(6, Types.BIGINT); - ps.setNull(12, Types.BIGINT); - } - - if (tsKvLatestEntity.getDoubleValue() != null) { - ps.setDouble(7, tsKvLatestEntity.getDoubleValue()); - ps.setDouble(13, tsKvLatestEntity.getDoubleValue()); - } else { - ps.setNull(7, Types.DOUBLE); - ps.setNull(13, Types.DOUBLE); - } - - ps.setString(8, replaceNullChars(tsKvLatestEntity.getJsonValue())); - ps.setString(14, replaceNullChars(tsKvLatestEntity.getJsonValue())); - } - - @Override - public int getBatchSize() { - return insertEntities.size(); - } - }, keyHolder); + @Override + protected String getBatchUpdateQuery() { + return batchUpdateQuery; } - private static class SimplePreparedStatementCreator implements PreparedStatementCreator, SqlProvider { - - private static final String[] COLUMNS = {SEQ_NUMBER}; - private final String sql; - - - public SimplePreparedStatementCreator(String sql) { - this.sql = sql; - } - - @Override - public PreparedStatement createPreparedStatement(Connection con) throws SQLException { - return con.prepareStatement(sql, COLUMNS); - } - - @Override - public String getSql() { - return this.sql; - } + @Override + protected String getInsertOrUpdateQuery() { + return insertOrUpdateQuery; } } diff --git a/dao/src/main/java/org/thingsboard/server/dao/sqlts/timescale/TimescaleTimeseriesDao.java b/dao/src/main/java/org/thingsboard/server/dao/sqlts/timescale/TimescaleTimeseriesDao.java index c8bff8ceb9..cd9f397bb3 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/sqlts/timescale/TimescaleTimeseriesDao.java +++ b/dao/src/main/java/org/thingsboard/server/dao/sqlts/timescale/TimescaleTimeseriesDao.java @@ -18,8 +18,9 @@ package org.thingsboard.server.dao.sqlts.timescale; import com.google.common.util.concurrent.Futures; import com.google.common.util.concurrent.ListenableFuture; import com.google.common.util.concurrent.MoreExecutors; +import jakarta.annotation.PostConstruct; +import jakarta.annotation.PreDestroy; import lombok.extern.slf4j.Slf4j; -import org.jetbrains.annotations.NotNull; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.data.domain.PageRequest; import org.springframework.data.domain.Sort; @@ -38,7 +39,6 @@ import org.thingsboard.server.dao.DaoUtil; import org.thingsboard.server.dao.dictionary.KeyDictionaryDao; import org.thingsboard.server.dao.model.sql.AbstractTsKvEntity; import org.thingsboard.server.dao.model.sqlts.timescale.ts.TimescaleTsKvEntity; -import org.thingsboard.server.dao.model.sqlts.ts.TsKvEntity; import org.thingsboard.server.dao.sql.TbSqlBlockingQueueParams; import org.thingsboard.server.dao.sql.TbSqlBlockingQueueWrapper; import org.thingsboard.server.dao.sqlts.AbstractSqlTimeseriesDao; @@ -47,8 +47,6 @@ import org.thingsboard.server.dao.timeseries.TimeseriesDao; import org.thingsboard.server.dao.util.TimeUtils; import org.thingsboard.server.dao.util.TimescaleDBTsDao; -import jakarta.annotation.PostConstruct; -import jakarta.annotation.PreDestroy; import java.util.ArrayList; import java.util.Collections; import java.util.Comparator; @@ -77,7 +75,7 @@ public class TimescaleTimeseriesDao extends AbstractSqlTimeseriesDao implements @Autowired protected KeyDictionaryDao keyDictionaryDao; - protected TbSqlBlockingQueueWrapper tsQueue; + protected TbSqlBlockingQueueWrapper tsQueue; @PostConstruct protected void init() { diff --git a/dao/src/main/java/org/thingsboard/server/dao/timeseries/BaseTimeseriesService.java b/dao/src/main/java/org/thingsboard/server/dao/timeseries/BaseTimeseriesService.java index 60056b2b8f..f9c4218d64 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/timeseries/BaseTimeseriesService.java +++ b/dao/src/main/java/org/thingsboard/server/dao/timeseries/BaseTimeseriesService.java @@ -187,8 +187,8 @@ public class BaseTimeseriesService implements TimeseriesService { } @Override - public ListenableFuture> saveLatest(TenantId tenantId, EntityId entityId, List tsKvEntries) { - List> futures = new ArrayList<>(tsKvEntries.size()); + public ListenableFuture> saveLatest(TenantId tenantId, EntityId entityId, List tsKvEntries) { + List> futures = new ArrayList<>(tsKvEntries.size()); for (TsKvEntry tsKvEntry : tsKvEntries) { futures.add(timeseriesLatestDao.saveLatest(tenantId, entityId, tsKvEntry)); } diff --git a/dao/src/main/java/org/thingsboard/server/dao/timeseries/CassandraBaseTimeseriesLatestDao.java b/dao/src/main/java/org/thingsboard/server/dao/timeseries/CassandraBaseTimeseriesLatestDao.java index 7a5904eb6b..f774f18dc7 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/timeseries/CassandraBaseTimeseriesLatestDao.java +++ b/dao/src/main/java/org/thingsboard/server/dao/timeseries/CassandraBaseTimeseriesLatestDao.java @@ -100,7 +100,7 @@ public class CassandraBaseTimeseriesLatestDao extends AbstractCassandraBaseTimes } @Override - public ListenableFuture saveLatest(TenantId tenantId, EntityId entityId, TsKvEntry tsKvEntry) { + public ListenableFuture saveLatest(TenantId tenantId, EntityId entityId, TsKvEntry tsKvEntry) { BoundStatementBuilder stmtBuilder = new BoundStatementBuilder(getLatestStmt().bind()); stmtBuilder.setString(0, entityId.getEntityType().name()) .setUuid(1, entityId.getId()) diff --git a/dao/src/main/java/org/thingsboard/server/dao/timeseries/TimeseriesLatestDao.java b/dao/src/main/java/org/thingsboard/server/dao/timeseries/TimeseriesLatestDao.java index d339f49e11..9f62fd033a 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/timeseries/TimeseriesLatestDao.java +++ b/dao/src/main/java/org/thingsboard/server/dao/timeseries/TimeseriesLatestDao.java @@ -42,7 +42,7 @@ public interface TimeseriesLatestDao { ListenableFuture> findAllLatest(TenantId tenantId, EntityId entityId); - ListenableFuture saveLatest(TenantId tenantId, EntityId entityId, TsKvEntry tsKvEntry); + ListenableFuture saveLatest(TenantId tenantId, EntityId entityId, TsKvEntry tsKvEntry); ListenableFuture removeLatest(TenantId tenantId, EntityId entityId, DeleteTsKvQuery query); diff --git a/dao/src/main/resources/sql/schema-entities.sql b/dao/src/main/resources/sql/schema-entities.sql index b92c27574c..a26262970c 100644 --- a/dao/src/main/resources/sql/schema-entities.sql +++ b/dao/src/main/resources/sql/schema-entities.sql @@ -102,6 +102,8 @@ CREATE TABLE IF NOT EXISTS audit_log ( action_failure_details varchar(1000000) ) PARTITION BY RANGE (created_time); +CREATE SEQUENCE IF NOT EXISTS attribute_kv_latest_seq cache 1000; + CREATE TABLE IF NOT EXISTS attribute_kv ( entity_id uuid, attribute_type int, @@ -112,6 +114,7 @@ CREATE TABLE IF NOT EXISTS attribute_kv ( dbl_v double precision, json_v json, last_update_ts bigint, + seq_number bigint, CONSTRAINT attribute_kv_pkey PRIMARY KEY (entity_id, attribute_type, attribute_key) ); From 4be5fe0cfaf745cf56afa7c1f63663b7313dad7f Mon Sep 17 00:00:00 2001 From: IrynaMatveieva Date: Tue, 11 Jun 2024 17:21:24 +0300 Subject: [PATCH 061/442] added tests for azure iot hub node --- .../rule/engine/mqtt/TbMqttNode.java | 2 +- .../engine/mqtt/azure/TbAzureIotHubNode.java | 6 +- .../rule/engine/mqtt/TbMqttNodeTest.java | 94 +++++++-------- .../mqtt/azure/TbAzureIotHubNodeTest.java | 113 ++++++++++++++++++ 4 files changed, 164 insertions(+), 51 deletions(-) create mode 100644 rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/mqtt/azure/TbAzureIotHubNodeTest.java diff --git a/rule-engine/rule-engine-components/src/main/java/org/thingsboard/rule/engine/mqtt/TbMqttNode.java b/rule-engine/rule-engine-components/src/main/java/org/thingsboard/rule/engine/mqtt/TbMqttNode.java index ab6fcda8dc..ca63c270de 100644 --- a/rule-engine/rule-engine-components/src/main/java/org/thingsboard/rule/engine/mqtt/TbMqttNode.java +++ b/rule-engine/rule-engine-components/src/main/java/org/thingsboard/rule/engine/mqtt/TbMqttNode.java @@ -115,7 +115,7 @@ public class TbMqttNode extends TbAbstractExternalNode { return "Tenant[" + ctx.getTenantId().getId() + "]RuleNode[" + ctx.getSelf().getId().getId() + "]"; } - protected MqttClient initClient(TbContext ctx) throws Exception { + public MqttClient initClient(TbContext ctx) throws Exception { MqttClientConfig config = new MqttClientConfig(getSslContext()); config.setOwnerId(getOwnerId(ctx)); if (!StringUtils.isEmpty(this.mqttNodeConfiguration.getClientId())) { diff --git a/rule-engine/rule-engine-components/src/main/java/org/thingsboard/rule/engine/mqtt/azure/TbAzureIotHubNode.java b/rule-engine/rule-engine-components/src/main/java/org/thingsboard/rule/engine/mqtt/azure/TbAzureIotHubNode.java index 2cbc172570..3376c7d113 100644 --- a/rule-engine/rule-engine-components/src/main/java/org/thingsboard/rule/engine/mqtt/azure/TbAzureIotHubNode.java +++ b/rule-engine/rule-engine-components/src/main/java/org/thingsboard/rule/engine/mqtt/azure/TbAzureIotHubNode.java @@ -32,8 +32,6 @@ import org.thingsboard.rule.engine.mqtt.TbMqttNodeConfiguration; import org.thingsboard.server.common.data.plugin.ComponentClusteringMode; import org.thingsboard.server.common.data.plugin.ComponentType; -import javax.net.ssl.SSLException; - @Slf4j @RuleNode( type = ComponentType.EXTERNAL, @@ -74,4 +72,8 @@ public class TbAzureIotHubNode extends TbMqttNode { config.setPassword(AzureIotHubUtil.buildSasToken(mqttNodeConfiguration.getHost(), ((AzureIotHubSasCredentials) credentials).getSasKey())); } } + + protected TbMqttNodeConfiguration getMqttNodeConfiguration() { + return this.mqttNodeConfiguration; + } } diff --git a/rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/mqtt/TbMqttNodeTest.java b/rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/mqtt/TbMqttNodeTest.java index 045ff3637f..1c8a3f2500 100644 --- a/rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/mqtt/TbMqttNodeTest.java +++ b/rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/mqtt/TbMqttNodeTest.java @@ -30,7 +30,6 @@ import org.junit.jupiter.params.provider.Arguments; import org.junit.jupiter.params.provider.MethodSource; import org.mockito.ArgumentCaptor; import org.mockito.Mock; -import org.mockito.Spy; import org.mockito.junit.jupiter.MockitoExtension; import org.springframework.test.util.ReflectionTestUtils; import org.thingsboard.common.util.JacksonUtil; @@ -73,38 +72,37 @@ import static org.mockito.BDDMockito.willReturn; import static org.mockito.BDDMockito.willThrow; @ExtendWith(MockitoExtension.class) -class TbMqttNodeTest extends AbstractRuleNodeUpgradeTest { +public class TbMqttNodeTest extends AbstractRuleNodeUpgradeTest { private final DeviceId DEVICE_ID = new DeviceId(UUID.fromString("09115d92-d333-432a-868c-ccd6e89c9287")); - @Spy - private TbMqttNode node; - private TbMqttNodeConfiguration config; + protected TbMqttNode mqttNode; + protected TbMqttNodeConfiguration mqttNodeConfig; @Mock - private TbContext ctxMock; + protected TbContext ctxMock; @Mock - private MqttClient clientMock; + protected MqttClient mqttClientMock; @BeforeEach - public void setUp() throws Exception { - node = spy(new TbMqttNode()); - config = new TbMqttNodeConfiguration().defaultConfiguration(); + protected void setUp() { + mqttNode = spy(new TbMqttNode()); + mqttNodeConfig = new TbMqttNodeConfiguration().defaultConfiguration(); } @Test public void verifyDefaultConfig() { - assertThat(config.getTopicPattern()).isEqualTo("my-topic"); - assertThat(config.getHost()).isNull(); - assertThat(config.getPort()).isEqualTo(1883); - assertThat(config.getConnectTimeoutSec()).isEqualTo(10); - assertThat(config.getClientId()).isNull(); - assertThat(config.isAppendClientIdSuffix()).isFalse(); - assertThat(config.isRetainedMessage()).isFalse(); - assertThat(config.isCleanSession()).isTrue(); - assertThat(config.isSsl()).isFalse(); - assertThat(config.isParseToPlainText()).isFalse(); - assertThat(config.getCredentials()).isInstanceOf(AnonymousCredentials.class); + assertThat(mqttNodeConfig.getTopicPattern()).isEqualTo("my-topic"); + assertThat(mqttNodeConfig.getHost()).isNull(); + assertThat(mqttNodeConfig.getPort()).isEqualTo(1883); + assertThat(mqttNodeConfig.getConnectTimeoutSec()).isEqualTo(10); + assertThat(mqttNodeConfig.getClientId()).isNull(); + assertThat(mqttNodeConfig.isAppendClientIdSuffix()).isFalse(); + assertThat(mqttNodeConfig.isRetainedMessage()).isFalse(); + assertThat(mqttNodeConfig.isCleanSession()).isTrue(); + assertThat(mqttNodeConfig.isSsl()).isFalse(); + assertThat(mqttNodeConfig.isParseToPlainText()).isFalse(); + assertThat(mqttNodeConfig.getCredentials()).isInstanceOf(AnonymousCredentials.class); } @Test @@ -115,7 +113,7 @@ class TbMqttNodeTest extends AbstractRuleNodeUpgradeTest { given(ctxMock.getTenantId()).willReturn(TenantId.fromUUID(UUID.fromString(tenantIdStr))); given(ctxMock.getSelf()).willReturn(ruleNode); - String actualOwnerIdStr = node.getOwnerId(ctxMock); + String actualOwnerIdStr = mqttNode.getOwnerId(ctxMock); String expectedOwnerIdStr = "Tenant[" + tenantIdStr + "]RuleNode[" + ruleNodeIdStr + "]"; assertThat(actualOwnerIdStr).isEqualTo(expectedOwnerIdStr); } @@ -125,11 +123,11 @@ class TbMqttNodeTest extends AbstractRuleNodeUpgradeTest { BasicCredentials credentials = new BasicCredentials(); credentials.setUsername("test_username"); credentials.setPassword("test_password"); - config.setCredentials(credentials); - ReflectionTestUtils.setField(node, "mqttNodeConfiguration", config); - MqttClientConfig mqttClientConfig = new MqttClientConfig(node.getSslContext()); + mqttNodeConfig.setCredentials(credentials); + ReflectionTestUtils.setField(mqttNode, "mqttNodeConfiguration", mqttNodeConfig); + MqttClientConfig mqttClientConfig = new MqttClientConfig(mqttNode.getSslContext()); - node.prepareMqttClientConfig(mqttClientConfig); + mqttNode.prepareMqttClientConfig(mqttClientConfig); assertThat(mqttClientConfig) .hasFieldOrPropertyWithValue("username", "test_username") @@ -139,11 +137,11 @@ class TbMqttNodeTest extends AbstractRuleNodeUpgradeTest { @ParameterizedTest @MethodSource public void verifyGetSslContextMethod(boolean ssl, ClientCredentials credentials, SslContext expectedSslContext) throws SSLException { - config.setSsl(ssl); - config.setCredentials(credentials); - ReflectionTestUtils.setField(node, "mqttNodeConfiguration", config); + mqttNodeConfig.setSsl(ssl); + mqttNodeConfig.setCredentials(credentials); + ReflectionTestUtils.setField(mqttNode, "mqttNodeConfiguration", mqttNodeConfig); - SslContext actualSslContext = node.getSslContext(); + SslContext actualSslContext = mqttNode.getSslContext(); assertThat(actualSslContext) .usingRecursiveComparison() .ignoringFields("ctx", "ctxLock", "sessionContext.context.ctx", "sessionContext.context.ctxLock") @@ -160,10 +158,10 @@ class TbMqttNodeTest extends AbstractRuleNodeUpgradeTest { @Test public void givenFailedToInitializeMqttClient_whenInit_thenThrowsException() throws Exception { String errorMsg = "Failed to connect to MQTT broker!"; - willThrow(new RuntimeException(errorMsg)).given(node).initClient(any()); + willThrow(new RuntimeException(errorMsg)).given(mqttNode).initClient(any()); - var configuration = new TbNodeConfiguration(JacksonUtil.valueToTree(config)); - assertThatThrownBy(() -> node.init(ctxMock, configuration)) + var configuration = new TbNodeConfiguration(JacksonUtil.valueToTree(mqttNodeConfig)); + assertThatThrownBy(() -> mqttNode.init(ctxMock, configuration)) .isInstanceOf(TbNodeException.class) .hasMessage(RuntimeException.class.getName() + ": " + errorMsg); } @@ -171,25 +169,25 @@ class TbMqttNodeTest extends AbstractRuleNodeUpgradeTest { @ParameterizedTest @MethodSource public void givenTopicPatternAndIsRetainedMsgIsTrue_whenOnMsg_thenTellSuccess(String topicPattern, TbMsgMetaData metaData, String data) throws Exception { - config.setRetainedMessage(true); - config.setTopicPattern(topicPattern); + mqttNodeConfig.setRetainedMessage(true); + mqttNodeConfig.setTopicPattern(topicPattern); - willReturn(clientMock).given(node).initClient(any()); + willReturn(mqttClientMock).given(mqttNode).initClient(any()); Future future = mock(Future.class); given(future.isSuccess()).willReturn(true); - given(clientMock.publish(any(String.class), any(ByteBuf.class), any(MqttQoS.class), anyBoolean())).willReturn(future); + given(mqttClientMock.publish(any(String.class), any(ByteBuf.class), any(MqttQoS.class), anyBoolean())).willReturn(future); willAnswer(invocation-> { GenericFutureListener> listener = invocation.getArgument(0); listener.operationComplete(future); return null; }).given(future).addListener(any()); - node.init(ctxMock, new TbNodeConfiguration(JacksonUtil.valueToTree(config))); + mqttNode.init(ctxMock, new TbNodeConfiguration(JacksonUtil.valueToTree(mqttNodeConfig))); TbMsg msg = TbMsg.newMsg(TbMsgType.POST_TELEMETRY_REQUEST, DEVICE_ID, metaData, data); - node.onMsg(ctxMock, msg); + mqttNode.onMsg(ctxMock, msg); - String expectedTopic = TbNodeUtils.processPattern(config.getTopicPattern(), msg); - then(clientMock).should().publish(expectedTopic, Unpooled.wrappedBuffer(msg.getData().getBytes(UTF8)), MqttQoS.AT_LEAST_ONCE, true); + String expectedTopic = TbNodeUtils.processPattern(mqttNodeConfig.getTopicPattern(), msg); + then(mqttClientMock).should().publish(expectedTopic, Unpooled.wrappedBuffer(msg.getData().getBytes(UTF8)), MqttQoS.AT_LEAST_ONCE, true); then(ctxMock).should().tellSuccess(msg); } @@ -203,11 +201,11 @@ class TbMqttNodeTest extends AbstractRuleNodeUpgradeTest { @Test public void givenParseToPlainTextIsTrueAndMsgPublishingFailed_whenOnMsg_thenTellFailure() throws Exception { - config.setParseToPlainText(true); + mqttNodeConfig.setParseToPlainText(true); - willReturn(clientMock).given(node).initClient(any()); + willReturn(mqttClientMock).given(mqttNode).initClient(any()); Future future = mock(Future.class); - given(clientMock.publish(any(String.class), any(ByteBuf.class), any(MqttQoS.class), anyBoolean())).willReturn(future); + given(mqttClientMock.publish(any(String.class), any(ByteBuf.class), any(MqttQoS.class), anyBoolean())).willReturn(future); given(future.isSuccess()).willReturn(false); String errorMsg = "Message publishing was failed!"; Throwable exception = new RuntimeException(errorMsg); @@ -218,12 +216,12 @@ class TbMqttNodeTest extends AbstractRuleNodeUpgradeTest { return null; }).given(future).addListener(any()); - node.init(ctxMock, new TbNodeConfiguration(JacksonUtil.valueToTree(config))); + mqttNode.init(ctxMock, new TbNodeConfiguration(JacksonUtil.valueToTree(mqttNodeConfig))); TbMsg msg = TbMsg.newMsg(TbMsgType.POST_TELEMETRY_REQUEST, DEVICE_ID, TbMsgMetaData.EMPTY, "\"string\""); - node.onMsg(ctxMock, msg); + mqttNode.onMsg(ctxMock, msg); String expectedData = JacksonUtil.toPlainText(msg.getData()); - then(clientMock).should().publish(config.getTopicPattern(), Unpooled.wrappedBuffer(expectedData.getBytes(UTF8)), MqttQoS.AT_LEAST_ONCE, false); + then(mqttClientMock).should().publish(mqttNodeConfig.getTopicPattern(), Unpooled.wrappedBuffer(expectedData.getBytes(UTF8)), MqttQoS.AT_LEAST_ONCE, false); TbMsgMetaData metaData = new TbMsgMetaData(); metaData.putValue("error", RuntimeException.class + ": " + errorMsg); TbMsg expectedMsg = TbMsg.transformMsgMetadata(msg, metaData); @@ -251,6 +249,6 @@ class TbMqttNodeTest extends AbstractRuleNodeUpgradeTest { @Override protected TbNode getTestNode() { - return node; + return mqttNode; } } diff --git a/rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/mqtt/azure/TbAzureIotHubNodeTest.java b/rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/mqtt/azure/TbAzureIotHubNodeTest.java new file mode 100644 index 0000000000..d62afe3001 --- /dev/null +++ b/rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/mqtt/azure/TbAzureIotHubNodeTest.java @@ -0,0 +1,113 @@ +/** + * Copyright ยฉ 2016-2024 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. + */ +package org.thingsboard.rule.engine.mqtt.azure; + +import io.netty.handler.codec.mqtt.MqttVersion; +import org.junit.jupiter.api.BeforeEach; +import org.junit.jupiter.api.Test; +import org.springframework.test.util.ReflectionTestUtils; +import org.thingsboard.common.util.AzureIotHubUtil; +import org.thingsboard.common.util.JacksonUtil; +import org.thingsboard.mqtt.MqttClientConfig; +import org.thingsboard.rule.engine.api.TbNodeConfiguration; +import org.thingsboard.rule.engine.api.TbNodeException; +import org.thingsboard.rule.engine.api.util.TbNodeUtils; +import org.thingsboard.rule.engine.credentials.CertPemCredentials; +import org.thingsboard.rule.engine.mqtt.TbMqttNodeConfiguration; +import org.thingsboard.rule.engine.mqtt.TbMqttNodeTest; + +import static org.assertj.core.api.Assertions.assertThat; +import static org.assertj.core.api.Assertions.assertThatThrownBy; +import static org.mockito.ArgumentMatchers.any; +import static org.mockito.BDDMockito.spy; +import static org.mockito.BDDMockito.willReturn; +import static org.mockito.BDDMockito.willThrow; + +public class TbAzureIotHubNodeTest extends TbMqttNodeTest { + + private TbAzureIotHubNode azureIotHubNode; + private TbAzureIotHubNodeConfiguration azureIotHubNodeConfig; + + @BeforeEach + public void setUp() { + super.setUp(); + azureIotHubNode = spy(new TbAzureIotHubNode()); + azureIotHubNodeConfig = new TbAzureIotHubNodeConfiguration().defaultConfiguration(); + } + + @Test + public void verifyDefaultConfig() { + assertThat(azureIotHubNodeConfig.getTopicPattern()).isEqualTo("devices//messages/events/"); + assertThat(azureIotHubNodeConfig.getHost()).isEqualTo(".azure-devices.net"); + assertThat(azureIotHubNodeConfig.getPort()).isEqualTo(8883); + assertThat(azureIotHubNodeConfig.getConnectTimeoutSec()).isEqualTo(10); + assertThat(azureIotHubNodeConfig.isCleanSession()).isTrue(); + assertThat(azureIotHubNodeConfig.isSsl()).isTrue(); + assertThat(azureIotHubNodeConfig.getCredentials()).isInstanceOf(AzureIotHubSasCredentials.class); + } + + @Test + public void verifyPrepareMqttClientConfigMethodWithAzureIotHubSasCredentials() throws TbNodeException { + AzureIotHubSasCredentials credentials = new AzureIotHubSasCredentials(); + credentials.setSasKey("testSasKey"); + credentials.setCaCert("test-ca-cert.pem"); + azureIotHubNodeConfig.setCredentials(credentials); + TbNodeConfiguration configuration = new TbNodeConfiguration(JacksonUtil.valueToTree(azureIotHubNodeConfig)); + mqttNodeConfig = TbNodeUtils.convert(configuration, TbMqttNodeConfiguration.class); + ReflectionTestUtils.setField(azureIotHubNode, "mqttNodeConfiguration", mqttNodeConfig); + MqttClientConfig mqttClientConfig = new MqttClientConfig(); + + azureIotHubNode.prepareMqttClientConfig(mqttClientConfig); + + assertThat(mqttClientConfig) + .hasFieldOrPropertyWithValue("protocolVersion", MqttVersion.MQTT_3_1_1) + .hasFieldOrPropertyWithValue("username", AzureIotHubUtil.buildUsername(mqttNodeConfig.getHost(), mqttClientConfig.getClientId())) + .hasFieldOrPropertyWithValue("password", AzureIotHubUtil.buildSasToken(mqttNodeConfig.getHost(), credentials.getSasKey())); + } + + @Test + public void givenPemCredentialsAndSuccessfulInitClient_whenInit_thenOk() throws Exception { + CertPemCredentials credentials = new CertPemCredentials(); + credentials.setCaCert("test-ca-cert.pem"); + credentials.setPassword("test-password"); + azureIotHubNodeConfig.setCredentials(credentials); + var configuration = new TbNodeConfiguration(JacksonUtil.valueToTree(azureIotHubNodeConfig)); + + willReturn(mqttClientMock).given(azureIotHubNode).initClient(any()); + + azureIotHubNode.init(ctxMock, configuration); + + assertThat(azureIotHubNode.getMqttNodeConfiguration()) + .hasFieldOrPropertyWithValue("port", 8883) + .hasFieldOrPropertyWithValue("cleanSession", true); + } + + @Test + public void givenAzureIotHubSasCredentialsAndFailedInitClient_whenInit_thenThrowsException() throws Exception { + AzureIotHubSasCredentials credentials = new AzureIotHubSasCredentials(); + credentials.setSasKey("testSasKey"); + credentials.setCaCert("test-ca-cert.pem"); + azureIotHubNodeConfig.setCredentials(credentials); + + String errorMsg = "Failed to connect to MQTT broker!"; + willThrow(new RuntimeException(errorMsg)).given(azureIotHubNode).initClient(any()); + + var configuration = new TbNodeConfiguration(JacksonUtil.valueToTree(azureIotHubNodeConfig)); + assertThatThrownBy(() -> azureIotHubNode.init(ctxMock, configuration)) + .isInstanceOf(TbNodeException.class) + .hasMessage(RuntimeException.class.getName() + ": " + errorMsg); + } +} From 4807a7cbdd9156da4f9912fd51f30e8d40bc8fca Mon Sep 17 00:00:00 2001 From: YevhenBondarenko Date: Tue, 11 Jun 2024 17:15:55 +0200 Subject: [PATCH 062/442] ranamed seq_number to version and refactoring --- .../server/controller/DeviceController.java | 4 +--- ...java => AbstractVersionedInsertRepository.java} | 10 +++++----- .../attributes/AttributeKvInsertRepository.java | 14 +++++++------- .../latest/sql/SqlLatestInsertTsRepository.java | 12 ++++++------ dao/src/main/resources/sql/schema-entities.sql | 8 ++++---- dao/src/main/resources/sql/schema-timescale.sql | 3 +++ .../main/resources/sql/schema-ts-latest-psql.sql | 10 +++------- .../test/resources/sql/psql/drop-all-tables.sql | 3 ++- 8 files changed, 31 insertions(+), 33 deletions(-) rename dao/src/main/java/org/thingsboard/server/dao/{AbstractSequenceInsertRepository.java => AbstractVersionedInsertRepository.java} (93%) diff --git a/application/src/main/java/org/thingsboard/server/controller/DeviceController.java b/application/src/main/java/org/thingsboard/server/controller/DeviceController.java index 8544f60ca0..fedbd48503 100644 --- a/application/src/main/java/org/thingsboard/server/controller/DeviceController.java +++ b/application/src/main/java/org/thingsboard/server/controller/DeviceController.java @@ -20,7 +20,6 @@ import com.google.common.util.concurrent.Futures; import com.google.common.util.concurrent.ListenableFuture; import com.google.common.util.concurrent.MoreExecutors; import io.swagger.v3.oas.annotations.Parameter; -import io.swagger.v3.oas.annotations.media.ArraySchema; import io.swagger.v3.oas.annotations.media.Content; import io.swagger.v3.oas.annotations.media.Schema; import io.swagger.v3.oas.annotations.responses.ApiResponse; @@ -31,7 +30,6 @@ import org.springframework.http.HttpStatus; import org.springframework.http.MediaType; import org.springframework.http.ResponseEntity; import org.springframework.security.access.prepost.PreAuthorize; -import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestBody; @@ -490,7 +488,7 @@ public class DeviceController extends BaseController { @RequestMapping(value = "/devices", params = {"deviceIds"}, method = RequestMethod.GET) @ResponseBody public List getDevicesByIds( - @Parameter(description = "A list of devices ids, separated by comma ','", array = @ArraySchema(schema = @Schema(type = "string"))) + @Parameter(description = "A list of devices ids, separated by comma ','") @RequestParam("deviceIds") String[] strDeviceIds) throws ThingsboardException, ExecutionException, InterruptedException { checkArrayParameter("deviceIds", strDeviceIds); SecurityUser user = getCurrentUser(); diff --git a/dao/src/main/java/org/thingsboard/server/dao/AbstractSequenceInsertRepository.java b/dao/src/main/java/org/thingsboard/server/dao/AbstractVersionedInsertRepository.java similarity index 93% rename from dao/src/main/java/org/thingsboard/server/dao/AbstractSequenceInsertRepository.java rename to dao/src/main/java/org/thingsboard/server/dao/AbstractVersionedInsertRepository.java index 0808f5341f..cb92ca5e1f 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/AbstractSequenceInsertRepository.java +++ b/dao/src/main/java/org/thingsboard/server/dao/AbstractVersionedInsertRepository.java @@ -29,9 +29,9 @@ import java.util.ArrayList; import java.util.List; import java.util.Map; -public abstract class AbstractSequenceInsertRepository extends AbstractInsertRepository { +public abstract class AbstractVersionedInsertRepository extends AbstractInsertRepository { - public static final String SEQ_NUMBER = "seq_number"; + public static final String VERSION_COLUMN = "version"; public List saveOrUpdate(List entities) { return transactionTemplate.execute(status -> { @@ -54,7 +54,7 @@ public abstract class AbstractSequenceInsertRepository extends AbstractInsert seqNumbers.add(0L); toInsertIndexes.add(i); } else { - seqNumbers.add((Long) seqNumbersList.get(keyHolderIndex).get(SEQ_NUMBER)); + seqNumbers.add((Long) seqNumbersList.get(keyHolderIndex).get(VERSION_COLUMN)); keyHolderIndex++; } } @@ -68,7 +68,7 @@ public abstract class AbstractSequenceInsertRepository extends AbstractInsert seqNumbersList = keyHolder.getKeyList(); for (int i = 0; i < seqNumbersList.size(); i++) { - seqNumbers.set(toInsertIndexes.get(i), (Long) seqNumbersList.get(i).get(SEQ_NUMBER)); + seqNumbers.set(toInsertIndexes.get(i), (Long) seqNumbersList.get(i).get(VERSION_COLUMN)); } return seqNumbers; @@ -113,7 +113,7 @@ public abstract class AbstractSequenceInsertRepository extends AbstractInsert private record SequencePreparedStatementCreator(String sql) implements PreparedStatementCreator, SqlProvider { - private static final String[] COLUMNS = {SEQ_NUMBER}; + private static final String[] COLUMNS = {VERSION_COLUMN}; @Override public PreparedStatement createPreparedStatement(Connection con) throws SQLException { diff --git a/dao/src/main/java/org/thingsboard/server/dao/sql/attributes/AttributeKvInsertRepository.java b/dao/src/main/java/org/thingsboard/server/dao/sql/attributes/AttributeKvInsertRepository.java index 9e188d39b1..586ee3c0ca 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/sql/attributes/AttributeKvInsertRepository.java +++ b/dao/src/main/java/org/thingsboard/server/dao/sql/attributes/AttributeKvInsertRepository.java @@ -17,7 +17,7 @@ package org.thingsboard.server.dao.sql.attributes; import org.springframework.stereotype.Repository; import org.springframework.transaction.annotation.Transactional; -import org.thingsboard.server.dao.AbstractSequenceInsertRepository; +import org.thingsboard.server.dao.AbstractVersionedInsertRepository; import org.thingsboard.server.dao.model.sql.AttributeKvEntity; import org.thingsboard.server.dao.util.SqlDao; @@ -29,16 +29,16 @@ import java.util.List; @Repository @Transactional @SqlDao -public class AttributeKvInsertRepository extends AbstractSequenceInsertRepository { +public class AttributeKvInsertRepository extends AbstractVersionedInsertRepository { - private static final String BATCH_UPDATE = "UPDATE attribute_kv SET str_v = ?, long_v = ?, dbl_v = ?, bool_v = ?, json_v = cast(? AS json), last_update_ts = ?, seq_number = nextval('attribute_kv_latest_seq') " + - "WHERE entity_id = ? and attribute_type =? and attribute_key = ? RETURNING seq_number;"; + private static final String BATCH_UPDATE = "UPDATE attribute_kv SET str_v = ?, long_v = ?, dbl_v = ?, bool_v = ?, json_v = cast(? AS json), last_update_ts = ?, version = nextval('attribute_kv_version_seq') " + + "WHERE entity_id = ? and attribute_type =? and attribute_key = ? RETURNING version;"; private static final String INSERT_OR_UPDATE = - "INSERT INTO attribute_kv (entity_id, attribute_type, attribute_key, str_v, long_v, dbl_v, bool_v, json_v, last_update_ts, seq_number) " + - "VALUES(?, ?, ?, ?, ?, ?, ?, cast(? AS json), ?, nextval('attribute_kv_latest_seq')) " + + "INSERT INTO attribute_kv (entity_id, attribute_type, attribute_key, str_v, long_v, dbl_v, bool_v, json_v, last_update_ts, version) " + + "VALUES(?, ?, ?, ?, ?, ?, ?, cast(? AS json), ?, nextval('attribute_kv_version_seq')) " + "ON CONFLICT (entity_id, attribute_type, attribute_key) " + - "DO UPDATE SET str_v = ?, long_v = ?, dbl_v = ?, bool_v = ?, json_v = cast(? AS json), last_update_ts = ?, seq_number = nextval('attribute_kv_latest_seq') RETURNING seq_number;"; + "DO UPDATE SET str_v = ?, long_v = ?, dbl_v = ?, bool_v = ?, json_v = cast(? AS json), last_update_ts = ?, version = nextval('attribute_kv_version_seq') RETURNING version;"; @Override protected void setOnBatchUpdateValues(PreparedStatement ps, int i, List entities) throws SQLException { diff --git a/dao/src/main/java/org/thingsboard/server/dao/sqlts/insert/latest/sql/SqlLatestInsertTsRepository.java b/dao/src/main/java/org/thingsboard/server/dao/sqlts/insert/latest/sql/SqlLatestInsertTsRepository.java index 5b953dfe59..323eec0851 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/sqlts/insert/latest/sql/SqlLatestInsertTsRepository.java +++ b/dao/src/main/java/org/thingsboard/server/dao/sqlts/insert/latest/sql/SqlLatestInsertTsRepository.java @@ -19,7 +19,7 @@ import jakarta.annotation.PostConstruct; import org.springframework.beans.factory.annotation.Value; import org.springframework.stereotype.Repository; import org.springframework.transaction.annotation.Transactional; -import org.thingsboard.server.dao.AbstractSequenceInsertRepository; +import org.thingsboard.server.dao.AbstractVersionedInsertRepository; import org.thingsboard.server.dao.model.sqlts.latest.TsKvLatestEntity; import org.thingsboard.server.dao.sqlts.insert.latest.InsertLatestTsRepository; import org.thingsboard.server.dao.util.SqlDao; @@ -35,23 +35,23 @@ import java.util.List; @Repository @Transactional @SqlDao -public class SqlLatestInsertTsRepository extends AbstractSequenceInsertRepository implements InsertLatestTsRepository { +public class SqlLatestInsertTsRepository extends AbstractVersionedInsertRepository implements InsertLatestTsRepository { @Value("${sql.ts_latest.update_by_latest_ts:true}") private Boolean updateByLatestTs; private static final String BATCH_UPDATE = - "UPDATE ts_kv_latest SET ts = ?, bool_v = ?, str_v = ?, long_v = ?, dbl_v = ?, json_v = cast(? AS json), seq_number = nextval('ts_kv_latest_seq') WHERE entity_id = ? AND key = ?"; + "UPDATE ts_kv_latest SET ts = ?, bool_v = ?, str_v = ?, long_v = ?, dbl_v = ?, json_v = cast(? AS json), version = nextval('ts_kv_latest_version_seq') WHERE entity_id = ? AND key = ?"; private static final String INSERT_OR_UPDATE = - "INSERT INTO ts_kv_latest (entity_id, key, ts, bool_v, str_v, long_v, dbl_v, json_v, seq_number) VALUES(?, ?, ?, ?, ?, ?, ?, cast(? AS json), nextval('ts_kv_latest_seq')) " + - "ON CONFLICT (entity_id, key) DO UPDATE SET ts = ?, bool_v = ?, str_v = ?, long_v = ?, dbl_v = ?, json_v = cast(? AS json), seq_number = nextval('ts_kv_latest_seq')"; + "INSERT INTO ts_kv_latest (entity_id, key, ts, bool_v, str_v, long_v, dbl_v, json_v, version) VALUES(?, ?, ?, ?, ?, ?, ?, cast(? AS json), nextval('ts_kv_latest_version_seq')) " + + "ON CONFLICT (entity_id, key) DO UPDATE SET ts = ?, bool_v = ?, str_v = ?, long_v = ?, dbl_v = ?, json_v = cast(? AS json), version = nextval('ts_kv_latest_version_seq')"; private static final String BATCH_UPDATE_BY_LATEST_TS = BATCH_UPDATE + " AND ts_kv_latest.ts <= ?"; private static final String INSERT_OR_UPDATE_BY_LATEST_TS = INSERT_OR_UPDATE + " WHERE ts_kv_latest.ts <= ?"; - private static final String RETURNING = " RETURNING seq_number"; + private static final String RETURNING = " RETURNING version"; private String batchUpdateQuery; private String insertOrUpdateQuery; diff --git a/dao/src/main/resources/sql/schema-entities.sql b/dao/src/main/resources/sql/schema-entities.sql index a26262970c..45deaf931d 100644 --- a/dao/src/main/resources/sql/schema-entities.sql +++ b/dao/src/main/resources/sql/schema-entities.sql @@ -102,7 +102,7 @@ CREATE TABLE IF NOT EXISTS audit_log ( action_failure_details varchar(1000000) ) PARTITION BY RANGE (created_time); -CREATE SEQUENCE IF NOT EXISTS attribute_kv_latest_seq cache 1000; +CREATE SEQUENCE IF NOT EXISTS attribute_kv_version_seq cache 1000; CREATE TABLE IF NOT EXISTS attribute_kv ( entity_id uuid, @@ -114,7 +114,7 @@ CREATE TABLE IF NOT EXISTS attribute_kv ( dbl_v double precision, json_v json, last_update_ts bigint, - seq_number bigint, + version bigint, CONSTRAINT attribute_kv_pkey PRIMARY KEY (entity_id, attribute_type, attribute_key) ); @@ -541,7 +541,7 @@ CREATE TABLE IF NOT EXISTS entity_view ( CONSTRAINT entity_view_external_id_unq_key UNIQUE (tenant_id, external_id) ); -CREATE SEQUENCE IF NOT EXISTS ts_kv_latest_seq cache 1000; +CREATE SEQUENCE IF NOT EXISTS ts_kv_latest_version_seq cache 1000; CREATE TABLE IF NOT EXISTS ts_kv_latest ( @@ -553,7 +553,7 @@ CREATE TABLE IF NOT EXISTS ts_kv_latest long_v bigint, dbl_v double precision, json_v json, - seq_number bigint, + version bigint, CONSTRAINT ts_kv_latest_pkey PRIMARY KEY (entity_id, key) ); diff --git a/dao/src/main/resources/sql/schema-timescale.sql b/dao/src/main/resources/sql/schema-timescale.sql index ecd8aa1e9d..e5d44cb24a 100644 --- a/dao/src/main/resources/sql/schema-timescale.sql +++ b/dao/src/main/resources/sql/schema-timescale.sql @@ -34,6 +34,8 @@ CREATE TABLE IF NOT EXISTS key_dictionary ( CONSTRAINT key_dictionary_id_pkey PRIMARY KEY (key) ); +CREATE SEQUENCE IF NOT EXISTS ts_kv_latest_version_seq cache 1000; + CREATE TABLE IF NOT EXISTS ts_kv_latest ( entity_id uuid NOT NULL, key int NOT NULL, @@ -43,6 +45,7 @@ CREATE TABLE IF NOT EXISTS ts_kv_latest ( long_v bigint, dbl_v double precision, json_v json, + version bigint, CONSTRAINT ts_kv_latest_pkey PRIMARY KEY (entity_id, key) ); diff --git a/dao/src/main/resources/sql/schema-ts-latest-psql.sql b/dao/src/main/resources/sql/schema-ts-latest-psql.sql index c6701315b4..adae100823 100644 --- a/dao/src/main/resources/sql/schema-ts-latest-psql.sql +++ b/dao/src/main/resources/sql/schema-ts-latest-psql.sql @@ -14,6 +14,8 @@ -- limitations under the License. -- +CREATE SEQUENCE IF NOT EXISTS ts_kv_latest_version_seq cache 1000; + CREATE TABLE IF NOT EXISTS ts_kv_latest ( entity_id uuid NOT NULL, @@ -24,12 +26,6 @@ CREATE TABLE IF NOT EXISTS ts_kv_latest long_v bigint, dbl_v double precision, json_v json, + version bigint, CONSTRAINT ts_kv_latest_pkey PRIMARY KEY (entity_id, key) -); - -CREATE TABLE IF NOT EXISTS ts_kv_dictionary -( - key varchar(255) NOT NULL, - key_id serial UNIQUE, - CONSTRAINT ts_key_id_pkey PRIMARY KEY (key) ); \ No newline at end of file diff --git a/dao/src/test/resources/sql/psql/drop-all-tables.sql b/dao/src/test/resources/sql/psql/drop-all-tables.sql index 3b1b37242f..c731e239af 100644 --- a/dao/src/test/resources/sql/psql/drop-all-tables.sql +++ b/dao/src/test/resources/sql/psql/drop-all-tables.sql @@ -23,6 +23,7 @@ DROP TABLE IF EXISTS alarm_type; DROP TABLE IF EXISTS asset; DROP TABLE IF EXISTS audit_log; DROP TABLE IF EXISTS attribute_kv; +DROP SEQUENCE IF EXISTS attribute_kv_version_seq; DROP TABLE IF EXISTS component_descriptor; DROP TABLE IF EXISTS customer; DROP TABLE IF EXISTS device; @@ -37,7 +38,7 @@ DROP TABLE IF EXISTS tenant; DROP TABLE IF EXISTS ts_kv; DROP TABLE IF EXISTS ts_kv_latest; DROP TABLE IF EXISTS ts_kv_dictionary; -DROP SEQUENCE IF EXISTS ts_kv_latest_seq; +DROP SEQUENCE IF EXISTS ts_kv_latest_version_seq; DROP TABLE IF EXISTS user_credentials; DROP TABLE IF EXISTS widgets_bundle_widget; DROP TABLE IF EXISTS widget_type; From e84447d28e145bc3676239f850429afd1446e72f Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Tue, 11 Jun 2024 18:44:50 +0300 Subject: [PATCH 063/442] UI: Implement SCADA layout. --- .../system/widget_types/power_button.json | 4 +- .../core/services/dashboard-utils.service.ts | 92 ++++-- ui-ngx/src/app/core/services/menu.service.ts | 4 +- .../dashboard-page.component.ts | 14 + .../dashboard-settings-dialog.component.html | 283 ++++++++++-------- .../dashboard-settings-dialog.component.ts | 39 ++- .../layout/dashboard-layout.component.html | 10 +- .../layout/dashboard-layout.component.ts | 20 ++ .../scada/scada-symbol-widget.component.scss | 1 + .../widget/lib/scada/scada-symbol.models.ts | 8 +- .../home/pages/admin/admin-routing.module.ts | 4 +- .../scada-symbol-editor.component.scss | 1 + .../scada-symbol-editor.models.ts | 8 +- .../scada-symbol/scada-symbol.component.ts | 12 +- .../src/app/shared/models/dashboard.models.ts | 1 + .../shared/models/widget-settings.models.ts | 18 ++ .../assets/locale/locale.constant-en_US.json | 3 +- 17 files changed, 329 insertions(+), 193 deletions(-) diff --git a/application/src/main/data/json/system/widget_types/power_button.json b/application/src/main/data/json/system/widget_types/power_button.json index d90439d82f..9b47ec1851 100644 --- a/application/src/main/data/json/system/widget_types/power_button.json +++ b/application/src/main/data/json/system/widget_types/power_button.json @@ -2,7 +2,7 @@ "fqn": "power_button", "name": "Power button", "deprecated": false, - "image": "tb-image:cG93ZXItYnV0dG9uLnN2Zw==:IlBvd2VyIGJ1dHRvbiIgc3lzdGVtIHdpZGdldCBpbWFnZQ==;data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE2MCIgdmlld0JveD0iMCAwIDIwMCAxNjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2lfNDU4OF84ODQyMCkiPgo8cGF0aCBkPSJNMTQ2LjUgODBDMTQ2LjUgMTA1LjEyOSAxMjUuNjgxIDEyNS41IDEwMCAxMjUuNUM3NC4zMTg4IDEyNS41IDUzLjUgMTA1LjEyOSA1My41IDgwQzUzLjUgNTQuODcxIDc0LjMxODggMzQuNSAxMDAgMzQuNUMxMjUuNjgxIDM0LjUgMTQ2LjUgNTQuODcxIDE0Ni41IDgwWiIgZmlsbD0iIzNGNTJERCIvPgo8L2c+CjxwYXRoIGQ9Ik0xNDUuNSA4MEMxNDUuNSAxMDQuNTU2IDEyNS4xNSAxMjQuNSAxMDAgMTI0LjVDNzQuODUwNCAxMjQuNSA1NC41IDEwNC41NTYgNTQuNSA4MEM1NC41IDU1LjQ0MzcgNzQuODUwNCAzNS41IDEwMCAzNS41QzEyNS4xNSAzNS41IDE0NS41IDU1LjQ0MzcgMTQ1LjUgODBaIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiLz4KPGcgZmlsdGVyPSJ1cmwoI2ZpbHRlcjFfZF80NTg4Xzg4NDIwKSI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTAwIDEzNS41QzEzMS4yMDQgMTM1LjUgMTU2LjUgMTEwLjY1MiAxNTYuNSA4MEMxNTYuNSA0OS4zNDgyIDEzMS4yMDQgMjQuNSAxMDAgMjQuNUM2OC43OTU5IDI0LjUgNDMuNSA0OS4zNDgyIDQzLjUgODBDNDMuNSAxMTAuNjUyIDY4Ljc5NTkgMTM1LjUgMTAwIDEzNS41Wk0xMDAgMTI1LjVDMTI1LjY4MSAxMjUuNSAxNDYuNSAxMDUuMTI5IDE0Ni41IDgwQzE0Ni41IDU0Ljg3MSAxMjUuNjgxIDM0LjUgMTAwIDM0LjVDNzQuMzE4OCAzNC41IDUzLjUgNTQuODcxIDUzLjUgODBDNTMuNSAxMDUuMTI5IDc0LjMxODggMTI1LjUgMTAwIDEyNS41WiIgZmlsbD0idXJsKCNwYWludDBfbGluZWFyXzQ1ODhfODg0MjApIi8+CjwvZz4KPHBhdGggZD0iTTk4LjM1NzQgNzkuMTg1NVY4MC4xNzM4Qzk4LjM1NzQgODEuMzQ4MyA5OC4yMTA2IDgyLjQwMSA5Ny45MTcgODMuMzMyQzk3LjYyMzQgODQuMjYzIDk3LjIwMDggODUuMDU0NCA5Ni42NDk0IDg1LjcwNjFDOTYuMDk4IDg2LjM1NzcgOTUuNDM1NSA4Ni44NTU1IDk0LjY2MjEgODcuMTk5MkM5My44OTU4IDg3LjU0MyA5My4wMzY1IDg3LjcxNDggOTIuMDg0IDg3LjcxNDhDOTEuMTYwMiA4Ny43MTQ4IDkwLjMxMTUgODcuNTQzIDg5LjUzODEgODcuMTk5MkM4OC43NzE4IDg2Ljg1NTUgODguMTA1OCA4Ni4zNTc3IDg3LjU0IDg1LjcwNjFDODYuOTgxNCA4NS4wNTQ0IDg2LjU0ODIgODQuMjYzIDg2LjI0MDIgODMuMzMyQzg1LjkzMjMgODIuNDAxIDg1Ljc3ODMgODEuMzQ4MyA4NS43NzgzIDgwLjE3MzhWNzkuMTg1NUM4NS43NzgzIDc4LjAxMTEgODUuOTI4NyA3Ni45NjE5IDg2LjIyOTUgNzYuMDM4MUM4Ni41Mzc0IDc1LjEwNzEgODYuOTcwNyA3NC4zMTU4IDg3LjUyOTMgNzMuNjY0MUM4OC4wODc5IDczLjAwNTIgODguNzUwMyA3Mi41MDM5IDg5LjUxNjYgNzIuMTYwMkM5MC4yOSA3MS44MTY0IDkxLjEzODcgNzEuNjQ0NSA5Mi4wNjI1IDcxLjY0NDVDOTMuMDE1IDcxLjY0NDUgOTMuODc0MyA3MS44MTY0IDk0LjY0MDYgNzIuMTYwMkM5NS40MTQxIDcyLjUwMzkgOTYuMDc2NSA3My4wMDUyIDk2LjYyNzkgNzMuNjY0MUM5Ny4xODY1IDc0LjMxNTggOTcuNjEyNiA3NS4xMDcxIDk3LjkwNjIgNzYuMDM4MUM5OC4yMDcgNzYuOTYxOSA5OC4zNTc0IDc4LjAxMTEgOTguMzU3NCA3OS4xODU1Wk05Ni4zMDU3IDgwLjE3MzhWNzkuMTY0MUM5Ni4zMDU3IDc4LjIzMzEgOTYuMjA5IDc3LjQwOTUgOTYuMDE1NiA3Ni42OTM0Qzk1LjgyOTQgNzUuOTc3MiA5NS41NTM3IDc1LjM3NTcgOTUuMTg4NSA3NC44ODg3Qzk0LjgyMzIgNzQuNDAxNyA5NC4zNzU3IDc0LjAzMjkgOTMuODQ1NyA3My43ODIyQzkzLjMyMjkgNzMuNTMxNiA5Mi43Mjg1IDczLjQwNjIgOTIuMDYyNSA3My40MDYyQzkxLjQxOCA3My40MDYyIDkwLjgzNDMgNzMuNTMxNiA5MC4zMTE1IDczLjc4MjJDODkuNzk1OSA3NC4wMzI5IDg5LjM1MTkgNzQuNDAxNyA4OC45Nzk1IDc0Ljg4ODdDODguNjE0MyA3NS4zNzU3IDg4LjMzMTQgNzUuOTc3MiA4OC4xMzA5IDc2LjY5MzRDODcuOTMwMyA3Ny40MDk1IDg3LjgzMDEgNzguMjMzMSA4Ny44MzAxIDc5LjE2NDFWODAuMTczOEM4Ny44MzAxIDgxLjExMiA4Ny45MzAzIDgxLjk0MjcgODguMTMwOSA4Mi42NjZDODguMzMxNCA4My4zODIyIDg4LjYxNzggODMuOTg3MyA4OC45OTAyIDg0LjQ4MTRDODkuMzY5OCA4NC45Njg0IDg5LjgxNzQgODUuMzM3MiA5MC4zMzMgODUuNTg3OUM5MC44NTU4IDg1LjgzODUgOTEuNDM5NSA4NS45NjM5IDkyLjA4NCA4NS45NjM5QzkyLjc1NzIgODUuOTYzOSA5My4zNTUxIDg1LjgzODUgOTMuODc3OSA4NS41ODc5Qzk0LjQwMDcgODUuMzM3MiA5NC44NDExIDg0Ljk2ODQgOTUuMTk5MiA4NC40ODE0Qzk1LjU2NDUgODMuOTg3MyA5NS44NDAyIDgzLjM4MjIgOTYuMDI2NCA4Mi42NjZDOTYuMjEyNiA4MS45NDI3IDk2LjMwNTcgODEuMTEyIDk2LjMwNTcgODAuMTczOFpNMTEzLjQ5MyA3MS44NTk0Vjg3LjVIMTExLjQwOUwxMDMuNTM1IDc1LjQzNjVWODcuNUgxMDEuNDYyVjcxLjg1OTRIMTAzLjUzNUwxMTEuNDQxIDgzLjk1NTFWNzEuODU5NEgxMTMuNDkzWiIgZmlsbD0id2hpdGUiLz4KPGRlZnM+CjxmaWx0ZXIgaWQ9ImZpbHRlcjBfaV80NTg4Xzg4NDIwIiB4PSI0OC41IiB5PSIzNC41IiB3aWR0aD0iOTgiIGhlaWdodD0iOTYiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz4KPGZlQ29sb3JNYXRyaXggaW49IlNvdXJjZUFscGhhIiB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMTI3IDAiIHJlc3VsdD0iaGFyZEFscGhhIi8+CjxmZU9mZnNldCBkeD0iLTUiIGR5PSI1Ii8+CjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjQiLz4KPGZlQ29tcG9zaXRlIGluMj0iaGFyZEFscGhhIiBvcGVyYXRvcj0iYXJpdGhtZXRpYyIgazI9Ii0xIiBrMz0iMSIvPgo8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMC4xNSAwIi8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW4yPSJzaGFwZSIgcmVzdWx0PSJlZmZlY3QxX2lubmVyU2hhZG93XzQ1ODhfODg0MjAiLz4KPC9maWx0ZXI+CjxmaWx0ZXIgaWQ9ImZpbHRlcjFfZF80NTg4Xzg4NDIwIiB4PSIzNS41IiB5PSIyMC41IiB3aWR0aD0iMTI5IiBoZWlnaHQ9IjEyNyIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVDb2xvck1hdHJpeCBpbj0iU291cmNlQWxwaGEiIHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAxMjcgMCIgcmVzdWx0PSJoYXJkQWxwaGEiLz4KPGZlT2Zmc2V0IGR5PSI0Ii8+CjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjQiLz4KPGZlQ29tcG9zaXRlIGluMj0iaGFyZEFscGhhIiBvcGVyYXRvcj0ib3V0Ii8+CjxmZUNvbG9yTWF0cml4IHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA4IDAiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJlZmZlY3QxX2Ryb3BTaGFkb3dfNDU4OF84ODQyMCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9ImVmZmVjdDFfZHJvcFNoYWRvd180NTg4Xzg4NDIwIiByZXN1bHQ9InNoYXBlIi8+CjwvZmlsdGVyPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfNDU4OF84ODQyMCIgeDE9IjY1Ljg5NjQiIHkxPSIxMjQuNSIgeDI9IjEyOS41MTkiIHkyPSIzMy45MjQ4IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiNDQ0NDQ0MiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSJ3aGl0ZSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8L2RlZnM+Cjwvc3ZnPgo=", + "image": "tb-image:cG93ZXItYnV0dG9uLnN2Zw==:IlBvd2VyIGJ1dHRvbiIgc3lzdGVtIHdpZGdldCBpbWFnZQ==:SU1BR0U=;data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE2MCIgdmlld0JveD0iMCAwIDIwMCAxNjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2lfNDU4OF84ODQyMCkiPgo8cGF0aCBkPSJNMTQ2LjUgODBDMTQ2LjUgMTA1LjEyOSAxMjUuNjgxIDEyNS41IDEwMCAxMjUuNUM3NC4zMTg4IDEyNS41IDUzLjUgMTA1LjEyOSA1My41IDgwQzUzLjUgNTQuODcxIDc0LjMxODggMzQuNSAxMDAgMzQuNUMxMjUuNjgxIDM0LjUgMTQ2LjUgNTQuODcxIDE0Ni41IDgwWiIgZmlsbD0iIzNGNTJERCIvPgo8L2c+CjxwYXRoIGQ9Ik0xNDUuNSA4MEMxNDUuNSAxMDQuNTU2IDEyNS4xNSAxMjQuNSAxMDAgMTI0LjVDNzQuODUwNCAxMjQuNSA1NC41IDEwNC41NTYgNTQuNSA4MEM1NC41IDU1LjQ0MzcgNzQuODUwNCAzNS41IDEwMCAzNS41QzEyNS4xNSAzNS41IDE0NS41IDU1LjQ0MzcgMTQ1LjUgODBaIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiLz4KPGcgZmlsdGVyPSJ1cmwoI2ZpbHRlcjFfZF80NTg4Xzg4NDIwKSI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTAwIDEzNS41QzEzMS4yMDQgMTM1LjUgMTU2LjUgMTEwLjY1MiAxNTYuNSA4MEMxNTYuNSA0OS4zNDgyIDEzMS4yMDQgMjQuNSAxMDAgMjQuNUM2OC43OTU5IDI0LjUgNDMuNSA0OS4zNDgyIDQzLjUgODBDNDMuNSAxMTAuNjUyIDY4Ljc5NTkgMTM1LjUgMTAwIDEzNS41Wk0xMDAgMTI1LjVDMTI1LjY4MSAxMjUuNSAxNDYuNSAxMDUuMTI5IDE0Ni41IDgwQzE0Ni41IDU0Ljg3MSAxMjUuNjgxIDM0LjUgMTAwIDM0LjVDNzQuMzE4OCAzNC41IDUzLjUgNTQuODcxIDUzLjUgODBDNTMuNSAxMDUuMTI5IDc0LjMxODggMTI1LjUgMTAwIDEyNS41WiIgZmlsbD0idXJsKCNwYWludDBfbGluZWFyXzQ1ODhfODg0MjApIi8+CjwvZz4KPHBhdGggZD0iTTk4LjM1NzQgNzkuMTg1NVY4MC4xNzM4Qzk4LjM1NzQgODEuMzQ4MyA5OC4yMTA2IDgyLjQwMSA5Ny45MTcgODMuMzMyQzk3LjYyMzQgODQuMjYzIDk3LjIwMDggODUuMDU0NCA5Ni42NDk0IDg1LjcwNjFDOTYuMDk4IDg2LjM1NzcgOTUuNDM1NSA4Ni44NTU1IDk0LjY2MjEgODcuMTk5MkM5My44OTU4IDg3LjU0MyA5My4wMzY1IDg3LjcxNDggOTIuMDg0IDg3LjcxNDhDOTEuMTYwMiA4Ny43MTQ4IDkwLjMxMTUgODcuNTQzIDg5LjUzODEgODcuMTk5MkM4OC43NzE4IDg2Ljg1NTUgODguMTA1OCA4Ni4zNTc3IDg3LjU0IDg1LjcwNjFDODYuOTgxNCA4NS4wNTQ0IDg2LjU0ODIgODQuMjYzIDg2LjI0MDIgODMuMzMyQzg1LjkzMjMgODIuNDAxIDg1Ljc3ODMgODEuMzQ4MyA4NS43NzgzIDgwLjE3MzhWNzkuMTg1NUM4NS43NzgzIDc4LjAxMTEgODUuOTI4NyA3Ni45NjE5IDg2LjIyOTUgNzYuMDM4MUM4Ni41Mzc0IDc1LjEwNzEgODYuOTcwNyA3NC4zMTU4IDg3LjUyOTMgNzMuNjY0MUM4OC4wODc5IDczLjAwNTIgODguNzUwMyA3Mi41MDM5IDg5LjUxNjYgNzIuMTYwMkM5MC4yOSA3MS44MTY0IDkxLjEzODcgNzEuNjQ0NSA5Mi4wNjI1IDcxLjY0NDVDOTMuMDE1IDcxLjY0NDUgOTMuODc0MyA3MS44MTY0IDk0LjY0MDYgNzIuMTYwMkM5NS40MTQxIDcyLjUwMzkgOTYuMDc2NSA3My4wMDUyIDk2LjYyNzkgNzMuNjY0MUM5Ny4xODY1IDc0LjMxNTggOTcuNjEyNiA3NS4xMDcxIDk3LjkwNjIgNzYuMDM4MUM5OC4yMDcgNzYuOTYxOSA5OC4zNTc0IDc4LjAxMTEgOTguMzU3NCA3OS4xODU1Wk05Ni4zMDU3IDgwLjE3MzhWNzkuMTY0MUM5Ni4zMDU3IDc4LjIzMzEgOTYuMjA5IDc3LjQwOTUgOTYuMDE1NiA3Ni42OTM0Qzk1LjgyOTQgNzUuOTc3MiA5NS41NTM3IDc1LjM3NTcgOTUuMTg4NSA3NC44ODg3Qzk0LjgyMzIgNzQuNDAxNyA5NC4zNzU3IDc0LjAzMjkgOTMuODQ1NyA3My43ODIyQzkzLjMyMjkgNzMuNTMxNiA5Mi43Mjg1IDczLjQwNjIgOTIuMDYyNSA3My40MDYyQzkxLjQxOCA3My40MDYyIDkwLjgzNDMgNzMuNTMxNiA5MC4zMTE1IDczLjc4MjJDODkuNzk1OSA3NC4wMzI5IDg5LjM1MTkgNzQuNDAxNyA4OC45Nzk1IDc0Ljg4ODdDODguNjE0MyA3NS4zNzU3IDg4LjMzMTQgNzUuOTc3MiA4OC4xMzA5IDc2LjY5MzRDODcuOTMwMyA3Ny40MDk1IDg3LjgzMDEgNzguMjMzMSA4Ny44MzAxIDc5LjE2NDFWODAuMTczOEM4Ny44MzAxIDgxLjExMiA4Ny45MzAzIDgxLjk0MjcgODguMTMwOSA4Mi42NjZDODguMzMxNCA4My4zODIyIDg4LjYxNzggODMuOTg3MyA4OC45OTAyIDg0LjQ4MTRDODkuMzY5OCA4NC45Njg0IDg5LjgxNzQgODUuMzM3MiA5MC4zMzMgODUuNTg3OUM5MC44NTU4IDg1LjgzODUgOTEuNDM5NSA4NS45NjM5IDkyLjA4NCA4NS45NjM5QzkyLjc1NzIgODUuOTYzOSA5My4zNTUxIDg1LjgzODUgOTMuODc3OSA4NS41ODc5Qzk0LjQwMDcgODUuMzM3MiA5NC44NDExIDg0Ljk2ODQgOTUuMTk5MiA4NC40ODE0Qzk1LjU2NDUgODMuOTg3MyA5NS44NDAyIDgzLjM4MjIgOTYuMDI2NCA4Mi42NjZDOTYuMjEyNiA4MS45NDI3IDk2LjMwNTcgODEuMTEyIDk2LjMwNTcgODAuMTczOFpNMTEzLjQ5MyA3MS44NTk0Vjg3LjVIMTExLjQwOUwxMDMuNTM1IDc1LjQzNjVWODcuNUgxMDEuNDYyVjcxLjg1OTRIMTAzLjUzNUwxMTEuNDQxIDgzLjk1NTFWNzEuODU5NEgxMTMuNDkzWiIgZmlsbD0id2hpdGUiLz4KPGRlZnM+CjxmaWx0ZXIgaWQ9ImZpbHRlcjBfaV80NTg4Xzg4NDIwIiB4PSI0OC41IiB5PSIzNC41IiB3aWR0aD0iOTgiIGhlaWdodD0iOTYiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz4KPGZlQ29sb3JNYXRyaXggaW49IlNvdXJjZUFscGhhIiB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMTI3IDAiIHJlc3VsdD0iaGFyZEFscGhhIi8+CjxmZU9mZnNldCBkeD0iLTUiIGR5PSI1Ii8+CjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjQiLz4KPGZlQ29tcG9zaXRlIGluMj0iaGFyZEFscGhhIiBvcGVyYXRvcj0iYXJpdGhtZXRpYyIgazI9Ii0xIiBrMz0iMSIvPgo8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMC4xNSAwIi8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW4yPSJzaGFwZSIgcmVzdWx0PSJlZmZlY3QxX2lubmVyU2hhZG93XzQ1ODhfODg0MjAiLz4KPC9maWx0ZXI+CjxmaWx0ZXIgaWQ9ImZpbHRlcjFfZF80NTg4Xzg4NDIwIiB4PSIzNS41IiB5PSIyMC41IiB3aWR0aD0iMTI5IiBoZWlnaHQ9IjEyNyIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVDb2xvck1hdHJpeCBpbj0iU291cmNlQWxwaGEiIHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAxMjcgMCIgcmVzdWx0PSJoYXJkQWxwaGEiLz4KPGZlT2Zmc2V0IGR5PSI0Ii8+CjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjQiLz4KPGZlQ29tcG9zaXRlIGluMj0iaGFyZEFscGhhIiBvcGVyYXRvcj0ib3V0Ii8+CjxmZUNvbG9yTWF0cml4IHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA4IDAiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJlZmZlY3QxX2Ryb3BTaGFkb3dfNDU4OF84ODQyMCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9ImVmZmVjdDFfZHJvcFNoYWRvd180NTg4Xzg4NDIwIiByZXN1bHQ9InNoYXBlIi8+CjwvZmlsdGVyPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfNDU4OF84ODQyMCIgeDE9IjY1Ljg5NjQiIHkxPSIxMjQuNSIgeDI9IjEyOS41MTkiIHkyPSIzMy45MjQ4IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiNDQ0NDQ0MiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSJ3aGl0ZSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8L2RlZnM+Cjwvc3ZnPgo=", "description": "Sends the command to the device or updates attribute/time-series when the user pushes the button. Widget settings will enable you to configure behavior how to fetch the initial state and what to trigger when power on/off states.", "descriptor": { "type": "rpc", @@ -11,7 +11,7 @@ "resources": [], "templateHtml": "\n", "templateCss": "", - "controllerScript": "self.onInit = function() {\n self.ctx.$scope.actionWidget.onInit();\n}\n\nself.typeParameters = function() {\n return {\n previewWidth: '280px',\n previewHeight: '280px',\n embedTitlePanel: true,\n displayRpcMessageToast: false\n };\n};\n\nself.onDestroy = function() {\n}\n", + "controllerScript": "self.onInit = function() {\n self.ctx.$scope.actionWidget.onInit();\n}\n\nself.typeParameters = function() {\n return {\n previewWidth: '280px',\n previewHeight: '280px',\n embedTitlePanel: true,\n overflowVisible: true,\n displayRpcMessageToast: false\n };\n};\n\nself.onDestroy = function() {\n}\n", "settingsSchema": "", "dataKeySettingsSchema": "{}\n", "settingsDirective": "tb-power-button-widget-settings", diff --git a/ui-ngx/src/app/core/services/dashboard-utils.service.ts b/ui-ngx/src/app/core/services/dashboard-utils.service.ts index ae4d2e5c41..ef367dfb1e 100644 --- a/ui-ngx/src/app/core/services/dashboard-utils.service.ts +++ b/ui-ngx/src/app/core/services/dashboard-utils.service.ts @@ -50,6 +50,7 @@ import { EntityId } from '@app/shared/models/id/entity-id'; import { initModelFromDefaultTimewindow } from '@shared/models/time/time.models'; import { AlarmSearchStatus } from '@shared/models/alarm.models'; import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; +import { BackgroundType, colorBackground, isBackgroundSettings } from '@shared/models/widget-settings.models'; @Injectable({ providedIn: 'root' @@ -332,6 +333,27 @@ export class DashboardUtilsService { return widgetConfig; } + public prepareWidgetForScadaLayout(widget: Widget): Widget { + const config = widget.config; + config.showTitle = false; + config.dropShadow = false; + config.padding = '0'; + config.margin = '0'; + config.backgroundColor = 'rgba(0,0,0,0)'; + const settings = config.settings || {}; + settings.padding = '0'; + const background = settings.background; + if (isBackgroundSettings(background)) { + background.type = BackgroundType.color; + background.color = 'rgba(0,0,0,0)'; + background.overlay.enabled = false; + } else { + settings.background = colorBackground('rgba(0,0,0,0)'); + } + config.settings = settings; + return widget; + } + public validateAndUpdateDatasources(datasources?: Datasource[]): Datasource[] { if (!datasources) { datasources = []; @@ -588,15 +610,17 @@ export class DashboardUtilsService { originalColumns = 24; } const gridSettings = layout.gridSettings; - let columns = 24; - if (gridSettings && gridSettings.columns) { - columns = gridSettings.columns; - } - columns = columns * layoutCount; - if (columns !== originalColumns) { - const ratio = columns / originalColumns; - widgetLayout.sizeX *= ratio; - widgetLayout.sizeY *= ratio; + if (!gridSettings.isScada) { + let columns = 24; + if (gridSettings && gridSettings.columns) { + columns = gridSettings.columns; + } + columns = columns * layoutCount; + if (columns !== originalColumns) { + const ratio = columns / originalColumns; + widgetLayout.sizeX *= ratio; + widgetLayout.sizeY *= ratio; + } } if (row > -1 && column > - 1) { @@ -662,31 +686,33 @@ export class DashboardUtilsService { const columns = gridSettings.columns || 24; const ratio = columns / prevColumns; layout.gridSettings = gridSettings; - let maxRow = 0; - for (const w of Object.keys(layout.widgets)) { - const widget = layout.widgets[w]; - if (!widget.sizeX) { - widget.sizeX = 1; - } - if (!widget.sizeY) { - widget.sizeY = 1; - } - maxRow = Math.max(maxRow, widget.row + widget.sizeY); - } - const newMaxRow = Math.round(maxRow * ratio); - for (const w of Object.keys(layout.widgets)) { - const widget = layout.widgets[w]; - if (widget.row + widget.sizeY === maxRow) { - widget.row = Math.round(widget.row * ratio); - widget.sizeY = newMaxRow - widget.row; - } else { - widget.row = Math.round(widget.row * ratio); - widget.sizeY = Math.round(widget.sizeY * ratio); + if (!gridSettings.isScada) { + let maxRow = 0; + for (const w of Object.keys(layout.widgets)) { + const widget = layout.widgets[w]; + if (!widget.sizeX) { + widget.sizeX = 1; + } + if (!widget.sizeY) { + widget.sizeY = 1; + } + maxRow = Math.max(maxRow, widget.row + widget.sizeY); } - widget.sizeX = Math.round(widget.sizeX * ratio); - widget.col = Math.round(widget.col * ratio); - if (widget.col + widget.sizeX > columns) { - widget.sizeX = columns - widget.col; + const newMaxRow = Math.round(maxRow * ratio); + for (const w of Object.keys(layout.widgets)) { + const widget = layout.widgets[w]; + if (widget.row + widget.sizeY === maxRow) { + widget.row = Math.round(widget.row * ratio); + widget.sizeY = newMaxRow - widget.row; + } else { + widget.row = Math.round(widget.row * ratio); + widget.sizeY = Math.round(widget.sizeY * ratio); + } + widget.sizeX = Math.round(widget.sizeX * ratio); + widget.col = Math.round(widget.col * ratio); + if (widget.col + widget.sizeX > columns) { + widget.sizeX = columns - widget.col; + } } } } diff --git a/ui-ngx/src/app/core/services/menu.service.ts b/ui-ngx/src/app/core/services/menu.service.ts index 3efabfe12a..309d82ebc0 100644 --- a/ui-ngx/src/app/core/services/menu.service.ts +++ b/ui-ngx/src/app/core/services/menu.service.ts @@ -155,7 +155,7 @@ export class MenuService { name: 'scada.symbols', type: 'link', path: '/resources/scada-symbols', - icon: 'precision_manufacturing' + icon: 'view_in_ar' }, { id: 'resources_library', @@ -561,7 +561,7 @@ export class MenuService { name: 'scada.symbols', type: 'link', path: '/resources/scada-symbols', - icon: 'precision_manufacturing' + icon: 'view_in_ar' }, { id: 'resources_library', diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts index 70022fff1b..3e96e13b0a 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts @@ -1163,6 +1163,17 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC this.runChangeDetection(); } + private isAddingToScadaLayout(): boolean { + const layouts = this.dashboardConfiguration.states[this.dashboardCtx.state].layouts; + let layoutIds: DashboardLayoutId[]; + if (this.addingLayoutCtx?.id) { + layoutIds = [this.addingLayoutCtx?.id]; + } else { + layoutIds = Object.keys(layouts) as DashboardLayoutId[]; + } + return layoutIds.every(id => layouts[id].gridSettings.isScada); + } + private selectTargetLayout(): Observable { const layouts = this.dashboardConfiguration.states[this.dashboardCtx.state].layouts; const layoutIds = Object.keys(layouts); @@ -1208,6 +1219,9 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC col: 0 }; newWidget = this.dashboardUtils.validateAndUpdateWidget(newWidget); + if (this.isAddingToScadaLayout()) { + newWidget = this.dashboardUtils.prepareWidgetForScadaLayout(newWidget); + } if (widgetTypeInfo.typeParameters.useCustomDatasources) { this.addWidgetToDashboard(newWidget); } else { diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html index c50fbaef11..e2d0a40cf5 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html @@ -27,129 +27,149 @@ -
-
-
- - dashboard.state-controller +
+
+
+
{{ 'dashboard.state-controller' | translate }}
+ {{ getStatesControllerTranslation(stateControllerId) }} -
- dashboard.title-settings - - {{ 'dashboard.display-title' | translate }} +
+
+
dashboard.title-settings
+
+ + {{ 'dashboard.title' | translate }} - -
-
- dashboard.dashboard-logo-settings - +
+
+
+
dashboard.dashboard-logo-settings
+
+ {{ 'dashboard.display-dashboard-logo' | translate }} - - - -
- dashboard.toolbar-settings - - {{ 'dashboard.hide-toolbar' | translate }} - - - {{ 'dashboard.toolbar-always-open' | translate }} - - - {{ 'dashboard.display-dashboards-selection' | translate }} - - - {{ 'dashboard.display-entities-selection' | translate }} - - - {{ 'dashboard.display-filters' | translate }} - - - {{ 'dashboard.display-dashboard-timewindow' | translate }} - - - {{ 'dashboard.display-dashboard-export' | translate }} - - - {{ 'dashboard.display-update-dashboard-image' | translate }} - -
- - - - dashboard.advanced-settings - - - - - - +
+ + +
+
+
dashboard.toolbar-settings
+ + {{ 'dashboard.hide-toolbar' | translate }} + + + {{ 'dashboard.toolbar-always-open' | translate }} + + + {{ 'dashboard.display-dashboards-selection' | translate }} + + + {{ 'dashboard.display-entities-selection' | translate }} + + + {{ 'dashboard.display-filters' | translate }} + + + {{ 'dashboard.display-dashboard-timewindow' | translate }} + + + {{ 'dashboard.display-dashboard-export' | translate }} + + + {{ 'dashboard.display-update-dashboard-image' | translate }} + +
+ + + + dashboard.advanced-settings + + + + + + +
+
+
+ + {{ 'dashboard.scada-layout' | translate }} +
-
-
- dashboard.layout-settings - - dashboard.columns-count - - - {{ 'dashboard.columns-count-required' | translate }} - - - {{ 'dashboard.min-columns-count-message' | translate }} - - - {{ 'dashboard.max-columns-count-message' | translate }} - +
+
dashboard.layout-settings
+
+
dashboard.columns-count
+ + + + warning + - - dashboard.widgets-margins - - - {{ 'dashboard.margin-required' | translate }} - - - {{ 'dashboard.min-margin-message' | translate }} - - - {{ 'dashboard.max-margin-message' | translate }} - +
+
+
dashboard.widgets-margins
+ + + + warning + - +
+
+ {{ 'dashboard.apply-outer-margin' | translate }} - +
+
+ {{ 'dashboard.autofill-height' | translate }} - +
+
dashboard.background-color
+ - - - - dashboard.background-size-mode +
+ + +
+
{{ 'dashboard.background-size-mode' | translate }}
+ Fit width Fit height @@ -158,34 +178,41 @@ Original size -
-
- dashboard.mobile-layout - +
+
+
+
dashboard.mobile-layout
+
+ {{ 'dashboard.display-first-in-mobile-view' | translate }} -
- - {{ 'dashboard.autofill-height' | translate }} - - - dashboard.mobile-row-height - - - {{ 'dashboard.mobile-row-height-required' | translate }} - - - {{ 'dashboard.min-mobile-row-height-message' | translate }} - - - {{ 'dashboard.max-mobile-row-height-message' | translate }} - - -
- +
+
+ + {{ 'dashboard.autofill-height' | translate }} + +
+
+
dashboard.mobile-row-height
+ + + + warning + + px + +
- +
- - -
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.scss b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.scss index 3143ab1ee2..7b6d8e59f0 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.scss @@ -102,6 +102,12 @@ div.tb-widget { padding: 0 !important; margin: 0 !important; line-height: 20px; + &.mat-mdc-button-base { + .mat-mdc-button-touch-target { + height: 32px; + width: 32px; + } + } .mat-icon { width: 20px; @@ -141,7 +147,69 @@ div.tb-widget { opacity: .5; } + &.tb-hover { + &:not(.tb-highlighted) { + box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); + } + } + &.tb-edit { cursor: pointer; } } + +gridster-item:hover { + .tb-widget-container { + div.tb-widget { + &.tb-edit { + &:not(.tb-highlighted) { + box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); + } + } + } + } +} + +.tooltipster-sidetip.tb-widget-edit-actions-tooltip { + .tooltipster-box { + user-select: none; + background: #fff; + border: 1px solid rgba(0, 0, 0, 0.38); + box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); + .tooltipster-content { + padding: 4px 8px; + font-size: 12px; + line-height: 12px; + font-weight: 500; + color: rgba(0, 0, 0, 0.76); + .tb-widget-actions-panel { + display: flex; + flex-direction: row; + place-content: center flex-start; + align-items: center; + gap: 8px; + } + } + } + .tooltipster-arrow { + .tooltipster-arrow-uncropped { + .tooltipster-arrow-background { + border-width: 12px; + } + } + } + &.tooltipster-top { + .tooltipster-arrow { + bottom: -1px; + .tooltipster-arrow-uncropped { + .tooltipster-arrow-border { + border-top-color: rgba(0, 0, 0, 0.38); + } + .tooltipster-arrow-background { + border-top-color: #fff; + left: -2px; + } + } + } + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts index 81c206391a..1546c4f92a 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts @@ -22,12 +22,12 @@ import { ElementRef, EventEmitter, HostBinding, - Input, + Input, OnChanges, OnDestroy, OnInit, Output, - Renderer2, - ViewChild, + Renderer2, SimpleChanges, + ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core'; import { PageComponent } from '@shared/components/page.component'; @@ -38,6 +38,8 @@ import { SafeStyle } from '@angular/platform-browser'; import { isNotEmptyStr } from '@core/utils'; import { GridsterItemComponent } from 'angular-gridster2'; import { UtilsService } from '@core/services/utils.service'; +import ITooltipsterInstance = JQueryTooltipster.ITooltipsterInstance; +import { from } from 'rxjs'; export enum WidgetComponentActionType { MOUSE_DOWN, @@ -61,7 +63,7 @@ export class WidgetComponentAction { encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }) -export class WidgetContainerComponent extends PageComponent implements OnInit, AfterViewInit, OnDestroy { +export class WidgetContainerComponent extends PageComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy { @HostBinding('class') widgetContainerClass = 'tb-widget-container'; @@ -84,6 +86,9 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, A @Input() isEdit: boolean; + @Input() + isEditingWidget: boolean; + @Input() isPreview: boolean; @@ -111,11 +116,20 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, A @Output() widgetComponentAction: EventEmitter = new EventEmitter(); + hovered = false; + + get widgetEditActionsEnabled(): boolean { + return (this.isEditActionEnabled || this.isRemoveActionEnabled || this.isExportActionEnabled) && !this.widget?.isFullscreen; + } + private cssClass: string; + private editWidgetActionsTooltip: ITooltipsterInstance; + constructor(protected store: Store, private cd: ChangeDetectorRef, private renderer: Renderer2, + private container: ViewContainerRef, private utils: UtilsService) { super(store); } @@ -127,16 +141,34 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, A this.cssClass = this.utils.applyCssToElement(this.renderer, this.gridsterItem.el, 'tb-widget-css', cssString); } + $(this.gridsterItem.el).on('mousedown', (e) => this.onMouseDown(e.originalEvent)); + $(this.gridsterItem.el).on('click', (e) => this.onClicked(e.originalEvent)); + $(this.gridsterItem.el).on('contextmenu', (e) => this.onContextMenu(e.originalEvent)); + this.initEditWidgetActionTooltip(); } ngAfterViewInit(): void { this.widget.widgetContext.$widgetElement = $(this.tbWidgetElement.nativeElement); } + ngOnChanges(changes: SimpleChanges) { + for (const propName of Object.keys(changes)) { + const change = changes[propName]; + if (!change.firstChange && change.currentValue !== change.previousValue) { + if (['isEditActionEnabled', 'isRemoveActionEnabled', 'isExportActionEnabled'].includes(propName)) { + this.updateEditWidgetActionsTooltipState(); + } + } + } + } + ngOnDestroy(): void { if (this.cssClass) { this.utils.clearCssElement(this.renderer, this.cssClass); } + if (this.editWidgetActionsTooltip) { + this.editWidgetActionsTooltip.destroy(); + } } isHighlighted(widget: DashboardWidget) { @@ -198,4 +230,141 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, A }); } + updateEditWidgetActionsTooltipState() { + if (this.editWidgetActionsTooltip) { + if (this.widgetEditActionsEnabled) { + this.editWidgetActionsTooltip.enable(); + } else { + this.editWidgetActionsTooltip.disable(); + } + } + } + + private initEditWidgetActionTooltip() { + from(import('tooltipster')).subscribe(() => { + $(this.gridsterItem.el).tooltipster({ + delay: this.widget.selected ? [0, 10000000] : [0, 100], + distance: 2, + zIndex: 151, + arrow: false, + theme: ['tb-widget-edit-actions-tooltip'], + interactive: true, + trigger: 'custom', + triggerOpen: { + mouseenter: true + }, + triggerClose: { + mouseleave: true + }, + side: ['top'], + trackOrigin: true, + trackerInterval: 25, + content: '', + functionPosition: (instance, helper, position) => { + const clientRect = helper.origin.getBoundingClientRect(); + position.coord.left = clientRect.right - position.size.width; + position.target = clientRect.right; + return position; + }, + functionReady: (_instance, helper) => { + const tooltipEl = $(helper.tooltip); + tooltipEl.on('mouseenter', () => { + this.hovered = true; + this.cd.markForCheck(); + }); + tooltipEl.on('mouseleave', () => { + this.hovered = false; + this.cd.markForCheck(); + }); + }, + functionAfter: () => { + this.hovered = false; + this.cd.markForCheck(); + } + }); + this.editWidgetActionsTooltip = $(this.gridsterItem.el).tooltipster('instance'); + const componentRef = this.container.createComponent(EditWidgetActionsTooltipComponent); + componentRef.instance.container = this; + componentRef.instance.viewInited.subscribe(() => { + if (this.editWidgetActionsTooltip.status().open) { + this.editWidgetActionsTooltip.reposition(); + } + }); + this.editWidgetActionsTooltip.on('destroyed', () => { + componentRef.destroy(); + }); + const parentElement = componentRef.instance.element.nativeElement; + const content = parentElement.firstChild; + parentElement.removeChild(content); + parentElement.style.display = 'none'; + this.editWidgetActionsTooltip.content(content); + this.updateEditWidgetActionsTooltipState(); + this.widget.onSelected((selected) => + this.updateEditWidgetActionsTooltipSelectedState(selected)); + }); + } + + private updateEditWidgetActionsTooltipSelectedState(selected: boolean) { + if (this.editWidgetActionsTooltip) { + if (selected) { + this.editWidgetActionsTooltip.option('delay', [0, 10000000]); + this.editWidgetActionsTooltip.option('triggerClose', { + mouseleave: false + }); + if (this.widgetEditActionsEnabled) { + this.editWidgetActionsTooltip.open(); + } + } else { + this.editWidgetActionsTooltip.option('delay', [0, 100]); + this.editWidgetActionsTooltip.option('triggerClose', { + mouseleave: true + }); + this.editWidgetActionsTooltip.close(); + } + } + } + +} + +@Component({ + template: `
+ + + +
`, + styles: [], + encapsulation: ViewEncapsulation.None +}) +export class EditWidgetActionsTooltipComponent implements AfterViewInit { + + @Input() + container: WidgetContainerComponent; + + @Output() + viewInited = new EventEmitter(); + + constructor(public element: ElementRef) { + } + + ngAfterViewInit() { + this.viewInited.emit(); + } } diff --git a/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts b/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts index d74373f734..f05fa0ac3a 100644 --- a/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts +++ b/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts @@ -240,11 +240,20 @@ export class DashboardWidgets implements Iterable { highlightWidget(widgetId: string): DashboardWidget { const widget = this.findWidgetById(widgetId); if (widget && (!this.highlightedMode || !widget.highlighted || this.highlightedMode && widget.highlighted)) { - this.highlightedMode = true; + let detectChanges = false; + if (!this.highlightedMode) { + this.highlightedMode = true; + detectChanges = true; + } widget.highlighted = true; + widget.selected = false; this.dashboardWidgets.forEach((dashboardWidget) => { if (dashboardWidget !== widget) { dashboardWidget.highlighted = false; + dashboardWidget.selected = false; + if (detectChanges) { + dashboardWidget.widgetContext?.detectContainerChanges(); + } } }); return widget; @@ -330,6 +339,7 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget { private highlightedValue = false; private selectedValue = false; + private selectedCallback: (selected: boolean) => void = () => {}; isFullscreen = false; @@ -399,6 +409,10 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget { } } + onSelected(selectedCallback: (selected: boolean) => void) { + this.selectedCallback = selectedCallback; + } + get selected() { return this.selectedValue; } @@ -406,6 +420,7 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget { set selected(selected: boolean) { if (this.selectedValue !== selected) { this.selectedValue = selected; + this.selectedCallback(selected); this.widgetContext.detectContainerChanges(); } } From e57b9471dcac00a3b30e3f75702061b50c772e66 Mon Sep 17 00:00:00 2001 From: YevhenBondarenko Date: Thu, 13 Jun 2024 19:18:01 +0200 Subject: [PATCH 066/442] used version + 1 instead of sequence next value --- .../sql/attributes/AttributeKvInsertRepository.java | 10 +++++----- .../insert/latest/sql/SqlLatestInsertTsRepository.java | 7 +++---- dao/src/main/resources/sql/schema-entities.sql | 8 ++------ dao/src/main/resources/sql/schema-timescale.sql | 4 +--- dao/src/main/resources/sql/schema-ts-latest-psql.sql | 4 +--- dao/src/test/resources/sql/psql/drop-all-tables.sql | 2 -- 6 files changed, 12 insertions(+), 23 deletions(-) diff --git a/dao/src/main/java/org/thingsboard/server/dao/sql/attributes/AttributeKvInsertRepository.java b/dao/src/main/java/org/thingsboard/server/dao/sql/attributes/AttributeKvInsertRepository.java index 586ee3c0ca..c2b9d53d47 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/sql/attributes/AttributeKvInsertRepository.java +++ b/dao/src/main/java/org/thingsboard/server/dao/sql/attributes/AttributeKvInsertRepository.java @@ -31,14 +31,14 @@ import java.util.List; @SqlDao public class AttributeKvInsertRepository extends AbstractVersionedInsertRepository { - private static final String BATCH_UPDATE = "UPDATE attribute_kv SET str_v = ?, long_v = ?, dbl_v = ?, bool_v = ?, json_v = cast(? AS json), last_update_ts = ?, version = nextval('attribute_kv_version_seq') " + + private static final String BATCH_UPDATE = "UPDATE attribute_kv SET str_v = ?, long_v = ?, dbl_v = ?, bool_v = ?, json_v = cast(? AS json), last_update_ts = ?, version = version + 1 " + "WHERE entity_id = ? and attribute_type =? and attribute_key = ? RETURNING version;"; private static final String INSERT_OR_UPDATE = - "INSERT INTO attribute_kv (entity_id, attribute_type, attribute_key, str_v, long_v, dbl_v, bool_v, json_v, last_update_ts, version) " + - "VALUES(?, ?, ?, ?, ?, ?, ?, cast(? AS json), ?, nextval('attribute_kv_version_seq')) " + + "INSERT INTO attribute_kv (entity_id, attribute_type, attribute_key, str_v, long_v, dbl_v, bool_v, json_v, last_update_ts) " + + "VALUES(?, ?, ?, ?, ?, ?, ?, cast(? AS json), ?) " + "ON CONFLICT (entity_id, attribute_type, attribute_key) " + - "DO UPDATE SET str_v = ?, long_v = ?, dbl_v = ?, bool_v = ?, json_v = cast(? AS json), last_update_ts = ?, version = nextval('attribute_kv_version_seq') RETURNING version;"; + "DO UPDATE SET str_v = ?, long_v = ?, dbl_v = ?, bool_v = ?, json_v = cast(? AS json), last_update_ts = ?, version = attribute_kv.version + 1 RETURNING version;"; @Override protected void setOnBatchUpdateValues(PreparedStatement ps, int i, List entities) throws SQLException { @@ -121,4 +121,4 @@ public class AttributeKvInsertRepository extends AbstractVersionedInsertReposito protected String getInsertOrUpdateQuery() { return INSERT_OR_UPDATE; } -} \ No newline at end of file +} diff --git a/dao/src/main/java/org/thingsboard/server/dao/sqlts/insert/latest/sql/SqlLatestInsertTsRepository.java b/dao/src/main/java/org/thingsboard/server/dao/sqlts/insert/latest/sql/SqlLatestInsertTsRepository.java index 323eec0851..0484337a08 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/sqlts/insert/latest/sql/SqlLatestInsertTsRepository.java +++ b/dao/src/main/java/org/thingsboard/server/dao/sqlts/insert/latest/sql/SqlLatestInsertTsRepository.java @@ -30,7 +30,6 @@ import java.sql.SQLException; import java.sql.Types; import java.util.List; - @SqlTsLatestAnyDao @Repository @Transactional @@ -41,11 +40,11 @@ public class SqlLatestInsertTsRepository extends AbstractVersionedInsertReposito private Boolean updateByLatestTs; private static final String BATCH_UPDATE = - "UPDATE ts_kv_latest SET ts = ?, bool_v = ?, str_v = ?, long_v = ?, dbl_v = ?, json_v = cast(? AS json), version = nextval('ts_kv_latest_version_seq') WHERE entity_id = ? AND key = ?"; + "UPDATE ts_kv_latest SET ts = ?, bool_v = ?, str_v = ?, long_v = ?, dbl_v = ?, json_v = cast(? AS json), version = version + 1 WHERE entity_id = ? AND key = ?"; private static final String INSERT_OR_UPDATE = - "INSERT INTO ts_kv_latest (entity_id, key, ts, bool_v, str_v, long_v, dbl_v, json_v, version) VALUES(?, ?, ?, ?, ?, ?, ?, cast(? AS json), nextval('ts_kv_latest_version_seq')) " + - "ON CONFLICT (entity_id, key) DO UPDATE SET ts = ?, bool_v = ?, str_v = ?, long_v = ?, dbl_v = ?, json_v = cast(? AS json), version = nextval('ts_kv_latest_version_seq')"; + "INSERT INTO ts_kv_latest (entity_id, key, ts, bool_v, str_v, long_v, dbl_v, json_v) VALUES(?, ?, ?, ?, ?, ?, ?, cast(? AS json)) " + + "ON CONFLICT (entity_id, key) DO UPDATE SET ts = ?, bool_v = ?, str_v = ?, long_v = ?, dbl_v = ?, json_v = cast(? AS json), version = ts_kv_latest.version + 1"; private static final String BATCH_UPDATE_BY_LATEST_TS = BATCH_UPDATE + " AND ts_kv_latest.ts <= ?"; diff --git a/dao/src/main/resources/sql/schema-entities.sql b/dao/src/main/resources/sql/schema-entities.sql index 45deaf931d..9293636f0b 100644 --- a/dao/src/main/resources/sql/schema-entities.sql +++ b/dao/src/main/resources/sql/schema-entities.sql @@ -102,8 +102,6 @@ CREATE TABLE IF NOT EXISTS audit_log ( action_failure_details varchar(1000000) ) PARTITION BY RANGE (created_time); -CREATE SEQUENCE IF NOT EXISTS attribute_kv_version_seq cache 1000; - CREATE TABLE IF NOT EXISTS attribute_kv ( entity_id uuid, attribute_type int, @@ -114,7 +112,7 @@ CREATE TABLE IF NOT EXISTS attribute_kv ( dbl_v double precision, json_v json, last_update_ts bigint, - version bigint, + version bigint default 0, CONSTRAINT attribute_kv_pkey PRIMARY KEY (entity_id, attribute_type, attribute_key) ); @@ -541,8 +539,6 @@ CREATE TABLE IF NOT EXISTS entity_view ( CONSTRAINT entity_view_external_id_unq_key UNIQUE (tenant_id, external_id) ); -CREATE SEQUENCE IF NOT EXISTS ts_kv_latest_version_seq cache 1000; - CREATE TABLE IF NOT EXISTS ts_kv_latest ( entity_id uuid NOT NULL, @@ -553,7 +549,7 @@ CREATE TABLE IF NOT EXISTS ts_kv_latest long_v bigint, dbl_v double precision, json_v json, - version bigint, + version bigint default 0, CONSTRAINT ts_kv_latest_pkey PRIMARY KEY (entity_id, key) ); diff --git a/dao/src/main/resources/sql/schema-timescale.sql b/dao/src/main/resources/sql/schema-timescale.sql index e5d44cb24a..2d2381403d 100644 --- a/dao/src/main/resources/sql/schema-timescale.sql +++ b/dao/src/main/resources/sql/schema-timescale.sql @@ -34,8 +34,6 @@ CREATE TABLE IF NOT EXISTS key_dictionary ( CONSTRAINT key_dictionary_id_pkey PRIMARY KEY (key) ); -CREATE SEQUENCE IF NOT EXISTS ts_kv_latest_version_seq cache 1000; - CREATE TABLE IF NOT EXISTS ts_kv_latest ( entity_id uuid NOT NULL, key int NOT NULL, @@ -45,7 +43,7 @@ CREATE TABLE IF NOT EXISTS ts_kv_latest ( long_v bigint, dbl_v double precision, json_v json, - version bigint, + version bigint default 0, CONSTRAINT ts_kv_latest_pkey PRIMARY KEY (entity_id, key) ); diff --git a/dao/src/main/resources/sql/schema-ts-latest-psql.sql b/dao/src/main/resources/sql/schema-ts-latest-psql.sql index adae100823..058104d4f2 100644 --- a/dao/src/main/resources/sql/schema-ts-latest-psql.sql +++ b/dao/src/main/resources/sql/schema-ts-latest-psql.sql @@ -14,8 +14,6 @@ -- limitations under the License. -- -CREATE SEQUENCE IF NOT EXISTS ts_kv_latest_version_seq cache 1000; - CREATE TABLE IF NOT EXISTS ts_kv_latest ( entity_id uuid NOT NULL, @@ -26,6 +24,6 @@ CREATE TABLE IF NOT EXISTS ts_kv_latest long_v bigint, dbl_v double precision, json_v json, - version bigint, + version bigint default 0, CONSTRAINT ts_kv_latest_pkey PRIMARY KEY (entity_id, key) ); \ No newline at end of file diff --git a/dao/src/test/resources/sql/psql/drop-all-tables.sql b/dao/src/test/resources/sql/psql/drop-all-tables.sql index c731e239af..9c772df45b 100644 --- a/dao/src/test/resources/sql/psql/drop-all-tables.sql +++ b/dao/src/test/resources/sql/psql/drop-all-tables.sql @@ -23,7 +23,6 @@ DROP TABLE IF EXISTS alarm_type; DROP TABLE IF EXISTS asset; DROP TABLE IF EXISTS audit_log; DROP TABLE IF EXISTS attribute_kv; -DROP SEQUENCE IF EXISTS attribute_kv_version_seq; DROP TABLE IF EXISTS component_descriptor; DROP TABLE IF EXISTS customer; DROP TABLE IF EXISTS device; @@ -38,7 +37,6 @@ DROP TABLE IF EXISTS tenant; DROP TABLE IF EXISTS ts_kv; DROP TABLE IF EXISTS ts_kv_latest; DROP TABLE IF EXISTS ts_kv_dictionary; -DROP SEQUENCE IF EXISTS ts_kv_latest_version_seq; DROP TABLE IF EXISTS user_credentials; DROP TABLE IF EXISTS widgets_bundle_widget; DROP TABLE IF EXISTS widget_type; From 8fad8245dfecf75b5058cf31cf816fb4bb68a8ca Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Fri, 14 Jun 2024 17:59:28 +0300 Subject: [PATCH 067/442] UI: Improve dashboard layout settings. --- ui-ngx/patches/angular-gridster2+15.0.4.patch | 44 ++++++++++++ .../core/services/dashboard-utils.service.ts | 69 +++++++++---------- .../dashboard-page.component.ts | 42 ++++++++++- .../dashboard-page/dashboard-page.models.ts | 2 + .../dashboard-settings-dialog.component.html | 31 ++++++++- .../dashboard-settings-dialog.component.ts | 16 ++++- .../layout/dashboard-layout.component.html | 4 +- .../layout/dashboard-layout.component.ts | 13 ++++ .../layout/move-widgets-dialog.component.html | 60 ++++++++++++++++ .../layout/move-widgets-dialog.component.ts | 62 +++++++++++++++++ .../dashboard/dashboard.component.ts | 66 ++++++++++++------ .../home/components/home-components.module.ts | 3 + .../src/app/shared/models/dashboard.models.ts | 1 + .../assets/locale/locale.constant-en_US.json | 6 ++ 14 files changed, 354 insertions(+), 65 deletions(-) create mode 100644 ui-ngx/patches/angular-gridster2+15.0.4.patch create mode 100644 ui-ngx/src/app/modules/home/components/dashboard-page/layout/move-widgets-dialog.component.html create mode 100644 ui-ngx/src/app/modules/home/components/dashboard-page/layout/move-widgets-dialog.component.ts diff --git a/ui-ngx/patches/angular-gridster2+15.0.4.patch b/ui-ngx/patches/angular-gridster2+15.0.4.patch new file mode 100644 index 0000000000..a6642928c3 --- /dev/null +++ b/ui-ngx/patches/angular-gridster2+15.0.4.patch @@ -0,0 +1,44 @@ +diff --git a/node_modules/angular-gridster2/fesm2020/angular-gridster2.mjs b/node_modules/angular-gridster2/fesm2020/angular-gridster2.mjs +index cf4e220..4275d11 100644 +--- a/node_modules/angular-gridster2/fesm2020/angular-gridster2.mjs ++++ b/node_modules/angular-gridster2/fesm2020/angular-gridster2.mjs +@@ -208,6 +208,7 @@ const GridsterConfigService = { + useTransformPositioning: true, + scrollSensitivity: 10, + scrollSpeed: 20, ++ colWidthUpdateCallback: undefined, + initCallback: undefined, + destroyCallback: undefined, + gridSizeChangedCallback: undefined, +@@ -1243,6 +1244,9 @@ class GridsterComponent { + this.renderer.setStyle(this.el, 'padding-right', this.$options.margin + 'px'); + } + this.curColWidth = (this.curWidth - marginWidth) / this.columns; ++ if (this.options.colWidthUpdateCallback) { ++ this.curColWidth = this.options.colWidthUpdateCallback(this.curColWidth); ++ } + let marginHeight = -this.$options.margin; + if (this.$options.outerMarginTop !== null) { + marginHeight += this.$options.outerMarginTop; +@@ -1266,6 +1270,9 @@ class GridsterComponent { + } + else { + this.curColWidth = (this.curWidth + this.$options.margin) / this.columns; ++ if (this.options.colWidthUpdateCallback) { ++ this.curColWidth = this.options.colWidthUpdateCallback(this.curColWidth); ++ } + this.curRowHeight = + ((this.curHeight + this.$options.margin) / this.rows) * + this.$options.rowHeightRatio; +diff --git a/node_modules/angular-gridster2/lib/gridsterConfig.interface.d.ts b/node_modules/angular-gridster2/lib/gridsterConfig.interface.d.ts +index 1d7cdf0..a712b35 100644 +--- a/node_modules/angular-gridster2/lib/gridsterConfig.interface.d.ts ++++ b/node_modules/angular-gridster2/lib/gridsterConfig.interface.d.ts +@@ -73,6 +73,7 @@ export interface GridsterConfig { + useTransformPositioning?: boolean; + scrollSensitivity?: number | null; + scrollSpeed?: number; ++ colWidthUpdateCallback?: (colWidth: number) => number; + initCallback?: (gridster: GridsterComponentInterface) => void; + destroyCallback?: (gridster: GridsterComponentInterface) => void; + gridSizeChangedCallback?: (gridster: GridsterComponentInterface) => void; diff --git a/ui-ngx/src/app/core/services/dashboard-utils.service.ts b/ui-ngx/src/app/core/services/dashboard-utils.service.ts index ef367dfb1e..12a7e687bd 100644 --- a/ui-ngx/src/app/core/services/dashboard-utils.service.ts +++ b/ui-ngx/src/app/core/services/dashboard-utils.service.ts @@ -610,17 +610,15 @@ export class DashboardUtilsService { originalColumns = 24; } const gridSettings = layout.gridSettings; - if (!gridSettings.isScada) { - let columns = 24; - if (gridSettings && gridSettings.columns) { - columns = gridSettings.columns; - } - columns = columns * layoutCount; - if (columns !== originalColumns) { - const ratio = columns / originalColumns; - widgetLayout.sizeX *= ratio; - widgetLayout.sizeY *= ratio; - } + let columns = 24; + if (gridSettings && gridSettings.columns) { + columns = gridSettings.columns; + } + columns = columns * layoutCount; + if (columns !== originalColumns) { + const ratio = columns / originalColumns; + widgetLayout.sizeX *= ratio; + widgetLayout.sizeY *= ratio; } if (row > -1 && column > - 1) { @@ -686,35 +684,32 @@ export class DashboardUtilsService { const columns = gridSettings.columns || 24; const ratio = columns / prevColumns; layout.gridSettings = gridSettings; - if (!gridSettings.isScada) { - let maxRow = 0; - for (const w of Object.keys(layout.widgets)) { - const widget = layout.widgets[w]; - if (!widget.sizeX) { - widget.sizeX = 1; - } - if (!widget.sizeY) { - widget.sizeY = 1; - } - maxRow = Math.max(maxRow, widget.row + widget.sizeY); + for (const w of Object.keys(layout.widgets)) { + const widget = layout.widgets[w]; + if (!widget.sizeX) { + widget.sizeX = 1; } - const newMaxRow = Math.round(maxRow * ratio); - for (const w of Object.keys(layout.widgets)) { - const widget = layout.widgets[w]; - if (widget.row + widget.sizeY === maxRow) { - widget.row = Math.round(widget.row * ratio); - widget.sizeY = newMaxRow - widget.row; - } else { - widget.row = Math.round(widget.row * ratio); - widget.sizeY = Math.round(widget.sizeY * ratio); - } - widget.sizeX = Math.round(widget.sizeX * ratio); - widget.col = Math.round(widget.col * ratio); - if (widget.col + widget.sizeX > columns) { - widget.sizeX = columns - widget.col; - } + if (!widget.sizeY) { + widget.sizeY = 1; } } + for (const w of Object.keys(layout.widgets)) { + const widget = layout.widgets[w]; + widget.row = Math.round(widget.row * ratio); + widget.col = Math.round(widget.col * ratio); + widget.sizeX = Math.round(widget.sizeX * ratio); + widget.sizeY = Math.round(widget.sizeY * ratio); + } + } + + public moveWidgets(layout: DashboardLayout, cols: number, rows: number) { + cols = isDefinedAndNotNull(cols) ? Math.round(cols) : 0; + rows = isDefinedAndNotNull(rows) ? Math.round(rows) : 0; + for (const w of Object.keys(layout.widgets)) { + const widget = layout.widgets[w]; + widget.col = Math.max(0, widget.col + cols); + widget.row = Math.max(0, widget.row + rows); + } } public removeUnusedWidgets(dashboard: Dashboard) { diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts index 3e96e13b0a..0ea553b508 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts @@ -150,6 +150,10 @@ import { LayoutFixedSize, LayoutWidthType } from '@home/components/dashboard-pag import { TbPopoverComponent } from '@shared/components/popover.component'; import { ResizeObserver } from '@juggle/resize-observer'; import { HasDirtyFlag } from '@core/guards/confirm-on-exit.guard'; +import { + MoveWidgetsDialogComponent, + MoveWidgetsDialogResult +} from '@home/components/dashboard-page/layout/move-widgets-dialog.component'; // @dynamic @Component({ @@ -285,7 +289,8 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC gridSettings: {}, ignoreLoading: true, ctrl: null, - dashboardCtrl: this + dashboardCtrl: this, + displayGrid: 'onDrag&Resize' } }, right: { @@ -297,7 +302,8 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC gridSettings: {}, ignoreLoading: true, ctrl: null, - dashboardCtrl: this + dashboardCtrl: this, + displayGrid: 'onDrag&Resize' } } }; @@ -913,6 +919,28 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC }); } + private moveWidgets($event: Event, layoutId: DashboardLayoutId) { + if ($event) { + $event.stopPropagation(); + } + this.layouts[layoutId].layoutCtx.displayGrid = 'always'; + this.cd.markForCheck(); + this.dialog.open(MoveWidgetsDialogComponent, { + disableClose: true, + panelClass: ['tb-dialog', 'tb-fullscreen-dialog'] + }).afterClosed().subscribe((result) => { + this.layouts[layoutId].layoutCtx.displayGrid = 'onDrag&Resize'; + if (result) { + const targetLayout = this.dashboardConfiguration.states[this.dashboardCtx.state].layouts[layoutId]; + this.dashboardUtils.moveWidgets(targetLayout, result.cols, result.rows); + this.updateLayouts(); + } else { + this.cd.markForCheck(); + } + }); + } + private updateDashboardLayouts(newLayouts: DashboardStateLayouts) { this.dashboardUtils.setLayouts(this.dashboard, this.dashboardCtx.state, newLayouts); this.updateLayouts(); @@ -1422,6 +1450,16 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC shortcut: 'M-I' } ); + dashboardContextActions.push( + { + action: ($event) => { + this.moveWidgets($event, layoutCtx.id); + }, + enabled: true, + value: 'dashboard.move-all-widgets', + icon: 'open_with' + } + ); } return dashboardContextActions; } diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts index b2ed609c29..94dfaf635e 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts @@ -21,6 +21,7 @@ import { IAliasController, IStateController } from '@core/api/widget-api.models' import { ILayoutController } from './layout/layout.models'; import { DashboardContextMenuItem, WidgetContextMenuItem } from '@home/models/dashboard-component.models'; import { Observable } from 'rxjs'; +import { displayGrids } from 'angular-gridster2/lib/gridsterConfig.interface'; export declare type DashboardPageScope = 'tenant' | 'customer'; @@ -69,6 +70,7 @@ export interface DashboardPageLayoutContext { ctrl: ILayoutController; dashboardCtrl: IDashboardController; ignoreLoading: boolean; + displayGrid: displayGrids; } export interface DashboardPageLayout { diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html index e2d0a40cf5..50460e808c 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html @@ -114,8 +114,9 @@
dashboard.layout-settings
dashboard.columns-count
- - + + + + + {{ columns }} + + + +
+
+
dashboard.min-layout-width
+ + + + warning + + dashboard.columns-suffix +
dashboard.widgets-margins
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.ts index bea429798f..6d405e9ef1 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.ts @@ -54,6 +54,8 @@ export class DashboardSettingsDialogComponent extends DialogComponent([ ['default', 'dashboard.state-controller-default'], ]); @@ -155,10 +157,17 @@ export class DashboardSettingsDialogComponent extends DialogComponent +
+ +

dashboard.move-all-widgets

+ + + + + +
+
+
dashboard.move-by
+
+ + + dashboard.cols + + + + dashboard.rows + +
+
+
+
+ + +
+
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/move-widgets-dialog.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/move-widgets-dialog.component.ts new file mode 100644 index 0000000000..ba030c467d --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/move-widgets-dialog.component.ts @@ -0,0 +1,62 @@ +/// +/// Copyright ยฉ 2016-2024 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 { MatDialog, MatDialogRef } from '@angular/material/dialog'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; +import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; +import { Router } from '@angular/router'; +import { DialogComponent } from '@app/shared/components/dialog.component'; + +export interface MoveWidgetsDialogResult { + cols: number; + rows: number; +} + +@Component({ + selector: 'tb-move-widgets-dialog', + templateUrl: './move-widgets-dialog.component.html', + providers: [], + styleUrls: [] +}) +export class MoveWidgetsDialogComponent extends DialogComponent { + + moveWidgetsFormGroup: UntypedFormGroup; + + constructor(protected store: Store, + protected router: Router, + protected dialogRef: MatDialogRef, + private fb: UntypedFormBuilder, + private dialog: MatDialog) { + super(store, router, dialogRef); + + this.moveWidgetsFormGroup = this.fb.group({ + cols: [0, [Validators.required]], + rows: [0, [Validators.required]] + } + ); + } + + cancel(): void { + this.dialogRef.close(null); + } + + move(): void { + const result: MoveWidgetsDialogResult = this.moveWidgetsFormGroup.value; + this.dialogRef.close(result); + } +} diff --git a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts index 8b51d691a5..2c245a935e 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts @@ -90,6 +90,10 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo @Input() columns: number; + @Input() + @coerceBoolean() + colWidthInteger = false; + @Input() @coerceBoolean() setGridSize = false; @@ -256,15 +260,22 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo itemChangeCallback: item => this.dashboardWidgets.sortWidgets(), itemInitCallback: (item, itemComponent) => { (itemComponent.item as DashboardWidget).gridsterItemComponent = itemComponent; + }, + colWidthUpdateCallback: (colWidth) => { + if (this.colWidthInteger) { + return Math.floor(colWidth); + } else { + return colWidth; + } } }; - this.updateMobileOpts(); + this.updateGridOpts(); this.breakpointObserverSubscription = this.breakpointObserver .observe(MediaBreakpoints['gt-sm']).subscribe( () => { - this.updateMobileOpts(); + this.updateGridOpts(); this.notifyGridsterOptionsChanged(); } ); @@ -291,20 +302,24 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo } ngOnChanges(changes: SimpleChanges): void { - let updateMobileOpts = false; - let updateLayoutOpts = false; + let updateGridOpts = false; + let updateColumnOpts = false; let updateEditingOpts = false; + let updateDisplayGridOpts = false; let updateWidgets = false; let updateDashboardTimewindow = false; for (const propName of Object.keys(changes)) { const change = changes[propName]; if (!change.firstChange && change.currentValue !== change.previousValue) { - if (['isMobile', 'isMobileDisabled', 'autofillHeight', 'mobileAutofillHeight', 'mobileRowHeight'].includes(propName)) { - updateMobileOpts = true; + if (['isMobile', 'isMobileDisabled', 'autofillHeight', 'mobileAutofillHeight', + 'mobileRowHeight', 'colWidthInteger'].includes(propName)) { + updateGridOpts = true; } else if (['outerMargin', 'margin', 'columns'].includes(propName)) { - updateLayoutOpts = true; + updateColumnOpts = true; } else if (['isEdit', 'isEditingWidget'].includes(propName)) { updateEditingOpts = true; + } else if (propName === 'displayGrid') { + updateDisplayGridOpts = true; } else if (['widgets', 'widgetLayouts'].includes(propName)) { updateWidgets = true; } else if (propName === 'dashboardTimewindow') { @@ -318,16 +333,19 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo this.dashboardTimewindowChangedSubject.next(this.dashboardTimewindow); } - if (updateLayoutOpts) { - this.updateLayoutOpts(); + if (updateColumnOpts) { + this.updateColumnOpts(); } - if (updateMobileOpts) { - this.updateMobileOpts(); + if (updateGridOpts) { + this.updateGridOpts(); } if (updateEditingOpts) { this.updateEditingOpts(); } - if (updateMobileOpts || updateLayoutOpts || updateEditingOpts) { + if (updateDisplayGridOpts) { + this.updateDisplayGridOpts(); + } + if (updateGridOpts || updateColumnOpts || updateEditingOpts || updateDisplayGridOpts) { this.notifyGridsterOptionsChanged(); } } @@ -544,7 +562,15 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo }); } - private updateMobileOpts(parentHeight?: number) { + private onGridsterParentResize() { + const parentHeight = this.gridster.el.offsetHeight; + if (this.isMobileSize && this.mobileAutofillHeight && parentHeight) { + this.updateGridOpts(parentHeight); + } + this.notifyGridsterOptionsChanged(); + } + + private updateGridOpts(parentHeight?: number) { let updateWidgetRowsAndSort = false; const isMobileSize = this.checkIsMobileSize(); if (this.isMobileSize !== isMobileSize) { @@ -568,15 +594,7 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo } } - private onGridsterParentResize() { - const parentHeight = this.gridster.el.offsetHeight; - if (this.isMobileSize && this.mobileAutofillHeight && parentHeight) { - this.updateMobileOpts(parentHeight); - } - this.notifyGridsterOptionsChanged(); - } - - private updateLayoutOpts() { + private updateColumnOpts() { this.gridsterOpts.minCols = this.columns ? this.columns : 24; this.gridsterOpts.outerMargin = isDefined(this.outerMargin) ? this.outerMargin : true; this.gridsterOpts.margin = isDefined(this.margin) ? this.margin : 10; @@ -587,6 +605,10 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo this.gridsterOpts.draggable.enabled = this.isEdit && !this.isEditingWidget; } + private updateDisplayGridOpts() { + this.gridsterOpts.displayGrid = this.displayGrid; + } + public notifyGridsterOptionsChanged() { if (!this.optionsChangeNotificationsPaused) { if (this.gridster && this.gridster.options) { diff --git a/ui-ngx/src/app/modules/home/components/home-components.module.ts b/ui-ngx/src/app/modules/home/components/home-components.module.ts index f1a4623511..6678497820 100644 --- a/ui-ngx/src/app/modules/home/components/home-components.module.ts +++ b/ui-ngx/src/app/modules/home/components/home-components.module.ts @@ -174,6 +174,7 @@ import { import { WidgetConfigComponentsModule } from '@home/components/widget/config/widget-config-components.module'; import { BasicWidgetConfigModule } from '@home/components/widget/config/basic/basic-widget-config.module'; import { DeleteTimeseriesPanelComponent } from '@home/components/attribute/delete-timeseries-panel.component'; +import { MoveWidgetsDialogComponent } from '@home/components/dashboard-page/layout/move-widgets-dialog.component'; @NgModule({ declarations: @@ -287,6 +288,7 @@ import { DeleteTimeseriesPanelComponent } from '@home/components/attribute/delet EditWidgetComponent, DashboardWidgetSelectComponent, AddWidgetDialogComponent, + MoveWidgetsDialogComponent, ManageDashboardLayoutsDialogComponent, DashboardSettingsDialogComponent, ManageDashboardStatesDialogComponent, @@ -419,6 +421,7 @@ import { DeleteTimeseriesPanelComponent } from '@home/components/attribute/delet EditWidgetComponent, DashboardWidgetSelectComponent, AddWidgetDialogComponent, + MoveWidgetsDialogComponent, ManageDashboardLayoutsDialogComponent, DashboardSettingsDialogComponent, ManageDashboardStatesDialogComponent, diff --git a/ui-ngx/src/app/shared/models/dashboard.models.ts b/ui-ngx/src/app/shared/models/dashboard.models.ts index a118e39b96..282f87ade3 100644 --- a/ui-ngx/src/app/shared/models/dashboard.models.ts +++ b/ui-ngx/src/app/shared/models/dashboard.models.ts @@ -52,6 +52,7 @@ export interface WidgetLayouts { export interface GridSettings { backgroundColor?: string; columns?: number; + minColumns?: number; margin?: number; outerMargin?: boolean; backgroundSizeMode?: string; diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index 953a04db59..5570b0419d 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -1163,12 +1163,18 @@ "maximum-upload-file-size": "Maximum upload file size: {{ size }}", "cannot-upload-file": "Cannot upload file", "settings": "Settings", + "move-all-widgets": "Move all widgets", + "move-by": "Move by", + "cols": "cols", + "rows": "rows", "scada-layout": "SCADA layout", "layout-settings": "Layout settings", "columns-count": "Columns count", "columns-count-required": "Columns count is required.", "min-columns-count-message": "Only 10 minimum column count is allowed.", "max-columns-count-message": "Only 1000 maximum column count is allowed.", + "min-layout-width": "Minimum layout width", + "columns-suffix": "columns", "widgets-margins": "Margin between widgets", "margin-required": "Margin value is required.", "min-margin-message": "Only 0 is allowed as minimum margin value.", From 6da603ad0d96bbb0401537b5540ef2cbb779d938 Mon Sep 17 00:00:00 2001 From: IrynaMatveieva Date: Mon, 17 Jun 2024 16:21:41 +0300 Subject: [PATCH 068/442] added tests for GCP pusSub node --- .../rule/engine/gcp/pubsub/TbPubSubNode.java | 2 +- .../engine/gcp/pubsub/TbPubSubNodeTest.java | 179 ++++++++++++++++++ 2 files changed, 180 insertions(+), 1 deletion(-) create mode 100644 rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/gcp/pubsub/TbPubSubNodeTest.java diff --git a/rule-engine/rule-engine-components/src/main/java/org/thingsboard/rule/engine/gcp/pubsub/TbPubSubNode.java b/rule-engine/rule-engine-components/src/main/java/org/thingsboard/rule/engine/gcp/pubsub/TbPubSubNode.java index 62ed28fb04..4f11de6ae3 100644 --- a/rule-engine/rule-engine-components/src/main/java/org/thingsboard/rule/engine/gcp/pubsub/TbPubSubNode.java +++ b/rule-engine/rule-engine-components/src/main/java/org/thingsboard/rule/engine/gcp/pubsub/TbPubSubNode.java @@ -129,7 +129,7 @@ public class TbPubSubNode extends TbAbstractExternalNode { return TbMsg.transformMsgMetadata(origMsg, metaData); } - private Publisher initPubSubClient(TbContext ctx) throws IOException { + protected Publisher initPubSubClient(TbContext ctx) throws IOException { ProjectTopicName topicName = ProjectTopicName.of(config.getProjectId(), config.getTopicName()); ServiceAccountCredentials credentials = ServiceAccountCredentials.fromStream( diff --git a/rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/gcp/pubsub/TbPubSubNodeTest.java b/rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/gcp/pubsub/TbPubSubNodeTest.java new file mode 100644 index 0000000000..e39297c878 --- /dev/null +++ b/rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/gcp/pubsub/TbPubSubNodeTest.java @@ -0,0 +1,179 @@ +/** + * Copyright ยฉ 2016-2024 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. + */ +package org.thingsboard.rule.engine.gcp.pubsub; + +import com.google.api.core.ApiFuture; +import com.google.api.core.ApiFutures; +import com.google.cloud.pubsub.v1.Publisher; +import com.google.protobuf.ByteString; +import com.google.pubsub.v1.PubsubMessage; +import org.junit.jupiter.api.BeforeEach; +import org.junit.jupiter.api.Test; +import org.junit.jupiter.api.extension.ExtendWith; +import org.junit.jupiter.params.ParameterizedTest; +import org.junit.jupiter.params.provider.Arguments; +import org.junit.jupiter.params.provider.MethodSource; +import org.mockito.ArgumentCaptor; +import org.mockito.Mock; +import org.mockito.junit.jupiter.MockitoExtension; +import org.springframework.test.util.ReflectionTestUtils; +import org.thingsboard.common.util.JacksonUtil; +import org.thingsboard.common.util.ListeningExecutor; +import org.thingsboard.rule.engine.TestDbCallbackExecutor; +import org.thingsboard.rule.engine.api.TbContext; +import org.thingsboard.rule.engine.api.TbNodeConfiguration; +import org.thingsboard.rule.engine.api.TbNodeException; +import org.thingsboard.rule.engine.api.util.TbNodeUtils; +import org.thingsboard.server.common.data.id.DeviceId; +import org.thingsboard.server.common.data.msg.TbMsgType; +import org.thingsboard.server.common.msg.TbMsg; +import org.thingsboard.server.common.msg.TbMsgMetaData; + +import java.io.IOException; +import java.util.Map; +import java.util.UUID; +import java.util.stream.Stream; + +import static org.assertj.core.api.Assertions.assertThat; +import static org.assertj.core.api.Assertions.assertThatNoException; +import static org.assertj.core.api.Assertions.assertThatThrownBy; +import static org.mockito.ArgumentMatchers.any; +import static org.mockito.BDDMockito.given; +import static org.mockito.BDDMockito.spy; +import static org.mockito.BDDMockito.then; +import static org.mockito.BDDMockito.willReturn; +import static org.mockito.BDDMockito.willThrow; + +@ExtendWith(MockitoExtension.class) +class TbPubSubNodeTest { + + private final DeviceId DEVICE_ID = new DeviceId(UUID.fromString("d29849c2-3f21-48e2-8557-74cdd6403290")); + private final ListeningExecutor executor = new TestDbCallbackExecutor(); + + private TbPubSubNode node; + private TbPubSubNodeConfiguration config; + + @Mock + private Publisher pubSubClientMock; + @Mock + private TbContext ctxMock; + + @BeforeEach + public void setUp() throws IOException { + node = spy(new TbPubSubNode()); + config = new TbPubSubNodeConfiguration().defaultConfiguration(); + } + + @Test + public void verifyDefaultConfig() { + assertThat(config.getProjectId()).isEqualTo("my-google-cloud-project-id"); + assertThat(config.getTopicName()).isEqualTo("my-pubsub-topic-name"); + assertThat(config.getMessageAttributes()).isEmpty(); + assertThat(config.getServiceAccountKey()).isNull(); + assertThat(config.getServiceAccountKeyFileName()).isNull(); + } + + @Test + public void givenValidConfig_whenInit_thenOk() throws IOException { + willReturn(pubSubClientMock).given(node).initPubSubClient(ctxMock); + + assertThatNoException().isThrownBy(() -> node.init(ctxMock, new TbNodeConfiguration(JacksonUtil.valueToTree(config)))); + } + + @Test + public void givenErrorOccursDuringInitClient_whenInit_thenThrowsException() throws IOException { + willThrow(new RuntimeException("Could not initialize client!")).given(node).initPubSubClient(ctxMock); + + assertThatThrownBy(() -> node.init(ctxMock, new TbNodeConfiguration(JacksonUtil.valueToTree(config)))) + .isInstanceOf(TbNodeException.class).hasMessage("java.lang.RuntimeException: Could not initialize client!"); + } + + @ParameterizedTest + @MethodSource + public void givenMessageAttributesPatterns_whenOnMsg_thenTellSuccess( + String attributeName, String attributeValue, TbMsgMetaData metaData, String data) { + config.setMessageAttributes(Map.of(attributeName, attributeValue)); + init(); + + String messageId = "2070443601311540"; + given(pubSubClientMock.publish(any())).willReturn(ApiFutures.immediateFuture(messageId)); + given(ctxMock.getExternalCallExecutor()).willReturn(executor); + + TbMsg msg = TbMsg.newMsg(TbMsgType.POST_TELEMETRY_REQUEST, DEVICE_ID, metaData, data); + node.onMsg(ctxMock, msg); + + PubsubMessage.Builder pubsubMessageBuilder = PubsubMessage.newBuilder(); + pubsubMessageBuilder.setData(ByteString.copyFromUtf8(msg.getData())); + this.config.getMessageAttributes().forEach((k, v) -> { + String name = TbNodeUtils.processPattern(k, msg); + String val = TbNodeUtils.processPattern(v, msg); + pubsubMessageBuilder.putAttributes(name, val); + }); + then(pubSubClientMock).should().publish(pubsubMessageBuilder.build()); + ArgumentCaptor actualMsg = ArgumentCaptor.forClass(TbMsg.class); + then(ctxMock).should().tellSuccess(actualMsg.capture()); + metaData.putValue("messageId", messageId); + TbMsg expectedMsg = TbMsg.transformMsgMetadata(msg, metaData); + assertThat(actualMsg.getValue()) + .usingRecursiveComparison() + .ignoringFields("ctx") + .isEqualTo(expectedMsg); + } + + private static Stream givenMessageAttributesPatterns_whenOnMsg_thenTellSuccess() { + return Stream.of( + Arguments.of("attributeName", "attributeValue", new TbMsgMetaData(), TbMsg.EMPTY_JSON_OBJECT), + Arguments.of("${mdAttrName}", "${mdAttrValue}", new TbMsgMetaData( + Map.of( + "mdAttrName", "mdAttributeName", + "mdAttrValue", "mdAttributeValue" + )), TbMsg.EMPTY_JSON_OBJECT), + Arguments.of("$[msgAttrName]", "$[msgAttrValue]", new TbMsgMetaData(), + "{\"msgAttrName\": \"msgAttributeName\", \"msgAttrValue\": \"mdAttributeValue\"}") + ); + } + + @Test + public void givenErrorOccursOnTheGCP_whenOnMsg_thenTellFailure() { + init(); + + String errorMsg = "Something went wrong!"; + ApiFuture failedFuture = ApiFutures.immediateFailedFuture(new RuntimeException(errorMsg)); + given(pubSubClientMock.publish(any())).willReturn(failedFuture); + given(ctxMock.getExternalCallExecutor()).willReturn(executor); + + TbMsgMetaData metaData = new TbMsgMetaData(); + TbMsg msg = TbMsg.newMsg(TbMsgType.POST_TELEMETRY_REQUEST, DEVICE_ID, metaData, TbMsg.EMPTY_JSON_OBJECT); + node.onMsg(ctxMock, msg); + + ArgumentCaptor actualMsg = ArgumentCaptor.forClass(TbMsg.class); + ArgumentCaptor actualError = ArgumentCaptor.forClass(Throwable.class); + then(ctxMock).should().tellFailure(actualMsg.capture(), actualError.capture()); + metaData.putValue("error", RuntimeException.class + ": " + errorMsg); + TbMsg expectedMsg = TbMsg.transformMsgMetadata(msg, metaData); + assertThat(actualMsg.getValue()) + .usingRecursiveComparison() + .ignoringFields("ctx") + .isEqualTo(expectedMsg); + assertThat(actualError.getValue()).isInstanceOf(RuntimeException.class).hasMessage(errorMsg); + } + + private void init() { + ReflectionTestUtils.setField(node, "config", config); + ReflectionTestUtils.setField(node, "pubSubClient", pubSubClientMock); + } + +} From da78d934680059f751b1869998485c0ebc551d6d Mon Sep 17 00:00:00 2001 From: IrynaMatveieva Date: Tue, 18 Jun 2024 17:59:57 +0300 Subject: [PATCH 069/442] added tests for the kafka node --- .../rule/engine/kafka/TbKafkaNode.java | 45 ++- .../rule/engine/kafka/TbKafkaNodeTest.java | 365 ++++++++++++++++++ 2 files changed, 390 insertions(+), 20 deletions(-) create mode 100644 rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/kafka/TbKafkaNodeTest.java diff --git a/rule-engine/rule-engine-components/src/main/java/org/thingsboard/rule/engine/kafka/TbKafkaNode.java b/rule-engine/rule-engine-components/src/main/java/org/thingsboard/rule/engine/kafka/TbKafkaNode.java index fa07e7c06d..92f999450e 100644 --- a/rule-engine/rule-engine-components/src/main/java/org/thingsboard/rule/engine/kafka/TbKafkaNode.java +++ b/rule-engine/rule-engine-components/src/main/java/org/thingsboard/rule/engine/kafka/TbKafkaNode.java @@ -81,26 +81,7 @@ public class TbKafkaNode extends TbAbstractExternalNode { super.init(ctx); this.config = TbNodeUtils.convert(configuration, TbKafkaNodeConfiguration.class); this.initError = null; - Properties properties = new Properties(); - properties.put(ProducerConfig.CLIENT_ID_CONFIG, "producer-tb-kafka-node-" + ctx.getSelfId().getId().toString() + "-" + ctx.getServiceId()); - properties.put(ProducerConfig.BOOTSTRAP_SERVERS_CONFIG, config.getBootstrapServers()); - properties.put(ProducerConfig.VALUE_SERIALIZER_CLASS_CONFIG, config.getValueSerializer()); - properties.put(ProducerConfig.KEY_SERIALIZER_CLASS_CONFIG, config.getKeySerializer()); - properties.put(ProducerConfig.ACKS_CONFIG, config.getAcks()); - properties.put(ProducerConfig.RETRIES_CONFIG, config.getRetries()); - properties.put(ProducerConfig.BATCH_SIZE_CONFIG, config.getBatchSize()); - properties.put(ProducerConfig.LINGER_MS_CONFIG, config.getLinger()); - properties.put(ProducerConfig.BUFFER_MEMORY_CONFIG, config.getBufferMemory()); - if (config.getOtherProperties() != null) { - config.getOtherProperties().forEach((k, v) -> { - if (SslConfigs.SSL_KEYSTORE_CERTIFICATE_CHAIN_CONFIG.equals(k) - || SslConfigs.SSL_KEYSTORE_KEY_CONFIG.equals(k) - || SslConfigs.SSL_TRUSTSTORE_CERTIFICATES_CONFIG.equals(k)) { - v = v.replace("\\n", "\n"); - } - properties.put(k, v); - }); - } + Properties properties = getKafkaProperties(ctx); addMetadataKeyValuesAsKafkaHeaders = BooleanUtils.toBooleanDefaultIfNull(config.isAddMetadataKeyValuesAsKafkaHeaders(), false); toBytesCharset = config.getKafkaHeadersCharset() != null ? Charset.forName(config.getKafkaHeadersCharset()) : StandardCharsets.UTF_8; try { @@ -160,6 +141,30 @@ public class TbKafkaNode extends TbAbstractExternalNode { } } + protected Properties getKafkaProperties(TbContext ctx) { + Properties properties = new Properties(); + properties.put(ProducerConfig.CLIENT_ID_CONFIG, "producer-tb-kafka-node-" + ctx.getSelfId().getId().toString() + "-" + ctx.getServiceId()); + properties.put(ProducerConfig.BOOTSTRAP_SERVERS_CONFIG, config.getBootstrapServers()); + properties.put(ProducerConfig.VALUE_SERIALIZER_CLASS_CONFIG, config.getValueSerializer()); + properties.put(ProducerConfig.KEY_SERIALIZER_CLASS_CONFIG, config.getKeySerializer()); + properties.put(ProducerConfig.ACKS_CONFIG, config.getAcks()); + properties.put(ProducerConfig.RETRIES_CONFIG, config.getRetries()); + properties.put(ProducerConfig.BATCH_SIZE_CONFIG, config.getBatchSize()); + properties.put(ProducerConfig.LINGER_MS_CONFIG, config.getLinger()); + properties.put(ProducerConfig.BUFFER_MEMORY_CONFIG, config.getBufferMemory()); + if (config.getOtherProperties() != null) { + config.getOtherProperties().forEach((k, v) -> { + if (SslConfigs.SSL_KEYSTORE_CERTIFICATE_CHAIN_CONFIG.equals(k) + || SslConfigs.SSL_KEYSTORE_KEY_CONFIG.equals(k) + || SslConfigs.SSL_TRUSTSTORE_CERTIFICATES_CONFIG.equals(k)) { + v = v.replace("\\n", "\n"); + } + properties.put(k, v); + }); + } + return properties; + } + @Override public void destroy() { if (this.producer != null) { diff --git a/rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/kafka/TbKafkaNodeTest.java b/rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/kafka/TbKafkaNodeTest.java new file mode 100644 index 0000000000..86c39336f4 --- /dev/null +++ b/rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/kafka/TbKafkaNodeTest.java @@ -0,0 +1,365 @@ +/** + * Copyright ยฉ 2016-2024 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. + */ +package org.thingsboard.rule.engine.kafka; + +import org.apache.kafka.clients.producer.Callback; +import org.apache.kafka.clients.producer.Producer; +import org.apache.kafka.clients.producer.ProducerConfig; +import org.apache.kafka.clients.producer.ProducerRecord; +import org.apache.kafka.clients.producer.RecordMetadata; +import org.apache.kafka.common.header.Headers; +import org.apache.kafka.common.header.internals.RecordHeader; +import org.apache.kafka.common.header.internals.RecordHeaders; +import org.apache.kafka.common.serialization.StringSerializer; +import org.junit.jupiter.api.BeforeEach; +import org.junit.jupiter.api.Test; +import org.junit.jupiter.api.extension.ExtendWith; +import org.junit.jupiter.params.ParameterizedTest; +import org.junit.jupiter.params.provider.Arguments; +import org.junit.jupiter.params.provider.MethodSource; +import org.junit.jupiter.params.provider.NullAndEmptySource; +import org.mockito.ArgumentCaptor; +import org.mockito.Mock; +import org.mockito.junit.jupiter.MockitoExtension; +import org.springframework.test.util.ReflectionTestUtils; +import org.thingsboard.common.util.JacksonUtil; +import org.thingsboard.common.util.ListeningExecutor; +import org.thingsboard.rule.engine.TestDbCallbackExecutor; +import org.thingsboard.rule.engine.api.TbContext; +import org.thingsboard.rule.engine.api.TbNodeConfiguration; +import org.thingsboard.rule.engine.api.util.TbNodeUtils; +import org.thingsboard.server.common.data.id.DeviceId; +import org.thingsboard.server.common.data.id.RuleNodeId; +import org.thingsboard.server.common.data.msg.TbMsgType; +import org.thingsboard.server.common.msg.TbMsg; +import org.thingsboard.server.common.msg.TbMsgMetaData; + +import java.nio.charset.Charset; +import java.nio.charset.StandardCharsets; +import java.util.Map; +import java.util.Properties; +import java.util.UUID; +import java.util.concurrent.Callable; +import java.util.stream.Stream; + +import static org.assertj.core.api.Assertions.assertThat; +import static org.assertj.core.api.Assertions.assertThatNoException; +import static org.mockito.ArgumentMatchers.any; +import static org.mockito.ArgumentMatchers.eq; +import static org.mockito.BDDMockito.given; +import static org.mockito.BDDMockito.then; +import static org.mockito.BDDMockito.willAnswer; +import static org.mockito.BDDMockito.willThrow; +import static org.mockito.Mockito.mock; +import static org.mockito.Mockito.never; + +@ExtendWith(MockitoExtension.class) +public class TbKafkaNodeTest { + + private final DeviceId DEVICE_ID = new DeviceId(UUID.fromString("5f2eac08-bd1f-4635-a6c2-437369f996cf")); + private final ListeningExecutor executor = new TestDbCallbackExecutor(); + + private TbKafkaNode node; + private TbKafkaNodeConfiguration config; + + @Mock + private TbContext ctxMock; + @Mock + private Producer producerMock; + @Mock + private RecordMetadata recordMetadataMock; + + @BeforeEach + void setUp() { + node = new TbKafkaNode(); + config = new TbKafkaNodeConfiguration().defaultConfiguration(); + } + + @Test + public void verifyDefaultConfig() { + assertThat(config.getTopicPattern()).isEqualTo("my-topic"); + assertThat(config.getKeyPattern()).isNull(); + assertThat(config.getBootstrapServers()).isEqualTo("localhost:9092"); + assertThat(config.getRetries()).isEqualTo(0); + assertThat(config.getBatchSize()).isEqualTo(16384); + assertThat(config.getLinger()).isEqualTo(0); + assertThat(config.getBufferMemory()).isEqualTo(33554432); + assertThat(config.getAcks()).isEqualTo("-1"); + assertThat(config.getKeySerializer()).isEqualTo(StringSerializer.class.getName()); + assertThat(config.getValueSerializer()).isEqualTo(StringSerializer.class.getName()); + assertThat(config.getOtherProperties()).isEmpty(); + assertThat(config.isAddMetadataKeyValuesAsKafkaHeaders()).isFalse(); + assertThat(config.getKafkaHeadersCharset()).isEqualTo("UTF-8"); + } + + @Test + public void givenAddMetadataKeyValuesAsKafkaHeadersIsTrueAndKafkaHeadersCharsetIsSet_whenInit_thenOk() { + config.setAddMetadataKeyValuesAsKafkaHeaders(true); + config.setKafkaHeadersCharset("UTF-16"); + + String ruleNodeIdStr = "0d35733c-7661-4797-819e-d9188974e3b2"; + String serviceIdStr = "test-service"; + + given(ctxMock.getSelfId()).willReturn(new RuleNodeId(UUID.fromString(ruleNodeIdStr))); + given(ctxMock.getServiceId()).willReturn(serviceIdStr); + + assertThatNoException().isThrownBy(() -> node.init(ctxMock, new TbNodeConfiguration(JacksonUtil.valueToTree(config)))); + + Boolean addMetadataKeyValuesAsKafkaHeaders = (Boolean) ReflectionTestUtils.getField(node, "addMetadataKeyValuesAsKafkaHeaders"); + Charset toBytesCharset = (Charset) ReflectionTestUtils.getField(node, "toBytesCharset"); + + assertThat(addMetadataKeyValuesAsKafkaHeaders).isTrue(); + assertThat(toBytesCharset).isEqualTo(StandardCharsets.UTF_16); + } + + @Test + public void verifyGetKafkaPropertiesMethod() { + String sslKeyStoreCertificateChain = "cbdvch\\nfwrg\nvgwg\\n"; + String sslKeyStoreKey = "nghmh\\nhmmnh\\\\ngreg\nvgwg\\n"; + String sslTruststoreCertificates = "grthrt\fd\\nfwrg\nvgwg\\n"; + config.setOtherProperties(Map.of( + "ssl.keystore.certificate.chain", sslKeyStoreCertificateChain, + "ssl.keystore.key", sslKeyStoreKey, + "ssl.truststore.certificates", sslTruststoreCertificates, + "ssl.protocol", "TLSv1.2" + )); + ReflectionTestUtils.setField(node, "config", config); + + String ruleNodeIdStr = "e646b885-8004-45b4-8bfb-78db21870e0f"; + String serviceIdStr = "test-service"; + given(ctxMock.getSelfId()).willReturn(new RuleNodeId(UUID.fromString(ruleNodeIdStr))); + given(ctxMock.getServiceId()).willReturn(serviceIdStr); + + Properties expectedProperties = new Properties(); + expectedProperties.put(ProducerConfig.CLIENT_ID_CONFIG, "producer-tb-kafka-node-" + ruleNodeIdStr + "-" + serviceIdStr); + expectedProperties.put(ProducerConfig.BOOTSTRAP_SERVERS_CONFIG, config.getBootstrapServers()); + expectedProperties.put(ProducerConfig.VALUE_SERIALIZER_CLASS_CONFIG, config.getValueSerializer()); + expectedProperties.put(ProducerConfig.KEY_SERIALIZER_CLASS_CONFIG, config.getKeySerializer()); + expectedProperties.put(ProducerConfig.ACKS_CONFIG, config.getAcks()); + expectedProperties.put(ProducerConfig.RETRIES_CONFIG, config.getRetries()); + expectedProperties.put(ProducerConfig.BATCH_SIZE_CONFIG, config.getBatchSize()); + expectedProperties.put(ProducerConfig.LINGER_MS_CONFIG, config.getLinger()); + expectedProperties.put(ProducerConfig.BUFFER_MEMORY_CONFIG, config.getBufferMemory()); + expectedProperties.put("ssl.keystore.certificate.chain", sslKeyStoreCertificateChain.replace("\\n", "\n")); + expectedProperties.put("ssl.keystore.key", sslKeyStoreKey.replace("\\n", "\n")); + expectedProperties.put("ssl.truststore.certificates", sslTruststoreCertificates.replace("\\n", "\n")); + expectedProperties.put("ssl.protocol", "TLSv1.2"); + + Properties actualsProperties = node.getKafkaProperties(ctxMock); + assertThat(actualsProperties).isEqualTo(expectedProperties); + } + + @Test + public void givenInitErrorIsNotNull_whenOnMsg_thenTellFailure() { + init(); + String errorMsg = "Error during init!"; + ReflectionTestUtils.setField(node, "initError", new RuntimeException(errorMsg)); + + TbMsg msg = TbMsg.newMsg(TbMsgType.POST_TELEMETRY_REQUEST, DEVICE_ID, TbMsgMetaData.EMPTY, TbMsg.EMPTY_JSON_OBJECT); + node.onMsg(ctxMock, msg); + + ArgumentCaptor actualError = ArgumentCaptor.forClass(Throwable.class); + then(ctxMock).should().tellFailure(eq(msg), actualError.capture()); + assertThat(actualError.getValue()) + .isInstanceOf(RuntimeException.class) + .hasMessage("Failed to initialize Kafka rule node producer: " + errorMsg); + } + + @Test + public void givenForceAckIsTrueAndExceptionWasThrown_whenOnMsg_thenTellFailure() { + init(); + ReflectionTestUtils.setField(node, "forceAck", true); + + ListeningExecutor executorMock = mock(ListeningExecutor.class); + given(ctxMock.getExternalCallExecutor()).willReturn(executorMock); + String errorMsg = "Something went wrong!"; + willThrow(new RuntimeException(errorMsg)).given(executorMock).executeAsync(any(Callable.class)); + + TbMsg msg = TbMsg.newMsg(TbMsgType.POST_TELEMETRY_REQUEST, DEVICE_ID, TbMsgMetaData.EMPTY, TbMsg.EMPTY_JSON_OBJECT); + node.onMsg(ctxMock, msg); + + then(ctxMock).should().ack(msg); + ArgumentCaptor actualMsg = ArgumentCaptor.forClass(TbMsg.class); + ArgumentCaptor actualError = ArgumentCaptor.forClass(Throwable.class); + then(ctxMock).should().tellFailure(actualMsg.capture(), actualError.capture()); + assertThat(actualMsg.getValue()).usingRecursiveComparison().ignoringFields("ctx").isEqualTo(msg); + assertThat(actualError.getValue()).isInstanceOf(RuntimeException.class).hasMessage(errorMsg); + } + + @ParameterizedTest + @MethodSource + public void givenTopicAndKeyPatternsAndAddMetadataKeyValuesAsKafkaHeadersIsFalse_whenOnMsg_thenTellSuccess + (String topicPattern, String keyPattern, TbMsgMetaData metaData, String data) { + config.setTopicPattern(topicPattern); + config.setKeyPattern(keyPattern); + init(); + + TbMsg msg = TbMsg.newMsg(TbMsgType.POST_TELEMETRY_REQUEST, DEVICE_ID, metaData, data); + String topic = TbNodeUtils.processPattern(topicPattern, msg); + String key = TbNodeUtils.processPattern(keyPattern, msg); + long offset = 1; + int partition = 0; + mockSuccessfulPublishingRequest(topic, offset, partition); + + node.onMsg(ctxMock, msg); + + verifyProducerRecord(topic, key, msg.getData()); + verifyOutboundMsg(offset, partition, topic, msg); + } + + private static Stream givenTopicAndKeyPatternsAndAddMetadataKeyValuesAsKafkaHeadersIsFalse_whenOnMsg_thenTellSuccess() { + return Stream.of( + Arguments.of("test-topic", "test-key", new TbMsgMetaData(), TbMsg.EMPTY_JSON_OBJECT), + Arguments.of("${mdTopicPattern}", "${mdKeyPattern}", new TbMsgMetaData( + Map.of( + "mdTopicPattern", "md-test-topic", + "mdKeyPattern", "md-test-key" + )), TbMsg.EMPTY_JSON_OBJECT), + Arguments.of("$[msgTopicPattern]", "$[msgKeyPattern]", new TbMsgMetaData(), + "{\"msgTopicPattern\":\"msg-test-topic\",\"msgKeyPattern\":\"msg-test-key\"}") + ); + } + + @Test + public void givenForceAckIsFalseAndAddMetadataKeyValuesAsKafkaHeadersIsTrueAndToBytesCharsetIsSet_whenOnMsg_thenAckAndTellSuccess() { + String topic = "test-topic"; + String key = "test-key"; + config.setTopicPattern(topic); + config.setKeyPattern(key); + config.setAddMetadataKeyValuesAsKafkaHeaders(true); + config.setKafkaHeadersCharset("UTF-16"); + init(); + ReflectionTestUtils.setField(node, "forceAck", false); + ReflectionTestUtils.setField(node, "addMetadataKeyValuesAsKafkaHeaders", true); + ReflectionTestUtils.setField(node, "toBytesCharset", StandardCharsets.UTF_16); + + TbMsgMetaData metaData = new TbMsgMetaData(); + metaData.putValue("key", "value"); + TbMsg msg = TbMsg.newMsg(TbMsgType.POST_TELEMETRY_REQUEST, DEVICE_ID, metaData, TbMsg.EMPTY_JSON_OBJECT); + + long offset = 1; + int partition = 0; + + mockSuccessfulPublishingRequest(topic, offset, partition); + + node.onMsg(ctxMock, msg); + + then(ctxMock).should(never()).ack(msg); + Headers expectedHeaders = new RecordHeaders(); + msg.getMetaData().values().forEach((k, v) -> expectedHeaders.add(new RecordHeader("tb_msg_md_" + k, v.getBytes(StandardCharsets.UTF_16)))); + verifyProducerRecord(topic, key, msg.getData(), expectedHeaders); + verifyOutboundMsg(offset, partition, topic, msg); + } + + @ParameterizedTest + @NullAndEmptySource + public void givenKeyIsNullOrEmptyAndErrorOccursDuringPublishing_whenOnMsg_thenTellFailure(String key) { + String topic = "test-topic"; + config.setTopicPattern(topic); + config.setKeyPattern(key); + config.setAddMetadataKeyValuesAsKafkaHeaders(false); + + TbMsg msg = TbMsg.newMsg(TbMsgType.POST_TELEMETRY_REQUEST, DEVICE_ID, TbMsgMetaData.EMPTY, TbMsg.EMPTY_JSON_OBJECT); + + String errorMsg = "Something went wrong!"; + + given(ctxMock.getExternalCallExecutor()).willReturn(executor); + willAnswer(invocation -> { + Callback callback = invocation.getArgument(1); + callback.onCompletion(recordMetadataMock, new RuntimeException(errorMsg)); + return null; + }).given(producerMock).send(any(), any(Callback.class)); + + init(); + node.onMsg(ctxMock, msg); + + verifyProducerRecord(topic, null, msg.getData()); + + ArgumentCaptor actualMsg = ArgumentCaptor.forClass(TbMsg.class); + ArgumentCaptor actualError = ArgumentCaptor.forClass(Throwable.class); + then(ctxMock).should().tellFailure(actualMsg.capture(), actualError.capture()); + TbMsgMetaData metaData = new TbMsgMetaData(); + metaData.putValue("error", RuntimeException.class + ": " + errorMsg); + TbMsg expectedMsg = TbMsg.transformMsgMetadata(msg, metaData); + assertThat(actualMsg.getValue()) + .usingRecursiveComparison() + .ignoringFields("ctx") + .isEqualTo(expectedMsg); + } + + @Test + public void givenProducerIsNotNull_whenDestroy_thenShouldClose() { + ReflectionTestUtils.setField(node, "producer", producerMock); + + node.destroy(); + + then(producerMock).should().close(); + } + + @Test + public void givenProducerIsNull_whenDestroy_thenDoNothing() { + node.destroy(); + then(producerMock).shouldHaveNoInteractions(); + } + + private void mockSuccessfulPublishingRequest(String topic, long offset, int partition) { + given(ctxMock.getExternalCallExecutor()).willReturn(executor); + willAnswer(invocation -> { + Callback callback = invocation.getArgument(1); + callback.onCompletion(recordMetadataMock, null); + return null; + }).given(producerMock).send(any(), any(Callback.class)); + given(recordMetadataMock.offset()).willReturn(offset); + given(recordMetadataMock.partition()).willReturn(partition); + given(recordMetadataMock.topic()).willReturn(topic); + } + + private void init() { + ReflectionTestUtils.setField(node, "config", config); + ReflectionTestUtils.setField(node, "producer", producerMock); + ReflectionTestUtils.setField(node, "addMetadataKeyValuesAsKafkaHeaders", false); + } + + private void verifyProducerRecord(String expectedTopic, String expectedKey, String expectedValue) { + verifyProducerRecord(expectedTopic, expectedKey, expectedValue, null); + } + + private void verifyProducerRecord(String expectedTopic, String expectedKey, String expectedValue, Headers expectedHeaders) { + ArgumentCaptor> actualRecordCaptor = ArgumentCaptor.forClass(ProducerRecord.class); + then(producerMock).should().send(actualRecordCaptor.capture(), any()); + ProducerRecord actualRecord = actualRecordCaptor.getValue(); + assertThat(actualRecord.topic()).isEqualTo(expectedTopic); + assertThat(actualRecord.key()).isEqualTo(expectedKey); + assertThat(actualRecord.value()).isEqualTo(expectedValue); + if (expectedHeaders != null) { + assertThat(actualRecord.headers()).isEqualTo(expectedHeaders); + } + } + + private void verifyOutboundMsg(long expectedOffset, long expectedPartition, String expectedTopic, TbMsg originalMsg) { + ArgumentCaptor actualMsg = ArgumentCaptor.forClass(TbMsg.class); + then(ctxMock).should().tellSuccess(actualMsg.capture()); + TbMsgMetaData metaData = originalMsg.getMetaData().copy(); + metaData.putValue("offset", String.valueOf(expectedOffset)); + metaData.putValue("partition", String.valueOf(expectedPartition)); + metaData.putValue("topic", expectedTopic); + TbMsg expectedMsg = TbMsg.transformMsgMetadata(originalMsg, metaData); + assertThat(actualMsg.getValue()) + .usingRecursiveComparison() + .ignoringFields("ctx") + .isEqualTo(expectedMsg); + } +} From f1c68b8be226629c6d22f5dbef77f486dacf1add Mon Sep 17 00:00:00 2001 From: IrynaMatveieva Date: Wed, 19 Jun 2024 14:08:59 +0300 Subject: [PATCH 070/442] added tests for destroy method --- .../engine/gcp/pubsub/TbPubSubNodeTest.java | 31 ++++++++++++++++--- 1 file changed, 27 insertions(+), 4 deletions(-) diff --git a/rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/gcp/pubsub/TbPubSubNodeTest.java b/rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/gcp/pubsub/TbPubSubNodeTest.java index e39297c878..47a3a60d94 100644 --- a/rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/gcp/pubsub/TbPubSubNodeTest.java +++ b/rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/gcp/pubsub/TbPubSubNodeTest.java @@ -39,19 +39,23 @@ import org.thingsboard.rule.engine.api.TbNodeException; import org.thingsboard.rule.engine.api.util.TbNodeUtils; import org.thingsboard.server.common.data.id.DeviceId; import org.thingsboard.server.common.data.msg.TbMsgType; +import org.thingsboard.server.common.data.msg.TbNodeConnectionType; import org.thingsboard.server.common.msg.TbMsg; import org.thingsboard.server.common.msg.TbMsgMetaData; import java.io.IOException; import java.util.Map; import java.util.UUID; +import java.util.concurrent.TimeUnit; import java.util.stream.Stream; import static org.assertj.core.api.Assertions.assertThat; import static org.assertj.core.api.Assertions.assertThatNoException; import static org.assertj.core.api.Assertions.assertThatThrownBy; import static org.mockito.ArgumentMatchers.any; +import static org.mockito.ArgumentMatchers.eq; import static org.mockito.BDDMockito.given; +import static org.mockito.BDDMockito.never; import static org.mockito.BDDMockito.spy; import static org.mockito.BDDMockito.then; import static org.mockito.BDDMockito.willReturn; @@ -103,9 +107,10 @@ class TbPubSubNodeTest { @ParameterizedTest @MethodSource - public void givenMessageAttributesPatterns_whenOnMsg_thenTellSuccess( + public void givenForceAckIsTrueAndMessageAttributesPatterns_whenOnMsg_thenEnqueueForTellNext( String attributeName, String attributeValue, TbMsgMetaData metaData, String data) { config.setMessageAttributes(Map.of(attributeName, attributeValue)); + ReflectionTestUtils.setField(node, "forceAck", true); init(); String messageId = "2070443601311540"; @@ -115,6 +120,7 @@ class TbPubSubNodeTest { TbMsg msg = TbMsg.newMsg(TbMsgType.POST_TELEMETRY_REQUEST, DEVICE_ID, metaData, data); node.onMsg(ctxMock, msg); + then(ctxMock).should().ack(msg); PubsubMessage.Builder pubsubMessageBuilder = PubsubMessage.newBuilder(); pubsubMessageBuilder.setData(ByteString.copyFromUtf8(msg.getData())); this.config.getMessageAttributes().forEach((k, v) -> { @@ -124,7 +130,7 @@ class TbPubSubNodeTest { }); then(pubSubClientMock).should().publish(pubsubMessageBuilder.build()); ArgumentCaptor actualMsg = ArgumentCaptor.forClass(TbMsg.class); - then(ctxMock).should().tellSuccess(actualMsg.capture()); + then(ctxMock).should().enqueueForTellNext(actualMsg.capture(), eq(TbNodeConnectionType.SUCCESS)); metaData.putValue("messageId", messageId); TbMsg expectedMsg = TbMsg.transformMsgMetadata(msg, metaData); assertThat(actualMsg.getValue()) @@ -133,7 +139,7 @@ class TbPubSubNodeTest { .isEqualTo(expectedMsg); } - private static Stream givenMessageAttributesPatterns_whenOnMsg_thenTellSuccess() { + private static Stream givenForceAckIsTrueAndMessageAttributesPatterns_whenOnMsg_thenEnqueueForTellNext() { return Stream.of( Arguments.of("attributeName", "attributeValue", new TbMsgMetaData(), TbMsg.EMPTY_JSON_OBJECT), Arguments.of("${mdAttrName}", "${mdAttrValue}", new TbMsgMetaData( @@ -147,8 +153,9 @@ class TbPubSubNodeTest { } @Test - public void givenErrorOccursOnTheGCP_whenOnMsg_thenTellFailure() { + public void givenForceAckIsFalseAndErrorOccursOnTheGCP_whenOnMsg_thenTellFailure() { init(); + ReflectionTestUtils.setField(node, "forceAck", false); String errorMsg = "Something went wrong!"; ApiFuture failedFuture = ApiFutures.immediateFailedFuture(new RuntimeException(errorMsg)); @@ -159,6 +166,7 @@ class TbPubSubNodeTest { TbMsg msg = TbMsg.newMsg(TbMsgType.POST_TELEMETRY_REQUEST, DEVICE_ID, metaData, TbMsg.EMPTY_JSON_OBJECT); node.onMsg(ctxMock, msg); + then(ctxMock).should(never()).ack(any()); ArgumentCaptor actualMsg = ArgumentCaptor.forClass(TbMsg.class); ArgumentCaptor actualError = ArgumentCaptor.forClass(Throwable.class); then(ctxMock).should().tellFailure(actualMsg.capture(), actualError.capture()); @@ -171,6 +179,21 @@ class TbPubSubNodeTest { assertThat(actualError.getValue()).isInstanceOf(RuntimeException.class).hasMessage(errorMsg); } + @Test + public void givenPubSubClientIsNotNull_whenDestroy_thenShutDownAndAwaitTermination() throws InterruptedException { + ReflectionTestUtils.setField(node, "pubSubClient", pubSubClientMock); + node.destroy(); + then(pubSubClientMock).should().shutdown(); + then(pubSubClientMock).should().awaitTermination(1, TimeUnit.SECONDS); + } + + @Test + public void givenPubSubClientIsNull_whenDestroy_thenShutDownAndAwaitTermination() { + ReflectionTestUtils.setField(node, "pubSubClient", null); + node.destroy(); + then(pubSubClientMock).shouldHaveNoInteractions(); + } + private void init() { ReflectionTestUtils.setField(node, "config", config); ReflectionTestUtils.setField(node, "pubSubClient", pubSubClientMock); From 60d638dfd7de74351b2335ef71f46f0e652b297d Mon Sep 17 00:00:00 2001 From: IrynaMatveieva Date: Thu, 20 Jun 2024 15:47:29 +0300 Subject: [PATCH 071/442] moved connecting mqtt client no the separate method --- .../rule/engine/mqtt/TbMqttNode.java | 8 +- .../rule/engine/mqtt/TbMqttNodeTest.java | 123 +++++++++++++++--- .../mqtt/azure/TbAzureIotHubNodeTest.java | 65 ++++++--- 3 files changed, 157 insertions(+), 39 deletions(-) diff --git a/rule-engine/rule-engine-components/src/main/java/org/thingsboard/rule/engine/mqtt/TbMqttNode.java b/rule-engine/rule-engine-components/src/main/java/org/thingsboard/rule/engine/mqtt/TbMqttNode.java index ca63c270de..d1297b3c2c 100644 --- a/rule-engine/rule-engine-components/src/main/java/org/thingsboard/rule/engine/mqtt/TbMqttNode.java +++ b/rule-engine/rule-engine-components/src/main/java/org/thingsboard/rule/engine/mqtt/TbMqttNode.java @@ -115,7 +115,7 @@ public class TbMqttNode extends TbAbstractExternalNode { return "Tenant[" + ctx.getTenantId().getId() + "]RuleNode[" + ctx.getSelf().getId().getId() + "]"; } - public MqttClient initClient(TbContext ctx) throws Exception { + protected MqttClient initClient(TbContext ctx) throws Exception { MqttClientConfig config = new MqttClientConfig(getSslContext()); config.setOwnerId(getOwnerId(ctx)); if (!StringUtils.isEmpty(this.mqttNodeConfiguration.getClientId())) { @@ -127,7 +127,7 @@ public class TbMqttNode extends TbAbstractExternalNode { prepareMqttClientConfig(config); MqttClient client = MqttClient.create(config, null, ctx.getExternalCallExecutor()); client.setEventLoop(ctx.getSharedEventLoop()); - Promise connectFuture = client.connect(this.mqttNodeConfiguration.getHost(), this.mqttNodeConfiguration.getPort()); + Promise connectFuture = connectMqttClient(client); MqttConnectResult result; try { result = connectFuture.get(this.mqttNodeConfiguration.getConnectTimeoutSec(), TimeUnit.SECONDS); @@ -146,6 +146,10 @@ public class TbMqttNode extends TbAbstractExternalNode { return client; } + protected Promise connectMqttClient(MqttClient client) { + return client.connect(this.mqttNodeConfiguration.getHost(), this.mqttNodeConfiguration.getPort()); + } + protected void prepareMqttClientConfig(MqttClientConfig config) { ClientCredentials credentials = this.mqttNodeConfiguration.getCredentials(); if (credentials.getType() == CredentialsType.BASIC) { diff --git a/rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/mqtt/TbMqttNodeTest.java b/rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/mqtt/TbMqttNodeTest.java index 1c8a3f2500..d34d2675d0 100644 --- a/rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/mqtt/TbMqttNodeTest.java +++ b/rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/mqtt/TbMqttNodeTest.java @@ -17,11 +17,14 @@ package org.thingsboard.rule.engine.mqtt; import io.netty.buffer.ByteBuf; import io.netty.buffer.Unpooled; +import io.netty.channel.EventLoopGroup; +import io.netty.handler.codec.mqtt.MqttConnectReturnCode; import io.netty.handler.codec.mqtt.MqttQoS; import io.netty.handler.ssl.SslContext; import io.netty.handler.ssl.SslContextBuilder; import io.netty.util.concurrent.Future; import io.netty.util.concurrent.GenericFutureListener; +import io.netty.util.concurrent.Promise; import org.junit.jupiter.api.BeforeEach; import org.junit.jupiter.api.Test; import org.junit.jupiter.api.extension.ExtendWith; @@ -33,9 +36,12 @@ import org.mockito.Mock; import org.mockito.junit.jupiter.MockitoExtension; import org.springframework.test.util.ReflectionTestUtils; import org.thingsboard.common.util.JacksonUtil; +import org.thingsboard.common.util.ListeningExecutor; import org.thingsboard.mqtt.MqttClient; import org.thingsboard.mqtt.MqttClientConfig; +import org.thingsboard.mqtt.MqttConnectResult; import org.thingsboard.rule.engine.AbstractRuleNodeUpgradeTest; +import org.thingsboard.rule.engine.TestDbCallbackExecutor; import org.thingsboard.rule.engine.api.TbContext; import org.thingsboard.rule.engine.api.TbNode; import org.thingsboard.rule.engine.api.TbNodeConfiguration; @@ -43,11 +49,13 @@ import org.thingsboard.rule.engine.api.TbNodeException; import org.thingsboard.rule.engine.api.util.TbNodeUtils; import org.thingsboard.rule.engine.credentials.AnonymousCredentials; import org.thingsboard.rule.engine.credentials.BasicCredentials; +import org.thingsboard.rule.engine.credentials.CertPemCredentials; import org.thingsboard.rule.engine.credentials.ClientCredentials; import org.thingsboard.server.common.data.id.DeviceId; import org.thingsboard.server.common.data.id.RuleNodeId; import org.thingsboard.server.common.data.id.TenantId; import org.thingsboard.server.common.data.msg.TbMsgType; +import org.thingsboard.server.common.data.msg.TbNodeConnectionType; import org.thingsboard.server.common.data.rule.RuleNode; import org.thingsboard.server.common.msg.TbMsg; import org.thingsboard.server.common.msg.TbMsgMetaData; @@ -55,26 +63,34 @@ import org.thingsboard.server.common.msg.TbMsgMetaData; import javax.net.ssl.SSLException; import java.util.Map; import java.util.UUID; +import java.util.concurrent.ExecutionException; +import java.util.concurrent.TimeUnit; +import java.util.concurrent.TimeoutException; import java.util.stream.Stream; import static com.amazonaws.util.StringUtils.UTF8; import static org.assertj.core.api.Assertions.assertThat; +import static org.assertj.core.api.Assertions.assertThatNoException; import static org.assertj.core.api.Assertions.assertThatThrownBy; import static org.mockito.ArgumentMatchers.any; import static org.mockito.ArgumentMatchers.anyBoolean; +import static org.mockito.ArgumentMatchers.anyLong; import static org.mockito.ArgumentMatchers.eq; import static org.mockito.BDDMockito.given; import static org.mockito.BDDMockito.mock; +import static org.mockito.BDDMockito.never; import static org.mockito.BDDMockito.spy; import static org.mockito.BDDMockito.then; import static org.mockito.BDDMockito.willAnswer; import static org.mockito.BDDMockito.willReturn; -import static org.mockito.BDDMockito.willThrow; @ExtendWith(MockitoExtension.class) public class TbMqttNodeTest extends AbstractRuleNodeUpgradeTest { + private final TenantId TENANT_ID = TenantId.fromUUID(UUID.fromString("d0c5d2a8-3a6e-4c95-8caf-47fbdc8ef98f")); private final DeviceId DEVICE_ID = new DeviceId(UUID.fromString("09115d92-d333-432a-868c-ccd6e89c9287")); + private final RuleNodeId RULE_NODE_ID = new RuleNodeId(UUID.fromString("11699e8f-c3f0-4366-9334-cbf75798314b")); + private final ListeningExecutor executor = new TestDbCallbackExecutor(); protected TbMqttNode mqttNode; protected TbMqttNodeConfiguration mqttNodeConfig; @@ -83,6 +99,12 @@ public class TbMqttNodeTest extends AbstractRuleNodeUpgradeTest { protected TbContext ctxMock; @Mock protected MqttClient mqttClientMock; + @Mock + protected EventLoopGroup eventLoopGroupMock; + @Mock + protected Promise promiseMock; + @Mock + protected MqttConnectResult resultMock; @BeforeEach protected void setUp() { @@ -129,9 +151,8 @@ public class TbMqttNodeTest extends AbstractRuleNodeUpgradeTest { mqttNode.prepareMqttClientConfig(mqttClientConfig); - assertThat(mqttClientConfig) - .hasFieldOrPropertyWithValue("username", "test_username") - .hasFieldOrPropertyWithValue("password", "test_password"); + assertThat(mqttClientConfig.getUsername()).isEqualTo("test_username"); + assertThat(mqttClientConfig.getPassword()).isEqualTo("test_password"); } @ParameterizedTest @@ -156,23 +177,62 @@ public class TbMqttNodeTest extends AbstractRuleNodeUpgradeTest { } @Test - public void givenFailedToInitializeMqttClient_whenInit_thenThrowsException() throws Exception { - String errorMsg = "Failed to connect to MQTT broker!"; - willThrow(new RuntimeException(errorMsg)).given(mqttNode).initClient(any()); + public void givenSuccessfulConnectResult_whenInit_thenOk() throws ExecutionException, InterruptedException, TimeoutException { + mqttNodeConfig.setClientId("bfrbTESTmfkr23"); + mqttNodeConfig.setAppendClientIdSuffix(true); + mqttNodeConfig.setCredentials(new CertPemCredentials()); + + mockConnectClient(mqttNode); + given(promiseMock.get(anyLong(), any(TimeUnit.class))).willReturn(resultMock); + given(resultMock.isSuccess()).willReturn(true); + + assertThatNoException().isThrownBy(() -> mqttNode.init(ctxMock, new TbNodeConfiguration(JacksonUtil.valueToTree(mqttNodeConfig)))); + } + + @Test + public void givenFailedByTimeoutConnectResult_whenInit_thenThrowsException() throws ExecutionException, InterruptedException, TimeoutException { + mqttNodeConfig.setHost("localhost"); + mqttNodeConfig.setClientId("bfrbTESTmfkr23"); + mqttNodeConfig.setCredentials(new CertPemCredentials()); + + mockConnectClient(mqttNode); + given(promiseMock.get(anyLong(), any(TimeUnit.class))).willThrow(new TimeoutException("Failed to connect")); + + assertThatThrownBy(() -> mqttNode.init(ctxMock, new TbNodeConfiguration(JacksonUtil.valueToTree(mqttNodeConfig)))) + .isInstanceOf(TbNodeException.class) + .hasMessage("java.lang.RuntimeException: Failed to connect to MQTT broker at localhost:1883.") + .extracting(e -> ((TbNodeException) e).isUnrecoverable()) + .isEqualTo(false); + } + + @Test + public void givenFailedConnectResult_whenInit_thenThrowsException() throws ExecutionException, InterruptedException, TimeoutException { + mqttNodeConfig.setHost("localhost"); + mqttNodeConfig.setClientId("bfrbTESTmfkr23"); + mqttNodeConfig.setAppendClientIdSuffix(true); + mqttNodeConfig.setCredentials(new CertPemCredentials()); + + mockConnectClient(mqttNode); + given(promiseMock.get(anyLong(), any(TimeUnit.class))).willReturn(resultMock); + given(resultMock.isSuccess()).willReturn(false); + given(resultMock.getReturnCode()).willReturn(MqttConnectReturnCode.CONNECTION_REFUSED_NOT_AUTHORIZED); - var configuration = new TbNodeConfiguration(JacksonUtil.valueToTree(mqttNodeConfig)); - assertThatThrownBy(() -> mqttNode.init(ctxMock, configuration)) + assertThatThrownBy(() -> mqttNode.init(ctxMock, new TbNodeConfiguration(JacksonUtil.valueToTree(mqttNodeConfig)))) .isInstanceOf(TbNodeException.class) - .hasMessage(RuntimeException.class.getName() + ": " + errorMsg); + .hasMessage("java.lang.RuntimeException: Failed to connect to MQTT broker at localhost:1883. Result code is: CONNECTION_REFUSED_NOT_AUTHORIZED") + .extracting(e -> ((TbNodeException) e).isUnrecoverable()) + .isEqualTo(false); } @ParameterizedTest @MethodSource - public void givenTopicPatternAndIsRetainedMsgIsTrue_whenOnMsg_thenTellSuccess(String topicPattern, TbMsgMetaData metaData, String data) throws Exception { + public void givenForceAckIsTrueAndTopicPatternAndIsRetainedMsgIsTrue_whenOnMsg_thenTellSuccess(String topicPattern, TbMsgMetaData metaData, String data) { mqttNodeConfig.setRetainedMessage(true); mqttNodeConfig.setTopicPattern(topicPattern); + ReflectionTestUtils.setField(mqttNode, "mqttNodeConfiguration", mqttNodeConfig); + ReflectionTestUtils.setField(mqttNode, "mqttClient", mqttClientMock); + ReflectionTestUtils.setField(mqttNode, "forceAck", true); - willReturn(mqttClientMock).given(mqttNode).initClient(any()); Future future = mock(Future.class); given(future.isSuccess()).willReturn(true); given(mqttClientMock.publish(any(String.class), any(ByteBuf.class), any(MqttQoS.class), anyBoolean())).willReturn(future); @@ -182,16 +242,18 @@ public class TbMqttNodeTest extends AbstractRuleNodeUpgradeTest { return null; }).given(future).addListener(any()); - mqttNode.init(ctxMock, new TbNodeConfiguration(JacksonUtil.valueToTree(mqttNodeConfig))); TbMsg msg = TbMsg.newMsg(TbMsgType.POST_TELEMETRY_REQUEST, DEVICE_ID, metaData, data); mqttNode.onMsg(ctxMock, msg); + then(ctxMock).should().ack(msg); String expectedTopic = TbNodeUtils.processPattern(mqttNodeConfig.getTopicPattern(), msg); then(mqttClientMock).should().publish(expectedTopic, Unpooled.wrappedBuffer(msg.getData().getBytes(UTF8)), MqttQoS.AT_LEAST_ONCE, true); - then(ctxMock).should().tellSuccess(msg); + ArgumentCaptor actualMsg = ArgumentCaptor.forClass(TbMsg.class); + then(ctxMock).should().enqueueForTellNext(actualMsg.capture(), eq(TbNodeConnectionType.SUCCESS)); + assertThat(actualMsg.getValue()).usingRecursiveComparison().ignoringFields("ctx").isEqualTo(msg); } - private static Stream givenTopicPatternAndIsRetainedMsgIsTrue_whenOnMsg_thenTellSuccess() { + private static Stream givenForceAckIsTrueAndTopicPatternAndIsRetainedMsgIsTrue_whenOnMsg_thenTellSuccess() { return Stream.of( Arguments.of("new-topic", TbMsgMetaData.EMPTY, TbMsg.EMPTY_JSON_OBJECT), Arguments.of("${md-topic-name}", new TbMsgMetaData(Map.of("md-topic-name", "md-new-topic")), TbMsg.EMPTY_JSON_OBJECT), @@ -200,10 +262,12 @@ public class TbMqttNodeTest extends AbstractRuleNodeUpgradeTest { } @Test - public void givenParseToPlainTextIsTrueAndMsgPublishingFailed_whenOnMsg_thenTellFailure() throws Exception { + public void givenForceAckIsFalseParseToPlainTextIsTrueAndMsgPublishingFailed_whenOnMsg_thenTellFailure() { mqttNodeConfig.setParseToPlainText(true); + ReflectionTestUtils.setField(mqttNode, "mqttNodeConfiguration", mqttNodeConfig); + ReflectionTestUtils.setField(mqttNode, "mqttClient", mqttClientMock); + ReflectionTestUtils.setField(mqttNode, "forceAck", false); - willReturn(mqttClientMock).given(mqttNode).initClient(any()); Future future = mock(Future.class); given(mqttClientMock.publish(any(String.class), any(ByteBuf.class), any(MqttQoS.class), anyBoolean())).willReturn(future); given(future.isSuccess()).willReturn(false); @@ -216,10 +280,10 @@ public class TbMqttNodeTest extends AbstractRuleNodeUpgradeTest { return null; }).given(future).addListener(any()); - mqttNode.init(ctxMock, new TbNodeConfiguration(JacksonUtil.valueToTree(mqttNodeConfig))); TbMsg msg = TbMsg.newMsg(TbMsgType.POST_TELEMETRY_REQUEST, DEVICE_ID, TbMsgMetaData.EMPTY, "\"string\""); mqttNode.onMsg(ctxMock, msg); + then(ctxMock).should(never()).ack(msg); String expectedData = JacksonUtil.toPlainText(msg.getData()); then(mqttClientMock).should().publish(mqttNodeConfig.getTopicPattern(), Unpooled.wrappedBuffer(expectedData.getBytes(UTF8)), MqttQoS.AT_LEAST_ONCE, false); TbMsgMetaData metaData = new TbMsgMetaData(); @@ -231,6 +295,20 @@ public class TbMqttNodeTest extends AbstractRuleNodeUpgradeTest { assertThat(actualMsg).usingRecursiveComparison().ignoringFields("ctx").isEqualTo(expectedMsg); } + @Test + public void givenMqttClientIsNotNull_whenDestroy_thenDisconnect() { + ReflectionTestUtils.setField(mqttNode, "mqttClient", mqttClientMock); + mqttNode.destroy(); + then(mqttClientMock).should().disconnect(); + } + + @Test + public void givenMqttClientIsNull_whenDestroy_thenShouldHaveNoInteractions() { + ReflectionTestUtils.setField(mqttNode, "mqttClient", null); + mqttNode.destroy(); + then(mqttClientMock).shouldHaveNoInteractions(); + } + private static Stream givenFromVersionAndConfig_whenUpgrade_thenVerifyHasChangesAndConfig() { return Stream.of( // default config for version 0 @@ -251,4 +329,13 @@ public class TbMqttNodeTest extends AbstractRuleNodeUpgradeTest { protected TbNode getTestNode() { return mqttNode; } + + protected void mockConnectClient(TbMqttNode node) { + given(ctxMock.getTenantId()).willReturn(TENANT_ID); + given(ctxMock.getSelf()).willReturn(new RuleNode(RULE_NODE_ID)); + given(ctxMock.getExternalCallExecutor()).willReturn(executor); + given(ctxMock.getSharedEventLoop()).willReturn(eventLoopGroupMock); + willReturn(promiseMock).given(node).connectMqttClient(any()); + } + } diff --git a/rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/mqtt/azure/TbAzureIotHubNodeTest.java b/rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/mqtt/azure/TbAzureIotHubNodeTest.java index d62afe3001..7397fcdf9a 100644 --- a/rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/mqtt/azure/TbAzureIotHubNodeTest.java +++ b/rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/mqtt/azure/TbAzureIotHubNodeTest.java @@ -15,6 +15,7 @@ */ package org.thingsboard.rule.engine.mqtt.azure; +import io.netty.handler.codec.mqtt.MqttConnectReturnCode; import io.netty.handler.codec.mqtt.MqttVersion; import org.junit.jupiter.api.BeforeEach; import org.junit.jupiter.api.Test; @@ -29,12 +30,17 @@ import org.thingsboard.rule.engine.credentials.CertPemCredentials; import org.thingsboard.rule.engine.mqtt.TbMqttNodeConfiguration; import org.thingsboard.rule.engine.mqtt.TbMqttNodeTest; +import java.util.concurrent.ExecutionException; +import java.util.concurrent.TimeUnit; +import java.util.concurrent.TimeoutException; + import static org.assertj.core.api.Assertions.assertThat; +import static org.assertj.core.api.Assertions.assertThatNoException; import static org.assertj.core.api.Assertions.assertThatThrownBy; import static org.mockito.ArgumentMatchers.any; +import static org.mockito.ArgumentMatchers.anyLong; +import static org.mockito.BDDMockito.given; import static org.mockito.BDDMockito.spy; -import static org.mockito.BDDMockito.willReturn; -import static org.mockito.BDDMockito.willThrow; public class TbAzureIotHubNodeTest extends TbMqttNodeTest { @@ -72,42 +78,63 @@ public class TbAzureIotHubNodeTest extends TbMqttNodeTest { azureIotHubNode.prepareMqttClientConfig(mqttClientConfig); - assertThat(mqttClientConfig) - .hasFieldOrPropertyWithValue("protocolVersion", MqttVersion.MQTT_3_1_1) - .hasFieldOrPropertyWithValue("username", AzureIotHubUtil.buildUsername(mqttNodeConfig.getHost(), mqttClientConfig.getClientId())) - .hasFieldOrPropertyWithValue("password", AzureIotHubUtil.buildSasToken(mqttNodeConfig.getHost(), credentials.getSasKey())); + assertThat(mqttClientConfig.getProtocolVersion()).isEqualTo(MqttVersion.MQTT_3_1_1); + assertThat(mqttClientConfig.getUsername()).isEqualTo(AzureIotHubUtil.buildUsername(mqttNodeConfig.getHost(), mqttClientConfig.getClientId())); + assertThat(mqttClientConfig.getPassword()).isEqualTo(AzureIotHubUtil.buildSasToken(mqttNodeConfig.getHost(), credentials.getSasKey())); } @Test - public void givenPemCredentialsAndSuccessfulInitClient_whenInit_thenOk() throws Exception { + public void givenPemCredentialsAndSuccessfulConnectResult_whenInit_thenOk() throws Exception { CertPemCredentials credentials = new CertPemCredentials(); credentials.setCaCert("test-ca-cert.pem"); credentials.setPassword("test-password"); azureIotHubNodeConfig.setCredentials(credentials); - var configuration = new TbNodeConfiguration(JacksonUtil.valueToTree(azureIotHubNodeConfig)); - willReturn(mqttClientMock).given(azureIotHubNode).initClient(any()); + mockConnectClient(azureIotHubNode); + given(promiseMock.get(anyLong(), any(TimeUnit.class))).willReturn(resultMock); + given(resultMock.isSuccess()).willReturn(true); + + assertThatNoException().isThrownBy( + () -> azureIotHubNode.init(ctxMock, new TbNodeConfiguration(JacksonUtil.valueToTree(azureIotHubNodeConfig)))); - azureIotHubNode.init(ctxMock, configuration); + TbMqttNodeConfiguration mqttNodeConfiguration = azureIotHubNode.getMqttNodeConfiguration(); + assertThat(mqttNodeConfiguration.getPort()).isEqualTo(8883); + assertThat(mqttNodeConfiguration.isCleanSession()).isTrue(); + } - assertThat(azureIotHubNode.getMqttNodeConfiguration()) - .hasFieldOrPropertyWithValue("port", 8883) - .hasFieldOrPropertyWithValue("cleanSession", true); + @Test + public void givenAzureIotHubSasCredentialsAndFailedByTimeoutConnectResult_whenInit_thenThrowsException() throws ExecutionException, InterruptedException, TimeoutException { + AzureIotHubSasCredentials credentials = new AzureIotHubSasCredentials(); + credentials.setSasKey("testSasKey"); + credentials.setCaCert("test-ca-cert.pem"); + azureIotHubNodeConfig.setCredentials(credentials); + + mockConnectClient(azureIotHubNode); + given(promiseMock.get(anyLong(), any(TimeUnit.class))).willThrow(new TimeoutException("Failed to connect")); + + assertThatThrownBy(() -> azureIotHubNode.init(ctxMock, new TbNodeConfiguration(JacksonUtil.valueToTree(azureIotHubNodeConfig)))) + .isInstanceOf(TbNodeException.class) + .hasMessage("java.lang.RuntimeException: Failed to connect to MQTT broker at .azure-devices.net:8883.") + .extracting(e -> ((TbNodeException) e).isUnrecoverable()) + .isEqualTo(false); } @Test - public void givenAzureIotHubSasCredentialsAndFailedInitClient_whenInit_thenThrowsException() throws Exception { + public void givenFailedConnectResult_whenInit_thenThrowsException() throws ExecutionException, InterruptedException, TimeoutException { AzureIotHubSasCredentials credentials = new AzureIotHubSasCredentials(); credentials.setSasKey("testSasKey"); credentials.setCaCert("test-ca-cert.pem"); azureIotHubNodeConfig.setCredentials(credentials); - String errorMsg = "Failed to connect to MQTT broker!"; - willThrow(new RuntimeException(errorMsg)).given(azureIotHubNode).initClient(any()); + mockConnectClient(azureIotHubNode); + given(promiseMock.get(anyLong(), any(TimeUnit.class))).willReturn(resultMock); + given(resultMock.isSuccess()).willReturn(false); + given(resultMock.getReturnCode()).willReturn(MqttConnectReturnCode.CONNECTION_REFUSED_NOT_AUTHORIZED); - var configuration = new TbNodeConfiguration(JacksonUtil.valueToTree(azureIotHubNodeConfig)); - assertThatThrownBy(() -> azureIotHubNode.init(ctxMock, configuration)) + assertThatThrownBy(() -> azureIotHubNode.init(ctxMock, new TbNodeConfiguration(JacksonUtil.valueToTree(azureIotHubNodeConfig)))) .isInstanceOf(TbNodeException.class) - .hasMessage(RuntimeException.class.getName() + ": " + errorMsg); + .hasMessage("java.lang.RuntimeException: Failed to connect to MQTT broker at .azure-devices.net:8883. Result code is: CONNECTION_REFUSED_NOT_AUTHORIZED") + .extracting(e -> ((TbNodeException) e).isUnrecoverable()) + .isEqualTo(false); } } From ddbd3903d276fb79885ecd006d8ac50bdc896217 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Fri, 21 Jun 2024 12:31:40 +0300 Subject: [PATCH 072/442] UI: Dashboard layout settings improvements. Add test scada widgets bundle. --- .../horizontal-connector-long.svg | 18 +++ .../scada_symbols/horizontal-connector.svg | 16 +++ .../scada_symbols/horizontal-faucet.svg | 85 ++++++++++++ .../horizontal-tank-with-screen.svg | 20 +++ .../left-bottom-angle-connector.svg | 26 ++++ .../left-top-angle-connector.svg | 26 ++++ .../json/system/scada_symbols/pump-left.svg | 127 ++++++++++++++++++ .../data/json/system/scada_symbols/pump.svg | 127 ++++++++++++++++++ .../system/scada_symbols/quadro-connector.svg | 26 ++++ .../right-bottom-angle-connector.svg | 26 ++++ .../right-top-angle-connector.svg | 26 ++++ .../scada_symbols/top-black-counter.svg | 31 +++++ .../scada_symbols/top-white-counter.svg | 31 +++++ .../scada_symbols/vertical-connector-long.svg | 16 +++ .../scada_symbols/vertical-connector.svg | 16 +++ .../vertical-tank-with-level.svg | 24 ++++ .../water-blower-right-connector.svg | 102 ++++++++++++++ .../system/widget_bundles/scada_symbols.json | 4 +- .../scada_water_system_symbols.json | 30 +++++ .../install/ThingsboardInstallService.java | 2 - .../DefaultSystemDataLoaderService.java | 5 - .../service/install/InstallScripts.java | 20 +-- .../install/SystemDataLoaderService.java | 2 - .../dashboard-page.component.ts | 9 +- .../dashboard-page/dashboard-page.models.ts | 1 + .../dashboard-settings-dialog.component.html | 29 ++-- .../dashboard-settings-dialog.component.ts | 26 +++- .../layout/dashboard-layout.component.ts | 21 ++- .../dashboard/dashboard.component.html | 1 + .../dashboard/dashboard.component.ts | 9 ++ .../home/models/dashboard-component.models.ts | 1 + .../src/app/shared/models/dashboard.models.ts | 22 ++- .../assets/locale/locale.constant-en_US.json | 4 +- 33 files changed, 878 insertions(+), 51 deletions(-) create mode 100644 application/src/main/data/json/system/scada_symbols/horizontal-connector-long.svg create mode 100644 application/src/main/data/json/system/scada_symbols/horizontal-connector.svg create mode 100644 application/src/main/data/json/system/scada_symbols/horizontal-faucet.svg create mode 100644 application/src/main/data/json/system/scada_symbols/horizontal-tank-with-screen.svg create mode 100644 application/src/main/data/json/system/scada_symbols/left-bottom-angle-connector.svg create mode 100644 application/src/main/data/json/system/scada_symbols/left-top-angle-connector.svg create mode 100644 application/src/main/data/json/system/scada_symbols/pump-left.svg create mode 100644 application/src/main/data/json/system/scada_symbols/pump.svg create mode 100644 application/src/main/data/json/system/scada_symbols/quadro-connector.svg create mode 100644 application/src/main/data/json/system/scada_symbols/right-bottom-angle-connector.svg create mode 100644 application/src/main/data/json/system/scada_symbols/right-top-angle-connector.svg create mode 100644 application/src/main/data/json/system/scada_symbols/top-black-counter.svg create mode 100644 application/src/main/data/json/system/scada_symbols/top-white-counter.svg create mode 100644 application/src/main/data/json/system/scada_symbols/vertical-connector-long.svg create mode 100644 application/src/main/data/json/system/scada_symbols/vertical-connector.svg create mode 100644 application/src/main/data/json/system/scada_symbols/vertical-tank-with-level.svg create mode 100644 application/src/main/data/json/system/scada_symbols/water-blower-right-connector.svg create mode 100644 application/src/main/data/json/system/widget_bundles/scada_water_system_symbols.json diff --git a/application/src/main/data/json/system/scada_symbols/horizontal-connector-long.svg b/application/src/main/data/json/system/scada_symbols/horizontal-connector-long.svg new file mode 100644 index 0000000000..40b3148fe0 --- /dev/null +++ b/application/src/main/data/json/system/scada_symbols/horizontal-connector-long.svg @@ -0,0 +1,18 @@ +{ + "title": "Horizontal connector long", + "widgetSizeX": 2, + "widgetSizeY": 1, + "tags": [], + "behavior": [], + "properties": [] +} + + + + + + + + + + \ No newline at end of file diff --git a/application/src/main/data/json/system/scada_symbols/horizontal-connector.svg b/application/src/main/data/json/system/scada_symbols/horizontal-connector.svg new file mode 100644 index 0000000000..7a52cc236a --- /dev/null +++ b/application/src/main/data/json/system/scada_symbols/horizontal-connector.svg @@ -0,0 +1,16 @@ + +{ + "title": "Horizontal connector", + "widgetSizeX": 1, + "widgetSizeY": 1, + "tags": [], + "behavior": [], + "properties": [] +} + + + + + + + \ No newline at end of file diff --git a/application/src/main/data/json/system/scada_symbols/horizontal-faucet.svg b/application/src/main/data/json/system/scada_symbols/horizontal-faucet.svg new file mode 100644 index 0000000000..0a2510903c --- /dev/null +++ b/application/src/main/data/json/system/scada_symbols/horizontal-faucet.svg @@ -0,0 +1,85 @@ + +{ + "title": "Horizontal faucet", + "widgetSizeX": 2, + "widgetSizeY": 1, + "tags": [], + "behavior": [], + "properties": [] +} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/application/src/main/data/json/system/scada_symbols/horizontal-tank-with-screen.svg b/application/src/main/data/json/system/scada_symbols/horizontal-tank-with-screen.svg new file mode 100644 index 0000000000..bfc7c83976 --- /dev/null +++ b/application/src/main/data/json/system/scada_symbols/horizontal-tank-with-screen.svg @@ -0,0 +1,20 @@ + +{ + "title": "Horizontal tank with screen", + "widgetSizeX": 5, + "widgetSizeY": 3, + "tags": [], + "behavior": [], + "properties": [] +} + + + + + + + + + + + \ No newline at end of file diff --git a/application/src/main/data/json/system/scada_symbols/left-bottom-angle-connector.svg b/application/src/main/data/json/system/scada_symbols/left-bottom-angle-connector.svg new file mode 100644 index 0000000000..3c85418142 --- /dev/null +++ b/application/src/main/data/json/system/scada_symbols/left-bottom-angle-connector.svg @@ -0,0 +1,26 @@ + +{ + "title": "Left bottom angle connector", + "widgetSizeX": 1, + "widgetSizeY": 1, + "tags": [], + "behavior": [], + "properties": [] +} + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/application/src/main/data/json/system/scada_symbols/left-top-angle-connector.svg b/application/src/main/data/json/system/scada_symbols/left-top-angle-connector.svg new file mode 100644 index 0000000000..1d97658ff1 --- /dev/null +++ b/application/src/main/data/json/system/scada_symbols/left-top-angle-connector.svg @@ -0,0 +1,26 @@ + +{ + "title": "Left top angle connector", + "widgetSizeX": 1, + "widgetSizeY": 1, + "tags": [], + "behavior": [], + "properties": [] +} + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/application/src/main/data/json/system/scada_symbols/pump-left.svg b/application/src/main/data/json/system/scada_symbols/pump-left.svg new file mode 100644 index 0000000000..835e93b3fc --- /dev/null +++ b/application/src/main/data/json/system/scada_symbols/pump-left.svg @@ -0,0 +1,127 @@ + +{ + "title": "Pump left", + "widgetSizeX": 4, + "widgetSizeY": 3, + "tags": [], + "behavior": [], + "properties": [] +} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/application/src/main/data/json/system/scada_symbols/pump.svg b/application/src/main/data/json/system/scada_symbols/pump.svg new file mode 100644 index 0000000000..2880c86a6c --- /dev/null +++ b/application/src/main/data/json/system/scada_symbols/pump.svg @@ -0,0 +1,127 @@ + +{ + "title": "Pump", + "widgetSizeX": 4, + "widgetSizeY": 3, + "tags": [], + "behavior": [], + "properties": [] +} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/application/src/main/data/json/system/scada_symbols/quadro-connector.svg b/application/src/main/data/json/system/scada_symbols/quadro-connector.svg new file mode 100644 index 0000000000..31b2f2accc --- /dev/null +++ b/application/src/main/data/json/system/scada_symbols/quadro-connector.svg @@ -0,0 +1,26 @@ + +{ + "title": "Quadro connector", + "widgetSizeX": 1, + "widgetSizeY": 1, + "tags": [], + "behavior": [], + "properties": [] +} + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/application/src/main/data/json/system/scada_symbols/right-bottom-angle-connector.svg b/application/src/main/data/json/system/scada_symbols/right-bottom-angle-connector.svg new file mode 100644 index 0000000000..25118c6956 --- /dev/null +++ b/application/src/main/data/json/system/scada_symbols/right-bottom-angle-connector.svg @@ -0,0 +1,26 @@ + +{ + "title": "Right bottom angle connector", + "widgetSizeX": 1, + "widgetSizeY": 1, + "tags": [], + "behavior": [], + "properties": [] +} + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/application/src/main/data/json/system/scada_symbols/right-top-angle-connector.svg b/application/src/main/data/json/system/scada_symbols/right-top-angle-connector.svg new file mode 100644 index 0000000000..3dfb37266d --- /dev/null +++ b/application/src/main/data/json/system/scada_symbols/right-top-angle-connector.svg @@ -0,0 +1,26 @@ + +{ + "title": "Right top angle connector", + "widgetSizeX": 1, + "widgetSizeY": 1, + "tags": [], + "behavior": [], + "properties": [] +} + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/application/src/main/data/json/system/scada_symbols/top-black-counter.svg b/application/src/main/data/json/system/scada_symbols/top-black-counter.svg new file mode 100644 index 0000000000..07a73c0b31 --- /dev/null +++ b/application/src/main/data/json/system/scada_symbols/top-black-counter.svg @@ -0,0 +1,31 @@ + +{ + "title": "Top black counter", + "widgetSizeX": 2, + "widgetSizeY": 2, + "tags": [], + "behavior": [], + "properties": [] +} + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/application/src/main/data/json/system/scada_symbols/top-white-counter.svg b/application/src/main/data/json/system/scada_symbols/top-white-counter.svg new file mode 100644 index 0000000000..66bfc9dba1 --- /dev/null +++ b/application/src/main/data/json/system/scada_symbols/top-white-counter.svg @@ -0,0 +1,31 @@ + +{ + "title": "Top white counter", + "widgetSizeX": 2, + "widgetSizeY": 2, + "tags": [], + "behavior": [], + "properties": [] +} + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/application/src/main/data/json/system/scada_symbols/vertical-connector-long.svg b/application/src/main/data/json/system/scada_symbols/vertical-connector-long.svg new file mode 100644 index 0000000000..af1c25d862 --- /dev/null +++ b/application/src/main/data/json/system/scada_symbols/vertical-connector-long.svg @@ -0,0 +1,16 @@ + +{ + "title": "Vertical connector long", + "widgetSizeX": 1, + "widgetSizeY": 2, + "tags": [], + "behavior": [], + "properties": [] +} + + + + + + + \ No newline at end of file diff --git a/application/src/main/data/json/system/scada_symbols/vertical-connector.svg b/application/src/main/data/json/system/scada_symbols/vertical-connector.svg new file mode 100644 index 0000000000..53ae6c58dc --- /dev/null +++ b/application/src/main/data/json/system/scada_symbols/vertical-connector.svg @@ -0,0 +1,16 @@ + +{ + "title": "Vertical connector", + "widgetSizeX": 1, + "widgetSizeY": 1, + "tags": [], + "behavior": [], + "properties": [] +} + + + + + + + \ No newline at end of file diff --git a/application/src/main/data/json/system/scada_symbols/vertical-tank-with-level.svg b/application/src/main/data/json/system/scada_symbols/vertical-tank-with-level.svg new file mode 100644 index 0000000000..06951fb94e --- /dev/null +++ b/application/src/main/data/json/system/scada_symbols/vertical-tank-with-level.svg @@ -0,0 +1,24 @@ + +{ + "title": "Vertical tank with level", + "widgetSizeX": 3, + "widgetSizeY": 5, + "tags": [], + "behavior": [], + "properties": [] +} + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/application/src/main/data/json/system/scada_symbols/water-blower-right-connector.svg b/application/src/main/data/json/system/scada_symbols/water-blower-right-connector.svg new file mode 100644 index 0000000000..88a561f2ea --- /dev/null +++ b/application/src/main/data/json/system/scada_symbols/water-blower-right-connector.svg @@ -0,0 +1,102 @@ + +{ + "title": "Water blower right connector", + "widgetSizeX": 2, + "widgetSizeY": 2, + "tags": [ + { + "tag": "motor", + "stateRenderFunction": "var on = ctx.values.on;\n//debugger;\nvar t = element.timeline();\nif (on) {\n if (!t.active()) {\n if (t.time()) {\n t.play();\n } else {\n ctx.api.animate(element, 2000).ease('-').rotate(360).loop();\n t = element.timeline();\n //var speed = 0.25;\n //speed = Math.max(0, Math.min(1, speed))*2; \n //t.speed(speed);\n }\n }\n} else {\n t.pause();//.stop();\n}", + "actions": null + } + ], + "behavior": [ + { + "id": "on", + "name": "On/Off state", + "hint": null, + "type": "value", + "valueType": "BOOLEAN", + "defaultValue": false, + "trueLabel": "{i18n:widgets.rpc-state.on}", + "falseLabel": "{i18n:widgets.rpc-state.off}", + "stateLabel": "{i18n:widgets.rpc-state.on}", + "valueToDataType": "CONSTANT", + "constantValue": false, + "valueToDataFunction": "" + } + ], + "properties": [] +} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/application/src/main/data/json/system/widget_bundles/scada_symbols.json b/application/src/main/data/json/system/widget_bundles/scada_symbols.json index 8a933b18f8..47615e6137 100644 --- a/application/src/main/data/json/system/widget_bundles/scada_symbols.json +++ b/application/src/main/data/json/system/widget_bundles/scada_symbols.json @@ -7,5 +7,7 @@ "order": 9200, "name": "SCADA symbols" }, - "widgetTypeFqns": [] + "widgetTypeFqns": [ + "scada_symbol" + ] } \ No newline at end of file diff --git a/application/src/main/data/json/system/widget_bundles/scada_water_system_symbols.json b/application/src/main/data/json/system/widget_bundles/scada_water_system_symbols.json new file mode 100644 index 0000000000..153afd0335 --- /dev/null +++ b/application/src/main/data/json/system/widget_bundles/scada_water_system_symbols.json @@ -0,0 +1,30 @@ +{ + "widgetsBundle": { + "alias": "scada_water_system_symbols", + "title": "SCADA water system symbols", + "image": null, + "description": "Bundle with SCADA symbols for water system", + "order": 9300, + "name": "SCADA water system symbols" + }, + "widgetTypeFqns": [ + "level_and_fan", + "vertical_connector_long", + "horizontal_tank_with_screen", + "quadro_connector", + "horizontal_faucet", + "top_white_counter", + "right_top_angle_connector", + "left_top_angle_connector", + "water_blower_right_connector", + "vertical_tank_with_level", + "left_bottom_angle_connector", + "horizontal_connector_long", + "top_black_counter", + "right_bottom_angle_connector", + "vertical_connector", + "horizontal_connector", + "pump_left", + "pump" + ] +} \ No newline at end of file diff --git a/application/src/main/java/org/thingsboard/server/install/ThingsboardInstallService.java b/application/src/main/java/org/thingsboard/server/install/ThingsboardInstallService.java index 839aa61975..75ac97881c 100644 --- a/application/src/main/java/org/thingsboard/server/install/ThingsboardInstallService.java +++ b/application/src/main/java/org/thingsboard/server/install/ThingsboardInstallService.java @@ -150,7 +150,6 @@ public class ThingsboardInstallService { log.info("Updating system data..."); dataUpdateService.upgradeRuleNodes(); systemDataLoaderService.loadSystemWidgets(); - systemDataLoaderService.loadSystemScadaSymbols(); installScripts.loadSystemLwm2mResources(); installScripts.loadSystemImages(); if (installScripts.isUpdateImages()) { @@ -191,7 +190,6 @@ public class ThingsboardInstallService { systemDataLoaderService.createAdminSettings(); systemDataLoaderService.createRandomJwtSettings(); systemDataLoaderService.loadSystemWidgets(); - systemDataLoaderService.loadSystemScadaSymbols(); systemDataLoaderService.createOAuth2Templates(); systemDataLoaderService.createQueues(); systemDataLoaderService.createDefaultNotificationConfigs(); diff --git a/application/src/main/java/org/thingsboard/server/service/install/DefaultSystemDataLoaderService.java b/application/src/main/java/org/thingsboard/server/service/install/DefaultSystemDataLoaderService.java index 6a150a918b..7588726a73 100644 --- a/application/src/main/java/org/thingsboard/server/service/install/DefaultSystemDataLoaderService.java +++ b/application/src/main/java/org/thingsboard/server/service/install/DefaultSystemDataLoaderService.java @@ -526,11 +526,6 @@ public class DefaultSystemDataLoaderService implements SystemDataLoaderService { installScripts.loadSystemWidgets(); } - @Override - public void loadSystemScadaSymbols() throws Exception { - installScripts.loadSystemScadaSymbols(); - } - private User createUser(Authority authority, TenantId tenantId, CustomerId customerId, diff --git a/application/src/main/java/org/thingsboard/server/service/install/InstallScripts.java b/application/src/main/java/org/thingsboard/server/service/install/InstallScripts.java index e3c8c209c4..5aeff25fe9 100644 --- a/application/src/main/java/org/thingsboard/server/service/install/InstallScripts.java +++ b/application/src/main/java/org/thingsboard/server/service/install/InstallScripts.java @@ -265,6 +265,7 @@ public class InstallScripts { ); } } + this.loadSystemScadaSymbols(); for (var widgetsBundleDescriptorEntry : widgetsBundlesMap.entrySet()) { Path path = widgetsBundleDescriptorEntry.getKey(); try { @@ -302,12 +303,11 @@ public class InstallScripts { } } - public void loadSystemScadaSymbols() throws Exception { + private void loadSystemScadaSymbols() throws Exception { log.info("Loading system SCADA symbols"); Path scadaSymbolsDir = Paths.get(getDataDir(), JSON_DIR, SYSTEM_DIR, SCADA_SYMBOLS_DIR); if (Files.exists(scadaSymbolsDir)) { - WidgetTypeDetails widgetTypeDetailsTemplate = widgetTypeService.findWidgetTypeDetailsByTenantIdAndFqn(TenantId.SYS_TENANT_ID, "scada_symbol"); - List widgetTypeFqns = new ArrayList<>(); + WidgetTypeDetails scadaSymbolWidgetTemplate = widgetTypeService.findWidgetTypeDetailsByTenantIdAndFqn(TenantId.SYS_TENANT_ID, "scada_symbol"); try (DirectoryStream dirStream = Files.newDirectoryStream(scadaSymbolsDir, path -> path.toString().endsWith(SVG_EXT))) { dirStream.forEach( path -> { @@ -316,8 +316,8 @@ public class InstallScripts { var scadaSymbolData = Files.readAllBytes(path); var metadata = ImageUtils.processScadaSymbolMetadata(fileName, scadaSymbolData); TbResourceInfo savedScadaSymbol = saveScadaSymbol(metadata, fileName, scadaSymbolData); - if (widgetTypeDetailsTemplate != null) { - widgetTypeFqns.add(saveScadaSymbolWidget(widgetTypeDetailsTemplate, savedScadaSymbol, metadata)); + if (scadaSymbolWidgetTemplate != null) { + saveScadaSymbolWidget(scadaSymbolWidgetTemplate, savedScadaSymbol, metadata); } } catch (Exception e) { log.error("Unable to load SCADA symbol from file: [{}]", path.toString()); @@ -326,11 +326,6 @@ public class InstallScripts { } ); } - var scadaSymbolsBundle = widgetsBundleService.findWidgetsBundleByTenantIdAndAlias(TenantId.SYS_TENANT_ID, "scada_symbols"); - if (scadaSymbolsBundle != null) { - widgetTypeFqns.add("scada_symbol"); - widgetTypeService.updateWidgetsBundleWidgetFqns(TenantId.SYS_TENANT_ID, scadaSymbolsBundle.getId(), widgetTypeFqns); - } } } @@ -355,7 +350,7 @@ public class InstallScripts { } } - private String saveScadaSymbolWidget(WidgetTypeDetails template, TbResourceInfo scadaSymbol, + private WidgetTypeDetails saveScadaSymbolWidget(WidgetTypeDetails template, TbResourceInfo scadaSymbol, ImageUtils.ScadaSymbolMetadataInfo metadata) { String symbolUrl = DataConstants.TB_IMAGE_PREFIX + scadaSymbol.getLink(); WidgetTypeDetails scadaSymbolWidget = new WidgetTypeDetails(); @@ -388,8 +383,7 @@ public class InstallScripts { controllerScript = controllerScript.replaceAll("previewWidth: '\\d*px'", "previewWidth: '" + (metadata.getWidgetSizeX() * 100) + "px'"); controllerScript = controllerScript.replaceAll("previewHeight: '\\d*px'", "previewHeight: '" + (metadata.getWidgetSizeY() * 100 + 20) + "px'"); ((ObjectNode)descriptor).put("controllerScript", controllerScript); - var savedWidget = widgetTypeService.saveWidgetType(scadaSymbolWidget); - return savedWidget.getFqn(); + return widgetTypeService.saveWidgetType(scadaSymbolWidget); } private void deleteSystemWidgetBundle(String bundleAlias) { diff --git a/application/src/main/java/org/thingsboard/server/service/install/SystemDataLoaderService.java b/application/src/main/java/org/thingsboard/server/service/install/SystemDataLoaderService.java index 6711bfa142..2f4b5fa885 100644 --- a/application/src/main/java/org/thingsboard/server/service/install/SystemDataLoaderService.java +++ b/application/src/main/java/org/thingsboard/server/service/install/SystemDataLoaderService.java @@ -31,8 +31,6 @@ public interface SystemDataLoaderService { void loadSystemWidgets() throws Exception; - void loadSystemScadaSymbols() throws Exception; - void loadDemoData() throws Exception; void createQueues(); diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts index 0ea553b508..ff2d6eab59 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts @@ -51,6 +51,7 @@ import { DashboardStateLayouts, GridSettings, LayoutDimension, + LayoutType, WidgetLayout } from '@app/shared/models/dashboard.models'; import { WINDOW } from '@core/services/window.service'; @@ -1199,7 +1200,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC } else { layoutIds = Object.keys(layouts) as DashboardLayoutId[]; } - return layoutIds.every(id => layouts[id].gridSettings.isScada); + return layoutIds.every(id => layouts[id].gridSettings.layoutType === LayoutType.scada); } private selectTargetLayout(): Observable { @@ -1397,6 +1398,12 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC this.importExport.exportWidget(this.dashboard, this.dashboardCtx.state, layoutCtx.id, widget, widgetTitle); } + dashboardMouseDown($event: Event, layoutCtx: DashboardPageLayoutContext) { + if (this.isEdit && !this.isEditingWidget) { + layoutCtx.ctrl.resetHighlight(); + } + } + widgetClicked($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget) { if (this.isEditingWidget) { this.editWidget($event, layoutCtx, widget); diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts index 94dfaf635e..0c43be1e91 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts @@ -53,6 +53,7 @@ export interface IDashboardController { exportWidget($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget, widgetTitle: string); removeWidget($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget); widgetMouseDown($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget); + dashboardMouseDown($event: Event, layoutCtx: DashboardPageLayoutContext); widgetClicked($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget); prepareDashboardContextMenu(layoutCtx: DashboardPageLayoutContext): Array; prepareWidgetContextMenu(layoutCtx: DashboardPageLayoutContext, widget: Widget): Array; diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html index 50460e808c..d15512b561 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html @@ -105,16 +105,21 @@
-
- - {{ 'dashboard.scada-layout' | translate }} - +
+
dashboard.layout
+ + + + {{ layoutTypeTranslations.get(type) | translate }} + + +
dashboard.layout-settings
dashboard.columns-count
- - @@ -156,7 +161,7 @@ dashboard.columns-suffix
-
+
dashboard.widgets-margins
-
+
{{ 'dashboard.apply-outer-margin' | translate }}
-
+
{{ 'dashboard.autofill-height' | translate }} @@ -207,19 +212,19 @@
-
+
dashboard.mobile-layout
{{ 'dashboard.display-first-in-mobile-view' | translate }}
-
+
{{ 'dashboard.autofill-height' | translate }}
-
+
dashboard.mobile-row-height
implements OnInit, ErrorStateMatcher { + layoutTypes = layoutTypes; + + layoutTypeTranslations = layoutTypeTranslationMap; + settings: DashboardSettings; gridSettings: GridSettings; isRightLayout = false; @@ -164,7 +174,7 @@ export class DashboardSettingsDialogComponent extends DialogComponent { this.updateGridSettingsFormState(); @@ -199,6 +209,14 @@ export class DashboardSettingsDialogComponent extends DialogComponent
void; onRemoveWidget?: ($event: Event, widget: Widget) => void; onWidgetMouseDown?: ($event: Event, widget: Widget) => void; + onDashboardMouseDown?: ($event: Event) => void; onWidgetClicked?: ($event: Event, widget: Widget) => void; prepareDashboardContextMenu?: ($event: Event) => Array; prepareWidgetContextMenu?: ($event: Event, widget: Widget) => Array; diff --git a/ui-ngx/src/app/shared/models/dashboard.models.ts b/ui-ngx/src/app/shared/models/dashboard.models.ts index 282f87ade3..cb7bf891b1 100644 --- a/ui-ngx/src/app/shared/models/dashboard.models.ts +++ b/ui-ngx/src/app/shared/models/dashboard.models.ts @@ -18,7 +18,7 @@ import { BaseData, ExportableEntity } from '@shared/models/base-data'; import { DashboardId } from '@shared/models/id/dashboard-id'; import { TenantId } from '@shared/models/id/tenant-id'; import { ShortCustomerInfo } from '@shared/models/customer.model'; -import { Widget } from './widget.models'; +import { LegendPosition, Widget } from './widget.models'; import { Timewindow } from '@shared/models/time/time.models'; import { EntityAliases } from './alias.models'; import { Filters } from '@shared/models/query/query.models'; @@ -49,7 +49,22 @@ export interface WidgetLayouts { [id: string]: WidgetLayout; } +export enum LayoutType { + default = 'default', + scada = 'scada' +} + +export const layoutTypes = Object.keys(LayoutType) as LayoutType[]; + +export const layoutTypeTranslationMap = new Map( + [ + [ LayoutType.default, 'dashboard.layout-type-default' ], + [ LayoutType.scada, 'dashboard.layout-type-scada' ] + ] +); + export interface GridSettings { + layoutType?: LayoutType; backgroundColor?: string; columns?: number; minColumns?: number; @@ -62,7 +77,6 @@ export interface GridSettings { mobileRowHeight?: number; mobileDisplayLayoutFirst?: boolean; layoutDimension?: LayoutDimension; - isScada?: boolean; [key: string]: any; } @@ -78,7 +92,7 @@ export interface DashboardLayoutInfo { } export interface LayoutDimension { - type?: LayoutType; + type?: LayoutDimensionType; fixedWidth?: number; fixedLayout?: DashboardLayoutId; leftWidthPercentage?: number; @@ -86,7 +100,7 @@ export interface LayoutDimension { export declare type DashboardLayoutId = 'main' | 'right'; -export declare type LayoutType = 'percentage' | 'fixed'; +export declare type LayoutDimensionType = 'percentage' | 'fixed'; export declare type DashboardStateLayouts = {[key in DashboardLayoutId]?: DashboardLayout}; diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index 097931232a..19c05bcc65 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -1167,7 +1167,9 @@ "move-by": "Move by", "cols": "cols", "rows": "rows", - "scada-layout": "SCADA layout", + "layout": "Layout", + "layout-type-default": "Default", + "layout-type-scada": "SCADA", "layout-settings": "Layout settings", "columns-count": "Columns count", "columns-count-required": "Columns count is required.", From 83308a68d611c040d12d1a19bccd0a2edd142e83 Mon Sep 17 00:00:00 2001 From: IrynaMatveieva Date: Wed, 26 Jun 2024 14:12:08 +0300 Subject: [PATCH 073/442] added tests for the device attributes node --- .../metadata/TbGetAttributesNodeTest.java | 206 ++++++++----- .../metadata/TbGetDeviceAttrNodeTest.java | 270 ++++++++++++++---- 2 files changed, 355 insertions(+), 121 deletions(-) diff --git a/rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/metadata/TbGetAttributesNodeTest.java b/rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/metadata/TbGetAttributesNodeTest.java index 9eb74b5627..84bbafe825 100644 --- a/rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/metadata/TbGetAttributesNodeTest.java +++ b/rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/metadata/TbGetAttributesNodeTest.java @@ -15,20 +15,21 @@ */ package org.thingsboard.rule.engine.metadata; -import com.datastax.oss.driver.api.core.uuid.Uuids; -import com.fasterxml.jackson.databind.JsonNode; import com.google.common.util.concurrent.Futures; import org.junit.jupiter.api.AfterEach; import org.junit.jupiter.api.BeforeEach; import org.junit.jupiter.api.Test; -import org.junit.jupiter.api.Assertions; import org.junit.jupiter.api.extension.ExtendWith; +import org.junit.jupiter.params.provider.Arguments; import org.mockito.ArgumentCaptor; import org.mockito.Mock; +import org.mockito.Spy; import org.mockito.junit.jupiter.MockitoExtension; import org.thingsboard.common.util.AbstractListeningExecutor; import org.thingsboard.common.util.JacksonUtil; +import org.thingsboard.rule.engine.AbstractRuleNodeUpgradeTest; import org.thingsboard.rule.engine.api.TbContext; +import org.thingsboard.rule.engine.api.TbNode; import org.thingsboard.rule.engine.api.TbNodeConfiguration; import org.thingsboard.rule.engine.api.TbNodeException; import org.thingsboard.rule.engine.util.TbMsgSource; @@ -43,7 +44,6 @@ import org.thingsboard.server.common.data.kv.JsonDataEntry; import org.thingsboard.server.common.data.kv.StringDataEntry; import org.thingsboard.server.common.data.kv.TsKvEntry; import org.thingsboard.server.common.data.msg.TbMsgType; -import org.thingsboard.server.common.data.util.TbPair; import org.thingsboard.server.common.msg.TbMsg; import org.thingsboard.server.common.msg.TbMsgMetaData; import org.thingsboard.server.dao.attributes.AttributesService; @@ -51,25 +51,26 @@ import org.thingsboard.server.dao.timeseries.TimeseriesService; import java.util.ArrayList; import java.util.List; +import java.util.UUID; import java.util.stream.Collectors; +import java.util.stream.Stream; import static org.assertj.core.api.Assertions.assertThat; import static org.junit.jupiter.api.Assertions.assertEquals; import static org.junit.jupiter.api.Assertions.assertNotNull; -import static org.junit.jupiter.api.Assertions.assertTrue; import static org.junit.jupiter.api.Assertions.assertThrows; +import static org.junit.jupiter.api.Assertions.assertTrue; import static org.mockito.ArgumentMatchers.any; import static org.mockito.Mockito.lenient; import static org.mockito.Mockito.never; import static org.mockito.Mockito.timeout; import static org.mockito.Mockito.verify; -import static org.mockito.Mockito.when; @ExtendWith(MockitoExtension.class) -public class TbGetAttributesNodeTest { +public class TbGetAttributesNodeTest extends AbstractRuleNodeUpgradeTest { - private static final EntityId ORIGINATOR = new DeviceId(Uuids.timeBased()); - private static final TenantId TENANT_ID = TenantId.fromUUID(Uuids.timeBased()); + private final EntityId ORIGINATOR_ID = new DeviceId(UUID.fromString("965f2975-787a-4f21-87e6-9aa4738186ff")); + private final TenantId TENANT_ID = TenantId.fromUUID(UUID.fromString("befd3239-79b8-4263-a8d1-95b69f44f798")); private AbstractListeningExecutor dbExecutor; @Mock @@ -84,6 +85,8 @@ public class TbGetAttributesNodeTest { private List sharedAttributes; private List tsKeys; private long ts; + + @Spy private TbGetAttributesNode node; @BeforeEach @@ -107,16 +110,16 @@ public class TbGetAttributesNodeTest { tsKeys = List.of("temperature", "humidity", "unknown"); ts = System.currentTimeMillis(); - lenient().when(attributesServiceMock.find(TENANT_ID, ORIGINATOR, AttributeScope.CLIENT_SCOPE, clientAttributes)) + lenient().when(attributesServiceMock.find(TENANT_ID, ORIGINATOR_ID, AttributeScope.CLIENT_SCOPE, clientAttributes)) .thenReturn(Futures.immediateFuture(getListAttributeKvEntry(clientAttributes, ts))); - lenient().when(attributesServiceMock.find(TENANT_ID, ORIGINATOR, AttributeScope.SERVER_SCOPE, serverAttributes)) + lenient().when(attributesServiceMock.find(TENANT_ID, ORIGINATOR_ID, AttributeScope.SERVER_SCOPE, serverAttributes)) .thenReturn(Futures.immediateFuture(getListAttributeKvEntry(serverAttributes, ts))); - lenient().when(attributesServiceMock.find(TENANT_ID, ORIGINATOR, AttributeScope.SHARED_SCOPE, sharedAttributes)) + lenient().when(attributesServiceMock.find(TENANT_ID, ORIGINATOR_ID, AttributeScope.SHARED_SCOPE, sharedAttributes)) .thenReturn(Futures.immediateFuture(getListAttributeKvEntry(sharedAttributes, ts))); - lenient().when(timeseriesServiceMock.findLatest(TENANT_ID, ORIGINATOR, tsKeys)) + lenient().when(timeseriesServiceMock.findLatest(TENANT_ID, ORIGINATOR_ID, tsKeys)) .thenReturn(Futures.immediateFuture(getListTsKvEntry(tsKeys, ts))); } @@ -129,7 +132,7 @@ public class TbGetAttributesNodeTest { public void givenFetchAttributesToMetadata_whenOnMsg_thenShouldTellSuccess() throws Exception { // GIVEN node = initNode(TbMsgSource.METADATA, false, false); - var msg = getTbMsg(ORIGINATOR); + var msg = getTbMsg(ORIGINATOR_ID); // WHEN node.onMsg(ctxMock, msg); @@ -148,7 +151,7 @@ public class TbGetAttributesNodeTest { public void givenFetchLatestTimeseriesToMetadata_whenOnMsg_thenShouldTellSuccess() throws Exception { // GIVEN node = initNode(TbMsgSource.METADATA, true, false); - var msg = getTbMsg(ORIGINATOR); + var msg = getTbMsg(ORIGINATOR_ID); // WHEN node.onMsg(ctxMock, msg); @@ -167,7 +170,7 @@ public class TbGetAttributesNodeTest { public void givenFetchAttributesToData_whenOnMsg_thenShouldTellSuccess() throws Exception { // GIVEN node = initNode(TbMsgSource.DATA, false, false); - var msg = getTbMsg(ORIGINATOR); + var msg = getTbMsg(ORIGINATOR_ID); // WHEN node.onMsg(ctxMock, msg); @@ -186,7 +189,7 @@ public class TbGetAttributesNodeTest { public void givenFetchLatestTimeseriesToData_whenOnMsg_thenShouldTellSuccess() throws Exception { // GIVEN node = initNode(TbMsgSource.DATA, true, false); - var msg = getTbMsg(ORIGINATOR); + var msg = getTbMsg(ORIGINATOR_ID); // WHEN node.onMsg(ctxMock, msg); @@ -205,7 +208,7 @@ public class TbGetAttributesNodeTest { public void givenFetchAttributesToMetadata_whenOnMsg_thenShouldTellFailure() throws Exception { // GIVEN node = initNode(TbMsgSource.METADATA, false, true); - var msg = getTbMsg(ORIGINATOR); + var msg = getTbMsg(ORIGINATOR_ID); // WHEN node.onMsg(ctxMock, msg); @@ -224,7 +227,7 @@ public class TbGetAttributesNodeTest { public void givenFetchLatestTimeseriesToData_whenOnMsg_thenShouldTellFailure() throws Exception { // GIVEN node = initNode(TbMsgSource.DATA, true, true); - var msg = getTbMsg(ORIGINATOR); + var msg = getTbMsg(ORIGINATOR_ID); // WHEN node.onMsg(ctxMock, msg); @@ -243,7 +246,7 @@ public class TbGetAttributesNodeTest { public void givenFetchLatestTimeseriesToDataAndDataIsNotJsonObject_whenOnMsg_thenException() throws Exception { // GIVEN node = initNode(TbMsgSource.DATA, true, true); - var msg = TbMsg.newMsg(TbMsgType.POST_TELEMETRY_REQUEST, ORIGINATOR, TbMsgMetaData.EMPTY, TbMsg.EMPTY_JSON_ARRAY); + var msg = TbMsg.newMsg(TbMsgType.POST_TELEMETRY_REQUEST, ORIGINATOR_ID, TbMsgMetaData.EMPTY, TbMsg.EMPTY_JSON_ARRAY); // WHEN var exception = assertThrows(IllegalArgumentException.class, () -> node.onMsg(ctxMock, msg)); @@ -253,56 +256,6 @@ public class TbGetAttributesNodeTest { assertThat(exception.getMessage()).isEqualTo("Message body is not an object!"); } - @Test - public void givenOldConfig_whenUpgrade_thenShouldReturnTrueResultWithNewConfig() throws Exception { - var defaultConfig = new TbGetAttributesNodeConfiguration().defaultConfiguration(); - var node = new TbGetAttributesNode(); - String oldConfig = "{\"fetchToData\":false," + - "\"clientAttributeNames\":[]," + - "\"sharedAttributeNames\":[]," + - "\"serverAttributeNames\":[]," + - "\"latestTsKeyNames\":[]," + - "\"tellFailureIfAbsent\":true," + - "\"getLatestValueWithTs\":false}"; - JsonNode configJson = JacksonUtil.toJsonNode(oldConfig); - TbPair upgrade = node.upgrade(0, configJson); - Assertions.assertTrue(upgrade.getFirst()); - Assertions.assertEquals(defaultConfig, JacksonUtil.treeToValue(upgrade.getSecond(), defaultConfig.getClass())); - } - - @Test - public void givenOldConfigWithNoFetchToDataProperty_whenUpgrade_thenShouldReturnTrueResultWithNewConfig() throws Exception { - var defaultConfig = new TbGetAttributesNodeConfiguration().defaultConfiguration(); - var node = new TbGetAttributesNode(); - String oldConfig = "{\"clientAttributeNames\":[]," + - "\"sharedAttributeNames\":[]," + - "\"serverAttributeNames\":[]," + - "\"latestTsKeyNames\":[]," + - "\"tellFailureIfAbsent\":true," + - "\"getLatestValueWithTs\":false}"; - JsonNode configJson = JacksonUtil.toJsonNode(oldConfig); - TbPair upgrade = node.upgrade(0, configJson); - Assertions.assertTrue(upgrade.getFirst()); - Assertions.assertEquals(defaultConfig, JacksonUtil.treeToValue(upgrade.getSecond(), defaultConfig.getClass())); - } - - @Test - public void givenOldConfigWithNullFetchToDataProperty_whenUpgrade_thenShouldReturnTrueResultWithNewConfig() throws Exception { - var defaultConfig = new TbGetAttributesNodeConfiguration().defaultConfiguration(); - var node = new TbGetAttributesNode(); - String oldConfig = "{\"fetchToData\":null," + - "\"clientAttributeNames\":[]," + - "\"sharedAttributeNames\":[]," + - "\"serverAttributeNames\":[]," + - "\"latestTsKeyNames\":[]," + - "\"tellFailureIfAbsent\":true," + - "\"getLatestValueWithTs\":false}"; - JsonNode configJson = JacksonUtil.toJsonNode(oldConfig); - TbPair upgrade = node.upgrade(0, configJson); - Assertions.assertTrue(upgrade.getFirst()); - Assertions.assertEquals(defaultConfig, JacksonUtil.treeToValue(upgrade.getSecond(), defaultConfig.getClass())); - } - private TbMsg checkMsg(boolean checkSuccess) { var msgCaptor = ArgumentCaptor.forClass(TbMsg.class); if (checkSuccess) { @@ -421,4 +374,117 @@ public class TbGetAttributesNodeTest { return kvEntriesList; } + private static Stream givenFromVersionAndConfig_whenUpgrade_thenVerifyHasChangesAndConfig() { + return Stream.of( + // config for version 1 with upgrade from version 0 + Arguments.of(0, + """ + { + "fetchToData":false, + "clientAttributeNames":[], + "sharedAttributeNames":[], + "serverAttributeNames":[], + "latestTsKeyNames":[], + "tellFailureIfAbsent":true, + "getLatestValueWithTs":false + } + """, + true, + """ + { + "tellFailureIfAbsent": true, + "fetchTo": "METADATA", + "clientAttributeNames": [], + "sharedAttributeNames": [], + "serverAttributeNames": [], + "latestTsKeyNames": [], + "getLatestValueWithTs": false + } + """ + ), + // config for version 1 with upgrade from version 0 (old config with no fetchToData property) + Arguments.of(0, + """ + { + "clientAttributeNames":[], + "sharedAttributeNames":[],"serverAttributeNames":[], + "latestTsKeyNames":[], + "tellFailureIfAbsent":true, + "getLatestValueWithTs":false + } + """, + true, + """ + { + "tellFailureIfAbsent": true, + "fetchTo": "METADATA", + "clientAttributeNames": [], + "sharedAttributeNames": [], + "serverAttributeNames": [], + "latestTsKeyNames": [], + "getLatestValueWithTs": false + } + """ + ), + // config for version 1 with upgrade from version 0 (old config with null fetchToData property) + Arguments.of(0, + """ + { + "fetchToData":null, + "clientAttributeNames":[], + "sharedAttributeNames":[], + "serverAttributeNames":[], + "latestTsKeyNames":[], + "tellFailureIfAbsent":true, + "getLatestValueWithTs":false + } + """, + true, + """ + { + "tellFailureIfAbsent": true, + "fetchTo": "METADATA", + "clientAttributeNames": [], + "sharedAttributeNames": [], + "serverAttributeNames": [], + "latestTsKeyNames": [], + "getLatestValueWithTs": false + } + """ + ), + // config for version 1 with upgrade from version 1 + Arguments.of(1, + """ + { + "tellFailureIfAbsent": true, + "fetchTo": "METADATA", + "clientAttributeNames": [], + "sharedAttributeNames": [], + "serverAttributeNames": [], + "latestTsKeyNames": [], + "getLatestValueWithTs": false + } + """, + false, + """ + { + "tellFailureIfAbsent": true, + "fetchTo": "METADATA", + "clientAttributeNames": [], + "sharedAttributeNames": [], + "serverAttributeNames": [], + "latestTsKeyNames": [], + "getLatestValueWithTs": false + } + """ + ) + ); + + } + + @Override + protected TbNode getTestNode() { + return node; + } + } diff --git a/rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/metadata/TbGetDeviceAttrNodeTest.java b/rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/metadata/TbGetDeviceAttrNodeTest.java index ac6bb38be5..8cacf33f79 100644 --- a/rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/metadata/TbGetDeviceAttrNodeTest.java +++ b/rule-engine/rule-engine-components/src/test/java/org/thingsboard/rule/engine/metadata/TbGetDeviceAttrNodeTest.java @@ -15,68 +15,236 @@ */ package org.thingsboard.rule.engine.metadata; -import com.fasterxml.jackson.databind.JsonNode; +import com.google.common.util.concurrent.Futures; +import org.junit.jupiter.api.BeforeEach; import org.junit.jupiter.api.Test; -import org.junit.jupiter.api.Assertions; +import org.junit.jupiter.api.extension.ExtendWith; +import org.junit.jupiter.params.provider.Arguments; +import org.mockito.ArgumentCaptor; +import org.mockito.Mock; +import org.mockito.junit.jupiter.MockitoExtension; import org.thingsboard.common.util.JacksonUtil; -import org.thingsboard.server.common.data.util.TbPair; +import org.thingsboard.common.util.ListeningExecutor; +import org.thingsboard.rule.engine.AbstractRuleNodeUpgradeTest; +import org.thingsboard.rule.engine.TestDbCallbackExecutor; +import org.thingsboard.rule.engine.api.TbContext; +import org.thingsboard.rule.engine.api.TbNode; +import org.thingsboard.rule.engine.api.TbNodeConfiguration; +import org.thingsboard.rule.engine.api.TbNodeException; +import org.thingsboard.rule.engine.data.DeviceRelationsQuery; +import org.thingsboard.rule.engine.util.TbMsgSource; +import org.thingsboard.server.common.data.device.DeviceSearchQuery; +import org.thingsboard.server.common.data.id.DeviceId; +import org.thingsboard.server.common.data.id.TenantId; +import org.thingsboard.server.common.data.msg.TbMsgType; +import org.thingsboard.server.common.data.relation.EntityRelation; +import org.thingsboard.server.common.data.relation.EntitySearchDirection; +import org.thingsboard.server.common.msg.TbMsg; +import org.thingsboard.server.common.msg.TbMsgMetaData; +import org.thingsboard.server.dao.device.DeviceService; -public class TbGetDeviceAttrNodeTest { +import java.util.Arrays; +import java.util.Collections; +import java.util.NoSuchElementException; +import java.util.UUID; +import java.util.stream.Stream; + +import static org.assertj.core.api.Assertions.assertThat; +import static org.assertj.core.api.Assertions.assertThatThrownBy; +import static org.mockito.ArgumentMatchers.any; +import static org.mockito.ArgumentMatchers.eq; +import static org.mockito.BDDMockito.given; +import static org.mockito.BDDMockito.spy; +import static org.mockito.BDDMockito.then; + +@ExtendWith(MockitoExtension.class) +public class TbGetDeviceAttrNodeTest extends AbstractRuleNodeUpgradeTest { + + private final TenantId TENANT_ID = new TenantId(UUID.fromString("5aea576c-66c4-4732-86b8-dc6bfcde7443")); + private final DeviceId DEVICE_ID = new DeviceId(UUID.fromString("40b6b393-6ddf-47f9-973a-18550ca70384")); + private final ListeningExecutor executor = new TestDbCallbackExecutor(); + + + private TbGetDeviceAttrNode node; + private TbGetDeviceAttrNodeConfiguration config; + + @Mock + private TbContext ctxMock; + @Mock + private DeviceService deviceServiceMock; + + @BeforeEach + public void setUp() { + node = spy(new TbGetDeviceAttrNode()); + config = new TbGetDeviceAttrNodeConfiguration().defaultConfiguration(); + } @Test - public void givenOldConfig_whenUpgrade_thenShouldReturnTrueResultWithNewConfig() throws Exception { - var defaultConfig = new TbGetDeviceAttrNodeConfiguration().defaultConfiguration(); - var node = new TbGetDeviceAttrNode(); - String oldConfig = "{\"fetchToData\":false," + - "\"clientAttributeNames\":[]," + - "\"sharedAttributeNames\":[]," + - "\"serverAttributeNames\":[]," + - "\"latestTsKeyNames\":[]," + - "\"tellFailureIfAbsent\":true," + - "\"getLatestValueWithTs\":false," + - "\"deviceRelationsQuery\":{\"direction\":\"FROM\",\"maxLevel\":1,\"relationType\":\"Contains\",\"deviceTypes\":[\"default\"]," + - "\"fetchLastLevelOnly\":false}}"; - JsonNode configJson = JacksonUtil.toJsonNode(oldConfig); - TbPair upgrade = node.upgrade(0, configJson); - Assertions.assertTrue(upgrade.getFirst()); - Assertions.assertEquals(defaultConfig, JacksonUtil.treeToValue(upgrade.getSecond(), defaultConfig.getClass())); + public void verifyDefaultConfig() { + assertThat(config.getClientAttributeNames()).isEmpty(); + assertThat(config.getSharedAttributeNames()).isEmpty(); + assertThat(config.getServerAttributeNames()).isEmpty(); + assertThat(config.getLatestTsKeyNames()).isEmpty(); + assertThat(config.isTellFailureIfAbsent()).isTrue(); + assertThat(config.isGetLatestValueWithTs()).isFalse(); + assertThat(config.getFetchTo()).isEqualTo(TbMsgSource.METADATA); + + var deviceRelationsQuery = new DeviceRelationsQuery(); + deviceRelationsQuery.setDirection(EntitySearchDirection.FROM); + deviceRelationsQuery.setMaxLevel(1); + deviceRelationsQuery.setRelationType(EntityRelation.CONTAINS_TYPE); + deviceRelationsQuery.setDeviceTypes(Collections.singletonList("default")); + + assertThat(config.getDeviceRelationsQuery()).isEqualTo(deviceRelationsQuery); } @Test - public void givenOldConfigWithNoFetchToDataProperty_whenUpgrade_thenShouldReturnTrueResultWithNewConfig() throws Exception { - var defaultConfig = new TbGetDeviceAttrNodeConfiguration().defaultConfiguration(); - var node = new TbGetDeviceAttrNode(); - String oldConfig = "{\"clientAttributeNames\":[]," + - "\"sharedAttributeNames\":[]," + - "\"serverAttributeNames\":[]," + - "\"latestTsKeyNames\":[]," + - "\"tellFailureIfAbsent\":true," + - "\"getLatestValueWithTs\":false," + - "\"deviceRelationsQuery\":{\"direction\":\"FROM\",\"maxLevel\":1,\"relationType\":\"Contains\",\"deviceTypes\":[\"default\"]," + - "\"fetchLastLevelOnly\":false}}"; - JsonNode configJson = JacksonUtil.toJsonNode(oldConfig); - TbPair upgrade = node.upgrade(0, configJson); - Assertions.assertTrue(upgrade.getFirst()); - Assertions.assertEquals(defaultConfig, JacksonUtil.treeToValue(upgrade.getSecond(), defaultConfig.getClass())); + public void givenFetchToIsNull_whenInit_thenThrowsException() { + config.setFetchTo(null); + assertThatThrownBy(() -> node.init(ctxMock, new TbNodeConfiguration(JacksonUtil.valueToTree(config)))) + .isInstanceOf(TbNodeException.class) + .hasMessage("FetchTo option can't be null! Allowed values: " + Arrays.toString(TbMsgSource.values())); } @Test - public void givenOldConfigWithNullFetchToDataProperty_whenUpgrade_thenShouldReturnTrueResultWithNewConfig() throws Exception { - var defaultConfig = new TbGetDeviceAttrNodeConfiguration().defaultConfiguration(); - var node = new TbGetDeviceAttrNode(); - String oldConfig = "{\"fetchToData\":null," + - "\"clientAttributeNames\":[]," + - "\"sharedAttributeNames\":[]," + - "\"serverAttributeNames\":[]," + - "\"latestTsKeyNames\":[]," + - "\"tellFailureIfAbsent\":true," + - "\"getLatestValueWithTs\":false," + - "\"deviceRelationsQuery\":{\"direction\":\"FROM\",\"maxLevel\":1,\"relationType\":\"Contains\",\"deviceTypes\":[\"default\"]," + - "\"fetchLastLevelOnly\":false}}"; - JsonNode configJson = JacksonUtil.toJsonNode(oldConfig); - TbPair upgrade = node.upgrade(0, configJson); - Assertions.assertTrue(upgrade.getFirst()); - Assertions.assertEquals(defaultConfig, JacksonUtil.treeToValue(upgrade.getSecond(), defaultConfig.getClass())); + public void givenDeviceDoesNotExist_whenOnMsg_thenTellFailure() throws TbNodeException { + node.init(ctxMock, new TbNodeConfiguration(JacksonUtil.valueToTree(config))); + + given(ctxMock.getDeviceService()).willReturn(deviceServiceMock); + given(ctxMock.getTenantId()).willReturn(TENANT_ID); + given(deviceServiceMock.findDevicesByQuery(any(TenantId.class), any(DeviceSearchQuery.class))).willReturn(Futures.immediateFuture(Collections.emptyList())); + given(ctxMock.getDbCallbackExecutor()).willReturn(executor); + + TbMsg msg = TbMsg.newMsg(TbMsgType.POST_TELEMETRY_REQUEST, DEVICE_ID, TbMsgMetaData.EMPTY, TbMsg.EMPTY_JSON_OBJECT); + node.onMsg(ctxMock, msg); + + ArgumentCaptor actualException = ArgumentCaptor.forClass(Throwable.class); + then(ctxMock).should().tellFailure(eq(msg), actualException.capture()); + assertThat(actualException.getValue()) + .isInstanceOf(NoSuchElementException.class) + .hasMessage("Failed to find related device to message originator using relation query specified in the configuration!"); + } + + private static Stream givenFromVersionAndConfig_whenUpgrade_thenVerifyHasChangesAndConfig() { + return Stream.of( + // config for version 1 with upgrade from version 0 + Arguments.of(0, + """ + { + "fetchToData":false, + "clientAttributeNames":[], + "sharedAttributeNames":[], + "serverAttributeNames":[], + "latestTsKeyNames":[], + "tellFailureIfAbsent":true, + "getLatestValueWithTs":false, + "deviceRelationsQuery":{"direction":"FROM","maxLevel":1,"relationType":"Contains","deviceTypes":["default"],"fetchLastLevelOnly":false} + } + """, + true, + """ + { + "deviceRelationsQuery": {"direction": "FROM","maxLevel": 1, "relationType": "Contains","deviceTypes": ["default"],"fetchLastLevelOnly": false}, + "tellFailureIfAbsent": true, + "fetchTo": "METADATA", + "clientAttributeNames": [], + "sharedAttributeNames": [], + "serverAttributeNames": [], + "latestTsKeyNames": [], + "getLatestValueWithTs": false + } + """ + ), + // config for version 1 with upgrade from version 0 (old config with no fetchToData property) + Arguments.of(0, + """ + { + "clientAttributeNames":[], + "sharedAttributeNames":[], + "serverAttributeNames":[], + "latestTsKeyNames":[], + "tellFailureIfAbsent":true, + "getLatestValueWithTs":false, + "deviceRelationsQuery":{"direction":"FROM","maxLevel":1,"relationType":"Contains","deviceTypes":["default"],"fetchLastLevelOnly":false} + } + """, + true, + """ + { + "deviceRelationsQuery": {"direction": "FROM","maxLevel": 1, "relationType": "Contains","deviceTypes": ["default"],"fetchLastLevelOnly": false}, + "tellFailureIfAbsent": true, + "fetchTo": "METADATA", + "clientAttributeNames": [], + "sharedAttributeNames": [], + "serverAttributeNames": [], + "latestTsKeyNames": [], + "getLatestValueWithTs": false + } + """ + ), + // config for version 1 with upgrade from version 0 (old config with null fetchToData property) + Arguments.of(0, + """ + { + "fetchToData":null, + "clientAttributeNames":[], + "sharedAttributeNames":[], + "serverAttributeNames":[], + "latestTsKeyNames":[], + "tellFailureIfAbsent":true, + "getLatestValueWithTs":false, + "deviceRelationsQuery":{"direction":"FROM","maxLevel":1,"relationType":"Contains","deviceTypes":["default"],"fetchLastLevelOnly":false} + } + """, + true, + """ + { + "deviceRelationsQuery": {"direction": "FROM","maxLevel": 1, "relationType": "Contains","deviceTypes": ["default"],"fetchLastLevelOnly": false}, + "tellFailureIfAbsent": true, + "fetchTo": "METADATA", + "clientAttributeNames": [], + "sharedAttributeNames": [], + "serverAttributeNames": [], + "latestTsKeyNames": [], + "getLatestValueWithTs": false + } + """ + ), + // config for version 1 with upgrade from version 1 + Arguments.of(1, + """ + { + "deviceRelationsQuery": {"direction": "FROM","maxLevel": 1, "relationType": "Contains","deviceTypes": ["default"],"fetchLastLevelOnly": false}, + "tellFailureIfAbsent": true, + "fetchTo": "METADATA", + "clientAttributeNames": [], + "sharedAttributeNames": [], + "serverAttributeNames": [], + "latestTsKeyNames": [], + "getLatestValueWithTs": false + } + """, + false, + """ + { + "deviceRelationsQuery": {"direction": "FROM","maxLevel": 1, "relationType": "Contains","deviceTypes": ["default"],"fetchLastLevelOnly": false}, + "tellFailureIfAbsent": true, + "fetchTo": "METADATA", + "clientAttributeNames": [], + "sharedAttributeNames": [], + "serverAttributeNames": [], + "latestTsKeyNames": [], + "getLatestValueWithTs": false + } + """ + ) + ); + + } + + @Override + protected TbNode getTestNode() { + return node; } } From 118407d982cea7e2cfff7937511560cf96b8736a Mon Sep 17 00:00:00 2001 From: YevhenBondarenko Date: Wed, 26 Jun 2024 15:51:32 +0200 Subject: [PATCH 074/442] implemented versioned cache --- .../cache/RedisTbTransactionalCache.java | 15 +- ...VersionedCaffeineTbTransactionalCache.java | 91 ++++++++++ .../VersionedRedisTbTransactionalCache.java | 163 ++++++++++++++++++ .../cache/VersionedTbTransactionalCache.java | 33 ++++ .../server/common/data/HasVersion.java | 20 +++ .../common/data/kv/AttributeKvEntry.java | 4 +- .../common/data/kv/BaseAttributeKvEntry.java | 14 ++ .../server/common/data/util/TbPair.java | 7 + .../AbstractVersionedInsertRepository.java | 18 +- .../attributes/AttributeCaffeineCache.java | 4 +- .../dao/attributes/AttributeRedisCache.java | 33 ++-- .../server/dao/attributes/AttributesDao.java | 3 + .../attributes/CachedAttributesService.java | 73 ++++---- .../server/dao/model/BaseVersionedEntity.java | 20 +++ .../server/dao/model/ModelConstants.java | 1 + .../dao/model/sql/AttributeKvEntity.java | 6 +- .../server/dao/model/sql/VersionedEntity.java | 30 ++++ .../AttributeKvInsertRepository.java | 8 +- .../sql/attributes/AttributeKvRepository.java | 12 +- .../dao/sql/attributes/JpaAttributeDao.java | 15 +- .../sql/SqlLatestInsertTsRepository.java | 6 +- .../main/resources/sql/schema-entities.sql | 8 +- .../main/resources/sql/schema-timescale.sql | 4 +- .../resources/sql/schema-ts-latest-psql.sql | 6 +- .../resources/sql/psql/drop-all-tables.sql | 2 + 25 files changed, 492 insertions(+), 104 deletions(-) create mode 100644 common/cache/src/main/java/org/thingsboard/server/cache/VersionedCaffeineTbTransactionalCache.java create mode 100644 common/cache/src/main/java/org/thingsboard/server/cache/VersionedRedisTbTransactionalCache.java create mode 100644 common/cache/src/main/java/org/thingsboard/server/cache/VersionedTbTransactionalCache.java create mode 100644 common/data/src/main/java/org/thingsboard/server/common/data/HasVersion.java create mode 100644 dao/src/main/java/org/thingsboard/server/dao/model/BaseVersionedEntity.java create mode 100644 dao/src/main/java/org/thingsboard/server/dao/model/sql/VersionedEntity.java diff --git a/common/cache/src/main/java/org/thingsboard/server/cache/RedisTbTransactionalCache.java b/common/cache/src/main/java/org/thingsboard/server/cache/RedisTbTransactionalCache.java index abfbb398c9..543739aad4 100644 --- a/common/cache/src/main/java/org/thingsboard/server/cache/RedisTbTransactionalCache.java +++ b/common/cache/src/main/java/org/thingsboard/server/cache/RedisTbTransactionalCache.java @@ -29,7 +29,6 @@ import org.springframework.data.redis.core.types.Expiration; import org.springframework.data.redis.serializer.RedisSerializer; import org.springframework.data.redis.serializer.StringRedisSerializer; import org.thingsboard.server.common.data.FstStatsService; -import redis.clients.jedis.Connection; import redis.clients.jedis.Jedis; import redis.clients.jedis.JedisPool; import redis.clients.jedis.util.JedisClusterCRC16; @@ -44,7 +43,7 @@ import java.util.concurrent.TimeUnit; @Slf4j public abstract class RedisTbTransactionalCache implements TbTransactionalCache { - private static final byte[] BINARY_NULL_VALUE = RedisSerializer.java().serialize(NullValue.INSTANCE); + static final byte[] BINARY_NULL_VALUE = RedisSerializer.java().serialize(NullValue.INSTANCE); static final JedisPool MOCK_POOL = new JedisPool(); //non-null pool required for JedisConnection to trigger closing jedis connection @Autowired @@ -79,7 +78,7 @@ public abstract class RedisTbTransactionalCache get(K key) { try (var connection = connectionFactory.getConnection()) { byte[] rawKey = getRawKey(key); - byte[] rawValue = connection.get(rawKey); + byte[] rawValue = doGet(connection, rawKey); if (rawValue == null) { return null; } else if (Arrays.equals(rawValue, BINARY_NULL_VALUE)) { @@ -96,6 +95,10 @@ public abstract class RedisTbTransactionalCache(this, connection); } - private RedisConnection getConnection(byte[] rawKey) { + protected RedisConnection getConnection(byte[] rawKey) { if (!connectionFactory.isRedisClusterAware()) { return connectionFactory.getConnection(); } @@ -180,7 +183,7 @@ public abstract class RedisTbTransactionalCache implements VersionedTbTransactionalCache { + + private final CacheManager cacheManager; + private final String cacheName; + + private final Lock lock = new ReentrantLock(); + + @Override + public TbCacheValueWrapper get(K key) { + return SimpleTbCacheValueWrapper.wrap(doGet(key).getSecond()); + } + + @Override + public void put(K key, V value) { + Long version = value != null ? value.getVersion() : 0; + put(key, value, version); + } + + @Override + public void put(K key, V value, Long version) { + if (version == null) { + return; + } + lock.lock(); + try { + TbPair versionValuePair = doGet(key); + Long currentVersion = versionValuePair.getFirst(); + if (currentVersion == null || version >= currentVersion) { + cacheManager.getCache(cacheName).put(key, TbPair.of(version, value)); + } + } finally { + lock.unlock(); + } + } + + private TbPair doGet(K key) { + Cache.ValueWrapper source = cacheManager.getCache(cacheName).get(key); + return source == null ? TbPair.emptyPair() : (TbPair) source.get(); + } + + @Override + public void evict(K key) { + lock.lock(); + try { + cacheManager.getCache(cacheName).evict(key); + } finally { + lock.unlock(); + } + } + + @Override + public void evict(K key, Long version) { + if (version == null) { + return; + } + lock.lock(); + try { + put(key, null, version); + } finally { + lock.unlock(); + } + } +} diff --git a/common/cache/src/main/java/org/thingsboard/server/cache/VersionedRedisTbTransactionalCache.java b/common/cache/src/main/java/org/thingsboard/server/cache/VersionedRedisTbTransactionalCache.java new file mode 100644 index 0000000000..34b46d535a --- /dev/null +++ b/common/cache/src/main/java/org/thingsboard/server/cache/VersionedRedisTbTransactionalCache.java @@ -0,0 +1,163 @@ +/** + * Copyright ยฉ 2016-2024 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. + */ +package org.thingsboard.server.cache; + +import jakarta.annotation.PostConstruct; +import lombok.extern.slf4j.Slf4j; +import org.apache.commons.lang3.NotImplementedException; +import org.springframework.dao.InvalidDataAccessApiUsageException; +import org.springframework.data.redis.connection.RedisConnection; +import org.springframework.data.redis.connection.RedisConnectionFactory; +import org.springframework.data.redis.connection.ReturnType; +import org.springframework.data.redis.serializer.StringRedisSerializer; +import org.thingsboard.server.common.data.HasVersion; + +import java.io.Serializable; +import java.util.Arrays; +import java.util.Collection; +import java.util.List; + +@Slf4j +public abstract class VersionedRedisTbTransactionalCache extends RedisTbTransactionalCache implements VersionedTbTransactionalCache { + + private static final int VERSION_SIZE = 8; + private static final int VALUE_END_OFFSET = -1; + + static final byte[] SET_VERSIONED_VALUE_LUA_SCRIPT = StringRedisSerializer.UTF_8.serialize(""" + -- KEYS[1] is the key + -- ARGV[1] is the new value + -- ARGV[2] is the new version + + local key = KEYS[1] + local newValue = ARGV[1] + local newVersion = tonumber(ARGV[2]) + + -- Function to set the new value with the version + local function setNewValue() + local newValueWithVersion = struct.pack(">I8", newVersion) .. newValue:sub(9) + redis.call('SET', key, newValueWithVersion) + end + + -- Get the current version (first 8 bytes) of the current value + local currentVersionBytes = redis.call('GETRANGE', key, 0, 7) + + if currentVersionBytes and #currentVersionBytes == 8 then + -- Extract the current version from the first 8 bytes + local currentVersion = tonumber(struct.unpack(">I8", currentVersionBytes)) + + if newVersion >= currentVersion then + setNewValue() + end + else + -- If the current value is absent or the current version is not found, set the new value + setNewValue() + end + """); + static final byte[] SET_VERSIONED_VALUE_SHA = StringRedisSerializer.UTF_8.serialize("041b109dd56f6c8afb55090076e754727a5d3da0"); + + public VersionedRedisTbTransactionalCache(String cacheName, CacheSpecsMap cacheSpecsMap, RedisConnectionFactory connectionFactory, TBRedisCacheConfiguration configuration, TbRedisSerializer valueSerializer) { + super(cacheName, cacheSpecsMap, connectionFactory, configuration, valueSerializer); + } + + @PostConstruct + public void init() { + try (var connection = getConnection(SET_VERSIONED_VALUE_SHA)) { + log.debug("Loading LUA with expected SHA[{}], connection [{}]", new String(SET_VERSIONED_VALUE_SHA), connection.getNativeConnection()); + String sha = connection.scriptingCommands().scriptLoad(SET_VERSIONED_VALUE_LUA_SCRIPT); + if (!Arrays.equals(SET_VERSIONED_VALUE_SHA, StringRedisSerializer.UTF_8.serialize(sha))) { + log.error("SHA for SET_VERSIONED_VALUE_LUA_SCRIPT wrong! Expected [{}], but actual [{}], connection [{}]", new String(SET_VERSIONED_VALUE_SHA), sha, connection.getNativeConnection()); + } + } catch (Throwable t) { + log.error("Error on Redis versioned cache init", t); + } + } + + @Override + protected byte[] doGet(RedisConnection connection, byte[] rawKey) { + return connection.stringCommands().getRange(rawKey, VERSION_SIZE, VALUE_END_OFFSET); + } + + @Override + public void put(K key, V value) { + Long version = value!= null ? value.getVersion() : 0; + put(key, value, version); + } + + @Override + public void put(K key, V value, Long version) { + //TODO: use expiration + log.trace("put [{}][{}][{}]", key, value, version); + if (version == null) { + return; + } + final byte[] rawKey = getRawKey(key); + try (var connection = getConnection(rawKey)) { + byte[] rawValue = getRawValue(value); + byte[] rawVersion = StringRedisSerializer.UTF_8.serialize(String.valueOf(version)); + try { + connection.scriptingCommands().evalSha(SET_VERSIONED_VALUE_SHA, ReturnType.VALUE, 1, rawKey, rawValue, rawVersion); + } catch (InvalidDataAccessApiUsageException e) { + log.debug("loading LUA [{}]", connection.getNativeConnection()); + String sha = connection.scriptingCommands().scriptLoad(SET_VERSIONED_VALUE_LUA_SCRIPT); + if (!Arrays.equals(SET_VERSIONED_VALUE_SHA, StringRedisSerializer.UTF_8.serialize(sha))) { + log.error("SHA for SET_VERSIONED_VALUE_LUA_SCRIPT wrong! Expected [{}], but actual [{}]", new String(SET_VERSIONED_VALUE_SHA), sha); + } + try { + connection.scriptingCommands().evalSha(SET_VERSIONED_VALUE_SHA, ReturnType.VALUE, 1, rawKey, rawValue, rawVersion); + } catch (InvalidDataAccessApiUsageException ignored) { + log.debug("Slowly executing eval instead of fast evalsha"); + connection.scriptingCommands().eval(SET_VERSIONED_VALUE_LUA_SCRIPT, ReturnType.VALUE, 1, rawKey, rawValue, rawVersion); + } + } + } + } + + @Override + public void evict(K key, Long version) { + log.trace("evict [{}][{}]", key, version); + if (version != null) { + //TODO: use evict expiration + put(key, null, version); + } + } + + @Override + public void putIfAbsent(K key, V value) { + log.trace("putIfAbsent [{}][{}]", key, value); + throw new NotImplementedException("putIfAbsent is not supported by versioned cache"); + } + + @Override + public void evict(Collection keys) { + throw new NotImplementedException("evict by many keys is not supported by versioned cache"); + } + + @Override + public void evictOrPut(K key, V value) { + throw new NotImplementedException("evictOrPut is not supported by versioned cache"); + } + + @Override + public TbCacheTransaction newTransactionForKey(K key) { + throw new NotImplementedException("newTransactionForKey is not supported by versioned cache"); + } + + @Override + public TbCacheTransaction newTransactionForKeys(List keys) { + throw new NotImplementedException("newTransactionForKeys is not supported by versioned cache"); + } + +} diff --git a/common/cache/src/main/java/org/thingsboard/server/cache/VersionedTbTransactionalCache.java b/common/cache/src/main/java/org/thingsboard/server/cache/VersionedTbTransactionalCache.java new file mode 100644 index 0000000000..72f4a8c466 --- /dev/null +++ b/common/cache/src/main/java/org/thingsboard/server/cache/VersionedTbTransactionalCache.java @@ -0,0 +1,33 @@ +/** + * Copyright ยฉ 2016-2024 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. + */ +package org.thingsboard.server.cache; + +import org.thingsboard.server.common.data.HasVersion; + +import java.io.Serializable; + +public interface VersionedTbTransactionalCache { + + TbCacheValueWrapper get(K key); + + void put(K key, V value); + + void put(K key, V value, Long version); + + void evict(K key); + + void evict(K key, Long version); +} diff --git a/common/data/src/main/java/org/thingsboard/server/common/data/HasVersion.java b/common/data/src/main/java/org/thingsboard/server/common/data/HasVersion.java new file mode 100644 index 0000000000..fbeb8ef3b6 --- /dev/null +++ b/common/data/src/main/java/org/thingsboard/server/common/data/HasVersion.java @@ -0,0 +1,20 @@ +/** + * Copyright ยฉ 2016-2024 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. + */ +package org.thingsboard.server.common.data; + +public interface HasVersion { + long getVersion(); +} diff --git a/common/data/src/main/java/org/thingsboard/server/common/data/kv/AttributeKvEntry.java b/common/data/src/main/java/org/thingsboard/server/common/data/kv/AttributeKvEntry.java index 19057fb1aa..c63c953170 100644 --- a/common/data/src/main/java/org/thingsboard/server/common/data/kv/AttributeKvEntry.java +++ b/common/data/src/main/java/org/thingsboard/server/common/data/kv/AttributeKvEntry.java @@ -15,10 +15,12 @@ */ package org.thingsboard.server.common.data.kv; +import org.thingsboard.server.common.data.HasVersion; + /** * @author Andrew Shvayka */ -public interface AttributeKvEntry extends KvEntry { +public interface AttributeKvEntry extends KvEntry, HasVersion { long getLastUpdateTs(); diff --git a/common/data/src/main/java/org/thingsboard/server/common/data/kv/BaseAttributeKvEntry.java b/common/data/src/main/java/org/thingsboard/server/common/data/kv/BaseAttributeKvEntry.java index ced1486c14..6d48693511 100644 --- a/common/data/src/main/java/org/thingsboard/server/common/data/kv/BaseAttributeKvEntry.java +++ b/common/data/src/main/java/org/thingsboard/server/common/data/kv/BaseAttributeKvEntry.java @@ -29,9 +29,18 @@ public class BaseAttributeKvEntry implements AttributeKvEntry { @Valid private final KvEntry kv; + private final Long version; + public BaseAttributeKvEntry(KvEntry kv, long lastUpdateTs) { this.kv = kv; this.lastUpdateTs = lastUpdateTs; + this.version = null; + } + + public BaseAttributeKvEntry(KvEntry kv, long lastUpdateTs, Long version) { + this.kv = kv; + this.lastUpdateTs = lastUpdateTs; + this.version = version; } public BaseAttributeKvEntry(long lastUpdateTs, KvEntry kv) { @@ -88,6 +97,11 @@ public class BaseAttributeKvEntry implements AttributeKvEntry { return kv.getValue(); } + @Override + public long getVersion() { + return version; + } + @Override public boolean equals(Object o) { if (this == o) return true; diff --git a/common/data/src/main/java/org/thingsboard/server/common/data/util/TbPair.java b/common/data/src/main/java/org/thingsboard/server/common/data/util/TbPair.java index 6e8b2e5696..315131bdad 100644 --- a/common/data/src/main/java/org/thingsboard/server/common/data/util/TbPair.java +++ b/common/data/src/main/java/org/thingsboard/server/common/data/util/TbPair.java @@ -21,10 +21,17 @@ import lombok.Data; @Data @AllArgsConstructor public class TbPair { + public static final TbPair EMPTY = new TbPair<>(null, null); + private S first; private T second; public static TbPair of(S first, T second) { return new TbPair<>(first, second); } + + @SuppressWarnings("unchecked") + public static TbPair emptyPair() { + return (TbPair) EMPTY; + } } diff --git a/dao/src/main/java/org/thingsboard/server/dao/AbstractVersionedInsertRepository.java b/dao/src/main/java/org/thingsboard/server/dao/AbstractVersionedInsertRepository.java index cb92ca5e1f..6380957f77 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/AbstractVersionedInsertRepository.java +++ b/dao/src/main/java/org/thingsboard/server/dao/AbstractVersionedInsertRepository.java @@ -29,9 +29,9 @@ import java.util.ArrayList; import java.util.List; import java.util.Map; -public abstract class AbstractVersionedInsertRepository extends AbstractInsertRepository { +import static org.thingsboard.server.dao.model.ModelConstants.VERSION_COLUMN; - public static final String VERSION_COLUMN = "version"; +public abstract class AbstractVersionedInsertRepository extends AbstractInsertRepository { public List saveOrUpdate(List entities) { return transactionTemplate.execute(status -> { @@ -51,7 +51,7 @@ public abstract class AbstractVersionedInsertRepository extends AbstractInser for (int i = 0; i < updateResult.length; i++) { if (updateResult[i] == 0) { insertEntities.add(entities.get(i)); - seqNumbers.add(0L); + seqNumbers.add(null); toInsertIndexes.add(i); } else { seqNumbers.add((Long) seqNumbersList.get(keyHolderIndex).get(VERSION_COLUMN)); @@ -63,12 +63,14 @@ public abstract class AbstractVersionedInsertRepository extends AbstractInser return seqNumbers; } - onInsertOrUpdate(insertEntities, keyHolder); + int[] insertResult = onInsertOrUpdate(insertEntities, keyHolder); seqNumbersList = keyHolder.getKeyList(); - for (int i = 0; i < seqNumbersList.size(); i++) { - seqNumbers.set(toInsertIndexes.get(i), (Long) seqNumbersList.get(i).get(VERSION_COLUMN)); + for (int i = 0; i < insertResult.length; i++) { + if (updateResult[i] != 0) { + seqNumbers.set(toInsertIndexes.get(i), (Long) seqNumbersList.get(i).get(VERSION_COLUMN)); + } } return seqNumbers; @@ -89,8 +91,8 @@ public abstract class AbstractVersionedInsertRepository extends AbstractInser }, keyHolder); } - private void onInsertOrUpdate(List insertEntities, KeyHolder keyHolder) { - jdbcTemplate.batchUpdate(new SequencePreparedStatementCreator(getInsertOrUpdateQuery()), new BatchPreparedStatementSetter() { + private int[] onInsertOrUpdate(List insertEntities, KeyHolder keyHolder) { + return jdbcTemplate.batchUpdate(new SequencePreparedStatementCreator(getInsertOrUpdateQuery()), new BatchPreparedStatementSetter() { @Override public void setValues(PreparedStatement ps, int i) throws SQLException { setOnInsertOrUpdateValues(ps, i, insertEntities); diff --git a/dao/src/main/java/org/thingsboard/server/dao/attributes/AttributeCaffeineCache.java b/dao/src/main/java/org/thingsboard/server/dao/attributes/AttributeCaffeineCache.java index 7df55a33fb..e00ea8d11c 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/attributes/AttributeCaffeineCache.java +++ b/dao/src/main/java/org/thingsboard/server/dao/attributes/AttributeCaffeineCache.java @@ -18,13 +18,13 @@ package org.thingsboard.server.dao.attributes; import org.springframework.boot.autoconfigure.condition.ConditionalOnProperty; import org.springframework.cache.CacheManager; import org.springframework.stereotype.Service; -import org.thingsboard.server.cache.CaffeineTbTransactionalCache; +import org.thingsboard.server.cache.VersionedCaffeineTbTransactionalCache; import org.thingsboard.server.common.data.CacheConstants; import org.thingsboard.server.common.data.kv.AttributeKvEntry; @ConditionalOnProperty(prefix = "cache", value = "type", havingValue = "caffeine", matchIfMissing = true) @Service("AttributeCache") -public class AttributeCaffeineCache extends CaffeineTbTransactionalCache { +public class AttributeCaffeineCache extends VersionedCaffeineTbTransactionalCache { public AttributeCaffeineCache(CacheManager cacheManager) { super(cacheManager, CacheConstants.ATTRIBUTES_CACHE); diff --git a/dao/src/main/java/org/thingsboard/server/dao/attributes/AttributeRedisCache.java b/dao/src/main/java/org/thingsboard/server/dao/attributes/AttributeRedisCache.java index 7932a8b8d4..68caf62ceb 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/attributes/AttributeRedisCache.java +++ b/dao/src/main/java/org/thingsboard/server/dao/attributes/AttributeRedisCache.java @@ -21,9 +21,9 @@ import org.springframework.data.redis.connection.RedisConnectionFactory; import org.springframework.data.redis.serializer.SerializationException; import org.springframework.stereotype.Service; import org.thingsboard.server.cache.CacheSpecsMap; -import org.thingsboard.server.cache.RedisTbTransactionalCache; import org.thingsboard.server.cache.TBRedisCacheConfiguration; import org.thingsboard.server.cache.TbRedisSerializer; +import org.thingsboard.server.cache.VersionedRedisTbTransactionalCache; import org.thingsboard.server.common.data.CacheConstants; import org.thingsboard.server.common.data.kv.AttributeKvEntry; import org.thingsboard.server.common.data.kv.BaseAttributeKvEntry; @@ -38,7 +38,7 @@ import org.thingsboard.server.gen.transport.TransportProtos.KeyValueType; @ConditionalOnProperty(prefix = "cache", value = "type", havingValue = "redis") @Service("AttributeCache") -public class AttributeRedisCache extends RedisTbTransactionalCache { +public class AttributeRedisCache extends VersionedRedisTbTransactionalCache { public AttributeRedisCache(TBRedisCacheConfiguration configuration, CacheSpecsMap cacheSpecsMap, RedisConnectionFactory connectionFactory) { super(CacheConstants.ATTRIBUTES_CACHE, cacheSpecsMap, connectionFactory, configuration, new TbRedisSerializer<>() { @@ -82,26 +82,15 @@ public class AttributeRedisCache extends RedisTbTransactionalCache new BooleanDataEntry(key.getKey(), hasValue ? proto.getBoolV() : null); + case LONG_V -> new LongDataEntry(key.getKey(), hasValue ? proto.getLongV() : null); + case DOUBLE_V -> new DoubleDataEntry(key.getKey(), hasValue ? proto.getDoubleV() : null); + case STRING_V -> new StringDataEntry(key.getKey(), hasValue ? proto.getStringV() : null); + case JSON_V -> new JsonDataEntry(key.getKey(), hasValue ? proto.getJsonV() : null); + default -> + throw new InvalidProtocolBufferException("Unrecognized type: " + proto.getType() + " !"); + }; return new BaseAttributeKvEntry(proto.getLastUpdateTs(), entry); } catch (InvalidProtocolBufferException e) { throw new SerializationException(e.getMessage()); diff --git a/dao/src/main/java/org/thingsboard/server/dao/attributes/AttributesDao.java b/dao/src/main/java/org/thingsboard/server/dao/attributes/AttributesDao.java index 34f67fb5ff..1805f72a8f 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/attributes/AttributesDao.java +++ b/dao/src/main/java/org/thingsboard/server/dao/attributes/AttributesDao.java @@ -22,6 +22,7 @@ import org.thingsboard.server.common.data.id.DeviceProfileId; import org.thingsboard.server.common.data.id.EntityId; import org.thingsboard.server.common.data.id.TenantId; import org.thingsboard.server.common.data.kv.AttributeKvEntry; +import org.thingsboard.server.common.data.util.TbPair; import java.util.Collection; import java.util.List; @@ -42,6 +43,8 @@ public interface AttributesDao { List> removeAll(TenantId tenantId, EntityId entityId, AttributeScope attributeScope, List keys); + List>> removeAllWithVersions(TenantId tenantId, EntityId entityId, AttributeScope attributeScope, List keys); + List findAllKeysByDeviceProfileId(TenantId tenantId, DeviceProfileId deviceProfileId); List findAllKeysByEntityIds(TenantId tenantId, List entityIds); diff --git a/dao/src/main/java/org/thingsboard/server/dao/attributes/CachedAttributesService.java b/dao/src/main/java/org/thingsboard/server/dao/attributes/CachedAttributesService.java index 375b56b1f6..fb5c745a11 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/attributes/CachedAttributesService.java +++ b/dao/src/main/java/org/thingsboard/server/dao/attributes/CachedAttributesService.java @@ -27,13 +27,14 @@ import org.springframework.boot.autoconfigure.condition.ConditionalOnProperty; import org.springframework.context.annotation.Primary; import org.springframework.stereotype.Service; import org.thingsboard.server.cache.TbCacheValueWrapper; -import org.thingsboard.server.cache.TbTransactionalCache; +import org.thingsboard.server.cache.VersionedTbTransactionalCache; import org.thingsboard.server.common.data.AttributeScope; import org.thingsboard.server.common.data.StringUtils; import org.thingsboard.server.common.data.id.DeviceProfileId; import org.thingsboard.server.common.data.id.EntityId; import org.thingsboard.server.common.data.id.TenantId; import org.thingsboard.server.common.data.kv.AttributeKvEntry; +import org.thingsboard.server.common.data.util.TbPair; import org.thingsboard.server.common.stats.DefaultCounter; import org.thingsboard.server.common.stats.StatsFactory; import org.thingsboard.server.dao.cache.CacheExecutorService; @@ -67,7 +68,7 @@ public class CachedAttributesService implements AttributesService { private final CacheExecutorService cacheExecutorService; private final DefaultCounter hitCounter; private final DefaultCounter missCounter; - private final TbTransactionalCache cache; + private final VersionedTbTransactionalCache cache; private ListeningExecutorService cacheExecutor; @Value("${cache.type:caffeine}") @@ -79,7 +80,7 @@ public class CachedAttributesService implements AttributesService { JpaExecutorService jpaExecutorService, StatsFactory statsFactory, CacheExecutorService cacheExecutorService, - TbTransactionalCache cache) { + VersionedTbTransactionalCache cache) { this.attributesDao = attributesDao; this.jpaExecutorService = jpaExecutorService; this.cacheExecutorService = cacheExecutorService; @@ -122,17 +123,9 @@ public class CachedAttributesService implements AttributesService { return Optional.ofNullable(cachedAttributeKvEntry); } else { missCounter.increment(); - var cacheTransaction = cache.newTransactionForKey(attributeCacheKey); - try { - Optional result = attributesDao.find(tenantId, entityId, scope, attributeKey); - cacheTransaction.putIfAbsent(attributeCacheKey, result.orElse(null)); - cacheTransaction.commit(); - return result; - } catch (Throwable e) { - cacheTransaction.rollback(); - log.debug("Could not find attribute from cache: [{}] [{}] [{}]", entityId, scope, attributeKey, e); - throw e; - } + Optional result = attributesDao.find(tenantId, entityId, scope, attributeKey); + cache.put(attributeCacheKey, result.orElse(null)); + return result; } }); } @@ -163,28 +156,19 @@ public class CachedAttributesService implements AttributesService { // DB call should run in DB executor, not in cache-related executor return jpaExecutorService.submit(() -> { - var cacheTransaction = cache.newTransactionForKeys(notFoundKeys); - try { - log.trace("[{}][{}] Lookup attributes from db: {}", entityId, scope, notFoundAttributeKeys); - List result = attributesDao.find(tenantId, entityId, scope, notFoundAttributeKeys); - for (AttributeKvEntry foundInDbAttribute : result) { - AttributeCacheKey attributeCacheKey = new AttributeCacheKey(scope, entityId, foundInDbAttribute.getKey()); - cacheTransaction.putIfAbsent(attributeCacheKey, foundInDbAttribute); - notFoundAttributeKeys.remove(foundInDbAttribute.getKey()); - } - for (String key : notFoundAttributeKeys) { - cacheTransaction.putIfAbsent(new AttributeCacheKey(scope, entityId, key), null); - } - List mergedAttributes = new ArrayList<>(cachedAttributes); - mergedAttributes.addAll(result); - cacheTransaction.commit(); - log.trace("[{}][{}] Commit cache transaction: {}", entityId, scope, notFoundAttributeKeys); - return mergedAttributes; - } catch (Throwable e) { - cacheTransaction.rollback(); - log.debug("Could not find attributes from cache: [{}] [{}] [{}]", entityId, scope, notFoundAttributeKeys, e); - throw e; + log.trace("[{}][{}] Lookup attributes from db: {}", entityId, scope, notFoundAttributeKeys); + List result = attributesDao.find(tenantId, entityId, scope, notFoundAttributeKeys); + for (AttributeKvEntry foundInDbAttribute : result) { + put(entityId, scope, foundInDbAttribute, foundInDbAttribute.getVersion()); + notFoundAttributeKeys.remove(foundInDbAttribute.getKey()); } + for (String key : notFoundAttributeKeys) { + cache.put(new AttributeCacheKey(scope, entityId, key), null); + } + List mergedAttributes = new ArrayList<>(cachedAttributes); + mergedAttributes.addAll(result); + log.trace("[{}][{}] Commit cache transaction: {}", entityId, scope, notFoundAttributeKeys); + return mergedAttributes; }); }, MoreExecutors.directExecutor()); // cacheExecutor analyse and returns results or submit to DB executor @@ -235,7 +219,7 @@ public class CachedAttributesService implements AttributesService { validate(entityId, scope); AttributeUtils.validate(attribute, valueNoXssValidation); ListenableFuture future = attributesDao.save(tenantId, entityId, scope, attribute); - return Futures.transform(future, version -> evict(entityId, scope, attribute, version), cacheExecutor); + return Futures.transform(future, version -> put(entityId, scope, attribute, version), cacheExecutor); } @Override @@ -251,17 +235,17 @@ public class CachedAttributesService implements AttributesService { List> futures = new ArrayList<>(attributes.size()); for (var attribute : attributes) { ListenableFuture future = attributesDao.save(tenantId, entityId, scope, attribute); - futures.add(Futures.transform(future, version -> evict(entityId, scope, attribute, version), cacheExecutor)); + futures.add(Futures.transform(future, version -> put(entityId, scope, attribute, version), cacheExecutor)); } return Futures.allAsList(futures); } - private Long evict(EntityId entityId, AttributeScope scope, AttributeKvEntry attribute, Long version) { + private Long put(EntityId entityId, AttributeScope scope, AttributeKvEntry attribute, Long version) { String key = attribute.getKey(); - log.trace("[{}][{}][{}] Before cache evict: {}", entityId, scope, key, attribute); - cache.evictOrPut(new AttributeCacheKey(scope, entityId, key), attribute); - log.trace("[{}][{}][{}] after cache evict.", entityId, scope, key); + log.trace("[{}][{}][{}] Before cache put: {}", entityId, scope, key, attribute); + cache.put(new AttributeCacheKey(scope, entityId, key), attribute, version); + log.trace("[{}][{}][{}] after cache put.", entityId, scope, key); return version; } @@ -273,9 +257,10 @@ public class CachedAttributesService implements AttributesService { @Override public ListenableFuture> removeAll(TenantId tenantId, EntityId entityId, AttributeScope scope, List attributeKeys) { validate(entityId, scope); - List> futures = attributesDao.removeAll(tenantId, entityId, scope, attributeKeys); - return Futures.allAsList(futures.stream().map(future -> Futures.transform(future, key -> { - cache.evict(new AttributeCacheKey(scope, entityId, key)); + List>> futures = attributesDao.removeAllWithVersions(tenantId, entityId, scope, attributeKeys); + return Futures.allAsList(futures.stream().map(future -> Futures.transform(future, keyVersionPair -> { + String key = keyVersionPair.getFirst(); + cache.evict(new AttributeCacheKey(scope, entityId, key), keyVersionPair.getSecond()); return key; }, cacheExecutor)).collect(Collectors.toList())); } diff --git a/dao/src/main/java/org/thingsboard/server/dao/model/BaseVersionedEntity.java b/dao/src/main/java/org/thingsboard/server/dao/model/BaseVersionedEntity.java new file mode 100644 index 0000000000..6b98348de9 --- /dev/null +++ b/dao/src/main/java/org/thingsboard/server/dao/model/BaseVersionedEntity.java @@ -0,0 +1,20 @@ +/** + * Copyright ยฉ 2016-2024 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. + */ +package org.thingsboard.server.dao.model; + +public interface BaseVersionedEntity { + long getVersion(); +} diff --git a/dao/src/main/java/org/thingsboard/server/dao/model/ModelConstants.java b/dao/src/main/java/org/thingsboard/server/dao/model/ModelConstants.java index fb77ad6987..643c099829 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/model/ModelConstants.java +++ b/dao/src/main/java/org/thingsboard/server/dao/model/ModelConstants.java @@ -56,6 +56,7 @@ public class ModelConstants { public static final String ATTRIBUTE_TYPE_COLUMN = "attribute_type"; public static final String ATTRIBUTE_KEY_COLUMN = "attribute_key"; public static final String LAST_UPDATE_TS_COLUMN = "last_update_ts"; + public static final String VERSION_COLUMN = "version"; /** * User constants. diff --git a/dao/src/main/java/org/thingsboard/server/dao/model/sql/AttributeKvEntity.java b/dao/src/main/java/org/thingsboard/server/dao/model/sql/AttributeKvEntity.java index 03aa0f98ad..d7bd23db4d 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/model/sql/AttributeKvEntity.java +++ b/dao/src/main/java/org/thingsboard/server/dao/model/sql/AttributeKvEntity.java @@ -16,6 +16,7 @@ package org.thingsboard.server.dao.model.sql; import lombok.Data; +import lombok.EqualsAndHashCode; import org.thingsboard.server.common.data.kv.AttributeKvEntry; import org.thingsboard.server.common.data.kv.BaseAttributeKvEntry; import org.thingsboard.server.common.data.kv.BooleanDataEntry; @@ -41,9 +42,10 @@ import static org.thingsboard.server.dao.model.ModelConstants.LONG_VALUE_COLUMN; import static org.thingsboard.server.dao.model.ModelConstants.STRING_VALUE_COLUMN; @Data +@EqualsAndHashCode(callSuper = true) @Entity @Table(name = "attribute_kv") -public class AttributeKvEntity implements ToData, Serializable { +public class AttributeKvEntity extends VersionedEntity implements ToData, Serializable { @EmbeddedId private AttributeKvCompositeKey id; @@ -84,6 +86,6 @@ public class AttributeKvEntity implements ToData, Serializable kvEntry = new JsonDataEntry(strKey, jsonValue); } - return new BaseAttributeKvEntry(kvEntry, lastUpdateTs); + return new BaseAttributeKvEntry(kvEntry, lastUpdateTs, version); } } diff --git a/dao/src/main/java/org/thingsboard/server/dao/model/sql/VersionedEntity.java b/dao/src/main/java/org/thingsboard/server/dao/model/sql/VersionedEntity.java new file mode 100644 index 0000000000..2dfee6466a --- /dev/null +++ b/dao/src/main/java/org/thingsboard/server/dao/model/sql/VersionedEntity.java @@ -0,0 +1,30 @@ +/** + * Copyright ยฉ 2016-2024 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. + */ +package org.thingsboard.server.dao.model.sql; + +import jakarta.persistence.Column; +import jakarta.persistence.MappedSuperclass; +import lombok.Data; + +import static org.thingsboard.server.dao.model.ModelConstants.VERSION_COLUMN; + +@Data +@MappedSuperclass +public abstract class VersionedEntity { + + @Column(name = VERSION_COLUMN) + protected Long version; +} diff --git a/dao/src/main/java/org/thingsboard/server/dao/sql/attributes/AttributeKvInsertRepository.java b/dao/src/main/java/org/thingsboard/server/dao/sql/attributes/AttributeKvInsertRepository.java index c2b9d53d47..7050e61144 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/sql/attributes/AttributeKvInsertRepository.java +++ b/dao/src/main/java/org/thingsboard/server/dao/sql/attributes/AttributeKvInsertRepository.java @@ -31,14 +31,14 @@ import java.util.List; @SqlDao public class AttributeKvInsertRepository extends AbstractVersionedInsertRepository { - private static final String BATCH_UPDATE = "UPDATE attribute_kv SET str_v = ?, long_v = ?, dbl_v = ?, bool_v = ?, json_v = cast(? AS json), last_update_ts = ?, version = version + 1 " + + private static final String BATCH_UPDATE = "UPDATE attribute_kv SET str_v = ?, long_v = ?, dbl_v = ?, bool_v = ?, json_v = cast(? AS json), last_update_ts = ?, version = nextval('attribute_kv_version_seq') " + "WHERE entity_id = ? and attribute_type =? and attribute_key = ? RETURNING version;"; private static final String INSERT_OR_UPDATE = - "INSERT INTO attribute_kv (entity_id, attribute_type, attribute_key, str_v, long_v, dbl_v, bool_v, json_v, last_update_ts) " + - "VALUES(?, ?, ?, ?, ?, ?, ?, cast(? AS json), ?) " + + "INSERT INTO attribute_kv (entity_id, attribute_type, attribute_key, str_v, long_v, dbl_v, bool_v, json_v, last_update_ts, version) " + + "VALUES(?, ?, ?, ?, ?, ?, ?, cast(? AS json), ?, nextval('attribute_kv_version_seq')) " + "ON CONFLICT (entity_id, attribute_type, attribute_key) " + - "DO UPDATE SET str_v = ?, long_v = ?, dbl_v = ?, bool_v = ?, json_v = cast(? AS json), last_update_ts = ?, version = attribute_kv.version + 1 RETURNING version;"; + "DO UPDATE SET str_v = ?, long_v = ?, dbl_v = ?, bool_v = ?, json_v = cast(? AS json), last_update_ts = ?, version = nextval('attribute_kv_version_seq') RETURNING version;"; @Override protected void setOnBatchUpdateValues(PreparedStatement ps, int i, List entities) throws SQLException { diff --git a/dao/src/main/java/org/thingsboard/server/dao/sql/attributes/AttributeKvRepository.java b/dao/src/main/java/org/thingsboard/server/dao/sql/attributes/AttributeKvRepository.java index ddd6c3c881..beea5f2f2f 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/sql/attributes/AttributeKvRepository.java +++ b/dao/src/main/java/org/thingsboard/server/dao/sql/attributes/AttributeKvRepository.java @@ -30,15 +30,15 @@ public interface AttributeKvRepository extends JpaRepository findAllEntityIdAndAttributeType(@Param("entityId") UUID entityId, - @Param("attributeType") int attributeType); + List findAllByEntityIdAndAttributeType(@Param("entityId") UUID entityId, + @Param("attributeType") int attributeType); @Transactional @Modifying - @Query("DELETE FROM AttributeKvEntity a WHERE a.id.entityId = :entityId " + - "AND a.id.attributeType = :attributeType " + - "AND a.id.attributeKey = :attributeKey") - void delete(@Param("entityId") UUID entityId, + @Query(value = "DELETE FROM attribute_kv WHERE entity_id = :entityId " + + "AND attribute_type = :attributeType " + + "AND attribute_key = :attributeKey RETURNING version", nativeQuery = true) + Long delete(@Param("entityId") UUID entityId, @Param("attributeType") int attributeType, @Param("attributeKey") int attributeKey); diff --git a/dao/src/main/java/org/thingsboard/server/dao/sql/attributes/JpaAttributeDao.java b/dao/src/main/java/org/thingsboard/server/dao/sql/attributes/JpaAttributeDao.java index 05cdfce221..de4487381b 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/sql/attributes/JpaAttributeDao.java +++ b/dao/src/main/java/org/thingsboard/server/dao/sql/attributes/JpaAttributeDao.java @@ -30,6 +30,7 @@ import org.thingsboard.server.common.data.id.DeviceProfileId; import org.thingsboard.server.common.data.id.EntityId; import org.thingsboard.server.common.data.id.TenantId; import org.thingsboard.server.common.data.kv.AttributeKvEntry; +import org.thingsboard.server.common.data.util.TbPair; import org.thingsboard.server.common.stats.StatsFactory; import org.thingsboard.server.dao.DaoUtil; import org.thingsboard.server.dao.attributes.AttributesDao; @@ -144,7 +145,7 @@ public class JpaAttributeDao extends JpaAbstractDaoListeningExecutorService impl @Override public List findAll(TenantId tenantId, EntityId entityId, AttributeScope attributeScope) { - List attributes = attributeKvRepository.findAllEntityIdAndAttributeType( + List attributes = attributeKvRepository.findAllByEntityIdAndAttributeType( entityId.getId(), attributeScope.getId()); attributes.forEach(attributeKvEntity -> attributeKvEntity.setStrKey(keyDictionaryDao.getKey(attributeKvEntity.getId().getAttributeKey()))); @@ -205,6 +206,18 @@ public class JpaAttributeDao extends JpaAbstractDaoListeningExecutorService impl return futuresList; } + @Override + public List>> removeAllWithVersions(TenantId tenantId, EntityId entityId, AttributeScope attributeScope, List keys) { + List>> futuresList = new ArrayList<>(keys.size()); + for (String key : keys) { + futuresList.add(service.submit(() -> { + Long version = attributeKvRepository.delete(entityId.getId(), attributeScope.getId(), keyDictionaryDao.getOrSaveKeyId(key)); + return TbPair.of(key, version); + })); + } + return futuresList; + } + @Transactional @Override public List> removeAllByEntityId(TenantId tenantId, EntityId entityId) { diff --git a/dao/src/main/java/org/thingsboard/server/dao/sqlts/insert/latest/sql/SqlLatestInsertTsRepository.java b/dao/src/main/java/org/thingsboard/server/dao/sqlts/insert/latest/sql/SqlLatestInsertTsRepository.java index 0484337a08..0a3ffad09f 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/sqlts/insert/latest/sql/SqlLatestInsertTsRepository.java +++ b/dao/src/main/java/org/thingsboard/server/dao/sqlts/insert/latest/sql/SqlLatestInsertTsRepository.java @@ -40,11 +40,11 @@ public class SqlLatestInsertTsRepository extends AbstractVersionedInsertReposito private Boolean updateByLatestTs; private static final String BATCH_UPDATE = - "UPDATE ts_kv_latest SET ts = ?, bool_v = ?, str_v = ?, long_v = ?, dbl_v = ?, json_v = cast(? AS json), version = version + 1 WHERE entity_id = ? AND key = ?"; + "UPDATE ts_kv_latest SET ts = ?, bool_v = ?, str_v = ?, long_v = ?, dbl_v = ?, json_v = cast(? AS json), version = nextval('ts_kv_latest_version_seq') WHERE entity_id = ? AND key = ?"; private static final String INSERT_OR_UPDATE = - "INSERT INTO ts_kv_latest (entity_id, key, ts, bool_v, str_v, long_v, dbl_v, json_v) VALUES(?, ?, ?, ?, ?, ?, ?, cast(? AS json)) " + - "ON CONFLICT (entity_id, key) DO UPDATE SET ts = ?, bool_v = ?, str_v = ?, long_v = ?, dbl_v = ?, json_v = cast(? AS json), version = ts_kv_latest.version + 1"; + "INSERT INTO ts_kv_latest (entity_id, key, ts, bool_v, str_v, long_v, dbl_v, json_v, version) VALUES(?, ?, ?, ?, ?, ?, ?, cast(? AS json), nextval('ts_kv_latest_version_seq')) " + + "ON CONFLICT (entity_id, key) DO UPDATE SET ts = ?, bool_v = ?, str_v = ?, long_v = ?, dbl_v = ?, json_v = cast(? AS json), version = nextval('ts_kv_latest_version_seq')"; private static final String BATCH_UPDATE_BY_LATEST_TS = BATCH_UPDATE + " AND ts_kv_latest.ts <= ?"; diff --git a/dao/src/main/resources/sql/schema-entities.sql b/dao/src/main/resources/sql/schema-entities.sql index 9293636f0b..c2e3a2b108 100644 --- a/dao/src/main/resources/sql/schema-entities.sql +++ b/dao/src/main/resources/sql/schema-entities.sql @@ -102,6 +102,8 @@ CREATE TABLE IF NOT EXISTS audit_log ( action_failure_details varchar(1000000) ) PARTITION BY RANGE (created_time); +CREATE SEQUENCE IF NOT EXISTS attribute_kv_version_seq cache 1000; + CREATE TABLE IF NOT EXISTS attribute_kv ( entity_id uuid, attribute_type int, @@ -112,7 +114,7 @@ CREATE TABLE IF NOT EXISTS attribute_kv ( dbl_v double precision, json_v json, last_update_ts bigint, - version bigint default 0, + version bigint default 1, CONSTRAINT attribute_kv_pkey PRIMARY KEY (entity_id, attribute_type, attribute_key) ); @@ -539,6 +541,8 @@ CREATE TABLE IF NOT EXISTS entity_view ( CONSTRAINT entity_view_external_id_unq_key UNIQUE (tenant_id, external_id) ); +CREATE SEQUENCE IF NOT EXISTS ts_kv_latest_version_seq cache 1000; + CREATE TABLE IF NOT EXISTS ts_kv_latest ( entity_id uuid NOT NULL, @@ -549,7 +553,7 @@ CREATE TABLE IF NOT EXISTS ts_kv_latest long_v bigint, dbl_v double precision, json_v json, - version bigint default 0, + version bigint default 1, CONSTRAINT ts_kv_latest_pkey PRIMARY KEY (entity_id, key) ); diff --git a/dao/src/main/resources/sql/schema-timescale.sql b/dao/src/main/resources/sql/schema-timescale.sql index 2d2381403d..7c2a99fba3 100644 --- a/dao/src/main/resources/sql/schema-timescale.sql +++ b/dao/src/main/resources/sql/schema-timescale.sql @@ -34,6 +34,8 @@ CREATE TABLE IF NOT EXISTS key_dictionary ( CONSTRAINT key_dictionary_id_pkey PRIMARY KEY (key) ); +CREATE SEQUENCE IF NOT EXISTS ts_kv_latest_version_seq cache 1000; + CREATE TABLE IF NOT EXISTS ts_kv_latest ( entity_id uuid NOT NULL, key int NOT NULL, @@ -43,7 +45,7 @@ CREATE TABLE IF NOT EXISTS ts_kv_latest ( long_v bigint, dbl_v double precision, json_v json, - version bigint default 0, + version bigint default 1, CONSTRAINT ts_kv_latest_pkey PRIMARY KEY (entity_id, key) ); diff --git a/dao/src/main/resources/sql/schema-ts-latest-psql.sql b/dao/src/main/resources/sql/schema-ts-latest-psql.sql index 058104d4f2..d50571c091 100644 --- a/dao/src/main/resources/sql/schema-ts-latest-psql.sql +++ b/dao/src/main/resources/sql/schema-ts-latest-psql.sql @@ -14,6 +14,8 @@ -- limitations under the License. -- +CREATE SEQUENCE IF NOT EXISTS ts_kv_latest_version_seq cache 1000; + CREATE TABLE IF NOT EXISTS ts_kv_latest ( entity_id uuid NOT NULL, @@ -24,6 +26,6 @@ CREATE TABLE IF NOT EXISTS ts_kv_latest long_v bigint, dbl_v double precision, json_v json, - version bigint default 0, + version bigint default 1, CONSTRAINT ts_kv_latest_pkey PRIMARY KEY (entity_id, key) -); \ No newline at end of file +); diff --git a/dao/src/test/resources/sql/psql/drop-all-tables.sql b/dao/src/test/resources/sql/psql/drop-all-tables.sql index 9c772df45b..e1c35d7a21 100644 --- a/dao/src/test/resources/sql/psql/drop-all-tables.sql +++ b/dao/src/test/resources/sql/psql/drop-all-tables.sql @@ -23,6 +23,7 @@ DROP TABLE IF EXISTS alarm_type; DROP TABLE IF EXISTS asset; DROP TABLE IF EXISTS audit_log; DROP TABLE IF EXISTS attribute_kv; +DROP SEQUENCE IF EXISTS attribute_kv_version_seq; DROP TABLE IF EXISTS component_descriptor; DROP TABLE IF EXISTS customer; DROP TABLE IF EXISTS device; @@ -36,6 +37,7 @@ DROP TABLE IF EXISTS relation; DROP TABLE IF EXISTS tenant; DROP TABLE IF EXISTS ts_kv; DROP TABLE IF EXISTS ts_kv_latest; +DROP SEQUENCE IF EXISTS ts_kv_latest_version_seq; DROP TABLE IF EXISTS ts_kv_dictionary; DROP TABLE IF EXISTS user_credentials; DROP TABLE IF EXISTS widgets_bundle_widget; From d5240562859ed40ef43537e019624fdab6545b56 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Wed, 26 Jun 2024 17:20:44 +0300 Subject: [PATCH 075/442] UI: SCADA editor improvements: handle hidden elements. --- .../scada_symbols/horizontal-connector.svg | 55 +++++- .../system/scada_symbols/level_and_fan.svg | 4 +- .../system/widget_types/toggle_button.json | 4 +- .../scada/scada-symbol-widget.component.scss | 1 - .../widget/lib/scada/scada-symbol.models.ts | 21 ++- .../scada-symbol-editor.component.scss | 1 - .../scada-symbol-editor.models.ts | 178 +++++++++++++++--- .../scada-symbol-tooltip.components.ts | 4 +- .../assets/locale/locale.constant-en_US.json | 1 + 9 files changed, 222 insertions(+), 47 deletions(-) diff --git a/application/src/main/data/json/system/scada_symbols/horizontal-connector.svg b/application/src/main/data/json/system/scada_symbols/horizontal-connector.svg index 7a52cc236a..267ab0d155 100644 --- a/application/src/main/data/json/system/scada_symbols/horizontal-connector.svg +++ b/application/src/main/data/json/system/scada_symbols/horizontal-connector.svg @@ -1,16 +1,51 @@ - + { "title": "Horizontal connector", "widgetSizeX": 1, "widgetSizeY": 1, - "tags": [], - "behavior": [], + "tags": [ + { + "tag": "fluid", + "stateRenderFunction": "var flow = ctx.values.flow;\nvar flowDirection = ctx.values.flowDirection;\nvar elementFlow = element.remember('flow');\nvar elementFlowDirection = element.remember('flowDirection');\nif (flow !== elementFlow) {\n element.remember('flow', flow);\n if (flow) {\n element.remember('flowDirection', flowDirection);\n element.show();\n animateFlow(flowDirection);\n } else {\n ctx.api.resetAnimation(element);\n element.hide();\n }\n} else if (flow && elementFlowDirection !== flowDirection) {\n element.remember('flowDirection', flowDirection);\n animateFlow(flowDirection);\n}\n\nfunction animateFlow(forwardElseReverse) {\n ctx.api.resetAnimation(element);\n var deltaX = forwardElseReverse ? 172 : -172;\n element.animate(1000).ease('-').relative(deltaX, 0).loop();\n}", + "actions": null + } + ], + "behavior": [ + { + "id": "flow", + "name": "Flow", + "hint": null, + "type": "value", + "valueType": "BOOLEAN", + "defaultValue": false, + "trueLabel": null, + "falseLabel": null, + "stateLabel": null, + "valueToDataType": "CONSTANT", + "constantValue": false, + "valueToDataFunction": "" + }, + { + "id": "flowDirection", + "name": "Flow direction", + "hint": null, + "type": "value", + "valueType": "BOOLEAN", + "defaultValue": true, + "trueLabel": "Forward", + "falseLabel": "Reverse", + "stateLabel": "Forward", + "valueToDataType": "CONSTANT", + "constantValue": false, + "valueToDataFunction": "" + } + ], "properties": [] -} - - - - - - +}]]> + + + + + + \ No newline at end of file diff --git a/application/src/main/data/json/system/scada_symbols/level_and_fan.svg b/application/src/main/data/json/system/scada_symbols/level_and_fan.svg index 7a0b0e088b..9757228504 100644 --- a/application/src/main/data/json/system/scada_symbols/level_and_fan.svg +++ b/application/src/main/data/json/system/scada_symbols/level_and_fan.svg @@ -12,7 +12,7 @@ "tags": [ { "tag": "fan", - "stateRenderFunction": "var on = ctx.values.on;\nif (on) {\n var level = ctx.values.level; \n var minLevel = ctx.properties.minLevel; \n var maxLevel = ctx.properties.maxLevel;\n\n var speed = (level - minLevel) / (maxLevel - minLevel);\n speed = Math.max(0, Math.min(1, speed))*2; \n\n var t = element.timeline();\n if (!t.active()) {\n ctx.api.animate(element, 1000).ease('-').rotate(360).loop();\n t = element.timeline();\n }\n t.speed(speed);\n} else {\n element.timeline().stop();\n}\n", + "stateRenderFunction": "var on = ctx.values.on;\nvar hasAnimation = element.remember('hasAnimation');\nif (on) {\n\n var level = ctx.values.level; \n var minLevel = ctx.properties.minLevel; \n var maxLevel = ctx.properties.maxLevel;\n\n var speed = (level - minLevel) / (maxLevel - minLevel);\n speed = Math.max(0, Math.min(1, speed))*2; \n\n if (!hasAnimation) {\n element.remember('hasAnimation', true);\n element.animate(1000).ease('-').rotate(360).loop();\n } else {\n element.timeline().play();\n }\n element.timeline().speed(speed);\n} else {\n if (hasAnimation) {\n element.timeline().pause();\n }\n}\n", "actions": null }, { @@ -68,7 +68,7 @@ }, { "tag": "ramka", - "stateRenderFunction": "var on = ctx.values.on;\nif (on) {\n if (!element.timeline().active()) {\n ctx.api.animate(element, 1000).scale(1.1).loop(0, true);\n }\n} else {\n element.timeline().stop();\n}", + "stateRenderFunction": "var on = ctx.values.on;\nvar hasAnimation = element.remember('hasAnimation');\nif (on) {\n if (!hasAnimation) {\n element.remember('hasAnimation', true);\n ctx.api.animate(element, 1000).scale(1.1).loop(0, true);\n } else {\n element.timeline().play();\n }\n} else {\n if (hasAnimation) {\n element.timeline().pause();\n }\n}", "actions": null } ], diff --git a/application/src/main/data/json/system/widget_types/toggle_button.json b/application/src/main/data/json/system/widget_types/toggle_button.json index a7e2ae9312..1951589331 100644 --- a/application/src/main/data/json/system/widget_types/toggle_button.json +++ b/application/src/main/data/json/system/widget_types/toggle_button.json @@ -2,7 +2,7 @@ "fqn": "toggle_button", "name": "Toggle button", "deprecated": false, - "image": "tb-image:VG9nZ2xlIGJ1dHRvbnMuc3Zn:IlRvZ2dsZSBidXR0b24iIHN5c3RlbSB3aWRnZXQgaW1hZ2U=;data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjE2IiBoZWlnaHQ9IjE2MCIgdmlld0JveD0iMCAwIDIxNiAxNjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2RfNDY5N18zNjcxMykiPgo8cmVjdCB4PSI4Ljc1IiB5PSIxNi43NSIgd2lkdGg9IjE5OC41IiBoZWlnaHQ9IjU4LjUiIHJ4PSIzLjI1IiBzdHJva2U9IiMxOTgwMzgiIHN0cm9rZS13aWR0aD0iMS41IiBzaGFwZS1yZW5kZXJpbmc9ImNyaXNwRWRnZXMiLz4KPG1hc2sgaWQ9Im1hc2swXzQ2OTdfMzY3MTMiIHN0eWxlPSJtYXNrLXR5cGU6YWxwaGEiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIHg9IjYyIiB5PSIzNCIgd2lkdGg9IjI1IiBoZWlnaHQ9IjI0Ij4KPHJlY3QgeD0iNjIuNSIgeT0iMzQiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iI0Q5RDlEOSIvPgo8L21hc2s+CjxnIG1hc2s9InVybCgjbWFzazBfNDY5N18zNjcxMykiPgo8cGF0aCBkPSJNNjguNSA0Mkg3Ny41VjQwQzc3LjUgMzkuMTY2NyA3Ny4yMDgzIDM4LjQ1ODMgNzYuNjI1IDM3Ljg3NUM3Ni4wNDE3IDM3LjI5MTcgNzUuMzMzMyAzNyA3NC41IDM3QzczLjY2NjcgMzcgNzIuOTU4MyAzNy4yOTE3IDcyLjM3NSAzNy44NzVDNzEuNzkxNyAzOC40NTgzIDcxLjUgMzkuMTY2NyA3MS41IDQwSDY5LjVDNjkuNSAzOC42MTY3IDY5Ljk4NzUgMzcuNDM3NSA3MC45NjI1IDM2LjQ2MjVDNzEuOTM3NSAzNS40ODc1IDczLjExNjcgMzUgNzQuNSAzNUM3NS44ODMzIDM1IDc3LjA2MjUgMzUuNDg3NSA3OC4wMzc1IDM2LjQ2MjVDNzkuMDEyNSAzNy40Mzc1IDc5LjUgMzguNjE2NyA3OS41IDQwVjQySDgwLjVDODEuMDUgNDIgODEuNTIwOCA0Mi4xOTU4IDgxLjkxMjUgNDIuNTg3NUM4Mi4zMDQyIDQyLjk3OTIgODIuNSA0My40NSA4Mi41IDQ0VjU0QzgyLjUgNTQuNTUgODIuMzA0MiA1NS4wMjA4IDgxLjkxMjUgNTUuNDEyNUM4MS41MjA4IDU1LjgwNDIgODEuMDUgNTYgODAuNSA1Nkg2OC41QzY3Ljk1IDU2IDY3LjQ3OTIgNTUuODA0MiA2Ny4wODc1IDU1LjQxMjVDNjYuNjk1OCA1NS4wMjA4IDY2LjUgNTQuNTUgNjYuNSA1NFY0NEM2Ni41IDQzLjQ1IDY2LjY5NTggNDIuOTc5MiA2Ny4wODc1IDQyLjU4NzVDNjcuNDc5MiA0Mi4xOTU4IDY3Ljk1IDQyIDY4LjUgNDJaTTY4LjUgNTRIODAuNVY0NEg2OC41VjU0Wk03NC41IDUxQzc1LjA1IDUxIDc1LjUyMDggNTAuODA0MiA3NS45MTI1IDUwLjQxMjVDNzYuMzA0MiA1MC4wMjA4IDc2LjUgNDkuNTUgNzYuNSA0OUM3Ni41IDQ4LjQ1IDc2LjMwNDIgNDcuOTc5MiA3NS45MTI1IDQ3LjU4NzVDNzUuNTIwOCA0Ny4xOTU4IDc1LjA1IDQ3IDc0LjUgNDdDNzMuOTUgNDcgNzMuNDc5MiA0Ny4xOTU4IDczLjA4NzUgNDcuNTg3NUM3Mi42OTU4IDQ3Ljk3OTIgNzIuNSA0OC40NSA3Mi41IDQ5QzcyLjUgNDkuNTUgNzIuNjk1OCA1MC4wMjA4IDczLjA4NzUgNTAuNDEyNUM3My40NzkyIDUwLjgwNDIgNzMuOTUgNTEgNzQuNSA1MVoiIGZpbGw9IiMxOTgwMzgiLz4KPC9nPgo8cGF0aCBkPSJNMTAyLjEzMSA0NS4yNVY0NS45NTMxQzEwMi4xMzEgNDYuOTE5OSAxMDIuMDA1IDQ3Ljc4NzEgMTAxLjc1MyA0OC41NTQ3QzEwMS41MDEgNDkuMzIyMyAxMDEuMTQxIDQ5Ljk3NTYgMTAwLjY3MiA1MC41MTQ2QzEwMC4yMDkgNTEuMDUzNyA5OS42NTIzIDUxLjQ2NjggOTkuMDAyIDUxLjc1MzlDOTguMzUxNiA1Mi4wMzUyIDk3LjYzMDkgNTIuMTc1OCA5Ni44Mzk4IDUyLjE3NThDOTYuMDU0NyA1Mi4xNzU4IDk1LjMzNjkgNTIuMDM1MiA5NC42ODY1IDUxLjc1MzlDOTQuMDQyIDUxLjQ2NjggOTMuNDgyNCA1MS4wNTM3IDkzLjAwNzggNTAuNTE0NkM5Mi41MzMyIDQ5Ljk3NTYgOTIuMTY0MSA0OS4zMjIzIDkxLjkwMDQgNDguNTU0N0M5MS42NDI2IDQ3Ljc4NzEgOTEuNTEzNyA0Ni45MTk5IDkxLjUxMzcgNDUuOTUzMVY0NS4yNUM5MS41MTM3IDQ0LjI4MzIgOTEuNjQyNiA0My40MTg5IDkxLjkwMDQgNDIuNjU3MkM5Mi4xNTgyIDQxLjg4OTYgOTIuNTIxNSA0MS4yMzYzIDkyLjk5MDIgNDAuNjk3M0M5My40NjQ4IDQwLjE1MjMgOTQuMDI0NCAzOS43MzkzIDk0LjY2ODkgMzkuNDU4Qzk1LjMxOTMgMzkuMTcwOSA5Ni4wMzcxIDM5LjAyNzMgOTYuODIyMyAzOS4wMjczQzk3LjYxMzMgMzkuMDI3MyA5OC4zMzQgMzkuMTcwOSA5OC45ODQ0IDM5LjQ1OEM5OS42MzQ4IDM5LjczOTMgMTAwLjE5NCA0MC4xNTIzIDEwMC42NjMgNDAuNjk3M0MxMDEuMTMyIDQxLjIzNjMgMTAxLjQ5MiA0MS44ODk2IDEwMS43NDQgNDIuNjU3MkMxMDIuMDAyIDQzLjQxODkgMTAyLjEzMSA0NC4yODMyIDEwMi4xMzEgNDUuMjVaTTk5LjkyNDggNDUuOTUzMVY0NS4yMzI0Qzk5LjkyNDggNDQuNTE3NiA5OS44NTQ1IDQzLjg4NzcgOTkuNzEzOSA0My4zNDI4Qzk5LjU3OTEgNDIuNzkyIDk5LjM3NyA0Mi4zMzIgOTkuMTA3NCA0MS45NjI5Qzk4Ljg0MzggNDEuNTg3OSA5OC41MTg2IDQxLjMwNjYgOTguMTMxOCA0MS4xMTkxQzk3Ljc0NTEgNDAuOTI1OCA5Ny4zMDg2IDQwLjgyOTEgOTYuODIyMyA0MC44MjkxQzk2LjMzNTkgNDAuODI5MSA5NS45MDIzIDQwLjkyNTggOTUuNTIxNSA0MS4xMTkxQzk1LjE0MDYgNDEuMzA2NiA5NC44MTU0IDQxLjU4NzkgOTQuNTQ1OSA0MS45NjI5Qzk0LjI4MjIgNDIuMzMyIDk0LjA4MDEgNDIuNzkyIDkzLjkzOTUgNDMuMzQyOEM5My43OTg4IDQzLjg4NzcgOTMuNzI4NSA0NC41MTc2IDkzLjcyODUgNDUuMjMyNFY0NS45NTMxQzkzLjcyODUgNDYuNjY4IDkzLjc5ODggNDcuMzAwOCA5My45Mzk1IDQ3Ljg1MTZDOTQuMDgwMSA0OC40MDIzIDk0LjI4NTIgNDguODY4MiA5NC41NTQ3IDQ5LjI0OUM5NC44MzAxIDQ5LjYyNCA5NS4xNTgyIDQ5LjkwODIgOTUuNTM5MSA1MC4xMDE2Qzk1LjkxOTkgNTAuMjg5MSA5Ni4zNTM1IDUwLjM4MjggOTYuODM5OCA1MC4zODI4Qzk3LjMzMiA1MC4zODI4IDk3Ljc2ODYgNTAuMjg5MSA5OC4xNDk0IDUwLjEwMTZDOTguNTMwMyA0OS45MDgyIDk4Ljg1MjUgNDkuNjI0IDk5LjExNjIgNDkuMjQ5Qzk5LjM3OTkgNDguODY4MiA5OS41NzkxIDQ4LjQwMjMgOTkuNzEzOSA0Ny44NTE2Qzk5Ljg1NDUgNDcuMzAwOCA5OS45MjQ4IDQ2LjY2OCA5OS45MjQ4IDQ1Ljk1MzFaTTEwNi40MDMgNDQuMzE4NFY1NS42NTYySDEwNC4yODVWNDIuNDkwMkgxMDYuMjM2TDEwNi40MDMgNDQuMzE4NFpNMTEyLjU5OSA0Ny4xNTcyVjQ3LjM0MThDMTEyLjU5OSA0OC4wMzMyIDExMi41MTcgNDguNjc0OCAxMTIuMzUzIDQ5LjI2NjZDMTEyLjE5NSA0OS44NTI1IDExMS45NTggNTAuMzY1MiAxMTEuNjQxIDUwLjgwNDdDMTExLjMzMSA1MS4yMzgzIDExMC45NDcgNTEuNTc1MiAxMTAuNDkgNTEuODE1NEMxMTAuMDMzIDUyLjA1NTcgMTA5LjUwNSA1Mi4xNzU4IDEwOC45MDggNTIuMTc1OEMxMDguMzE2IDUyLjE3NTggMTA3Ljc5NyA1Mi4wNjc0IDEwNy4zNTIgNTEuODUwNkMxMDYuOTEzIDUxLjYyNzkgMTA2LjU0MSA1MS4zMTQ1IDEwNi4yMzYgNTAuOTEwMkMxMDUuOTMxIDUwLjUwNTkgMTA1LjY4NSA1MC4wMzEyIDEwNS40OTggNDkuNDg2M0MxMDUuMzE2IDQ4LjkzNTUgMTA1LjE4NyA0OC4zMzIgMTA1LjExMSA0Ny42NzU4VjQ2Ljk2MzlDMTA1LjE4NyA0Ni4yNjY2IDEwNS4zMTYgNDUuNjMzOCAxMDUuNDk4IDQ1LjA2NTRDMTA1LjY4NSA0NC40OTcxIDEwNS45MzEgNDQuMDA3OCAxMDYuMjM2IDQzLjU5NzdDMTA2LjU0MSA0My4xODc1IDEwNi45MTMgNDIuODcxMSAxMDcuMzUyIDQyLjY0ODRDMTA3Ljc5MiA0Mi40MjU4IDEwOC4zMDQgNDIuMzE0NSAxMDguODkgNDIuMzE0NUMxMDkuNDg4IDQyLjMxNDUgMTEwLjAxOCA0Mi40MzE2IDExMC40ODEgNDIuNjY2QzExMC45NDQgNDIuODk0NSAxMTEuMzM0IDQzLjIyMjcgMTExLjY1IDQzLjY1MDRDMTExLjk2NiA0NC4wNzIzIDExMi4yMDQgNDQuNTgyIDExMi4zNjIgNDUuMTc5N0MxMTIuNTIgNDUuNzcxNSAxMTIuNTk5IDQ2LjQzMDcgMTEyLjU5OSA0Ny4xNTcyWk0xMTAuNDgxIDQ3LjM0MThWNDcuMTU3MkMxMTAuNDgxIDQ2LjcxNzggMTEwLjQ0IDQ2LjMxMDUgMTEwLjM1OCA0NS45MzU1QzExMC4yNzYgNDUuNTU0NyAxMTAuMTQ3IDQ1LjIyMDcgMTA5Ljk3MSA0NC45MzM2QzEwOS43OTYgNDQuNjQ2NSAxMDkuNTcgNDQuNDIzOCAxMDkuMjk1IDQ0LjI2NTZDMTA5LjAyNSA0NC4xMDE2IDEwOC43IDQ0LjAxOTUgMTA4LjMxOSA0NC4wMTk1QzEwNy45NDQgNDQuMDE5NSAxMDcuNjIyIDQ0LjA4NCAxMDcuMzUyIDQ0LjIxMjlDMTA3LjA4MyA0NC4zMzU5IDEwNi44NTcgNDQuNTA4OCAxMDYuNjc1IDQ0LjczMTRDMTA2LjQ5NCA0NC45NTQxIDEwNi4zNTMgNDUuMjE0OCAxMDYuMjU0IDQ1LjUxMzdDMTA2LjE1NCA0NS44MDY2IDEwNi4wODQgNDYuMTI2IDEwNi4wNDMgNDYuNDcxN1Y0OC4xNzY4QzEwNi4xMTMgNDguNTk4NiAxMDYuMjMzIDQ4Ljk4NTQgMTA2LjQwMyA0OS4zMzY5QzEwNi41NzMgNDkuNjg4NSAxMDYuODEzIDQ5Ljk2OTcgMTA3LjEyNCA1MC4xODA3QzEwNy40NCA1MC4zODU3IDEwNy44NDQgNTAuNDg4MyAxMDguMzM3IDUwLjQ4ODNDMTA4LjcxNyA1MC40ODgzIDEwOS4wNDMgNTAuNDA2MiAxMDkuMzEyIDUwLjI0MjJDMTA5LjU4MiA1MC4wNzgxIDEwOS44MDEgNDkuODUyNSAxMDkuOTcxIDQ5LjU2NTRDMTEwLjE0NyA0OS4yNzI1IDExMC4yNzYgNDguOTM1NSAxMTAuMzU4IDQ4LjU1NDdDMTEwLjQ0IDQ4LjE3MzggMTEwLjQ4MSA0Ny43Njk1IDExMC40ODEgNDcuMzQxOFpNMTE4Ljc0MyA1Mi4xNzU4QzExOC4wNCA1Mi4xNzU4IDExNy40MDQgNTIuMDYxNSAxMTYuODM2IDUxLjgzM0MxMTYuMjc0IDUxLjU5ODYgMTE1Ljc5MyA1MS4yNzM0IDExNS4zOTUgNTAuODU3NEMxMTUuMDAyIDUwLjQ0MTQgMTE0LjcgNDkuOTUyMSAxMTQuNDg5IDQ5LjM4OTZDMTE0LjI3OSA0OC44MjcxIDExNC4xNzMgNDguMjIwNyAxMTQuMTczIDQ3LjU3MDNWNDcuMjE4OEMxMTQuMTczIDQ2LjQ3NDYgMTE0LjI4MSA0NS44MDA4IDExNC40OTggNDUuMTk3M0MxMTQuNzE1IDQ0LjU5MzggMTE1LjAxNyA0NC4wNzgxIDExNS40MDQgNDMuNjUwNEMxMTUuNzkgNDMuMjE2OCAxMTYuMjQ3IDQyLjg4NTcgMTE2Ljc3NSA0Mi42NTcyQzExNy4zMDIgNDIuNDI4NyAxMTcuODczIDQyLjMxNDUgMTE4LjQ4OCA0Mi4zMTQ1QzExOS4xNjggNDIuMzE0NSAxMTkuNzYzIDQyLjQyODcgMTIwLjI3MyA0Mi42NTcyQzEyMC43ODIgNDIuODg1NyAxMjEuMjA0IDQzLjIwOCAxMjEuNTM4IDQzLjYyNEMxMjEuODc4IDQ0LjAzNDIgMTIyLjEzIDQ0LjUyMzQgMTIyLjI5NCA0NS4wOTE4QzEyMi40NjQgNDUuNjYwMiAxMjIuNTQ5IDQ2LjI4NzEgMTIyLjU0OSA0Ni45NzI3VjQ3Ljg3NzlIMTE1LjIwMVY0Ni4zNTc0SDEyMC40NTdWNDYuMTkwNEMxMjAuNDQ2IDQ1LjgwOTYgMTIwLjM2OSA0NS40NTIxIDEyMC4yMjkgNDUuMTE4MkMxMjAuMDk0IDQ0Ljc4NDIgMTE5Ljg4NiA0NC41MTQ2IDExOS42MDUgNDQuMzA5NkMxMTkuMzIzIDQ0LjEwNDUgMTE4Ljk0OCA0NC4wMDIgMTE4LjQ4IDQ0LjAwMkMxMTguMTI4IDQ0LjAwMiAxMTcuODE1IDQ0LjA3ODEgMTE3LjUzOSA0NC4yMzA1QzExNy4yNyA0NC4zNzcgMTE3LjA0NCA0NC41OTA4IDExNi44NjIgNDQuODcyMUMxMTYuNjgxIDQ1LjE1MzMgMTE2LjU0IDQ1LjQ5MzIgMTE2LjQ0MSA0NS44OTE2QzExNi4zNDcgNDYuMjg0MiAxMTYuMyA0Ni43MjY2IDExNi4zIDQ3LjIxODhWNDcuNTcwM0MxMTYuMyA0Ny45ODYzIDExNi4zNTYgNDguMzczIDExNi40NjcgNDguNzMwNUMxMTYuNTg0IDQ5LjA4MiAxMTYuNzU0IDQ5LjM4OTYgMTE2Ljk3NyA0OS42NTMzQzExNy4xOTkgNDkuOTE3IDExNy40NjkgNTAuMTI1IDExNy43ODUgNTAuMjc3M0MxMTguMTAyIDUwLjQyMzggMTE4LjQ2MiA1MC40OTcxIDExOC44NjYgNTAuNDk3MUMxMTkuMzc2IDUwLjQ5NzEgMTE5LjgzIDUwLjM5NDUgMTIwLjIyOSA1MC4xODk1QzEyMC42MjcgNDkuOTg0NCAxMjAuOTczIDQ5LjY5NDMgMTIxLjI2NiA0OS4zMTkzTDEyMi4zODIgNTAuNDAwNEMxMjIuMTc3IDUwLjY5OTIgMTIxLjkxIDUwLjk4NjMgMTIxLjU4MiA1MS4yNjE3QzEyMS4yNTQgNTEuNTMxMiAxMjAuODUzIDUxLjc1MSAxMjAuMzc4IDUxLjkyMDlDMTE5LjkwOSA1Mi4wOTA4IDExOS4zNjQgNTIuMTc1OCAxMTguNzQzIDUyLjE3NThaTTEyNi40NTIgNDQuNTIwNVY1MkgxMjQuMzM0VjQyLjQ5MDJIMTI2LjMyOUwxMjYuNDUyIDQ0LjUyMDVaTTEyNi4wNzQgNDYuODkzNkwxMjUuMzg4IDQ2Ljg4NDhDMTI1LjM5NCA0Ni4yMTA5IDEyNS40ODggNDUuNTkyOCAxMjUuNjcgNDUuMDMwM0MxMjUuODU3IDQ0LjQ2NzggMTI2LjExNSA0My45ODQ0IDEyNi40NDMgNDMuNTgwMUMxMjYuNzc3IDQzLjE3NTggMTI3LjE3NiA0Mi44NjUyIDEyNy42MzggNDIuNjQ4NEMxMjguMTAxIDQyLjQyNTggMTI4LjYxNyA0Mi4zMTQ1IDEyOS4xODUgNDIuMzE0NUMxMjkuNjQyIDQyLjMxNDUgMTMwLjA1NSA0Mi4zNzg5IDEzMC40MjUgNDIuNTA3OEMxMzAuOCA0Mi42MzA5IDEzMS4xMTkgNDIuODMzIDEzMS4zODMgNDMuMTE0M0MxMzEuNjUyIDQzLjM5NTUgMTMxLjg1NyA0My43NjE3IDEzMS45OTggNDQuMjEyOUMxMzIuMTM4IDQ0LjY1ODIgMTMyLjIwOSA0NS4yMDYxIDEzMi4yMDkgNDUuODU2NFY1MkgxMzAuMDgyVjQ1Ljg0NzdDMTMwLjA4MiA0NS4zOTA2IDEzMC4wMTQgNDUuMDMwMyAxMjkuODggNDQuNzY2NkMxMjkuNzUxIDQ0LjQ5NzEgMTI5LjU2IDQ0LjMwNjYgMTI5LjMwOCA0NC4xOTUzQzEyOS4wNjIgNDQuMDc4MSAxMjguNzU1IDQ0LjAxOTUgMTI4LjM4NiA0NC4wMTk1QzEyOC4wMjIgNDQuMDE5NSAxMjcuNjk3IDQ0LjA5NTcgMTI3LjQxIDQ0LjI0OEMxMjcuMTIzIDQ0LjQwMDQgMTI2Ljg4IDQ0LjYwODQgMTI2LjY4IDQ0Ljg3MjFDMTI2LjQ4NyA0NS4xMzU3IDEyNi4zMzggNDUuNDQwNCAxMjYuMjMyIDQ1Ljc4NjFDMTI2LjEyNyA0Ni4xMzE4IDEyNi4wNzQgNDYuNTAxIDEyNi4wNzQgNDYuODkzNlpNMTM4LjcxMyA1Mi4xNzU4QzEzOC4wMSA1Mi4xNzU4IDEzNy4zNzQgNTIuMDYxNSAxMzYuODA2IDUxLjgzM0MxMzYuMjQ0IDUxLjU5ODYgMTM1Ljc2MyA1MS4yNzM0IDEzNS4zNjUgNTAuODU3NEMxMzQuOTcyIDUwLjQ0MTQgMTM0LjY3IDQ5Ljk1MjEgMTM0LjQ1OSA0OS4zODk2QzEzNC4yNDggNDguODI3MSAxMzQuMTQzIDQ4LjIyMDcgMTM0LjE0MyA0Ny41NzAzVjQ3LjIxODhDMTM0LjE0MyA0Ni40NzQ2IDEzNC4yNTEgNDUuODAwOCAxMzQuNDY4IDQ1LjE5NzNDMTM0LjY4NSA0NC41OTM4IDEzNC45ODcgNDQuMDc4MSAxMzUuMzczIDQzLjY1MDRDMTM1Ljc2IDQzLjIxNjggMTM2LjIxNyA0Mi44ODU3IDEzNi43NDUgNDIuNjU3MkMxMzcuMjcyIDQyLjQyODcgMTM3Ljg0MyA0Mi4zMTQ1IDEzOC40NTggNDIuMzE0NUMxMzkuMTM4IDQyLjMxNDUgMTM5LjczMyA0Mi40Mjg3IDE0MC4yNDMgNDIuNjU3MkMxNDAuNzUyIDQyLjg4NTcgMTQxLjE3NCA0My4yMDggMTQxLjUwOCA0My42MjRDMTQxLjg0OCA0NC4wMzQyIDE0Mi4xIDQ0LjUyMzQgMTQyLjI2NCA0NS4wOTE4QzE0Mi40MzQgNDUuNjYwMiAxNDIuNTE5IDQ2LjI4NzEgMTQyLjUxOSA0Ni45NzI3VjQ3Ljg3NzlIMTM1LjE3MVY0Ni4zNTc0SDE0MC40MjdWNDYuMTkwNEMxNDAuNDE1IDQ1LjgwOTYgMTQwLjMzOSA0NS40NTIxIDE0MC4xOTkgNDUuMTE4MkMxNDAuMDY0IDQ0Ljc4NDIgMTM5Ljg1NiA0NC41MTQ2IDEzOS41NzUgNDQuMzA5NkMxMzkuMjkzIDQ0LjEwNDUgMTM4LjkxOCA0NC4wMDIgMTM4LjQ1IDQ0LjAwMkMxMzguMDk4IDQ0LjAwMiAxMzcuNzg1IDQ0LjA3ODEgMTM3LjUwOSA0NC4yMzA1QzEzNy4yNCA0NC4zNzcgMTM3LjAxNCA0NC41OTA4IDEzNi44MzIgNDQuODcyMUMxMzYuNjUxIDQ1LjE1MzMgMTM2LjUxIDQ1LjQ5MzIgMTM2LjQxMSA0NS44OTE2QzEzNi4zMTcgNDYuMjg0MiAxMzYuMjcgNDYuNzI2NiAxMzYuMjcgNDcuMjE4OFY0Ny41NzAzQzEzNi4yNyA0Ny45ODYzIDEzNi4zMjYgNDguMzczIDEzNi40MzcgNDguNzMwNUMxMzYuNTU0IDQ5LjA4MiAxMzYuNzI0IDQ5LjM4OTYgMTM2Ljk0NyA0OS42NTMzQzEzNy4xNjkgNDkuOTE3IDEzNy40MzkgNTAuMTI1IDEzNy43NTUgNTAuMjc3M0MxMzguMDcyIDUwLjQyMzggMTM4LjQzMiA1MC40OTcxIDEzOC44MzYgNTAuNDk3MUMxMzkuMzQ2IDUwLjQ5NzEgMTM5LjggNTAuMzk0NSAxNDAuMTk5IDUwLjE4OTVDMTQwLjU5NyA0OS45ODQ0IDE0MC45NDMgNDkuNjk0MyAxNDEuMjM2IDQ5LjMxOTNMMTQyLjM1MiA1MC40MDA0QzE0Mi4xNDcgNTAuNjk5MiAxNDEuODggNTAuOTg2MyAxNDEuNTUyIDUxLjI2MTdDMTQxLjIyNCA1MS41MzEyIDE0MC44MjMgNTEuNzUxIDE0MC4zNDggNTEuOTIwOUMxMzkuODc5IDUyLjA5MDggMTM5LjMzNCA1Mi4xNzU4IDEzOC43MTMgNTIuMTc1OFpNMTUwLjEyMiA1MC4wMzEyVjM4LjVIMTUyLjI0OVY1MkgxNTAuMzI0TDE1MC4xMjIgNTAuMDMxMlpNMTQzLjkzNSA0Ny4zNTA2VjQ3LjE2NkMxNDMuOTM1IDQ2LjQ0NTMgMTQ0LjAyIDQ1Ljc4OTEgMTQ0LjE4OSA0NS4xOTczQzE0NC4zNTkgNDQuNTk5NiAxNDQuNjA1IDQ0LjA4NjkgMTQ0LjkyOCA0My42NTkyQzE0NS4yNSA0My4yMjU2IDE0NS42NDMgNDIuODk0NSAxNDYuMTA1IDQyLjY2NkMxNDYuNTY4IDQyLjQzMTYgMTQ3LjA5IDQyLjMxNDUgMTQ3LjY3IDQyLjMxNDVDMTQ4LjI0NCA0Mi4zMTQ1IDE0OC43NDggNDIuNDI1OCAxNDkuMTgyIDQyLjY0ODRDMTQ5LjYxNSA0Mi44NzExIDE0OS45ODQgNDMuMTkwNCAxNTAuMjg5IDQzLjYwNjRDMTUwLjU5NCA0NC4wMTY2IDE1MC44MzcgNDQuNTA4OCAxNTEuMDE5IDQ1LjA4M0MxNTEuMiA0NS42NTE0IDE1MS4zMjkgNDYuMjg0MiAxNTEuNDA1IDQ2Ljk4MTRWNDcuNTcwM0MxNTEuMzI5IDQ4LjI1IDE1MS4yIDQ4Ljg3MTEgMTUxLjAxOSA0OS40MzM2QzE1MC44MzcgNDkuOTk2MSAxNTAuNTk0IDUwLjQ4MjQgMTUwLjI4OSA1MC44OTI2QzE0OS45ODQgNTEuMzAyNyAxNDkuNjEyIDUxLjYxOTEgMTQ5LjE3MyA1MS44NDE4QzE0OC43MzkgNTIuMDY0NSAxNDguMjMyIDUyLjE3NTggMTQ3LjY1MiA1Mi4xNzU4QzE0Ny4wNzggNTIuMTc1OCAxNDYuNTYgNTIuMDU1NyAxNDYuMDk3IDUxLjgxNTRDMTQ1LjY0IDUxLjU3NTIgMTQ1LjI1IDUxLjIzODMgMTQ0LjkyOCA1MC44MDQ3QzE0NC42MDUgNTAuMzcxMSAxNDQuMzU5IDQ5Ljg2MTMgMTQ0LjE4OSA0OS4yNzU0QzE0NC4wMiA0OC42ODM2IDE0My45MzUgNDguMDQyIDE0My45MzUgNDcuMzUwNlpNMTQ2LjA1MyA0Ny4xNjZWNDcuMzUwNkMxNDYuMDUzIDQ3Ljc4NDIgMTQ2LjA5MSA0OC4xODg1IDE0Ni4xNjcgNDguNTYzNUMxNDYuMjQ5IDQ4LjkzODUgMTQ2LjM3NSA0OS4yNjk1IDE0Ni41NDUgNDkuNTU2NkMxNDYuNzE1IDQ5LjgzNzkgMTQ2LjkzNSA1MC4wNjA1IDE0Ny4yMDQgNTAuMjI0NkMxNDcuNDc5IDUwLjM4MjggMTQ3LjgwOCA1MC40NjE5IDE0OC4xODggNTAuNDYxOUMxNDguNjY5IDUwLjQ2MTkgMTQ5LjA2NCA1MC4zNTY0IDE0OS4zNzUgNTAuMTQ1NUMxNDkuNjg2IDQ5LjkzNDYgMTQ5LjkyOSA0OS42NTA0IDE1MC4xMDQgNDkuMjkzQzE1MC4yODYgNDguOTI5NyAxNTAuNDA5IDQ4LjUyNTQgMTUwLjQ3NCA0OC4wODAxVjQ2LjQ4OTNDMTUwLjQzOCA0Ni4xNDM2IDE1MC4zNjUgNDUuODIxMyAxNTAuMjU0IDQ1LjUyMjVDMTUwLjE0OCA0NS4yMjM2IDE1MC4wMDUgNDQuOTYyOSAxNDkuODIzIDQ0Ljc0MDJDMTQ5LjY0MiA0NC41MTE3IDE0OS40MTYgNDQuMzM1OSAxNDkuMTQ2IDQ0LjIxMjlDMTQ4Ljg4MyA0NC4wODQgMTQ4LjU2OSA0NC4wMTk1IDE0OC4yMDYgNDQuMDE5NUMxNDcuODE5IDQ0LjAxOTUgMTQ3LjQ5MSA0NC4xMDE2IDE0Ny4yMjIgNDQuMjY1NkMxNDYuOTUyIDQ0LjQyOTcgMTQ2LjcyOSA0NC42NTUzIDE0Ni41NTQgNDQuOTQyNEMxNDYuMzg0IDQ1LjIyOTUgMTQ2LjI1OCA0NS41NjM1IDE0Ni4xNzYgNDUuOTQ0M0MxNDYuMDk0IDQ2LjMyNTIgMTQ2LjA1MyA0Ni43MzI0IDE0Ni4wNTMgNDcuMTY2WiIgZmlsbD0iIzE5ODAzOCIvPgo8L2c+CjxtYXNrIGlkPSJwYXRoLTYtaW5zaWRlLTFfNDY5N18zNjcxMyIgZmlsbD0id2hpdGUiPgo8cGF0aCBkPSJNOCA4OEM4IDg1Ljc5MDkgOS43OTA4NiA4NCAxMiA4NEgyMDRDMjA2LjIwOSA4NCAyMDggODUuNzkwOSAyMDggODhWMTQwQzIwOCAxNDIuMjA5IDIwNi4yMDkgMTQ0IDIwNCAxNDRIMTJDOS43OTA4NiAxNDQgOCAxNDIuMjA5IDggMTQwVjg4WiIvPgo8L21hc2s+CjxwYXRoIGQ9Ik04IDg4QzggODUuNzkwOSA5Ljc5MDg2IDg0IDEyIDg0SDIwNEMyMDYuMjA5IDg0IDIwOCA4NS43OTA5IDIwOCA4OFYxNDBDMjA4IDE0Mi4yMDkgMjA2LjIwOSAxNDQgMjA0IDE0NEgxMkM5Ljc5MDg2IDE0NCA4IDE0Mi4yMDkgOCAxNDBWODhaIiBmaWxsPSIjRDEyNzMwIi8+CjxwYXRoIGQ9Ik04IDg0SDIwOEg4Wk0yMDggMTQwQzIwOCAxNDMuMzE0IDIwNS4zMTQgMTQ2IDIwMiAxNDZIMTRDMTAuNjg2MyAxNDYgOCAxNDMuMzE0IDggMTQwQzggMTQxLjEwNSA5Ljc5MDg2IDE0MiAxMiAxNDJIMjA0QzIwNi4yMDkgMTQyIDIwOCAxNDEuMTA1IDIwOCAxNDBaTTggMTQ0Vjg0VjE0NFpNMjA4IDg0VjE0NFY4NFoiIGZpbGw9IiNEMTI3MzAiIG1hc2s9InVybCgjcGF0aC02LWluc2lkZS0xXzQ2OTdfMzY3MTMpIi8+CjxtYXNrIGlkPSJtYXNrMV80Njk3XzM2NzEzIiBzdHlsZT0ibWFzay10eXBlOmFscGhhIiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSI2NSIgeT0iMTAyIiB3aWR0aD0iMjUiIGhlaWdodD0iMjQiPgo8cmVjdCB4PSI2NS41IiB5PSIxMDIiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iI0Q5RDlEOSIvPgo8L21hc2s+CjxnIG1hc2s9InVybCgjbWFzazFfNDY5N18zNjcxMykiPgo8cGF0aCBkPSJNNzEuNSAxMjRDNzAuOTUgMTI0IDcwLjQ3OTIgMTIzLjgwNCA3MC4wODc1IDEyMy40MTNDNjkuNjk1OCAxMjMuMDIxIDY5LjUgMTIyLjU1IDY5LjUgMTIyVjExMkM2OS41IDExMS40NSA2OS42OTU4IDExMC45NzkgNzAuMDg3NSAxMTAuNTg4QzcwLjQ3OTIgMTEwLjE5NiA3MC45NSAxMTAgNzEuNSAxMTBINzIuNVYxMDhDNzIuNSAxMDYuNjE3IDcyLjk4NzUgMTA1LjQzOCA3My45NjI1IDEwNC40NjJDNzQuOTM3NSAxMDMuNDg3IDc2LjExNjcgMTAzIDc3LjUgMTAzQzc4Ljg4MzMgMTAzIDgwLjA2MjUgMTAzLjQ4NyA4MS4wMzc1IDEwNC40NjJDODIuMDEyNSAxMDUuNDM4IDgyLjUgMTA2LjYxNyA4Mi41IDEwOFYxMTBIODMuNUM4NC4wNSAxMTAgODQuNTIwOCAxMTAuMTk2IDg0LjkxMjUgMTEwLjU4OEM4NS4zMDQyIDExMC45NzkgODUuNSAxMTEuNDUgODUuNSAxMTJWMTIyQzg1LjUgMTIyLjU1IDg1LjMwNDIgMTIzLjAyMSA4NC45MTI1IDEyMy40MTNDODQuNTIwOCAxMjMuODA0IDg0LjA1IDEyNCA4My41IDEyNEg3MS41Wk03MS41IDEyMkg4My41VjExMkg3MS41VjEyMlpNNzcuNSAxMTlDNzguMDUgMTE5IDc4LjUyMDggMTE4LjgwNCA3OC45MTI1IDExOC40MTNDNzkuMzA0MiAxMTguMDIxIDc5LjUgMTE3LjU1IDc5LjUgMTE3Qzc5LjUgMTE2LjQ1IDc5LjMwNDIgMTE1Ljk3OSA3OC45MTI1IDExNS41ODhDNzguNTIwOCAxMTUuMTk2IDc4LjA1IDExNSA3Ny41IDExNUM3Ni45NSAxMTUgNzYuNDc5MiAxMTUuMTk2IDc2LjA4NzUgMTE1LjU4OEM3NS42OTU4IDExNS45NzkgNzUuNSAxMTYuNDUgNzUuNSAxMTdDNzUuNSAxMTcuNTUgNzUuNjk1OCAxMTguMDIxIDc2LjA4NzUgMTE4LjQxM0M3Ni40NzkyIDExOC44MDQgNzYuOTUgMTE5IDc3LjUgMTE5Wk03NC41IDExMEg4MC41VjEwOEM4MC41IDEwNy4xNjcgODAuMjA4MyAxMDYuNDU4IDc5LjYyNSAxMDUuODc1Qzc5LjA0MTcgMTA1LjI5MiA3OC4zMzMzIDEwNSA3Ny41IDEwNUM3Ni42NjY3IDEwNSA3NS45NTgzIDEwNS4yOTIgNzUuMzc1IDEwNS44NzVDNzQuNzkxNyAxMDYuNDU4IDc0LjUgMTA3LjE2NyA3NC41IDEwOFYxMTBaIiBmaWxsPSJ3aGl0ZSIvPgo8L2c+CjxwYXRoIGQ9Ik0xMDIuNjc2IDExNS44MzRIMTA0Ljg3M0MxMDQuODAzIDExNi42NzIgMTA0LjU2OCAxMTcuNDE5IDEwNC4xNyAxMTguMDc1QzEwMy43NzEgMTE4LjcyNiAxMDMuMjEyIDExOS4yMzggMTAyLjQ5MSAxMTkuNjEzQzEwMS43NzEgMTE5Ljk4OCAxMDAuODk1IDEyMC4xNzYgOTkuODYzMyAxMjAuMTc2Qzk5LjA3MjMgMTIwLjE3NiA5OC4zNjA0IDEyMC4wMzUgOTcuNzI3NSAxMTkuNzU0Qzk3LjA5NDcgMTE5LjQ2NyA5Ni41NTI3IDExOS4wNjIgOTYuMTAxNiAxMTguNTQxQzk1LjY1MDQgMTE4LjAxNCA5NS4zMDQ3IDExNy4zNzggOTUuMDY0NSAxMTYuNjM0Qzk0LjgzMDEgMTE1Ljg5IDk0LjcxMjkgMTE1LjA1OCA5NC43MTI5IDExNC4xMzhWMTEzLjA3NEM5NC43MTI5IDExMi4xNTQgOTQuODMzIDExMS4zMjIgOTUuMDczMiAxMTAuNTc4Qzk1LjMxOTMgMTA5LjgzNCA5NS42NzA5IDEwOS4xOTggOTYuMTI3OSAxMDguNjcxQzk2LjU4NSAxMDguMTM4IDk3LjEzMjggMTA3LjczIDk3Ljc3MTUgMTA3LjQ0OUM5OC40MTYgMTA3LjE2OCA5OS4xMzk2IDEwNy4wMjcgOTkuOTQyNCAxMDcuMDI3QzEwMC45NjIgMTA3LjAyNyAxMDEuODIzIDEwNy4yMTUgMTAyLjUyNiAxMDcuNTlDMTAzLjIyOSAxMDcuOTY1IDEwMy43NzQgMTA4LjQ4MyAxMDQuMTYxIDEwOS4xNDZDMTA0LjU1NCAxMDkuODA4IDEwNC43OTQgMTEwLjU2NiAxMDQuODgyIDExMS40MjJIMTAyLjY4NUMxMDIuNjI2IDExMC44NzEgMTAyLjQ5NyAxMTAuMzk5IDEwMi4yOTggMTEwLjAwN0MxMDIuMTA0IDEwOS42MTQgMTAxLjgxNyAxMDkuMzE1IDEwMS40MzcgMTA5LjExQzEwMS4wNTYgMTA4Ljg5OSAxMDAuNTU4IDEwOC43OTQgOTkuOTQyNCAxMDguNzk0Qzk5LjQzODUgMTA4Ljc5NCA5OC45OTkgMTA4Ljg4OCA5OC42MjQgMTA5LjA3NUM5OC4yNDkgMTA5LjI2MyA5Ny45MzU1IDEwOS41MzggOTcuNjgzNiAxMDkuOTAxQzk3LjQzMTYgMTEwLjI2NSA5Ny4yNDEyIDExMC43MTMgOTcuMTEyMyAxMTEuMjQ2Qzk2Ljk4OTMgMTExLjc3MyA5Ni45Mjc3IDExMi4zNzcgOTYuOTI3NyAxMTMuMDU3VjExNC4xMzhDOTYuOTI3NyAxMTQuNzgyIDk2Ljk4MzQgMTE1LjM2OCA5Ny4wOTQ3IDExNS44OTZDOTcuMjExOSAxMTYuNDE3IDk3LjM4NzcgMTE2Ljg2NSA5Ny42MjIxIDExNy4yNEM5Ny44NjIzIDExNy42MTUgOTguMTY3IDExNy45MDUgOTguNTM2MSAxMTguMTFDOTguOTA1MyAxMTguMzE1IDk5LjM0NzcgMTE4LjQxOCA5OS44NjMzIDExOC40MThDMTAwLjQ5IDExOC40MTggMTAwLjk5NyAxMTguMzE4IDEwMS4zODQgMTE4LjExOUMxMDEuNzc2IDExNy45MiAxMDIuMDcyIDExNy42MyAxMDIuMjcxIDExNy4yNDlDMTAyLjQ3NyAxMTYuODYyIDEwMi42MTEgMTE2LjM5MSAxMDIuNjc2IDExNS44MzRaTTEwOS4wODQgMTA2LjVWMTIwSDEwNi45NTdWMTA2LjVIMTA5LjA4NFpNMTExLjE1IDExNS4zNTFWMTE1LjE0OEMxMTEuMTUgMTE0LjQ2MyAxMTEuMjQ5IDExMy44MjcgMTExLjQ0OCAxMTMuMjQxQzExMS42NDggMTEyLjY0OSAxMTEuOTM1IDExMi4xMzcgMTEyLjMxIDExMS43MDNDMTEyLjY5MSAxMTEuMjY0IDExMy4xNTQgMTEwLjkyNCAxMTMuNjk4IDExMC42ODRDMTE0LjI0OSAxMTAuNDM4IDExNC44NyAxMTAuMzE0IDExNS41NjIgMTEwLjMxNEMxMTYuMjU5IDExMC4zMTQgMTE2Ljg4IDExMC40MzggMTE3LjQyNSAxMTAuNjg0QzExNy45NzYgMTEwLjkyNCAxMTguNDQyIDExMS4yNjQgMTE4LjgyMiAxMTEuNzAzQzExOS4yMDMgMTEyLjEzNyAxMTkuNDkzIDExMi42NDkgMTE5LjY5MyAxMTMuMjQxQzExOS44OTIgMTEzLjgyNyAxMTkuOTkxIDExNC40NjMgMTE5Ljk5MSAxMTUuMTQ4VjExNS4zNTFDMTE5Ljk5MSAxMTYuMDM2IDExOS44OTIgMTE2LjY3MiAxMTkuNjkzIDExNy4yNThDMTE5LjQ5MyAxMTcuODQ0IDExOS4yMDMgMTE4LjM1NiAxMTguODIyIDExOC43OTZDMTE4LjQ0MiAxMTkuMjI5IDExNy45NzkgMTE5LjU2OSAxMTcuNDM0IDExOS44MTVDMTE2Ljg4OSAxMjAuMDU2IDExNi4yNzEgMTIwLjE3NiAxMTUuNTc5IDEyMC4xNzZDMTE0Ljg4MiAxMjAuMTc2IDExNC4yNTggMTIwLjA1NiAxMTMuNzA3IDExOS44MTVDMTEzLjE2MiAxMTkuNTY5IDExMi42OTkgMTE5LjIyOSAxMTIuMzE5IDExOC43OTZDMTExLjkzOCAxMTguMzU2IDExMS42NDggMTE3Ljg0NCAxMTEuNDQ4IDExNy4yNThDMTExLjI0OSAxMTYuNjcyIDExMS4xNSAxMTYuMDM2IDExMS4xNSAxMTUuMzUxWk0xMTMuMjY4IDExNS4xNDhWMTE1LjM1MUMxMTMuMjY4IDExNS43NzggMTEzLjMxMiAxMTYuMTgzIDExMy40IDExNi41NjNDMTEzLjQ4NyAxMTYuOTQ0IDExMy42MjUgMTE3LjI3OCAxMTMuODEzIDExNy41NjVDMTE0IDExNy44NTMgMTE0LjI0IDExOC4wNzggMTE0LjUzMyAxMTguMjQyQzExNC44MjYgMTE4LjQwNiAxMTUuMTc1IDExOC40ODggMTE1LjU3OSAxMTguNDg4QzExNS45NzIgMTE4LjQ4OCAxMTYuMzEyIDExOC40MDYgMTE2LjU5OSAxMTguMjQyQzExNi44OTIgMTE4LjA3OCAxMTcuMTMyIDExNy44NTMgMTE3LjMyIDExNy41NjVDMTE3LjUwNyAxMTcuMjc4IDExNy42NDUgMTE2Ljk0NCAxMTcuNzMzIDExNi41NjNDMTE3LjgyNiAxMTYuMTgzIDExNy44NzMgMTE1Ljc3OCAxMTcuODczIDExNS4zNTFWMTE1LjE0OEMxMTcuODczIDExNC43MjcgMTE3LjgyNiAxMTQuMzI4IDExNy43MzMgMTEzLjk1M0MxMTcuNjQ1IDExMy41NzIgMTE3LjUwNCAxMTMuMjM1IDExNy4zMTEgMTEyLjk0MkMxMTcuMTIzIDExMi42NDkgMTE2Ljg4MyAxMTIuNDIxIDExNi41OSAxMTIuMjU3QzExNi4zMDMgMTEyLjA4NyAxMTUuOTYgMTEyLjAwMiAxMTUuNTYyIDExMi4wMDJDMTE1LjE2MyAxMTIuMDAyIDExNC44MTggMTEyLjA4NyAxMTQuNTI1IDExMi4yNTdDMTE0LjIzNyAxMTIuNDIxIDExNCAxMTIuNjQ5IDExMy44MTMgMTEyLjk0MkMxMTMuNjI1IDExMy4yMzUgMTEzLjQ4NyAxMTMuNTcyIDExMy40IDExMy45NTNDMTEzLjMxMiAxMTQuMzI4IDExMy4yNjggMTE0LjcyNyAxMTMuMjY4IDExNS4xNDhaTTEyNy4yNTIgMTE3LjQyNUMxMjcuMjUyIDExNy4yMTQgMTI3LjE5OSAxMTcuMDIzIDEyNy4wOTQgMTE2Ljg1NEMxMjYuOTg4IDExNi42NzggMTI2Ljc4NiAxMTYuNTIgMTI2LjQ4NyAxMTYuMzc5QzEyNi4xOTQgMTE2LjIzOCAxMjUuNzYxIDExNi4xMDkgMTI1LjE4NiAxMTUuOTkyQzEyNC42ODIgMTE1Ljg4MSAxMjQuMjIgMTE1Ljc0OSAxMjMuNzk4IDExNS41OTdDMTIzLjM4MiAxMTUuNDM4IDEyMy4wMjQgMTE1LjI0OCAxMjIuNzI1IDExNS4wMjVDMTIyLjQyNyAxMTQuODAzIDEyMi4xOTUgMTE0LjUzOSAxMjIuMDMxIDExNC4yMzRDMTIxLjg2NyAxMTMuOTMgMTIxLjc4NSAxMTMuNTc4IDEyMS43ODUgMTEzLjE4QzEyMS43ODUgMTEyLjc5MyAxMjEuODcgMTEyLjQyNyAxMjIuMDQgMTEyLjA4MUMxMjIuMjEgMTExLjczNSAxMjIuNDUzIDExMS40MzEgMTIyLjc2OSAxMTEuMTY3QzEyMy4wODYgMTEwLjkwMyAxMjMuNDcgMTEwLjY5NSAxMjMuOTIxIDExMC41NDNDMTI0LjM3OCAxMTAuMzkxIDEyNC44ODggMTEwLjMxNCAxMjUuNDUgMTEwLjMxNEMxMjYuMjQ3IDExMC4zMTQgMTI2LjkyOSAxMTAuNDQ5IDEyNy40OTggMTEwLjcxOUMxMjguMDcyIDExMC45ODIgMTI4LjUxMiAxMTEuMzQzIDEyOC44MTYgMTExLjhDMTI5LjEyMSAxMTIuMjUxIDEyOS4yNzMgMTEyLjc2MSAxMjkuMjczIDExMy4zMjlIMTI3LjE1NUMxMjcuMTU1IDExMy4wNzcgMTI3LjA5MSAxMTIuODQzIDEyNi45NjIgMTEyLjYyNkMxMjYuODM5IDExMi40MDMgMTI2LjY1MSAxMTIuMjI1IDEyNi4zOTkgMTEyLjA5QzEyNi4xNDcgMTExLjk0OSAxMjUuODMxIDExMS44NzkgMTI1LjQ1IDExMS44NzlDMTI1LjA4NyAxMTEuODc5IDEyNC43ODUgMTExLjkzOCAxMjQuNTQ1IDExMi4wNTVDMTI0LjMxIDExMi4xNjYgMTI0LjEzNSAxMTIuMzEyIDEyNC4wMTcgMTEyLjQ5NEMxMjMuOTA2IDExMi42NzYgMTIzLjg1IDExMi44NzUgMTIzLjg1IDExMy4wOTJDMTIzLjg1IDExMy4yNSAxMjMuODggMTEzLjM5NCAxMjMuOTM4IDExMy41MjJDMTI0LjAwMyAxMTMuNjQ2IDEyNC4xMDggMTEzLjc2IDEyNC4yNTUgMTEzLjg2NUMxMjQuNDAxIDExMy45NjUgMTI0LjYgMTE0LjA1OSAxMjQuODUyIDExNC4xNDZDMTI1LjExIDExNC4yMzQgMTI1LjQzMiAxMTQuMzE5IDEyNS44MTkgMTE0LjQwMUMxMjYuNTQ2IDExNC41NTQgMTI3LjE3IDExNC43NSAxMjcuNjkxIDExNC45OUMxMjguMjE5IDExNS4yMjUgMTI4LjYyMyAxMTUuNTI5IDEyOC45MDQgMTE1LjkwNEMxMjkuMTg1IDExNi4yNzMgMTI5LjMyNiAxMTYuNzQyIDEyOS4zMjYgMTE3LjMxMUMxMjkuMzI2IDExNy43MzIgMTI5LjIzNSAxMTguMTE5IDEyOS4wNTQgMTE4LjQ3MUMxMjguODc4IDExOC44MTYgMTI4LjYyIDExOS4xMTggMTI4LjI4IDExOS4zNzZDMTI3Ljk0IDExOS42MjggMTI3LjUzMyAxMTkuODI0IDEyNy4wNTggMTE5Ljk2NUMxMjYuNTkgMTIwLjEwNSAxMjYuMDYyIDEyMC4xNzYgMTI1LjQ3NiAxMjAuMTc2QzEyNC42MTUgMTIwLjE3NiAxMjMuODg2IDEyMC4wMjMgMTIzLjI4OCAxMTkuNzE5QzEyMi42OSAxMTkuNDA4IDEyMi4yMzYgMTE5LjAxMyAxMjEuOTI2IDExOC41MzJDMTIxLjYyMSAxMTguMDQ2IDEyMS40NjkgMTE3LjU0MiAxMjEuNDY5IDExNy4wMjFIMTIzLjUxNkMxMjMuNTQgMTE3LjQxMyAxMjMuNjQ4IDExNy43MjcgMTIzLjg0MiAxMTcuOTYxQzEyNC4wNDEgMTE4LjE4OSAxMjQuMjg3IDExOC4zNTYgMTI0LjU4IDExOC40NjJDMTI0Ljg3OSAxMTguNTYyIDEyNS4xODYgMTE4LjYxMSAxMjUuNTAzIDExOC42MTFDMTI1Ljg4NCAxMTguNjExIDEyNi4yMDMgMTE4LjU2MiAxMjYuNDYxIDExOC40NjJDMTI2LjcxOSAxMTguMzU2IDEyNi45MTUgMTE4LjIxNiAxMjcuMDUgMTE4LjA0QzEyNy4xODQgMTE3Ljg1OCAxMjcuMjUyIDExNy42NTMgMTI3LjI1MiAxMTcuNDI1Wk0xMzUuNTIzIDEyMC4xNzZDMTM0LjgyIDEyMC4xNzYgMTM0LjE4NCAxMjAuMDYyIDEzMy42MTYgMTE5LjgzM0MxMzMuMDUzIDExOS41OTkgMTMyLjU3MyAxMTkuMjczIDEzMi4xNzQgMTE4Ljg1N0MxMzEuNzgyIDExOC40NDEgMTMxLjQ4IDExNy45NTIgMTMxLjI2OSAxMTcuMzlDMTMxLjA1OCAxMTYuODI3IDEzMC45NTMgMTE2LjIyMSAxMzAuOTUzIDExNS41N1YxMTUuMjE5QzEzMC45NTMgMTE0LjQ3NSAxMzEuMDYxIDExMy44MDEgMTMxLjI3OCAxMTMuMTk3QzEzMS40OTUgMTEyLjU5NCAxMzEuNzk2IDExMi4wNzggMTMyLjE4MyAxMTEuNjVDMTMyLjU3IDExMS4yMTcgMTMzLjAyNyAxMTAuODg2IDEzMy41NTQgMTEwLjY1N0MxMzQuMDgxIDExMC40MjkgMTM0LjY1MyAxMTAuMzE0IDEzNS4yNjggMTEwLjMxNEMxMzUuOTQ4IDExMC4zMTQgMTM2LjU0MiAxMTAuNDI5IDEzNy4wNTIgMTEwLjY1N0MxMzcuNTYyIDExMC44ODYgMTM3Ljk4NCAxMTEuMjA4IDEzOC4zMTggMTExLjYyNEMxMzguNjU4IDExMi4wMzQgMTM4LjkxIDExMi41MjMgMTM5LjA3NCAxMTMuMDkyQzEzOS4yNDQgMTEzLjY2IDEzOS4zMjkgMTE0LjI4NyAxMzkuMzI5IDExNC45NzNWMTE1Ljg3OEgxMzEuOTgxVjExNC4zNTdIMTM3LjIzN1YxMTQuMTlDMTM3LjIyNSAxMTMuODEgMTM3LjE0OSAxMTMuNDUyIDEzNy4wMDggMTEzLjExOEMxMzYuODczIDExMi43ODQgMTM2LjY2NSAxMTIuNTE1IDEzNi4zODQgMTEyLjMxQzEzNi4xMDMgMTEyLjEwNCAxMzUuNzI4IDExMi4wMDIgMTM1LjI1OSAxMTIuMDAyQzEzNC45MDggMTEyLjAwMiAxMzQuNTk0IDExMi4wNzggMTM0LjMxOSAxMTIuMjNDMTM0LjA0OSAxMTIuMzc3IDEzMy44MjQgMTEyLjU5MSAxMzMuNjQyIDExMi44NzJDMTMzLjQ2IDExMy4xNTMgMTMzLjMyIDExMy40OTMgMTMzLjIyIDExMy44OTJDMTMzLjEyNiAxMTQuMjg0IDEzMy4wNzkgMTE0LjcyNyAxMzMuMDc5IDExNS4yMTlWMTE1LjU3QzEzMy4wNzkgMTE1Ljk4NiAxMzMuMTM1IDExNi4zNzMgMTMzLjI0NiAxMTYuNzNDMTMzLjM2NCAxMTcuMDgyIDEzMy41MzQgMTE3LjM5IDEzMy43NTYgMTE3LjY1M0MxMzMuOTc5IDExNy45MTcgMTM0LjI0OCAxMTguMTI1IDEzNC41NjUgMTE4LjI3N0MxMzQuODgxIDExOC40MjQgMTM1LjI0MiAxMTguNDk3IDEzNS42NDYgMTE4LjQ5N0MxMzYuMTU2IDExOC40OTcgMTM2LjYxIDExOC4zOTUgMTM3LjAwOCAxMTguMTg5QzEzNy40MDcgMTE3Ljk4NCAxMzcuNzUyIDExNy42OTQgMTM4LjA0NSAxMTcuMzE5TDEzOS4xNjIgMTE4LjRDMTM4Ljk1NiAxMTguNjk5IDEzOC42OSAxMTguOTg2IDEzOC4zNjIgMTE5LjI2MkMxMzguMDM0IDExOS41MzEgMTM3LjYzMiAxMTkuNzUxIDEzNy4xNTggMTE5LjkyMUMxMzYuNjg5IDEyMC4wOTEgMTM2LjE0NCAxMjAuMTc2IDEzNS41MjMgMTIwLjE3NlpNMTQ2LjkzMiAxMTguMDMxVjEwNi41SDE0OS4wNTlWMTIwSDE0Ny4xMzRMMTQ2LjkzMiAxMTguMDMxWk0xNDAuNzQ0IDExNS4zNTFWMTE1LjE2NkMxNDAuNzQ0IDExNC40NDUgMTQwLjgyOSAxMTMuNzg5IDE0MC45OTkgMTEzLjE5N0MxNDEuMTY5IDExMi42IDE0MS40MTUgMTEyLjA4NyAxNDEuNzM3IDExMS42NTlDMTQyLjA2IDExMS4yMjYgMTQyLjQ1MiAxMTAuODk1IDE0Mi45MTUgMTEwLjY2NkMxNDMuMzc4IDExMC40MzIgMTQzLjg5OSAxMTAuMzE0IDE0NC40NzkgMTEwLjMxNEMxNDUuMDU0IDExMC4zMTQgMTQ1LjU1OCAxMTAuNDI2IDE0NS45OTEgMTEwLjY0OEMxNDYuNDI1IDExMC44NzEgMTQ2Ljc5NCAxMTEuMTkgMTQ3LjA5OSAxMTEuNjA2QzE0Ny40MDMgMTEyLjAxNyAxNDcuNjQ2IDExMi41MDkgMTQ3LjgyOCAxMTMuMDgzQzE0OC4wMSAxMTMuNjUxIDE0OC4xMzkgMTE0LjI4NCAxNDguMjE1IDExNC45ODFWMTE1LjU3QzE0OC4xMzkgMTE2LjI1IDE0OC4wMSAxMTYuODcxIDE0Ny44MjggMTE3LjQzNEMxNDcuNjQ2IDExNy45OTYgMTQ3LjQwMyAxMTguNDgyIDE0Ny4wOTkgMTE4Ljg5M0MxNDYuNzk0IDExOS4zMDMgMTQ2LjQyMiAxMTkuNjE5IDE0NS45ODIgMTE5Ljg0MkMxNDUuNTQ5IDEyMC4wNjQgMTQ1LjA0MiAxMjAuMTc2IDE0NC40NjIgMTIwLjE3NkMxNDMuODg4IDEyMC4xNzYgMTQzLjM2OSAxMjAuMDU2IDE0Mi45MDYgMTE5LjgxNUMxNDIuNDQ5IDExOS41NzUgMTQyLjA2IDExOS4yMzggMTQxLjczNyAxMTguODA1QzE0MS40MTUgMTE4LjM3MSAxNDEuMTY5IDExNy44NjEgMTQwLjk5OSAxMTcuMjc1QzE0MC44MjkgMTE2LjY4NCAxNDAuNzQ0IDExNi4wNDIgMTQwLjc0NCAxMTUuMzUxWk0xNDIuODYyIDExNS4xNjZWMTE1LjM1MUMxNDIuODYyIDExNS43ODQgMTQyLjkgMTE2LjE4OCAxNDIuOTc3IDExNi41NjNDMTQzLjA1OSAxMTYuOTM4IDE0My4xODUgMTE3LjI3IDE0My4zNTQgMTE3LjU1N0MxNDMuNTI0IDExNy44MzggMTQzLjc0NCAxMTguMDYxIDE0NC4wMTQgMTE4LjIyNUMxNDQuMjg5IDExOC4zODMgMTQ0LjYxNyAxMTguNDYyIDE0NC45OTggMTE4LjQ2MkMxNDUuNDc5IDExOC40NjIgMTQ1Ljg3NCAxMTguMzU2IDE0Ni4xODUgMTE4LjE0NkMxNDYuNDk1IDExNy45MzUgMTQ2LjczOCAxMTcuNjUgMTQ2LjkxNCAxMTcuMjkzQzE0Ny4wOTYgMTE2LjkzIDE0Ny4yMTkgMTE2LjUyNSAxNDcuMjgzIDExNi4wOFYxMTQuNDg5QzE0Ny4yNDggMTE0LjE0NCAxNDcuMTc1IDExMy44MjEgMTQ3LjA2MyAxMTMuNTIyQzE0Ni45NTggMTEzLjIyNCAxNDYuODE0IDExMi45NjMgMTQ2LjYzMyAxMTIuNzRDMTQ2LjQ1MSAxMTIuNTEyIDE0Ni4yMjYgMTEyLjMzNiAxNDUuOTU2IDExMi4yMTNDMTQ1LjY5MiAxMTIuMDg0IDE0NS4zNzkgMTEyLjAyIDE0NS4wMTYgMTEyLjAyQzE0NC42MjkgMTEyLjAyIDE0NC4zMDEgMTEyLjEwMiAxNDQuMDMxIDExMi4yNjZDMTQzLjc2MiAxMTIuNDMgMTQzLjUzOSAxMTIuNjU1IDE0My4zNjMgMTEyLjk0MkMxNDMuMTkzIDExMy4yMjkgMTQzLjA2NyAxMTMuNTYzIDE0Mi45ODUgMTEzLjk0NEMxNDIuOTAzIDExNC4zMjUgMTQyLjg2MiAxMTQuNzMyIDE0Mi44NjIgMTE1LjE2NloiIGZpbGw9IndoaXRlIi8+CjxkZWZzPgo8ZmlsdGVyIGlkPSJmaWx0ZXIwX2RfNDY5N18zNjcxMyIgeD0iMCIgeT0iMTIiIHdpZHRoPSIyMTYiIGhlaWdodD0iNzYiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KPGZlQ29sb3JNYXRyaXggaW49IlNvdXJjZUFscGhhIiB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMTI3IDAiIHJlc3VsdD0iaGFyZEFscGhhIi8+CjxmZU9mZnNldCBkeT0iNCIvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI0Ii8+CjxmZUNvbXBvc2l0ZSBpbjI9ImhhcmRBbHBoYSIgb3BlcmF0b3I9Im91dCIvPgo8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMC4wOCAwIi8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0iZWZmZWN0MV9kcm9wU2hhZG93XzQ2OTdfMzY3MTMiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2Ryb3BTaGFkb3dfNDY5N18zNjcxMyIgcmVzdWx0PSJzaGFwZSIvPgo8L2ZpbHRlcj4KPC9kZWZzPgo8L3N2Zz4K", + "image": "tb-image:VG9nZ2xlIGJ1dHRvbnMuc3Zn:IlRvZ2dsZSBidXR0b24iIHN5c3RlbSB3aWRnZXQgaW1hZ2U=:SU1BR0U=;data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjE2IiBoZWlnaHQ9IjE2MCIgdmlld0JveD0iMCAwIDIxNiAxNjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2RfNDY5N18zNjcxMykiPgo8cmVjdCB4PSI4Ljc1IiB5PSIxNi43NSIgd2lkdGg9IjE5OC41IiBoZWlnaHQ9IjU4LjUiIHJ4PSIzLjI1IiBzdHJva2U9IiMxOTgwMzgiIHN0cm9rZS13aWR0aD0iMS41IiBzaGFwZS1yZW5kZXJpbmc9ImNyaXNwRWRnZXMiLz4KPG1hc2sgaWQ9Im1hc2swXzQ2OTdfMzY3MTMiIHN0eWxlPSJtYXNrLXR5cGU6YWxwaGEiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIHg9IjYyIiB5PSIzNCIgd2lkdGg9IjI1IiBoZWlnaHQ9IjI0Ij4KPHJlY3QgeD0iNjIuNSIgeT0iMzQiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iI0Q5RDlEOSIvPgo8L21hc2s+CjxnIG1hc2s9InVybCgjbWFzazBfNDY5N18zNjcxMykiPgo8cGF0aCBkPSJNNjguNSA0Mkg3Ny41VjQwQzc3LjUgMzkuMTY2NyA3Ny4yMDgzIDM4LjQ1ODMgNzYuNjI1IDM3Ljg3NUM3Ni4wNDE3IDM3LjI5MTcgNzUuMzMzMyAzNyA3NC41IDM3QzczLjY2NjcgMzcgNzIuOTU4MyAzNy4yOTE3IDcyLjM3NSAzNy44NzVDNzEuNzkxNyAzOC40NTgzIDcxLjUgMzkuMTY2NyA3MS41IDQwSDY5LjVDNjkuNSAzOC42MTY3IDY5Ljk4NzUgMzcuNDM3NSA3MC45NjI1IDM2LjQ2MjVDNzEuOTM3NSAzNS40ODc1IDczLjExNjcgMzUgNzQuNSAzNUM3NS44ODMzIDM1IDc3LjA2MjUgMzUuNDg3NSA3OC4wMzc1IDM2LjQ2MjVDNzkuMDEyNSAzNy40Mzc1IDc5LjUgMzguNjE2NyA3OS41IDQwVjQySDgwLjVDODEuMDUgNDIgODEuNTIwOCA0Mi4xOTU4IDgxLjkxMjUgNDIuNTg3NUM4Mi4zMDQyIDQyLjk3OTIgODIuNSA0My40NSA4Mi41IDQ0VjU0QzgyLjUgNTQuNTUgODIuMzA0MiA1NS4wMjA4IDgxLjkxMjUgNTUuNDEyNUM4MS41MjA4IDU1LjgwNDIgODEuMDUgNTYgODAuNSA1Nkg2OC41QzY3Ljk1IDU2IDY3LjQ3OTIgNTUuODA0MiA2Ny4wODc1IDU1LjQxMjVDNjYuNjk1OCA1NS4wMjA4IDY2LjUgNTQuNTUgNjYuNSA1NFY0NEM2Ni41IDQzLjQ1IDY2LjY5NTggNDIuOTc5MiA2Ny4wODc1IDQyLjU4NzVDNjcuNDc5MiA0Mi4xOTU4IDY3Ljk1IDQyIDY4LjUgNDJaTTY4LjUgNTRIODAuNVY0NEg2OC41VjU0Wk03NC41IDUxQzc1LjA1IDUxIDc1LjUyMDggNTAuODA0MiA3NS45MTI1IDUwLjQxMjVDNzYuMzA0MiA1MC4wMjA4IDc2LjUgNDkuNTUgNzYuNSA0OUM3Ni41IDQ4LjQ1IDc2LjMwNDIgNDcuOTc5MiA3NS45MTI1IDQ3LjU4NzVDNzUuNTIwOCA0Ny4xOTU4IDc1LjA1IDQ3IDc0LjUgNDdDNzMuOTUgNDcgNzMuNDc5MiA0Ny4xOTU4IDczLjA4NzUgNDcuNTg3NUM3Mi42OTU4IDQ3Ljk3OTIgNzIuNSA0OC40NSA3Mi41IDQ5QzcyLjUgNDkuNTUgNzIuNjk1OCA1MC4wMjA4IDczLjA4NzUgNTAuNDEyNUM3My40NzkyIDUwLjgwNDIgNzMuOTUgNTEgNzQuNSA1MVoiIGZpbGw9IiMxOTgwMzgiLz4KPC9nPgo8cGF0aCBkPSJNMTAyLjEzMSA0NS4yNVY0NS45NTMxQzEwMi4xMzEgNDYuOTE5OSAxMDIuMDA1IDQ3Ljc4NzEgMTAxLjc1MyA0OC41NTQ3QzEwMS41MDEgNDkuMzIyMyAxMDEuMTQxIDQ5Ljk3NTYgMTAwLjY3MiA1MC41MTQ2QzEwMC4yMDkgNTEuMDUzNyA5OS42NTIzIDUxLjQ2NjggOTkuMDAyIDUxLjc1MzlDOTguMzUxNiA1Mi4wMzUyIDk3LjYzMDkgNTIuMTc1OCA5Ni44Mzk4IDUyLjE3NThDOTYuMDU0NyA1Mi4xNzU4IDk1LjMzNjkgNTIuMDM1MiA5NC42ODY1IDUxLjc1MzlDOTQuMDQyIDUxLjQ2NjggOTMuNDgyNCA1MS4wNTM3IDkzLjAwNzggNTAuNTE0NkM5Mi41MzMyIDQ5Ljk3NTYgOTIuMTY0MSA0OS4zMjIzIDkxLjkwMDQgNDguNTU0N0M5MS42NDI2IDQ3Ljc4NzEgOTEuNTEzNyA0Ni45MTk5IDkxLjUxMzcgNDUuOTUzMVY0NS4yNUM5MS41MTM3IDQ0LjI4MzIgOTEuNjQyNiA0My40MTg5IDkxLjkwMDQgNDIuNjU3MkM5Mi4xNTgyIDQxLjg4OTYgOTIuNTIxNSA0MS4yMzYzIDkyLjk5MDIgNDAuNjk3M0M5My40NjQ4IDQwLjE1MjMgOTQuMDI0NCAzOS43MzkzIDk0LjY2ODkgMzkuNDU4Qzk1LjMxOTMgMzkuMTcwOSA5Ni4wMzcxIDM5LjAyNzMgOTYuODIyMyAzOS4wMjczQzk3LjYxMzMgMzkuMDI3MyA5OC4zMzQgMzkuMTcwOSA5OC45ODQ0IDM5LjQ1OEM5OS42MzQ4IDM5LjczOTMgMTAwLjE5NCA0MC4xNTIzIDEwMC42NjMgNDAuNjk3M0MxMDEuMTMyIDQxLjIzNjMgMTAxLjQ5MiA0MS44ODk2IDEwMS43NDQgNDIuNjU3MkMxMDIuMDAyIDQzLjQxODkgMTAyLjEzMSA0NC4yODMyIDEwMi4xMzEgNDUuMjVaTTk5LjkyNDggNDUuOTUzMVY0NS4yMzI0Qzk5LjkyNDggNDQuNTE3NiA5OS44NTQ1IDQzLjg4NzcgOTkuNzEzOSA0My4zNDI4Qzk5LjU3OTEgNDIuNzkyIDk5LjM3NyA0Mi4zMzIgOTkuMTA3NCA0MS45NjI5Qzk4Ljg0MzggNDEuNTg3OSA5OC41MTg2IDQxLjMwNjYgOTguMTMxOCA0MS4xMTkxQzk3Ljc0NTEgNDAuOTI1OCA5Ny4zMDg2IDQwLjgyOTEgOTYuODIyMyA0MC44MjkxQzk2LjMzNTkgNDAuODI5MSA5NS45MDIzIDQwLjkyNTggOTUuNTIxNSA0MS4xMTkxQzk1LjE0MDYgNDEuMzA2NiA5NC44MTU0IDQxLjU4NzkgOTQuNTQ1OSA0MS45NjI5Qzk0LjI4MjIgNDIuMzMyIDk0LjA4MDEgNDIuNzkyIDkzLjkzOTUgNDMuMzQyOEM5My43OTg4IDQzLjg4NzcgOTMuNzI4NSA0NC41MTc2IDkzLjcyODUgNDUuMjMyNFY0NS45NTMxQzkzLjcyODUgNDYuNjY4IDkzLjc5ODggNDcuMzAwOCA5My45Mzk1IDQ3Ljg1MTZDOTQuMDgwMSA0OC40MDIzIDk0LjI4NTIgNDguODY4MiA5NC41NTQ3IDQ5LjI0OUM5NC44MzAxIDQ5LjYyNCA5NS4xNTgyIDQ5LjkwODIgOTUuNTM5MSA1MC4xMDE2Qzk1LjkxOTkgNTAuMjg5MSA5Ni4zNTM1IDUwLjM4MjggOTYuODM5OCA1MC4zODI4Qzk3LjMzMiA1MC4zODI4IDk3Ljc2ODYgNTAuMjg5MSA5OC4xNDk0IDUwLjEwMTZDOTguNTMwMyA0OS45MDgyIDk4Ljg1MjUgNDkuNjI0IDk5LjExNjIgNDkuMjQ5Qzk5LjM3OTkgNDguODY4MiA5OS41NzkxIDQ4LjQwMjMgOTkuNzEzOSA0Ny44NTE2Qzk5Ljg1NDUgNDcuMzAwOCA5OS45MjQ4IDQ2LjY2OCA5OS45MjQ4IDQ1Ljk1MzFaTTEwNi40MDMgNDQuMzE4NFY1NS42NTYySDEwNC4yODVWNDIuNDkwMkgxMDYuMjM2TDEwNi40MDMgNDQuMzE4NFpNMTEyLjU5OSA0Ny4xNTcyVjQ3LjM0MThDMTEyLjU5OSA0OC4wMzMyIDExMi41MTcgNDguNjc0OCAxMTIuMzUzIDQ5LjI2NjZDMTEyLjE5NSA0OS44NTI1IDExMS45NTggNTAuMzY1MiAxMTEuNjQxIDUwLjgwNDdDMTExLjMzMSA1MS4yMzgzIDExMC45NDcgNTEuNTc1MiAxMTAuNDkgNTEuODE1NEMxMTAuMDMzIDUyLjA1NTcgMTA5LjUwNSA1Mi4xNzU4IDEwOC45MDggNTIuMTc1OEMxMDguMzE2IDUyLjE3NTggMTA3Ljc5NyA1Mi4wNjc0IDEwNy4zNTIgNTEuODUwNkMxMDYuOTEzIDUxLjYyNzkgMTA2LjU0MSA1MS4zMTQ1IDEwNi4yMzYgNTAuOTEwMkMxMDUuOTMxIDUwLjUwNTkgMTA1LjY4NSA1MC4wMzEyIDEwNS40OTggNDkuNDg2M0MxMDUuMzE2IDQ4LjkzNTUgMTA1LjE4NyA0OC4zMzIgMTA1LjExMSA0Ny42NzU4VjQ2Ljk2MzlDMTA1LjE4NyA0Ni4yNjY2IDEwNS4zMTYgNDUuNjMzOCAxMDUuNDk4IDQ1LjA2NTRDMTA1LjY4NSA0NC40OTcxIDEwNS45MzEgNDQuMDA3OCAxMDYuMjM2IDQzLjU5NzdDMTA2LjU0MSA0My4xODc1IDEwNi45MTMgNDIuODcxMSAxMDcuMzUyIDQyLjY0ODRDMTA3Ljc5MiA0Mi40MjU4IDEwOC4zMDQgNDIuMzE0NSAxMDguODkgNDIuMzE0NUMxMDkuNDg4IDQyLjMxNDUgMTEwLjAxOCA0Mi40MzE2IDExMC40ODEgNDIuNjY2QzExMC45NDQgNDIuODk0NSAxMTEuMzM0IDQzLjIyMjcgMTExLjY1IDQzLjY1MDRDMTExLjk2NiA0NC4wNzIzIDExMi4yMDQgNDQuNTgyIDExMi4zNjIgNDUuMTc5N0MxMTIuNTIgNDUuNzcxNSAxMTIuNTk5IDQ2LjQzMDcgMTEyLjU5OSA0Ny4xNTcyWk0xMTAuNDgxIDQ3LjM0MThWNDcuMTU3MkMxMTAuNDgxIDQ2LjcxNzggMTEwLjQ0IDQ2LjMxMDUgMTEwLjM1OCA0NS45MzU1QzExMC4yNzYgNDUuNTU0NyAxMTAuMTQ3IDQ1LjIyMDcgMTA5Ljk3MSA0NC45MzM2QzEwOS43OTYgNDQuNjQ2NSAxMDkuNTcgNDQuNDIzOCAxMDkuMjk1IDQ0LjI2NTZDMTA5LjAyNSA0NC4xMDE2IDEwOC43IDQ0LjAxOTUgMTA4LjMxOSA0NC4wMTk1QzEwNy45NDQgNDQuMDE5NSAxMDcuNjIyIDQ0LjA4NCAxMDcuMzUyIDQ0LjIxMjlDMTA3LjA4MyA0NC4zMzU5IDEwNi44NTcgNDQuNTA4OCAxMDYuNjc1IDQ0LjczMTRDMTA2LjQ5NCA0NC45NTQxIDEwNi4zNTMgNDUuMjE0OCAxMDYuMjU0IDQ1LjUxMzdDMTA2LjE1NCA0NS44MDY2IDEwNi4wODQgNDYuMTI2IDEwNi4wNDMgNDYuNDcxN1Y0OC4xNzY4QzEwNi4xMTMgNDguNTk4NiAxMDYuMjMzIDQ4Ljk4NTQgMTA2LjQwMyA0OS4zMzY5QzEwNi41NzMgNDkuNjg4NSAxMDYuODEzIDQ5Ljk2OTcgMTA3LjEyNCA1MC4xODA3QzEwNy40NCA1MC4zODU3IDEwNy44NDQgNTAuNDg4MyAxMDguMzM3IDUwLjQ4ODNDMTA4LjcxNyA1MC40ODgzIDEwOS4wNDMgNTAuNDA2MiAxMDkuMzEyIDUwLjI0MjJDMTA5LjU4MiA1MC4wNzgxIDEwOS44MDEgNDkuODUyNSAxMDkuOTcxIDQ5LjU2NTRDMTEwLjE0NyA0OS4yNzI1IDExMC4yNzYgNDguOTM1NSAxMTAuMzU4IDQ4LjU1NDdDMTEwLjQ0IDQ4LjE3MzggMTEwLjQ4MSA0Ny43Njk1IDExMC40ODEgNDcuMzQxOFpNMTE4Ljc0MyA1Mi4xNzU4QzExOC4wNCA1Mi4xNzU4IDExNy40MDQgNTIuMDYxNSAxMTYuODM2IDUxLjgzM0MxMTYuMjc0IDUxLjU5ODYgMTE1Ljc5MyA1MS4yNzM0IDExNS4zOTUgNTAuODU3NEMxMTUuMDAyIDUwLjQ0MTQgMTE0LjcgNDkuOTUyMSAxMTQuNDg5IDQ5LjM4OTZDMTE0LjI3OSA0OC44MjcxIDExNC4xNzMgNDguMjIwNyAxMTQuMTczIDQ3LjU3MDNWNDcuMjE4OEMxMTQuMTczIDQ2LjQ3NDYgMTE0LjI4MSA0NS44MDA4IDExNC40OTggNDUuMTk3M0MxMTQuNzE1IDQ0LjU5MzggMTE1LjAxNyA0NC4wNzgxIDExNS40MDQgNDMuNjUwNEMxMTUuNzkgNDMuMjE2OCAxMTYuMjQ3IDQyLjg4NTcgMTE2Ljc3NSA0Mi42NTcyQzExNy4zMDIgNDIuNDI4NyAxMTcuODczIDQyLjMxNDUgMTE4LjQ4OCA0Mi4zMTQ1QzExOS4xNjggNDIuMzE0NSAxMTkuNzYzIDQyLjQyODcgMTIwLjI3MyA0Mi42NTcyQzEyMC43ODIgNDIuODg1NyAxMjEuMjA0IDQzLjIwOCAxMjEuNTM4IDQzLjYyNEMxMjEuODc4IDQ0LjAzNDIgMTIyLjEzIDQ0LjUyMzQgMTIyLjI5NCA0NS4wOTE4QzEyMi40NjQgNDUuNjYwMiAxMjIuNTQ5IDQ2LjI4NzEgMTIyLjU0OSA0Ni45NzI3VjQ3Ljg3NzlIMTE1LjIwMVY0Ni4zNTc0SDEyMC40NTdWNDYuMTkwNEMxMjAuNDQ2IDQ1LjgwOTYgMTIwLjM2OSA0NS40NTIxIDEyMC4yMjkgNDUuMTE4MkMxMjAuMDk0IDQ0Ljc4NDIgMTE5Ljg4NiA0NC41MTQ2IDExOS42MDUgNDQuMzA5NkMxMTkuMzIzIDQ0LjEwNDUgMTE4Ljk0OCA0NC4wMDIgMTE4LjQ4IDQ0LjAwMkMxMTguMTI4IDQ0LjAwMiAxMTcuODE1IDQ0LjA3ODEgMTE3LjUzOSA0NC4yMzA1QzExNy4yNyA0NC4zNzcgMTE3LjA0NCA0NC41OTA4IDExNi44NjIgNDQuODcyMUMxMTYuNjgxIDQ1LjE1MzMgMTE2LjU0IDQ1LjQ5MzIgMTE2LjQ0MSA0NS44OTE2QzExNi4zNDcgNDYuMjg0MiAxMTYuMyA0Ni43MjY2IDExNi4zIDQ3LjIxODhWNDcuNTcwM0MxMTYuMyA0Ny45ODYzIDExNi4zNTYgNDguMzczIDExNi40NjcgNDguNzMwNUMxMTYuNTg0IDQ5LjA4MiAxMTYuNzU0IDQ5LjM4OTYgMTE2Ljk3NyA0OS42NTMzQzExNy4xOTkgNDkuOTE3IDExNy40NjkgNTAuMTI1IDExNy43ODUgNTAuMjc3M0MxMTguMTAyIDUwLjQyMzggMTE4LjQ2MiA1MC40OTcxIDExOC44NjYgNTAuNDk3MUMxMTkuMzc2IDUwLjQ5NzEgMTE5LjgzIDUwLjM5NDUgMTIwLjIyOSA1MC4xODk1QzEyMC42MjcgNDkuOTg0NCAxMjAuOTczIDQ5LjY5NDMgMTIxLjI2NiA0OS4zMTkzTDEyMi4zODIgNTAuNDAwNEMxMjIuMTc3IDUwLjY5OTIgMTIxLjkxIDUwLjk4NjMgMTIxLjU4MiA1MS4yNjE3QzEyMS4yNTQgNTEuNTMxMiAxMjAuODUzIDUxLjc1MSAxMjAuMzc4IDUxLjkyMDlDMTE5LjkwOSA1Mi4wOTA4IDExOS4zNjQgNTIuMTc1OCAxMTguNzQzIDUyLjE3NThaTTEyNi40NTIgNDQuNTIwNVY1MkgxMjQuMzM0VjQyLjQ5MDJIMTI2LjMyOUwxMjYuNDUyIDQ0LjUyMDVaTTEyNi4wNzQgNDYuODkzNkwxMjUuMzg4IDQ2Ljg4NDhDMTI1LjM5NCA0Ni4yMTA5IDEyNS40ODggNDUuNTkyOCAxMjUuNjcgNDUuMDMwM0MxMjUuODU3IDQ0LjQ2NzggMTI2LjExNSA0My45ODQ0IDEyNi40NDMgNDMuNTgwMUMxMjYuNzc3IDQzLjE3NTggMTI3LjE3NiA0Mi44NjUyIDEyNy42MzggNDIuNjQ4NEMxMjguMTAxIDQyLjQyNTggMTI4LjYxNyA0Mi4zMTQ1IDEyOS4xODUgNDIuMzE0NUMxMjkuNjQyIDQyLjMxNDUgMTMwLjA1NSA0Mi4zNzg5IDEzMC40MjUgNDIuNTA3OEMxMzAuOCA0Mi42MzA5IDEzMS4xMTkgNDIuODMzIDEzMS4zODMgNDMuMTE0M0MxMzEuNjUyIDQzLjM5NTUgMTMxLjg1NyA0My43NjE3IDEzMS45OTggNDQuMjEyOUMxMzIuMTM4IDQ0LjY1ODIgMTMyLjIwOSA0NS4yMDYxIDEzMi4yMDkgNDUuODU2NFY1MkgxMzAuMDgyVjQ1Ljg0NzdDMTMwLjA4MiA0NS4zOTA2IDEzMC4wMTQgNDUuMDMwMyAxMjkuODggNDQuNzY2NkMxMjkuNzUxIDQ0LjQ5NzEgMTI5LjU2IDQ0LjMwNjYgMTI5LjMwOCA0NC4xOTUzQzEyOS4wNjIgNDQuMDc4MSAxMjguNzU1IDQ0LjAxOTUgMTI4LjM4NiA0NC4wMTk1QzEyOC4wMjIgNDQuMDE5NSAxMjcuNjk3IDQ0LjA5NTcgMTI3LjQxIDQ0LjI0OEMxMjcuMTIzIDQ0LjQwMDQgMTI2Ljg4IDQ0LjYwODQgMTI2LjY4IDQ0Ljg3MjFDMTI2LjQ4NyA0NS4xMzU3IDEyNi4zMzggNDUuNDQwNCAxMjYuMjMyIDQ1Ljc4NjFDMTI2LjEyNyA0Ni4xMzE4IDEyNi4wNzQgNDYuNTAxIDEyNi4wNzQgNDYuODkzNlpNMTM4LjcxMyA1Mi4xNzU4QzEzOC4wMSA1Mi4xNzU4IDEzNy4zNzQgNTIuMDYxNSAxMzYuODA2IDUxLjgzM0MxMzYuMjQ0IDUxLjU5ODYgMTM1Ljc2MyA1MS4yNzM0IDEzNS4zNjUgNTAuODU3NEMxMzQuOTcyIDUwLjQ0MTQgMTM0LjY3IDQ5Ljk1MjEgMTM0LjQ1OSA0OS4zODk2QzEzNC4yNDggNDguODI3MSAxMzQuMTQzIDQ4LjIyMDcgMTM0LjE0MyA0Ny41NzAzVjQ3LjIxODhDMTM0LjE0MyA0Ni40NzQ2IDEzNC4yNTEgNDUuODAwOCAxMzQuNDY4IDQ1LjE5NzNDMTM0LjY4NSA0NC41OTM4IDEzNC45ODcgNDQuMDc4MSAxMzUuMzczIDQzLjY1MDRDMTM1Ljc2IDQzLjIxNjggMTM2LjIxNyA0Mi44ODU3IDEzNi43NDUgNDIuNjU3MkMxMzcuMjcyIDQyLjQyODcgMTM3Ljg0MyA0Mi4zMTQ1IDEzOC40NTggNDIuMzE0NUMxMzkuMTM4IDQyLjMxNDUgMTM5LjczMyA0Mi40Mjg3IDE0MC4yNDMgNDIuNjU3MkMxNDAuNzUyIDQyLjg4NTcgMTQxLjE3NCA0My4yMDggMTQxLjUwOCA0My42MjRDMTQxLjg0OCA0NC4wMzQyIDE0Mi4xIDQ0LjUyMzQgMTQyLjI2NCA0NS4wOTE4QzE0Mi40MzQgNDUuNjYwMiAxNDIuNTE5IDQ2LjI4NzEgMTQyLjUxOSA0Ni45NzI3VjQ3Ljg3NzlIMTM1LjE3MVY0Ni4zNTc0SDE0MC40MjdWNDYuMTkwNEMxNDAuNDE1IDQ1LjgwOTYgMTQwLjMzOSA0NS40NTIxIDE0MC4xOTkgNDUuMTE4MkMxNDAuMDY0IDQ0Ljc4NDIgMTM5Ljg1NiA0NC41MTQ2IDEzOS41NzUgNDQuMzA5NkMxMzkuMjkzIDQ0LjEwNDUgMTM4LjkxOCA0NC4wMDIgMTM4LjQ1IDQ0LjAwMkMxMzguMDk4IDQ0LjAwMiAxMzcuNzg1IDQ0LjA3ODEgMTM3LjUwOSA0NC4yMzA1QzEzNy4yNCA0NC4zNzcgMTM3LjAxNCA0NC41OTA4IDEzNi44MzIgNDQuODcyMUMxMzYuNjUxIDQ1LjE1MzMgMTM2LjUxIDQ1LjQ5MzIgMTM2LjQxMSA0NS44OTE2QzEzNi4zMTcgNDYuMjg0MiAxMzYuMjcgNDYuNzI2NiAxMzYuMjcgNDcuMjE4OFY0Ny41NzAzQzEzNi4yNyA0Ny45ODYzIDEzNi4zMjYgNDguMzczIDEzNi40MzcgNDguNzMwNUMxMzYuNTU0IDQ5LjA4MiAxMzYuNzI0IDQ5LjM4OTYgMTM2Ljk0NyA0OS42NTMzQzEzNy4xNjkgNDkuOTE3IDEzNy40MzkgNTAuMTI1IDEzNy43NTUgNTAuMjc3M0MxMzguMDcyIDUwLjQyMzggMTM4LjQzMiA1MC40OTcxIDEzOC44MzYgNTAuNDk3MUMxMzkuMzQ2IDUwLjQ5NzEgMTM5LjggNTAuMzk0NSAxNDAuMTk5IDUwLjE4OTVDMTQwLjU5NyA0OS45ODQ0IDE0MC45NDMgNDkuNjk0MyAxNDEuMjM2IDQ5LjMxOTNMMTQyLjM1MiA1MC40MDA0QzE0Mi4xNDcgNTAuNjk5MiAxNDEuODggNTAuOTg2MyAxNDEuNTUyIDUxLjI2MTdDMTQxLjIyNCA1MS41MzEyIDE0MC44MjMgNTEuNzUxIDE0MC4zNDggNTEuOTIwOUMxMzkuODc5IDUyLjA5MDggMTM5LjMzNCA1Mi4xNzU4IDEzOC43MTMgNTIuMTc1OFpNMTUwLjEyMiA1MC4wMzEyVjM4LjVIMTUyLjI0OVY1MkgxNTAuMzI0TDE1MC4xMjIgNTAuMDMxMlpNMTQzLjkzNSA0Ny4zNTA2VjQ3LjE2NkMxNDMuOTM1IDQ2LjQ0NTMgMTQ0LjAyIDQ1Ljc4OTEgMTQ0LjE4OSA0NS4xOTczQzE0NC4zNTkgNDQuNTk5NiAxNDQuNjA1IDQ0LjA4NjkgMTQ0LjkyOCA0My42NTkyQzE0NS4yNSA0My4yMjU2IDE0NS42NDMgNDIuODk0NSAxNDYuMTA1IDQyLjY2NkMxNDYuNTY4IDQyLjQzMTYgMTQ3LjA5IDQyLjMxNDUgMTQ3LjY3IDQyLjMxNDVDMTQ4LjI0NCA0Mi4zMTQ1IDE0OC43NDggNDIuNDI1OCAxNDkuMTgyIDQyLjY0ODRDMTQ5LjYxNSA0Mi44NzExIDE0OS45ODQgNDMuMTkwNCAxNTAuMjg5IDQzLjYwNjRDMTUwLjU5NCA0NC4wMTY2IDE1MC44MzcgNDQuNTA4OCAxNTEuMDE5IDQ1LjA4M0MxNTEuMiA0NS42NTE0IDE1MS4zMjkgNDYuMjg0MiAxNTEuNDA1IDQ2Ljk4MTRWNDcuNTcwM0MxNTEuMzI5IDQ4LjI1IDE1MS4yIDQ4Ljg3MTEgMTUxLjAxOSA0OS40MzM2QzE1MC44MzcgNDkuOTk2MSAxNTAuNTk0IDUwLjQ4MjQgMTUwLjI4OSA1MC44OTI2QzE0OS45ODQgNTEuMzAyNyAxNDkuNjEyIDUxLjYxOTEgMTQ5LjE3MyA1MS44NDE4QzE0OC43MzkgNTIuMDY0NSAxNDguMjMyIDUyLjE3NTggMTQ3LjY1MiA1Mi4xNzU4QzE0Ny4wNzggNTIuMTc1OCAxNDYuNTYgNTIuMDU1NyAxNDYuMDk3IDUxLjgxNTRDMTQ1LjY0IDUxLjU3NTIgMTQ1LjI1IDUxLjIzODMgMTQ0LjkyOCA1MC44MDQ3QzE0NC42MDUgNTAuMzcxMSAxNDQuMzU5IDQ5Ljg2MTMgMTQ0LjE4OSA0OS4yNzU0QzE0NC4wMiA0OC42ODM2IDE0My45MzUgNDguMDQyIDE0My45MzUgNDcuMzUwNlpNMTQ2LjA1MyA0Ny4xNjZWNDcuMzUwNkMxNDYuMDUzIDQ3Ljc4NDIgMTQ2LjA5MSA0OC4xODg1IDE0Ni4xNjcgNDguNTYzNUMxNDYuMjQ5IDQ4LjkzODUgMTQ2LjM3NSA0OS4yNjk1IDE0Ni41NDUgNDkuNTU2NkMxNDYuNzE1IDQ5LjgzNzkgMTQ2LjkzNSA1MC4wNjA1IDE0Ny4yMDQgNTAuMjI0NkMxNDcuNDc5IDUwLjM4MjggMTQ3LjgwOCA1MC40NjE5IDE0OC4xODggNTAuNDYxOUMxNDguNjY5IDUwLjQ2MTkgMTQ5LjA2NCA1MC4zNTY0IDE0OS4zNzUgNTAuMTQ1NUMxNDkuNjg2IDQ5LjkzNDYgMTQ5LjkyOSA0OS42NTA0IDE1MC4xMDQgNDkuMjkzQzE1MC4yODYgNDguOTI5NyAxNTAuNDA5IDQ4LjUyNTQgMTUwLjQ3NCA0OC4wODAxVjQ2LjQ4OTNDMTUwLjQzOCA0Ni4xNDM2IDE1MC4zNjUgNDUuODIxMyAxNTAuMjU0IDQ1LjUyMjVDMTUwLjE0OCA0NS4yMjM2IDE1MC4wMDUgNDQuOTYyOSAxNDkuODIzIDQ0Ljc0MDJDMTQ5LjY0MiA0NC41MTE3IDE0OS40MTYgNDQuMzM1OSAxNDkuMTQ2IDQ0LjIxMjlDMTQ4Ljg4MyA0NC4wODQgMTQ4LjU2OSA0NC4wMTk1IDE0OC4yMDYgNDQuMDE5NUMxNDcuODE5IDQ0LjAxOTUgMTQ3LjQ5MSA0NC4xMDE2IDE0Ny4yMjIgNDQuMjY1NkMxNDYuOTUyIDQ0LjQyOTcgMTQ2LjcyOSA0NC42NTUzIDE0Ni41NTQgNDQuOTQyNEMxNDYuMzg0IDQ1LjIyOTUgMTQ2LjI1OCA0NS41NjM1IDE0Ni4xNzYgNDUuOTQ0M0MxNDYuMDk0IDQ2LjMyNTIgMTQ2LjA1MyA0Ni43MzI0IDE0Ni4wNTMgNDcuMTY2WiIgZmlsbD0iIzE5ODAzOCIvPgo8L2c+CjxtYXNrIGlkPSJwYXRoLTYtaW5zaWRlLTFfNDY5N18zNjcxMyIgZmlsbD0id2hpdGUiPgo8cGF0aCBkPSJNOCA4OEM4IDg1Ljc5MDkgOS43OTA4NiA4NCAxMiA4NEgyMDRDMjA2LjIwOSA4NCAyMDggODUuNzkwOSAyMDggODhWMTQwQzIwOCAxNDIuMjA5IDIwNi4yMDkgMTQ0IDIwNCAxNDRIMTJDOS43OTA4NiAxNDQgOCAxNDIuMjA5IDggMTQwVjg4WiIvPgo8L21hc2s+CjxwYXRoIGQ9Ik04IDg4QzggODUuNzkwOSA5Ljc5MDg2IDg0IDEyIDg0SDIwNEMyMDYuMjA5IDg0IDIwOCA4NS43OTA5IDIwOCA4OFYxNDBDMjA4IDE0Mi4yMDkgMjA2LjIwOSAxNDQgMjA0IDE0NEgxMkM5Ljc5MDg2IDE0NCA4IDE0Mi4yMDkgOCAxNDBWODhaIiBmaWxsPSIjRDEyNzMwIi8+CjxwYXRoIGQ9Ik04IDg0SDIwOEg4Wk0yMDggMTQwQzIwOCAxNDMuMzE0IDIwNS4zMTQgMTQ2IDIwMiAxNDZIMTRDMTAuNjg2MyAxNDYgOCAxNDMuMzE0IDggMTQwQzggMTQxLjEwNSA5Ljc5MDg2IDE0MiAxMiAxNDJIMjA0QzIwNi4yMDkgMTQyIDIwOCAxNDEuMTA1IDIwOCAxNDBaTTggMTQ0Vjg0VjE0NFpNMjA4IDg0VjE0NFY4NFoiIGZpbGw9IiNEMTI3MzAiIG1hc2s9InVybCgjcGF0aC02LWluc2lkZS0xXzQ2OTdfMzY3MTMpIi8+CjxtYXNrIGlkPSJtYXNrMV80Njk3XzM2NzEzIiBzdHlsZT0ibWFzay10eXBlOmFscGhhIiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSI2NSIgeT0iMTAyIiB3aWR0aD0iMjUiIGhlaWdodD0iMjQiPgo8cmVjdCB4PSI2NS41IiB5PSIxMDIiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iI0Q5RDlEOSIvPgo8L21hc2s+CjxnIG1hc2s9InVybCgjbWFzazFfNDY5N18zNjcxMykiPgo8cGF0aCBkPSJNNzEuNSAxMjRDNzAuOTUgMTI0IDcwLjQ3OTIgMTIzLjgwNCA3MC4wODc1IDEyMy40MTNDNjkuNjk1OCAxMjMuMDIxIDY5LjUgMTIyLjU1IDY5LjUgMTIyVjExMkM2OS41IDExMS40NSA2OS42OTU4IDExMC45NzkgNzAuMDg3NSAxMTAuNTg4QzcwLjQ3OTIgMTEwLjE5NiA3MC45NSAxMTAgNzEuNSAxMTBINzIuNVYxMDhDNzIuNSAxMDYuNjE3IDcyLjk4NzUgMTA1LjQzOCA3My45NjI1IDEwNC40NjJDNzQuOTM3NSAxMDMuNDg3IDc2LjExNjcgMTAzIDc3LjUgMTAzQzc4Ljg4MzMgMTAzIDgwLjA2MjUgMTAzLjQ4NyA4MS4wMzc1IDEwNC40NjJDODIuMDEyNSAxMDUuNDM4IDgyLjUgMTA2LjYxNyA4Mi41IDEwOFYxMTBIODMuNUM4NC4wNSAxMTAgODQuNTIwOCAxMTAuMTk2IDg0LjkxMjUgMTEwLjU4OEM4NS4zMDQyIDExMC45NzkgODUuNSAxMTEuNDUgODUuNSAxMTJWMTIyQzg1LjUgMTIyLjU1IDg1LjMwNDIgMTIzLjAyMSA4NC45MTI1IDEyMy40MTNDODQuNTIwOCAxMjMuODA0IDg0LjA1IDEyNCA4My41IDEyNEg3MS41Wk03MS41IDEyMkg4My41VjExMkg3MS41VjEyMlpNNzcuNSAxMTlDNzguMDUgMTE5IDc4LjUyMDggMTE4LjgwNCA3OC45MTI1IDExOC40MTNDNzkuMzA0MiAxMTguMDIxIDc5LjUgMTE3LjU1IDc5LjUgMTE3Qzc5LjUgMTE2LjQ1IDc5LjMwNDIgMTE1Ljk3OSA3OC45MTI1IDExNS41ODhDNzguNTIwOCAxMTUuMTk2IDc4LjA1IDExNSA3Ny41IDExNUM3Ni45NSAxMTUgNzYuNDc5MiAxMTUuMTk2IDc2LjA4NzUgMTE1LjU4OEM3NS42OTU4IDExNS45NzkgNzUuNSAxMTYuNDUgNzUuNSAxMTdDNzUuNSAxMTcuNTUgNzUuNjk1OCAxMTguMDIxIDc2LjA4NzUgMTE4LjQxM0M3Ni40NzkyIDExOC44MDQgNzYuOTUgMTE5IDc3LjUgMTE5Wk03NC41IDExMEg4MC41VjEwOEM4MC41IDEwNy4xNjcgODAuMjA4MyAxMDYuNDU4IDc5LjYyNSAxMDUuODc1Qzc5LjA0MTcgMTA1LjI5MiA3OC4zMzMzIDEwNSA3Ny41IDEwNUM3Ni42NjY3IDEwNSA3NS45NTgzIDEwNS4yOTIgNzUuMzc1IDEwNS44NzVDNzQuNzkxNyAxMDYuNDU4IDc0LjUgMTA3LjE2NyA3NC41IDEwOFYxMTBaIiBmaWxsPSJ3aGl0ZSIvPgo8L2c+CjxwYXRoIGQ9Ik0xMDIuNjc2IDExNS44MzRIMTA0Ljg3M0MxMDQuODAzIDExNi42NzIgMTA0LjU2OCAxMTcuNDE5IDEwNC4xNyAxMTguMDc1QzEwMy43NzEgMTE4LjcyNiAxMDMuMjEyIDExOS4yMzggMTAyLjQ5MSAxMTkuNjEzQzEwMS43NzEgMTE5Ljk4OCAxMDAuODk1IDEyMC4xNzYgOTkuODYzMyAxMjAuMTc2Qzk5LjA3MjMgMTIwLjE3NiA5OC4zNjA0IDEyMC4wMzUgOTcuNzI3NSAxMTkuNzU0Qzk3LjA5NDcgMTE5LjQ2NyA5Ni41NTI3IDExOS4wNjIgOTYuMTAxNiAxMTguNTQxQzk1LjY1MDQgMTE4LjAxNCA5NS4zMDQ3IDExNy4zNzggOTUuMDY0NSAxMTYuNjM0Qzk0LjgzMDEgMTE1Ljg5IDk0LjcxMjkgMTE1LjA1OCA5NC43MTI5IDExNC4xMzhWMTEzLjA3NEM5NC43MTI5IDExMi4xNTQgOTQuODMzIDExMS4zMjIgOTUuMDczMiAxMTAuNTc4Qzk1LjMxOTMgMTA5LjgzNCA5NS42NzA5IDEwOS4xOTggOTYuMTI3OSAxMDguNjcxQzk2LjU4NSAxMDguMTM4IDk3LjEzMjggMTA3LjczIDk3Ljc3MTUgMTA3LjQ0OUM5OC40MTYgMTA3LjE2OCA5OS4xMzk2IDEwNy4wMjcgOTkuOTQyNCAxMDcuMDI3QzEwMC45NjIgMTA3LjAyNyAxMDEuODIzIDEwNy4yMTUgMTAyLjUyNiAxMDcuNTlDMTAzLjIyOSAxMDcuOTY1IDEwMy43NzQgMTA4LjQ4MyAxMDQuMTYxIDEwOS4xNDZDMTA0LjU1NCAxMDkuODA4IDEwNC43OTQgMTEwLjU2NiAxMDQuODgyIDExMS40MjJIMTAyLjY4NUMxMDIuNjI2IDExMC44NzEgMTAyLjQ5NyAxMTAuMzk5IDEwMi4yOTggMTEwLjAwN0MxMDIuMTA0IDEwOS42MTQgMTAxLjgxNyAxMDkuMzE1IDEwMS40MzcgMTA5LjExQzEwMS4wNTYgMTA4Ljg5OSAxMDAuNTU4IDEwOC43OTQgOTkuOTQyNCAxMDguNzk0Qzk5LjQzODUgMTA4Ljc5NCA5OC45OTkgMTA4Ljg4OCA5OC42MjQgMTA5LjA3NUM5OC4yNDkgMTA5LjI2MyA5Ny45MzU1IDEwOS41MzggOTcuNjgzNiAxMDkuOTAxQzk3LjQzMTYgMTEwLjI2NSA5Ny4yNDEyIDExMC43MTMgOTcuMTEyMyAxMTEuMjQ2Qzk2Ljk4OTMgMTExLjc3MyA5Ni45Mjc3IDExMi4zNzcgOTYuOTI3NyAxMTMuMDU3VjExNC4xMzhDOTYuOTI3NyAxMTQuNzgyIDk2Ljk4MzQgMTE1LjM2OCA5Ny4wOTQ3IDExNS44OTZDOTcuMjExOSAxMTYuNDE3IDk3LjM4NzcgMTE2Ljg2NSA5Ny42MjIxIDExNy4yNEM5Ny44NjIzIDExNy42MTUgOTguMTY3IDExNy45MDUgOTguNTM2MSAxMTguMTFDOTguOTA1MyAxMTguMzE1IDk5LjM0NzcgMTE4LjQxOCA5OS44NjMzIDExOC40MThDMTAwLjQ5IDExOC40MTggMTAwLjk5NyAxMTguMzE4IDEwMS4zODQgMTE4LjExOUMxMDEuNzc2IDExNy45MiAxMDIuMDcyIDExNy42MyAxMDIuMjcxIDExNy4yNDlDMTAyLjQ3NyAxMTYuODYyIDEwMi42MTEgMTE2LjM5MSAxMDIuNjc2IDExNS44MzRaTTEwOS4wODQgMTA2LjVWMTIwSDEwNi45NTdWMTA2LjVIMTA5LjA4NFpNMTExLjE1IDExNS4zNTFWMTE1LjE0OEMxMTEuMTUgMTE0LjQ2MyAxMTEuMjQ5IDExMy44MjcgMTExLjQ0OCAxMTMuMjQxQzExMS42NDggMTEyLjY0OSAxMTEuOTM1IDExMi4xMzcgMTEyLjMxIDExMS43MDNDMTEyLjY5MSAxMTEuMjY0IDExMy4xNTQgMTEwLjkyNCAxMTMuNjk4IDExMC42ODRDMTE0LjI0OSAxMTAuNDM4IDExNC44NyAxMTAuMzE0IDExNS41NjIgMTEwLjMxNEMxMTYuMjU5IDExMC4zMTQgMTE2Ljg4IDExMC40MzggMTE3LjQyNSAxMTAuNjg0QzExNy45NzYgMTEwLjkyNCAxMTguNDQyIDExMS4yNjQgMTE4LjgyMiAxMTEuNzAzQzExOS4yMDMgMTEyLjEzNyAxMTkuNDkzIDExMi42NDkgMTE5LjY5MyAxMTMuMjQxQzExOS44OTIgMTEzLjgyNyAxMTkuOTkxIDExNC40NjMgMTE5Ljk5MSAxMTUuMTQ4VjExNS4zNTFDMTE5Ljk5MSAxMTYuMDM2IDExOS44OTIgMTE2LjY3MiAxMTkuNjkzIDExNy4yNThDMTE5LjQ5MyAxMTcuODQ0IDExOS4yMDMgMTE4LjM1NiAxMTguODIyIDExOC43OTZDMTE4LjQ0MiAxMTkuMjI5IDExNy45NzkgMTE5LjU2OSAxMTcuNDM0IDExOS44MTVDMTE2Ljg4OSAxMjAuMDU2IDExNi4yNzEgMTIwLjE3NiAxMTUuNTc5IDEyMC4xNzZDMTE0Ljg4MiAxMjAuMTc2IDExNC4yNTggMTIwLjA1NiAxMTMuNzA3IDExOS44MTVDMTEzLjE2MiAxMTkuNTY5IDExMi42OTkgMTE5LjIyOSAxMTIuMzE5IDExOC43OTZDMTExLjkzOCAxMTguMzU2IDExMS42NDggMTE3Ljg0NCAxMTEuNDQ4IDExNy4yNThDMTExLjI0OSAxMTYuNjcyIDExMS4xNSAxMTYuMDM2IDExMS4xNSAxMTUuMzUxWk0xMTMuMjY4IDExNS4xNDhWMTE1LjM1MUMxMTMuMjY4IDExNS43NzggMTEzLjMxMiAxMTYuMTgzIDExMy40IDExNi41NjNDMTEzLjQ4NyAxMTYuOTQ0IDExMy42MjUgMTE3LjI3OCAxMTMuODEzIDExNy41NjVDMTE0IDExNy44NTMgMTE0LjI0IDExOC4wNzggMTE0LjUzMyAxMTguMjQyQzExNC44MjYgMTE4LjQwNiAxMTUuMTc1IDExOC40ODggMTE1LjU3OSAxMTguNDg4QzExNS45NzIgMTE4LjQ4OCAxMTYuMzEyIDExOC40MDYgMTE2LjU5OSAxMTguMjQyQzExNi44OTIgMTE4LjA3OCAxMTcuMTMyIDExNy44NTMgMTE3LjMyIDExNy41NjVDMTE3LjUwNyAxMTcuMjc4IDExNy42NDUgMTE2Ljk0NCAxMTcuNzMzIDExNi41NjNDMTE3LjgyNiAxMTYuMTgzIDExNy44NzMgMTE1Ljc3OCAxMTcuODczIDExNS4zNTFWMTE1LjE0OEMxMTcuODczIDExNC43MjcgMTE3LjgyNiAxMTQuMzI4IDExNy43MzMgMTEzLjk1M0MxMTcuNjQ1IDExMy41NzIgMTE3LjUwNCAxMTMuMjM1IDExNy4zMTEgMTEyLjk0MkMxMTcuMTIzIDExMi42NDkgMTE2Ljg4MyAxMTIuNDIxIDExNi41OSAxMTIuMjU3QzExNi4zMDMgMTEyLjA4NyAxMTUuOTYgMTEyLjAwMiAxMTUuNTYyIDExMi4wMDJDMTE1LjE2MyAxMTIuMDAyIDExNC44MTggMTEyLjA4NyAxMTQuNTI1IDExMi4yNTdDMTE0LjIzNyAxMTIuNDIxIDExNCAxMTIuNjQ5IDExMy44MTMgMTEyLjk0MkMxMTMuNjI1IDExMy4yMzUgMTEzLjQ4NyAxMTMuNTcyIDExMy40IDExMy45NTNDMTEzLjMxMiAxMTQuMzI4IDExMy4yNjggMTE0LjcyNyAxMTMuMjY4IDExNS4xNDhaTTEyNy4yNTIgMTE3LjQyNUMxMjcuMjUyIDExNy4yMTQgMTI3LjE5OSAxMTcuMDIzIDEyNy4wOTQgMTE2Ljg1NEMxMjYuOTg4IDExNi42NzggMTI2Ljc4NiAxMTYuNTIgMTI2LjQ4NyAxMTYuMzc5QzEyNi4xOTQgMTE2LjIzOCAxMjUuNzYxIDExNi4xMDkgMTI1LjE4NiAxMTUuOTkyQzEyNC42ODIgMTE1Ljg4MSAxMjQuMjIgMTE1Ljc0OSAxMjMuNzk4IDExNS41OTdDMTIzLjM4MiAxMTUuNDM4IDEyMy4wMjQgMTE1LjI0OCAxMjIuNzI1IDExNS4wMjVDMTIyLjQyNyAxMTQuODAzIDEyMi4xOTUgMTE0LjUzOSAxMjIuMDMxIDExNC4yMzRDMTIxLjg2NyAxMTMuOTMgMTIxLjc4NSAxMTMuNTc4IDEyMS43ODUgMTEzLjE4QzEyMS43ODUgMTEyLjc5MyAxMjEuODcgMTEyLjQyNyAxMjIuMDQgMTEyLjA4MUMxMjIuMjEgMTExLjczNSAxMjIuNDUzIDExMS40MzEgMTIyLjc2OSAxMTEuMTY3QzEyMy4wODYgMTEwLjkwMyAxMjMuNDcgMTEwLjY5NSAxMjMuOTIxIDExMC41NDNDMTI0LjM3OCAxMTAuMzkxIDEyNC44ODggMTEwLjMxNCAxMjUuNDUgMTEwLjMxNEMxMjYuMjQ3IDExMC4zMTQgMTI2LjkyOSAxMTAuNDQ5IDEyNy40OTggMTEwLjcxOUMxMjguMDcyIDExMC45ODIgMTI4LjUxMiAxMTEuMzQzIDEyOC44MTYgMTExLjhDMTI5LjEyMSAxMTIuMjUxIDEyOS4yNzMgMTEyLjc2MSAxMjkuMjczIDExMy4zMjlIMTI3LjE1NUMxMjcuMTU1IDExMy4wNzcgMTI3LjA5MSAxMTIuODQzIDEyNi45NjIgMTEyLjYyNkMxMjYuODM5IDExMi40MDMgMTI2LjY1MSAxMTIuMjI1IDEyNi4zOTkgMTEyLjA5QzEyNi4xNDcgMTExLjk0OSAxMjUuODMxIDExMS44NzkgMTI1LjQ1IDExMS44NzlDMTI1LjA4NyAxMTEuODc5IDEyNC43ODUgMTExLjkzOCAxMjQuNTQ1IDExMi4wNTVDMTI0LjMxIDExMi4xNjYgMTI0LjEzNSAxMTIuMzEyIDEyNC4wMTcgMTEyLjQ5NEMxMjMuOTA2IDExMi42NzYgMTIzLjg1IDExMi44NzUgMTIzLjg1IDExMy4wOTJDMTIzLjg1IDExMy4yNSAxMjMuODggMTEzLjM5NCAxMjMuOTM4IDExMy41MjJDMTI0LjAwMyAxMTMuNjQ2IDEyNC4xMDggMTEzLjc2IDEyNC4yNTUgMTEzLjg2NUMxMjQuNDAxIDExMy45NjUgMTI0LjYgMTE0LjA1OSAxMjQuODUyIDExNC4xNDZDMTI1LjExIDExNC4yMzQgMTI1LjQzMiAxMTQuMzE5IDEyNS44MTkgMTE0LjQwMUMxMjYuNTQ2IDExNC41NTQgMTI3LjE3IDExNC43NSAxMjcuNjkxIDExNC45OUMxMjguMjE5IDExNS4yMjUgMTI4LjYyMyAxMTUuNTI5IDEyOC45MDQgMTE1LjkwNEMxMjkuMTg1IDExNi4yNzMgMTI5LjMyNiAxMTYuNzQyIDEyOS4zMjYgMTE3LjMxMUMxMjkuMzI2IDExNy43MzIgMTI5LjIzNSAxMTguMTE5IDEyOS4wNTQgMTE4LjQ3MUMxMjguODc4IDExOC44MTYgMTI4LjYyIDExOS4xMTggMTI4LjI4IDExOS4zNzZDMTI3Ljk0IDExOS42MjggMTI3LjUzMyAxMTkuODI0IDEyNy4wNTggMTE5Ljk2NUMxMjYuNTkgMTIwLjEwNSAxMjYuMDYyIDEyMC4xNzYgMTI1LjQ3NiAxMjAuMTc2QzEyNC42MTUgMTIwLjE3NiAxMjMuODg2IDEyMC4wMjMgMTIzLjI4OCAxMTkuNzE5QzEyMi42OSAxMTkuNDA4IDEyMi4yMzYgMTE5LjAxMyAxMjEuOTI2IDExOC41MzJDMTIxLjYyMSAxMTguMDQ2IDEyMS40NjkgMTE3LjU0MiAxMjEuNDY5IDExNy4wMjFIMTIzLjUxNkMxMjMuNTQgMTE3LjQxMyAxMjMuNjQ4IDExNy43MjcgMTIzLjg0MiAxMTcuOTYxQzEyNC4wNDEgMTE4LjE4OSAxMjQuMjg3IDExOC4zNTYgMTI0LjU4IDExOC40NjJDMTI0Ljg3OSAxMTguNTYyIDEyNS4xODYgMTE4LjYxMSAxMjUuNTAzIDExOC42MTFDMTI1Ljg4NCAxMTguNjExIDEyNi4yMDMgMTE4LjU2MiAxMjYuNDYxIDExOC40NjJDMTI2LjcxOSAxMTguMzU2IDEyNi45MTUgMTE4LjIxNiAxMjcuMDUgMTE4LjA0QzEyNy4xODQgMTE3Ljg1OCAxMjcuMjUyIDExNy42NTMgMTI3LjI1MiAxMTcuNDI1Wk0xMzUuNTIzIDEyMC4xNzZDMTM0LjgyIDEyMC4xNzYgMTM0LjE4NCAxMjAuMDYyIDEzMy42MTYgMTE5LjgzM0MxMzMuMDUzIDExOS41OTkgMTMyLjU3MyAxMTkuMjczIDEzMi4xNzQgMTE4Ljg1N0MxMzEuNzgyIDExOC40NDEgMTMxLjQ4IDExNy45NTIgMTMxLjI2OSAxMTcuMzlDMTMxLjA1OCAxMTYuODI3IDEzMC45NTMgMTE2LjIyMSAxMzAuOTUzIDExNS41N1YxMTUuMjE5QzEzMC45NTMgMTE0LjQ3NSAxMzEuMDYxIDExMy44MDEgMTMxLjI3OCAxMTMuMTk3QzEzMS40OTUgMTEyLjU5NCAxMzEuNzk2IDExMi4wNzggMTMyLjE4MyAxMTEuNjVDMTMyLjU3IDExMS4yMTcgMTMzLjAyNyAxMTAuODg2IDEzMy41NTQgMTEwLjY1N0MxMzQuMDgxIDExMC40MjkgMTM0LjY1MyAxMTAuMzE0IDEzNS4yNjggMTEwLjMxNEMxMzUuOTQ4IDExMC4zMTQgMTM2LjU0MiAxMTAuNDI5IDEzNy4wNTIgMTEwLjY1N0MxMzcuNTYyIDExMC44ODYgMTM3Ljk4NCAxMTEuMjA4IDEzOC4zMTggMTExLjYyNEMxMzguNjU4IDExMi4wMzQgMTM4LjkxIDExMi41MjMgMTM5LjA3NCAxMTMuMDkyQzEzOS4yNDQgMTEzLjY2IDEzOS4zMjkgMTE0LjI4NyAxMzkuMzI5IDExNC45NzNWMTE1Ljg3OEgxMzEuOTgxVjExNC4zNTdIMTM3LjIzN1YxMTQuMTlDMTM3LjIyNSAxMTMuODEgMTM3LjE0OSAxMTMuNDUyIDEzNy4wMDggMTEzLjExOEMxMzYuODczIDExMi43ODQgMTM2LjY2NSAxMTIuNTE1IDEzNi4zODQgMTEyLjMxQzEzNi4xMDMgMTEyLjEwNCAxMzUuNzI4IDExMi4wMDIgMTM1LjI1OSAxMTIuMDAyQzEzNC45MDggMTEyLjAwMiAxMzQuNTk0IDExMi4wNzggMTM0LjMxOSAxMTIuMjNDMTM0LjA0OSAxMTIuMzc3IDEzMy44MjQgMTEyLjU5MSAxMzMuNjQyIDExMi44NzJDMTMzLjQ2IDExMy4xNTMgMTMzLjMyIDExMy40OTMgMTMzLjIyIDExMy44OTJDMTMzLjEyNiAxMTQuMjg0IDEzMy4wNzkgMTE0LjcyNyAxMzMuMDc5IDExNS4yMTlWMTE1LjU3QzEzMy4wNzkgMTE1Ljk4NiAxMzMuMTM1IDExNi4zNzMgMTMzLjI0NiAxMTYuNzNDMTMzLjM2NCAxMTcuMDgyIDEzMy41MzQgMTE3LjM5IDEzMy43NTYgMTE3LjY1M0MxMzMuOTc5IDExNy45MTcgMTM0LjI0OCAxMTguMTI1IDEzNC41NjUgMTE4LjI3N0MxMzQuODgxIDExOC40MjQgMTM1LjI0MiAxMTguNDk3IDEzNS42NDYgMTE4LjQ5N0MxMzYuMTU2IDExOC40OTcgMTM2LjYxIDExOC4zOTUgMTM3LjAwOCAxMTguMTg5QzEzNy40MDcgMTE3Ljk4NCAxMzcuNzUyIDExNy42OTQgMTM4LjA0NSAxMTcuMzE5TDEzOS4xNjIgMTE4LjRDMTM4Ljk1NiAxMTguNjk5IDEzOC42OSAxMTguOTg2IDEzOC4zNjIgMTE5LjI2MkMxMzguMDM0IDExOS41MzEgMTM3LjYzMiAxMTkuNzUxIDEzNy4xNTggMTE5LjkyMUMxMzYuNjg5IDEyMC4wOTEgMTM2LjE0NCAxMjAuMTc2IDEzNS41MjMgMTIwLjE3NlpNMTQ2LjkzMiAxMTguMDMxVjEwNi41SDE0OS4wNTlWMTIwSDE0Ny4xMzRMMTQ2LjkzMiAxMTguMDMxWk0xNDAuNzQ0IDExNS4zNTFWMTE1LjE2NkMxNDAuNzQ0IDExNC40NDUgMTQwLjgyOSAxMTMuNzg5IDE0MC45OTkgMTEzLjE5N0MxNDEuMTY5IDExMi42IDE0MS40MTUgMTEyLjA4NyAxNDEuNzM3IDExMS42NTlDMTQyLjA2IDExMS4yMjYgMTQyLjQ1MiAxMTAuODk1IDE0Mi45MTUgMTEwLjY2NkMxNDMuMzc4IDExMC40MzIgMTQzLjg5OSAxMTAuMzE0IDE0NC40NzkgMTEwLjMxNEMxNDUuMDU0IDExMC4zMTQgMTQ1LjU1OCAxMTAuNDI2IDE0NS45OTEgMTEwLjY0OEMxNDYuNDI1IDExMC44NzEgMTQ2Ljc5NCAxMTEuMTkgMTQ3LjA5OSAxMTEuNjA2QzE0Ny40MDMgMTEyLjAxNyAxNDcuNjQ2IDExMi41MDkgMTQ3LjgyOCAxMTMuMDgzQzE0OC4wMSAxMTMuNjUxIDE0OC4xMzkgMTE0LjI4NCAxNDguMjE1IDExNC45ODFWMTE1LjU3QzE0OC4xMzkgMTE2LjI1IDE0OC4wMSAxMTYuODcxIDE0Ny44MjggMTE3LjQzNEMxNDcuNjQ2IDExNy45OTYgMTQ3LjQwMyAxMTguNDgyIDE0Ny4wOTkgMTE4Ljg5M0MxNDYuNzk0IDExOS4zMDMgMTQ2LjQyMiAxMTkuNjE5IDE0NS45ODIgMTE5Ljg0MkMxNDUuNTQ5IDEyMC4wNjQgMTQ1LjA0MiAxMjAuMTc2IDE0NC40NjIgMTIwLjE3NkMxNDMuODg4IDEyMC4xNzYgMTQzLjM2OSAxMjAuMDU2IDE0Mi45MDYgMTE5LjgxNUMxNDIuNDQ5IDExOS41NzUgMTQyLjA2IDExOS4yMzggMTQxLjczNyAxMTguODA1QzE0MS40MTUgMTE4LjM3MSAxNDEuMTY5IDExNy44NjEgMTQwLjk5OSAxMTcuMjc1QzE0MC44MjkgMTE2LjY4NCAxNDAuNzQ0IDExNi4wNDIgMTQwLjc0NCAxMTUuMzUxWk0xNDIuODYyIDExNS4xNjZWMTE1LjM1MUMxNDIuODYyIDExNS43ODQgMTQyLjkgMTE2LjE4OCAxNDIuOTc3IDExNi41NjNDMTQzLjA1OSAxMTYuOTM4IDE0My4xODUgMTE3LjI3IDE0My4zNTQgMTE3LjU1N0MxNDMuNTI0IDExNy44MzggMTQzLjc0NCAxMTguMDYxIDE0NC4wMTQgMTE4LjIyNUMxNDQuMjg5IDExOC4zODMgMTQ0LjYxNyAxMTguNDYyIDE0NC45OTggMTE4LjQ2MkMxNDUuNDc5IDExOC40NjIgMTQ1Ljg3NCAxMTguMzU2IDE0Ni4xODUgMTE4LjE0NkMxNDYuNDk1IDExNy45MzUgMTQ2LjczOCAxMTcuNjUgMTQ2LjkxNCAxMTcuMjkzQzE0Ny4wOTYgMTE2LjkzIDE0Ny4yMTkgMTE2LjUyNSAxNDcuMjgzIDExNi4wOFYxMTQuNDg5QzE0Ny4yNDggMTE0LjE0NCAxNDcuMTc1IDExMy44MjEgMTQ3LjA2MyAxMTMuNTIyQzE0Ni45NTggMTEzLjIyNCAxNDYuODE0IDExMi45NjMgMTQ2LjYzMyAxMTIuNzRDMTQ2LjQ1MSAxMTIuNTEyIDE0Ni4yMjYgMTEyLjMzNiAxNDUuOTU2IDExMi4yMTNDMTQ1LjY5MiAxMTIuMDg0IDE0NS4zNzkgMTEyLjAyIDE0NS4wMTYgMTEyLjAyQzE0NC42MjkgMTEyLjAyIDE0NC4zMDEgMTEyLjEwMiAxNDQuMDMxIDExMi4yNjZDMTQzLjc2MiAxMTIuNDMgMTQzLjUzOSAxMTIuNjU1IDE0My4zNjMgMTEyLjk0MkMxNDMuMTkzIDExMy4yMjkgMTQzLjA2NyAxMTMuNTYzIDE0Mi45ODUgMTEzLjk0NEMxNDIuOTAzIDExNC4zMjUgMTQyLjg2MiAxMTQuNzMyIDE0Mi44NjIgMTE1LjE2NloiIGZpbGw9IndoaXRlIi8+CjxkZWZzPgo8ZmlsdGVyIGlkPSJmaWx0ZXIwX2RfNDY5N18zNjcxMyIgeD0iMCIgeT0iMTIiIHdpZHRoPSIyMTYiIGhlaWdodD0iNzYiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KPGZlQ29sb3JNYXRyaXggaW49IlNvdXJjZUFscGhhIiB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMTI3IDAiIHJlc3VsdD0iaGFyZEFscGhhIi8+CjxmZU9mZnNldCBkeT0iNCIvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI0Ii8+CjxmZUNvbXBvc2l0ZSBpbjI9ImhhcmRBbHBoYSIgb3BlcmF0b3I9Im91dCIvPgo8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMC4wOCAwIi8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0iZWZmZWN0MV9kcm9wU2hhZG93XzQ2OTdfMzY3MTMiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2Ryb3BTaGFkb3dfNDY5N18zNjcxMyIgcmVzdWx0PSJzaGFwZSIvPgo8L2ZpbHRlcj4KPC9kZWZzPgo8L3N2Zz4K", "description": "Sends the command to the device or updates attribute/time-series when the user toggles the button. Widget settings will enable you to configure behavior how to fetch the initial state and what to trigger when button checked/unchecked states.", "descriptor": { "type": "rpc", @@ -11,7 +11,7 @@ "resources": [], "templateHtml": "\n", "templateCss": "", - "controllerScript": "self.onInit = function() {\n self.ctx.$scope.actionWidget.onInit();\n}\n\nself.typeParameters = function() {\n return {\n previewWidth: '300px',\n previewHeight: '150px',\n embedTitlePanel: true,\n displayRpcMessageToast: false\n };\n};\n\nself.onDestroy = function() {\n}\n", + "controllerScript": "self.onInit = function() {\n self.ctx.$scope.actionWidget.onInit();\n}\n\nself.typeParameters = function() {\n return {\n previewWidth: '300px',\n previewHeight: '150px',\n embedTitlePanel: true,\n overflowVisible: true,\n displayRpcMessageToast: false\n };\n};\n\nself.onDestroy = function() {\n}\n", "settingsSchema": "", "dataKeySettingsSchema": "{}\n", "settingsDirective": "tb-toggle-button-widget-settings", diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol-widget.component.scss index d1f8b74679..5d512f6ef7 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol-widget.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol-widget.component.scss @@ -45,7 +45,6 @@ display: flex; align-items: center; justify-content: center; - fill: none; } } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts index 3eb4bb1fd3..bfc1187f8f 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts @@ -48,6 +48,8 @@ export interface ScadaSymbolApi { text: (element: Element | Element[], text: string) => void; font: (element: Element | Element[], font: Font, color: string) => void; animate: (element: Element, duration: number) => Runner; + resetAnimation: (element: Element) => void; + finishAnimation: (element: Element) => void; disable: (element: Element | Element[]) => void; enable: (element: Element | Element[]) => void; callAction: (event: Event, behaviorId: string, value?: any, observer?: Partial>) => void; @@ -480,11 +482,15 @@ export class ScadaSymbolObject { elements.item(i).remove(); } this.svgShape = SVG().svg(doc.documentElement.innerHTML); - this.svgShape.node.style.overflow = 'visible'; + this.svgShape.node.style.overflow = 'hidden'; + this.svgShape.node.style.position = 'absolute'; this.svgShape.node.style['user-select'] = 'none'; const origSvg = SVG(doc.documentElement.outerHTML); if (origSvg.type === 'svg') { this.box = (origSvg as Svg).viewbox(); + if (origSvg.fill()) { + this.svgShape.fill(origSvg.fill()); + } } else { this.box = this.svgShape.bbox(); } @@ -500,6 +506,8 @@ export class ScadaSymbolObject { text: this.setElementText.bind(this), font: this.setElementFont.bind(this), animate: this.animate.bind(this), + resetAnimation: this.resetAnimation.bind(this), + finishAnimation: this.finishAnimation.bind(this), disable: this.disableElement.bind(this), enable: this.enableElement.bind(this), callAction: this.callAction.bind(this), @@ -767,9 +775,18 @@ export class ScadaSymbolObject { } private animate(element: Element, duration: number): Runner { + this.finishAnimation(element); + return element.animate(duration, 0, 'now'); + } + + private resetAnimation(element: Element) { + element.timeline().stop(); + element.timeline(new Timeline()); + } + + private finishAnimation(element: Element) { element.timeline().finish(); element.timeline(new Timeline()); - return element.animate(duration, 0, 'now'); } private disableElement(e: Element | Element[]) { diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.scss b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.scss index f54cef5ede..05909caf90 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.scss +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.scss @@ -19,7 +19,6 @@ display: flex; align-items: center; justify-content: center; - fill: none; } .tb-scada-symbol-editor-tooltips { position: absolute; diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.models.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.models.ts index a42076a51b..70ecacf43d 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.models.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.models.ts @@ -100,9 +100,12 @@ export class ScadaSymbolEditObject { this.svgShape = SVG().svg(contentData.innerSvg); this.svgShape.node.style.overflow = 'visible'; this.svgShape.node.style['user-select'] = 'none'; - const origSvg = SVG(svgContent); + const origSvg = SVG(`${contentData.svgRootNode}\n${contentData.innerSvg}\n`); if (origSvg.type === 'svg') { this.box = (origSvg as Svg).viewbox(); + if (origSvg.fill()) { + this.svgShape.fill(origSvg.fill()); + } } else { this.box = this.svgShape.bbox(); } @@ -415,7 +418,12 @@ export class ScadaSymbolEditObject { const hasBBox = (e: Element): boolean => { try { if (e.bbox) { - const box = e.bbox(); + let box = e.bbox(); + if (!box.width && !box.height && !e.visible()) { + e.show(); + box = e.bbox(); + e.hide(); + } return !!box.width || !!box.height; } else { return false; @@ -425,13 +433,6 @@ const hasBBox = (e: Element): boolean => { } }; -/*const isDomRectContained = (target: DOMRect, container: DOMRect, horizontalGap = 0, verticalGap = 0): boolean => ( - target.left >= container.left - horizontalGap && - target.left + target.width <= container.left + container.width + horizontalGap && - target.top >= container.top - verticalGap && - target.top + target.height <= container.top + container.height + verticalGap -);*/ - const elementTooltipMinHeight = 36 + 8; const elementTooltipMinWidth = 100; @@ -443,6 +444,8 @@ export class ScadaSymbolElement { private highlightRect: Rect; private highlightRectTimeline: Timeline; + private elementPlaceholder: Rect; + public tooltip: ITooltipsterInstance; public tag: string; @@ -456,6 +459,8 @@ export class ScadaSymbolElement { private highlighted = false; + public invisible = false; + private tooltipMouseX: number; private tooltipMouseY: number; @@ -463,13 +468,37 @@ export class ScadaSymbolElement { return this.editObject.readonly; } + get activeElement(): Element { + return this.invisible ? this.elementPlaceholder : this.element; + } + constructor(private editObject: ScadaSymbolEditObject, public element: Element) { this.tag = element.attr('tb:tag'); - this.box = element.rbox(this.editObject.svgShape); + if (element.visible()) { + this.box = element.rbox(this.editObject.svgShape); + } else { + element.show(); + this.box = element.rbox(this.editObject.svgShape); + element.hide(); + this.invisible = true; + } } public init() { + if (this.invisible) { + this.elementPlaceholder = this.editObject.svgShape + .rect(this.box.width, this.box.height) + .x(this.box.x) + .y(this.box.y) + .attr({ + 'tb:inner': true, + fill: 'none', + stroke: 'rgba(0, 0, 0, 0.58)', + 'stroke-width': this.unscaled(4), + opacity: 1}); + this.element.after(this.elementPlaceholder); + } if (this.isGroup()) { this.highlightRect = this.editObject.svgShape @@ -488,12 +517,12 @@ export class ScadaSymbolElement { this.highlightRect.timeline(this.highlightRectTimeline); this.highlightRect.hide(); } else { - this.element.addClass('tb-element'); + this.activeElement.addClass('tb-element'); } - this.element.on('mouseenter', (_event) => { + this.activeElement.on('mouseenter', (_event) => { this.highlight(); }); - this.element.on('mouseleave', (_event) => { + this.activeElement.on('mouseleave', (_event) => { this.unhighlight(); }); if (this.hasTag()) { @@ -524,7 +553,7 @@ export class ScadaSymbolElement { this.highlightRect.show(); this.highlightRect.animate(300).attr({opacity: 1}); } else { - this.element.addClass('hovered'); + this.activeElement.addClass('hovered'); } if (this.hasTag()) { this.tooltip.reposition(); @@ -542,7 +571,7 @@ export class ScadaSymbolElement { this.highlightRect.hide(); }); } else { - this.element.removeClass('hovered'); + this.activeElement.removeClass('hovered'); } if (this.hasTag() && !this.editing) { $(this.tooltip.elementTooltip()).removeClass('tb-active'); @@ -668,7 +697,7 @@ export class ScadaSymbolElement { } private createTagTooltip() { - const el = $(this.element.node); + const el = $(this.activeElement.node); el.tooltipster( { parent: this.tooltipContainer, @@ -706,7 +735,7 @@ export class ScadaSymbolElement { } private createAddTagTooltip() { - const el = $(this.element.node); + const el = $(this.activeElement.node); el.tooltipster( { parent: this.tooltipContainer, @@ -930,8 +959,8 @@ export const generalStateRenderFunctionCompletions = (ctxCompletion: TbEditorCom ctx: ctxCompletion, svg: { meta: 'argument', - type: 'Svg', - description: 'A root svg node. Instance of SVG.Svg.' + type: 'SVG.Svg', + description: 'A root svg node. Instance of SVG.Svg.' } }); @@ -940,8 +969,10 @@ export const elementStateRenderFunctionCompletions = (ctxCompletion: TbEditorCom element: { meta: 'argument', type: 'Element', - description: 'An SVG element.' - }, + description: 'SVG element.
' + + 'See Manipulating section to manipulate the element.
' + + 'See Animating section to animate the element.' + } }); export const clickActionFunctionCompletions = (ctxCompletion: TbEditorCompletion): TbEditorCompletions => { @@ -959,7 +990,7 @@ export const scadaSymbolContextCompletion = (metadata: ScadaSymbolMetadata, tags const properties: TbEditorCompletion = { meta: 'object', type: 'object', - description: 'An object holding all defined SVG object properties.', + description: 'An object holding all defined SCADA symbol properties.', children: {} }; for (const property of metadata.properties) { @@ -968,7 +999,7 @@ export const scadaSymbolContextCompletion = (metadata: ScadaSymbolMetadata, tags const values: TbEditorCompletion = { meta: 'object', type: 'object', - description: 'An object holding all values obtained using behaviors of type \'Value\'', + description: 'An object holding all values obtained using behaviors of type "Value"', children: {} }; const getValues = metadata.behavior.filter(b => b.type === ScadaSymbolBehaviorType.value); @@ -993,16 +1024,16 @@ export const scadaSymbolContextCompletion = (metadata: ScadaSymbolMetadata, tags return { meta: 'argument', type: 'ScadaSymbolContext', - description: 'Context of svg object.', + description: 'Context of the SCADA symbol.', children: { api: { meta: 'object', type: 'ScadaSymbolApi', - description: 'Svg object API', + description: 'SCADA symbol API', children: { animate: { meta: 'function', - description: 'Animate SVG element', + description: 'Finishes any previous animation and starts new animation for SVG element.', args: [ { name: 'element', @@ -1017,8 +1048,101 @@ export const scadaSymbolContextCompletion = (metadata: ScadaSymbolMetadata, tags ], return: { description: 'Instance of SVG.Runner which has the same methods as any element and additional methods to control the runner.', - type: 'SVG.Runner' + type: 'SVG.Runner' + } + }, + resetAnimation: { + meta: 'function', + description: 'Stops animation if any and restore SVG element initial state, resets animation timeline.', + args: [ + { + name: 'element', + description: 'SVG element', + type: 'Element' + }, + ] + }, + finishAnimation: { + meta: 'function', + description: 'Finishes animation if any, SVG element state updated according to the end animation values, ' + + 'resets animation timeline.', + args: [ + { + name: 'element', + description: 'SVG element', + type: 'Element' + }, + ] + }, + formatValue: { + meta: 'function', + description: 'Formats numeric value according to specified decimals and units', + args: [ + { + name: 'value', + description: 'Numeric value to be formatted', + type: 'any' + }, + { + name: 'dec', + description: 'Number of decimal digits', + type: 'number', + optional: true + }, + { + name: 'units', + description: 'Units to append to the formatted value', + type: 'string', + optional: true + }, + { + name: 'showZeroDecimals', + description: 'Whether to keep zero decimal digits', + type: 'boolean', + optional: true + } + ], + return: { + type: 'string', + description: 'Formatted value' } + }, + text: { + meta: 'function', + description: 'Set text to element(s). Only applicable for elements of type ' + + 'SVG.Text or ' + + 'SVG.Tspan.', + args: [] + }, + font: { + meta: 'function', + description: 'Set element(s) text font and color. Only applicable for elements of type ' + + 'SVG.Text or ' + + 'SVG.Tspan.', + args: [] + }, + disable: { + meta: 'function', + description: 'Disables element(s). Disabled element doesn\'t accept any user interaction. ' + + 'For ex. if disabled element has click action, no click action will be performed on user click.', + args: [] + }, + enable: { + meta: 'function', + description: 'Enables disabled element(s). Enabled element accepts user interaction. ' + + 'For ex. if element has click action, click action will be performed on user click.', + args: [] + }, + callAction: { + meta: 'function', + description: 'Invokes action specified by behavior of type "Action" found by behaviorId.', + args: [] + }, + setValue: { + meta: 'function', + description: 'Updates value by valueId. See ctx.values for reference. ' + + 'Value update triggers all render functions.', + args: [] } } }, diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts index d1b9278816..ef811e9746 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts @@ -58,7 +58,7 @@ abstract class ScadaSymbolPanelComponent implements AfterViewInit { @Component({ template: `
- {{ symbolElement?.element?.type }}: + {{ symbolElement?.element?.type }}{{ symbolElement?.invisible ? ' (' + ('scada.hidden' | translate) + ')' : '' }}
-
- - +
+
+ + +
+
+ +
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.scss b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.scss index 05909caf90..c400a32fef 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.scss +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.scss @@ -35,6 +35,21 @@ justify-content: space-between; align-items: flex-start; + .tb-primary-fill { + background: #fff; + border-radius: 50%; + &:before { + opacity: 0.1; + } + } + + .tb-scada-symbol-editor-view-buttons { + display: flex; + flex-direction: column; + gap: 8px; + z-index: 101; + } + .tb-scada-symbol-editor-zoom-buttons { display: flex; flex-direction: column; @@ -42,6 +57,7 @@ background: #fff; border-radius: 24px; &.tb-primary-fill { + border-radius: 24px; &:before { opacity: 0.1; } @@ -53,13 +69,6 @@ flex-direction: row; gap: 8px; z-index: 101; - .tb-primary-fill { - background: #fff; - border-radius: 50%; - &:before { - opacity: 0.1; - } - } } } diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts index 653aa8a9cb..9228c3e561 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts @@ -15,19 +15,24 @@ /// import { - AfterViewInit, ChangeDetectorRef, + AfterViewInit, + ChangeDetectorRef, Component, - ElementRef, EventEmitter, + ElementRef, + EventEmitter, Input, OnChanges, OnDestroy, - OnInit, Output, + OnInit, + Output, SimpleChanges, ViewChild, - ViewContainerRef, ViewEncapsulation } from '@angular/core'; -import { ScadaSymbolEditObject, ScadaSymbolEditObjectCallbacks } from '@home/pages/scada-symbol/scada-symbol-editor.models'; +import { + ScadaSymbolEditObject, + ScadaSymbolEditObjectCallbacks +} from '@home/pages/scada-symbol/scada-symbol-editor.models'; import { TbAnchorComponent } from '@shared/components/tb-anchor.component'; export interface ScadaSymbolEditorData { @@ -71,6 +76,14 @@ export class ScadaSymbolEditorComponent implements OnInit, OnDestroy, AfterViewI zoomInDisabled = false; zoomOutDisabled = false; + @Input() + showHiddenElements = false; + + @Output() + showHiddenElementsChange = new EventEmitter(); + + displayShowHidden = false; + constructor(private cd: ChangeDetectorRef) { } @@ -81,6 +94,13 @@ export class ScadaSymbolEditorComponent implements OnInit, OnDestroy, AfterViewI this.editObjectCallbacks.onZoom = () => { this.updateZoomButtonsState(); }; + this.editObjectCallbacks.hasHiddenElements = (hasHidden) => { + this.displayShowHidden = hasHidden; + if (hasHidden) { + this.scadaSymbolEditObject.showHiddenElements(this.showHiddenElements); + } + this.cd.markForCheck(); + }; this.scadaSymbolEditObject = new ScadaSymbolEditObject(this.scadaSymbolShape.nativeElement, this.tooltipsContainer.nativeElement, this.tooltipsContainerComponent.viewContainerRef, this.editObjectCallbacks, this.readonly); @@ -122,7 +142,14 @@ export class ScadaSymbolEditorComponent implements OnInit, OnDestroy, AfterViewI this.scadaSymbolEditObject.zoomOut(); } + toggleShowHidden() { + this.showHiddenElements = !this.showHiddenElements; + this.showHiddenElementsChange.emit(this.showHiddenElements); + this.scadaSymbolEditObject.showHiddenElements(this.showHiddenElements); + } + private updateContent(content: string) { + this.displayShowHidden = false; this.scadaSymbolEditObject.setContent(content); setTimeout(() => { this.updateZoomButtonsState(); diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.models.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.models.ts index 70ecacf43d..5ddec8b1a9 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.models.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.models.ts @@ -52,6 +52,7 @@ export interface ScadaSymbolEditObjectCallbacks { editTagStateRenderFunction: (tag: string) => void; editTagClickAction: (tag: string) => void; tagsUpdated: (tags: string[]) => void; + hasHiddenElements?: (hasHidden: boolean) => void; onSymbolEditObjectDirty: (dirty: boolean) => void; onZoom?: () => void; } @@ -68,6 +69,7 @@ export class ScadaSymbolEditObject { private readonly shapeResize$: ResizeObserver; private performSetup = false; private hoverFilterStyle: Style; + private showHidden = false; public scale = 1; public tags: string[] = []; @@ -95,6 +97,7 @@ export class ScadaSymbolEditObject { this.svgShape.remove(); } this.scale = 1; + this.showHidden = false; const contentData = scadaSymbolContentData(svgContent); this.svgRootNodePart = contentData.svgRootNode; this.svgShape = SVG().svg(contentData.innerSvg); @@ -121,6 +124,7 @@ export class ScadaSymbolEditObject { public getContent(): string { if (this.svgShape) { + this.elements.forEach(e => e.restoreOrigVisibility()); const svgContent = this.svgShape.svg((e: Element) => { if (e.node.hasAttribute('tb:inner')) { return false; @@ -132,6 +136,7 @@ export class ScadaSymbolEditObject { e.attr('svgjs:data', null); } }, false); + this.showHiddenElements(this.showHidden); return `${this.svgRootNodePart}\n${svgContent}\n`; } else { return null; @@ -152,6 +157,11 @@ export class ScadaSymbolEditObject { this.zoomAnimate(level); } + public showHiddenElements(show: boolean) { + this.showHidden = show; + this.elements.forEach(e => show ? e.showInvisible() : e.hideInvisible()); + } + private zoomAnimate(level: number, animationMs = 200) { if (level !== this.svgShape.zoom()) { this.hideTooltips(); @@ -294,15 +304,20 @@ export class ScadaSymbolEditObject { el.init(); } this.updateTags(); + const hasHidden = this.elements.some(e => e.invisible); + if (this.callbacks.hasHiddenElements) { + this.callbacks.hasHiddenElements(hasHidden); + } } - private addElement(e: Element) { + private addElement(e: Element, parentInvisible = false) { if (hasBBox(e)) { - const scadaSymbolElement = new ScadaSymbolElement(this, e); + const invisible = parentInvisible || !e.visible(); + const scadaSymbolElement = new ScadaSymbolElement(this, e, invisible); this.elements.push(scadaSymbolElement); e.children().forEach(child => { if (!(child.type === 'tspan' && e.type === 'text')) { - this.addElement(child); + this.addElement(child, invisible); } }, true); } @@ -444,8 +459,6 @@ export class ScadaSymbolElement { private highlightRect: Rect; private highlightRectTimeline: Timeline; - private elementPlaceholder: Rect; - public tooltip: ITooltipsterInstance; public tag: string; @@ -459,46 +472,38 @@ export class ScadaSymbolElement { private highlighted = false; - public invisible = false; - private tooltipMouseX: number; private tooltipMouseY: number; + private origVisibility = true; + get readonly(): boolean { return this.editObject.readonly; } - get activeElement(): Element { - return this.invisible ? this.elementPlaceholder : this.element; - } - constructor(private editObject: ScadaSymbolEditObject, - public element: Element) { + public element: Element, + public invisible = false) { this.tag = element.attr('tb:tag'); - if (element.visible()) { + this.origVisibility = element.visible(); + if (this.invisible) { + element.show(); + } + this.box = element.rbox(this.editObject.svgShape); +/* if (element.visible()) { this.box = element.rbox(this.editObject.svgShape); + if (parentGroup && parentGroup.invisible) { + this.invisible = true; + } } else { element.show(); this.box = element.rbox(this.editObject.svgShape); element.hide(); this.invisible = true; - } + }*/ } public init() { - if (this.invisible) { - this.elementPlaceholder = this.editObject.svgShape - .rect(this.box.width, this.box.height) - .x(this.box.x) - .y(this.box.y) - .attr({ - 'tb:inner': true, - fill: 'none', - stroke: 'rgba(0, 0, 0, 0.58)', - 'stroke-width': this.unscaled(4), - opacity: 1}); - this.element.after(this.elementPlaceholder); - } if (this.isGroup()) { this.highlightRect = this.editObject.svgShape @@ -517,14 +522,21 @@ export class ScadaSymbolElement { this.highlightRect.timeline(this.highlightRectTimeline); this.highlightRect.hide(); } else { - this.activeElement.addClass('tb-element'); + this.element.addClass('tb-element'); } - this.activeElement.on('mouseenter', (_event) => { + this.element.on('mouseenter', (_event) => { this.highlight(); }); - this.activeElement.on('mouseleave', (_event) => { + this.element.on('mouseleave', (_event) => { this.unhighlight(); }); + if (!this.invisible) { + this.setupTooltips(); + } + this.hideInvisible(); + } + + private setupTooltips() { if (this.hasTag()) { this.createTagTooltip(); } else if (!this.readonly) { @@ -532,6 +544,33 @@ export class ScadaSymbolElement { } } + public showInvisible() { + if (this.invisible) { + this.element.show(); + if (!this.tooltip) { + this.setupTooltips(); + } + } + } + + public hideInvisible() { + if (this.invisible) { + this.element.hide(); + if (this.tooltip) { + this.tooltip.destroy(); + this.tooltip = null; + } + } + } + + public restoreOrigVisibility() { + if (this.origVisibility) { + this.element.show(); + } else { + this.element.hide(); + } + } + public overlappingCenters(otherElement: ScadaSymbolElement): boolean { if (this.isGroup() || otherElement.isGroup()) { return false; @@ -553,7 +592,7 @@ export class ScadaSymbolElement { this.highlightRect.show(); this.highlightRect.animate(300).attr({opacity: 1}); } else { - this.activeElement.addClass('hovered'); + this.element.addClass('hovered'); } if (this.hasTag()) { this.tooltip.reposition(); @@ -571,7 +610,7 @@ export class ScadaSymbolElement { this.highlightRect.hide(); }); } else { - this.activeElement.removeClass('hovered'); + this.element.removeClass('hovered'); } if (this.hasTag() && !this.editing) { $(this.tooltip.elementTooltip()).removeClass('tb-active'); @@ -697,7 +736,7 @@ export class ScadaSymbolElement { } private createTagTooltip() { - const el = $(this.activeElement.node); + const el = $(this.element.node); el.tooltipster( { parent: this.tooltipContainer, @@ -716,7 +755,6 @@ export class ScadaSymbolElement { this.innerTagTooltipPosition(instance, helper, position), functionReady: (_instance, helper) => { const tooltipEl = $(helper.tooltip); - // tooltipEl.detach().appendTo($(this.editObject.tooltipsContainer)); tooltipEl.on('mouseenter', () => { this.highlight(); }); @@ -735,7 +773,7 @@ export class ScadaSymbolElement { } private createAddTagTooltip() { - const el = $(this.activeElement.node); + const el = $(this.element.node); el.tooltipster( { parent: this.tooltipContainer, @@ -919,6 +957,10 @@ const scadaSymbolCtxPropertyHighlightRules: TbHighlightRule[] = [ class: 'scada-symbol-ctx-api', regex: /(?<=ctx\.)(api)\b/ }, + { + class: 'scada-symbol-ctx-svg', + regex: /(?<=ctx\.)(svg)\b/ + }, { class: 'scada-symbol-ctx-property', regex: /(?<=ctx\.properties\.)([a-zA-Z$_\u00a1-\uffff][a-zA-Z\d$_\u00a1-\uffff]*)\b/ @@ -934,6 +976,10 @@ const scadaSymbolCtxPropertyHighlightRules: TbHighlightRule[] = [ { class: 'scada-symbol-ctx-api-method', regex: /(?<=ctx\.api\.)([a-zA-Z$_\u00a1-\uffff][a-zA-Z\d$_\u00a1-\uffff]*)\b/ + }, + { + class: 'scada-symbol-ctx-svg-method', + regex: /(?<=ctx\.svg\.)([a-zA-Z$_\u00a1-\uffff][a-zA-Z\d$_\u00a1-\uffff]*)\b/ } ]; @@ -1074,6 +1120,15 @@ export const scadaSymbolContextCompletion = (metadata: ScadaSymbolMetadata, tags }, ] }, + generateElementId: { + meta: 'function', + description: 'Generates new unique element id.', + args: [], + return: { + type: 'string', + description: 'Newly generated element id.' + } + }, formatValue: { meta: 'function', description: 'Formats numeric value according to specified decimals and units', @@ -1148,7 +1203,12 @@ export const scadaSymbolContextCompletion = (metadata: ScadaSymbolMetadata, tags }, properties, values, - tags: tagsCompletions + tags: tagsCompletions, + svg: { + meta: 'argument', + type: 'SVG.Svg', + description: 'A root svg node. Instance of SVG.Svg.' + } } }; }; diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html index 72792c835c..3c613ed7ff 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html @@ -120,6 +120,7 @@