Everything works without phoenix

except dark theme

firebird-ng/src/app/components/auto-rotate/auto-rotate.component.html

@@ -0,0 +1,7 @@
+<app-custom-menu-toggle
+  tooltip="Auto rotate"
+  icon="rotate"
+  [active]="autoRotate"
+  (click)="toggleAutoRotate()"
+>
+</app-custom-menu-toggle>

firebird-ng/src/app/components/auto-rotate/auto-rotate.component.test.ts

@@ -0,0 +1,49 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AutoRotateComponent } from './auto-rotate.component';
+import { EventDisplayService } from '../../../services/event-display.service';
+import { PhoenixUIModule } from '../../phoenix-ui.module';
+
+describe('AutoRotateComponent', () => {
+  let component: AutoRotateComponent;
+  let fixture: ComponentFixture<AutoRotateComponent>;
+
+  const mockEventDisplay = {
+    getUIManager: jest.fn().mockReturnThis(),
+    setAutoRotate: jest.fn().mockReturnThis(),
+  };
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [PhoenixUIModule],
+      providers: [
+        {
+          provide: EventDisplayService,
+          useValue: mockEventDisplay,
+        },
+      ],
+      declarations: [AutoRotateComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AutoRotateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should toggle auto rotate', () => {
+    expect(component.autoRotate).toBe(false);
+
+    component.toggleAutoRotate();
+
+    expect(component.autoRotate).toBe(true);
+    expect(mockEventDisplay.getUIManager().setAutoRotate).toHaveBeenCalledWith(
+      component.autoRotate,
+    );
+  });
+});

firebird-ng/src/app/components/auto-rotate/auto-rotate.component.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import {EventDisplayService} from "phoenix-ui-components";
+import {MenuToggleComponent} from "../menu-toggle/menu-toggle.component";
+
+@Component({
+  selector: 'app-custom-auto-rotate',
+  templateUrl: './auto-rotate.component.html',
+  styleUrls: ['./auto-rotate.component.scss'],
+  imports: [
+    MenuToggleComponent
+  ],
+  standalone: true
+})
+export class AutoRotateComponent {
+  autoRotate = false;
+
+  constructor(private eventDisplay: EventDisplayService) {}
+
+  toggleAutoRotate() {
+    this.autoRotate = !this.autoRotate;
+    this.eventDisplay.getUIManager().setAutoRotate(this.autoRotate);
+  }
+}

firebird-ng/src/app/components/dark-theme/dark-theme.component.html

@@ -0,0 +1,7 @@
+<app-custom-menu-toggle
+  tooltip="Dark theme"
+  [active]="darkTheme"
+  icon="dark"
+  (click)="setDarkTheme()"
+>
+</app-custom-menu-toggle>

firebird-ng/src/app/components/dark-theme/dark-theme.component.test.ts

@@ -0,0 +1,51 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DarkThemeComponent } from './dark-theme.component';
+import { EventDisplayService } from '../../../services/event-display.service';
+import { PhoenixUIModule } from '../../phoenix-ui.module';
+
+describe('DarkThemeComponent', () => {
+  let component: DarkThemeComponent;
+  let fixture: ComponentFixture<DarkThemeComponent>;
+
+  const mockEventDisplay = {
+    getUIManager: jest.fn().mockReturnThis(),
+    getDarkTheme: jest.fn().mockReturnThis(),
+    setDarkTheme: jest.fn().mockReturnThis(),
+  };
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [PhoenixUIModule],
+      providers: [
+        {
+          provide: EventDisplayService,
+          useValue: mockEventDisplay,
+        },
+      ],
+      declarations: [DarkThemeComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DarkThemeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should initially get dark theme', () => {
+    jest.spyOn(mockEventDisplay, 'getDarkTheme');
+    component.ngOnInit();
+    expect(mockEventDisplay.getDarkTheme).toHaveBeenCalled();
+  });
+
+  it('should set/toggle dark theme', () => {
+    component.darkTheme = false;
+    component.setDarkTheme();
+    expect(component.darkTheme).toBe(true);
+  });
+});

firebird-ng/src/app/components/dark-theme/dark-theme.component.ts

@@ -0,0 +1,27 @@
+import { Component, type OnInit } from '@angular/core';
+import {EventDisplayService} from "phoenix-ui-components";
+import {MenuToggleComponent} from "../menu-toggle/menu-toggle.component";
+
+@Component({
+  selector: 'app-custom-dark-theme',
+  templateUrl: './dark-theme.component.html',
+  styleUrls: ['./dark-theme.component.scss'],
+  imports: [
+    MenuToggleComponent
+  ],
+  standalone: true
+})
+export class DarkThemeComponent implements OnInit {
+  darkTheme = false;
+
+  constructor(private eventDisplay: EventDisplayService) {}
+
+  ngOnInit(): void {
+    this.darkTheme = this.eventDisplay.getUIManager().getDarkTheme();
+  }
+
+  setDarkTheme() {
+    this.darkTheme = !this.darkTheme;
+    this.eventDisplay.getUIManager().setDarkTheme(this.darkTheme);
+  }
+}

firebird-ng/src/app/components/event-selector/event-selector.component.html

@@ -0,0 +1,12 @@
+<div
+  class="eventSelector mx-2"
+  *ngIf="events != null"
+  matTooltip="Event selector"
+  matTooltipPosition="above"
+>
+  <select name="event" (change)="changeEvent($event)">
+    <option *ngFor="let event of events" [value]="event">
+      {{ event }}
+    </option>
+  </select>
+</div>

