ext/wasm/batch-runner.html

   1 <!doctype html>
   2 <html lang="en-us">
   3   <head>
   4     <meta charset="utf-8">
   5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   6     <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
   7     <link rel="stylesheet" href="common/emscripten.css"/>
   8     <link rel="stylesheet" href="common/testing.css"/>
   9     <title>sqlite3-api batch SQL runner</title>
  10   </head>
  11   <body>
  12     <header id='titlebar'><span>sqlite3-api batch SQL runner</span></header>
  13     <!-- emscripten bits -->
  14     <figure id="module-spinner">
  15       <div class="spinner"></div>
  16       <div class='center'><strong>Initializing app...</strong></div>
  17       <div class='center'>
  18         On a slow internet connection this may take a moment.  If this
  19         message displays for "a long time", intialization may have
  20         failed and the JavaScript console may contain clues as to why.
  21       </div>
  22     </figure>
  23     <div class="emscripten" id="module-status">Downloading...</div>
  24     <div class="emscripten">
  25       <progress value="0" max="100" id="module-progress" hidden='1'></progress>
  26     </div><!-- /emscripten bits -->
  27     <p>
  28       This page is for batch-running extracts from the output
  29       of <tt>speedtest1 --script</tt>, as well as other standalone SQL
  30       scripts.
  31     </p>
  32     <p id='warn-list' class='warning'>ACHTUNG: this file requires a generated input list
  33       file. Run "make batch" from this directory to generate it.
  34     </p>
  35     <p id='warn-opfs' class='warning hidden'>WARNING: if the WASMFS/OPFS layer crashes, this page may
  36       become completely unresponsive and need to be closed and reloaded to recover.
  37     </p>
  38     <p id='warn-websql' class='warning hidden'>WARNING: WebSQL's limited API requires that
  39       this app split up SQL batches into separate statements for execution. That will
  40       only work so long as semicolon characters are <em>only</em> used to terminate
  41       SQL statements, and not used within string literals or the like.
  42     </p>
  43     <hr>
  44     <fieldset id='toolbar'>
  45       <div>
  46         <select class='disable-during-eval' id='sql-select'>
  47           <option disabled selected>Populated via script code</option>
  48         </select>
  49         <button class='disable-during-eval' id='sql-run'>Run selected SQL</button>
  50         <button class='disable-during-eval' id='sql-run-next'>Run next...</button>
  51         <button class='disable-during-eval' id='sql-run-remaining'>Run all remaining...</button>
  52         <button class='disable-during-eval' id='export-metrics' disabled>Export metrics (WIP)<br>(broken by refactoring)</button>
  53         <button class='disable-during-eval' id='db-reset'>Reset db</button>
  54         <button id='output-clear'>Clear output</button>
  55         <span class='input-wrapper flex-col'>
  56           <label for='select-impl'>Storage impl:</label>
  57           <select id='select-impl'>
  58             <option value='virtualfs'>Virtual filesystem</option>
  59             <option value='memdb'>:memory:</option>
  60             <option value='wasmfs-opfs'>WASMFS OPFS</option>
  61             <option value='websql'>WebSQL</option>
  62           </select>
  63         </span>
  64       </fieldset>
  65     </div>
  66     <hr>
  67       <span class='input-wrapper'>
  68         <input type='checkbox' class='disable-during-eval' id='cb-reverse-log-order' checked></input>
  69         <label for='cb-reverse-log-order'>Reverse log order (newest first)</label>
  70       </span>
  71     <div id='test-output'></div>
  72     <script src="jswasm/sqlite3.js"></script>
  73     <script src="common/SqliteTestUtil.js"></script>
  74     <script src="batch-runner.js"></script>
  75     <style>
  76       .flex-col {
  77           display: flex;
  78           flex-direction: column;
  79       }
  80       #toolbar > div {
  81           display: flex;
  82           flex-direction: row;
  83           flex-wrap: wrap;
  84       }
  85       #toolbar > div > * {
  86           margin: 0.25em;
  87       }
  88     </style>
  89   </body>
  90 </html>