initial commit with read working

2025-06-10 11:34:08 +07:00 · 2025-06-10 11:34:08 +07:00 · 4ce9f89fea
commit 4ce9f89fea
3 changed files with 51 additions and 0 deletions
--- a/css/style.css
+++ b/css/style.css
@ -0,0 +1,7 @@
+body {
+  background-color: white;
+}
+
+section#members-table {
+  width: 50%;
+}
--- a/index.html
+++ b/index.html
@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>API Client</title>
+
+    <link
+      href="https://cdn.jsdelivr.net/npm/gridjs/dist/theme/mermaid.min.css"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="css/style.css" />
+  </head>
+
+  <body>
+    <section id="members-table"></section>
+
+    <script src="https://cdn.jsdelivr.net/npm/gridjs/dist/gridjs.umd.js"></script>
+    <script src="js/voy.js"></script>
+    <script>
+      new gridjs.Grid({
+        columns: ["ID", "Name", "Phone"],
+        sort: true,
+        data: async () => {
+          const res = await voy("http://localhost:11000/api/read", "GET");
+
+          return res.data;
+        },
+      }).render(document.getElementById("members-table"));
+    </script>
+  </body>
+</html>
--- a/js/voy.js
+++ b/js/voy.js
@ -0,0 +1,12 @@
+async function voy(url, method, data = null, contentType, authorization) {
+  const headers = { "Content-Type": contentType };
+  if (authorization) headers.Authorization = authorization;
+
+  const body =
+    data && contentType === "application/json" ? JSON.stringify(data) : data;
+
+  return await fetch(url, { method, headers, body }).then((res) => {
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    return res.json();
+  });
+}