dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #11862 from vvlladd28/improvement/remove-flex-layout/map-setting

Browse Source 
Remove flex layout in map widgets settings
This commit is contained in:
Igor Kulikov 2024-10-15 11:59:17 +03:00 committed by GitHub
commit fe135b32f7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
19 changed files with 208 additions and 237 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
ui-ngx/src/app/modules/home/components/widget/lib/settings/map/circle-settings.component.html
View File

@ -19,20 +19,18 @@
<fieldset class="fields-group fields-group-slider">
<legend class="group-title" translate>widgets.maps.circle-settings</legend>
<mat-expansion-panel class="tb-settings" [expanded]="circleSettingsFormGroup.get('showCircle').value">
<mat-expansion-panel-header fxLayout="row wrap">
<mat-expansion-panel-header class="flex-wrap">
<mat-panel-title>
<mat-slide-toggle formControlName="showCircle" (click)="$event.stopPropagation()"
fxLayoutAlign="center">
<mat-slide-toggle formControlName="showCircle" (click)="$event.stopPropagation()">
{{ 'widgets.maps.show-circle' | translate }}
</mat-slide-toggle>
</mat-panel-title>
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
<mat-panel-description class="justify-end xs:!hidden" translate>
widget-config.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<tb-datasources-key-autocomplete fxFlex
required
<tb-datasources-key-autocomplete required
[datasources]="widget?.config?.datasources"
label="widgets.maps.circle-key-name"
formControlName="circleKeyName">
@ -43,14 +41,13 @@
<fieldset class="fields-group fields-group-slider">
<legend class="group-title" translate>widgets.maps.circle-label</legend>
<mat-expansion-panel class="tb-settings" [expanded]="circleSettingsFormGroup.get('showCircleLabel').value">
<mat-expansion-panel-header fxLayout="row wrap">
<mat-expansion-panel-header class="flex-wrap">
<mat-panel-title>
<mat-slide-toggle formControlName="showCircleLabel" (click)="$event.stopPropagation()"
fxLayoutAlign="center">
<mat-slide-toggle formControlName="showCircleLabel" (click)="$event.stopPropagation()">
{{ 'widgets.maps.show-circle-label' | translate }}
</mat-slide-toggle>
</mat-panel-title>
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
<mat-panel-description class="justify-end xs:!hidden" translate>
widget-config.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>
@ -58,12 +55,12 @@
<mat-slide-toggle formControlName="useCircleLabelFunction" class="slide-block">
{{ 'widgets.maps.use-circle-label-function' | translate }}
</mat-slide-toggle>
<tb-html [fxShow]="!circleSettingsFormGroup.get('useCircleLabelFunction').value"
<tb-html [class.!hidden]="circleSettingsFormGroup.get('useCircleLabelFunction').value"
formControlName="circleLabel"
minHeight="100px"
label="{{ 'widgets.maps.circle-label-pattern' | translate }}">
</tb-html>
<tb-js-func [fxShow]="circleSettingsFormGroup.get('useCircleLabelFunction').value"
<tb-js-func [class.!hidden]="!circleSettingsFormGroup.get('useCircleLabelFunction').value"
formControlName="circleLabelFunction"
[globalVariables]="functionScopeVariables"
[functionArgs]="['data', 'dsData', 'dsIndex']"
@ -76,19 +73,18 @@
<fieldset class="fields-group fields-group-slider">
<legend class="group-title" translate>widgets.maps.circle-tooltip</legend>
<mat-expansion-panel class="tb-settings" [expanded]="circleSettingsFormGroup.get('showCircleTooltip').value">
<mat-expansion-panel-header fxLayout="row wrap">
<mat-expansion-panel-header class="flex-wrap">
<mat-panel-title>
<mat-slide-toggle formControlName="showCircleTooltip" (click)="$event.stopPropagation()"
fxLayoutAlign="center">
<mat-slide-toggle formControlName="showCircleTooltip" (click)="$event.stopPropagation()">
{{ 'widgets.maps.show-circle-tooltip' | translate }}
</mat-slide-toggle>
</mat-panel-title>
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
<mat-panel-description class="justify-end xs:!hidden" translate>
widget-config.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="flex-1">
<mat-label translate>widgets.maps.show-tooltip-action</mat-label>
<mat-select required formControlName="showCircleTooltipAction">
<mat-option *ngFor="let action of showTooltipActions" [value]="action">
@ -102,12 +98,12 @@
<mat-slide-toggle formControlName="useCircleTooltipFunction" class="slide-block">
{{ 'widgets.maps.use-circle-tooltip-function' | translate }}
</mat-slide-toggle>
<tb-html [fxShow]="!circleSettingsFormGroup.get('useCircleTooltipFunction').value"
<tb-html [class.!hidden]="circleSettingsFormGroup.get('useCircleTooltipFunction').value"
formControlName="circleTooltipPattern"
minHeight="100px"
label="{{ 'widgets.maps.circle-tooltip-pattern' | translate }}">
</tb-html>
<tb-js-func [fxShow]="circleSettingsFormGroup.get('useCircleTooltipFunction').value"
<tb-js-func [class.!hidden]="!circleSettingsFormGroup.get('useCircleTooltipFunction').value"
formControlName="circleTooltipFunction"
[globalVariables]="functionScopeVariables"
[functionArgs]="['data', 'dsData', 'dsIndex']"
@ -119,27 +115,26 @@
</fieldset>
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.maps.circle-fill-color</legend>
<section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
<section class="!flex flex-col gt-xs:flex-row gt-xs:gap-2">
<tb-color-input
fxFlex
class="flex-1"
formControlName="circleFillColor"
icon="format_color_fill"
label="{{ 'widgets.maps.circle-fill-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="flex-1">
<mat-label translate>widgets.maps.circle-fill-color-opacity</mat-label>
<input matInput type="number" min="0" max="1" formControlName="circleFillColorOpacity">
</mat-form-field>
</section>
<mat-expansion-panel class="tb-settings" [expanded]="circleSettingsFormGroup.get('useCircleFillColorFunction').value">
<mat-expansion-panel-header fxLayout="row wrap">
<mat-expansion-panel-header class="flex-wrap">
<mat-panel-title>
<mat-slide-toggle formControlName="useCircleFillColorFunction" (click)="$event.stopPropagation()"
fxLayoutAlign="center">
<mat-slide-toggle formControlName="useCircleFillColorFunction" (click)="$event.stopPropagation()">
{{ 'widgets.maps.use-circle-fill-color-function' | translate }}
</mat-slide-toggle>
</mat-panel-title>
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
<mat-panel-description class="justify-end xs:!hidden" translate>
widget-config.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>
@ -155,31 +150,30 @@
</fieldset>
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.maps.circle-stroke</legend>
<section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
<section class="!flex flex-col gt-xs:flex-row gt-xs:gap-2">
<tb-color-input
fxFlex
class="flex-1"
formControlName="circleStrokeColor"
icon="format_color_fill"
label="{{ 'widgets.maps.stroke-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="flex-1">
<mat-label translate>widgets.maps.stroke-opacity</mat-label>
<input matInput type="number" min="0" max="1" formControlName="circleStrokeOpacity">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="flex-1">
<mat-label translate>widgets.maps.stroke-weight</mat-label>
<input matInput type="number" min="0" formControlName="circleStrokeWeight">
</mat-form-field>
</section>
<mat-expansion-panel class="tb-settings" [expanded]="circleSettingsFormGroup.get('useCircleStrokeColorFunction').value">
<mat-expansion-panel-header fxLayout="row wrap">
<mat-expansion-panel-header class="flex-wrap">
<mat-panel-title>
<mat-slide-toggle formControlName="useCircleStrokeColorFunction" (click)="$event.stopPropagation()"
fxLayoutAlign="center">
<mat-slide-toggle formControlName="useCircleStrokeColorFunction" (click)="$event.stopPropagation()">
{{ 'widgets.maps.use-circle-stroke-color-function' | translate }}
</mat-slide-toggle>
</mat-panel-title>
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
<mat-panel-description class="justify-end xs:!hidden" translate>
widget-config.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>

