file-index.html 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. <!DOCTYPE html>
  2. <html lang='en'>
  3. <head>
  4. <meta charset='utf-8'>
  5. <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  6. <meta name='viewport' content='width=device-width, initial-scale=1'>
  7. <title>sYQL Editor</title>
  8. <link rel='stylesheet' type='text/css' href='//yastatic.net/bootstrap/3.3.1/css/bootstrap.min.css'/>
  9. <link rel='stylesheet' type='text/css' href='/css/base.css'/>
  10. </head>
  11. <body>
  12. <nav class='navbar navbar-default navbar-fixed-top'>
  13. <div class='container-fluid'><a class='navbar-brand navbar-logo' href='/'>sYQL</a>
  14. <ul class='nav navbar-nav'>
  15. <li><a href='#' id='parse'>parse</a></li>
  16. <li><a href='#' id='compile'>compile</a></li>
  17. <li><a href='#' id='validate'>validate</a></li>
  18. <li><a href='#' id='optimize'>optimize</a></li>
  19. <li><a href='#' id='peephole'>peephole</a></li>
  20. <li><a href='#' id='lineage'>lineage</a></li>
  21. <li><a href='#' id='run'><span class='glyphicon glyphicon-play'></span> run</a></li>
  22. <li><a href='#' id='paste'><span class='glyphicon glyphicon-floppy-disk'></span> paste</a></li>
  23. <li><a href='#' id='format'>format</a></li>
  24. </ul>
  25. <ul class='nav navbar-nav navbar-right'>
  26. <li><a href='#' id='show-ast'>Show Ast</a></li>
  27. <li><a href='#' id='show-expr'>Show Expr</a></li>
  28. <li><a href='#' id='trace-opt'>Trace Opt</a></li>
  29. </ul>
  30. </div>
  31. </nav>
  32. <div class='container-fluid'>
  33. <div class='row'>
  34. <div class='col-md-6'>
  35. <!-- Nav tabs -->
  36. <ul id="editor-tabs" class="nav nav-tabs" role="tablist">
  37. <li role="presentation" class="active"><a href="#sql" aria-controls="sql" role="tab" data-toggle="tab">sql</a></li>
  38. <li role="presentation"><a href="#yql" aria-controls="yql" role="tab" data-toggle="tab">yql</a></li>
  39. <p class='doc-link text-right'>
  40. <a href='https://yql.yandex-team.ru/docs/yt/s_expressions/' target='_blank'>
  41. sYQL Documentation <span class='glyphicon glyphicon-share'></span>
  42. </a>
  43. </p>
  44. </ul>
  45. <!-- Tab panes -->
  46. <div class="tab-content">
  47. <div role="tabpanel" class="tab-pane thumbnail active" id="sql">
  48. <div id='sql-editor' class=''></div>
  49. </div>
  50. <div role="tabpanel" class="tab-pane thumbnail" id="yql">
  51. <div id='yql-editor' class=''></div>
  52. </div>
  53. </div>
  54. <div class='panel panel-default'>
  55. <div class='panel-heading'>Parameters</div>
  56. <div class='panel-body'>
  57. <div id='params-editor' class='thumbnail'></div>
  58. </div>
  59. </div>
  60. </div>
  61. <div class='col-md-6 container-fluid'>
  62. <div class='panel panel-default'>
  63. <!-- Nav tabs -->
  64. <ul id="editor-tabs" class="nav nav-tabs" role="tablist">
  65. <li role="presentation" class="active"><a href="#table-input" role="tab" data-toggle="tab">Input</a></li>
  66. <li role="presentation"><a href="#table-attr" role="tab" data-toggle="tab">Attr</a></li>
  67. </ul>
  68. <div class="tab-content">
  69. <div role="tabpanel" class="tab-pane thumbnail active" id="table-input">
  70. <div id='table-input-editor' class='' style="height: 200px;"></div>
  71. </div>
  72. <div role="tabpanel" class="tab-pane thumbnail" id="table-attr">
  73. <div id='table-attr-editor' class='' style="height: 200px;"></div>
  74. </div>
  75. </div>
  76. </div>
  77. <div class='panel panel-default'>
  78. <div class='panel-heading'>Output table: <b>Output</b></div>
  79. <div class='panel-body'>
  80. <div id='output'>Run programm to show output data...</div>
  81. </div>
  82. </div>
  83. <div class='panel panel-default'>
  84. <div class='panel-heading'>Results:</div>
  85. <div class='panel-body'>
  86. <div id='results'>Run programm to show results...</div>
  87. </div>
  88. </div>
  89. </div>
  90. </div> <!-- row -->
  91. <div id='expr-editor' class='thumbnail'></div>
  92. <div id='opt-trace' class='thumbnail'></div>
  93. <div id='graph' class='thumbnail'>
  94. <svg width=960 height=600>
  95. <g/>
  96. </svg>
  97. </div>
  98. <div id='alerts'>
  99. <div id='errors' class='alert alert-danger alert-dismissible'>
  100. <button type="button" class="close"><span>&times;</span></button>
  101. <div class="message"></div>
  102. </div>
  103. <div id='warnings' class='alert alert-warning alert-dismissible'>
  104. <button type="button" class="close"><span>&times;</span></button>
  105. <div class="message"></div>
  106. </div>
  107. <div id='infos' class='alert alert-info alert-dismissible'>
  108. <button type="button" class="close"><span>&times;</span></button>
  109. <div class="message"></div>
  110. </div>
  111. <div id='status-success' class='alert alert-success alert-dismissible'>
  112. <button type="button" class="close"><span>&times;</span></button>
  113. <div class="message"></div>
  114. </div>
  115. <div id='status-fail' class='alert alert-danger alert-dismissible'>
  116. <button type="button" class="close"><span>&times;</span></button>
  117. <div class="message"></div>
  118. </div>
  119. </div>
  120. </div>
  121. <!-- container-fluid -->
  122. <script type='text/javascript'>
  123. window.YQL_TYPE = "file";
  124. </script>
  125. <script type='text/javascript' src='//yastatic.net/jquery/2.1.3/jquery.min.js'></script>
  126. <script type='text/javascript' src='//yastatic.net/bootstrap/3.3.1/js/bootstrap.min.js'></script>
  127. <script type='text/javascript' src='//yastatic.net/d3/3.4.5/d3.min.js'></script>
  128. <script type='text/javascript' src='//yastatic.net/lodash/2.4.1/lodash.min.js'></script>
  129. <script type='text/javascript' src='/js/graphlib.core.min.js'></script>
  130. <script type='text/javascript' src='/js/dagre.core.min.js'></script>
  131. <script type='text/javascript' src='/js/dagre-d3.core.min.js'></script>
  132. <script type='text/javascript' src='/js/ace.min.js'></script>
  133. <script type='text/javascript' src='/js/theme-tomorrow.min.js'></script>
  134. <script type='text/javascript' src='/js/yql-functions.js'></script>
  135. <script type='text/javascript' src='/js/mode-sql.js'></script>
  136. <script type='text/javascript' src='/js/mode-yql.js'></script>
  137. <script type='text/javascript' src='/js/app.js'></script>
  138. </body>
  139. </html>