Создаем первый файл
Перед собой мы видим среду разработки IDE, в ней находятся все файлы нашего
аккаунта. Список файлов и папок в левой части; там-же мы можем добавить новый файл.
Для этого используем самую нижнюю-левую кнопку, которая называется "Добавить файл"
Первое что мы сделаем - это создадим директорию для нашего плагина. Нам нужна директория, потому что в следующих шагах мы сделаем из нее плагин для подключения во внешние аккаунты.
- Нажимаем "Добавить файл"
- Появится выбор типа файлов, в нем выбираем Директория
Введем название plugin (можете выбрать любое свое, но дальнейшие инструкции будут именно с этим названием)
Директория должна появиться у нас в левой части. После этого, переходим в нее и теперь уже добавляем первый файл в эту директорию
- Нажимаем "Добавить файл"
- Появится выбор типа файлов, в нем выбираем Серверный TypeScript
В появившемся окне введем название файла index и нажмем кнопку Создать:
Так же добавляем файлы script.js и style.css, они пригодятся позже.
Итак, файлы созданы.
Наш веб-сервис мы будем пока создавать в HTML-стиле, поэтому давайте сотрем все содержание файла и вставим наш код.
index.tsx
import { jsx } from "@app/html-jsx";
import { Heap } from "@app/heap";
const Notes = Heap.Table("note", {
title: Heap.String(),
completed: Heap.Boolean(),
});
app.html("/", async (ctx) => {
let notes = await Notes.findAll(ctx, { order: { title: "asc" } });
return (
<html>
<head>
<script src="./script.js"></script>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<h1>Список задач</h1>
<form id="addTaskForm" title="Создать задачу">
<div>
<input
id="taskTitle"
name="title"
placeholder="Опишите задачу"
required
/>
</div>
<div class="margin">
<button onclick={`createTask('${createRoute.url()}')`}>
Создать задачу
</button>
</div>
</form>
<div id="addTaskList">
{notes.map((note) => {
return (
<div
id="list"
class="list"
>
<div class='task-container'>
<input
class="task-checkbox"
type="checkbox"
checked={note.completed}
onchange={`checkTask('${toggleRoute({
id: note.id,
}).url()}')`}
/>
<span class="task-text">{note.title}</span>
</div>
<button
onclick={`deleteTask('${deleteRoute({ id: note.id }).url()}')`}
type="button"
class="delete"
>
Удалить
</button>
</div>
);
})}
</div>
</body>
</html>
);
});
const createRoute = app.post("/create", async (ctx, req) => {
ctx.account.log("click", { json: req });
await Notes.create(ctx, {
title: req.body.title,
completed: false,
});
return;
});
const toggleRoute = app.post("/toggle/:id", async (ctx, req) => {
ctx.account.log("done");
let note = await Notes.getById(ctx, req.params.id);
await Notes.update(ctx, { id: note.id, completed: !note.completed });
return;
});
const deleteRoute = app.post("/delete/:id/submit", async (ctx, req) => {
await Notes.delete(ctx, req.params.id);
return;
});
script.js
const createTask = async(url)=> {
// event.preventDefault(); // предотвращаем перезагрузку страницы
const title = document.getElementById('taskTitle').value
const response = await fetch(url, {
method: 'POST',
body: new URLSearchParams({
title: title,
}),
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
});
location.reload();
};
const checkTask = async( url)=> {
const response = await fetch(url, {
method: 'POST',
body: {},
});
location.reload();
};
const deleteTask = async( url)=> {
const response = await fetch(url, {
method: 'POST',
body: {},
});
location.reload();
};
style.css
.task-container {
display: flex;
align-items: center;
margin-bottom: 10px;
}
/* Стиль для кастомного чекбокса */
.task-checkbox {
appearance: none;
width: 20px;
height: 20px;
border: 2px solid #000;
border-radius: 4px;
margin-right: 10px;
position: relative;
cursor: pointer;
}
/* Стиль для состояния чекбокса с галочкой */
.task-checkbox:checked {
background-color: #4CAF50;
border-color: #4CAF50;
}
.task-checkbox:checked::after {
content: '✔';
position: absolute;
top: 0;
left: 2px;
color: white;
font-size: 16px;
}
/* Стиль для текста задачи */
.task-text {
font-size: 16px;
}
.list{
margin-top: 2vh;
width: 50vw;
display: flex;
justify-content: space-between;
align-items: center;
}
.margin{
margin: 15px 0px;
}
button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease;
}
button[type="submit"]:hover {
background-color: #45a049;
}
/* Стили для кнопок "Удалить" */
button.delete {
background-color: #f44336;
color: white;
border: none;
padding: 5px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease;
}
button.delete:hover {
background-color: #da190b;
}
/* Стили для поля ввода */
input {
width: 300px;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
outline: none;
transition: border-color 0.3s ease;
}
/* Стили для поля ввода при фокусе */
input:focus {
border-color: #4CAF50;
}
/* Стили для placeholder */
input::placeholder {
color: #888;
font-style: italic;
}
Сохраните файл с помощью кнопки Save, вы увидите что предпросмотр справа обновился, в результате это должно выглядеть так:
