Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

compare vendor logo #24

Merged
merged 1 commit into from
Jun 3, 2024
+10 −0
Merged

compare vendor logo #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions src/app/pages/server-compare/server-compare.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,14 @@ <h1 class="text-white font-bold text-3xl">Server Comparison</h1>
{{column.name}}
</td>
<ng-container *ngFor="let item of servers">
<td *ngIf="column.key === 'vendor'" >
<div *ngIf="item.vendor.logo" class="w-9 h-9 px-1 py-1 bg-white rounded-lg">
<img [src]="item.vendor.logo" alt="{{item.vendor.name}} logo" >
</div>
<div *ngIf="!item.vendor.logo" class="text-white text-sm">
{{item.vendor.name}}
</div>
Comment on lines +45 to +51
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ensure accessibility for images.

Consider adding more descriptive alt text for images to enhance accessibility. For example, instead of just stating "{{item.vendor.name}} logo", you could describe the logo if it has distinctive features.

Refactor conditional rendering for clarity.

Consider using Angular's ngSwitch directive for better readability when handling multiple conditions based on the same variable (column.key). This can make the template easier to manage and understand, especially as more conditions are added in the future.

- <td *ngIf="column.key === 'vendor'">
-   <div *ngIf="item.vendor.logo" class="w-9 h-9 px-1 py-1 bg-white rounded-lg">
-     <img [src]="item.vendor.logo" alt="{{item.vendor.name}} logo">
-   </div>
-   <div *ngIf="!item.vendor.logo" class="text-white text-sm">
-     {{item.vendor.name}}
-   </div>
- </td>
+ <td [ngSwitch]="column.key">
+   <ng-container *ngSwitchCase="'vendor'">
+     <div *ngIf="item.vendor.logo; else noLogo" class="w-9 h-9 px-1 py-1 bg-white rounded-lg">
+       <img [src]="item.vendor.logo" alt="{{item.vendor.name}} logo">
+     </div>
+     <ng-template #noLogo>
+       <div class="text-white text-sm">
+         {{item.vendor.name}}
+       </div>
+     </ng-template>
+   </ng-container>
+ </td>
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
<td *ngIf="column.key === 'vendor'" >
<div *ngIf="item.vendor.logo" class="w-9 h-9 px-1 py-1 bg-white rounded-lg">
<img [src]="item.vendor.logo" alt="{{item.vendor.name}} logo" >
</div>
<div *ngIf="!item.vendor.logo" class="text-white text-sm">
{{item.vendor.name}}
</div>
<td [ngSwitch]="column.key">
<ng-container *ngSwitchCase="'vendor'">
<div *ngIf="item.vendor.logo; else noLogo" class="w-9 h-9 px-1 py-1 bg-white rounded-lg">
<img [src]="item.vendor.logo" alt="{{item.vendor.name}} logo">
</div>
<ng-template #noLogo>
<div class="text-white text-sm">
{{item.vendor.name}}
</div>
</ng-template>
</ng-container>
</td>

</td>
<td *ngIf="column.key === 'processor'">
<div class="text-sm text-white">{{item.cpu_cores || item.vcpus}}x {{item.cpu_architecture}}</div>
<div
Expand Down
2 changes: 2 additions & 0 deletions src/app/pages/server-compare/server-compare.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ export class ServerCompareComponent implements OnInit {
servers: ServerPKsWithPrices[] = [];

fields: any[] = [
{ name: 'Vendor', key: 'vendor' },
{ name: 'Processor', key: 'processor' },
{ name: 'Memory', key: 'memory' },
{ name: 'Storage', key: 'storage' },
Expand Down Expand Up @@ -66,6 +67,7 @@ export class ServerCompareComponent implements OnInit {
Promise.all(promises).then((data) => {
data?.forEach((server: any) => {
this.servers.push(server.body);
console.log(server.body);
});
this.isLoading = false;
});
Expand Down