Merge pull request #2 from LindholmDK/main

Integration of different positions.

client.lua

@@ -4,20 +4,21 @@ local currentVehPlate = ""
 local recheckCurrentVeh = 10000
 local currentVehOwned = false
 local lastUpdatedMileage = nil
+local Position = Config.Position
 
 local function distanceCheck()
   local ped = PlayerPedId()
 
   if not IsPedInAnyVehicle(PlayerPedId(), false) then
-    SendNUIMessage({ type = "hide" })
+    sendToNui({ type = "hide" })
     return
   end
 
   local vehicle = GetVehiclePedIsIn(PlayerPedId(), false)
   local vehClass = GetVehicleClass(vehicle)
 
   if GetPedInVehicleSeat(vehicle, -1) ~= ped or vehClass == 13 or vehClass == 14 or vehClass == 15 or vehClass == 16 or vehClass == 17 or vehClass == 21 then
-    SendNUIMessage({ type = "hide" })
+    sendToNui({ type = "hide" })
     return
   end
 
@@ -48,7 +49,7 @@ local function distanceCheck()
     return
   end
 
-  SendNUIMessage({ type = "show", value = currentVehMileage, unit = Config.Unit })
+  sendToNui({ type = "show", value = currentVehMileage, unit = Config.Unit, position = Position })
 
   local dist = 0
   if IsVehicleOnAllWheels(vehicle) and not IsEntityInWater(vehicle) then
@@ -59,7 +60,7 @@ local function distanceCheck()
   currentVehMileage = currentVehMileage + distKm
   lastLocation = GetEntityCoords(vehicle)
   local roundedMileage = tonumber(string.format("%.1f", currentVehMileage))
-  SendNUIMessage({ type = "show", value = roundedMileage, unit = Config.Unit })
+  sendToNui({ type = "show", value = roundedMileage, unit = Config.Unit, position = Position })
 
   if roundedMileage ~= lastUpdatedMileage then
     Entity(vehicle).state:set("vehicleMileage", roundedMileage)
@@ -75,4 +76,10 @@ CreateThread(function()
   end
 end)
 
+function sendToNui(data)
+  if Config.ShowMileage then
+    SendNUIMessage(data)
+  end
+end
+
 exports("GetUnit", function() return Config.Unit end)

config.lua

@@ -1,3 +1,5 @@
 Config = {}
 Config.Framework = "auto" -- or "QBCore", "Qbox", "ESX"
-Config.Unit = "miles" -- or "kilometers"
+Config.ShowMileage = true
+Config.Unit = "miles" -- "miles" or "kilometers"
+Config.Position = "bottom-right" -- "bottom-right" or "bottom-left" or "top-right" or "top-left" or "bottom-center" or "top-center"

web/main.css

@@ -13,15 +13,14 @@ body {
 .odometer {
   display: none;
   gap: 7.5px;
+  margin: 2rem;
   align-items: center;
   position: absolute;
   background: #212529;
   border: 1px solid #42484e;
   padding: 5px 8px;
   border-radius: 7px;
   color: white;
-  right: 25px;
-  bottom: 25px;
   transition: 0.5s ease-in-out;
   user-select: none;
 }

web/main.js

@@ -3,6 +3,49 @@
   const value = document.querySelector(".odometer-value");
   const unit = document.querySelector(".odometer-unit");
 
+  function elementPosition(position) {
+    element = odometer;
+    element.style.top = '';
+    element.style.bottom = '';
+    element.style.left = '';
+    element.style.right = '';
+    element.style.transform = '';
+
+    switch (position) {
+
+      case 'bottom-right':
+        element.style.bottom = '0';
+        element.style.right = '0';
+        break;
+      case 'bottom-left':
+        element.style.bottom = '0';
+        element.style.left = '0';
+        break;
+      case 'top-right':
+        element.style.top = '0';
+        element.style.right = '0';
+        break;
+      case 'top-left':
+        element.style.top = '0';
+        element.style.left = '0';
+        break;
+      case 'bottom-center':
+        element.style.bottom = '0';
+        element.style.left = '50%';
+        element.style.transform = 'translateX(-50%)';
+        break;
+      case 'top-center':
+        element.style.top = '0';
+        element.style.left = '50%';
+        element.style.transform = 'translateX(-50%)';
+        break;
+      default:
+        element.style.bottom = '0';
+        element.style.right = '0';
+        break;
+    }
+  }
+
   window.addEventListener("message", (evt) => {
     const { data } = evt;
 
@@ -16,6 +59,7 @@
         .toString()
         .padStart(6, "0");
       unit.innerHTML = data.unit === "miles" ? "MI" : "KM";
+      elementPosition(data.position);
     } else if (data.type === "hide") {
       odometer.style.display = "none";
     }