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