40
ui-ngx/src/app/modules/home/components/widget/lib/settings/map/common-map-settings.component.html
View File

@ -18,30 +18,30 @@
<section class="tb-widget-settings" [formGroup]="commonMapSettingsFormGroup">
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.maps.common-map-settings</legend>
<section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<tb-datasources-key-autocomplete fxFlex
[fxShow]="provider === mapProvider.image"
<section class="!flex flex-col gt-xs:flex-row gt-xs:gap-2">
<tb-datasources-key-autocomplete class="flex-1"
[class.!hidden]="provider !== mapProvider.image"
required
[datasources]="widget?.config?.datasources"
label="widgets.maps.x-pos-key-name"
formControlName="xPosKeyName">
</tb-datasources-key-autocomplete>
<tb-datasources-key-autocomplete fxFlex
[fxShow]="provider === mapProvider.image"
<tb-datasources-key-autocomplete class="flex-1"
[class.!hidden]="provider !== mapProvider.image"
required
[datasources]="widget?.config?.datasources"
label="widgets.maps.y-pos-key-name"
formControlName="yPosKeyName">
</tb-datasources-key-autocomplete>
<tb-datasources-key-autocomplete fxFlex
[fxShow]="provider !== mapProvider.image"
<tb-datasources-key-autocomplete class="flex-1"
[class.!hidden]="provider === mapProvider.image"
required
[datasources]="widget?.config?.datasources"
label="widgets.maps.latitude-key-name"
formControlName="latKeyName">
</tb-datasources-key-autocomplete>
<tb-datasources-key-autocomplete fxFlex
[fxShow]="provider !== mapProvider.image"
<tb-datasources-key-autocomplete class="flex-1"
[class.!hidden]="provider === mapProvider.image"
required
[datasources]="widget?.config?.datasources"
label="widgets.maps.longitude-key-name"
@ -49,24 +49,24 @@
</tb-datasources-key-autocomplete>
</section>
<mat-expansion-panel class="tb-settings">
<mat-expansion-panel-header fxLayout="row wrap">
<mat-panel-description fxLayoutAlign="end center" translate>
<mat-expansion-panel-header class="flex-wrap">
<mat-panel-description class="justify-end" translate>
widget-config.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<section [fxShow]="provider !== mapProvider.image" fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block">
<section [class.!hidden]="provider === mapProvider.image" class="flex flex-row xs:flex-col gt-xs:gap-2">
<mat-form-field class="flex-1">
<mat-label translate>widgets.maps.default-map-zoom-level</mat-label>
<input matInput type="number" min="0" max="20" step="1" formControlName="defaultZoomLevel">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="flex-1">
<mat-label translate>widgets.maps.default-map-center-position</mat-label>
<input matInput formControlName="defaultCenterPosition">
</mat-form-field>
</section>
<section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" style="margin-bottom: 15px;">
<section fxFlex fxLayout="column">
<section class="flex flex-row xs:flex-col gt-xs:gap-2 mb-3.5">
<section class="flex flex-col flex-1">
<mat-slide-toggle formControlName="disableScrollZooming" class="slide-block">
{{ 'widgets.maps.disable-scroll-zooming' | translate }}
</mat-slide-toggle>
@ -76,17 +76,17 @@
<mat-slide-toggle formControlName="disableZoomControl" class="slide-block">
{{ 'widgets.maps.disable-zoom-control-buttons' | translate }}
</mat-slide-toggle>
<mat-slide-toggle [fxShow]="provider !== mapProvider.image" formControlName="fitMapBounds" class="slide-block">
<mat-slide-toggle [class.!hidden]="provider === mapProvider.image" formControlName="fitMapBounds" class="slide-block">
{{ 'widgets.maps.fit-map-bounds' | translate }}
</mat-slide-toggle>
</section>
<section fxFlex fxLayout="column">
<mat-slide-toggle [fxShow]="provider !== mapProvider.image" formControlName="useDefaultCenterPosition" class="slide-block">
<section class="flex-1" [class.!hidden]="provider === mapProvider.image">
<mat-slide-toggle formControlName="useDefaultCenterPosition" class="slide-block">
{{ 'widgets.maps.use-default-map-center-position' | translate }}
</mat-slide-toggle>
</section>
</section>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block">
<mat-label translate>widgets.maps.entities-limit</mat-label>
<input matInput type="number" min="1" step="1" formControlName="mapPageSize">
</mat-form-field>

2
ui-ngx/src/app/modules/home/components/widget/lib/settings/map/datasources-key-autocomplete.component.html
View File

@ -15,7 +15,7 @@
limitations under the License.
-->
<mat-form-field fxFlex class="mat-block" [formGroup]="keyFormGroup">
<mat-form-field class="mat-block" [formGroup]="keyFormGroup">
<mat-label>{{ label | translate }}</mat-label>
<input [required]="required" matInput
type="text" placeholder="{{ 'entity.key-name' | translate }}"

4
ui-ngx/src/app/modules/home/components/widget/lib/settings/map/google-map-provider-settings.component.html
View File

@ -16,11 +16,11 @@
-->
<section class="tb-widget-settings" [formGroup]="providerSettingsFormGroup">
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block">
<mat-label translate>widgets.maps.google-maps-api-key</mat-label>
<input required matInput formControlName="gmApiKey">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block">
<mat-label translate>widgets.maps.default-map-type</mat-label>
<mat-select required formControlName="gmDefaultMapType">
<mat-option *ngFor="let type of googleMapTypes" [value]="type">

11
ui-ngx/src/app/modules/home/components/widget/lib/settings/map/here-map-provider-settings.component.html
View File

