projects / erdiag.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 2906c53)
Basic web page to draw graphs from descriptions
authorBenjamin Auder <benjamin.auder@somewhere>
Mon, 5 Feb 2018 23:03:00 +0000 (00:03 +0100)
committerBenjamin Auder <benjamin.auder@somewhere>
Mon, 5 Feb 2018 23:03:00 +0000 (00:03 +0100)
.gitignore patch | blob | blame | history
README.md patch | blob | blame | history
index.html [new file with mode: 0644] patch | blob

diff --git a/.gitignore b/.gitignore
index 6b59895..1377554 100644 (file)
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1 @@
 *.swp
 *.swp
-#index.html for local tests
-index.html
diff --git a/README.md b/README.md
index b57f840..83d1b90 100644 (file)
--- 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)
 **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)
  - 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 (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>
Entity-Relationship Diagrams Generator