1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
- <title>Editor</title>
- <style link rel="stylesheet" href="css/bootstrap.min.css">
- <style type="text/css" media="screen">
- body {
- overflow: hidden;
- }
- #editor {
- height: 300px;
- width: 45%;
- }
- </style>
- </head>
- <body>
- <div class="container-fluid">
- <div class="row">
- <div class="col-xs-6 col-md-6">
- <div id="editor"></div>
- <div id="results"></div>
- </div>
- <div class="col-xs-6 col-md-6">
- <p> snippets </p>
- </div>
- </div>
- <div class="row">
- <div class="col-md-4">
- <button id="run" type="button" class="btn btn-success btn-lg">Run</button>
- </div>
- <div class="col-md-4">
- </div>
- <div class="col-md-4">
- </div>
- </div>
- </div>
- <script src="js/jquery-3.3.1.min.js"></script>
- <script src="js/bootstrap.bundle.min.js"></script>
- <script src="js/ace.js" type="text/javascript" charset="utf-8"></script>
- <script src="js/ext-language_tools.js"></script>
- <script>
- // trigger extension
- ace.require("ace/ext/language_tools");
- var editor = ace.edit("editor");
- editor.session.setMode("ace/mode/python");
- editor.setTheme("ace/theme/dracula");
- // enable autocompletion and snippets
- editor.setOptions({
- enableBasicAutocompletion: true,
- enableSnippets: true,
- enableLiveAutocompletion: false
- });
- var ws = new WebSocket('ws://'+window.location.host+':8080/');
- ws.onopen = function(event) {
- console.log("open ws connection");
- console.log(event.data);
- };
- ws.onclose = function() {
- console.log("close ws connection");
- };
- ws.onmessage = function(event) {
- $("#results").append(event.data)
- console.log("Got data :");
- console.log(event.data);
- };
- $("#run").click(function(){
- ws.send(editor.session.getValue())
- ws.send('go')
- $("#results").html("")
- })
- </script>
- </body>
- </html>
|