learn-javascript-the-hard-way
/
bandolier2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

A big better organization but not complete yet.

Browse Source
main
Zed A. Shaw 9 months ago
parent 52a2b2caab
commit 7548d1bbde
4 changed files with 103 additions and 32 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 76
      commands/app.js
  2. 0
      controllers/todo.js
  3. 6
      pages/header.html
  4. 53
      pages/todo_alpine/index.html

76
commands/app.js
Unescape View File

@ -17,48 +17,66 @@ export const required = [];
let CONFIGURED = false; let CONFIGURED = false;
// nunjucks does it's own reload so let it do that // nunjucks does it's own reload so let it do that
nunjucks.configure("templates", { watch: true }); nunjucks.configure("pages", { watch: true });
const load_mode = async (mod) => {
const control_mod = await import(`../${mod}?update=${Date.now()}`);
const pf = path.parse(mod);
const url = `/${pf.name}`;
console.log("URL IS", url);
for(let verb of ["get", "post", "put", "delete"]) {
const handler = control_mod[verb];
if(handler !== undefined) {
console.log("ADDING VERB", verb);
app[verb](url, async (req, rep) => {
try {
await handler(req, rep);
} catch(error) {
console.error(error);
console.error(error.stack);
console.error(error.source);
}
});
}
}
}
const configure = async (fastify, opts) => { const configure = async (fastify, opts) => {
const app = fastify(opts); const app = fastify(opts);
// forces reload of the modules // forces reload of the modules
for(let mod of fg.sync("{api,pages}/*.js")) { for(let mod of fg.sync("{api,controllers}/*.js")) {
const control_mod = await import(`../${mod}?update=${Date.now()}`); load_mode(mod);
const pf = path.parse(mod);
const url = `/${pf.name}`;
console.log("URL IS", url);
for(let verb of ["get", "post", "put", "delete"]) {
const handler = control_mod[verb];
if(handler !== undefined) {
console.log("ADDING VERB", verb);
app[verb](url, async (req, rep) => {
try {
await handler(req, rep);
} catch(error) {
console.error(error);
console.error(error.stack);
console.error(error.source);
}
});
}
}
} }
app.register(Formbody); app.register(Formbody);
app.get("/pages/todo_alpine.html", (req, rep) => { app.get("/*", (req, rep) => {
const result = nunjucks.render("todo_alpine.html"); const target = path.resolve(path.join("pages", req.url));
rep.code(200).type("text/html").send(result); const index = path.resolve(path.join("pages", req.url, "index.html"));
console.log("TARGET", target, "INDEX", index);
if(fs.existsSync(index)) {
const fname = path.join(req.url.slice(1), "index.html");
console.log("RENDERING", fname);
const result = nunjucks.render(fname);
rep.code(200).type("text/html").send(result);
} else if(fs.existsSync(target)) {
const fname = req.url.slice(1);
const result = nunjucks.render(fname);
rep.code(200).type("text/html").send(result);
} else {
rep.code(404);
}
}); });
app.register(FastifyStatic, { app.register(FastifyStatic, {
root: path.join(path.resolve("."), 'static'), root: path.join(path.resolve("."), 'static'),
prefix: '/', // optional: default '/' prefix: '/static',
constraints: {}, // optional: default {} constraints: {},
index: "index.html" index: "index.html"
}); });

0
pages/todo.js → controllers/todo.js
Unescape View File

6
pages/header.html
Unescape View File

@ -2,12 +2,12 @@
<html> <html>
<head> <head>
<script src="/axios.js"></script> <script src="/static/axios.js"></script>
<title>Bandolier2</title> <title>Bandolier2</title>
<style> <style>
@import "/open-props.min.css"; @import "/static/open-props.min.css";
@import "/normalize.min.css"; @import "/static/normalize.min.css";
</style> </style>
<head> <head>

53
pages/todo_alpine/index.html
Unescape View File

@ -0,0 +1,53 @@
{% include "../header.html" %}
<h1>Your TODOs</h1>
<script src="/alpine.js"></script>
<script>
const new_task = async (todos, task) => {
const result = await axios({
method: "post",
url: "/todo_alpine",
data: {task},
headers: {
Accept: "application/json"
}
});
// zero error handling but fine for now
return result.data;
}
const list_todo = async () => {
const result = await axios({
method: "get",
url: "/todo_alpine",
headers: {
Accept: "application/json"
}
});
return result.data;
}
</script>
<p>Welcome {{ name }}, here's your TODOs</p>
<div
x-data="{todos: []}"
x-init="todos = await list_todo()">
<ol>
<template x-for="todo of todos">
<li x-text="todo.task"></li>
</template>
</ol>
<h4>Add a New TODO</h4>
<form action="/todo_alpine" @submit.prevent="todos = await 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 = await new_task(todos, task), task = ''">Submit</button>
</form>
</div>
{% include "../footer.html" %}
Write Preview
Loading…
Cancel
Save