123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137 |
- <!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-md-12">
- <div class="row">
- <div class="col-md-12">
- </div>
- </div>
- <div class="row">
- <div class="col-md-6">
- <div id="editor"></div>
- </div>
- <div class="col-md-6">
- <div id="card-544879">
- <div class="card">
- <div class="card-header">
- <a class="card-link" data-toggle="collapse" data-parent="#card-544879" href="#card-element-858398">Snippet 1</a>
- </div>
- <div id="card-element-858398" class="collapse show">
- <div class="card-body">
- <div class="jumbotron">
- <h2>
- Snippet 1
- </h2>
- <p>
- Some python code
- </p>
- <p>
- <a class="btn btn-primary btn-large" href="#">Load</a>
- </p>
- </div>
- </div>
- </div>
- </div>
- <div class="card">
- <div class="card-header">
- <a class="collapsed card-link" data-toggle="collapse" data-parent="#card-544879" href="#card-element-291021">Snippet 2</a>
- </div>
- <div id="card-element-291021" class="collapse">
- <div class="card-body">
- <div class="jumbotron">
- <h2>
- Snippet 1
- </h2>
- <p>
- Some python code
- </p>
- <p>
- <a class="btn btn-primary btn-large" href="#">Load</a>
- </p>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row">
- <div class="col-md-12">
- <p id="results" class="text-info">
-
- </p>
- </div>
- </div>
- <div class="row">
- <div class="col-md-4">
-
- <button type="button" class="btn btn-success btn-lg" id="run">Run</button>
- </div>
- <div class="col-md-4">
- </div>
- <div class="col-md-4">
-
- <address>
- <strong>Eran Goldman-Malka</strong><br /> erangoldman@gmail.com
- </address>
- </div>
- </div>
- </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>
|