Fixed W8

w8/.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+Dockerfile
+.dockerignore

w8/Dockerfile

@@ -0,0 +1,16 @@
+FROM node:16.13.2-alpine3.14
+
+RUN mkdir -p /home/node/app/node_modules && chown -R node:node /home/node/app
+WORKDIR /home/node/app
+
+COPY --chown=node:node . .
+
+RUN corepack enable
+RUN corepack prepare pnpm@6.32.2 --activate
+RUN pnpm install
+
+USER node
+
+EXPOSE 9559/tcp
+
+CMD [ "pnpm", "start" ]

w8/index.js

@@ -0,0 +1,123 @@
+import express from "express";
+import mustache from "mustache";
+import bodyParse from "body-parser";
+import { readdirSync, readFileSync } from "fs";
+import { MongoClient } from "mongodb";
+import { ObjectId } from "mongodb";
+
+const app = express();
+app.use(express.static("./static"));
+app.use(bodyParse.urlencoded({ extended: true }));
+app.use(bodyParse.json());
+const port = 9889;
+
+const templates = new Map(readdirSync("./templates").map(fn => [fn, readFileSync(`./templates/${fn}`, "utf-8")]));
+
+/** @type {MongoClient} */
+const client = await MongoClient.connect("mongodb://127.0.0.1:27017/weit_db?directConnection=true&serverSelectionTimeoutMS=2000&appName=weit");
+const announcements = client.db().collection("announcements");
+try { await announcements.createIndex({ text: "text" }); } catch (e) { }
+
+app.get("/", (req, res) => {
+    res.send(mustache.render(templates.get("mainPage.html")));
+});
+
+app.get("/createAnnouncement", (req, res) => {
+    res.send(mustache.render(templates.get("createAnnouncementPage.html")));
+});
+
+app.get("/:announcementID", (req, res) => {
+    res.send(mustache.render(templates.get("announcementPage.html"), { anid: req.params.announcementID }));
+});
+
+app.get("/api/announcements", async (req, res) => {
+    res.send({
+        count: await announcements.countDocuments(),
+        announcements: await (async () => {
+            let out = [];
+            await announcements.find().forEach(anmnt => out.push(anmnt));
+            return out;
+        })()
+    });
+});
+
+app.get("/api/announcement/:announcementID", async (req, res) => {
+    let announcement = { ok: false };
+    try {
+        announcement = await announcements.findOne({ _id: ObjectId(req.params.announcementID) });
+        announcement.ok = true;
+    } catch (e) { console.error(e); }
+
+    res.send(announcement);
+});
+
+app.put("/api/announcement", async (req, res) => {
+    const { title, text, phone } = req.body;
+    let result = { ok: false };
+    if (title === undefined || text === undefined || phone === undefined) {
+        result["error"] = "Empty input data!";
+    } else {
+        result["announcementId"] = (await announcements.insertOne({
+            title, text, phone
+        })).insertedId;
+        result.ok = true;
+    }
+    res.send(result);
+});
+
+app.delete("/api/announcements/:announcementID", async (req, res) => {
+    let result = { ok: false };
+    try {
+        result = await announcements.deleteOne({ _id: ObjectId(req.params.announcementID) });
+        result.ok = true;
+    } catch (e) { console.error(e); result["error"] = `Exception: ${e}`; }
+
+    res.send(result);
+});
+
+app.patch("/api/announcements/:announcementID", async (req, res) => {
+    let result = { ok: false };
+    const { title, text, phone } = req.body;
+    if (title === undefined && text === undefined && phone === undefined) {
+        result["error"] = "Empty input data!";
+    } else {
+        try {
+            let mod = {};
+            if (title) {
+                mod["title"] = title;
+            }
+            if (text) {
+                mod["text"] = text;
+            }
+            if (phone) {
+                mod["phone"] = phone;
+            }
+            await announcements.updateOne({ _id: ObjectId(req.params.announcementID) }, { $set: mod });
+            result.ok = true;
+        } catch (e) { console.error(e); result["error"] = `Exception: ${e}`; }
+    }
+
+    res.send(result);
+});
+
+app.post("/api/search", async (req, res) => {
+    let result = { ok: false };
+    const { text } = req.body;
+    if (text === undefined) {
+        result["error"] = "Empty search!";
+    } else {
+        try {
+            let searchResults = await (async () => {
+                let out = [];
+                await announcements.find({ $text: { $search: text } }).forEach(anmnt => out.push(anmnt));
+                return out;
+            })();
+            result["result"] = searchResults;
+            result.ok = true;
+        } catch (e) { console.error(e); result["error"] = `Exception: ${e}`; }
+    }
+
+    res.send(result);
+});
+
+app.listen(port, () => console.log(`⚡️ Serving on port ${port}`));

