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

71
index.html
View File

@@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="es"> <html lang="es">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/javascript.svg" /> <link rel="icon" type="image/svg+xml" href="/javascript.svg" />
@@ -7,8 +8,11 @@
<title>DeBallet Atelier - Presupuestador Pro</title> <title>DeBallet Atelier - Presupuestador Pro</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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"> <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> </head>
<body> <body>
<div id="app"> <div id="app">
<div class="container"> <div class="container">
@@ -41,6 +45,13 @@
<span id="status-materias" style="font-size: 0.8rem; color: var(--primary-color);"></span> <span id="status-materias" style="font-size: 0.8rem; color: var(--primary-color);"></span>
</div> </div>
</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> </div>
</section> </section>
@@ -51,35 +62,71 @@
<!-- Columna Izquierda: Inputs --> <!-- Columna Izquierda: Inputs -->
<div class="budget-form"> <div class="budget-form">
<div class="form-group"> <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..."> <input type="text" id="search-materia" placeholder="Buscar materia prima...">
<div class="data-table-container"> <div class="data-table-container">
<table id="table-materias"> <table id="table-materias">
<thead> <thead>
<tr><th>Concepto</th><th>Precio</th></tr> <tr>
<th>Concepto</th>
<th>Precio</th>
</tr>
</thead> </thead>
<tbody id="tbody-materias"> <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> </tbody>
</table> </table>
</div> </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>
<div class="form-group"> <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..."> <input type="text" id="search-confeccion" placeholder="Buscar tipo de confección...">
<div class="data-table-container"> <div class="data-table-container">
<table id="table-confeccion"> <table id="table-confeccion">
<thead> <thead>
<tr><th>Trabajo</th><th>Precio</th></tr> <tr>
<th>Trabajo</th>
<th>Precio</th>
</tr>
</thead> </thead>
<tbody id="tbody-confeccion"> <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> </tbody>
</table> </table>
</div> </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>
<div class="grid"> <div class="grid">
@@ -102,13 +149,14 @@
<div class="price-label">Precio de Venta</div> <div class="price-label">Precio de Venta</div>
<div class="price-value"><span id="res-venta">0.00</span><span class="currency">€</span></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;"> <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> </p>
</div> </div>
<div class="price-box coste"> <div class="price-box coste">
<div class="price-label">Precio de Coste</div> <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;"> <p style="font-size: 0.8rem; color: #999; margin-top: 1rem;">
Suma total de gastos directos. Suma total de gastos directos.
</p> </p>
@@ -121,4 +169,5 @@
</div> </div>
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>
</body> </body>
</html> </html>

31
src/main.js
View File

@@ -21,10 +21,36 @@ const inputMateriaTotal = document.getElementById('manual-materia');
const inputConfeccionTotal = document.getElementById('manual-confeccion'); const inputConfeccionTotal = document.getElementById('manual-confeccion');
const inputCorte = document.getElementById('costo-corte'); const inputCorte = document.getElementById('costo-corte');
const inputDistribucion = document.getElementById('costo-distribucion'); const inputDistribucion = document.getElementById('costo-distribucion');
const btnCalcular = document.getElementById('btn-calcular'); const btnCalcular = document.getElementById('btn-calcular');
const resVenta = document.getElementById('res-venta'); const resVenta = document.getElementById('res-venta');
const resCoste = document.getElementById('res-coste'); 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 // Handlers para subida de archivos
uploadConfeccion.onclick = () => fileConfeccion.click(); uploadConfeccion.onclick = () => fileConfeccion.click();
@@ -102,9 +128,10 @@ btnCalcular.onclick = () => {
const c = parseFloat(inputConfeccionTotal.value) || 0; const c = parseFloat(inputConfeccionTotal.value) || 0;
const corte = parseFloat(inputCorte.value) || 0; const corte = parseFloat(inputCorte.value) || 0;
const dist = parseFloat(inputDistribucion.value) || 0; const dist = parseFloat(inputDistribucion.value) || 0;
const multiplicador = parseFloat(inputMultiplicador.value) || 2;
const costeTotal = m + c + corte + dist; const costeTotal = m + c + corte + dist;
const precioVenta = costeTotal * 2; const precioVenta = costeTotal * multiplicador;
resCoste.innerText = costeTotal.toFixed(2); resCoste.innerText = costeTotal.toFixed(2);
resVenta.innerText = precioVenta.toFixed(2); resVenta.innerText = precioVenta.toFixed(2);

51
src/style.css
View File

@@ -5,9 +5,11 @@
/* Palette: Ballet Atelier */ /* Palette: Ballet Atelier */
--bg-color: #fcf9f8; --bg-color: #fcf9f8;
--card-bg: rgba(255, 255, 255, 0.85); --card-bg: rgba(255, 255, 255, 0.85);
--primary-color: #d4a373; /* Satin Tan */ --primary-color: #d4a373;
/* Satin Tan */
--primary-light: #faedcd; --primary-light: #faedcd;
--accent-color: #e76f51; /* Deep Silk */ --accent-color: #e76f51;
/* Deep Silk */
--text-dark: #264653; --text-dark: #264653;
--text-muted: #6d6d6d; --text-muted: #6d6d6d;
--border-color: #e9edc9; --border-color: #e9edc9;
@@ -31,7 +33,9 @@ body {
flex-direction: column; flex-direction: column;
} }
h1, h2, h3 { h1,
h2,
h3 {
font-family: var(--font-serif); font-family: var(--font-serif);
font-weight: 700; font-weight: 700;
} }
@@ -87,7 +91,8 @@ label {
letter-spacing: 0.5px; letter-spacing: 0.5px;
} }
input, select { input,
select {
width: 100%; width: 100%;
padding: 1rem; padding: 1rem;
border: 1px solid #ddd; border: 1px solid #ddd;
@@ -97,7 +102,8 @@ input, select {
transition: all 0.3s ease; transition: all 0.3s ease;
} }
input:focus, select:focus { input:focus,
select:focus {
outline: none; outline: none;
border-color: var(--primary-color); border-color: var(--primary-color);
box-shadow: 0 0 0 3px var(--primary-light); box-shadow: 0 0 0 3px var(--primary-light);
@@ -208,7 +214,8 @@ table {
border-collapse: collapse; border-collapse: collapse;
} }
th, td { th,
td {
padding: 0.75rem; padding: 0.75rem;
text-align: left; text-align: left;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
@@ -245,3 +252,35 @@ tr:hover {
.hidden { .hidden {
display: none; 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;
}