Igor Kulikov
5 years ago
11 changed files with 499 additions and 226 deletions
@ -0,0 +1,112 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2021 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 tb-fullscreen [fullscreen]="widget.isFullscreen" |
||||
|
[fullscreenBackgroundStyle]="dashboardStyle" |
||||
|
[fullscreenBackgroundImage]="backgroundImage" |
||||
|
(fullscreenChanged)="onFullscreenChanged($event)" |
||||
|
fxLayout="column" |
||||
|
class="tb-widget" |
||||
|
[ngClass]="{ |
||||
|
'tb-highlighted': isHighlighted(widget), |
||||
|
'tb-not-highlighted': isNotHighlighted(widget), |
||||
|
'mat-elevation-z4': widget.dropShadow, |
||||
|
'tb-has-timewindow': widget.hasTimewindow |
||||
|
}" |
||||
|
[ngStyle]="widget.style" |
||||
|
(mousedown)="onMouseDown($event)" |
||||
|
(click)="onClicked($event)" |
||||
|
(contextmenu)="onContextMenu($event)"> |
||||
|
<div *ngIf="!!widgetComponent.widgetContext?.inited" fxLayout="row" fxLayoutAlign="space-between start"> |
||||
|
<div class="tb-widget-title" fxLayout="column" fxLayoutAlign="center start" *ngIf="widget.showWidgetTitlePanel"> |
||||
|
<span *ngIf="widget.showTitle" |
||||
|
[ngClass]="{'single-row': widget.hasTimewindow}" |
||||
|
[ngStyle]="widget.titleStyle" |
||||
|
[matTooltip]="widget.titleTooltip" |
||||
|
matTooltipClass="tb-tooltip-multiline" |
||||
|
matTooltipPosition="above" |
||||
|
class="mat-subheading-2 title"> |
||||
|
<mat-icon *ngIf="widget.showTitleIcon" [ngStyle]="widget.titleIconStyle">{{widget.titleIcon}}</mat-icon> |
||||
|
{{widget.customTranslatedTitle}} |
||||
|
</span> |
||||
|
<tb-timewindow *ngIf="widget.hasTimewindow" |
||||
|
aggregation="{{widget.hasAggregation}}" |
||||
|
timezone="true" |
||||
|
[isEdit]="isEdit" |
||||
|
[(ngModel)]="widgetComponent.widget.config.timewindow" |
||||
|
(ngModelChange)="widgetComponent.onTimewindowChanged($event)"> |
||||
|
</tb-timewindow> |
||||
|
</div> |
||||
|
<div *ngIf="widget.showWidgetActions" |
||||
|
class="tb-widget-actions" |
||||
|
[ngClass]="{'tb-widget-actions-absolute': !(widget.showWidgetTitlePanel&&(widget.showTitle||widget.hasAggregation))}" |
||||
|
fxLayout="row" |
||||
|
fxLayoutAlign="start center" |
||||
|
(mousedown)="$event.stopPropagation()"> |
||||
|
<button mat-button mat-icon-button *ngFor="let action of widget.customHeaderActions" |
||||
|
[fxShow]="!isEdit" |
||||
|
(click)="action.onAction($event)" |
||||
|
matTooltip="{{ action.displayName }}" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>{{ action.icon }}</mat-icon> |
||||
|
</button> |
||||
|
<button mat-button mat-icon-button *ngFor="let action of widget.widgetActions" |
||||
|
[fxShow]="!isEdit && action.show" |
||||
|
(click)="action.onAction($event)" |
||||
|
matTooltip="{{ action.name | translate }}" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>{{ action.icon }}</mat-icon> |
||||
|
</button> |
||||
|
<button mat-button mat-icon-button |
||||
|
[fxShow]="!isEdit && widget.enableFullscreen" |
||||
|
(click)="$event.stopPropagation(); widget.isFullscreen = !widget.isFullscreen" |
||||
|
matTooltip="{{(widget.isFullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>{{ widget.isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon> |
||||
|
</button> |
||||
|
<button mat-button mat-icon-button |
||||
|
[fxShow]="isEditActionEnabled && !widget.isFullscreen" |
||||
|
(click)="onEdit($event)" |
||||
|
matTooltip="{{ 'widget.edit' | translate }}" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>edit</mat-icon> |
||||
|
</button> |
||||
|
<button mat-button mat-icon-button |
||||
|
[fxShow]="isExportActionEnabled && !widget.isFullscreen" |
||||
|
(click)="onExport($event)" |
||||
|
matTooltip="{{ 'widget.export' | translate }}" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>file_download</mat-icon> |
||||
|
</button> |
||||
|
<button mat-button mat-icon-button |
||||
|
[fxShow]="isRemoveActionEnabled && !widget.isFullscreen" |
||||
|
(click)="onRemove($event);" |
||||
|
matTooltip="{{ 'widget.remove' | translate }}" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>close</mat-icon> |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div fxFlex fxLayout="column" class="tb-widget-content" [ngClass]="{'tb-no-interaction': disableWidgetInteraction}"> |
||||
|
<tb-widget fxFlex |
||||
|
#widgetComponent |
||||
|
[dashboardWidget]="widget" |
||||
|
[isEdit]="isEdit" |
||||
|
[isMobile]="isMobile"> |
||||
|
</tb-widget> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,117 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2021 The Thingsboard Authors |
||||
|
* |
||||
|
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
* you may not use this file except in compliance with the License. |
||||
|
* You may obtain a copy of the License at |
||||
|
* |
||||
|
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
* |
||||
|
* Unless required by applicable law or agreed to in writing, software |
||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
* See the License for the specific language governing permissions and |
||||
|
* limitations under the License. |
||||
|
*/ |
||||
|
:host { |
||||
|
|
||||
|
} |
||||
|
|
||||
|
tb-widget.tb-widget { |
||||
|
position: relative; |
||||
|
height: 100%; |
||||
|
margin: 0; |
||||
|
overflow: hidden; |
||||
|
outline: none; |
||||
|
|
||||
|
transition: all .2s ease-in-out; |
||||
|
} |
||||
|
|
||||
|
div.tb-widget { |
||||
|
position: relative; |
||||
|
height: 100%; |
||||
|
margin: 0; |
||||
|
overflow: hidden; |
||||
|
outline: none; |
||||
|
|
||||
|
transition: all .2s ease-in-out; |
||||
|
|
||||
|
.tb-widget-title { |
||||
|
max-height: 65px; |
||||
|
padding-top: 5px; |
||||
|
padding-left: 5px; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
tb-timewindow { |
||||
|
font-size: 14px; |
||||
|
opacity: .85; |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
width: 100%; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
line-height: 24px; |
||||
|
letter-spacing: .01em; |
||||
|
margin: 0; |
||||
|
display: -webkit-box; |
||||
|
-webkit-box-orient: vertical; |
||||
|
-webkit-line-clamp: 2; |
||||
|
|
||||
|
&.single-row{ |
||||
|
-webkit-line-clamp: 1; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.tb-widget-actions { |
||||
|
z-index: 19; |
||||
|
margin: 5px 0 0; |
||||
|
|
||||
|
&-absolute { |
||||
|
position: absolute; |
||||
|
top: 3px; |
||||
|
right: 8px; |
||||
|
z-index: 150; |
||||
|
} |
||||
|
|
||||
|
button.mat-icon-button { |
||||
|
width: 32px; |
||||
|
min-width: 32px; |
||||
|
height: 32px; |
||||
|
min-height: 32px; |
||||
|
padding: 0 !important; |
||||
|
margin: 0 !important; |
||||
|
line-height: 20px; |
||||
|
|
||||
|
mat-icon { |
||||
|
width: 20px; |
||||
|
min-width: 20px; |
||||
|
height: 20px; |
||||
|
min-height: 20px; |
||||
|
font-size: 20px; |
||||
|
line-height: 20px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.tb-widget-content { |
||||
|
&.tb-no-interaction { |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
tb-widget { |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.tb-highlighted { |
||||
|
border: 1px solid #039be5; |
||||
|
box-shadow: 0 0 20px #039be5; |
||||
|
} |
||||
|
|
||||
|
&.tb-not-highlighted { |
||||
|
opacity: .5; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,153 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2021 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 { |
||||
|
ChangeDetectionStrategy, |
||||
|
ChangeDetectorRef, |
||||
|
Component, |
||||
|
EventEmitter, |
||||
|
Input, |
||||
|
OnInit, |
||||
|
Output |
||||
|
} from '@angular/core'; |
||||
|
import { PageComponent } from '@shared/components/page.component'; |
||||
|
import { DashboardWidget, DashboardWidgets } from '@home/models/dashboard-component.models'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { SafeStyle } from '@angular/platform-browser'; |
||||
|
|
||||
|
export enum WidgetComponentActionType { |
||||
|
MOUSE_DOWN, |
||||
|
CLICKED, |
||||
|
CONTEXT_MENU, |
||||
|
EDIT, |
||||
|
EXPORT, |
||||
|
REMOVE |
||||
|
} |
||||
|
|
||||
|
export class WidgetComponentAction { |
||||
|
event: MouseEvent; |
||||
|
actionType: WidgetComponentActionType; |
||||
|
} |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-widget-container', |
||||
|
templateUrl: './widget-container.component.html', |
||||
|
styleUrls: ['./widget-container.component.scss'], |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush |
||||
|
}) |
||||
|
export class WidgetContainerComponent extends PageComponent implements OnInit { |
||||
|
|
||||
|
@Input() |
||||
|
widget: DashboardWidget; |
||||
|
|
||||
|
@Input() |
||||
|
dashboardStyle: {[klass: string]: any}; |
||||
|
|
||||
|
@Input() |
||||
|
backgroundImage: SafeStyle | string; |
||||
|
|
||||
|
@Input() |
||||
|
isEdit: boolean; |
||||
|
|
||||
|
@Input() |
||||
|
isMobile: boolean; |
||||
|
|
||||
|
@Input() |
||||
|
dashboardWidgets: DashboardWidgets; |
||||
|
|
||||
|
@Input() |
||||
|
isEditActionEnabled: boolean; |
||||
|
|
||||
|
@Input() |
||||
|
isExportActionEnabled: boolean; |
||||
|
|
||||
|
@Input() |
||||
|
isRemoveActionEnabled: boolean; |
||||
|
|
||||
|
@Input() |
||||
|
disableWidgetInteraction = false; |
||||
|
|
||||
|
@Output() |
||||
|
widgetFullscreenChanged: EventEmitter<boolean> = new EventEmitter<boolean>(); |
||||
|
|
||||
|
@Output() |
||||
|
widgetComponentAction: EventEmitter<WidgetComponentAction> = new EventEmitter<WidgetComponentAction>(); |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private cd: ChangeDetectorRef) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.widget.widgetContext.containerChangeDetector = this.cd; |
||||
|
} |
||||
|
|
||||
|
isHighlighted(widget: DashboardWidget) { |
||||
|
return this.dashboardWidgets.isHighlighted(widget); |
||||
|
} |
||||
|
|
||||
|
isNotHighlighted(widget: DashboardWidget) { |
||||
|
return this.dashboardWidgets.isNotHighlighted(widget); |
||||
|
} |
||||
|
|
||||
|
onFullscreenChanged(expanded: boolean) { |
||||
|
this.widgetFullscreenChanged.emit(expanded); |
||||
|
} |
||||
|
|
||||
|
onMouseDown(event: MouseEvent) { |
||||
|
this.widgetComponentAction.emit({ |
||||
|
event, |
||||
|
actionType: WidgetComponentActionType.MOUSE_DOWN |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
onClicked(event: MouseEvent) { |
||||
|
this.widgetComponentAction.emit({ |
||||
|
event, |
||||
|
actionType: WidgetComponentActionType.CLICKED |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
onContextMenu(event: MouseEvent) { |
||||
|
this.widgetComponentAction.emit({ |
||||
|
event, |
||||
|
actionType: WidgetComponentActionType.CONTEXT_MENU |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
onEdit(event: MouseEvent) { |
||||
|
this.widgetComponentAction.emit({ |
||||
|
event, |
||||
|
actionType: WidgetComponentActionType.EDIT |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
onExport(event: MouseEvent) { |
||||
|
this.widgetComponentAction.emit({ |
||||
|
event, |
||||
|
actionType: WidgetComponentActionType.EXPORT |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
onRemove(event: MouseEvent) { |
||||
|
this.widgetComponentAction.emit({ |
||||
|
event, |
||||
|
actionType: WidgetComponentActionType.REMOVE |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
} |
||||
Loading…
Reference in new issue