update project-diagram tab functionality

web/src/app/app.routes.ts

@@ -5,14 +5,14 @@ import { SignupComponent } from './components/signup/signup.component';
 import { AuthGuard } from './services/auth.guard';
 import { HomeComponent } from './components/home/home.component';
 import { ProjectsComponent } from './components/projects/projects.component';
-import { DiagramComponent } from './components/projects/diagram/diagram.component';
+import { ProjectDiagramComponent } from './components/projects/project-diagram/project-diagram.component';
 
 export const routes: Routes = [
     { path: '', component: HomeComponent },
     { path: 'login', component: LoginComponent },
     { path: 'signup', component: SignupComponent },
     { path: 'projects', component: ProjectsComponent, canActivate: [AuthGuard] },
-    { path: 'diagram', component: DiagramComponent, canActivate: [AuthGuard] },
+    { path: 'diagram', component: ProjectDiagramComponent, canActivate: [AuthGuard] },
     { path: '**', redirectTo: '' }
 ];
 

web/src/app/components/projects/project-diagram/project-diagram.component.html

@@ -0,0 +1,50 @@
+<ul class="nav nav-tabs">
+    <li class="nav-item" *ngFor="let tab of tabs; let i = index">
+      <a 
+        class="nav-link" 
+        [class.active]="i === activeTabIndex" 
+        (click)="activateTab(i)"
+        style="cursor: pointer;"
+      >
+        {{ tab.title }}
+      </a>
+    </li>
+    <!-- Plus sign triggers modal -->
+    <li class="nav-item">
+      <a class="nav-link" (click)="openModal()" style="cursor: pointer;">+</a>
+    </li>
+</ul>
+
+<!-- Tab content: Display DiagramComponent in active tab -->
+<div class="tab-content border border-top-0 p-3">
+<div class="tab-pane fade show active">
+    <app-diagram></app-diagram>
+</div>
+</div>
+
+<!-- Modal Dialog -->
+<div class="modal-backdrop fade show" *ngIf="showModal"></div>
+<div class="modal fade show d-block" tabindex="-1" *ngIf="showModal" role="dialog">
+<div class="modal-dialog" role="document">
+    <div class="modal-content">
+    <div class="modal-header">
+        <h5 class="modal-title">Add a New Case</h5>
+        <button type="button" class="btn-close" (click)="closeModal()" aria-label="Close"></button>
+    </div>
+    <div class="modal-body">
+        <label for="tabSelector" class="form-label">Select Hazard:</label>
+        <select id="tabSelector" class="form-select" [(ngModel)]="selectedTabName">
+        <option *ngFor="let name of availableTabs" [value]="name">{{ name }}</option>
+        </select>
+        <div *ngIf="selectedTabName === 'Custom'" class="mt-3">
+          <label for="customTabName" class="form-label">Custom Hazard:</label>
+          <input id="customTabName" type="text" class="form-control" [(ngModel)]="customTabName" placeholder="Enter custom tab name">
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" (click)="closeModal()">Cancel</button>
+        <button type="button" class="btn btn-primary" (click)="addTabFromModal()">Add Tab</button>
+    </div>
+    </div>
+</div>
+</div>

web/src/app/components/projects/project-diagram/project-diagram.component.scss

@@ -0,0 +1,17 @@
+.nav-tabs .nav-link:last-child {
+  font-weight: bold;
+  color: #0d6efd;
+}
+
+/* Modal styling tweaks */
+.modal-backdrop {
+  z-index: 1040;
+}
+
+.modal {
+  z-index: 1050;
+}
+
+.modal-dialog {
+  max-width: 500px;
+}

web/src/app/components/projects/project-diagram/project-diagram.component.spec.ts

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

web/src/app/components/projects/project-diagram/project-diagram.component.ts

@@ -0,0 +1,68 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { DiagramComponent } from '../diagram/diagram.component';
+
+interface Tab {
+  title: string;
+}
+
+@Component({
+  selector: 'app-project-diagram',
+  imports: [CommonModule, FormsModule, DiagramComponent],
+  templateUrl: './project-diagram.component.html',
+  styleUrls: ['./project-diagram.component.css']
+})
+export class ProjectDiagramComponent {
+  // Default tab list.
+  tabs: Tab[] = [
+    { title: 'Base Case' }
+  ];
+
+  // Active tab index.
+  activeTabIndex: number = 0;
+
+  // Controls display of the modal.
+  showModal: boolean = false;
+
+  // List of available tab names.
+  availableTabs: string[] = ['Heat', 'Freeze', 'Wildfire', 'Hurricane', 'Tornado', 'Earthquake', 'Custom'];
+
+  // Default selected tab name.
+  selectedTabName: string = this.availableTabs[0];
+
+  // Holds the custom tab name if the "Custom" option is selected.
+  customTabName: string = '';
+
+  // Open the modal.
+  openModal(): void {
+    this.showModal = true;
+    this.customTabName = '';
+    this.selectedTabName = this.availableTabs[0];
+  }
+
+  // Close the modal.
+  closeModal(): void {
+    this.showModal = false;
+  }
+
+  // Add a new tab from modal selection.
+  addTabFromModal(): void {
+    const tabTitle = this.selectedTabName === 'Custom'
+      ? (this.customTabName.trim() ? this.customTabName : 'Custom Case')
+      : this.selectedTabName;
+
+    this.tabs.push({
+      title: tabTitle
+    });
+    // Activate new tab.
+    this.activeTabIndex = this.tabs.length - 1;
+    // Close the modal.
+    this.closeModal();
+  }
+
+  // Activate a tab.
+  activateTab(index: number): void {
+    this.activeTabIndex = index;
+  }
+}