[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="mcd" value="compact" checked/> compact
			<input type="radio" name="mcd" value="bubble"/> bubble
		</div>
		<div>
			<span>Output type:</span>
			<input type="radio" name="output" value="graph" checked/> drawn graph
			<input type="radio" name="output" value="text"/> graphviz input
		</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 getRadioValue(name) {
				for (let el of document.getElementsByName(name))
				{
					if (el.checked)
						return el.value;
				}
			}
			function processGraphDesc() {
				const graphDesc = document.getElementById("graphDesc").value;
				const mcdType = getRadioValue("mcd");
				const outputType = getRadioValue("output");
				const er = new ErDiags(graphDesc, outputType);
				er.drawMcd("mcd", mcdType);
				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>
04ccd4f6 BA	14	<input type="radio" name="mcd" value="compact" checked/> compact
	15	<input type="radio" name="mcd" value="bubble"/> bubble
	16	</div>
	17	<div>
	18	<span>Output type:</span>
	19	<input type="radio" name="output" value="graph" checked/> drawn graph
	20	<input type="radio" name="output" value="text"/> graphviz input
01cb2ab3 BA	21	</div>
	22
	23	<textarea id="graphDesc" rows="15" style="width:100%"></textarea>
	24	<div id="result" style="display:none">
	25	<h2>MCD graph:</h3>
	26	<div id="mcd"></div>
	27	<h2>MLD graph:</h2>
	28	<div id="mld"></div>
	29	<h2>SQL instructions:</h2>
	30	<div id="sql"></div>
	31	</div>
	32
	33	<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
	34	<script src="parser.js"></script>
	35	<script>
	36	const result = document.getElementById("result");
04ccd4f6 BA	37	function getRadioValue(name) {
04ccd4f6 BA	38	for (let el of document.getElementsByName(name))
01cb2ab3 BA	39	{
01cb2ab3 BA	40	if (el.checked)
04ccd4f6	41	return el.value;
01cb2ab3	42	}
04ccd4f6 BA	43	}
	44	function processGraphDesc() {
	45	const graphDesc = document.getElementById("graphDesc").value;
	46	const mcdType = getRadioValue("mcd");
	47	const outputType = getRadioValue("output");
	48	const er = new ErDiags(graphDesc, outputType);
	49	er.drawMcd("mcd", mcdType);
01cb2ab3 BA	50	er.drawMld("mld");
	51	er.fillSql("sql");
	52	result.style.display = "block";
	53	//document.location.href = "#result"; //TODO: not working (auto-scroll)
	54	}
	55	</script>
	56	</body>