Files
reallife-gamemode/ReallifeGamemode.Client/assets/html/inventory/inventory.html
2020-05-10 19:19:53 +02:00

619 lines
25 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Inventar</title>
<link rel="stylesheet" href="css/inventory.css" />
</head>
<body>
<div class="alerts" id='alertbox'>
</div>
<div class="sidebar">
<ul>
<li name="side1" class="sidebaritem1" onclick="switchSite('backpackClass')">
<img class="sideicon1" src="img/backpack/backpack.svg"><p class="bartext">Rucksack</p>
</li>
<li name="side2" class="sidebaritem2" onclick="getVehicle()">
<img class="sideicon2" src="img/backpack/car.svg"><p class="bartext">Fahrzeug</p>
</li>
<!-- <li name="side3" class="sidebaritem3" onclick="switchSite('tradeClass')"><img class="sideicon4" src="img/backpack/trading.svg"><p class="bartext">Handel</p></li>
<li name="side4" class="sidebaritem4 hidden" onclick="switchSite('handelClass')"><img class="sideicon4" src="img/backpack/trading.svg"><p class="bartext">Handeln</p></li>
<li name="side5" class="sidebaritem5 hidden" onclick="getTrade()"><img class="sideicon4" src="img/backpack/save-money.svg"><p class="bartext">Anfrage</p></li> -->
<li name="side6" class="sidebaritem6 hidden" onclick="switchSite('backClass')">
<img class="sideicon4" src="img/backpack/back.svg"><p class="bartext">Zurück</p>
</li>
</ul>
</div>
<div name="backpackClass" class="backpack">
<div class="main">
<div class="Betrag" style="display: none;">
<div class="BoxBlue">
<input type="text" id="tf_zahl" name="number" placeholder="Betrag eingeben" min="1" step="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');">
<button id="tf_cancle" onclick="">Schließen</button>
<button id="tf_submitZahl" onclick="">Bestätigen</button>
<img class="blueIcon1" src="img/backpack/trash2.svg"></img>
</div>
</div>
<div class="Betrag2" style="display: none;">
<div class="BoxBlue">
<input type="text" id="tf_zahl2" name="number" placeholder="Betrag eingeben" min="1" step="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');">
<button id="tf_cancle2" onclick="">Schließen</button>
<button id="tf_submitZahlToVehicle" onclick="">Zum Fahrzeug transferieren</button>
<img class="blueIcon1" src="img/backpack/car.svg"></img>
</div>
</div>
<div class="title">
<div class="titlecount"><span id="count1">0</span> / 40 Kilogramm</div>
<div class="titletext">Rucksack</div>
</div>
<div class="items">
<ul id="List0"></ul>
</div>
</div>
</div>
<div name="vehClass" class="veh hidden">
<div class="main">
<div class="title">
<div class="titlecount"><span id="count2">0</span> / 250 Kilogramm</div>
<div class="titletext">Fahrzeug</div>
</div>
<div class="Betrag4" style="display: none;">
<div class="BoxBlue">
<img class="blueIcon1" src="img/backpack/backpack.svg">
<button id="tf_cancle4" onclick="">Schließen</button><input type="text" id="tf_zahl4" name="number" placeholder="Betrag eingeben" min="1" step="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');">
<button id="tf_submitZahl4" onclick="">Zum Rucksack transferieren</button>
</div>
</div>
<div class="items">
<ul id="List4"></ul>
</div>
</div>
</div>
<!-- <div name="handelClass" class="handel hidden">
<div class="main">
<div class="Betrag3" style="display:none;">
<input type="text" id="tf_zahl3" name="number" placeholder="Betrag eingeben" min="1" step="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');">
<button id='tf_submitZahl3' onclick="">Bestätigen</button>
<button id='tf_cancle3' onclick="">Schließen</button>
</div>
<input type="text" id="tf_nameorid" name="fname" placeholder="Name oder ID eingeben">
<button id='tf_submitTrade' onclick="">Senden</button>
<div class="title"><div class="titlecount"><span id="count3">0</span> Kilogramm</div><div class="titletext">Handeln</div></div>
<div class="items">
<ul id="List2"></ul>
</div>
</div>
</div>
<div name="anfrageClass" class="something hidden">
<div class="main">
<button id='tf_acceptTrade' onclick="">Annehmen</button>
<div class="title"><div class="titlecount"><span id="count4">0</span> Kilogramm</div><div class="titletext">Anfrage</div></div>
<div class="items">
<ul id="List3"></ul>
</div>
</div>
</div> -->
<div id="invisible" style="display: none"></div>
<script src="../../js/jquery-3.3.1.min.js"></script>
<script>
var lastClass = "backpackClass";
var val = 0;
$("#tf_cancle4").unbind('click').click(function () {
$(".Betrag4").hide();
});
$("#tf_cancle3").unbind('click').click(function () {
$(".Betrag3").hide();
});
$("#tf_cancle").unbind('click').click(function () {
$(".Betrag").hide();
});
$("#tf_cancle2").unbind('click').click(function () {
$(".Betrag2").hide();
});
function switchSite(site) {
if (site != lastClass) {
if (site == "tradeClass") {
document.getElementsByName("side1")[0].classList.toggle("hidden");
document.getElementsByName("side2")[0].classList.toggle("hidden");
document.getElementsByName("side3")[0].classList.toggle("hidden");
document.getElementsByName("side4")[0].classList.remove("hidden");
document.getElementsByName("side5")[0].classList.remove("hidden");
document.getElementsByName("side6")[0].classList.remove("hidden");
var givenClass = document.getElementsByName("handelClass")[0];
givenClass.classList.remove("hidden");
document.getElementsByName(lastClass)[0].classList.toggle("hidden");
lastClass = "handelClass";
return;
}
else if (site == "backClass") {
document.getElementsByName("side1")[0].classList.remove("hidden");
document.getElementsByName("side2")[0].classList.remove("hidden");
document.getElementsByName("side3")[0].classList.remove("hidden");
document.getElementsByName("side4")[0].classList.toggle("hidden");
document.getElementsByName("side5")[0].classList.toggle("hidden");
document.getElementsByName("side6")[0].classList.toggle("hidden");
var givenClass = document.getElementsByName("backpackClass")[0];
givenClass.classList.remove("hidden");
document.getElementsByName(lastClass)[0].classList.toggle("hidden");
lastClass = "backpackClass";
return;
} else {
var givenClass = document.getElementsByName(site)[0];
givenClass.classList.remove("hidden");
document.getElementsByName(lastClass)[0].classList.toggle("hidden");
lastClass = site;
}
}
}
$(document).ready(function () {
mp.trigger('CEF:InventoryLoaded');
});
var rucksackInv = [];
var handelInv = [];
var vehInv = [];
var anfrageInv = [];
var Origin = [];
var vehInvItem = [];
function setBackpackItems(jsonItemArr) {
console.log(jsonItemArr);
var parsedItemArr = JSON.parse(jsonItemArr)
rucksackInv = [];
for (var i = 0; i < parsedItemArr.length; i++) {
var item = parsedItemArr[i];
var newItem = { Name: item.Name, ID: item.ItemId, Amount: item.Amount, Category: 0 };
rucksackInv.push(newItem);
$('#count1').html(item.Weight / 1000);
}
drawRucksack();
}
function getVehicle() {
mp.trigger("CEF:callVehicleInventory");
}
function setVehicleItems(jsonItemArr) {
var parsedItemArr = JSON.parse(jsonItemArr)
vehInv = [];
for (var i = 0; i < parsedItemArr.length; i++) {
var item = parsedItemArr[i];
var newItem = { Name: item.Name, ID: item.ItemId, Amount: item.Amount, Category: 0 };
vehInv.push(newItem);
$('#count2').html(item.Weight / 1000);
}
switchSite('vehClass');
drawVehicle();
}
var clnc = 1;
function alertGreen(JsonAmount, JsonName) {
var amount = JSON.parse(JsonAmount);
var name = JSON.parse(JsonName);
var list = document.getElementById("alertbox");
var Litem = document.createElement("div");
Litem.setAttribute("class", "alert_green");
Litem.appendChild(document.createTextNode("Du hast " + amount + "x " + name + " benutzt."));
$(Litem).hide().appendTo(list).fadeIn(500);
$(Litem).fadeIn(500);
setTimeout(function () {
$(Litem).fadeOut(500, function () {
$(Litem).remove();
});
}, 5000);
}
function alertRed(JsonAmount, JsonName) {
var amount = JSON.parse(JsonAmount);
var name = JSON.parse(JsonName);
var list = document.getElementById("alertbox");
var Litem = document.createElement("div");
Litem.setAttribute("class", "alert_red");
Litem.appendChild(document.createTextNode("Du hast " + amount + "x " + name + " weggeworfen."));
$(Litem).hide().appendTo(list).fadeIn(500);
$(Litem).fadeIn(500);
setTimeout(function () {
$(Litem).fadeOut(500, function () {
$(Litem).remove();
});
}, 5000);
}
function alertError(jsonString) {
var string = JSON.parse(jsonString);
var list = document.getElementById("alertbox");
var Litem = document.createElement("div");
Litem.setAttribute("class", "alert_red");
Litem.appendChild(document.createTextNode(string));
$(Litem).hide().appendTo(list).fadeIn(500);
$(Litem).fadeIn(500);
setTimeout(function () {
$(Litem).fadeOut(500, function () {
$(Litem).remove();
});
}, 5000);
}
function alertBlue(JsonAmount, JsonName, JsonTransferInv) {
var amount = JSON.parse(JsonAmount);
var name = JSON.parse(JsonName);
var transferInv = JSON.parse(JsonTransferInv);
var list = document.getElementById("alertbox");
var Litem = document.createElement("div");
Litem.setAttribute("class", "alert_blue");
Litem.appendChild(document.createTextNode("Du hast " + amount + "x " + name + " ins " + transferInv + " transferiert."));
$(Litem).hide().appendTo(list).fadeIn(500);
$(Litem).fadeIn(500);
setTimeout(function () {
$(Litem).fadeOut(500, function () {
$(Litem).remove();
});
}, 5000);
}
function removeItems(JsonId, JsonAmount) {
var amount = JSON.parse(JsonAmount);
var id = JSON.parse(JsonId);
console.log("start : " + amount + " " + id);
for (var i = 0; i < rucksackInv.length; i++) {
console.log(i);
if (rucksackInv[i].ID == id) {
console.log("in Arr : " + i);
if (rucksackInv[i].Amount > amount) {
rucksackInv[i].Amount -= amount;
} else if (rucksackInv[i].Amount <= amount) {
rucksackInv.splice(i, 1);
}
drawRucksack();
return;
}
}
}
function onAction(action, id, ammount, i) {
$(".Betrag").hide();
if (action == 0)//green
{
mp.trigger("CEF:useItem", JSON.stringify("use"), JSON.stringify(0), JSON.stringify(id))
}
if (action == 1)//red
{
$(".Betrag").show();
$("#tf_submitZahl").unbind('click').click(function () {
if ($('#tf_zahl').val() < ammount && ammount > 0) {
mp.trigger("CEF:useItem", JSON.stringify("drop"), JSON.stringify($('#tf_zahl').val()), JSON.stringify(rucksackInv[i].ID))
} else if ($('#tf_zahl').val() >= ammount) {
mp.trigger("CEF:useItem", JSON.stringify("drop"), JSON.stringify(ammount), JSON.stringify(rucksackInv[i].ID))
}
$(".Betrag").hide();
event.preventDefault()
event.stopPropagation()
});
}
if (action == 2) //blue
{
$(".Betrag2").show();
var Copy = Object.assign({}, rucksackInv[i]);
$("#tf_submitZahlToVehicle").unbind('click').click(function () {
var y = parseInt($('#tf_zahl2').val(), 10);
if ($('#tf_zahl2').val() < ammount && ammount > 0) {
mp.trigger("CEF:backpackToVehicle", JSON.stringify(rucksackInv[i].ID), JSON.stringify(y));
} else if ($('#tf_zahl2').val() >= ammount) {
mp.trigger("CEF:backpackToVehicle", JSON.stringify(rucksackInv[i].ID), JSON.stringify(ammount));
}
$(".Betrag2").hide();
event.preventDefault()
event.stopPropagation()
});
}
if (action == 3) {
}
if (action == 4) {
$(".Betrag4").show();
var Copy = Object.assign({}, vehInv[i]);
$("#tf_submitZahl4").unbind('click').click(function () {
var y = parseInt($('#tf_zahl4').val(), 10);
if ($('#tf_zahl4').val() < ammount && ammount > 0) {
mp.trigger("CEF:vehicleToBackpack", JSON.stringify(vehInv[i].ID), JSON.stringify(y));
} else if ($('#tf_zahl4').val() >= ammount) {
mp.trigger("CEF:vehicleToBackpack", JSON.stringify(vehInv[i].ID), JSON.stringify(ammount));
}
$(".Betrag4").hide();
event.preventDefault()
event.stopPropagation()
});
}
}
function drawHandel() {
var e = document.getElementById("List2");
//e.firstElementChild can be used.
var child = e.lastElementChild;
while (child) {
e.removeChild(child);
child = e.lastElementChild;
} console.log(handelInv);
for (var i = 0; i < handelInv.length; i++) {
var item = handelInv[i];
var quantity = handelInv[i].Amount;
var list = document.getElementById("List" + item.Category);
var pictureElement = document.createElement("img");
pictureElement.setAttribute("class", "sideicon15");
pictureElement.setAttribute("src", "img/inventory/" + item.ID + ".svg");
var blueButton = document.createElement("div");
var blueButtonImg = document.createElement("img");
blueButton.setAttribute("class", "blue3");
blueButton.setAttribute("onclick", "onAction(3," + item.ID + "," + item.Amount + "," + i + ");");
blueButtonImg.setAttribute("src", "img/backpack/paper-plane.svg");
blueButtonImg.setAttribute("class", "blueImg");
blueButton.appendChild(blueButtonImg);
var listLength = list.length;
var row = 1;
if (listLength > 3) {
row = 2;
}
if (listLength > 7) {
row = 3;
}
if (listLength > 11) {
row = 4;
}
if (listLength > 15) {
row = 5;
}
if (listLength > 19) {
row = 6;
}
var Litem = document.createElement("li");
Litem.setAttribute("class", "item" + row);
Litem.setAttribute("id", i);
Litem.setAttribute("name", "List" + item.Category);
Litem.appendChild(document.createTextNode(quantity + "x " + item.Name));
Litem.appendChild(pictureElement);
Litem.appendChild(blueButton);
list.appendChild(Litem);
}
}
function drawRucksack() {
var e = document.getElementById("List0");
//e.firstElementChild can be used.
var child = e.lastElementChild;
while (child) {
e.removeChild(child);
child = e.lastElementChild;
} console.log(rucksackInv);
for (var i = 0; i < rucksackInv.length; i++) {
var item = rucksackInv[i];
var quantity = rucksackInv[i].Amount;
var list = document.getElementById("List" + item.Category);
var pictureElement = document.createElement("img");
pictureElement.setAttribute("class", "sideicon15");
pictureElement.setAttribute("src", "img/inventory/" + item.ID + ".svg");
var redButton = document.createElement("div");
var redButtonImg = document.createElement("img");
redButton.setAttribute("class", "red");
redButton.setAttribute("onclick", "onAction(1," + item.ID + "," + item.Amount + "," + i + ");");
redButtonImg.setAttribute("src", "img/backpack/trash.svg");
redButtonImg.setAttribute("class", "redImg");
redButton.appendChild(redButtonImg);
var greenButton = document.createElement("div");
var greenButtonImg = document.createElement("img");
greenButton.setAttribute("class", "green");
greenButton.setAttribute("onclick", "onAction(0," + item.ID + "," + item.Amount + "," + i + ");");
greenButtonImg.setAttribute("src", "img/backpack/use.svg");
greenButtonImg.setAttribute("class", "greenImg");
greenButton.appendChild(greenButtonImg);
var blueButton = document.createElement("div");
var blueButtonImg = document.createElement("img");
blueButton.setAttribute("class", "blue");
blueButton.setAttribute("onclick", "onAction(2," + item.ID + "," + item.Amount + "," + i + ");");
blueButtonImg.setAttribute("src", "img/backpack/paper-plane.svg");
blueButtonImg.setAttribute("class", "blueImg");
blueButton.appendChild(blueButtonImg);
var listLength = list.length;
var row = 1;
if (listLength > 3) {
row = 2;
}
if (listLength > 7) {
row = 3;
}
if (listLength > 11) {
row = 4;
}
if (listLength > 15) {
row = 5;
}
if (listLength > 19) {
row = 6;
}
var Litem = document.createElement("li");
Litem.setAttribute("class", "item" + row);
Litem.setAttribute("id", i);
Litem.setAttribute("name", "List" + item.Category);
Litem.appendChild(document.createTextNode(quantity + "x " + item.Name));
Litem.appendChild(pictureElement);
Litem.appendChild(redButton);
Litem.appendChild(greenButton);
Litem.appendChild(blueButton);
list.appendChild(Litem);
}
}
function drawVehicle() {
var e = document.getElementById("List4");
//e.firstElementChild can be used.
var child = e.lastElementChild;
while (child) {
e.removeChild(child);
child = e.lastElementChild;
} console.log(handelInv);
for (var i = 0; i < vehInv.length; i++) {
var item = vehInv[i];
console.log(item);
var quantity = vehInv[i].Amount;
var list = document.getElementById("List4");
var pictureElement = document.createElement("img");
pictureElement.setAttribute("class", "sideicon15");
pictureElement.setAttribute("src", "img/inventory/" + item.ID + ".svg");
var redButton = document.createElement("div");
var redButtonImg = document.createElement("img");
redButton.setAttribute("class", "red");
redButton.setAttribute("onclick", "onAction(1," + item.ID + "," + item.Amount + "," + i + ");");
redButtonImg.setAttribute("src", "img/backpack/trash.svg");
redButtonImg.setAttribute("class", "redImg");
redButton.appendChild(redButtonImg);
var blueButton = document.createElement("div");
var blueButtonImg = document.createElement("img");
blueButton.setAttribute("class", "blue2");
blueButton.setAttribute("onclick", "onAction(4," + item.ID + "," + item.Amount + "," + i + ");");
blueButtonImg.setAttribute("src", "img/backpack/paper-plane.svg");
blueButtonImg.setAttribute("class", "blueImg");
blueButton.appendChild(blueButtonImg);
var listLength = list.length;
var row = 1;
if (listLength > 3) {
row = 2;
}
if (listLength > 7) {
row = 3;
}
if (listLength > 11) {
row = 4;
}
if (listLength > 15) {
row = 5;
}
if (listLength > 19) {
row = 6;
}
var Litem = document.createElement("li");
Litem.setAttribute("class", "item" + row);
Litem.appendChild(document.createTextNode(quantity + "x " + item.Name));
Litem.appendChild(pictureElement);
Litem.appendChild(redButton);
Litem.appendChild(blueButton);
list.appendChild(Litem);
}
}
function drawAnfrage() {
var e = document.getElementById("List4");
//e.firstElementChild can be used.
var child = e.lastElementChild;
while (child) {
e.removeChild(child);
child = e.lastElementChild;
} console.log(anfrageInv);
for (var i = 0; i < anfrageInv.length; i++) {
var item = anfrageInv[i];
var quantity = anfrageInv[i].Amount;
var list = document.getElementById("List" + item.Category);
var pictureElement = document.createElement("img");
pictureElement.setAttribute("class", "sideicon15");
pictureElement.setAttribute("src", "img/inventory/" + item.ID + ".svg");
var listLength = list.length;
var row = 1;
if (listLength > 3) {
row = 2;
}
if (listLength > 7) {
row = 3;
}
if (listLength > 11) {
row = 4;
}
if (listLength > 15) {
row = 5;
}
if (listLength > 19) {
row = 6;
}
var Litem = document.createElement("li");
Litem.setAttribute("class", "item" + row);
Litem.setAttribute("id", i);
Litem.setAttribute("name", "List" + item.Category);
Litem.appendChild(document.createTextNode(quantity + "x " + item.Name));
Litem.appendChild(pictureElement);
list.appendChild(Litem);
}
}
</script>
</body>
</html>