@ -16,7 +16,7 @@
-->
<section class="tb-widget-settings" [formGroup]="providerSettingsFormGroup">
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block">
<mat-label translate>widgets.maps.map-layer</mat-label>
<mat-select required formControlName="mapProviderHere">
<mat-option *ngFor="let provider of hereMapProviders" [value]="provider">
@ -30,19 +30,18 @@
<mat-slide-toggle formControlName="useV3" style="margin-bottom: 16px;">
{{ 'widgets.maps.here-use-new-version-api-3' | translate }}
</mat-slide-toggle>
<div *ngIf="!providerSettingsFormGroup.get('credentials.useV3').value; else apiKey" fxLayout="row" fxLayoutGap="8px"
fxLayout.xs="column" fxLayoutGap.xs="0">
<mat-form-field fxFlex class="mat-block">
<div *ngIf="!providerSettingsFormGroup.get('credentials.useV3').value; else apiKey" class="flex flex-row xs:flex-col gt-xs:gap-2">
<mat-form-field class="flex-1">
<mat-label translate>widgets.maps.here-app-id</mat-label>
<input required matInput formControlName="app_id">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="flex-1">
<mat-label translate>widgets.maps.here-app-code</mat-label>
<input required matInput formControlName="app_code">
</mat-form-field>
</div>
<ng-template #apiKey>
<mat-form-field fxFlex class="mat-block">
<mat-form-field>
<mat-label translate>widgets.maps.here-api-key</mat-label>
<input required matInput formControlName="apiKey">
</mat-form-field>

6
ui-ngx/src/app/modules/home/components/widget/lib/settings/map/image-map-provider-settings.component.html
View File

@ -21,8 +21,8 @@
</tb-gallery-image-input>
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.maps.image-map-background-from-entity-attribute</legend>
<section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block">
<section class="!flex flex-col gt-xs:flex-row gt-xs:gap-2">
<mat-form-field class="flex-1">
<mat-label translate>widgets.maps.image-url-source-entity-alias</mat-label>
<input matInput type="text"
placeholder="{{ 'entity.entity-alias' | translate }}"
@ -44,7 +44,7 @@
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="flex-1">
<mat-label translate>widgets.maps.image-url-source-entity-attribute</mat-label>
<input matInput type="text"
placeholder="{{ 'entity.key-name' | translate }}"

7
ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-editor-settings.component.html
View File

@ -25,14 +25,13 @@
{{ 'widgets.maps.init-draggable-mode' | translate }}
</mat-slide-toggle>
<mat-expansion-panel class="tb-settings" [expanded]="!mapEditorSettingsFormGroup.get('hideAllControlButton').value">
<mat-expansion-panel-header fxLayout="row wrap">
<mat-expansion-panel-header class="flex-wrap">
<mat-panel-title>
<mat-slide-toggle formControlName="hideAllControlButton" (click)="$event.stopPropagation()"
fxLayoutAlign="center">
<mat-slide-toggle formControlName="hideAllControlButton" (click)="$event.stopPropagation()">
{{ 'widgets.maps.hide-all-edit-buttons' | translate }}
</mat-slide-toggle>
</mat-panel-title>
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
<mat-panel-description class="justify-end xs:!hidden" translate>
widget-config.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>

12
ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-provider-settings.component.html
View File

@ -18,7 +18,7 @@
<section class="tb-widget-settings" [formGroup]="providerSettingsFormGroup">
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.maps.map-provider-settings</legend>
<mat-form-field fxFlex class="mat-block">
<mat-form-field>
<mat-label translate>widgets.maps.map-provider</mat-label>
<mat-select required formControlName="provider">
<mat-option *ngFor="let provider of mapProviders" [value]="provider">
@ -27,24 +27,24 @@
</mat-select>
</mat-form-field>
<tb-google-map-provider-settings
[fxShow]="providerSettingsFormGroup.get('provider').value === mapProvider.google"
[class.!hidden]="providerSettingsFormGroup.get('provider').value !== mapProvider.google"
formControlName="googleProviderSettings">
</tb-google-map-provider-settings>
<tb-openstreet-map-provider-settings
[fxShow]="providerSettingsFormGroup.get('provider').value === mapProvider.openstreet"
[class.!hidden]="providerSettingsFormGroup.get('provider').value !== mapProvider.openstreet"
formControlName="openstreetProviderSettings">
</tb-openstreet-map-provider-settings>
<tb-here-map-provider-settings
[fxShow]="providerSettingsFormGroup.get('provider').value === mapProvider.here"
[class.!hidden]="providerSettingsFormGroup.get('provider').value !== mapProvider.here"
formControlName="hereProviderSettings">
</tb-here-map-provider-settings>
<tb-image-map-provider-settings
[fxShow]="providerSettingsFormGroup.get('provider').value === mapProvider.image"
[class.!hidden]="providerSettingsFormGroup.get('provider').value !== mapProvider.image"
[aliasController]="aliasController"
formControlName="imageMapProviderSettings">
</tb-image-map-provider-settings>
<tb-tencent-map-provider-settings
[fxShow]="providerSettingsFormGroup.get('provider').value === mapProvider.tencent"
[class.!hidden]="providerSettingsFormGroup.get('provider').value !== mapProvider.tencent"
formControlName="tencentMapProviderSettings">
</tb-tencent-map-provider-settings>
</fieldset>

4
ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-settings.component.html
View File

@ -39,7 +39,7 @@
</tb-circle-settings>
<tb-marker-clustering-settings
*ngIf="!routeMap"
[fxShow]="mapSettingsFormGroup.get('mapProviderSettings').value.provider !== mapProvider.image"
[class.!hidden]="mapSettingsFormGroup.get('mapProviderSettings').value.provider === mapProvider.image"
formControlName="markerClusteringSettings">
</tb-marker-clustering-settings>
<tb-route-map-settings
@ -47,7 +47,7 @@
formControlName="routeMapSettings">
</tb-route-map-settings>
<tb-map-editor-settings
[fxShow]="displayEditorSettings()"
[class.!hidden]="!displayEditorSettings()"
formControlName="mapEditorSettings">
</tb-map-editor-settings>
</section>

26
ui-ngx/src/app/modules/home/components/widget/lib/settings/map/marker-clustering-settings.component.html
View File

@ -19,14 +19,13 @@
<fieldset class="fields-group fields-group-slider">
<legend class="group-title" translate>widgets.maps.markers-clustering-settings</legend>
<mat-expansion-panel class="tb-settings" [expanded]="markerClusteringSettingsFormGroup.get('useClusterMarkers').value">
<mat-expansion-panel-header fxLayout="row wrap">
<mat-expansion-panel-header class="flex-wrap">
<mat-panel-title>
<mat-slide-toggle formControlName="useClusterMarkers" (click)="$event.stopPropagation()"
fxLayoutAlign="center">
<mat-slide-toggle formControlName="useClusterMarkers" (click)="$event.stopPropagation()">
{{ 'widgets.maps.use-map-markers-clustering' | translate }}
</mat-slide-toggle>
</mat-panel-title>
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
<mat-panel-description class="justify-end xs:!hidden" translate>
widget-config.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>
@ -34,21 +33,21 @@
<mat-slide-toggle formControlName="zoomOnClick" class="slide-block">
{{ 'widgets.maps.zoom-on-cluster-click' | translate }}
</mat-slide-toggle>
<section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block">
<section class="flex flex-row xs:flex-col gt-xs:gap-2">
<mat-form-field class="flex-1">
<mat-label translate>widgets.maps.max-cluster-zoom</mat-label>
<input matInput type="number" min="0" max="18" step="1" formControlName="maxZoom">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="flex-1">
<mat-label translate>widgets.maps.max-cluster-radius-pixels</mat-label>
<input matInput type="number" min="0" formControlName="maxClusterRadius">
</mat-form-field>
</section>
<section class="flex-gap-xs" fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutGap.xs="16px">
<mat-slide-toggle fxFlex formControlName="animate" class="slide-block">
<section class="flex-gap-xs flex flex-col gt-xs:flex-row gap-2 xs:gap-4">
<mat-slide-toggle formControlName="animate" class="slide-block flex-1">
{{ 'widgets.maps.cluster-zoom-animation' | translate }}
</mat-slide-toggle>
<mat-slide-toggle fxFlex formControlName="showCoverageOnHover" class="slide-block">
<mat-slide-toggle formControlName="showCoverageOnHover" class="slide-block flex-1">
{{ 'widgets.maps.show-markers-bounds-on-cluster-mouse-over' | translate }}
</mat-slide-toggle>
</section>
@ -67,14 +66,13 @@
<fieldset class="fields-group fields-group-slider">
<legend class="group-title" translate>widgets.maps.clustering-markers</legend>
<mat-expansion-panel class="tb-settings" [expanded]="markerClusteringSettingsFormGroup.get('useIconCreateFunction').value">
<mat-expansion-panel-header fxLayout="row wrap">
<mat-expansion-panel-header class="flex-wrap">
<mat-panel-title>
<mat-slide-toggle formControlName="useIconCreateFunction" (click)="$event.stopPropagation()"
fxLayoutAlign="center">
<mat-slide-toggle formControlName="useIconCreateFunction" (click)="$event.stopPropagation()">
{{ 'widgets.maps.use-icon-create-function' | translate }}
</mat-slide-toggle>
</mat-panel-title>
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
<mat-panel-description class="justify-end xs:!hidden" translate>
widget-config.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>

