144 lines
6.5 KiB
JavaScript
144 lines
6.5 KiB
JavaScript
var text = document.getElementById("msg").innerText
|
|
msg = JSON.parse(text)
|
|
|
|
if (msg.hasOwnProperty('username')) {
|
|
document.getElementById('label-username').innerText = msg.username;
|
|
}
|
|
|
|
// username management
|
|
document.getElementById("btn-edit-username").onclick = async function (e) {
|
|
document.getElementById("btn-confirm-username").style.display = "inline-block";
|
|
document.getElementById("btn-discard-username").style.display = "inline-block";
|
|
document.getElementById("btn-edit-username").style.display = "none";
|
|
document.getElementById("label-username").style.display = "none";
|
|
document.getElementById("input-set-username").style.display = "inline-block";
|
|
document.getElementById("input-set-username").value = document.getElementById("label-username").innerText;
|
|
}
|
|
document.getElementById("btn-discard-username").onclick = async function (e) {
|
|
document.getElementById("btn-confirm-username").style.display = "none";
|
|
document.getElementById("btn-discard-username").style.display = "none";
|
|
document.getElementById("btn-edit-username").style.display = "inline-block";
|
|
document.getElementById("label-username").style.display = "inline-block";
|
|
document.getElementById("input-set-username").style.display = "none";
|
|
}
|
|
document.getElementById("btn-confirm-username").onclick = async function (e) {
|
|
var text = document.getElementById("input-set-username").value;
|
|
if (Boolean(text)) {
|
|
let data = {"username": text};
|
|
|
|
await fetch('api/change_username', {
|
|
method: 'POST',
|
|
body: JSON.stringify(data),
|
|
})
|
|
document.getElementById("btn-confirm-username").style.display = "none";
|
|
document.getElementById("btn-discard-username").style.display = "none";
|
|
document.getElementById("btn-edit-username").style.display = "inline-block";
|
|
document.getElementById("label-username").style.display = "inline-block";
|
|
document.getElementById("input-set-username").style.display = "none";
|
|
} else {
|
|
console.log("cant be empty");
|
|
document.getElementById("btn-confirm-username").style.display = "none";
|
|
document.getElementById("btn-discard-username").style.display = "none";
|
|
document.getElementById("btn-edit-username").style.display = "inline-block";
|
|
document.getElementById("label-username").style.display = "inline-block";
|
|
document.getElementById("input-set-username").style.display = "none";
|
|
}
|
|
}
|
|
|
|
|
|
|
|
document.getElementById("btn-create-session").onclick = async function (e) {
|
|
var text = document.getElementById("input-create-session").value;
|
|
if (Boolean(text)) {
|
|
let data = {"sessionname": text};
|
|
|
|
await fetch('api/create_session', {
|
|
method: 'POST',
|
|
body: JSON.stringify(data),
|
|
})
|
|
}
|
|
};
|
|
|
|
if (msg.hasOwnProperty('sessions')) {
|
|
const sessions = document.getElementById('sessions');
|
|
|
|
while (sessions.children.length) sessions.lastChild.remove();
|
|
|
|
Object.keys(msg.sessions).forEach( session => {
|
|
session = msg.sessions[session];
|
|
var sessionid = session["id"];
|
|
var sessionname = session["name"];
|
|
var owned = session["owned"];
|
|
|
|
const tehsession = document.createElement('div');
|
|
const labelname = document.createElement('span');
|
|
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);
|
|
}
|
|
|
|
sessions.appendChild(tehsession);
|
|
})
|
|
}
|
|
|