Reorder files
parent
6e261b147d
commit
91f8150bf7
@ -1,8 +1,10 @@
|
|||||||
export default function html(body: string): string {
|
export default function html(body: string): string {
|
||||||
return /* HTML */ `<!DOCTYPE html>
|
return /* HTML */ `<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="/dist/bundle.js"></script>
|
||||||
|
</head>
|
||||||
<link href="/style.css" rel="stylesheet" type="text/css" />
|
<link href="/style.css" rel="stylesheet" type="text/css" />
|
||||||
${body}
|
${body}
|
||||||
<script src="/dist/bundle.js"></script>
|
|
||||||
</html>`;
|
</html>`;
|
||||||
}
|
}
|
||||||
|
@ -0,0 +1,20 @@
|
|||||||
|
import Router from "@koa/router";
|
||||||
|
import { Context, Middlewares } from "sealious";
|
||||||
|
import html from "../html";
|
||||||
|
import { NewTask, TaskList } from "../views/tasks";
|
||||||
|
|
||||||
|
const router = new Router();
|
||||||
|
|
||||||
|
export async function MainView(context: Context) {
|
||||||
|
return html(/* HTML */ `<title>My ToDo App</title>
|
||||||
|
<body>
|
||||||
|
<h1>My ToDo App</h1>
|
||||||
|
${await TaskList(context)} ${NewTask()}
|
||||||
|
</body>`);
|
||||||
|
}
|
||||||
|
|
||||||
|
router.get("/", Middlewares.extractContext(), async (ctx) => {
|
||||||
|
ctx.body = await MainView(ctx.$context);
|
||||||
|
});
|
||||||
|
|
||||||
|
export default router;
|
@ -0,0 +1,31 @@
|
|||||||
|
import Router from "@koa/router";
|
||||||
|
import { Middlewares } from "sealious";
|
||||||
|
import { MainView } from "./homepage";
|
||||||
|
|
||||||
|
const router = new Router();
|
||||||
|
|
||||||
|
router.post(
|
||||||
|
"/",
|
||||||
|
Middlewares.extractContext(),
|
||||||
|
Middlewares.parseBody(),
|
||||||
|
async (ctx) => {
|
||||||
|
await ctx.$app.collections.tasks
|
||||||
|
.make({
|
||||||
|
title: ctx.$body.title as string,
|
||||||
|
done: false,
|
||||||
|
})
|
||||||
|
.save(ctx.$context);
|
||||||
|
ctx.body = await MainView(ctx.$context);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
router.delete("/:task_id", Middlewares.extractContext(), async (ctx) => {
|
||||||
|
const task = await ctx.$app.collections.tasks.getByID(
|
||||||
|
ctx.$context,
|
||||||
|
ctx.params.task_id
|
||||||
|
);
|
||||||
|
await task.remove(ctx.$context);
|
||||||
|
ctx.body = await MainView(ctx.$context);
|
||||||
|
});
|
||||||
|
|
||||||
|
export default router;
|
@ -0,0 +1,58 @@
|
|||||||
|
import { CollectionItem, Context } from "sealious";
|
||||||
|
import frame from "../frame";
|
||||||
|
|
||||||
|
export function Task(task: CollectionItem<any>) {
|
||||||
|
return frame(
|
||||||
|
`task-${task.id}`,
|
||||||
|
/* HTML */ `<li class="task">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
data-controller="task"
|
||||||
|
data-action="task#toggle"
|
||||||
|
data-id="${task.id}"
|
||||||
|
${task.get("done") ? "checked" : ""}
|
||||||
|
/>
|
||||||
|
${task.get("title")}
|
||||||
|
<form
|
||||||
|
method="DELETE"
|
||||||
|
action="/tasks/${task.id}"
|
||||||
|
data-turbo-frame="task-list"
|
||||||
|
>
|
||||||
|
<input class="delete-button" type="submit" value="🗑" />
|
||||||
|
</form>
|
||||||
|
</li>`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function TaskList(context: Context) {
|
||||||
|
const { items: tasks } = await context.app.collections.tasks
|
||||||
|
.list(context)
|
||||||
|
.fetch();
|
||||||
|
return frame(
|
||||||
|
"task-list",
|
||||||
|
/* HTML */ `
|
||||||
|
<ul>
|
||||||
|
${tasks.map(Task).join("\n")}
|
||||||
|
</ul>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function NewTask() {
|
||||||
|
return frame(
|
||||||
|
"new-task",
|
||||||
|
/* HTML */ `<form
|
||||||
|
method="POST"
|
||||||
|
action="/tasks"
|
||||||
|
data-turbo-frame="task-list"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
id="new-task-title"
|
||||||
|
type="text"
|
||||||
|
placeholder="write an app"
|
||||||
|
name="title"
|
||||||
|
/>
|
||||||
|
<input type="submit" value="Add" />
|
||||||
|
</form>`
|
||||||
|
);
|
||||||
|
}
|
Loading…
Reference in New Issue