Add files

__resource.lua

@@ -0,0 +1,23 @@
+resource_manifest_version '44febabe-d386-4d18-afbe-5e627f4af937'
+
+description 'ESX Menu Default'
+
+client_scripts {
+	'client/main.lua'
+}
+
+ui_page {
+	'html/ui.html'
+}
+
+files {
+	'html/ui.html',
+	'html/css/app.css',
+	'html/js/mustache.min.js',
+	'html/js/app.js',
+	'html/fonts/pdown.ttf',
+	'html/fonts/bankgothic.ttf',
+	'html/img/cursor.png',
+	'html/img/keys/enter.png',
+	'html/img/keys/return.png',
+}

client/main.lua

@@ -0,0 +1,77 @@
+ESX = nil
+
+Citizen.CreateThread(function()
+
+	while ESX == nil do
+		TriggerEvent('esx:getSharedObject', function(obj) ESX = obj end)
+		Citizen.Wait(0)
+	end
+
+	local MenuType    = 'list'
+	local OpenedMenus = {}
+
+	local openMenu = function(namespace, name, data)
+
+		OpenedMenus[namespace .. '_' .. name] = true
+
+		SendNUIMessage({
+			action    = 'openMenu',
+			namespace = namespace,
+			name      = name,
+			data      = data,
+		})
+
+		ESX.SetTimeout(200, function()
+			SetNuiFocus(true, true)
+		end)
+
+	end
+
+	local closeMenu = function(namespace, name)
+
+		OpenedMenus[namespace .. '_' .. name] = nil
+		local OpenedMenuCount                 = 0
+
+		SendNUIMessage({
+			action    = 'closeMenu',
+			namespace = namespace,
+			name      = name,
+			data      = data,
+		})
+
+		for k,v in pairs(OpenedMenus) do
+			if v == true then
+				OpenedMenuCount = OpenedMenuCount + 1
+			end
+		end
+
+		if OpenedMenuCount == 0 then
+			SetNuiFocus(false)
+		end
+
+	end
+
+	ESX.UI.Menu.RegisterType(MenuType, openMenu, closeMenu)
+
+	RegisterNUICallback('menu_submit', function(data, cb)
+		local menu = ESX.UI.Menu.GetOpened(MenuType, data._namespace, data._name)
+		
+		if menu.submit ~= nil then
+			menu.submit(data, menu)
+		end
+
+		cb('OK')
+	end)
+
+	RegisterNUICallback('menu_cancel', function(data, cb)
+		
+		local menu = ESX.UI.Menu.GetOpened(MenuType, data._namespace, data._name)
+		
+		if menu.cancel ~= nil then
+			menu.cancel(data, menu)
+		end
+
+		cb('OK')
+	end)
+
+end)

config.lua

