File size: 3,944 Bytes
3ca9355
 
 
 
 
e7834ec
 
3ca9355
 
 
 
 
 
 
 
 
 
0368899
5411536
 
043c1ae
 
8a21ec9
3ca9355
 
 
 
 
 
7642c91
3ca9355
 
7642c91
 
3ca9355
7642c91
 
 
3ca9355
 
 
 
 
34cfba1
3ca9355
 
 
 
 
34cfba1
 
 
 
 
3ca9355
34cfba1
 
 
3ca9355
34cfba1
 
 
 
3ca9355
5411536
 
 
34cfba1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3ca9355
 
7642c91
 
 
 
 
3ca9355
7642c91
 
 
 
3ca9355
7642c91
 
 
5411536
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
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
/**
 * Main Application
 * SPA Router and State Management
 */

console.log('app.js loaded');

const app = {
    currentRoute: 'home',
    currentComponent: null,
    state: {},

    routes: {
        'home': HomeComponent,
        'species-selector': SpeciesSelectorComponent,
        'capture-form': CaptureFormComponent,
        'confirmation': ConfirmationComponent,
        'history': HistoryComponent,
        'info': EducationComponent, // Info tab now points to Education/Guidelines
        'data': InfoComponent,      // Data tab now points to the visualizations module
        'forum': ForumComponent,    // Foro comunitario
        'anzuelo': AnzueloComponent, // Asistente IA Anzuelo
        'emergency': EmergencyComponent
    },

    /**
     * Initialize the application
     */
    async init() {
        console.log('app.init() starting...');
        console.log('Initializing Mi Pesca RD...');

        // Initialize sync service
        syncService.init();

        // Load initial route
        this.navigate('home');
    },

    /**
     * Navigate to a route
     */
    async navigate(route) {
        console.log(`Navigating to: ${route}`);
        if (!this.routes[route]) {
            console.error(`Route not found: ${route}`);
            return;
        }

        try {
            // Destroy previous component
            if (this.currentComponent && this.currentComponent.destroy) {
                this.currentComponent.destroy();
            }

            // Update current route
            this.currentRoute = route;
            this.currentComponent = this.routes[route];

            // Initialize component
            if (this.currentComponent.init) {
                await this.currentComponent.init();
            }

            // Update Navigation State
            this.updateNavState(route);

            // Render component
            this.render();
        } catch (error) {
            console.error(`Navigation to ${route} failed:`, error);
            // Fallback render or simple error message
            const appContainer = document.getElementById('app');
            if (appContainer) {
                appContainer.innerHTML = `
                    <div class="card">
                        <h2>Error de Carga</h2>
                        <p>No se pudo cargar la vista solicitada. Por favor, intenta de nuevo.</p>
                        <button class="btn-primary" onclick="window.location.reload()">Refrescar App</button>
                    </div>
                `;
            }
        }
    },

    /**
     * Render current component
     */
    render() {
        const appContainer = document.getElementById('app');

        if (!appContainer) {
            console.error('App container not found');
            return;
        }

        if (this.currentComponent && this.currentComponent.render) {
            appContainer.innerHTML = this.currentComponent.render();
        }
    },

    /**
     * Update Bottom Tab Bar active state
     */
    updateNavState(route) {
        const tabs = document.querySelectorAll('.tab-item');
        tabs.forEach(tab => tab.classList.remove('active'));

        // Map routes to tab IDs
        const routeToTab = {
            'home': 'nav-home',
            'species-selector': 'nav-home',
            'capture-form': 'nav-home',
            'confirmation': 'nav-home',
            'history': 'nav-home',
            'data': 'nav-info',
            'info': 'nav-info',
            'forum': 'nav-forum',
            'anzuelo': 'nav-anzuelo',
            'education': 'nav-education'
        };

        const activeTabId = routeToTab[route];
        if (activeTabId) {
            const activeTab = document.getElementById(activeTabId);
            if (activeTab) activeTab.classList.add('active');
        }
    }
};

// Initialize app when DOM is ready
document.addEventListener('DOMContentLoaded', () => {
    app.init();
});