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