diff --git a/src/app/home/options/options.component.html b/src/app/home/options/options.component.html index 79f52be..73806fe 100644 --- a/src/app/home/options/options.component.html +++ b/src/app/home/options/options.component.html @@ -237,6 +237,11 @@ + + + diff --git a/src/app/home/options/options.component.ts b/src/app/home/options/options.component.ts index 2da2ddb..973bf43 100644 --- a/src/app/home/options/options.component.ts +++ b/src/app/home/options/options.component.ts @@ -333,31 +333,37 @@ export class OptionsComponent { const db = await this.openDatabase(); const transaction = db.transaction(this.storeName, 'readonly'); const store = transaction.objectStore(this.storeName); - const request = store.getAll(); - + request.onsuccess = (event) => { this.userGeneratedImages = request.result; - - // Sort the userGeneratedImages array based on the timestamp in descending order - this.userGeneratedImages.sort((a, b) => { - const timestampA = a.timestamp ? a.timestamp.getTime() : 0; - const timestampB = b.timestamp ? b.timestamp.getTime() : 0; - return timestampB - timestampA; - }); - - // Calculate the total number of pages - this.totalPages = Math.ceil(this.userGeneratedImages.length / this.imagesPerPage); - - // Display the first page of images - this.searchImages(); - this.paginateImages(); + + if (this.userGeneratedImages.length > 0) { + // Sort the userGeneratedImages array based on the timestamp in descending order + this.userGeneratedImages.sort((a, b) => { + const timestampA = a.timestamp ? a.timestamp.getTime() : 0; + const timestampB = b.timestamp ? b.timestamp.getTime() : 0; + return timestampB - timestampA; + }); + + // Calculate the total number of pages + this.totalPages = Math.ceil(this.userGeneratedImages.length / this.imagesPerPage); + + // Display the first page of images + this.searchImages(); + this.paginateImages(); + } else { + // No images found, reset the pagination variables + this.currentPage = 1; + this.totalPages = 1; + this.paginatedImages = []; + } }; - + request.onerror = (event) => { console.error('Failed to retrieve images from IndexedDB', event); }; - + // Wait for the transaction to complete before proceeding await new Promise((resolve) => { transaction.oncomplete = () => { @@ -751,6 +757,38 @@ export class OptionsComponent { this.sortImages(); } + async deleteAllImages() { + try { + const db = await this.openDatabase(); + const transaction = db.transaction(this.storeName, 'readwrite'); + const store = transaction.objectStore(this.storeName); + + const request = store.clear(); + + request.onsuccess = (event) => { + console.log('All images deleted from IndexedDB'); + this.userGeneratedImages = []; + this.filteredImages = []; + this.paginatedImages = []; + this.currentPage = 1; + this.totalPages = 1; + }; + + request.onerror = (event) => { + console.error('Failed to delete images from IndexedDB', event); + }; + + // Wait for the transaction to complete before proceeding + await new Promise((resolve) => { + transaction.oncomplete = () => { + resolve(undefined); + }; + }); + } catch (error) { + console.error('Failed to open database', error); + } + } + // Example function called after successful Discord login onDiscordLoginSuccess(userData: any) { localStorage.setItem('discordUserData', JSON.stringify(userData));