-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
169 lines (148 loc) · 6.62 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gestión de Gastos</title>
<link rel="stylesheet" href="styles.css">
<!-- Tus estilos y otros elementos de encabezado -->
</head>
<body>
<header>
<h1>Gestión de Gastos</h1>
<!-- Otros elementos de encabezado si los tienes -->
</header>
<main>
<!-- Tu formulario existente para agregar gastos -->
<form id="expense-form">
<!-- Elementos del formulario para agregar gastos -->
<input type="text" id="expense-description" placeholder="Descripción" required>
<input type="number" id="expense-amount" placeholder="Monto" required>
<select id="expense-category">
<option value="Todas">Todas</option>
<option value="Salud y Cuidado Personal">Salud y Cuidado Personal</option>
<option value="Educación">Educación</option>
<option value="Deudas y Finanzas">Deudas y Finanzas</option>
<option value="Ropa y Accesorios">Ropa y Accesorios</option>
<option value="Misceláneos">Misceláneos</option>
<option value="Transporte">Transporte</option>
<option value="Entretenimiento">Entretenimiento</option>
<option value="Vivienda">Vivienda</option>
<option value="Alimentación">Alimentación</option>
<!-- Agrega más opciones según necesites -->
</select>
<button type="submit">Agregar Gasto</button>
<!-- ... -->
</form>
<!-- Contenedor para mostrar los gastos -->
<div id="expense-list">
<!-- Aquí se mostrarán los gastos agregados -->
</div>
<div id="total-expenses">
Total: $0.00
<!-- Elementos para filtrar por fecha -->
<div>
<input type="date" id="date-input">
<button id="search-by-date">Buscar por Fecha</button>
</div>
<!-- Contenedor para mostrar los movimientos por fecha -->
<div id="movements-by-date">
<!-- Aquí se mostrarán los movimientos por fecha -->
</div>
</main>
<!-- Tus scripts, incluyendo Firebase y el código para buscar movimientos por fecha -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const expenseForm = document.getElementById('expense-form');
const expenseList = document.getElementById('expense-list');
const totalExpenses = document.getElementById('total-expenses');
let total = 0;
let editing = false;
let editedExpense;
expenseForm.addEventListener('submit', function(event) {
event.preventDefault();
const description = document.getElementById('expense-description').value;
const amount = parseFloat(document.getElementById('expense-amount').value);
const category = document.getElementById('expense-category').value;
const date = new Date();
if (description && !isNaN(amount)) {
if (editing) {
// Si está en modo edición, actualiza el gasto existente
editedExpense.firstChild.textContent = `${description} - $${amount.toFixed(2)} - ${category} - ${date.toLocaleString()}`;
totalExpenses.textContent = `Total: $${total.toFixed(2)}`;
editing = false;
} else {
const expenseItem = createExpenseItem(description, amount, category, date);
expenseList.appendChild(expenseItem);
total += amount;
totalExpenses.textContent = `Total: $${total.toFixed(2)}`;
}
document.getElementById('expense-description').value = '';
document.getElementById('expense-amount').value = '';
}
});
function createExpenseItem(description, amount, category, date) {
const expenseItem = document.createElement('div');
expenseItem.classList.add('expense-item');
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Eliminar';
deleteButton.classList.add('delete-btn');
const editButton = document.createElement('button');
editButton.textContent = 'Editar';
editButton.classList.add('edit-btn');
expenseItem.innerHTML = `<p>${description} - $${amount.toFixed(2)} - ${category} - ${date.toLocaleString()}</p>`;
expenseItem.appendChild(deleteButton);
expenseItem.appendChild(editButton);
deleteButton.addEventListener('click', function() {
expenseItem.remove();
total -= amount;
totalExpenses.textContent = `Total: $${total.toFixed(2)}`;
});
editButton.addEventListener('click', function() {
// Lógica para editar el gasto
// Prellenar el formulario con los detalles actuales del gasto para editarlos
editing = true;
editedExpense = expenseItem;
const expenseDetails = expenseItem.firstChild.textContent.split(' - ');
document.getElementById('expense-description').value = expenseDetails[0];
document.getElementById('expense-amount').value = parseFloat(expenseDetails[1].replace('$', ''));
document.getElementById('expense-category').value = expenseDetails[2];
});
return expenseItem;
}
// Función para mostrar gastos por categoría
function displayExpensesByCategory(category) {
const expenseItems = document.getElementsByClassName('expense-item');
for (const item of expenseItems) {
const expenseCategory = item.firstChild.textContent.split(' - ')[2];
if (category === 'Todas' || expenseCategory === category) {
item.style.display = 'block'; // Mostrar gastos de la categoría seleccionada
} else {
item.style.display = 'none'; // Ocultar gastos que no corresponden a la categoría seleccionada
}
}
}
// Evento cuando se cambia la selección de categoría
document.getElementById('expense-category').addEventListener('change', function() {
const selectedCategory = this.value;
displayExpensesByCategory(selectedCategory);
});
});
</script>
<script type="module">
import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.1.0/firebase-app.js';
import { getFirestore } from 'https://www.gstatic.com/firebasejs/9.1.0/firebase-firestore.js';
// Configuración de Firebase, reemplaza con tu propia configuración
const firebaseConfig = {
apiKey: "TU_API_KEY",
authDomain: "TU_AUTH_DOMAIN",
databaseURL: "TU_DATABASE_URL",
projectId: "TU_PROJECT_ID",
storageBucket: "TU_STORAGE_BUCKET",
messagingSenderId: "TU_MESSAGING_SENDER_ID",
appId: "TU_APP_ID"
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
</script>
</body>
</html>