cat details page

kotru21 · Jan 10, 2025 · b47f7cd · b47f7cd
1 parent 087a8e4
commit b47f7cd
Show file tree

Hide file tree

Showing 6 changed files with 157 additions and 77 deletions.
diff --git a/bot.js b/bot.js
@@ -4,20 +4,17 @@ import Fact from "./commands/Fact.js";
 import Menu from "./commands/Menu.js";
 import messageLike from "./util/messageLike.js";
 import config from "./config.js";
-import webServer from "./util/webServer.js";
+import Server from "./util/server.js";
 import websocket from "./util/webSocket.js";
-import API from "./util/API.js";
 
 const initServers = () => {
   if (config.WebServer) {
-    webServer(config.expressServerPort);
+    Server(config.expressServerPort);
     websocket(config.websocketServerPort);
-    API(config.apiPort);
-    console.log(`Web server running on port ${config.expressServerPort}`);
+    console.log(`Server running on port ${config.expressServerPort}`);
     console.log(
       `WebSocket server running on port ${config.websocketServerPort}`
     );
-    console.log(`API server running on port ${config.apiPort}`);
   }
 };
 

diff --git a/util/API.js b/util/API.js
diff --git a/util/catDetails.html b/util/catDetails.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Cat Details</title>
+    <style>
+      body {
+        background: black;
+        color: white;
+        font-family: Arial, sans-serif;
+      }
+      .container {
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 20px;
+      }
+      .cat-details {
+        background: rgba(255, 255, 255, 0.1);
+        padding: 20px;
+        border-radius: 10px;
+      }
+      .cat-image {
+        max-width: 100%;
+        border-radius: 10px;
+        margin: 20px 0;
+      }
+      .stats {
+        margin: 20px 0;
+      }
+      .back-link {
+        color: white;
+        text-decoration: none;
+        padding: 10px;
+        background: #068fff;
+        border-radius: 5px;
+        display: inline-block;
+        margin-top: 20px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <div class="cat-details">
+        <h1 id="breed-name">Loading...</h1>
+        <img id="cat-image" class="cat-image" src="" alt="Cat image" />
+        <div class="stats">
+          <p><strong>Likes:</strong> <span id="likes-count">0</span></p>
+          <p><strong>Description:</strong> <span id="description"></span></p>
+          <p>
+            <a id="wiki-link" href="" target="_blank">Read more on Wikipedia</a>
+          </p>
+        </div>
+        <a href="/" class="back-link">Back</a>
+      </div>
+    </div>
+
+    <script>
+      document.addEventListener("DOMContentLoaded", function () {
+        const catId = new URLSearchParams(window.location.search).get("id");
+        if (catId) {
+          fetch(`/api/cat/${catId}`)
+            .then((response) => response.json())
+            .then((data) => {
+              document.getElementById("breed-name").textContent =
+                data.breed_name;
+              document.getElementById("cat-image").src = data.image_url;
+              document.getElementById("description").textContent =
+                data.description;
+              document.getElementById("likes-count").textContent = data.count;
+              document.getElementById("wiki-link").href = data.wikipedia_url;
+            })
+            .catch((error) => {
+              console.error("Error:", error);
+              document.getElementById("breed-name").textContent =
+                "Error loading cat details";
+            });
+        } else {
+          document.getElementById("breed-name").textContent =
+            "No cat ID provided";
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/util/index.html b/util/index.html
@@ -164,7 +164,9 @@ <h2 class="text-white">Таблица лидеров</h2>
             tr.innerHTML = `
               <td>${index + 1}</td>
               <td><img src="${row.image_url}" /></td>
-              <td>${row.breed_name}</td>
+              <td><a href="${"/catDetails?id=" + row.id}">${
+              row.breed_name
+            }</a></td>
               <td>${row.id}</td>
               <td>${row.count}</td>
             `;

diff --git a/util/server.js b/util/server.js
@@ -0,0 +1,68 @@
+import express from "express";
+import path from "path";
+import config from "../config.js";
+import fs from "fs";
+import cors from "cors";
+import db from "./Database.js";
+
+export default function webServer(port) {
+  const __dirname = path.resolve();
+  const app = express();
+
+  // Middleware
+  app.use(cors());
+  app.use(express.json());
+  app.use("/static", express.static(path.join(__dirname, "public")));
+
+  // API endpoints
+  app.get("/api/cat/:id", async (req, res) => {
+    try {
+      const catId = req.params.id;
+      const catData = await db.getCatById(catId);
+
+      if (!catData) {
+        return res.status(404).json({ error: "Cat not found" });
+      }
+
+      res.json(catData);
+    } catch (err) {
+      console.error("API Error:", err);
+      res.status(500).json({ error: "Failed to fetch cat data" });
+    }
+  });
+
+  app.get("/api/leaderboard", async (req, res) => {
+    try {
+      const rows = await db.getLeaderboard();
+      res.json(rows);
+    } catch (err) {
+      console.error("API Error:", err);
+      res.status(500).json({ error: "Failed to fetch leaderboard" });
+    }
+  });
+
+  // HTML routes
+  app.get("/", function (req, res) {
+    const filePath = path.join(__dirname, "util/index.html");
+    fs.readFile(filePath, "utf8", (err, htmlContent) => {
+      if (err) {
+        console.error("Error reading index.html:", err);
+        return res.status(500).send("Internal Server Error");
+      }
+      let modifiedContent = htmlContent.replace(
+        "{{websocketPort}}",
+        config.websocketServerPort
+      );
+      modifiedContent = modifiedContent.replace("{{apiPort}}", port);
+      res.send(modifiedContent);
+    });
+  });
+
+  app.get("/catDetails", (req, res) => {
+    res.sendFile(path.join(__dirname, "util/catDetails.html"));
+  });
+
+  app.listen(port, () => {
+    console.log(`Web server and API running on port ${port}`);
+  });
+}
diff --git a/util/webserver.js b/util/webserver.js