|
|
@@ -50,6 +50,7 @@
|
|
|
<th>Cantidad</th>
|
|
|
<th>Energía (kWh/mes)</th>
|
|
|
<th>Ahorro ($/mes)</th>
|
|
|
+ <th>Acciones</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody>
|
|
|
@@ -63,6 +64,24 @@
|
|
|
<td>{{ proyecto.cantidad_paneles }}</td>
|
|
|
<td>{{ "%.2f"|format(proyecto.energia_estimada_mensual) }}</td>
|
|
|
<td>{{ "%.2f"|format(proyecto.ahorro_estimado) if proyecto.ahorro_estimado else '-' }}</td>
|
|
|
+ <td>
|
|
|
+ <button type="button" class="btn btn-info btn-sm text-white" data-bs-toggle="modal" data-bs-target="#detallesModal"
|
|
|
+ data-cliente="{{ proyecto.nombre_cliente }}"
|
|
|
+ data-fecha="{{ proyecto.fecha_referencia.strftime('%Y-%m-%d') }}"
|
|
|
+ data-casa="{{ proyecto.casa.nombre if proyecto.casa else 'N/A' }}"
|
|
|
+ data-ciudad="{{ proyecto.ciudad.nombre_ciudad }}"
|
|
|
+ data-provincia="{{ proyecto.ciudad.provincia }}"
|
|
|
+ data-panel="{{ proyecto.panel.marca }} {{ proyecto.panel.modelo }}"
|
|
|
+ data-eficiencia="{{ '%.1f'|format(proyecto.panel.eficiencia_r * 100) }}"
|
|
|
+ data-cantidad="{{ proyecto.cantidad_paneles }}"
|
|
|
+ data-energia="{{ '%.2f'|format(proyecto.energia_estimada_mensual) }}"
|
|
|
+ data-ahorro="{{ '%.2f'|format(proyecto.ahorro_estimado) if proyecto.ahorro_estimado else '0' }}"
|
|
|
+ data-consumo="{{ proyecto.consumo_actual_kwh if proyecto.consumo_actual_kwh else '0' }}"
|
|
|
+ data-costo="{{ proyecto.costo_actual_mensual if proyecto.costo_actual_mensual else '0' }}"
|
|
|
+ >
|
|
|
+ Ver Detalles
|
|
|
+ </button>
|
|
|
+ </td>
|
|
|
</tr>
|
|
|
{% endfor %}
|
|
|
</tbody>
|
|
|
@@ -75,11 +94,115 @@
|
|
|
{% endif %}
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+<!-- Modal Detalles -->
|
|
|
+<div class="modal fade" id="detallesModal" tabindex="-1" aria-labelledby="detallesModalLabel" aria-hidden="true">
|
|
|
+ <div class="modal-dialog modal-lg">
|
|
|
+ <div class="modal-content">
|
|
|
+ <div class="modal-header bg-primary text-white">
|
|
|
+ <h5 class="modal-title" id="detallesModalLabel">Detalles del Proyecto</h5>
|
|
|
+ <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
|
+ </div>
|
|
|
+ <div class="modal-body">
|
|
|
+ <div class="row mb-4">
|
|
|
+ <div class="col-md-6">
|
|
|
+ <h6 class="text-muted">Información General</h6>
|
|
|
+ <p><strong>Cliente:</strong> <span id="modalCliente"></span></p>
|
|
|
+ <p><strong>Fecha Simulación:</strong> <span id="modalFecha"></span></p>
|
|
|
+ <p><strong>Casa:</strong> <span id="modalCasa"></span></p>
|
|
|
+ <p><strong>Ubicación:</strong> <span id="modalUbicacion"></span></p>
|
|
|
+ </div>
|
|
|
+ <div class="col-md-6">
|
|
|
+ <h6 class="text-muted">Sistema Solar</h6>
|
|
|
+ <p><strong>Panel:</strong> <span id="modalPanel"></span></p>
|
|
|
+ <p><strong>Eficiencia:</strong> <span id="modalEficiencia"></span>%</p>
|
|
|
+ <p><strong>Cantidad:</strong> <span id="modalCantidad"></span> paneles</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <hr>
|
|
|
+
|
|
|
+ <h6 class="text-muted mb-3">Análisis Financiero y Energético</h6>
|
|
|
+ <div class="row text-center">
|
|
|
+ <div class="col-md-3">
|
|
|
+ <div class="p-2 border rounded bg-light">
|
|
|
+ <small class="d-block text-muted">Consumo Actual</small>
|
|
|
+ <strong class="h5"><span id="modalConsumo"></span> kWh</strong>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-md-3">
|
|
|
+ <div class="p-2 border rounded bg-light">
|
|
|
+ <small class="d-block text-muted">Factura Actual</small>
|
|
|
+ <strong class="h5 text-danger">$<span id="modalCosto"></span></strong>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-md-3">
|
|
|
+ <div class="p-2 border rounded bg-light">
|
|
|
+ <small class="d-block text-muted">Generación Solar</small>
|
|
|
+ <strong class="h5 text-success"><span id="modalEnergia"></span> kWh</strong>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-md-3">
|
|
|
+ <div class="p-2 border rounded bg-light">
|
|
|
+ <small class="d-block text-muted">Ahorro Estimado</small>
|
|
|
+ <strong class="h5 text-primary">$<span id="modalAhorro"></span></strong>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="alert alert-info mt-4 text-center">
|
|
|
+ <strong>Nuevo Costo Estimado:</strong> $<span id="modalNuevoCosto"></span> / mes
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="modal-footer">
|
|
|
+ <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
{% endblock %}
|
|
|
|
|
|
{% block scripts %}
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
<script>
|
|
|
+ // Modal Logic
|
|
|
+ const detallesModal = document.getElementById('detallesModal');
|
|
|
+ detallesModal.addEventListener('show.bs.modal', event => {
|
|
|
+ const button = event.relatedTarget;
|
|
|
+
|
|
|
+ // Extract info from data-* attributes
|
|
|
+ const cliente = button.getAttribute('data-cliente');
|
|
|
+ const fecha = button.getAttribute('data-fecha');
|
|
|
+ const casa = button.getAttribute('data-casa');
|
|
|
+ const ciudad = button.getAttribute('data-ciudad');
|
|
|
+ const provincia = button.getAttribute('data-provincia');
|
|
|
+ const panel = button.getAttribute('data-panel');
|
|
|
+ const eficiencia = button.getAttribute('data-eficiencia');
|
|
|
+ const cantidad = button.getAttribute('data-cantidad');
|
|
|
+ const energia = button.getAttribute('data-energia');
|
|
|
+ const ahorro = parseFloat(button.getAttribute('data-ahorro'));
|
|
|
+ const consumo = button.getAttribute('data-consumo');
|
|
|
+ const costo = parseFloat(button.getAttribute('data-costo'));
|
|
|
+
|
|
|
+ // Calculate new cost
|
|
|
+ const nuevoCosto = Math.max(0, costo - ahorro).toFixed(2);
|
|
|
+
|
|
|
+ // Update the modal's content.
|
|
|
+ detallesModal.querySelector('#modalCliente').textContent = cliente;
|
|
|
+ detallesModal.querySelector('#modalFecha').textContent = fecha;
|
|
|
+ detallesModal.querySelector('#modalCasa').textContent = casa;
|
|
|
+ detallesModal.querySelector('#modalUbicacion').textContent = `${ciudad}, ${provincia}`;
|
|
|
+ detallesModal.querySelector('#modalPanel').textContent = panel;
|
|
|
+ detallesModal.querySelector('#modalEficiencia').textContent = eficiencia;
|
|
|
+ detallesModal.querySelector('#modalCantidad').textContent = cantidad;
|
|
|
+ detallesModal.querySelector('#modalEnergia').textContent = energia;
|
|
|
+ detallesModal.querySelector('#modalAhorro').textContent = ahorro.toFixed(2);
|
|
|
+ detallesModal.querySelector('#modalConsumo').textContent = consumo;
|
|
|
+ detallesModal.querySelector('#modalCosto').textContent = costo.toFixed(2);
|
|
|
+ detallesModal.querySelector('#modalNuevoCosto').textContent = nuevoCosto;
|
|
|
+ });
|
|
|
+
|
|
|
const ctx = document.getElementById('savingsChart').getContext('2d');
|
|
|
const savingsChart = new Chart(ctx, {
|
|
|
type: 'bar',
|