1 | {
|
2 |
|
3 | const title = (document.title = 'tkit service swagger 增量同步工具');
|
4 | const ChangedClass = 'select-change';
|
5 | const keySeparator = '@@__S__@@';
|
6 |
|
7 | const canvas = document.querySelector('#canvas');
|
8 | const menu = document.querySelector('#menu');
|
9 |
|
10 | function hide() {
|
11 | jsondiffpatch.formatters.html.hideUnchanged();
|
12 | }
|
13 | function show() {
|
14 | jsondiffpatch.formatters.html.showUnchanged();
|
15 | }
|
16 | function toggleUnchanged(me) {
|
17 | const checked = me.checked;
|
18 | if (checked) {
|
19 | show();
|
20 | } else {
|
21 | hide();
|
22 | }
|
23 | }
|
24 | function toggleSelectAll(me) {
|
25 | const checked = me.checked;
|
26 | const allChangedInput = document.querySelectorAll(`.${ChangedClass}`);
|
27 | if (allChangedInput) {
|
28 | [].forEach.call(allChangedInput, node => {
|
29 | node.checked = checked;
|
30 | });
|
31 | }
|
32 | setCount();
|
33 | }
|
34 |
|
35 | menu.innerHTML = [
|
36 | ['显示所有', 'toggleUnchanged'],
|
37 | ['全/全不选', 'toggleSelectAll'],
|
38 | ['保存', 'patch', '', 'button']
|
39 | ].reduce((html, item) => {
|
40 | const name = item[2] || item[0];
|
41 | html += item[3]
|
42 | ? `
|
43 | <button id="${name}" onClick="${item[1]}(this)" type="checkbox" name="${name}">${name}</button>
|
44 | `
|
45 | : `
|
46 | <input id="${name}" onClick="${item[1]}(this)" type="checkbox" name="${name}"><label for="${name}">${item[0]}</label>
|
47 | `;
|
48 | return html;
|
49 | }, `<b>${title}</b>`);
|
50 | const counter = document.createElement('div');
|
51 | counter.className = 'select-count';
|
52 | menu.appendChild(counter);
|
53 |
|
54 | function setCount() {
|
55 | counter.innerHTML = `已选:${getAllSelect().length} / ${getAllChanged().length}`;
|
56 | }
|
57 |
|
58 | canvas.innerHTML = jsondiffpatch.formatters.html.format(delta, curVersion);
|
59 | hide();
|
60 |
|
61 | function getKeys(node) {
|
62 | let par = node.parentNode;
|
63 | let key = node.getAttribute('data-key');
|
64 | const keys = [];
|
65 | if (key) {
|
66 | keys.unshift(key);
|
67 | while (par && par !== canvas) {
|
68 | key = par.getAttribute('data-key');
|
69 | par = par.parentNode;
|
70 | if (key) {
|
71 | keys.unshift(key);
|
72 | }
|
73 | }
|
74 | }
|
75 | return keys;
|
76 | }
|
77 |
|
78 | let allSelectedIndexes = [];
|
79 | function getAllSelect() {
|
80 | allSelectedIndexes = [];
|
81 | return [].filter.call(document.querySelectorAll(`.${ChangedClass}`) || [], item => {
|
82 | if (item.checked) {
|
83 | allSelectedIndexes.push(item.value.split(keySeparator));
|
84 | }
|
85 | return item.checked;
|
86 | });
|
87 | }
|
88 |
|
89 | function getAllChanged() {
|
90 | return (
|
91 | document.querySelectorAll(
|
92 | 'li[data-key]:not(.jsondiffpatch-unchanged):not(.jsondiffpatch-node)'
|
93 | ) || []
|
94 | );
|
95 | }
|
96 |
|
97 | const allChanged = getAllChanged();
|
98 | [].forEach.call(allChanged, node => {
|
99 | const input = document.createElement('input');
|
100 | input.className = ChangedClass;
|
101 | input.type = 'checkbox';
|
102 | input.value = getKeys(node).join(keySeparator);
|
103 | input.onchange = () => {
|
104 | setCount();
|
105 | };
|
106 | node.insertBefore(input, node.firstChild);
|
107 | const handleClick = () => {
|
108 | input.checked = !input.checked;
|
109 | setCount();
|
110 | };
|
111 | node.querySelector('.jsondiffpatch-value').onclick = handleClick;
|
112 | const key = node.querySelector('.jsondiffpatch-property-name');
|
113 | if (key) {
|
114 | key.onclick = handleClick;
|
115 | }
|
116 | });
|
117 |
|
118 | setCount();
|
119 |
|
120 | function patch() {
|
121 | if (!allSelectedIndexes.length) {
|
122 | if (!confirm('忽略所有远程变动?')) {
|
123 | return;
|
124 | }
|
125 | }
|
126 | const xhr = new XMLHttpRequest();
|
127 |
|
128 | xhr.open('POST', '/patch');
|
129 | xhr.setRequestHeader('Content-Type', 'application/json');
|
130 | xhr.send(JSON.stringify({ version: diffVersion, keys: allSelectedIndexes }));
|
131 |
|
132 | xhr.onreadystatechange = function() {
|
133 | if (xhr.readyState === 4) {
|
134 | try {
|
135 | const res = JSON.parse(xhr.response);
|
136 | if (res.code) {
|
137 | throw res.message;
|
138 | } else {
|
139 | if (confirm('同步成功,可以重新生成 service 了——关闭当前窗口?')) {
|
140 |
|
141 | window.close();
|
142 | window.close();
|
143 | }
|
144 | }
|
145 | } catch (e) {
|
146 | alert('失败:' + (e.message || e));
|
147 | }
|
148 | }
|
149 | };
|
150 | xhr.onload = function() {
|
151 | if (xhr.status !== 200) {
|
152 | alert('同步失败');
|
153 | }
|
154 | };
|
155 |
|
156 | xhr.onerror = function(e) {
|
157 | alert('同步失败:' + e && e.message);
|
158 | };
|
159 | }
|
160 | }
|