w8/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "w8",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "start": "node .",
+    "watch": "nodemon -e *",
+    "build": "docker build -t nuark/w8_bld ."
+  },
+  "author": "nuark",
+  "license": "MIT",
+  "dependencies": {
+    "body-parser": "^1.19.2",
+    "express": "^4.17.3",
+    "mongodb": "^4.4.1",
+    "mustache": "^4.2.0",
+    "socket.io": "^4.4.1"
+  },
+  "devDependencies": {
+    "nodemon": "^2.0.15"
+  }
+}

w8/static/css/styles.css

@@ -0,0 +1,5 @@
+* {
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+}

w8/templates/announcementPage.html

@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Main page</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Smooch+Sans:wght@300;400;700&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="/css/styles.css" />
+  </head>
+  <body>
+    <main>
+      <p class="loadingText">Loading...</p>
+      <section class="announcementHolder">
+        <a href="/">Home</a>
+        <hr />
+        <button onclick="tryDeleteAnnouncement()">Delete</button>
+        <button id="ebtn" onclick="tryEditAnnouncement()">Edit</button>
+        <button id="cbtn" onclick="cancelEdit()" hidden="true">Cancel</button>
+        <button id="sbtn" onclick="trySaveEditAnnouncement()" hidden="true">
+          Save
+        </button>
+        <hr />
+      </section>
+    </main>
+  </body>
+  <script>
+    const trySaveEditAnnouncement = async () => {
+      const title = document.getElementById("title").value;
+      const phone = document.getElementById("phone").value;
+      const text = document.getElementById("text").value;
+
+      try {
+        const data = await (
+          await fetch("/api/announcements/{{anid}}", {
+            method: "PATCH",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({ title, phone, text }),
+          })
+        ).json();
+        if (data.ok) {
+          location.reload();
+        } else {
+          alert(data.error);
+        }
+      } catch (e) {
+        alert(e);
+      }
+    };
+
+    const cancelEdit = () => {
+      const title = document.getElementById("title");
+      const phone = document.getElementById("phone");
+      const text = document.getElementById("text");
+
+      title.outerHTML = `<p id="title"><b>${title.value}</b></p>`;
+      phone.outerHTML = `<p id="phone">Phone number: ${phone.value}</p>`;
+      text.outerHTML = `<p id="text">${text.value}</p>`;
+
+      document.getElementById("ebtn").hidden = false;
+      document.getElementById("cbtn").hidden = true;
+      document.getElementById("sbtn").hidden = true;
+    };
+
+    const tryEditAnnouncement = () => {
+      const title = document.getElementById("title");
+      const phone = document.getElementById("phone");
+      const text = document.getElementById("text");
+
+      title.outerHTML = `<input id="title" value="${title.textContent}">`;
+      phone.outerHTML = `<input id="phone" value="${
+        /Phone number: (.+)/.exec(phone.textContent)[1]
+      }">`;
+      text.outerHTML = `<input id="text" value="${text.textContent}">`;
+
+      document.getElementById("ebtn").hidden = true;
+      document.getElementById("cbtn").hidden = false;
+      document.getElementById("sbtn").hidden = false;
+    };
+
+    const tryDeleteAnnouncement = async () => {
+      try {
+        const data = await (
+          await fetch("/api/announcements/{{anid}}", {
+            method: "DELETE",
+          })
+        ).json();
+        if (data.ok) {
+          location = "/";
+        } else {
+          alert(data.error);
+        }
+      } catch (e) {
+        alert(e);
+      }
+    };
+
+    const load = async () => {
+      const loadingText = document.querySelector(".loadingText");
+      const announcementsHolder = document.querySelector(".announcementHolder");
+
+      loadingText.hidden = false;
+      announcementsHolder.hidden = true;
+
+      try {
+        const data = await (await fetch("/api/announcement/{{anid}}")).json();
+
+        const title = document.createElement("p");
+        title.id = "title";
+        title.innerHTML = `<b>${data.title}</b>`;
+        announcementsHolder.appendChild(title);
+
+        announcementsHolder.appendChild(document.createElement("br"));
+
+        const phone = document.createElement("p");
+        phone.id = "phone";
+        phone.innerText = `Phone number: ${data.phone}`;
+        announcementsHolder.appendChild(phone);
+
+        announcementsHolder.appendChild(document.createElement("br"));
+
+        const text = document.createElement("p");
+        text.id = "text";
+        text.innerText = data.text;
+        announcementsHolder.appendChild(text);
+      } catch (e) {
+        alert(e);
+      }
+
+      loadingText.hidden = true;
+      announcementsHolder.hidden = false;
+    };
+
+    document.addEventListener("DOMContentLoaded", load);
+  </script>
+</html>

