A basic but kind of scuffed Alpine version of the same functionality. Why is this so much more complicated?
parent
f72fec3a5d
commit
bafff1d25f
@ -0,0 +1,38 @@ |
||||
import { ToDo } from "../lib/models.js"; |
||||
import nunjucks from "nunjucks"; |
||||
|
||||
// this can go away when I learn how to detect the request type
|
||||
export class TodoIndex { |
||||
async get(req, rep) { |
||||
const todo_list = await ToDo.all({}); |
||||
|
||||
const result = nunjucks.render("todo_alpine.html", {name: "Zed"}); |
||||
|
||||
rep.code(200).type("text/html").send(result); |
||||
} |
||||
} |
||||
|
||||
export class Todo { |
||||
async get(req, rep) { |
||||
const todo_list = await ToDo.all({}); |
||||
rep.code(200).send(todo_list); |
||||
} |
||||
|
||||
async post(req, rep) { |
||||
if(req.query.todo_id !== undefined) { |
||||
await ToDo.delete({id: req.query.todo_id}); |
||||
} else { |
||||
await ToDo.insert({task: req.body.task}); |
||||
} |
||||
|
||||
// this is how you can prevent the annoying double submit
|
||||
rep.code(200).send({message: "OK"}); |
||||
} |
||||
} |
||||
|
||||
// you use the export default to set the route URL?
|
||||
// I mean, it works not sure if I like it though
|
||||
export default { |
||||
todo_alpine: Todo, |
||||
todo_index: TodoIndex |
||||
}; |
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -0,0 +1,33 @@ |
||||
{% include "./header.html" %} |
||||
<h1>Your TODOs</h1> |
||||
|
||||
<script src="/alpine.js"></script> |
||||
|
||||
<script> |
||||
const new_task = async (todos, task) => { |
||||
// zero error handling but fine for now |
||||
await axios.post("/todo_alpine", {task}); |
||||
return (await axios.get('/todo_alpine')).data; |
||||
} |
||||
</script> |
||||
|
||||
<p>Welcome {{ name }}, here's your TODOs</p> |
||||
|
||||
<div |
||||
x-data="{todos: []}" |
||||
x-init="todos = (await axios.get('/todo_alpine')).data"> |
||||
<ol> |
||||
<template x-for="todo of todos"> |
||||
<li x-text="todo.task"></li> |
||||
</template> |
||||
</ol> |
||||
|
||||
<h4>Add a New TODO</h4> |
||||
<form action="/todo_index" @submit.prevent="todos = new_task(todos, task), task = ''" method="POST" x-data="{task: ''}"> |
||||
<label for="task">Task</label> |
||||
<input name="task" x-model="task"></input> |
||||
<button type="button" @click="todos = new_task(todos, task), task = ''">Submit</button> |
||||
</form> |
||||
|
||||
</div> |
||||
{% include "./footer.html" %} |
||||
Loading…
Reference in new issue