# Использование WebSocket уведомлений

## Структура

Система уведомлений использует:
- **websocketStore.js** - Pinia store для управления подписками на каналы Laravel Echo
- **Laravel Echo + Socket.io** - для real-time коммуникации
- **События Laravel** - `NewOrderCreated` и `OrderStatusUpdated`

## Настройка

### Backend

События автоматически отправляются:
- `NewOrderCreated` - при создании нового заказа в `OrderController`
- `OrderStatusUpdated` - при изменении статуса заказа в `AdminOrderController`

### Frontend

#### Инициализация

```javascript
import { useWebsocketStore } from '@/stores/websocketStore';

const websocketStore = useWebsocketStore();

// Инициализация подключения
websocketStore.initialize();
```

#### Подписка на события

```javascript
// Обработчик нового заказа
const handleNewOrder = (data) => {
    console.log('Новый заказ:', data);
    // data.order содержит информацию о заказе
};

// Обработчик изменения статуса
const handleOrderStatusUpdated = (data) => {
    console.log('Статус обновлен:', data);
    // data.order содержит обновленную информацию о заказе
};

// Подписка на события
websocketStore.subscribe('.order.created', handleNewOrder);
websocketStore.subscribe('.order.status.updated', handleOrderStatusUpdated);
```

**Важно:** Для событий с `broadcastAs()` нужно использовать имя с точкой в начале (`.order.created`).

#### Отписка от событий

```javascript
onUnmounted(() => {
    websocketStore.unsubscribe('.order.created');
    websocketStore.unsubscribe('.order.status.updated');
});
```

## Структура данных событий

### NewOrderCreated

```javascript
{
    order: {
        id: number,
        order_number: string,
        customer_name: string,
        customer_phone: string,
        delivery_address: string,
        total: number,
        status: string,
        payment_status: string,
        created_at: string,
        items: Array<{
            dish_name: string,
            quantity: number,
            subtotal: number
        }>
    }
}
```

### OrderStatusUpdated

```javascript
{
    order: {
        id: number,
        order_number: string,
        customer_name: string,
        customer_phone: string,
        total: number,
        status: string,
        payment_status: string,
        updated_at: string
    },
    old_status: string
}
```

## Примеры использования

### На странице Orders.vue

```javascript
import { ref, onMounted, onUnmounted } from 'vue';
import { useRoute } from 'vue-router';
import { useWebsocketStore } from '@/stores/websocketStore';

const route = useRoute();
const websocketStore = useWebsocketStore();
const currentPage = ref(1);

const handleNewOrder = (data) => {
    // Если пользователь на странице Orders, обновляем список
    if (route.path === '/admin/orders') {
        loadOrders(currentPage.value);
    }
};

const handleOrderStatusUpdated = (data) => {
    // Обновляем статус в списке
    if (route.path === '/admin/orders') {
        const order = orders.value.find(o => o.id === data.order.id);
        if (order) {
            order.status = data.order.status;
        }
    }
};

onMounted(() => {
    websocketStore.initialize();
    websocketStore.subscribe('.order.created', handleNewOrder);
    websocketStore.subscribe('.order.status.updated', handleOrderStatusUpdated);
});

onUnmounted(() => {
    websocketStore.unsubscribe('.order.created');
    websocketStore.unsubscribe('.order.status.updated');
});
```

### В AdminHeader.vue (для уведомлений)

```javascript
import { useRoute } from 'vue-router';
import { useWebsocketStore } from '@/stores/websocketStore';
import { useAlertStore } from '@/stores/alertStore';
import { useI18n } from 'vue-i18n';

const route = useRoute();
const websocketStore = useWebsocketStore();
const alertStore = useAlertStore();
const { t } = useI18n();

const handleNewOrder = (data) => {
    // Если пользователь НЕ на странице Orders, показываем уведомление
    if (route.path !== '/admin/orders') {
        const message = t('admin.new_order_notification', { 
            orderNumber: data.order.order_number 
        });
        alertStore.showAlert(message, 'success');
    }
};

const handleOrderStatusUpdated = (data) => {
    if (route.path !== '/admin/orders') {
        const statusText = t(`order.status_${data.order.status}`);
        const message = t('admin.order_status_updated_notification', {
            orderNumber: data.order.order_number,
            status: statusText
        });
        alertStore.showAlert(message, 'success');
    }
};

onMounted(() => {
    websocketStore.initialize();
    websocketStore.subscribe('.order.created', handleNewOrder);
    websocketStore.subscribe('.order.status.updated', handleOrderStatusUpdated);
});
```

## Отладка

В консоли браузера будут логи:
- `✅ Subscribed to event: .order.created` - успешная подписка
- `📨 Event received: .order.created` - получено событие
- `📦 Новый заказ получен:` - обработка нового заказа
- `🔄 Статус заказа обновлен:` - обработка изменения статуса

## Troubleshooting

1. **События не приходят:**
   - Проверьте, что Laravel Echo Server запущен
   - Проверьте, что Redis запущен
   - Проверьте консоль браузера на ошибки
   - Убедитесь, что токен авторизации установлен

2. **Подписка не работает:**
   - Убедитесь, что используется правильное имя события с точкой (`.order.created`)
   - Проверьте, что канал инициализирован (`websocketStore.initialize()`)
   - Проверьте права доступа пользователя (должен быть admin или manager)

3. **Данные не приходят:**
   - Проверьте структуру данных в `broadcastWith()` методах событий
   - Убедитесь, что события правильно отправляются с бэкенда