62
ui-ngx/src/app/modules/home/components/widget/lib/settings/map/markers-settings.component.html
View File

@ -18,17 +18,17 @@
<section class="tb-widget-settings" [formGroup]="markersSettingsFormGroup">
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.maps.markers-settings</legend>
<section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block">
<section class="!flex flex-row xs:flex-col gt-xs:gap-2">
<mat-form-field class="flex-1">
<mat-label translate>widgets.maps.marker-offset-x</mat-label>
<input matInput type="number" formControlName="markerOffsetX">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="flex-1">
<mat-label translate>widgets.maps.marker-offset-y</mat-label>
<input matInput type="number" formControlName="markerOffsetY">
</mat-form-field>
</section>
<tb-js-func [fxShow]="provider === mapProvider.image"
<tb-js-func [class.!hidden]="provider !== mapProvider.image"
formControlName="posFunction"
minHeight="100px"
[globalVariables]="functionScopeVariables"
@ -42,14 +42,13 @@
<fieldset class="fields-group fields-group-slider">
<legend class="group-title" translate>widgets.maps.label</legend>
<mat-expansion-panel class="tb-settings" [expanded]="markersSettingsFormGroup.get('showLabel').value">
<mat-expansion-panel-header fxLayout="row wrap">
<mat-expansion-panel-header class="flex-wrap">
<mat-panel-title>
<mat-slide-toggle formControlName="showLabel" (click)="$event.stopPropagation()"
fxLayoutAlign="center">
<mat-slide-toggle formControlName="showLabel" (click)="$event.stopPropagation()">
{{ 'widgets.maps.show-label' | translate }}
</mat-slide-toggle>
</mat-panel-title>
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
<mat-panel-description class="justify-end xs:!hidden" translate>
widget-config.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>
@ -57,12 +56,12 @@
<mat-slide-toggle formControlName="useLabelFunction" class="slide-block">
{{ 'widgets.maps.use-label-function' | translate }}
</mat-slide-toggle>
<tb-html [fxShow]="!markersSettingsFormGroup.get('useLabelFunction').value"
<tb-html [class.!hidden]="markersSettingsFormGroup.get('useLabelFunction').value"
formControlName="label"
minHeight="100px"
label="{{ 'widgets.maps.label-pattern' | translate }}">
</tb-html>
<tb-js-func [fxShow]="markersSettingsFormGroup.get('useLabelFunction').value"
<tb-js-func [class.!hidden]="!markersSettingsFormGroup.get('useLabelFunction').value"
formControlName="labelFunction"
[globalVariables]="functionScopeVariables"
[functionArgs]="['data', 'dsData', 'dsIndex']"
@ -75,19 +74,18 @@
<fieldset class="fields-group fields-group-slider">
<legend class="group-title" translate>widgets.maps.tooltip</legend>
<mat-expansion-panel class="tb-settings" [expanded]="markersSettingsFormGroup.get('showTooltip').value">
<mat-expansion-panel-header fxLayout="row wrap">
<mat-expansion-panel-header class="flex-wrap">
<mat-panel-title>
<mat-slide-toggle formControlName="showTooltip" (click)="$event.stopPropagation()"
fxLayoutAlign="center">
<mat-slide-toggle formControlName="showTooltip" (click)="$event.stopPropagation()">
{{ 'widgets.maps.show-tooltip' | translate }}
</mat-slide-toggle>
</mat-panel-title>
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
<mat-panel-description class="justify-end xs:!hidden" translate>
widget-config.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block">
<mat-label translate>widgets.maps.show-tooltip-action</mat-label>
<mat-select required formControlName="showTooltipAction">
<mat-option *ngFor="let action of showTooltipActions" [value]="action">
@ -101,24 +99,24 @@
<mat-slide-toggle formControlName="useTooltipFunction" class="slide-block">
{{ 'widgets.maps.use-tooltip-function' | translate }}
</mat-slide-toggle>
<tb-html [fxShow]="!markersSettingsFormGroup.get('useTooltipFunction').value"
<tb-html [class.!hidden]="markersSettingsFormGroup.get('useTooltipFunction').value"
formControlName="tooltipPattern"
minHeight="100px"
label="{{ 'widgets.maps.tooltip-pattern' | translate }}">
</tb-html>
<tb-js-func [fxShow]="markersSettingsFormGroup.get('useTooltipFunction').value"
<tb-js-func [class.!hidden]="!markersSettingsFormGroup.get('useTooltipFunction').value"
formControlName="tooltipFunction"
[globalVariables]="functionScopeVariables"
[functionArgs]="['data', 'dsData', 'dsIndex']"
functionTitle="{{ 'widgets.maps.tooltip-function' | translate }}"
helpId="widget/lib/map/tooltip_fn">
</tb-js-func>
<section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block">
<section class="flex flex-row xs:flex-col gt-xs:gap-2">
<mat-form-field class="flex-1">
<mat-label translate>widgets.maps.tooltip-offset-x</mat-label>
<input matInput type="number" formControlName="tooltipOffsetX">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="flex-1">
<mat-label translate>widgets.maps.tooltip-offset-y</mat-label>
<input matInput type="number" formControlName="tooltipOffsetY">
</mat-form-field>
@ -134,14 +132,13 @@
label="{{ 'widgets.maps.color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
<mat-expansion-panel class="tb-settings" [expanded]="markersSettingsFormGroup.get('useColorFunction').value">
<mat-expansion-panel-header fxLayout="row wrap">
<mat-expansion-panel-header class="flex-wrap">
<mat-panel-title>
<mat-slide-toggle formControlName="useColorFunction" (click)="$event.stopPropagation()"
fxLayoutAlign="center">
<mat-slide-toggle formControlName="useColorFunction" (click)="$event.stopPropagation()">
{{ 'widgets.maps.use-color-function' | translate }}
</mat-slide-toggle>
</mat-panel-title>
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
<mat-panel-description class="justify-end xs:!hidden" translate>
widget-config.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>
@ -158,35 +155,34 @@
<fieldset class="fields-group fields-group-slider">
<legend class="group-title" translate>widgets.maps.marker-image</legend>
<mat-expansion-panel class="tb-settings" expanded>
<mat-expansion-panel-header fxLayout="row wrap">
<mat-expansion-panel-header class="flex-wrap">
<mat-panel-title>
<mat-slide-toggle formControlName="useMarkerImageFunction" (click)="$event.stopPropagation()"
fxLayoutAlign="center">
<mat-slide-toggle formControlName="useMarkerImageFunction" (click)="$event.stopPropagation()">
{{ 'widgets.maps.use-marker-image-function' | translate }}
</mat-slide-toggle>
</mat-panel-title>
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
<mat-panel-description class="justify-end xs:!hidden" translate>
widget-config.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<tb-gallery-image-input [fxShow]="!markersSettingsFormGroup.get('useMarkerImageFunction').value"
<tb-gallery-image-input [class.!hidden]="markersSettingsFormGroup.get('useMarkerImageFunction').value"
label="{{ 'widgets.maps.custom-marker-image' | translate }}"
formControlName="markerImage">
</tb-gallery-image-input>
<mat-form-field [fxShow]="!markersSettingsFormGroup.get('useMarkerImageFunction').value"
fxFlex class="mat-block">
<mat-form-field [class.!hidden]="markersSettingsFormGroup.get('useMarkerImageFunction').value"
class="mat-block">
<mat-label translate>widgets.maps.custom-marker-image-size</mat-label>
<input matInput type="number" min="1" formControlName="markerImageSize">
</mat-form-field>
<tb-js-func [fxShow]="markersSettingsFormGroup.get('useMarkerImageFunction').value"
<tb-js-func [class.!hidden]="!markersSettingsFormGroup.get('useMarkerImageFunction').value"
formControlName="markerImageFunction"
[globalVariables]="functionScopeVariables"
[functionArgs]="['data', 'images', 'dsData', 'dsIndex']"
functionTitle="{{ 'widgets.maps.marker-image-function' | translate }}"
helpId="widget/lib/map/marker_image_fn">
</tb-js-func>
<tb-multiple-gallery-image-input [fxShow]="markersSettingsFormGroup.get('useMarkerImageFunction').value"
<tb-multiple-gallery-image-input [class.!hidden]="!markersSettingsFormGroup.get('useMarkerImageFunction').value"
label="{{ 'widgets.maps.marker-images' | translate }}"
formControlName="markerImages">
</tb-multiple-gallery-image-input>

