DeBalletAtelier/CosturaBallet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: simplify budget calculator with manual default and dynamic multiplier

Browse Source
This commit is contained in:
Edgar
2026-01-23 12:57:58 +01:00
parent 4bded8a0f7
commit 67cd1e43d5
3 changed files with 215 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
index.html
View File

@@ -1,15 +1,19 @@
<!DOCTYPE html>
<html lang="es">
<head>
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/javascript.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DeBallet Atelier - Presupuestador Pro</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Playfair+Display:ital,wght@0,700;1,700&display=swap" rel="stylesheet">
</head>
<body>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Playfair+Display:ital,wght@0,700;1,700&display=swap"
rel="stylesheet">
</head>
<body>
<div id="app">
<div class="container">
<header>
@@ -41,6 +45,13 @@
<span id="status-materias" style="font-size: 0.8rem; color: var(--primary-color);"></span>
</div>
</div>
<div>
<label>Multiplicador de Beneficio</label>
<div class="form-group" style="margin-top: 0.5rem;">
<input type="number" id="input-multiplicador" value="2" step="0.1" min="1" style="width: 100px;">
<span style="font-size: 0.8rem; color: #666; margin-left: 0.5rem;">(x sobre el coste total)</span>
</div>
</div>
</div>
</section>
@@ -51,35 +62,71 @@
<!-- Columna Izquierda: Inputs -->
<div class="budget-form">
<div class="form-group">
<label for="select-materia">Materia Prima</label>
<label>Materia Prima</label>
<div class="input-toggle">
<button type="button" class="toggle-btn" data-target="materia-excel"
data-group="materia">Excel</button>
<button type="button" class="toggle-btn active" data-target="materia-manual"
data-group="materia">Manual</button>
</div>
<div id="materia-excel" class="toggle-content hidden">
<input type="text" id="search-materia" placeholder="Buscar materia prima...">
<div class="data-table-container">
<table id="table-materias">
<thead>
<tr><th>Concepto</th><th>Precio</th></tr>
<tr>
<th>Concepto</th>
<th>Precio</th>
</tr>
</thead>
<tbody id="tbody-materias">
<tr><td colspan="2" style="text-align: center;">Carga un Excel para ver datos</td></tr>
<tr>
<td colspan="2" style="text-align: center;">Carga un Excel para ver datos</td>
</tr>
</tbody>
</table>
</div>
<input type="number" id="manual-materia" placeholder="O ingresa monto manual" style="margin-top: 0.5rem;">
</div>
<div id="materia-manual" class="toggle-content">
<input type="number" id="manual-materia" placeholder="Ingresa monto manual"
style="margin-top: 0.5rem;">
</div>
</div>
<div class="form-group">
<label for="select-confeccion">Confección</label>
<label>Confección</label>
<div class="input-toggle">
<button type="button" class="toggle-btn" data-target="confeccion-excel"
data-group="confeccion">Excel</button>
<button type="button" class="toggle-btn active" data-target="confeccion-manual"
data-group="confeccion">Manual</button>
</div>
<div id="confeccion-excel" class="toggle-content hidden">
<input type="text" id="search-confeccion" placeholder="Buscar tipo de confección...">
<div class="data-table-container">
<table id="table-confeccion">
<thead>
<tr><th>Trabajo</th><th>Precio</th></tr>
<tr>
<th>Trabajo</th>
<th>Precio</th>
</tr>
</thead>
<tbody id="tbody-confeccion">
<tr><td colspan="2" style="text-align: center;">Carga un Excel para ver datos</td></tr>
<tr>
<td colspan="2" style="text-align: center;">Carga un Excel para ver datos</td>
</tr>
</tbody>
</table>
</div>
<input type="number" id="manual-confeccion" placeholder="O ingresa monto manual" style="margin-top: 0.5rem;">
</div>
<div id="confeccion-manual" class="toggle-content">
<input type="number" id="manual-confeccion" placeholder="Ingresa monto manual"
style="margin-top: 0.5rem;">
</div>
</div>
<div class="grid">
@@ -102,13 +149,14 @@
<div class="price-label">Precio de Venta</div>
<div class="price-value"><span id="res-venta">0.00</span><span class="currency">€</span></div>
<p style="font-size: 0.8rem; color: #999; margin-top: 1rem;">
Fórmula: (Materias + Confección + Corte + Dist) x 2
Fórmula: (Materias + Confección + Corte + Dist) <span id="formula-multi">x 2</span>
</p>
</div>
<div class="price-box coste">
<div class="price-label">Precio de Coste</div>
<div class="price-value" style="font-size: 1.8rem;"><span id="res-coste">0.00</span><span class="currency">€</span></div>
<div class="price-value" style="font-size: 1.8rem;"><span id="res-coste">0.00</span><span
class="currency">€</span></div>
<p style="font-size: 0.8rem; color: #999; margin-top: 1rem;">
Suma total de gastos directos.
</p>
@@ -120,5 +168,6 @@
</div>
</div>
<script type="module" src="/src/main.js"></script>
</body>
</body>
</html>

