mirror of
https://github.com/esx-framework/esx_core.git
synced 2026-08-31 02:08:55 +00:00
Jérémie N'gadi
@@ -6,6 +6,8 @@ server_scripts {
|
||||
'@mysql-async/lib/MySQL.lua',
|
||||
'config.lua',
|
||||
'@es_extended/locale.lua',
|
||||
'locales/de.lua',
|
||||
'locales/br.lua',
|
||||
'locales/en.lua',
|
||||
'locales/fr.lua',
|
||||
'server/main.lua'
|
||||
@@ -14,6 +16,8 @@ server_scripts {
|
||||
client_scripts {
|
||||
'@es_extended/locale.lua',
|
||||
'config.lua',
|
||||
'locales/de.lua',
|
||||
'locales/br.lua',
|
||||
'locales/en.lua',
|
||||
'locales/fr.lua',
|
||||
'client/main.lua'
|
||||
|
||||
@@ -0,0 +1,489 @@
|
||||
(function(){
|
||||
|
||||
let ContactTpl =
|
||||
'<div class="contact {{online}}">' +
|
||||
'<div class="sender-info">' +
|
||||
'<div class="center">' +
|
||||
'<span class="sender">{{sender}}</span><br/><span class="phone-number">#{{phoneNumber}}</span>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div class="actions"><span class="new-msg newMsg-btn" data-contact-number="{{phoneNumberData}}" data-contact-name="{{senderData}}"></span></div>' +
|
||||
'</div>'
|
||||
;
|
||||
|
||||
let MessageTpl =
|
||||
'<div class="message">' +
|
||||
'<div class="sender-info">' +
|
||||
'<div class="center">' +
|
||||
'<span class="sender">{{sender}}</span><br/><span class="phone-number">#{{phoneNumber}}</span>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div class="body">{{message}}</div>' +
|
||||
'<div class="actions"><span class="new-msg {{anonyme}} reply-btn" data-contact-number="{{phoneNumberData}}" data-contact-name="{{senderData}}"></span><span class="gps {{activeGPS}} gps-btn" data-gpsX="{{gpsLocationX}}" data-gpsY="{{gpsLocationY}}"></span><span class="ok-btn {{showOK}}" data-contact-number="{{okNumberData}}" data-contact-job="{{jobData}}"></span></div>' +
|
||||
'</div>'
|
||||
;
|
||||
|
||||
let SpecialContactTpl = '<li class="phone-icon" style="background-image: url(\'{{base64Icon}}\');" data-number="{{number}}" data-name="{{name}}">{{name}}</li>';
|
||||
|
||||
let contacts = [];
|
||||
let specialContacts = [];
|
||||
let menu = [];
|
||||
let currentItem = 0;
|
||||
let currentVal = null;
|
||||
let isMessageEditorOpen = false;
|
||||
let isMessagesOpen = false;
|
||||
let isPhoneShowed = false;
|
||||
|
||||
let showMain = function() {
|
||||
$('.screen').removeClass('active');
|
||||
}
|
||||
|
||||
let showRepertoire = function() {
|
||||
$('#repertoire').addClass('active');
|
||||
}
|
||||
|
||||
let hideRepertoire = function() {
|
||||
$('#repertoire').removeClass('active');
|
||||
}
|
||||
|
||||
let showMessages = function(){
|
||||
$('#messages').addClass('active');
|
||||
isMessagesOpen = true;
|
||||
}
|
||||
|
||||
let hideMessages = function(){
|
||||
$('#messages').removeClass('active');
|
||||
isMessagesOpen = false;
|
||||
}
|
||||
|
||||
let showAddContact = function() {
|
||||
$('#contact').addClass('active');
|
||||
}
|
||||
|
||||
let hideAddContact = function() {
|
||||
$('#contact').removeClass('active');
|
||||
$('#contact_name').val('');
|
||||
$('#contact_number').val('');
|
||||
}
|
||||
|
||||
let showNewMessage = function(cnum, cname) {
|
||||
$('#writer').addClass('active');
|
||||
$('#writer_number').val(cnum);
|
||||
$('#writer .header-title').html(cname);
|
||||
}
|
||||
|
||||
let hideNewMessage = function() {
|
||||
$('#writer').removeClass('active');
|
||||
$('#writer_number').val('');
|
||||
$('#writer_message').val('');
|
||||
$('#writer .header-title').html('');
|
||||
}
|
||||
|
||||
let showGPS = function(xPos, yPos) {
|
||||
$.post('http://esx_phone/setGPS', JSON.stringify({
|
||||
x: parseFloat(xPos),
|
||||
y: parseFloat(yPos)
|
||||
}
|
||||
));
|
||||
}
|
||||
|
||||
let renderContacts = function(){
|
||||
|
||||
let contactHTML = '';
|
||||
|
||||
if(contacts.length > 0) {
|
||||
|
||||
for(let i=0; i<contacts.length; i++) {
|
||||
|
||||
let view = {
|
||||
phoneNumber : contacts[i].value,
|
||||
sender : contacts[i].label,
|
||||
phoneNumberData: contacts[i].value,
|
||||
senderData : contacts[i].label,
|
||||
online : contacts[i].online ? 'online' : '',
|
||||
anonyme : contacts[i].anonyme ? 'online' : ''
|
||||
}
|
||||
|
||||
let html = Mustache.render(ContactTpl, view);
|
||||
|
||||
contactHTML += html;
|
||||
}
|
||||
|
||||
} else {
|
||||
contactHTML = '<div class="contact no-item online"><p class="no-item">Keine Kontakte</p></div>';
|
||||
}
|
||||
|
||||
$('#phone #repertoire .repertoire-list').html(contactHTML);
|
||||
|
||||
$('.contact.online .new-msg').click(function() {
|
||||
showNewMessage($(this).attr('data-contact-number'), $(this).attr('data-contact-name'));
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
$('.contact.online .new-msg').click(function() {
|
||||
showNewMessage($(this).attr('data-contact-number'));
|
||||
});
|
||||
|
||||
let reloadPhone = function(phoneData){
|
||||
|
||||
contacts = [];
|
||||
|
||||
for(let i=0; i<phoneData.contacts.length; i++){
|
||||
contacts.push({
|
||||
label : phoneData.contacts[i].name,
|
||||
value : phoneData.contacts[i].number,
|
||||
online: phoneData.contacts[i].online
|
||||
})
|
||||
}
|
||||
|
||||
renderContacts();
|
||||
|
||||
$('#phone-number').text('#' + phoneData.phoneNumber);
|
||||
}
|
||||
|
||||
let showPhone = function(phoneData){
|
||||
reloadPhone(phoneData);
|
||||
$('#phone').show();
|
||||
isPhoneShowed = true;
|
||||
}
|
||||
|
||||
let hidePhone = function(){
|
||||
$('#phone').hide();
|
||||
isPhoneShowed = false;
|
||||
}
|
||||
|
||||
let messages = [];
|
||||
|
||||
let addMessage = function(phoneNumber, pmessage, pposition, panonyme, pjob){
|
||||
|
||||
messages.push({
|
||||
value : phoneNumber,
|
||||
message : pmessage,
|
||||
position: pposition,
|
||||
anonyme : panonyme,
|
||||
job : pjob
|
||||
})
|
||||
|
||||
let messageHTML = '';
|
||||
|
||||
if(messages.length > 0) {
|
||||
|
||||
for(let i=0; i<messages.length; i++) {
|
||||
|
||||
let fromName = "Unknown";
|
||||
let fromNumber = messages[i].value;
|
||||
let anonyme = null;
|
||||
|
||||
if(messages[i].job != "player")
|
||||
fromName = messages[i].job;
|
||||
|
||||
if(messages[i].anonyme) {
|
||||
|
||||
if(messages[i].job == "player")
|
||||
fromName = "Anonymous";
|
||||
|
||||
fromNumber = "Anonymous";
|
||||
anonyme = 'anonyme';
|
||||
|
||||
} else {
|
||||
|
||||
for(let j=0; j<contacts.length; j++)
|
||||
if(contacts[j].value == messages[i].value)
|
||||
if(messages[i].job == "player")
|
||||
fromName = contacts[j].label;
|
||||
|
||||
anonyme = '';
|
||||
}
|
||||
|
||||
let view = {
|
||||
anonyme : anonyme,
|
||||
phoneNumber : fromNumber,
|
||||
sender : fromName,
|
||||
message : messages[i].message,
|
||||
phoneNumberData: fromNumber,
|
||||
senderData : fromName,
|
||||
okNumberData : fromNumber,
|
||||
gpsLocationX : (messages[i].job == 'player') ? '' : messages[i].position.x,
|
||||
gpsLocationY : (messages[i].job == 'player') ? '' : messages[i].position.y,
|
||||
activeGPS : (messages[i].job == 'player') ? '' : (messages[i].position) ? 'active' : '',
|
||||
jobData : (messages[i].job == 'player') ? '' : messages[i].job,
|
||||
showOK : (messages[i].job == 'player') ? '' : 'showOK'
|
||||
}
|
||||
|
||||
let html = Mustache.render(MessageTpl, view);
|
||||
|
||||
messageHTML = html + messageHTML;
|
||||
}
|
||||
} else {
|
||||
messageHTML = '<div class="message no-item"><p class="no-item">Keine Nachrichten</p></div>';
|
||||
}
|
||||
|
||||
$('#phone #messages .messages-list').html(messageHTML);
|
||||
|
||||
$('.message .new-msg').click(function() {
|
||||
showNewMessage($(this).attr('data-contact-number'), $(this).attr('data-contact-name'));
|
||||
});
|
||||
|
||||
$('.message .gps').click(function() {
|
||||
showGPS($(this).attr('data-gpsX'), $(this).attr('data-gpsY'));
|
||||
});
|
||||
|
||||
$('.message .ok-btn').click(function() {
|
||||
$.post('http://esx_phone/send', JSON.stringify({
|
||||
message: $(this).attr('data-contact-job') + ": Receieved!",
|
||||
number : $(this).attr('data-contact-number'),
|
||||
anonyme: false
|
||||
}))
|
||||
});
|
||||
}
|
||||
|
||||
let scrollMessages = function(direction){
|
||||
|
||||
let element = $('#messages .container')[0];
|
||||
|
||||
if(direction == 'UP')
|
||||
element.scrollTop -= 100;
|
||||
|
||||
if(direction == 'DOWN')
|
||||
element.scrollTop += 100;
|
||||
}
|
||||
|
||||
let addSpecialContact = function(name, number, base64Icon){
|
||||
|
||||
let found = false
|
||||
|
||||
for(let i=0; i<specialContacts.length; i++)
|
||||
if(specialContacts[i].number == number)
|
||||
found = true;
|
||||
|
||||
if(!found){
|
||||
|
||||
specialContacts.push({
|
||||
name : name,
|
||||
number : number,
|
||||
base64Icon: base64Icon
|
||||
});
|
||||
|
||||
specialContacts.sort((a,b) => {
|
||||
return a.name.localeCompare(b.name);
|
||||
});
|
||||
|
||||
renderSpecialContacts();
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
let removeSpecialContact = function(number){
|
||||
|
||||
for(let i=0; i<specialContacts.length; i++){
|
||||
if(specialContacts[i].number == number){
|
||||
specialContacts.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
renderSpecialContacts();
|
||||
|
||||
}
|
||||
|
||||
let renderSpecialContacts = function(){
|
||||
|
||||
$('.phone-icon').unbind('click');
|
||||
|
||||
$('#phone .menu .home').html(
|
||||
'<li class="phone-icon" id="phone-icon-rep">Kontakte</li>' +
|
||||
'<li class="phone-icon" id="phone-icon-msg">Nachrichten</li>'
|
||||
);
|
||||
|
||||
for(let i=0; i<specialContacts.length; i++){
|
||||
let elem = $(Mustache.render(SpecialContactTpl, specialContacts[i]));
|
||||
$('#phone .menu .home').append(elem);
|
||||
}
|
||||
|
||||
$('.phone-icon').click(function(event) {
|
||||
|
||||
let id = $(this).attr('id');
|
||||
|
||||
switch(id) {
|
||||
|
||||
case 'phone-icon-rep' : {
|
||||
showRepertoire();
|
||||
break;
|
||||
}
|
||||
|
||||
case 'phone-icon-msg' : {
|
||||
showMessages();
|
||||
break;
|
||||
}
|
||||
|
||||
default : {
|
||||
|
||||
let number = $(this).data('number');
|
||||
let name = $(this).data('name');
|
||||
|
||||
showNewMessage(number, name);
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
$('#writer_send').click(function(){
|
||||
|
||||
let phoneNumber = null
|
||||
|
||||
if(typeof $('#writer_number').val() == 'number')
|
||||
phoneNumber = parseInt($('#writer_number').val());
|
||||
else if (typeof $('#writer_number').val() == 'string')
|
||||
phoneNumber = $('#writer_number').val();
|
||||
|
||||
$.post('http://esx_phone/send', JSON.stringify({
|
||||
message: $('#writer_message').val(),
|
||||
number : phoneNumber,
|
||||
anonyme: $('#writer_anonyme').is(':checked')
|
||||
}))
|
||||
|
||||
});
|
||||
|
||||
$('#contact_send').click(function(){
|
||||
|
||||
$.post('http://esx_phone/add_contact', JSON.stringify({
|
||||
contactName: $('#contact_name').val(),
|
||||
phoneNumber: $('#contact_number').val()
|
||||
}))
|
||||
|
||||
});
|
||||
|
||||
// ACTIONS BTNS
|
||||
$('#btn-head-back-msg').click(function() {
|
||||
hideNewMessage();
|
||||
hideMessages();
|
||||
});
|
||||
|
||||
$('#btn-head-back-rep').click(function() {
|
||||
hideRepertoire();
|
||||
});
|
||||
|
||||
$('#btn-head-back-writer, #writer_cancel').click(function() {
|
||||
hideNewMessage();
|
||||
});
|
||||
|
||||
$('#btn-head-back-contact, #contact_cancel').click(function() {
|
||||
hideAddContact();
|
||||
});
|
||||
|
||||
$('#btn-head-new-message').click(function() {
|
||||
showNewMessage('', 'Nouveau message');
|
||||
});
|
||||
|
||||
$('#btn-head-new-contact').click(function() {
|
||||
showAddContact();
|
||||
});
|
||||
|
||||
$('.phone-icon').click(function(event) {
|
||||
|
||||
let id = $(this).attr('id');
|
||||
|
||||
switch(id) {
|
||||
|
||||
case 'phone-icon-rep' : {
|
||||
showRepertoire();
|
||||
break;
|
||||
}
|
||||
|
||||
case 'phone-icon-msg' : {
|
||||
showMessages();
|
||||
break;
|
||||
}
|
||||
|
||||
default : {
|
||||
|
||||
let number = $(this).data('number');
|
||||
let name = $(this).data('name');
|
||||
|
||||
showNewMessage(number, name);
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
window.onData = function(data){
|
||||
|
||||
if(data.scroll === true){
|
||||
if(isMessagesOpen)
|
||||
scrollMessages(data.direction);
|
||||
}
|
||||
|
||||
if(data.reloadPhone === true){
|
||||
reloadPhone(data.phoneData);
|
||||
}
|
||||
|
||||
if(data.showPhone === true){
|
||||
showPhone(data.phoneData);
|
||||
}
|
||||
|
||||
if(data.showPhone === false){
|
||||
hidePhone();
|
||||
}
|
||||
|
||||
if(data.showMessageEditor === false){
|
||||
hideNewMessage();
|
||||
}
|
||||
|
||||
if(data.newMessage === true){
|
||||
addMessage(data.phoneNumber, data.message, data.position, data.anonyme, data.job);
|
||||
}
|
||||
|
||||
if(data.contactAdded === true){
|
||||
reloadPhone(data.phoneData);
|
||||
hideAddContact();
|
||||
}
|
||||
|
||||
if(data.addSpecialContact === true){
|
||||
addSpecialContact(data.name, data.number, data.base64Icon);
|
||||
}
|
||||
|
||||
if(data.removeSpecialContact === true){
|
||||
removeSpecialContact(data.number);
|
||||
}
|
||||
|
||||
if(data.move && isPhoneShowed){
|
||||
|
||||
if(data.move == 'UP'){
|
||||
scroll('UP');
|
||||
}
|
||||
|
||||
if(data.move == 'DOWN'){
|
||||
scroll('DOWN');
|
||||
}
|
||||
}
|
||||
|
||||
if(data.enterPressed){
|
||||
|
||||
if(isPhoneShowed) {
|
||||
|
||||
$.post('http://esx_phone/select', JSON.stringify({
|
||||
val : currentVal
|
||||
}));
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
window.onload = function(e){ window.addEventListener('message', function(event){ onData(event.data) }); }
|
||||
|
||||
document.onkeydown = function (data) {
|
||||
if ((data.which == 120 || data.which == 27) && isPhoneShowed) { // || data.which == 8
|
||||
$.post('http://esx_phone/escape');
|
||||
}
|
||||
};
|
||||
|
||||
})();
|
||||
@@ -0,0 +1,82 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<link rel="stylesheet" href="css/app.css" type="text/css" />
|
||||
<link href="https://fonts.googleapis.com/css?family=Catamaran:400,700" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone" id="phone">
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="head">
|
||||
<span id="phone-icon"><img src="./img/icons/signal.png" /></span>
|
||||
<span id="phone-number">#123456</span>
|
||||
</div>
|
||||
|
||||
<div class="menu">
|
||||
<ul class="home">
|
||||
<li class="phone-icon" id="phone-icon-rep">Kontakte</li>
|
||||
<li class="phone-icon" id="phone-icon-msg">Nachrichten</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="repertoire" class="screen">
|
||||
|
||||
<div class="head-screen"><span id="btn-head-back-rep" class="btn-head btn-head-back"></span>Kontakte<span id="btn-head-new-contact" class="btn-head btn-head-new"></span></div>
|
||||
<div class="container">
|
||||
<div class="content-screen repertoire-list">
|
||||
<div class="contact no-item online">
|
||||
<p class="no-item">Keine Kontakte</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="messages" class="screen">
|
||||
<div class="head-screen"><span id="btn-head-back-msg" class="btn-head btn-head-back"></span>Nachrichten<!--<span id="btn-head-new-message" class="btn-head btn-head-new"></span>--></div>
|
||||
<div class="container">
|
||||
<div class="content-screen messages-list">
|
||||
<div class="message no-item">
|
||||
<p class="no-item">Keine Nachrichten</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="writer" class="screen">
|
||||
<div class="head-screen"><span id="btn-head-back-writer" class="btn-head btn-head-back"></span><span class="header-title"></span></div>
|
||||
<div class="container">
|
||||
<div class="content-screen">
|
||||
<input type="hidden" id="writer_number" value="0" />
|
||||
<textarea id="writer_message" placeholder="Deine Nachricht"></textarea>
|
||||
<label><input type="checkbox" id="writer_anonyme" value="true">Anonymous</label>
|
||||
<button id="writer_cancel">Abbrechen</button>
|
||||
<button id="writer_send" class="marged">Senden</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="contact" class="screen">
|
||||
<div class="head-screen"><span id="btn-head-back-contact" class="btn-head btn-head-back"></span>Kontakt hinzufügen</div>
|
||||
<div class="container">
|
||||
<div class="content-screen">
|
||||
<input type="text" id="contact_name" placeholder="Name" />
|
||||
<input type="text" id="contact_number" placeholder="Nummer" />
|
||||
<button id="contact_cancel">Abbrechen</button>
|
||||
<button id="contact_send">Hinzufügen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</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="scripts/mustache.min.js"></script>
|
||||
<script src="scripts/app.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,13 @@
|
||||
Locales['de'] = {
|
||||
|
||||
['new_message'] = '~b~Neue Nachricht',
|
||||
['press_take_call'] = ' - Drücke ~INPUT_CONTEXT~ um den Anruf anzunehmen',
|
||||
['taken_call'] = ' hat den Anruf angenommen',
|
||||
['gps_position'] = 'Ziel in GPS eingegeben',
|
||||
['message_sent'] = 'nachricht gesendet',
|
||||
['cannot_add_self'] = 'du kannst dich nicht selbst hinzufügen',
|
||||
['number_in_contacts'] = 'diese Nummer ist bereits in deinen Kontakten',
|
||||
['contact_added'] = 'Kontakt hinzugefügt',
|
||||
['number_not_assigned'] = 'diese Nummer ist nicht vergeben...',
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user