# 🎨 Wallabicher Web Interface

Interfaz web moderna para visualizar y gestionar tu sistema Wallabicher. Construida con **Node.js**, **Express**, **Vue 3** y **Tailwind CSS**.

## 🚀 Características

- **Dashboard en tiempo real** con estadísticas y métricas
- **Visualización de artículos** notificados con filtros por plataforma
- **Gestión de favoritos** con interfaz intuitiva
- **Configuración de workers** desde la interfaz web
- **Visualización de logs** del sistema en tiempo real
- **Actualizaciones en tiempo real** mediante WebSockets
- **Diseño responsive** y moderno con Tailwind CSS

## 📋 Requisitos Previos

- Node.js 18+ y npm
- El sistema Python de Wallabicher ejecutándose
- Redis (opcional, pero recomendado para mejor rendimiento)

## 🔧 Instalación

### Backend

```bash
cd web/backend
npm install
```

### Frontend

```bash
cd web/frontend
npm install
```

## 🎯 Uso

### 1. Iniciar el Backend

```bash
cd web/backend
npm start
```

O en modo desarrollo (con auto-reload):

```bash
npm run dev
```

El backend se ejecutará en `http://localhost:3001`

### 2. Iniciar el Frontend

En otra terminal:

```bash
cd web/frontend
npm run dev
```

El frontend se ejecutará en `http://localhost:3000`

### 3. Acceder a la Interfaz

Abre tu navegador en `http://localhost:3000`

## 📁 Estructura del Proyecto

```
web/
├── backend/
│   ├── server.js          # Servidor Express con WebSockets
│   └── package.json
└── frontend/
    ├── src/
    │   ├── views/         # Vistas principales
    │   │   ├── Dashboard.vue
    │   │   ├── Articles.vue
    │   │   ├── Favorites.vue
    │   │   ├── Workers.vue
    │   │   └── Logs.vue
    │   ├── services/
    │   │   └── api.js      # Cliente API
    │   ├── App.vue         # Componente principal
    │   ├── main.js         # Punto de entrada
    │   └── style.css       # Estilos globales
    ├── index.html
    ├── vite.config.js
    └── package.json
```

## 🔌 API Endpoints

### Estadísticas
- `GET /api/stats` - Obtener estadísticas generales

### Workers
- `GET /api/workers` - Obtener lista de workers
- `PUT /api/workers` - Actualizar configuración de workers

### Favoritos
- `GET /api/favorites` - Obtener favoritos
- `POST /api/favorites` - Añadir favorito
- `DELETE /api/favorites/:platform/:id` - Eliminar favorito

### Artículos
- `GET /api/articles` - Obtener artículos notificados (con paginación)

### Logs
- `GET /api/logs` - Obtener logs del sistema

### Configuración
- `GET /api/config` - Obtener configuración (sin tokens)

## 🔄 WebSockets

El servidor expone un WebSocket en `ws://localhost:3001` que envía actualizaciones en tiempo real:

- `workers_updated` - Cuando se actualiza la configuración de workers
- `favorites_updated` - Cuando cambian los favoritos
- `logs_updated` - Cuando se actualizan los logs

## 🎨 Personalización

### Colores

Los colores se pueden personalizar en `frontend/tailwind.config.js`:

```js
colors: {
  primary: {
    // Personaliza los colores primarios
  }
}
```

### Puerto del Backend

Cambia el puerto del backend modificando la variable `PORT` en `backend/server.js` o usando la variable de entorno:

```bash
PORT=3001 npm start
```

### Puerto del Frontend

Modifica el puerto en `frontend/vite.config.js`:

```js
server: {
  port: 3000,
}
```

## 🐛 Solución de Problemas

### El backend no se conecta a Redis

- Verifica que Redis esté ejecutándose
- Revisa la configuración en `config.yaml`
- El sistema funcionará sin Redis, pero con funcionalidad limitada

### No se ven los artículos

- Asegúrate de que el sistema Python esté ejecutándose
- Verifica que Redis esté configurado si usas cache Redis
- Revisa los logs del backend

### WebSocket no conecta

- Verifica que el backend esté ejecutándose
- Revisa la consola del navegador para errores
- Asegúrate de que no haya un firewall bloqueando el puerto

## 📝 Notas

- La interfaz web lee el archivo `workers.json` del directorio raíz del proyecto. Los favoritos se almacenan en Redis.
- Los cambios en la interfaz web se reflejan automáticamente en los archivos JSON
- El sistema Python debe estar ejecutándose para que los workers funcionen
- Los artículos notificados solo están disponibles si usas Redis como cache

## 🚀 Producción

### Build del Frontend

```bash
cd web/frontend
npm run build
```

Los archivos estáticos se generarán en `web/frontend/dist/`

### Servir el Frontend desde el Backend

Puedes modificar `backend/server.js` para servir los archivos estáticos:

```js
import { join } from 'path';
app.use(express.static(join(__dirname, '../frontend/dist')));
```

## 📄 Licencia

MIT