init
This commit is contained in:
metacryst
273
announcements/announcements.js
Normal file
273
announcements/announcements.js
Normal file
@@ -0,0 +1,273 @@
|
||||
import server from '/@server/server.js'
|
||||
import '../components/SearchBar.js'
|
||||
import "/_/code/components/LoadingCircle.js"
|
||||
import './AnnouncementCard.js'
|
||||
|
||||
css(`
|
||||
announcements- {
|
||||
font-family: 'Arial';
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
announcements- h1 {
|
||||
font-family: 'Bona';
|
||||
}
|
||||
|
||||
announcements- .VStack::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
announcements- .VStack::-webkit-scrollbar-thumb {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
announcements- .VStack::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
`)
|
||||
|
||||
class Announcements extends Shadow {
|
||||
static searchableKeys = ['message', 'author'];
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
this.announcements = global.currentNetwork.data.announcements.sort((a, b) => new Date(b.created) - new Date(a.created));
|
||||
this.searchedAnnouncements = [];
|
||||
this.searchText = "";
|
||||
}
|
||||
|
||||
render() {
|
||||
ZStack(() => {
|
||||
VStack(() => {
|
||||
SearchBar(this.searchText, "90vw")
|
||||
|
||||
VStack(() => {
|
||||
if (global.appRefreshing) {
|
||||
LoadingCircle()
|
||||
} else if (!this.announcements || this.announcements == []) {
|
||||
LoadingCircle()
|
||||
} else if (this.searchText) {
|
||||
if (this.searchedAnnouncements.length > 0) {
|
||||
for (let i = 0; i < this.searchedAnnouncements.length; i++) {
|
||||
AnnouncementCard(this.searchedAnnouncements[i])
|
||||
}
|
||||
} else {
|
||||
h2("Could not find any announcements with your search criteria.")
|
||||
.color("var(--divider)")
|
||||
.fontWeight("bold")
|
||||
.marginTop(7.5, em)
|
||||
.marginBottom(0.5, em)
|
||||
.textAlign("center")
|
||||
}
|
||||
} else if (this.announcements.length > 0) {
|
||||
for (let i = 0; i < this.announcements.length; i++) {
|
||||
AnnouncementCard(this.announcements[i])
|
||||
}
|
||||
} else {
|
||||
h2("No Announcements")
|
||||
.color("var(--divider)")
|
||||
.fontWeight("bold")
|
||||
.marginTop(7.5, em)
|
||||
.marginBottom(0.5, em)
|
||||
.textAlign("center")
|
||||
}
|
||||
})
|
||||
.overflowY("scroll")
|
||||
.gap(0.75, em)
|
||||
|
||||
if(!global.appRefreshing && global.currentNetwork.permissions.includes("announcements.add")) {
|
||||
HStack(() => {
|
||||
input("Image Upload", "0px", "0px")
|
||||
.attr({ name: "image-upload", type: "file" })
|
||||
.display("none")
|
||||
.visibility("hidden")
|
||||
.onChange((e) => {
|
||||
const file = e.target.files[0]
|
||||
if (!file) return
|
||||
this.stagedImage = file
|
||||
this.stagedImageURL = URL.createObjectURL(file)
|
||||
this.rerender()
|
||||
})
|
||||
|
||||
div("+")
|
||||
.width(3, rem)
|
||||
.height(3, rem)
|
||||
.borderRadius(50, pct)
|
||||
.border("1px solid color-mix(in srgb, var(--accent) 60%, transparent)")
|
||||
.fontSize(2, em)
|
||||
.transform("rotate(180deg)")
|
||||
.zIndex(1001)
|
||||
.display("flex")
|
||||
.alignItems("center")
|
||||
.justifyContent("center")
|
||||
.transition("scale .2s")
|
||||
.state("touched", function (touched) {
|
||||
if(touched) {
|
||||
this.scale("1.5")
|
||||
this.color("var(--darkaccent)")
|
||||
this.backgroundColor("var(--divider)")
|
||||
} else {
|
||||
this.scale("")
|
||||
this.color("var(--divider)")
|
||||
this.backgroundColor("var(--searchbackground)")
|
||||
}
|
||||
})
|
||||
.onTouch(function (start) {
|
||||
if(start) {
|
||||
this.attr({touched: "true"})
|
||||
} else {
|
||||
this.attr({touched: ""})
|
||||
}
|
||||
})
|
||||
.onClick((done) => {
|
||||
if(done) {
|
||||
const inputSelector = this.$('[name="image-upload"]');
|
||||
inputSelector.click()
|
||||
}
|
||||
})
|
||||
|
||||
input("Add an Announcement")
|
||||
.flex("1 1 auto")
|
||||
.minWidth(0)
|
||||
.color("var(--text)")
|
||||
.background("var(--searchbackground)")
|
||||
.paddingVertical(0, rem)
|
||||
.fontSize(1, rem)
|
||||
.paddingHorizontal(1, rem)
|
||||
.borderRadius(100, px)
|
||||
.border("1px solid color-mix(in srgb, var(--accent) 60%, transparent)")
|
||||
.onTouch(function (start) {
|
||||
if (start) {
|
||||
this.style.backgroundColor = "var(--accent)"
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
$("appmenu-").display("none")
|
||||
this.focus()
|
||||
}, 20)
|
||||
console.log($("appmenu-"))
|
||||
this.style.backgroundColor = "var(--searchbackground)"
|
||||
}
|
||||
})
|
||||
.addEventListener("blur", () => {
|
||||
setTimeout(() => {
|
||||
$("appmenu-").display("grid")
|
||||
}, 20)
|
||||
})
|
||||
})
|
||||
.width(100, pct)
|
||||
.boxSizing("border-box")
|
||||
.position("absolute")
|
||||
.paddingHorizontal(1, rem)
|
||||
.bottom(1, vh)
|
||||
.gap(0.5, rem)
|
||||
}
|
||||
})
|
||||
.boxSizing("border-box")
|
||||
.height(100, pct)
|
||||
.width(100, pct)
|
||||
.onEvent("announcementsearch", this.onAnnouncementSearch)
|
||||
.onEvent("new-announcement", this.onNewAnnouncement)
|
||||
.onEvent("deleted-announcement", this.onDeletedAnnouncement)
|
||||
.onEvent("edited-announcement", this.onEditedAnnouncement)
|
||||
})
|
||||
}
|
||||
|
||||
async handleUpload(file) {
|
||||
try {
|
||||
const body = new FormData();
|
||||
body.append('image', file);
|
||||
const res = await mobileUtil.authFetch(`${config.SERVER}/profile/upload-image`, {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
headers: {
|
||||
"Accept": "application/json"
|
||||
},
|
||||
body: body
|
||||
});
|
||||
|
||||
if(res.status === 401) {
|
||||
return res.status
|
||||
}
|
||||
if (!res.ok) return res.status;
|
||||
const data = await res.json()
|
||||
global.profile = data.member
|
||||
console.log(global.profile)
|
||||
} catch (err) { // Network error / Error reaching server
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
addPhoto() {
|
||||
console.log("hey")
|
||||
}
|
||||
|
||||
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 === editedAnnouncement.id)
|
||||
if (i !== -1) {
|
||||
this.announcements.splice(i, 1)
|
||||
this.announcements.unshift(editedAnnouncement)
|
||||
}
|
||||
this.rerender()
|
||||
}
|
||||
|
||||
onAnnouncementSearch = (e) => {
|
||||
let searchText = e.detail.searchText.toLowerCase().trim();
|
||||
if (!searchText) {
|
||||
this.searchedAnnouncements = [];
|
||||
} else {
|
||||
this.searchedAnnouncements = this.announcements.filter(announcement =>
|
||||
Announcements.searchableKeys.some(key =>
|
||||
String(announcement[key]).toLowerCase().includes(searchText)
|
||||
)
|
||||
);
|
||||
}
|
||||
this.searchText = searchText
|
||||
this.rerender()
|
||||
}
|
||||
|
||||
async getAnnouncements(networkId) {
|
||||
const fetchedAnnouncements = await server.getAnnouncements(networkId)
|
||||
if (this.checkForUpdates(this.announcements, fetchedAnnouncements.data)) {
|
||||
this.announcements = fetchedAnnouncements.data.sort((a, b) => new Date(b.created) - new Date(a.created));
|
||||
global.currentNetwork.data.announcements = this.announcements
|
||||
this.rerender()
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
if (!currentAnn) return true;
|
||||
if (currentAnn.updated_at !== fetchedAnn.updated_at) return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
register(Announcements)
|
||||
Reference in New Issue
Block a user