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

225
index.html
View File

@@ -1,124 +1,173 @@
<!DOCTYPE html>
<html lang="es">
<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>
<div id="app">
<div class="container">
<header>
<h1>DeBallet Atelier</h1>
<p>Calculadora de Presupuestos de Alta Costura</p>
</header>
<main>
<!-- Seccion de Carga de Archivos (Configuracion) -->
<section id="config-section" class="card">
<h2>Configuración de Tarifas</h2>
<p style="margin-bottom: 1.5rem; font-size: 0.9rem; color: #666;">
Sube tus archivos Excel para cargar los precios de confección y materiales.
</p>
<div class="grid">
<div>
<label>Excel de Confección</label>
<div id="upload-confeccion" class="upload-zone">
<p>Arrastra aquí o haz clic para subir</p>
<input type="file" id="file-confeccion" accept=".xlsx, .xls" class="hidden">
<span id="status-confeccion" style="font-size: 0.8rem; color: var(--primary-color);"></span>
</div>
</div>
<div>
<label>Excel de Materias Básicas</label>
<div id="upload-materias" class="upload-zone">
<p>Arrastra aquí o haz clic para subir</p>
<input type="file" id="file-materias" accept=".xlsx, .xls" class="hidden">
<span id="status-materias" style="font-size: 0.8rem; color: var(--primary-color);"></span>
</div>
<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>
<div id="app">
<div class="container">
<header>
<h1>DeBallet Atelier</h1>
<p>Calculadora de Presupuestos de Alta Costura</p>
</header>
<main>
<!-- Seccion de Carga de Archivos (Configuracion) -->
<section id="config-section" class="card">
<h2>Configuración de Tarifas</h2>
<p style="margin-bottom: 1.5rem; font-size: 0.9rem; color: #666;">
Sube tus archivos Excel para cargar los precios de confección y materiales.
</p>
<div class="grid">
<div>
<label>Excel de Confección</label>
<div id="upload-confeccion" class="upload-zone">
<p>Arrastra aquí o haz clic para subir</p>
<input type="file" id="file-confeccion" accept=".xlsx, .xls" class="hidden">
<span id="status-confeccion" style="font-size: 0.8rem; color: var(--primary-color);"></span>
</div>
</div>
</section>
<div>
<label>Excel de Materias Básicas</label>
<div id="upload-materias" class="upload-zone">
<p>Arrastra aquí o haz clic para subir</p>
<input type="file" id="file-materias" accept=".xlsx, .xls" class="hidden">
<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>
<!-- Seccion de Calculo -->
<section id="budget-section" class="card">
<h2>Nuevo Presupuesto</h2>
<div class="grid" style="margin-top: 2rem;">
<!-- Columna Izquierda: Inputs -->
<div class="budget-form">
<div class="form-group">
<label for="select-materia">Materia Prima</label>
<!-- Seccion de Calculo -->
<section id="budget-section" class="card">
<h2>Nuevo Presupuesto</h2>
<div class="grid" style="margin-top: 2rem;">
<!-- Columna Izquierda: Inputs -->
<div class="budget-form">
<div class="form-group">
<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 class="form-group">
<label for="select-confeccion">Confección</label>
<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>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 class="grid">
<div class="form-group">
<label>Corte (€)</label>
<input type="number" id="costo-corte" value="1" step="0.5">
</div>
<div class="form-group">
<label>Distribución (€)</label>
<input type="number" id="costo-distribucion" value="1" step="0.5">
</div>
<div id="confeccion-manual" class="toggle-content">
<input type="number" id="manual-confeccion" placeholder="Ingresa monto manual"
style="margin-top: 0.5rem;">
</div>
<button id="btn-calcular" class="btn" style="width: 100%;">CALCULAR TOTALES</button>
</div>
<!-- Columna Derecha: Resultados -->
<div class="budget-results">
<div class="price-box" style="margin-bottom: 1.5rem;">
<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
</p>
<div class="grid">
<div class="form-group">
<label>Corte (€)</label>
<input type="number" id="costo-corte" value="1" step="0.5">
</div>
<div class="form-group">
<label>Distribución (€)</label>
<input type="number" id="costo-distribucion" value="1" step="0.5">
</div>
</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>
<p style="font-size: 0.8rem; color: #999; margin-top: 1rem;">
Suma total de gastos directos.
</p>
</div>
<button id="btn-calcular" class="btn" style="width: 100%;">CALCULAR TOTALES</button>
</div>
<!-- Columna Derecha: Resultados -->
<div class="budget-results">
<div class="price-box" style="margin-bottom: 1.5rem;">
<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) <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>
<p style="font-size: 0.8rem; color: #999; margin-top: 1rem;">
Suma total de gastos directos.
</p>
</div>
</div>
</section>
</main>
</div>
</div>
</section>
</main>
</div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
</div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

37
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();
@@ -56,7 +82,7 @@ async function handleFileUpload(event, type) {
function renderTable(container, data, keys, targetInput) {
container.innerHTML = '';
// Detectar nombres de columnas automáticamente si no son estándar
const availableKeys = data.length > 0 ? Object.keys(data[0]) : [];
const nameKey = availableKeys[0] || 'Concepto';
@@ -82,7 +108,7 @@ function renderTable(container, data, keys, targetInput) {
// Búsqueda en tablas
searchMateria.oninput = (e) => {
const term = e.target.value.toLowerCase();
const filtered = dataMaterias.filter(item =>
const filtered = dataMaterias.filter(item =>
Object.values(item).some(val => String(val).toLowerCase().includes(term))
);
renderTable(tbodyMaterias, filtered, [], inputMateriaTotal);
@@ -90,7 +116,7 @@ searchMateria.oninput = (e) => {
searchConfeccion.oninput = (e) => {
const term = e.target.value.toLowerCase();
const filtered = dataConfeccion.filter(item =>
const filtered = dataConfeccion.filter(item =>
Object.values(item).some(val => String(val).toLowerCase().includes(term))
);
renderTable(tbodyConfeccion, filtered, [], inputConfeccionTotal);
@@ -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);

53
src/style.css
View File

@@ -1,13 +1,15 @@
:root {
--font-serif: 'Playfair Display', serif;
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
/* 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;
}