Untitled

document.addEventListener('DOMContentLoaded', async () => {
    const fileInput = document.getElementById('file-upload');
    const postTypeSelect = document.getElementById('postType');
    const sortBySelect = document.getElementById('sort-by');
    const feedback = document.getElementById('feedback');
    const uploadButton = document.querySelector('.upload-button');
    const themeToggleButton = document.getElementById('theme-toggle');
    const currentTheme = localStorage.getItem('theme') || 'light';

    document.documentElement.setAttribute('data-theme', currentTheme);

    if (fileInput) {
        fileInput.addEventListener('change', handleFileUpload);
    }

    if (postTypeSelect) {
        postTypeSelect.addEventListener('change', () => loadPosts());
    }

    if (sortBySelect) {
        sortBySelect.addEventListener('change', () => loadPosts());
    }

    if (uploadButton) {
        uploadButton.addEventListener('click', handleUploadButtonClick);
    }

    if (themeToggleButton) {
        themeToggleButton.addEventListener('click', () => {
            const newTheme = document.documentElement.getAttribute('data-theme') === 'light' ? 'dark' : 'light';
            document.documentElement.setAttribute('data-theme', newTheme);
            localStorage.setItem('theme', newTheme);
        });
    }

    // Check for posts in IndexedDB and load them if available
    const db = await openDatabase();
    const transaction = db.transaction(['posts'], 'readonly');
    const store = transaction.objectStore('posts');
    const request = store.count();

    request.onsuccess = async () => {
        if (request.result > 0) {
            await loadPostsFromIndexedDB();
        } else {
            console.log('No posts found in IndexedDB.');
        }
    };

    request.onerror = (event) => {
        console.error('Error checking posts in IndexedDB:', event.target.error);
    };

    async function handleFileUpload(event) {
        const file = event.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = async (e) => {
                const xmlString = e.target.result;
                await loadPosts(xmlString);
            };
            reader.readAsText(file);
        }
    }

    async function handleUploadButtonClick() {
        const fileInput = document.getElementById('file-upload');
        if (fileInput && fileInput.files.length > 0) {
            const file = fileInput.files[0];
            const reader = new FileReader();
            reader.onload = (event) => {
                const xmlString = event.target.result;
                localStorage.setItem('xmlFileContent', xmlString);
                feedback.textContent = 'File uploaded successfully.';
            };
            reader.onerror = () => {
                feedback.textContent = 'An error occurred while reading the file.';
            };
            reader.readAsText(file);
        } else {
            feedback.textContent = 'Please select a file to upload.';
        }
    }

    async function loadPosts(xmlString = localStorage.getItem('xmlFileContent')) {
        const postsContainer = document.getElementById('postsContainer');
        if (!postsContainer) {
            console.error('Posts container not found.');
            return;
        }

        postsContainer.innerHTML = '';

        if (!xmlString) {
            console.error('No XML file content found.');
            return;
        }

        const parser = new DOMParser();
        const xmlDoc = parser.parseFromString(xmlString, "text/xml");
        const postTypeFilter = document.getElementById('postType')?.value || 'all';
        const sortBy = document.getElementById('sort-by')?.value || 'date';

        const allPosts = Array.from(xmlDoc.getElementsByTagName('post'));

        await addPostsToIndexedDB(allPosts);

        displayPosts(allPosts, postTypeFilter, sortBy);
    }

    async function loadPostsFromIndexedDB() {
        const postsContainer = document.getElementById('postsContainer');
        if (!postsContainer) {
            console.error('Posts container not found.');
            return;
        }

        postsContainer.innerHTML = '';

        const db = await openDatabase();
        const transaction = db.transaction(['posts'], 'readonly');
        const store = transaction.objectStore('posts');
        const request = store.getAll();

        request.onsuccess = () => {
            const allPosts = request.result;
            const postTypeFilter = document.getElementById('postType')?.value || 'all';
            const sortBy = document.getElementById('sort-by')?.value || 'date';

            displayPosts(allPosts, postTypeFilter, sortBy);
        };

        request.onerror = (event) => {
            console.error('Error loading posts from IndexedDB:', event.target.error);
        };
    }

    async function addPostsToIndexedDB(posts) {
        const db = await openDatabase();
        const transaction = db.transaction(['posts'], 'readwrite');
        const store = transaction.objectStore('posts');
    
        for (const post of posts) {
            const postId = post.getAttribute('id');
            const postObject = {
                id: postId,
                type: post.getAttribute('type'),
                url: post.getAttribute('url'),
                slug: post.getAttribute('slug'),
                isReblog: post.getAttribute('is-reblog'),
                unixTimestamp: post.getAttribute('unix-timestamp'),
                tumblelog: post.getAttribute('tumblelog'),
                date: post.getAttribute('date'),
                state: post.getAttribute('state'),
                content: new XMLSerializer().serializeToString(post)
            };
            store.put(postObject);
        }
    
        return new Promise((resolve, reject) => {
            transaction.oncomplete = () => resolve();
            transaction.onerror = (event) => reject(event.target.error);
        });
    }

    async function openDatabase() {
        return new Promise((resolve, reject) => {
            const request = indexedDB.open('postsDB', 1);

            request.onupgradeneeded = (event) => {
                const db = event.target.result;
                db.createObjectStore('posts', { keyPath: 'id' });
            };

            request.onsuccess = () => resolve(request.result);
            request.onerror = (event) => reject(event.target.error);
        });
    }

    async function resetDatabase() {
        const db = await openDatabase();
        const transaction = db.transaction(['posts'], 'readwrite');
        const store = transaction.objectStore('posts');
        const request = store.clear();
    
        return new Promise((resolve, reject) => {
            request.onsuccess = () => {
                console.log('Database reset successfully.');
                const postsContainer = document.getElementById('postsContainer');
                if (postsContainer) {
                    postsContainer.innerHTML = '';
                }
                resolve();
            };
            request.onerror = (event) => reject(event.target.error);
        });
    }
    
    async function openDatabase() {
        return new Promise((resolve, reject) => {
            const request = indexedDB.open('postsDB', 1);
    
            request.onupgradeneeded = (event) => {
                const db = event.target.result;
                db.createObjectStore('posts', { keyPath: 'id' });
            };
    
            request.onsuccess = () => resolve(request.result);
            request.onerror = (event) => reject(event.target.error);
        });
    }
    
    async function getAllPostsFromIndexedDB() {
        const db = await openDatabase();
        const transaction = db.transaction(['posts'], 'readonly');
        const store = transaction.objectStore('posts');
        const request = store.getAll();
    
        return new Promise((resolve, reject) => {
            request.onsuccess = (event) => resolve(event.target.result);
            request.onerror = (event) => reject(event.target.error);
        });
    }
    
    function sortPosts(posts, attribute) {
        return posts.sort((a, b) => {
            if (a[attribute] < b[attribute]) return -1;
            if (a[attribute] > b[attribute]) return 1;
            return 0;
        });
    }
    
    function searchPosts(posts, keyword) {
        return posts.filter(post => {
            return Object.values(post).some(value => 
                value != null && value.toString().toLowerCase().includes(keyword.toLowerCase())
            );
        });
    }
    
    function displayPosts(posts) {
        const postsContainer = document.getElementById('postsContainer');
        if (postsContainer) {
            postsContainer.innerHTML = '';
            posts.forEach(post => {
                const postElement = document.createElement('div');
                postElement.innerHTML = post.content;
                postsContainer.appendChild(postElement);
            });
        }
    }

    document.getElementById('reset-db-button').addEventListener('click', resetDatabase);

    function displayPosts(posts, postTypeFilter, sortBy) {
        const postsContainer = document.getElementById('postsContainer');
        if (!postsContainer) {
            console.error('Posts container not found.');
            return;
        }

        let filteredPosts = posts;

        if (postTypeFilter !== 'all') {
            filteredPosts = filteredPosts.filter(post => post.type === postTypeFilter);
        }

        filteredPosts.sort((a, b) => {
            const aValue = sortBy === 'date' ? new Date(a.date).getTime() : a.state;
            const bValue = sortBy === 'date' ? new Date(b.date).getTime() : b.state;
            return aValue > bValue ? 1 : -1;
        });

        let postIndex = 0;

        const displayNextBatch = async () => {
            const batchSize = 50;
            const currentBatch = filteredPosts.slice(postIndex, postIndex + batchSize);

            currentBatch.forEach(post => {
                const postType = post.type ? post.type : 'Unknown';
                const postId = post.id ? post.id : 'Unknown';
                const postUrl = post.url ? post.url : '#';
                const postDate = post.date ? post.date : 'Unknown';
                const postState = post.state ? post.state : 'Unknown';

                const postContentElement = parseHtmlString(post.content);

                let postContent = `<div class="post-container" data-postId="${postId}" data-postType="${postType}" data-postState="${postState}">
                    <div class="post">
                        <div class="post-header">
                            <p><strong>Date:</strong> ${postDate}</p>
                            <a href="${postUrl}" target="_blank" class="view-post-link">View Post</a>
                        </div>
                        <h2>Post Type: ${postType}</h2>
                        <p><strong>ID:</strong> ${postId}</p>
                        <p><strong>State:</strong> ${postState}</p>
                        <p>Post ${postIndex + 1} of ${filteredPosts.length}</p>`;

                if (postType) {
                    switch (postType.toLowerCase()) {
                        case 'regular':
                            const regularBody = postContentElement.querySelector('regular-body')?.textContent || '';
                            postContent += `<div class="post-content">${decodeHtml(regularBody)}</div>`;
                            break;
                        case 'photo':
                            const photoUrls = Array.from(postContentElement.getElementsByTagName('photo-url'));
                            const photoCaption = postContentElement.querySelector('photo-caption')?.textContent || '';
                            postContent += `<div class="post-content">
                                <div class="photo-container">
                                    <picture>`;
                            photoUrls.forEach(photo => {
                                const maxWidth = photo.getAttribute('max-width');
                                postContent += `<source media="(min-width:${maxWidth})" srcset="${photo.textContent.trim()}">`;
                            });
                            postContent += `<img src="${photoUrls[0]?.textContent.trim() || ''}" alt="Photo">
                                </picture>
                                <div>${decodeHtml(photoCaption)}</div>
                            </div></div>`;
                            break;
                        case 'video':
                            const videoPlayer = postContentElement.querySelector('video-player')?.textContent || '';
                            const videoCaption = postContentElement.querySelector('video-caption')?.textContent || '';
                            postContent += `<div class="post-content">${decodeHtml(videoCaption)}</div>`;
                            postContent += videoPlayer ? decodeHtml(videoPlayer) : '';
                            break;
                        case 'link':
                            const linkText = postContentElement.querySelector('link-text')?.textContent || '';
                            const linkUrl = postContentElement.querySelector('link-url')?.textContent || '';
                            postContent += `<div class="post-content">
                                <a href="${linkUrl}" target="_blank">${decodeHtml(linkText)}</a>
                            </div>`;
                            break;
                        case 'audio':
                            const audioUrl = postContentElement.querySelector('audio-url')?.textContent || '';
                            const audioCaption = postContentElement.querySelector('audio-caption')?.textContent || '';
                            postContent += `<div class="post-content">
                                <audio controls>
                                    <source src="${audioUrl}" type="audio/mpeg">
                                    Your browser does not support the audio element.
                                </audio>
                                <div>${decodeHtml(audioCaption)}</div>
                            </div>`;
                            break;
                        case 'quote':
                            const quoteText = postContentElement.querySelector('quote-text')?.textContent || '';
                            const quoteSource = postContentElement.querySelector('quote-source')?.textContent || '';
                            postContent += `<div class="post-content">
                                <blockquote>${decodeHtml(quoteText)}</blockquote>
                                <cite>${decodeHtml(quoteSource)}</cite>
                            </div>`;
                            break;
                        case 'conversation':
                            const conversationLines = Array.from(postContentElement.getElementsByTagName('line'));
                            postContent += `<div class="post-content"><ul>`;
                            conversationLines.forEach(line => {
                                const label = line.getAttribute('label') || '';
                                const text = line.textContent || '';
                                postContent += `<li><strong>${decodeHtml(label)}</strong> ${decodeHtml(text)}</li>`;
                            });
                            postContent += `</ul></div>`;
                            break;
                        default:
                            postContent += '<div class="post-content">Unsupported post type</div>';
                            break;
                    }
                } else {
                    postContent += '<div class="post-content">Unknown post type</div>';
                }

                postContent += `</div></div>`;

                // Directly insert postContent as HTML, avoiding the extra div
                postsContainer.insertAdjacentHTML('beforeend', postContent);

                postIndex++;
            });

            if (postIndex < filteredPosts.length) {
                setTimeout(displayNextBatch, 1000);
            }
        };

        displayNextBatch();
    }


    function decodeHtml(html) {
        const txt = document.createElement('textarea');
        txt.innerHTML = html;
        return txt.value;
    }

    function parseHtmlString(htmlString) {
        const parser = new DOMParser();
        return parser.parseFromString(htmlString, 'text/html').body;
    }
});
async function addPostsToIndexedDB(posts) {
    const db = await openDatabase();
    const transaction = db.transaction(['posts'], 'readwrite');
    const store = transaction.objectStore('posts');

    for (const post of posts) {
        const postId = post.getAttribute('id');
        const postObject = {
            id: postId,
            type: post.getAttribute('type'),
            url: post.getAttribute('url'),
            slug: post.getAttribute('slug'),
            isReblog: post.getAttribute('is-reblog'),
            unixTimestamp: post.getAttribute('unix-timestamp'),
            tumblelog: post.getAttribute('tumblelog'),
            date: post.getAttribute('date'),
            state: post.getAttribute('state'),
            content: new XMLSerializer().serializeToString(post)
        };
        store.put(postObject);
    }

    return new Promise((resolve, reject) => {
        transaction.oncomplete = () => resolve();
        transaction.onerror = (event) => reject(event.target.error);
    });
}

