VRP ONLY Front-End Programming knowledge needed
First of all, I’d like to comment that I have no professional training related to programming, so fails may happen.
This script shows a list of jobs in the main interface to let the users know how many workers of each of those jobs are online. This way you can deactivate the user list to improve RolePlay.
__resource.lua
client_scripts{
"lib/Proxy.lua",
"client.lua"
}
server_scripts{
"@vrp/lib/utils.lua",
"server.lua"
}
ui_page "HTML/ui.html"
files {
"HTML/ui.html",
"HTML/ui.css",
"HTML/ui.js"
}
Create the environment needed for that __resource.lua file or edit that.
ui.html
<!DOCTYPE html>
<html lang="es">
<head>
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
<link href = "ui.css" type = "text/css" rel = "stylesheet">
<script src = "ui.js" type = "text/javascript"></script>
</head>
<body>
<div class = "filauno">
<ul style="list-style: none;">
<li style="margin-left:8%;">
<h1 style="display: inline;">👮: <h1 style="display: inline;" id = "policias"></h1></h1>
</li>
<li>
<h1 style="display: inline;margin-top:8%;">🚕: <h1 style="display: inline;" id = "taxistas"></h1></h1>
</li>
<li>
<h1 style="display: inline;margin-top:8%;">🔧: <h1 style="display: inline;" id = "mecanicos"></h1></h1>
</li>
</ul>
</div>
</body>
</html>
ui.css
.filauno {
position: absolute;
padding: 0;
margin: 0;
bottom: 5vw;
right: 3vw;
color: white;
font-size: 0.5vw;
}
ui.js
$(document).ready(function(){
window.addEventListener('message', function(event) {
var data = event.data;
$(".filauno").css("display",data.show? "none":"block");
$("#policias").text(data.policias);
$("#taxistas").text(data.taxistas);
$("#mecanicos").text(data.mecanicos);
});
});
server.lua
local Proxy = module("vrp", "lib/Proxy")
vRP = Proxy.getInterface("vRP")
Citizen.CreateThread(function()
while true do
local polis = vRP.getUsersByPermission({"police.service"})
local taxis = vRP.getUsersByPermission({"taxi.service"})
local mechs = vRP.getUsersByPermission({"repair.service"})
TriggerClientEvent("trabajos:update", -1, #polis, #taxis, #mechs)
Citizen.Wait(X)
end
end)
The bigger the X integer is, the less server consumption, but the more time it will take for the list to get updated.
client.lua
Citizen.CreateThread(function ()
while true do
Citizen.Wait(100)
SendNUIMessage({
show = IsPauseMenuActive(),
policias = polis,
taxistas = taxis,
mecanicos = mechs,
})
end
end)
RegisterNetEvent("trabajos:update")
AddEventHandler("trabajos:update", function(rpolis, rtaxis, rmechs)
polis = rpolis
taxis = rtaxis
mechs = rmechs
end)
---------------
I will upload the entire script when I’ve enough time to upload it.
Any feedback and 
is very appreciated.
¿ESX version? PM me.
Thank you so much!