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