Update 07.12.2022

C#/FiveM/TaxiJob/Output/nui/meter.css

@@ -45,8 +45,8 @@
     right: 10px;
     */
     position: relative;
-    top: 63%;
-    left: 36.5%;
+    top: 50%;
+    left: 40%;
     margin: auto;
 
     color: white;
@@ -58,6 +58,7 @@
     align-items: center;*/
 
     background-image: url("img/fare2.png");
+    transform: scale(0.7);
 }
 
 #fare {

C#/FiveM/TaxiJob/Output/settings.ini

@@ -3,7 +3,7 @@ DrawDistance 100.0
 VehicleSpawnPoint [911.108, -177.867, 74.283, 225.0]
 VehicleDeleter [908.317, -183.070, 73.201]
 VehicleModel taxi
-TimeToNpcJob 20000
+TimeToNpcJob 300000
 }
 
 {[Cloakroom]

C#/FiveM/TaxiJob/TaxiJob.Client/Extensions/EntityExtensions.cs

@@ -5,10 +5,6 @@ using CitizenFX.Core.Native;
 
 namespace TaxiJob.Client.Extensions {
     public static class EntityExtensions {
-
-
-        public static void SetDoorLockStatus(this Vehicle vehicle, LockStatus status) => API.SetVehicleDoorsLocked(vehicle.Handle, (int)status);
-        public static void SetNumberPlateText(this Vehicle vehicle, string plate) => API.SetVehicleNumberPlateText(vehicle.Handle, plate);
         
         public static void Freeze(this Entity entity, bool toggle) => API.FreezeEntityPosition(entity.Handle, toggle);
         public static void AsMissionEntry(this Entity entity) => API.SetEntityAsMissionEntity(entity.Handle, true, false);
@@ -29,6 +25,7 @@ namespace TaxiJob.Client.Extensions {
         }
 
         public static async Task Load(this Model model) {
+            if (model.IsLoaded) return;
             API.RequestModel((uint)model.Hash);
             while (!API.HasModelLoaded((uint)model.Hash)) {
                 await BaseScript.Delay(50);
@@ -36,15 +33,4 @@ namespace TaxiJob.Client.Extensions {
         }
 
     }
-
-    public enum LockStatus {
-        None,
-        Unlocked,
-        Locked,
-        LockForPlayers,
-        LockForInVehicle,
-        LockedInitially,
-        ForceShutDoors,
-        LockedButCanBeDamaged
-    }
 }

C#/FiveM/TaxiJob/TaxiJob.Client/Handler/CloakroomHandler.cs

@@ -7,8 +7,15 @@ using TaxiJob.Client.Extensions;
 
 namespace TaxiJob.Client.Handler {
     public static class CloakroomHandler {
+        public static Blip JobBlip;
 
         public static void OnTick() {
+            if (JobBlip == null) {
+                var pos = TaxiJob.Config.Cloakroom.Position;
+                JobBlip = new Blip(API.AddBlipForCoord(pos.X, pos.Y, pos.Y));
+                BaseScript.TriggerEvent("esx_jobs:setBlipStyle", JobBlip.Handle);
+            }
+            
             var dist = World.GetDistance(Game.PlayerPed.Position, TaxiJob.Config.Cloakroom.Position);
             if (dist >= TaxiJob.Config.DrawDistance) return;
 
@@ -47,8 +54,10 @@ namespace TaxiJob.Client.Handler {
                 var menu = new ESX.UI.Menu(dMenu);
 
                 if (data.current.name == "default") {
+                    JobHandler.StopJob(false);
                     BaseScript.TriggerEvent("skinchanger:loadSkin", skins.first);
                     TaxiJob.InDuty = false;
+                    TaxiJob.SetServiceStatus(false);
                 }
 
                 if (data.current.name == "work") {

C#/FiveM/TaxiJob/TaxiJob.Client/Handler/JobHandler.cs

@@ -1,38 +1,61 @@
 using System;
+using System.Collections.Generic;
 using System.Linq;
 using CitizenFX.Core;
 using CitizenFX.Core.Native;
 using CitizenFX.Core.UI;
 using Nexd.ESX.Client;
 using TaxiJob.Client.Extensions;
+using TaxiJob.Shared;
 
 namespace TaxiJob.Client.Handler {
     public static class JobHandler {
         private static bool _vehicleSpawned;
-        private static Vehicle _vehicle;
         private static Blip _vehicleBlip;
         private static Blip _taskBlip;
         
         private static int _lastJob;
-        private static bool _inJob;
-        private static bool _isNpcJob;
         private static bool _arrived;
         private static bool _lookStarted;
         private static Ped _npc;
         private static int _nextSpeech;
 
+        private static int _lastUpdate = 0;
+        private static Vector3 _lastPos = Vector3.Zero;
+        private static int _requestTime = 0;
+
+        public static Vehicle Vehicle;
+        public static bool InJob;
+        public static bool PendingJob;
+        public static bool IsNpcJob;
+        public static Vector3 Destination;
+        public static string JobId;
+
+        public static void RequestJob(Vector3 destination, string jobId) {
+            _requestTime = Game.GameTime;
+            Destination = destination;
+            JobId = jobId;
+            PendingJob = true;
+            TaxiJob.SetServiceStatus(false);
+        }
+
         public static void OnTick() {
             HandleVehicleSpawner();
             HandleVehicleDeleter();
             HandleVehicleBlip();
             HandleNpcJob();
             HandleJob();
+            HandleJobAcception();
             
-            if (!_inJob && _vehicleSpawned && _vehicleBlip == null && Game.GameTime - _lastJob >= TaxiJob.Config.TimeToNpcJob) {
-                StartNpcJob();
+            if (!InJob && _vehicleSpawned && _vehicleBlip == null && Game.GameTime - _lastJob >= TaxiJob.Config.TimeToNpcJob && !PendingJob) {
+                IsNpcJob = true;
+                _requestTime = Game.GameTime;
+                PendingJob = true;
+                TaxiJob.SetServiceStatus(false);
+                Game.PlaySound("SELECT", "HUD_FRONTEND_DEFAULT_SOUNDSET");
             }
             
-            if (Game.PlayerPed.IsDead && _inJob) StopJob();
+            if (Game.PlayerPed.IsDead && InJob) StopJob();
         }
 
         private static async void HandleVehicleSpawner() {
@@ -45,34 +68,40 @@ namespace TaxiJob.Client.Handler {
                 Screen.DisplayHelpTextThisFrame("Drücke ~INPUT_CONTEXT~ um das Taxi aus der Garage zu holen");
 
                 if (Game.IsControlJustReleased(0, Control.Context)) {
+                    if (!await TaxiJob.ServerCallback<bool>("esx_license:hasLicense", "drive")) {
+                        Notify.Error("Du hast keinen Führerschein!");
+                        return;
+                    }
+                    
                     if (!ESX.Game.IsSpawnPointClear(TaxiJob.Config.VehicleSpawnPoint.ToVector3(), 5.0)) {
                         Notify.Error("Ein Fahrzeug blockiert den Spawnpunkt!");
                         return;
                     }
                     
-                    _vehicle = await TaxiJob.SpawnVehicle(API.GetHashKey(TaxiJob.Config.VehicleModel), TaxiJob.Config.VehicleSpawnPoint);
-                    _vehicle.SetNumberPlateText(await TaxiJob.GeneratePlate());
-                    BaseScript.TriggerEvent("craftix:refuelVehicle", _vehicle.Handle);
-                    Game.PlayerPed.SetIntoVehicle(_vehicle, VehicleSeat.Driver);
+                    Vehicle = await TaxiJob.SpawnVehicle(API.GetHashKey(TaxiJob.Config.VehicleModel), TaxiJob.Config.VehicleSpawnPoint);
+                    Vehicle.Mods.LicensePlate = await TaxiJob.GeneratePlate();
+                    BaseScript.TriggerEvent("craftix:refuelVehicle", Vehicle.Handle);
+                    Game.PlayerPed.SetIntoVehicle(Vehicle, VehicleSeat.Driver);
                     _lastJob = Game.GameTime;
                     _vehicleSpawned = true;
+                    TaxiJob.SetServiceStatus(true);
                 }
             }
         }
 
         private static void HandleVehicleDeleter() {
             if (_vehicleSpawned) {
-                if (!_vehicle.Exists() || _vehicle.IsDead) {
+                if (!Vehicle.Exists() || Vehicle.IsDead) {
                     _vehicleBlip?.Delete();
                     StopJob();
                     _vehicleSpawned = false;
                     _vehicleBlip = null;
-                    _vehicle = null;
+                    Vehicle = null;
                     return;
                 }
             }
             
-            if (!_vehicleSpawned || !Game.PlayerPed.IsInVehicle(_vehicle)) return;
+            if (!_vehicleSpawned || !Game.PlayerPed.IsInVehicle(Vehicle)) return;
             World.DrawMarker(MarkerType.HorizontalCircleSkinny, TaxiJob.Config.VehicleDeleter, Vector3.Zero, Vector3.Zero, new Vector3(3.7f, 3.7f, 0.2f), TaxiJob.Config.VehicleSpawner.Color);
 
             var dist = World.GetDistance(Game.PlayerPed.Position, TaxiJob.Config.VehicleDeleter);
@@ -80,19 +109,21 @@ namespace TaxiJob.Client.Handler {
             
             Screen.DisplayHelpTextThisFrame("Drücke ~INPUT_CONTEXT~ um das Auto in die Garage zu stellen");
             if (Game.IsControlJustReleased(0, Control.Context)) {
-                _vehicle?.Delete();
+                Vehicle?.Delete();
                 _vehicleBlip?.Delete();
                 StopJob();
                 _vehicleSpawned = false;
                 _vehicleBlip = null;
-                _vehicle = null;
+                Vehicle = null;
+                Taximeter.Reset();
+                TaxiJob.SetServiceStatus(false);
             }
         }
 
         private static void HandleVehicleBlip() {
             if (!_vehicleSpawned) return;
             
-            var inVehicle = Game.PlayerPed.IsInVehicle(_vehicle);
+            var inVehicle = Game.PlayerPed.IsInVehicle(Vehicle);
             if (inVehicle && _vehicleBlip != null) {
                 _lastJob = Game.GameTime;
                 _vehicleBlip?.Delete();
@@ -106,25 +137,50 @@ namespace TaxiJob.Client.Handler {
                 _vehicleBlip.Name = "Dienstwagen";
                 API.SetBlipDisplay(_vehicleBlip.Handle, 4);
             }
+
+            if (inVehicle && Game.IsControlJustReleased(0, Control.SelectCharacterFranklin)) {
+                if (TaxiMenuHandler.MenuOpen) TaxiMenuHandler.CloseMenu();
+                else TaxiMenuHandler.OpenMenu();
+            }
+            
+            if (inVehicle) HandleTaximeter();
         }
 
         private static void HandleJob() {
-            if (!_inJob || _isNpcJob) return;
+            if (!InJob || IsNpcJob) return;
 
-            if (!_arrived) {
+            if (!_arrived && _taskBlip != null) {
                 if (!Game.PlayerPed.IsInVehicle()) return;
-                var dist = World.GetDistance(Game.PlayerPed.Position, _taskBlip.Position);
+                var dist = World.GetDistance(Game.PlayerPed.CurrentVehicle.Position, _taskBlip.Position);
                 
                 if (dist <= 30.0 && Game.PlayerPed.CurrentVehicle.Speed <= 1) {
                     _taskBlip.Delete();
                     _taskBlip = null;
-                    _arrived = true;
                 }
             }
+
+            if (!_arrived && Game.PlayerPed.CurrentVehicle?.PassengerCount != 0) {
+                _arrived = true;
+                Taximeter.ActivateForClient(true);
+                
+                _taskBlip?.Delete();
+                _taskBlip = null;
+
+                Taximeter.Attributes.CurrentFare = "000.00";
+                Taximeter.Attributes.DistanceTraveled = 0;
+                Taximeter.Pause(false);
+            }
+
+            if (_arrived && Game.PlayerPed.CurrentVehicle?.PassengerCount == 0) {
+                var price = (int)Math.Round(Convert.ToSingle(Taximeter.Attributes.CurrentFare) + 0.5f);
+                BaseScript.TriggerServerEvent("taxijob:server:bill", price, Taximeter.CurrentClient);
+                BaseScript.TriggerServerEvent("taxijob:server:payout", (int)Math.Floor(price * 0.9f));
+                StopJob();
+            }
         }
 
         private static void HandleNpcJob() {
-            if (!_inJob || !_isNpcJob) return;
+            if (!InJob || !IsNpcJob) return;
             
 
             if (!_arrived) {
@@ -172,20 +228,68 @@ namespace TaxiJob.Client.Handler {
                 }
 
                 if (dist <= 30.0 && Game.PlayerPed.CurrentVehicle.Speed <= 1) {
-                    _inJob = false;
+                    InJob = false;
                     _npc.Task.LeaveVehicle(_npc.CurrentVehicle, true);
                     _npc.PlayAmbientSpeech("GENERIC_THANKS");
                     _npc.MarkAsNoLongerNeeded();
                     _npc = null;
+                    
+                    var price = (int)Math.Floor(Convert.ToSingle(Taximeter.Attributes.CurrentFare) * 0.9f);
                     StopJob();
-                    Notify.Success("Auftrag beendet!");
+                    BaseScript.TriggerServerEvent("taxijob:server:payout", price);
+                    Notify.Success($"Auftrag beendet!\nDu hast ${price} bekommen.");
                 }
             }
         }
+        
+        private static void HandleTaximeter() {
+            if (!InJob || Taximeter.Attributes.MeterPause || Taximeter.Attributes.DistanceTraveled >= 15000) return;
+            var current = Game.GameTime;
+            if (current - _lastUpdate < 2000) return;
+            _lastUpdate = current;
+            var pos = Game.PlayerPed.CurrentVehicle.Position;
+            if (_lastPos == Vector3.Zero) _lastPos = pos;
+            Taximeter.CalculatePrice(_lastPos, pos);
+            _lastPos = pos;
+        }
+
+        private static void HandleJobAcception() {
+            if (!PendingJob) return;
+            Screen.DisplayHelpTextThisFrame("Neuer Auftrag!~n~~INPUT_SELECT_WEAPON_UNARMED~ Annehmen~n~~INPUT_SELECT_WEAPON_MELEE~ Ablehnen");
+
+            if (Game.IsControlJustReleased(0, Control.SelectWeaponUnarmed)) {
+                if (IsNpcJob) StartNpcJob();
+                else {
+                    BaseScript.TriggerServerEvent("taxijob:server:accept", true, JobId);
+                    StartJob();
+                }
+            }
+
+            if (Game.IsControlJustReleased(0, Control.SelectWeaponMelee) || Game.GameTime - _requestTime > 30000) {
+                BaseScript.TriggerServerEvent("taxijob:server:accept", false, JobId);
+                StopJob();
+            }
+        }
+
+        public static void StartJob() {
+            TaxiMenuHandler.CloseMenu();
+            Taximeter.Reset(Taximeter.Attributes.MeterVisible);
+            var dest = Destination;
+            StopJob(false);
+            TaxiJob.SetServiceStatus(false);
+                    
+            _taskBlip = new Blip(API.AddBlipForCoord(dest.X, dest.Y, dest.Z));
+            _taskBlip.Name = "Kunde";
+            _taskBlip.ShowRoute = true;
+
+            InJob = true;
+        }
 
         private static async void StartNpcJob() {
-            Notify.Info("Neuer Auftrag!");
-            StopJob();
+            TaxiMenuHandler.CloseMenu();
+            Taximeter.Reset(Taximeter.Attributes.MeterVisible);
+            StopJob(false);
+            TaxiJob.SetServiceStatus(false);
 
             var target = TaxiJob.Config.Positions.Random();
             _taskBlip = new Blip(API.AddBlipForCoord(target.X, target.Y, target.Z));
@@ -201,11 +305,13 @@ namespace TaxiJob.Client.Handler {
             _npc.SetBlockingOfNonTemporaryEvents(true);
             _npc.IsInvincible = true;
             _npc.Task.StandStill(int.MaxValue);
-            _isNpcJob = true;
-            _inJob = true;
+            IsNpcJob = true;
+            InJob = true;
+            
+            Taximeter.Pause(false);
         }
 
-        private static void StopJob() {
+        public static void StopJob(bool updateService = true) {
             _taskBlip?.Delete();
             _taskBlip = null;
             
@@ -213,12 +319,19 @@ namespace TaxiJob.Client.Handler {
             _npc?.MarkAsNoLongerNeeded();
             _npc = null;
             
-            _inJob = false;
-            _isNpcJob = false;
+            InJob = false;
+            IsNpcJob = false;
             _arrived = false;
             _lookStarted = false;
             _lastJob = Game.GameTime;
+            PendingJob = false;
+            Destination = Vector3.Zero;
+            JobId = null;
+            
+            Taximeter.Pause(true);
+            if (updateService) TaxiJob.SetServiceStatus(true);
+            Taximeter.ActivateForClient(false);
         }
-        
+
     }
 }

C#/FiveM/TaxiJob/TaxiJob.Client/Handler/NpcTaxiHandler.cs

@@ -0,0 +1,146 @@
+using System;
+using CitizenFX.Core;
+using CitizenFX.Core.Native;
+using CitizenFX.Core.UI;
+using TaxiJob.Client.Extensions;
+
+namespace TaxiJob.Client.Handler {
+    public static class NpcTaxiHandler {
+        public static bool IsCustomer;
+        private static Vehicle _taxi;
+        private static Blip _blip;
+        private static Ped _driver;
+
+        private static bool _arrived;
+        private static bool _hasDestination;
+        private static Vector3 _destination;
+        private static bool _atDestination;
+        private static int _lastUpdate;
+        private static Vector3 _lastPosition;
+        private static bool _pause;
+
+        public static async void StartNpcJob() {
+            if (IsCustomer) return;
+            await BaseScript.Delay(5000);
+            Notify.Info("Ein Taxi ist auf dem Weg zu ihnen!");
+            var spawn = GetDistantSpawn(700);
+            
+            // Spawn Taxi
+            var model = (Model)VehicleHash.Taxi;
+            await model.Load();
+            _taxi = await World.CreateVehicle(model, spawn.ToVector3(), spawn.W);
+            _taxi.Mods.LicensePlate = await TaxiJob.GeneratePlate();
+            _taxi.AsMissionEntry();
+            TaxiJob.SetFuel(_taxi, 100.0f);
+            
+            // Blip
+            _blip = new Blip(API.AddBlipForEntity(_taxi.Handle));
+            _blip.Sprite = (BlipSprite)198;
+            _blip.Color = BlipColor.Yellow;
+            _blip.Name = "Taxi";
+            
+            // Driver
+            model = new Model(-573920724);
+            await model.Load();
+            _driver = await World.CreatePed(model, spawn.ToVector3());
+            _driver.SetIntoVehicle(_taxi, VehicleSeat.Driver);
+            _driver.CanBeTargetted = false;
+            _driver.AsMissionEntry();
+            
+            // Drive to Player
+            _driver.Task.DriveTo(_taxi, World.GetNextPositionOnStreet(Game.PlayerPed.Position), 10f, 20f, 262975);
+            Taximeter.Reset();
+            _lastPosition = _taxi.Position;
+            Taximeter.Pause(false);
+            _arrived = false;
+            _pause = false;
+            IsCustomer = true;
+        }
+
+        public static void OnTick() {
+            if (!_driver.IsInVehicle(_taxi)) {
+                TaxiJob.SetFuel(_taxi, 0.0f);
+                IsCustomer = false;
+                _blip?.Delete();
+                _blip = null;
+                Taximeter.Reset();
+            }
+            
+            if (!_arrived && Game.PlayerPed.IsInVehicle(_taxi)) {
+                _arrived = true;
+                _atDestination = false;
+                _hasDestination = false;
+                _driver.PlayAmbientSpeech("GENERIC_HI");
+                _blip?.Delete();
+                _blip = null;
+                Taximeter.SetVisible(true);
+            }
+
+            if (_arrived && !_hasDestination && World.WaypointPosition != Vector3.Zero) {
+                _hasDestination = true;
+                _destination = World.GetNextPositionOnStreet(World.WaypointPosition);
+                _driver.Task.DriveTo(_taxi, _destination, 10f, 20f, 262975);
+            }
+
+            if (_hasDestination && !_atDestination && World.GetDistance(_taxi.Position, _destination) <= 10.5f && !Game.PlayerPed.IsInVehicle(_taxi)) {
+                _atDestination = true;
+                
+                var price = (int)Math.Round(Convert.ToSingle(Taximeter.Attributes.CurrentFare) + 0.5f);
+                BaseScript.TriggerServerEvent("taxijob:server:bill", price, Game.Player.ServerId);
+                
+                Taximeter.Reset();
+            }
+
+            if (_atDestination && World.GetDistance(_taxi.Position, Game.PlayerPed.Position) >= 5) {
+                _taxi.MarkAsNoLongerNeeded();
+                _driver.MarkAsNoLongerNeeded();
+
+                _hasDestination = false;
+                _destination = Vector3.Zero;
+                _atDestination = false;
+                _taxi = null;
+                _driver = null;
+                IsCustomer = false;
+            }
+
+            var current = Game.GameTime;
+            if (current - _lastUpdate >= 2000) {
+                _lastUpdate = current;
+                Taximeter.CalculatePrice(_lastPosition, _taxi.Position);
+                _lastPosition = _taxi.Position;
+            }
+            
+            if (!(_hasDestination && !_atDestination)) return;
+            
+            Screen.DisplayHelpTextThisFrame("Drücke ~INPUT_VEH_SHUFFLE~ um die Fahrt " + (_pause ? "fortzusetzen" : "zu pausieren"));
+            if (Game.IsControlJustReleased(0, Control.VehicleShuffle)) {
+                if (_pause) {
+                    if (World.WaypointPosition != Vector3.Zero) _destination = World.GetNextPositionOnStreet(World.WaypointPosition);
+                    _driver?.Task.DriveTo(_taxi, _destination, 10f, 20f, 262975);
+                }
+                else {
+                    _driver?.Task.DriveTo(_taxi, _taxi.Position + (_taxi.ForwardVector * 20f), 10f, 5f, 262975);
+                }
+                _pause = !_pause;
+            }
+
+            if (!Game.PlayerPed.IsInVehicle(_taxi)) {
+                _atDestination = true;
+                
+                var price = (int)Math.Round(Convert.ToSingle(Taximeter.Attributes.CurrentFare) + 0.5f);
+                BaseScript.TriggerServerEvent("taxijob:server:bill", price, Game.Player.ServerId);
+                
+                Taximeter.Reset();
+            }
+        }
+
+        private static Vector4 GetDistantSpawn(int distance) {
+            Vector3 player = Game.PlayerPed.Position;
+            Vector3 location = Vector3.Zero;
+            float heading = 0f;
+            int unused = 0;
+            API.GetNthClosestVehicleNodeWithHeading(player.X, player.Y, player.Z, distance, ref location, ref heading, ref unused, 9, 3.0f, 2.5f);
+            return new Vector4(location, heading);
+        }
+    }
+}

C#/FiveM/TaxiJob/TaxiJob.Client/Handler/TaxiMenuHandler.cs

@@ -0,0 +1,129 @@
+using System.Collections.Generic;
+using System.Linq;
+using CitizenFX.Core;
+using CitizenFX.Core.Native;
+using Nexd.ESX.Client;
+
+namespace TaxiJob.Client.Handler {
+    public class TaxiMenuHandler {
+        public static bool MenuOpen = false;
+        private static ESX.UI.Menu _currentMenu;
+
+        public static void OpenMenu() {
+            var elements = new List<ESX.UI.MenuElement>();
+
+            if (JobHandler.InJob) {
+                elements.Add(new ESX.UI.MenuElement {
+                    label = "Auftrag beenden",
+                    name = "cancel_job"
+                });
+            } else if (Game.PlayerPed.CurrentVehicle?.PassengerCount > 0) {
+                elements.Add(new ESX.UI.MenuElement {
+                    label = "Auftrag starten",
+                    name = "start_job"
+                });
+            }
+            
+            elements.Add(new ESX.UI.MenuElement {
+                label = Taximeter.Attributes.MeterVisible ? "Taximeter aus" : " Taximeter an",
+                name = "toggle_taximeter"
+            });
+
+            if (Taximeter.Attributes.MeterVisible) {
+                elements.AddRange(new [] {
+                    new ESX.UI.MenuElement {
+                        label = Taximeter.Attributes.MeterPause ? "Taximeter fortsetzen" : "Taximeter anhalten",
+                        name = "pause_taximeter"
+                    },
+                    new ESX.UI.MenuElement {
+                        label = "Taximeter zurücksetzen",
+                        name = "reset_taximeter"
+                    }
+                });
+
+                if (!JobHandler.IsNpcJob) {
+                    elements.Add(new ESX.UI.MenuElement {
+                        label = "Tarif ändern",
+                        name = "change_rate"
+                    });
+                }
+            }
+            
+            var menuData = new ESX.UI.MenuData {
+                align = "top-left",
+                title = "Taxi",
+                elements = elements
+            };
+
+            ESX.UI.Menu.CloseAll();
+            _currentMenu = ESX.UI.Menu.Open("default", API.GetCurrentResourceName(), "taxi_menu", menuData, (dData, dMenu) => {
+                var data = new ESX.UI.MenuData(dData);
+                var menu = new ESX.UI.Menu(dMenu);
+
+                if (data.current.name == "cancel_job") {
+                    JobHandler.StopJob();
+                    menu.Close();
+                }
+
+                if (data.current.name == "start_job") {
+                    if (!Game.PlayerPed.IsInVehicle(JobHandler.Vehicle)) return;
+                    var passanger = JobHandler.Vehicle.Passengers.First(ped => ped?.Handle != 0);
+                    Taximeter.CurrentClient = API.GetPlayerServerId(API.NetworkGetPlayerIndexFromPed(passanger.Handle));
+                    JobHandler.StartJob();
+                }
+
+                if (data.current.name == "toggle_taximeter") {
+                    Taximeter.Toggle();
+                    OpenMenu();
+                }
+
+                if (data.current.name == "pause_taximeter") {
+                    Taximeter.Pause();
+                    OpenMenu();
+                }
+
+                if (data.current.name == "reset_taximeter") {
+                    Taximeter.Reset(Taximeter.Attributes.MeterVisible);
+                }
+
+                if (data.current.name == "change_rate") {
+                    OpenRateMenu();
+                }
+                
+            }, (dData, dMenu) => {
+                new ESX.UI.Menu(dMenu).Close();
+                MenuOpen = false;
+            });
+
+            MenuOpen = true;
+        }
+
+        public static void CloseMenu() {
+            if (!MenuOpen) return;
+            _currentMenu.Close();
+            MenuOpen = false;
+        }
+
+        public static void OpenRateMenu() {
+            var rates = new [] { 10, 15, 20 };
+
+            var menuData = new ESX.UI.MenuData {
+                align = "top-left",
+                title = "Taxi - Tarif",
+                elements = rates.Select(rate => new ESX.UI.MenuElement {
+                    label = rate + "$",
+                    name = rate
+                }).ToList()
+            };
+
+            ESX.UI.Menu.Open("default", API.GetCurrentResourceName(), "taxi_rate_menu", menuData, (dData, dMenu) => {
+                Taximeter.Attributes.RateAmount = (int)dData.current.name;
+                Taximeter.Update();
+                new ESX.UI.Menu(dMenu).Close();
+            }, (dData, dMenu) => {
+                new ESX.UI.Menu(dMenu).Close();
+            });
+        }
+        
+    }
+}

C#/FiveM/TaxiJob/TaxiJob.Client/Handler/Taximeter.cs

@@ -1,44 +1,100 @@
-using CitizenFX.Core;
+using System.Dynamic;
+using CitizenFX.Core;
+using CitizenFX.Core.Native;
 
 namespace TaxiJob.Client.Handler {
     public static class Taximeter {
-        public static TaximeeterAttributes Attributes { get; private set; } = new TaximeeterAttributes();
+        public static TaximeterAttributes Attributes { get; private set; } = new TaximeterAttributes();
+        public static int CurrentClient;
+        private static bool _forClient;
 
-        public static void Open() {
-            Attributes.MeterVisible = true;
+        public static void Toggle() {
+            Attributes.MeterVisible = !Attributes.MeterVisible;
             Update();
         }
 
-        public static void Close() {
-            Attributes.MeterVisible = false;
+        public static void SetVisible(bool visible) {
+            Attributes.MeterVisible = visible;
             Update();
         }
 
+        public static void Pause(bool pause) {
+            Attributes.MeterPause = pause;
+            Update();
+        }
+
+        public static void Pause() {
+            Pause(!Attributes.MeterPause);
+        }
+
         public static void Update() {
             BaseScript.TriggerEvent("taxijob:client:nuimessage", Attributes.ToString());
+            
+            if (CurrentClient != 0) BaseScript.TriggerServerEvent("taxijob:server:sync_meter", Attributes, CurrentClient, _forClient);
         }
 
-        public static void Reset() {
-            Attributes = new TaximeeterAttributes();
+        public static void Reset(bool visible = false) {
+            Attributes = new TaximeterAttributes();
+            Attributes.MeterVisible = visible;
+            Update();
+        }
+
+        public static void ActivateForClient(bool activate) {
+            if (CurrentClient == 0) return;
+            
+            _forClient = activate;
+            BaseScript.TriggerServerEvent("taxijob:server:sync_meter", Attributes, CurrentClient, _forClient);
+        }
+
+        public static void Sync(ExpandoObject attributes, bool active) {
+            Attributes = new TaximeterAttributes(attributes);
+            Attributes.MeterVisible = active;
+            Update();
+        }
+
+        public static void CalculatePrice(Vector3 start, Vector3 end) {
+            if (Attributes.RateType != "distance" || Attributes.RateAmount == 0) return;
+
+            float dist = API.CalculateTravelDistanceBetweenPoints(start.X, start.Y, start.Z, end.X, end.Y, end.Z);
+            Attributes.DistanceTraveled += dist;
+
+            float fare = Attributes.FareOnStop + (Attributes.DistanceTraveled / 1609.34f) * Attributes.RateAmount;
+            Attributes.CurrentFare = (fare < 99.99f ? "0" : "") + (fare < 9.99f ? "0" : "") + fare.ToString("N2");
+            
             Update();
         }
         
     }
-        
-    public sealed class TaximeeterAttributes {
+    
+    public sealed class TaximeterAttributes {
         public bool MeterVisible { get; set; } = false;
         public string RateType { get; set; } = "distance";
-        public int RateAmount { get; set; } = 5;
+        public float RateAmount { get; set; } = 10;
         public string CurrencyPrefix { get; set; } = "$";
-        public string RateSuffix { get; set; } = "/km";
-        public float CurrentFare { get; set; } = 0.0f;
-        public int DistanceTraveled { get; set; } = 0;
-        public int FareOnStop { get; set; } = 0;
+        public string RateSuffix { get; set; } = "/mi";
+        public string CurrentFare { get; set; } = "000.00";
+        public float DistanceTraveled { get; set; } = 0;
+        public float FareOnStop { get; set; } = 0;
         public bool MeterPause { get; set; } = true;
         public bool IsMoving { get; set; } = true;
 
         public override string ToString() {
             return $"{{\"meterVisible\": {MeterVisible.ToString().ToLower()}, \"rateType\": \"{RateType}\", \"rateAmount\": {RateAmount}, \"currencyPrefix\": \"{CurrencyPrefix}\", \"rateSuffix\": \"{RateSuffix}\", \"currentFare\": \"{CurrentFare}\", \"distanceTraveled\": {DistanceTraveled}, \"fareOnStop\": {FareOnStop}, \"meterPause\": {MeterPause.ToString().ToLower()}, \"isMoving\": {IsMoving.ToString().ToLower()} }}";
         }
+        
+        public TaximeterAttributes() {}
+
+        public TaximeterAttributes(dynamic data) {
+            MeterVisible = data.MeterVisible;
+            RateType = data.RateType;
+            RateAmount = data.RateAmount;
+            CurrencyPrefix = data.CurrencyPrefix;
+            RateSuffix = data.RateSuffix;
+            CurrentFare = data.CurrentFare;
+            DistanceTraveled = data.DistanceTraveled;
+            FareOnStop = data.FareOnStop;
+            MeterPause = data.MeterPause;
+            IsMoving = data.IsMoving;
+        }
     }
 }

C#/FiveM/TaxiJob/TaxiJob.Client/TaxiJob.Client.csproj

@@ -50,12 +50,13 @@
         <Reference Include="System.Xml" />
     </ItemGroup>
     <ItemGroup>
-        <Compile Include="Extensions\ArrayExtensions.cs" />
         <Compile Include="Extensions\TasksExtensions.cs" />
         <Compile Include="Extensions\VectorExtensions.cs" />
         <Compile Include="Extensions\EntityExtensions.cs" />
         <Compile Include="Handler\CloakroomHandler.cs" />
         <Compile Include="Handler\JobHandler.cs" />
+        <Compile Include="Handler\NpcTaxiHandler.cs" />
+        <Compile Include="Handler\TaxiMenuHandler.cs" />
         <Compile Include="Handler\Taximeter.cs" />
         <Compile Include="Notify.cs" />
         <Compile Include="Properties\AssemblyInfo.cs" />

C#/FiveM/TaxiJob/TaxiJob.Client/TaxiJob.cs

@@ -20,7 +20,12 @@ namespace TaxiJob.Client {
 
         public TaxiJob() {
             _instance = this;
-            EventHandlers["onClientResourceStart"] += new Action<string>(OnStart); //esx:playerLoaded
+            EventHandlers["esx:playerLoaded"] += new Action(OnStart);
+            EventHandlers["onResourceStop"] += new Action<string>(OnStop);
+            EventHandlers["taxijob:client:job"] += new Action<Vector3, string>(JobHandler.RequestJob);
+            EventHandlers["taxijob:client:npc"] += new Action(NpcTaxiHandler.StartNpcJob);
+            EventHandlers["taxijob:client:sync_meter"] += new Action<ExpandoObject, bool>(Taximeter.Sync);
+            EventHandlers["taxijob:client:set_passanger"] += new Action<int>(client => Taximeter.CurrentClient = client);
         }
         
         public static Task<T> ServerCallback<T>(string name, [Optional] dynamic args) {
@@ -56,11 +61,34 @@ namespace TaxiJob.Client {
 
             return source.Task;
         }
+        
+        public static Task<string> DisplayTextDialog(string placeholder) {
+            var source = new TaskCompletionSource<string>();
+
+            ESX.UI.Menu.Open("dialog", API.GetCurrentResourceName(), "test_dialog", new ESX.UI.MenuData() {
+                title = placeholder,
+                type = "default",
+                align = "center"
+            }, (dData, dMenu) => {
+                source.TrySetResult(dData.value as string);
+                ESX.UI.Menu.Close(new ESX.UI.Menu(dMenu));
+            }, (dData, dMenu) => {
+                source.TrySetResult(null);
+                ESX.UI.Menu.Close(new ESX.UI.Menu(dMenu));
+            });
+
+            return source.Task;
+        }
 
         public static async Task<string> GeneratePlate() {
             var plate = await _instance.Exports["esx_vehicleshop"].GeneratePlate();
             return Convert.ToString(plate);
         }
+
+        public static void SetFuel(Vehicle vehicle, float level) {
+            _instance.Exports["LegacyFuel"].SetFuel(vehicle.Handle, level);
+        }
+
         public static void PrintDynamic(dynamic data, string prefix = "") {
             foreach (var element in (data as IDictionary<string, object>)) {
                 Debug.WriteLine($"{prefix}{element.Key}: {element.Value}");
@@ -75,21 +103,32 @@ namespace TaxiJob.Client {
             }
         }
 
-        [Command("taximeter")]
-        private void OnCommand() {
-            Taximeter.Attributes.MeterVisible = !Taximeter.Attributes.MeterVisible;
-            Taximeter.Update();
+        public static void SetServiceStatus(bool onService) {
+            TriggerServerEvent("taxijob:server:service", onService);
         }
 
-        private void OnStart(string resourceName) {
-            if (API.GetCurrentResourceName() != resourceName) return;
+        private void OnStart() {
             Tick += async () => {
-                if (ESX.GetPlayerData().job.name != "taxi") return;
+                if (NpcTaxiHandler.IsCustomer) NpcTaxiHandler.OnTick();
+                if (Taximeter.Attributes.MeterVisible && !Game.PlayerPed.IsInVehicle()) Taximeter.Reset();
+
+                if (ESX.GetPlayerData().job.name != "taxi") {
+                    CloakroomHandler.JobBlip?.Delete();
+                    CloakroomHandler.JobBlip = null;
+                    return;
+                }
                 CloakroomHandler.OnTick();
                 
                 if (!InDuty) return;
                 JobHandler.OnTick();
             };
         }
+
+        private void OnStop(string resourceName) {
+            if (API.GetCurrentResourceName() != resourceName) return;
+            TriggerServerEvent("taxijob:server:accept", false, JobHandler.JobId);
+            JobHandler.StopJob(false);
+            SetServiceStatus(false);
+        }
     }
 }

C#/FiveM/TaxiJob/TaxiJob.Client/bin/Debug/client.lua

@@ -0,0 +1,3 @@
+RegisterNetEvent('taxijob:client:nuimessage', function(data)
+    SendNUIMessage({type = 'update_meter', attributes = data});
+end)

C#/FiveM/TaxiJob/TaxiJob.Client/bin/Debug/fxmanifest.lua

@@ -0,0 +1,36 @@
+fx_version 'cerulean'
+games { 'gta5' }
+
+--	details
+author 'Leon Hoppe'
+description "Mosley's"
+version '2.0'
+
+ui_page "nui/meter.html"
+
+files {
+    "nui/digital-7.regular.ttf",
+    "nui/OPTICalculator.otf",
+    "nui/meter.html",
+    "nui/meter.css",
+    "nui/meter.js",
+    'nui/img/phone.png',
+    'nui/img/fare1.png',
+    'nui/img/fare2.png',
+    'nui/img/redlight.png',
+    'nui/img/greenlight.png',
+    'nui/img/offlight.png',
+    
+    'Newtonsoft.Json.dll',
+    'TaxiJob.Shared.dll',
+    'settings.ini'
+}
+
+client_scripts {
+    'client.lua',
+    'TaxiJob.Client.net.dll'
+}
+
+server_scripts {
+    'TaxiJob.Server.net.dll'
+}

C#/FiveM/TaxiJob/TaxiJob.Client/bin/Debug/nui/meter.css

@@ -0,0 +1,267 @@
+@font-face {
+    /*font-family: "Digital-7";
+    src: url( "digital-7.regular.ttf" );*/
+    font-family: "OPTICalculator";
+    src: url("OPTICalculator.otf");
+}
+
+@-webkit-keyframes blink {
+    0% {
+        opacity: 1;
+    }
+    49% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+@-webkit-keyframes blink2 {
+    0% {
+        opacity: 1;
+    }
+    49% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+/* Police Radar */
+#meter {
+    width: 505px;
+    height: 162px;
+    /*
+    position: absolute;
+    bottom: 0px;
+    right: 10px;
+    */
+    position: relative;
+    top: 63%;
+    left: 36.5%;
+    margin: auto;
+
+    color: white;
+    border-radius: 10px;
+
+    /*display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;*/
+
+    background-image: url("img/fare2.png");
+}
+
+#fare {
+    /*
+    width: 370px;
+    height: 120px;
+    */
+    width: 455px;
+    height: 120px;
+
+    /*
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    margin: auto;
+    */
+    position: relative;
+    /*bottom: 2%;
+    right: 2%;*/
+    left: 0.2%;
+    bottom: 7%;
+    margin: auto;
+
+    color: white;
+    border-radius: 10px;
+
+    display: grid;
+    grid-column-gap: 33px;
+    grid-row-gap: 40px;
+    /*grid-template-columns: repeat(2, 3fr) repeat(3, 0.5fr) 30% 30%;*/
+    grid-template-columns: 40% 28.5% 18%;
+    /*background-image: url("img/fare2.png");*/
+    padding: 2%;
+}
+
+/*|
+#fare .label {
+	display: grid;
+	grid-area: label;
+}
+
+#fare .container {
+	display: grid;
+	grid-template-columns: 100%;
+	grid-template-rows: 75% 25%;
+	grid-template-areas:
+		"meter-field"
+		"label";
+		margin-top: 35px;
+		margin-bottom: 30px;
+}*/
+#fare .label {
+    display: grid;
+    grid-area: label;
+}
+
+#fare .container {
+    /*position: relative;
+    left: 20%;*/
+    display: grid;
+    grid-template-columns: 100%; /*50*/
+    grid-template-rows: 85% 15%;
+    grid-row-gap: 16%;
+    grid-template-areas:
+		"meter-field"
+		"label";
+    margin-top: 35px;
+    margin-bottom: 30px;
+}
+
+#baselight {
+    width: 18px; /*50px*/
+    height: 18px;
+    position: relative;
+    right: 40.1%;
+    bottom: 22.5%;
+    margin: auto;
+    background-size: 100%;
+    background-image: url("img/offlight.png");
+}
+
+#greenlight {
+    /*width: 50px;
+    height: 50px;*/
+    position: relative;
+    /*
+    left: 1.5%;
+    bottom: 7%;*/
+    margin: auto;
+    /*background-image: url("img/greenlight.png");*/
+    -webkit-animation: blink 1s;
+    -webkit-animation-iteration-count: infinite;
+}
+
+#redlight {
+    /*width: 50px;
+    height: 50px;*/
+    position: relative;
+    /*
+    left: 1.5%;
+    bottom: 7%;*/
+    margin: auto;
+    /*background-image: url("img/greenlight.png");*/
+    -webkit-animation: blink 4s;
+    -webkit-animation-iteration-count: infinite;
+}
+
+/*
+#contenedor1{
+	width: 200px;
+	height: 50px;
+	position: relative;
+	left: 5%;
+	bottom: -2%;
+	display: grid;
+	grid-template-columns: 100%; /*50*//*
+	grid-template-rows: 85% 15%;
+	grid-template-areas:
+		"meter-field"
+		"label";
+		margin-top: 35px;
+		margin-bottom: 30px;
+}
+/*
+#contenedor2{
+	width: 200px;
+	height: 50px;
+	position: relative;
+	left: 45%;
+	bottom: 50.5%;
+	display: grid;
+	grid-template-columns: 100%; /*50*//*
+	grid-template-rows: 85% 15%;
+	grid-template-areas:
+		"meter-field"
+		"label";
+		margin-top: 35px;
+		margin-bottom: 30px;
+		/*margin-left: 10%;*//*
+}
+*/
+
+#fare .meter-field {
+    /*display: grid;*/
+    /*grid-area: meter-field;*/
+    /*font-family: "Verdana";*/
+    /*background-color: black;*/
+    font-family: "OPTICalculator";
+    color: red;
+    font-weight: bold;
+    font-size: 43px;
+    letter-spacing: 3px;
+    text-align: left; /*center*/
+    /*overflow-x: hidden;*/
+}
+
+#fare .label {
+    width: 100%;
+    height: 100%;
+    /*position: relative;
+    bottom: 5%;*/
+    /*background-color: black;*/
+    /*font-family: Verdana;*/
+    font-family: "OPTICalculator";
+    font-weight: bold;
+    font-size: 12px;
+    text-align: center;
+}
+
+/*
+#config {
+	background-image: url("img/phone.png");
+	width: 280px;
+	height: 450px;
+	position: absolute;
+	left: 90%;
+	transform: translateX(-50%);
+  padding: 10px;
+	position: absolute;
+	top: 65%;
+	margin-top: -250px;
+	margin-left: auto;
+	margin-right: auto;
+	padding-bottom: 20px;
+  text-align: center;
+  color: #333;
+}
+
+#config h1{
+  margin-top: 120px;
+  font-size: 18px;
+  font-family: 'Digital-7';
+   text-align: center;
+}
+
+#config .button{
+  font-family: 'Arial';
+  padding: 8px;
+  width: 100px;
+  opacity: 0.8;
+  font-size: 12px;
+  margin: 0 auto;
+  background:  #efc700;
+  margin-bottom: 10px;
+   text-align: center;
+}
+*/

C#/FiveM/TaxiJob/TaxiJob.Client/bin/Debug/nui/meter.html

@@ -0,0 +1,52 @@
+<html lang="de">
+<head>
+    <script src="nui://game/ui/jquery.js" type="text/javascript">
+    </script>
+    <script src="meter.js" type="text/javascript" defer></script>
+    <link href="meter.css" rel="stylesheet" type="text/css"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <title></title>
+</head>
+
+<body onselectstart="return false;" ondragstart="return false;">
+<div id="meter" style="display: none;">
+    <div id="fare">
+        <div class="container">
+            <div id="fare-amount" class="meter-field fare">--</div>
+            <div class="label">PREIS</div> <!--FARE-->
+        </div>
+        <div class="container">
+            <div id="rate" class="meter-field rate">--/km</div> <!--/mi-->
+            <div class="label">TARIF</div> <!--RATE-->
+        </div>
+        <div class="container">
+            <div id="state" class="meter-field state">ON</div>
+            <!--<div class="label">PAUSA</div>-->
+        </div>
+    </div>
+    <div id="baselight">
+        <div id="greenlight">
+            <img style="width:18px; height:18px" src="img/greenlight.png">
+        </div>
+        <div id="redlight">
+            <img style="width:18px; height:18px" src="img/redlight.png">
+        </div>
+    </div>
+</div>
+
+<!--
+<div id="config" style="display:none;">
+<h1>Fare Configuration</h1>
+
+<div class="config-container">
+  <div class="button toggle-meter">Toggle Fare Meter</div>
+  <div class="button fare-distance">Fare Type: Distance</div>
+  <div class="button fare-flat">Fare Type: Flat Fee</div>
+  <div class="button set-rate">Set Rate</div>
+  <div class="button reset-trip">Reset Fare</div>
+  <div class="button close">Close</div>
+</div>
+</div>-->
+
+</body>
+</html>

C#/FiveM/TaxiJob/TaxiJob.Client/bin/Debug/nui/meter.js

@@ -0,0 +1,152 @@
+let meterVisible = false;
+let currencyPrefix = '';
+let rateSuffix = '';
+let rateType = 'distance';
+let rateAmount = null;
+let currentFare = 5.00;
+let pause = false;
+let moving = false;
+
+$('#greenlight').hide();
+$('#redlight').hide();
+
+window.addEventListener("message", function (event) {
+    switch (event.data.type) {
+        case 'show_config':
+            showConfig();
+            break;
+        case 'hide_config':
+            hideConfig();
+            break;
+        case 'update_meter':
+            updateMeterAttributes(JSON.parse(event.data.attributes));
+            break;
+        //refreshMeterDisplay(); TESTEAR ESTO
+    }
+});
+
+/*$('.toggle-meter').on('click', function () {
+    let attrs = {'meterVisible': 'toggle'}
+    $.post('http://esx_taximeter/updateAttrs', JSON.stringify(attrs));
+});
+
+$('.fare-distance').on('click', function () {
+    let attrs = {'rateType': 'distance'}
+    $.post('http://esx_taximeter/updateAttrs', JSON.stringify(attrs));
+});
+
+$('.fare-flat').on('click', function () {
+    let attrs = {'rateType': 'flat'}
+    $.post('http://esx_taximeter/updateAttrs', JSON.stringify(attrs));
+});
+
+$('.close').on('click', function () {
+    $.post('http://esx_taximeter/closeConfig', JSON.stringify({}));
+});
+
+$('.set-rate').on('click', function () {
+    $.post('http://esx_taximeter/setRate', JSON.stringify({}));
+});
+
+$('.reset-trip').on('click', function () {
+    $.post('http://esx_taximeter/resetFare', JSON.stringify({}));
+});*/
+
+
+function showConfig() {
+    $('#config').show();
+}
+
+function hideConfig() {
+    $('#config').hide();
+}
+
+function showMeter() {
+    $('#meter').show();
+}
+
+function hideMeter() {
+    $('#meter').hide();
+}
+
+function setRate(rate) {
+    updateFareType();
+}
+
+function updateMeterAttributes(attributes) {
+    if (attributes) {
+        meterVisible = attributes['meterVisible'];
+        rateType = attributes['rateType'];
+
+        rateAmount = attributes['rateAmount'];
+        currentFare = attributes['currentFare'];
+        currencyPrefix = attributes['currencyPrefix'];
+        rateSuffix = attributes['rateSuffix'];
+        pause = attributes['meterPause'];
+        //moving = attributes['isMoving'];
+        if (moving !== attributes['isMoving']) {
+            moving = attributes['isMoving'];
+            updateLight()
+        }
+        refreshMeterDisplay();
+    }
+}
+
+function updateLight() {
+    if (moving) {
+        $('#greenlight').show();
+        $('#redlight').hide();
+    } else {
+        $('#redlight').show();
+        $('#greenlight').hide();
+    }
+}
+
+function refreshMeterDisplay() {
+    toggleMeterVisibility();
+    updateRateType();
+    updateCurrentFare();
+    updatePauseState();
+    //updateLight();
+}
+
+function toggleMeterVisibility() {
+    if (meterVisible) {
+        showMeter();
+    } else {
+        hideMeter();
+    }
+}
+
+function updateCurrentFare() {
+    let string;
+    if (rateType === 'flat') {
+        string = currencyPrefix + (rateAmount || '--');
+    } else {
+        string = currencyPrefix + (currentFare || '0.00');
+    }
+
+    $('.meter-field.fare').text(string);
+}
+
+function updateRateType() {
+    let string;
+    if (rateType === 'flat') {
+        string = 'FLAT'
+    } else {
+        string = currencyPrefix + (rateAmount || '--') + rateSuffix
+    }
+
+    $('.meter-field.rate').text(string);
+}
+
+function updatePauseState() {
+    let string;
+    if (pause) {
+        string = 'OFF'
+    } else {
+        string = 'ON'
+    }
+
+    $('.meter-field.state').text(string);
+}

C#/FiveM/TaxiJob/TaxiJob.Client/bin/Debug/settings.ini

@@ -0,0 +1,139 @@
+{[General]
+DrawDistance 100.0
+VehicleSpawnPoint [911.108, -177.867, 74.283, 225.0]
+VehicleDeleter [908.317, -183.070, 73.201]
+VehicleModel taxi
+TimeToNpcJob 20000
+}
+
+{[Cloakroom]
+Position [894.88, -180.23, 74.5]
+Size [1.0, 1.0, 1.0]
+Color [204, 204, 0]
+Type 21
+Rotate true
+}
+
+{[VehicleSpawner]
+Position [915.039, -162.187, 74.5]
+Size [1.0, 1.0, 1.0]
+Color [204, 204, 0]
+Type 36
+Rotate true
+}
+
+{[Npcs]
+0 a_m_m_salton_03
+1 a_m_m_skater_01
+2 a_m_m_prolhost_01
+3 a_m_m_soucent_02
+4 a_m_y_beach_01
+5 a_f_m_bevhills_01
+6 a_m_y_bevhills_01
+7 a_m_y_busicas_01
+8 a_f_y_clubcust_03
+9 a_f_m_eastsa_01
+10 a_f_m_eastsa_02
+11 a_f_m_fatbla_01
+12 a_f_o_ktown_01
+13 a_f_y_vinewood_02
+14 a_f_y_scdressy_01
+17 a_f_y_genhot_01
+18 a_m_m_fatlatin_01
+19 a_m_m_farmer_01
+}
+
+{[Positions]
+1 [293.5, -590.2, 42.7]
+2 [253.4, -375.9, 44.1]
+3 [120.8, -300.4, 45.1]
+4 [-38.4, -381.6, 38.3]
+5 [-107.4, -614.4, 35.7]
+6 [-252.3, -856.5, 30.6]
+7 [-236.1, -988.4, 28.8]
+8 [-277.0, -1061.2, 25.7]
+9 [-576.5, -999.0, 21.8]
+10 [-602.8, -952.6, 21.6]
+11 [-790.7, -961.9, 14.9]
+12 [-912.6, -864.8, 15.0]
+13 [-1069.8, -792.5, 18.8]
+14 [-1306.9, -854.1, 15.1]
+15 [-1468.5, -681.4, 26.2]
+16 [-1380.9, -452.7, 34.1]
+17 [-1326.3, -394.8, 36.1]
+18 [-1383.7, -270.0, 42.5]
+19 [-1679.6, -457.3, 39.4]
+20 [-1812.5, -416.9, 43.7]
+21 [-2043.6, -268.3, 23.0]
+22 [-2186.4, -421.6, 12.7]
+23 [-1862.1, -586.5, 11.2]
+24 [-1859.5, -617.6, 10.9]
+25 [-1635.0, -988.3, 12.6]
+26 [-1284.0, -1154.2, 5.3]
+27 [-1126.5, -1338.1, 4.6]
+28 [-867.9, -1159.7, 5.0]
+29 [-847.5, -1141.4, 6.3]
+30 [-722.6, -1144.6, 10.2]
+31 [-575.5, -318.4, 34.5]
+32 [-592.3, -224.9, 36.1]
+33 [-559.6, -162.9, 37.8]
+34 [-535.0, -65.7, 40.6]
+35 [-758.2, -36.7, 37.3]
+36 [-1375.9, 21.0, 53.2]
+37 [-1320.3, -128.0, 48.1]
+38 [-1285.7, 294.3, 64.5]
+39 [-1245.7, 386.5, 75.1]
+40 [-760.4, 285.0, 85.1]
+41 [-626.8, 254.1, 81.1]
+42 [-563.6, 268.0, 82.5]
+43 [-486.8, 272.0, 82.8]
+44 [88.3, 250.9, 108.2]
+45 [234.1, 344.7, 105.0]
+46 [435.0, 96.7, 99.2]
+47 [482.6, -142.5, 58.2]
+48 [762.7, -786.5, 25.9]
+49 [809.1, -1290.8, 25.8]
+50 [490.8, -1751.4, 28.1]
+51 [432.4, -1856.1, 27.0]
+52 [164.3, -1734.5, 28.9]
+53 [-57.7, -1501.4, 31.1]
+54 [52.2, -1566.7, 29.0]
+55 [310.2, -1376.8, 31.4]
+56 [182.0, -1332.8, 28.9]
+57 [-74.6, -1100.6, 25.7]
+58 [-887.0, -2187.5, 8.1]
+59 [-749.6, -2296.6, 12.5]
+60 [-1064.8, -2560.7, 19.7]
+61 [-1033.4, -2730.2, 19.7]
+62 [-1018.7, -2732.0, 13.3]
+63 [797.4, -174.4, 72.7]
+64 [508.2, -117.9, 60.8]
+65 [159.5, -27.6, 67.4]
+66 [-36.4, -106.9, 57.0]
+67 [-355.8, -270.4, 33.0]
+68 [-831.2, -76.9, 37.3]
+69 [-1038.7, -214.6, 37.0]
+70 [1918.4, 3691.4, 32.3]
+71 [1820.2, 3697.1, 33.5]
+72 [1619.3, 3827.2, 34.5]
+73 [1418.6, 3602.2, 34.5]
+74 [1944.9, 3856.3, 31.7]
+75 [2285.3, 3839.4, 34.0]
+76 [2760.9, 3387.8, 55.7]
+77 [1952.8, 2627.7, 45.4]
+78 [1051.4, 474.8, 93.7]
+79 [866.4, 17.6, 78.7]
+80 [319.0, 167.4, 103.3]
+81 [88.8, 254.1, 108.2]
+82 [-44.9, 70.4, 72.4]
+83 [-115.5, 84.3, 70.8]
+84 [-384.8, 226.9, 83.5]
+85 [-578.7, 139.1, 61.3]
+86 [-651.3, -584.9, 34.1]
+87 [-571.8, -1195.6, 17.9]
+88 [-1513.3, -670.0, 28.4]
+89 [-1297.5, -654.9, 26.1]
+90 [-1645.5, 144.6, 61.7]
+91 [-1160.6, 744.4, 154.6]
+92 [-798.1, 831.7, 204.4]
+}

C#/FiveM/TaxiJob/TaxiJob.Client/obj/Debug/.NETFramework,Version=v4.8.1.AssemblyAttributes.cs

@@ -0,0 +1,4 @@
+// <autogenerated />
+using System;
+using System.Reflection;
+[assembly: global::System.Runtime.Versioning.TargetFrameworkAttribute(".NETFramework,Version=v4.8.1", FrameworkDisplayName = ".NET Framework 4.8.1")]

C#/FiveM/TaxiJob/TaxiJob.Client/obj/Debug/TaxiJob.Client.csproj.CoreCompileInputs.cache

@@ -0,0 +1 @@
+125b0bc5f7276e942e9413d212173075c94dc422

C#/FiveM/TaxiJob/TaxiJob.Client/obj/Debug/TaxiJob.Client.csproj.FileListAbsolute.txt

@@ -0,0 +1,23 @@
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Client\bin\Debug\fxmanifest.lua
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Client\bin\Debug\nui\digital-7.regular.ttf
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Client\bin\Debug\nui\img\fare1.png
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Client\bin\Debug\nui\img\fare2.png
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Client\bin\Debug\nui\img\greenlight.png
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Client\bin\Debug\nui\img\offlight.png
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Client\bin\Debug\nui\img\phone.png
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Client\bin\Debug\nui\img\redlight.png
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Client\bin\Debug\nui\meter.css
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Client\bin\Debug\nui\meter.html
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Client\bin\Debug\nui\meter.js
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Client\bin\Debug\nui\OPTICalculator.otf
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Client\bin\Debug\settings.ini
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Client\bin\Debug\client.lua
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Client\bin\Debug\TaxiJob.Client.net.dll
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Client\bin\Debug\TaxiJob.Client.net.pdb
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Client\bin\Debug\TaxiJob.Shared.dll
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Client\bin\Debug\TaxiJob.Shared.pdb
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Client\obj\Debug\TaxiJob.Client.csproj.AssemblyReference.cache
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Client\obj\Debug\TaxiJob.Client.csproj.CoreCompileInputs.cache
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Client\obj\Debug\TaxiJob.Client.csproj.CopyComplete
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Client\obj\Debug\TaxiJob.Client.net.dll
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Client\obj\Debug\TaxiJob.Client.net.pdb

C#/FiveM/TaxiJob/TaxiJob.Client/obj/Release/TaxiJob.Client.csproj.CoreCompileInputs.cache

@@ -1 +1 @@
-c8d79eaf2ba593e81ee7bca1d4b7d6da73f15dca
+cd8fd2e102f5267013aee87ba7c0b4fb3096cca9

C#/FiveM/TaxiJob/TaxiJob.Server/PlayerExtensions.cs

@@ -0,0 +1,9 @@
+using CitizenFX.Core;
+
+namespace TaxiJob.Server {
+    public static class PlayerExtensions {
+
+        public static int ServerId(this Player player) => int.Parse(player.Handle);
+
+    }
+}

C#/FiveM/TaxiJob/TaxiJob.Server/ServerScript.cs

@@ -1,14 +1,30 @@
 using System;
+using System.Collections.Generic;
+using System.Linq;
 using System.Threading.Tasks;
 using CitizenFX.Core;
 using Newtonsoft.Json;
 using Nexd.ESX.Server;
+using TaxiJob.Shared;
 
 namespace TaxiJob.Server {
     public sealed class ServerScript : BaseScript {
 
+        private readonly List<Player> _servicePlayers = new List<Player>();
+        private readonly Dictionary<string, Player> _pendingJobs = new Dictionary<string, Player>();
+        private readonly Dictionary<string, int> _pendingCount = new Dictionary<string, int>();
+
         public ServerScript() {
+            _servicePlayers.Clear();
+            _pendingJobs.Clear();
+            _pendingCount.Clear();
             
+            EventHandlers["taxijob:server:service"] += new Action<Player, bool>(Service);
+            EventHandlers["taxijob:server:payout"] += new Action<Player, int>(Payout);
+            EventHandlers["taxijob:server:request"] += new Action<Player>(OnTaxiRequest);
+            EventHandlers["taxijob:server:accept"] += new Action<Player, bool, string>(HasJobAccepted);
+            EventHandlers["taxijob:server:sync_meter"] += new Action<object, int, bool>(SyncMeter);
+            EventHandlers["taxijob:server:bill"] += new Action<Player, int, int>(PlaceBill);
         }
         
         private static void RegisterCallback<TRes>(string name, Func<xPlayer, Task<TRes>> handler) {
@@ -44,6 +60,58 @@ namespace TaxiJob.Server {
                 }
             });
         }
+
+        private void Service([FromSource] Player player, bool onService) {
+            if (onService == false) _servicePlayers.Remove(player);
+            else if (!_servicePlayers.Contains(player)) _servicePlayers.Add(player);
+        }
+
+        private void Payout([FromSource] Player player, int amount) {
+            var xPlayer = ESX.GetPlayerFromId(player.ServerId());
+            xPlayer.AddMoney(amount);
+        }
+
+        private void OnTaxiRequest([FromSource] Player player) {
+            player.TriggerEvent("okokNotify:Alert", "Taxi", "Es wird ein Taxifahrer benachrichtigt...", 4000, "info");
+            Debug.WriteLine(_servicePlayers.Count.ToString());
+            if (_servicePlayers.Count == 0) player.TriggerEvent("taxijob:client:npc");
+            else {
+                var jobId = Guid.NewGuid().ToString();
+                var playerPos = player.Character.Position;
+                _pendingJobs.Add(jobId, player);
+                _pendingCount.Add(jobId, 0);
+                _servicePlayers.OrderBy(p => Math.Sqrt(p.Character.Position.DistanceToSquared(playerPos))).First().TriggerEvent("taxijob:client:job", playerPos, jobId);
+            }
+        }
+
+        private void HasJobAccepted([FromSource] Player player, bool accepted, string jobId) {
+            if (jobId == null || !_pendingJobs.ContainsKey(jobId)) return;
+            _pendingCount[jobId]++;
+            if (accepted) {
+                player.TriggerEvent("taxijob:client:set_passanger", int.Parse(_pendingJobs[jobId].Handle));
+                _pendingJobs[jobId].TriggerEvent("okokNotify:Alert", "Taxi", "Ein Taxi ist auf dem Weg zu ihnen!", 5000, "info");
+                _pendingJobs.Remove(jobId);
+                _pendingCount.Remove(jobId);
+            }
+            else {
+                var pos = _pendingJobs[jobId].Character.Position;
+                if (_servicePlayers.Count - _pendingCount[jobId] <= 0) {
+                    _pendingJobs[jobId].TriggerEvent("taxijob:client:npc");
+                    _pendingJobs.Remove(jobId);
+                    _pendingCount.Remove(jobId);
+                }
+                else _servicePlayers.Where(p => p != player).OrderBy(p => Math.Sqrt(p.Character.Position.DistanceToSquared(pos))).First().TriggerEvent("taxijob:client:job", pos, jobId);
+            }
+        }
+
+        private void SyncMeter(object attributes, int client, bool activate) {
+            Players[client].TriggerEvent("taxijob:client:sync_meter", attributes, activate);
+        }
+
+        private void PlaceBill([FromSource] Player player, int amount, int target) {
+            if (amount == 0) return;
+            TriggerEvent("esx_billing:sendBill", target, null, "Taxifahrtgebühren", amount);
+        }
         
     }
 }

C#/FiveM/TaxiJob/TaxiJob.Server/TaxiJob.Server.csproj

@@ -56,6 +56,7 @@
         <Compile Include="ESX\Server\ESX.Config.Weapons.cs" />
         <Compile Include="ESX\Server\ESX.cs" />
         <Compile Include="ESX\Server\xPlayer.cs" />
+        <Compile Include="PlayerExtensions.cs" />
         <Compile Include="Properties\AssemblyInfo.cs" />
         <Compile Include="ServerScript.cs" />
     </ItemGroup>

C#/FiveM/TaxiJob/TaxiJob.Server/bin/Debug/fxmanifest.lua

@@ -0,0 +1,36 @@
+fx_version 'cerulean'
+games { 'gta5' }
+
+--	details
+author 'Leon Hoppe'
+description "Mosley's"
+version '2.0'
+
+ui_page "nui/meter.html"
+
+files {
+    "nui/digital-7.regular.ttf",
+    "nui/OPTICalculator.otf",
+    "nui/meter.html",
+    "nui/meter.css",
+    "nui/meter.js",
+    'nui/img/phone.png',
+    'nui/img/fare1.png',
+    'nui/img/fare2.png',
+    'nui/img/redlight.png',
+    'nui/img/greenlight.png',
+    'nui/img/offlight.png',
+    
+    'Newtonsoft.Json.dll',
+    'TaxiJob.Shared.dll',
+    'settings.ini'
+}
+
+client_scripts {
+    'client.lua',
+    'TaxiJob.Client.net.dll'
+}
+
+server_scripts {
+    'TaxiJob.Server.net.dll'
+}

C#/FiveM/TaxiJob/TaxiJob.Server/bin/Debug/nui/meter.css

@@ -0,0 +1,267 @@
+@font-face {
+    /*font-family: "Digital-7";
+    src: url( "digital-7.regular.ttf" );*/
+    font-family: "OPTICalculator";
+    src: url("OPTICalculator.otf");
+}
+
+@-webkit-keyframes blink {
+    0% {
+        opacity: 1;
+    }
+    49% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+@-webkit-keyframes blink2 {
+    0% {
+        opacity: 1;
+    }
+    49% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+/* Police Radar */
+#meter {
+    width: 505px;
+    height: 162px;
+    /*
+    position: absolute;
+    bottom: 0px;
+    right: 10px;
+    */
+    position: relative;
+    top: 63%;
+    left: 36.5%;
+    margin: auto;
+
+    color: white;
+    border-radius: 10px;
+
+    /*display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;*/
+
+    background-image: url("img/fare2.png");
+}
+
+#fare {
+    /*
+    width: 370px;
+    height: 120px;
+    */
+    width: 455px;
+    height: 120px;
+
+    /*
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    margin: auto;
+    */
+    position: relative;
+    /*bottom: 2%;
+    right: 2%;*/
+    left: 0.2%;
+    bottom: 7%;
+    margin: auto;
+
+    color: white;
+    border-radius: 10px;
+
+    display: grid;
+    grid-column-gap: 33px;
+    grid-row-gap: 40px;
+    /*grid-template-columns: repeat(2, 3fr) repeat(3, 0.5fr) 30% 30%;*/
+    grid-template-columns: 40% 28.5% 18%;
+    /*background-image: url("img/fare2.png");*/
+    padding: 2%;
+}
+
+/*|
+#fare .label {
+	display: grid;
+	grid-area: label;
+}
+
+#fare .container {
+	display: grid;
+	grid-template-columns: 100%;
+	grid-template-rows: 75% 25%;
+	grid-template-areas:
+		"meter-field"
+		"label";
+		margin-top: 35px;
+		margin-bottom: 30px;
+}*/
+#fare .label {
+    display: grid;
+    grid-area: label;
+}
+
+#fare .container {
+    /*position: relative;
+    left: 20%;*/
+    display: grid;
+    grid-template-columns: 100%; /*50*/
+    grid-template-rows: 85% 15%;
+    grid-row-gap: 16%;
+    grid-template-areas:
+		"meter-field"
+		"label";
+    margin-top: 35px;
+    margin-bottom: 30px;
+}
+
+#baselight {
+    width: 18px; /*50px*/
+    height: 18px;
+    position: relative;
+    right: 40.1%;
+    bottom: 22.5%;
+    margin: auto;
+    background-size: 100%;
+    background-image: url("img/offlight.png");
+}
+
+#greenlight {
+    /*width: 50px;
+    height: 50px;*/
+    position: relative;
+    /*
+    left: 1.5%;
+    bottom: 7%;*/
+    margin: auto;
+    /*background-image: url("img/greenlight.png");*/
+    -webkit-animation: blink 1s;
+    -webkit-animation-iteration-count: infinite;
+}
+
+#redlight {
+    /*width: 50px;
+    height: 50px;*/
+    position: relative;
+    /*
+    left: 1.5%;
+    bottom: 7%;*/
+    margin: auto;
+    /*background-image: url("img/greenlight.png");*/
+    -webkit-animation: blink 4s;
+    -webkit-animation-iteration-count: infinite;
+}
+
+/*
+#contenedor1{
+	width: 200px;
+	height: 50px;
+	position: relative;
+	left: 5%;
+	bottom: -2%;
+	display: grid;
+	grid-template-columns: 100%; /*50*//*
+	grid-template-rows: 85% 15%;
+	grid-template-areas:
+		"meter-field"
+		"label";
+		margin-top: 35px;
+		margin-bottom: 30px;
+}
+/*
+#contenedor2{
+	width: 200px;
+	height: 50px;
+	position: relative;
+	left: 45%;
+	bottom: 50.5%;
+	display: grid;
+	grid-template-columns: 100%; /*50*//*
+	grid-template-rows: 85% 15%;
+	grid-template-areas:
+		"meter-field"
+		"label";
+		margin-top: 35px;
+		margin-bottom: 30px;
+		/*margin-left: 10%;*//*
+}
+*/
+
+#fare .meter-field {
+    /*display: grid;*/
+    /*grid-area: meter-field;*/
+    /*font-family: "Verdana";*/
+    /*background-color: black;*/
+    font-family: "OPTICalculator";
+    color: red;
+    font-weight: bold;
+    font-size: 43px;
+    letter-spacing: 3px;
+    text-align: left; /*center*/
+    /*overflow-x: hidden;*/
+}
+
+#fare .label {
+    width: 100%;
+    height: 100%;
+    /*position: relative;
+    bottom: 5%;*/
+    /*background-color: black;*/
+    /*font-family: Verdana;*/
+    font-family: "OPTICalculator";
+    font-weight: bold;
+    font-size: 12px;
+    text-align: center;
+}
+
+/*
+#config {
+	background-image: url("img/phone.png");
+	width: 280px;
+	height: 450px;
+	position: absolute;
+	left: 90%;
+	transform: translateX(-50%);
+  padding: 10px;
+	position: absolute;
+	top: 65%;
+	margin-top: -250px;
+	margin-left: auto;
+	margin-right: auto;
+	padding-bottom: 20px;
+  text-align: center;
+  color: #333;
+}
+
+#config h1{
+  margin-top: 120px;
+  font-size: 18px;
+  font-family: 'Digital-7';
+   text-align: center;
+}
+
+#config .button{
+  font-family: 'Arial';
+  padding: 8px;
+  width: 100px;
+  opacity: 0.8;
+  font-size: 12px;
+  margin: 0 auto;
+  background:  #efc700;
+  margin-bottom: 10px;
+   text-align: center;
+}
+*/

C#/FiveM/TaxiJob/TaxiJob.Server/bin/Debug/nui/meter.html

@@ -0,0 +1,52 @@
+<html lang="de">
+<head>
+    <script src="nui://game/ui/jquery.js" type="text/javascript">
+    </script>
+    <script src="meter.js" type="text/javascript" defer></script>
+    <link href="meter.css" rel="stylesheet" type="text/css"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <title></title>
+</head>
+
+<body onselectstart="return false;" ondragstart="return false;">
+<div id="meter" style="display: none;">
+    <div id="fare">
+        <div class="container">
+            <div id="fare-amount" class="meter-field fare">--</div>
+            <div class="label">PREIS</div> <!--FARE-->
+        </div>
+        <div class="container">
+            <div id="rate" class="meter-field rate">--/km</div> <!--/mi-->
+            <div class="label">TARIF</div> <!--RATE-->
+        </div>
+        <div class="container">
+            <div id="state" class="meter-field state">ON</div>
+            <!--<div class="label">PAUSA</div>-->
+        </div>
+    </div>
+    <div id="baselight">
+        <div id="greenlight">
+            <img style="width:18px; height:18px" src="img/greenlight.png">
+        </div>
+        <div id="redlight">
+            <img style="width:18px; height:18px" src="img/redlight.png">
+        </div>
+    </div>
+</div>
+
+<!--
+<div id="config" style="display:none;">
+<h1>Fare Configuration</h1>
+
+<div class="config-container">
+  <div class="button toggle-meter">Toggle Fare Meter</div>
+  <div class="button fare-distance">Fare Type: Distance</div>
+  <div class="button fare-flat">Fare Type: Flat Fee</div>
+  <div class="button set-rate">Set Rate</div>
+  <div class="button reset-trip">Reset Fare</div>
+  <div class="button close">Close</div>
+</div>
+</div>-->
+
+</body>
+</html>

C#/FiveM/TaxiJob/TaxiJob.Server/bin/Debug/nui/meter.js

@@ -0,0 +1,152 @@
+let meterVisible = false;
+let currencyPrefix = '';
+let rateSuffix = '';
+let rateType = 'distance';
+let rateAmount = null;
+let currentFare = 5.00;
+let pause = false;
+let moving = false;
+
+$('#greenlight').hide();
+$('#redlight').hide();
+
+window.addEventListener("message", function (event) {
+    switch (event.data.type) {
+        case 'show_config':
+            showConfig();
+            break;
+        case 'hide_config':
+            hideConfig();
+            break;
+        case 'update_meter':
+            updateMeterAttributes(JSON.parse(event.data.attributes));
+            break;
+        //refreshMeterDisplay(); TESTEAR ESTO
+    }
+});
+
+/*$('.toggle-meter').on('click', function () {
+    let attrs = {'meterVisible': 'toggle'}
+    $.post('http://esx_taximeter/updateAttrs', JSON.stringify(attrs));
+});
+
+$('.fare-distance').on('click', function () {
+    let attrs = {'rateType': 'distance'}
+    $.post('http://esx_taximeter/updateAttrs', JSON.stringify(attrs));
+});
+
+$('.fare-flat').on('click', function () {
+    let attrs = {'rateType': 'flat'}
+    $.post('http://esx_taximeter/updateAttrs', JSON.stringify(attrs));
+});
+
+$('.close').on('click', function () {
+    $.post('http://esx_taximeter/closeConfig', JSON.stringify({}));
+});
+
+$('.set-rate').on('click', function () {
+    $.post('http://esx_taximeter/setRate', JSON.stringify({}));
+});
+
+$('.reset-trip').on('click', function () {
+    $.post('http://esx_taximeter/resetFare', JSON.stringify({}));
+});*/
+
+
+function showConfig() {
+    $('#config').show();
+}
+
+function hideConfig() {
+    $('#config').hide();
+}
+
+function showMeter() {
+    $('#meter').show();
+}
+
+function hideMeter() {
+    $('#meter').hide();
+}
+
+function setRate(rate) {
+    updateFareType();
+}
+
+function updateMeterAttributes(attributes) {
+    if (attributes) {
+        meterVisible = attributes['meterVisible'];
+        rateType = attributes['rateType'];
+
+        rateAmount = attributes['rateAmount'];
+        currentFare = attributes['currentFare'];
+        currencyPrefix = attributes['currencyPrefix'];
+        rateSuffix = attributes['rateSuffix'];
+        pause = attributes['meterPause'];
+        //moving = attributes['isMoving'];
+        if (moving !== attributes['isMoving']) {
+            moving = attributes['isMoving'];
+            updateLight()
+        }
+        refreshMeterDisplay();
+    }
+}
+
+function updateLight() {
+    if (moving) {
+        $('#greenlight').show();
+        $('#redlight').hide();
+    } else {
+        $('#redlight').show();
+        $('#greenlight').hide();
+    }
+}
+
+function refreshMeterDisplay() {
+    toggleMeterVisibility();
+    updateRateType();
+    updateCurrentFare();
+    updatePauseState();
+    //updateLight();
+}
+
+function toggleMeterVisibility() {
+    if (meterVisible) {
+        showMeter();
+    } else {
+        hideMeter();
+    }
+}
+
+function updateCurrentFare() {
+    let string;
+    if (rateType === 'flat') {
+        string = currencyPrefix + (rateAmount || '--');
+    } else {
+        string = currencyPrefix + (currentFare || '0.00');
+    }
+
+    $('.meter-field.fare').text(string);
+}
+
+function updateRateType() {
+    let string;
+    if (rateType === 'flat') {
+        string = 'FLAT'
+    } else {
+        string = currencyPrefix + (rateAmount || '--') + rateSuffix
+    }
+
+    $('.meter-field.rate').text(string);
+}
+
+function updatePauseState() {
+    let string;
+    if (pause) {
+        string = 'OFF'
+    } else {
+        string = 'ON'
+    }
+
+    $('.meter-field.state').text(string);
+}

C#/FiveM/TaxiJob/TaxiJob.Server/bin/Debug/settings.ini

@@ -0,0 +1,139 @@
+{[General]
+DrawDistance 100.0
+VehicleSpawnPoint [911.108, -177.867, 74.283, 225.0]
+VehicleDeleter [908.317, -183.070, 73.201]
+VehicleModel taxi
+TimeToNpcJob 20000
+}
+
+{[Cloakroom]
+Position [894.88, -180.23, 74.5]
+Size [1.0, 1.0, 1.0]
+Color [204, 204, 0]
+Type 21
+Rotate true
+}
+
+{[VehicleSpawner]
+Position [915.039, -162.187, 74.5]
+Size [1.0, 1.0, 1.0]
+Color [204, 204, 0]
+Type 36
+Rotate true
+}
+
+{[Npcs]
+0 a_m_m_salton_03
+1 a_m_m_skater_01
+2 a_m_m_prolhost_01
+3 a_m_m_soucent_02
+4 a_m_y_beach_01
+5 a_f_m_bevhills_01
+6 a_m_y_bevhills_01
+7 a_m_y_busicas_01
+8 a_f_y_clubcust_03
+9 a_f_m_eastsa_01
+10 a_f_m_eastsa_02
+11 a_f_m_fatbla_01
+12 a_f_o_ktown_01
+13 a_f_y_vinewood_02
+14 a_f_y_scdressy_01
+17 a_f_y_genhot_01
+18 a_m_m_fatlatin_01
+19 a_m_m_farmer_01
+}
+
+{[Positions]
+1 [293.5, -590.2, 42.7]
+2 [253.4, -375.9, 44.1]
+3 [120.8, -300.4, 45.1]
+4 [-38.4, -381.6, 38.3]
+5 [-107.4, -614.4, 35.7]
+6 [-252.3, -856.5, 30.6]
+7 [-236.1, -988.4, 28.8]
+8 [-277.0, -1061.2, 25.7]
+9 [-576.5, -999.0, 21.8]
+10 [-602.8, -952.6, 21.6]
+11 [-790.7, -961.9, 14.9]
+12 [-912.6, -864.8, 15.0]
+13 [-1069.8, -792.5, 18.8]
+14 [-1306.9, -854.1, 15.1]
+15 [-1468.5, -681.4, 26.2]
+16 [-1380.9, -452.7, 34.1]
+17 [-1326.3, -394.8, 36.1]
+18 [-1383.7, -270.0, 42.5]
+19 [-1679.6, -457.3, 39.4]
+20 [-1812.5, -416.9, 43.7]
+21 [-2043.6, -268.3, 23.0]
+22 [-2186.4, -421.6, 12.7]
+23 [-1862.1, -586.5, 11.2]
+24 [-1859.5, -617.6, 10.9]
+25 [-1635.0, -988.3, 12.6]
+26 [-1284.0, -1154.2, 5.3]
+27 [-1126.5, -1338.1, 4.6]
+28 [-867.9, -1159.7, 5.0]
+29 [-847.5, -1141.4, 6.3]
+30 [-722.6, -1144.6, 10.2]
+31 [-575.5, -318.4, 34.5]
+32 [-592.3, -224.9, 36.1]
+33 [-559.6, -162.9, 37.8]
+34 [-535.0, -65.7, 40.6]
+35 [-758.2, -36.7, 37.3]
+36 [-1375.9, 21.0, 53.2]
+37 [-1320.3, -128.0, 48.1]
+38 [-1285.7, 294.3, 64.5]
+39 [-1245.7, 386.5, 75.1]
+40 [-760.4, 285.0, 85.1]
+41 [-626.8, 254.1, 81.1]
+42 [-563.6, 268.0, 82.5]
+43 [-486.8, 272.0, 82.8]
+44 [88.3, 250.9, 108.2]
+45 [234.1, 344.7, 105.0]
+46 [435.0, 96.7, 99.2]
+47 [482.6, -142.5, 58.2]
+48 [762.7, -786.5, 25.9]
+49 [809.1, -1290.8, 25.8]
+50 [490.8, -1751.4, 28.1]
+51 [432.4, -1856.1, 27.0]
+52 [164.3, -1734.5, 28.9]
+53 [-57.7, -1501.4, 31.1]
+54 [52.2, -1566.7, 29.0]
+55 [310.2, -1376.8, 31.4]
+56 [182.0, -1332.8, 28.9]
+57 [-74.6, -1100.6, 25.7]
+58 [-887.0, -2187.5, 8.1]
+59 [-749.6, -2296.6, 12.5]
+60 [-1064.8, -2560.7, 19.7]
+61 [-1033.4, -2730.2, 19.7]
+62 [-1018.7, -2732.0, 13.3]
+63 [797.4, -174.4, 72.7]
+64 [508.2, -117.9, 60.8]
+65 [159.5, -27.6, 67.4]
+66 [-36.4, -106.9, 57.0]
+67 [-355.8, -270.4, 33.0]
+68 [-831.2, -76.9, 37.3]
+69 [-1038.7, -214.6, 37.0]
+70 [1918.4, 3691.4, 32.3]
+71 [1820.2, 3697.1, 33.5]
+72 [1619.3, 3827.2, 34.5]
+73 [1418.6, 3602.2, 34.5]
+74 [1944.9, 3856.3, 31.7]
+75 [2285.3, 3839.4, 34.0]
+76 [2760.9, 3387.8, 55.7]
+77 [1952.8, 2627.7, 45.4]
+78 [1051.4, 474.8, 93.7]
+79 [866.4, 17.6, 78.7]
+80 [319.0, 167.4, 103.3]
+81 [88.8, 254.1, 108.2]
+82 [-44.9, 70.4, 72.4]
+83 [-115.5, 84.3, 70.8]
+84 [-384.8, 226.9, 83.5]
+85 [-578.7, 139.1, 61.3]
+86 [-651.3, -584.9, 34.1]
+87 [-571.8, -1195.6, 17.9]
+88 [-1513.3, -670.0, 28.4]
+89 [-1297.5, -654.9, 26.1]
+90 [-1645.5, 144.6, 61.7]
+91 [-1160.6, 744.4, 154.6]
+92 [-798.1, 831.7, 204.4]
+}

C#/FiveM/TaxiJob/TaxiJob.Server/obj/Debug/.NETFramework,Version=v4.8.1.AssemblyAttributes.cs

@@ -0,0 +1,4 @@
+// <autogenerated />
+using System;
+using System.Reflection;
+[assembly: global::System.Runtime.Versioning.TargetFrameworkAttribute(".NETFramework,Version=v4.8.1", FrameworkDisplayName = ".NET Framework 4.8.1")]

C#/FiveM/TaxiJob/TaxiJob.Server/obj/Debug/TaxiJob.Server.csproj.CoreCompileInputs.cache

@@ -0,0 +1 @@
+dce8313159bc2f9f5878942332666943f122b5a0

C#/FiveM/TaxiJob/TaxiJob.Server/obj/Debug/TaxiJob.Server.csproj.FileListAbsolute.txt

@@ -0,0 +1,24 @@
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Server\bin\Debug\fxmanifest.lua
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Server\bin\Debug\nui\digital-7.regular.ttf
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Server\bin\Debug\nui\img\fare1.png
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Server\bin\Debug\nui\img\fare2.png
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Server\bin\Debug\nui\img\greenlight.png
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Server\bin\Debug\nui\img\offlight.png
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Server\bin\Debug\nui\img\phone.png
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Server\bin\Debug\nui\img\redlight.png
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Server\bin\Debug\nui\meter.css
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Server\bin\Debug\nui\meter.html
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Server\bin\Debug\nui\meter.js
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Server\bin\Debug\nui\OPTICalculator.otf
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Server\bin\Debug\settings.ini
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Server\bin\Debug\TaxiJob.Server.net.dll
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Server\bin\Debug\TaxiJob.Server.net.pdb
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Server\bin\Debug\Newtonsoft.Json.dll
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Server\bin\Debug\TaxiJob.Shared.dll
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Server\bin\Debug\TaxiJob.Shared.pdb
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Server\bin\Debug\Newtonsoft.Json.xml
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Server\obj\Debug\TaxiJob.Server.csproj.AssemblyReference.cache
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Server\obj\Debug\TaxiJob.Server.csproj.CoreCompileInputs.cache
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Server\obj\Debug\TaxiJob.Server.csproj.CopyComplete
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Server\obj\Debug\TaxiJob.Server.net.dll
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Server\obj\Debug\TaxiJob.Server.net.pdb

C#/FiveM/TaxiJob/TaxiJob.Server/obj/Release/TaxiJob.Server.csproj.CoreCompileInputs.cache

@@ -1 +1 @@
-9944c69edf68944e98c1e3c626510366b086c56a
+63c391d732ee7bc90b9da2d3630021994e47e92d

C#/FiveM/TaxiJob/TaxiJob.Shared/ArrayExtensions.cs

@@ -3,7 +3,7 @@ using System.Collections.Generic;
 using System.Linq;
 using System.Runtime.InteropServices;
 
-namespace TaxiJob.Client.Extensions {
+namespace TaxiJob.Shared {
     public static class ArrayExtensions {
 
         public static T Random<T>(this IEnumerable<T> enumerable, [Optional] int seed) {

C#/FiveM/TaxiJob/TaxiJob.Shared/TaxiJob.Shared.csproj

@@ -46,6 +46,7 @@
         <Reference Include="System.Xml" />
     </ItemGroup>
     <ItemGroup>
+        <Compile Include="ArrayExtensions.cs" />
         <Compile Include="ClientConfig.cs" />
         <Compile Include="ESX\Client\Enums\HudColor.cs" />
         <Compile Include="ESX\Client\Enums\IconType.cs" />

C#/FiveM/TaxiJob/TaxiJob.Shared/bin/Debug/fxmanifest.lua

@@ -0,0 +1,36 @@
+fx_version 'cerulean'
+games { 'gta5' }
+
+--	details
+author 'Leon Hoppe'
+description "Mosley's"
+version '2.0'
+
+ui_page "nui/meter.html"
+
+files {
+    "nui/digital-7.regular.ttf",
+    "nui/OPTICalculator.otf",
+    "nui/meter.html",
+    "nui/meter.css",
+    "nui/meter.js",
+    'nui/img/phone.png',
+    'nui/img/fare1.png',
+    'nui/img/fare2.png',
+    'nui/img/redlight.png',
+    'nui/img/greenlight.png',
+    'nui/img/offlight.png',
+    
+    'Newtonsoft.Json.dll',
+    'TaxiJob.Shared.dll',
+    'settings.ini'
+}
+
+client_scripts {
+    'client.lua',
+    'TaxiJob.Client.net.dll'
+}
+
+server_scripts {
+    'TaxiJob.Server.net.dll'
+}

C#/FiveM/TaxiJob/TaxiJob.Shared/bin/Debug/nui/meter.css

@@ -0,0 +1,267 @@
+@font-face {
+    /*font-family: "Digital-7";
+    src: url( "digital-7.regular.ttf" );*/
+    font-family: "OPTICalculator";
+    src: url("OPTICalculator.otf");
+}
+
+@-webkit-keyframes blink {
+    0% {
+        opacity: 1;
+    }
+    49% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+@-webkit-keyframes blink2 {
+    0% {
+        opacity: 1;
+    }
+    49% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+/* Police Radar */
+#meter {
+    width: 505px;
+    height: 162px;
+    /*
+    position: absolute;
+    bottom: 0px;
+    right: 10px;
+    */
+    position: relative;
+    top: 63%;
+    left: 36.5%;
+    margin: auto;
+
+    color: white;
+    border-radius: 10px;
+
+    /*display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;*/
+
+    background-image: url("img/fare2.png");
+}
+
+#fare {
+    /*
+    width: 370px;
+    height: 120px;
+    */
+    width: 455px;
+    height: 120px;
+
+    /*
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    margin: auto;
+    */
+    position: relative;
+    /*bottom: 2%;
+    right: 2%;*/
+    left: 0.2%;
+    bottom: 7%;
+    margin: auto;
+
+    color: white;
+    border-radius: 10px;
+
+    display: grid;
+    grid-column-gap: 33px;
+    grid-row-gap: 40px;
+    /*grid-template-columns: repeat(2, 3fr) repeat(3, 0.5fr) 30% 30%;*/
+    grid-template-columns: 40% 28.5% 18%;
+    /*background-image: url("img/fare2.png");*/
+    padding: 2%;
+}
+
+/*|
+#fare .label {
+	display: grid;
+	grid-area: label;
+}
+
+#fare .container {
+	display: grid;
+	grid-template-columns: 100%;
+	grid-template-rows: 75% 25%;
+	grid-template-areas:
+		"meter-field"
+		"label";
+		margin-top: 35px;
+		margin-bottom: 30px;
+}*/
+#fare .label {
+    display: grid;
+    grid-area: label;
+}
+
+#fare .container {
+    /*position: relative;
+    left: 20%;*/
+    display: grid;
+    grid-template-columns: 100%; /*50*/
+    grid-template-rows: 85% 15%;
+    grid-row-gap: 16%;
+    grid-template-areas:
+		"meter-field"
+		"label";
+    margin-top: 35px;
+    margin-bottom: 30px;
+}
+
+#baselight {
+    width: 18px; /*50px*/
+    height: 18px;
+    position: relative;
+    right: 40.1%;
+    bottom: 22.5%;
+    margin: auto;
+    background-size: 100%;
+    background-image: url("img/offlight.png");
+}
+
+#greenlight {
+    /*width: 50px;
+    height: 50px;*/
+    position: relative;
+    /*
+    left: 1.5%;
+    bottom: 7%;*/
+    margin: auto;
+    /*background-image: url("img/greenlight.png");*/
+    -webkit-animation: blink 1s;
+    -webkit-animation-iteration-count: infinite;
+}
+
+#redlight {
+    /*width: 50px;
+    height: 50px;*/
+    position: relative;
+    /*
+    left: 1.5%;
+    bottom: 7%;*/
+    margin: auto;
+    /*background-image: url("img/greenlight.png");*/
+    -webkit-animation: blink 4s;
+    -webkit-animation-iteration-count: infinite;
+}
+
+/*
+#contenedor1{
+	width: 200px;
+	height: 50px;
+	position: relative;
+	left: 5%;
+	bottom: -2%;
+	display: grid;
+	grid-template-columns: 100%; /*50*//*
+	grid-template-rows: 85% 15%;
+	grid-template-areas:
+		"meter-field"
+		"label";
+		margin-top: 35px;
+		margin-bottom: 30px;
+}
+/*
+#contenedor2{
+	width: 200px;
+	height: 50px;
+	position: relative;
+	left: 45%;
+	bottom: 50.5%;
+	display: grid;
+	grid-template-columns: 100%; /*50*//*
+	grid-template-rows: 85% 15%;
+	grid-template-areas:
+		"meter-field"
+		"label";
+		margin-top: 35px;
+		margin-bottom: 30px;
+		/*margin-left: 10%;*//*
+}
+*/
+
+#fare .meter-field {
+    /*display: grid;*/
+    /*grid-area: meter-field;*/
+    /*font-family: "Verdana";*/
+    /*background-color: black;*/
+    font-family: "OPTICalculator";
+    color: red;
+    font-weight: bold;
+    font-size: 43px;
+    letter-spacing: 3px;
+    text-align: left; /*center*/
+    /*overflow-x: hidden;*/
+}
+
+#fare .label {
+    width: 100%;
+    height: 100%;
+    /*position: relative;
+    bottom: 5%;*/
+    /*background-color: black;*/
+    /*font-family: Verdana;*/
+    font-family: "OPTICalculator";
+    font-weight: bold;
+    font-size: 12px;
+    text-align: center;
+}
+
+/*
+#config {
+	background-image: url("img/phone.png");
+	width: 280px;
+	height: 450px;
+	position: absolute;
+	left: 90%;
+	transform: translateX(-50%);
+  padding: 10px;
+	position: absolute;
+	top: 65%;
+	margin-top: -250px;
+	margin-left: auto;
+	margin-right: auto;
+	padding-bottom: 20px;
+  text-align: center;
+  color: #333;
+}
+
+#config h1{
+  margin-top: 120px;
+  font-size: 18px;
+  font-family: 'Digital-7';
+   text-align: center;
+}
+
+#config .button{
+  font-family: 'Arial';
+  padding: 8px;
+  width: 100px;
+  opacity: 0.8;
+  font-size: 12px;
+  margin: 0 auto;
+  background:  #efc700;
+  margin-bottom: 10px;
+   text-align: center;
+}
+*/

C#/FiveM/TaxiJob/TaxiJob.Shared/bin/Debug/nui/meter.html

@@ -0,0 +1,52 @@
+<html lang="de">
+<head>
+    <script src="nui://game/ui/jquery.js" type="text/javascript">
+    </script>
+    <script src="meter.js" type="text/javascript" defer></script>
+    <link href="meter.css" rel="stylesheet" type="text/css"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <title></title>
+</head>
+
+<body onselectstart="return false;" ondragstart="return false;">
+<div id="meter" style="display: none;">
+    <div id="fare">
+        <div class="container">
+            <div id="fare-amount" class="meter-field fare">--</div>
+            <div class="label">PREIS</div> <!--FARE-->
+        </div>
+        <div class="container">
+            <div id="rate" class="meter-field rate">--/km</div> <!--/mi-->
+            <div class="label">TARIF</div> <!--RATE-->
+        </div>
+        <div class="container">
+            <div id="state" class="meter-field state">ON</div>
+            <!--<div class="label">PAUSA</div>-->
+        </div>
+    </div>
+    <div id="baselight">
+        <div id="greenlight">
+            <img style="width:18px; height:18px" src="img/greenlight.png">
+        </div>
+        <div id="redlight">
+            <img style="width:18px; height:18px" src="img/redlight.png">
+        </div>
+    </div>
+</div>
+
+<!--
+<div id="config" style="display:none;">
+<h1>Fare Configuration</h1>
+
+<div class="config-container">
+  <div class="button toggle-meter">Toggle Fare Meter</div>
+  <div class="button fare-distance">Fare Type: Distance</div>
+  <div class="button fare-flat">Fare Type: Flat Fee</div>
+  <div class="button set-rate">Set Rate</div>
+  <div class="button reset-trip">Reset Fare</div>
+  <div class="button close">Close</div>
+</div>
+</div>-->
+
+</body>
+</html>

C#/FiveM/TaxiJob/TaxiJob.Shared/bin/Debug/nui/meter.js

@@ -0,0 +1,152 @@
+let meterVisible = false;
+let currencyPrefix = '';
+let rateSuffix = '';
+let rateType = 'distance';
+let rateAmount = null;
+let currentFare = 5.00;
+let pause = false;
+let moving = false;
+
+$('#greenlight').hide();
+$('#redlight').hide();
+
+window.addEventListener("message", function (event) {
+    switch (event.data.type) {
+        case 'show_config':
+            showConfig();
+            break;
+        case 'hide_config':
+            hideConfig();
+            break;
+        case 'update_meter':
+            updateMeterAttributes(JSON.parse(event.data.attributes));
+            break;
+        //refreshMeterDisplay(); TESTEAR ESTO
+    }
+});
+
+/*$('.toggle-meter').on('click', function () {
+    let attrs = {'meterVisible': 'toggle'}
+    $.post('http://esx_taximeter/updateAttrs', JSON.stringify(attrs));
+});
+
+$('.fare-distance').on('click', function () {
+    let attrs = {'rateType': 'distance'}
+    $.post('http://esx_taximeter/updateAttrs', JSON.stringify(attrs));
+});
+
+$('.fare-flat').on('click', function () {
+    let attrs = {'rateType': 'flat'}
+    $.post('http://esx_taximeter/updateAttrs', JSON.stringify(attrs));
+});
+
+$('.close').on('click', function () {
+    $.post('http://esx_taximeter/closeConfig', JSON.stringify({}));
+});
+
+$('.set-rate').on('click', function () {
+    $.post('http://esx_taximeter/setRate', JSON.stringify({}));
+});
+
+$('.reset-trip').on('click', function () {
+    $.post('http://esx_taximeter/resetFare', JSON.stringify({}));
+});*/
+
+
+function showConfig() {
+    $('#config').show();
+}
+
+function hideConfig() {
+    $('#config').hide();
+}
+
+function showMeter() {
+    $('#meter').show();
+}
+
+function hideMeter() {
+    $('#meter').hide();
+}
+
+function setRate(rate) {
+    updateFareType();
+}
+
+function updateMeterAttributes(attributes) {
+    if (attributes) {
+        meterVisible = attributes['meterVisible'];
+        rateType = attributes['rateType'];
+
+        rateAmount = attributes['rateAmount'];
+        currentFare = attributes['currentFare'];
+        currencyPrefix = attributes['currencyPrefix'];
+        rateSuffix = attributes['rateSuffix'];
+        pause = attributes['meterPause'];
+        //moving = attributes['isMoving'];
+        if (moving !== attributes['isMoving']) {
+            moving = attributes['isMoving'];
+            updateLight()
+        }
+        refreshMeterDisplay();
+    }
+}
+
+function updateLight() {
+    if (moving) {
+        $('#greenlight').show();
+        $('#redlight').hide();
+    } else {
+        $('#redlight').show();
+        $('#greenlight').hide();
+    }
+}
+
+function refreshMeterDisplay() {
+    toggleMeterVisibility();
+    updateRateType();
+    updateCurrentFare();
+    updatePauseState();
+    //updateLight();
+}
+
+function toggleMeterVisibility() {
+    if (meterVisible) {
+        showMeter();
+    } else {
+        hideMeter();
+    }
+}
+
+function updateCurrentFare() {
+    let string;
+    if (rateType === 'flat') {
+        string = currencyPrefix + (rateAmount || '--');
+    } else {
+        string = currencyPrefix + (currentFare || '0.00');
+    }
+
+    $('.meter-field.fare').text(string);
+}
+
+function updateRateType() {
+    let string;
+    if (rateType === 'flat') {
+        string = 'FLAT'
+    } else {
+        string = currencyPrefix + (rateAmount || '--') + rateSuffix
+    }
+
+    $('.meter-field.rate').text(string);
+}
+
+function updatePauseState() {
+    let string;
+    if (pause) {
+        string = 'OFF'
+    } else {
+        string = 'ON'
+    }
+
+    $('.meter-field.state').text(string);
+}

C#/FiveM/TaxiJob/TaxiJob.Shared/bin/Debug/settings.ini

@@ -0,0 +1,139 @@
+{[General]
+DrawDistance 100.0
+VehicleSpawnPoint [911.108, -177.867, 74.283, 225.0]
+VehicleDeleter [908.317, -183.070, 73.201]
+VehicleModel taxi
+TimeToNpcJob 20000
+}
+
+{[Cloakroom]
+Position [894.88, -180.23, 74.5]
+Size [1.0, 1.0, 1.0]
+Color [204, 204, 0]
+Type 21
+Rotate true
+}
+
+{[VehicleSpawner]
+Position [915.039, -162.187, 74.5]
+Size [1.0, 1.0, 1.0]
+Color [204, 204, 0]
+Type 36
+Rotate true
+}
+
+{[Npcs]
+0 a_m_m_salton_03
+1 a_m_m_skater_01
+2 a_m_m_prolhost_01
+3 a_m_m_soucent_02
+4 a_m_y_beach_01
+5 a_f_m_bevhills_01
+6 a_m_y_bevhills_01
+7 a_m_y_busicas_01
+8 a_f_y_clubcust_03
+9 a_f_m_eastsa_01
+10 a_f_m_eastsa_02
+11 a_f_m_fatbla_01
+12 a_f_o_ktown_01
+13 a_f_y_vinewood_02
+14 a_f_y_scdressy_01
+17 a_f_y_genhot_01
+18 a_m_m_fatlatin_01
+19 a_m_m_farmer_01
+}
+
+{[Positions]
+1 [293.5, -590.2, 42.7]
+2 [253.4, -375.9, 44.1]
+3 [120.8, -300.4, 45.1]
+4 [-38.4, -381.6, 38.3]
+5 [-107.4, -614.4, 35.7]
+6 [-252.3, -856.5, 30.6]
+7 [-236.1, -988.4, 28.8]
+8 [-277.0, -1061.2, 25.7]
+9 [-576.5, -999.0, 21.8]
+10 [-602.8, -952.6, 21.6]
+11 [-790.7, -961.9, 14.9]
+12 [-912.6, -864.8, 15.0]
+13 [-1069.8, -792.5, 18.8]
+14 [-1306.9, -854.1, 15.1]
+15 [-1468.5, -681.4, 26.2]
+16 [-1380.9, -452.7, 34.1]
+17 [-1326.3, -394.8, 36.1]
+18 [-1383.7, -270.0, 42.5]
+19 [-1679.6, -457.3, 39.4]
+20 [-1812.5, -416.9, 43.7]
+21 [-2043.6, -268.3, 23.0]
+22 [-2186.4, -421.6, 12.7]
+23 [-1862.1, -586.5, 11.2]
+24 [-1859.5, -617.6, 10.9]
+25 [-1635.0, -988.3, 12.6]
+26 [-1284.0, -1154.2, 5.3]
+27 [-1126.5, -1338.1, 4.6]
+28 [-867.9, -1159.7, 5.0]
+29 [-847.5, -1141.4, 6.3]
+30 [-722.6, -1144.6, 10.2]
+31 [-575.5, -318.4, 34.5]
+32 [-592.3, -224.9, 36.1]
+33 [-559.6, -162.9, 37.8]
+34 [-535.0, -65.7, 40.6]
+35 [-758.2, -36.7, 37.3]
+36 [-1375.9, 21.0, 53.2]
+37 [-1320.3, -128.0, 48.1]
+38 [-1285.7, 294.3, 64.5]
+39 [-1245.7, 386.5, 75.1]
+40 [-760.4, 285.0, 85.1]
+41 [-626.8, 254.1, 81.1]
+42 [-563.6, 268.0, 82.5]
+43 [-486.8, 272.0, 82.8]
+44 [88.3, 250.9, 108.2]
+45 [234.1, 344.7, 105.0]
+46 [435.0, 96.7, 99.2]
+47 [482.6, -142.5, 58.2]
+48 [762.7, -786.5, 25.9]
+49 [809.1, -1290.8, 25.8]
+50 [490.8, -1751.4, 28.1]
+51 [432.4, -1856.1, 27.0]
+52 [164.3, -1734.5, 28.9]
+53 [-57.7, -1501.4, 31.1]
+54 [52.2, -1566.7, 29.0]
+55 [310.2, -1376.8, 31.4]
+56 [182.0, -1332.8, 28.9]
+57 [-74.6, -1100.6, 25.7]
+58 [-887.0, -2187.5, 8.1]
+59 [-749.6, -2296.6, 12.5]
+60 [-1064.8, -2560.7, 19.7]
+61 [-1033.4, -2730.2, 19.7]
+62 [-1018.7, -2732.0, 13.3]
+63 [797.4, -174.4, 72.7]
+64 [508.2, -117.9, 60.8]
+65 [159.5, -27.6, 67.4]
+66 [-36.4, -106.9, 57.0]
+67 [-355.8, -270.4, 33.0]
+68 [-831.2, -76.9, 37.3]
+69 [-1038.7, -214.6, 37.0]
+70 [1918.4, 3691.4, 32.3]
+71 [1820.2, 3697.1, 33.5]
+72 [1619.3, 3827.2, 34.5]
+73 [1418.6, 3602.2, 34.5]
+74 [1944.9, 3856.3, 31.7]
+75 [2285.3, 3839.4, 34.0]
+76 [2760.9, 3387.8, 55.7]
+77 [1952.8, 2627.7, 45.4]
+78 [1051.4, 474.8, 93.7]
+79 [866.4, 17.6, 78.7]
+80 [319.0, 167.4, 103.3]
+81 [88.8, 254.1, 108.2]
+82 [-44.9, 70.4, 72.4]
+83 [-115.5, 84.3, 70.8]
+84 [-384.8, 226.9, 83.5]
+85 [-578.7, 139.1, 61.3]
+86 [-651.3, -584.9, 34.1]
+87 [-571.8, -1195.6, 17.9]
+88 [-1513.3, -670.0, 28.4]
+89 [-1297.5, -654.9, 26.1]
+90 [-1645.5, 144.6, 61.7]
+91 [-1160.6, 744.4, 154.6]
+92 [-798.1, 831.7, 204.4]
+}

C#/FiveM/TaxiJob/TaxiJob.Shared/nui/meter.css

@@ -45,8 +45,8 @@
     right: 10px;
     */
     position: relative;
-    top: 63%;
-    left: 36.5%;
+    top: 50%;
+    left: 40%;
     margin: auto;
 
     color: white;
@@ -58,6 +58,7 @@
     align-items: center;*/
 
     background-image: url("img/fare2.png");
+    transform: scale(0.7);
 }
 
 #fare {

C#/FiveM/TaxiJob/TaxiJob.Shared/obj/Debug/.NETFramework,Version=v4.8.1.AssemblyAttributes.cs

@@ -0,0 +1,4 @@
+// <autogenerated />
+using System;
+using System.Reflection;
+[assembly: global::System.Runtime.Versioning.TargetFrameworkAttribute(".NETFramework,Version=v4.8.1", FrameworkDisplayName = ".NET Framework 4.8.1")]

C#/FiveM/TaxiJob/TaxiJob.Shared/obj/Debug/TaxiJob.Shared.csproj.CoreCompileInputs.cache

@@ -0,0 +1 @@
+4ef6346f7e5d1235706c5fb03ebea1457679799a

C#/FiveM/TaxiJob/TaxiJob.Shared/obj/Debug/TaxiJob.Shared.csproj.FileListAbsolute.txt

@@ -0,0 +1,19 @@
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Shared\bin\Debug\fxmanifest.lua
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Shared\bin\Debug\nui\digital-7.regular.ttf
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Shared\bin\Debug\nui\img\fare1.png
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Shared\bin\Debug\nui\img\fare2.png
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Shared\bin\Debug\nui\img\greenlight.png
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Shared\bin\Debug\nui\img\offlight.png
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Shared\bin\Debug\nui\img\phone.png
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Shared\bin\Debug\nui\img\redlight.png
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Shared\bin\Debug\nui\meter.css
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Shared\bin\Debug\nui\meter.html
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Shared\bin\Debug\nui\meter.js
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Shared\bin\Debug\nui\OPTICalculator.otf
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Shared\bin\Debug\settings.ini
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Shared\bin\Debug\TaxiJob.Shared.dll
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Shared\bin\Debug\TaxiJob.Shared.pdb
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Shared\obj\Debug\TaxiJob.Shared.csproj.AssemblyReference.cache
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Shared\obj\Debug\TaxiJob.Shared.csproj.CoreCompileInputs.cache
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Shared\obj\Debug\TaxiJob.Shared.dll
+D:\Programmierstuff\C#\FiveM\TaxiJob\TaxiJob.Shared\obj\Debug\TaxiJob.Shared.pdb

C#/FiveM/TaxiJob/TaxiJob.Shared/obj/Release/TaxiJob.Shared.csproj.CoreCompileInputs.cache

@@ -1 +1 @@
-af26162c6c5430203b98197ce430b5bb1b311951
+b1779fdd674aacbeda671410e75ee6df0a20fa8d