97 lines
3.2 KiB
HTML
97 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Code Editor</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/codemirror.min.css">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/codemirror.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/mode/javascript/javascript.min.js"></script>
|
|
<style>
|
|
.CodeMirror {
|
|
border: 1px solid #eee;
|
|
height: auto;
|
|
}
|
|
.CodeMirror-scroll {
|
|
overflow-y: hidden;
|
|
overflow-x: auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Code Editor</h1>
|
|
<textarea id="codeEditor"></textarea>
|
|
<button onclick="updateCode()">Update Code</button>
|
|
<button onclick="runCode()">Run</button>
|
|
<button onclick="sendMessage()">Test WS</button>
|
|
<div id="messages"></div>
|
|
|
|
<script>
|
|
var editor = CodeMirror.fromTextArea(document.getElementById("codeEditor"), {
|
|
mode: "javascript",
|
|
lineNumbers: true,
|
|
theme: "default"
|
|
});
|
|
|
|
var websocket = new WebSocket("ws://localhost:8081/ws");
|
|
|
|
websocket.onopen = function(event) {
|
|
console.log("Connected to WebSocket server");
|
|
};
|
|
|
|
websocket.onmessage = function(event) {
|
|
var messages = document.getElementById("messages");
|
|
var message = document.createElement("p");
|
|
message.textContent = "Received: " + event.data;
|
|
messages.appendChild(message);
|
|
};
|
|
|
|
websocket.onclose = function(event) {
|
|
console.log("Disconnected from WebSocket server");
|
|
};
|
|
|
|
// Function to fetch the code snippet from the server
|
|
function fetchCode() {
|
|
fetch('/task/01975b05-647e-7ed5-abdd-f412a8a4882b') // Assuming snippet ID is 1
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
editor.setValue(atob(JSON.parse(data.code).code));
|
|
})
|
|
.catch(error => console.error('Error fetching code:', error));
|
|
}
|
|
|
|
// Function to update the code snippet on the server
|
|
function runCode() {
|
|
fetch('http://127.0.0.1:3000/run', {
|
|
method: 'GET',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ code: btoa(editor.getValue()) }),
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
alert(data.message);
|
|
})
|
|
.catch(error => console.error('Error updating code:', error));
|
|
}
|
|
|
|
|
|
function sendMessage() {
|
|
var messageInput = document.getElementById("codeEditor");
|
|
websocket.send("01975b05-647e-7ed5-abdd-f412a8a4882b");
|
|
// Fetch code on page load
|
|
//fetchCode();
|
|
// websocket.send(messageInput.value);
|
|
messageInput.value = "";
|
|
}
|
|
|
|
// Fetch code on page load
|
|
fetchCode();
|
|
setTimeout(sendMessage, 1000);
|
|
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html> |