kuba/strona-czynna
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Reorder files

Browse Source
This commit is contained in:
Kuba Orlik 2021-02-07 13:52:54 +01:00
parent 6e261b147d
commit 91f8150bf7
6 changed files with 118 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -21,6 +21,7 @@
"dependencies": { "dependencies": {
"@babel/core": "^7.12.10", "@babel/core": "^7.12.10",
"@hotwired/turbo": "^7.0.0-beta.3", "@hotwired/turbo": "^7.0.0-beta.3",
"@koa/router": "^10.0.0",
"nodemon": "^2.0.7", "nodemon": "^2.0.7",
"sealious": "^0.13.4", "sealious": "^0.13.4",
"stimulus": "^2.0.0" "stimulus": "^2.0.0"

4
src/back/html.ts
View File

@ -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>`;
} }

98
src/back/index.ts
View File

@ -1,8 +1,8 @@
import _locreq from "locreq"; import _locreq from "locreq";
import Sealious, { CollectionItem, Context, Middlewares } from "sealious"; import Sealious from "sealious";
import TheApp from "./app"; import TheApp from "./app";
import frame from "./frame"; import homepage from "./routes/homepage";
import html from "./html"; import tasks from "./routes/tasks";
const locreq = _locreq(__dirname); const locreq = _locreq(__dirname);
declare module "koa" { declare module "koa" {
@ -17,95 +17,7 @@ const app = new TheApp();
app.start(); app.start();
const router = app.HTTPServer.router; const router = app.HTTPServer.router;
router.use("/", homepage.routes());
function Task(task: CollectionItem<any>) { router.use("/tasks", tasks.routes());
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="/task/${task.id}"
data-turbo-frame="task-list"
>
<input class="delete-button" type="submit" value="🗑" />
</form>
</li>`
);
}
async function TaskList(context: Context) {
const { items: tasks } = await app.collections.tasks.list(context).fetch();
return frame(
"task-list",
/* HTML */ `
<ul>
${tasks.map(Task).join("\n")}
</ul>
`
);
}
function NewTask() {
return frame(
"new-task",
/* HTML */ `<form
method="POST"
action="/new-task"
data-turbo-frame="task-list"
>
<input
id="new-task-title"
type="text"
placeholder="write an app"
name="title"
/>
<input type="submit" value="Add" />
</form>`
);
}
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);
});
router.post(
"/new-task",
Middlewares.extractContext(),
Middlewares.parseBody(),
async (ctx) => {
await app.collections.tasks
.make({
title: ctx.$body.title as string,
done: false,
})
.save(ctx.$context);
ctx.body = await MainView(ctx.$context);
}
);
router.delete("/task/:task_id", Middlewares.extractContext(), async (ctx) => {
const task = await app.collections.tasks.getByID(
ctx.$context,
ctx.params.task_id
);
await task.remove(ctx.$context);
ctx.body = await MainView(ctx.$context);
});
app.HTTPServer.addStaticRoute("/", locreq.resolve("public")); app.HTTPServer.addStaticRoute("/", locreq.resolve("public"));

20
src/back/routes/homepage.ts Normal file
View File

@ -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;

31
src/back/routes/tasks.ts Normal file
View File

@ -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;

58
src/back/views/tasks.ts Normal file
View File

@ -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>`
);
}