Skip to content

Commit

Permalink
Actualizacion
Browse files Browse the repository at this point in the history
  • Loading branch information
@Lucasponzoni
Lucasponzoni committed Aug 30, 2024
1 parent 6721f59 commit b76c5af
Show file tree
Hide file tree
Showing 4 changed files with 144 additions and 97 deletions.
14 changes: 14 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,16 @@ <h1>Formulario Andesmar API</h1>
<label for="calleNroDestinatario">Número de Calle Destinatario:</label>
<input type="text" id="calleNroDestinatario" name="CalleNroDestinatario" value="" required>

<div class="PisoyDepto hidden" style="position: relative;">
<div class="piso">
<input type="text" id="pisolDestinatario" name="pisolDestinatario" placeholder="Piso (Solo Andreani)" value="" required>
</div>

<div class="depto">
<input type="text" id="deptoDestinatario" name="deptoDestinatario" value="" placeholder="Departamento (Solo Andreani)" autocomplete="off">
</div>
</div>

<label for="telefonoDestinatario">Teléfono Destinatario:</label>
<input type="text" id="telefonoDestinatario" name="TelefonoDestinatario" value="" required>

Expand Down Expand Up @@ -174,6 +184,10 @@ <h3 class="bultoTitle" >Bulto: Paquete 1</h3>
<strong>Volumen Total (m³):</strong> <span id="volumenTotal">0.00</span>
</div>

<div id="volumenVisual">
<strong>Volumen Total (cm³):</strong> <span id="volumenTotalcm">0.00</span>
</div>

<input type="number" id="m3" name="M3" step="0.001" value="0.1" style="display:none;">

