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