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="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>