31
src/main.js
View File

@@ -21,10 +21,36 @@ const inputMateriaTotal = document.getElementById('manual-materia');
const inputConfeccionTotal = document.getElementById('manual-confeccion');
const inputCorte = document.getElementById('costo-corte');
const inputDistribucion = document.getElementById('costo-distribucion');
const btnCalcular = document.getElementById('btn-calcular');
const resVenta = document.getElementById('res-venta');
const resCoste = document.getElementById('res-coste');
const inputMultiplicador = document.getElementById('input-multiplicador');
const formulaMulti = document.getElementById('formula-multi');
// Toggle Buttons
const toggleBtns = document.querySelectorAll('.toggle-btn');
toggleBtns.forEach(btn => {
btn.onclick = () => {
const group = btn.dataset.group;
const targetId = btn.dataset.target;
// Update Buttons
document.querySelectorAll(`.toggle-btn[data-group="${group}"]`).forEach(b => b.classList.remove('active'));
btn.classList.add('active');
// Update Content
const contentGroup = group === 'materia' ? ['materia-excel', 'materia-manual'] : ['confeccion-excel', 'confeccion-manual'];
contentGroup.forEach(id => {
document.getElementById(id).classList.toggle('hidden', id !== targetId);
});
};
});
// Listener para actualizar el texto de la fórmula cuando cambie el multiplicador
inputMultiplicador.oninput = () => {
formulaMulti.innerText = `x ${inputMultiplicador.value}`;
};
// Handlers para subida de archivos
uploadConfeccion.onclick = () => fileConfeccion.click();
@@ -102,9 +128,10 @@ btnCalcular.onclick = () => {
const c = parseFloat(inputConfeccionTotal.value) || 0;
const corte = parseFloat(inputCorte.value) || 0;
const dist = parseFloat(inputDistribucion.value) || 0;
const multiplicador = parseFloat(inputMultiplicador.value) || 2;
const costeTotal = m + c + corte + dist;
const precioVenta = costeTotal * 2;
const precioVenta = costeTotal * multiplicador;
resCoste.innerText = costeTotal.toFixed(2);
resVenta.innerText = precioVenta.toFixed(2);

51
src/style.css
View File

@@ -5,9 +5,11 @@
/* Palette: Ballet Atelier */
--bg-color: #fcf9f8;
--card-bg: rgba(255, 255, 255, 0.85);
--primary-color: #d4a373; /* Satin Tan */
--primary-color: #d4a373;
/* Satin Tan */
--primary-light: #faedcd;
--accent-color: #e76f51; /* Deep Silk */
--accent-color: #e76f51;
/* Deep Silk */
--text-dark: #264653;
--text-muted: #6d6d6d;
--border-color: #e9edc9;
@@ -31,7 +33,9 @@ body {
flex-direction: column;
}
h1, h2, h3 {
h1,
h2,
h3 {
font-family: var(--font-serif);
font-weight: 700;
}
@@ -87,7 +91,8 @@ label {
letter-spacing: 0.5px;
}
input, select {
input,
select {
width: 100%;
padding: 1rem;
border: 1px solid #ddd;
@@ -97,7 +102,8 @@ input, select {
transition: all 0.3s ease;
}
input:focus, select:focus {
input:focus,
select:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px var(--primary-light);
@@ -208,7 +214,8 @@ table {
border-collapse: collapse;
}
th, td {
th,
td {
padding: 0.75rem;
text-align: left;
border-bottom: 1px solid #eee;
@@ -245,3 +252,35 @@ tr:hover {
.hidden {
display: none;
}
/* Input Toggles */
.input-toggle {
display: flex;
background: #f0f0f0;
padding: 0.25rem;
border-radius: 50px;
margin-bottom: 1rem;
width: fit-content;
}
.toggle-btn {
border: none;
background: none;
padding: 0.5rem 1.5rem;
border-radius: 50px;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
color: var(--text-muted);
}
.toggle-btn.active {
background: white;
color: var(--primary-color);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.toggle-content {
transition: all 0.3s ease;
}