Merge pull request #259 from Northeastern-Electric-Racing/#190-inject…

…()-based-dependency-injection

#190 - use inject() method

angular-client/src/app/app-sidebar/app-sidebar.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { Router } from '@angular/router';
 import SidebarService from 'src/services/sidebar.service';
 
@@ -8,13 +8,10 @@ import SidebarService from 'src/services/sidebar.service';
   styleUrls: ['./app-sidebar.component.css']
 })
 export default class AppSidebarComponent implements OnInit {
+  private router = inject(Router);
+  private sidebarService = inject(SidebarService);
   sidebarVisible = false;
 
-  constructor(
-    private router: Router,
-    private sidebarService: SidebarService
-  ) {}
-
   ngOnInit(): void {
     this.sidebarService.isOpen.subscribe((isOpen) => {
       this.sidebarVisible = isOpen;

angular-client/src/app/context/app-context.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { io } from 'socket.io-client';
 import { environment } from 'src/environment/environment';
 import SocketService from 'src/services/socket.service';
@@ -12,12 +12,11 @@ import Storage from 'src/services/storage.service';
   templateUrl: './app-context.component.html'
 })
 export default class AppContextComponent implements OnInit {
+  private storage = inject(Storage);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   socket = io((environment as any).url || 'http://localhost:8000');
   socketService = new SocketService(this.socket);
 
-  constructor(private storage: Storage) {}
-
   ngOnInit(): void {
     this.socketService.receiveData(this.storage);
   }

angular-client/src/components/acceleration-graphs/acceleration-graphs.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
 import { decimalPipe } from 'src/utils/pipes.utils';
@@ -16,6 +16,7 @@ import { GraphData } from 'src/utils/types.utils';
   styleUrls: ['./acceleration-graphs.component.css']
 })
 export class AccelerationGraphsComponent implements OnInit {
+  private storage = inject(Storage);
   xData: GraphData[] = [];
   yData: GraphData[] = [];
 
@@ -24,8 +25,6 @@ export class AccelerationGraphsComponent implements OnInit {
 
   maxDataPoints = 400;
 
-  constructor(private storage: Storage) {}
-
   ngOnInit() {
     this.storage.get(IdentifierDataType.XYZAccel).subscribe((value) => {
       const x1 = decimalPipe(value.values[0]);

angular-client/src/components/acceleration-over-time-display/acceleration-over-time-display.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
 import { GraphData } from 'src/utils/types.utils';
@@ -9,10 +9,9 @@ import { GraphData } from 'src/utils/types.utils';
   styleUrls: ['./acceleration-over-time-display.component.css']
 })
 export default class AccelerationOverTimeDisplayComponent implements OnInit {
+  private storage = inject(Storage);
   data: GraphData[] = [];
 
-  constructor(private storage: Storage) {}
-
   ngOnInit() {
     this.storage.get(IdentifierDataType.ACCELERATION).subscribe((value) => {
       this.data.push({ x: new Date().getTime(), y: parseInt(value.values[0]) });

angular-client/src/components/brake-pressure-display/brake-pressure-display.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
 
@@ -8,8 +8,8 @@ import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type'
   styleUrls: ['./brake-pressure-display.component.css']
 })
 export default class BrakePressureDisplayComponent implements OnInit {
+  private storage = inject(Storage);
   brakePressure: number = 0;
-  constructor(private storage: Storage) {}
 
   ngOnInit() {
     this.storage.get(IdentifierDataType.BRAKE_PRESSURE).subscribe((value) => {

angular-client/src/components/carousel/carousel.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { Router } from '@angular/router';
 import { CarouselPageEvent } from 'primeng/carousel';
 import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
@@ -15,22 +15,21 @@ export interface DialogData {
   styleUrls: ['carousel.component.css']
 })
 export class CarouselComponent {
+  public dialogRef = inject(DynamicDialogRef);
+  public config = inject(DynamicDialogConfig);
+  public router = inject(Router);
   runs: Run[];
   currentIndex: number = 0;
   previousIndex: number = 0;
   selectRun: (run: Run) => void = () => {
     this.dialogRef.close();
   };
 
-  constructor(
-    public dialogRef: DynamicDialogRef,
-    public config: DynamicDialogConfig,
-    public router: Router
-  ) {
-    this.runs = config.data.runs;
+  constructor() {
+    this.runs = this.config.data.runs;
     this.selectRun = (run: Run) => {
       this.dialogRef.close();
-      config.data.selectRun(run);
+      this.config.data.selectRun(run);
     };
   }
 

angular-client/src/components/current-total-timer/current-total-timer.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 
 @Component({
@@ -7,11 +7,10 @@ import Storage from 'src/services/storage.service';
   styleUrls: ['./current-total-timer.component.css']
 })
 export default class CurrentTotalTimerComponent {
+  private storage = inject(Storage);
   @Input() currentTime: number = 0;
   @Input() totalTime: number = 0;
 
-  constructor(private storage: Storage) {}
-
   getCurrentTime() {
     return this.formatTime(this.currentTime);
   }

angular-client/src/components/double-line-graph/double-line-graph.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, inject } from '@angular/core';
 import ApexCharts from 'apexcharts';
 import {
   ApexAxisChartSeries,
@@ -39,6 +39,7 @@ type ChartOptions = {
   providers: [DialogService]
 })
 export class DoubleLineGraphComponent implements OnInit {
+  public dialogService = inject(DialogService);
   @Input() data1!: GraphData[];
   @Input() color1!: string; // Must be hex
   @Input() title1?: string;
@@ -54,9 +55,6 @@ export class DoubleLineGraphComponent implements OnInit {
   timeDiffMs: number = 0;
   isSliding: boolean = false;
   timeRangeMs: number = 120000; // 2 minutes in ms
-
-  constructor(public dialogService: DialogService) {}
-
   openDialog = () => {
     this.dialogService.open(GraphDialogComponent, {
       header: this.header,

angular-client/src/components/driver-component/driver-component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
 
@@ -8,9 +8,9 @@ import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type'
   styleUrls: ['./driver-component.css']
 })
 export class DriverComponent implements OnInit {
+  private storage = inject(Storage);
   driver: string = 'No Driver';
 
-  constructor(private storage: Storage) {}
   ngOnInit() {
     this.storage.get(IdentifierDataType.DRIVER).subscribe((value) => {
       [this.driver] = value.values || ['No Driver'];

angular-client/src/components/graph-dialog/graph-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, inject } from '@angular/core';
 import { DialogService, DynamicDialogConfig } from 'primeng/dynamicdialog';
 import { GraphData } from 'src/utils/types.utils';
 
@@ -8,15 +8,14 @@ import { GraphData } from 'src/utils/types.utils';
   providers: [DialogService]
 })
 export class GraphDialogComponent {
+  public dialogService = inject(DialogService);
+  public config = inject(DynamicDialogConfig);
   @Input() data!: GraphData[];
   @Input() color!: string;
   @Input() title!: string;
   @Input() graphContainerId!: string;
 
-  constructor(
-    public dialogService: DialogService,
-    public config: DynamicDialogConfig
-  ) {
+  constructor() {
     this.data = this.config.data.data;
     this.color = this.config.data.color;
     this.title = this.config.data.title;

angular-client/src/components/graph/graph.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, inject } from '@angular/core';
 import ApexCharts from 'apexcharts';
 import { ApexXAxis, ApexDataLabels, ApexChart, ApexMarkers, ApexGrid, ApexTooltip, ApexFill } from 'ng-apexcharts';
 import { DialogService } from 'primeng/dynamicdialog';
@@ -24,6 +24,7 @@ type ChartOptions = {
   providers: [DialogService]
 })
 export class GraphComponent implements OnInit {
+  public dialogService = inject(DialogService);
   @Input() data!: GraphData[];
   @Input() color!: string; // Must be hex
   @Input() title?: string;
@@ -34,9 +35,6 @@ export class GraphComponent implements OnInit {
   timeDiffMs: number = 0;
   isSliding: boolean = false;
   timeRangeMs: number = 120000; // 2 minutes in ms
-
-  constructor(public dialogService: DialogService) {}
-
   openDialog = () => {
     this.dialogService.open(GraphDialogComponent, {
       header: this.title,

angular-client/src/components/info-graph/info-graph.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, inject } from '@angular/core';
 import { DialogService } from 'primeng/dynamicdialog';
 import { GraphDialogComponent } from '../graph-dialog/graph-dialog.component';
 import { GraphData } from 'src/utils/types.utils';
@@ -10,15 +10,13 @@ import { GraphData } from 'src/utils/types.utils';
   providers: [DialogService]
 })
 export class InfoGraphComponent {
+  public dialogService = inject(DialogService);
   @Input() data!: GraphData[];
   @Input() icon!: string;
   @Input() title!: string;
   @Input() color!: string;
   @Input() subTitle?: string;
   @Input() graphContainerId!: string;
-
-  constructor(public dialogService: DialogService) {}
-
   openDialog = () => {
     this.dialogService.open(GraphDialogComponent, {
       header: this.title,

angular-client/src/components/latency-display/latency-display.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
 
@@ -8,14 +8,13 @@ import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type'
   styleUrls: ['./latency-display.css']
 })
 export default class LatencyDisplayComponent implements OnInit {
+  private storage = inject(Storage);
   @Input() lowVal: number = 0;
   @Input() medVal: number = 50;
   @Input() highVal: number = 100;
   latency: number = 0;
   newLatency: number = 0;
 
-  constructor(private storage: Storage) {}
-
   ngOnInit(): void {
     this.storage.get(IdentifierDataType.LATENCY).subscribe((value) => {
       this.latency = parseInt(value.values[0]);

angular-client/src/components/more-details/more-details.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { Router } from '@angular/router';
 import { MessageService } from 'primeng/api';
 import Storage from 'src/services/storage.service';
@@ -8,14 +8,10 @@ import Storage from 'src/services/storage.service';
   templateUrl: './more-details.component.html'
 })
 export default class MoreDetailsComponent {
+  private router = inject(Router);
+  private storage = inject(Storage);
+  private messageService = inject(MessageService);
   label: string = 'More Details';
-
-  constructor(
-    private router: Router,
-    private storage: Storage,
-    private messageService: MessageService
-  ) {}
-
   goToGraph = () => {
     const runId = this.storage.getCurrentRunId().value;
     if (runId) {

angular-client/src/components/motor-info/motor-info.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
 import { floatPipe } from 'src/utils/pipes.utils';
@@ -11,13 +11,13 @@ import { floatPipe } from 'src/utils/pipes.utils';
   styleUrls: ['./motor-info.component.css']
 })
 export default class MotorInfoComponent implements OnInit {
+  private storage = inject(Storage);
   motorUsage: number = 100;
   coolUsage: number = 0;
   motorTemp: number = 0;
 
   piechartData: { value: number; name: string }[] = [];
 
-  constructor(private storage: Storage) {}
   ngOnInit() {
     this.storage.get(IdentifierDataType.MOTOR_TEMP).subscribe((value) => {
       this.motorTemp = floatPipe(value.values[0]);

angular-client/src/components/pie-chart/pie-chart.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, Input, Renderer2, OnInit } from '@angular/core';
+import { Component, ElementRef, Input, Renderer2, OnInit, inject } from '@angular/core';
 
 import { ApexNonAxisChartSeries, ApexPlotOptions, ApexChart, ApexFill } from 'ng-apexcharts';
 import Theme from 'src/services/theme.service';
@@ -17,17 +17,14 @@ export type ChartOptions = {
   styleUrls: ['pie-chart.component.css']
 })
 export default class PieChartComponent implements OnInit {
+  private renderer = inject(Renderer2);
+  private el = inject(ElementRef);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   public chartOptions!: Partial<ChartOptions> | any;
   @Input() data: { value: number; name: string }[] = [];
   @Input() backgroundColor: string = Theme.infoBackground;
   currentWidth: number = 0;
 
-  constructor(
-    private renderer: Renderer2,
-    private el: ElementRef
-  ) {}
-
   ngOnInit() {
     this.setChartWidth();
     setTimeout(() => {

angular-client/src/components/raspberry-pi/raspberry-pi.component.ts

@@ -1,4 +1,4 @@
-import { Component, HostListener, OnInit } from '@angular/core';
+import { Component, HostListener, OnInit, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
 import { floatPipe } from 'src/utils/pipes.utils';
@@ -9,6 +9,7 @@ import { floatPipe } from 'src/utils/pipes.utils';
   styleUrls: ['./raspberry-pi.component.css']
 })
 export default class RasberryPiComponent implements OnInit {
+  private storage = inject(Storage);
   cpuUsage: number = 0;
   cpuTemp: number = 0;
   ramUsage: number = 0;
@@ -18,8 +19,6 @@ export default class RasberryPiComponent implements OnInit {
   mobileThreshold = 768;
   isMobile = window.innerWidth < this.mobileThreshold;
 
-  constructor(private storage: Storage) {}
-
   ngOnInit() {
     this.storage.get(IdentifierDataType.CPUUsage).subscribe((value) => {
       this.cpuUsage = floatPipe(value.values[0]);

angular-client/src/components/sidebar-toggle/sidebar-toggle.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import SidebarService from 'src/services/sidebar.service';
 
 @Component({
@@ -7,7 +7,7 @@ import SidebarService from 'src/services/sidebar.service';
   styleUrls: ['./sidebar-toggle.component.css']
 })
 export default class SidebarToggleComponent {
-  constructor(private sidebarService: SidebarService) {}
+  private sidebarService = inject(SidebarService);
 
   toggleSidebar() {
     this.sidebarService.openSidebar();