Basic web page to draw graphs from descriptions
[erdiag.git] / index.html
CommitLineData
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>