From 967f809714cf5547e8c2874ff6bc1347f55538f8 Mon Sep 17 00:00:00 2001 From: gdcastellano Date: Mon, 16 Dec 2024 17:47:57 -0400 Subject: [PATCH] Add styles for "Nuevo Contrato" form and modal, including layout and button enhancements --- view/productoras.js | 257 +++++++++++++++++++++++++++++++++++++- view/script.js | 149 ++++++++++++++++++++++ view/styles.css | 296 +++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 700 insertions(+), 2 deletions(-) diff --git a/view/productoras.js b/view/productoras.js index b7cb257..9518c10 100644 --- a/view/productoras.js +++ b/view/productoras.js @@ -49,7 +49,6 @@ export async function cargarDatosProductoras() { function mostrarDetallesProductora(productora) { cambiarSeccion('detalles'); const titulo = document.getElementById('vista-titulo'); - const info = document.getElementById('detalles-info'); const catalogo = document.querySelector('#catalogo-flores'); const volverBtn = document.getElementById('volver-btn'); @@ -57,12 +56,39 @@ function mostrarDetallesProductora(productora) { volverBtn.style.display = 'block'; volverBtn.onclick = () => cambiarSeccion('productores'); + // Crear contenedor flex para la información y el botón de contratos + const infoContainer = document.createElement('div'); + infoContainer.className = 'info-container'; + + // Crear contenedor para la información de la productora + const info = document.createElement('div'); + info.className = 'info'; info.innerHTML = `

${productora.email ? `Email: ${productora.email}` : ''}

${productora.paginaweb ? `

Página Web: ${productora.paginaweb}

` : ''}

País: ${productora.pais || 'Desconocido'}

`; + // Crear botón de "Contratos" + const contratosBtn = document.createElement('button'); + contratosBtn.id = 'contratos-btn'; + contratosBtn.className = 'contratos-btn'; + contratosBtn.innerHTML = ' Contratos'; + + // Añadir event listener para mostrar el modal de contratos + contratosBtn.addEventListener('click', () => { + mostrarModalContratos(productora); + }); + + // Añadir la información y el botón al contenedor flex + infoContainer.appendChild(info); + infoContainer.appendChild(contratosBtn); + + // Añadir el contenedor flex al contenedor de detalles + const detallesInfo = document.getElementById('detalles-info'); + detallesInfo.innerHTML = ''; + detallesInfo.appendChild(infoContainer); + catalogo.innerHTML = ''; // Datos de prueba para las flores @@ -140,6 +166,235 @@ function mostrarModalFlor(flor) { modal.style.display = 'block'; } +// Función para mostrar el modal de contratos +function mostrarModalContratos(productora) { + // Crear modal + const modal = document.createElement('div'); + modal.className = 'modal'; + modal.id = 'contratos-modal'; + modal.innerHTML = ` +
+ × +

Contratos

+
+ + +
+ + + + +
+ `; + + document.body.appendChild(modal); + + // Mostrar el modal + modal.style.display = 'block'; + + // Event listeners del modal + const closeModal = document.getElementById('close-contratos-modal'); + closeModal.addEventListener('click', () => { + modal.remove(); + }); + + window.addEventListener('click', (e) => { + if (e.target === modal) { + modal.remove(); + } + }); + + const nuevoContratoBtn = document.getElementById('nuevo-contrato-btn'); + const renovarContratoBtn = document.getElementById('renovar-contrato-btn'); + const nuevoContratoForm = document.getElementById('nuevo-contrato-form'); + const renovarContratoForm = document.getElementById('renovar-contrato-form'); + const subastadoraSelect = document.getElementById('subastadoraSelect'); + const existingContractInput = document.getElementById('existingContract'); + const contractDetailsP = document.getElementById('contract-details'); + const tipoProductorSelect = document.getElementById('tipoProductor'); + const porcentajeProduccionInput = document.getElementById('porcentajeProduccion'); + + nuevoContratoBtn.addEventListener('click', () => { + nuevoContratoForm.style.display = 'block'; + renovarContratoForm.style.display = 'none'; + // Cargar opciones de subastadoras + cargarSubastadoras(); + }); + + renovarContratoBtn.addEventListener('click', () => { + renovarContratoForm.style.display = 'block'; + nuevoContratoForm.style.display = 'none'; + }); + + subastadoraSelect.addEventListener('change', () => { + const subastadoraId = subastadoraSelect.value; + if (subastadoraId) { + // Buscar contrato existente + buscarContratoExistente(productora.id, subastadoraId); + } else { + existingContractInput.value = ''; + } + }); + + tipoProductorSelect.addEventListener('change', () => { + const tipoProductor = tipoProductorSelect.value; + switch (tipoProductor) { + case 'CA': + porcentajeProduccionInput.value = ''; + porcentajeProduccionInput.min = 50; + porcentajeProduccionInput.max = 100; + porcentajeProduccionInput.disabled = false; + break; + case 'CB': + porcentajeProduccionInput.value = ''; + porcentajeProduccionInput.min = 20; + porcentajeProduccionInput.max = 49; + porcentajeProduccionInput.disabled = false; + break; + case 'CC': + porcentajeProduccionInput.value = ''; + porcentajeProduccionInput.min = 0; + porcentajeProduccionInput.max = 19; + porcentajeProduccionInput.disabled = false; + break; + case 'KA': + porcentajeProduccionInput.value = 100; + porcentajeProduccionInput.disabled = true; + break; + default: + porcentajeProduccionInput.value = ''; + porcentajeProduccionInput.disabled = true; + break; + } + }); + + // Validación al enviar el formulario + const formularioInsertar = document.querySelector('.formulario-insertar'); + formularioInsertar.addEventListener('submit', (e) => { + const tipoProductor = tipoProductorSelect.value; + const porcentaje = parseFloat(porcentajeProduccionInput.value); + let isValid = true; + let mensaje = ''; + + if (!porcentajeProduccionInput.disabled) { + switch (tipoProductor) { + case 'CA': + if (porcentaje < 50 || porcentaje > 100) { + isValid = false; + mensaje = 'Para Tipo CA, el porcentaje debe ser entre 50% y 100%.'; + } + break; + case 'CB': + if (porcentaje < 20 || porcentaje > 49) { + isValid = false; + mensaje = 'Para Tipo CB, el porcentaje debe ser entre 20% y 49%.'; + } + break; + case 'CC': + if (porcentaje < 0 || porcentaje > 19) { + isValid = false; + mensaje = 'Para Tipo CC, el porcentaje debe ser menos del 20%.'; + } + break; + default: + break; + } + + if (!isValid) { + e.preventDefault(); + alert(mensaje); + } + } + }); + + // Función para cargar subastadoras + function cargarSubastadoras() { + // Simulación de obtención de subastadoras + const subastadoras = [ + { id: 1, nombre: 'Subastadora A' }, + { id: 2, nombre: 'Subastadora B' }, + // ...más subastadoras + ]; + subastadoraSelect.innerHTML = ''; + subastadoras.forEach(subastadora => { + const option = document.createElement('option'); + option.value = subastadora.id; + option.textContent = subastadora.nombre; + subastadoraSelect.appendChild(option); + }); + } + + // Función para buscar contrato existente + function buscarContratoExistente(productoraId, subastadoraId) { + // Simulación de búsqueda de contrato existente + const contrato = obtenerContratoExistente(productoraId, subastadoraId); + if (contrato) { + existingContractInput.value = `Contrato Nº: ${contrato.nContrato}, Fecha Emisión: ${contrato.fechaEmision}`; + } else { + existingContractInput.value = 'No hay contrato existente'; + } + } + + // Función simulada para obtener contrato existente + function obtenerContratoExistente(productoraId, subastadoraId) { + // Retorna un contrato si existe, o null + return null; // Reemplazar con implementación real + } +} + // Función para cerrar el modal function cerrarModal() { const modal = document.getElementById('modal'); diff --git a/view/script.js b/view/script.js index 6db4e7f..51e290d 100644 --- a/view/script.js +++ b/view/script.js @@ -79,6 +79,14 @@ document.addEventListener('DOMContentLoaded', () => { }); }); + // Event listener for "Contratos" button + document.addEventListener('click', (event) => { + if (event.target && event.target.id === 'contratos-btn') { + const productoraId = event.target.getAttribute('data-productora-id'); + mostrarModalContratos(productoraId); + } + }); + // Cargar el panel principal al inicio cambiarSeccion('main'); }); @@ -91,3 +99,144 @@ window.addEventListener('resize', () => { } }); +// Función para mostrar el modal de contratos +function mostrarModalContratos(productoraId) { + // Crear modal + const modal = document.createElement('div'); + modal.className = 'modal'; + modal.id = 'contratos-modal'; + modal.innerHTML = ` +
+ × +

Contratos

+
+ + +
+ + + + +
+ `; + + document.body.appendChild(modal); + + // Event listeners del modal + const closeModal = document.getElementById('close-contratos-modal'); + closeModal.addEventListener('click', () => { + modal.remove(); + }); + + window.addEventListener('click', (e) => { + if (e.target === modal) { + modal.remove(); + } + }); + + const nuevoContratoBtn = document.getElementById('nuevo-contrato-btn'); + const renovarContratoBtn = document.getElementById('renovar-contrato-btn'); + const nuevoContratoForm = document.getElementById('nuevo-contrato-form'); + const renovarContratoForm = document.getElementById('renovar-contrato-form'); + const subastadoraSelect = document.getElementById('subastadoraSelect'); + const existingContractDiv = document.getElementById('existing-contract'); + const contractDetailsP = document.getElementById('contract-details'); + + nuevoContratoBtn.addEventListener('click', () => { + nuevoContratoForm.style.display = 'block'; + renovarContratoForm.style.display = 'none'; + // Cargar opciones de subastadoras + cargarSubastadoras(); + }); + + renovarContratoBtn.addEventListener('click', () => { + renovarContratoForm.style.display = 'block'; + nuevoContratoForm.style.display = 'none'; + }); + + subastadoraSelect.addEventListener('change', () => { + const subastadoraId = subastadoraSelect.value; + if (subastadoraId) { + // Buscar contrato existente + buscarContratoExistente(productoraId, subastadoraId); + } else { + existingContractDiv.style.display = 'none'; + } + }); + + // Función para cargar subastadoras + function cargarSubastadoras() { + // Simulación de obtención de subastadoras + const subastadoras = [ + { id: 1, nombre: 'Subastadora A' }, + { id: 2, nombre: 'Subastadora B' }, + // ...más subastadoras + ]; + subastadoraSelect.innerHTML = ''; + subastadoras.forEach(subastadora => { + const option = document.createElement('option'); + option.value = subastadora.id; + option.textContent = subastadora.nombre; + subastadoraSelect.appendChild(option); + }); + } + + // Función para buscar contrato existente + function buscarContratoExistente(productoraId, subastadoraId) { + // Simulación de búsqueda de contrato existente + const contrato = getExistingContract(productoraId, subastadoraId); + if (contrato) { + existingContractDiv.style.display = 'block'; + contractDetailsP.textContent = `Contrato Nº: ${contrato.nContrato}, Fecha Emisión: ${contrato.fechaEmision}`; + } else { + existingContractDiv.style.display = 'none'; + } + } + + // Función para obtener contrato existente (simulación) + function getExistingContract(productoraId, subastadoraId) { + // Simulación de obtención de contrato existente + return null; // Reemplazar con la implementación real + } +} + diff --git a/view/styles.css b/view/styles.css index 7ec92fe..f7becdb 100644 --- a/view/styles.css +++ b/view/styles.css @@ -150,7 +150,7 @@ section.active { .modal { display: none; position: fixed; - z-index: 1000; + z-index: 1001; left: 0; top: 0; width: 100%; @@ -603,6 +603,39 @@ section.active { background-color: var(--color-primary-dark); } +/* Estilos para el formulario de "Nuevo Contrato" */ +.formulario-insertar .form-row { + display: flex; + justify-content: space-between; + margin-bottom: 15px; +} + +.formulario-insertar .form-group { + flex: 1; + display: flex; + flex-direction: column; + margin-right: 10px; +} + +.formulario-insertar .form-group:last-child { + margin-right: 0; +} + +.formulario-insertar label { + margin-bottom: 5px; +} + +.formulario-insertar input, +.formulario-insertar select { + padding: 8px; + border: 1px solid #ccc; + border-radius: 4px; +} + +.formulario-insertar input[readonly] { + background-color: #f9f9f9; +} + .submenu { margin-bottom: 20px; } @@ -763,4 +796,265 @@ section.active { background-color: #f0f0f0; border: 1px solid #ddd; margin-left: auto; +} + +/* Styles for Contratos button */ +.contratos-btn { + background-color: var(--color-primary); + color: white; + border: none; + padding: 10px 20px; + font-size: 1em; + border-radius: 5px; + cursor: pointer; + float: right; + display: flex; + align-items: center; +} + +.contratos-btn i { + margin-right: 5px; +} + +.contratos-btn:hover { + background-color: var(--color-primary-dark); +} + +/* Styles for Contratos modal */ +.modal { + display: none; + position: fixed; + z-index: 1001; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0,0,0,0.5); +} + +.modal-content { + background-color: var(--color-background); + margin: 5% auto; + padding: 20px; + border: 1px solid var(--color-primary); + width: 90%; + max-width: 800px; + border-radius: 5px; + position: relative; +} + +.modal-content .close { + color: var(--color-text); + position: absolute; + top: 10px; + right: 20px; + font-size: 28px; + font-weight: bold; + cursor: pointer; +} + +.modal-content .close:hover { + color: var(--color-accent); +} + +.contratos-options { + display: flex; + justify-content: space-around; + margin-top: 20px; +} + +.contrato-card { + width: 45%; + padding: 20px; + text-align: center; + cursor: pointer; +} + +.contrato-card i { + font-size: 2em; + margin-bottom: 10px; + color: var(--color-primary); +} + +.contrato-card:hover { + background-color: var(--color-secondary); +} + +.contrato-form { + margin-top: 20px; +} + +.contrato-form h3 { + color: var(--color-primary); +} + +.existing-contract { + background-color: #f9f9f9; + padding: 10px; + border: 1px solid var(--color-primary); + border-radius: 5px; + margin-bottom: 20px; +} + +/* Estilos para el botón de "Contratos" */ +.contratos-btn { + background-color: var(--color-primary); + color: white; + border: none; + padding: 10px 20px; + font-size: 1em; + border-radius: 5px; + cursor: pointer; + display: flex; + align-items: center; + margin-bottom: 10px; +} + +.contratos-btn i { + margin-right: 5px; +} + +.contratos-btn:hover { + background-color: var(--color-primary-dark); +} + +/* Estilos para el modal de "Contratos" */ +.modal { + display: none; + position: fixed; + z-index: 1001; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0,0,0,0.5); +} + +.modal-content { + background-color: var(--color-background); + margin: 5% auto; + padding: 20px; + border: 1px solid var(--color-primary); + width: 90%; + max-width: 800px; + border-radius: 5px; + position: relative; +} + +.modal-content .close { + color: var(--color-text); + position: absolute; + top: 10px; + right: 20px; + font-size: 28px; + font-weight: bold; + cursor: pointer; +} + +.modal-content .close:hover { + color: var(--color-accent); +} + +.contratos-options { + display: flex; + justify-content: space-around; + margin-top: 20px; +} + +.contrato-card { + width: 45%; + padding: 20px; + text-align: center; + cursor: pointer; + border: 1px solid var(--color-primary); + border-radius: 5px; +} + +.contrato-card i { + font-size: 2em; + margin-bottom: 10px; + color: var(--color-primary); +} + +.contrato-card:hover { + background-color: var(--color-secondary); +} + +.contrato-form { + margin-top: 20px; +} + +.contrato-form h3 { + color: var(--color-primary); +} + +.contrato-form label { + display: block; + margin-bottom: 5px; + color: var(--color-text); +} + +.contrato-form input, +.contrato-form select { + padding: 8px; + margin-bottom: 15px; + border: 1px solid var(--color-primary); + border-radius: 5px; +} + +.contrato-form input[type="submit"] { + background-color: var(--color-primary); + color: white; + border: none; + cursor: pointer; + transition: background-color 0.3s; +} + +.contrato-form input[type="submit"]:hover { + background-color: var(--color-primary-dark); +} + +.existing-contract { + background-color: #f9f9f9; + padding: 10px; + border: 1px solid var(--color-primary); + border-radius: 5px; + margin-bottom: 20px; +} + +/* Estilos para el contenedor flex de la información de la productora y el botón de contratos */ +.info-container { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; +} + +.info { + flex: 1; + display: flex; + flex-direction: column; +} + +.contratos-btn { + background-color: var(--color-primary); + color: white; + border: none; + padding: 10px 20px; + font-size: 1em; + border-radius: 5px; + cursor: pointer; + display: flex; + align-items: center; + margin-left: 20px; +} + +.contratos-btn i { + margin-right: 5px; +} + +.contratos-btn:hover { + background-color: var(--color-primary-dark); } \ No newline at end of file