> For the complete documentation index, see [llms.txt](https://pwa.spomky-labs.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://pwa.spomky-labs.com/1.3.x/symfony-ux/battery-status.md).

# Battery Status

The battery status indicates the current battery level. This status is updated when the component is connected and whenever there are changes.

In the following example, a Twig component will display the information received from the Stimulus Controller.

{% code title="src/Twig/Component/Battery.php" lineNumbers="true" %}

```php
<?php

namespace App\Twig\Component;

use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\Attribute\LiveArg;
use Symfony\UX\LiveComponent\Attribute\LiveListener;
use Symfony\UX\LiveComponent\Attribute\LiveProp;
use Symfony\UX\LiveComponent\DefaultActionTrait;
use Symfony\UX\LiveComponent\ComponentToolsTrait;

#[AsLiveComponent('Battery')]
class Battery
{
    use DefaultActionTrait;
    use ComponentToolsTrait;

    #[LiveProp]
    public string $charging = '';
    #[LiveProp]
    public string $level = '';
    #[LiveProp]
    public string $chargingTime = '';
    #[LiveProp]
    public string $dischargingTime = '';

    #[LiveListener('updated')]
    public function onUpdate(
        #[LiveArg] bool $charging,
        #[LiveArg] float $level,
        #[LiveArg] ?int $chargingTime,
        #[LiveArg] ?int $dischargingTime,
    ): void {
        $this->charging = $charging ? 'Yes' : 'No';
        $this->level = ($level* 100) . '%';
        $this->chargingTime = $this->formatSeconds($chargingTime);
        $this->dischargingTime = $this->formatSeconds($dischargingTime);
    }

    private function formatSeconds(?float $s): string
    {
        if ($s === null ||!is_finite($s)) {
            return '∞';
        }

        if ($s === 0.0) {
            return 'done';
        }

        $h = str_pad((string) floor($s / 3600), 2, '0', STR_PAD_LEFT);
        $m = str_pad((string) floor(($s % 3600) / 60), 2, '0', STR_PAD_LEFT);
        $sec = str_pad((string) floor($s % 60), 2, '0', STR_PAD_LEFT);

        return "$h:$m:$sec";
    }
}
```

{% endcode %}

{% code title="templates/components/Battery.html.twig" lineNumbers="true" %}

```twig
<div data-controller="pwa--battery live"{{ attributes }}>
    <dl class="divide-y divide-gray-100">
        <div  class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
            <dt class="text-sm/6 font-medium text-gray-900">Charging</dt>
            <dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">{{ this.charging }}</dd>
        </div>
        <div  class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
            <dt class="text-sm/6 font-medium text-gray-900">Level</dt>
            <dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">{{ this.level }}</dd>
        </div>
        <div  class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
            <dt class="text-sm/6 font-medium text-gray-900">Discharging Time</dt>
            <dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">{{ this.dischargingTime }}</dd>
        </div>
        <div  class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
            <dt class="text-sm/6 font-medium text-gray-900">Charging Time</dt>
            <dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">{{ this.chargingTime }}</dd>
        </div>
    </dl>
</div>

```

{% endcode %}

Next, simply place the live component where needed in your templates.

```twig
<twig:Battery />
```

### Parameters

None

### Actions

None

### Targets

None

### Events

Upon status change, the event `pwa--battery:updated` is triggered. The payload includes the following data:

* `charging`: indicates whether the battery is charging or not.
* `level`: the current battery level.
* `chargingTime`: the time needed to recharge the battery from empty to full.
* `dischargingTime`: the time the battery can last before being completely discharged.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://pwa.spomky-labs.com/1.3.x/symfony-ux/battery-status.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.