async function openDatabase() {
    return new Promise((resolve, reject) => {
        const request = indexedDB.open('postsDB', 1);

        request.onupgradeneeded = (event) => {
            const db = event.target.result;
            db.createObjectStore('posts', { keyPath: 'id' });
        };

        request.onsuccess = () => resolve(request.result);
        request.onerror = (event) => reject(event.target.error);
    });
}

async function resetDatabase() {
    const db = await openDatabase();
    const transaction = db.transaction(['posts'], 'readwrite');
    const store = transaction.objectStore('posts');
    const request = store.clear();

    request.onsuccess = () => {
        console.log('Database reset successfully.');
        const postsContainer = document.getElementById('postsContainer');
        if (postsContainer) {
            postsContainer.innerHTML = '';
        }
    };

    request.onerror = (event) => {
        console.error('Error resetting database:', event.target.error);
    };
}

function sortPosts(posts, attribute) {
    return posts.sort((a, b) => {
        if (a[attribute] < b[attribute]) return -1;
        if (a[attribute] > b[attribute]) return 1;
        return 0;
    });
}

function searchPosts(posts, keyword) {
    return posts.filter(post => {
        return Object.values(post).some(value => 
            value != null && value.toString().toLowerCase().includes(keyword.toLowerCase())
        );
    });
}

