Skip to content

Commit b867e20

Browse files
swordfish444swordfish444
committed
Initial implementation. Not tested yet
1 parent 74861b0 commit b867e20

6 files changed

Lines changed: 739 additions & 14 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,8 @@ That’s all, just start the application, you will see in the logcat an entry li
8888

8989
Now open the provided link in your browser.
9090

91+
Tip: Use the "Customize UI" link next to "Run Query" to adjust table layout (stored only in your browser).
92+
9193
Important:
9294

9395
* Your Android phone and laptop should be connected to the same Network (Wifi or LAN).

‎debug-db-base/src/main/assets/app.js‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
$( document ).ready(function() {
2+
if (window.AddbUiCustomization && typeof window.AddbUiCustomization.init === "function") {
3+
window.AddbUiCustomization.init();
4+
}
25
getDBList();
36
$("#query").keypress(function(e){
47
if(e.which == 13) {
@@ -206,6 +209,11 @@ function inflateData(result){
206209
availableButtons = [];
207210
}
208211

212+
var displayLength = 10;
213+
if (window.AddbUiCustomization && typeof window.AddbUiCustomization.getSettings === "function") {
214+
displayLength = window.AddbUiCustomization.getSettings().pageLength;
215+
}
216+
209217
$(tableId).dataTable({
210218
"data": columnData,
211219
"columnDefs": columnHeader,
@@ -215,13 +223,17 @@ function inflateData(result){
215223
'bInfo': true,
216224
"bSort" : true,
217225
"scrollX": true,
218-
"iDisplayLength": 10,
226+
"iDisplayLength": displayLength,
219227
"dom": "Bfrtip",
220228
select: 'single',
221229
altEditor: true, // Enable altEditor
222230
buttons: availableButtons
223231
})
224232

233+
if (window.AddbUiCustomization && typeof window.AddbUiCustomization.onDataTableCreated === "function") {
234+
window.AddbUiCustomization.onDataTableCreated($(tableId).DataTable());
235+
}
236+
225237
//attach row-updated listener
226238
$(tableId).on('update-row.dt', function (e, updatedRowData, callback) {
227239
var updatedRowDataArray = JSON.parse(updatedRowData);

‎debug-db-base/src/main/assets/custom.css‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,92 @@
2020
font-weight: bold;
2121
}
2222

23+
#addb-customize-categories .list-group-item {
24+
word-break: normal;
25+
}
26+
27+
.addb-customize-link {
28+
margin-right: 8px;
29+
}
30+
31+
.addb-customize-heading .btn-link {
32+
padding-top: 0;
33+
padding-bottom: 0;
34+
}
35+
36+
.addb-customize-summary {
37+
margin-bottom: 20px;
38+
color: #555;
39+
}
40+
41+
.addb-max-width-input {
42+
max-width: 240px;
43+
}
44+
45+
#app-container.addb-container-fluid-max {
46+
max-width: 1600px;
47+
margin-left: auto;
48+
margin-right: auto;
49+
}
50+
51+
:root {
52+
--addb-max-col-width: 480px;
53+
--addb-sticky-header-top: 50px;
54+
}
55+
56+
body.addb-sticky-header #parent-data-div .dataTables_scrollHead {
57+
position: sticky;
58+
top: var(--addb-sticky-header-top);
59+
z-index: 20;
60+
background: #fff;
61+
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
62+
}
63+
64+
body.addb-density-compact #parent-data-div table.dataTable thead th,
65+
body.addb-density-compact #parent-data-div table.dataTable thead td,
66+
body.addb-density-compact #parent-data-div table.dataTable tbody th,
67+
body.addb-density-compact #parent-data-div table.dataTable tbody td {
68+
padding: 4px 8px;
69+
line-height: 1.2;
70+
}
71+
72+
body.addb-density-comfortable #parent-data-div table.dataTable thead th,
73+
body.addb-density-comfortable #parent-data-div table.dataTable thead td,
74+
body.addb-density-comfortable #parent-data-div table.dataTable tbody th,
75+
body.addb-density-comfortable #parent-data-div table.dataTable tbody td {
76+
padding: 12px 14px;
77+
line-height: 1.4;
78+
}
79+
80+
body.addb-wrap-long-text #parent-data-div table.dataTable th,
81+
body.addb-wrap-long-text #parent-data-div table.dataTable td {
82+
white-space: normal;
83+
overflow-wrap: anywhere;
84+
word-break: break-word;
85+
}
86+
87+
body.addb-max-col-width #parent-data-div table.dataTable {
88+
table-layout: fixed;
89+
}
90+
91+
body.addb-max-col-width #parent-data-div table.dataTable th,
92+
body.addb-max-col-width #parent-data-div table.dataTable td {
93+
max-width: var(--addb-max-col-width);
94+
}
95+
96+
body.addb-json-mode-wrapped #parent-data-div table.dataTable td.addb-json-cell {
97+
white-space: normal;
98+
overflow-wrap: anywhere;
99+
word-break: break-word;
100+
}
101+
102+
body.addb-json-mode-pretty #parent-data-div table.dataTable td.addb-json-cell {
103+
white-space: pre-wrap;
104+
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
105+
overflow-wrap: anywhere;
106+
word-break: break-word;
107+
}
108+
23109
#snackbar {
24110
visibility: hidden;
25111
min-width: 250px;

‎debug-db-base/src/main/assets/index.html‎

Lines changed: 128 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,9 @@
102102
</nav>
103103

104104

105-
<div class="container padding-fifty">
105+
<div id="app-container" class="container padding-fifty">
106+
107+
<div id="addb-main-view">
106108

