|
1 | 1 | <!DOCTYPE html> |
2 | 2 | <html> |
| 3 | + <title>sqldef</title> |
| 4 | + <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet"> |
3 | 5 | <head> |
4 | 6 | <meta charset="utf-8"> |
5 | 7 | <script src="wasm_exec.js"></script> |
6 | 8 | <script src="sqldef_browser.js"></script> |
7 | 9 | <style> |
8 | 10 | body { |
9 | | - font-family: sans-serif; |
| 11 | + font-family: 'Raleway', sans-serif; |
| 12 | + font-size: 20px; |
10 | 13 | width: 960px; |
11 | 14 | margin: 20px auto; |
12 | 15 | color: #fff; |
|
23 | 26 | pre { |
24 | 27 | display: none; |
25 | 28 | } |
| 29 | + #error { |
| 30 | + padding: 1em; |
| 31 | + background: IndianRed; |
| 32 | + color: DarkRed; |
| 33 | + border: 1px solid DarkRed; |
| 34 | + } |
| 35 | + a, a:visited, a:active { |
| 36 | + color: inherit; |
| 37 | + } |
| 38 | + a:hover { |
| 39 | + color: IndianRed; |
| 40 | + } |
26 | 41 | </style> |
27 | 42 | </head> |
28 | 43 | <body> |
| 44 | + <h1>sqldef</h1> |
| 45 | + <img src="https://github.com/k0kubun/sqldef/raw/master/demo.gif" alt="screen capture" /> |
| 46 | + <h2>What is it?</h2> |
| 47 | + <p>sqldef is a <a href="https://github.com/k0kubun/sqldef">CLI tool</a>, <a href="https://github.com/sqldef/sqldef.github.io">webasm library</a>, and <a href="https://github.com/sqldef/node-sqldef">nodejs tool/library</a> for diffing SQL schema. You can use it to manage migration of PostgreSQL and MySQL databases, using regular SQL DDL.</p> |
| 48 | + <h2>Demo</h2> |
29 | 49 | <p>You can diff these 2 schemas:</p> |
30 | | - |
| 50 | +<pre id="error"></pre> |
31 | 51 | <textarea id="inputA" rows="10"> |
32 | 52 | CREATE TABLE user ( |
33 | 53 | id BIGINT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY, |
|
58 | 78 | const inputA = document.getElementById('inputA') |
59 | 79 | const inputB = document.getElementById('inputB') |
60 | 80 | const output = document.getElementById('output') |
| 81 | +const error = document.getElementById('error') |
61 | 82 |
|
62 | 83 | button.addEventListener('click', async () => { |
63 | 84 | output.style.display = 'none' |
64 | | - output.innerHTML = await window.sqldef(dbType.value, inputB.value, inputA.value) |
| 85 | + error.style.display = 'none' |
| 86 | + try { |
| 87 | + output.innerHTML = await window.sqldef(dbType.value, inputB.value, inputA.value) |
| 88 | + } catch (e) { |
| 89 | + error.style.display = 'block' |
| 90 | + error.innerHTML = e.message |
| 91 | + } |
65 | 92 | output.style.display = 'block' |
66 | 93 | }) |
67 | 94 | </script> |
|
0 commit comments