async function getAllPostsFromIndexedDB() {
    const db = await openDatabase();
    const transaction = db.transaction(['posts'], 'readonly');
    const store = transaction.objectStore('posts');
    const request = store.getAll();

    return new Promise((resolve, reject) => {
        request.onsuccess = (event) => resolve(event.target.result);
        request.onerror = (event) => reject(event.target.error);
    });
}

function displayPosts(posts) {
    const postsContainer = document.getElementById('postsContainer');
    if (postsContainer) {
        postsContainer.innerHTML = '';
        posts.forEach(post => {
            const postElement = document.createElement('div');
            postElement.innerHTML = post.content;
            postsContainer.appendChild(postElement);
        });
    }
}

document.getElementById('sortButton').addEventListener('click', async () => {
    const attribute = document.getElementById('sortAttribute').value;
    const posts = await getAllPostsFromIndexedDB();
    const sortedPosts = sortPosts(posts, attribute);
    displayPosts(sortedPosts);
});

document.getElementById('searchButton').addEventListener('click', async () => {
    const keyword = document.getElementById('searchKeyword').value;
    const posts = await getAllPostsFromIndexedDB();
    const filteredPosts = searchPosts(posts, keyword);
    displayPosts(filteredPosts);
});document.addEventListener('DOMContentLoaded', () => {
    document.querySelector('.upload-button').addEventListener('click', async () => {
        const fileInput = document.getElementById('file-upload');
        if (fileInput.files.length === 0) {
            document.getElementById('feedback').textContent = 'Please select an XML file.';
            return;
        }

        const file = fileInput.files[0];
        const reader = new FileReader();
        reader.onload = async (event) => {
            const xmlContent = event.target.result;
            const parser = new DOMParser();
            const xmlDoc = parser.parseFromString(xmlContent, 'text/xml');
            const posts = Array.from(xmlDoc.getElementsByTagName('post'));
            await addPostsToIndexedDB(posts);
            document.getElementById('feedback').textContent = 'XML file content loaded successfully.';
        };
        reader.readAsText(file);
    });

    document.getElementById('sortButton').addEventListener('click', async () => {
        const attribute = document.getElementById('sortAttribute').value;
        const posts = await getAllPostsFromIndexedDB();
        if (posts.length === 0) {
            console.log('No XML file content found.');
            return;
        }
        const sortedPosts = sortPosts(posts, attribute);
        displayPosts(sortedPosts);
    });

    document.getElementById('searchButton').addEventListener('click', async () => {
        const keyword = document.getElementById('searchKeyword').value;
        const posts = await getAllPostsFromIndexedDB();
        if (posts.length === 0) {
            console.log('No XML file content found.');
            return;
        }
        const filteredPosts = searchPosts(posts, keyword);
        displayPosts(filteredPosts);
    });

    document.getElementById('resetButton').addEventListener('click', async () => {
        await resetDatabase();
    });
});

