dominic/waschmarken
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Create waschmarken as clone of webpnp

Browse Source
This commit is contained in:
Dominic Zimmer
2020-07-17 19:18:17 +02:00
commit cb934e8220
16 changed files with 1179 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
static/views/lobby/script.js Normal file
View File

@@ -0,0 +1,143 @@
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);
})
}

21
static/views/lobby/template.html Normal file
View File

@@ -0,0 +1,21 @@
<span id="greeting"></span><br>
<div id="username-area">
<span id="greeting">Hello, </span>
<span id="label-username">_</span>
<input id="input-set-username" style="display: none;">
<button id="btn-edit-username">🖉</button>
<button id="btn-discard-username" style="display: none;">✘</button>
<button id="btn-confirm-username" style="display: none;">✔</button>
</div>
<br>
<span>Available sessions</span><br>
<div id="sessions"></div><br>
<br>
<br>
<span>Create Session</span><br>
<input id="input-create-session">
<button id="btn-create-session">+</button>
<br>