Update Frontend. Added Homepage

frontend/src/app/app.html

@@ -1,5 +1,19 @@
 <mat-toolbar color="primary">
+  <a mat-button routerLink="/">
+    <mat-icon>home</mat-icon>
     <span>Dashboard</span>
+  </a>
+  <span class="spacer"></span>
+
+  <!-- Show 'edit' icon if not in admin view -->
+  <a *ngIf="!isAdminView" mat-icon-button routerLink="/admin" matTooltip="Edit Dashboard Items">
+    <mat-icon>edit</mat-icon>
+  </a>
+
+  <!-- Show 'close' icon if in admin view -->
+  <a *ngIf="isAdminView" mat-icon-button routerLink="/" matTooltip="Back to Dashboard">
+    <mat-icon>close</mat-icon>
+  </a>
 </mat-toolbar>
 
 <router-outlet></router-outlet>

frontend/src/app/app.routes.ts

@@ -1,9 +1,11 @@
 import { Routes } from '@angular/router';
 import { ItemListComponent } from './components/item-list/item-list';
 import { ItemFormComponent } from './components/item-form/item-form';
+import { HomeComponent } from './components/home/home';
 
 export const routes: Routes = [
-  { path: '', component: ItemListComponent },
+  { path: '', component: HomeComponent },
+  { path: 'admin', component: ItemListComponent },
   { path: 'create', component: ItemFormComponent },
   { path: 'edit/:id', component: ItemFormComponent },
   { path: '**', redirectTo: '' }

frontend/src/app/app.scss

@@ -0,0 +1,3 @@
+.spacer {
+  flex: 1 1 auto;
+}

frontend/src/app/app.ts

@@ -1,14 +1,27 @@
-import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { RouterModule, RouterOutlet, Router, NavigationEnd } from '@angular/router';
 import { MaterialModule } from './material.module';
+import { filter } from 'rxjs/operators';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, MaterialModule],
+  imports: [RouterOutlet, RouterModule, MaterialModule, CommonModule],
   templateUrl: './app.html',
   styleUrls: ['./app.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'frontend';
+  isAdminView = false;
+
+  constructor(private router: Router) {}
+
+  ngOnInit() {
+    this.router.events.pipe(
+      filter((event): event is NavigationEnd => event instanceof NavigationEnd)
+    ).subscribe((event: NavigationEnd) => {
+      this.isAdminView = event.urlAfterRedirects === '/admin';
+    });
+  }
 }

frontend/src/app/components/home/home.html

@@ -0,0 +1,17 @@
+<div class="card-container">
+  <div *ngIf="items$ | async as items">
+    <a *ngFor="let item of items" [href]="item.target" target="_blank" rel="noopener noreferrer" class="card-link">
+      <mat-card class="item-card">
+        <mat-card-header>
+          <div class="card-header-content">
+            <img *ngIf="item.iconUrl && !imgErrorMap.get(item.id); else defaultIcon" mat-card-avatar [src]="item.iconUrl" (error)="onImgError(item.id)">
+            <ng-template #defaultIcon>
+              <mat-icon mat-card-avatar class="default-avatar-icon">dashboard</mat-icon>
+            </ng-template>
+            <mat-card-title>{{ item.displayName }}</mat-card-title>
+          </div>
+        </mat-card-header>
+      </mat-card>
+    </a>
+  </div>
+</div>

frontend/src/app/components/home/home.scss

@@ -0,0 +1,45 @@
+.card-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 20px;
+  padding: 20px;
+}
+
+.card-link {
+  text-decoration: none;
+  color: inherit;
+}
+
+.item-card {
+  cursor: pointer;
+  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+
+.item-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+// Custom flex container inside the header
+.card-header-content {
+  display: flex;
+  align-items: center; // Revert to center alignment
+  width: 100%;
+  height: 64px; // Give the container a fixed height
+}
+
+// Remove margin from the title and add padding for spacing
+.card-header-content .mat-card-title {
+  margin: 0;
+  padding-left: 16px;
+}
+
+
+.default-avatar-icon {
+  // Vertically align the icon in the avatar space
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+}

frontend/src/app/components/home/home.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Home } from './home';
+
+describe('Home', () => {
+  let component: Home;
+  let fixture: ComponentFixture<Home>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Home]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(Home);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/components/home/home.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MaterialModule } from '../../material.module';
+import { ApiService } from '../../services/api';
+import { Item } from '../../models/item';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'app-home',
+  standalone: true,
+  imports: [CommonModule, MaterialModule],
+  templateUrl: './home.html',
+  styleUrls: ['./home.scss']
+})
+export class HomeComponent implements OnInit {
+  items$!: Observable<Item[]>;
+  imgErrorMap = new Map<number, boolean>();
+
+  constructor(private apiService: ApiService) {}
+
+  ngOnInit(): void {
+    this.items$ = this.apiService.getItems();
+  }
+
+  onImgError(itemId: number) {
+    this.imgErrorMap.set(itemId, true);
+  }
+}

frontend/src/app/material.module.ts

@@ -6,6 +6,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatTableModule } from '@angular/material/table';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @NgModule({
   exports: [
@@ -16,6 +17,7 @@ import { MatIconModule } from '@angular/material/icon';
     MatTableModule,
     MatToolbarModule,
     MatIconModule,
+    MatTooltipModule,
   ]
 })
 export class MaterialModule { }

frontend/src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>Frontend</title>
+  <title>Dashboard</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">