async function addPostsToIndexedDB(posts) {
    const db = await openDatabase();
    const transaction = db.transaction(['posts'], 'readwrite');
    const store = transaction.objectStore('posts');

    for (const post of posts) {
        const postId = post.getAttribute('id');
        const postObject = {
            id: postId,
            type: post.getAttribute('type'),
            url: post.getAttribute('url'),
            slug: post.getAttribute('slug'),
            isReblog: post.getAttribute('is-reblog'),
            unixTimestamp: post.getAttribute('unix-timestamp'),
            tumblelog: post.getAttribute('tumblelog'),
            date: post.getAttribute('date'),
            state: post.getAttribute('state'),
            content: new XMLSerializer().serializeToString(post)
        };
        store.put(postObject);
    }

    return new Promise((resolve, reject) => {
        transaction.oncomplete = () => resolve();
        transaction.onerror = (event) => reject(event.target.error);
    });
}

async function openDatabase() {
    return new Promise((resolve, reject) => {
        const request = indexedDB.open('postsDB', 1);

        request.onupgradeneeded = (event) => {
            const db = event.target.result;
            db.createObjectStore('posts', { keyPath: 'id' });
        };

        request.onsuccess = () => resolve(request.result);
        request.onerror = (event) => reject(event.target.error);
    });
}

