v1.2.5

bridge/framework/esx.lua

@@ -4,6 +4,20 @@ ESX = exports['es_extended']:getSharedObject()
 
 local metadata = {}
 
+--- Get badge for license
+---@param src number Source number
+---@param itemName string
+---@return string | table
+local function GetBadge(src,itemName)
+    if not Config.Licenses[itemName].badge then return 'none' end
+    local xPlayer = ESX.GetPlayerFromId(src)
+    local badgeTable = {
+        img = Config.Licenses[itemName].badge,
+        grade = xPlayer.getJob().grade_label
+    }
+    return badgeTable
+end
+
 --- Create metadata for license
 ---@param src number Source number
 ---@param itemTable string | table Item name or table of item names
@@ -25,6 +39,7 @@ local function CreateMetaLicense(src, itemTable)
                 sex = xPlayer.variables.sex,
                 nationality = 'Los Santos',
                 mugShot = 'none',
+                badge = GetBadge(src,v)
             }
             exports.ox_inventory:AddItem(src, v, 1, metadata)
         end

bridge/framework/qb.lua

@@ -16,6 +16,20 @@ local function GetStringSex(sexString)
     return sexString
 end
 
+--- Get badge for license
+---@param src number Source number
+---@param itemName string
+---@return string | table
+local function GetBadge(src,itemName)
+    if not Config.Licenses[itemName].badge then return 'none' end
+    local Player = QBCore.Functions.GetPlayer(src)
+    local badgeTable = {
+        img = Config.Licenses[itemName].badge,
+        grade = Player.PlayerData.job.grade.name
+    }
+    return badgeTable
+end
+
 --- Create metadata for license
 ---@param src number Source number
 ---@param itemTable string | table Item name or table of item names
@@ -37,6 +51,7 @@ local function CreateMetaLicense(src, itemTable)
                 sex =  GetStringSex(Player.PlayerData.charinfo.gender),
                 nationality = Player.PlayerData.charinfo.nationality,
                 mugShot = 'none',
+                badge = GetBadge(src,v)
             }
             Player.Functions.AddItem(v, 1, false, metadata)
         end
@@ -54,4 +69,4 @@ function CreateRegisterItem(k)
     QBCore.Functions.CreateUseableItem(k, function(source, item)
         TriggerEvent('um-idcard:server:sendData', source, item.info or item.metadata)
    end)
-end
+end

bridge/framework/qbox.lua

@@ -16,6 +16,20 @@ local function GetStringSex(sexString)
     return sexString
 end
 
+--- Get badge for license
+---@param src number Source number
+---@param itemName string
+---@return string | table
+local function GetBadge(src,itemName)
+    if not Config.Licenses[itemName].badge then return 'none' end
+    local Player = QBCore.Functions.GetPlayer(src)
+    local badgeTable = {
+        img = Config.Licenses[itemName].badge,
+        grade = Player.PlayerData.job.grade.name
+    }
+    return badgeTable
+end
+
 --- Create metadata for license
 ---@param src number Source number
 ---@param itemTable string | table Item name or table of item names
@@ -37,6 +51,7 @@ local function CreateMetaLicense(src, itemTable)
                 sex =  GetStringSex(Player.PlayerData.charinfo.gender),
                 nationality = Player.PlayerData.charinfo.nationality,
                 mugShot = 'none',
+                badge = GetBadge(src,v)
             }
             Player.Functions.AddItem(v, 1, false, metadata)
         end

config.lua

