1/* 2 * Copyright (C) 2022 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 { BaseElement, element } from '../../../base-ui/BaseElement'; 17import LitSwitch from '../../../base-ui/switch/lit-switch'; 18import '../../../base-ui/select/LitAllocationSelect'; 19import '../../../base-ui/switch/lit-switch'; 20import { SpXPowerRecordHtml } from './SpXPowerRecord.html'; 21import { LitSelectV } from '../../../base-ui/select/LitSelectV'; 22import { SpApplication } from '../../SpApplication'; 23import { Cmd } from '../../../command/Cmd'; 24import { SpRecordTrace } from '../SpRecordTrace'; 25import { 26 messageTypeAll, 27 realBattery, 28 thermalReport, 29 appDetail, 30 appStatistic, 31 componentTop, 32} from './utils/PluginConvertUtils'; 33 34@element('sp-xpower') 35export class SpXPowerRecord extends BaseElement { 36 private xpowerSwitch: LitSwitch | undefined | null; 37 private configType: HTMLDivElement | undefined | null; 38 private typeSelect: LitSelectV | undefined | null; 39 private sp: SpApplication | undefined; 40 private inputEvent: HTMLInputElement | undefined; 41 private xPowerSelectV: LitSelectV | undefined | null; 42 get recordXPower(): boolean { 43 return this.xpowerSwitch!.checked; 44 } 45 46 get process(): string { 47 if (this.xPowerSelectV!.value.length > 0) { 48 if (this.xPowerSelectV!.value === 'none') { 49 return ''; 50 } else { 51 return this.xPowerSelectV!.value; 52 } 53 } 54 return ''; 55 } 56 57 initElements(): void { 58 this.initRecordXpowerConfig(); 59 this.sp = document.querySelector('sp-application') as SpApplication; 60 this.typeSelect = this.shadowRoot?.querySelector<LitSelectV>("lit-select-v[title='MessageType']"); 61 this.typeSelect!.showItems = [realBattery, thermalReport]; 62 this.inputEvent = this.typeSelect!.shadowRoot?.querySelector('input') as HTMLInputElement; 63 this.xpowerSwitch = this.shadowRoot?.querySelector('.xpower-switch') as LitSwitch; 64 let xpowerConfigList = this.shadowRoot?.querySelectorAll<HTMLDivElement>('.xpower-config-top'); 65 this.xPowerSelectV = this.shadowRoot?.querySelector<LitSelectV>('lit-select-v'); 66 let xPowerInput = this.xPowerSelectV?.shadowRoot?.querySelector('input') as HTMLInputElement; 67 xPowerInput!.addEventListener('mousedown', () => { 68 if (this.xpowerSwitch!.checked && SpRecordTrace.serialNumber === '') { 69 this.xPowerSelectV!.dataSource([], ''); 70 } 71 }); 72 xPowerInput!.addEventListener('mouseup', () => { 73 if (this.xpowerSwitch!.checked) { 74 if (SpRecordTrace.serialNumber === '') { 75 this.xPowerSelectV!.dataSource([], ''); 76 xPowerInput!.removeAttribute('readonly'); 77 return; 78 } else { 79 Cmd.getPackage().then((packageList) => { 80 let appArr = []; 81 if (packageList.length > 0) { 82 packageList.forEach((item) => { 83 appArr.push(item.replace(/^\t+/, '')); 84 }) 85 appArr.unshift('none'); 86 this.xPowerSelectV!.dataSource(appArr, '', true); 87 this.getSelectedOption(); 88 } else { 89 this.xPowerSelectV!.dataSource([], ''); 90 } 91 }); 92 xPowerInput!.setAttribute('readonly', 'readonly'); 93 } 94 } 95 }); 96 97 this.xpowerSwitch.addEventListener('change', () => { 98 let configVisibility = 'none'; 99 if (this.xpowerSwitch?.checked) { 100 configVisibility = 'block'; 101 } 102 if (xpowerConfigList) { 103 xpowerConfigList!.forEach((configEl) => { 104 configEl.style.display = configVisibility; 105 }); 106 } 107 }); 108 } 109 110 private initRecordXpowerConfig(): void { 111 this.configType = this.shadowRoot?.querySelectorAll<HTMLDivElement>('.xpower-config-top')[1]; 112 xpowerConfigList.forEach((config) => { 113 switch (config.type) { 114 case 'select-multiple': 115 this.configTypeBySelectMultiple(config, this.configType!); 116 break; 117 default: 118 break; 119 } 120 }); 121 } 122 123 private configTypeBySelectMultiple(config: unknown, recordXpowerDiv: HTMLDivElement): void { 124 let html = ''; 125 //@ts-ignore 126 let placeholder = config.selectArray[0]; 127 //@ts-ignore 128 if (config.title === 'MessageType') { 129 placeholder = [realBattery, thermalReport].join(','); 130 } 131 html += `<lit-select-v default-value="" rounded="" class="record-type-select config" 132 mode="multiple" canInsert="" title="${ 133 //@ts-ignore 134 config.title 135 }" rounded placement = "bottom" placeholder="${placeholder}">`; 136 //@ts-ignore 137 config.selectArray.forEach((value: string) => { 138 html += `<lit-select-option value="${value}">${value}</lit-select-option>`; 139 }); 140 html += '</lit-select-v>'; 141 recordXpowerDiv.innerHTML = recordXpowerDiv.innerHTML + html; 142 } 143 144 getXpowerConfig(): string | undefined { 145 let recordXpowerConfigVal = this.shadowRoot?.querySelectorAll<HTMLElement>('.config'); 146 let xpowerConfig: string = ''; 147 recordXpowerConfigVal!.forEach((value) => { 148 xpowerConfig = this.getXpowerConfigData(value, xpowerConfig); 149 }); 150 return xpowerConfig; 151 } 152 153 private getXpowerConfigData(value: HTMLElement, xpowerConfig: string): string { 154 switch (value.title) { 155 case 'MessageType': 156 xpowerConfig = this.xpowerConfigByTypeList(xpowerConfig, value as LitSelectV); 157 break; 158 } 159 return xpowerConfig; 160 } 161 162 private xpowerConfigByTypeList(xpowerConfig: string, selectValue: LitSelectV): string { 163 xpowerConfig = selectValue.value; 164 return xpowerConfig; 165 } 166 167 private getSelectedOption(): void { 168 this.xPowerSelectV!.shadowRoot?.querySelectorAll('lit-select-option').forEach((a) => { 169 a.addEventListener('onSelected', (e: unknown) => { 170 if (a.hasAttribute('selected')) { 171 if (this.xPowerSelectV!.value === '' || this.xPowerSelectV!.value === 'none') { 172 let messageValue = this.typeSelect!.value || ''; 173 if (messageValue.length > 0) {// @ts-ignore 174 let selectedOptions = messageValue.split(',').map((option: unknown) => option.trim()); 175 let filteredOptions = selectedOptions.filter(// @ts-ignore 176 (option: unknown) => ![appStatistic, appDetail].includes(option) 177 ); 178 messageValue = filteredOptions.join(','); 179 this.inputEvent!.value = messageValue; 180 this.typeSelect!.showItems = filteredOptions; 181 } 182 } 183 } 184 }); 185 }); 186 } 187 188 typeSelectMousedownHandler = (): void => { 189 this.typeSelect!.dataSource([], ''); 190 }; 191 192 typeSelectClickHandler = (): void => { 193 let messageType = []; 194 if (this.xPowerSelectV!.value === '' || this.xPowerSelectV!.value === 'none') { 195 messageType = [realBattery, thermalReport, componentTop]; 196 } else { 197 messageType = messageTypeAll; 198 } 199 this.typeSelect?.dataSource(messageType, ''); 200 this.inputEvent!.value = this.typeSelect!.showItems.join(','); 201 this.typeSelect?.shadowRoot?.querySelectorAll('lit-select-option').forEach((option) => { 202 if (this.inputEvent!.value.includes(option.getAttribute('value') || '')) { 203 option.setAttribute('selected', ''); 204 } else { 205 option.removeAttribute('selected'); 206 let number = this.typeSelect!.showItems.indexOf(option.getAttribute('value') || ''); 207 if (number > -1) { 208 this.typeSelect!.showItems!.splice(number, 1); 209 } 210 } 211 option.addEventListener('onSelected', (e: unknown) => { 212 if (this.typeSelect!.showItems.length === 0) { 213 this.inputEvent!.placeholder = 'NONE'; 214 } 215 }); 216 }); 217 }; 218 219 connectedCallback(): void { 220 this.inputEvent?.addEventListener('mousedown', this.typeSelectMousedownHandler); 221 this.inputEvent?.addEventListener('click', this.typeSelectClickHandler); 222 } 223 224 disconnectedCallback(): void { 225 super.disconnectedCallback(); 226 this.inputEvent?.removeEventListener('mousedown', this.typeSelectMousedownHandler); 227 this.inputEvent?.removeEventListener('click', this.typeSelectClickHandler); 228 } 229 230 attributeChangedCallback(name: string, oldValue: string, newValue: string): void { 231 super.attributeChangedCallback(name, oldValue, newValue); 232 } 233 234 initHtml(): string { 235 return SpXPowerRecordHtml; 236 } 237} 238 239const xpowerConfigList = [ 240 { 241 title: 'MessageType', 242 des: 'Select MessageType', 243 hidden: true, 244 type: 'select-multiple', 245 selectArray: [''], 246 }, 247]; 248