Initial commit
This commit is contained in:
Lizandro Guarnizo
@@ -0,0 +1,57 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Main</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
<style>
|
||||
.profile-action:hover .profile-action-dropdown {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
aside ul li:hover .menu-item-text {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
margin-left: 7rem;
|
||||
width: 10rem;
|
||||
padding: 22px;
|
||||
background-color: rgba(247, 250, 252, var(--bg-opacity));
|
||||
}
|
||||
|
||||
aside .logout:hover .menu-item-text {
|
||||
display: inline-block;
|
||||
padding: 22px;
|
||||
position: absolute;
|
||||
margin-left: 7rem;
|
||||
width: 10rem;
|
||||
}
|
||||
|
||||
.date:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
top: 12px;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.date:after {
|
||||
margin-left: 15px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
||||
<body class="bg-gray-200 h-screen w-screen flex">
|
||||
<div class="flex-1 flex flex-col" x-data="{ open: false }">
|
||||
<button class="bg-blue-500 text-white p-4" @click="open = !open">Toggle Dropdown</button>
|
||||
<div x-show="open" class="mt-2 p-4 bg-white shadow-lg">
|
||||
Dropdown Content
|
||||
</div>
|
||||
|
||||
{{template "partials/landing-header" .}}
|
||||
{{embed}}
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,66 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<link rel="stylesheet" href="/css/vendor.css">
|
||||
<link rel="stylesheet" href="/css/app.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f4f4f4;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
}
|
||||
.email-container {
|
||||
background-color: #ffffff;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
text-align: center;
|
||||
max-width: 600px;
|
||||
margin: auto;
|
||||
}
|
||||
.email-header {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.email-content {
|
||||
font-size: 16px;
|
||||
color: #555555;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.email-button {
|
||||
display: inline-block;
|
||||
margin-top: 20px;
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
background-color: #007bff;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
.email-button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
.footer-note {
|
||||
margin-top: 20px;
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
}
|
||||
</style>
|
||||
<head>
|
||||
<title>Main</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{{embed}}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,66 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>FACTURA</title>
|
||||
<!-- Tailwind CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||
<!-- PDF.js -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarcode.all.min.js"></script>
|
||||
|
||||
<style>
|
||||
#pdf-container {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
canvas {
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
#Modalexto {
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.notification-hidden {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s, visibility 0.5s;
|
||||
}
|
||||
|
||||
.notification-visible {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: opacity 0.5s, visibility 0.5s;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<style>
|
||||
[x-cloak] {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body class="bg-gray-100 justify-center items-center min-h-screen">
|
||||
<main class="flex justify-between w-full">
|
||||
|
||||
<div class="w-full">
|
||||
{{embed}}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Gases del Oriente</title>
|
||||
<!-- Alpine.js -->
|
||||
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
<!-- TailwindCSS -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<!-- Select2 CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
|
||||
<!-- Select2 JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
|
||||
<style>
|
||||
[x-cloak] {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main class="flex space-x-1 justify-between">
|
||||
<div class="w-full">
|
||||
{{embed}}
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Gases del Oriente</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<!-- Cargar jQuery primero -->
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<!-- Luego cargar Select2 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
|
||||
<style>
|
||||
[x-cloak] {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="bg-gray-200 w-full">
|
||||
<main class="flex justify-between w-full">
|
||||
<!-- Componente Lateral (Barra Lateral) -->
|
||||
{{template "partials/lateral" .}}
|
||||
<div class="w-full">
|
||||
{{template "partials/header" .}}
|
||||
<div class="w-full px-3 py-3 h-[calc(100vh-64px)] overflow-auto">
|
||||
{{embed}}
|
||||
</div>
|
||||
{{template "partials/footer" .}}
|
||||
</div>
|
||||
</main>
|
||||
<div x-data="sessionTimeout" x-init="init()" x-cloak class="hidden sm:block">
|
||||
<!-- Contador General de Inactividad -->
|
||||
<div x-show="!showModal" class="fixed top-2 right-20 border text rounded-lg p-2 bg-gray-100 text-sm">
|
||||
<p>Tiempo restante: <span x-text="formatTime(inactivityCountdown)"></span></p>
|
||||
</div>
|
||||
<!-- Modal -->
|
||||
<div x-show="showModal" class="fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-75">
|
||||
<div class="bg-white rounded-lg shadow-md p-8 w-[600px] relative">
|
||||
<h2 class="text-xl font-bold mb-6 text-center">¿Deseas continuar?</h2>
|
||||
<p class="text-gray-600 mb-6 text-center text-base">
|
||||
Has estado inactivo. Elige "Continuar" para seguir con tu sesión o "Cerrar sesión" para salir.
|
||||
</p>
|
||||
<!-- Contador del tiempo para responder -->
|
||||
<p class="text-center text-red-500 font-semibold mb-4">
|
||||
Tiempo para responder: <span x-text="countdown"></span> seg
|
||||
</p>
|
||||
<div class="flex justify-around">
|
||||
<button @click="continueSession"
|
||||
class="px-6 py-3 bg-[#8eb02f] text-white text-base rounded-lg hover:bg-[#698126]">
|
||||
Continuar
|
||||
</button>
|
||||
<form action="/do/logout" method="POST" class="inline-block">
|
||||
<button type="submit"
|
||||
class="px-6 py-3 bg-gray-500 text-white text-base rounded-lg hover:bg-gray-600">
|
||||
Cerrar sesión
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener("alpine:init", () => {
|
||||
Alpine.data("sessionTimeout", () => ({
|
||||
showModal: false,
|
||||
countdown: 60, // 10 segundos para responder
|
||||
inactivityCountdown: 300, // 5 minutos
|
||||
inactivityTimer: null,
|
||||
timer: null,
|
||||
|
||||
init() {
|
||||
this.resetInactivityTimer();
|
||||
|
||||
// Detectar actividad
|
||||
window.addEventListener("mousemove", () => this.resetInactivityTimer());
|
||||
window.addEventListener("keydown", () => this.resetInactivityTimer());
|
||||
},
|
||||
|
||||
resetInactivityTimer() {
|
||||
clearTimeout(this.inactivityTimer);
|
||||
this.inactivityCountdown = 300; // Reiniciar contador a 5 minutos
|
||||
this.startInactivityTimer();
|
||||
},
|
||||
|
||||
startInactivityTimer() {
|
||||
this.inactivityTimer = setInterval(() => {
|
||||
this.inactivityCountdown--;
|
||||
if (this.inactivityCountdown <= 0) {
|
||||
clearInterval(this.inactivityTimer);
|
||||
this.promptLogout();
|
||||
}
|
||||
}, 1000);
|
||||
},
|
||||
|
||||
promptLogout() {
|
||||
this.showModal = true;
|
||||
this.startCountdown();
|
||||
},
|
||||
|
||||
startCountdown() {
|
||||
this.countdown = 60; // Reiniciar contador del modal
|
||||
clearInterval(this.timer);
|
||||
this.timer = setInterval(() => {
|
||||
this.countdown--;
|
||||
if (this.countdown <= 0) {
|
||||
this.logout();
|
||||
}
|
||||
}, 1000);
|
||||
},
|
||||
|
||||
continueSession() {
|
||||
clearInterval(this.timer);
|
||||
this.showModal = false;
|
||||
this.resetInactivityTimer();
|
||||
},
|
||||
|
||||
logout() {
|
||||
clearInterval(this.timer);
|
||||
document.querySelector('form[action="/do/logout"]').submit();
|
||||
},
|
||||
|
||||
formatTime(seconds) {
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
const remainingSeconds = seconds % 60;
|
||||
return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`;
|
||||
},
|
||||
}));
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,151 @@
|
||||
<div x-data="modals" @keydown.escape="closeModal" class="bg-white rounded-lg shadow">
|
||||
|
||||
<div class="container mx-auto p-6 w-full">
|
||||
<h1 class="text-2xl font-bold mb-4">PQRs</h1>
|
||||
<div class="justify-between w-full md:flex">
|
||||
<p class="mb-4 text-sm">Relación de PQRs.</p>
|
||||
</div>
|
||||
|
||||
<!-- GIF de carga -->
|
||||
<div x-show="loading" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex z-50 justify-center items-center">
|
||||
<img src="../img/loading.gif" alt="Cargando..." class="w-16 h-16" />
|
||||
</div>
|
||||
|
||||
<!-- Mostrar registros obtenidos -->
|
||||
<div x-show="!loading && records.length > 0" class="overflow-x-auto mt-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<template x-for="(record, index) in records" :key="index">
|
||||
<table class="min-w-full border-collapse border border-gray-200 rounded-lg overflow-hidden shadow-sm bg-gray-100 text-sm">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="border border-gray-300 px-4 py-2 text-left font-bold">No. Solicitud</td>
|
||||
<td class="border border-gray-300 px-4 py-2 text-left" x-text="record.No_Solicitud"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border border-gray-300 px-4 py-2 text-left font-bold">Fecha</td>
|
||||
<td class="border border-gray-300 px-4 py-2 text-left" x-text="formatDate(record.Fecha)"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border border-gray-300 px-4 py-2 text-left font-bold">Hora</td>
|
||||
<td class="border border-gray-300 px-4 py-2 text-left" x-text="formatTime(record.Hora)"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border border-gray-300 px-4 py-2 text-left font-bold">Clase</td>
|
||||
<td class="border border-gray-300 px-4 py-2 text-left" x-text="record.Clase.trim() || '-'"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border border-gray-300 px-4 py-2 text-left font-bold">Causal</td>
|
||||
<td class="border border-gray-300 px-4 py-2 text-left" x-text="record.Causal.trim() || '-'"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border border-gray-300 px-4 py-2 text-left font-bold">Detalle</td>
|
||||
<td class="border border-gray-300 px-4 py-2 text-left" x-text="record.Detalle.trim() || '-'"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border border-gray-300 px-4 py-2 text-left font-bold">Factura</td>
|
||||
<td class="border border-gray-300 px-4 py-2 text-left" x-text="record.Factura.trim() || '-'"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border border-gray-300 px-4 py-2 text-left font-bold">Estado</td>
|
||||
<td class="border border-gray-300 px-4 py-2 text-left" x-text="record.Estado.trim() || '-'"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border border-gray-300 px-4 py-2 text-left font-bold">Observación</td>
|
||||
<td class="border border-gray-300 px-4 py-2 text-left" x-text="record.Observacion.trim() || '-'"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border border-gray-300 px-4 py-2 text-left font-bold">Fecha Solución</td>
|
||||
<td class="border border-gray-300 px-4 py-2 text-left" x-text="formatDate(record.Fecha_Sol)"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border border-gray-300 px-4 py-2 text-left font-bold">Hora Solución</td>
|
||||
<td class="border border-gray-300 px-4 py-2 text-left" x-text="formatTime(record.Hora_Sol)"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border border-gray-300 px-4 py-2 text-left font-bold">Solución</td>
|
||||
<td class="border border-gray-300 px-4 py-2 text-left" x-text="record.Solucion.trim() || '-'"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border border-gray-300 px-4 py-2 text-left font-bold">Detalle Solución</td>
|
||||
<td class="border border-gray-300 px-4 py-2 text-left" x-text="record.DetalleSol.trim() || '-'"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border border-gray-300 px-4 py-2 text-left font-bold">Lectura</td>
|
||||
<td class="border border-gray-300 px-4 py-2 text-left" x-text="record.Lectura.trim() || '-'"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border border-gray-300 px-4 py-2 text-left font-bold">Observaciones Sol</td>
|
||||
<td class="border border-gray-300 px-4 py-2 text-left" x-text="record.Observaciones_Sol.trim() || '-'"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Mensaje si no hay registros -->
|
||||
<div x-show="!loading && records.length === 0" class="text-center mt-4 text-gray-500">
|
||||
No se encontraron registros.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alpine.js Script -->
|
||||
<script>
|
||||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.data('modals', () => ({
|
||||
usuario: '{{ .user.NombreUsuario }}',
|
||||
records: [],
|
||||
loading: false,
|
||||
|
||||
init() {
|
||||
console.log('init llamado');
|
||||
this.loadRegister();
|
||||
},
|
||||
|
||||
async loadRegister() {
|
||||
try {
|
||||
console.log('loadRegister llamado');
|
||||
this.loading = true;
|
||||
const response = await fetch(`/app/loadpqrsicom/${this.usuario}`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Error al cargar registros: ${response.statusText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
console.log('Registros obtenidos:', data);
|
||||
this.records = data?.data || [];
|
||||
} catch (error) {
|
||||
console.error('Error al cargar los registros:', error);
|
||||
this.records = [];
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
formatDate(date) {
|
||||
return new Date(date).toLocaleDateString('es-CO', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit'
|
||||
});
|
||||
},
|
||||
|
||||
formatTime(time) {
|
||||
const [hour, minute] = time.slice(11, 16).split(':');
|
||||
return `${hour}:${minute}`;
|
||||
},
|
||||
|
||||
closeModal() {
|
||||
this.loading = false;
|
||||
},
|
||||
}));
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
@@ -0,0 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>{{.title}} Verify.Rest | Validate, Clean and Analyze </title>
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png">
|
||||
<link rel="short icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png">
|
||||
</head>
|
||||
<body class="flex flex-col min-h-screen ">
|
||||
{{template "partials/landing/header" .}}
|
||||
<div id="body-wrapper" class="flex-grow min-h-screen mt-32">
|
||||
{{embed}}
|
||||
</div>
|
||||
|
||||
{{template "partials/landing/footer" .}}
|
||||
<link rel="stylesheet" href="/css/vendor.css">
|
||||
<link rel="stylesheet" href="/css/landing.css">
|
||||
<script defer id="slcLiveChat" src="https://widget.sonetel.com/SonetelWidget.min.js" data-account-id="207431552"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user