ajustes

web/src/views/kitchen.ts

@@ -1,12 +1,13 @@
 import { api } from '../api';
 import { renderNavbar, toast } from '../utils';
 
-let previousItemIds: Set<string> = new Set<string>();
+let previousItemIdsByStatus: Map<string, Set<string>> = new Map();
 let audioCtx: AudioContext | null = null;
 
 function playNotificationSound() {
   try {
     if (!audioCtx) audioCtx = new AudioContext();
+    if (audioCtx.state === 'suspended') audioCtx.resume();
     const osc = audioCtx.createOscillator();
     const gain = audioCtx.createGain();
     osc.connect(gain);
@@ -69,14 +70,15 @@ export async function renderKitchen(container: HTMLElement) {
 
       const currentIds = new Set<string>(items.map((i: any) => i.id));
 
-      if (previousItemIds.size > 0) {
-        const newItems = items.filter((i: any) => !previousItemIds.has(i.id));
+      const previousIds = previousItemIdsByStatus.get(currentStatus);
+      if (previousIds && previousIds.size > 0) {
+        const newItems = items.filter((i: any) => !previousIds.has(i.id));
         if (newItems.length > 0) {
           playNotificationSound();
           toast(`${newItems.length} novo(s) pedido(s) recebido(s)!`, 'success');
         }
       }
-      previousItemIds = currentIds;
+      previousItemIdsByStatus.set(currentStatus, currentIds);
 
       if (!items.length) {
         grid.innerHTML = `<p class="card-subtitle" style="grid-column:1/-1;text-align:center;padding:3rem 0;">
@@ -108,7 +110,7 @@ export async function renderKitchen(container: HTMLElement) {
               Pedido às ${new Date(item.criadoEm).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })}
             </p>
             ${action.label ? `
-              <button class="btn" style="width:100%;" onclick="window.advanceStatus('${item.id}','${action.next}')">
+              <button class="btn" style="width:100%;" data-action="advance" data-item-id="${item.id}" data-next-status="${action.next}">
                 ${action.label}
               </button>
             ` : `<p class="card-subtitle" style="text-align:center;">✅ Entregue</p>`}
@@ -159,7 +161,12 @@ export async function renderKitchen(container: HTMLElement) {
     else stopAutoRefresh();
   });
 
-  (window as any).advanceStatus = async (id: string, status: string) => {
+  // Event delegation for advance buttons
+  document.getElementById('items-grid')?.addEventListener('click', async (e) => {
+    const btn = (e.target as HTMLElement).closest('[data-action="advance"]') as HTMLElement | null;
+    if (!btn) return;
+    const id = btn.dataset.itemId!;
+    const status = btn.dataset.nextStatus!;
     try {
       await api.patch(`/painel/itens/${id}/status`, { status });
       toast('Status atualizado!', 'success');
@@ -167,12 +174,26 @@ export async function renderKitchen(container: HTMLElement) {
     } catch (err: any) {
       toast(err.message, 'error');
     }
+  });
+
+  // Pause auto-refresh when tab is hidden
+  const handleVisibilityChange = () => {
+    if (document.hidden) {
+      stopAutoRefresh();
+    } else {
+      const checkbox = document.getElementById('auto-refresh-toggle') as HTMLInputElement | null;
+      if (checkbox?.checked) startAutoRefresh();
+    }
   };
+  document.addEventListener('visibilitychange', handleVisibilityChange);
 
   // Cleanup on navigation
   const cleanup = () => {
     stopAutoRefresh();
-    previousItemIds.clear();
+    previousItemIdsByStatus.clear();
+    document.removeEventListener('visibilitychange', handleVisibilityChange);
+    audioCtx?.close();
+    audioCtx = null;
   };
   window.addEventListener('popstate', cleanup);