From 01cb2ab3fccbc8e9fb6afd23db54c5e2613c24c5 Mon Sep 17 00:00:00 2001 From: Benjamin Auder <benjamin.auder@somewhere> Date: Tue, 6 Feb 2018 00:03:00 +0100 Subject: [PATCH] Basic web page to draw graphs from descriptions --- .gitignore | 2 -- README.md | 5 ++--- index.html | 51 +++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 53 insertions(+), 5 deletions(-) create mode 100644 index.html diff --git a/.gitignore b/.gitignore index 6b59895..1377554 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1 @@ *.swp -#index.html for local tests -index.html diff --git a/README.md b/README.md index b57f840..83d1b90 100644 --- a/README.md +++ b/README.md @@ -68,8 +68,7 @@ Note that the "drawMcd" method can take a second argument, which indicates the t **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. diff --git a/index.html b/index.html new file mode 100644 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> -- 2.44.0