Announcements page

- Updated handlers.js - Repurposed Forum and ForumPanel for Announcements - Adjusted styling - Commented out long drag logs
2026-03-20 12:36:23 -04:00
parent 8fad5d7717
commit 63fbab34ce
4 changed files with 343 additions and 16 deletions
--- a/src/apps/Announcements/Announcements.js
+++ b/src/apps/Announcements/Announcements.js
@@ -1,20 +1,148 @@
-import "../../components/TopBar.js"
+import './Panel.js'
+import server from '../../_/code/bridge/serverFunctions.js'

-class Announcements extends Shadow {
-    render() {
-        VStack(() => {
-
-        })
-        .boxSizing("border-box")
-        .backgroundColor("var(--main)")
-        .gap(0.5, em)
-        .boxSizing("border-box")
-        .width(100, pct)
-        .height(100, pct)
-        .minHeight(0)
+css(`
+    announcements- {
+        font-family: 'Bona';
    }

-    
+    announcements- input::placeholder {
+        font-family: 'Bona Nova';
+        font-size: 0.9em;
+        color: var(--accent);
+    }
+
+    input::placeholder {
+        font-family: Arial;
+    }
+
+    input[type="checkbox"] {
+        appearance: none;        /* remove default style */
+        -webkit-appearance: none;
+        width: 1em;
+        height: 1em;
+        border: 1px solid var(--accent);
+    }
+
+    input[type="checkbox"]:checked {
+        background-color: var(--red);
+    }
+`)
+
+class Announcements extends Shadow {
+    constructor() {
+        super()
+        this.announcements = global.currentNetwork.data.announcements.sort((a, b) => new Date(b.created) - new Date(a.created));
+        console.log(this.announcements)
+    } 
+
+    render() {
+        ZStack(() => {
+            VStack(() => {
+
+                Panel(this.announcements)
+
+                input("Message", "70%")
+                    .paddingVertical(0.75, em)
+                    .boxSizing("border-box")
+                    .paddingHorizontal(2, em)
+                    .color("var(--text)")
+                    .background("var(--searchbackground)")
+                    .marginBottom(1, em)
+                    .border("0.5px solid var(--accent)")
+                    .outline("none")
+                    .borderRadius(100, px)
+                    .fontFamily("Arial")
+                    .fontSize(1, em)
+                    .onKeyDown(async function(e) {
+                        if (e.key === "Enter") {
+                            const result = await server.addAnnouncement(this.value, global.currentNetwork.id, global.profile.id)
+                            if (result.data.status === 200) {
+                                window.dispatchEvent(new CustomEvent('new-announcement', {
+                                    detail: { announcement: result.data.announcement }
+                                }));
+                            } else {
+                                // error
+                            }
+                            this.value = ""
+                        }
+                    })
+            })
+            .gap(1, em)
+            .boxSizing("border-box")
+            .width(100, pct)
+            .height(100, pct)
+            .horizontalAlign("center")
+            .verticalAlign("end")
+            .minHeight(0)
+        })
+        .backgroundColor("var(--main)")
+        .boxSizing("border-box")
+        .paddingVertical(1, em)
+        .width(100, pct)
+        .height(100, pct)
+        .flex("1 1 auto")
+        .onEvent("new-announcement", this.onNewAnnouncement)
+        .onEvent("deleted-announcement", this.onDeletedAnnouncement)
+        .onEvent("edited-announcement", this.onEditedAnnouncement)
+    }
+
+    connectedCallback() {
+        this.getAnnouncements(global.currentNetwork.id)
+    }
+
+    checkForUpdates(currentAnnouncements, fetchedAnnouncements) {
+        if (currentAnnouncements.length !== fetchedAnnouncements.length) return true;
+
+        const currentMap = new Map(currentAnnouncements.map(ann => [ann.id, ann]));
+
+        for (const fetchedAnn of fetchedAnnouncements) {
+            const currentAnn = currentMap.get(fetchedAnn.id);
+
+            // new event added
+            if (!currentAnn) return true;
+
+            // existing event changed
+            if (currentAnn.updated_at !== fetchedAnn.updated_at) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    async getAnnouncements(networkId) {
+        const fetchedAnnouncements = await server.getAnnouncements(networkId)
+        if (this.checkForUpdates(this.announcements, fetchedAnnouncements.data)) {
+            console.log("found updates")
+            this.announcements = fetchedAnnouncements.data.sort((a, b) => new Date(b.created) - new Date(a.created));
+            global.currentNetwork.data.announcements = this.announcements
+            this.rerender()
+        }
+    }
+
+    onNewAnnouncement = (e) => {
+        let newAnnouncement = e.detail.announcement;
+        this.announcements.push(newAnnouncement)
+        this.announcements.sort((a, b) => new Date(b.created) - new Date(a.created));
+        this.rerender()
+    }
+
+    onDeletedAnnouncement = (e) => {
+        let deletedId = e.detail.id
+        const i = this.announcements.findIndex(ann => ann.id === deletedId)
+        if (i !== -1) this.announcements.splice(i, 1);
+        this.rerender()
+    }
+
+    onEditedAnnouncement = (e) => {
+        let editedAnnouncement = e.detail
+        const i = this.announcements.findIndex(ann => ann.id === editedPost.id)
+        if (i !== -1) { 
+            this.announcements.splice(i, 1)
+            this.announcements.unshift(editedAnnouncement)
+        }
+        this.rerender()
+    }
 }

 register(Announcements)