lizandrogd/soft_usite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update hostinger.html

Browse Source
This commit is contained in:
Lizandro Guarnizo
2026-06-06 21:57:30 -05:00
parent 8bf6f19e54
commit d701534537
1 changed files with 62 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/hostinger.html
+62 -4
View File
@@ -57,8 +57,12 @@
<!-- ─── TAB: VPS ─── -->
<div x-show="activeTab==='vps'">
<div x-show="vps.length === 0 && !loading" class="text-sm text-gray-400 py-8 text-center">Sin datos. Haz clic en "Actualizar datos".</div>
<div x-show="vps.length > 0" class="mb-4">
<input x-model="vpsSearch" type="text" placeholder="Buscar por hostname, IP, plan, datacenter..."
class="w-full border rounded-lg px-3 py-2 text-sm" />
</div>
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
<template x-for="v in vps" :key="v.id">
<template x-for="v in filteredVPS" :key="v.id">
<div class="border rounded-xl p-4 bg-white shadow-sm hover:shadow-md transition">
<div class="flex items-center justify-between mb-3">
<span class="font-semibold text-sm truncate" x-text="v.hostname"></span>
@@ -122,6 +126,10 @@
<!-- ─── TAB: Dominios ─── -->
<div x-show="activeTab==='domains'">
<div x-show="domains.length === 0 && !loading" class="text-sm text-gray-400 py-8 text-center">Sin datos. Haz clic en "Actualizar datos".</div>
<div x-show="domains.length > 0" class="mb-4">
<input x-model="domainsSearch" type="text" placeholder="Buscar dominio o estado..."
class="w-full border rounded-lg px-3 py-2 text-sm" />
</div>
<div class="overflow-x-auto">
<table class="table-auto w-full text-sm">
<thead>
@@ -134,7 +142,7 @@
</tr>
</thead>
<tbody>
<template x-for="(d, dIdx) in domains" :key="d.domain + '_' + dIdx">
<template x-for="(d, dIdx) in filteredDomains" :key="d.domain + '_' + dIdx">
<tr class="border-b hover:bg-gray-50">
<td class="py-2 px-3 font-mono text-xs" x-text="d.domain"></td>
<td class="py-2 px-3">
@@ -181,6 +189,10 @@
<!-- ─── TAB: Hosting ─── -->
<div x-show="activeTab==='hosting'">
<div x-show="hosting.length === 0 && !loading" class="text-sm text-gray-400 py-8 text-center">Sin datos. Haz clic en "Actualizar datos".</div>
<div x-show="hosting.length > 0" class="mb-4">
<input x-model="hostingSearch" type="text" placeholder="Buscar por dominio, tipo o usuario..."
class="w-full border rounded-lg px-3 py-2 text-sm" />
</div>
<div class="overflow-x-auto">
<table class="table-auto w-full text-sm">
<thead>
@@ -193,7 +205,7 @@
</tr>
</thead>
<tbody>
<template x-for="(h, hIdx) in hosting" :key="h.domain + '_' + hIdx">
<template x-for="(h, hIdx) in filteredHosting" :key="h.domain + '_' + hIdx">
<tr class="border-b hover:bg-gray-50">
<td class="py-2 px-3 font-mono text-xs" x-text="h.domain || '—'"></td>
<td class="py-2 px-3 text-xs" x-text="h.vhost_type || '—'"></td>
@@ -214,6 +226,10 @@
<!-- ─── TAB: Facturación ─── -->
<div x-show="activeTab==='orders'">
<div x-show="orders.length === 0 && !loading" class="text-sm text-gray-400 py-8 text-center">Sin datos. Haz clic en "Actualizar datos".</div>
<div x-show="orders.length > 0" class="mb-4">
<input x-model="ordersSearch" type="text" placeholder="Buscar por nombre, ID o estado..."
class="w-full border rounded-lg px-3 py-2 text-sm" />
</div>
<div class="overflow-x-auto">
<table class="table-auto w-full text-sm">
<thead>
@@ -227,7 +243,7 @@
</tr>
</thead>
<tbody>
<template x-for="o in orders" :key="o.id">
<template x-for="o in filteredOrders" :key="o.id">
<tr class="border-b hover:bg-gray-50">
<td class="py-2 px-3 text-xs" x-text="o.name || '—'"></td>
<td class="py-2 px-3">
@@ -567,6 +583,10 @@ document.addEventListener('alpine:init', () => {
domains: [],
hosting: [],
orders: [],
vpsSearch: '',
domainsSearch: '',
hostingSearch: '',
ordersSearch: '',
dnsRecords: [],
dnsDomain: '',
dnsNameServers: null,
@@ -602,6 +622,44 @@ document.addEventListener('alpine:init', () => {
}
},
get filteredVPS() {
if (!this.vpsSearch) return this.vps;
const q = this.vpsSearch.toLowerCase();
return this.vps.filter(v =>
(v.hostname && v.hostname.toLowerCase().includes(q)) ||
(v.plan && v.plan.toLowerCase().includes(q)) ||
(v.data_center && v.data_center.toLowerCase().includes(q)) ||
(v.state && v.state.toLowerCase().includes(q)) ||
(v.ipv4 && v.ipv4.some(ip => ip.address && ip.address.includes(q)))
);
},
get filteredDomains() {
if (!this.domainsSearch) return this.domains;
const q = this.domainsSearch.toLowerCase();
return this.domains.filter(d =>
(d.domain && d.domain.toLowerCase().includes(q)) ||
(d.status && d.status.toLowerCase().includes(q))
);
},
get filteredHosting() {
if (!this.hostingSearch) return this.hosting;
const q = this.hostingSearch.toLowerCase();
return this.hosting.filter(h =>
(h.domain && h.domain.toLowerCase().includes(q)) ||
(h.vhost_type && h.vhost_type.toLowerCase().includes(q)) ||
(h.username && h.username.toLowerCase().includes(q))
);
},
get filteredOrders() {
if (!this.ordersSearch) return this.orders;
const q = this.ordersSearch.toLowerCase();
return this.orders.filter(o =>
(o.name && o.name.toLowerCase().includes(q)) ||
(o.status && o.status.toLowerCase().includes(q)) ||
(o.id && o.id.toLowerCase().includes(q))
);
},
async loadTab() {
this.loading = true;
try {