11
ui-ngx/src/app/modules/home/components/widget/lib/settings/map/openstreet-map-provider-settings.component.html
View File

@ -16,7 +16,7 @@
-->
<section class="tb-widget-settings" [formGroup]="providerSettingsFormGroup">
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block">
<mat-label translate>widgets.maps.openstreet-provider</mat-label>
<mat-select required formControlName="mapProvider">
<mat-option *ngFor="let provider of mapProviders" [value]="provider">
@ -25,19 +25,18 @@
</mat-select>
</mat-form-field>
<mat-expansion-panel class="tb-settings" [expanded]="providerSettingsFormGroup.get('useCustomProvider').value">
<mat-expansion-panel-header fxLayout="row wrap">
<mat-expansion-panel-header class="flex-wrap">
<mat-panel-title>
<mat-slide-toggle formControlName="useCustomProvider" (click)="$event.stopPropagation()"
fxLayoutAlign="center">
<mat-slide-toggle formControlName="useCustomProvider" (click)="$event.stopPropagation()">
{{ 'widgets.maps.use-custom-provider' | translate }}
</mat-slide-toggle>
</mat-panel-title>
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
<mat-panel-description class="justify-end xs:!hidden" translate>
widget-config.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block">
<mat-label translate>widgets.maps.custom-provider-tile-url</mat-label>
<input required matInput formControlName="customProviderTileUrl">
</mat-form-field>

62
ui-ngx/src/app/modules/home/components/widget/lib/settings/map/polygon-settings.component.html
View File

