-
-
Notifications
You must be signed in to change notification settings - Fork 8
/
index.html
206 lines (183 loc) · 9.37 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!DOCTYPE html>
<html lang="en">
<head>
<title>Siyuan Query</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
:root {
--b3-theme-surface: #f7f8fa;
--b3-theme-on-surface: #5f6368;
--b3-card-error-background: #f5d1cf;
--b3-card-warning-background: #ffe8c8;
--b3-card-info-background: #d6eaf9;
--b3-card-success-background: #d7eed8;
}
html,
body {
padding: 0;
border: 0;
margin: 0;
width: 100%;
height: 100%;
/* color: transparent; */
background-color: transparent;
}
body {
display: flex;
align-items: center;
justify-content: center;
/* background-color: white; */
}
#query,
#checkbox {
cursor: pointer;
}
#query {
width: 100%;
height: 100%;
color: var(--b3-theme-on-surface);
background-color: var(--b3-theme-surface);
border-color: var(--b3-theme-on-surface);
border-radius: 2em;
}
#checkbox {
width: 1em;
height: 1em;
font-size: inherit;
}
#icon {
width: 2em;
height: 2em;
}
</style>
</head>
<body>
<button id="query" type="button">
<span>Query</span>
</button>
<input id="checkbox" type="checkbox" title="Automatic query after loading" />
<svg id="icon" class="icon" t="1650281020780" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18449">
<path d="M512 862.208c-193.024 0-349.696-156.672-349.184-350.208s156.672-349.696 350.208-349.184c193.024 0 349.184 156.672 349.184 349.184 0 193.536-156.672 350.208-350.208 350.208z m0-623.104c-151.04 0-272.896 122.368-272.896 272.896 0 151.04 122.368 272.896 272.896 272.896s272.896-122.368 272.896-272.896v-0.512c0-150.016-121.856-271.872-272.896-272.384z" p-id="18450"></path>
<path d="M391.68 678.912c3.072-2.56 6.144-5.12 8.192-8.704 2.56-3.584 4.608-7.68 6.656-11.776 2.048-4.096 3.584-8.704 5.632-13.312l22.528-57.344h145.408l30.208 76.288c1.536 5.12 4.608 9.728 8.704 13.824 4.096 3.584 9.728 5.12 15.36 4.608 9.728 0 15.36-2.56 17.92-8.192 2.56-6.656 2.56-13.824-0.512-19.968l-115.712-304.64c-1.536-5.12-5.12-9.728-9.728-12.8-5.632-3.584-12.288-5.12-18.432-4.608-6.144-0.512-12.288 1.536-17.92 4.608-4.608 3.072-8.192 7.68-9.728 12.8l-115.2 303.616c-4.096 11.264-4.096 19.456 0 23.04 4.608 4.608 10.752 6.656 16.896 6.656 2.56-1.024 6.656-2.048 9.728-4.096z m115.712-296.96l62.464 170.496H444.416l62.976-170.496z" p-id="18451"></path>
<path d="M754.688 910.848C536.576 1044.48 251.904 975.872 118.272 757.76c-7.68-12.8-14.848-25.6-21.504-38.912-67.584-134.144-66.56-293.376 3.072-427.008v-0.512c1.024-2.048 1.536-4.608 1.536-6.656 0-12.288-10.24-22.528-22.528-22.528-9.728 0-17.92 6.144-20.992 14.848C21.504 347.136 2.048 424.96 0.512 503.808v8.192c0 114.688 38.4 226.304 109.568 316.416l4.608 5.632c97.28 120.32 243.2 189.952 397.824 189.952h11.264c89.6-2.048 177.152-28.16 253.44-74.752l30.208 51.712 30.208-112.64-112.64-29.696 29.696 52.224z m160.256-715.264c-1.536-2.048-3.072-3.584-4.608-5.632C813.056 69.632 666.624 0 512 0h-11.264C411.136 2.048 324.096 28.16 247.296 74.752L217.6 23.04l-29.696 112.64 112.64 30.208-30.208-52.224C487.424-20.48 772.608 48.128 905.728 265.728c7.68 12.8 14.848 25.6 21.504 38.912 68.096 134.144 67.072 293.376-2.048 427.008v1.024c-1.024 2.048-1.536 4.608-1.536 6.656 0 12.288 10.24 22.528 22.528 22.528 9.728 0 17.92-6.144 20.992-15.36 35.84-70.144 55.296-147.968 57.344-226.816V512c0-114.688-38.4-226.304-109.568-316.416z" p-id="18452"></path>
</svg>
</body>
<script type="module">
/**
* 获取挂件自身 ID
* 调整页面大小
* 读取挂件自身的属性
* - 若没有属性 custom-sql, 设置该属性
* 查询挂件前是否有一个具有属性 custom-type: query 的代码块
* - 若没有任何块, 使用 prependBlock 插入一个 SQL 代码块, 内容为 custom-sql, 结束
* - 若有块, 但不是具有属性 custom-query 的代码块, 使用 insertBlock 插入一个 SQL 代码块, 内容为 custom-sql, 结束
* - 若是具有属性 custom-query 的代码块, 使用 getBlockByID 获得代码块内 SQL 语句
* - 将该语句写入挂件属性 custom-sql
* 进行 SQL 查询
* - 查询失败: 弹窗显示错误信息, 结束
* - 查询成功, 无记录: 弹窗显示提示信息, 结束
* - 查询成功且有记录
* 解析查询记录并生成 markdown 表格
* 查询挂件后是一个具有属性 custom-type: query-result 的表格
* - 没有表格 || 不符合要求: 使用 insertBlock 插入表格
* - 符合要求: 使用 updateBlock 更新表格
*/
import { config } from './src/script/module/config.js';
import {
updateAttrs,
initWidgetBlock,
codeBlock,
widgetBlock,
tableBlock,
} from './src/script/module/query.js';
/* 设置样式 */
// console.log(window);
try {
const icon = document.getElementById('icon');
const query = document.getElementById('query');
const checkbox = document.getElementById('checkbox');
const node = window.frameElement.parentElement.parentElement;
const mode = window.parent.siyuan.config.appearance.mode; // 主题模式, 0: 明亮, 1: 暗黑
const fontSize = window.parent.siyuan.config.editor.fontSize; // 字体大小
var status = 0;
const data = {
config, // 配置选项
fontSize,
node,
previous_id: null, // 前置代码块 ID
id: node.dataset.nodeId || null, // 挂件块 ID
next_id: null, // 后置表格块 ID
sql: config.query.sql.default, // 查询语句
rows: null, // 查询结果
markdown: null, // markdown 表格
colgroup: [], // 表格各列的样式
attrs: null, // 挂件块属性
}
/* 设置图标样式 */
icon.querySelectorAll('path').forEach(path => path.style.fill = mode ? '#f7f8fa' : '#2b2d30');
// console.log(node);
/* 初始化挂件尺寸和属性 */
status = await initWidgetBlock(data);
if (status === 0) {
async function fn() {
try {
query.style.backgroundColor = data.config.query.theme.backgroundColor.default;
status = await codeBlock(data);
switch (true) {
case status == 0:
query.style.backgroundColor = data.config.query.theme.backgroundColor.default;
break;
case status > 0:
query.style.backgroundColor = data.config.query.theme.backgroundColor.info;
return;
default:
case status < 0:
query.style.backgroundColor = data.config.query.theme.backgroundColor.warning;
return;
}
status = await widgetBlock(data);
switch (true) {
case status == 0:
query.style.backgroundColor = data.config.query.theme.backgroundColor.default;
break;
case status > 0:
query.style.backgroundColor = data.config.query.theme.backgroundColor.warning;
return;
default:
case status < 0:
query.style.backgroundColor = data.config.query.theme.backgroundColor.error;
return;
}
status = await tableBlock(data);
switch (true) {
case status == 0:
query.style.backgroundColor = data.config.query.theme.backgroundColor.success;
break;
case status > 0:
query.style.backgroundColor = data.config.query.theme.backgroundColor.info;
return;
default:
case status < 0:
query.style.backgroundColor = data.config.query.theme.backgroundColor.error;
return;
}
} catch (err) {
console.error(err);
query.style.backgroundColor = data.config.query.theme.backgroundColor.error;
// window.alert(`SQL 查询错误!\nThe SQL query error!\n${err}`);
}
}
/* 查询按钮单击 */
query.addEventListener('click', fn);
/* 自动查询按钮单击 */
checkbox.addEventListener('click', async (e) => updateAttrs(data, { 'custom-query-auto': checkbox.checked ? 'true' : '' }));
}
else throw status;
}
catch (err) {
console.warn(err);
query.style.backgroundColor = data.config.query.theme.backgroundColor.error;
}
</script>
</html>