Skip to main content
The dashboard provides a visual, card-based interface for monitoring locker availability and status in real-time. It displays all lockers with color-coded indicators for quick identification of available and occupied lockers.

​
Card-Based Locker View

The dashboard uses a grid layout to display individual locker cards. Each card shows essential locker information at a glance.

​
Locker Card Components

Each locker card displays:
  • Locker Number: The unique identifier for the locker
  • Location: Physical location of the locker
  • Employee ID: The employee number assigned to the locker (if occupied)
  • Delete Action: Quick access to remove the locker
<div class="lockers-grid">
  <div class="locker-row" *ngFor="let locker of lockers">
    <div class="locker-row-details" [ngStyle]="{ 'background-color': locker.isEmpty ? '#92f08d' : '#8db0f0' }">
      <h3 (click)="populateForm(locker)">No. {{ locker.lockerNo }}</h3>
      <span>{{ locker.location }}</span>
      <span>Emp ID: {{ locker.employeeNumber }}</span>
      <div class="locker-row-action">
        <a (click)="deleteLocker(locker.lockerNo)"><i class="fa-solid fa-trash-can"></i></a>
      </div>
    </div>        
  </div>
</div>

​
Color-Coded Availability Indicators

The dashboard uses color coding based on the IsEmpty field to indicate locker availability status:

Empty Locker

Green background indicates the locker is available

Occupied Locker

Blue background indicates the locker is currently assigned to an employee

​
Status Indicator Logic

The color is dynamically applied using Angular’s ngStyle directive:
app.component.html:33
[ngStyle]="{ 'background-color': locker.isEmpty ? '#92f08d' : '#8db0f0' }"
The legend is displayed below the form:
  • Green [ ] = Empty locker
  • Blue [ ] = Occupied locker

​
Real-Time Status Updates

The dashboard automatically refreshes locker data after any CRUD operation to maintain real-time accuracy.

​
Update Triggers

The getAllLockers() method is called after:
  1. Initial Load: When the component initializes
  2. Adding a Locker: After successfully creating a new locker
  3. Deleting a Locker: After removing a locker
  4. Updating a Locker: After modifying locker information
ngOnInit(): void {
  this.getAllLockers();
}

getAllLockers() {
  this.lockersService.getAllLockers()
  .subscribe(
    response => {
      this.lockers = response;
    }
  );
}

​
Locker Display and Sorting

Lockers are retrieved from the API and displayed in a specific order to ensure consistent visualization.

​
Sorting Order

The backend API sorts lockers by LockerNo in ascending order:
LockersController.cs:18-25
[HttpGet]
public async Task<IActionResult> GetAllLockers()
{
    var result = await lockersDbContext.Lockers.ToListAsync();

    return Ok(result.OrderBy(x => x.LockerNo));
}

​
Data Model

The locker data structure includes all necessary fields for display: 
export interface Locker {
    lockerNo: string;
    employeeNumber: string | null;    
    size: number;
    location: string;
    isEmpty: boolean;
}

​
Interactive Features

​
Click-to-Edit

Clicking on a locker number populates the form with the locker’s current data for editing:
app.component.ts:73-75
populateForm(locker: Locker) {
  this.locker = locker;
}
The locker number is made clickable in the template:
app.component.html:34
<h3 (click)="populateForm(locker)">No. {{ locker.lockerNo }}</h3>

​
Quick Delete

Each locker card includes a delete action that removes the locker and refreshes the view:
app.component.ts:64-71
deleteLocker(lockerNo: string) {
  this.lockersService.deleteLocker(lockerNo)
  .subscribe(
    response => {
      this.getAllLockers();
    }
  );
}
Deleting a locker is immediate and cannot be undone. Consider adding a confirmation dialog in production environments.

Build docs developers (and LLMs) love

Get started for freeTalk to us