refactor(esx_identity) & fix(esx_textui) (#685)

This commit is contained in:
Lior Koren
2022-11-24 00:41:11 +02:00
committed by GitHub
parent c12a406e26
commit 8ddd102b2a
8 changed files with 67 additions and 125 deletions
+2 -2
View File
@@ -2,13 +2,13 @@
A Core Resource that Allows the player to Pick their characters, Name, Gender, Height and Date-of-birth.
![Preview](https://cdn.discordapp.com/attachments/714118962568364106/997871502798094426/Screenshot_51.png)
![Preview](./preview.png)
# Infomation
## Requirements
[esx_skin](./../esx_skin/README.md)
[esx_skin](./../esx_skin/README.md)
## Commands
+6 -6
View File
@@ -10,12 +10,12 @@ end)
RegisterNetEvent('esx_identity:setPlayerData', function(data)
SetTimeout(1, function()
ESX.SetPlayerData("name", ('%s %s'):format(data.firstName, data.lastName))
ESX.SetPlayerData('firstName', data.firstName)
ESX.SetPlayerData('lastName', data.lastName)
ESX.SetPlayerData('dateofbirth', data.dateOfBirth)
ESX.SetPlayerData('sex', data.sex)
ESX.SetPlayerData('height', data.height)
ESX.SetPlayerData("name", ('%s %s'):format(data.firstName, data.lastName))
ESX.SetPlayerData('firstName', data.firstName)
ESX.SetPlayerData('lastName', data.lastName)
ESX.SetPlayerData('dateofbirth', data.dateOfBirth)
ESX.SetPlayerData('sex', data.sex)
ESX.SetPlayerData('height', data.height)
end)
end)
+1 -3
View File
@@ -1,9 +1,7 @@
ALTER TABLE `users`
ADD COLUMN `firstname` VARCHAR(16) NULL DEFAULT NULL,
ADD COLUMN `lastname` VARCHAR(16) NULL DEFAULT NULL,
ADD COLUMN `dateofbirth` VARCHAR(10) NULL DEFAULT NULL,
ADD COLUMN `sex` VARCHAR(1) NULL DEFAULT NULL,
ADD COLUMN `height` INT NULL DEFAULT NULL
;
;
+5 -4
View File
@@ -6,10 +6,12 @@ description 'ESX Identity'
lua54 'yes'
version '1.8.5'
shared_script '@es_extended/imports.lua'
shared_scripts {
'@es_extended/imports.lua',
'@es_extended/locale.lua',
}
server_scripts {
'@es_extended/locale.lua',
'@oxmysql/lib/MySQL.lua',
'locales/*.lua',
'config.lua',
@@ -17,7 +19,6 @@ server_scripts {
}
client_scripts {
'@es_extended/locale.lua',
'locales/*.lua',
'config.lua',
'client/main.lua'
@@ -31,4 +32,4 @@ files {
'html/css/style.css',
}
dependency 'es_extended'
dependency 'es_extended'
+15 -75
View File
@@ -1,23 +1,24 @@
<html>
<!DOCTYPE html>
<html lang="en">
<head>
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="nui://game/ui/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet">
<title>ESX Identity</title>
</head>
<body onkeydown="TriggeredKey(this)">
<div class="dialog">
<div class="title"><b>IDENTITY</b></div>
<!-- <img id="logo" height="110px" width="332px"> > -->
<form id="register" name="register" action="#">
<div style="color: rgb(46, 187, 205);font-size: 12px; font-family: 'Gill Sans', sans-serif";>First Name</div>
<input id="firstname" type="text" class="" name="firstname" placeholder="First Name"><br>
<div style="color: rgb(46, 187, 205);font-size: 12px; font-family: 'Gill Sans', sans-serif";>Last Name</div>
<input id="lastname" type="text" class="" name="lastname" placeholder="Last Name"><br>
<div style="color: rgb(46, 187, 205);font-size: 12px; font-family: 'Gill Sans', sans-serif", sans-serif;>Date of Birth (MM/DD/YYYY)</div>
<input id="dateofbirth" type="date" name="dateofbirth" class="" placeholder="Date of Birth (dd/mm/yyyy)" min="01/01/1900" max="01/01/2010" onfocus="(this.type='date')"><br>
<div style="color: rgb(46, 187, 205);font-size: 12px; font-family: 'Gill Sans', sans-serif", sans-serif;>Height</div>
<div style="color: rgb(46, 187, 205);font-size: 12px; font-family: 'Gill Sans', sans-serif">First Name</div>
<input id="firstname" type="text" class="" name="firstname" placeholder="First Name" minlength="3" maxlength="8" pattern="[a-zA-Z]*"><br>
<div style="color: rgb(46, 187, 205);font-size: 12px; font-family: 'Gill Sans', sans-serif">Last Name</div>
<input id="lastname" type="text" class="" name="lastname" placeholder="Last Name" minlength="3" maxlength="10" pattern="[a-zA-Z]*"><br>
<div style="color: rgb(46, 187, 205);font-size: 12px; font-family: 'Gill Sans', sans-serif">Date of Birth (MM/DD/YYYY)</div>
<input id="dateofbirth" type="date" name="dateofbirth" class="" min="1900-01-01" max="2010-01-01" onfocus="(this.type='date')"><br>
<div style="color: rgb(46, 187, 205);font-size: 12px; font-family: 'Gill Sans', sans-serif">Height</div>
<input id="height" type="number" class="" name="height" min="120" max="220" placeholder="Height (cm)"><br>
<center>
<div class="radio-toolbar">
@@ -32,74 +33,13 @@
</form>
<center><font size="1px" color="green">If the submit button doesn't work, please ensure that you've entered the fields correctly.</font></center>
</div>
<script>
const allRanges = document.querySelectorAll(".range-wrap");
allRanges.forEach(wrap => {
const range = wrap.querySelector(".range");
const bubble = wrap.querySelector(".bubble");
range.addEventListener("input", () => {
setBubble(range, bubble);
});
setBubble(range, bubble);
});
function setBubble(range, bubble) {
const val = range.value;
const min = range.min ? range.min : 0;
const max = range.max ? range.max : 100;
const newVal = Number(((val - min) * 100) / (max - min));
bubble.innerHTML = 'Height: ' + val;
bubble.style.left = `calc(${newVal}% + (${8 - newVal * 0.15}px))`;
}
var myFirstName = document.getElementById('firstname');
var myLastName = document.getElementById('lastname');
var myDOB = document.getElementById('dateofbirth');
var myHeight = document.getElementById('height');
function isNumber(e) {
var key=e.which || e.KeyCode;
if ( key >=48 && key <= 57) {
return true;
}
else {
return false;
}
}
function checkDOB() {
var date = new Date($('#dateofbirth').val());
day = date.getDate();
month = date.getMonth() + 1;
year = date.getFullYear();
if (isNaN(month) || isNaN(day) || isNaN(year)) {
myDOB.style.backgroundColor = '#E06666';
myDOB.style.color = 'black';
}
else {
var dateInput = [day, month, year].join('/');
var regExp = /^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d{4})$/;
var dateArray = dateInput.match(regExp);
if (dateArray == null){
return false;
}
month = dateArray[1];
day= dateArray[3];
year = dateArray[5];
}
}
<script>
function TriggeredKey(e) {
var keycode;
if (window.event) keycode = window.event.keyCode;
if (window.event.keyCode == 13 || window.event.keyCode == 27) return false;
}
</script>
<script src="js/script.js" type="text/javascript"></script>
<script src="js/script.js"></script>
</body>
</html>
+36 -33
View File
@@ -1,35 +1,38 @@
$(function() {
$.post('http://esx_identity/ready', JSON.stringify({}))
$(document).ready(function () {
$.post("http://esx_identity/ready", JSON.stringify({}));
window.addEventListener('message', function(event) {
if (event.data.type === "enableui") {
document.body.style.display = event.data.enable ? "block" : "none"
}
})
window.addEventListener("message", function (event) {
if (event.data.type === "enableui") {
event.data.enable ? $(document.body).show() : $(document.body).hide();
}
});
$("#register").submit(function(event) {
event.preventDefault() // Prevent form from submitting
// Verify date
var date = $("#dateofbirth").val()
var dateCheck = new Date($("#dateofbirth").val())
if (dateCheck == "Invalid Date") {
date == "invalid"
} else {
const ye = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(dateCheck)
const mo = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(dateCheck)
const da = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(dateCheck)
var formattedDate = `${da}/${mo}/${ye}`
$.post('http://esx_identity/register', JSON.stringify({
firstname: $("#firstname").val(),
lastname: $("#lastname").val(),
dateofbirth: formattedDate,
sex: $("input[type='radio'][name='sex']:checked").val(),
height: $("#height").val()
}))
}
})
})
$("#register").submit(function (event) {
event.preventDefault();
const dateCheck = new Date($("#dateofbirth").val());
const year = new Intl.DateTimeFormat("en", { year: "numeric" }).format(
dateCheck
);
const month = new Intl.DateTimeFormat("en", { month: "2-digit" }).format(
dateCheck
);
const day = new Intl.DateTimeFormat("en", { day: "2-digit" }).format(
dateCheck
);
const formattedDate = `${day}/${month}/${year}`;
$.post(
"http://esx_identity/register",
JSON.stringify({
firstname: $("#firstname").val(),
lastname: $("#lastname").val(),
dateofbirth: formattedDate,
sex: $("input[type='radio'][name='sex']:checked").val(),
height: $("#height").val(),
})
);
});
});
Binary file not shown.

After

Width:  |  Height:  |  Size: 943 KiB

+2 -2
View File
@@ -5,8 +5,8 @@ Debug = ESX.GetConfig().EnableDebug
local function TextUI(message, type)
SendNUIMessage({
action = 'show',
message = message or 'ESX-TextUI',
type = type or 'info'
message = message and message or 'ESX-TextUI',
type = type ~= 0 and type or 'info'
})
end