Basic web page to draw graphs from descriptions

[erdiag.git] / index.html
diff --git a/index.html b/index.html

new file mode 100644 (file)

index 0000000..429232c
--- /dev/null
+++ b/index.html
@@ -0,0 +1,51 @@
+<!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>