cruds update
This commit is contained in:
Felipe
@@ -1,88 +0,0 @@
|
||||
<div class="max-w-5xl mx-auto p-8">
|
||||
<div class="section-title flex items-center mb-6">
|
||||
<span class="w-1 h-10 bg-blue-800 mr-4"></span>
|
||||
<h2 class="text-3xl font-bold text-gray-800">
|
||||
Oficina Virtual Gases del Oriente
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<p class="mb-12">
|
||||
Bienvenid@ a la Oficina Virtual de Gases del Oriente SA ESP. Si ya está registrado(a), puede
|
||||
iniciar sesión con el Usuario y Contraseña asignados durante el registro. Si aún no tiene Usuario y Contraseña,
|
||||
es necesario registrarse según las acciones que desee realizar.
|
||||
</p>
|
||||
<div class="relative w-full max-w-5xl bg-white shadow-lg rounded-[35px] overflow-hidden">
|
||||
<div class="relative w-full h-0 pb-[120%] md:pb-[60%] lg:pb-[50%]"> <!-- Aspect ratio box -->
|
||||
<img src="/img/img20.webp" alt="Background Image"
|
||||
class="absolute inset-0 w-full h-full object-cover rounded-[35px]">
|
||||
<div class="absolute inset-0 z-10 flex flex-col justify-center p-8 lg:max-w-md lg:ml-8">
|
||||
<h1 class="text-2xl lg:text-4xl font-bold mb-6 text-[#404e7b] text-center">Iniciar sesión</h1>
|
||||
<form action="/do/login" method="POST">
|
||||
<div class="mb-4">
|
||||
<label for="email" class="block text-md font-medium text-gray-700">Correo electrónico</label>
|
||||
<input type="email" id="email" required name="email"
|
||||
class="mt-1 block w-full px-3 py-3 lg:py-4 rounded-xl shadow-[0_5px_25px_rgba(0,0,0,0.1)]"
|
||||
placeholder="Ingrese su correo electrónico" />
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<label for="password" class="block text-md font-medium text-gray-700">Contraseña</label>
|
||||
<input type="password" id="password" name="password" required
|
||||
class="mt-1 block w-full px-3 py-3 lg:py-4 rounded-xl shadow-[0_5px_25px_rgba(0,0,0,0.1)]"
|
||||
placeholder="Ingrese su contraseña" />
|
||||
</div>
|
||||
<a href="/request-password-reset" class="text-black">¿Olvidaste tu contraseña?</a>
|
||||
<div class="flex justify-center">
|
||||
<button type="{{.Type}}" class="primary-button py-2 px-5 bg-[#284c91] text-white font-medium rounded shadow-sm">
|
||||
Iniciar sesión
|
||||
</button>
|
||||
|
||||
|
||||
{{if .error}}
|
||||
<p class="text-red-300">{{.message}}</p>
|
||||
{{end}}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-5xl mx-auto p-8 mb-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div class="flex flex-col">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-1 h-16 bg-[#274e93] mr-2"></div>
|
||||
<h2 class="text-3xl font-bold text-gray-800">Registrarse Como Usuario del Gas Natural</h2>
|
||||
</div>
|
||||
<div class="flex-grow bg-white p-10 rounded-lg shadow-[0_5px_25px_rgba(0,0,0,0.1)]">
|
||||
<p class="mb-4 text-gray-600">
|
||||
Podrá Ver o Imprimir facturas, Consultar o Registrar PQRs, Consultar Estado de créditos, Realizar
|
||||
pagos.
|
||||
</p>
|
||||
<a href="/register-gas">
|
||||
<button type="{{.Type}}" class="secondary-button w-full py-2 px-5 bg-[#beda75] text-[#284c91] font-medium rounded shadow-sm hover:bg-[#aecc5b] my-auto">
|
||||
Registrarse como usuario del Gas
|
||||
</button>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-1 h-16 bg-[#274e93] mr-2"></div>
|
||||
<h2 class="text-3xl font-bold text-gray-800">Registrarse Como Organismo de Inspección (OIA)</h2>
|
||||
</div>
|
||||
<div class="flex-grow bg-white p-10 rounded-lg shadow-[0_5px_25px_rgba(0,0,0,0.1)]">
|
||||
<p class="mb-4 text-gray-600">
|
||||
Para cargar los certificados de resultados de inspección de conformidad.
|
||||
</p>
|
||||
<a href="/register-oia">
|
||||
<button type="{{.Type}}" class="secondary-button w-full py-2 px-5 bg-[#beda75] text-[#284c91] font-medium rounded shadow-sm hover:bg-[#aecc5b] my-auto">
|
||||
Registrarse como OIA
|
||||
</button>
|
||||
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,50 +0,0 @@
|
||||
<div class="p-10">
|
||||
<div class="bg-cover h-full">
|
||||
<div class="content px-8 py-2">
|
||||
<div class="body mt-10 mx-8">
|
||||
<div class="md:flex items-center justify-between">
|
||||
<div class="w-full md:w-1/2 mr-auto">
|
||||
|
||||
</div>
|
||||
<div class="w-full md:max-w-md mt-6">
|
||||
<div class="card bg-white shadow-md rounded-lg px-4 py-4 mb-6 ">
|
||||
<form action="/do/register" method="POST">
|
||||
<div class="flex items-center justify-center">
|
||||
<h2 class="text-2xl font-bold tracking-wide">
|
||||
Let me in!!!
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<h2 class="text-xl text-center font-semibold text-gray-800 mb-2">
|
||||
Sign Up
|
||||
</h2>
|
||||
<div class="flex items-center justify-center">
|
||||
{{if .error}}
|
||||
<p class="text-red-300">{{.message}}</p>
|
||||
{{end}}
|
||||
</div>
|
||||
<input name="name" required type="text"
|
||||
class="rounded px-4 w-full py-1 bg-gray-200 border border-gray-400 mb-6 text-gray-700 placeholder-gray-700 focus:bg-white focus:outline-none"
|
||||
placeholder="Full Name">
|
||||
<input name="email" required type="email"
|
||||
class="rounded px-4 w-full py-1 bg-gray-200 border border-gray-400 mb-6 text-gray-700 placeholder-gray-700 focus:bg-white focus:outline-none"
|
||||
placeholder="Email Address">
|
||||
<input name="password" required type="password"
|
||||
class="rounded px-4 w-full py-1 bg-gray-200 border border-gray-400 mb-4 text-gray-700 placeholder-gray-700 focus:bg-white focus:outline-none"
|
||||
placeholder="Password">
|
||||
<input name="c_password" required type="password"
|
||||
class="rounded px-4 w-full py-1 bg-gray-200 border border-gray-400 mb-4 text-gray-700 placeholder-gray-700 focus:bg-white focus:outline-none"
|
||||
placeholder="Confirm Password">
|
||||
<div class="flex items-center justify-between">
|
||||
<button class="bg-black text-gray-200 px-2 py-1 rounded" type="submit">Let me in!
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,462 @@
|
||||
<div x-data="app" class="bg-white rounded-lg shadow">
|
||||
<div x-show="loading" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex justify-center items-center z-50">
|
||||
<img src="../img/loading.gif" alt="Cargando..." class="w-16 h-16" />
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto p-6 w-full">
|
||||
<div class="justify-between items-center w-full md:flex">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold mb-2">Lista de conexiones DB</h1>
|
||||
<p class="mb-4 text-sm">Gestión de conexiones DB.</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-4 md:mb-0 relative">
|
||||
<input type="text" placeholder="Buscar..." class="border border-gray-300 rounded p-2 w-full"
|
||||
x-model="search" @input.debounce.500ms="loadData()" />
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-end mb-4 gap-2 md:mb-0">
|
||||
<button @click="addModal = true" class="bg-[#8eb02f] text-white px-4 py-2 rounded text-sm">Nuevo</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table-auto w-full">
|
||||
<thead class="text-sm text-left py-4 border-b border-gray-300">
|
||||
<tr class="text-left font-semibold border-collapse">
|
||||
<th class="py-2 px-3 border-b">Puerto</th>
|
||||
<th class="py-2 px-3 border-b">Usuario</th>
|
||||
<th class="py-2 px-3 border-b">Password</th>
|
||||
<th class="py-2 px-3 border-b">Tipo DB</th>
|
||||
<th class="py-2 px-3 border-b">Servidor</th>
|
||||
<th class="py-2 px-3 border-b"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-gray-500 select-none text-sm">
|
||||
<template x-for="data in datos" :key="data.id">
|
||||
<tr class="hover:bg-gray-100">
|
||||
|
||||
<td class="py-3 text-xs px-3 border-b" x-text="data.puerto"></td>
|
||||
<td class="py-3 text-xs px-3 border-b" x-text="data.usuario"></td>
|
||||
<td class="py-3 text-xs px-3 border-b" x-text="data.password"></td>
|
||||
<td class="py-3 text-xs px-3 border-b" x-text="tipos.find(ts => ts.ID == data.tipo_db_id).nombre"></td>
|
||||
<td class="py-3 text-xs px-3 border-b">
|
||||
<span x-text="`${servidores.find(serv => serv.ID == data.servidor_id).nombre} - ${servidores.find(serv => serv.ID == data.servidor_id).ip_servidor}`"></span>
|
||||
</td>
|
||||
<td class="py-3 text-xs px-3 border-b w-24">
|
||||
<div class="flex items-center gap-2">
|
||||
<button @click="openViewModal(data)" title="Ver">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor" class="w-5 text-[#8eb02f]">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button @click="openEditModal(data)" title="Editar">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor" class="w-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
|
||||
</svg>
|
||||
</button>
|
||||
<button @click="openDeleteModal(data)" title="Eliminar">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor" class="w-5 text-red-500">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-start items-center gap-2 p-4 text-sm">
|
||||
<button @click="page = Math.max(1, page - 1); loadData()" :disabled="page === 1"
|
||||
class="px-4 py-2 text-black bg-gray-200 rounded-l-md opacity-50 disabled:cursor-not-allowed">
|
||||
Anterior
|
||||
</button>
|
||||
<template x-for="pageNum in paginatedPages" :key="pageNum">
|
||||
<button @click="goToPage(pageNum)"
|
||||
class="px-4 py-2 text-black bg-gray-200 bg-black text-gray-50 rounded-md hover:bg-gray-300"
|
||||
:class="{ 'bg-black text-white': pageNum === page }" x-text="pageNum"></button>
|
||||
</template>
|
||||
<button @click="page += 1; loadData()" :disabled="datos.length < limit" :disabled="page === totalPages"
|
||||
class="px-4 py-2 text-black bg-gray-200 rounded-r-md opacity-50 disabled:cursor-not-allowed">
|
||||
Siguiente
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modales -->
|
||||
<div x-show="viewModal" class="fixed inset-0 overflow-auto bg-gray-800 bg-opacity-75 flex justify-center items-center text-sm z-40">
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 w-11/12 max-w-lg">
|
||||
<h2 class="text-xl font-bold mb-4">Ver conexión DB</h2>
|
||||
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Puerto:</label>
|
||||
<input type="text" x-model="selectedItem.puerto" disabled class="border border-gray-300 rounded p-2 w-full" placeholder="Puerto" />
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Usuario:</label>
|
||||
<input type="text" x-model="selectedItem.usuario" disabled class="border border-gray-300 rounded p-2 w-full" placeholder="Usuario" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Tipo db:</label>
|
||||
<select x-model="selectedItem.tipo_db_id" disabled class="border border-gray-300 rounded p-2 w-full">
|
||||
<option value="">Selecciona un tipo</option>
|
||||
<template x-for="tipo in tipos" :key="tipo.ID">
|
||||
<option :value="tipo.ID" x-text="`${tipo.nombre}`"></option>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Servidor:</label>
|
||||
<select x-model="selectedItem.servidor_id" disabled class="border border-gray-300 rounded p-2 w-full">
|
||||
<option value="">Selecciona un servidor</option>
|
||||
<template x-for="servidor in servidores" :key="servidor.ID">
|
||||
<option :value="servidor.ID" x-text="`${servidor.nombre} - ${servidor.ip_servidor}`"></option>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Password:</label>
|
||||
<input type="text" x-model="selectedItem.password" disabled class="border border-gray-300 rounded p-2 w-full" placeholder="Password" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-2 text-sm">
|
||||
<button @click="viewModal = false" class="px-4 py-2 bg-gray-600 text-white rounded">Cerrar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-show="editModal" class="fixed inset-0 overflow-auto bg-gray-800 bg-opacity-75 flex justify-center items-center text-sm z-40">
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 w-11/12 max-w-lg">
|
||||
<h2 class="text-xl font-bold mb-4">Editar conexión DB</h2>
|
||||
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Puerto:</label>
|
||||
<input type="text" x-model="selectedItem.puerto" class="border border-gray-300 rounded p-2 w-full" placeholder="Puerto" />
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Usuario:</label>
|
||||
<input type="text" x-model="selectedItem.usuario" class="border border-gray-300 rounded p-2 w-full" placeholder="Usuario" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Tipo db:</label>
|
||||
<select x-model="selectedItem.tipo_db_id" class="border border-gray-300 rounded p-2 w-full">
|
||||
<option value="">Selecciona un tipo</option>
|
||||
<template x-for="tipo in tipos" :key="tipo.ID">
|
||||
<option :value="tipo.ID" x-text="`${tipo.nombre}`"></option>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Servidor:</label>
|
||||
<select x-model="selectedItem.servidor_id" class="border border-gray-300 rounded p-2 w-full">
|
||||
<option value="">Selecciona un servidor</option>
|
||||
<template x-for="servidor in servidores" :key="servidor.ID">
|
||||
<option :value="servidor.ID" x-text="`${servidor.nombre} - ${servidor.ip_servidor}`"></option>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Password:</label>
|
||||
<input type="text" x-model="selectedItem.password" class="border border-gray-300 rounded p-2 w-full" placeholder="Password" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between gap-2 text-sm">
|
||||
<button @click="updateItem()" class="px-4 py-2 bg-[#8eb02f] text-white rounded">Actualizar</button>
|
||||
<button @click="closeModals()" class="px-4 py-2 bg-gray-600 text-white rounded">Cerrar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-show="addModal" class="fixed inset-0 overflow-auto bg-gray-800 bg-opacity-75 flex justify-center items-center text-sm z-40">
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 w-11/12 max-w-lg">
|
||||
<h2 class="text-xl font-bold mb-4">Añadir conexión DB</h2>
|
||||
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Puerto:</label>
|
||||
<input type="text" x-model="selectedItem.puerto" class="border border-gray-300 rounded p-2 w-full" placeholder="Puerto" />
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Usuario:</label>
|
||||
<input type="text" x-model="selectedItem.usuario" class="border border-gray-300 rounded p-2 w-full" placeholder="Usuario" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Tipo db:</label>
|
||||
<select x-model="selectedItem.tipo_db_id" class="border border-gray-300 rounded p-2 w-full">
|
||||
<option value="">Selecciona un tipo</option>
|
||||
<template x-for="tipo in tipos" :key="tipo.ID">
|
||||
<option :value="tipo.ID" x-text="`${tipo.nombre}`"></option>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Servidor:</label>
|
||||
<select x-model="selectedItem.servidor_id" class="border border-gray-300 rounded p-2 w-full">
|
||||
<option value="">Selecciona un servidor</option>
|
||||
<template x-for="servidor in servidores" :key="servidor.ID">
|
||||
<option :value="servidor.ID" x-text="`${servidor.nombre} - ${servidor.ip_servidor}`"></option>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Password:</label>
|
||||
<input type="text" x-model="selectedItem.password" class="border border-gray-300 rounded p-2 w-full" placeholder="Password" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between gap-2 text-sm">
|
||||
<button @click="addItem()" class="px-4 py-2 bg-[#8eb02f] text-white rounded">Guardar</button>
|
||||
<button @click="addModal = false" class="px-4 py-2 bg-gray-600 text-white rounded">Cancelar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-show="deleteModal"
|
||||
class="fixed inset-0 overflow-auto bg-gray-800 bg-opacity-75 flex justify-center items-center z-40">
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 w-11/12 max-w-lg text-sm">
|
||||
<h2 class="text-xl font-bold mb-4">Confirmar Eliminación</h2>
|
||||
|
||||
<p>¿Estás seguro de que deseas eliminar este registro?</p>
|
||||
|
||||
|
||||
<div class="flex mt-4 justify-end gap-2 text-sm">
|
||||
<button @click="deleteItem()" class="px-4 py-2 bg-red-500 text-white rounded">Eliminar</button>
|
||||
<button @click="closeModals()" class="bg-gray-600 text-white px-4 py-2 rounded">Cancelar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function app() {
|
||||
return {
|
||||
datos: [],
|
||||
tipos: [],
|
||||
servidores: [],
|
||||
loading: false,
|
||||
limit: 10,
|
||||
page: 1,
|
||||
search: '',
|
||||
totalPages: 0,
|
||||
paginatedPages: [],
|
||||
// modales
|
||||
viewModal: false,
|
||||
addModal: false,
|
||||
editModal: false,
|
||||
deleteModal: false,
|
||||
selectedItem: {},
|
||||
errors: {},
|
||||
init() {
|
||||
this.loadData();
|
||||
this.loadServidor();
|
||||
this.loadTipoDb();
|
||||
},
|
||||
loadData() {
|
||||
if (this.search !== '') {
|
||||
this.page = 1;
|
||||
this.limit = 100;
|
||||
} else {
|
||||
this.limit = 10;
|
||||
}
|
||||
this.setLoading(true);
|
||||
axios.get('/app/loadconexiondb', {
|
||||
params: {
|
||||
page: this.page,
|
||||
limit: this.limit,
|
||||
search: this.search
|
||||
}
|
||||
}).then(response => {
|
||||
this.datos = response.data.registros.map(data => ({
|
||||
id: data.ID,
|
||||
puerto: data.puerto,
|
||||
usuario: data.usuario,
|
||||
password: data.password,
|
||||
tipo_db_id: data.tipo_db_id,
|
||||
servidor_id: data.servidor_id,
|
||||
created_at: data.CreatedAt,
|
||||
}));
|
||||
|
||||
this.totalPages = response.data.totalPages;
|
||||
this.calculatePaginatedPages();
|
||||
}).catch(error => {
|
||||
console.error('Error al obtener datos:', error);
|
||||
}).finally(() => {
|
||||
this.setLoading(false);
|
||||
});
|
||||
},
|
||||
loadServidor() {
|
||||
axios.get('/app/loadservidorselect')
|
||||
.then(response => {
|
||||
this.servidores = response.data.registros;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error al cargar servidores:', error);
|
||||
});
|
||||
},
|
||||
loadTipoDb() {
|
||||
axios.get('/app/loadtipodb')
|
||||
.then(response => {
|
||||
this.tipos = response.data.registros;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error al cargar tipos de db:', error);
|
||||
});
|
||||
},
|
||||
setSelectedItem(data) {
|
||||
this.selectedItem = { ...data };
|
||||
this.errors = {};
|
||||
},
|
||||
resetSelectedItem() {
|
||||
this.selectedItem = {};
|
||||
this.errors = {};
|
||||
},
|
||||
calculatePaginatedPages() {
|
||||
const maxVisiblePages = 5;
|
||||
const startPage = Math.max(1, this.page - Math.floor(maxVisiblePages / 2));
|
||||
const endPage = Math.min(this.totalPages, startPage + maxVisiblePages - 1);
|
||||
this.paginatedPages = Array.from({ length: endPage - startPage + 1 }, (_, i) => i + startPage);
|
||||
},
|
||||
goToPage(page) {
|
||||
this.page = page;
|
||||
this.loadData();
|
||||
},
|
||||
setLoading(value) {
|
||||
this.loading = value;
|
||||
},
|
||||
openViewModal(data) {
|
||||
this.setSelectedItem(data);
|
||||
this.viewModal = true;
|
||||
},
|
||||
openEditModal(data) {
|
||||
this.setSelectedItem(data);
|
||||
this.editModal = true;
|
||||
},
|
||||
|
||||
deleteItem() {
|
||||
this.setLoading(true);
|
||||
axios.delete(`/app/conexiondb/${this.selectedItem.id}`)
|
||||
.then(() => {
|
||||
alert("Registro eliminado exitosamente.");
|
||||
this.resetSelectedItem();
|
||||
this.deleteModal = false;
|
||||
this.loadData();
|
||||
})
|
||||
.catch(error => console.error("Error al eliminar el registro:", error))
|
||||
.finally(() => this.setLoading(false));
|
||||
},
|
||||
openDeleteModal(data) {
|
||||
this.selectedItem.id = data.id;
|
||||
|
||||
this.deleteModal = true;
|
||||
},
|
||||
closeModals() {
|
||||
this.viewModal = false;
|
||||
this.addModal = false;
|
||||
this.editModal = false;
|
||||
this.deleteModal = false;
|
||||
|
||||
this.resetSelectedItem();
|
||||
},
|
||||
addItem() {
|
||||
|
||||
if (this.selectedItem.tipo_db_id) {
|
||||
this.selectedItem.tipo_db_id = parseInt(this.selectedItem.tipo_db_id);
|
||||
} else {
|
||||
this.selectedItem.tipo_db_id = null;
|
||||
}
|
||||
|
||||
if (this.selectedItem.servidor_id) {
|
||||
this.selectedItem.servidor_id = parseInt(this.selectedItem.servidor_id);
|
||||
} else {
|
||||
this.selectedItem.servidor_id = null;
|
||||
}
|
||||
|
||||
this.setLoading(true);
|
||||
|
||||
axios.post('/app/conexiondb', this.selectedItem)
|
||||
.then(response => {
|
||||
alert("Conexion Db añadida exitosamente.");
|
||||
this.resetSelectedItem();
|
||||
this.addModal = false;
|
||||
this.loadData();
|
||||
})
|
||||
.catch(error => {
|
||||
alert("Error al agregar la conexion Db.", error);
|
||||
console.error("Error al añadir la conexion Db:", error);
|
||||
})
|
||||
.finally(() => {
|
||||
this.setLoading(false);
|
||||
});
|
||||
},
|
||||
|
||||
updateItem() {
|
||||
if (this.selectedItem.tipo_db_id) {
|
||||
this.selectedItem.tipo_db_id = parseInt(this.selectedItem.tipo_db_id);
|
||||
} else {
|
||||
this.selectedItem.tipo_db_id = null;
|
||||
}
|
||||
|
||||
if (this.selectedItem.servidor_id) {
|
||||
this.selectedItem.servidor_id = parseInt(this.selectedItem.servidor_id);
|
||||
} else {
|
||||
this.selectedItem.servidor_id = null;
|
||||
}
|
||||
|
||||
const dataToSend = {
|
||||
puerto: this.selectedItem.puerto,
|
||||
usuario: this.selectedItem.usuario,
|
||||
password: this.selectedItem.password,
|
||||
tipo_db_id: this.selectedItem.tipo_db_id,
|
||||
servidor_id: this.selectedItem.servidor_id,
|
||||
};
|
||||
|
||||
this.setLoading(true);
|
||||
|
||||
axios.put(`/app/conexiondb/${this.selectedItem.id}`, dataToSend)
|
||||
.then(response => {
|
||||
alert("Conexion Db actualizada exitosamente.");
|
||||
this.resetSelectedItem();
|
||||
this.editModal = false;
|
||||
this.loadData();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Error al actualizar la conexion Db:", error);
|
||||
})
|
||||
.finally(() => {
|
||||
this.setLoading(false);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,383 @@
|
||||
<div x-data="app" class="bg-white rounded-lg shadow">
|
||||
<div x-show="loading" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex justify-center items-center z-50">
|
||||
<img src="../img/loading.gif" alt="Cargando..." class="w-16 h-16" />
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto p-6 w-full">
|
||||
<div class="justify-between items-center w-full md:flex">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold mb-2">Lista de conexiones SSH</h1>
|
||||
<p class="mb-4 text-sm">Gestión de conexiones SSH.</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-4 md:mb-0 relative">
|
||||
<input type="text" placeholder="Buscar..." class="border border-gray-300 rounded p-2 w-full"
|
||||
x-model="search" @input.debounce.500ms="loadData()" />
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-end mb-4 gap-2 md:mb-0">
|
||||
<button @click="addModal = true" class="bg-[#8eb02f] text-white px-4 py-2 rounded text-sm">Nuevo</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table-auto w-full">
|
||||
<thead class="text-sm text-left py-4 border-b border-gray-300">
|
||||
<tr class="text-left font-semibold border-collapse">
|
||||
<th class="py-2 px-3 border-b">Usuario</th>
|
||||
<th class="py-2 px-3 border-b">Puerto</th>
|
||||
<th class="py-2 px-3 border-b">Servidor</th>
|
||||
<th class="py-2 px-3 border-b"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-gray-500 select-none text-sm">
|
||||
<template x-for="data in datos" :key="data.id">
|
||||
<tr class="hover:bg-gray-100">
|
||||
|
||||
<td class="py-3 text-xs px-3 border-b" x-text="data.usuario"></td>
|
||||
<td class="py-3 text-xs px-3 border-b" x-text="data.puerto"></td>
|
||||
<td class="py-3 text-xs px-3 border-b">
|
||||
<span x-text="`${servidores.find(serv => serv.ID == data.servidor_id).nombre} - ${servidores.find(serv => serv.ID == data.servidor_id).ip_servidor}`"></span>
|
||||
</td>
|
||||
<td class="py-3 text-xs px-3 border-b w-24">
|
||||
<div class="flex items-center gap-2">
|
||||
<button @click="openViewModal(data)" title="Ver">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor" class="w-5 text-[#8eb02f]">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button @click="openEditModal(data)" title="Editar">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor" class="w-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
|
||||
</svg>
|
||||
</button>
|
||||
<button @click="openDeleteModal(data)" title="Eliminar">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor" class="w-5 text-red-500">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-start items-center gap-2 p-4 text-sm">
|
||||
<button @click="page = Math.max(1, page - 1); loadData()" :disabled="page === 1"
|
||||
class="px-4 py-2 text-black bg-gray-200 rounded-l-md opacity-50 disabled:cursor-not-allowed">
|
||||
Anterior
|
||||
</button>
|
||||
<template x-for="pageNum in paginatedPages" :key="pageNum">
|
||||
<button @click="goToPage(pageNum)"
|
||||
class="px-4 py-2 text-black bg-gray-200 bg-black text-gray-50 rounded-md hover:bg-gray-300"
|
||||
:class="{ 'bg-black text-white': pageNum === page }" x-text="pageNum"></button>
|
||||
</template>
|
||||
<button @click="page += 1; loadData()" :disabled="datos.length < limit" :disabled="page === totalPages"
|
||||
class="px-4 py-2 text-black bg-gray-200 rounded-r-md opacity-50 disabled:cursor-not-allowed">
|
||||
Siguiente
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modales -->
|
||||
<div x-show="viewModal"
|
||||
class="fixed inset-0 overflow-auto bg-gray-800 bg-opacity-75 flex justify-center items-center text-sm z-40">
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 w-11/12 max-w-lg">
|
||||
<h2 class="text-xl font-bold mb-4">Ver conexión SSH</h2>
|
||||
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Usuario:</label>
|
||||
<input type="text" x-model="selectedItem.usuario" disabled class="border border-gray-300 rounded p-2 w-full" placeholder="Usuario" />
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Puerto:</label>
|
||||
<input type="text" x-model="selectedItem.puerto" disabled class="border border-gray-300 rounded p-2 w-full" placeholder="Puerto" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Servidor:</label>
|
||||
<select x-model="selectedItem.servidor_id" disabled class="border border-gray-300 rounded p-2 w-full">
|
||||
<option value="">Selecciona un servidor</option>
|
||||
<template x-for="servidor in servidores" :key="servidor.ID">
|
||||
<option :value="servidor.ID" x-text="`${servidor.nombre} - ${servidor.ip_servidor}`"></option>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-2 text-sm">
|
||||
<button @click="viewModal = false" class="px-4 py-2 bg-gray-600 text-white rounded">Cerrar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-show="editModal"
|
||||
class="fixed inset-0 overflow-auto bg-gray-800 bg-opacity-75 flex justify-center items-center text-sm z-40">
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 w-11/12 max-w-lg">
|
||||
<h2 class="text-xl font-bold mb-4">Editar conexión SSH</h2>
|
||||
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Usuario:</label>
|
||||
<input type="text" x-model="selectedItem.usuario" class="border border-gray-300 rounded p-2 w-full" placeholder="Usuario" />
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Puerto:</label>
|
||||
<input type="text" x-model="selectedItem.puerto" class="border border-gray-300 rounded p-2 w-full" placeholder="Puerto" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Servidor:</label>
|
||||
<select x-model="selectedItem.servidor_id" class="border border-gray-300 rounded p-2 w-full">
|
||||
<option value="">Selecciona un servidor</option>
|
||||
<template x-for="servidor in servidores" :key="servidor.ID">
|
||||
<option :value="servidor.ID" x-text="`${servidor.nombre} - ${servidor.ip_servidor}`"></option>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between gap-2 text-sm">
|
||||
<button @click="updateItem()" class="px-4 py-2 bg-[#8eb02f] text-white rounded">Actualizar</button>
|
||||
<button @click="closeModals()" class="px-4 py-2 bg-gray-600 text-white rounded">Cerrar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-show="addModal"
|
||||
class="fixed inset-0 overflow-auto bg-gray-800 bg-opacity-75 flex justify-center items-center text-sm z-40">
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 w-11/12 max-w-lg">
|
||||
<h2 class="text-xl font-bold mb-4">Añadir conexión SSH</h2>
|
||||
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Usuario:</label>
|
||||
<input type="text" x-model="selectedItem.usuario" class="border border-gray-300 rounded p-2 w-full" placeholder="Usuario" />
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Puerto:</label>
|
||||
<input type="text" x-model="selectedItem.puerto" class="border border-gray-300 rounded p-2 w-full" placeholder="Puerto" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Servidor:</label>
|
||||
<select x-model="selectedItem.servidor_id" class="border border-gray-300 rounded p-2 w-full">
|
||||
<option value="">Selecciona un servidor</option>
|
||||
<template x-for="servidor in servidores" :key="servidor.ID">
|
||||
<option :value="servidor.ID" x-text="`${servidor.nombre} - ${servidor.ip_servidor}`"></option>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between gap-2 text-sm">
|
||||
<button @click="addItem()" class="px-4 py-2 bg-[#8eb02f] text-white rounded">Guardar</button>
|
||||
<button @click="addModal = false" class="px-4 py-2 bg-gray-600 text-white rounded">Cancelar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-show="deleteModal"
|
||||
class="fixed inset-0 overflow-auto bg-gray-800 bg-opacity-75 flex justify-center items-center z-40">
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 w-11/12 max-w-lg text-sm">
|
||||
<h2 class="text-xl font-bold mb-4">Confirmar Eliminación</h2>
|
||||
|
||||
<p>¿Estás seguro de que deseas eliminar este registro?</p>
|
||||
|
||||
|
||||
<div class="flex mt-4 justify-end gap-2 text-sm">
|
||||
<button @click="deleteItem()" class="px-4 py-2 bg-red-500 text-white rounded">Eliminar</button>
|
||||
<button @click="closeModals()" class="bg-gray-600 text-white px-4 py-2 rounded">Cancelar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function app() {
|
||||
return {
|
||||
datos: [],
|
||||
servidores: [],
|
||||
loading: false,
|
||||
limit: 10,
|
||||
page: 1,
|
||||
search: '',
|
||||
totalPages: 0,
|
||||
paginatedPages: [],
|
||||
// modales
|
||||
viewModal: false,
|
||||
addModal: false,
|
||||
editModal: false,
|
||||
deleteModal: false,
|
||||
selectedItem: {},
|
||||
errors: {},
|
||||
init() {
|
||||
this.loadData();
|
||||
this.loadServidor();
|
||||
},
|
||||
loadData() {
|
||||
if (this.search !== '') {
|
||||
this.page = 1;
|
||||
this.limit = 100;
|
||||
} else {
|
||||
this.limit = 10;
|
||||
}
|
||||
this.setLoading(true);
|
||||
axios.get('/app/loadconexionssh', {
|
||||
params: {
|
||||
page: this.page,
|
||||
limit: this.limit,
|
||||
search: this.search
|
||||
}
|
||||
}).then(response => {
|
||||
this.datos = response.data.registros.map(data => ({
|
||||
id: data.ID,
|
||||
usuario: data.usuario,
|
||||
puerto: data.puerto,
|
||||
servidor_id: data.servidor_id,
|
||||
created_at: data.CreatedAt,
|
||||
}));
|
||||
|
||||
this.totalPages = response.data.totalPages;
|
||||
this.calculatePaginatedPages();
|
||||
}).catch(error => {
|
||||
console.error('Error al obtener datos:', error);
|
||||
}).finally(() => {
|
||||
this.setLoading(false);
|
||||
});
|
||||
},
|
||||
loadServidor() {
|
||||
axios.get('/app/loadservidorselect')
|
||||
.then(response => {
|
||||
this.servidores = response.data.registros;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error al cargar servidores:', error);
|
||||
});
|
||||
},
|
||||
setSelectedItem(data) {
|
||||
this.selectedItem = { ...data };
|
||||
this.errors = {};
|
||||
},
|
||||
resetSelectedItem() {
|
||||
this.selectedItem = {};
|
||||
this.errors = {};
|
||||
},
|
||||
calculatePaginatedPages() {
|
||||
const maxVisiblePages = 5;
|
||||
const startPage = Math.max(1, this.page - Math.floor(maxVisiblePages / 2));
|
||||
const endPage = Math.min(this.totalPages, startPage + maxVisiblePages - 1);
|
||||
this.paginatedPages = Array.from({ length: endPage - startPage + 1 }, (_, i) => i + startPage);
|
||||
},
|
||||
goToPage(page) {
|
||||
this.page = page;
|
||||
this.loadData();
|
||||
},
|
||||
setLoading(value) {
|
||||
this.loading = value;
|
||||
},
|
||||
openViewModal(data) {
|
||||
this.setSelectedItem(data);
|
||||
this.viewModal = true;
|
||||
},
|
||||
openEditModal(data) {
|
||||
this.setSelectedItem(data);
|
||||
this.editModal = true;
|
||||
},
|
||||
|
||||
deleteItem() {
|
||||
this.setLoading(true);
|
||||
axios.delete(`/app/conexionssh/${this.selectedItem.id}`)
|
||||
.then(() => {
|
||||
alert("Registro eliminado exitosamente.");
|
||||
this.resetSelectedItem();
|
||||
this.deleteModal = false;
|
||||
this.loadData();
|
||||
})
|
||||
.catch(error => console.error("Error al eliminar el registro:", error))
|
||||
.finally(() => this.setLoading(false));
|
||||
},
|
||||
openDeleteModal(data) {
|
||||
this.selectedItem.id = data.id;
|
||||
|
||||
this.deleteModal = true;
|
||||
},
|
||||
closeModals() {
|
||||
this.viewModal = false;
|
||||
this.addModal = false;
|
||||
this.editModal = false;
|
||||
this.deleteModal = false;
|
||||
|
||||
this.resetSelectedItem();
|
||||
},
|
||||
addItem() {
|
||||
if (this.selectedItem.servidor_id) {
|
||||
this.selectedItem.servidor_id = parseInt(this.selectedItem.servidor_id);
|
||||
} else {
|
||||
this.selectedItem.servidor_id = null;
|
||||
}
|
||||
|
||||
this.setLoading(true);
|
||||
|
||||
axios.post('/app/conexionssh', this.selectedItem)
|
||||
.then(response => {
|
||||
alert("Conexion SSH añadida exitosamente.");
|
||||
this.resetSelectedItem();
|
||||
this.addModal = false;
|
||||
this.loadData();
|
||||
})
|
||||
.catch(error => {
|
||||
alert("Error al agregar la conexion SSH.", error);
|
||||
console.error("Error al añadir la conexion SSH:", error);
|
||||
})
|
||||
.finally(() => {
|
||||
this.setLoading(false);
|
||||
});
|
||||
},
|
||||
|
||||
updateItem() {
|
||||
if (this.selectedItem.servidor_id) {
|
||||
this.selectedItem.servidor_id = parseInt(this.selectedItem.servidor_id);
|
||||
} else {
|
||||
this.selectedItem.servidor_id = null;
|
||||
}
|
||||
|
||||
const dataToSend = {
|
||||
usuario: this.selectedItem.usuario,
|
||||
puerto: this.selectedItem.puerto,
|
||||
servidor_id: this.selectedItem.servidor_id,
|
||||
};
|
||||
|
||||
this.setLoading(true);
|
||||
|
||||
axios.put(`/app/conexionssh/${this.selectedItem.id}`, dataToSend)
|
||||
.then(response => {
|
||||
alert("Conexion SSH actualizada exitosamente.");
|
||||
this.resetSelectedItem();
|
||||
this.editModal = false;
|
||||
this.loadData();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Error al actualizar la conexion SSH:", error);
|
||||
})
|
||||
.finally(() => {
|
||||
this.setLoading(false);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -55,7 +55,7 @@
|
||||
|
||||
switch (result.status) {
|
||||
case "success":
|
||||
window.location.href = '/app/users';
|
||||
window.location.href = '/app/servidor';
|
||||
break;
|
||||
|
||||
case "missing":
|
||||
|
||||
@@ -18,11 +18,10 @@
|
||||
|
||||
<!-- Overlay para dispositivos móviles -->
|
||||
<div x-show="isSidebarOpen" @click="isSidebarOpen = false"
|
||||
class="fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden"></div>
|
||||
class="fixed inset-0 bg-black bg-opacity-50 z-30 md:hidden"></div>
|
||||
|
||||
<!-- Barra lateral -->
|
||||
<div :class="{'translate-x-0': isSidebarOpen, '-translate-x-full': !isSidebarOpen}"
|
||||
class="fixed z-50 md:relative transform md:translate-x-0 transition-transform duration-300 ease-in-out w-64 md:w-52 drop-shadow-md text-black shadow flex flex-col justify-between bg-white h-screen">
|
||||
<div :class="{'translate-x-0': isSidebarOpen, '-translate-x-full': !isSidebarOpen}" class="fixed z-30 md:relative transform md:translate-x-0 transition-transform duration-300 ease-in-out w-64 md:w-52 drop-shadow-md text-black shadow flex flex-col justify-between bg-white h-screen">
|
||||
|
||||
<!-- Encabezado de la barra lateral -->
|
||||
<div class="flex items-center justify-between h-16 px-10 py-2">
|
||||
|
||||
@@ -0,0 +1,318 @@
|
||||
<div x-data="app" class="bg-white rounded-lg shadow">
|
||||
<div x-show="loading" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex justify-center items-center z-50">
|
||||
<img src="../img/loading.gif" alt="Cargando..." class="w-16 h-16" />
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto p-6 w-full">
|
||||
<div class="justify-between items-center w-full md:flex">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold mb-2">Lista de proveedores</h1>
|
||||
<p class="mb-4 text-sm">Gestión de proveedores.</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-4 md:mb-0 relative">
|
||||
<input type="text" placeholder="Buscar..." class="border border-gray-300 rounded p-2 w-full"
|
||||
x-model="search" @input.debounce.500ms="loadData()" />
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-end mb-4 gap-2 md:mb-0">
|
||||
<button @click="addModal = true"
|
||||
class="bg-[#8eb02f] text-white px-4 py-2 rounded text-sm">Nuevo</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table-auto w-full">
|
||||
<thead class="text-sm text-left py-4 border-b border-gray-300">
|
||||
<tr class="text-left font-semibold border-collapse">
|
||||
<th class="py-2 px-3 border-b">Nombre</th>
|
||||
<th class="py-2 px-3 border-b"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-gray-500 select-none text-sm">
|
||||
<template x-for="data in datos" :key="data.id">
|
||||
<tr class="hover:bg-gray-100">
|
||||
<td class="py-3 text-xs px-3 border-b" x-text="data.nombre"></td>
|
||||
<td class="py-3 text-xs px-3 border-b w-24">
|
||||
<div class="flex items-center gap-2">
|
||||
<button @click="openViewModal(data)" title="Ver">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor" class="w-5 text-[#8eb02f]">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button @click="openEditModal(data)" title="Editar">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor" class="w-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
|
||||
</svg>
|
||||
</button>
|
||||
<button @click="openDeleteModal(data)" title="Eliminar">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor" class="w-5 text-red-500">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-start items-center gap-2 p-4 text-sm">
|
||||
<button @click="page = Math.max(1, page - 1); loadData()" :disabled="page === 1"
|
||||
class="px-4 py-2 text-black bg-gray-200 rounded-l-md opacity-50 disabled:cursor-not-allowed">
|
||||
Anterior
|
||||
</button>
|
||||
<template x-for="pageNum in paginatedPages" :key="pageNum">
|
||||
<button @click="goToPage(pageNum)"
|
||||
class="px-4 py-2 text-black bg-gray-200 bg-black text-gray-50 rounded-md hover:bg-gray-300"
|
||||
:class="{ 'bg-black text-white': pageNum === page }" x-text="pageNum"></button>
|
||||
</template>
|
||||
<button @click="page += 1; loadData()" :disabled="datos.length < limit" :disabled="page === totalPages"
|
||||
class="px-4 py-2 text-black bg-gray-200 rounded-r-md opacity-50 disabled:cursor-not-allowed">
|
||||
Siguiente
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modales -->
|
||||
<div x-show="viewModal"
|
||||
class="fixed inset-0 overflow-auto bg-gray-800 bg-opacity-75 flex justify-center items-center text-sm z-40">
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 w-11/12 max-w-lg">
|
||||
<h2 class="text-xl font-bold mb-4">Ver proveedor</h2>
|
||||
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Nombre:</label>
|
||||
<input type="text" x-model="selectedItem.nombre" disabled
|
||||
class="border border-gray-300 rounded p-2 w-full" placeholder="Nombre" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-2 text-sm">
|
||||
<button @click="viewModal = false" class="px-4 py-2 bg-gray-600 text-white rounded">Cerrar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-show="editModal"
|
||||
class="fixed inset-0 overflow-auto bg-gray-800 bg-opacity-75 flex justify-center items-center text-sm z-40">
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 w-11/12 max-w-lg">
|
||||
<h2 class="text-xl font-bold mb-4">Editar proveedor</h2>
|
||||
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Nombre:</label>
|
||||
<input type="text" x-model="selectedItem.nombre" class="border border-gray-300 rounded p-2 w-full"
|
||||
placeholder="Nombre" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between gap-2 text-sm">
|
||||
<button @click="updateItem()" class="px-4 py-2 bg-[#8eb02f] text-white rounded">Actualizar</button>
|
||||
<button @click="closeModals()" class="px-4 py-2 bg-gray-600 text-white rounded">Cerrar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-show="addModal"
|
||||
class="fixed inset-0 overflow-auto bg-gray-800 bg-opacity-75 flex justify-center items-center text-sm z-40">
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 w-11/12 max-w-lg">
|
||||
<h2 class="text-xl font-bold mb-4">Añadir proveedor</h2>
|
||||
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Nombre:</label>
|
||||
<input type="text" x-model="selectedItem.nombre" class="border border-gray-300 rounded p-2 w-full"
|
||||
placeholder="Nombre" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between gap-2 text-sm">
|
||||
<button @click="addItem()" class="px-4 py-2 bg-[#8eb02f] text-white rounded">Guardar</button>
|
||||
<button @click="addModal = false" class="px-4 py-2 bg-gray-600 text-white rounded">Cancelar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-show="deleteModal"
|
||||
class="fixed inset-0 overflow-auto bg-gray-800 bg-opacity-75 flex justify-center items-center z-40">
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 w-11/12 max-w-lg text-sm">
|
||||
<h2 class="text-xl font-bold mb-4">Confirmar Eliminación</h2>
|
||||
|
||||
<p>¿Estás seguro de que deseas eliminar este registro?</p>
|
||||
|
||||
|
||||
<div class="flex mt-4 justify-end gap-2 text-sm">
|
||||
<button @click="deleteItem()" class="px-4 py-2 bg-red-500 text-white rounded">Eliminar</button>
|
||||
<button @click="closeModals()" class="bg-gray-600 text-white px-4 py-2 rounded">Cancelar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function app() {
|
||||
return {
|
||||
datos: [],
|
||||
loading: false,
|
||||
limit: 10,
|
||||
page: 1,
|
||||
search: '',
|
||||
totalPages: 0,
|
||||
paginatedPages: [],
|
||||
// modales
|
||||
viewModal: false,
|
||||
addModal: false,
|
||||
editModal: false,
|
||||
deleteModal: false,
|
||||
selectedItem: {},
|
||||
errors: {},
|
||||
init() {
|
||||
this.loadData();
|
||||
this.loadProvServidor();
|
||||
this.loadTipoServidor();
|
||||
},
|
||||
loadData() {
|
||||
if (this.search !== '') {
|
||||
this.page = 1;
|
||||
this.limit = 100;
|
||||
} else {
|
||||
this.limit = 10;
|
||||
}
|
||||
this.setLoading(true);
|
||||
axios.get('/app/loadprovservidor', {
|
||||
params: {
|
||||
page: this.page,
|
||||
limit: this.limit,
|
||||
search: this.search
|
||||
}
|
||||
}).then(response => {
|
||||
this.datos = response.data.registros.map(data => ({
|
||||
id: data.ID,
|
||||
nombre: data.nombre,
|
||||
}));
|
||||
|
||||
this.totalPages = response.data.totalPages;
|
||||
this.calculatePaginatedPages();
|
||||
}).catch(error => {
|
||||
console.error('Error al obtener datos:', error);
|
||||
}).finally(() => {
|
||||
this.setLoading(false);
|
||||
});
|
||||
},
|
||||
setSelectedItem(data) {
|
||||
this.selectedItem = { ...data };
|
||||
this.errors = {};
|
||||
},
|
||||
resetSelectedItem() {
|
||||
this.selectedItem = {};
|
||||
this.errors = {};
|
||||
},
|
||||
calculatePaginatedPages() {
|
||||
const maxVisiblePages = 5;
|
||||
const startPage = Math.max(1, this.page - Math.floor(maxVisiblePages / 2));
|
||||
const endPage = Math.min(this.totalPages, startPage + maxVisiblePages - 1);
|
||||
this.paginatedPages = Array.from({ length: endPage - startPage + 1 }, (_, i) => i + startPage);
|
||||
},
|
||||
goToPage(page) {
|
||||
this.page = page;
|
||||
this.loadData();
|
||||
},
|
||||
setLoading(value) {
|
||||
this.loading = value;
|
||||
},
|
||||
// validateFields(fields) {
|
||||
// this.errors = {};
|
||||
// fields.forEach(field => {
|
||||
// if (!this.selectedItem[field]) {
|
||||
// this.errors[field] = 'Este campo es obligatorio';
|
||||
// }
|
||||
// });
|
||||
// return Object.keys(this.errors).length === 0;
|
||||
// },
|
||||
|
||||
openViewModal(data) {
|
||||
this.setSelectedItem(data);
|
||||
this.viewModal = true;
|
||||
},
|
||||
openEditModal(data) {
|
||||
this.setSelectedItem(data);
|
||||
this.editModal = true;
|
||||
},
|
||||
|
||||
deleteItem() {
|
||||
this.setLoading(true);
|
||||
axios.delete(`/app/provservidor/${this.selectedItem.id}`)
|
||||
.then(() => {
|
||||
alert("Registro eliminado exitosamente.");
|
||||
this.resetSelectedItem();
|
||||
this.deleteModal = false;
|
||||
this.loadData();
|
||||
})
|
||||
.catch(error => console.error("Error al eliminar el registro:", error))
|
||||
.finally(() => this.setLoading(false));
|
||||
},
|
||||
openDeleteModal(data) {
|
||||
this.selectedItem.id = data.id;
|
||||
|
||||
this.deleteModal = true;
|
||||
},
|
||||
closeModals() {
|
||||
this.viewModal = false;
|
||||
this.addModal = false;
|
||||
this.editModal = false;
|
||||
this.deleteModal = false;
|
||||
|
||||
this.resetSelectedItem();
|
||||
},
|
||||
addItem() {
|
||||
this.setLoading(true);
|
||||
|
||||
axios.post('/app/provservidor', this.selectedItem)
|
||||
.then(response => {
|
||||
alert("Proveedor añadido exitosamente.");
|
||||
this.resetSelectedItem();
|
||||
this.addModal = false;
|
||||
this.loadData();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Error al añadir el servidor:", error);
|
||||
})
|
||||
.finally(() => {
|
||||
this.setLoading(false);
|
||||
});
|
||||
},
|
||||
|
||||
updateItem() {
|
||||
const dataToSend = {
|
||||
nombre: this.selectedItem.nombre
|
||||
};
|
||||
|
||||
this.setLoading(true);
|
||||
|
||||
axios.put(`/app/provservidor/${this.selectedItem.id}`, dataToSend)
|
||||
.then(response => {
|
||||
alert("Proveedor actualizado exitosamente.");
|
||||
this.resetSelectedItem();
|
||||
this.editModal = false;
|
||||
this.loadData();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Error al actualizar el proveedor:", error);
|
||||
})
|
||||
.finally(() => {
|
||||
this.setLoading(false);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,587 @@
|
||||
<div x-data="app" class="bg-white rounded-lg shadow">
|
||||
<div x-show="loading" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex justify-center items-center z-50">
|
||||
<img src="../img/loading.gif" alt="Cargando..." class="w-16 h-16" />
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto p-6 w-full">
|
||||
<div class="justify-between items-center w-full md:flex">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold mb-2">Lista de servidores</h1>
|
||||
<p class="mb-4 text-sm">Gestión de servidores.</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-4 md:mb-0 relative">
|
||||
<input type="text" placeholder="Buscar..." class="border border-gray-300 rounded p-2 w-full"
|
||||
x-model="search" @input.debounce.500ms="loadData()" />
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-end mb-4 gap-2 md:mb-0">
|
||||
<button @click="addModal = true"
|
||||
class="bg-[#8eb02f] text-white px-4 py-2 rounded text-sm">Nuevo</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table-auto w-full">
|
||||
<thead class="text-sm text-left py-4 border-b border-gray-300">
|
||||
<tr class="text-left font-semibold border-collapse">
|
||||
<th class="py-2 px-3 border-b">Nombre</th>
|
||||
<th class="py-2 px-3 border-b">IP Servidor</th>
|
||||
<th class="py-2 px-3 border-b">SO</th>
|
||||
<th class="py-2 px-3 border-b">Vencimiento</th>
|
||||
<th class="py-2 px-3 border-b">Ram</th>
|
||||
<th class="py-2 px-3 border-b">Nucleo</th>
|
||||
<th class="py-2 px-3 border-b">Disco</th>
|
||||
<th class="py-2 px-3 border-b">Ultimo ping</th>
|
||||
<th class="py-2 px-3 border-b">Proveedor</th>
|
||||
<th class="py-2 px-3 border-b">Tipo servidor</th>
|
||||
<th class="py-2 px-3 border-b"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-gray-500 select-none text-sm">
|
||||
<template x-for="data in datos" :key="data.id">
|
||||
<tr class="hover:bg-gray-100">
|
||||
|
||||
<td class="py-3 text-xs px-3 border-b" x-text="data.nombre"></td>
|
||||
<td class="py-3 text-xs px-3 border-b" x-text="data.ip_servidor"></td>
|
||||
<td class="py-3 text-xs px-3 border-b" x-text="data.so"></td>
|
||||
<td class="py-3 text-xs px-3 border-b" x-text="data.vencimiento"></td>
|
||||
<td class="py-3 text-xs px-3 border-b" x-text="data.ram"></td>
|
||||
<td class="py-3 text-xs px-3 border-b" x-text="data.nucleos"></td>
|
||||
<td class="py-3 text-xs px-3 border-b" x-text="data.disco"></td>
|
||||
<td class="py-3 text-xs px-3 border-b" x-text="data.ultimo_ping"></td>
|
||||
<td class="py-3 text-xs px-3 border-b"
|
||||
x-text="proveedores.find(prov => prov.ID == data.prov_servidor_id).nombre"></td>
|
||||
<td class="py-3 text-xs px-3 border-b"
|
||||
x-text="tipos.find(ts => ts.ID == data.tipo_servidor_id).nombre"></td>
|
||||
<td class="py-3 text-xs px-3 border-b w-24">
|
||||
<div class="flex items-center gap-2">
|
||||
<button @click="openViewModal(data)" title="Ver">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor" class="w-5 text-[#8eb02f]">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button @click="openEditModal(data)" title="Editar">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor" class="w-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
|
||||
</svg>
|
||||
</button>
|
||||
<button @click="openDeleteModal(data)" title="Eliminar">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor" class="w-5 text-red-500">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-start items-center gap-2 p-4 text-sm">
|
||||
<button @click="page = Math.max(1, page - 1); loadData()" :disabled="page === 1"
|
||||
class="px-4 py-2 text-black bg-gray-200 rounded-l-md opacity-50 disabled:cursor-not-allowed">
|
||||
Anterior
|
||||
</button>
|
||||
<template x-for="pageNum in paginatedPages" :key="pageNum">
|
||||
<button @click="goToPage(pageNum)"
|
||||
class="px-4 py-2 text-black bg-gray-200 bg-black text-gray-50 rounded-md hover:bg-gray-300"
|
||||
:class="{ 'bg-black text-white': pageNum === page }" x-text="pageNum"></button>
|
||||
</template>
|
||||
<button @click="page += 1; loadData()" :disabled="datos.length < limit" :disabled="page === totalPages"
|
||||
class="px-4 py-2 text-black bg-gray-200 rounded-r-md opacity-50 disabled:cursor-not-allowed">
|
||||
Siguiente
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modales -->
|
||||
<div x-show="viewModal"
|
||||
class="fixed inset-0 overflow-auto bg-gray-800 bg-opacity-75 flex justify-center items-center text-sm z-40">
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 w-11/12 max-w-lg">
|
||||
<h2 class="text-xl font-bold mb-4">Ver servidor</h2>
|
||||
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Nombre:</label>
|
||||
<input type="text" x-model="selectedItem.nombre" disabled
|
||||
class="border border-gray-300 rounded p-2 w-full" placeholder="Nombre" />
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">IP Servidor:</label>
|
||||
<input type="text" x-model="selectedItem.ip_servidor" disabled
|
||||
class="border border-gray-300 rounded p-2 w-full" placeholder="IP Servidor" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Sistema Operativo:</label>
|
||||
<input type="text" x-model="selectedItem.so" disabled
|
||||
class="border border-gray-300 rounded p-2 w-full" placeholder="Sistema Operativo" />
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Vencimiento:</label>
|
||||
<input type="date" x-model="selectedItem.vencimiento" disabled
|
||||
class="border border-gray-300 rounded p-2 w-full" placeholder="Vencimiento" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">RAM:</label>
|
||||
<input type="text" x-model="selectedItem.ram" disabled
|
||||
class="border border-gray-300 rounded p-2 w-full" placeholder="Ingresa la ram" />
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Nucleos:</label>
|
||||
<input type="text" x-model="selectedItem.nucleos" disabled
|
||||
class="border border-gray-300 rounded p-2 w-full" placeholder="Ingresa los nucleos" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Disco:</label>
|
||||
<input type="text" x-model="selectedItem.disco" disabled
|
||||
class="border border-gray-300 rounded p-2 w-full" placeholder="Ingresa el disco" />
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Ultimo ping:</label>
|
||||
<input type="text" x-model="selectedItem.ultimo_ping" disabled
|
||||
class="border border-gray-300 rounded p-2 w-full" placeholder="Ingresa el ultimo ping" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Proveedor:</label>
|
||||
<select x-model="selectedItem.prov_servidor_id" disabled
|
||||
class="border border-gray-300 rounded p-2 w-full">
|
||||
<option value="">Selecciona un proveedor</option>
|
||||
<template x-for="provedor in proveedores" :key="provedor.ID">
|
||||
<option :value="provedor.ID" x-text="provedor.nombre"></option>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Tipo de Servidor:</label>
|
||||
<select x-model="selectedItem.tipo_servidor_id" disabled
|
||||
class="border border-gray-300 rounded p-2 w-full">
|
||||
<option value="">Selecciona un tipo de servidor</option>
|
||||
<template x-for="tipo in tipos" :key="tipo.ID">
|
||||
<option :value="tipo.ID" x-text="tipo.nombre"></option>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-2 text-sm">
|
||||
<button @click="viewModal = false" class="px-4 py-2 bg-gray-600 text-white rounded">Cerrar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-show="editModal"
|
||||
class="fixed inset-0 overflow-auto bg-gray-800 bg-opacity-75 flex justify-center items-center text-sm z-40">
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 w-11/12 max-w-lg">
|
||||
<h2 class="text-xl font-bold mb-4">Editar servidor</h2>
|
||||
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Nombre:</label>
|
||||
<input type="text" x-model="selectedItem.nombre" class="border border-gray-300 rounded p-2 w-full"
|
||||
placeholder="Nombre" />
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">IP Servidor:</label>
|
||||
<input type="text" x-model="selectedItem.ip_servidor"
|
||||
class="border border-gray-300 rounded p-2 w-full" placeholder="IP Servidor" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Sistema Operativo:</label>
|
||||
<input type="text" x-model="selectedItem.so" class="border border-gray-300 rounded p-2 w-full"
|
||||
placeholder="Sistema Operativo" />
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Vencimiento:</label>
|
||||
<input type="date" x-model="selectedItem.vencimiento"
|
||||
class="border border-gray-300 rounded p-2 w-full" placeholder="Vencimiento" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">RAM:</label>
|
||||
<input type="text" x-model="selectedItem.ram" class="border border-gray-300 rounded p-2 w-full"
|
||||
placeholder="Ingresa la ram" />
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Nucleos:</label>
|
||||
<input type="text" x-model="selectedItem.nucleos" class="border border-gray-300 rounded p-2 w-full"
|
||||
placeholder="Ingresa los nucleos" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Disco:</label>
|
||||
<input type="text" x-model="selectedItem.disco" class="border border-gray-300 rounded p-2 w-full"
|
||||
placeholder="Ingresa el disco" />
|
||||
<p x-show="errors.disco" x-text="errors.disco" class="text-red-500 text-sm"></p>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Ultimo ping:</label>
|
||||
<input type="text" x-model="selectedItem.ultimo_ping"
|
||||
class="border border-gray-300 rounded p-2 w-full" placeholder="Ingresa el ultimo ping" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Proveedor:</label>
|
||||
<select x-model="selectedItem.prov_servidor_id" class="border border-gray-300 rounded p-2 w-full">
|
||||
<option value="">Selecciona un proveedor</option>
|
||||
<template x-for="provedor in proveedores" :key="provedor.ID">
|
||||
<option :value="provedor.ID" x-text="provedor.nombre"></option>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Tipo de Servidor:</label>
|
||||
<select x-model="selectedItem.tipo_servidor_id" class="border border-gray-300 rounded p-2 w-full">
|
||||
<option value="">Selecciona un tipo de servidor</option>
|
||||
<template x-for="tipo in tipos" :key="tipo.ID">
|
||||
<option :value="tipo.ID" x-text="tipo.nombre"></option>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between gap-2 text-sm">
|
||||
<button @click="updateItem()" class="px-4 py-2 bg-[#8eb02f] text-white rounded">Actualizar</button>
|
||||
<button @click="closeModals()" class="px-4 py-2 bg-gray-600 text-white rounded">Cerrar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-show="addModal"
|
||||
class="fixed inset-0 overflow-auto bg-gray-800 bg-opacity-75 flex justify-center items-center text-sm z-40">
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 w-11/12 max-w-lg">
|
||||
<h2 class="text-xl font-bold mb-4">Añadir servidor</h2>
|
||||
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Nombre:</label>
|
||||
<input type="text" x-model="selectedItem.nombre" class="border border-gray-300 rounded p-2 w-full"
|
||||
placeholder="Nombre" />
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">IP Servidor:</label>
|
||||
<input type="text" x-model="selectedItem.ip_servidor"
|
||||
class="border border-gray-300 rounded p-2 w-full" placeholder="IP Servidor" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Sistema Operativo:</label>
|
||||
<input type="text" x-model="selectedItem.so" class="border border-gray-300 rounded p-2 w-full"
|
||||
placeholder="Sistema Operativo" />
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Vencimiento:</label>
|
||||
<input type="date" x-model="selectedItem.vencimiento"
|
||||
class="border border-gray-300 rounded p-2 w-full" placeholder="Vencimiento" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">RAM:</label>
|
||||
<input type="text" x-model="selectedItem.ram" class="border border-gray-300 rounded p-2 w-full"
|
||||
placeholder="Ingresa la ram" />
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Nucleos:</label>
|
||||
<input type="text" x-model="selectedItem.nucleos" class="border border-gray-300 rounded p-2 w-full"
|
||||
placeholder="Ingresa los nucleos" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Disco:</label>
|
||||
<input type="text" x-model="selectedItem.disco" class="border border-gray-300 rounded p-2 w-full"
|
||||
placeholder="Ingresa el disco" />
|
||||
<p x-show="errors.disco" x-text="errors.disco" class="text-red-500 text-sm"></p>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Ultimo ping:</label>
|
||||
<input type="text" x-model="selectedItem.ultimo_ping"
|
||||
class="border border-gray-300 rounded p-2 w-full" placeholder="Ingresa el ultimo ping" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Proveedor:</label>
|
||||
<select x-model="selectedItem.prov_servidor_id" class="border border-gray-300 rounded p-2 w-full">
|
||||
<option value="">Selecciona un proveedor</option>
|
||||
<template x-for="provedor in proveedores" :key="provedor.ID">
|
||||
<option :value="provedor.ID" x-text="provedor.nombre"></option>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Tipo de Servidor:</label>
|
||||
<select x-model="selectedItem.tipo_servidor_id" class="border border-gray-300 rounded p-2 w-full">
|
||||
<option value="">Selecciona un tipo de servidor</option>
|
||||
<template x-for="tipo in tipos" :key="tipo.ID">
|
||||
<option :value="tipo.ID" x-text="tipo.nombre"></option>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between gap-2 text-sm">
|
||||
<button @click="addItem()" class="px-4 py-2 bg-[#8eb02f] text-white rounded">Guardar</button>
|
||||
<button @click="addModal = false" class="px-4 py-2 bg-gray-600 text-white rounded">Cancelar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-show="deleteModal"
|
||||
class="fixed inset-0 overflow-auto bg-gray-800 bg-opacity-75 flex justify-center items-center z-40">
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 w-11/12 max-w-lg text-sm">
|
||||
<h2 class="text-xl font-bold mb-4">Confirmar Eliminación</h2>
|
||||
|
||||
<p>¿Estás seguro de que deseas eliminar este registro?</p>
|
||||
|
||||
|
||||
<div class="flex mt-4 justify-end gap-2 text-sm">
|
||||
<button @click="deleteItem()" class="px-4 py-2 bg-red-500 text-white rounded">Eliminar</button>
|
||||
<button @click="closeModals()" class="bg-gray-600 text-white px-4 py-2 rounded">Cancelar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function app() {
|
||||
return {
|
||||
datos: [],
|
||||
proveedores: [],
|
||||
tipos: [],
|
||||
loading: false,
|
||||
limit: 10,
|
||||
page: 1,
|
||||
search: '',
|
||||
totalPages: 0,
|
||||
paginatedPages: [],
|
||||
// modales
|
||||
viewModal: false,
|
||||
addModal: false,
|
||||
editModal: false,
|
||||
deleteModal: false,
|
||||
selectedItem: {},
|
||||
errors: {},
|
||||
init() {
|
||||
this.loadData();
|
||||
this.loadProvServidor();
|
||||
this.loadTipoServidor();
|
||||
},
|
||||
loadData() {
|
||||
if (this.search !== '') {
|
||||
this.page = 1;
|
||||
this.limit = 100;
|
||||
} else {
|
||||
this.limit = 10;
|
||||
}
|
||||
this.setLoading(true);
|
||||
axios.get('/app/loadservidor', {
|
||||
params: {
|
||||
page: this.page,
|
||||
limit: this.limit,
|
||||
search: this.search
|
||||
}
|
||||
}).then(response => {
|
||||
this.datos = response.data.registros.map(data => ({
|
||||
id: data.ID,
|
||||
nombre: data.nombre,
|
||||
ip_servidor: data.ip_servidor,
|
||||
so: data.so,
|
||||
vencimiento: data.vencimiento,
|
||||
ram: data.ram,
|
||||
nucleos: data.nucleos,
|
||||
disco: data.disco,
|
||||
ultimo_ping: data.ultimo_ping,
|
||||
prov_servidor_id: data.prov_servidor_id,
|
||||
tipo_servidor_id: data.tipo_servidor_id,
|
||||
created_at: data.CreatedAt,
|
||||
}));
|
||||
|
||||
this.totalPages = response.data.totalPages;
|
||||
this.calculatePaginatedPages();
|
||||
}).catch(error => {
|
||||
console.error('Error al obtener datos:', error);
|
||||
}).finally(() => {
|
||||
this.setLoading(false);
|
||||
});
|
||||
},
|
||||
loadProvServidor() {
|
||||
axios.get('/app/loadprovservidor')
|
||||
.then(response => {
|
||||
this.proveedores = response.data.registros;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error al cargar proveedores:', error);
|
||||
});
|
||||
},
|
||||
loadTipoServidor() {
|
||||
axios.get('/app/loadtiposervidor')
|
||||
.then(response => {
|
||||
this.tipos = response.data.registros;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error al cargar tipos de servidor:', error);
|
||||
});
|
||||
},
|
||||
setSelectedItem(data) {
|
||||
this.selectedItem = { ...data };
|
||||
this.errors = {};
|
||||
},
|
||||
resetSelectedItem() {
|
||||
this.selectedItem = {};
|
||||
this.errors = {};
|
||||
},
|
||||
calculatePaginatedPages() {
|
||||
const maxVisiblePages = 5;
|
||||
const startPage = Math.max(1, this.page - Math.floor(maxVisiblePages / 2));
|
||||
const endPage = Math.min(this.totalPages, startPage + maxVisiblePages - 1);
|
||||
this.paginatedPages = Array.from({ length: endPage - startPage + 1 }, (_, i) => i + startPage);
|
||||
},
|
||||
goToPage(page) {
|
||||
this.page = page;
|
||||
this.loadData();
|
||||
},
|
||||
setLoading(value) {
|
||||
this.loading = value;
|
||||
},
|
||||
// validateFields(fields) {
|
||||
// this.errors = {};
|
||||
// fields.forEach(field => {
|
||||
// if (!this.selectedItem[field]) {
|
||||
// this.errors[field] = 'Este campo es obligatorio';
|
||||
// }
|
||||
// });
|
||||
// return Object.keys(this.errors).length === 0;
|
||||
// },
|
||||
|
||||
openViewModal(data) {
|
||||
this.setSelectedItem(data);
|
||||
this.viewModal = true;
|
||||
},
|
||||
openEditModal(data) {
|
||||
this.setSelectedItem(data);
|
||||
this.editModal = true;
|
||||
},
|
||||
|
||||
deleteItem() {
|
||||
this.setLoading(true);
|
||||
axios.delete(`/app/servidor/${this.selectedItem.id}`)
|
||||
.then(() => {
|
||||
alert("Registro eliminado exitosamente.");
|
||||
this.resetSelectedItem();
|
||||
this.deleteModal = false;
|
||||
this.loadData();
|
||||
})
|
||||
.catch(error => console.error("Error al eliminar el registro:", error))
|
||||
.finally(() => this.setLoading(false));
|
||||
},
|
||||
openDeleteModal(data) {
|
||||
this.selectedItem.id = data.id;
|
||||
|
||||
this.deleteModal = true;
|
||||
},
|
||||
closeModals() {
|
||||
this.viewModal = false;
|
||||
this.addModal = false;
|
||||
this.editModal = false;
|
||||
this.deleteModal = false;
|
||||
|
||||
this.resetSelectedItem();
|
||||
},
|
||||
addItem() {
|
||||
if (this.selectedItem.prov_servidor_id) {
|
||||
this.selectedItem.prov_servidor_id = parseInt(this.selectedItem.prov_servidor_id);
|
||||
} else {
|
||||
this.selectedItem.prov_servidor_id = null;
|
||||
}
|
||||
if (this.selectedItem.tipo_servidor_id) {
|
||||
this.selectedItem.tipo_servidor_id = parseInt(this.selectedItem.tipo_servidor_id);
|
||||
} else {
|
||||
this.selectedItem.tipo_servidor_id = null;
|
||||
}
|
||||
|
||||
this.setLoading(true);
|
||||
|
||||
axios.post('/app/servidor', this.selectedItem)
|
||||
.then(response => {
|
||||
alert("Servidor añadido exitosamente.");
|
||||
this.resetSelectedItem();
|
||||
this.addModal = false;
|
||||
this.loadData();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Error al añadir el servidor:", error);
|
||||
})
|
||||
.finally(() => {
|
||||
this.setLoading(false);
|
||||
});
|
||||
},
|
||||
|
||||
updateItem() {
|
||||
if (this.selectedItem.prov_servidor_id) {
|
||||
this.selectedItem.prov_servidor_id = parseInt(this.selectedItem.prov_servidor_id);
|
||||
} else {
|
||||
this.selectedItem.prov_servidor_id = null;
|
||||
}
|
||||
if (this.selectedItem.tipo_servidor_id) {
|
||||
this.selectedItem.tipo_servidor_id = parseInt(this.selectedItem.tipo_servidor_id);
|
||||
} else {
|
||||
this.selectedItem.tipo_servidor_id = null;
|
||||
}
|
||||
|
||||
const dataToSend = {
|
||||
nombre: this.selectedItem.nombre,
|
||||
ip_servidor: this.selectedItem.ip_servidor,
|
||||
so: this.selectedItem.so,
|
||||
vencimiento: this.selectedItem.vencimiento,
|
||||
ram: this.selectedItem.ram,
|
||||
nucleos: this.selectedItem.nucleos,
|
||||
disco: this.selectedItem.disco,
|
||||
ultimo_ping: this.selectedItem.ultimo_ping,
|
||||
prov_servidor_id: this.selectedItem.prov_servidor_id,
|
||||
tipo_servidor_id: this.selectedItem.tipo_servidor_id,
|
||||
};
|
||||
|
||||
this.setLoading(true);
|
||||
|
||||
axios.put(`/app/servidor/${this.selectedItem.id}`, dataToSend)
|
||||
.then(response => {
|
||||
alert("Servidor actualizado exitosamente.");
|
||||
this.resetSelectedItem();
|
||||
this.editModal = false;
|
||||
this.loadData();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Error al actualizar el servidor:", error);
|
||||
})
|
||||
.finally(() => {
|
||||
this.setLoading(false);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,313 @@
|
||||
<div x-data="app" class="bg-white rounded-lg shadow">
|
||||
<div x-show="loading" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex justify-center items-center z-50">
|
||||
<img src="../img/loading.gif" alt="Cargando..." class="w-16 h-16" />
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto p-6 w-full">
|
||||
<div class="justify-between items-center w-full md:flex">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold mb-2">Lista de tipos de db</h1>
|
||||
<p class="mb-4 text-sm">Gestión de tipos de db.</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-4 md:mb-0 relative">
|
||||
<input type="text" placeholder="Buscar..." class="border border-gray-300 rounded p-2 w-full"
|
||||
x-model="search" @input.debounce.500ms="loadData()" />
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-end mb-4 gap-2 md:mb-0">
|
||||
<button @click="addModal = true"
|
||||
class="bg-[#8eb02f] text-white px-4 py-2 rounded text-sm">Nuevo</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table-auto w-full">
|
||||
<thead class="text-sm text-left py-4 border-b border-gray-300">
|
||||
<tr class="text-left font-semibold border-collapse">
|
||||
<th class="py-2 px-3 border-b">Nombre</th>
|
||||
<th class="py-2 px-3 border-b"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-gray-500 select-none text-sm">
|
||||
<template x-for="data in datos" :key="data.id">
|
||||
<tr class="hover:bg-gray-100">
|
||||
<td class="py-3 text-xs px-3 border-b" x-text="data.nombre"></td>
|
||||
<td class="py-3 text-xs px-3 border-b w-24">
|
||||
<div class="flex items-center gap-2">
|
||||
<button @click="openViewModal(data)" title="Ver">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor" class="w-5 text-[#8eb02f]">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button @click="openEditModal(data)" title="Editar">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor" class="w-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
|
||||
</svg>
|
||||
</button>
|
||||
<button @click="openDeleteModal(data)" title="Eliminar">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor" class="w-5 text-red-500">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-start items-center gap-2 p-4 text-sm">
|
||||
<button @click="page = Math.max(1, page - 1); loadData()" :disabled="page === 1"
|
||||
class="px-4 py-2 text-black bg-gray-200 rounded-l-md opacity-50 disabled:cursor-not-allowed">
|
||||
Anterior
|
||||
</button>
|
||||
<template x-for="pageNum in paginatedPages" :key="pageNum">
|
||||
<button @click="goToPage(pageNum)"
|
||||
class="px-4 py-2 text-black bg-gray-200 bg-black text-gray-50 rounded-md hover:bg-gray-300"
|
||||
:class="{ 'bg-black text-white': pageNum === page }" x-text="pageNum"></button>
|
||||
</template>
|
||||
<button @click="page += 1; loadData()" :disabled="datos.length < limit" :disabled="page === totalPages"
|
||||
class="px-4 py-2 text-black bg-gray-200 rounded-r-md opacity-50 disabled:cursor-not-allowed">
|
||||
Siguiente
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modales -->
|
||||
<div x-show="viewModal"
|
||||
class="fixed inset-0 overflow-auto bg-gray-800 bg-opacity-75 flex justify-center items-center text-sm z-40">
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 w-11/12 max-w-lg">
|
||||
<h2 class="text-xl font-bold mb-4">Ver tipo db</h2>
|
||||
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Nombre:</label>
|
||||
<input type="text" x-model="selectedItem.nombre" disabled class="border border-gray-300 rounded p-2 w-full" placeholder="Nombre" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-2 text-sm">
|
||||
<button @click="viewModal = false" class="px-4 py-2 bg-gray-600 text-white rounded">Cerrar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-show="editModal"
|
||||
class="fixed inset-0 overflow-auto bg-gray-800 bg-opacity-75 flex justify-center items-center text-sm z-40">
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 w-11/12 max-w-lg">
|
||||
<h2 class="text-xl font-bold mb-4">Editar tipo db</h2>
|
||||
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Nombre:</label>
|
||||
<input type="text" x-model="selectedItem.nombre" class="border border-gray-300 rounded p-2 w-full" placeholder="Nombre" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between gap-2 text-sm">
|
||||
<button @click="updateItem()" class="px-4 py-2 bg-[#8eb02f] text-white rounded">Actualizar</button>
|
||||
<button @click="closeModals()" class="px-4 py-2 bg-gray-600 text-white rounded">Cerrar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-show="addModal"
|
||||
class="fixed inset-0 overflow-auto bg-gray-800 bg-opacity-75 flex justify-center items-center text-sm z-40">
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 w-11/12 max-w-lg">
|
||||
<h2 class="text-xl font-bold mb-4">Añadir tipo db</h2>
|
||||
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Nombre:</label>
|
||||
<input type="text" x-model="selectedItem.nombre" class="border border-gray-300 rounded p-2 w-full" placeholder="Nombre" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between gap-2 text-sm">
|
||||
<button @click="addItem()" class="px-4 py-2 bg-[#8eb02f] text-white rounded">Guardar</button>
|
||||
<button @click="addModal = false" class="px-4 py-2 bg-gray-600 text-white rounded">Cancelar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-show="deleteModal"
|
||||
class="fixed inset-0 overflow-auto bg-gray-800 bg-opacity-75 flex justify-center items-center z-40">
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 w-11/12 max-w-lg text-sm">
|
||||
<h2 class="text-xl font-bold mb-4">Confirmar Eliminación</h2>
|
||||
|
||||
<p>¿Estás seguro de que deseas eliminar este registro?</p>
|
||||
|
||||
|
||||
<div class="flex mt-4 justify-end gap-2 text-sm">
|
||||
<button @click="deleteItem()" class="px-4 py-2 bg-red-500 text-white rounded">Eliminar</button>
|
||||
<button @click="closeModals()" class="bg-gray-600 text-white px-4 py-2 rounded">Cancelar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function app() {
|
||||
return {
|
||||
datos: [],
|
||||
loading: false,
|
||||
limit: 10,
|
||||
page: 1,
|
||||
search: '',
|
||||
totalPages: 0,
|
||||
paginatedPages: [],
|
||||
// modales
|
||||
viewModal: false,
|
||||
addModal: false,
|
||||
editModal: false,
|
||||
deleteModal: false,
|
||||
selectedItem: {},
|
||||
errors: {},
|
||||
init() {
|
||||
this.loadData();
|
||||
},
|
||||
loadData() {
|
||||
if (this.search !== '') {
|
||||
this.page = 1;
|
||||
this.limit = 100;
|
||||
} else {
|
||||
this.limit = 10;
|
||||
}
|
||||
this.setLoading(true);
|
||||
axios.get('/app/loadtipodb', {
|
||||
params: {
|
||||
page: this.page,
|
||||
limit: this.limit,
|
||||
search: this.search
|
||||
}
|
||||
}).then(response => {
|
||||
this.datos = response.data.registros.map(data => ({
|
||||
id: data.ID,
|
||||
nombre: data.nombre,
|
||||
}));
|
||||
|
||||
this.totalPages = response.data.totalPages;
|
||||
this.calculatePaginatedPages();
|
||||
}).catch(error => {
|
||||
console.error('Error al obtener datos:', error);
|
||||
}).finally(() => {
|
||||
this.setLoading(false);
|
||||
});
|
||||
},
|
||||
setSelectedItem(data) {
|
||||
this.selectedItem = { ...data };
|
||||
this.errors = {};
|
||||
},
|
||||
resetSelectedItem() {
|
||||
this.selectedItem = {};
|
||||
this.errors = {};
|
||||
},
|
||||
calculatePaginatedPages() {
|
||||
const maxVisiblePages = 5;
|
||||
const startPage = Math.max(1, this.page - Math.floor(maxVisiblePages / 2));
|
||||
const endPage = Math.min(this.totalPages, startPage + maxVisiblePages - 1);
|
||||
this.paginatedPages = Array.from({ length: endPage - startPage + 1 }, (_, i) => i + startPage);
|
||||
},
|
||||
goToPage(page) {
|
||||
this.page = page;
|
||||
this.loadData();
|
||||
},
|
||||
setLoading(value) {
|
||||
this.loading = value;
|
||||
},
|
||||
// validateFields(fields) {
|
||||
// this.errors = {};
|
||||
// fields.forEach(field => {
|
||||
// if (!this.selectedItem[field]) {
|
||||
// this.errors[field] = 'Este campo es obligatorio';
|
||||
// }
|
||||
// });
|
||||
// return Object.keys(this.errors).length === 0;
|
||||
// },
|
||||
|
||||
openViewModal(data) {
|
||||
this.setSelectedItem(data);
|
||||
this.viewModal = true;
|
||||
},
|
||||
openEditModal(data) {
|
||||
this.setSelectedItem(data);
|
||||
this.editModal = true;
|
||||
},
|
||||
|
||||
deleteItem() {
|
||||
this.setLoading(true);
|
||||
axios.delete(`/app/tipodb/${this.selectedItem.id}`)
|
||||
.then(() => {
|
||||
alert("Registro eliminado exitosamente.");
|
||||
this.resetSelectedItem();
|
||||
this.deleteModal = false;
|
||||
this.loadData();
|
||||
})
|
||||
.catch(error => console.error("Error al eliminar el registro:", error))
|
||||
.finally(() => this.setLoading(false));
|
||||
},
|
||||
openDeleteModal(data) {
|
||||
this.selectedItem.id = data.id;
|
||||
|
||||
this.deleteModal = true;
|
||||
},
|
||||
closeModals() {
|
||||
this.viewModal = false;
|
||||
this.addModal = false;
|
||||
this.editModal = false;
|
||||
this.deleteModal = false;
|
||||
|
||||
this.resetSelectedItem();
|
||||
},
|
||||
addItem() {
|
||||
this.setLoading(true);
|
||||
|
||||
axios.post('/app/tipodb', this.selectedItem)
|
||||
.then(response => {
|
||||
alert("Tipo añadido exitosamente.");
|
||||
this.resetSelectedItem();
|
||||
this.addModal = false;
|
||||
this.loadData();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Error al añadir el tipo:", error);
|
||||
})
|
||||
.finally(() => {
|
||||
this.setLoading(false);
|
||||
});
|
||||
},
|
||||
|
||||
updateItem() {
|
||||
const dataToSend = {
|
||||
nombre: this.selectedItem.nombre
|
||||
};
|
||||
|
||||
this.setLoading(true);
|
||||
|
||||
axios.put(`/app/tipodb/${this.selectedItem.id}`, dataToSend)
|
||||
.then(response => {
|
||||
alert("Tipo actualizado exitosamente.");
|
||||
this.resetSelectedItem();
|
||||
this.editModal = false;
|
||||
this.loadData();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Error al actualizar el tipo:", error);
|
||||
})
|
||||
.finally(() => {
|
||||
this.setLoading(false);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,313 @@
|
||||
<div x-data="app" class="bg-white rounded-lg shadow">
|
||||
<div x-show="loading" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex justify-center items-center z-50">
|
||||
<img src="../img/loading.gif" alt="Cargando..." class="w-16 h-16" />
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto p-6 w-full">
|
||||
<div class="justify-between items-center w-full md:flex">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold mb-2">Lista de tipos de servidores</h1>
|
||||
<p class="mb-4 text-sm">Gestión de tipos de servidores.</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-4 md:mb-0 relative">
|
||||
<input type="text" placeholder="Buscar..." class="border border-gray-300 rounded p-2 w-full"
|
||||
x-model="search" @input.debounce.500ms="loadData()" />
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-end mb-4 gap-2 md:mb-0">
|
||||
<button @click="addModal = true"
|
||||
class="bg-[#8eb02f] text-white px-4 py-2 rounded text-sm">Nuevo</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table-auto w-full">
|
||||
<thead class="text-sm text-left py-4 border-b border-gray-300">
|
||||
<tr class="text-left font-semibold border-collapse">
|
||||
<th class="py-2 px-3 border-b">Nombre</th>
|
||||
<th class="py-2 px-3 border-b"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-gray-500 select-none text-sm">
|
||||
<template x-for="data in datos" :key="data.id">
|
||||
<tr class="hover:bg-gray-100">
|
||||
<td class="py-3 text-xs px-3 border-b" x-text="data.nombre"></td>
|
||||
<td class="py-3 text-xs px-3 border-b w-24">
|
||||
<div class="flex items-center gap-2">
|
||||
<button @click="openViewModal(data)" title="Ver">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor" class="w-5 text-[#8eb02f]">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button @click="openEditModal(data)" title="Editar">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor" class="w-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
|
||||
</svg>
|
||||
</button>
|
||||
<button @click="openDeleteModal(data)" title="Eliminar">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor" class="w-5 text-red-500">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-start items-center gap-2 p-4 text-sm">
|
||||
<button @click="page = Math.max(1, page - 1); loadData()" :disabled="page === 1"
|
||||
class="px-4 py-2 text-black bg-gray-200 rounded-l-md opacity-50 disabled:cursor-not-allowed">
|
||||
Anterior
|
||||
</button>
|
||||
<template x-for="pageNum in paginatedPages" :key="pageNum">
|
||||
<button @click="goToPage(pageNum)"
|
||||
class="px-4 py-2 text-black bg-gray-200 bg-black text-gray-50 rounded-md hover:bg-gray-300"
|
||||
:class="{ 'bg-black text-white': pageNum === page }" x-text="pageNum"></button>
|
||||
</template>
|
||||
<button @click="page += 1; loadData()" :disabled="datos.length < limit" :disabled="page === totalPages"
|
||||
class="px-4 py-2 text-black bg-gray-200 rounded-r-md opacity-50 disabled:cursor-not-allowed">
|
||||
Siguiente
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modales -->
|
||||
<div x-show="viewModal"
|
||||
class="fixed inset-0 overflow-auto bg-gray-800 bg-opacity-75 flex justify-center items-center text-sm z-40">
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 w-11/12 max-w-lg">
|
||||
<h2 class="text-xl font-bold mb-4">Ver tipo servidor</h2>
|
||||
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Nombre:</label>
|
||||
<input type="text" x-model="selectedItem.nombre" disabled class="border border-gray-300 rounded p-2 w-full" placeholder="Nombre" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-2 text-sm">
|
||||
<button @click="viewModal = false" class="px-4 py-2 bg-gray-600 text-white rounded">Cerrar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-show="editModal"
|
||||
class="fixed inset-0 overflow-auto bg-gray-800 bg-opacity-75 flex justify-center items-center text-sm z-40">
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 w-11/12 max-w-lg">
|
||||
<h2 class="text-xl font-bold mb-4">Editar tipo servidor</h2>
|
||||
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Nombre:</label>
|
||||
<input type="text" x-model="selectedItem.nombre" class="border border-gray-300 rounded p-2 w-full" placeholder="Nombre" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between gap-2 text-sm">
|
||||
<button @click="updateItem()" class="px-4 py-2 bg-[#8eb02f] text-white rounded">Actualizar</button>
|
||||
<button @click="closeModals()" class="px-4 py-2 bg-gray-600 text-white rounded">Cerrar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-show="addModal"
|
||||
class="fixed inset-0 overflow-auto bg-gray-800 bg-opacity-75 flex justify-center items-center text-sm z-40">
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 w-11/12 max-w-lg">
|
||||
<h2 class="text-xl font-bold mb-4">Añadir tipo servidor</h2>
|
||||
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block mb-2">Nombre:</label>
|
||||
<input type="text" x-model="selectedItem.nombre" class="border border-gray-300 rounded p-2 w-full" placeholder="Nombre" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between gap-2 text-sm">
|
||||
<button @click="addItem()" class="px-4 py-2 bg-[#8eb02f] text-white rounded">Guardar</button>
|
||||
<button @click="addModal = false" class="px-4 py-2 bg-gray-600 text-white rounded">Cancelar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-show="deleteModal"
|
||||
class="fixed inset-0 overflow-auto bg-gray-800 bg-opacity-75 flex justify-center items-center z-40">
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 w-11/12 max-w-lg text-sm">
|
||||
<h2 class="text-xl font-bold mb-4">Confirmar Eliminación</h2>
|
||||
|
||||
<p>¿Estás seguro de que deseas eliminar este registro?</p>
|
||||
|
||||
|
||||
<div class="flex mt-4 justify-end gap-2 text-sm">
|
||||
<button @click="deleteItem()" class="px-4 py-2 bg-red-500 text-white rounded">Eliminar</button>
|
||||
<button @click="closeModals()" class="bg-gray-600 text-white px-4 py-2 rounded">Cancelar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function app() {
|
||||
return {
|
||||
datos: [],
|
||||
loading: false,
|
||||
limit: 10,
|
||||
page: 1,
|
||||
search: '',
|
||||
totalPages: 0,
|
||||
paginatedPages: [],
|
||||
// modales
|
||||
viewModal: false,
|
||||
addModal: false,
|
||||
editModal: false,
|
||||
deleteModal: false,
|
||||
selectedItem: {},
|
||||
errors: {},
|
||||
init() {
|
||||
this.loadData();
|
||||
},
|
||||
loadData() {
|
||||
if (this.search !== '') {
|
||||
this.page = 1;
|
||||
this.limit = 100;
|
||||
} else {
|
||||
this.limit = 10;
|
||||
}
|
||||
this.setLoading(true);
|
||||
axios.get('/app/loadtiposervidor', {
|
||||
params: {
|
||||
page: this.page,
|
||||
limit: this.limit,
|
||||
search: this.search
|
||||
}
|
||||
}).then(response => {
|
||||
this.datos = response.data.registros.map(data => ({
|
||||
id: data.ID,
|
||||
nombre: data.nombre,
|
||||
}));
|
||||
|
||||
this.totalPages = response.data.totalPages;
|
||||
this.calculatePaginatedPages();
|
||||
}).catch(error => {
|
||||
console.error('Error al obtener datos:', error);
|
||||
}).finally(() => {
|
||||
this.setLoading(false);
|
||||
});
|
||||
},
|
||||
setSelectedItem(data) {
|
||||
this.selectedItem = { ...data };
|
||||
this.errors = {};
|
||||
},
|
||||
resetSelectedItem() {
|
||||
this.selectedItem = {};
|
||||
this.errors = {};
|
||||
},
|
||||
calculatePaginatedPages() {
|
||||
const maxVisiblePages = 5;
|
||||
const startPage = Math.max(1, this.page - Math.floor(maxVisiblePages / 2));
|
||||
const endPage = Math.min(this.totalPages, startPage + maxVisiblePages - 1);
|
||||
this.paginatedPages = Array.from({ length: endPage - startPage + 1 }, (_, i) => i + startPage);
|
||||
},
|
||||
goToPage(page) {
|
||||
this.page = page;
|
||||
this.loadData();
|
||||
},
|
||||
setLoading(value) {
|
||||
this.loading = value;
|
||||
},
|
||||
// validateFields(fields) {
|
||||
// this.errors = {};
|
||||
// fields.forEach(field => {
|
||||
// if (!this.selectedItem[field]) {
|
||||
// this.errors[field] = 'Este campo es obligatorio';
|
||||
// }
|
||||
// });
|
||||
// return Object.keys(this.errors).length === 0;
|
||||
// },
|
||||
|
||||
openViewModal(data) {
|
||||
this.setSelectedItem(data);
|
||||
this.viewModal = true;
|
||||
},
|
||||
openEditModal(data) {
|
||||
this.setSelectedItem(data);
|
||||
this.editModal = true;
|
||||
},
|
||||
|
||||
deleteItem() {
|
||||
this.setLoading(true);
|
||||
axios.delete(`/app/tiposervidor/${this.selectedItem.id}`)
|
||||
.then(() => {
|
||||
alert("Registro eliminado exitosamente.");
|
||||
this.resetSelectedItem();
|
||||
this.deleteModal = false;
|
||||
this.loadData();
|
||||
})
|
||||
.catch(error => console.error("Error al eliminar el registro:", error))
|
||||
.finally(() => this.setLoading(false));
|
||||
},
|
||||
openDeleteModal(data) {
|
||||
this.selectedItem.id = data.id;
|
||||
|
||||
this.deleteModal = true;
|
||||
},
|
||||
closeModals() {
|
||||
this.viewModal = false;
|
||||
this.addModal = false;
|
||||
this.editModal = false;
|
||||
this.deleteModal = false;
|
||||
|
||||
this.resetSelectedItem();
|
||||
},
|
||||
addItem() {
|
||||
this.setLoading(true);
|
||||
|
||||
axios.post('/app/tiposervidor', this.selectedItem)
|
||||
.then(response => {
|
||||
alert("Tipo añadido exitosamente.");
|
||||
this.resetSelectedItem();
|
||||
this.addModal = false;
|
||||
this.loadData();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Error al añadir el tipo:", error);
|
||||
})
|
||||
.finally(() => {
|
||||
this.setLoading(false);
|
||||
});
|
||||
},
|
||||
|
||||
updateItem() {
|
||||
const dataToSend = {
|
||||
nombre: this.selectedItem.nombre
|
||||
};
|
||||
|
||||
this.setLoading(true);
|
||||
|
||||
axios.put(`/app/tiposervidor/${this.selectedItem.id}`, dataToSend)
|
||||
.then(response => {
|
||||
alert("Tipo actualizado exitosamente.");
|
||||
this.resetSelectedItem();
|
||||
this.editModal = false;
|
||||
this.loadData();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Error al actualizar el tipo:", error);
|
||||
})
|
||||
.finally(() => {
|
||||
this.setLoading(false);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -38,8 +38,8 @@
|
||||
<table class=" table-auto w-full">
|
||||
<thead class="text-sm text-left py-4 border-b border-gray-300">
|
||||
<tr class="text-left font-semibold border-collapse">
|
||||
<th class="py-2 px-4 border-b w-52 " x-text=>Nombre</th>
|
||||
<th class="py-2 px-4 border-b w-52 ">Usuario</th>
|
||||
<th class="py-2 px-4 border-b w-52">Nombre</th>
|
||||
<th class="py-2 px-4 border-b w-52">Usuario</th>
|
||||
<th class="py-2 px-4 border-b">Estado</th>
|
||||
<th class="py-2 px-4 border-b">Email</th>
|
||||
<th class="py-2 px-4 border-b">Rol</th>
|
||||
|
||||
Reference in New Issue
Block a user