170 lines
3.7 KiB
HTML
170 lines
3.7 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="pl">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<title>MKScript Editor – {{model_name}}</title>
|
|||
|
|
|
|||
|
|
<!-- CodeMirror CSS -->
|
|||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.9/codemirror.min.css">
|
|||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.9/theme/dracula.min.css">
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
body {
|
|||
|
|
background: #282a36;
|
|||
|
|
color: #f8f8f2;
|
|||
|
|
font-family: 'Fira Code', monospace;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h2 {
|
|||
|
|
text-align: center;
|
|||
|
|
color: #50fa7b;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
button {
|
|||
|
|
margin: 5px 5px 5px 0;
|
|||
|
|
padding: 8px 16px;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
background: #6272a4;
|
|||
|
|
color: #f8f8f2;
|
|||
|
|
font-weight: bold;
|
|||
|
|
transition: 0.2s;
|
|||
|
|
}
|
|||
|
|
button:hover {
|
|||
|
|
background: #50fa7b;
|
|||
|
|
color: #282a36;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#editor-container {
|
|||
|
|
margin-top: 10px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
border: 1px solid #6272a4;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.CodeMirror {
|
|||
|
|
height: 400px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.panel {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
background: #44475a;
|
|||
|
|
padding: 10px;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
overflow-x: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.panel h3 {
|
|||
|
|
margin: 0 0 5px 0;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #ff79c6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#output, #debug {
|
|||
|
|
white-space: pre-wrap;
|
|||
|
|
color: #f1fa8c;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<h2>MKScript Editor – {{model_name}}</h2>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<button onclick="run()">▶ Uruchom</button>
|
|||
|
|
<button onclick="check()">✓ Sprawdź</button>
|
|||
|
|
<button onclick="downloadFile()">💾 Pobierz</button>
|
|||
|
|
<!-- Wczytywanie pliku -->
|
|||
|
|
<input type="file" id="upload" accept=".ql" onchange="uploadFile()">
|
|||
|
|
|
|||
|
|
<a href="/" style="color:#50fa7b; margin-left: 10px;">← Wróć</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div id="editor-container">
|
|||
|
|
<textarea id="code">
|
|||
|
|
use mk;
|
|||
|
|
|
|||
|
|
int a = 5;
|
|||
|
|
int b = 10;
|
|||
|
|
|
|||
|
|
int c = mk.add(a, b);
|
|||
|
|
print(c);
|
|||
|
|
</textarea>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="panel">
|
|||
|
|
<h3>Console Output</h3>
|
|||
|
|
<pre id="output"></pre>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="panel">
|
|||
|
|
<h3>Debugger (zmienne)</h3>
|
|||
|
|
<pre id="debug"></pre>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- CodeMirror JS -->
|
|||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.9/codemirror.min.js"></script>
|
|||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.9/mode/python/python.min.js"></script>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
const editor = CodeMirror.fromTextArea(document.getElementById("code"), {
|
|||
|
|
lineNumbers: true,
|
|||
|
|
mode: "python",
|
|||
|
|
theme: "dracula",
|
|||
|
|
matchBrackets: true,
|
|||
|
|
indentUnit: 4,
|
|||
|
|
tabSize: 4,
|
|||
|
|
autofocus: true
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
async function run() {
|
|||
|
|
const code = editor.getValue();
|
|||
|
|
const res = await fetch("/run_script", {
|
|||
|
|
method: "POST",
|
|||
|
|
headers: {"Content-Type":"application/json"},
|
|||
|
|
body: JSON.stringify({code})
|
|||
|
|
});
|
|||
|
|
const data = await res.json();
|
|||
|
|
if(data.error){
|
|||
|
|
document.getElementById("output").textContent = "ERROR: "+data.error;
|
|||
|
|
document.getElementById("debug").textContent = "";
|
|||
|
|
}else{
|
|||
|
|
document.getElementById("output").textContent = data.output.join("\n");
|
|||
|
|
document.getElementById("debug").textContent = JSON.stringify(data.variables,null,2);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function check(){
|
|||
|
|
const code = editor.getValue();
|
|||
|
|
if(!code.includes(";")) alert("Brak średników ;");
|
|||
|
|
else alert("Składnia OK ✔");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function downloadFile(){
|
|||
|
|
const blob = new Blob([editor.getValue()], {type:"text/plain"});
|
|||
|
|
const a = document.createElement("a");
|
|||
|
|
a.href = URL.createObjectURL(blob);
|
|||
|
|
a.download = "{{model_name}}.ql";
|
|||
|
|
a.click();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function uploadFile(){
|
|||
|
|
const file = document.getElementById("upload").files[0];
|
|||
|
|
if(!file) return;
|
|||
|
|
const form = new FormData();
|
|||
|
|
form.append("file", file);
|
|||
|
|
fetch("/upload_script", {method:"POST", body:form})
|
|||
|
|
.then(r => r.text())
|
|||
|
|
.then(alert);
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|