Another settings view

src/app/current-data-tab/current-data-tab.component.html

@@ -1,2 +1,2 @@
 <p>current-data-tab works!</p>
-<app-xml-dom-display [xmlDocument]="myXmlDocument"></app-xml-dom-display>
+<app-xml-dom-display [xmlDocument]="myXmlDocument" />

src/app/samples-tab/samples-tab.component.html

@@ -1,2 +1,2 @@
 <p>samples-tab works!</p>
-<app-component-display [component]="exampleComponent"></app-component-display>
+<app-component-display [component]="exampleComponent" />

src/app/settings-tab/settings-tab.component.html

@@ -1 +1,2 @@
 <p>settings-tab works!</p>
+<app-template-driven-settings />

src/app/settings-tab/settings-tab.component.spec.ts

@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideAnimations } from '@angular/platform-browser/animations';
 
 import { SettingsTabComponent } from './settings-tab.component';
 
@@ -9,6 +10,7 @@ describe('SettingsTabComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [SettingsTabComponent],
+      providers: [provideAnimations()],
     }).compileComponents();
 
     fixture = TestBed.createComponent(SettingsTabComponent);

src/app/settings-tab/settings-tab.component.ts

@@ -1,9 +1,11 @@
 import { Component } from '@angular/core';
 
+import { TemplateDrivenSettingsComponent } from './template-driven-settings/template-driven-settings.component';
+
 @Component({
   selector: 'app-settings-tab',
   standalone: true,
-  imports: [],
+  imports: [TemplateDrivenSettingsComponent],
   templateUrl: './settings-tab.component.html',
 })
 export class SettingsTabComponent {}

src/app/settings-tab/template-driven-settings/template-driven-settings.component.html

@@ -0,0 +1,46 @@
+<mat-card>
+  <mat-card-title>Settings</mat-card-title>
+  <mat-card-content>
+    <form>
+      <!-- Base URL Setting -->
+      <mat-form-field appearance="fill">
+        <mat-label>Base URL</mat-label>
+        <input
+          matInput
+          placeholder="https://smstestbed.nist.gov/vds/"
+          [(ngModel)]="baseUrl"
+          name="baseUrl" />
+        <button
+          matSuffix
+          mat-icon-button
+          aria-label="Clear"
+          (click)="restoreDefault()">
+          <mat-icon>restore</mat-icon>
+        </button>
+      </mat-form-field>
+      <br />
+
+      <!-- Number of Samples Setting -->
+      <mat-form-field appearance="fill">
+        <mat-label>Number of Samples</mat-label>
+        <input
+          matInput
+          type="number"
+          placeholder="Number of Samples"
+          min="0"
+          [(ngModel)]="numberOfSamples"
+          name="numberOfSamples" />
+      </mat-form-field>
+      <br />
+
+      <!-- Auto Refresh Setting -->
+      <mat-slide-toggle [(ngModel)]="autoRefresh" name="autoRefresh"
+        >Enable Auto Refresh</mat-slide-toggle
+      >
+    </form>
+  </mat-card-content>
+  <mat-card-actions>
+    <button mat-button>Cancel</button>
+    <button mat-raised-button color="primary">Save</button>
+  </mat-card-actions>
+</mat-card>

src/app/settings-tab/template-driven-settings/template-driven-settings.component.spec.ts

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

src/app/settings-tab/template-driven-settings/template-driven-settings.component.ts

@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatCardModule } from '@angular/material/card';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+
+@Component({
+  selector: 'app-template-driven-settings',
+  standalone: true,
+  imports: [
+    FormsModule,
+    MatCardModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSlideToggleModule,
+    MatButtonModule,
+    MatIconModule,
+  ],
+  templateUrl: './template-driven-settings.component.html',
+})
+export class TemplateDrivenSettingsComponent {
+  baseUrl: string = ''; // Initialize with actual default or fetched value
+  numberOfSamples: number = 100; // Default or fetched value
+  autoRefresh: boolean = true; // Default or fetched value
+  defaultBaseUrl: string = '/vds'; // Your default Base URL
+
+  restoreDefault(): void {
+    this.baseUrl = this.defaultBaseUrl;
+  }
+}

src/app/xml-dom-display/xml-dom-display.component.html

@@ -1,4 +1,4 @@
 <p>xml-dom-display works!</p>
 <div *ngIf="processedData">
-  <app-component-display [component]="processedData"></app-component-display>
+  <app-component-display [component]="processedData" />
 </div>