@lexho111/plainblog 0.5.28 → 0.6.0

package/Article.js

@@ -1,14 +1,36 @@
 export default class Article {
-  constructor(title, content, createdAt) {
+  constructor(id, title, content, createdAt) {
+    this.id = id;
     this.title = title;
     this.content = content;
-    this.createdAt = createdAt;
+    this.createdAt = new Date(createdAt).getTime();
+  }
+
+  static createNew(title, content, createdAt = new Date()) {
+    const id = this.getNextID(); // Your existing ID generator
+    //const createdAt = new Date();
+    return new Article(id, title, content, createdAt);
+  }
+
+  static nextID = 100;
+  static getNextID() {
+    // TODO fix use nextID from BlogTreeSearch!
+    this.nextID++;
+    return Math.floor(Math.random() * 100000000);
   }
 
   getContent() {
     return this.content;
   }
 
+  getContentVeryShort() {
+    if (!this.content) return;
+    if (this.content.length < 50) return this.getContent();
+    let contentShort = this.content.substring(0, 50);
+    contentShort += "...";
+    return contentShort;
+  }
+
   getContentShort() {
     if (this.content.length < 400) return this.getContent();
     let contentShort = this.content.substring(0, 400);
@@ -26,13 +48,60 @@ export default class Article {
     return `${year}/${month}/${day} ${hours}:${minutes}`;
   }
 
-  toHTML() {
+  toHTML(loggedin = false) {
+    if (this.content == null) return "";
     const moreButton = this.content.length > 400 ? `<a href="#">more</a>` : "";
-    return `      <article>
+    const buttons = loggedin
+      ? `<div class="buttons"><div id="editButton${this.id}" class="button edit">edit</div><div id="deleteButton${this.id}" class="button delete">delete</div></div>`
+      : "";
+    const script = loggedin
+      ? `<script>
+      if (typeof window.handleAction !== 'function') {
+        window.handleAction = function(action, id) {
+          if (action === 'delete') {
+             if (confirm("Delete this article?")) {
+                fetch("/api/articles?id=" + id, { method: "DELETE" })
+                .then(res => { if(res.ok) window.location.reload(); else alert("Error: " + res.statusText); });
+             }
+          } else if (action === 'edit') {
+             const title = prompt("New Title");
+             const content = prompt("New Content");
+             if (title && content) {
+                fetch("/api/articles?id=" + id, {
+                    method: "PUT",
+                    body: JSON.stringify({ title, content })
+                }).then(res => { if(res.ok) window.location.reload(); else alert("Error: " + res.statusText); });
+             }
+          }
+        }
+      }
+      function clickListener(button) {
+      const mybutton = document.getElementById(button);
+      const action = button.includes("edit") ? "edit" : "delete";
+
+// Mouse/Touch support
+mybutton.addEventListener('click', () => window.handleAction(action, ${this.id}));
+
+// Keyboard support
+mybutton.addEventListener('keydown', (event) => {
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault(); // Prevents page scrolling on Space
+    window.handleAction(action, ${this.id});
+  }
+});
+  }
+clickListener("editButton${this.id}");
+clickListener("deleteButton${this.id}");
+      </script>`
+      : "";
+    // prettier-ignore
+    return `<article data-id="${this.id}" data-date="${this.createdAt}">
+    ${buttons}
         <h2>${this.title}</h2>
         <span class="datetime">${this.getFormattedDate()}</span>
         <p>${this.getContentShort()}</p>
         ${moreButton}
+      ${script}
       </article>`;
   }
 }