**TODO** list:
- functional integrity constraints (CIF)
- - inter-relations constraints (or, and, xor...)
+ - inter-relations constraints (or, and, xor, inclusion)
- inheritance with the right symbol (triangle)
- - put online somewhere (user enter graph description and get SVG + SQL)
-*Implementation note:* temporary dependency to [underscore](http://underscorejs.org/); good library but used so far only for its shuffle() method.
+*Implementation note:* temporary dependency to [underscore](http://underscorejs.org/); used only for its shuffle() method.
--- /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="output" value="compact" checked/> compact
+ <input type="radio" name="output" value="bubble"/> bubble
+ </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 processGraphDesc() {
+ const graphDesc = document.getElementById("graphDesc").value;
+ const er = new ErDiags(graphDesc);
+ let mode = "compact";
+ for (let el of document.getElementsByName("output"))
+ {
+ if (el.checked)
+ {
+ mode = el.value;
+ break;
+ }
+ }
+ er.drawMcd("mcd", mode);
+ er.drawMld("mld");
+ er.fillSql("sql");
+ result.style.display = "block";
+ //document.location.href = "#result"; //TODO: not working (auto-scroll)
+ }
+ </script>
+ </body>