index.html 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  6. <title>Editor</title>
  7. <style link rel="stylesheet" href="css/bootstrap.min.css">
  8. <style type="text/css" media="screen">
  9. body {
  10. overflow: hidden;
  11. }
  12. #editor {
  13. height: 300px;
  14. width: 45%;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <div class="container-fluid">
  20. <div class="row">
  21. <div class="col-xs-6 col-md-6">
  22. <div id="editor"></div>
  23. <div id="results"></div>
  24. </div>
  25. <div class="col-xs-6 col-md-6">
  26. <p> snippets </p>
  27. </div>
  28. </div>
  29. <div class="row">
  30. <div class="col-md-4">
  31. <button id="run" type="button" class="btn btn-success btn-lg">Run</button>
  32. </div>
  33. <div class="col-md-4">
  34. </div>
  35. <div class="col-md-4">
  36. </div>
  37. </div>
  38. </div>
  39. <script src="js/jquery-3.3.1.min.js"></script>
  40. <script src="js/bootstrap.bundle.min.js"></script>
  41. <script src="js/ace.js" type="text/javascript" charset="utf-8"></script>
  42. <script src="js/ext-language_tools.js"></script>
  43. <script>
  44. // trigger extension
  45. ace.require("ace/ext/language_tools");
  46. var editor = ace.edit("editor");
  47. editor.session.setMode("ace/mode/python");
  48. editor.setTheme("ace/theme/dracula");
  49. // enable autocompletion and snippets
  50. editor.setOptions({
  51. enableBasicAutocompletion: true,
  52. enableSnippets: true,
  53. enableLiveAutocompletion: false
  54. });
  55. var ws = new WebSocket('ws://'+window.location.host+':8080/');
  56. ws.onopen = function(event) {
  57. console.log("open ws connection");
  58. console.log(event.data);
  59. };
  60. ws.onclose = function() {
  61. console.log("close ws connection");
  62. };
  63. ws.onmessage = function(event) {
  64. $("#results").append(event.data)
  65. console.log("Got data :");
  66. console.log(event.data);
  67. };
  68. $("#run").click(function(){
  69. ws.send(editor.session.getValue())
  70. ws.send('go')
  71. $("#results").html("")
  72. })
  73. </script>
  74. </body>
  75. </html>