UI-Komponenten (cv_ui)

Clientseitige React/NUI-Hilfsfunktionen: Dialog-Fenster, Fortschrittsbalken und Verkaufsmenüs. Alle Funktionen sind als Exports verfügbar.

---

Dialog-System

Exports

-- Generischer Dialog mit Eingabefeld und Buttons
exports['cv_ui']:ShowDialog(title, message, options, callback)

-- Bestätigungs-Dialog (Ja/Nein oder eigene Buttons)
exports['cv_ui']:ShowConfirmDialog(title, message, buttons, callback)

-- Einfacher Text-Eingabe-Dialog
exports['cv_ui']:ShowInputDialog(title, message, callback)

-- Info-Fenster (nur Schließen-Button)
exports['cv_ui']:ShowInfoDialog(title, message)

-- Dialog schließen
exports['cv_ui']:CloseDialog()

-- Prüfen ob Dialog offen
exports['cv_ui']:IsDialogOpen()  -- → boolean

options-Parameter (ShowDialog)

{
    inputType    = 'text',        -- 'text', 'number', 'textarea', 'none'
    placeholder  = '',            -- Platzhalter im Eingabefeld
    defaultValue = '',            -- Vorausgefüllter Wert
    buttons      = {              -- Buttons unten
        { label = 'Bestätigen', value = 'ok' },
        { label = 'Abbrechen',  value = 'cancel' },
    }
}

Callback-Parameter

Der Callback erhält zwei Parameter: (buttonValue, inputValue):

exports['cv_ui']:ShowDialog('Betrag', 'Gib einen Betrag ein:', {
    inputType = 'number',
    buttons = {
        { label = 'OK',        value = 'ok'     },
        { label = 'Abbrechen', value = 'cancel' },
    }
}, function(buttonValue, inputValue)
    if buttonValue == 'ok' then
        local amount = tonumber(inputValue)
        -- ...
    end
end)

Beispiele

-- Einfache Eingabe
exports['cv_ui']:ShowInputDialog('Name', 'Wie lautet dein Name?', function(value)
    if value then
        print('Eingabe:', value)
    end
end)

-- Bestätigung
exports['cv_ui']:ShowConfirmDialog('Löschen', 'Sicher?',
    { { label = 'Ja', value = true }, { label = 'Nein', value = false } },
    function(confirmed)
        if confirmed then
            -- löschen
        end
    end
)

-- Info
exports['cv_ui']:ShowInfoDialog('Info', 'Fahrzeug wurde erfolgreich geparkt.')

---

Fortschrittsbalken

Exports

-- Blockierend: wartet bis Fortschritt abgeschlossen oder abgebrochen
-- Gibt true zurück wenn fertig, false wenn abgebrochen
local completed = exports['cv_ui']:ShowProgressBar(duration, label, options)

-- Nicht-blockierend: startet Fortschrittsbalken
exports['cv_ui']:StartProgressBar(duration, label)

-- Fortschrittsbalken stoppen
exports['cv_ui']:StopProgressBar()

-- Aktuellen Prozentwert (0–100)
exports['cv_ui']:GetProgressPercent()  -- → number

options-Parameter (ShowProgressBar)

{
    canCancel = false,  -- true: Spieler kann mit E abbrechen (300ms Grace-Period)
}

Beispiele

-- Blockierend mit Abbruch-Möglichkeit
CreateThread(function()
    local ok = exports['cv_ui']:ShowProgressBar(5000, 'Fahrzeug wird repariert...', {
        canCancel = true
    })

    if ok then
        -- Reparatur abgeschlossen
        TriggerServerEvent('cv_repair:complete')
    else
        -- Abgebrochen
        cv.notify('Reparatur abgebrochen', '', 'info')
    end
end)

-- Nicht-blockierend (manueller Stop)
exports['cv_ui']:StartProgressBar(3000, 'Lädt...')
Wait(3000)
exports['cv_ui']:StopProgressBar()

---

React-Message senden

Direkte NUI-Kommunikation für benutzerdefinierte NUI-Elemente:

exports['cv_ui']:SendReactMessage(type, payload)
-- Sendet eine NUI-Nachricht an die cv_ui React-App

---

Verkaufsmenü (cv_ui/client/seller.lua)

Zeigt ein Verkaufsmenü mit Liste kaufbarer/verkaufbarer Items an:

exports['cv_ui']:ShowSellerMenu(data, callback)
-- data = { title, items = [{ id, label, price, icon, count? }] }
-- callback(selectedItemId, quantity)