feat: implement printer disconnection functionality with UI updates and event handling

This commit is contained in:
Yoga Pangestu 2026-01-07 19:27:32 +07:00
parent 76868e1bcb
commit 2e436f99cc

View File

@ -21,10 +21,10 @@
</div>
</template>
<template x-if="isConnected">
<div
class="ms-2 flex items-center gap-2 text-green-600 bg-green-50 px-3 py-1 rounded-lg border border-green-200">
<flux:icon.check-circle class="size-4" />
<span class="text-sm font-medium">Printer Connected</span>
<div class="flex gap-2 ms-2">
<flux:button variant="primary" color="red" wire:click="$dispatch('disconnectPrinter')">
Disconnect
</flux:button>
</div>
</template>
</div>
@ -127,6 +127,44 @@ class="ms-2 flex items-center gap-2 text-green-600 bg-green-50 px-3 py-1 rounded
}
});
Livewire.on('disconnectPrinter', async (event) => {
try {
// Clear USB connection
if (window.printerDevice) {
try {
await window.printerDevice.close();
} catch (err) {
console.log('Error closing USB device:', err);
}
window.printerDevice = null;
}
// Clear Bluetooth connection
if (window.btCharacteristic) {
try {
await window.btCharacteristic.service.device.gatt.disconnect();
} catch (err) {
console.log('Error disconnecting Bluetooth:', err);
}
window.btCharacteristic = null;
}
// Clear localStorage
localStorage.removeItem('printerDevice');
localStorage.removeItem('btPrinterDevice');
console.log('Printer disconnected');
window.dispatchEvent(new CustomEvent('printer-status-change', {
detail: {
connected: false
}
}));
} catch (err) {
console.error('Gagal disconnect printer:', err);
}
});
Livewire.on('connectBluetooth', async (event) => {
try {
const device = await navigator.bluetooth.requestDevice({
@ -302,8 +340,8 @@ function getMaxChar(widthMM) {
// Close modal
// Assuming Flux handles close on click or we dispatch close
// We will try to close it via dispatching 'close-modal' if configured, but Flux
// buttons inside modal might need `data-flux-close` or similar?
// We will try to close it via dispatching 'close-modal' if configured, but Flux
// buttons inside modal might need `data-flux-close` or similar?
// The provided code used $dispatch('modal-close') which might be custom.
// We will proceed to print.