104 lines
4.3 KiB
JavaScript
104 lines
4.3 KiB
JavaScript
const ws_url = new URL('ws', window.location.href);
|
|
ws_url.protocol = ws_url.protocol.replace('http', 'ws');
|
|
const ws = new WebSocket(ws_url.href);
|
|
|
|
ws.onmessage = function(event) {
|
|
const msg = JSON.parse(event.data);
|
|
|
|
console.log(msg);
|
|
|
|
if (msg.hasOwnProperty('session')) {
|
|
document.getElementById('active-session').innerText = msg.session["name"];
|
|
document.getElementById('btn-leave-session').style.display = "inline-block";
|
|
} else {
|
|
document.getElementById('active-session').innerText = "None";
|
|
document.getElementById('btn-leave-session').style.display = "none";
|
|
}
|
|
if (msg.hasOwnProperty('username')) {
|
|
document.getElementById('label-username').innerText = msg.username;
|
|
}
|
|
|
|
if (msg.hasOwnProperty('allsessions')) {
|
|
const all_sessions = document.getElementById('all_sessions');
|
|
|
|
while (all_sessions.children.length) all_sessions.lastChild.remove();
|
|
|
|
//for (let session in msg.allsessions) {
|
|
Object.keys(msg.allsessions).forEach( session => {
|
|
|
|
var sessionid = msg.allsessions[session]["id"]
|
|
var sessionname = msg.allsessions[session]["name"]
|
|
const tehsession = document.createElement('div');
|
|
|
|
const labelname = document.createElement('span');
|
|
owned = ("owner" in msg.allsessions[session]);
|
|
labelname.innerText = sessionname;
|
|
|
|
tehsession.appendChild(labelname);
|
|
|
|
if (owned) {
|
|
const inputname = document.createElement('input');
|
|
inputname.style.display = "none";
|
|
const btnedit = document.createElement('button');
|
|
btnedit.innerText = '🖉'
|
|
const btnconfirm = document.createElement('button');
|
|
btnconfirm.innerText = '✔'
|
|
btnconfirm.style.display = "none"
|
|
const btndiscard = document.createElement('button');
|
|
btndiscard.innerText = '✘'
|
|
btndiscard.style.display = "none"
|
|
|
|
btnedit.onclick = async function (e) {
|
|
inputname.style.display = "inline-block";
|
|
inputname.value = sessionname;
|
|
btnedit.style.display = "none";
|
|
btnconfirm.style.display = "inline-block";
|
|
btndiscard.style.display = "inline-block";
|
|
labelname.style.display = "none";
|
|
}
|
|
btndiscard.onclick = async function (e) {
|
|
inputname.style.display = "none";
|
|
btnedit.style.display = "inline-block";
|
|
btnconfirm.style.display = "none";
|
|
btndiscard.style.display = "none";
|
|
labelname.style.display = "inline-block";
|
|
}
|
|
btnconfirm.onclick = async function (e) {
|
|
text = inputname.value;
|
|
if (Boolean(text)) {
|
|
let data = {"sessionid": sessionid, "sessionname": text};
|
|
await fetch('api/change_sessionname', {
|
|
method: 'POST',
|
|
body: JSON.stringify(data),
|
|
});
|
|
inputname.style.display = "none";
|
|
btnedit.style.display = "inline-block";
|
|
btnconfirm.style.display = "none";
|
|
btndiscard.style.display = "none";
|
|
labelname.style.display = "inline-block";
|
|
} else {
|
|
console.log("cant be empty");
|
|
}
|
|
}
|
|
|
|
tehsession.appendChild(inputname);
|
|
tehsession.appendChild(btnedit);
|
|
tehsession.appendChild(btnconfirm);
|
|
tehsession.appendChild(btndiscard);
|
|
}
|
|
|
|
if ((! msg.hasOwnProperty('session')) || msg.session["id"] != sessionid) {
|
|
const btnjoin = document.createElement('button');
|
|
btnjoin.innerText = "Join";
|
|
btnjoin.onclick = async (e) => await fetch('api/join_session', {
|
|
method: 'POST', body: JSON.stringify({"sessionid": sessionid})
|
|
});
|
|
|
|
tehsession.appendChild(btnjoin);
|
|
}
|
|
|
|
all_sessions.appendChild(tehsession);
|
|
})
|
|
}
|
|
};
|