Igor Kulikov
7 years ago
37 changed files with 1830 additions and 170 deletions
@ -0,0 +1,65 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2019 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="mat-content" style="position: relative; width: 100%; height: 100%;" |
||||
|
[ngStyle]="{'background-color': layoutCtx.gridSettings.backgroundColor, |
||||
|
'background-image': layoutCtx.gridSettings.backgroundImageUrl ? |
||||
|
'url('+layoutCtx.gridSettings.backgroundImageUrl+')' : 'none', |
||||
|
'background-repeat': 'no-repeat', |
||||
|
'background-attachment': 'scroll', |
||||
|
'background-size': layoutCtx.gridSettings.backgroundSizeMode || '100%', |
||||
|
'background-position': '0% 0%'}"> |
||||
|
<section *ngIf="layoutCtx.widgets.length === 0" fxLayoutAlign="center center" |
||||
|
[ngStyle]="{'color': layoutCtx.gridSettings.color}" |
||||
|
style="text-transform: uppercase; display: flex; z-index: 1; pointer-events: none;" |
||||
|
class="mat-headline tb-absolute-fill"> |
||||
|
<span *ngIf="!isEdit"> |
||||
|
{{'dashboard.no-widgets' | translate}} |
||||
|
</span> |
||||
|
<button mat-button *ngIf="isEdit && !widgetEditMode" class="tb-add-new-widget" |
||||
|
(click)="addWidget($event)"> |
||||
|
<mat-icon class="tb-mat-96">add</mat-icon> |
||||
|
{{ 'dashboard.add-widget' | translate }} |
||||
|
</button> |
||||
|
</section> |
||||
|
<tb-dashboard #dashboard [dashboardStyle]="{'background-color': layoutCtx.gridSettings.backgroundColor, |
||||
|
'background-image': layoutCtx.gridSettings.backgroundImageUrl ? |
||||
|
'url('+layoutCtx.gridSettings.backgroundImageUrl+')' : 'none', |
||||
|
'background-repeat': 'no-repeat', |
||||
|
'background-attachment': 'scroll', |
||||
|
'background-size': layoutCtx.gridSettings.backgroundSizeMode || '100%', |
||||
|
'background-position': '0% 0%'}" |
||||
|
[widgets]="layoutCtx.widgets" |
||||
|
[widgetLayouts]="layoutCtx.widgetLayouts" |
||||
|
[columns]="layoutCtx.gridSettings.columns" |
||||
|
[horizontalMargin]="layoutCtx.gridSettings.margins ? layoutCtx.gridSettings.margins[0] : 10" |
||||
|
[verticalMargin]="layoutCtx.gridSettings.margins ? layoutCtx.gridSettings.margins[1]: 10" |
||||
|
[aliasController]="dashboardCtx.aliasController" |
||||
|
[stateController]="dashboardCtx.stateController" |
||||
|
[dashboardTimewindow]="dashboardCtx.dashboardTimewindow" |
||||
|
[isEdit]="isEdit" |
||||
|
[autofillHeight]="layoutCtx.gridSettings.autoFillHeight && !isEdit" |
||||
|
[mobileAutofillHeight]="layoutCtx.gridSettings.mobileAutoFillHeight && !isEdit" |
||||
|
[mobileRowHeight]="layoutCtx.gridSettings.mobileRowHeight" |
||||
|
[isMobile]="isMobile" |
||||
|
[isMobileDisabled]="widgetEditMode" |
||||
|
[isEditActionEnabled]="isEdit" |
||||
|
[isExportActionEnabled]="isEdit && !widgetEditMode" |
||||
|
[isRemoveActionEnabled]="isEdit && !widgetEditMode" |
||||
|
[ignoreLoading]="layoutCtx.ignoreLoading"> |
||||
|
</tb-dashboard> |
||||
|
</div> |
||||
@ -0,0 +1,23 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2019 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 { |
||||
|
button.tb-add-new-widget { |
||||
|
padding-right: 12px; |
||||
|
font-size: 24px; |
||||
|
border-style: dashed; |
||||
|
border-width: 2px; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,80 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2019 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, OnDestroy, OnInit, Input, ChangeDetectorRef, ViewChild } from '@angular/core'; |
||||
|
import { StateControllerComponent } from '@home/pages/dashboard/states/state-controller.component'; |
||||
|
import { ILayoutController } from '@home/pages/dashboard/layout/layout.models'; |
||||
|
import { DashboardContext, DashboardPageLayoutContext } from '@home/pages/dashboard/dashboard-page.models'; |
||||
|
import { PageComponent } from '@shared/components/page.component'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { Widget } from '@shared/models/widget.models'; |
||||
|
import { WidgetLayouts } from '@shared/models/dashboard.models'; |
||||
|
import { GridsterComponent } from 'angular-gridster2'; |
||||
|
import { IDashboardComponent } from '@home/models/dashboard-component.models'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-dashboard-layout', |
||||
|
templateUrl: './dashboard-layout.component.html', |
||||
|
styleUrls: ['./dashboard-layout.component.scss'] |
||||
|
}) |
||||
|
export class DashboardLayoutComponent extends PageComponent implements ILayoutController, OnInit, OnDestroy { |
||||
|
|
||||
|
layoutCtxValue: DashboardPageLayoutContext; |
||||
|
|
||||
|
@Input() |
||||
|
set layoutCtx(val: DashboardPageLayoutContext) { |
||||
|
this.layoutCtxValue = val; |
||||
|
if (this.layoutCtxValue) { |
||||
|
this.layoutCtxValue.ctrl = this; |
||||
|
} |
||||
|
} |
||||
|
get layoutCtx(): DashboardPageLayoutContext { |
||||
|
return this.layoutCtxValue; |
||||
|
} |
||||
|
|
||||
|
@Input() |
||||
|
dashboardCtx: DashboardContext; |
||||
|
|
||||
|
@Input() |
||||
|
isEdit: boolean; |
||||
|
|
||||
|
@Input() |
||||
|
isMobile: boolean; |
||||
|
|
||||
|
@Input() |
||||
|
widgetEditMode: boolean; |
||||
|
|
||||
|
@ViewChild('dashboard', {static: true}) dashboard: IDashboardComponent; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private cd: ChangeDetectorRef) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
} |
||||
|
|
||||
|
ngOnDestroy(): void { |
||||
|
} |
||||
|
|
||||
|
reload() { |
||||
|
} |
||||
|
|
||||
|
setResizing(layoutVisibilityChanged: boolean) { |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,20 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2019 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.
|
||||
|
///
|
||||
|
|
||||
|
export interface ILayoutController { |
||||
|
reload(); |
||||
|
setResizing(layoutVisibilityChanged: boolean); |
||||
|
} |
||||
@ -0,0 +1,23 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2019 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. |
||||
|
|
||||
|
--> |
||||
|
<mat-select class="default-state-controller" [fxShow]="displayStateSelection()" |
||||
|
[(ngModel)]="stateObject[0].id" (ngModelChange)="selectedStateIdChanged()"> |
||||
|
<mat-option *ngFor="let stateKv of states | keyvalue" [value]="stateKv.key"> |
||||
|
{{getStateName(stateKv.key, stateKv.value)}} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
@ -0,0 +1,20 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2019 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 { |
||||
|
mat-select.default-state-controller { |
||||
|
margin: 0; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,255 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2019 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, |
||||
|
OnInit, |
||||
|
ViewEncapsulation, |
||||
|
Input, |
||||
|
OnDestroy, |
||||
|
OnChanges, |
||||
|
SimpleChanges, |
||||
|
NgZone |
||||
|
} from '@angular/core'; |
||||
|
import { IStateController, StateParams, StateObject } from '@core/api/widget-api.models'; |
||||
|
import { ActivatedRoute, Router } from '@angular/router'; |
||||
|
import { Observable, Subscription, of } from 'rxjs'; |
||||
|
import { IDashboardController } from '@home/pages/dashboard/dashboard-page.models'; |
||||
|
import { DashboardState } from '@shared/models/dashboard.models'; |
||||
|
import { IStateControllerComponent, StateControllerState } from './state-controller.models'; |
||||
|
import { StateControllerComponent } from './state-controller.component'; |
||||
|
import { StatesControllerService } from '@home/pages/dashboard/states/states-controller.service'; |
||||
|
import { EntityId } from '@app/shared/models/id/entity-id'; |
||||
|
import { UtilsService } from '@core/services/utils.service'; |
||||
|
import { base64toObj, objToBase64 } from '@app/core/utils'; |
||||
|
import { DashboardUtilsService } from '@core/services/dashboard-utils.service'; |
||||
|
import { EntityService } from '@core/http/entity.service'; |
||||
|
import { EntityType } from '@shared/models/entity-type.models'; |
||||
|
import { map } from 'rxjs/operators'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-default-state-controller', |
||||
|
templateUrl: './default-state-controller.component.html', |
||||
|
styleUrls: ['./default-state-controller.component.scss'] |
||||
|
}) |
||||
|
export class DefaultStateControllerComponent extends StateControllerComponent implements OnInit, OnDestroy { |
||||
|
|
||||
|
constructor(protected router: Router, |
||||
|
protected route: ActivatedRoute, |
||||
|
protected statesControllerService: StatesControllerService, |
||||
|
private utils: UtilsService, |
||||
|
private entityService: EntityService, |
||||
|
private dashboardUtils: DashboardUtilsService) { |
||||
|
super(router, route, statesControllerService); |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
super.ngOnInit(); |
||||
|
} |
||||
|
|
||||
|
ngOnDestroy(): void { |
||||
|
super.ngOnDestroy(); |
||||
|
} |
||||
|
|
||||
|
protected init() { |
||||
|
if (this.preservedState) { |
||||
|
this.stateObject = this.preservedState; |
||||
|
setTimeout(() => { |
||||
|
this.gotoState(this.stateObject[0].id, true); |
||||
|
}, 1); |
||||
|
} else { |
||||
|
const initialState = this.currentState; |
||||
|
this.stateObject = this.parseState(initialState); |
||||
|
setTimeout(() => { |
||||
|
this.gotoState(this.stateObject[0].id, false); |
||||
|
}, 1); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
protected onMobileChanged() { |
||||
|
} |
||||
|
|
||||
|
protected onStateIdChanged() { |
||||
|
} |
||||
|
|
||||
|
protected onStatesChanged() { |
||||
|
} |
||||
|
|
||||
|
protected onStateChanged() { |
||||
|
this.stateObject = this.parseState(this.currentState); |
||||
|
this.gotoState(this.stateObject[0].id, true); |
||||
|
} |
||||
|
|
||||
|
protected stateControllerId(): string { |
||||
|
return 'default'; |
||||
|
} |
||||
|
|
||||
|
public getStateParams(): StateParams { |
||||
|
if (this.stateObject && this.stateObject.length) { |
||||
|
return this.stateObject[this.stateObject.length - 1].params; |
||||
|
} else { |
||||
|
return {}; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public openState(id: string, params?: StateParams, openRightLayout?: boolean): void { |
||||
|
if (this.states && this.states[id]) { |
||||
|
if (!params) { |
||||
|
params = {}; |
||||
|
} |
||||
|
const newState: StateObject = { |
||||
|
id, |
||||
|
params |
||||
|
}; |
||||
|
this.stateObject[0] = newState; |
||||
|
this.gotoState(this.stateObject[0].id, true, openRightLayout); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public updateState(id: string, params?: StateParams, openRightLayout?: boolean): void { |
||||
|
if (!id) { |
||||
|
id = this.getStateId(); |
||||
|
} |
||||
|
if (this.states && this.states[id]) { |
||||
|
if (!params) { |
||||
|
params = {}; |
||||
|
} |
||||
|
const newState: StateObject = { |
||||
|
id, |
||||
|
params |
||||
|
}; |
||||
|
this.stateObject[0] = newState; |
||||
|
this.gotoState(this.stateObject[0].id, true, openRightLayout); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public getEntityId(entityParamName: string): EntityId { |
||||
|
return null; |
||||
|
} |
||||
|
|
||||
|
public getStateId(): string { |
||||
|
if (this.stateObject && this.stateObject.length) { |
||||
|
return this.stateObject[this.stateObject.length - 1].id; |
||||
|
} else { |
||||
|
return ''; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public getStateIdAtIndex(index: number): string { |
||||
|
if (this.stateObject && this.stateObject[index]) { |
||||
|
return this.stateObject[index].id; |
||||
|
} else { |
||||
|
return ''; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public getStateIndex(): number { |
||||
|
if (this.stateObject && this.stateObject.length) { |
||||
|
return this.stateObject.length - 1; |
||||
|
} else { |
||||
|
return -1; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public getStateParamsByStateId(stateId: string): StateParams { |
||||
|
const stateObj = this.getStateObjById(stateId); |
||||
|
if (stateObj) { |
||||
|
return stateObj.params; |
||||
|
} else { |
||||
|
return null; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public navigatePrevState(index: number): void { |
||||
|
if (index < this.stateObject.length - 1) { |
||||
|
this.stateObject.splice(index + 1, this.stateObject.length - index - 1); |
||||
|
this.gotoState(this.stateObject[this.stateObject.length - 1].id, true); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public resetState(): void { |
||||
|
const rootStateId = this.dashboardUtils.getRootStateId(this.states); |
||||
|
this.stateObject = [ { id: rootStateId, params: {} } ]; |
||||
|
this.gotoState(rootStateId, true); |
||||
|
} |
||||
|
|
||||
|
public getStateName(id: string, state: DashboardState): string { |
||||
|
return this.utils.customTranslation(state.name, id); |
||||
|
} |
||||
|
|
||||
|
public displayStateSelection(): boolean { |
||||
|
return this.states && Object.keys(this.states).length > 1; |
||||
|
} |
||||
|
|
||||
|
public selectedStateIdChanged() { |
||||
|
this.gotoState(this.stateObject[0].id, true); |
||||
|
} |
||||
|
|
||||
|
private parseState(stateBase64: string): StateControllerState { |
||||
|
let result: StateControllerState; |
||||
|
if (stateBase64) { |
||||
|
try { |
||||
|
result = base64toObj(stateBase64); |
||||
|
} catch (e) { |
||||
|
result = [ { id: null, params: {} } ]; |
||||
|
} |
||||
|
} |
||||
|
if (!result) { |
||||
|
result = []; |
||||
|
} |
||||
|
if (!result.length) { |
||||
|
result[0] = { id: null, params: {} }; |
||||
|
} else if (result.length > 1) { |
||||
|
const newResult = []; |
||||
|
newResult.push(result[result.length - 1]); |
||||
|
result = newResult; |
||||
|
} |
||||
|
const rootStateId = this.dashboardUtils.getRootStateId(this.states); |
||||
|
if (!result[0].id) { |
||||
|
result[0].id = rootStateId; |
||||
|
} |
||||
|
if (!this.states[result[0].id]) { |
||||
|
result[0].id = rootStateId; |
||||
|
} |
||||
|
let i = result.length; |
||||
|
while (i--) { |
||||
|
if (!result[i].id || !this.states[result[i].id]) { |
||||
|
result.splice(i, 1); |
||||
|
} |
||||
|
} |
||||
|
return result; |
||||
|
} |
||||
|
|
||||
|
private gotoState(stateId: string, update: boolean, openRightLayout?: boolean) { |
||||
|
if (this.dashboardCtrl.dashboardCtx.state !== stateId) { |
||||
|
this.dashboardCtrl.openDashboardState(stateId, openRightLayout); |
||||
|
if (update) { |
||||
|
this.updateLocation(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private updateLocation() { |
||||
|
if (this.stateObject[0].id) { |
||||
|
const newState = objToBase64(this.stateObject); |
||||
|
this.updateStateParam(newState); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private getStateObjById(id: string): StateObject { |
||||
|
return this.stateObject.find((stateObj) => stateObj.id === id); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,36 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2019 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="entity-state-controller" fxLayout="row" fxLayoutAlign="start center"> |
||||
|
<div *ngIf="!isMobile || stateObject.length === 1" fxLayout="row" fxLayoutAlign="start center"> |
||||
|
<span *ngFor="let state of stateObject; index as i; last as isLast" class="state-entry" [ngStyle]="{fontWeight: isLast ? 'bold' : 'normal', |
||||
|
cursor: isLast ? 'default' : 'pointer'}" (click)="navigatePrevState(i)"> |
||||
|
{{getStateName(i)}} |
||||
|
<span class='state-divider' [fxHide]="isLast"> > </span> |
||||
|
</span> |
||||
|
</div> |
||||
|
<mat-select *ngIf="isMobile && stateObject.length > 1" |
||||
|
[(ngModel)]="selectedStateIndex" (ngModelChange)="selectedStateIndexChanged()"> |
||||
|
<mat-option *ngFor="let state of stateObject; index as i" [value]="i"> |
||||
|
{{getStateName(i)}} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
|
||||
@ -0,0 +1,45 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2019 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 { |
||||
|
.entity-state-controller { |
||||
|
.state-divider { |
||||
|
padding-right: 15px; |
||||
|
padding-left: 15px; |
||||
|
overflow: hidden; |
||||
|
font-size: 18px; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
|
||||
|
.state-entry { |
||||
|
overflow: hidden; |
||||
|
font-size: 18px; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
outline: none; |
||||
|
} |
||||
|
|
||||
|
mat-select { |
||||
|
margin: 0; |
||||
|
|
||||
|
.mat-select-value-text { |
||||
|
font-size: 18px; |
||||
|
font-weight: 700; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,316 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2019 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, |
||||
|
OnInit, |
||||
|
ViewEncapsulation, |
||||
|
Input, |
||||
|
OnDestroy, |
||||
|
OnChanges, |
||||
|
SimpleChanges, |
||||
|
NgZone |
||||
|
} from '@angular/core'; |
||||
|
import { IStateController, StateParams, StateObject } from '@core/api/widget-api.models'; |
||||
|
import { ActivatedRoute, Router } from '@angular/router'; |
||||
|
import { Observable, Subscription, of } from 'rxjs'; |
||||
|
import { IDashboardController } from '@home/pages/dashboard/dashboard-page.models'; |
||||
|
import { DashboardState } from '@shared/models/dashboard.models'; |
||||
|
import { IStateControllerComponent, StateControllerState } from './state-controller.models'; |
||||
|
import { StateControllerComponent } from './state-controller.component'; |
||||
|
import { StatesControllerService } from '@home/pages/dashboard/states/states-controller.service'; |
||||
|
import { EntityId } from '@app/shared/models/id/entity-id'; |
||||
|
import { UtilsService } from '@core/services/utils.service'; |
||||
|
import { base64toObj, objToBase64 } from '@app/core/utils'; |
||||
|
import { DashboardUtilsService } from '@core/services/dashboard-utils.service'; |
||||
|
import { EntityService } from '@core/http/entity.service'; |
||||
|
import { EntityType } from '@shared/models/entity-type.models'; |
||||
|
import { map } from 'rxjs/operators'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-entity-state-controller', |
||||
|
templateUrl: './entity-state-controller.component.html', |
||||
|
styleUrls: ['./entity-state-controller.component.scss'] |
||||
|
}) |
||||
|
export class EntityStateControllerComponent extends StateControllerComponent implements OnInit, OnDestroy { |
||||
|
|
||||
|
private selectedStateIndex = -1; |
||||
|
|
||||
|
constructor(protected router: Router, |
||||
|
protected route: ActivatedRoute, |
||||
|
protected statesControllerService: StatesControllerService, |
||||
|
private utils: UtilsService, |
||||
|
private entityService: EntityService, |
||||
|
private dashboardUtils: DashboardUtilsService) { |
||||
|
super(router, route, statesControllerService); |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
super.ngOnInit(); |
||||
|
} |
||||
|
|
||||
|
ngOnDestroy(): void { |
||||
|
super.ngOnDestroy(); |
||||
|
} |
||||
|
|
||||
|
protected init() { |
||||
|
if (this.preservedState) { |
||||
|
this.stateObject = this.preservedState; |
||||
|
this.selectedStateIndex = this.stateObject.length - 1; |
||||
|
setTimeout(() => { |
||||
|
this.gotoState(this.stateObject[this.stateObject.length - 1].id, true); |
||||
|
}, 1); |
||||
|
} else { |
||||
|
const initialState = this.currentState; |
||||
|
this.stateObject = this.parseState(initialState); |
||||
|
this.selectedStateIndex = this.stateObject.length - 1; |
||||
|
setTimeout(() => { |
||||
|
this.gotoState(this.stateObject[this.stateObject.length - 1].id, false); |
||||
|
}, 1); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
protected onMobileChanged() { |
||||
|
} |
||||
|
|
||||
|
protected onStateIdChanged() { |
||||
|
} |
||||
|
|
||||
|
protected onStatesChanged() { |
||||
|
} |
||||
|
|
||||
|
protected onStateChanged() { |
||||
|
this.stateObject = this.parseState(this.currentState); |
||||
|
this.selectedStateIndex = this.stateObject.length - 1; |
||||
|
this.gotoState(this.stateObject[this.stateObject.length - 1].id, true); |
||||
|
} |
||||
|
|
||||
|
protected stateControllerId(): string { |
||||
|
return 'entity'; |
||||
|
} |
||||
|
|
||||
|
public getStateParams(): StateParams { |
||||
|
if (this.stateObject && this.stateObject.length) { |
||||
|
return this.stateObject[this.stateObject.length - 1].params; |
||||
|
} else { |
||||
|
return {}; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public openState(id: string, params?: StateParams, openRightLayout?: boolean): void { |
||||
|
if (this.states && this.states[id]) { |
||||
|
this.resolveEntity(params).subscribe( |
||||
|
(entityName) => { |
||||
|
params.entityName = entityName; |
||||
|
const newState: StateObject = { |
||||
|
id, |
||||
|
params |
||||
|
}; |
||||
|
this.stateObject.push(newState); |
||||
|
this.selectedStateIndex = this.stateObject.length - 1; |
||||
|
this.gotoState(this.stateObject[this.stateObject.length - 1].id, true, openRightLayout); |
||||
|
} |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public updateState(id: string, params?: StateParams, openRightLayout?: boolean): void { |
||||
|
if (!id) { |
||||
|
id = this.getStateId(); |
||||
|
} |
||||
|
if (this.states && this.states[id]) { |
||||
|
this.resolveEntity(params).subscribe( |
||||
|
(entityName) => { |
||||
|
params.entityName = entityName; |
||||
|
const newState: StateObject = { |
||||
|
id, |
||||
|
params |
||||
|
}; |
||||
|
this.stateObject[this.stateObject.length - 1] = newState; |
||||
|
this.gotoState(this.stateObject[this.stateObject.length - 1].id, true, openRightLayout); |
||||
|
} |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public getEntityId(entityParamName: string): EntityId { |
||||
|
const stateParams = this.getStateParams(); |
||||
|
if (!entityParamName || !entityParamName.length) { |
||||
|
return stateParams.entityId; |
||||
|
} else if (stateParams[entityParamName]) { |
||||
|
return stateParams[entityParamName].entityId; |
||||
|
} |
||||
|
return null; |
||||
|
} |
||||
|
|
||||
|
public getStateId(): string { |
||||
|
if (this.stateObject && this.stateObject.length) { |
||||
|
return this.stateObject[this.stateObject.length - 1].id; |
||||
|
} else { |
||||
|
return ''; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public getStateIdAtIndex(index: number): string { |
||||
|
if (this.stateObject && this.stateObject[index]) { |
||||
|
return this.stateObject[index].id; |
||||
|
} else { |
||||
|
return ''; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public getStateIndex(): number { |
||||
|
if (this.stateObject && this.stateObject.length) { |
||||
|
return this.stateObject.length - 1; |
||||
|
} else { |
||||
|
return -1; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public getStateParamsByStateId(stateId: string): StateParams { |
||||
|
const stateObj = this.getStateObjById(stateId); |
||||
|
if (stateObj) { |
||||
|
return stateObj.params; |
||||
|
} else { |
||||
|
return null; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public navigatePrevState(index: number): void { |
||||
|
if (index < this.stateObject.length - 1) { |
||||
|
this.stateObject.splice(index + 1, this.stateObject.length - index - 1); |
||||
|
this.selectedStateIndex = this.stateObject.length - 1; |
||||
|
this.gotoState(this.stateObject[this.stateObject.length - 1].id, true); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public resetState(): void { |
||||
|
const rootStateId = this.dashboardUtils.getRootStateId(this.states); |
||||
|
this.stateObject = [ { id: rootStateId, params: {} } ]; |
||||
|
this.gotoState(rootStateId, true); |
||||
|
} |
||||
|
|
||||
|
public getStateName(index: number): string { |
||||
|
let result = ''; |
||||
|
if (this.stateObject[index]) { |
||||
|
let stateName = this.states[this.stateObject[index].id].name; |
||||
|
stateName = this.utils.customTranslation(stateName, stateName); |
||||
|
const params = this.stateObject[index].params; |
||||
|
const entityName = params && params.entityName ? params.entityName : ''; |
||||
|
result = this.utils.insertVariable(stateName, 'entityName', entityName); |
||||
|
for (const prop of Object.keys(params)) { |
||||
|
if (params[prop] && params[prop].entityName) { |
||||
|
result = this.utils.insertVariable(result, prop + ':entityName', params[prop].entityName); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
return result; |
||||
|
} |
||||
|
|
||||
|
public selectedStateIndexChanged() { |
||||
|
this.navigatePrevState(this.selectedStateIndex); |
||||
|
} |
||||
|
|
||||
|
private parseState(stateBase64: string): StateControllerState { |
||||
|
let result: StateControllerState; |
||||
|
if (stateBase64) { |
||||
|
try { |
||||
|
result = base64toObj(stateBase64); |
||||
|
} catch (e) { |
||||
|
result = [ { id: null, params: {} } ]; |
||||
|
} |
||||
|
} |
||||
|
if (!result) { |
||||
|
result = []; |
||||
|
} |
||||
|
if (!result.length) { |
||||
|
result[0] = { id: null, params: {} }; |
||||
|
} |
||||
|
const rootStateId = this.dashboardUtils.getRootStateId(this.states); |
||||
|
if (!result[0].id) { |
||||
|
result[0].id = rootStateId; |
||||
|
} |
||||
|
if (!this.states[result[0].id]) { |
||||
|
result[0].id = rootStateId; |
||||
|
} |
||||
|
let i = result.length; |
||||
|
while (i--) { |
||||
|
if (!result[i].id || !this.states[result[i].id]) { |
||||
|
result.splice(i, 1); |
||||
|
} |
||||
|
} |
||||
|
return result; |
||||
|
} |
||||
|
|
||||
|
private gotoState(stateId: string, update: boolean, openRightLayout?: boolean) { |
||||
|
this.dashboardCtrl.openDashboardState(stateId, openRightLayout); |
||||
|
if (update) { |
||||
|
this.updateLocation(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private updateLocation() { |
||||
|
if (this.stateObject[this.stateObject.length - 1].id) { |
||||
|
let newState; |
||||
|
if (this.isDefaultState()) { |
||||
|
newState = null; |
||||
|
} else { |
||||
|
newState = objToBase64(this.stateObject); |
||||
|
} |
||||
|
this.updateStateParam(newState); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private isDefaultState(): boolean { |
||||
|
if (this.stateObject.length === 1) { |
||||
|
const state = this.stateObject[0]; |
||||
|
const rootStateId = this.dashboardUtils.getRootStateId(this.states); |
||||
|
if (state.id === rootStateId && (!state.params || this.isEmpty(state.params))) { |
||||
|
return true; |
||||
|
} |
||||
|
} |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
private isEmpty(obj: any): boolean { |
||||
|
for (const key of Object.keys(obj)) { |
||||
|
return !Object.prototype.hasOwnProperty.call(obj, key); |
||||
|
} |
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
private resolveEntity(params: StateParams): Observable<string> { |
||||
|
if (params && params.targetEntityParamName) { |
||||
|
params = params[params.targetEntityParamName]; |
||||
|
} |
||||
|
if (params && params.entityId && params.entityId.id && params.entityId.entityType) { |
||||
|
if (params.entityName && params.entityName.length) { |
||||
|
return of(params.entityName); |
||||
|
} else { |
||||
|
return this.entityService.getEntity(params.entityId.entityType as EntityType, |
||||
|
params.entityId.id, true, true).pipe( |
||||
|
map((entity) => entity.name) |
||||
|
); |
||||
|
} |
||||
|
} else { |
||||
|
return of(''); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private getStateObjById(id: string): StateObject { |
||||
|
return this.stateObject.find((stateObj) => stateObj.id === id); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,173 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2019 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 { IStateControllerComponent, StateControllerState } from '@home/pages/dashboard/states/state-controller.models'; |
||||
|
import { IDashboardController } from '../dashboard-page.models'; |
||||
|
import { DashboardState } from '@app/shared/models/dashboard.models'; |
||||
|
import { Subscription } from 'rxjs'; |
||||
|
import { OnDestroy, OnInit } from '@angular/core'; |
||||
|
import { ActivatedRoute, Router, Params } from '@angular/router'; |
||||
|
import { StatesControllerService } from '@home/pages/dashboard/states/states-controller.service'; |
||||
|
import { EntityId } from '@app/shared/models/id/entity-id'; |
||||
|
import { StateParams } from '@app/core/api/widget-api.models'; |
||||
|
|
||||
|
export abstract class StateControllerComponent implements IStateControllerComponent, OnInit, OnDestroy { |
||||
|
|
||||
|
stateObject: StateControllerState = []; |
||||
|
dashboardCtrl: IDashboardController; |
||||
|
preservedState: any; |
||||
|
|
||||
|
isMobileValue: boolean; |
||||
|
set isMobile(val: boolean) { |
||||
|
if (this.isMobileValue !== val) { |
||||
|
this.isMobileValue = val; |
||||
|
if (this.inited) { |
||||
|
this.onMobileChanged(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
get isMobile(): boolean { |
||||
|
return this.isMobileValue; |
||||
|
} |
||||
|
|
||||
|
stateValue: string; |
||||
|
set state(val: string) { |
||||
|
if (this.stateValue !== val) { |
||||
|
this.stateValue = val; |
||||
|
if (this.inited) { |
||||
|
this.onStateIdChanged(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
get state(): string { |
||||
|
return this.stateValue; |
||||
|
} |
||||
|
|
||||
|
dashboardIdValue: string; |
||||
|
set dashboardId(val: string) { |
||||
|
if (this.dashboardIdValue !== val) { |
||||
|
this.dashboardIdValue = val; |
||||
|
if (this.inited) { |
||||
|
this.init(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
get dashboardId(): string { |
||||
|
return this.dashboardIdValue; |
||||
|
} |
||||
|
|
||||
|
statesValue: { [id: string]: DashboardState }; |
||||
|
set states(val: { [id: string]: DashboardState }) { |
||||
|
if (this.statesValue !== val) { |
||||
|
this.statesValue = val; |
||||
|
if (this.inited) { |
||||
|
this.onStatesChanged(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
get states(): { [id: string]: DashboardState } { |
||||
|
return this.statesValue; |
||||
|
} |
||||
|
|
||||
|
currentState: string; |
||||
|
|
||||
|
private rxSubscriptions = new Array<Subscription>(); |
||||
|
|
||||
|
private inited = false; |
||||
|
|
||||
|
constructor(protected router: Router, |
||||
|
protected route: ActivatedRoute, |
||||
|
protected statesControllerService: StatesControllerService) { |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.rxSubscriptions.push(this.route.queryParamMap.subscribe((paramMap) => { |
||||
|
const newState = paramMap.get('state'); |
||||
|
if (this.currentState !== newState) { |
||||
|
this.currentState = newState; |
||||
|
if (this.inited) { |
||||
|
this.onStateChanged(); |
||||
|
} |
||||
|
} |
||||
|
})); |
||||
|
this.init(); |
||||
|
this.inited = true; |
||||
|
} |
||||
|
|
||||
|
ngOnDestroy(): void { |
||||
|
this.rxSubscriptions.forEach((subscription) => { |
||||
|
subscription.unsubscribe(); |
||||
|
}); |
||||
|
this.rxSubscriptions.length = 0; |
||||
|
} |
||||
|
|
||||
|
protected updateStateParam(newState: string) { |
||||
|
this.currentState = newState; |
||||
|
const queryParams: Params = { state: this.currentState }; |
||||
|
this.router.navigate( |
||||
|
[], |
||||
|
{ |
||||
|
relativeTo: this.route, |
||||
|
queryParams, |
||||
|
queryParamsHandling: 'merge', |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
public openRightLayout(): void { |
||||
|
this.dashboardCtrl.openRightLayout(); |
||||
|
} |
||||
|
|
||||
|
public preserveState() { |
||||
|
this.statesControllerService.preserveStateControllerState(this.stateControllerId(), this.stateObject); |
||||
|
} |
||||
|
|
||||
|
public cleanupPreservedStates() { |
||||
|
this.statesControllerService.cleanupPreservedStates(); |
||||
|
} |
||||
|
|
||||
|
protected abstract init(); |
||||
|
|
||||
|
protected abstract onMobileChanged(); |
||||
|
|
||||
|
protected abstract onStateIdChanged(); |
||||
|
|
||||
|
protected abstract onStatesChanged(); |
||||
|
|
||||
|
protected abstract onStateChanged(); |
||||
|
|
||||
|
protected abstract stateControllerId(): string; |
||||
|
|
||||
|
public abstract getEntityId(entityParamName: string): EntityId; |
||||
|
|
||||
|
public abstract getStateId(): string; |
||||
|
|
||||
|
public abstract getStateIdAtIndex(index: number): string; |
||||
|
|
||||
|
public abstract getStateIndex(): number; |
||||
|
|
||||
|
public abstract getStateParams(): StateParams; |
||||
|
|
||||
|
public abstract getStateParamsByStateId(stateId: string): StateParams; |
||||
|
|
||||
|
public abstract navigatePrevState(index: number): void; |
||||
|
|
||||
|
public abstract openState(id: string, params?: StateParams, openRightLayout?: boolean): void; |
||||
|
|
||||
|
public abstract resetState(): void; |
||||
|
|
||||
|
public abstract updateState(id?: string, params?: StateParams, openRightLayout?: boolean): void; |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,30 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2019 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 { IStateController, StateObject } from '@core/api/widget-api.models'; |
||||
|
import { IDashboardController } from '@home/pages/dashboard/dashboard-page.models'; |
||||
|
import { DashboardState } from '@shared/models/dashboard.models'; |
||||
|
|
||||
|
export declare type StateControllerState = StateObject[]; |
||||
|
|
||||
|
export interface IStateControllerComponent extends IStateController { |
||||
|
state: string; |
||||
|
isMobile: boolean; |
||||
|
dashboardCtrl: IDashboardController; |
||||
|
states: {[id: string]: DashboardState }; |
||||
|
dashboardId: string; |
||||
|
preservedState: any; |
||||
|
} |
||||
@ -0,0 +1,122 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2019 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 { |
||||
|
ComponentRef, |
||||
|
Directive, |
||||
|
ElementRef, |
||||
|
Input, |
||||
|
OnChanges, |
||||
|
OnInit, |
||||
|
OnDestroy, |
||||
|
SimpleChanges, |
||||
|
ViewContainerRef, |
||||
|
ChangeDetectorRef |
||||
|
} from '@angular/core'; |
||||
|
import { DashboardPageComponent } from '@home/pages/dashboard/dashboard-page.component'; |
||||
|
import { DashboardState } from '@shared/models/dashboard.models'; |
||||
|
import { IDashboardController } from '@home/pages/dashboard/dashboard-page.models'; |
||||
|
import { StatesControllerService } from '@home/pages/dashboard/states/states-controller.service'; |
||||
|
import { IStateController } from '@core/api/widget-api.models'; |
||||
|
import { IStateControllerComponent } from '@home/pages/dashboard/states/state-controller.models'; |
||||
|
|
||||
|
@Directive({ |
||||
|
selector: 'tb-states-component' |
||||
|
}) |
||||
|
export class StatesComponentDirective implements OnInit, OnDestroy, OnChanges { |
||||
|
|
||||
|
@Input() |
||||
|
statesControllerId: string; |
||||
|
|
||||
|
@Input() |
||||
|
dashboardCtrl: IDashboardController; |
||||
|
|
||||
|
@Input() |
||||
|
dashboardId: string; |
||||
|
|
||||
|
@Input() |
||||
|
states: {[id: string]: DashboardState }; |
||||
|
|
||||
|
@Input() |
||||
|
state: string; |
||||
|
|
||||
|
@Input() |
||||
|
isMobile: boolean; |
||||
|
|
||||
|
stateControllerComponentRef: ComponentRef<IStateControllerComponent>; |
||||
|
stateControllerComponent: IStateControllerComponent; |
||||
|
|
||||
|
constructor(private viewContainerRef: ViewContainerRef, |
||||
|
private statesControllerService: StatesControllerService) { |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.init(); |
||||
|
} |
||||
|
|
||||
|
ngOnDestroy(): void { |
||||
|
this.destroy(); |
||||
|
} |
||||
|
|
||||
|
ngOnChanges(changes: SimpleChanges): void { |
||||
|
for (const propName of Object.keys(changes)) { |
||||
|
const change = changes[propName]; |
||||
|
if (!change.firstChange && change.currentValue !== change.previousValue) { |
||||
|
if (propName === 'statesControllerId') { |
||||
|
this.reInit(); |
||||
|
} else if (propName === 'states') { |
||||
|
this.stateControllerComponent.states = this.states; |
||||
|
} else if (propName === 'dashboardId') { |
||||
|
this.stateControllerComponent.dashboardId = this.dashboardId; |
||||
|
} else if (propName === 'isMobile') { |
||||
|
this.stateControllerComponent.isMobile = this.isMobile; |
||||
|
} else if (propName === 'state') { |
||||
|
this.stateControllerComponent.state = this.state; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private reInit() { |
||||
|
this.destroy(); |
||||
|
this.init(); |
||||
|
} |
||||
|
|
||||
|
private init() { |
||||
|
this.viewContainerRef.clear(); |
||||
|
let stateControllerData = this.statesControllerService.getStateController(this.statesControllerId); |
||||
|
if (!stateControllerData) { |
||||
|
stateControllerData = this.statesControllerService.getStateController('default'); |
||||
|
} |
||||
|
const preservedState = this.statesControllerService.withdrawStateControllerState(this.statesControllerId); |
||||
|
const stateControllerFactory = stateControllerData.factory; |
||||
|
this.stateControllerComponentRef = this.viewContainerRef.createComponent(stateControllerFactory); |
||||
|
this.stateControllerComponent = this.stateControllerComponentRef.instance; |
||||
|
this.dashboardCtrl.dashboardCtx.stateController = this.stateControllerComponent; |
||||
|
this.stateControllerComponent.preservedState = preservedState; |
||||
|
this.stateControllerComponent.dashboardCtrl = this.dashboardCtrl; |
||||
|
this.stateControllerComponent.state = this.state; |
||||
|
this.stateControllerComponent.isMobile = this.isMobile; |
||||
|
this.stateControllerComponent.states = this.states; |
||||
|
this.stateControllerComponent.dashboardId = this.dashboardId; |
||||
|
} |
||||
|
|
||||
|
private destroy() { |
||||
|
if (this.stateControllerComponentRef) { |
||||
|
this.stateControllerComponentRef.destroy(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,56 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2019 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { NgModule } from '@angular/core'; |
||||
|
import { CommonModule } from '@angular/common'; |
||||
|
import { SharedModule } from '@shared/shared.module'; |
||||
|
import { HomeComponentsModule } from '@modules/home/components/home-components.module'; |
||||
|
import { StatesControllerService } from './states-controller.service'; |
||||
|
import { EntityStateControllerComponent } from './entity-state-controller.component'; |
||||
|
import { StatesComponentDirective } from './states-component.directive'; |
||||
|
import { HomeDialogsModule } from '@app/modules/home/dialogs/home-dialogs.module'; |
||||
|
import { DefaultStateControllerComponent } from '@home/pages/dashboard/states/default-state-controller.component'; |
||||
|
|
||||
|
@NgModule({ |
||||
|
entryComponents: [ |
||||
|
DefaultStateControllerComponent, |
||||
|
EntityStateControllerComponent |
||||
|
], |
||||
|
declarations: [ |
||||
|
StatesComponentDirective, |
||||
|
DefaultStateControllerComponent, |
||||
|
EntityStateControllerComponent |
||||
|
], |
||||
|
imports: [ |
||||
|
CommonModule, |
||||
|
SharedModule, |
||||
|
HomeComponentsModule, |
||||
|
HomeDialogsModule |
||||
|
], |
||||
|
exports: [ |
||||
|
StatesComponentDirective |
||||
|
], |
||||
|
providers: [ |
||||
|
StatesControllerService |
||||
|
] |
||||
|
}) |
||||
|
export class StatesControllerModule { |
||||
|
|
||||
|
constructor(private statesControllerService: StatesControllerService) { |
||||
|
this.statesControllerService.registerStatesController('default', DefaultStateControllerComponent); |
||||
|
this.statesControllerService.registerStatesController('entity', EntityStateControllerComponent); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,64 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2019 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 { ComponentFactory, ComponentFactoryResolver, Injectable, Type } from '@angular/core'; |
||||
|
import { deepClone } from '@core/utils'; |
||||
|
import { IStateControllerComponent } from '@home/pages/dashboard/states/state-controller.models'; |
||||
|
|
||||
|
export interface StateControllerData { |
||||
|
factory: ComponentFactory<IStateControllerComponent>; |
||||
|
state?: any; |
||||
|
} |
||||
|
|
||||
|
@Injectable() |
||||
|
export class StatesControllerService { |
||||
|
|
||||
|
statesControllers: {[stateControllerId: string]: StateControllerData} = {}; |
||||
|
|
||||
|
constructor(private componentFactoryResolver: ComponentFactoryResolver) { |
||||
|
} |
||||
|
|
||||
|
public registerStatesController(stateControllerId: string, stateControllerComponent: Type<IStateControllerComponent>): void { |
||||
|
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(stateControllerComponent); |
||||
|
this.statesControllers[stateControllerId] = { |
||||
|
factory: componentFactory |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
public getStateControllers(): {[stateControllerId: string]: StateControllerData} { |
||||
|
return this.statesControllers; |
||||
|
} |
||||
|
|
||||
|
public getStateController(stateControllerId: string): StateControllerData { |
||||
|
return this.statesControllers[stateControllerId]; |
||||
|
} |
||||
|
|
||||
|
public preserveStateControllerState(stateControllerId: string, state: any) { |
||||
|
this.statesControllers[stateControllerId].state = deepClone(state); |
||||
|
} |
||||
|
|
||||
|
public withdrawStateControllerState(stateControllerId: string): any { |
||||
|
const state = this.statesControllers[stateControllerId].state; |
||||
|
this.statesControllers[stateControllerId].state = null; |
||||
|
return state; |
||||
|
} |
||||
|
|
||||
|
public cleanupPreservedStates() { |
||||
|
for (const stateControllerId of Object.keys(this.statesControllers)) { |
||||
|
this.statesControllers[stateControllerId].state = null; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue