sqlui 0.1.19 → 0.1.21

Sign up to get free protection for your applications and to get access to all the features.
Files changed (16) hide show
  1. checksums.yaml +4 -4
  2. data/.version +1 -1
  3. data/app/args.rb +33 -0
  4. data/app/database_config.rb +7 -7
  5. data/app/database_metadata.rb +116 -0
  6. data/app/deep.rb +58 -0
  7. data/app/mysql_types.rb +33 -0
  8. data/app/server.rb +125 -217
  9. data/app/sqlui.rb +36 -0
  10. data/app/sqlui_config.rb +11 -16
  11. data/app/views/databases.erb +70 -38
  12. data/bin/sqlui +3 -1
  13. data/client/resources/sqlui.css +288 -242
  14. data/client/resources/sqlui.html +8 -5
  15. data/client/resources/sqlui.js +168 -82
  16. metadata +7 -2
data/client/resources/sqlui.css CHANGED
@@ -1,242 +1,288 @@
1
- body {
2
- font-size: 16px;
3
- margin: 0;
4
- }
5
-
6
- .main-box {
7
- display: flex;
8
- flex-direction: column;
9
- flex: 1;
10
- margin: 0;
11
- height: 100%;
12
- min-height: 100%;
13
- }
14
-
15
- .header {
16
- display: flex;
17
- flex: 1;
18
- align-items: center;
19
- justify-content: start;
20
- padding-left: 5px;
21
- color: #333;
22
- font-weight: bold;
23
- }
24
-
25
- .tabs-box {
26
- display: flex;
27
- flex-direction: row;
28
- border-bottom: 1px solid #ddd;
29
- height: 36px;
30
- font-size: 16px;
31
- font-family: Helvetica;
32
- }
33
-
34
- .tab-button, .selected-tab-button {
35
- border: none;
36
- outline: none;
37
- cursor: pointer;
38
- width: 150px;
39
- padding: 2px;
40
- margin: 0px;
41
- display: flex;
42
- justify-content: center;
43
- background-color: #fff;
44
- }
45
-
46
- .tab-button {
47
- color: #888;
48
- }
49
-
50
- .tab-button:hover {
51
- color: #333;
52
- }
53
-
54
- .selected-tab-button {
55
- color: #333;
56
- font-weight: bold;
57
- }
58
-
59
- .tab-content-element {
60
- display: none;
61
- }
62
-
63
- .query-box {
64
- display: flex;
65
- flex-direction: column;
66
- }
67
-
68
- .query {
69
- display: flex;
70
- flex: 1;
71
- }
72
-
73
- .submit-box {
74
- display: flex;
75
- border-top: 1px solid #ddd;
76
- height: 36px;
77
- justify-content: right;
78
- }
79
-
80
- .status {
81
- display: flex;
82
- justify-content: center;
83
- align-content: center;
84
- flex-direction: column;
85
- font-family: Helvetica;
86
- }
87
-
88
- .result-box, .saved-box, .graph-box, .structure-box {
89
- flex: 1;
90
- overflow: auto;
91
- display: flex;
92
- flex-direction: column;
93
- }
94
-
95
- .graph-box, .result-box {
96
- border-top: 1px solid #ddd;
97
- }
98
-
99
- .graph-box {
100
- padding: 20px;
101
- }
102
-
103
- table {
104
- font-family: monospace;
105
- flex: 1;
106
- border-spacing: 0px;
107
- display: flex;
108
- width: 100%;
109
- }
110
-
111
- table td:last-child, table th:last-child {
112
- width: 100%;
113
- border-right: none !important;
114
- }
115
-
116
- td, th {
117
- padding: 5px 20px 5px 5px;
118
- font-weight: normal;
119
- white-space: nowrap;
120
- max-width: 500px;
121
- overflow: hidden;
122
- text-overflow: ellipsis;
123
- }
124
-
125
- td {
126
- text-align: right;
127
- }
128
-
129
- th {
130
- text-align: left;
131
- font-weight: bold;
132
- border-bottom: 1px solid #ddd;
133
- border-right: 1px solid #ddd;
134
- }
135
-
136
- table {
137
- display: block;
138
- }
139
-
140
- thead {
141
- padding: 0px;
142
- background-color: #fff;
143
- position: -webkit-sticky;
144
- position: sticky;
145
- top: 0px;
146
- z-index: 100;
147
- table-layout:fixed;
148
- }
149
-
150
- .highlighted-row {
151
- background: #eee;
152
- }
153
-
154
- .status-box {
155
- padding: 5px;
156
- display: flex;
157
- flex-direction: rows;
158
- justify-content: space-between;
159
- border-top: 1px solid #ddd;
160
- height: 30px;
161
- }
162
-
163
- .CodeMirror pre.CodeMirror-placeholder {
164
- color: #999;
165
- }
166
-
167
- .tabs-box {
168
- display: flex;
169
- }
170
-
171
- .saved-box {
172
- font-family: Helvetica;
173
- }
174
-
175
- .saved-box h1 {
176
- margin: 0px;
177
- padding-left: 10px;
178
- padding-right: 10px;
179
- padding-top: 10px;
180
- padding-bottom: 10px;
181
- font-size: 16px;
182
- font-weight: bold;
183
- }
184
-
185
- .saved-box div:first-child {
186
- border-top: none !important;
187
- }
188
-
189
- .saved-box p {
190
- margin: 0px;
191
- padding-left: 20px;
192
- padding-bottom: 20px;
193
- }
194
-
195
- .saved-box div {
196
- cursor: pointer;
197
- border-top: 1px solid #eeeeee;
198
- }
199
-
200
- .saved-box div:hover {
201
- background: #eee;
202
- }
203
-
204
- .submit-button {
205
- cursor: pointer;
206
- margin-right: 10px;
207
- }
208
-
209
- .cm-editor.cm-focused {
210
- outline: none !important;
211
- }
212
-
213
- .schemas, .tables {
214
- border: none;
215
- display: flex;
216
- min-width: 200px;
217
- }
218
-
219
- .table-info {
220
- display: grid;
221
- grid-template-columns: 1;
222
- grid-template-rows: 0.5fr 0.5fr;
223
- justify-items: stretch;
224
- flex: 1;
225
- }
226
-
227
- .columns {
228
- border-bottom: 1px solid #ddd;
229
- overflow: auto;
230
- grid-column: 1;
231
- grid-row: 1;
232
- }
233
-
234
- .indexes {
235
- overflow: auto;
236
- grid-column: 1;
237
- grid-row: 2;
238
- }
239
-
240
- select {
241
- outline: none;
242
- }
1
+ body {
2
+ margin: 0;
3
+ }
4
+
5
+ h1 {
6
+ font-size: 22px;
7
+ }
8
+
9
+ h2 {
10
+ font-size: 20px;
11
+ }
12
+
13
+ p {
14
+ font-size: 18px;
15
+ }
16
+
17
+ .loading-box {
18
+ font-family: monospace;
19
+ display: flex;
20
+ flex-direction: column;
21
+ flex: 1;
22
+ margin: 0;
23
+ height: 100%;
24
+ min-height: 100%;
25
+ align-items: start;
26
+ justify-content: start;
27
+ padding: 10px;
28
+ color: #333;
29
+ }
30
+
31
+ .main-box {
32
+ display: flex;
33
+ flex-direction: column;
34
+ flex: 1;
35
+ margin: 0;
36
+ height: 100%;
37
+ min-height: 100%;
38
+ }
39
+
40
+ .header, .server-name {
41
+ display: flex;
42
+ align-items: center;
43
+ justify-content: start;
44
+ color: #333;
45
+ }
46
+
47
+ .header {
48
+ font-weight: bold;
49
+ padding-left: 5px;
50
+ }
51
+
52
+ .header a {
53
+ text-decoration: none;
54
+ color: #333
55
+ }
56
+
57
+ .server-name {
58
+ flex: 1;
59
+ padding-left: 15px;
60
+ font-weight: normal;
61
+ }
62
+
63
+ .tabs-box {
64
+ display: flex;
65
+ flex-direction: row;
66
+ border-bottom: 1px solid #ddd;
67
+ height: 36px;
68
+ font-family: Helvetica, sans-serif;
69
+ }
70
+
71
+ .tab-button, .selected-tab-button {
72
+ border: none;
73
+ outline: none;
74
+ cursor: pointer;
75
+ width: 150px;
76
+ padding: 2px;
77
+ margin: 0;
78
+ display: flex;
79
+ justify-content: center;
80
+ background-color: #fff;
81
+ font-size: 18px;
82
+ }
83
+
84
+ .tab-button {
85
+ color: #888;
86
+ }
87
+
88
+ .tab-button:hover {
89
+ color: #333;
90
+ }
91
+
92
+ .selected-tab-button {
93
+ color: #333;
94
+ font-weight: bold;
95
+ }
96
+
97
+ .tab-content-element {
98
+ display: none;
99
+ }
100
+
101
+ .query-box {
102
+ display: flex;
103
+ flex-direction: column;
104
+ }
105
+
106
+ .query {
107
+ display: flex;
108
+ flex: 1;
109
+ }
110
+
111
+ .submit-box {
112
+ display: flex;
113
+ border-top: 1px solid #ddd;
114
+ justify-content: right;
115
+ }
116
+
117
+ .submit-button {
118
+ cursor: pointer;
119
+ margin: 5px;
120
+ border: 1px solid #888;
121
+ background: none;
122
+ padding: 5px;
123
+ font-size: 18px;
124
+ color: #333;
125
+ }
126
+
127
+ .status {
128
+ display: flex;
129
+ justify-content: center;
130
+ align-content: center;
131
+ flex-direction: column;
132
+ font-family: Helvetica, sans-serif;
133
+ white-space: nowrap;
134
+ overflow: hidden;
135
+ font-size: 18px;
136
+ color: #333;
137
+ }
138
+
139
+ .result-box, .saved-box, .graph-box, .structure-box {
140
+ flex: 1;
141
+ overflow: auto;
142
+ display: flex;
143
+ flex-direction: column;
144
+ }
145
+
146
+ .graph-box, .result-box {
147
+ border-top: 1px solid #ddd;
148
+ }
149
+
150
+ .graph-box {
151
+ padding: 20px;
152
+ }
153
+
154
+ table {
155
+ font-family: monospace;
156
+ flex: 1;
157
+ border-spacing: 0;
158
+ display: flex;
159
+ width: 100%;
160
+ color: #333;
161
+ }
162
+
163
+ table td:last-child, table th:last-child {
164
+ width: 100%;
165
+ border-right: none !important;
166
+ }
167
+
168
+ td, th {
169
+ padding: 5px 20px 5px 5px;
170
+ font-weight: normal;
171
+ white-space: nowrap;
172
+ max-width: 500px;
173
+ overflow: hidden;
174
+ text-overflow: ellipsis;
175
+ }
176
+
177
+ td {
178
+ text-align: right;
179
+ }
180
+
181
+ th {
182
+ text-align: left;
183
+ font-weight: bold;
184
+ border-bottom: 1px solid #ddd;
185
+ border-right: 1px solid #ddd;
186
+ }
187
+
188
+ table {
189
+ display: block;
190
+ }
191
+
192
+ thead {
193
+ padding: 0;
194
+ background-color: #fff;
195
+ position: -webkit-sticky;
196
+ position: sticky;
197
+ top: 0;
198
+ z-index: 100;
199
+ table-layout: fixed;
200
+ }
201
+
202
+ .highlighted-row {
203
+ background: #eee;
204
+ }
205
+
206
+ .status-box {
207
+ padding: 5px;
208
+ display: flex;
209
+ flex-direction: row;
210
+ justify-content: space-between;
211
+ border-top: 1px solid #ddd;
212
+ height: 30px;
213
+ }
214
+
215
+ .CodeMirror pre.CodeMirror-placeholder {
216
+ color: #999;
217
+ }
218
+
219
+ .tabs-box {
220
+ display: flex;
221
+ }
222
+
223
+ .saved-box {
224
+ font-family: Helvetica, sans-serif;
225
+ }
226
+
227
+ .saved-box h2 {
228
+ margin: 0;
229
+ font-weight: bold;
230
+ }
231
+
232
+ .saved-list-item:last-child {
233
+ border-top: none !important;
234
+ }
235
+
236
+ .saved-box p {
237
+ margin: 0;
238
+ }
239
+
240
+ .saved-list-item {
241
+ cursor: pointer;
242
+ border-bottom: 1px solid #eeeeee;
243
+ margin: 0;
244
+ padding: 10px;
245
+ }
246
+
247
+ .saved-list-item h2 {
248
+ margin: 0 0 5px;
249
+ }
250
+
251
+ .saved-box div:hover {
252
+ background: #eee;
253
+ }
254
+
255
+ .cm-editor.cm-focused {
256
+ outline: none !important;
257
+ }
258
+
259
+ .schemas, .tables {
260
+ border: none;
261
+ display: flex;
262
+ min-width: 200px;
263
+ }
264
+
265
+ .table-info {
266
+ display: grid;
267
+ grid-template-rows: 0.5fr 0.5fr;
268
+ justify-items: stretch;
269
+ flex: 1;
270
+ }
271
+
272
+ .columns {
273
+ border-bottom: 1px solid #ddd;
274
+ overflow: auto;
275
+ grid-column: 1;
276
+ grid-row: 1;
277
+ }
278
+
279
+ .indexes {
280
+ overflow: auto;
281
+ grid-column: 1;
282
+ grid-row: 2;
283
+ }
284
+
285
+ select {
286
+ outline: none;
287
+ color: #333;
288
+ }
data/client/resources/sqlui.html CHANGED
@@ -8,9 +8,13 @@
8
8
  </head>
