I’m working on a Laravel Filament widget and I want to create a simple alert with sound whenever a new row of data is added to the widget table. Unlike notifications that alert everyone, I only want to alert the user currently viewing the screen.
However, I’m having trouble figuring out how to detect when the polling is completed so that I can trigger the alert.
ive already made custom view for my widget
protected static string $view = 'filament.widget.latestorder';
ive also already call poll in table function
public function table(Table $table): Table
{
return $table
->query(
// some query
)
->defaultSort('created_at', 'desc')
->columns([
// some columns
])
->poll('2s');
}
in my custom view, i write something like this
<div class="grid w-full" style="--cols-default: repeat(1, minmax(0, 1fr)); --cols-lg: repeat(1, minmax(0, 1fr));">
{{ $this->table }}
</div>
@script
<script>
document.addEventListener('DOMContentLoaded', function() {
console.log('okey');
// Retrieve the previous state from session storage
let previousTableData = sessionStorage.getItem('previousTableData');
const tableSelector = '.filament-tables-table';
if (!previousTableData) {
// Initialize session storage if not set
const tableElement = document.querySelector(tableSelector);
previousTableData = tableElement ? tableElement.innerHTML : '';
sessionStorage.setItem('previousTableData', previousTableData);
}
// Listen for Filament's polling refresh event
Livewire.hook('message.processed', function() {
const tableElement = document.querySelector(tableSelector);
const currentTableData = tableElement ? tableElement.innerHTML : '';
console.log('oke');
if (previousTableData !== currentTableData) {
const audio = new Audio("{{ asset('notif.wav') }}");
audio.play();
// Update session storage with the new state
sessionStorage.setItem('previousTableData', currentTableData);
previousTableData = currentTableData;
}
});
});
</script>
@endscript
with console.log('okey');
and console.log('oke')
im aiming to catch the polling event.