Vladyslav_Prykhodko
2 years ago
13 changed files with 149 additions and 136 deletions
@ -0,0 +1,69 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2024 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, Input, OnDestroy, OnInit } from '@angular/core'; |
||||
|
import { DashboardPageComponent } from '@home/components/dashboard-page/dashboard-page.component'; |
||||
|
import { Subscription } from 'rxjs'; |
||||
|
import { BreakpointInfo } from '@shared/models/dashboard.models'; |
||||
|
import { DashboardUtilsService } from '@core/services/dashboard-utils.service'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-select-dashboard-breakpoint', |
||||
|
templateUrl: './select-dashboard-breakpoint.component.html', |
||||
|
styleUrls: ['./select-dashboard-breakpoint.component.scss'] |
||||
|
}) |
||||
|
export class SelectDashboardBreakpointComponent implements OnInit, OnDestroy { |
||||
|
|
||||
|
@Input() |
||||
|
dashboardCtrl: DashboardPageComponent; |
||||
|
|
||||
|
selectedBreakpoint = 'default'; |
||||
|
|
||||
|
breakpointsData: {[breakpointId in string]: BreakpointInfo} = {}; |
||||
|
|
||||
|
breakpointIds: Array<string> = ['default']; |
||||
|
|
||||
|
private layoutDataChanged$: Subscription; |
||||
|
|
||||
|
constructor(private dashboardUtils: DashboardUtilsService) { |
||||
|
this.dashboardUtils.getListBreakpoint().forEach((breakpoint) => { |
||||
|
this.breakpointsData[breakpoint.id] = breakpoint; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
ngOnInit() { |
||||
|
this.layoutDataChanged$ = this.dashboardCtrl.layouts.main.layoutCtx.layoutDataChanged.subscribe(() => { |
||||
|
if (this.dashboardCtrl.layouts.main.layoutCtx.layoutData) { |
||||
|
this.breakpointIds = Object.keys(this.dashboardCtrl.layouts.main.layoutCtx?.layoutData); |
||||
|
if (this.breakpointIds.indexOf(this.dashboardCtrl.layouts.main.layoutCtx.breakpoint) > -1) { |
||||
|
this.selectedBreakpoint = this.dashboardCtrl.layouts.main.layoutCtx.breakpoint; |
||||
|
} else { |
||||
|
this.selectedBreakpoint = 'default'; |
||||
|
this.dashboardCtrl.layouts.main.layoutCtx.breakpoint = this.selectedBreakpoint; |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
ngOnDestroy() { |
||||
|
this.layoutDataChanged$.unsubscribe(); |
||||
|
} |
||||
|
|
||||
|
selectLayoutChanged() { |
||||
|
this.dashboardCtrl.layouts.main.layoutCtx.ctrl.updatedCurrentBreakpoint(this.selectedBreakpoint); |
||||
|
this.dashboardCtrl.updateLayoutSizes(); |
||||
|
} |
||||
|
} |
||||
@ -1,77 +0,0 @@ |
|||||
///
|
|
||||
/// Copyright © 2016-2024 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, Input, OnDestroy, OnInit } from '@angular/core'; |
|
||||
import { DashboardPageComponent } from '@home/components/dashboard-page/dashboard-page.component'; |
|
||||
import { Subscription } from 'rxjs'; |
|
||||
|
|
||||
@Component({ |
|
||||
selector: 'tb-select-dashboard-layout', |
|
||||
templateUrl: './select-dashboard-layout.component.html', |
|
||||
styleUrls: ['./select-dashboard-layout.component.scss'] |
|
||||
}) |
|
||||
export class SelectDashboardLayoutComponent implements OnInit, OnDestroy { |
|
||||
|
|
||||
@Input() |
|
||||
dashboardCtrl: DashboardPageComponent; |
|
||||
|
|
||||
layout = { |
|
||||
default: 'Default', |
|
||||
xs: 'xs', |
|
||||
sm: 'sm', |
|
||||
md: 'md', |
|
||||
lg: 'lg', |
|
||||
xl: 'xl' |
|
||||
}; |
|
||||
|
|
||||
layouts = Object.keys(this.layout); |
|
||||
|
|
||||
selectLayout = 'default'; |
|
||||
|
|
||||
private allowBreakpointsSize = new Set<string>(); |
|
||||
|
|
||||
private stateChanged$: Subscription; |
|
||||
|
|
||||
constructor() { } |
|
||||
|
|
||||
ngOnInit() { |
|
||||
this.stateChanged$ = this.dashboardCtrl.dashboardCtx.stateChanged.subscribe(() => { |
|
||||
if (this.dashboardCtrl.layouts.main.layoutCtx.layoutData) { |
|
||||
this.allowBreakpointsSize = new Set(Object.keys(this.dashboardCtrl.layouts.main.layoutCtx?.layoutData)); |
|
||||
} else { |
|
||||
this.allowBreakpointsSize.add('default'); |
|
||||
} |
|
||||
if (this.allowBreakpointsSize.has(this.dashboardCtrl.layouts.main.layoutCtx.breakpoint)) { |
|
||||
this.selectLayout = this.dashboardCtrl.layouts.main.layoutCtx.breakpoint; |
|
||||
} else { |
|
||||
this.selectLayout = 'default'; |
|
||||
this.dashboardCtrl.layouts.main.layoutCtx.breakpoint = this.selectLayout; |
|
||||
} |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
ngOnDestroy() { |
|
||||
this.stateChanged$.unsubscribe(); |
|
||||
} |
|
||||
|
|
||||
selectLayoutChanged() { |
|
||||
if (!this.dashboardCtrl.layouts.main.layoutCtx.layoutData[this.selectLayout]) { |
|
||||
this.dashboardCtrl.layouts.main.layoutCtx.ctrl.createBreakpointConfig(this.selectLayout); |
|
||||
} |
|
||||
this.dashboardCtrl.layouts.main.layoutCtx.ctrl.updatedCurrentBreakpoint(this.selectLayout); |
|
||||
this.dashboardCtrl.updateLayoutSizes(); |
|
||||
} |
|
||||
} |
|
||||
Loading…
Reference in new issue