[erdiag.git] / index.html

<!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>
Commit	Line	Data
01cb2ab3 BA	1	<!DOCTYPE html>
	2	<html>
	3
	4	<head>
	5	<meta charset="utf-8"/>
	6	<title>erdiag tool</title>
	7	</head>
	8
	9	<body>
	10	<h2>Graph description</h2>
	11	<button onClick="processGraphDesc()">Send</button>
	12	<div>
	13	<span>MCD graph type:</span>
	14	<input type="radio" name="output" value="compact" checked/> compact
	15	<input type="radio" name="output" value="bubble"/> bubble
	16	</div>
	17
	18	<textarea id="graphDesc" rows="15" style="width:100%"></textarea>
	19	<div id="result" style="display:none">
	20	<h2>MCD graph:</h3>
	21	<div id="mcd"></div>
	22	<h2>MLD graph:</h2>
	23	<div id="mld"></div>
	24	<h2>SQL instructions:</h2>
	25	<div id="sql"></div>
	26	</div>
	27
	28	<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
	29	<script src="parser.js"></script>
	30	<script>
	31	const result = document.getElementById("result");
	32	function processGraphDesc() {
	33	const graphDesc = document.getElementById("graphDesc").value;
	34	const er = new ErDiags(graphDesc);
	35	let mode = "compact";
	36	for (let el of document.getElementsByName("output"))
	37	{
	38	if (el.checked)
	39	{
	40	mode = el.value;
	41	break;
	42	}
	43	}
	44	er.drawMcd("mcd", mode);
	45	er.drawMld("mld");
	46	er.fillSql("sql");
	47	result.style.display = "block";
	48	//document.location.href = "#result"; //TODO: not working (auto-scroll)
	49	}
	50	</script>
	51	</body>