A big better organization but not complete yet.

9 months ago · 7548d1bbde
parent 52a2b2caab
commit 7548d1bbde
4 changed files with 103 additions and 32 deletions
--- a/commands/app.js
+++ b/commands/app.js
@ -17,13 +17,9 @@ export const required = [];
 let CONFIGURED = false;

 // 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 app = fastify(opts);
-
-  // forces reload of the modules
-  for(let mod of fg.sync("{api,pages}/*.js")) {
+const load_mode = async (mod) => {
  const control_mod = await import(`../${mod}?update=${Date.now()}`);
  const pf = path.parse(mod);
  const url = `/${pf.name}`;
@ -46,19 +42,41 @@ 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.get("/pages/todo_alpine.html", (req, rep) => {
-    const result = nunjucks.render("todo_alpine.html");
+  app.get("/*", (req, rep) => {
+    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);
+    } else {
+      rep.code(404);
+    }
  });

  app.register(FastifyStatic, {
    root: path.join(path.resolve("."), 'static'),
-    prefix: '/', // optional: default '/'
-    constraints: {}, // optional: default {}
+    prefix: '/static',
+    constraints: {},
    index: "index.html"
  });

--- a/controllers/todo.js
+++ b/controllers/todo.js
--- a/pages/header.html
+++ b/pages/header.html
@ -2,12 +2,12 @@

 <html>
  <head>
-    <script src="/axios.js"></script>
+    <script src="/static/axios.js"></script>
    <title>Bandolier2</title>

 <style>
-@import "/open-props.min.css";
-@import "/normalize.min.css";
+@import "/static/open-props.min.css";
+@import "/static/normalize.min.css";
 </style>

 <head>
--- a/pages/todo_alpine/index.html
+++ b/pages/todo_alpine/index.html
@ -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" %}