150 lines
4.8 KiB
JavaScript
150 lines
4.8 KiB
JavaScript
import './Panel.js'
|
|
import server from '../../_/code/bridge/serverFunctions.js'
|
|
|
|
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 {
|
|
announcements;
|
|
|
|
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) |