Skip to content

Commit

Permalink
sorting options to image history
Browse files Browse the repository at this point in the history
  • Loading branch information
@Metal079
Metal079 committed Mar 12, 2024
2 parents 6f0311f + acb2812 commit ed36cb7
Show file tree
Hide file tree
Showing 3 changed files with 105 additions and 41 deletions.
87 changes: 47 additions & 40 deletions src/app/home/options/options.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,12 @@
[(ngModel)]="generationRequest.strength" />
</div>


<!-- Remove reference image button -->
<span *ngIf="referenceImage" id="remove-reference-image-button" style="margin-left: 20px;">
<button class="btn btn-danger" type="button" (click)="removeReferenceImage()">
Remove Reference Image
</button>
</span>

<!-- Advanced options -->
<div id="advanced-options">
Expand All @@ -71,51 +76,53 @@
Options
</button>

<!-- Image History Panel -->
<span class="history-panel">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#historyCollapse"
aria-expanded="false" aria-controls="historyCollapse" (click)="toggleHistory()">
Image History
</button>
<div class="collapse" id="historyCollapse">
<div class="card card-body">
<!-- Image History Panel -->
<div class="history-grid">
<div *ngFor="let image of paginatedImages" class="history-item">
<img [src]="image.url ?? image.thumbnailUrl" alt="Generated Image" (click)="openImageDetails(image)">
<div class="history-details">
<span>{{ image.timestamp | date:'short' }}</span>
<span class="summary-text">{{ image.promptSummary }}</span>
<!-- Image History Panel -->
<span class="history-panel">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="collapse"
data-bs-target="#historyCollapse" aria-expanded="false" aria-controls="historyCollapse"
(click)="toggleHistory()">
Image History
</button>
<div class="collapse" id="historyCollapse">
<div class="card card-body">
<div class="sorting-options">
<p-dropdown id="sortBy" [options]="dropdownOptions" [(ngModel)]="selectedSortOption" (onChange)="sortImages()"></p-dropdown>
<button class="btn btn-sm btn-secondary" (click)="reverseSortOrder()">
{{ sortOrder === 'asc' ? '&#9650;' : '&#9660;' }}
</button>
<span class="search-bar" style="margin-left: 10px">
<span class="p-input-icon-left">
<i class="pi pi-search"></i>
<input type="text" pInputText placeholder="Search prompts" [(ngModel)]="searchQuery"
(input)="searchImages()">
</span>
</span>
</div>
<!-- Image History Panel -->
<div class="history-grid">
<div *ngFor="let image of paginatedImages" class="history-item">
<img [src]="image.url ?? image.thumbnailUrl" alt="Generated Image" (click)="openImageDetails(image)">
<div class="history-details">
<span>{{ image.timestamp | date:'short' }}</span>
<span class="summary-text">{{ image.promptSummary }}</span>
</div>
</div>
</div>
</div>
<!-- Show message if no images are available -->
<div *ngIf="paginatedImages.length === 0" class="no-images-message">
No generated images available.
</div>
<div class="pagination">
<button class="btn btn-sm btn-primary" (click)="previousPage()" [disabled]="currentPage === 1">Previous</button>
<span>Page {{ currentPage }} of {{ totalPages }}</span>
<button class="btn btn-sm btn-primary" (click)="nextPage()" [disabled]="currentPage === totalPages">Next</button>
<!-- Show message if no images are available -->
<div *ngIf="paginatedImages.length === 0" class="no-images-message">
No generated images available.
</div>
<div class="pagination">
<button class="btn btn-sm btn-primary" (click)="previousPage()"
[disabled]="currentPage === 1">Previous</button>
<span>Page {{ currentPage }} of {{ totalPages }}</span>
<button class="btn btn-sm btn-primary" (click)="nextPage()"
[disabled]="currentPage === totalPages">Next</button>
</div>
</div>
</div>
</div>
</span>


<!-- Remove reference image button -->
<span *ngIf="referenceImage" id="remove-reference-image-button" style="margin-left: 20px;">
<button class="btn btn-danger" type="button" (click)="removeReferenceImage()">
Remove Reference Image
</button>
</span>

<!-- Re-generate with reference button -->
<button class="btn btn-success" type="button" onclick="redoWithSameReference()" id="redo-with-reference-button"
style="display: none">
Regenerate W/Prev Reference
</button>

