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. 38
      commands/app.js
  2. 0
      controllers/todo.js
  3. 6
      pages/header.html
  4. 53
      pages/todo_alpine/index.html

38
commands/app.js
Unescape View File

@ -17,13 +17,9 @@ 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 configure = async (fastify, opts) => { const load_mode = async (mod) => {
const app = fastify(opts);
// forces reload of the modules
for(let mod of fg.sync("{api,pages}/*.js")) {
const control_mod = await import(`../${mod}?update=${Date.now()}`); const control_mod = await import(`../${mod}?update=${Date.now()}`);
const pf = path.parse(mod); const pf = path.parse(mod);
const url = `/${pf.name}`; const url = `/${pf.name}`;
@ -48,17 +44,39 @@ const configure = async (fastify, opts) => {
} }
} }
const configure = async (fastify, opts) => {
const app = fastify(opts);
// forces reload of the modules
for(let mod of fg.sync("{api,controllers}/*.js")) {
load_mode(mod);
}
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));
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); 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