index.html

   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
  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");
  37             function getRadioValue(name) {
  38                 for (let el of document.getElementsByName(name))
  39                 {
  40                     if (el.checked)
  41                         return el.value;
  42                 }
  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);
  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>