9
9
 
10
10
  <body>
11
- <div class="main-box">
11
+ <div id="loading-box" class="loading-box">
12
+ </div>
13
+
14
+ <div id="main-box" class="main-box" style="display:none">
12
15
  <div class="tabs-box">
13
- <div id="header" class="header">SQLUI</div>
16
+ <h1 class="header"><a href="/sqlui">SQLUI</a></h1>
17
+ <h1 id="server-name" class="server-name"></h1>
14
18
  <input id="query-tab-button" class="tab-button" type="button" value="Query" onclick="sqlui.selectTab('query')"></input>
15
19
  <input id="graph-tab-button" class="tab-button" type="button" value="Graph" onclick="sqlui.selectTab('graph')"></input>
16
20
  <input id="saved-tab-button" class="tab-button" type="button" value="Saved" onclick="sqlui.selectTab('saved')"></input>
@@ -21,11 +25,10 @@
21
25
  <div id="query"></div>
22
26
  </div>
23
27
 
24
- <!--
25
28
  <div id="submit-box" class="submit-box tab-content-element graph-element query-element" style="display: none;">
26
- <input id="submit-button" class="submit-button" type="button" value="submit" onclick="submit();"></input>
29
+ <input id="submit-all-button" class="submit-button" type="button" value="execute (ctrl-shift-enter)" onclick="sqlui.submitAll();"></input>
30
+ <input id="submit-current-button" class="submit-button" type="button" value="execute selection (ctrl-enter)" onclick="sqlui.submitCurrent();"></input>
27
31
  </div>
28
- -->
29
32
 
30
33
  <div id="result-box" class="result-box tab-content-element query-element" style="display: none;">
31
34
  </div>