ändern der Gebäudebeschriftung

app.js

@@ -121,6 +121,33 @@ app.get("/api/building/:id", async (req, res) => {
   }
 });
 
+app.get("/api/buildings", async (req, res) => {
+  const userId = req.session.user.id;
+
+  try {
+    const [rows] = await db.query(
+      `
+      SELECT 
+        b.id,
+        b.name,
+        b.description,
+        b.history,
+        ub.level,
+        ub.points
+      FROM buildings b
+      LEFT JOIN user_buildings ub 
+        ON ub.building_id = b.id AND ub.user_id = ?
+    `,
+      [userId],
+    );
+
+    res.json(rows);
+  } catch (err) {
+    console.error(err);
+    res.status(500).json({ error: "DB Fehler" });
+  }
+});
+
 /* ========================
    Body Parser
 ======================== */

public/js/building.js

@@ -0,0 +1,17 @@
+fetch("/api/buildings")
+  .then((res) => res.json())
+  .then((buildings) => {
+    buildings.forEach((building) => {
+      const element = document.querySelector(
+        `.building[data-id="${building.id}"]`,
+      );
+
+      if (!element) return;
+
+      const title = element.querySelector("title");
+
+      if (title) {
+        title.textContent = building.name;
+      }
+    });
+  });

views/launcher.ejs

@@ -41,8 +41,8 @@
         class="map-overlay"
       >
         <!-- 1 -->
-        <a href="/building/1" class="building">
-          <title>Pforte Links</title>
+        <a href="/building/1" class="building" data-id="1">
+          <title></title>
           <polygon
             class="area"
             points="276,185 387,192 379,382 287,365 284,364"
@@ -50,8 +50,8 @@
         </a>
 
         <!-- 2 -->
-        <a href="/building/2" class="building">
-          <title>Burg</title>
+        <a href="/building/2" class="building" data-id="2">
+          <title></title>
           <polygon
             class="area"
             points="777,365 865,238 969,263 1039,347 1071,419 1095,531 925,479 776,497"