-
+
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
index 79c8665..aeb631d 100644
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@@ -1,10 +1,12 @@
import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
+import { provideAnimations } from '@angular/platform-browser/animations';
describe('AppComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [AppComponent],
+ providers: [provideAnimations()],
}).compileComponents();
});
@@ -14,16 +16,21 @@ describe('AppComponent', () => {
expect(app).toBeTruthy();
});
- it(`should have the 'Project-1' title`, () => {
+ it('should render tab', () => {
const fixture = TestBed.createComponent(AppComponent);
- const app = fixture.componentInstance;
- expect(app.title).toEqual('Project-1');
+ fixture.detectChanges();
+ const compiled = fixture.nativeElement as HTMLElement;
+ expect(compiled.querySelector('button')?.textContent).toContain(
+ 'Current Data'
+ );
});
- it('should render title', () => {
+ it('should render hidden "current-data-tab works!"', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.nativeElement as HTMLElement;
- expect(compiled.querySelector('h1')?.textContent).toContain('Hello, Project-1');
+ expect(compiled.querySelector('p')?.textContent).toEqual(
+ 'current-data-tab works!'
+ );
});
});
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index bcc6f16..91d4a38 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,13 +1,23 @@
import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+
+import { HeaderComponent } from './header/header.component';
+import { CurrentDataTabComponent } from './current-data-tab/current-data-tab.component';
+import { SamplesTabComponent } from './samples-tab/samples-tab.component';
+import { SettingsTabComponent } from './settings-tab/settings-tab.component';
@Component({
selector: 'app-root',
standalone: true,
- imports: [RouterOutlet],
+ imports: [
+ HeaderComponent,
+ CurrentDataTabComponent,
+ SamplesTabComponent,
+ SettingsTabComponent,
+ ],
templateUrl: './app.component.html',
- styleUrl: './app.component.css'
+ styleUrl: './app.component.css',
})
export class AppComponent {
- title = 'Project-1';
+ tabSelected: number = 0;
+ tabArray = ['Current Data', 'Sample Data', 'Settings'];
}
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index 6c6ef60..cb4b379 100644
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -1,8 +1,8 @@
import { ApplicationConfig } from '@angular/core';
-import { provideRouter } from '@angular/router';
-import { routes } from './app.routes';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { provideHttpClient } from '@angular/common/http';
export const appConfig: ApplicationConfig = {
- providers: [provideRouter(routes)]
+ providers: [provideAnimationsAsync(), provideHttpClient()],
};
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
deleted file mode 100644
index dc39edb..0000000
--- a/src/app/app.routes.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { Routes } from '@angular/router';
-
-export const routes: Routes = [];
diff --git a/src/app/consolodated-viewer/consolodated-viewer.component.html b/src/app/consolodated-viewer/consolodated-viewer.component.html
new file mode 100644
index 0000000..d2a8146
--- /dev/null
+++ b/src/app/consolodated-viewer/consolodated-viewer.component.html
@@ -0,0 +1,3 @@
+
diff --git a/src/app/consolodated-viewer/consolodated-viewer.component.spec.ts b/src/app/consolodated-viewer/consolodated-viewer.component.spec.ts
new file mode 100644
index 0000000..52ac437
--- /dev/null
+++ b/src/app/consolodated-viewer/consolodated-viewer.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConsolodatedViewerComponent } from './consolodated-viewer.component';
+
+describe('ConsolodatedViewerComponent', () => {
+ let component: ConsolodatedViewerComponent;
+ let fixture: ComponentFixture
;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [ConsolodatedViewerComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(ConsolodatedViewerComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/consolodated-viewer/consolodated-viewer.component.ts b/src/app/consolodated-viewer/consolodated-viewer.component.ts
new file mode 100644
index 0000000..b7bd796
--- /dev/null
+++ b/src/app/consolodated-viewer/consolodated-viewer.component.ts
@@ -0,0 +1,91 @@
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+import {
+ Component,
+ OnInit,
+ Input,
+ OnDestroy,
+ ViewChild,
+ ElementRef,
+} from '@angular/core';
+import { DataService } from './data.service';
+import {
+ Subscription,
+ interval,
+ concatMap,
+ timeout,
+ catchError,
+ of,
+ from,
+ filter,
+ mergeMap,
+ startWith,
+} from 'rxjs';
+import { XmlDomDisplayComponent } from '../xml-dom-display/xml-dom-display.component';
+
+@Component({
+ selector: 'app-consolodated-viewer',
+ standalone: true,
+ imports: [HttpClientModule, XmlDomDisplayComponent],
+ providers: [DataService, HttpClient],
+ templateUrl: './consolodated-viewer.component.html',
+})
+export class ConsolodatedViewerComponent implements OnInit, OnDestroy {
+ @ViewChild('hostElement') hostElement!: ElementRef;
+ @Input() sourceUrl!: string;
+ xmlDocument?: XMLDocument;
+ private intervalSub!: Subscription; // IDE may gray out
+
+ constructor(private dataService: DataService) {}
+
+ ngOnInit() {
+ this.intervalSub = interval(1000)
+ .pipe(
+ startWith(0),
+ // This use of concatMap will delay updates until
+ // any current downloads are already complete.
+ // After 30 seconds it will give up and try again.
+ concatMap(() =>
+ from(this.shouldDownload()).pipe(
+ // Convert the Promise to an Observable
+ filter(shouldDownload => shouldDownload), // Only proceed if shouldDownload is true
+ mergeMap(() =>
+ this.dataService.getData(this.sourceUrl).pipe(
+ timeout(30000),
+ catchError(() => {
+ console.warn('Request timed out, retrying...');
+ return of(null);
+ })
+ )
+ )
+ )
+ )
+ )
+ .subscribe(xml => {
+ if (xml) this.xmlDocument = xml;
+ });
+ }
+
+ ngOnDestroy() {
+ if (this.intervalSub) {
+ this.intervalSub.unsubscribe();
+ }
+ }
+
+ async shouldDownload(): Promise {
+ return this.xmlDocument == undefined || this.checkVisibility();
+ }
+
+ checkVisibility(): Promise {
+ return new Promise(resolve => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ resolve(entry.isIntersecting);
+ observer.disconnect(); // Clean up the observer once we have our result
+ },
+ { threshold: 0.1 }
+ );
+
+ observer.observe(this.hostElement.nativeElement);
+ });
+ }
+}
diff --git a/src/app/consolodated-viewer/data.service.spec.ts b/src/app/consolodated-viewer/data.service.spec.ts
new file mode 100644
index 0000000..25e91e5
--- /dev/null
+++ b/src/app/consolodated-viewer/data.service.spec.ts
@@ -0,0 +1,19 @@
+import { TestBed } from '@angular/core/testing';
+import { HttpClientModule } from '@angular/common/http';
+
+import { DataService } from './data.service';
+
+describe('DataService', () => {
+ let service: DataService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [HttpClientModule],
+ });
+ service = TestBed.inject(DataService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/src/app/consolodated-viewer/data.service.ts b/src/app/consolodated-viewer/data.service.ts
new file mode 100644
index 0000000..3e43b97
--- /dev/null
+++ b/src/app/consolodated-viewer/data.service.ts
@@ -0,0 +1,38 @@
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { catchError, map, throwError } from 'rxjs';
+
+@Injectable({
+ providedIn: 'root',
+})
+export class DataService {
+ constructor(private httpClient: HttpClient) {}
+
+ getData(sourceUrl: string) {
+ return this.httpClient.get(sourceUrl, { responseType: 'text' }).pipe(
+ map((response: string) => this.parseXmlToDom(response)),
+ catchError(this.handleError)
+ );
+ }
+
+ private parseXmlToDom(xmlData: string): XMLDocument {
+ const parser: DOMParser = new DOMParser();
+ return parser.parseFromString(xmlData, 'text/xml');
+ }
+
+ private handleError(error: HttpErrorResponse) {
+ if (error.error instanceof ErrorEvent) {
+ // Client-side error
+ console.error('An error occurred:', error.error.message);
+ } else {
+ // Server-side error
+ console.error(
+ `Backend returned code ${error.status}, ` + `body was: ${error.error}`
+ );
+ }
+ // Return an observable with a user-facing error message
+ return throwError(() =>
+ Error('Something bad happened; please try again later.')
+ );
+ }
+}
diff --git a/src/app/current-data-tab/current-data-tab.component.html b/src/app/current-data-tab/current-data-tab.component.html
new file mode 100644
index 0000000..1d14240
--- /dev/null
+++ b/src/app/current-data-tab/current-data-tab.component.html
@@ -0,0 +1,3 @@
+
+current-data-tab works!
+
diff --git a/src/app/current-data-tab/current-data-tab.component.spec.ts b/src/app/current-data-tab/current-data-tab.component.spec.ts
new file mode 100644
index 0000000..635e6dd
--- /dev/null
+++ b/src/app/current-data-tab/current-data-tab.component.spec.ts
@@ -0,0 +1,32 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CurrentDataTabComponent } from './current-data-tab.component';
+
+describe('CurrentDataTabComponent', () => {
+ let component: CurrentDataTabComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [CurrentDataTabComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(CurrentDataTabComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should render hidden "current-data-tab works!"', () => {
+ const fixture = TestBed.createComponent(CurrentDataTabComponent);
+ fixture.detectChanges();
+ const compiled = fixture.nativeElement as HTMLElement;
+ expect(compiled.querySelector('p')?.textContent).toEqual(
+ 'current-data-tab works!'
+ );
+ expect(compiled.querySelector('p')?.hasAttribute('hidden')).toBeTruthy();
+ });
+});
diff --git a/src/app/current-data-tab/current-data-tab.component.ts b/src/app/current-data-tab/current-data-tab.component.ts
new file mode 100644
index 0000000..2fece5d
--- /dev/null
+++ b/src/app/current-data-tab/current-data-tab.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+import { ConsolodatedViewerComponent } from '../consolodated-viewer/consolodated-viewer.component';
+
+@Component({
+ selector: 'app-current-data-tab',
+ standalone: true,
+ imports: [ConsolodatedViewerComponent],
+ templateUrl: './current-data-tab.component.html',
+})
+export class CurrentDataTabComponent {}
diff --git a/src/app/header/header.component.css b/src/app/header/header.component.css
new file mode 100644
index 0000000..69531c1
--- /dev/null
+++ b/src/app/header/header.component.css
@@ -0,0 +1,20 @@
+.bg-main {
+ background-color: antiquewhite;
+ padding: 20px;
+}
+.btn-header {
+ background: transparent;
+ border: none;
+ color: black;
+ padding: 5px 15px;
+ border-radius: 10px;
+}
+.btn-header:hover {
+ background: rgb(168, 145, 145);
+ color: rgb(69, 55, 55);
+}
+
+.active {
+ background: rgb(168, 145, 145);
+ color: rgb(69, 55, 55);
+}
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
new file mode 100644
index 0000000..7e47e57
--- /dev/null
+++ b/src/app/header/header.component.html
@@ -0,0 +1,14 @@
+
+
+ @for (tab of tabArray; track tab) {
+
+
+
+ }
+
+
samples-tab works!
+
diff --git a/src/app/samples-tab/samples-tab.component.spec.ts b/src/app/samples-tab/samples-tab.component.spec.ts
new file mode 100644
index 0000000..5ae7589
--- /dev/null
+++ b/src/app/samples-tab/samples-tab.component.spec.ts
@@ -0,0 +1,32 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SamplesTabComponent } from './samples-tab.component';
+
+describe('SamplesTabComponent', () => {
+ let component: SamplesTabComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [SamplesTabComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(SamplesTabComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should render hidden "samples-tab works!"', () => {
+ const fixture = TestBed.createComponent(SamplesTabComponent);
+ fixture.detectChanges();
+ const compiled = fixture.nativeElement as HTMLElement;
+ expect(compiled.querySelector('p')?.textContent).toEqual(
+ 'samples-tab works!'
+ );
+ expect(compiled.querySelector('p')?.hasAttribute('hidden')).toBeTruthy();
+ });
+});
diff --git a/src/app/samples-tab/samples-tab.component.ts b/src/app/samples-tab/samples-tab.component.ts
new file mode 100644
index 0000000..bc6da9e
--- /dev/null
+++ b/src/app/samples-tab/samples-tab.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+import { ConsolodatedViewerComponent } from '../consolodated-viewer/consolodated-viewer.component';
+
+@Component({
+ selector: 'app-samples-tab',
+ standalone: true,
+ imports: [ConsolodatedViewerComponent],
+ templateUrl: './samples-tab.component.html',
+})
+export class SamplesTabComponent {}
diff --git a/src/app/settings-tab/settings-tab.component.html b/src/app/settings-tab/settings-tab.component.html
new file mode 100644
index 0000000..e2e8de4
--- /dev/null
+++ b/src/app/settings-tab/settings-tab.component.html
@@ -0,0 +1 @@
+settings-tab works!
diff --git a/src/app/settings-tab/settings-tab.component.spec.ts b/src/app/settings-tab/settings-tab.component.spec.ts
new file mode 100644
index 0000000..310677e
--- /dev/null
+++ b/src/app/settings-tab/settings-tab.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SettingsTabComponent } from './settings-tab.component';
+
+describe('SettingsTabComponent', () => {
+ let component: SettingsTabComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [SettingsTabComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(SettingsTabComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/settings-tab/settings-tab.component.ts b/src/app/settings-tab/settings-tab.component.ts
new file mode 100644
index 0000000..3db2e2b
--- /dev/null
+++ b/src/app/settings-tab/settings-tab.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-settings-tab',
+ standalone: true,
+ imports: [],
+ templateUrl: './settings-tab.component.html',
+})
+export class SettingsTabComponent {}
diff --git a/src/app/sms-interfaces/sms-interfaces.examples.ts b/src/app/sms-interfaces/sms-interfaces.examples.ts
new file mode 100644
index 0000000..024c5ec
--- /dev/null
+++ b/src/app/sms-interfaces/sms-interfaces.examples.ts
@@ -0,0 +1,98 @@
+// Example instances for testing purposes
+
+import {
+ SMSDataItemInterface,
+ SMSComponentInterface,
+ SMSDeviceInterface,
+ SMSHeaderInterface,
+ SMSProcessedFileInterface,
+} from './sms-interfaces';
+
+// Example SMSDataItemInterface instances
+export const smsDataItem1: SMSDataItemInterface = new SMSDataItemInterface(
+ '2024-02-15T12:00:00',
+ 'Type1',
+ 'Sub Type1',
+ 'Example Name1',
+ '123456',
+ '1',
+ 'Example Value1'
+);
+
+export const smsDataItem2: SMSDataItemInterface = new SMSDataItemInterface(
+ '2024-02-15T12:00:00',
+ 'Type2',
+ 'Sub Type2',
+ undefined, // setting name as undefined
+ '123457',
+ '2',
+ 'Example Value2'
+);
+
+// Example SMSComponentInterface instances
+export const smsComponent1: SMSComponentInterface = {
+ componentId: 'component123',
+ component: 'Example Component1',
+ name: 'Component Name1',
+ categories: [
+ {
+ name: 'Category Name1',
+ values: [smsDataItem1],
+ },
+ ],
+};
+
+export const smsComponent2: SMSComponentInterface = {
+ componentId: 'component456',
+ component: 'Example Component2',
+ name: 'Component Name2',
+ categories: [
+ {
+ name: 'Category Name2',
+ values: [smsDataItem2],
+ },
+ {
+ name: 'Category Name3',
+ values: [],
+ },
+ ],
+};
+
+// Example SMSDeviceInterface instances
+export const smsDevice1: SMSDeviceInterface = {
+ name: 'Device Name1',
+ uuid: 'device123',
+ components: [smsComponent1],
+};
+
+export const smsDevice2: SMSDeviceInterface = {
+ name: 'Device Name2',
+ uuid: 'device456',
+ components: [smsComponent2],
+};
+
+// Example SMSHeaderInterface instances
+export const smsHeader1: SMSHeaderInterface = {
+ data: [
+ { name: 'HeaderName1', value: 'HeaderValue1' },
+ { name: 'HeaderName2', value: 'HeaderValue2' },
+ ],
+};
+
+export const smsHeader2: SMSHeaderInterface = {
+ data: [
+ { name: 'HeaderName3', value: 'HeaderValue3' },
+ { name: 'HeaderName4', value: 'HeaderValue4' },
+ ],
+};
+
+// Example SMSProcessedFileInterface instances
+export const smsProcessedFile1: SMSProcessedFileInterface = {
+ header: smsHeader1,
+ devices: [smsDevice1],
+};
+
+export const smsProcessedFile2: SMSProcessedFileInterface = {
+ header: smsHeader2,
+ devices: [smsDevice2],
+};
diff --git a/src/app/sms-interfaces/sms-interfaces.spec.ts b/src/app/sms-interfaces/sms-interfaces.spec.ts
new file mode 100644
index 0000000..559f1d6
--- /dev/null
+++ b/src/app/sms-interfaces/sms-interfaces.spec.ts
@@ -0,0 +1,151 @@
+import { SMSDataItemInterface } from './sms-interfaces';
+
+describe('SMSDataItemInterface', () => {
+ it('should create an empty instance', () => {
+ expect(new SMSDataItemInterface()).toBeTruthy();
+ });
+
+ it('should create a partly empty instance', () => {
+ const instance = new SMSDataItemInterface('timestamp');
+ expect(instance).toBeTruthy();
+ expect(instance.timestamp).toEqual('timestamp');
+ expect(instance.name).toEqual(undefined);
+ });
+
+ it('should convert a partly empty instance to an array', () => {
+ const instance = new SMSDataItemInterface('timestamp');
+ const arr = instance.getFieldValues();
+ expect(arr.length).toEqual(7);
+ expect(arr[0]).toEqual('timestamp');
+ for (let i = 1; i < arr.length; i++) {
+ expect(arr[i]).toEqual('');
+ }
+ });
+
+ it('should have correct field names defined', () => {
+ expect(SMSDataItemInterface.fieldNames).toEqual([
+ 'Timestamp',
+ 'Type',
+ 'Sub Type',
+ 'Name',
+ 'Id',
+ 'Sequence',
+ 'Value',
+ ]);
+ });
+
+ describe('strictCheck', () => {
+ let instance: SMSDataItemInterface;
+
+ beforeEach(() => {
+ instance = new SMSDataItemInterface(
+ '2023-05-04T16:20:07.789848Z', // Timestamp
+ 'type', // Type
+ undefined, // Sub Type
+ '', // Name
+ 'noWhitespace', // Id
+ '123', // Sequence
+ '' // Value
+ );
+ });
+
+ it('should return false if timestamp is missing or invalid', () => {
+ expect(instance.strictCheck()).toBeTrue();
+
+ instance.timestamp = 'invalid-format';
+ expect(instance.strictCheck()).toBeFalse();
+
+ instance.timestamp = undefined;
+ expect(instance.strictCheck()).toBeFalse();
+ });
+
+ it('should return false if type is missing', () => {
+ expect(instance.strictCheck()).toBeTrue();
+
+ instance.type = undefined;
+ expect(instance.strictCheck()).toBeFalse();
+ });
+
+ it('should return false if id is missing or contains whitespace', () => {
+ expect(instance.strictCheck()).toBeTrue();
+
+ instance.id = 'has whitespace';
+ expect(instance.strictCheck()).toBeFalse();
+
+ instance.id = undefined;
+ expect(instance.strictCheck()).toBeFalse();
+ });
+
+ it('should return false if sequence is missing or not a decimal integer', () => {
+ expect(instance.strictCheck()).toBeTrue();
+
+ instance.sequence = 'invalid';
+ expect(instance.strictCheck()).toBeFalse();
+
+ instance.sequence = undefined;
+ expect(instance.strictCheck()).toBeFalse();
+ });
+
+ it('should return true if optional parameters are undefined or empty string', () => {
+ expect(instance.strictCheck()).toBeTrue();
+
+ instance.subType = 'someSubType';
+ expect(instance.strictCheck()).toBeTrue();
+
+ instance.name = 'someName';
+ expect(instance.strictCheck()).toBeTrue();
+
+ instance.value = 'someValue';
+ expect(instance.strictCheck()).toBeTrue();
+ });
+ });
+
+ describe('fromElement', () => {
+ it('should parse AssetChanged element correctly', () => {
+ const xml = `UNAVAILABLE`;
+ const parser = new DOMParser();
+ const xmlDoc = parser.parseFromString(xml, 'application/xml');
+ const assetChangedElement = xmlDoc.documentElement;
+
+ const result = SMSDataItemInterface.fromElement(assetChangedElement);
+
+ expect(result).toEqual(jasmine.any(SMSDataItemInterface));
+ expect(result.timestamp).toEqual('2024-02-13T01:00:05.089753');
+ expect(result.type).toEqual('AssetChanged');
+ expect(result.sequence).toEqual('248496550');
+ expect(result.value).toEqual('UNAVAILABLE');
+ });
+
+ it('should parse Position element correctly', () => {
+ const xml = `20.22078`;
+ const parser = new DOMParser();
+ const xmlDoc = parser.parseFromString(xml, 'application/xml');
+ const positionElement = xmlDoc.documentElement;
+
+ const result = SMSDataItemInterface.fromElement(positionElement);
+
+ expect(result).toEqual(jasmine.any(SMSDataItemInterface));
+ expect(result.timestamp).toEqual('2024-02-13T21:16:19.059416');
+ expect(result.type).toEqual('Position');
+ expect(result.sequence).toEqual('249193105');
+ expect(result.subType).toEqual('ACTUAL');
+ expect(result.value).toEqual('20.22078');
+ });
+
+ it('should parse Normal element correctly', () => {
+ const xml = ``;
+ const parser = new DOMParser();
+ const xmlDoc = parser.parseFromString(xml, 'application/xml');
+ const normalElement = xmlDoc.documentElement;
+
+ const result = SMSDataItemInterface.fromElement(normalElement);
+
+ expect(result).toEqual(jasmine.any(SMSDataItemInterface));
+ expect(result.timestamp).toEqual('2024-02-13T20:43:22.139003');
+ expect(result.type).toEqual('Normal');
+ expect(result.sequence).toEqual('249169200');
+ expect(result.name).toEqual('coolant_pres');
+ expect(result.value).toBeUndefined(); // Value is not provided in the XML
+ });
+ });
+});
diff --git a/src/app/sms-interfaces/sms-interfaces.ts b/src/app/sms-interfaces/sms-interfaces.ts
new file mode 100644
index 0000000..31ea9ff
--- /dev/null
+++ b/src/app/sms-interfaces/sms-interfaces.ts
@@ -0,0 +1,123 @@
+/* Our XML input is expected to contain a header with various
+metadata, a list of devices with a bit of metadata
+and a list of components each of wich contain even more
+data. We will need to be able to select and display
+separate devices as well as separate components. Optionally,
+we can make an angular component that displays the header data. */
+
+export class SMSDataItemInterface {
+ timestamp?: string;
+ type?: string;
+ subType?: string;
+ name?: string;
+ id?: string;
+ sequence?: string;
+ value?: string;
+
+ constructor(
+ timestamp?: string,
+ type?: string, // The field name of the data item
+ subType?: string,
+ name?: string,
+ id?: string,
+ sequence?: string,
+ value?: string // From the XML value of the DataItem
+ ) {
+ this.timestamp = timestamp;
+ this.type = type;
+ this.subType = subType;
+ this.name = name;
+ this.id = id;
+ this.sequence = sequence;
+ this.value = value;
+ }
+
+ // Takes a DOM element and interprets it as a DataItem
+ static fromElement(node: Element) {
+ const out = new this();
+
+ out.timestamp = node.getAttribute('timestamp') ?? undefined;
+ out.subType = node.getAttribute('subType') ?? undefined;
+ out.name = node.getAttribute('name') ?? undefined;
+ out.id = node.getAttribute('id') ?? undefined;
+ out.sequence = node.getAttribute('sequence') ?? undefined;
+
+ out.type = node.tagName; // correct case only for XML elements not HTML
+ out.value = node.textContent || undefined;
+
+ return out;
+ }
+
+ static readonly fieldNames = [
+ 'Timestamp',
+ 'Type',
+ 'Sub Type',
+ 'Name',
+ 'Id',
+ 'Sequence',
+ 'Value',
+ ];
+
+ // for convenience and so changes here are reflected elsewhere
+ getFieldValues(): string[] {
+ return [
+ this.timestamp || '',
+ this.type || '',
+ this.subType || '',
+ this.name || '',
+ this.id || '',
+ this.sequence || '',
+ this.value || '',
+ ];
+ }
+
+ // This makes sure the object is consistent with the inputs we have seen so far.
+ // Returning false doesn't necessarily mean the object is invalid.
+ strictCheck(): boolean {
+ // It should have a timestamp with a certain format
+ const iso8601Regex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d+Z$/;
+ if (!this.timestamp || !iso8601Regex.test(this.timestamp)) return false;
+
+ // It should have a sequence number in decimal form
+ if (!this.sequence || !/^\d+$/.test(this.sequence)) return false;
+
+ // It should have non-empty id without any white space.
+ if (!this.id || !/^\S+$/.test(this.id)) return false;
+
+ // It should have a non-empty type
+ if (!this.type) return false;
+
+ return true;
+ }
+}
+
+export interface SMSComponentInterface {
+ componentId: string;
+ component?: string;
+ name?: string;
+
+ categories: {
+ name: string;
+ values: SMSDataItemInterface[];
+ }[];
+}
+
+export interface SMSDeviceInterface {
+ name?: string;
+ uuid?: string;
+
+ components: SMSComponentInterface[];
+}
+
+// Nothing special, just arbitrary XML data
+export interface SMSHeaderInterface {
+ data: {
+ name: string;
+ value: string;
+ }[];
+}
+
+export interface SMSProcessedFileInterface {
+ header: SMSHeaderInterface;
+ devices: SMSDeviceInterface[];
+}
diff --git a/src/app/xml-dom-display/xml-dom-display.component.css b/src/app/xml-dom-display/xml-dom-display.component.css
new file mode 100644
index 0000000..5f14a4f
--- /dev/null
+++ b/src/app/xml-dom-display/xml-dom-display.component.css
@@ -0,0 +1,50 @@
+.main-head {
+ background: #73737840;
+ justify-content: center;
+ text-align: center;
+ padding: 15px 0px;
+}
+.deviceName {
+ color: whitesmoke;
+}
+.componentName {
+ color: whitesmoke;
+}
+.sideBar {
+ background: #e4e4e4;
+ padding: 10px 10px;
+ text-align: center;
+}
+.deviceNameSideBar {
+ background: #548a91;
+ padding: 10px 0px;
+ color: #f0f0f0;
+}
+li {
+ list-style-type: none;
+ cursor: pointer;
+ padding: 5px 0px;
+}
+
+li:hover {
+ list-style-type: none;
+ cursor: pointer;
+ background: #73737840;
+ padding: 10px 0px;
+}
+ul,
+ol {
+ list-style-type: none;
+ padding: 0;
+ margin: 10px 0px;
+}
+
+.commonP {
+ padding: 20px;
+}
+.commonH {
+ text-align: center;
+ background: #548a91;
+ padding: 10px;
+ color: aliceblue;
+}
diff --git a/src/app/xml-dom-display/xml-dom-display.component.html b/src/app/xml-dom-display/xml-dom-display.component.html
new file mode 100644
index 0000000..21f6a10
--- /dev/null
+++ b/src/app/xml-dom-display/xml-dom-display.component.html
@@ -0,0 +1,74 @@
+
+
+
+
+
+
+ @if (selectedDeviceName && (selectedComponentName?.length ?? 0) > 0) {
+
+
+
+ Device Name:
+ {{ selectedDeviceName }}
+
+
+
+
+ Component Name:
+ {{ selectedComponentName }}
+
+
+
+ }
+
+ @for (
+ categoryIterable of [
+ selectedComponentEventsIterate,
+ selectedComponentSamplesIterate,
+ selectedComponentConditionIterate
+ ];
+ track categoryIterable
+ ) {
+ @if (categoryIterable && categoryIterable.length > 0) {
+
+
+ {{ ['Events', 'Samples', 'Condition'][$index] }}
+
+ @for (dataItem of categoryIterable; track dataItem) {
+
+
+ @for (
+ attributePair of dataItem.getFieldValues();
+ track attributePair
+ ) {
+
+
+ | {{ SMSDataItemInterface.fieldNames[$index] }} |
+ {{ attributePair }} |
+
+
+ }
+
+ }
+
+ }
+ }
+
+
+