@ -19,20 +19,18 @@
<fieldset class="fields-group fields-group-slider">
<legend class="group-title" translate>widgets.maps.polygon-settings</legend>
<mat-expansion-panel class="tb-settings" [expanded]="polygonSettingsFormGroup.get('showPolygon').value">
<mat-expansion-panel-header fxLayout="row wrap">
<mat-expansion-panel-header class="flex-wrap">
<mat-panel-title>
<mat-slide-toggle formControlName="showPolygon" (click)="$event.stopPropagation()"
fxLayoutAlign="center">
<mat-slide-toggle formControlName="showPolygon" (click)="$event.stopPropagation()">
{{ 'widgets.maps.show-polygon' | translate }}
</mat-slide-toggle>
</mat-panel-title>
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
<mat-panel-description class="justify-end xs:!hidden" translate>
widget-config.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<tb-datasources-key-autocomplete fxFlex
required
<tb-datasources-key-autocomplete required
[datasources]="widget?.config?.datasources"
label="widgets.maps.polygon-key-name"
formControlName="polygonKeyName">
@ -43,14 +41,13 @@
<fieldset class="fields-group fields-group-slider">
<legend class="group-title" translate>widgets.maps.polygon-label</legend>
<mat-expansion-panel class="tb-settings" [expanded]="polygonSettingsFormGroup.get('showPolygonLabel').value">
<mat-expansion-panel-header fxLayout="row wrap">
<mat-expansion-panel-header class="flex-wrap">
<mat-panel-title>
<mat-slide-toggle formControlName="showPolygonLabel" (click)="$event.stopPropagation()"
fxLayoutAlign="center">
<mat-slide-toggle formControlName="showPolygonLabel" (click)="$event.stopPropagation()">
{{ 'widgets.maps.show-polygon-label' | translate }}
</mat-slide-toggle>
</mat-panel-title>
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
<mat-panel-description class="justify-end xs:!hidden" translate>
widget-config.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>
@ -58,12 +55,12 @@
<mat-slide-toggle formControlName="usePolygonLabelFunction" class="slide-block">
{{ 'widgets.maps.use-polygon-label-function' | translate }}
</mat-slide-toggle>
<tb-html [fxShow]="!polygonSettingsFormGroup.get('usePolygonLabelFunction').value"
<tb-html [class.!hidden]="polygonSettingsFormGroup.get('usePolygonLabelFunction').value"
formControlName="polygonLabel"
minHeight="100px"
label="{{ 'widgets.maps.polygon-label-pattern' | translate }}">
</tb-html>
<tb-js-func [fxShow]="polygonSettingsFormGroup.get('usePolygonLabelFunction').value"
<tb-js-func [class.!hidden]="!polygonSettingsFormGroup.get('usePolygonLabelFunction').value"
formControlName="polygonLabelFunction"
[globalVariables]="functionScopeVariables"
[functionArgs]="['data', 'dsData', 'dsIndex']"
@ -76,19 +73,18 @@
<fieldset class="fields-group fields-group-slider">
<legend class="group-title" translate>widgets.maps.polygon-tooltip</legend>
<mat-expansion-panel class="tb-settings" [expanded]="polygonSettingsFormGroup.get('showPolygonTooltip').value">
<mat-expansion-panel-header fxLayout="row wrap">
<mat-expansion-panel-header class="flex-wrap">
<mat-panel-title>
<mat-slide-toggle formControlName="showPolygonTooltip" (click)="$event.stopPropagation()"
fxLayoutAlign="center">
<mat-slide-toggle formControlName="showPolygonTooltip" (click)="$event.stopPropagation()">
{{ 'widgets.maps.show-polygon-tooltip' | translate }}
</mat-slide-toggle>
</mat-panel-title>
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
<mat-panel-description class="justify-end xs:!hidden" translate>
widget-config.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block">
<mat-label translate>widgets.maps.show-tooltip-action</mat-label>
<mat-select required formControlName="showPolygonTooltipAction">
<mat-option *ngFor="let action of showTooltipActions" [value]="action">
@ -102,12 +98,12 @@
<mat-slide-toggle formControlName="usePolygonTooltipFunction" class="slide-block">
{{ 'widgets.maps.use-polygon-tooltip-function' | translate }}
</mat-slide-toggle>
<tb-html [fxShow]="!polygonSettingsFormGroup.get('usePolygonTooltipFunction').value"
<tb-html [class.!hidden]="polygonSettingsFormGroup.get('usePolygonTooltipFunction').value"
formControlName="polygonTooltipPattern"
minHeight="100px"
label="{{ 'widgets.maps.polygon-tooltip-pattern' | translate }}">
</tb-html>
<tb-js-func [fxShow]="polygonSettingsFormGroup.get('usePolygonTooltipFunction').value"
<tb-js-func [class.!hidden]="!polygonSettingsFormGroup.get('usePolygonTooltipFunction').value"
formControlName="polygonTooltipFunction"
[globalVariables]="functionScopeVariables"
[functionArgs]="['data', 'dsData', 'dsIndex']"
@ -119,27 +115,26 @@
</fieldset>
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.maps.polygon-color</legend>
<section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
<section class="!flex flex-col gt-xs:flex-row gt-xs:gap-2">
<tb-color-input
fxFlex
class="flex-1"
formControlName="polygonColor"
icon="format_color_fill"
label="{{ 'widgets.maps.polygon-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="flex-1">
<mat-label translate>widgets.maps.polygon-opacity</mat-label>
<input matInput type="number" min="0" max="1" formControlName="polygonOpacity">
</mat-form-field>
</section>
<mat-expansion-panel class="tb-settings" [expanded]="polygonSettingsFormGroup.get('usePolygonColorFunction').value">
<mat-expansion-panel-header fxLayout="row wrap">
<mat-expansion-panel-header class="flex-wrap">
<mat-panel-title>
<mat-slide-toggle formControlName="usePolygonColorFunction" (click)="$event.stopPropagation()"
fxLayoutAlign="center">
<mat-slide-toggle formControlName="usePolygonColorFunction" (click)="$event.stopPropagation()">
{{ 'widgets.maps.use-polygon-color-function' | translate }}
</mat-slide-toggle>
</mat-panel-title>
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
<mat-panel-description class="justify-end xs:!hidden" translate>
widget-config.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>
@ -155,31 +150,30 @@
</fieldset>
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.maps.polygon-stroke</legend>
<section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
<section class="!flex flex-col gt-xs:flex-row gt-xs:gap-2">
<tb-color-input
fxFlex
class="flex-1"
formControlName="polygonStrokeColor"
icon="format_color_fill"
label="{{ 'widgets.maps.stroke-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="flex-1">
<mat-label translate>widgets.maps.stroke-opacity</mat-label>
<input matInput type="number" min="0" max="1" formControlName="polygonStrokeOpacity">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="flex-1">
<mat-label translate>widgets.maps.stroke-weight</mat-label>
<input matInput type="number" min="0" formControlName="polygonStrokeWeight">
</mat-form-field>
</section>
<mat-expansion-panel class="tb-settings" [expanded]="polygonSettingsFormGroup.get('usePolygonStrokeColorFunction').value">
<mat-expansion-panel-header fxLayout="row wrap">
<mat-expansion-panel-header class="flex-wrap">
<mat-panel-title>
<mat-slide-toggle formControlName="usePolygonStrokeColorFunction" (click)="$event.stopPropagation()"
fxLayoutAlign="center">
<mat-slide-toggle formControlName="usePolygonStrokeColorFunction" (click)="$event.stopPropagation()">
{{ 'widgets.maps.use-polygon-stroke-color-function' | translate }}
</mat-slide-toggle>
</mat-panel-title>
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
<mat-panel-description class="justify-end xs:!hidden" translate>
widget-config.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>

6
ui-ngx/src/app/modules/home/components/widget/lib/settings/map/route-map-settings.component.html
View File

@ -18,12 +18,12 @@
<section class="tb-widget-settings" [formGroup]="routeMapSettingsFormGroup">
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.maps.route-map-settings</legend>
<section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block">
<section class="!flex flex-row xs:flex-col gt-xs:gap-2">
<mat-form-field class="flex-1">
<mat-label translate>widgets.maps.stroke-weight</mat-label>
<input matInput type="number" min="0" formControlName="strokeWeight">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="flex-1">
<mat-label translate>widgets.maps.stroke-opacity</mat-label>
<input matInput type="number" min="0" max="1" formControlName="strokeOpacity">
</mat-form-field>

4
ui-ngx/src/app/modules/home/components/widget/lib/settings/map/tencent-map-provider-settings.component.html
View File

@ -16,11 +16,11 @@
-->
<section class="tb-widget-settings" [formGroup]="providerSettingsFormGroup">
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block">
<mat-label translate>widgets.maps.tencent-maps-api-key</mat-label>
<input required matInput formControlName="tmApiKey">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block">
<mat-label translate>widgets.maps.default-map-type</mat-label>
<mat-select required formControlName="tmDefaultMapType">
<mat-option *ngFor="let type of tencentMapTypes" [value]="type">

27
ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-common-settings.component.html
View File

