File size: 8,607 Bytes
7644eac
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
/**
 * Main JavaScript file for the AI Learning Path Generator
 * Handles client-side interactivity for the web interface
 */

// Wait for DOM to be fully loaded
document.addEventListener('DOMContentLoaded', function() {
    // Form submission handling for path generator
    const pathForm = document.getElementById('pathGeneratorForm');
    if (pathForm) {
        setupPathGenerator(pathForm);
    }
    
    // Question handling for result page
    const askButton = document.getElementById('askButton');
    if (askButton) {
        setupQuestionAsking(askButton);
    }
    
    // Initialize tooltips and other UI elements
    initUI();
});

/**
 * Set up path generator form submission
 * @param {HTMLElement} form - The form element
 */
function setupPathGenerator(form) {
    const loadingSpinner = document.getElementById('loadingSpinner');
    
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        
        // Show loading spinner
        if (loadingSpinner) {
            loadingSpinner.style.display = 'block';
        }
        
        // Gather form data
        const formData = new FormData(form);
        formData.append('type', 'human');
        
        // Convert FormData to plain object for logging
        const formDataObj = {};
        formData.forEach((value, key) => {
            formDataObj[key] = value;
        });
        console.log('Submitting form data:', formDataObj);
        
        // Submit form data via fetch API
        fetch('/generate', {
            method: 'POST',
            body: formData,  // Let the browser set the correct Content-Type with boundary
            // Don't set Content-Type header when sending FormData, let the browser handle it
        })
        .then(response => response.json())
        .then(data => {
            // Hide loading spinner
            if (loadingSpinner) {
                loadingSpinner.style.display = 'none';
            }
            
            if (data.success) {
                // Redirect to result page if successful
                window.location.href = data.redirect;
            } else {
                // Show error message
                showAlert('Error: ' + data.message, 'error');
            }
        })
        .catch(error => {
            // Hide loading spinner
            if (loadingSpinner) {
                loadingSpinner.style.display = 'none';
            }
            console.error('Error:', error);
            showAlert('An error occurred. Please try again.', 'error');
        });
    });
}

/**
 * Set up question asking functionality
 * @param {HTMLElement} button - The ask button element
 */
function setupQuestionAsking(button) {
    const questionInput = document.getElementById('questionInput');
    const questionSpinner = document.getElementById('questionSpinner');
    const answerContainer = document.getElementById('answerContainer');
    const answerText = document.getElementById('answerText');
    
    button.addEventListener('click', function() {
        const question = questionInput.value.trim();
        
        if (!question) {
            showAlert('Please enter a question', 'warning');
            return;
        }
        
        // Show loading spinner
        if (questionSpinner) {
            questionSpinner.style.display = 'block';
        }
        
        // Get path information from the page
        const pathId = document.querySelector('[data-path-id]')?.dataset.pathId;
        const topic = document.querySelector('[data-path-topic]')?.dataset.pathTopic;
        
        // Prepare request data
        const requestData = {
            type: "human",
            question: question,
            path_id: pathId,
            topic: topic
        };
        
        // Submit question via fetch API
        fetch('/api/ask', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(requestData)
        })
        .then(response => response.json())
        .then(data => {
            // Hide loading spinner
            if (questionSpinner) {
                questionSpinner.style.display = 'none';
            }
            
            if (data.success !== false) {
                // Show answer container
                if (answerContainer) {
                    answerContainer.classList.remove('hidden');
                }
                if (answerText) {
                    answerText.textContent = data.answer;
                }
            } else {
                // Show error message
                showAlert('Error: ' + data.message, 'error');
            }
        })
        .catch(error => {
            // Hide loading spinner
            if (questionSpinner) {
                questionSpinner.style.display = 'none';
            }
            console.error('Error:', error);
            showAlert('An error occurred. Please try again.', 'error');
        });
    });
}

/**
 * Initialize UI components
 */
function initUI() {
    // Add smooth scrolling for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                window.scrollTo({
                    top: target.offsetTop,
                    behavior: 'smooth'
                });
            }
        });
    });
    
    // Add fade-in animations for elements
    const fadeElems = document.querySelectorAll('.fade-in');
    fadeElems.forEach((elem, index) => {
        setTimeout(() => {
            elem.style.opacity = '1';
            elem.style.transform = 'translateY(0)';
        }, 100 * index);
    });
}

/**
 * Show an alert message
 * @param {string} message - The message to display
 * @param {string} type - The type of alert (success, error, warning, info)
 */
function showAlert(message, type = 'info') {
    // Check if an alert container exists, otherwise create one
    let alertContainer = document.getElementById('alertContainer');
    if (!alertContainer) {
        alertContainer = document.createElement('div');
        alertContainer.id = 'alertContainer';
        alertContainer.style.position = 'fixed';
        alertContainer.style.top = '1rem';
        alertContainer.style.right = '1rem';
        alertContainer.style.zIndex = '9999';
        document.body.appendChild(alertContainer);
    }
    
    // Create the alert element
    const alert = document.createElement('div');
    alert.className = 'alert-message fade-in';
    alert.style.padding = '0.75rem 1rem';
    alert.style.marginBottom = '0.5rem';
    alert.style.borderRadius = '0.375rem';
    alert.style.boxShadow = '0 2px 5px rgba(0,0,0,0.1)';
    alert.style.opacity = '0';
    alert.style.transform = 'translateY(10px)';
    alert.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
    
    // Set styles based on type
    switch (type) {
        case 'success':
            alert.style.backgroundColor = '#d1fae5';
            alert.style.color = '#065f46';
            break;
        case 'error':
            alert.style.backgroundColor = '#fee2e2';
            alert.style.color = '#991b1b';
            break;
        case 'warning':
            alert.style.backgroundColor = '#fef3c7';
            alert.style.color = '#92400e';
            break;
        default: // info
            alert.style.backgroundColor = '#e0f2fe';
            alert.style.color = '#0369a1';
    }
    
    // Set the message
    alert.textContent = message;
    
    // Add a close button
    const closeButton = document.createElement('span');
    closeButton.innerHTML = '×';
    closeButton.style.float = 'right';
    closeButton.style.cursor = 'pointer';
    closeButton.style.fontWeight = 'bold';
    closeButton.style.marginLeft = '1rem';
    closeButton.addEventListener('click', () => {
        alert.remove();
    });
    
    alert.prepend(closeButton);
    
    // Add the alert to the container
    alertContainer.appendChild(alert);
    
    // Trigger animation
    setTimeout(() => {
        alert.style.opacity = '1';
        alert.style.transform = 'translateY(0)';
    }, 10);
    
    // Auto-remove after 5 seconds
    setTimeout(() => {
        alert.style.opacity = '0';
        alert.style.transform = 'translateY(-10px)';
        
        // Remove from DOM after animation completes
        setTimeout(() => {
            alert.remove();
        }, 300);
    }, 5000);
}