3123c2f8ce6e3643394cb4dd86b7d8fa7fe822cb
[erdiag.git] / index.html
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="mcd" value="compact" checked/> compact
15 <input type="radio" name="mcd" value="bubble"/> bubble
16 </div>
17 <div>
18 <span>Output type:</span>
19 <input type="radio" name="output" value="graph" checked/> drawn graph
20 <input type="radio" name="output" value="text"/> graphviz input
21 </div>
22 <div>
23 <span>Image type:</span>
24 <input type="radio" name="image" value="svg" checked/> SVG
25 <input type="radio" name="image" value="png"/> PNG
26 </div>
27
28 <textarea id="graphDesc" rows="15" style="width:100%"></textarea>
29 <div id="result" style="display:none">
30 <h2>MCD graph:</h3>
31 <div id="mcd"></div>
32 <h2>MLD graph:</h2>
33 <div id="mld"></div>
34 <h2>SQL instructions:</h2>
35 <div id="sql"></div>
36 </div>
37
38 <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
39 <script src="parser.js"></script>
40 <script>
41 const result = document.getElementById("result");
42 function getRadioValue(name) {
43 for (let el of document.getElementsByName(name))
44 {
45 if (el.checked)
46 return el.value;
47 }
48 }
49 function processGraphDesc() {
50 const graphDesc = document.getElementById("graphDesc").value;
51 const mcdType = getRadioValue("mcd");
52 const outputType = getRadioValue("output");
53 const imageType = getRadioValue("image");
54 const er = new ErDiags(graphDesc, outputType, imageType);
55 er.drawMcd("mcd", mcdType);
56 er.drawMld("mld");
57 er.fillSql("sql");
58 result.style.display = "block";
59 //document.location.href = "#result"; //TODO: not working (auto-scroll)
60 }
61 </script>
62 </body>