# Custom App

## Config

App settings to be added to the AppStore section in [`gksphone/config/config.json`](#user-content-fn-1)[^1]

* name => The name of the app that will appear on the phone
* icons  => Icon of the app
* categori => In which category the app will appear (  jobs, mix, social, finance )
* appurl => You should write the file path of the resource you want to run in the application **( If you want to add a site, make sure it has iframe support )**
* url => Don't touch this part
* blockedjobs  => Jobs that will not see the app
* allowjob  => Only jobs that can see this application<br>

```json
    {
      "name": "Custom App",
      "icons": "/html/img/icons/qbit.png",
      "categori": "mix",
      "appurl": "https://cfx-nui-gksphone-app/ui/index.html",
      "url": "/customapp",
      "blockedjobs": {
         "police": "police"
      },
      "allowjob": {
         "ambulance": "ambulance"
      },
      "signal": true,
      "show": true
    }
```

You can access the custom app template on [github](https://github.com/Xenknight61/gksphone-app) and start making the app you want

## Open App

Add this client and this will be triggered every time you enter the application.

```lua
RegisterNUICallback('getInfo', function(data, cb)
    print("The function that will run when it enters the application")
    cb('ok')
end)
```

## Exports

### InputChange

To prevent walking while filling in input fields

```lua
local data = true -- true or false
exports["gksphone"]:InputChange(data)
```

```html
<input type="text" onfocus="inputFocused(false)" onblur="inputFocused(true)">

<script>
   async function inputFocused(value) {
       //await NuiFetch("input", value);
   }
</script>
```

### NuiSendMessage

You have to use this export instead of SendNUIMessage

```lua
exports["gksphone"]:NuiSendMessage({event = 'showMessage', hello = "world"})
```

```javascript
window.addEventListener('message', (event) => {
    if (!event.data) return;
    const e = event.data
    if (e.event === "showMessage") {
        console.log(`Hello ${e.hello}!`)
    }
})
```

## Javascript UI

```javascript
document.addEventListener('DOMContentLoaded', () => {
    setTimeout(() => {
        if (window.gksphone) {
            console.log(`GKSPHONE functions available`)
        }
    }, 100);
});
```

### Dark Mode Check

```javascript
const isDarkMode = window.gksphone.isDarkMode();
console.log(isDarkMode)  // true or false
```

### Loading Poup

```javascript
window.gksphone.loadingPopup("Loading...");
setTimeout(() => {
   window.gksphone.closeLoadingPopup();
}, 1000)
```

### Notify

```javascript
var timeout = 2000
window.gksphone.notify("This is a notification message", timeout);
```

### Call

```javascript
const phoneNumber = "55555"  // Number to call
const anonymous = false
window.gksphone.calling(phoneNumber, anonymous);
```

### Video Call

```javascript
const phoneNumber = "55555"  // Number to call
window.gksphone.videoCall(phoneNumber);
```

[^1]: