|
|
@@ -2,82 +2,164 @@
|
|
|
import { onMount } from 'svelte';
|
|
|
import OrderCard from '$lib/component/OrderCard.svelte';
|
|
|
import HistoricModal from '$lib/component/HistoricModal.svelte';
|
|
|
+ import { browser } from '$app/environment';
|
|
|
|
|
|
- let pedidos = [];
|
|
|
-
|
|
|
+ let pedidosAtivos = [];
|
|
|
+ let pedidosConcluidos = [];
|
|
|
+ let company = null;
|
|
|
+ let token = null;
|
|
|
let mostrarHistorico = false;
|
|
|
+ let oldData = 0;
|
|
|
|
|
|
- const abrirHistorico = () => {
|
|
|
- mostrarHistorico = true;
|
|
|
- };
|
|
|
+ if (browser) {
|
|
|
+ token = localStorage.getItem('token');
|
|
|
+ company = Number(localStorage.getItem('company'));
|
|
|
+ }
|
|
|
|
|
|
- const fecharHistorico = () => {
|
|
|
- mostrarHistorico = false;
|
|
|
- };
|
|
|
+ const abrirHistorico = () => (mostrarHistorico = true);
|
|
|
+ const fecharHistorico = () => (mostrarHistorico = false);
|
|
|
|
|
|
- // Marca pedido como concluído (vai para o histórico)
|
|
|
- function handlePedidoPronto(event) {
|
|
|
- const pedidoAtualizado = event.detail;
|
|
|
- pedidos = pedidos.map((pedido) =>
|
|
|
- pedido.mesa === pedidoAtualizado.mesa ? { ...pedido, status: 'concluido' } : pedido
|
|
|
- );
|
|
|
- }
|
|
|
+ async function atualizarFlagItem(order_item_id) {
|
|
|
+ try {
|
|
|
+ const myHeaders = new Headers();
|
|
|
+ myHeaders.append('Authorization', `Bearer ${token}`);
|
|
|
+ myHeaders.append('Content-Type', 'application/json');
|
|
|
+
|
|
|
+ const raw = JSON.stringify({
|
|
|
+ company_id: company,
|
|
|
+ order_item_id
|
|
|
+ });
|
|
|
+
|
|
|
+ const requestOptions = {
|
|
|
+ method: 'POST',
|
|
|
+ headers: myHeaders,
|
|
|
+ body: raw,
|
|
|
+ redirect: 'follow'
|
|
|
+ };
|
|
|
+
|
|
|
+ const resp = await fetch('https://dev2.mixtech.dev.br/order_item/update', requestOptions);
|
|
|
+ const data = await resp.text();
|
|
|
|
|
|
- // Volta pedido do histórico para andamento (volta pra lista)
|
|
|
- function handleVoltarAndamento(event) {
|
|
|
- const pedidoAlvo = event.detail;
|
|
|
- pedidos = pedidos.map((pedido) =>
|
|
|
- pedido.mesa === pedidoAlvo.mesa ? { ...pedido, status: 'andamento' } : pedido
|
|
|
- );
|
|
|
+ await fetchItems();
|
|
|
+ } catch (err) {
|
|
|
+ console.error('Erro ao atualizar item:', err);
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- // ⚡ Carrega pedidos do "backend"
|
|
|
- onMount(async () => {
|
|
|
+ async function fetchItems() {
|
|
|
try {
|
|
|
- const response = await fetch('https://counter.mixtech.dev.br/dashboard/kitchen');
|
|
|
- const data = await response.json();
|
|
|
- pedidos = data;
|
|
|
+ const myHeaders = new Headers();
|
|
|
+ myHeaders.append('Authorization', `Bearer ${token}`);
|
|
|
+ myHeaders.append('Content-Type', 'application/json');
|
|
|
+
|
|
|
+ const raw = JSON.stringify({ company_id: company });
|
|
|
+
|
|
|
+ const requestOptions = {
|
|
|
+ method: 'POST',
|
|
|
+ headers: myHeaders,
|
|
|
+ body: raw,
|
|
|
+ redirect: 'follow'
|
|
|
+ };
|
|
|
+
|
|
|
+ const response = await fetch('https://dev2.mixtech.dev.br/kitchen/get', requestOptions);
|
|
|
+ if (!response.ok) {
|
|
|
+ console.error('Erro na resposta do servidor:', response.status, response.statusText);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const ordersResult = await response.json();
|
|
|
+
|
|
|
+ const totalItems = (ordersResult.data || []).reduce((acc, pedido) => {
|
|
|
+ return acc + (pedido.items ? pedido.items.length : 0);
|
|
|
+ }, 0);
|
|
|
+
|
|
|
+ if (totalItems > oldData) {
|
|
|
+ const audio = new Audio('/som.mp3');
|
|
|
+ audio.play().catch((e) => console.warn('Erro ao tocar som:', e));
|
|
|
+ }
|
|
|
+ oldData = totalItems;
|
|
|
+
|
|
|
+ pedidosAtivos = [];
|
|
|
+ pedidosConcluidos = [];
|
|
|
+
|
|
|
+ (ordersResult.data || []).forEach((p) => {
|
|
|
+ const itensAndamento = p.items
|
|
|
+ .filter((i) => i.order_item_flag === 'a')
|
|
|
+ .map((i) => ({
|
|
|
+ id: i.order_item_id,
|
|
|
+ nome: i.product_name,
|
|
|
+ comanda_nome: i.order_name,
|
|
|
+ observacao: i.kitchen_note?.trim() || null
|
|
|
+ }));
|
|
|
+
|
|
|
+ const itensProntos = p.items
|
|
|
+ .filter((i) => i.order_item_flag === 'p')
|
|
|
+ .map((i) => ({
|
|
|
+ id: i.order_item_id,
|
|
|
+ nome: i.product_name,
|
|
|
+ comanda_nome: i.order_name,
|
|
|
+ observacao: i.kitchen_note?.trim() || null
|
|
|
+ }));
|
|
|
+
|
|
|
+ if (itensAndamento.length > 0) {
|
|
|
+ pedidosAtivos.push({
|
|
|
+ id: p.order_id,
|
|
|
+ mesa: p.table_id,
|
|
|
+ comanda_nome: p.order_name,
|
|
|
+ items: itensAndamento
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ if (itensProntos.length > 0) {
|
|
|
+ pedidosConcluidos.push({
|
|
|
+ id: p.order_id,
|
|
|
+ mesa: p.table_id,
|
|
|
+ comanda_nome: p.order_name,
|
|
|
+ items: itensProntos
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
} catch (error) {
|
|
|
console.error('Erro ao carregar pedidos:', error);
|
|
|
-
|
|
|
- // Fallback local caso falhe
|
|
|
- pedidos = [
|
|
|
- { mesa: '01', itens: ['Coca', 'X-Burguer'], status: 'pendente' },
|
|
|
- { mesa: '02', itens: ['Água', 'Batata'], status: 'andamento' },
|
|
|
- { mesa: '03', itens: ['Cerveja', 'Sopa'], status: 'pendente' },
|
|
|
- { mesa: '04', itens: ['Suco', 'Lasanha'], status: 'concluido' }
|
|
|
- ];
|
|
|
}
|
|
|
- });
|
|
|
-
|
|
|
- // Lista apenas pedidos não concluídos
|
|
|
- $: pedidosAtivos = pedidos.filter((p) => p.status !== 'concluido');
|
|
|
+ }
|
|
|
|
|
|
- // Lista de pedidos concluídos para o histórico
|
|
|
- $: pedidosConcluidos = pedidos.filter((p) => p.status === 'concluido');
|
|
|
+ onMount(() => {
|
|
|
+ fetchItems();
|
|
|
+ setInterval(fetchItems, 5000);
|
|
|
+ });
|
|
|
</script>
|
|
|
|
|
|
-<main class="relative rounded-md bg-gray-800 p-4 text-white">
|
|
|
- <!-- Botão para abrir histórico -->
|
|
|
- <div class="absolute right-4 top-4">
|
|
|
- <button class="text-md rounded-md bg-yellow-600 p-1 text-black" on:click={abrirHistorico}>
|
|
|
+<main class="relative rounded-xl bg-gray-800 p-6 text-white shadow-lg">
|
|
|
+ <h1 class="mb-6 text-3xl font-bold">Cozinha ao vivo</h1>
|
|
|
+
|
|
|
+ <div class="absolute right-6 top-6">
|
|
|
+ <button
|
|
|
+ class="h-12 w-40 rounded-lg bg-yellow-400 font-semibold text-black shadow-md transition-colors duration-200 hover:bg-yellow-300"
|
|
|
+ on:click={abrirHistorico}
|
|
|
+ >
|
|
|
Ver histórico
|
|
|
</button>
|
|
|
</div>
|
|
|
|
|
|
- <!-- Lista de pedidos ativos -->
|
|
|
- <div class="mt-10 space-y-4">
|
|
|
- {#each pedidosAtivos as pedido (pedido.mesa)}
|
|
|
- <OrderCard {pedido} on:pedidoPronto={handlePedidoPronto} />
|
|
|
+ <div class="mt-20 space-y-6">
|
|
|
+ {#each pedidosAtivos as pedido (pedido.id)}
|
|
|
+ <OrderCard
|
|
|
+ {pedido}
|
|
|
+ class="rounded-lg border border-gray-700 bg-gray-800 p-4 shadow-lg transition-colors duration-200 hover:bg-gray-700"
|
|
|
+ on:marcarPronto={(e) => {
|
|
|
+ e.detail.forEach((id) => atualizarFlagItem(id));
|
|
|
+ }}
|
|
|
+ />
|
|
|
{/each}
|
|
|
</div>
|
|
|
|
|
|
- <!-- Modal de histórico -->
|
|
|
{#if mostrarHistorico}
|
|
|
<HistoricModal
|
|
|
pedidos={pedidosConcluidos}
|
|
|
on:close={fecharHistorico}
|
|
|
- on:voltarAndamento={handleVoltarAndamento}
|
|
|
+ on:voltarAndamento={(e) => atualizarFlagItem(e.detail)}
|
|
|
+ class="rounded-xl shadow-2xl"
|
|
|
/>
|
|
|
{/if}
|
|
|
</main>
|
gdias