@@ -6,6 +6,8 @@ const dbFileElm = document.getElementById('dbfile');
66const savedbElm = document . getElementById ( 'savedb' ) ;
77const querySection = document . getElementById ( 'query' ) ;
88const uploadSection = document . getElementById ( 'dropzone' ) ;
9+ const promptArea = document . getElementById ( 'prompt-area' ) ;
10+ const artificialLimit = 5000 ;
911
1012// Start the worker in which sql.js will run
1113const worker = new Worker ( "worker.sql-wasm.js" ) ;
@@ -31,24 +33,59 @@ function noerror() {
3133 errorElm . classList . remove ( 'alert' , 'alert-danger' ) ;
3234}
3335
36+ function showResults ( results , maxRows ) {
37+ tic ( ) ;
38+ outputElm . innerHTML = "" ;
39+ for ( let i = 0 ; i < results . length ; i ++ ) {
40+ let table = tableCreate ( results [ i ] . columns , results [ i ] . values , maxRows ) ;
41+ outputElm . appendChild ( table ) ;
42+ }
43+ toc ( "Displaying results" ) ;
44+ }
45+ 46+ function askUserIfToShowEverything ( results ) {
47+ promptArea . classList . remove ( 'visually-hidden' ) ;
48+ promptArea . innerHTML = `
49+ <div class="group-question">
50+ <p>השאילתה מחזירה הרבה תוצאות. להציג את כולן?</p>
51+ <div class="grouped-buttons">
52+ <button class="btn btn-success">לא</button>
53+ <button data-get-all="true" class="btn btn-danger">כן</button>
54+ </div>
55+ </div>
56+ ` ;
57+ const buttons = Array . from ( promptArea . querySelectorAll ( 'button' ) )
58+ buttons . forEach ( ( b ) => {
59+ b . addEventListener ( 'click' , ( ) => {
60+ const getAll = ( b . dataset . getAll !== undefined ) ;
61+ const maxToShow = getAll ? Infinity : artificialLimit ;
62+ if ( getAll ) {
63+ promptArea . innerHTML = "<p>זה יקח קצת זמן...</p>" ;
64+ }
65+ showResults ( results , maxToShow ) ;
66+ promptArea . classList . add ( 'visually-hidden' ) ;
67+ } ) ;
68+ } ) ;
69+ }
70+ 3471// Run a command in the database
3572function execute ( commands ) {
3673 tic ( ) ;
3774 worker . onmessage = function ( event ) {
3875 var results = event . data . results ;
3976
77+ 4078 toc ( "Executing SQL" ) ;
4179 if ( ! results ) {
4280 error ( { message : event . data . error } ) ;
4381 return ;
4482 }
4583
46- tic ( ) ;
47- outputElm . innerHTML = "" ;
48- for ( var i = 0 ; i < results . length ; i ++ ) {
49- outputElm . appendChild ( tableCreate ( results [ i ] . columns , results [ i ] . values ) ) ;
84+ if ( results [ 0 ] . values . length > artificialLimit ) {
85+ askUserIfToShowEverything ( results ) ;
86+ } else {
87+ showResults ( results , Infinity ) ;
5088 }
51- toc ( "Displaying results" ) ;
5289 }
5390 worker . postMessage ( { action : 'exec' , sql : commands } ) ;
5491 outputElm . textContent = "Fetching results..." ;
@@ -61,7 +98,9 @@ var tableCreate = function () {
6198 var open = '<' + tagName + '>' , close = '</' + tagName + '>' ;
6299 return open + vals . join ( close + open ) + close ;
63100 }
64- return function ( columns , values ) {
101+ return function ( columns , values , maxRows ) {
102+ maxRows = Math . min ( maxRows , values . length ) ;
103+ values = values . slice ( 0 , maxRows ) ;
65104 var tbl = document . createElement ( 'table' ) ;
66105 tbl . classList . add ( 'table' , 'table-hover' )
67106 var html = '<thead>' + valconcat ( columns , 'th' ) + '</thead>' ;
0 commit comments