276 lines
9.3 KiB
JavaScript
276 lines
9.3 KiB
JavaScript
$(window).ready(function () {
|
|
window.addEventListener("message", function (event) {
|
|
let data = event.data;
|
|
|
|
if (data.showMenu) {
|
|
$("#container").css({ display: 'grid', opacity: 0 }).animate({ opacity: 1 }, 200);
|
|
$("#menu").show();
|
|
|
|
if (data.type === "impound") {
|
|
$("#header ul").hide();
|
|
} else {
|
|
$("#header ul").show();
|
|
}
|
|
|
|
if (data.vehiclesList != undefined) {
|
|
$("#container").data("spawnpoint", data.spawnPoint);
|
|
if (data.poundCost) $("#container").data("poundcost", data.poundCost);
|
|
|
|
if (data.poundCost != undefined) {
|
|
$(".content .vehicle-list").html(
|
|
getVehicles(data.locales, data.vehiclesList, data.poundCost)
|
|
);
|
|
} else {
|
|
$(".content .vehicle-list").html(
|
|
getVehicles(data.locales, data.vehiclesList)
|
|
);
|
|
}
|
|
|
|
$(".content h2").hide();
|
|
} else {
|
|
$(".content h2").show();
|
|
$(".content .vehicle-list").empty();
|
|
}
|
|
|
|
if (data.vehiclesImpoundedList != undefined) {
|
|
$(".impounded_content").data("poundName", data.poundName);
|
|
$(".impounded_content").data("poundSpawnPoint", data.poundSpawnPoint);
|
|
|
|
if (data.poundCost) $("#container").data("poundcost", data.poundCost);
|
|
|
|
$(".impounded_content .vehicle-list").html(
|
|
getImpoundedVehicles(data.locales, data.vehiclesImpoundedList)
|
|
);
|
|
$(".impounded_content h2").hide();
|
|
} else {
|
|
$(".impounded_content h2").show();
|
|
$(".impounded_content .vehicle-list").empty();
|
|
}
|
|
|
|
// Locales
|
|
|
|
// needs a rework
|
|
// $(".content h2").html(function (i, text) {
|
|
// return text.replace("No vehicle in this garage.", data.locales.no_veh_parking);
|
|
// });
|
|
|
|
// $(".impounded_content h2").html(function (i, text) {
|
|
// return text.replace("No vehicle impounded.", data.locales.no_veh_impounded);
|
|
// });
|
|
|
|
$(".vehicle-listing").html(function (i, text) {
|
|
return text.replace("Model", data.locales.veh_model);
|
|
});
|
|
$(".vehicle-listing").html(function (i, text) {
|
|
return text.replace("Plate", data.locales.veh_plate);
|
|
});
|
|
$(".vehicle-listing").html(function (i, text) {
|
|
return text.replace("Condition", data.locales.veh_condition);
|
|
});
|
|
} else if (data.hideAll) {
|
|
$("#container").stop(true, true).fadeOut(150, function(){
|
|
$(this).css('display','none');
|
|
});
|
|
}
|
|
});
|
|
|
|
$("#container").hide();
|
|
|
|
$(".close").click(function (event) {
|
|
$("#container").hide();
|
|
$.post("https://esx_garage/escape", "{}");
|
|
|
|
$(".impounded_content").hide();
|
|
$(".content").show();
|
|
$('li[data-page="garage"]').addClass("selected");
|
|
$('li[data-page="impounded"]').removeClass("selected");
|
|
});
|
|
|
|
document.onkeyup = function (data) {
|
|
if (data.which == 27) {
|
|
$.post("https://esx_garage/escape", "{}");
|
|
|
|
$(".impounded_content").hide();
|
|
$(".content").show();
|
|
$('li[data-page="garage"]').addClass("selected");
|
|
$('li[data-page="impounded"]').removeClass("selected");
|
|
}
|
|
};
|
|
|
|
function clamp(n, min, max){ return Math.max(min, Math.min(max, n)); }
|
|
|
|
function getVehicles(locale, vehicle, amount = null) {
|
|
let html = "";
|
|
let vehicleData = JSON.parse(vehicle);
|
|
let bodyHealth = 1000;
|
|
let engineHealth = 1000;
|
|
let tankHealth = 1000;
|
|
let vehicleDamagePercent = "";
|
|
|
|
for (let i = 0; i < vehicleData.length; i++) {
|
|
const p = vehicleData[i].props || {};
|
|
const b = typeof p.bodyHealth === 'number' ? p.bodyHealth : 1000;
|
|
const e = typeof p.engineHealth === 'number' ? p.engineHealth : 1000;
|
|
const t = typeof p.tankHealth === 'number' ? p.tankHealth : 1000;
|
|
|
|
bodyHealth = clamp((b / 1000) * 100, 0, 100);
|
|
engineHealth = clamp((e / 1000) * 100, 0, 100);
|
|
tankHealth = clamp((t / 1000) * 100, 0, 100);
|
|
|
|
const percentNumber = clamp(Math.round(((bodyHealth + engineHealth + tankHealth) / 300) * 100), 0, 100);
|
|
vehicleDamagePercent = percentNumber + "%";
|
|
|
|
const model = String(vehicleData[i].model || '').toLowerCase();
|
|
const plate = String(vehicleData[i].plate || '').toLowerCase();
|
|
|
|
html += "<div class='vehicle-listing' data-model='" + model + "' data-plate='" + plate + "'>";
|
|
html += "<div>Model: <strong>" + vehicleData[i].model + "</strong></div>";
|
|
html += "<div>Plate: <strong>" + vehicleData[i].plate + "</strong></div>";
|
|
html +=
|
|
"<div class='condition'><span>Condition</span><div class='bar'><div class='fill' style='width:" + vehicleDamagePercent + "'></div></div><strong class='percent'>" + vehicleDamagePercent + "</strong></div>";
|
|
html +=
|
|
"<button data-button='spawn' class='vehicle-action unstyled-button' data-vehprops='" +
|
|
JSON.stringify(vehicleData[i].props) +
|
|
"'>" +
|
|
locale.action +
|
|
(amount ? " ($" + amount + ")" : "") +
|
|
"</button>";
|
|
html += "</div>";
|
|
}
|
|
|
|
return html;
|
|
}
|
|
|
|
function getImpoundedVehicles(locale, vehicle) {
|
|
let html = "";
|
|
let vehicleData = JSON.parse(vehicle);
|
|
let bodyHealth = 1000;
|
|
let engineHealth = 1000;
|
|
let tankHealth = 1000;
|
|
let vehicleDamagePercent = "";
|
|
|
|
for (let i = 0; i < vehicleData.length; i++) {
|
|
const p = vehicleData[i].props || {};
|
|
const b = typeof p.bodyHealth === 'number' ? p.bodyHealth : 1000;
|
|
const e = typeof p.engineHealth === 'number' ? p.engineHealth : 1000;
|
|
const t = typeof p.tankHealth === 'number' ? p.tankHealth : 1000;
|
|
|
|
bodyHealth = clamp((b / 1000) * 100, 0, 100);
|
|
engineHealth = clamp((e / 1000) * 100, 0, 100);
|
|
tankHealth = clamp((t / 1000) * 100, 0, 100);
|
|
|
|
const percentNumber = clamp(Math.round(((bodyHealth + engineHealth + tankHealth) / 300) * 100), 0, 100);
|
|
vehicleDamagePercent = percentNumber + "%";
|
|
|
|
const model = String(vehicleData[i].model || '').toLowerCase();
|
|
const plate = String(vehicleData[i].plate || '').toLowerCase();
|
|
|
|
html += "<div class='vehicle-listing' data-model='" + model + "' data-plate='" + plate + "'>";
|
|
html += "<div>Model: <strong>" + vehicleData[i].model + "</strong></div>";
|
|
html += "<div>Plate: <strong>" + vehicleData[i].plate + "</strong></div>";
|
|
html +=
|
|
"<div class='condition'><span>Condition</span><div class='bar'><div class='fill' style='width:" + vehicleDamagePercent + "'></div></div><strong class='percent'>" + vehicleDamagePercent + "</strong></div>";
|
|
html +=
|
|
"<button data-button='impounded' class='vehicle-action red unstyled-button' data-vehprops='" +
|
|
JSON.stringify(vehicleData[i].props) +
|
|
"'>" +
|
|
locale.impound_action +
|
|
"</button>";
|
|
html += "</div>";
|
|
}
|
|
|
|
return html;
|
|
}
|
|
|
|
function applyFilter($container, query) {
|
|
const q = String(query || '').trim().toLowerCase();
|
|
const $cards = $container.find('.vehicle-listing');
|
|
if (!q) {
|
|
$cards.show();
|
|
return;
|
|
}
|
|
$cards.each(function () {
|
|
const model = String($(this).data('model') || '');
|
|
const plate = String($(this).data('plate') || '');
|
|
if (model.indexOf(q) !== -1 || plate.indexOf(q) !== -1) {
|
|
$(this).show();
|
|
} else {
|
|
$(this).hide();
|
|
}
|
|
});
|
|
}
|
|
|
|
$(document).on('input', '#search-garage', function () {
|
|
applyFilter($('.content .vehicle-list'), $(this).val());
|
|
});
|
|
$(document).on('input', '#search-impounded', function () {
|
|
applyFilter($('.impounded_content .vehicle-list'), $(this).val());
|
|
});
|
|
|
|
// Helpers (none for now)
|
|
|
|
$('li[data-page="garage"]').click(function (event) {
|
|
$(".impounded_content").hide();
|
|
$(".content").show();
|
|
$('li[data-page="garage"]').addClass("selected");
|
|
$('li[data-page="impounded"]').removeClass("selected");
|
|
});
|
|
|
|
$('li[data-page="impounded"]').click(function (event) {
|
|
$(".content").hide();
|
|
$(".impounded_content").show();
|
|
$('li[data-page="impounded"]').addClass("selected");
|
|
$('li[data-page="garage"]').removeClass("selected");
|
|
});
|
|
|
|
$(document).on(
|
|
"click",
|
|
"button[data-button='spawn'].vehicle-action",
|
|
function (event) {
|
|
let spawnPoint = $("#container").data("spawnpoint");
|
|
let poundCost = $("#container").data("poundcost");
|
|
let vehicleProps = $(this).data("vehprops");
|
|
|
|
// prevent empty cost
|
|
if (poundCost === undefined) poundCost = 0;
|
|
|
|
$.post(
|
|
"https://esx_garage/spawnVehicle",
|
|
JSON.stringify({
|
|
vehicleProps: vehicleProps,
|
|
spawnPoint: spawnPoint,
|
|
exitVehicleCost: poundCost,
|
|
})
|
|
);
|
|
|
|
$(".impounded_content").hide();
|
|
$(".content").show();
|
|
$('li[data-page="garage"]').addClass("selected");
|
|
$('li[data-page="impounded"]').removeClass("selected");
|
|
}
|
|
);
|
|
|
|
$(document).on(
|
|
"click",
|
|
"button[data-button='impounded'].vehicle-action",
|
|
function (event) {
|
|
let vehicleProps = $(this).data("vehprops");
|
|
let poundName = $(".impounded_content").data("poundName");
|
|
let poundSpawnPoint = $(".impounded_content").data("poundSpawnPoint");
|
|
$.post(
|
|
"https://esx_garage/impound",
|
|
JSON.stringify({
|
|
vehicleProps: vehicleProps,
|
|
poundName: poundName,
|
|
poundSpawnPoint: poundSpawnPoint,
|
|
})
|
|
);
|
|
|
|
$(".impounded_content").hide();
|
|
$(".content").show();
|
|
$('li[data-page="garage"]').addClass("selected");
|
|
$('li[data-page="impounded"]').removeClass("selected");
|
|
}
|
|
);
|
|
});
|