Commit | Line | Data |
---|---|---|
01cb2ab3 BA |
1 | <!DOCTYPE html> |
2 | <html> | |
3 | ||
4 | <head> | |
5 | <meta charset="utf-8"/> | |
6 | <title>erdiag tool</title> | |
7 | </head> | |
8 | ||
9 | <body> | |
10 | <h2>Graph description</h2> | |
11 | <button onClick="processGraphDesc()">Send</button> | |
12 | <div> | |
13 | <span>MCD graph type:</span> | |
14 | <input type="radio" name="output" value="compact" checked/> compact | |
15 | <input type="radio" name="output" value="bubble"/> bubble | |
16 | </div> | |
17 | ||
18 | <textarea id="graphDesc" rows="15" style="width:100%"></textarea> | |
19 | <div id="result" style="display:none"> | |
20 | <h2>MCD graph:</h3> | |
21 | <div id="mcd"></div> | |
22 | <h2>MLD graph:</h2> | |
23 | <div id="mld"></div> | |
24 | <h2>SQL instructions:</h2> | |
25 | <div id="sql"></div> | |
26 | </div> | |
27 | ||
28 | <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> | |
29 | <script src="parser.js"></script> | |
30 | <script> | |
31 | const result = document.getElementById("result"); | |
32 | function processGraphDesc() { | |
33 | const graphDesc = document.getElementById("graphDesc").value; | |
34 | const er = new ErDiags(graphDesc); | |
35 | let mode = "compact"; | |
36 | for (let el of document.getElementsByName("output")) | |
37 | { | |
38 | if (el.checked) | |
39 | { | |
40 | mode = el.value; | |
41 | break; | |
42 | } | |
43 | } | |
44 | er.drawMcd("mcd", mode); | |
45 | er.drawMld("mld"); | |
46 | er.fillSql("sql"); | |
47 | result.style.display = "block"; | |
48 | //document.location.href = "#result"; //TODO: not working (auto-scroll) | |
49 | } | |
50 | </script> | |
51 | </body> |