async function getAllPostsFromIndexedDB() {
    const db = await openDatabase();
    const transaction = db.transaction(['posts'], 'readonly');
    const store = transaction.objectStore('posts');
    const request = store.getAll();

    return new Promise((resolve, reject) => {
        request.onsuccess = (event) => resolve(event.target.result);
        request.onerror = (event) => reject(event.target.error);
    });
}

function sortPosts(posts, attribute) {
    return posts.sort((a, b) => {
        if (a[attribute] < b[attribute]) return -1;
        if (a[attribute] > b[attribute]) return 1;
        return 0;
    });
}

function searchPosts(posts, keyword) {
    return posts.filter(post => {
        return Object.values(post).some(value => 
            value.toString().toLowerCase().includes(keyword.toLowerCase())
        );
    });
}

function displayPosts(posts) {
    const postsContainer = document.getElementById('postsContainer');
    if (postsContainer) {
        postsContainer.innerHTML = '';
        posts.forEach(post => {
            const postElement = document.createElement('div');
            postElement.innerHTML = post.content;
            postsContainer.appendChild(postElement);
        });
    }
}

async function resetDatabase() {
    const db = await openDatabase();
    const transaction = db.transaction(['posts'], 'readwrite');
    const store = transaction.objectStore('posts');
    const request = store.clear();

    return new Promise((resolve, reject) => {
        request.onsuccess = () => {
            console.log('Database reset successfully.');
            const postsContainer = document.getElementById('postsContainer');
            if (postsContainer) {
                postsContainer.innerHTML = '';
            }
            resolve();
        };
        request.onerror = (event) => reject(event.target.error);
    });
}document.addEventListener('DOMContentLoaded', () => {
    document.querySelector('.upload-button').addEventListener('click', async () => {
        const fileInput = document.getElementById('file-upload');
        if (fileInput.files.length === 0) {
            document.getElementById('feedback').textContent = 'Please select an XML file.';
            return;
        }

        const file = fileInput.files[0];
        const reader = new FileReader();
        reader.onload = async (event) => {
            const xmlContent = event.target.result;
            const parser = new DOMParser();
            const xmlDoc = parser.parseFromString(xmlContent, 'text/xml');
            const posts = Array.from(xmlDoc.getElementsByTagName('post'));
            await addPostsToIndexedDB(posts);
            document.getElementById('feedback').textContent = 'XML file content loaded successfully.';
        };
        reader.readAsText(file);
    });

    document.getElementById('sortButton').addEventListener('click', async () => {
        const attribute = document.getElementById('sortAttribute').value;
        const posts = await getAllPostsFromIndexedDB();
        if (posts.length === 0) {
            console.log('No XML file content found.');
            return;
        }
        const sortedPosts = sortPosts(posts, attribute);
        displayPosts(sortedPosts);
    });

    document.getElementById('searchButton').addEventListener('click', async () => {
        const keyword = document.getElementById('searchKeyword').value;
        const posts = await getAllPostsFromIndexedDB();
        if (posts.length === 0) {
            console.log('No XML file content found.');
            return;
        }
        const filteredPosts = searchPosts(posts, keyword);
        displayPosts(filteredPosts);
    });

    document.getElementById('resetButton').addEventListener('click', async () => {
        await resetDatabase();
    });
});