<label for="observaciones">Observaciones:</label>
Expand Down
18 changes: 12 additions & 6 deletions js/formulario-andesmar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,21 +16,27 @@ document.getElementById('medidasBultosContainer').addEventListener('input', actu

function actualizarVolumen() {
const bultosContainer = document.getElementById('medidasBultosContainer');
let totalVolumen = 0;
let totalVolumen = 0; // Volumen total en m³
let totalVolumenCm3 = 0; // Volumen total en cm³

Array.from(bultosContainer.children).forEach(bulto => {
const alto = parseFloat(bulto.querySelector(`input[name^="Alto"]`).value) || 0;
const ancho = parseFloat(bulto.querySelector(`input[name^="Ancho"]`).value) || 0;
const largo = parseFloat(bulto.querySelector(`input[name^="Largo"]`).value) || 0;
const cantidad = parseInt(bulto.querySelector(`input[name^="Cantidad"]`).value) || 1; // Obtener cantidad

// Calcular volumen de este bulto y multiplicar por la cantidad
const volumenBulto = (alto * ancho * largo) / 1000000; // Convertir cm³ a m³
totalVolumen += volumenBulto * cantidad; // Sumar al volumen total
// Calcular volumen de este bulto en cm³
const volumenBultoCm3 = alto * ancho * largo; // En cm³
totalVolumenCm3 += volumenBultoCm3 * cantidad; // Sumar al volumen total en cm³

// Convertir a m³
const volumenBultoM3 = volumenBultoCm3 / 1000000; // Convertir cm³ a m³
totalVolumen += volumenBultoM3 * cantidad; // Sumar al volumen total en m³
});

// Actualizar el elemento del volumen total
document.getElementById('volumenTotal').innerText = totalVolumen.toFixed(2); // Mostrar con 2 decimales
// Actualizar los elementos del volumen total
document.getElementById('volumenTotal').innerText = totalVolumen.toFixed(2); // Mostrar en m³ con 2 decimales
document.getElementById('volumenTotalcm').innerText = totalVolumenCm3.toFixed(2); // Mostrar en cm³ con 2 decimales
}

// Llama a la función al cargar la página para establecer el volumen inicial
Expand Down
172 changes: 93 additions & 79 deletions js/localidades.js
View file
Original file line number Diff line number Diff line change
@@ -1,95 +1,109 @@
const spinner = document.getElementById('loadingSpinner'); // Usar el nuevo ID del spinner
const clearButton = document.getElementById('clearButton');
const localidadInput = document.getElementById('localidad');
const clearButton = document.getElementById('clearButton');
const localidadInput = document.getElementById('localidad');
const pisoDeptoDiv = document.querySelector('.PisoyDepto'); // Seleccionar el div que contiene piso y departamento

document.getElementById('codigoPostalDestinatario').addEventListener('input', function() {
const codigoPostal = this.value;
document.getElementById('codigoPostalDestinatario').addEventListener('input', function() {
const codigoPostal = this.value;

if (codigoPostal.length > 0) {
spinner.style.display = 'block'; // Mostrar spinner
if (codigoPostal.length > 0) {
spinner.style.display = 'block'; // Mostrar spinner

fetch(`https://apisqa.andreani.com/v1/localidades?codigosPostales=${codigoPostal}`)
.then(response => response.json())
.then(data => {
const lista = document.getElementById('listaLocalidades');
lista.innerHTML = ''; // Limpiar la lista
lista.style.display = 'none'; // Ocultar la lista inicialmente
spinner.style.display = 'none'; // Ocultar spinner
fetch(`https://apisqa.andreani.com/v1/localidades?codigosPostales=${codigoPostal}`)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
const lista = document.getElementById('listaLocalidades');
lista.innerHTML = ''; // Limpiar la lista
lista.style.display = 'none'; // Ocultar la lista inicialmente
spinner.style.display = 'none'; // Ocultar spinner

if (data.length > 0) {
data.forEach(item => {
const option = document.createElement('div');
option.textContent = `${item.localidad} (${item.provincia})`; // Formato: Localidad (Provincia)
option.onclick = () => {
localidadInput.value = option.textContent; // Poner el valor en el input
clearButton.style.display = 'inline'; // Mostrar botón de borrar
lista.style.display = 'none'; // Ocultar la lista después de seleccionar
};
lista.appendChild(option);
});
lista.style.display = 'block'; // Mostrar la lista si hay resultados
} else {
lista.style.display = 'none'; // Ocultar si no hay resultados
}
})
.catch(error => {
console.error('Error fetching localidades:', error);
spinner.style.display = 'none'; // Ocultar spinner en caso de error
});
if (data && data.length > 0) {
data.forEach(item => {
const option = document.createElement('div');
option.textContent = `${item.localidad} (${item.provincia})`; // Formato: Localidad (Provincia)
option.onclick = () => {
localidadInput.value = item.localidad; // Poner solo la localidad en el input
clearButton.style.display = 'inline'; // Mostrar botón de borrar
lista.style.display = 'none'; // Ocultar la lista después de seleccionar
pisoDeptoDiv.classList.remove('hidden'); // Eliminar la clase hidden
};
lista.appendChild(option);
});
lista.style.display = 'block'; // Mostrar la lista si hay resultados
} else {
document.getElementById('listaLocalidades').style.display = 'none'; // Ocultar si el campo está vacío
clearButton.style.display = 'none'; // Ocultar botón de borrar
lista.style.display = 'none'; // Ocultar si no hay resultados
}
})
.catch(error => {
console.error('Error fetching localidades:', error);
spinner.style.display = 'none'; // Ocultar spinner en caso de error
});
} else {
document.getElementById('listaLocalidades').style.display = 'none'; // Ocultar si el campo está vacío
clearButton.style.display = 'none'; // Ocultar botón de borrar
}
});

// Mostrar la lista al hacer clic en el input de localidad
localidadInput.addEventListener('focus', function() {
const codigoPostal = document.getElementById('codigoPostalDestinatario').value;
// Mostrar la lista al hacer clic en el input de localidad
localidadInput.addEventListener('focus', function() {
const codigoPostal = document.getElementById('codigoPostalDestinatario').value;

if (codigoPostal.length > 0) {
spinner.style.display = 'block'; // Mostrar spinner
if (codigoPostal.length > 0) {
spinner.style.display = 'block'; // Mostrar spinner

fetch(`https://apisqa.andreani.com/v1/localidades?codigosPostales=${codigoPostal}`)
.then(response => response.json())
.then(data => {
const lista = document.getElementById('listaLocalidades');
lista.innerHTML = ''; // Limpiar la lista
spinner.style.display = 'none'; // Ocultar spinner

if (data.length > 0) {
data.forEach(item => {
const option = document.createElement('div');
option.textContent = `${item.localidad} (${item.provincia})`; // Formato: Localidad (Provincia)
option.onclick = () => {
localidadInput.value = option.textContent; // Poner el valor en el input
clearButton.style.display = 'inline'; // Mostrar botón de borrar
lista.style.display = 'none'; // Ocultar la lista después de seleccionar
};
lista.appendChild(option);
});
lista.style.display = 'block'; // Mostrar la lista si hay resultados
} else {
lista.style.display = 'none'; // Ocultar si no hay resultados
}
})
.catch(error => {
console.error('Error fetching localidades:', error);
spinner.style.display = 'none'; // Ocultar spinner en caso de error
});
fetch(`https://apisqa.andreani.com/v1/localidades?codigosPostales=${codigoPostal}`)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
});

// Ocultar la lista si se hace clic fuera de ella
document.addEventListener('click', function(event) {
return response.json();
})
.then(data => {
const lista = document.getElementById('listaLocalidades');
if (!lista.contains(event.target) && event.target.id !== 'localidad') {
lista.style.display = 'none';
lista.innerHTML = ''; // Limpiar la lista
spinner.style.display = 'none'; // Ocultar spinner

if (data && data.length > 0) {
data.forEach(item => {
const option = document.createElement('div');
option.textContent = `${item.localidad} (${item.provincia})`; // Formato: Localidad (Provincia)
option.onclick = () => {
localidadInput.value = item.localidad; // Poner solo la localidad en el input
clearButton.style.display = 'inline'; // Mostrar botón de borrar
lista.style.display = 'none'; // Ocultar la lista después de seleccionar
pisoDeptoDiv.classList.remove('hidden'); // Eliminar la clase hidden
};
lista.appendChild(option);
});
lista.style.display = 'block'; // Mostrar la lista si hay resultados
} else {
lista.style.display = 'none'; // Ocultar si no hay resultados
}
})
.catch(error => {
console.error('Error fetching localidades:', error);
spinner.style.display = 'none'; // Ocultar spinner en caso de error
});
}
});

// Ocultar la lista si se hace clic fuera de ella
document.addEventListener('click', function(event) {
const lista = document.getElementById('listaLocalidades');
if (!lista.contains(event.target) && event.target.id !== 'localidad') {
lista.style.display = 'none';
}
});

// Borrar localidad al hacer clic en la "X"
clearButton.addEventListener('click', function() {
localidadInput.value = ''; // Limpiar el input
clearButton.style.display = 'none'; // Ocultar botón de borrar
document.getElementById('listaLocalidades').style.display = 'none'; // Ocultar la lista
});
// Borrar localidad al hacer clic en la "X"
clearButton.addEventListener('click', function() {
localidadInput.value = ''; // Limpiar el input
clearButton.style.display = 'none'; // Ocultar botón de borrar
document.getElementById('listaLocalidades').style.display = 'none'; // Ocultar la lista
pisoDeptoDiv.classList.add('hidden'); // Agregar la clase hidden nuevamente
});
37 changes: 25 additions & 12 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,22 +41,19 @@ form {
margin-bottom: .5rem;
}

.CpyLocalidad{
.CpyLocalidad, .PisoyDepto{
padding: .5rem;
border: dashed 2px cornflowerblue;
border-radius: 10px;
display: flex;
justify-content: space-between;
justify-items: center;
margin-bottom: .3rem;
gap: 10px;
}

.cp{
width: 49%;
}

.localidad{
width: 49%;
.cp , .piso, .localidad, .depto{
flex: 1;
}

#localidad{
Expand Down Expand Up @@ -131,7 +128,7 @@ form {
}

.lista-localidades {
width: 48%;
width: 47.5%;
border: 1px solid grey;
font-size: small;
max-height: 150px;
Expand All @@ -140,6 +137,7 @@ form {
position: absolute;
background-color: white;
z-index: 1000;
border-radius: 0 0 10px 10px;
}
.lista-localidades div {
padding: 5px;
Expand All @@ -160,7 +158,7 @@ form {
animation: spin 1s linear infinite;
position: absolute;
right: 16px;
top: 48%;
top: 58%;
transform: translateY(-50%);
}
@keyframes spin {
Expand All @@ -171,12 +169,12 @@ form {
.clear-button {
background-color: #ffffff;
padding: .2rem;
border-radius: 50px;
border-radius: 10px;
display: none;
cursor: pointer;
position: absolute;
right: 16px; /* Posición de la "X" dentro del input */
top: 58%;
top: 70%;
transform: translateY(-50%);
color: cornflowerblue;
font-size: 18px;
Expand Down Expand Up @@ -637,4 +635,19 @@ button:hover {
}
}

/* FIN NAVBAR */
/* FIN NAVBAR */

#deptoDestinatario , #pisolDestinatario, #codigoPostalDestinatario, #localidad{
margin-bottom: 0;
}

.PisoyDepto{
border: dashed 2px red;
}

.hidden {
display: none;
}



0 comments on commit b76c5af

Please sign in to comment.