firebird-ng/src/app/components/event-selector/event-selector.component.scss

@@ -0,0 +1,11 @@
+.eventSelector {
+  select {
+    width: 9rem;
+    padding: 5px 10px;
+    font-size: 12px;
+    border: 1px solid rgba(88, 88, 88, 0.08);
+    box-shadow: var(--phoenix-icon-shadow);
+    background-color: var(--phoenix-background-color-tertiary);
+    color: var(--phoenix-text-color-secondary);
+  }
+}

firebird-ng/src/app/components/event-selector/event-selector.component.test.ts

@@ -0,0 +1,56 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EventSelectorComponent } from './event-selector.component';
+import { EventDisplayService } from '../../../services/event-display.service';
+import { PhoenixUIModule } from '../../phoenix-ui.module';
+
+describe('EventSelectorComponent', () => {
+  let component: EventSelectorComponent;
+  let fixture: ComponentFixture<EventSelectorComponent>;
+
+  const mockEventDisplayService = {
+    listenToLoadedEventsChange: jest.fn(),
+    loadEvent: jest.fn(),
+  };
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [PhoenixUIModule],
+      providers: [
+        {
+          provide: EventDisplayService,
+          useValue: mockEventDisplayService,
+        },
+      ],
+      declarations: [EventSelectorComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EventSelectorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should initialize to listen to loaded events change', () => {
+    component.ngOnInit();
+
+    expect(
+      mockEventDisplayService.listenToLoadedEventsChange,
+    ).toHaveBeenCalled();
+  });
+
+  it('should change event through event display', () => {
+    const mockSelectEvent = { target: { value: 'TestEvent' } };
+
+    component.changeEvent(mockSelectEvent);
+
+    expect(mockEventDisplayService.loadEvent).toHaveBeenCalledWith(
+      mockSelectEvent.target.value,
+    );
+  });
+});

firebird-ng/src/app/components/event-selector/event-selector.component.ts

@@ -0,0 +1,34 @@
+import { Component, type OnInit } from '@angular/core';
+import {EventDisplayService} from "phoenix-ui-components";
+import {MatTooltip} from "@angular/material/tooltip";
+import {NgForOf, NgIf} from "@angular/common";
+
+
+@Component({
+  selector: 'app-custom-event-selector',
+  templateUrl: './event-selector.component.html',
+  styleUrls: ['./event-selector.component.scss'],
+  imports: [
+    MatTooltip,
+    NgForOf,
+    NgIf
+  ],
+  standalone: true
+})
+export class EventSelectorComponent implements OnInit {
+  // Array containing the keys of the multiple loaded events
+  events: string[] = [];
+
+  constructor(private eventDisplay: EventDisplayService) {}
+
+  ngOnInit() {
+    this.eventDisplay.listenToLoadedEventsChange(
+      (events) => (this.events = events),
+    );
+  }
+
+  changeEvent(selected: any) {
+    const value = selected.target.value;
+    this.eventDisplay.loadEvent(value);
+  }
+}

firebird-ng/src/app/components/main-view-toggle/main-view-toggle.component.html

@@ -0,0 +1,8 @@
+<app-custom-menu-toggle
+  [icon]="orthographicView ? 'perspective' : 'orthographic'"
+  [matTooltip]="
+    'Switch to ' + (orthographicView ? 'perspective' : 'orthographic') + ' view'
+  "
+  (click)="switchMainView()"
+>
+</app-custom-menu-toggle>

firebird-ng/src/app/components/main-view-toggle/main-view-toggle.component.test.ts

@@ -0,0 +1,49 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MainViewToggleComponent } from './main-view-toggle.component';
+import { EventDisplayService } from '../../../services/event-display.service';
+import { PhoenixUIModule } from '../../phoenix-ui.module';
+
+describe('MainViewToggleComponent', () => {
+  let component: MainViewToggleComponent;
+  let fixture: ComponentFixture<MainViewToggleComponent>;
+
+  const mockEventDisplay = {
+    getUIManager: jest.fn().mockReturnThis(),
+    toggleOrthographicView: jest.fn().mockReturnThis(),
+  };
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [PhoenixUIModule],
+      providers: [
+        {
+          provide: EventDisplayService,
+          useValue: mockEventDisplay,
+        },
+      ],
+      declarations: [MainViewToggleComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MainViewToggleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should switch main view', () => {
+    expect(component.orthographicView).toBe(false);
+
+    component.switchMainView();
+
+    expect(component.orthographicView).toBe(true);
+    expect(
+      mockEventDisplay.getUIManager().toggleOrthographicView,
+    ).toHaveBeenCalled();
+  });
+});

firebird-ng/src/app/components/main-view-toggle/main-view-toggle.component.ts

@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+import {EventDisplayService} from "phoenix-ui-components";
+import {MenuToggleComponent} from "../menu-toggle/menu-toggle.component";
+import {MatTooltip} from "@angular/material/tooltip";
+
+
+@Component({
+  selector: 'app-custom-main-view-toggle',
+  templateUrl: './main-view-toggle.component.html',
+  styleUrls: ['./main-view-toggle.component.scss'],
+  imports: [
+    MenuToggleComponent,
+    MatTooltip
+  ],
+  standalone: true
+})
+export class MainViewToggleComponent {
+  orthographicView: boolean = false;
+
+  constructor(private eventDisplay: EventDisplayService) {}
+
+  switchMainView() {
+    this.orthographicView = !this.orthographicView;
+    this.eventDisplay
+      .getUIManager()
+      .toggleOrthographicView(this.orthographicView);
+  }
+}