client/metaData.js

const { framework } = exports["tgiann-core"].getConfig();

const FramewWorkData =
  framework == "qb"
    ? exports["qb-core"].GetCoreObject()
    : exports["es_extended"].getSharedObject();

const allItems =
  framework == "qb" ? FramewWorkData.Shared.Items : FramewWorkData.TGIANNItems;

const checkDurability = (itemData, zeroLabel) => {
  if (!zeroLabel) zeroLabel = "";
  let qualityPercent = 0;
  let durabilityTime = 0;
  if (!itemData?.info?.durabilityPercent) {
    if (itemData.info.type == "food") {
      durabilityTime = config.foodDurabilityTime || 0;
    }
    let itemLastDate = itemData.info.durubality + durabilityTime;
    let DurabilityFrist = itemLastDate - itemData.info.durubality;
    let Durabilitys = itemLastDate - new Date() / 1000;
    qualityPercent = (Durabilitys / DurabilityFrist) * 100;
  } else {
    qualityPercent = itemData.info.durabilityPercent;
  }

  let qualityColor = "#36f097";
  if (qualityPercent > 75) {
    qualityColor = "#36f097";
  } else if (qualityPercent > 50) {
    qualityColor = "#74C242";
  } else if (qualityPercent >= 25) {
    qualityColor = "#DEB837";
  } else {
    qualityColor = "#CC2727";
  }

  if (qualityPercent !== undefined) {
    qualityPercent = qualityPercent.toFixed(2);
  }
  let qualityLabel = qualityPercent;
  if (qualityPercent <= 0) {
    qualityLabel = zeroLabel;
    qualityPercent = 100;
  }

  return { qualityColor, qualityPercent, qualityLabel };
};

const durubalityBar = (data, lang) => {
  const radius = 6;
  const dasharray = 2 * Math.PI * radius;
  const dashoffset = dasharray * ((100 - data.qualityPercent) / 100);

  return `
    <div class="context_durubality_container">
      <div class="context_durubality_bar">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="21"
          height="21"
          viewBox="0 0 21 21"
          fill="none"
          style="transform: rotate(-90deg);"
        >
          <circle
            cx="10.5"
            cy="10.5"
            r="${radius}"
            stroke-width="0.2vh"
            stroke="${data.qualityColor}"
            stroke-dasharray="${dasharray}px"
            stroke-dashoffset="${dashoffset}px"
          />
          <circle
            cx="10.5"
            cy="10.5"
            r="10"
            stroke="white"
            stroke-opacity="0.4"
            stroke-dasharray="2 2"
          />
        </svg>
      </div>
      <div class="context_durubality_label">${lang.metadataDurability}</div>
      <div class="context_durubality_percent">${data.qualityPercent}%</div>
    </div>
  `;
};

RegisterNuiCallback("getMetaDataHtml", ({ itemData, lang }, cb) => {
  const info = itemData?.info;
  const sharedData = allItems[itemData.name];
  let html;

  if (itemData.costs) {
    const needItems = Object.keys(itemData.costs);
    html = `<div class="item_info_container">`;
    needItems.map((item) => {
      const amount = itemData.costs[item];
      const itemSharedData = allItems[item];
      html =
        html +
        `<div class="item_info_row">
          <div class="item_info_row_left">${itemSharedData.label} </div>
          <div class="item_info_row_right">
            ${amount}x
          </div>
        </div>`;
    });
    html = html + "</div>";
  } else if (sharedData.type == "weapon") {
    const data = checkDurability(itemData, lang.metadataBorken);
    html = `
      ${durubalityBar(data, lang)}
      <div class="item_info_container">
        <div class="item_info_row">
          <div class="item_info_row_left">${lang.metadataSerieNumber} </div>
          <div class="item_info_row_right">${
            itemData.info.serie ? itemData.info.serie : lang.notFoundSerie
          }</div>
        </div>
        <div class="item_info_row">
          <div class="item_info_row_left">${lang.metadataAmmo} </div>
          <div class="item_info_row_right">${
            itemData.info.ammo ? itemData.info.ammo : 0
          }</div>
        </div>
        <div class="item_info_row">
          <div class="item_info_row_left">${lang.metadataTotalFiredAmmo} </div>
          <div class="item_info_row_right">
          ${itemData.info.usedTotalAmmo ? itemData.info.usedTotalAmmo : 0}
          </div>
        </div>
      </div>
    `;
  } else if (itemData.name == "armor" || itemData.name == "policearmor") {
    const data = checkDurability(itemData, lang.metadataBorken);
    html = `
      <div class="item_info_container">
        <div class="item_info_row">
          <div class="item_info_row_left">${lang.metadataArmorValue}</div>
          <div class="item_info_row_right">${data.qualityLabel}</div>
        </div>
      </div>
    `;
  } else if (info?.type == "clothe") {
    const model =
      itemData.info.model == 1885233650 ? lang.metadataMan : lang.metadataWoman;

    html = `
      <div class="item_info_container">
        <div class="item_info_row">
            <div class="item_info_row_left">${lang.metadataModel}</div>
            <div class="item_info_row_right">${model}</div>
        </div>
    `;
    let newHtml = "";

    Object.keys(itemData.info.data).map((key, i) => {
      const data = itemData.info.data[key];
      newHtml =
        newHtml +
        `
            <div class="item_info_row">
                <div class="item_info_row">
                    <div class="item_info_row_left">${lang.metadataClothe}</div>
                    <div class="item_info_row_right">${key}</div>
                </div>
                <div class="item_info_row">
                    <div class="item_info_row_left">${lang.metadataClotheType}</div>
                    <div class="item_info_row_right">${data.Prop}</div>
                </div>
                <div class="item_info_row">
                    <div class="item_info_row_left">${lang.metadataClotheColor}</div>
                    <div class="item_info_row_right"> ${data.Texture}</div>
                </div>
            </div>
        `;
    });

    html = html + newHtml + "</div>";
  } else if (info?.type == "ring") {
    html = `
      <div class="item_info_container">
        <div class="item_info_row">
          Yüzüğün İçinde <strong>${itemData.info.name}</strong> Yazmaktadır
        </div>
      </div>
    `;
  }

  SendNUIMessage({
    app: "app-name",
    method: "getMetaDataHtmlSuccess",
    data: html,
  });

  cb("");
});