Merge pull request #337 from n0th1ng-else/import

n0th1ng-else · Jul 11, 2023 · 8257ab8 · 8257ab8
2 parents ec071d2 + e362275
commit 8257ab8
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 66 deletions.
diff --git a/src/import/index.html b/src/import/index.html
@@ -4,48 +4,17 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script type="module" src="./index.js"></script>
     <title>Importer</title>
   </head>
 
   <body>
     <div>
       <label for="fileEl">Choose a file:</label>
-      <input type="file" onchange="onFileSelect()" id="fileEl" />
+      <input type="file" id="fileEl" />
     </div>
     <div>
       <span id="statusEl"></span>
     </div>
-
-    <script>
-      const onAction = () => {
-        fetch("/status")
-          .then((response) => response.json())
-          .then((data) => {
-            const status = data.idle ? "Idling" : "Running";
-            const percentage = data.total ? (100 * data.done) / data.total : 0;
-            const text = `${status} ${percentage.toFixed(2)} (${data.done} of ${
-              data.total
-            })`;
-            const el = document.getElementById("statusEl");
-            el.textContent = text;
-
-            if (!data.idle || data.done !== data.total) {
-              setTimeout(() => onAction(), 500);
-            }
-          });
-      };
-
-      const onFileSelect = () => {
-        const el = document.getElementById("fileEl");
-        el.setAttribute("disabled", "disabled");
-
-        fetch("/import", {
-          method: "POST",
-          body: el.files[0],
-        })
-          .then(() => onAction())
-          .finally(() => el.removeAttribute("disabled"));
-      };
-    </script>
   </body>
 </html>
diff --git a/src/import/index.js b/src/import/index.js
@@ -0,0 +1,36 @@
+/* eslint-env browser */
+
+const onAction = () => {
+  fetch("/status")
+    .then((response) => response.json())
+    .then((data) => {
+      const status = data.idle ? "Idling" : "Running";
+      const percentage = data.total ? (100 * data.done) / data.total : 0;
+      const text = `${status} ${percentage.toFixed(2)} (${data.done} of ${
+        data.total
+      })`;
+      const el = document.getElementById("statusEl");
+      el.textContent = text;
+
+      if (!data.idle || data.done !== data.total) {
+        setTimeout(() => onAction(), 500);
+      }
+    });
+};
+
+const onFileSelect = () => {
+  const el = document.getElementById("fileEl");
+  el.setAttribute("disabled", "disabled");
+
+  fetch("/import", {
+    method: "POST",
+    body: el.files[0],
+  })
+    .then(() => onAction())
+    .finally(() => el.removeAttribute("disabled"));
+};
+
+// Attaching event handlers
+document
+  .querySelector("#fileEl")
+  .addEventListener("onchange", () => onFileSelect());
diff --git a/src/scripts/chart.ts b/src/scripts/chart.ts
@@ -1,36 +1,20 @@
 import { createServer as createHttps } from "node:https";
 import { createServer as createHttp } from "node:http";
-import { resolve as resolvePath } from "node:path";
-import { fileURLToPath } from "node:url";
 import express from "express";
 import { Logger } from "../logger/index.js";
 import * as envy from "../env.js";
 import { sSuffix } from "../text/index.js";
 import { httpsOptions } from "../../certs/index.js";
 import { DbClient } from "../db/index.js";
+import { initStaticServer } from "../server/static.js";
 
 const logger = new Logger("chart-script");
 
 export const run = async (): Promise<void> => {
-  const currentDir = fileURLToPath(new URL(".", import.meta.url));
-  const files = {
-    html: resolvePath(currentDir, "../chart/index.html"),
-    js: resolvePath(currentDir, "../chart/index.js"),
-  };
+  const app = initStaticServer("chart");
 
   let db: DbClient | null = null;
 
-  const app = express();
-  app.use(express.json());
-
-  app.get("/", (req: express.Request, res: express.Response) => {
-    res.status(200).sendFile(files.html);
-  });
-
-  app.get("/index.js", (req: express.Request, res: express.Response) => {
-    res.status(200).sendFile(files.js);
-  });
-
   app.post("/login", (req: express.Request, res: express.Response) => {
     if (db) {
       res.status(200).send({});
@@ -54,10 +38,6 @@ export const run = async (): Promise<void> => {
     res.status(200).send({});
   });
 
-  app.get("/favicon.ico", (_req, res: express.Response<string>) => {
-    res.status(204).send("");
-  });
-
   app.get("/stat", (req: express.Request, res: express.Response) => {
     const usageCount = Number(req.query.usage);
 

diff --git a/src/scripts/import.ts b/src/scripts/import.ts
@@ -1,26 +1,17 @@
 import { createServer as createHttps } from "node:https";
 import { createServer as createHttp } from "node:http";
-import { resolve as resolvePath } from "node:path";
-import { fileURLToPath } from "node:url";
 import express from "express";
 import { Logger } from "../logger/index.js";
 import * as envy from "../env.js";
 import { sSuffix } from "../text/index.js";
 import { httpsOptions } from "../../certs/index.js";
 import { DbClient } from "../db/index.js";
+import { initStaticServer } from "../server/static.js";
 
 const logger = new Logger("import-script");
 
 export const run = async (): Promise<void> => {
-  const currentDir = fileURLToPath(new URL(".", import.meta.url));
-  const chartHtml = resolvePath(currentDir, "../import/index.html");
-
-  const app = express();
-  app.use(express.json({ limit: "10240kb" }));
-
-  app.get("/", (req: express.Request, res: express.Response) => {
-    res.status(200).sendFile(chartHtml);
-  });
+  const app = initStaticServer("import");
 
   const db = new DbClient({
     user: envy.dbPostgres.user,

diff --git a/src/server/static.ts b/src/server/static.ts
@@ -0,0 +1,30 @@
+import { fileURLToPath } from "node:url";
+import { resolve as resolvePath } from "node:path";
+import express from "express";
+
+export const initStaticServer = (
+  script: "import" | "chart",
+): express.Express => {
+  const currentDir = fileURLToPath(new URL(".", import.meta.url));
+  const files = {
+    html: resolvePath(currentDir, `../${script}/index.html`),
+    js: resolvePath(currentDir, `../${script}/index.js`),
+  };
+
+  const app = express();
+  app.use(express.json({ limit: "102400kb" }));
+
+  app.get("/", (req: express.Request, res: express.Response) => {
+    res.status(200).sendFile(files.html);
+  });
+
+  app.get("/index.js", (req: express.Request, res: express.Response) => {
+    res.status(200).sendFile(files.js);
+  });
+
+  app.get("/favicon.ico", (_req, res: express.Response<string>) => {
+    res.status(204).send("");
+  });
+
+  return app;
+};