@ -18,18 +18,18 @@
<section class="tb-widget-settings" [formGroup]="tripAnimationCommonSettingsFormGroup">
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.maps.trip-animation-settings</legend>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block">
<mat-label translate>widgets.maps.normalization-step</mat-label>
<input matInput type="number" min="1" formControlName="normalizationStep">
</mat-form-field>
<section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px">
<tb-datasources-key-autocomplete fxFlex
<section class="flex flex-col gt-xs:flex-row gt-xs:gap-2">
<tb-datasources-key-autocomplete class="flex-1"
required
[datasources]="widget?.config?.datasources"
label="widgets.maps.latitude-key-name"
formControlName="latKeyName">
</tb-datasources-key-autocomplete>
<tb-datasources-key-autocomplete fxFlex
<tb-datasources-key-autocomplete class="flex-1"
required
[datasources]="widget?.config?.datasources"
label="widgets.maps.longitude-key-name"
@ -39,32 +39,31 @@
<fieldset class="fields-group fields-group-slider">
<legend class="group-title" translate>widgets.maps.tooltip</legend>
<mat-expansion-panel class="tb-settings" [expanded]="tripAnimationCommonSettingsFormGroup.get('showTooltip').value">
<mat-expansion-panel-header fxLayout="row wrap">
<mat-expansion-panel-header class="flex-wrap">
<mat-panel-title>
<mat-slide-toggle formControlName="showTooltip" (click)="$event.stopPropagation()"
fxLayoutAlign="center">
<mat-slide-toggle formControlName="showTooltip" (click)="$event.stopPropagation()">
{{ 'widgets.maps.show-tooltip' | translate }}
</mat-slide-toggle>
</mat-panel-title>
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
<mat-panel-description class="justify-end xs:!hidden" translate>
widget-config.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px">
<section class="flex flex-col gt-xs:flex-row gt-xs:gap-2">
<tb-color-input
fxFlex
class="flex-1"
formControlName="tooltipColor"
icon="format_color_fill"
label="{{ 'widgets.maps.tooltip-background-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
<tb-color-input
fxFlex
class="flex-1"
formControlName="tooltipFontColor"
icon="format_color_fill"
label="{{ 'widgets.maps.tooltip-font-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="flex-1">
<mat-label translate>widgets.maps.tooltip-opacity</mat-label>
<input matInput type="number" min="0" max="1" formControlName="tooltipOpacity">
</mat-form-field>
@ -75,12 +74,12 @@
<mat-slide-toggle formControlName="useTooltipFunction" class="slide-block">
{{ 'widgets.maps.use-tooltip-function' | translate }}
</mat-slide-toggle>
<tb-html [fxShow]="!tripAnimationCommonSettingsFormGroup.get('useTooltipFunction').value"
<tb-html [class.!hidden]="tripAnimationCommonSettingsFormGroup.get('useTooltipFunction').value"
formControlName="tooltipPattern"
minHeight="100px"
label="{{ 'widgets.maps.tooltip-pattern' | translate }}">
</tb-html>
<tb-js-func [fxShow]="tripAnimationCommonSettingsFormGroup.get('useTooltipFunction').value"
<tb-js-func [class.!hidden]="!tripAnimationCommonSettingsFormGroup.get('useTooltipFunction').value"
formControlName="tooltipFunction"
[globalVariables]="functionScopeVariables"
[functionArgs]="['data', 'dsData', 'dsIndex']"

30
ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-marker-settings.component.html
View File

@ -18,21 +18,20 @@
<section class="tb-widget-settings" [formGroup]="tripAnimationMarkerSettingsFormGroup">
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.maps.markers-settings</legend>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block">
<mat-label translate>widgets.maps.rotation-angle</mat-label>
<input matInput type="number" min="0" max="360" formControlName="rotationAngle">
</mat-form-field>
<fieldset class="fields-group fields-group-slider">
<legend class="group-title" translate>widgets.maps.label</legend>
<mat-expansion-panel class="tb-settings" [expanded]="tripAnimationMarkerSettingsFormGroup.get('showLabel').value">
<mat-expansion-panel-header fxLayout="row wrap">
<mat-expansion-panel-header class="flex-wrap">
<mat-panel-title>
<mat-slide-toggle formControlName="showLabel" (click)="$event.stopPropagation()"
fxLayoutAlign="center">
<mat-slide-toggle formControlName="showLabel" (click)="$event.stopPropagation()">
{{ 'widgets.maps.show-label' | translate }}
</mat-slide-toggle>
</mat-panel-title>
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
<mat-panel-description class="justify-end xs:!hidden" translate>
widget-config.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>
@ -40,12 +39,12 @@
<mat-slide-toggle formControlName="useLabelFunction" class="slide-block">
{{ 'widgets.maps.use-label-function' | translate }}
</mat-slide-toggle>
<tb-html [fxShow]="!tripAnimationMarkerSettingsFormGroup.get('useLabelFunction').value"
<tb-html [class.!hidden]="tripAnimationMarkerSettingsFormGroup.get('useLabelFunction').value"
formControlName="label"
minHeight="100px"
label="{{ 'widgets.maps.label-pattern' | translate }}">
</tb-html>
<tb-js-func [fxShow]="tripAnimationMarkerSettingsFormGroup.get('useLabelFunction').value"
<tb-js-func [class.!hidden]="!tripAnimationMarkerSettingsFormGroup.get('useLabelFunction').value"
formControlName="labelFunction"
[globalVariables]="functionScopeVariables"
[functionArgs]="['data', 'dsData', 'dsIndex']"
@ -58,35 +57,34 @@
<fieldset class="fields-group fields-group-slider">
<legend class="group-title" translate>widgets.maps.marker-image</legend>
<mat-expansion-panel class="tb-settings" expanded>
<mat-expansion-panel-header fxLayout="row wrap">
<mat-expansion-panel-header class="flex-wrap">
<mat-panel-title>
<mat-slide-toggle formControlName="useMarkerImageFunction" (click)="$event.stopPropagation()"
fxLayoutAlign="center">
<mat-slide-toggle formControlName="useMarkerImageFunction" (click)="$event.stopPropagation()">
{{ 'widgets.maps.use-marker-image-function' | translate }}
</mat-slide-toggle>
</mat-panel-title>
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
<mat-panel-description class="justify-end xs:!hidden" translate>
widget-config.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<tb-gallery-image-input [fxShow]="!tripAnimationMarkerSettingsFormGroup.get('useMarkerImageFunction').value"
<tb-gallery-image-input [class.!hidden]="tripAnimationMarkerSettingsFormGroup.get('useMarkerImageFunction').value"
label="{{ 'widgets.maps.custom-marker-image' | translate }}"
formControlName="markerImage">
</tb-gallery-image-input>
<mat-form-field [fxShow]="!tripAnimationMarkerSettingsFormGroup.get('useMarkerImageFunction').value"
fxFlex class="mat-block">
<mat-form-field [class.!hidden]="tripAnimationMarkerSettingsFormGroup.get('useMarkerImageFunction').value"
class="mat-block">
<mat-label translate>widgets.maps.custom-marker-image-size</mat-label>
<input matInput type="number" min="1" formControlName="markerImageSize">
</mat-form-field>
<tb-js-func [fxShow]="tripAnimationMarkerSettingsFormGroup.get('useMarkerImageFunction').value"
<tb-js-func [class.!hidden]="!tripAnimationMarkerSettingsFormGroup.get('useMarkerImageFunction').value"
formControlName="markerImageFunction"
[globalVariables]="functionScopeVariables"
[functionArgs]="['data', 'images', 'dsData', 'dsIndex']"
functionTitle="{{ 'widgets.maps.marker-image-function' | translate }}"
helpId="widget/lib/map/marker_image_fn">
</tb-js-func>
<tb-multiple-gallery-image-input [fxShow]="tripAnimationMarkerSettingsFormGroup.get('useMarkerImageFunction').value"
<tb-multiple-gallery-image-input [class.!hidden]="!tripAnimationMarkerSettingsFormGroup.get('useMarkerImageFunction').value"
label="{{ 'widgets.maps.marker-images' | translate }}"
formControlName="markerImages">
</tb-multiple-gallery-image-input>

