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));