@lexho111/plainblog 0.5.28 → 0.6.0

package/src/fetchData.js

@@ -2,8 +2,45 @@ let isLoading = false;
 
 document.addEventListener("DOMContentLoaded", () => {
   window.addEventListener("scroll", handleScroll);
+
+  const searchInput = document.getElementById("search");
+  if (searchInput) {
+    searchInput.addEventListener(
+      "input",
+      debounce(async (e) => {
+        const query = e.target.value;
+        if (query.length > 0) {
+          const res = await fetch(
+            `/api/articles?q=${encodeURIComponent(query)}`,
+          );
+          const data = await res.json();
+          const container = document.getElementById("articles");
+          container.innerHTML = "";
+          const fragment = document.createDocumentFragment();
+          // Limit results to 50 to prevent browser freeze
+          const articles = data.articles ? data.articles.slice(0, 50) : [];
+          articles.forEach((a) =>
+            fillWithContent(a.title, a.content, a.createdAt, a.id, fragment),
+          );
+          container.appendChild(fragment);
+        } else {
+          window.location.reload();
+        }
+      }, 300),
+    );
+  }
 });
 
+function debounce(func, timeout = 300) {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      func.apply(this, args);
+    }, timeout);
+  };
+}
+
 async function handleScroll() {
   if (isLoading) return;
   const scrollable = document.documentElement.scrollHeight - window.innerHeight;
@@ -22,42 +59,69 @@ async function handleScroll() {
 async function loadMore() {
   console.log(`load more`);
   const articlesContainer = document.getElementById("articles");
-  const articles = articlesContainer.querySelectorAll("article");
-  const lastArticle = articles[articles.length - 1];
-  console.log("lastArticle", lastArticle);
-  if (!lastArticle) return;
-
-  const lastId = parseInt(lastArticle.getAttribute("data-id"));
-  console.log(`lastId ${lastId}`);
-  if (isNaN(lastId)) return;
-
-  // Fetch older items: startID should be lastId - 1 (since we want older/smaller IDs)
-  const nextId = lastId - 1;
-  if (nextId < 1) {
-    console.log(`nextId < 1 ${nextId < 1}`);
+  const articles = Array.from(articlesContainer.querySelectorAll("article"));
+
+  // Find the last article that has a valid data-date
+  let lastTimestamp = NaN;
+  for (let i = articles.length - 1; i >= 0; i--) {
+    const val = articles[i].getAttribute("data-date");
+    if (val) {
+      const parsed = parseInt(val, 10);
+      if (!isNaN(parsed)) {
+        lastTimestamp = parsed;
+        break;
+      }
+    }
+  }
+
+  console.log(`lastTimestamp ${lastTimestamp}`);
+  if (isNaN(lastTimestamp)) {
     window.removeEventListener("scroll", handleScroll);
     return;
   }
 
+  //const lastDate = new Date(lastTimestamp);
+  /*let endDate = null;
+  const lastArticle = articles[articles.length - 1]; //
+  if (lastArticle) {
+    endDate = lastArticle.dataset.date;
+  }*/
+  const endDate = lastTimestamp;
+
   isLoading = true;
-  const url = `/api/articles?startID=${nextId}&limit=5`;
+  const limit = 50;
+  // Fetch one more than needed to handle the duplicate last item.
+  const url = `/api/articles?enddate=${endDate}&limit=${limit + 1}`;
   console.log(`load more ${url}`);
+  console.log(`endDate: ${new Date(endDate)}`);
   try {
     const response = await fetch(url);
     if (response.ok) {
       const result = await response.json();
-      if (result.articles && result.articles.length > 0) {
-        for (const article of result.articles) {
-          fillWithContent(
-            article.title,
-            article.content,
-            article.createdAt,
-            article.id
-          );
+      let newArticles = result.articles || [];
+
+      if (newArticles.length > 0) {
+        let addedCount = 0;
+        const fragment = document.createDocumentFragment();
+        for (const article of newArticles) {
+          if (
+            fillWithContent(
+              article.title,
+              article.content,
+              article.createdAt,
+              article.id,
+              fragment,
+            )
+          ) {
+            addedCount++;
+          }
+        }
+        document.getElementById("articles").appendChild(fragment);
+        if (addedCount < limit) {
+          window.removeEventListener("scroll", handleScroll);
         }
       } else {
-        // No more articles to load
-        //window.removeEventListener("scroll", handleScroll);
+        window.removeEventListener("scroll", handleScroll);
       }
     }
   } catch (error) {
@@ -73,22 +137,78 @@ function getFormattedDate(date) {
   const minutes = String(date.getMinutes()).padStart(2, "0");
   return `${year}/${month}/${day} ${hours}:${minutes}`;
 }
-function fillWithContent(title, content, date, id) {
+function fillWithContent(title, content, date, id, targetContainer) {
+  if (id) {
+    // Check if an article with this ID already exists in the container.
+    if (document.querySelector(`#articles > article[data-id='${id}']`)) {
+      console.log("article found. not adding it.");
+      console.log(`${id} ${title} ${date}`);
+      return false; // Indicate that nothing was added.
+    }
+  }
+
   const article = document.createElement("article");
-  if (id) article.setAttribute("data-id", id);
+  const articleDate = new Date(date);
+
+  if (id !== null && id !== undefined) article.setAttribute("data-id", id);
+  article.setAttribute("data-date", articleDate.getTime());
 
   const heading = document.createElement("h2");
   const time = document.createElement("span");
   const text = document.createElement("p");
 
+  const loggedin = document.querySelector('a[href="/logout"]') !== null;
+  if (loggedin) {
+    const buttons = document.createElement("div");
+    const editButton = document.createElement("div");
+    const deleteButton = document.createElement("div");
+    const somethingButton = document.createElement("div");
+    buttons.setAttribute("class", "buttons");
+    editButton.setAttribute("class", "button edit");
+    deleteButton.setAttribute("class", "button delete");
+    somethingButton.setAttribute("class", "button delete");
+    editButton.textContent = "edit";
+    deleteButton.textContent = "delete";
+    somethingButton.textContent = "something";
+    buttons.appendChild(editButton);
+    buttons.appendChild(deleteButton);
+    buttons.appendChild(somethingButton);
+
+    editButton.addEventListener("click", () => handleAction("edit"));
+    deleteButton.addEventListener("click", () => handleAction("delete"));
+    article.appendChild(buttons);
+  }
+
+  function handleAction(button) {
+    if (button === "delete") {
+      if (confirm("Delete this article?")) {
+        fetch("/api/articles?id=" + id, { method: "DELETE" }).then((res) => {
+          if (res.ok) article.remove();
+          else alert("Error: " + res.statusText);
+        });
+      }
+    } else if (button === "edit") {
+      const newTitle = prompt("New Title", title);
+      const newContent = prompt("New Content", content);
+      if (newTitle && newContent) {
+        fetch("/api/articles?id=" + id, {
+          method: "PUT",
+          body: JSON.stringify({ title: newTitle, content: newContent }),
+        }).then((res) => {
+          if (res.ok) window.location.reload();
+          else alert("Error: " + res.statusText);
+        });
+      }
+    }
+  }
+
   heading.textContent = title;
-  time.textContent = getFormattedDate(new Date(date));
+  time.textContent = getFormattedDate(articleDate);
   text.textContent = content;
 
-  //article.textContent = "article1";
   article.appendChild(heading);
   article.appendChild(time);
   article.appendChild(text);
-  const articles = document.getElementById("articles");
-  articles.appendChild(article);
+  (targetContainer || document.getElementById("articles")).appendChild(article);
+  return true; // Indicate that an article was added.
 }

package/src/styles.css

@@ -82,3 +82,32 @@ nav a:visited {
     box-sizing: border-box;
   }
 }
+
+h2 {
+  margin-top: 0;
+  border: 0px solid black;
+}
+.buttons {
+  width: 100%;
+  height: 25px;
+  border: 0px solid black;
+  margin-bottom: 0px;
+}
+.button {
+  border: 1px solid black;
+  width: 100px;
+  height: 19px;
+  float: left;
+  padding: 2px;
+  cursor: pointer;
+  user-select: none; /* Prevents text selection on double-click */
+}
+.button:focus {
+  outline: 2px solid orange; /* Vital for keyboard accessibility */
+}
+.edit {
+  background-color: blue;
+}
+.delete {
+  background-color: red;
+}

package/utilities.js

@@ -0,0 +1,142 @@
+import path from "node:path";
+
+export function generateTitle(number) {
+  return numberToGerman(number % 1000);
+}
+
+export function generateContent(number) {
+  return (
+    numberToGerman(number % 1000) +
+    ". " +
+    numberToGerman(number % 1000) +
+    ". " +
+    numberToGerman(number % 1000) +
+    ". " +
+    numberToGerman(number % 1000) +
+    ". " +
+    numberToGerman(number % 1000) +
+    ". " +
+    numberToGerman(number % 1000) +
+    ". " +
+    numberToGerman(number % 1000) +
+    ". " +
+    numberToGerman(number % 1000) +
+    ". " +
+    numberToGerman(number % 1000) +
+    ". " +
+    numberToGerman(number % 1000) +
+    ". "
+  );
+}
+
+function numberToGerman(n) {
+  if (n === 0) return "Null";
+
+  const units = [
+    "",
+    "eins",
+    "zwei",
+    "drei",
+    "vier",
+    "fünf",
+    "sechs",
+    "sieben",
+    "acht",
+    "neun",
+  ];
+  const teens = [
+    "zehn",
+    "elf",
+    "zwölf",
+    "dreizehn",
+    "vierzehn",
+    "fünfzehn",
+    "sechzehn",
+    "siebzehn",
+    "achtzehn",
+    "neunzehn",
+  ];
+  const tens = [
+    "",
+    "",
+    "zwanzig",
+    "dreißig",
+    "vierzig",
+    "fünfzig",
+    "sechzig",
+    "siebzig",
+    "achtzig",
+    "neunzig",
+  ];
+
+  function convert(num) {
+    if (num < 10) return units[num];
+    if (num < 20) return teens[num - 10];
+    if (num < 100) {
+      const t = Math.floor(num / 10);
+      const u = num % 10;
+      if (u === 0) return tens[t];
+      return (u === 1 ? "ein" : units[u]) + "und" + tens[t];
+    }
+    if (num < 1000) {
+      const h = Math.floor(num / 100);
+      const r = num % 100;
+      let str = (h === 1 ? "ein" : units[h]) + "hundert";
+      if (r > 0) str += convert(r);
+      return str;
+    }
+    if (num < 1000000) {
+      const t = Math.floor(num / 1000);
+      const r = num % 1000;
+      let str = convert(t);
+      if (str.endsWith("eins")) str = str.slice(0, -1);
+      str += "tausend";
+      if (r > 0) str += convert(r);
+      return str;
+    }
+    return num.toString();
+  }
+
+  const result = convert(n);
+  return result.charAt(0).toUpperCase() + result.slice(1);
+}
+
+export function generateDateList(startStr, endStr) {
+  const start = new Date(startStr);
+  // Optional: Reset minutes/seconds if you only want clean hourly markers
+  start.setMinutes(0, 0, 0);
+
+  const end = new Date(endStr);
+  const dates = [];
+
+  let current = new Date(start);
+
+  while (current <= end) {
+    // Push a new Date instance to avoid mutating existing array elements
+    dates.push(new Date(current));
+
+    // Increment by 1 hour
+    current.setHours(current.getHours() + 1);
+  }
+
+  return dates;
+}
+
+export function table(articles) {
+  const tableData = [];
+  for (let article of articles) {
+    tableData.push({
+      Title: article.title,
+      Date: article.createdAt,
+    });
+  }
+  console.table(tableData);
+}
+
+export function log(filename, message) {
+  if (filename) {
+    console.log(`${filename}: ${message}`);
+  } else {
+    console.log(`Unknown: ${message}`);
+  }
+}