@@ -0,0 +1,74 @@
+Config = {}
+
+Config.accounts                 = {'bank',   'black_money'}
+Config.accountLabels            = {'Banque', 'Argent Sale'}
+Config.PaycheckInterval         = 7 * 60000
+Config.ShowDotAbovePlayer       = false
+Config.RemoveInventoryItemDelay = 5 * 60000
+
+Config.Weapons = {
+
+	{name = 'WEAPON_UNARMED'},
+	{name = 'WEAPON_ANIMAL'},
+	{name = 'WEAPON_COUGAR'},
+	{name = 'WEAPON_KNIFE'},
+	{name = 'WEAPON_NIGHTSTICK'},
+	{name = 'WEAPON_HAMMER'},
+	{name = 'WEAPON_BAT'},
+	{name = 'WEAPON_GOLFCLUB'},
+	{name = 'WEAPON_CROWBAR'},
+	{name = 'WEAPON_PISTOL'},
+	{name = 'WEAPON_COMBATPISTOL'},
+	{name = 'WEAPON_APPISTOL'},
+	{name = 'WEAPON_PISTOL50'},
+	{name = 'WEAPON_MICROSMG'},
+	{name = 'WEAPON_SMG'},
+	{name = 'WEAPON_ASSAULTSMG'},
+	{name = 'WEAPON_ASSAULTRIFLE'},
+	{name = 'WEAPON_CARBINERIFLE'},
+	{name = 'WEAPON_ADVANCEDRIFLE'},
+	{name = 'WEAPON_MG'},
+	{name = 'WEAPON_COMBATMG'},
+	{name = 'WEAPON_PUMPSHOTGUN'},
+	{name = 'WEAPON_SAWNOFFSHOTGUN'},
+	{name = 'WEAPON_ASSAULTSHOTGUN'},
+	{name = 'WEAPON_BULLPUPSHOTGUN'},
+	{name = 'WEAPON_STUNGUN'},
+	{name = 'WEAPON_SNIPERRIFLE'},
+	{name = 'WEAPON_HEAVYSNIPER'},
+	{name = 'WEAPON_REMOTESNIPER'},
+	{name = 'WEAPON_GRENADELAUNCHER'},
+	{name = 'WEAPON_GRENADELAUNCHER_SMOKE'},
+	{name = 'WEAPON_RPG'},
+	{name = 'WEAPON_PASSENGER_ROCKET'},
+	{name = 'WEAPON_AIRSTRIKE_ROCKET'},
+	{name = 'WEAPON_STINGER'},
+	{name = 'WEAPON_MINIGUN'},
+	{name = 'WEAPON_GRENADE'},
+	{name = 'WEAPON_STICKYBOMB'},
+	{name = 'WEAPON_SMOKEGRENADE'},
+	{name = 'WEAPON_BZGAS'},
+	{name = 'WEAPON_MOLOTOV'},
+	{name = 'WEAPON_FIREEXTINGUISHER'},
+	{name = 'WEAPON_PETROLCAN'},
+	{name = 'WEAPON_DIGISCANNER'},
+	{name = 'WEAPON_BRIEFCASE'},
+	{name = 'WEAPON_BRIEFCASE_02'},
+	{name = 'WEAPON_BALL'},
+	{name = 'WEAPON_FLARE'},
+	{name = 'WEAPON_VEHICLE_ROCKET'},
+	{name = 'WEAPON_BARBED_WIRE'},
+	{name = 'WEAPON_DROWNING'},
+	{name = 'WEAPON_DROWNING_IN_VEHICLE'},
+	{name = 'WEAPON_BLEEDING'},
+	{name = 'WEAPON_ELECTRIC_FENCE'},
+	{name = 'WEAPON_EXPLOSION'},
+	{name = 'WEAPON_FALL'},
+	{name = 'WEAPON_EXHAUSTION'},
+	{name = 'WEAPON_HIT_BY_WATER_CANNON'},
+	{name = 'WEAPON_RAMMED_BY_CAR'},
+	{name = 'WEAPON_RUN_OVER_BY_CAR'},
+	{name = 'WEAPON_HELI_CRASH'},
+	{name = 'WEAPON_FIRE'}
+
+}

html/css/app.css

@@ -0,0 +1,52 @@
+@font-face {
+  font-family: bankgothic;
+  src: url('../fonts/bankgothic.ttf');
+}
+
+@font-face {
+  font-family: pcdown;
+  src: url('../fonts/pdown.ttf');
+}
+
+.menu {
+  font-family: bankgothic;  
+  position   : absolute;
+  left       : 50%;
+  top        : 50%;
+  transform  : translate(-50%, -50%);
+  box-shadow : 0px 0px 50px 0px #000;
+  overflow-y : auto;
+  max-height : 90%; 
+}
+
+.menu button {
+  font-family: bankgothic; 
+}
+
+.menu > table {
+  border          : 1px transparent;
+  border-spacing  : 0;
+  min-width       : 400px;
+  background-color: #FFF;
+}
+
+.menu > table > thead {
+  background-color: #506be6;
+  text-align      : center;
+  height          : 40px;
+  line-height     : 40px;
+  color           : #fff;
+}
+
+.menu td {
+  text-align: center;
+  padding   : 8px;
+}
+
+.menu tbody tr:nth-child(even) {
+  background: #CCC
+}
+
+.menu tbody tr:nth-child(odd) {
+  background: #FFF
+}

html/js/app.js

