code002lover/IPost
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

posts are better now

Browse Source 
now auto updates
links are also securely built
This commit is contained in:
Mystikfluu 2022-04-23 17:36:48 +02:00
parent b2d8c7ac84
commit 1d01eeafb2
2 changed files with 92 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
css/posts.css Normal file
View File

@ -0,0 +1,34 @@
#posts > div > p {
color: green;
}
.self {
color: gray;
}
#username-self {
color: lightgreen;
}
#posts > div {
background-color: darkgray;
padding-left: 5px;
padding-bottom: 2px;
}
body {
background-color: black;
}
textarea {
background-color: gray;
}
button {
background-color: gray;
}
* {
font-family: Arial, Helvetica, sans-serif;
}

63
views/posts.html
View File

@ -3,7 +3,42 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title></title> <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">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 = {
'&': '&amp;',
'<': '&lt;',
'>': '&gt;',
"'": '&#39;',
'"': '&quot;'
};
const pe = m => esca[m];
const escape = es => replace.call(es, ca, pe);
const unes = {
'&amp;': '&',
'&#38;': '&',
'&lt;': '<',
'&#60;': '<',
'&gt;': '>',
'&#62;': '>',
'&apos;': "'",
'&#39;': "'",
'&quot;': '"',
'&#34;': '"'
};
const cape = m => unes[m];
const unescape = un => replace.call(un, es, cape);
</script>
</head> </head>
<body> <body>
<div class="self"> <div class="self">
@ -14,24 +49,40 @@
<div class="posts" id="posts"> <div class="posts" id="posts">
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
socket = new WebSocket("ws://ws.zerotwohub.tk:25566");
socket.addEventListener("message", function (event) {
let data = event.data;
console.log(data);
if(data == "new_post") {
buildPosts()
}
})
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+_\-\.%=&amp;]*)?)?(#[a-zA-Z0-9!$&'()*+.=-_~:@/?]*)?)(\s+|$)/gi
return text.replace(urlRegex,'<a href="$1">$1</a> ')
}
document.getElementById("post-btn").addEventListener("click",async function() { document.getElementById("post-btn").addEventListener("click",async function() {
if(document.getElementById("post-text").value.length >= 999) {
alert("Error, your message cant contain more than 1000 characters!")
return
}
let r = await post("/api/post",{"message":document.getElementById("post-text").value}) let r = await post("/api/post",{"message":document.getElementById("post-text").value})
document.getElementById("post-text").value = "" document.getElementById("post-text").value = ""
document.getElementById("posts").innerHTML = ""
buildPosts()
}) })
function createPost(username,text) { function createPost(username,text) {
const newDiv = document.createElement("div"); const newDiv = document.createElement("div");
const newP = document.createElement("p"); const newP = document.createElement("p");
const newText = document.createTextNode(text); //const newText = document.createTextNode(text);
const newUsername = document.createTextNode(username); const newUsername = document.createTextNode(username);
newDiv.classList.add("post");
newP.appendChild(newUsername) newP.appendChild(newUsername)
newDiv.appendChild(newP) newDiv.appendChild(newP)
newDiv.appendChild(newText) newDiv.innerHTML += urlify(escape(text))
//newDiv.appendChild(newText)
document.getElementById("posts").appendChild(newDiv) document.getElementById("posts").appendChild(newDiv)
@ -40,6 +91,8 @@
async function buildPosts() { async function buildPosts() {
let index = 0 let index = 0
let last_10_posts = await (await fetch(`/api/getPosts/${index}`)).json() 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) => { last_10_posts.forEach((item, i) => {
console.log(item,i); console.log(item,i);
createPost(item.post_user_name,item.post_text) createPost(item.post_user_name,item.post_text)