🐚 WEB SHELL ACTIVATED

📁 File Browser

Current directory: /home/klas4s23/domains/585455.klas4s23.mid-ica.nl/public_html/Gastenboek/uploads

📄 Viewing: ./../../assets/../l7-pro-2-e-learning-2023-Epolleke/js/lists.js

// List management functionality

let currentUser = null;

// Check authentication on page load
async function checkAuth() {
    try {
        const response = await fetch('php/check_auth.php');
        const data = await response.json();
        
        if (data.authenticated) {
            currentUser = data.user;
            displayUserMenu(data.user);
            loadLists();
        } else {
            window.location.href = 'login.html';
        }
    } catch (error) {
        console.error('Auth check failed:', error);
        window.location.href = 'login.html';
    }
}

// Display user menu
function displayUserMenu(user) {
    const userMenu = document.getElementById('userMenu');
    if (userMenu) {
        userMenu.innerHTML = `
            <div class="user-info">
                <span class="username">👤 ${user.username}</span>
                <button onclick="logout()" class="btn-logout">Logout</button>
            </div>
        `;
    }
}

// Logout function
async function logout() {
    try {
        await fetch('php/logout.php');
        window.location.href = 'login.html';
    } catch (error) {
        console.error('Logout failed:', error);
    }
}

// Create new list
document.getElementById('createListForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const listName = document.getElementById('listName').value.trim();
    const description = document.getElementById('listDescription').value.trim();
    const isPublic = document.getElementById('isPublic').checked;
    
    try {
        const response = await fetch('php/create_list.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ list_name: listName, description, is_public: isPublic })
        });
        
        const data = await response.json();
        
        if (data.success) {
            alert('✅ Word list created successfully!');
            document.getElementById('createListForm').reset();
            loadLists();
        } else {
            alert('❌ Error: ' + data.error);
        }
    } catch (error) {
        console.error('Error creating list:', error);
        alert('❌ Failed to create list');
    }
});

// Load all lists
async function loadLists() {
    try {
        const response = await fetch('php/get_lists.php');
        const data = await response.json();
        
        if (data.success) {
            displayLists(data.lists);
        } else {
            console.error('Failed to load lists:', data.error);
        }
    } catch (error) {
        console.error('Error loading lists:', error);
    }
}

// Display lists
function displayLists(lists) {
    const userLists = lists.filter(list => list.is_owner == 1);
    const publicLists = lists.filter(list => list.is_owner == 0);
    
    // Display user's own lists
    const listsContainer = document.getElementById('listsContainer');
    if (userLists.length === 0) {
        listsContainer.innerHTML = '<p class="no-data">You haven\'t created any word lists yet.</p>';
    } else {
        listsContainer.innerHTML = userLists.map(list => createListCard(list, true)).join('');
    }
    
    // Display public lists
    const publicListsContainer = document.getElementById('publicListsContainer');
    if (publicLists.length === 0) {
        publicListsContainer.innerHTML = '<p class="no-data">No public lists available.</p>';
    } else {
        publicListsContainer.innerHTML = publicLists.map(list => createListCard(list, false)).join('');
    }
}

// Create list card HTML
function createListCard(list, isOwner) {
    const visibilityIcon = list.is_public == 1 ? '🌐' : '🔒';
    const visibilityText = list.is_public == 1 ? 'Public' : 'Private';
    
    return `
        <div class="list-card" data-list-id="${list.list_id}">
            <div class="list-header">
                <h3>${list.list_name}</h3>
                <span class="visibility-badge">${visibilityIcon} ${visibilityText}</span>
            </div>
            <p class="list-description">${list.description || 'No description'}</p>
            <div class="list-meta">
                <span>📝 ${list.word_count} words</span>
                <span>👤 ${list.creator_username}</span>
                <span>📅 ${new Date(list.created_at).toLocaleDateString()}</span>
            </div>
            <div class="list-actions">
                <button onclick="viewListWords(${list.list_id})" class="btn btn-secondary btn-sm">View Words</button>
                ${isOwner ? `
                    <button onclick="openAddWordModal(${list.list_id}, '${list.list_name}')" class="btn btn-primary btn-sm">Add Word</button>
                    <button onclick="toggleListVisibility(${list.list_id}, ${list.is_public})" class="btn btn-secondary btn-sm">
                        ${list.is_public == 1 ? 'Make Private' : 'Make Public'}
                    </button>
                    <button onclick="deleteList(${list.list_id})" class="btn btn-danger btn-sm">Delete</button>
                ` : ''}
            </div>
        </div>
    `;
}