42
ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-path-settings.component.html
View File

@ -18,31 +18,30 @@
<section class="tb-widget-settings" [formGroup]="tripAnimationPathSettingsFormGroup">
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.maps.path-settings</legend>
<section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px">
<section class="!flex flex-col gt-xs:flex-row gt-xs:gap-2">
<tb-color-input
fxFlex
class="flex-1"
formControlName="color"
icon="format_color_fill"
label="{{ 'widgets.maps.path-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="flex-1">
<mat-label translate>widgets.maps.stroke-weight</mat-label>
<input matInput type="number" min="0" formControlName="strokeWeight">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="flex-1">
<mat-label translate>widgets.maps.stroke-opacity</mat-label>
<input matInput type="number" min="0" max="1" formControlName="strokeOpacity">
</mat-form-field>
</section>
<mat-expansion-panel class="tb-settings" [expanded]="tripAnimationPathSettingsFormGroup.get('useColorFunction').value">
<mat-expansion-panel-header fxLayout="row wrap">
<mat-expansion-panel-header class="flex-wrap">
<mat-panel-title>
<mat-slide-toggle formControlName="useColorFunction" (click)="$event.stopPropagation()"
fxLayoutAlign="center">
<mat-slide-toggle formControlName="useColorFunction" (click)="$event.stopPropagation()">
{{ 'widgets.maps.use-path-color-function' | translate }}
</mat-slide-toggle>
</mat-panel-title>
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
<mat-panel-description class="justify-end xs:!hidden" translate>
widget-config.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>
@ -58,20 +57,19 @@
<fieldset class="fields-group fields-group-slider">
<legend class="group-title" translate>widgets.maps.path-decorator</legend>
<mat-expansion-panel class="tb-settings" [expanded]="tripAnimationPathSettingsFormGroup.get('usePolylineDecorator').value">
<mat-expansion-panel-header fxLayout="row wrap">
<mat-expansion-panel-header class="flex-wrap">
<mat-panel-title>
<mat-slide-toggle formControlName="usePolylineDecorator" (click)="$event.stopPropagation()"
fxLayoutAlign="center">
<mat-slide-toggle formControlName="usePolylineDecorator" (click)="$event.stopPropagation()">
{{ 'widgets.maps.use-path-decorator' | translate }}
</mat-slide-toggle>
</mat-panel-title>
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
<mat-panel-description class="justify-end xs:!hidden" translate>
widget-config.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px">
<mat-form-field fxFlex class="mat-block">
<section class="flex flex-col gt-xs:flex-row gt-xs:gap-2">
<mat-form-field class="flex-1">
<mat-label translate>widgets.maps.decorator-symbol</mat-label>
<mat-select required formControlName="decoratorSymbol">
<mat-option *ngFor="let symbol of polylineDecoratorSymbols" [value]="symbol">
@ -79,32 +77,32 @@
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="flex-1">
<mat-label translate>widgets.maps.decorator-symbol-size</mat-label>
<input matInput type="number" min="1" formControlName="decoratorSymbolSize">
</mat-form-field>
</section>
<section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutAlign.gt-xs="start center">
<mat-slide-toggle fxFlex formControlName="useDecoratorCustomColor">
<section class="flex flex-col gap-2 gt-xs:flex-row gt-xs:items-center">
<mat-slide-toggle class="flex-1" formControlName="useDecoratorCustomColor">
{{ 'widgets.maps.use-path-decorator-custom-color' | translate }}
</mat-slide-toggle>
<tb-color-input
fxFlex
class="flex-1"
formControlName="decoratorCustomColor"
icon="format_color_fill"
label="{{ 'widgets.maps.decorator-custom-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
</section>
<section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px">
<mat-form-field fxFlex class="mat-block">
<section class="flex flex-col gt-xs:flex-row gt-xs:gap-2">
<mat-form-field class="flex-1">
<mat-label translate>widgets.maps.decorator-offset</mat-label>
<input matInput formControlName="decoratorOffset">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="flex-1">
<mat-label translate>widgets.maps.end-decorator-offset</mat-label>
<input matInput formControlName="endDecoratorOffset">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="flex-1">
<mat-label translate>widgets.maps.decorator-repeat</mat-label>
<input matInput formControlName="decoratorRepeat">
</mat-form-field>

27
ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-point-settings.component.html
View File

@ -19,39 +19,37 @@
<fieldset class="fields-group fields-group-slider">
<legend class="group-title" translate>widgets.maps.points-settings</legend>
<mat-expansion-panel class="tb-settings" [expanded]="tripAnimationPointSettingsFormGroup.get('showPoints').value">
<mat-expansion-panel-header fxLayout="row wrap">
<mat-expansion-panel-header class="flex-wrap">
<mat-panel-title>
<mat-slide-toggle formControlName="showPoints" (click)="$event.stopPropagation()"
fxLayoutAlign="center">
<mat-slide-toggle formControlName="showPoints" (click)="$event.stopPropagation()">
{{ 'widgets.maps.show-points' | translate }}
</mat-slide-toggle>
</mat-panel-title>
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
<mat-panel-description class="justify-end xs:!hidden" translate>
widget-config.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px">
<section class="flex flex-col gt-xs:flex-row gt-xs:gap-2">
<tb-color-input
fxFlex
class="flex-1"
formControlName="pointColor"
icon="format_color_fill"
label="{{ 'widgets.maps.point-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
<mat-form-field fxFlex class="mat-block">
<mat-form-field class="flex-1">
<mat-label translate>widgets.maps.point-size</mat-label>
<input matInput type="number" min="1" formControlName="pointSize">
</mat-form-field>
</section>
<mat-expansion-panel class="tb-settings" [expanded]="tripAnimationPointSettingsFormGroup.get('useColorPointFunction').value">
<mat-expansion-panel-header fxLayout="row wrap">
<mat-expansion-panel-header class="flex-wrap">
<mat-panel-title>
<mat-slide-toggle formControlName="useColorPointFunction" (click)="$event.stopPropagation()"
fxLayoutAlign="center">
<mat-slide-toggle formControlName="useColorPointFunction" (click)="$event.stopPropagation()">
{{ 'widgets.maps.use-point-color-function' | translate }}
</mat-slide-toggle>
</mat-panel-title>
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
<mat-panel-description class="justify-end xs:!hidden" translate>
widget-config.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>
@ -65,14 +63,13 @@
</ng-template>
</mat-expansion-panel>
<mat-expansion-panel class="tb-settings" [expanded]="tripAnimationPointSettingsFormGroup.get('usePointAsAnchor').value">
<mat-expansion-panel-header fxLayout="row wrap">
<mat-expansion-panel-header class="flex-wrap">
<mat-panel-title>
<mat-slide-toggle formControlName="usePointAsAnchor" (click)="$event.stopPropagation()"
fxLayoutAlign="center">
<mat-slide-toggle formControlName="usePointAsAnchor" (click)="$event.stopPropagation()">
{{ 'widgets.maps.use-point-as-anchor' | translate }}
</mat-slide-toggle>
</mat-panel-title>
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
<mat-panel-description class="justify-end xs:!hidden" translate>
widget-config.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>