async function addPostsToIndexedDB(posts) {
    const db = await openDatabase();
    const transaction = db.transaction(['posts'], 'readwrite');
    const store = transaction.objectStore('posts');

    for (const post of posts) {
        const postId = post.getAttribute('id');
        const postObject = {
            id: postId,
            type: post.getAttribute('type'),
            url: post.getAttribute('url'),
            slug: post.getAttribute('slug'),
            isReblog: post.getAttribute('is-reblog'),
            unixTimestamp: post.getAttribute('unix-timestamp'),
            tumblelog: post.getAttribute('tumblelog'),
            date: post.getAttribute('date'),
            state: post.getAttribute('state'),
            content: post.innerHTML // Store the inner HTML content directly
        };
        store.put(postObject);
    }

    return new Promise((resolve, reject) => {
        transaction.oncomplete = () => resolve();
        transaction.onerror = (event) => reject(event.target.error);
    });
}

async function openDatabase() {
    return new Promise((resolve, reject) => {
        const request = indexedDB.open('postsDB', 1);

        request.onupgradeneeded = (event) => {
            const db = event.target.result;
            db.createObjectStore('posts', { keyPath: 'id' });
        };

        request.onsuccess = () => resolve(request.result);
        request.onerror = (event) => reject(event.target.error);
    });
}

async function getAllPostsFromIndexedDB() {
    const db = await openDatabase();
    const transaction = db.transaction(['posts'], 'readonly');
    const store = transaction.objectStore('posts');
    const request = store.getAll();

    return new Promise((resolve, reject) => {
        request.onsuccess = (event) => resolve(event.target.result);
        request.onerror = (event) => reject(event.target.error);
    });
}

function sortPosts(posts, attribute) {
    return posts.sort((a, b) => {
        if (a[attribute] < b[attribute]) return -1;
        if (a[attribute] > b[attribute]) return 1;
        return 0;
    });
}

function searchPosts(posts, keyword) {
    return posts.filter(post => {
        return Object.values(post).some(value => 
            value.toString().toLowerCase().includes(keyword.toLowerCase())
        );
    });
}

function displayPosts(posts) {
    const postsContainer = document.getElementById('postsContainer');
    if (postsContainer) {
        postsContainer.innerHTML = '';
        posts.forEach(post => {
            const postElement = document.createElement('div');
            postElement.innerHTML = post.content;
            postsContainer.appendChild(postElement);
        });
    }
}