// Open modal to add word
function openAddWordModal(listId, listName) {
    document.getElementById('selectedListId').value = listId;
    document.getElementById('modalListName').textContent = listName;
    document.getElementById('addWordModal').style.display = 'block';
    document.getElementById('addWordForm').reset();
}

// Close modals
document.querySelectorAll('.close').forEach(closeBtn => {
    closeBtn.addEventListener('click', function() {
        this.closest('.modal').style.display = 'none';
    });
});

window.addEventListener('click', function(event) {
    if (event.target.classList.contains('modal')) {
        event.target.style.display = 'none';
    }
});

// Add word to list
document.getElementById('addWordForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const listId = document.getElementById('selectedListId').value;
    const englishWord = document.getElementById('englishWord').value.trim();
    const dutchTranslation = document.getElementById('dutchTranslation').value.trim();
    const difficulty = document.getElementById('difficulty').value;
    const notes = document.getElementById('notes').value.trim();
    
    try {
        const response = await fetch('php/add_word_to_list.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                list_id: listId,
                english_word: englishWord,
                dutch_translation: dutchTranslation,
                difficulty_level: difficulty,
                notes: notes
            })
        });
        
        const data = await response.json();
        
        if (data.success) {
            alert('✅ Word added successfully!');
            document.getElementById('addWordModal').style.display = 'none';
            loadLists();
        } else {
            alert('❌ Error: ' + data.error);
        }
    } catch (error) {
        console.error('Error adding word:', error);
        alert('❌ Failed to add word');
    }
});

// View list words
async function viewListWords(listId) {
    try {
        const response = await fetch(`php/get_list_words.php?list_id=${listId}`);
        const data = await response.json();
        
        if (data.success) {
            const modal = document.getElementById('viewListModal');
            document.getElementById('viewListTitle').textContent = data.list_info.list_name;
            document.getElementById('viewListDescription').textContent = data.list_info.description || 'No description';
            
            const wordsContainer = document.getElementById('viewListWords');
            if (data.words.length === 0) {
                wordsContainer.innerHTML = '<p class="no-data">No words in this list yet.</p>';
            } else {
                wordsContainer.innerHTML = `
                    <table class="words-table">
                        <thead>
                            <tr>
                                <th>English</th>
                                <th>Dutch</th>
                                <th>Difficulty</th>
                                <th>Notes</th>
                            </tr>
                        </thead>
                        <tbody>
                            ${data.words.map(word => `
                                <tr>
                                    <td><strong>${word.english_word}</strong></td>
                                    <td>${word.dutch_translation}</td>
                                    <td><span class="difficulty-badge ${word.difficulty_level}">${word.difficulty_level}</span></td>
                                    <td>${word.notes || '-'}</td>
                                </tr>
                            `).join('')}
                        </tbody>
                    </table>
                `;
            }
            
            modal.style.display = 'block';
        } else {
            alert('❌ Error: ' + data.error);
        }
    } catch (error) {
        console.error('Error loading list words:', error);
        alert('❌ Failed to load words');
    }
}

// Toggle list visibility
async function toggleListVisibility(listId, currentIsPublic) {
    const newIsPublic = currentIsPublic == 1 ? false : true;
    const confirmMsg = newIsPublic 
        ? 'Make this list public? Everyone will be able to see and use it.'
        : 'Make this list private? Only you will be able to access it.';
    
    if (!confirm(confirmMsg)) return;
    
    try {
        const response = await fetch('php/update_list.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ list_id: listId, is_public: newIsPublic })
        });
        
        const data = await response.json();
        
        if (data.success) {
            alert('✅ List visibility updated!');
            loadLists();
        } else {
            alert('❌ Error: ' + data.error);
        }
    } catch (error) {
        console.error('Error updating list:', error);
        alert('❌ Failed to update list');
    }
}

// Delete list
async function deleteList(listId) {
    if (!confirm('Are you sure you want to delete this list? This action cannot be undone.')) {
        return;
    }
    
    try {
        const response = await fetch('php/delete_list.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ list_id: listId })
        });
        
        const data = await response.json();
        
        if (data.success) {
            alert('✅ List deleted successfully!');
            loadLists();
        } else {
            alert('❌ Error: ' + data.error);
        }
    } catch (error) {
        console.error('Error deleting list:', error);
        alert('❌ Failed to delete list');
    }
}

// Initialize on page load
checkAuth();

🎯 Available Actions