@@ -9,24 +9,24 @@ Config.IdCardSettings = {
 };
 
 Config.Licenses = {
-   ["id_card"] = {
-      header = "Identity",
-      background = "#ebf7fd",
-      prop = "prop_franklin_dl"
+   ['id_card'] = {
+      header = 'Identity',
+      background = '#ebf7fd',
+      prop = 'prop_franklin_dl'
    },
-   ["driver_license"] = {
-      header = "Driver License",
-      background = "#febbbb",
-      prop = "prop_franklin_dl"
+   ['driver_license'] = {
+      header = 'Driver License',
+      background = '#febbbb',
+      prop = 'prop_franklin_dl',
    },
-   ["weaponlicense"] = {
-      header = "Weapon License",
-      background = "#c7ffe5",
-      prop = "prop_franklin_dl"
+   ['weaponlicense'] = {
+      header = 'Weapon License',
+      background = '#c7ffe5',
+      prop = 'prop_franklin_dl',
    },
-   ["lawyerpass"] = {
-      header = "Lawyer Pass",
-      background = "#f9c491",
-      prop = "prop_cs_r_business_card"
+   ['lawyerpass'] = {
+      header = 'Lawyer Pass',
+      background = '#f9c491',
+      prop = 'prop_cs_r_business_card'
    },
 }

fxmanifest.lua

@@ -4,7 +4,7 @@ lua54 'yes'
 
 name 'um-idcard'
 author 'uyuyorum {um}'
-version '1.2.4'
+version '1.2.5'
 license 'GPL-3.0 license'
 repository 'https://github.com/alp1x/um-idcard'
 description 'FiveM Identity Card for QBCore and ESX and QBox'
@@ -32,4 +32,5 @@ files {
 	'web/flags/*.png',
 	'lang/global.js',
 	'web/js/*.js',
+	'web/badges/*.png',
 }

lang/global.js

@@ -1,4 +1,4 @@
-export const globalLang = {
+export const Global = {
     lang_header: 'Los Santos',
     lang_lastname: 'Last Name',
     lang_firstname: 'First Name',

main/client.lua

@@ -1,6 +1,5 @@
 local openID,dataReady = false,false
-local animDict = 'paper_1_rcm_alt1-9'
-local anim = 'player_one_dual-9'
+local animDict,anim = 'paper_1_rcm_alt1-9','player_one_dual-9'
 
 -- Functions
 
@@ -43,7 +42,7 @@ RegisterNetEvent('um-idcard:client:startAnim', function(cardType)
     AttachEntityToEntity(createProp, cache.ped, GetPedBoneIndex(cache.ped, 57005), 0.1000, 0.0200, -0.0300, -90.000, 170.000, 78.999, true, true, false, true, 1, true)
     TaskPlayAnim(cache.ped, animDict, anim, 3.0, -1, -1, 50, -1, false, false, false)
     SetModelAsNoLongerNeeded(createProp)
-    SetTimeout(3000, function()
+    SetTimeout(3500, function()
         DeleteEntity(createProp)
         ClearPedTasks(cache.ped)
     end)

web/css/style.css

@@ -12,11 +12,27 @@
      align-items: center;
      height: 100vh;
      padding-right: 3vh;
+}
+ #badge {
+    display: none;
+    flex-direction: inherit;
+    align-items: center;
+}
+ #badge img {
+    width: 100%;
+    height: 145px;
+}
+ #badge #badgegrade {
+    background-image: linear-gradient(to right, #bbbbbb, #f3f3f3);
+    font-weight: bold;
+    padding: 5px;
+    font-size: 13px;
+    border-radius: 7px;
 }
  #um-idcard {
      visibility: hidden;
      width: 43vh;
-     height: 26vh;
+     height: auto;
      border-radius: 1.3vh;
      background: #ebebeb;
      display: flex;
@@ -27,7 +43,7 @@
  #um-idcard .header {
      display: flex;
      align-items: center;
-     font-size: 2vh;
+     font-size: 1.8vh;
      font-weight: 500;
      letter-spacing: 2px;
      padding: 0.5vh;
@@ -84,6 +100,7 @@
  .footer {
      display: flex;
      width: 100%;
+     padding: 5px;
 }
  .signature {
      flex: 1;

web/index.html

@@ -9,6 +9,10 @@
 </head>
 <body>
     <div id="um-idcard" class="anim">
+        <div id="badge">
+            <img id="badgeimg" src="">
+            <span id="badgegrade"></span>
+        </div>
         <div class="header">
             <span id="lang_header"></span>
             <span id="cardtype"></span>

web/js/main.js

@@ -1,5 +1,7 @@
 import { fetchNui } from './fetchNui.js';
-import { globalLang } from '../../lang/global.js';
+import { Global } from '../../lang/global.js';
+
+let config;
 
 /**
  * Get element by id
@@ -13,50 +15,78 @@ const getElementById = (id) => document.getElementById(id);
  **/
 const setVisibility = (visibility) => getElementById('um-idcard').style.visibility = visibility;
 
+/**
+ * Set visibility of badge 
+ * @param badge {string|Object|null}
+ **/
+const setBadgeVisibility = (badge) => {
+  const badgeElement = getElementById('badge');
+  if (!badge || badge === 'none') {
+    badgeElement.style.display = 'none';
+    return;
+  }
+  getElementById('badgeimg').src = `badges/${badge.img}.png`;
+  getElementById('badgegrade').textContent = badge.grade;
+  badgeElement.style.display = 'flex';
+};
+
 const closeFunction = () => {
-    getElementById('um-idcard').classList.remove('animate__animated', 'animate__fadeInLeft', 'animate__faster');
-    setVisibility('hidden');
-    fetchNui('closeIdCard');
-}
+  getElementById('um-idcard').classList.remove('animate__animated', 'animate__fadeInLeft', 'animate__faster');
+  setVisibility('hidden');
+  setBadgeVisibility('none');
+  fetchNui('closeIdCard');
+};
 
-let config;
+/**
+ * Open id card
+ * @param playerData {Object}
+ **/
+const openIdCard = (playerData) => {
+  const license = config.Licenses[playerData.cardtype];
+  const elements = {
+    lastname: playerData.lastname,
+    name: playerData.firstname,
+    sign: `${playerData.lastname} ${playerData.firstname}`,
+    dob: playerData.birthdate,
+    sex: playerData.sex,
+    nationality: playerData.nationality,
+    cardtype: license.header,
+  };
+
+  Object.entries(elements).forEach(([key, value]) => {
+    getElementById(key).textContent = value;
+  });
+
+  getElementById('mugshot').src = playerData.mugShot;
+  getElementById('smallmugshot').src = playerData.mugShot;
+  getElementById('um-idcard').style.backgroundColor = license.background;
+  getElementById('um-idcard').classList.add('animate__animated', 'animate__fadeInLeft', 'animate__faster');
+  setBadgeVisibility(playerData.badge);
+  setVisibility('visible');
+  autoClose();
+};
+
+const autoClose = () => {
+  if (!config.IdCardSettings.autoClose.status) return;
+  setTimeout(closeFunction, config.IdCardSettings.autoClose.time);
+};
 
 window.addEventListener('message', (event) => {
   const { type, playerData, configData } = event.data;
-  switch (type) {
-    case 'playerData':
-      const { mugShot, lastname, firstname, birthdate, sex, nationality, cardtype } = playerData;
-      const license = config.Licenses[cardtype];
-      getElementById('mugshot').src = mugShot;
-      getElementById('smallmugshot').src = mugShot;
-      getElementById('lastname').textContent = lastname;
-      getElementById('name').textContent = firstname;
-      getElementById('sign').textContent = lastname + ' ' + firstname;
-      getElementById('dob').textContent = birthdate;
-      getElementById('sex').textContent = sex;
-      getElementById('nationality').textContent = nationality;
-      getElementById('cardtype').textContent = license.header;
-      getElementById('um-idcard').style.backgroundColor = license.background;
-      getElementById('um-idcard').classList.add('animate__animated', 'animate__fadeInLeft', 'animate__faster');
-      setVisibility('visible');
-      if (!config.IdCardSettings.autoClose.status) return;
-        setTimeout(() => {
-          closeFunction()
-        }, config.IdCardSettings.autoClose.time);
-      break;
-    case 'configData':
-      config = configData;
-      break;
+  if (type === 'playerData') {
+    openIdCard(playerData);
+  } else if (type === 'configData') {
+    config = configData;
   }
 });
 
 window.addEventListener('load', () => {
-  Object.entries(globalLang).forEach(([prop, value]) => {
-    getElementById(prop).textContent = value;
+  Object.entries(Global).forEach(([key, value]) => {
+    getElementById(key).textContent = value;
   });
 });
 
 document.addEventListener('keydown', (e) => {
-    if (e.key !== config.IdCardSettings.closeKey) return;
-      closeFunction()
-  });
+  if (e.key !== config.IdCardSettings.closeKey) return;
+  closeFunction();
+});