<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Telegram Bot Visual Editor</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/drawflow/dist/drawflow.min.css">
<script src="https://cdn.jsdelivr.net/npm/drawflow/dist/drawflow.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="drawflow" style="width: 800px; height: 600px; border: 1px solid black;"></div>
<script>
const id = document.getElementById("drawflow");
const editor = new Drawflow(id);
editor.start();
// Добавление узлов
editor.addNode('StartCommand', 0, 1, 150, 300, 'telegram', { command: '/start', response: 'Привет! Я ваш бот.' });
editor.addNode('EchoCommand', 0, 1, 400, 300, 'telegram', { response: '{{message}}' });
// Генерация и отправка кода на сервер
function generateAndSendPythonCode() {
const nodes = editor.getNodes();
let code = '';
nodes.forEach(node => {
if (node.data.command) {
code += `def ${node.data.command.slice(1)}(update: Update, context: CallbackContext) -> None:\n`;
code += ` update.message.reply_text('${node.data.response}')\n`;
code += `\n`;
} else if (node.data.response) {
code += `def echo(update: Update, context: CallbackContext) -> None:\n`;
code += ` update.message.reply_text(update.message.text)\n`;
code += `\n`;
}
});
axios.post('/execute', { command: '/start', code: code })
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
}
</script>
</body>
</html>