@@ -0,0 +1,196 @@
+(function(){
+
+	let MenuTpl =
+		'<div id="menu_{{_namespace}}_{{_name}}" class="menu">' +
+			'<table>' +
+				'<thead>' +
+					'<tr>' +
+						'{{#head}}<td>{{content}}</td>{{/head}}' +
+					'</tr>' +
+				'</thead>'+
+				'<tbody>' +
+					'{{#rows}}' +
+						'<tr>' +
+							'{{#cols}}<td>{{{content}}}</td>{{/cols}}' +
+						'</tr>' +
+					'{{/rows}}' +
+				'</tbody>' +
+			'</table>' +
+		'</div>'
+	;
+
+	window.ESX_MENU       = {};
+	ESX_MENU.ResourceName = 'esx_menu_list';
+	ESX_MENU.opened       = {};
+	ESX_MENU.focus        = [];
+	ESX_MENU.data         = {}
+
+	ESX_MENU.open = function(namespace, name, data){
+
+		if(typeof ESX_MENU.opened[namespace] == 'undefined')
+			ESX_MENU.opened[namespace] = {};
+
+		if(typeof ESX_MENU.opened[namespace][name] != 'undefined')
+			ESX_MENU.close(namespace, name);
+
+		data._namespace = namespace;
+		data._name      = name;
+
+		ESX_MENU.opened[namespace][name] = data;
+
+		ESX_MENU.focus.push({
+			namespace: namespace,
+			name     : name
+		});
+		
+		ESX_MENU.render();
+	}
+
+	ESX_MENU.close = function(namespace, name){
+		
+		delete ESX_MENU.opened[namespace][name];
+
+		for(let i=0; i<ESX_MENU.focus.length; i++){
+			if(ESX_MENU.focus[i].namespace == namespace && ESX_MENU.focus[i].name == name){
+				ESX_MENU.focus.splice(i, 1);
+				break;
+			}
+		}
+
+		ESX_MENU.render();
+
+	}
+
+	ESX_MENU.render = function(){
+
+		let menuContainer       = document.getElementById('menus');
+		let focused             = ESX_MENU.getFocused();
+		menuContainer.innerHTML = '';
+
+		$(menuContainer).hide();
+
+		for(let namespace in ESX_MENU.opened){
+			
+			if(typeof ESX_MENU.data[namespace] == 'undefined')
+				ESX_MENU.data[namespace] = {};
+
+			for(let name in ESX_MENU.opened[namespace]){
+
+				ESX_MENU.data[namespace][name] = [];
+
+				let menuData = ESX_MENU.opened[namespace][name];
+				let view     = {
+					_namespace: menuData._namespace,
+					_name     : menuData._name,
+					head      : [],
+					rows      : []
+				}
+
+				for(let i=0; i<menuData.head.length; i++){
+					let item = {content: menuData.head[i]};
+					view.head.push(item);
+				}
+
+				for(let i=0; i<menuData.rows.length; i++){
+
+					let row  = menuData.rows[i];
+					let data = row.data;
+
+					ESX_MENU.data[namespace][name].push(data)
+
+					view.rows.push({cols: []});
+
+					for(let j=0; j<row.cols.length; j++){
+
+						let col     = menuData.rows[i].cols[j];
+						let regex   = /\{\{(.*?)\|(.*?)\}\}/g;
+						let matches = [];
+						let match;
+
+						while ((match = regex.exec(col)) != null)
+							matches.push(match)
+
+						for(let k=0; k<matches.length; k++)
+							col = col.replace('{{' + matches[k][1] + '|' + matches[k][2] + '}}', '<button data-id="' + i + '" data-namespace="' + namespace + '" data-name="' + name + '" data-value="' + matches[k][2] +'">' + matches[k][1] + '</button>');
+
+						view.rows[i].cols.push({data: data, content: col})
+
+					}
+
+				}
+
+				let menu = $(Mustache.render(MenuTpl, view))
+
+				menu.find('button[data-namespace][data-name]').click(function(){
+					ESX_MENU.submit($(this).data('namespace'), $(this).data('name'), {
+						data : ESX_MENU.data[$(this).data('namespace')][$(this).data('name')][parseInt($(this).data('id'))],
+						value: $(this).data('value')
+					})
+				})
+
+				menu.hide();
+
+				menuContainer.appendChild(menu[0]);
+			}
+		}
+
+		if(typeof focused != 'undefined')
+			$('#menu_' + focused.namespace + '_' + focused.name).show();
+
+		$(menuContainer).show();
+
+	}
+
+	ESX_MENU.submit = function(namespace, name, data){
+		$.post('http://' + ESX_MENU.ResourceName + '/menu_submit', JSON.stringify({
+			_namespace: namespace,
+			_name     : name,
+			data      : data.data,
+			value     : data.value
+		}));
+	}
+
+	ESX_MENU.cancel = function(namespace, name){
+		$.post('http://' + ESX_MENU.ResourceName + '/menu_cancel', JSON.stringify({
+			_namespace: namespace,
+			_name     : name
+		}));
+	}
+
+	ESX_MENU.getFocused = function(){
+		return ESX_MENU.focus[ESX_MENU.focus.length - 1];
+	}
+
+	window.onData = (data) => {
+
+		switch(data.action){
+
+			case 'openMenu' : {
+				ESX_MENU.open(data.namespace, data.name, data.data);
+				break;
+			}
+
+			case 'closeMenu' : {
+				ESX_MENU.close(data.namespace, data.name);
+				break;
+			}
+
+		}
+
+	}
+
+	window.onload = function(e){
+		window.addEventListener('message', (event) => {
+			onData(event.data)
+		});
+	}
+
+  document.onkeyup = function(data) {
+    
+    if(data.which == 27) {
+			let focused  = ESX_MENU.getFocused();
+      ESX_MENU.cancel(focused.namespace, focused.name);
+    }
+  };
+
+})()

html/ui.html

@@ -0,0 +1,15 @@
+<html>
+	<head>
+		<link rel="stylesheet" href="css/app.css" />
+	</head>
+	<body>
+		
+		<div id="menus"></div>
+
+		<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->
+		<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
+		<script src="js/mustache.min.js"></script>
+		<script src="js/app.js"></script>
+
+	</body>
+</html>