IrynaMatveieva
1 year ago
116 changed files with 3303 additions and 351 deletions
@ -0,0 +1,156 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2025 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.service.edge; |
||||
|
|
||||
|
import lombok.extern.slf4j.Slf4j; |
||||
|
import org.junit.jupiter.api.Assertions; |
||||
|
import org.junit.jupiter.api.BeforeAll; |
||||
|
import org.junit.jupiter.api.DisplayName; |
||||
|
import org.junit.jupiter.api.TestInstance; |
||||
|
import org.junit.jupiter.params.ParameterizedTest; |
||||
|
import org.junit.jupiter.params.provider.MethodSource; |
||||
|
import org.thingsboard.common.util.JacksonUtil; |
||||
|
import org.thingsboard.rule.engine.action.TbSaveToCustomCassandraTableNode; |
||||
|
import org.thingsboard.rule.engine.api.NodeConfiguration; |
||||
|
import org.thingsboard.rule.engine.api.TbNode; |
||||
|
import org.thingsboard.rule.engine.aws.lambda.TbAwsLambdaNode; |
||||
|
import org.thingsboard.rule.engine.filter.TbCheckRelationNode; |
||||
|
import org.thingsboard.rule.engine.flow.TbAckNode; |
||||
|
import org.thingsboard.rule.engine.math.TbMathNode; |
||||
|
import org.thingsboard.rule.engine.metadata.CalculateDeltaNode; |
||||
|
import org.thingsboard.rule.engine.metadata.TbGetTelemetryNode; |
||||
|
import org.thingsboard.rule.engine.rest.TbSendRestApiCallReplyNode; |
||||
|
import org.thingsboard.rule.engine.telemetry.TbMsgAttributesNode; |
||||
|
import org.thingsboard.rule.engine.telemetry.TbMsgTimeseriesNode; |
||||
|
import org.thingsboard.server.common.data.rule.RuleChainMetaData; |
||||
|
import org.thingsboard.server.common.data.rule.RuleNode; |
||||
|
import org.thingsboard.server.gen.edge.v1.EdgeVersion; |
||||
|
import org.thingsboard.server.gen.edge.v1.UpdateMsgType; |
||||
|
|
||||
|
import java.lang.reflect.Constructor; |
||||
|
import java.util.List; |
||||
|
import java.util.Optional; |
||||
|
import java.util.stream.Stream; |
||||
|
|
||||
|
import static org.thingsboard.server.service.edge.EdgeMsgConstructorUtils.EXCLUDED_NODES_BY_EDGE_VERSION; |
||||
|
import static org.thingsboard.server.service.edge.EdgeMsgConstructorUtils.IGNORED_PARAMS_BY_EDGE_VERSION; |
||||
|
|
||||
|
@Slf4j |
||||
|
@TestInstance(TestInstance.Lifecycle.PER_CLASS) |
||||
|
public class EdgeMsgConstructorUtilsTest { |
||||
|
|
||||
|
private static final int CONFIGURATION_VERSION = 5; |
||||
|
|
||||
|
static Stream<EdgeVersion> provideEdgeVersions() { |
||||
|
return Stream.of( |
||||
|
EdgeVersion.V_4_0_0, |
||||
|
EdgeVersion.V_3_9_0, |
||||
|
EdgeVersion.V_3_8_0, |
||||
|
EdgeVersion.V_3_7_0 |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
private static final RuleChainMetaData RULE_CHAIN_META_DATA = new RuleChainMetaData(); |
||||
|
private static final List<TbNode> TEST_NODES = |
||||
|
List.of( |
||||
|
new TbSaveToCustomCassandraTableNode(), |
||||
|
new TbMsgAttributesNode(), |
||||
|
new TbMsgTimeseriesNode(), |
||||
|
new TbSendRestApiCallReplyNode(), |
||||
|
new TbAwsLambdaNode(), |
||||
|
|
||||
|
new TbMathNode(), |
||||
|
new CalculateDeltaNode(), |
||||
|
new TbAckNode(), |
||||
|
new TbCheckRelationNode(), |
||||
|
new TbGetTelemetryNode() |
||||
|
); |
||||
|
|
||||
|
@BeforeAll |
||||
|
static void setUp() { |
||||
|
List<RuleNode> ruleNodes = TEST_NODES.stream() |
||||
|
.map(node -> { |
||||
|
RuleNode ruleNode = new RuleNode(); |
||||
|
ruleNode.setName(node.getClass().getName()); |
||||
|
ruleNode.setType(node.getClass().getName()); |
||||
|
ruleNode.setConfigurationVersion(CONFIGURATION_VERSION); |
||||
|
ruleNode.setConfiguration(JacksonUtil.valueToTree(createDefaultConfiguration(node))); |
||||
|
return ruleNode; |
||||
|
}) |
||||
|
.toList(); |
||||
|
|
||||
|
RULE_CHAIN_META_DATA.setFirstNodeIndex(0); |
||||
|
RULE_CHAIN_META_DATA.setNodes(ruleNodes); |
||||
|
} |
||||
|
|
||||
|
private static NodeConfiguration<?> createDefaultConfiguration(TbNode node) { |
||||
|
try { |
||||
|
org.thingsboard.rule.engine.api.RuleNode annotation = node.getClass().getAnnotation(org.thingsboard.rule.engine.api.RuleNode.class); |
||||
|
Constructor<?> constructor = annotation.configClazz().getConstructor(); |
||||
|
NodeConfiguration<?> configInstance = (NodeConfiguration<?>) constructor.newInstance(); |
||||
|
|
||||
|
return configInstance.defaultConfiguration(); |
||||
|
} catch (Exception e) { |
||||
|
throw new RuntimeException("Exception during creating RuleNodeConfiguration for node - " + node, e); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@ParameterizedTest(name = "Test Sanitize Metadata For Edge: {0}") |
||||
|
@MethodSource("provideEdgeVersions") |
||||
|
@DisplayName("Test Sanitize Metadata For Legacy Edge Version") |
||||
|
public void testSanitizeMetadataForLegacyEdgeVersion(EdgeVersion edgeVersion) { |
||||
|
// WHEN
|
||||
|
List<RuleNode> ruleNodes = sanitizeMetadataForLegacyEdgeVersion(edgeVersion); |
||||
|
|
||||
|
// THEN
|
||||
|
ruleNodes.forEach(ruleNode -> { |
||||
|
checkUpdateNodeConfigurationsForLegacyEdge(ruleNode, edgeVersion); |
||||
|
checkRemoveExcludedNodesForLegacyEdge(ruleNode, edgeVersion); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
private List<RuleNode> sanitizeMetadataForLegacyEdgeVersion(EdgeVersion edgeVersion) { |
||||
|
String metadataUpdateMsg = EdgeMsgConstructorUtils.constructRuleChainMetadataUpdatedMsg( |
||||
|
UpdateMsgType.ENTITY_CREATED_RPC_MESSAGE, |
||||
|
RULE_CHAIN_META_DATA, |
||||
|
edgeVersion |
||||
|
).getEntity(); |
||||
|
|
||||
|
RuleChainMetaData updatedMetaData = JacksonUtil.fromString(metadataUpdateMsg, RuleChainMetaData.class, true); |
||||
|
Assertions.assertNotNull(updatedMetaData, "RuleChainMetaData should not be null after update."); |
||||
|
|
||||
|
return updatedMetaData.getNodes(); |
||||
|
} |
||||
|
|
||||
|
private void checkUpdateNodeConfigurationsForLegacyEdge(RuleNode ruleNode, EdgeVersion edgeVersion) { |
||||
|
if (IGNORED_PARAMS_BY_EDGE_VERSION.containsKey(edgeVersion) && IGNORED_PARAMS_BY_EDGE_VERSION.get(edgeVersion).containsKey(ruleNode.getType())) { |
||||
|
String ignoredParam = IGNORED_PARAMS_BY_EDGE_VERSION.get(edgeVersion).get(ruleNode.getType()); |
||||
|
|
||||
|
Assertions.assertFalse(ruleNode.getConfiguration().has(ignoredParam), |
||||
|
String.format("RuleNode '%s' for EdgeVersion '%s' should ignore '%s' config parameter.", ruleNode.getName(), edgeVersion, ignoredParam)); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private void checkRemoveExcludedNodesForLegacyEdge(RuleNode ruleNode, EdgeVersion edgeVersion) { |
||||
|
boolean isNodeExcluded = Optional.ofNullable(EXCLUDED_NODES_BY_EDGE_VERSION.get(edgeVersion)) |
||||
|
.map(excludedNodes -> !excludedNodes.contains(ruleNode.getType())) |
||||
|
.orElse(true); |
||||
|
|
||||
|
Assertions.assertTrue(isNodeExcluded, |
||||
|
String.format("For EdgeVersion '%s', ruleNode '%s' should not be included.", edgeVersion, ruleNode.getType())); |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,78 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2025 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.common.util; |
||||
|
|
||||
|
import net.objecthunter.exp4j.function.Function; |
||||
|
import net.objecthunter.exp4j.function.Functions; |
||||
|
|
||||
|
import java.util.ArrayList; |
||||
|
import java.util.List; |
||||
|
|
||||
|
public class ExpressionFunctionsUtil { |
||||
|
|
||||
|
public static final List<Function> userDefinedFunctions = new ArrayList<>(); |
||||
|
|
||||
|
static { |
||||
|
userDefinedFunctions.add( |
||||
|
new Function("ln") { |
||||
|
@Override |
||||
|
public double apply(double... args) { |
||||
|
return Math.log(args[0]); |
||||
|
} |
||||
|
} |
||||
|
); |
||||
|
userDefinedFunctions.add( |
||||
|
new Function("lg") { |
||||
|
@Override |
||||
|
public double apply(double... args) { |
||||
|
return Math.log10(args[0]); |
||||
|
} |
||||
|
} |
||||
|
); |
||||
|
userDefinedFunctions.add( |
||||
|
new Function("logab", 2) { |
||||
|
@Override |
||||
|
public double apply(double... args) { |
||||
|
return Math.log(args[1]) / Math.log(args[0]); |
||||
|
} |
||||
|
} |
||||
|
); |
||||
|
userDefinedFunctions.add(Functions.getBuiltinFunction("sin")); |
||||
|
userDefinedFunctions.add(Functions.getBuiltinFunction("cos")); |
||||
|
userDefinedFunctions.add(Functions.getBuiltinFunction("tan")); |
||||
|
userDefinedFunctions.add(Functions.getBuiltinFunction("cot")); |
||||
|
userDefinedFunctions.add(Functions.getBuiltinFunction("log")); |
||||
|
userDefinedFunctions.add(Functions.getBuiltinFunction("log2")); |
||||
|
userDefinedFunctions.add(Functions.getBuiltinFunction("log10")); |
||||
|
userDefinedFunctions.add(Functions.getBuiltinFunction("log1p")); |
||||
|
userDefinedFunctions.add(Functions.getBuiltinFunction("abs")); |
||||
|
userDefinedFunctions.add(Functions.getBuiltinFunction("acos")); |
||||
|
userDefinedFunctions.add(Functions.getBuiltinFunction("asin")); |
||||
|
userDefinedFunctions.add(Functions.getBuiltinFunction("atan")); |
||||
|
userDefinedFunctions.add(Functions.getBuiltinFunction("cbrt")); |
||||
|
userDefinedFunctions.add(Functions.getBuiltinFunction("floor")); |
||||
|
userDefinedFunctions.add(Functions.getBuiltinFunction("sinh")); |
||||
|
userDefinedFunctions.add(Functions.getBuiltinFunction("sqrt")); |
||||
|
userDefinedFunctions.add(Functions.getBuiltinFunction("tanh")); |
||||
|
userDefinedFunctions.add(Functions.getBuiltinFunction("cosh")); |
||||
|
userDefinedFunctions.add(Functions.getBuiltinFunction("ceil")); |
||||
|
userDefinedFunctions.add(Functions.getBuiltinFunction("pow")); |
||||
|
userDefinedFunctions.add(Functions.getBuiltinFunction("exp")); |
||||
|
userDefinedFunctions.add(Functions.getBuiltinFunction("expm1")); |
||||
|
userDefinedFunctions.add(Functions.getBuiltinFunction("signum")); |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,43 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2025 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; |
||||
|
|
||||
|
import jakarta.annotation.PostConstruct; |
||||
|
import lombok.RequiredArgsConstructor; |
||||
|
import lombok.extern.slf4j.Slf4j; |
||||
|
import org.springframework.beans.factory.annotation.Value; |
||||
|
import org.springframework.jdbc.core.namedparam.NamedParameterJdbcTemplate; |
||||
|
import org.springframework.stereotype.Component; |
||||
|
|
||||
|
import java.util.concurrent.TimeUnit; |
||||
|
|
||||
|
@Component |
||||
|
@RequiredArgsConstructor |
||||
|
@Slf4j |
||||
|
public class NamedParameterJdbcTemplateConfiguration { |
||||
|
|
||||
|
@Value("${spring.jpa.properties.javax.persistence.query.timeout:30000}") |
||||
|
private int queryTimeout; |
||||
|
|
||||
|
private final NamedParameterJdbcTemplate namedParameterJdbcTemplate; |
||||
|
|
||||
|
@PostConstruct |
||||
|
private void init() { |
||||
|
int timeout = Math.max(1, (int) TimeUnit.MILLISECONDS.toSeconds(queryTimeout)); |
||||
|
log.info("Set jdbcTemplate query timeout [{}] second(s)", timeout); |
||||
|
namedParameterJdbcTemplate.getJdbcTemplate().setQueryTimeout(timeout); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,39 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2025 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; |
||||
|
|
||||
|
import org.junit.Test; |
||||
|
import org.springframework.beans.factory.annotation.Autowired; |
||||
|
import org.springframework.dao.DataAccessResourceFailureException; |
||||
|
import org.springframework.jdbc.core.namedparam.NamedParameterJdbcTemplate; |
||||
|
import org.springframework.test.context.TestPropertySource; |
||||
|
import org.thingsboard.server.dao.AbstractJpaDaoTest; |
||||
|
|
||||
|
import static org.junit.jupiter.api.Assertions.assertThrows; |
||||
|
|
||||
|
@TestPropertySource(properties = { |
||||
|
"spring.jpa.properties.javax.persistence.query.timeout=500" |
||||
|
}) |
||||
|
public class JdbcTemplateTest extends AbstractJpaDaoTest { |
||||
|
|
||||
|
@Autowired |
||||
|
private NamedParameterJdbcTemplate jdbcTemplate; |
||||
|
|
||||
|
@Test |
||||
|
public void queryTimeoutTest() { |
||||
|
assertThrows(DataAccessResourceFailureException.class, () -> jdbcTemplate.query("SELECT pg_sleep(10)", rs -> {})); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,82 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2025 The Thingsboard Authors |
||||
|
|
||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
you may not use this file except in compliance with the License. |
||||
|
You may obtain a copy of the License at |
||||
|
|
||||
|
http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
<div class="tb-form-panel stroked" [formGroup]="tooltipsForm"> |
||||
|
<mat-expansion-panel class="tb-settings"> |
||||
|
<mat-expansion-panel-header>{{ 'widget-action.map-item-tooltip.customize-map-item-tooltips' | translate }}</mat-expansion-panel-header> |
||||
|
<ng-template matExpansionPanelContent> |
||||
|
@switch (mapItemType) { |
||||
|
@case (MapItemType.marker) { |
||||
|
<div class="tb-form-row"> |
||||
|
<div class="fixed-title-width" translate>widget-action.map-item-tooltip.place-marker</div> |
||||
|
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input matInput placeholder="{{ mapItemTooltipsDefaultTranslate.placeMarker | translate }}" formControlName="placeMarker"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
} |
||||
|
@case (MapItemType.rectangle) { |
||||
|
<div class="tb-form-row"> |
||||
|
<div class="fixed-title-width" translate>widget-action.map-item-tooltip.start-draw-rectangle</div> |
||||
|
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input matInput placeholder="{{ mapItemTooltipsDefaultTranslate.startRect | translate }}" formControlName="startRect"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<div class="tb-form-row"> |
||||
|
<div class="fixed-title-width" translate>widget-action.map-item-tooltip.finish-draw-rectangle</div> |
||||
|
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input matInput placeholder="{{ mapItemTooltipsDefaultTranslate.finishRect | translate }}" formControlName="finishRect"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
} |
||||
|
@case (MapItemType.polygon) { |
||||
|
<div class="tb-form-row"> |
||||
|
<div class="fixed-title-width" translate>widget-action.map-item-tooltip.start-draw-polygon</div> |
||||
|
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input matInput placeholder="{{ mapItemTooltipsDefaultTranslate.firstVertex | translate }}" formControlName="firstVertex"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<div class="tb-form-row"> |
||||
|
<div class="fixed-title-width" translate>widget-action.map-item-tooltip.continue-draw-polygon</div> |
||||
|
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input matInput placeholder="{{ mapItemTooltipsDefaultTranslate.continueLine | translate }}" formControlName="continueLine"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<div class="tb-form-row"> |
||||
|
<div class="fixed-title-width" translate>widget-action.map-item-tooltip.finish-draw-polygon</div> |
||||
|
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input matInput placeholder="{{ mapItemTooltipsDefaultTranslate.finishPoly | translate }}" formControlName="finishPoly"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
} |
||||
|
@case (MapItemType.circle) { |
||||
|
<div class="tb-form-row"> |
||||
|
<div class="fixed-title-width" translate>widget-action.map-item-tooltip.start-draw-circle</div> |
||||
|
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input matInput placeholder="{{ mapItemTooltipsDefaultTranslate.startCircle | translate }}" formControlName="startCircle"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<div class="tb-form-row"> |
||||
|
<div class="fixed-title-width" translate>widget-action.map-item-tooltip.finish-draw-circle</div> |
||||
|
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input matInput placeholder="{{ mapItemTooltipsDefaultTranslate.finishCircle | translate }}" formControlName="finishCircle"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
} |
||||
|
} |
||||
|
</ng-template> |
||||
|
</mat-expansion-panel> |
||||
|
</div> |
||||
@ -0,0 +1,123 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2025 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, SimpleChanges } from '@angular/core'; |
||||
|
import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms'; |
||||
|
import { MapItemTooltips, MapItemType, mapItemTooltipsTranslation } from '@shared/models/widget.models'; |
||||
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; |
||||
|
import { deepTrim, isEqual } from '@core/utils'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-map-item-tooltips', |
||||
|
templateUrl: './map-item-tooltips.component.html', |
||||
|
providers: [ |
||||
|
{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => MapItemTooltipsComponent), |
||||
|
multi: true |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
export class MapItemTooltipsComponent implements ControlValueAccessor, OnChanges { |
||||
|
|
||||
|
@Input({required: true}) |
||||
|
mapItemType: MapItemType; |
||||
|
|
||||
|
tooltipsForm: FormGroup; |
||||
|
MapItemType = MapItemType; |
||||
|
readonly mapItemTooltipsDefaultTranslate = mapItemTooltipsTranslation; |
||||
|
|
||||
|
private modelValue: MapItemTooltips; |
||||
|
private propagateChange = (_val: any) => {}; |
||||
|
|
||||
|
constructor(private fd: FormBuilder) { |
||||
|
this.tooltipsForm = this.fd.group({ |
||||
|
placeMarker: [''], |
||||
|
firstVertex: [''], |
||||
|
continueLine: [''], |
||||
|
finishPoly: [''], |
||||
|
startRect: [''], |
||||
|
finishRect: [''], |
||||
|
startCircle: [''], |
||||
|
finishCircle: [''] |
||||
|
}); |
||||
|
|
||||
|
this.tooltipsForm.valueChanges.pipe( |
||||
|
takeUntilDestroyed() |
||||
|
).subscribe(this.updatedModel.bind(this)); |
||||
|
} |
||||
|
|
||||
|
ngOnChanges(changes: SimpleChanges) { |
||||
|
if (changes.mapItemType) { |
||||
|
const mapItemTypeChanges = changes.mapItemType; |
||||
|
if (!mapItemTypeChanges.firstChange && mapItemTypeChanges.currentValue !== mapItemTypeChanges.previousValue) { |
||||
|
this.updatedValidators(true); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: any) { |
||||
|
this.propagateChange = fn; |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(_fn: any) { |
||||
|
} |
||||
|
|
||||
|
setDisabledState(isDisabled: boolean) { |
||||
|
if (isDisabled) { |
||||
|
this.tooltipsForm.disable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.tooltipsForm.enable({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
writeValue(obj: MapItemTooltips) { |
||||
|
this.modelValue = obj; |
||||
|
this.tooltipsForm.patchValue(obj, {emitEvent: false}); |
||||
|
this.updatedValidators(); |
||||
|
} |
||||
|
|
||||
|
private updatedValidators(emitNewValue = false) { |
||||
|
this.tooltipsForm.disable({emitEvent: false}); |
||||
|
switch (this.mapItemType) { |
||||
|
case MapItemType.marker: |
||||
|
this.tooltipsForm.get('placeMarker').enable({emitEvent: false}); |
||||
|
break; |
||||
|
case MapItemType.rectangle: |
||||
|
this.tooltipsForm.get('startRect').enable({emitEvent: false}); |
||||
|
this.tooltipsForm.get('finishRect').enable({emitEvent: false}); |
||||
|
break; |
||||
|
case MapItemType.polygon: |
||||
|
this.tooltipsForm.get('firstVertex').enable({emitEvent: false}); |
||||
|
this.tooltipsForm.get('continueLine').enable({emitEvent: false}); |
||||
|
this.tooltipsForm.get('finishPoly').enable({emitEvent: false}); |
||||
|
break; |
||||
|
case MapItemType.circle: |
||||
|
this.tooltipsForm.get('startCircle').enable({emitEvent: false}); |
||||
|
this.tooltipsForm.get('finishCircle').enable({emitEvent: false}); |
||||
|
break; |
||||
|
} |
||||
|
this.tooltipsForm.updateValueAndValidity({emitEvent: emitNewValue}) |
||||
|
} |
||||
|
|
||||
|
private updatedModel(value: MapItemTooltips) { |
||||
|
const currentValue = Object.fromEntries(Object.entries(deepTrim(value)).filter(([_, v]) => v != '')); |
||||
|
if (!isEqual(currentValue, this.modelValue)) { |
||||
|
this.modelValue = currentValue; |
||||
|
this.propagateChange(currentValue); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,84 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2025 The Thingsboard Authors |
||||
|
|
||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
you may not use this file except in compliance with the License. |
||||
|
You may obtain a copy of the License at |
||||
|
|
||||
|
http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
<div class="tb-shape-fill-image-settings-panel" [formGroup]="shapeFillImageSettingsFormGroup"> |
||||
|
<div class="tb-shape-fill-image-settings-title" translate>widgets.maps.data-layer.shape.fill-image</div> |
||||
|
<div class="flex flex-row"> |
||||
|
<tb-toggle-select formControlName="type" class="flex-1"> |
||||
|
<tb-toggle-option [value]="ShapeFillImageType.image"> |
||||
|
{{ 'widgets.maps.data-layer.shape.fill-image-type-image' | translate }} |
||||
|
</tb-toggle-option> |
||||
|
<tb-toggle-option [value]="ShapeFillImageType.function"> |
||||
|
{{ 'widgets.maps.data-layer.shape.fill-image-type-function' | translate }} |
||||
|
</tb-toggle-option> |
||||
|
</tb-toggle-select> |
||||
|
</div> |
||||
|
<div class="tb-shape-fill-image-settings-panel-body" [class.!hidden]="shapeFillImageSettingsFormGroup.get('type').value !== ShapeFillImageType.image"> |
||||
|
<div class="tb-form-panel no-padding no-border"> |
||||
|
<tb-gallery-image-input required formControlName="image"></tb-gallery-image-input> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div translate>widgets.maps.data-layer.shape.opacity</div> |
||||
|
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="opacity" type="number" min="0" max="1" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div translate>widgets.maps.data-layer.shape.angle</div> |
||||
|
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="angle" type="number" min="0" max="360" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
<div matSuffix>deg</div> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div translate>widgets.maps.data-layer.shape.scale</div> |
||||
|
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="scale" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-shape-fill-image-settings-panel-body" [class.!hidden]="shapeFillImageSettingsFormGroup.get('type').value !== ShapeFillImageType.function"> |
||||
|
<div class="tb-form-panel no-padding no-border"> |
||||
|
<tb-js-func formControlName="imageFunction" |
||||
|
withModules |
||||
|
[functionArgs]="['data', 'images', 'dsData']" |
||||
|
[globalVariables]="functionScopeVariables" |
||||
|
functionTitle="{{ 'widgets.maps.data-layer.shape.fill-image-function' | translate }}" |
||||
|
helpId="widget/lib/map/shape_fill_image_fn"> |
||||
|
</tb-js-func> |
||||
|
<tb-multiple-gallery-image-input label="{{ 'widgets.maps.data-layer.shape.fill-images' | translate }}" |
||||
|
formControlName="images"> |
||||
|
</tb-multiple-gallery-image-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-shape-fill-image-settings-panel-buttons"> |
||||
|
<span class="flex-1"></span> |
||||
|
<button mat-button |
||||
|
color="primary" |
||||
|
type="button" |
||||
|
(click)="cancel()"> |
||||
|
{{ 'action.cancel' | translate }} |
||||
|
</button> |
||||
|
<button mat-raised-button |
||||
|
color="primary" |
||||
|
type="button" |
||||
|
(click)="applyShapeFillImageSettings()" |
||||
|
[disabled]="shapeFillImageSettingsFormGroup.invalid || !shapeFillImageSettingsFormGroup.dirty"> |
||||
|
{{ 'action.apply' | translate }} |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,54 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2025 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-shape-fill-image-settings-panel { |
||||
|
width: 700px; |
||||
|
max-width: 90vw; |
||||
|
min-height: 300px; |
||||
|
max-height: 90vh; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 16px; |
||||
|
@media #{$mat-xs} { |
||||
|
width: 90vw; |
||||
|
} |
||||
|
.tb-shape-fill-image-settings-title { |
||||
|
font-size: 16px; |
||||
|
font-weight: 500; |
||||
|
line-height: 24px; |
||||
|
letter-spacing: 0.25px; |
||||
|
color: rgba(0, 0, 0, 0.87); |
||||
|
} |
||||
|
.tb-form-row { |
||||
|
height: auto; |
||||
|
} |
||||
|
.tb-shape-fill-image-settings-panel-body { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
min-height: 0; |
||||
|
overflow: auto; |
||||
|
} |
||||
|
.tb-shape-fill-image-settings-panel-buttons { |
||||
|
height: 40px; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
gap: 16px; |
||||
|
justify-content: flex-end; |
||||
|
align-items: flex-end; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,101 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2025 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, DestroyRef, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core'; |
||||
|
import { TbPopoverComponent } from '@shared/components/popover.component'; |
||||
|
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; |
||||
|
import { WidgetService } from '@core/http/widget.service'; |
||||
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; |
||||
|
import { ShapeFillImageSettings, ShapeFillImageType } from '@shared/models/widget/maps/map.models'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-shape-fill-image-settings-panel', |
||||
|
templateUrl: './shape-fill-image-settings-panel.component.html', |
||||
|
providers: [], |
||||
|
styleUrls: ['./shape-fill-image-settings-panel.component.scss'], |
||||
|
encapsulation: ViewEncapsulation.None |
||||
|
}) |
||||
|
export class ShapeFillImageSettingsPanelComponent implements OnInit { |
||||
|
|
||||
|
@Input() |
||||
|
shapeFillImageSettings: ShapeFillImageSettings; |
||||
|
|
||||
|
@Output() |
||||
|
shapeFillImageSettingsApplied = new EventEmitter<ShapeFillImageSettings>(); |
||||
|
|
||||
|
ShapeFillImageType = ShapeFillImageType; |
||||
|
|
||||
|
shapeFillImageSettingsFormGroup: UntypedFormGroup; |
||||
|
|
||||
|
functionScopeVariables = this.widgetService.getWidgetScopeVariables(); |
||||
|
|
||||
|
constructor(private fb: UntypedFormBuilder, |
||||
|
private popover: TbPopoverComponent, |
||||
|
private widgetService: WidgetService, |
||||
|
private destroyRef: DestroyRef) { |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.shapeFillImageSettingsFormGroup = this.fb.group( |
||||
|
{ |
||||
|
type: [this.shapeFillImageSettings?.type || ShapeFillImageType.image, []], |
||||
|
image: [this.shapeFillImageSettings?.image, [Validators.required]], |
||||
|
opacity: [this.shapeFillImageSettings?.opacity, [Validators.min(0), Validators.max(1)]], |
||||
|
angle: [this.shapeFillImageSettings?.angle, [Validators.min(0), Validators.max(360)]], |
||||
|
scale: [this.shapeFillImageSettings?.scale, [Validators.min(0)]], |
||||
|
imageFunction: [this.shapeFillImageSettings?.imageFunction, [Validators.required]], |
||||
|
images: [this.shapeFillImageSettings?.images, []] |
||||
|
} |
||||
|
); |
||||
|
this.shapeFillImageSettingsFormGroup.get('type').valueChanges.pipe( |
||||
|
takeUntilDestroyed(this.destroyRef) |
||||
|
).subscribe(() => { |
||||
|
this.updateValidators(); |
||||
|
setTimeout(() => {this.popover?.updatePosition();}, 0); |
||||
|
}); |
||||
|
this.updateValidators(); |
||||
|
} |
||||
|
|
||||
|
cancel() { |
||||
|
this.popover?.hide(); |
||||
|
} |
||||
|
|
||||
|
applyShapeFillImageSettings() { |
||||
|
const shapeFillImageSettings: ShapeFillImageSettings = this.shapeFillImageSettingsFormGroup.value; |
||||
|
this.shapeFillImageSettingsApplied.emit(shapeFillImageSettings); |
||||
|
this.popover?.hide(); |
||||
|
} |
||||
|
|
||||
|
private updateValidators() { |
||||
|
const type: ShapeFillImageType = this.shapeFillImageSettingsFormGroup.get('type').value; |
||||
|
if (type === ShapeFillImageType.image) { |
||||
|
this.shapeFillImageSettingsFormGroup.get('image').enable({emitEvent: false}); |
||||
|
this.shapeFillImageSettingsFormGroup.get('opacity').enable({emitEvent: false}); |
||||
|
this.shapeFillImageSettingsFormGroup.get('angle').enable({emitEvent: false}); |
||||
|
this.shapeFillImageSettingsFormGroup.get('scale').enable({emitEvent: false}); |
||||
|
this.shapeFillImageSettingsFormGroup.get('imageFunction').disable({emitEvent: false}); |
||||
|
this.shapeFillImageSettingsFormGroup.get('images').disable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.shapeFillImageSettingsFormGroup.get('image').disable({emitEvent: false}); |
||||
|
this.shapeFillImageSettingsFormGroup.get('opacity').disable({emitEvent: false}); |
||||
|
this.shapeFillImageSettingsFormGroup.get('angle').disable({emitEvent: false}); |
||||
|
this.shapeFillImageSettingsFormGroup.get('scale').disable({emitEvent: false}); |
||||
|
this.shapeFillImageSettingsFormGroup.get('imageFunction').enable({emitEvent: false}); |
||||
|
this.shapeFillImageSettingsFormGroup.get('images').enable({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,29 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2025 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. |
||||
|
|
||||
|
--> |
||||
|
<button type="button" |
||||
|
mat-stroked-button |
||||
|
class="tb-box-button" |
||||
|
[disabled]="disabled" |
||||
|
#matButton |
||||
|
(click)="openImageSettingsPopup($event, matButton)"> |
||||
|
<tb-icon matButtonIcon *ngIf="modelValue?.type === ShapeFillImageType.function; else imagePreview">mdi:function-variant</tb-icon> |
||||
|
</button> |
||||
|
<ng-template #imagePreview> |
||||
|
<img width="24px" height="24px" [style.transform]="modelValue?.angle ? ('rotate('+modelValue.angle+'deg)') : ''" [style.opacity]="modelValue?.opacity" |
||||
|
style="object-fit: contain;" [src]="modelValue?.image | image : {preview: true} | async" [class.disabled]="disabled"/> |
||||
|
</ng-template> |
||||
@ -0,0 +1,96 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2025 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, Renderer2, ViewContainerRef } from '@angular/core'; |
||||
|
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; |
||||
|
import { MatButton } from '@angular/material/button'; |
||||
|
import { TbPopoverService } from '@shared/components/popover.service'; |
||||
|
import { ShapeFillImageSettings, ShapeFillImageType } from '@shared/models/widget/maps/map.models'; |
||||
|
import { |
||||
|
ShapeFillImageSettingsPanelComponent |
||||
|
} from '@home/components/widget/lib/settings/common/map/shape-fill-image-settings-panel.component'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-shape-fill-image-settings', |
||||
|
templateUrl: './shape-fill-image-settings.component.html', |
||||
|
styleUrls: [], |
||||
|
providers: [ |
||||
|
{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => ShapeFillImageSettingsComponent), |
||||
|
multi: true |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
export class ShapeFillImageSettingsComponent implements ControlValueAccessor { |
||||
|
|
||||
|
@Input() |
||||
|
disabled: boolean; |
||||
|
|
||||
|
ShapeFillImageType = ShapeFillImageType; |
||||
|
|
||||
|
modelValue: ShapeFillImageSettings; |
||||
|
|
||||
|
private propagateChange: (v: any) => void = () => { }; |
||||
|
|
||||
|
constructor(private popoverService: TbPopoverService, |
||||
|
private renderer: Renderer2, |
||||
|
private cd: ChangeDetectorRef, |
||||
|
private viewContainerRef: ViewContainerRef) {} |
||||
|
|
||||
|
registerOnChange(fn: any): void { |
||||
|
this.propagateChange = fn; |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(_fn: any): void { |
||||
|
} |
||||
|
|
||||
|
setDisabledState(isDisabled: boolean): void { |
||||
|
this.disabled = isDisabled; |
||||
|
} |
||||
|
|
||||
|
writeValue(value: ShapeFillImageSettings): void { |
||||
|
if (value) { |
||||
|
this.modelValue = value; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
openImageSettingsPopup($event: Event, matButton: MatButton) { |
||||
|
if ($event) { |
||||
|
$event.stopPropagation(); |
||||
|
} |
||||
|
const trigger = matButton._elementRef.nativeElement; |
||||
|
if (this.popoverService.hasPopover(trigger)) { |
||||
|
this.popoverService.hidePopover(trigger); |
||||
|
} else { |
||||
|
this.popoverService.displayPopover({ |
||||
|
trigger, |
||||
|
renderer: this.renderer, |
||||
|
componentType: ShapeFillImageSettingsPanelComponent, |
||||
|
hostView: this.viewContainerRef, |
||||
|
preferredPlacement: 'left', |
||||
|
context: { |
||||
|
shapeFillImageSettings: this.modelValue, |
||||
|
}, |
||||
|
isModal: true |
||||
|
}).tbComponentRef.instance.shapeFillImageSettingsApplied.subscribe((shapeFillImageSettings) => { |
||||
|
this.modelValue = shapeFillImageSettings; |
||||
|
this.propagateChange(this.modelValue); |
||||
|
this.cd.detectChanges(); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,84 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2025 The Thingsboard Authors |
||||
|
|
||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
you may not use this file except in compliance with the License. |
||||
|
You may obtain a copy of the License at |
||||
|
|
||||
|
http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
<div class="tb-shape-fill-stripe-settings-panel" [formGroup]="shapeFillStripeSettingsFormGroup"> |
||||
|
<div class="tb-shape-fill-stripe-settings-title" translate>widgets.maps.data-layer.shape.stripe-pattern</div> |
||||
|
<div class="tb-shape-fill-stripe-settings-panel-body"> |
||||
|
<div class="tb-form-panel no-padding no-border"> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div translate>widgets.maps.data-layer.shape.first-stripe</div> |
||||
|
<div class="flex flex-row items-center gap-2"> |
||||
|
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
||||
|
<input matInput type="number" min="0" formControlName="weight" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
<span matSuffix>px</span> |
||||
|
</mat-form-field> |
||||
|
<tb-data-layer-color-settings |
||||
|
[context]="context" |
||||
|
[dsType]="dsType" |
||||
|
[dsEntityAliasId]="dsEntityAliasId" |
||||
|
[dsDeviceId]="dsDeviceId" |
||||
|
helpId="{{ dataLayerType === 'polygons' ? 'widget/lib/map/polygon_stroke_color_fn' : 'widget/lib/map/circle_stroke_color_fn' }}" formControlName="color"></tb-data-layer-color-settings> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div translate>widgets.maps.data-layer.shape.second-stripe</div> |
||||
|
<div class="flex flex-row items-center gap-2"> |
||||
|
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
||||
|
<input matInput type="number" min="0" formControlName="spaceWeight" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
<span matSuffix>px</span> |
||||
|
</mat-form-field> |
||||
|
<tb-data-layer-color-settings |
||||
|
[context]="context" |
||||
|
[dsType]="dsType" |
||||
|
[dsEntityAliasId]="dsEntityAliasId" |
||||
|
[dsDeviceId]="dsDeviceId" |
||||
|
helpId="{{ dataLayerType === 'polygons' ? 'widget/lib/map/polygon_stroke_color_fn' : 'widget/lib/map/circle_stroke_color_fn' }}" formControlName="spaceColor"></tb-data-layer-color-settings> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div translate>widgets.maps.data-layer.shape.angle</div> |
||||
|
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="angle" type="number" min="0" max="180" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
<div matSuffix>deg</div> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<div class="tb-shape-fill-stripe-settings-preview"> |
||||
|
<div class="tb-shape-fill-stripe-settings-preview-title" translate> |
||||
|
widgets.background.preview |
||||
|
</div> |
||||
|
<div class="tb-shape-fill-stripe-settings-preview-box mat-elevation-z4" [style]="stripePreviewStyle"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-shape-fill-stripe-settings-panel-buttons"> |
||||
|
<span class="flex-1"></span> |
||||
|
<button mat-button |
||||
|
color="primary" |
||||
|
type="button" |
||||
|
(click)="cancel()"> |
||||
|
{{ 'action.cancel' | translate }} |
||||
|
</button> |
||||
|
<button mat-raised-button |
||||
|
color="primary" |
||||
|
type="button" |
||||
|
(click)="applyShapeFillStripeSettings()" |
||||
|
[disabled]="shapeFillStripeSettingsFormGroup.invalid || !shapeFillStripeSettingsFormGroup.dirty"> |
||||
|
{{ 'action.apply' | translate }} |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,80 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2025 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-shape-fill-stripe-settings-panel { |
||||
|
width: 700px; |
||||
|
max-width: 90vw; |
||||
|
min-height: 300px; |
||||
|
max-height: 90vh; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 16px; |
||||
|
@media #{$mat-xs} { |
||||
|
width: 90vw; |
||||
|
} |
||||
|
.tb-shape-fill-stripe-settings-title { |
||||
|
font-size: 16px; |
||||
|
font-weight: 500; |
||||
|
line-height: 24px; |
||||
|
letter-spacing: 0.25px; |
||||
|
color: rgba(0, 0, 0, 0.87); |
||||
|
} |
||||
|
.tb-form-row { |
||||
|
height: auto; |
||||
|
} |
||||
|
.tb-shape-fill-stripe-settings-panel-body { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
min-height: 0; |
||||
|
overflow: auto; |
||||
|
} |
||||
|
.tb-shape-fill-stripe-settings-preview { |
||||
|
flex: 1; |
||||
|
background: #fff; |
||||
|
border-radius: 4px; |
||||
|
border: 1px solid rgba(0, 0, 0, 0.12); |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
padding: 12px 16px 24px 16px; |
||||
|
align-items: center; |
||||
|
gap: 12px; |
||||
|
} |
||||
|
.tb-shape-fill-stripe-settings-preview-title { |
||||
|
align-self: stretch; |
||||
|
font-size: 16px; |
||||
|
font-style: normal; |
||||
|
font-weight: 500; |
||||
|
line-height: 24px; |
||||
|
color: rgba(0, 0, 0, 0.38); |
||||
|
} |
||||
|
.tb-shape-fill-stripe-settings-preview-box { |
||||
|
position: relative; |
||||
|
width: 136px; |
||||
|
height: 118px; |
||||
|
border-radius: 2.666px; |
||||
|
} |
||||
|
|
||||
|
.tb-shape-fill-stripe-settings-panel-buttons { |
||||
|
height: 40px; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
gap: 16px; |
||||
|
justify-content: flex-end; |
||||
|
align-items: flex-end; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,106 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2025 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, DestroyRef, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core'; |
||||
|
import { TbPopoverComponent } from '@shared/components/popover.component'; |
||||
|
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; |
||||
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; |
||||
|
import { MapDataLayerType, ShapeFillStripeSettings } from '@shared/models/widget/maps/map.models'; |
||||
|
import { DomSanitizer } from '@angular/platform-browser'; |
||||
|
import { |
||||
|
generateStripePreviewUrl |
||||
|
} from '@home/components/widget/lib/settings/common/map/shape-fill-stripe-settings.component'; |
||||
|
import { ComponentStyle } from '@shared/models/widget-settings.models'; |
||||
|
import { MapSettingsContext } from '@home/components/widget/lib/settings/common/map/map-settings.component.models'; |
||||
|
import { DatasourceType } from '@shared/models/widget.models'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-shape-fill-stripe-settings-panel', |
||||
|
templateUrl: './shape-fill-stripe-settings-panel.component.html', |
||||
|
providers: [], |
||||
|
styleUrls: ['./shape-fill-stripe-settings-panel.component.scss'], |
||||
|
encapsulation: ViewEncapsulation.None |
||||
|
}) |
||||
|
export class ShapeFillStripeSettingsPanelComponent implements OnInit { |
||||
|
|
||||
|
@Input() |
||||
|
shapeFillStripeSettings: ShapeFillStripeSettings; |
||||
|
|
||||
|
@Input() |
||||
|
context: MapSettingsContext; |
||||
|
|
||||
|
@Input() |
||||
|
dsType: DatasourceType; |
||||
|
|
||||
|
@Input() |
||||
|
dsEntityAliasId: string; |
||||
|
|
||||
|
@Input() |
||||
|
dsDeviceId: string; |
||||
|
|
||||
|
@Input() |
||||
|
dataLayerType: MapDataLayerType; |
||||
|
|
||||
|
@Output() |
||||
|
shapeFillStripeSettingsApplied = new EventEmitter<ShapeFillStripeSettings>(); |
||||
|
|
||||
|
stripePreviewStyle: ComponentStyle; |
||||
|
|
||||
|
shapeFillStripeSettingsFormGroup: UntypedFormGroup; |
||||
|
|
||||
|
constructor(private fb: UntypedFormBuilder, |
||||
|
private sanitizer: DomSanitizer, |
||||
|
private popover: TbPopoverComponent, |
||||
|
private destroyRef: DestroyRef) { |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.shapeFillStripeSettingsFormGroup = this.fb.group( |
||||
|
{ |
||||
|
weight: [this.shapeFillStripeSettings?.weight, [Validators.min(0)]], |
||||
|
color: [this.shapeFillStripeSettings?.color, []], |
||||
|
spaceWeight: [this.shapeFillStripeSettings?.spaceWeight, [Validators.min(0)]], |
||||
|
spaceColor: [this.shapeFillStripeSettings?.spaceColor, []], |
||||
|
angle: [this.shapeFillStripeSettings?.angle, [Validators.min(0), Validators.max(180)]] |
||||
|
} |
||||
|
); |
||||
|
this.shapeFillStripeSettingsFormGroup.valueChanges.pipe( |
||||
|
takeUntilDestroyed(this.destroyRef) |
||||
|
).subscribe(() => { |
||||
|
this.updatePreview(); |
||||
|
}); |
||||
|
this.updatePreview(); |
||||
|
} |
||||
|
|
||||
|
cancel() { |
||||
|
this.popover?.hide(); |
||||
|
} |
||||
|
|
||||
|
applyShapeFillStripeSettings() { |
||||
|
const shapeFillStripeSettings: ShapeFillStripeSettings = this.shapeFillStripeSettingsFormGroup.value; |
||||
|
this.shapeFillStripeSettingsApplied.emit(shapeFillStripeSettings); |
||||
|
this.popover?.hide(); |
||||
|
} |
||||
|
|
||||
|
private updatePreview() { |
||||
|
const shapeFillStripeSettings: ShapeFillStripeSettings = this.shapeFillStripeSettingsFormGroup.value; |
||||
|
const previewUrl = generateStripePreviewUrl(shapeFillStripeSettings); |
||||
|
this.stripePreviewStyle = { |
||||
|
background: this.sanitizer.bypassSecurityTrustStyle(`url(${previewUrl}) no-repeat 50% 50% / cover`) |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
} |
||||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue