wallabicher/web

🎨 Wallamonitor Web Interface

Interfaz web moderna para visualizar y gestionar tu sistema Wallamonitor. 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 Wallamonitor ejecutándose
• Redis (opcional, pero recomendado para mejor rendimiento)

🔧 Instalación

Backend

cd web/backend
npm install

Frontend

cd web/frontend
npm install

🎯 Uso

1. Iniciar el Backend

cd web/backend
npm start

O en modo desarrollo (con auto-reload):

npm run dev

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

2. Iniciar el Frontend

En otra terminal:

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:

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:

PORT=3001 npm start

Puerto del Frontend

Modifica el puerto en frontend/vite.config.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

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:

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

📄 Licencia

MIT