107109
<div class="row padding-twenty">
108110
<div class="col-sm-12">
@@ -122,6 +124,10 @@
122124
class="btn btn-primary pull-right disabled">Run
123125
Query
124126
</button>
127+
<a id="open-ui-customization" href="?view=customize" class="btn btn-default btn-sm pull-right addb-customize-link">
128+
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
129+
Customize UI
130+
</a>
125131
</div>
126132
</div>
127133

@@ -151,10 +157,131 @@
151157
</div>
152158
</div>
153159

160+
</div>
161+
162+
<div id="addb-customize-view" class="display-none">
163+
<div class="row padding-twenty">
164+
<div class="col-sm-12">
165+
<div class="panel panel-info">
166+
<div class="panel-heading addb-customize-heading">
167+
<span>UI Customization</span>
168+
<a id="addb-customize-back" href="index.html" class="btn btn-link pull-right addb-customize-back">
169+
Back to Data
170+
</a>
171+
</div>
172+
<div class="panel-body">
173+
<p class="addb-customize-summary">
174+
These settings only affect how data is displayed in your browser. Clearing browser storage resets to defaults.
175+
</p>
176+
177+
<div class="row">
178+
<div class="col-sm-3">
179+
<div id="addb-customize-categories" class="list-group">
180+
<a href="#" class="list-group-item active" data-category="layout">Layout</a>
181+
<a href="#" class="list-group-item" data-category="text">Text &amp; JSON</a>
182+
<a href="#" class="list-group-item" data-category="paging">Paging</a>
183+
</div>
184+
</div>
185+
<div class="col-sm-9">
186+
<form id="addb-customize-form">
187+
<div class="addb-customize-category" data-category="layout">
188+
<div class="form-group">
189+
<label>Table width</label>
190+
<div class="radio">
191+
<label><input type="radio" name="addb-table-width" value="fixed"> Fixed (default)</label>
192+
</div>
193+
<div class="radio">
194+
<label><input type="radio" name="addb-table-width" value="full"> Full width</label>
195+
</div>
196+
<div class="radio">
197+
<label><input type="radio" name="addb-table-width" value="fluid"> Fluid (max width)</label>
198+
</div>
199+
<p class="help-block">Controls how much horizontal space the UI uses.</p>
200+
</div>
201+
202+
<div class="form-group">
203+
<label>Row density</label>
204+
<div class="radio">
205+
<label><input type="radio" name="addb-row-density" value="compact"> Compact</label>
206+
</div>
207+
<div class="radio">
208+
<label><input type="radio" name="addb-row-density" value="normal"> Normal (default)</label>
209+
</div>
210+
<div class="radio">
211+
<label><input type="radio" name="addb-row-density" value="comfortable"> Comfortable</label>
212+
</div>
213+
<p class="help-block">Adjusts row height and padding to fit more (or fewer) rows on screen.</p>
214+
</div>
215+
216+
<div class="checkbox">
217+
<label>
218+
<input type="checkbox" id="addb-sticky-header">
219+
Sticky header
220+
</label>
221+
<p class="help-block">Keep the table header visible while scrolling.</p>
222+
</div>
223+
</div>
224+
225+
<div class="addb-customize-category display-none" data-category="text">
226+
<div class="checkbox">
227+
<label>
228+
<input type="checkbox" id="addb-wrap-long-text">
229+
Wrap long text
230+
</label>
231+
<p class="help-block">Wraps cell contents instead of forcing horizontal scrolling.</p>
232+
</div>
233+
234+
<div class="form-group">
235+
<label for="addb-max-column-width">Max column width (px)</label>
236+
<div class="input-group addb-max-width-input">
237+
<input type="number" class="form-control" id="addb-max-column-width" placeholder="e.g. 480" min="120" max="2000" step="10">
238+
<span class="input-group-addon">px</span>
239+
</div>
240+
<p class="help-block">Applies when wrapping (or JSON formatting) is enabled. Helps keep wide columns manageable.</p>
241+
</div>
242+
243+
<div class="form-group">
244+
<label for="addb-json-mode">JSON display mode</label>
245+
<select id="addb-json-mode" class="form-control">
246+
<option value="raw">Raw (default)</option>
247+
<option value="wrapped">Wrapped</option>
248+
<option value="pretty">Pretty-printed</option>
249+
</select>
250+
<p class="help-block">Applies to cells that contain valid JSON objects/arrays.</p>
251+
</div>
252+
</div>
253+
254+
<div class="addb-customize-category display-none" data-category="paging">
255+
<div class="form-group">
256+
<label for="addb-page-length">Rows per page</label>
257+
<select id="addb-page-length" class="form-control">
258+
<option value="10">10</option>
259+
<option value="25">25</option>
260+
<option value="50">50</option>
261+
<option value="100">100</option>
262+
</select>
263+
<p class="help-block">Controls how many rows are shown per page in the data table.</p>
264+
</div>
265+
</div>
266+
267+
<hr>
268+
269+
<button type="button" id="addb-ui-apply" class="btn btn-primary">Apply</button>
270+
<button type="button" id="addb-ui-reset" class="btn btn-default">Reset to defaults</button>
271+
</form>
272+
</div>
273+
</div>
274+
</div>
275+
</div>
276+
</div>
277+
</div>
278+
</div>
279+
154280
<div id="snackbar">Data Updated Successfully</div>
155281

156282
</div>
157283

284+
<script src="ui-customization.js"></script>
158285
<script src="app.js"></script>
159286
</body>
160287
</html>

0 commit comments

Comments
 (0)