add landing and subscription plans
Signed-off-by: Omar Sánchez Pizarro <omar.sanchez@pistacero.net>
This commit is contained in:
Omar Sánchez Pizarro
804
web/dashboard/src/views/Workers.vue
Normal file
804
web/dashboard/src/views/Workers.vue
Normal file
@@ -0,0 +1,804 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3 sm:gap-4 mb-4 sm:mb-6">
|
||||
<div>
|
||||
<h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100">Gestión de Workers</h1>
|
||||
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
||||
Tus workers personalizados
|
||||
<span v-if="currentUser" class="font-medium text-gray-700 dark:text-gray-300">(Usuario: {{ currentUser }})</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button @click="showGeneralModal = true" class="btn btn-secondary text-xs sm:text-sm">
|
||||
⚙️ Configuración General
|
||||
</button>
|
||||
<button @click="showAddModal = true" class="btn btn-primary text-xs sm:text-sm whitespace-nowrap">
|
||||
+ Añadir Worker
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="text-center py-12">
|
||||
<div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
|
||||
<p class="mt-2 text-gray-600 dark:text-gray-400">Cargando workers...</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="space-y-4">
|
||||
<!-- Workers activos -->
|
||||
<div v-if="activeWorkers.length > 0">
|
||||
<h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Workers Activos ({{ activeWorkers.length }})</h2>
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
<div
|
||||
v-for="(worker, index) in activeWorkers"
|
||||
:key="index"
|
||||
class="card hover:shadow-lg transition-shadow"
|
||||
>
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center space-x-2 mb-3">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">{{ worker.name }}</h3>
|
||||
<span class="px-2 py-1 text-xs font-semibold rounded bg-green-100 text-green-800">
|
||||
Activo
|
||||
</span>
|
||||
<span class="px-2 py-1 text-xs font-semibold rounded" :class="worker.platform === 'wallapop' ? 'bg-blue-100 text-blue-800' : 'bg-green-100 text-green-800'">
|
||||
{{ (worker.platform || 'wallapop').toUpperCase() }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 text-xs sm:text-sm mb-3">
|
||||
<div>
|
||||
<span class="text-gray-600 block mb-1">Búsqueda:</span>
|
||||
<p class="font-medium">{{ worker.search_query }}</p>
|
||||
</div>
|
||||
<div v-if="worker.min_price || worker.max_price">
|
||||
<span class="text-gray-600 block mb-1">Precio:</span>
|
||||
<p class="font-medium">
|
||||
{{ worker.min_price || '0' }}€ - {{ worker.max_price || '∞' }}€
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="worker.thread_id">
|
||||
<span class="text-gray-600 block mb-1">Thread ID:</span>
|
||||
<p class="font-medium">{{ worker.thread_id }}</p>
|
||||
</div>
|
||||
<div v-if="worker.latitude && worker.longitude">
|
||||
<span class="text-gray-600 block mb-1">Ubicación:</span>
|
||||
<p class="font-medium">{{ worker.latitude }}, {{ worker.longitude }}</p>
|
||||
</div>
|
||||
<div v-if="worker.max_distance">
|
||||
<span class="text-gray-600 block mb-1">Distancia Máx:</span>
|
||||
<p class="font-medium">{{ worker.max_distance }} km</p>
|
||||
</div>
|
||||
<div v-if="worker.check_every">
|
||||
<span class="text-gray-600 block mb-1">Check cada:</span>
|
||||
<p class="font-medium">{{ worker.check_every }}s</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filtros aplicados -->
|
||||
<div v-if="hasFilters(worker)" class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
|
||||
<details class="text-xs">
|
||||
<summary class="cursor-pointer text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 font-medium">
|
||||
Ver filtros ({{ countFilters(worker) }})
|
||||
</summary>
|
||||
<div class="mt-2 space-y-1 text-gray-600 dark:text-gray-400">
|
||||
<div v-if="worker.title_exclude?.length" class="flex items-start">
|
||||
<span class="font-medium mr-2">Excluir título:</span>
|
||||
<span>{{ worker.title_exclude.join(', ') }}</span>
|
||||
</div>
|
||||
<div v-if="worker.description_exclude?.length" class="flex items-start">
|
||||
<span class="font-medium mr-2">Excluir descripción:</span>
|
||||
<span>{{ worker.description_exclude.join(', ') }}</span>
|
||||
</div>
|
||||
<div v-if="worker.title_must_include?.length" class="flex items-start">
|
||||
<span class="font-medium mr-2">Requerir título:</span>
|
||||
<span>{{ worker.title_must_include.join(', ') }}</span>
|
||||
</div>
|
||||
<div v-if="worker.description_must_include?.length" class="flex items-start">
|
||||
<span class="font-medium mr-2">Requerir descripción:</span>
|
||||
<span>{{ worker.description_must_include.join(', ') }}</span>
|
||||
</div>
|
||||
<div v-if="worker.title_first_word_exclude?.length" class="flex items-start">
|
||||
<span class="font-medium mr-2">Excluir primera palabra:</span>
|
||||
<span>{{ worker.title_first_word_exclude.join(', ') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 sm:space-x-2 sm:ml-4 mt-3 sm:mt-0">
|
||||
<button
|
||||
@click="editWorker(worker, activeWorkersIndex(index))"
|
||||
class="btn btn-secondary text-xs sm:text-sm flex-1 sm:flex-none"
|
||||
>
|
||||
✏️ Editar
|
||||
</button>
|
||||
<button
|
||||
@click="deleteWorker(worker.name)"
|
||||
class="btn btn-danger text-xs sm:text-sm flex-1 sm:flex-none"
|
||||
>
|
||||
🗑️ Eliminar
|
||||
</button>
|
||||
<button
|
||||
@click="disableWorker(worker)"
|
||||
class="btn btn-secondary text-xs sm:text-sm flex-1 sm:flex-none"
|
||||
>
|
||||
⏸️ Desactivar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Workers desactivados -->
|
||||
<div v-if="disabledWorkers.length > 0" class="mt-6 sm:mt-8">
|
||||
<h2 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3 sm:mb-4">Workers Desactivados ({{ disabledWorkers.length }})</h2>
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
<div
|
||||
v-for="(worker, index) in disabledWorkers"
|
||||
:key="index"
|
||||
class="card opacity-60 hover:opacity-80 transition-opacity"
|
||||
>
|
||||
<div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
|
||||
<div class="flex-1">
|
||||
<div class="flex flex-wrap items-center gap-2 mb-2">
|
||||
<h3 class="text-base sm:text-lg font-semibold text-gray-900 dark:text-gray-100">{{ worker.name }}</h3>
|
||||
<span class="px-2 py-1 text-xs font-semibold rounded bg-red-100 text-red-800">
|
||||
Desactivado
|
||||
</span>
|
||||
<span class="px-2 py-1 text-xs font-semibold rounded" :class="worker.platform === 'wallapop' ? 'bg-blue-100 text-blue-800' : 'bg-green-100 text-green-800'">
|
||||
{{ (worker.platform || 'wallapop').toUpperCase() }}
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">{{ worker.search_query }}</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 sm:space-x-2 sm:ml-4">
|
||||
<button
|
||||
@click="editWorker(worker, disabledWorkersIndex(index))"
|
||||
class="btn btn-secondary text-xs sm:text-sm flex-1 sm:flex-none"
|
||||
>
|
||||
✏️ Editar
|
||||
</button>
|
||||
<button
|
||||
@click="enableWorker(worker)"
|
||||
class="btn btn-primary text-xs sm:text-sm flex-1 sm:flex-none"
|
||||
>
|
||||
▶️ Activar
|
||||
</button>
|
||||
<button
|
||||
@click="deleteWorker(worker.name)"
|
||||
class="btn btn-danger text-xs sm:text-sm flex-1 sm:flex-none"
|
||||
>
|
||||
🗑️ Eliminar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="activeWorkers.length === 0 && disabledWorkers.length === 0" class="card text-center py-12">
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-2">No tienes workers configurados</p>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 mb-4">
|
||||
Los workers son personales para cada usuario. Cada usuario gestiona sus propias búsquedas.
|
||||
</p>
|
||||
<button @click="showAddModal = true" class="btn btn-primary mt-4">
|
||||
+ Crear primer worker
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal para añadir/editar worker -->
|
||||
<div
|
||||
v-if="showAddModal || editingWorker"
|
||||
class="fixed inset-0 bg-black bg-opacity-50 dark:bg-opacity-70 flex items-center justify-center z-50 p-2 sm:p-4"
|
||||
@click.self="closeModal"
|
||||
>
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 sm:p-6 max-w-4xl w-full max-h-[95vh] sm:max-h-[90vh] overflow-y-auto">
|
||||
<h2 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100 mb-3 sm:mb-4">
|
||||
{{ editingWorker ? 'Editar Worker' : 'Añadir Worker' }}
|
||||
</h2>
|
||||
<form @submit.prevent="saveWorker" class="space-y-6">
|
||||
<!-- Información básica -->
|
||||
<div class="border-b border-gray-200 dark:border-gray-700 pb-3 sm:pb-4">
|
||||
<h3 class="text-base sm:text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3 sm:mb-4">Información Básica</h3>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Nombre *</label>
|
||||
<input v-model="workerForm.name" type="text" class="input" required />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Plataforma</label>
|
||||
<select v-model="workerForm.platform" class="input">
|
||||
<option value="wallapop">Wallapop</option>
|
||||
<option value="vinted">Vinted</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="md:col-span-2">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Búsqueda *</label>
|
||||
<input v-model="workerForm.search_query" type="text" class="input" required placeholder="ej: playstation 1" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Precios y Thread -->
|
||||
<div class="border-b border-gray-200 dark:border-gray-700 pb-3 sm:pb-4">
|
||||
<h3 class="text-base sm:text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3 sm:mb-4">Precios y Notificaciones</h3>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Precio Mínimo (€)</label>
|
||||
<input v-model.number="workerForm.min_price" type="number" class="input" min="0" step="0.01" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Precio Máximo (€)</label>
|
||||
<input v-model.number="workerForm.max_price" type="number" class="input" min="0" step="0.01" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Thread ID (Telegram)</label>
|
||||
<div class="flex gap-2">
|
||||
<input v-model.number="workerForm.thread_id" type="number" class="input flex-1" placeholder="Ej: 8" />
|
||||
<button
|
||||
type="button"
|
||||
@click="loadTelegramThreads"
|
||||
:disabled="loadingThreads"
|
||||
class="btn btn-secondary text-sm whitespace-nowrap"
|
||||
>
|
||||
{{ loadingThreads ? 'Cargando...' : '📋 Obtener Threads' }}
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Opcional: ID del hilo donde enviar notificaciones</p>
|
||||
|
||||
<!-- Lista de threads disponibles -->
|
||||
<div v-if="availableThreads.length > 0" class="mt-2 p-2 bg-gray-50 dark:bg-gray-700 rounded border border-gray-200 dark:border-gray-600 max-h-40 overflow-y-auto">
|
||||
<p class="text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">Threads disponibles:</p>
|
||||
<div
|
||||
v-for="thread in availableThreads"
|
||||
:key="thread.id"
|
||||
@click="selectThread(thread.id)"
|
||||
class="flex items-center justify-between p-2 mb-1 bg-white dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-600 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
|
||||
>
|
||||
<div class="flex-1">
|
||||
<span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ thread.name }}</span>
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400 ml-2">ID: {{ thread.id }}</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
@click.stop="selectThread(thread.id)"
|
||||
class="text-xs text-primary-600 hover:text-primary-700 font-medium"
|
||||
>
|
||||
Usar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mensaje informativo si no hay threads -->
|
||||
<div v-if="threadsMessage" class="mt-2 p-2 bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded">
|
||||
<p class="text-xs text-blue-800 dark:text-blue-300">{{ threadsMessage }}</p>
|
||||
<p v-if="threadsInfo" class="text-xs text-blue-700 dark:text-blue-400 mt-1">{{ threadsInfo }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ubicación -->
|
||||
<div class="border-b border-gray-200 pb-4">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Búsqueda Local (Opcional)</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Latitud</label>
|
||||
<input v-model.number="workerForm.latitude" type="number" class="input" step="any" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Longitud</label>
|
||||
<input v-model.number="workerForm.longitude" type="number" class="input" step="any" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Distancia Máxima (km)</label>
|
||||
<input v-model.number="workerForm.max_distance" type="number" class="input" min="0" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filtros de exclusión -->
|
||||
<div class="border-b border-gray-200 pb-4">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Filtros de Exclusión</h3>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Excluir palabras del título</label>
|
||||
<textarea
|
||||
v-model="workerForm.title_exclude_text"
|
||||
class="input"
|
||||
rows="3"
|
||||
placeholder="Una palabra por línea o separadas por comas"
|
||||
></textarea>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Si aparece alguna palabra, se excluye el artículo</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Excluir palabras de la descripción</label>
|
||||
<textarea
|
||||
v-model="workerForm.description_exclude_text"
|
||||
class="input"
|
||||
rows="3"
|
||||
placeholder="Una palabra por línea o separadas por comas"
|
||||
></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Excluir si primera palabra del título es</label>
|
||||
<textarea
|
||||
v-model="workerForm.title_first_word_exclude_text"
|
||||
class="input"
|
||||
rows="2"
|
||||
placeholder="Una palabra por línea o separadas por comas"
|
||||
></textarea>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Ej: "Reacondicionado", "Vendido", etc.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filtros de inclusión -->
|
||||
<div class="border-b border-gray-200 pb-4">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Filtros de Inclusión (Requeridos)</h3>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Palabras requeridas en el título</label>
|
||||
<textarea
|
||||
v-model="workerForm.title_must_include_text"
|
||||
class="input"
|
||||
rows="3"
|
||||
placeholder="Una palabra por línea o separadas por comas"
|
||||
></textarea>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">TODAS las palabras deben aparecer</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Palabras requeridas en la descripción</label>
|
||||
<textarea
|
||||
v-model="workerForm.description_must_include_text"
|
||||
class="input"
|
||||
rows="3"
|
||||
placeholder="Una palabra por línea o separadas por comas"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Configuración avanzada -->
|
||||
<div class="border-b border-gray-200 pb-4">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Configuración Avanzada</h3>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Intervalo de verificación (segundos)</label>
|
||||
<input v-model.number="workerForm.check_every" type="number" class="input" min="1" />
|
||||
<p class="text-xs text-gray-500 mt-1">Cada cuántos segundos se actualiza la búsqueda (por defecto 30s)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col-reverse sm:flex-row justify-end gap-2 sm:space-x-2 pt-4">
|
||||
<button type="button" @click="closeModal" class="btn btn-secondary text-sm sm:text-base">
|
||||
Cancelar
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary text-sm sm:text-base">
|
||||
Guardar
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal para configuración general -->
|
||||
<div
|
||||
v-if="showGeneralModal"
|
||||
class="fixed inset-0 bg-black bg-opacity-50 dark:bg-opacity-70 flex items-center justify-center z-50 p-2 sm:p-4"
|
||||
@click.self="closeGeneralModal"
|
||||
>
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 sm:p-6 max-w-2xl w-full max-h-[95vh] sm:max-h-[90vh] overflow-y-auto">
|
||||
<h2 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100 mb-3 sm:mb-4">Configuración General</h2>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||
Estas configuraciones se aplican a todos tus workers.
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">Los filtros globales se combinan con los filtros específicos de cada worker.</span>
|
||||
</p>
|
||||
<form @submit.prevent="saveGeneralConfig" class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Excluir palabras del título (global)</label>
|
||||
<textarea
|
||||
v-model="generalForm.title_exclude_text"
|
||||
class="input"
|
||||
rows="4"
|
||||
placeholder="Una palabra por línea o separadas por comas"
|
||||
></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Excluir palabras de la descripción (global)</label>
|
||||
<textarea
|
||||
v-model="generalForm.description_exclude_text"
|
||||
class="input"
|
||||
rows="4"
|
||||
placeholder="Una palabra por línea o separadas por comas"
|
||||
></textarea>
|
||||
</div>
|
||||
<div class="flex flex-col-reverse sm:flex-row justify-end gap-2 sm:space-x-2 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<button type="button" @click="closeGeneralModal" class="btn btn-secondary text-sm sm:text-base">
|
||||
Cancelar
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary text-sm sm:text-base">
|
||||
Guardar
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue';
|
||||
import api from '../services/api';
|
||||
import authService from '../services/auth';
|
||||
|
||||
const workers = ref({ items: [], disabled: [], general: {} });
|
||||
const loading = ref(true);
|
||||
const showAddModal = ref(false);
|
||||
const showGeneralModal = ref(false);
|
||||
const editingWorker = ref(null);
|
||||
const currentUser = ref(authService.getUsername() || null);
|
||||
|
||||
const activeWorkers = computed(() => {
|
||||
return workers.value.items?.filter(
|
||||
w => {
|
||||
const workerId = w.id || w.worker_id;
|
||||
const workerName = w.name;
|
||||
return !workers.value.disabled?.includes(workerId) && !workers.value.disabled?.includes(workerName);
|
||||
}
|
||||
) || [];
|
||||
});
|
||||
|
||||
const disabledWorkers = computed(() => {
|
||||
return workers.value.items?.filter(
|
||||
w => {
|
||||
const workerId = w.id || w.worker_id;
|
||||
const workerName = w.name;
|
||||
return workers.value.disabled?.includes(workerId) || workers.value.disabled?.includes(workerName);
|
||||
}
|
||||
) || [];
|
||||
});
|
||||
|
||||
function activeWorkersIndex(index) {
|
||||
return workers.value.items?.findIndex(w => w.name === activeWorkers.value[index]?.name) ?? -1;
|
||||
}
|
||||
|
||||
function disabledWorkersIndex(index) {
|
||||
return workers.value.items?.findIndex(w => w.name === disabledWorkers.value[index]?.name) ?? -1;
|
||||
}
|
||||
|
||||
function hasFilters(worker) {
|
||||
return !!(worker.title_exclude?.length || worker.description_exclude?.length ||
|
||||
worker.title_must_include?.length || worker.description_must_include?.length ||
|
||||
worker.title_first_word_exclude?.length);
|
||||
}
|
||||
|
||||
function countFilters(worker) {
|
||||
let count = 0;
|
||||
if (worker.title_exclude?.length) count++;
|
||||
if (worker.description_exclude?.length) count++;
|
||||
if (worker.title_must_include?.length) count++;
|
||||
if (worker.description_must_include?.length) count++;
|
||||
if (worker.title_first_word_exclude?.length) count++;
|
||||
return count;
|
||||
}
|
||||
|
||||
function textToArray(text) {
|
||||
if (!text || !text.trim()) return [];
|
||||
return text.split(/\n|,/)
|
||||
.map(s => s.trim())
|
||||
.filter(s => s.length > 0);
|
||||
}
|
||||
|
||||
function arrayToText(arr) {
|
||||
if (!arr || !Array.isArray(arr) || arr.length === 0) return '';
|
||||
return arr.join('\n');
|
||||
}
|
||||
|
||||
const workerForm = ref({
|
||||
name: '',
|
||||
platform: 'wallapop',
|
||||
search_query: '',
|
||||
min_price: null,
|
||||
max_price: null,
|
||||
thread_id: null,
|
||||
latitude: null,
|
||||
longitude: null,
|
||||
max_distance: null,
|
||||
title_exclude_text: '',
|
||||
description_exclude_text: '',
|
||||
title_must_include_text: '',
|
||||
description_must_include_text: '',
|
||||
title_first_word_exclude_text: '',
|
||||
check_every: null,
|
||||
});
|
||||
|
||||
const generalForm = ref({
|
||||
title_exclude_text: '',
|
||||
description_exclude_text: '',
|
||||
});
|
||||
|
||||
const availableThreads = ref([]);
|
||||
const loadingThreads = ref(false);
|
||||
const threadsMessage = ref('');
|
||||
const threadsInfo = ref('');
|
||||
|
||||
async function loadWorkers() {
|
||||
loading.value = true;
|
||||
try {
|
||||
workers.value = await api.getWorkers();
|
||||
// Actualizar formulario general
|
||||
generalForm.value = {
|
||||
title_exclude_text: arrayToText(workers.value.general?.title_exclude || []),
|
||||
description_exclude_text: arrayToText(workers.value.general?.description_exclude || []),
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error cargando workers:', error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadTelegramThreads() {
|
||||
loadingThreads.value = true;
|
||||
availableThreads.value = [];
|
||||
threadsMessage.value = '';
|
||||
threadsInfo.value = '';
|
||||
|
||||
try {
|
||||
const result = await api.getTelegramThreads();
|
||||
|
||||
if (result.success && result.threads && result.threads.length > 0) {
|
||||
availableThreads.value = result.threads;
|
||||
threadsMessage.value = '';
|
||||
threadsInfo.value = '';
|
||||
} else {
|
||||
availableThreads.value = [];
|
||||
threadsMessage.value = result.message || 'No se pudieron obtener los threads automáticamente';
|
||||
threadsInfo.value = result.info || '';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error cargando threads de Telegram:', error);
|
||||
availableThreads.value = [];
|
||||
threadsMessage.value = 'Error al obtener threads de Telegram. Verifica que el bot y el canal estén configurados correctamente.';
|
||||
threadsInfo.value = 'Para obtener el Thread ID manualmente: 1. Haz clic derecho en el tema/hilo en Telegram 2. Selecciona "Copiar enlace del tema" 3. El número al final de la URL es el Thread ID (ej: t.me/c/1234567890/8 → Thread ID = 8)';
|
||||
} finally {
|
||||
loadingThreads.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function selectThread(threadId) {
|
||||
workerForm.value.thread_id = threadId;
|
||||
// Opcional: limpiar la lista después de seleccionar
|
||||
// availableThreads.value = [];
|
||||
}
|
||||
|
||||
function editWorker(worker, index) {
|
||||
editingWorker.value = { worker, index };
|
||||
workerForm.value = {
|
||||
name: worker.name || '',
|
||||
platform: worker.platform || 'wallapop',
|
||||
search_query: worker.search_query || '',
|
||||
min_price: worker.min_price || null,
|
||||
max_price: worker.max_price || null,
|
||||
thread_id: worker.thread_id || null,
|
||||
latitude: worker.latitude || null,
|
||||
longitude: worker.longitude || null,
|
||||
max_distance: worker.max_distance || null,
|
||||
title_exclude_text: arrayToText(worker.title_exclude || []),
|
||||
description_exclude_text: arrayToText(worker.description_exclude || []),
|
||||
title_must_include_text: arrayToText(worker.title_must_include || []),
|
||||
description_must_include_text: arrayToText(worker.description_must_include || []),
|
||||
title_first_word_exclude_text: arrayToText(worker.title_first_word_exclude || []),
|
||||
check_every: worker.check_every || null,
|
||||
};
|
||||
showAddModal.value = true;
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
showAddModal.value = false;
|
||||
editingWorker.value = null;
|
||||
workerForm.value = {
|
||||
name: '',
|
||||
platform: 'wallapop',
|
||||
search_query: '',
|
||||
min_price: null,
|
||||
max_price: null,
|
||||
thread_id: null,
|
||||
latitude: null,
|
||||
longitude: null,
|
||||
max_distance: null,
|
||||
title_exclude_text: '',
|
||||
description_exclude_text: '',
|
||||
title_must_include_text: '',
|
||||
description_must_include_text: '',
|
||||
title_first_word_exclude_text: '',
|
||||
check_every: null,
|
||||
};
|
||||
}
|
||||
|
||||
function closeGeneralModal() {
|
||||
showGeneralModal.value = false;
|
||||
}
|
||||
|
||||
async function saveWorker() {
|
||||
try {
|
||||
const updatedWorkers = {
|
||||
...workers.value,
|
||||
items: [...(workers.value.items || [])],
|
||||
disabled: [...(workers.value.disabled || [])],
|
||||
general: workers.value.general || {}
|
||||
};
|
||||
|
||||
const workerData = {
|
||||
id: editingWorker.value ? (workers.value.items[editingWorker.value.index]?.id || workers.value.items[editingWorker.value.index]?.worker_id || crypto.randomUUID()) : crypto.randomUUID(),
|
||||
name: workerForm.value.name,
|
||||
platform: workerForm.value.platform,
|
||||
search_query: workerForm.value.search_query,
|
||||
...(workerForm.value.min_price !== null && { min_price: workerForm.value.min_price }),
|
||||
...(workerForm.value.max_price !== null && { max_price: workerForm.value.max_price }),
|
||||
...(workerForm.value.thread_id !== null && { thread_id: workerForm.value.thread_id }),
|
||||
...(workerForm.value.latitude !== null && { latitude: workerForm.value.latitude }),
|
||||
...(workerForm.value.longitude !== null && { longitude: workerForm.value.longitude }),
|
||||
...(workerForm.value.max_distance !== null && { max_distance: String(workerForm.value.max_distance) }),
|
||||
...(workerForm.value.check_every !== null && { check_every: workerForm.value.check_every }),
|
||||
...(textToArray(workerForm.value.title_exclude_text).length > 0 && { title_exclude: textToArray(workerForm.value.title_exclude_text) }),
|
||||
...(textToArray(workerForm.value.description_exclude_text).length > 0 && { description_exclude: textToArray(workerForm.value.description_exclude_text) }),
|
||||
...(textToArray(workerForm.value.title_must_include_text).length > 0 && { title_must_include: textToArray(workerForm.value.title_must_include_text) }),
|
||||
...(textToArray(workerForm.value.description_must_include_text).length > 0 && { description_must_include: textToArray(workerForm.value.description_must_include_text) }),
|
||||
...(textToArray(workerForm.value.title_first_word_exclude_text).length > 0 && { title_first_word_exclude: textToArray(workerForm.value.title_first_word_exclude_text) }),
|
||||
};
|
||||
|
||||
if (editingWorker.value) {
|
||||
// Editar worker existente - mantener el ID existente
|
||||
const index = editingWorker.value.index;
|
||||
const existingId = workers.value.items[index]?.id || workers.value.items[index]?.worker_id;
|
||||
if (existingId) {
|
||||
workerData.id = existingId;
|
||||
}
|
||||
updatedWorkers.items[index] = workerData;
|
||||
} else {
|
||||
// Añadir nuevo worker con ID único
|
||||
updatedWorkers.items.push(workerData);
|
||||
}
|
||||
|
||||
await api.updateWorkers(updatedWorkers);
|
||||
await loadWorkers();
|
||||
closeModal();
|
||||
} catch (error) {
|
||||
console.error('Error guardando worker:', error);
|
||||
alert('Error al guardar el worker');
|
||||
}
|
||||
}
|
||||
|
||||
async function saveGeneralConfig() {
|
||||
try {
|
||||
const updatedWorkers = {
|
||||
...workers.value,
|
||||
items: workers.value.items || [],
|
||||
disabled: workers.value.disabled || [],
|
||||
general: {
|
||||
...(textToArray(generalForm.value.title_exclude_text).length > 0 && { title_exclude: textToArray(generalForm.value.title_exclude_text) }),
|
||||
...(textToArray(generalForm.value.description_exclude_text).length > 0 && { description_exclude: textToArray(generalForm.value.description_exclude_text) }),
|
||||
}
|
||||
};
|
||||
|
||||
await api.updateWorkers(updatedWorkers);
|
||||
await loadWorkers();
|
||||
closeGeneralModal();
|
||||
} catch (error) {
|
||||
console.error('Error guardando configuración general:', error);
|
||||
alert('Error al guardar la configuración general');
|
||||
}
|
||||
}
|
||||
|
||||
async function disableWorker(worker) {
|
||||
const workerId = worker.id || worker.worker_id;
|
||||
const workerName = worker.name;
|
||||
if (!confirm(`¿Desactivar el worker "${workerName}"?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const updatedWorkers = {
|
||||
...workers.value,
|
||||
items: workers.value.items || [],
|
||||
disabled: [...(workers.value.disabled || [])]
|
||||
};
|
||||
|
||||
// Usar ID si existe, sino usar nombre (para compatibilidad)
|
||||
const identifier = workerId || workerName;
|
||||
|
||||
// Eliminar cualquier referencia antigua (por nombre o ID)
|
||||
updatedWorkers.disabled = updatedWorkers.disabled.filter(d => d !== workerId && d !== workerName && d !== worker.worker_id);
|
||||
|
||||
if (!updatedWorkers.disabled.includes(identifier)) {
|
||||
updatedWorkers.disabled.push(identifier);
|
||||
}
|
||||
|
||||
await api.updateWorkers(updatedWorkers);
|
||||
await loadWorkers();
|
||||
} catch (error) {
|
||||
console.error('Error desactivando worker:', error);
|
||||
alert('Error al desactivar el worker');
|
||||
}
|
||||
}
|
||||
|
||||
async function enableWorker(worker) {
|
||||
const workerId = worker.id || worker.worker_id;
|
||||
const workerName = worker.name;
|
||||
|
||||
try {
|
||||
const updatedWorkers = {
|
||||
...workers.value,
|
||||
items: workers.value.items || [],
|
||||
disabled: [...(workers.value.disabled || [])].filter(d => d !== workerId && d !== workerName && d !== worker.worker_id)
|
||||
};
|
||||
|
||||
await api.updateWorkers(updatedWorkers);
|
||||
await loadWorkers();
|
||||
} catch (error) {
|
||||
console.error('Error activando worker:', error);
|
||||
alert('Error al activar el worker');
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteWorker(name) {
|
||||
if (!confirm(`¿Eliminar permanentemente el worker "${name}"? Esta acción no se puede deshacer.`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const updatedWorkers = {
|
||||
...workers.value,
|
||||
items: (workers.value.items || []).filter(w => w.name !== name),
|
||||
disabled: (workers.value.disabled || []).filter(n => n !== name),
|
||||
general: workers.value.general || {}
|
||||
};
|
||||
|
||||
await api.updateWorkers(updatedWorkers);
|
||||
await loadWorkers();
|
||||
} catch (error) {
|
||||
console.error('Error eliminando worker:', error);
|
||||
alert('Error al eliminar el worker');
|
||||
}
|
||||
}
|
||||
|
||||
function handleWSMessage(event) {
|
||||
const data = event.detail;
|
||||
if (data.type === 'workers_updated') {
|
||||
// Solo actualizar si es para el usuario actual (o si no especifica usuario)
|
||||
if (!data.username || data.username === currentUser.value) {
|
||||
workers.value = data.data;
|
||||
// Actualizar formulario general
|
||||
generalForm.value = {
|
||||
title_exclude_text: arrayToText(workers.value.general?.title_exclude || []),
|
||||
description_exclude_text: arrayToText(workers.value.general?.description_exclude || []),
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Escuchar cambios de autenticación
|
||||
function handleAuthChange() {
|
||||
currentUser.value = authService.getUsername() || null;
|
||||
// Recargar workers si cambia el usuario
|
||||
if (currentUser.value) {
|
||||
loadWorkers();
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadWorkers();
|
||||
window.addEventListener('ws-message', handleWSMessage);
|
||||
window.addEventListener('auth-logout', handleAuthChange);
|
||||
window.addEventListener('auth-login', handleAuthChange);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('ws-message', handleWSMessage);
|
||||
window.removeEventListener('auth-logout', handleAuthChange);
|
||||
window.removeEventListener('auth-login', handleAuthChange);
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user