async function resetDatabase() {
    const db = await openDatabase();
    const transaction = db.transaction(['posts'], 'readwrite');
    const store = transaction.objectStore('posts');
    const request = store.clear();

    return new Promise((resolve, reject) => {
        request.onsuccess = () => {
            console.log('Database reset successfully.');
            const postsContainer = document.getElementById('postsContainer');
            if (postsContainer) {
                postsContainer.innerHTML = '';
            }
            resolve();
        };
        request.onerror = (event) => reject(event.target.error);
    });
}
document.addEventListener('DOMContentLoaded', () => {
    document.querySelector('.upload-button').addEventListener('click', async () => {
        const fileInput = document.getElementById('file-upload');
        if (fileInput.files.length === 0) {
            document.getElementById('feedback').textContent = 'Please select an XML file.';
            return;
        }

        const file = fileInput.files[0];
        const reader = new FileReader();
        reader.onload = async (event) => {
            const xmlContent = event.target.result;
            const parser = new DOMParser();
            const xmlDoc = parser.parseFromString(xmlContent, 'text/xml');
            const posts = Array.from(xmlDoc.getElementsByTagName('post'));
            await addPostsToIndexedDB(posts);
            document.getElementById('feedback').textContent = 'XML file content loaded successfully.';
        };
        reader.readAsText(file);
    });

    document.getElementById('sortButton').addEventListener('click', async () => {
        const attribute = document.getElementById('sortAttribute').value;
        const posts = await getAllPostsFromIndexedDB();
        if (posts.length === 0) {
            console.log('No XML file content found.');
            return;
        }
        const sortedPosts = sortPosts(posts, attribute);
        displayPosts(sortedPosts);
    });

    document.getElementById('searchButton').addEventListener('click', async () => {
        const keyword = document.getElementById('searchKeyword').value;
        const posts = await getAllPostsFromIndexedDB();
        if (posts.length === 0) {
            console.log('No XML file content found.');
            return;
        }
        const filteredPosts = searchPosts(posts, keyword);
        displayPosts(filteredPosts);
    });

    document.getElementById('resetButton').addEventListener('click', async () => {
        await resetDatabase();
    });
});

async function addPostsToIndexedDB(posts) {
    const db = await openDatabase();
    const transaction = db.transaction(['posts'], 'readwrite');
    const store = transaction.objectStore('posts');

    for (const post of posts) {
        const postId = post.getAttribute('id');
        const postObject = {
            id: postId,
            type: post.getAttribute('type'),
            url: post.getAttribute('url'),
            slug: post.getAttribute('slug'),
            isReblog: post.getAttribute('is-reblog'),
            unixTimestamp: post.getAttribute('unix-timestamp'),
            tumblelog: post.getAttribute('tumblelog'),
            date: post.getAttribute('date'),
            state: post.getAttribute('state'),
            content: post.innerHTML // Store the inner HTML content directly
        };
        store.put(postObject);
    }

    return new Promise((resolve, reject) => {
        transaction.oncomplete = () => resolve();
        transaction.onerror = (event) => reject(event.target.error);
    });
}

async function openDatabase() {
    return new Promise((resolve, reject) => {
        const request = indexedDB.open('postsDB', 1);

        request.onupgradeneeded = (event) => {
            const db = event.target.result;
            db.createObjectStore('posts', { keyPath: 'id' });
        };

        request.onsuccess = () => resolve(request.result);
        request.onerror = (event) => reject(event.target.error);
    });
}

async function getAllPostsFromIndexedDB() {
    const db = await openDatabase();
    const transaction = db.transaction(['posts'], 'readonly');
    const store = transaction.objectStore('posts');
    const request = store.getAll();

    return new Promise((resolve, reject) => {
        request.onsuccess = (event) => resolve(event.target.result);
        request.onerror = (event) => reject(event.target.error);
    });
}

function sortPosts(posts, attribute) {
    return posts.sort((a, b) => {
        if (a[attribute] < b[attribute]) return -1;
        if (a[attribute] > b[attribute]) return 1;
        return 0;
    });
}

function searchPosts(posts, keyword) {
    return posts.filter(post => {
        return Object.values(post).some(value => 
            value != null && value.toString().toLowerCase().includes(keyword.toLowerCase())
        );
    });
}

function displayPosts(posts) {
    const postsContainer = document.getElementById('postsContainer');
    if (postsContainer) {
        postsContainer.innerHTML = '';
        posts.forEach(post => {
            const postElement = document.createElement('div');
            postElement.innerHTML = post.content;
            postsContainer.appendChild(postElement);
        });
    }
}

async function resetDatabase() {
    const db = await openDatabase();
    const transaction = db.transaction(['posts'], 'readwrite');
    const store = transaction.objectStore('posts');
    const request = store.clear();

    return new Promise((resolve, reject) => {
        request.onsuccess = () => {
            console.log('Database reset successfully.');
            const postsContainer = document.getElementById('postsContainer');
            if (postsContainer) {
                postsContainer.innerHTML = '';
            }
            resolve();
        };
        request.onerror = (event) => reject(event.target.error);
    });
}