• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!DOCTYPE html>
2<html lang="en" style="width: 100%; height: 100%;">
3<head>
4    <meta charset="UTF-8">
5	<meta name="viewport3" content="width=device-width, initial-scale=1.0">
6	<title>Napi</title>
7</head>
8<style type="text/css">
9        body {
10			background-color: #000000;
11			margin:0 auto;
12			font-family: Consolas, sans-serif;
13		}
14        a  {
15			text-decoration: none;
16		}
17
18    table {
19        border-right: 1px solid #ffffff;
20        border-bottom: 1px solid #ffffff;
21        text-align: center;
22    }
23
24    table th {
25        border-left: 1px solid #ffffff;
26        border-top: 1px solid #ffffff;
27    }
28
29    table td {
30        border-left: 1px solid #ffffff;
31        border-top: 1px solid #ffffff;
32    }
33
34		button.button {
35			background-color: #ffffff;
36            font-family: Consolas, sans-serif;
37            font-size: 16px;
38            border-radius: 3px;
39            border-color: #C4C4C4;
40            align-self: center;
41            border: 1px solid #C4C4C4;
42            outline: none;
43			width: 100px;
44			height:24px
45		}
46
47		button.button:hover {
48			background: #4B97D9;
49			color: #fff;
50			border: 0px;
51			font-family: Consolas, sans-serif;
52            font-size: 16px;
53			width: 100px;
54			height: 24px
55		}
56
57		input.text:focus {
58			outline: 2px solid #4B97D9;
59  			border: 0px;
60        }
61
62		input.text {
63			outline: 2px solid #C4C4C4;
64			border: 0px;
65		}
66    .tabs{
67        position: relative;
68        height: 800px;
69        min-height: 800px;
70        max-height: 800px;
71        clear: both;
72        margin: 25px 0;
73        overflow: hidden;
74    }
75    .tab{
76        float: left;
77        margin: 25px 0;
78    }
79    .tab label{
80        background: #eee;
81        padding: 10px 20px;
82        position: relative;
83        left: 1px;
84        border: 0px solid;
85        margin-left: -1px;
86        z-index: 2;
87        color: #333333;
88        background: white;
89    }
90    input.text {
91		width: 250px;
92        height: 18px;
93        vertical-align:middle;
94		}
95    .highlight {
96        background-color: rgb(55, 63, 57);
97    }
98    .content{
99        position: absolute;
100        top: 61px;
101        left: 0;
102        right: 0;
103        bottom: 0;
104        background: black;
105        padding: 20px 20px;
106        border: 0px solid #ccc;
107        max-height: 800px;
108        overflow: scroll;
109    }
110    [type=radio]:checked ~ label{
111        color: white;
112        background: #3288e9;
113        border: 0px solid #ccc;
114        z-index: 3;
115    }
116    [type=radio]:checked ~ label ~ .content{
117        z-index: 1;
118    }
119</style>
120<script type="text/javascript">
121    let vscode = acquireVsCodeApi();
122    let clickIndex = -1; // 用户点击的那一项数据索引号
123    let updateIncludeName = '';
124    let updateCppName = '';
125    let updateInterfaceName = '';
126    let updateServiceCode = '';
127
128    function configInfo(mode) {
129      vscode.postMessage({
130        msg: 'configInfo',
131        type: mode,
132        index: clickIndex,
133        updateInfo: getUpdateInfo()
134      });
135    }
136
137    // 删除数据
138    function deleteItem() {
139      vscode.postMessage({
140        msg: 'deleteData',
141        index: clickIndex
142      });
143    }
144
145    function cancel() {
146      let result = {
147         msg: 'cancelShowInfo'
148      };
149      vscode.postMessage(result);
150    }
151
152    function setIndex(index) {
153      clickIndex = index;
154    }
155
156    function getIndex() {
157      return clickIndex;
158    }
159
160    function setUpdateInfo(includeName, cppName, interfaceName, serviceCode) {
161      updateIncludeName = includeName;
162      updateCppName = cppName;
163      updateInterfaceName = interfaceName;
164      updateServiceCode = serviceCode;
165    }
166
167    function getUpdateInfo() {
168      let updateData = {updateIncludeName, updateCppName, updateInterfaceName, updateServiceCode};
169      return updateData;
170    }
171
172    // 高亮点击的项，其他项不高亮
173    function highlightItem(container, index) {
174      const listItems = container.getElementsByTagName('tr');
175      Array.from(listItems).forEach((item, i) => {
176        if (i === index) {
177          item.classList.add('highlight');
178        } else {
179          item.classList.remove('highlight');
180        }
181      });
182    }
183
184    function renderList(configList, listElement) {
185      configList.forEach((configItem, index) => {
186        const listItem = document.createElement('tr');
187        const itemContent1 = document.createElement('th');
188        itemContent1.textContent = configItem.includeName;
189        const itemContent2 = document.createElement('th');
190        itemContent2.textContent = configItem.cppName;
191        const itemContent3 = document.createElement('th');
192        itemContent3.textContent = configItem.interfaceName;
193        const itemContent4 = document.createElement('th');
194        itemContent4.textContent = configItem.serviceCode;
195        listItem.appendChild(itemContent1);
196        listItem.appendChild(itemContent2);
197        listItem.appendChild(itemContent3);
198        listItem.appendChild(itemContent4);
199
200        listItem.addEventListener('click', () => {
201          highlightItem(listElement, index);
202          setIndex(index);
203          setUpdateInfo(configItem.includeName, configItem.cppName, configItem.interfaceName, configItem.serviceCode);
204        });
205        listElement.appendChild(listItem);
206      });
207    }
208
209    window.addEventListener('message', event => {
210      const message = event.data;
211      // 初始化
212      if (message.msg === 'initShowInfo') {
213        const listElement = document.getElementById('configList');
214        renderList(message.configList, listElement);
215      } else if (message.msg === 'deleteData') {
216        const listElement = document.getElementById('configList');
217        while (listElement.firstChild) {
218          listElement.removeChild(listElement.firstChild);
219        }
220        renderList(message.configList, listElement);
221      }
222    });
223
224</script>
225<body>
226  <h1>showInfo</h1>
227  <table id = "table" width="600" cellspacing = "0">
228    <thead>
229      <tr>
230        <th>includeName</th>
231        <th>cppName</th>
232        <th>interfaceName</th>
233        <th>serviceCode</th>
234      </tr>
235    </thead>
236    <tbody id = "configList">
237        <!-- 配置项从这里动态插入 -->
238    </tbody>
239  </table>
240  <button onclick="configInfo('add')" type="button" class="button" style="border-spacing:0px 5px;margin-top: 20px;background-color: #4B97D9; border: 1px solid #4B97D9; color: #fff;">Add</button>
241  <button onclick="configInfo('update')" type="button" class="button" style="border-spacing:0px 5px;margin-top: 20px;background-color: #4B97D9; border: 1px solid #4B97D9; color: #fff;">Update</button>
242  <button onclick="deleteItem()" type="button" class="button" style="border-spacing:0px 5px;margin-top: 20px;background-color: #4B97D9; border: 1px solid #4B97D9; color: #fff;">Delete</button>
243  <button onclick="cancel()" type="button" class="button" style="border-spacing:0px 5px; margin-top: 20px; background-color: #333333; border: 1px solid #333333; color: #fff;">Cancel</button>
244</body>
245</html>