|
@@ -0,0 +1,79 @@
|
|
|
|
+<!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 class="panel panel-default">
|
|
|
|
+ <div class="panel-heading">
|
|
|
|
+ <h3 class="panel-title">Editor</h3>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="panel-body"> -->
|
|
|
|
+ <div id="editor"></div>
|
|
|
|
+<!-- </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="text-center">---End of editor---</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://localhost:8080/');
|
|
|
|
+// ws.onopen = function() {
|
|
|
|
+// };
|
|
|
|
+// ws.onclose = function() {
|
|
|
|
+// document.body.style.backgroundColor = null;
|
|
|
|
+// };
|
|
|
|
+// ws.onmessage = function(event) {
|
|
|
|
+// document.getElementById('count').textContent = event.data;
|
|
|
|
+// };
|
|
|
|
+
|
|
|
|
+$("#run").click(function(){
|
|
|
|
+ws.send(editor.session.getValue())
|
|
|
|
+ws.send('go')
|
|
|
|
+})
|
|
|
|
+ </script>
|
|
|
|
+</body>
|
|
|
|
+</html>
|