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 { LitMainMenu, MenuItem } from '../../base-ui/menu/LitMainMenu';
18@element('sp-third-party')
19export class SpThirdParty extends BaseElement {
20  private uploadJsonBtn: HTMLElement | undefined | null;
21  private inputJsonEl: HTMLInputElement | undefined | null;
22  private uploadCsvBtn: HTMLElement | undefined | null;
23  private inputCsvEl: HTMLInputElement | undefined | null;
24
25  initElements(): void {
26    let parentElement = this.parentNode as HTMLElement;
27    parentElement.style.overflow = 'hidden';
28    this.uploadJsonBtn = this.shadowRoot?.querySelector('.upload-json-btn')?.shadowRoot?.querySelector('#custom-button');
29    this.inputJsonEl = this.shadowRoot?.querySelector('#file');
30    this.addUploadEvent(this.uploadJsonBtn!, this.inputJsonEl!);
31
32    this.uploadCsvBtn = this.shadowRoot?.querySelector('.upload-csv-btn')?.shadowRoot?.querySelector('#custom-button');
33    this.inputCsvEl = this.shadowRoot?.querySelector('#csv-file');
34    this.addUploadEvent(this.uploadCsvBtn!, this.inputCsvEl!);
35  }
36
37  initHtml(): string {
38    return `
39        ${this.initHtmlStyle()}
40        <div class="sp-third-party-container">
41         <div class="body">
42          <div>
43            <input id="file" class="file" accept="application/json" type="file" style="display:none;pointer-events:none;"/>
44            <lit-button class="upload-json-btn" height="32px" width="180px" color="#0A59F7" font_size="14px" border="1px solid #0A59F7"
45              padding="0 0 0 12px" justify_content="left" icon="folder" margin_icon="0 10px 0 8px">
46             Open bpftrace file
47            </lit-button>
48          </div>
49          <div>
50            <input id="csv-file" class="csv-file" accept=".csv" type="file" style="display:none;pointer-events:none;"/>
51            <lit-button class="upload-csv-btn" height="32px" width="180px" color="#0A59F7" font_size="14px" border="1px solid #0A59F7"
52            padding="0 0 0 12px" justify_content="left" icon="folder" margin_icon="0 10px 0 8px">
53              Open gpu counter file
54            </lit-button>
55          </div>
56         </div>
57        </div>
58        `;
59  }
60
61  private initHtmlStyle(): string {
62    return `
63      <style>
64        .sp-third-party-container {
65          background-color: var(--dark-background5,#F6F6F6);
66          min-height: 100%;
67          display: grid;
68          grid-template-columns: 1fr;
69          grid-template-rows:1fr;
70        }
71        :host{
72          width: 100%;
73          height: 100%;
74          background-color: var(--dark-background5,#F6F6F6);
75          display: block;
76        }
77        .body{
78          width: 85%;
79          margin: 2% 5% 2% 5%;
80          background-color: var(--dark-background3,#FFFFFF);
81          border-radius: 16px 16px 16px 16px;
82          padding-left: 2%;
83          padding-right: 4%;
84        }
85        .upload-json-btn, .upload-csv-btn {
86          margin-top: 2%;
87          margin-left: 3%;
88        }
89        </style>
90    `;
91  }
92
93  addUploadEvent(uploadBtn: HTMLElement, uploadEl: HTMLInputElement): void {
94    uploadBtn?.addEventListener('click', () => {
95      uploadEl?.click();
96    });
97    uploadEl!.addEventListener('change', () => {
98      let files = uploadEl!.files;
99      if (files && files.length > 0) {
100        let main = this.parentNode!.parentNode!.querySelector('lit-main-menu') as LitMainMenu;
101        let children = main.menus!;
102        let child = children[0].children as Array<MenuItem>;
103        let fileHandler = child[0].fileHandler!;
104        fileHandler({
105          detail: files[0]
106        });
107      }
108      if (uploadEl) {
109        uploadEl.value = '';
110      }
111    });
112  }
113}
114
115
116