<div class="collapse w-100" id="collapseExample">
<label for="floatingSelect">Model Select</label>
<select class="form-select" id="floatingSelect" aria-label="Floating label select example"
Expand Down
53 changes: 52 additions & 1 deletion src/app/home/options/options.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,11 +62,22 @@ export class OptionsComponent {
serverMember: boolean = false;
userGeneratedImages: MobiansImage[] = [];

// Pagination
paginatedImages: MobiansImage[] = [];
currentPage = 1;
imagesPerPage = 6; // Display 8 images per page (2 rows of 4 images each)
totalPages = 1;

// Sorting
selectedSortOption: string = 'timestamp';
sortOrder: 'asc' | 'desc' = 'desc';
searchQuery: string = '';
filteredImages: MobiansImage[] = [];
dropdownOptions: { label: string, value: string }[] = [
{ label: 'Date', value: 'timestamp' },
{ label: 'Alphabetical', value: 'promptSummary' }
];

@Input() inpaintMask?: string;

@Output() imagesChange = new EventEmitter<any>();
Expand Down Expand Up @@ -312,6 +323,7 @@ export class OptionsComponent {
this.totalPages = Math.ceil(this.userGeneratedImages.length / this.imagesPerPage);

// Display the first page of images
this.searchImages();
this.paginateImages();
};

Expand Down Expand Up @@ -603,10 +615,24 @@ export class OptionsComponent {
}
}

searchImages() {
if (this.searchQuery.trim() === '') {
this.filteredImages = [...this.userGeneratedImages];
} else {
const lowercaseQuery = this.searchQuery.toLowerCase();
this.filteredImages = this.userGeneratedImages.filter(image =>
image.promptSummary && image.promptSummary.toLowerCase().includes(lowercaseQuery)
);
}
this.currentPage = 1;
this.totalPages = Math.ceil(this.filteredImages.length / this.imagesPerPage);
this.paginateImages();
}

paginateImages() {
const startIndex = (this.currentPage - 1) * this.imagesPerPage;
const endIndex = startIndex + this.imagesPerPage;
this.paginatedImages = this.userGeneratedImages.slice(startIndex, endIndex);
this.paginatedImages = this.filteredImages.slice(startIndex, endIndex);
}

previousPage() {
Expand All @@ -623,6 +649,31 @@ export class OptionsComponent {
}
}

sortImages() {
if (this.selectedSortOption === 'timestamp') {
this.userGeneratedImages.sort((a, b) => {
const timestampA = a.timestamp ? a.timestamp.getTime() : 0;
const timestampB = b.timestamp ? b.timestamp.getTime() : 0;
return this.sortOrder === 'asc' ? timestampA - timestampB : timestampB - timestampA;
});
} else if (this.selectedSortOption === 'promptSummary') {
this.userGeneratedImages.sort((a, b) => {
const summaryA = a.promptSummary ? a.promptSummary.toLowerCase() : '';
const summaryB = b.promptSummary ? b.promptSummary.toLowerCase() : '';
return this.sortOrder === 'asc' ? summaryA.localeCompare(summaryB) : summaryB.localeCompare(summaryA);
});
}
// Add more sorting options as needed

this.paginateImages();
this.searchImages();
}

reverseSortOrder() {
this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
this.sortImages();
}

// Example function called after successful Discord login
onDiscordLoginSuccess(userData: any) {
localStorage.setItem('discordUserData', JSON.stringify(userData));
Expand Down
6 changes: 6 additions & 0 deletions src/modules/home.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ import { ButtonModule } from 'primeng/button';
import { ColorPickerModule } from 'primeng/colorpicker';
import { ToggleButtonModule } from 'primeng/togglebutton';
import { OverlayPanelModule } from 'primeng/overlaypanel';
import { InputTextModule } from 'primeng/inputtext';
import { DropdownModule } from 'primeng/dropdown';

@NgModule({
declarations: [
Expand All @@ -41,6 +43,8 @@ import { OverlayPanelModule } from 'primeng/overlaypanel';
ColorPickerModule,
ToggleButtonModule,
OverlayPanelModule,
InputTextModule,
DropdownModule,
],
exports: [
ImageGridComponent,
Expand All @@ -50,6 +54,8 @@ import { OverlayPanelModule } from 'primeng/overlaypanel';
GligenDisplayComponent,
InpaintingDisplayComponent,
OverlayPanelModule,
InputTextModule,
DropdownModule,
],
providers: [MessageService]
})
Expand Down

0 comments on commit ed36cb7

Please sign in to comment.