--- /dev/null
+<!DOCTYPE html>
+<html>
+
+ <head>
+ <meta charset="utf-8"/>
+ <title>erdiag tool</title>
+ </head>
+
+ <body>
+ <h2>Graph description</h2>
+ <button onClick="processGraphDesc()">Send</button>
+ <div>
+ <span>MCD graph type:</span>
+ <input type="radio" name="mcd" value="compact" checked/> compact
+ <input type="radio" name="mcd" value="bubble"/> bubble
+ </div>
+ <div>
+ <span>Output type:</span>
+ <input type="radio" name="output" value="graph" checked/> drawn graph
+ <input type="radio" name="output" value="text"/> graphviz input
+ </div>
+ <div>
+ <span>Image type:</span>
+ <input type="radio" name="image" value="svg" checked/> SVG
+ <input type="radio" name="image" value="png"/> PNG
+ </div>
+
+ <textarea id="graphDesc" rows="15" style="width:100%"></textarea>
+ <div id="result" style="display:none">
+ <h2>MCD graph:</h3>
+ <div id="mcd"></div>
+ <h2>MLD graph:</h2>
+ <div id="mld"></div>
+ <h2>SQL instructions:</h2>
+ <div id="sql"></div>
+ </div>
+
+ <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
+ <script src="parser.js"></script>
+ <script>
+ const result = document.getElementById("result");
+ function getRadioValue(name) {
+ for (let el of document.getElementsByName(name))
+ {
+ if (el.checked)
+ return el.value;
+ }
+ }
+ function processGraphDesc() {
+ const graphDesc = document.getElementById("graphDesc").value;
+ const mcdType = getRadioValue("mcd");
+ const outputType = getRadioValue("output");
+ const imageType = getRadioValue("image");
+ const er = new ErDiags(graphDesc, outputType, imageType);
+ er.drawMcd("mcd", mcdType);
+ er.drawMld("mld");
+ er.fillSql("sql");
+ result.style.display = "block";
+ //document.location.href = "#result"; //TODO: not working (auto-scroll)
+ }
+ </script>
+ </body>
projects / erdiag.git / blobdiff