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-audio') 22export class TabPaneXpowerComponentAudio extends BaseElement { 23 private xpowerComponentAudioTbl: LitTable | null | undefined; 24 private currentDataList: Array<XpowerComponentTopStruct> = []; 25 26 set data(selectionDataList: Array<XpowerComponentTopStruct>) { 27 this.currentDataList = selectionDataList; 28 this.xpowerComponentAudioTbl!.loading = true; 29 this.xpowerComponentAudioTbl!.recycleDataSource = selectionDataList; 30 this.xpowerComponentAudioTbl!.loading = false; 31 } 32 33 initElements(): void { 34 this.xpowerComponentAudioTbl = this.shadowRoot?.querySelector<LitTable>('#lit-table'); 35 } 36 37 connectedCallback(): void { 38 super.connectedCallback(); 39 this.xpowerComponentAudioTbl!.addEventListener('column-click', (evt): void => { 40 // @ts-ignore 41 sortByColumn(evt.detail, this.currentDataList, this.xpowerComponentAudioTbl!); 42 }); 43 44 new ResizeObserver((entries) => { 45 let clientHeight = this.xpowerComponentAudioTbl!.shadowRoot?.querySelector('.table')!.clientHeight; 46 let scrollHeight = this.xpowerComponentAudioTbl!.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.xpowerComponentAudioTbl!.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="120px"> 69 </lit-table-column> 70 <lit-table-column title="AppName" data-index="appNameStr" order key="appNameStr" align="flex-start" width="250px"> 71 </lit-table-column> 72 <lit-table-column title="Background Duration(ms)" key="backgroundDuration" order data-index="backgroundDuration" align="flex-start" width="190px"> 73 </lit-table-column> 74 <lit-table-column title="Background Energy(mAh)" order data-index="backgroundEnergy" key="backgroundEnergy" align="flex-start" width="190px"> 75 </lit-table-column> 76 <lit-table-column title="Foreground Duration(ms)" data-index="foregroundDuration" order key="foregroundDuration" align="flex-start" width="190px"> 77 </lit-table-column> 78 <lit-table-column title="Foreground Energy(mAh)" data-index="foregroundEnergy" order key="foregroundEnergy" align="flex-start" width="190px"> 79 </lit-table-column> 80 <lit-table-column title="ScreenOff Duration(ms)" align="flex-start" order data-index="screenOffDuration" key="screenOffDuration" width="190px"> 81 </lit-table-column> 82 <lit-table-column title="ScreenOff Energy(mAh)" key="screenOffEnergy" data-index="screenOffEnergy" order align="flex-start" width="190px"> 83 </lit-table-column> 84 <lit-table-column title="ScreenOn Duration(ms)" key="screenOnDuration" data-index="screenOnDuration" order align="flex-start" width="190px"> 85 </lit-table-column> 86 <lit-table-column title="ScreenOn Energy(mAh)" key="screenOnEnergy" data-index="screenOnEnergy" order align="flex-start" width="190px"> 87 </lit-table-column> 88 </lit-table> 89 `; 90 } 91} 92