163 lines
5.2 KiB
HTML
163 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title></title>
|
|
<link rel="stylesheet" href="/css/posts.css">
|
|
<script type="text/javascript">window.post = function(url, data) {return fetch(url, {method: "POST", headers: {'Content-Type': 'application/json'}, body: JSON.stringify(data)});}</script>
|
|
<script type="text/javascript">
|
|
const {replace} = '';
|
|
|
|
const es = /&(?:amp|#38|lt|#60|gt|#62|apos|#39|quot|#34);/g;
|
|
const ca = /[&<>'"]/g;
|
|
|
|
const esca = {
|
|
'&': '&',
|
|
'<': '<',
|
|
'>': '>',
|
|
"'": ''',
|
|
'"': '"'
|
|
};
|
|
const pe = m => esca[m];
|
|
|
|
const escape = es => replace.call(es, ca, pe);
|
|
|
|
const unes = {
|
|
'&': '&',
|
|
'&': '&',
|
|
'<': '<',
|
|
'<': '<',
|
|
'>': '>',
|
|
'>': '>',
|
|
''': "'",
|
|
''': "'",
|
|
'"': '"',
|
|
'"': '"'
|
|
};
|
|
const cape = m => unes[m];
|
|
|
|
const unescape = un => replace.call(un, es, cape);
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
<div class="self">
|
|
Username: <span class="Username" id="username-self"></span> <br>
|
|
<textarea name="name" id="post-text" rows="8" cols="80"></textarea> <br>
|
|
<button type="button" name="button" id="post-btn">Post</button>
|
|
</div>
|
|
<div class="posts" id="posts">
|
|
|
|
</div>
|
|
<script type="text/javascript">
|
|
socket = new WebSocket("wss://ws.zerotwohub.tk:25566");
|
|
socket.addEventListener("message", function (event) {
|
|
let data = event.data;
|
|
let ds = data.split(" ")
|
|
let message = ds[0]
|
|
console.log(data,ds);
|
|
if(message == "new_post") {
|
|
main()
|
|
mainNoti(ds[1])
|
|
}
|
|
})
|
|
function urlify(text) {
|
|
let urlRegex = /(([a-z]+:\/\/)?(([a-z0-9\-]+\.)+([a-z]{2}|aero|arpa|biz|com|coop|edu|gov|info|int|jobs|mil|museum|name|nato|net|org|pro|travel|local|internal|tk|ga))(:[0-9]{1,5})?(\/[a-z0-9_\-\.~]+)*(\/([a-z0-9_\-\.]*)(\?[a-z0-9+_\-\.%=&]*)?)?(#[a-zA-Z0-9!$&'()*+.=-_~:@/?]*)?)(\s+|$)/gi
|
|
return text.replace(urlRegex,'<a href="$1">$1</a> ')
|
|
}
|
|
function filterMentions(text) {
|
|
let mentionRegex = /(@[^\s]*)/gi
|
|
return text.replace(mentionRegex,'<span class="mention">$1</span> ')
|
|
}
|
|
document.getElementById("post-btn").addEventListener("click",async function() {
|
|
if(document.getElementById("post-text").value.length >= 1001) {
|
|
alert("Error, your message cant contain more than 1000 characters!")
|
|
return
|
|
}
|
|
let r = await post("/api/post",{"message":document.getElementById("post-text").value})
|
|
document.getElementById("post-text").value = ""
|
|
})
|
|
function filterPost(text) {
|
|
text = escape(text)
|
|
text = urlify(text)
|
|
text = filterMentions(text)
|
|
return text
|
|
}
|
|
function createPost(username,text) {
|
|
const newDiv = document.createElement("div");
|
|
const newP = document.createElement("p");
|
|
//const newText = document.createTextNode(text);
|
|
const newUsername = document.createTextNode(username);
|
|
|
|
newDiv.classList.add("post");
|
|
|
|
newP.appendChild(newUsername)
|
|
|
|
newDiv.appendChild(newP)
|
|
newDiv.innerHTML += filterPost(text)
|
|
//newDiv.appendChild(newText)
|
|
|
|
document.getElementById("posts").appendChild(newDiv)
|
|
|
|
}
|
|
|
|
async function main() {
|
|
let user = await (await fetch("/api/getuser")).json()
|
|
let username = user.username
|
|
if(!username)username = user.error
|
|
document.getElementById("username-self").innerText = username
|
|
|
|
let index = 0
|
|
let last_10_posts = await (await fetch(`/api/getPosts/${index}`)).json()
|
|
if(!last_10_posts)return;
|
|
document.getElementById("posts").innerHTML = ""
|
|
last_10_posts.forEach((item, i) => {
|
|
console.log(item,i);
|
|
createPost(item.post_user_name,item.post_text)
|
|
});
|
|
let mentions = document.getElementsByClassName("mention")
|
|
for (let i = 0; i < mentions.length; i++) {
|
|
if(mentions[i]!=undefined && mentions[i].innerText == "@"+username) {
|
|
mentions[i].classList.add("user-mention");
|
|
mentions[i].classList.remove("mention");
|
|
i--;
|
|
}
|
|
if(mentions[i]!=undefined && (mentions[i].innerText == "@everyone" || mentions[i].innerText == "@here")) {
|
|
mentions[i].classList.add("everyone-mention");
|
|
mentions[i].classList.remove("mention");
|
|
i--;
|
|
}
|
|
}
|
|
}
|
|
|
|
main()
|
|
|
|
var cansendNoti = false
|
|
|
|
async function askNotiPerms() {
|
|
return Notification.requestPermission()
|
|
}
|
|
|
|
async function mainNoti(user) {
|
|
if(Notification.permission === 'denied' || Notification.permission === 'default') {
|
|
await askNotiPerms()
|
|
console.log("asked for perms");
|
|
} else {
|
|
if(cansendNoti) {
|
|
let notification = new Notification('ZTH Board', { body: "new message posted from " + user });
|
|
notification = await notification
|
|
console.log(notification);
|
|
}
|
|
}
|
|
}
|
|
document.addEventListener("visibilitychange", function() {
|
|
if (document.visibilityState === 'visible') {
|
|
cansendNoti = false
|
|
} else {
|
|
cansendNoti = true
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|