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

Update master view, Add sortable.js example

Browse Source
This commit is contained in:
Dominic Zimmer
2020-04-20 11:07:15 +02:00
parent de35cfdc13
commit 96a1b49693
5 changed files with 105 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
static/views/master/script.js
View File

@@ -1,30 +1,7 @@
var text = document.getElementById("msg").innerText
msg = JSON.parse(text)
document.getElementById("btn-leave-session").onclick = async (e) => await fetch('api/leave_session', {
method: 'POST', body: JSON.stringify({})
});
var session = msg.session;
document.getElementById("session").innerText = session["name"];
document.getElementById('label-username').innerText = msg.username;
document.getElementById("btn-gen-item").onclick = async (e) => {
name = document.getElementById("input-gen-item-name").value;
description = document.getElementById("input-gen-item-description").value;
image = document.getElementById("input-gen-item-image").value;
if (Boolean(name)) {
await fetch('api/create_item', { method: 'POST', body: JSON.stringify(
{'name': name, 'description': description, 'image': image}
)});
}
};
var itemsdiv = document.getElementById("items");
var items = msg.items;
while (itemsdiv.children.length) itemsdiv.lastChild.remove();
Object.keys(items).forEach( item => {
var item = items[item];
function draw_item(item) {
const itemdiv = document.createElement('div');
var name = item["name"]
var description = item["description"]
@@ -49,7 +26,74 @@ Object.keys(items).forEach( item => {
itemdiv.appendChild(imageimg);
itemdiv.appendChild(descriptionspan);
itemdiv.style.display = "inline-block"
itemdiv.style.background = "lightcoral"
return itemdiv
}
document.getElementById("btn-leave-session").onclick = async (e) => await fetch('api/leave_session', {
method: 'POST', body: JSON.stringify({})
});
var session = msg.session;
document.getElementById("session").innerText = session["name"];
document.getElementById('label-username').innerText = msg.username;
document.getElementById("btn-gen-item").onclick = async (e) => {
name = document.getElementById("input-gen-item-name").value;
description = document.getElementById("input-gen-item-description").value;
image = document.getElementById("input-gen-item-image").value;
if (Boolean(name)) {
await fetch('api/create_item', { method: 'POST', body: JSON.stringify(
{'name': name, 'description': description, 'image': image}
)});
}
};
var wrapper = document.getElementById("items");
var items = msg.items;
var itemsdiv = document.createElement('div');
var itemsheading = document.createElement('h3');
itemsheading.innerText = "All Items";
wrapper.style.background = "lightblue";
wrapper.style.display = "table";
while (wrapper.children.length) wrapper.lastChild.remove();
Object.keys(items).forEach( item => {
var item = items[item];
itemdiv = draw_item(item);
itemsdiv.appendChild(itemdiv);
});
Sortable.create(itemsdiv, {"group": "items"});
wrapper.appendChild(itemsheading);
wrapper.appendChild(itemsdiv);
var inventories = document.getElementById("inventories");
while (inventories.children.length) inventories.lastChild.remove();
Object.keys(msg.inventories).forEach( name => {
inventory = msg.inventories[name];
inventorydiv = document.createElement('div');
inventorydiv.style.display = "block";
titlespan = document.createElement('h4');
titlespan.innerText = name;
titlespan.style.textAlign = "center";
inventorydiv.appendChild(titlespan);
Object.keys(inventory).forEach( item => {
item = inventory[item];
var thediv = draw_item(item);
thediv.style.display = "block";
inventorydiv.appendChild(thediv);
inventorydiv.style.display = "inline-block";
});
Sortable.create(inventorydiv, {"group": "items"});
inventorydiv.style.background = "lightgreen";
inventories.appendChild(inventorydiv);
});
inventories.style.display = "inline-block";

2
static/views/master/template.html
View File

@@ -10,3 +10,5 @@ Welcome to <b id="session"></b>, lobbymaster <span id="label-username"></span>
</div>
<div id="items">
</div>
<div id="inventories">
</div>