1/* 2 * Copyright (C) 2023 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16import { element, BaseElement } from '../../../../../base-ui/BaseElement'; 17import { LitTable } from '../../../../../base-ui/table/lit-table'; 18import { XpowerComponentTopStruct } from './TabPaneXpowerComponentTop'; 19import { sortByColumn } from './XpowerUtil'; 20 21@element('tabpane-xpower-component-display') 22export class TabPaneXpowerComponentDisplay extends BaseElement { 23 private xpowerComponentDisplayTbl: LitTable | null | undefined; 24 private currentDataList: Array<XpowerComponentTopStruct> = []; 25 26 set data(selectionDataList: Array<XpowerComponentTopStruct>) { 27 this.currentDataList = selectionDataList; 28 this.xpowerComponentDisplayTbl!.loading = true; 29 this.xpowerComponentDisplayTbl!.recycleDataSource = selectionDataList; 30 this.xpowerComponentDisplayTbl!.loading = false; 31 } 32 33 initElements(): void { 34 this.xpowerComponentDisplayTbl = this.shadowRoot?.querySelector<LitTable>('#lit-table'); 35 } 36 37 connectedCallback(): void { 38 super.connectedCallback(); 39 this.xpowerComponentDisplayTbl!.addEventListener('column-click', (evt): void => { 40 // @ts-ignore 41 sortByColumn(evt.detail, this.currentDataList, this.xpowerComponentDisplayTbl!); 42 }); 43 44 new ResizeObserver((entries) => { 45 let clientHeight = this.xpowerComponentDisplayTbl!.shadowRoot?.querySelector('.table')!.clientHeight; 46 let scrollHeight = this.xpowerComponentDisplayTbl!.shadowRoot?.querySelector('.table')!.scrollHeight; 47 if (clientHeight === scrollHeight) { 48 this.style.height = 'calc(100% - 22px)'; 49 } else { 50 this.style.height = 'calc(100% - 42px)'; 51 } 52 }).observe(this.xpowerComponentDisplayTbl!.shadowRoot?.querySelector('.table')!); 53 } 54 55 initHtml(): string { 56 return ` 57 <style> 58 :host{ 59 padding: 10px 10px; 60 display: flex; 61 flex-direction: column; 62 overflow-y: auto; 63 width: calc(100% - 20px); 64 height: calc(100% - 42px); 65 } 66 </style> 67 <lit-table id="lit-table" style="height: 100%"> 68 <lit-table-column order title="TimeStamp(ms)" data-index="startMS" key="startMS" align="flex-start" width="1fr"> 69 </lit-table-column> 70 <lit-table-column title="AppName" data-index="appNameStr" order key="appNameStr" align="flex-start" width="1fr"> 71 </lit-table-column> 72 <lit-table-column title="Usage Duration(ms)" key="appUsageDuration" order data-index="appUsageDuration" align="flex-start" width="1fr"> 73 </lit-table-column> 74 <lit-table-column title="Usage Energy(mAh)" order data-index="appUsageEnergy" key="appUsageEnergy" align="flex-start" width="1fr"> 75 </lit-table> 76 `; 77 } 78} 79