w8/templates/createAnnouncementPage.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Main page</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Smooch+Sans:wght@300;400;700&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="/css/styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="announcementCreationFormHolder">
+        <h4>Create announcement</h4>
+        <hr />
+        <label for="title">Title:</label>
+        <input id="title" name="title" type="text" />
+        <br />
+        <label for="phone">Phone:</label>
+        <input id="phone" name="phone" type="text" />
+        <br />
+        <label for="text">Text:</label>
+        <input id="text" name="text" type="text" />
+        <hr />
+        <button onclick="tryCreateAnnouncement()">Create announcement</button>
+      </section>
+    </main>
+  </body>
+  <script>
+    const tryCreateAnnouncement = async () => {
+      const title = document.getElementById("title").value;
+      const phone = document.getElementById("phone").value;
+      const text = document.getElementById("text").value;
+
+      try {
+        const data = await (
+          await fetch("/api/announcement", {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({ title, phone, text }),
+          })
+        ).json();
+        if (data.ok) {
+          location = `/${data.announcementId}`;
+        } else {
+          alert(data.error);
+        }
+      } catch (e) {
+        alert(e);
+      }
+    };
+  </script>
+</html>

w8/templates/mainPage.html

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Main page</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="stylesheet" href="/css/styles.css" />
+  </head>
+  <body>
+    <main>
+      <p class="loadingText">Loading...</p>
+      <section class="announcementsHolder">
+        <label
+          >Search here:
+          <input
+            list="searchResults"
+            name="search"
+            id="search"
+            autocomplete="off"
+        /></label>
+        <div id="searchResults"></div>
+
+        <hr />
+        <button onclick="javascript:location = `/createAnnouncement`">
+          Create announcement
+        </button>
+      </section>
+    </main>
+  </body>
+  <script>
+    const debounce = (func, timeout = 300) => {
+      let timer;
+      return (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+          func.apply(this, args);
+        }, timeout);
+      };
+    };
+
+    const performSearch = async () => {
+      const searchResultsHolder = document.getElementById("searchResults");
+      searchResultsHolder.innerHTML = "";
+
+      let text = document.getElementById("search").value.trim();
+      if (text.length == 0) return;
+
+      const data = await (
+        await fetch("/api/search", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ text }),
+        })
+      ).json();
+
+      if (data.ok) {
+        if (data.result.length === 0) {
+          searchResultsHolder.innerHTML = "<b>No results!</b>";
+        } else {
+          searchResultsHolder.innerHTML = data.result
+            .map((e) => `<a href="/${e._id}">${e.title}</a>`)
+            .join("<br>");
+        }
+      } else {
+        alert(data.error);
+      }
+
+      console.log(data);
+    };
+
+    const load = async () => {
+      const loadingText = document.querySelector(".loadingText");
+      const announcementsHolder = document.querySelector(
+        ".announcementsHolder"
+      );
+
+      loadingText.hidden = false;
+      announcementsHolder.hidden = true;
+
+      try {
+        const data = await (await fetch("/api/announcements")).json();
+        for (const ancmt of data.announcements) {
+          const el = document.createElement("div");
+
+          const title = document.createElement("a");
+          title.innerHTML = `<b>${ancmt.title}</b>`;
+          title.href = `/${ancmt._id}`;
+
+          el.appendChild(title);
+          announcementsHolder.appendChild(el);
+        }
+      } catch (e) {
+        alert(e);
+      }
+
+      loadingText.hidden = true;
+      announcementsHolder.hidden = false;
+
+      document.getElementById("search").addEventListener(
+        "change",
+        debounce(() => performSearch())
+      );
+    };
+
+    document.addEventListener("DOMContentLoaded", load);
+  </script>
+</html>