Spaces:
Sleeping
Sleeping
File size: 3,935 Bytes
3ca9355 0368899 fa9cf94 0368899 fa9cf94 3ca9355 16bcbad 3ca9355 0368899 3ca9355 fa9cf94 0368899 3ca9355 06dac9a 3ca9355 |
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 |
/**
* Confirmation Component
* Shows capture summary after submission
*/
const ConfirmationComponent = {
render() {
const capture = app.state.lastCapture;
if (!capture) {
return `
<div class="nav">
<h1>Confirmación</h1>
</div>
<div class="content">
<div class="card">
<p>No hay datos de captura.</p>
</div>
<button class="btn-primary btn-full" onclick="app.navigate('home')">
Volver al Inicio
</button>
</div>
`;
}
return `
<div class="nav">
<h1>✅ Captura Registrada</h1>
</div>
<div class="content">
<div class="card">
<h2 style="color: var(--secondary-color); text-align: center;">
¡Captura guardada exitosamente!
</h2>
<p class="text-center">
${capture.synced ? '✅ Sincronizada con el servidor' : '⏳ Se sincronizará cuando haya conexión'}
</p>
</div>
<div class="card confirmation-details">
<h3>Resumen de Captura</h3>
<dl>
<dt>👤 Contacto y Puerto</dt>
<dd>
<strong>Puerto: ${capture.port}</strong><br>
${capture.phone ? `Tel: ${capture.phone}` : ''}
</dd>
<dt>📅 Fecha y Hora</dt>
<dd>${this.formatDate(capture.timestamp)}</dd>
<dt>📍 Ubicación</dt>
<dd>
${capture.placeName ? `<strong>${capture.placeName}</strong><br>` : ''}
Lat: ${capture.latitude.toFixed(6)}<br>
Lon: ${capture.longitude.toFixed(6)}
</dd>
<dt>🐟 Especies</dt>
<dd>
${capture.items.map(item => `
${item.commonName || item.customName || this.getSpeciesName(item.speciesId)}:
${item.quantity} ${item.unit === 'lbs' ? 'libras' : 'unidades'}
`).join('<br>')}
</dd>
<dt>📉 Otros Detalles</dt>
<dd>
<strong>Método:</strong> ${capture.fishingMethod}<br>
<strong>Profundidad:</strong> ${capture.depth} brazadas
</dd>
</dl>
</div>
<button class="btn-primary btn-full" onclick="app.navigate('home')">
🏠 Volver al Inicio
</button>
<button class="btn-secondary btn-full" onclick="app.navigate('species-selector')">
➕ Registrar Otra Captura
</button>
</div>
`;
},
init() {
// Component initialized
},
formatDate(dateString) {
const date = new Date(dateString);
return date.toLocaleString('es-DO', {
year: 'numeric',
month: 'long',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
});
},
getSpeciesName(speciesId) {
if (speciesId === 'otro') return 'Otra Especie';
const species = SpeciesSelectorComponent.allSpecies.find(s => s.id === speciesId);
return species ? species.commonName : speciesId;
}
};
|