#193 Migrate to signal-based inputs

.gitignore

@@ -3,6 +3,9 @@
 
 # environment config
 **/.env
+
+# Claude Code
+.claude/settings.json
 scylla-server-typescript/src/prisma/mydatabase.db
 scylla-server-typescript/src/prisma/mydatabase.db-journal
 scylla-server/files

angular-client/src/components/argos-button/argos-button.component.ts

@@ -20,7 +20,7 @@ export class ButtonComponent implements OnInit {
   ngOnInit(): void {
     this.style = 'width: 140px; height: 45px; ';
 
-    if (this.additionalStyles) {
+    if (this.additionalStyles()) {
       this.style += this.additionalStyles();
     }
   }

angular-client/src/components/battery-level-indicator/battery-level-indicator.component.html

@@ -1,6 +1,6 @@
 <div class="battery">
   <div class="nub"></div>
   <div class="shell">
-    <div class="fill" [style.height]="fillHeight" [style.background-color]="fillColor"></div>
+    <div class="fill" [style.height]="fillHeight()" [style.background-color]="fillColor()"></div>
   </div>
 </div>

angular-client/src/components/battery-level-indicator/battery-level-indicator.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges } from '@angular/core';
+import { Component, computed, input } from '@angular/core';
 import Theme from 'src/services/theme.service';
 
 /**
@@ -11,14 +11,9 @@ import Theme from 'src/services/theme.service';
   styleUrl: './battery-level-indicator.component.css',
   standalone: true
 })
-export class BatteryLevelIndicatorComponent implements OnChanges {
-  @Input() percentage: number = 0;
+export class BatteryLevelIndicatorComponent {
+  percentage = input<number>(0);
 
-  fillHeight = '0%';
-  fillColor = Theme.battteryHigh;
-
-  ngOnChanges(): void {
-    this.fillHeight = Math.max(0, Math.min(100, this.percentage)) + '%';
-    this.fillColor = this.percentage <= 20 ? Theme.battteryLow : Theme.battteryHigh;
-  }
+  fillHeight = computed(() => Math.max(0, Math.min(100, this.percentage())) + '%');
+  fillColor = computed(() => (this.percentage() <= 20 ? Theme.battteryLow : Theme.battteryHigh));
 }

angular-client/src/components/battery-percentage/battery-percentage.component.html

@@ -24,8 +24,8 @@
   >
     <div
       [style]="{
-        'background-color': getFillColor(percentage),
-        height: getFillHeight(percentage),
+        'background-color': getFillColor(percentage()),
+        height: getFillHeight(percentage()),
         width: fillWidth,
         'margin-top': fillMarginBottom,
         'border-radius': '8px'

angular-client/src/components/battery-percentage/battery-percentage.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, OnInit, input } from '@angular/core';
 import Theme from 'src/services/theme.service';
 import { trigger, state, style, animate, transition } from '@angular/animations';
 
@@ -32,9 +32,9 @@ import { trigger, state, style, animate, transition } from '@angular/animations'
   standalone: true
 })
 export class BatteryPercentageComponent implements OnInit {
-  @Input() percentage!: number;
-  @Input() height!: number;
-  @Input() width!: number;
+  percentage = input.required<number>();
+  height = input.required<number>();
+  width = input.required<number>();
 
   // Background Styles
   heightpx!: string;
@@ -60,21 +60,21 @@ export class BatteryPercentageComponent implements OnInit {
 
   // fills battery bar based on current percentage
   renderBattery() {
-    const minDim = Math.min(this.width, this.height);
-    this.heightpx = this.height + 'px';
-    this.widthpx = this.width + 'px';
+    const minDim = Math.min(this.width(), this.height());
+    this.heightpx = this.height() + 'px';
+    this.widthpx = this.width() + 'px';
 
-    this.fillWidth = this.width * 0.9 + 'px';
-    this.fillMarginBottom = this.height * 0.05 + 'px';
+    this.fillWidth = this.width() * 0.9 + 'px';
+    this.fillMarginBottom = this.height() * 0.05 + 'px';
 
-    this.nubHeight = this.height / 10 + 'px';
-    this.nubWidth = this.width / 2 + 'px';
+    this.nubHeight = this.height() / 10 + 'px';
+    this.nubWidth = this.width() / 2 + 'px';
 
     this.roundCorner = minDim * 0.05 + 'px';
   }
 
   getFillHeight = (percentage: number) => {
-    return (percentage / 100) * (this.height * 0.9) + 'px';
+    return (percentage / 100) * (this.height() * 0.9) + 'px';
   };
 
   getFillColor = (percentage: number) => {

angular-client/src/components/circular-percentage/circular-percentage.component.html

@@ -4,16 +4,16 @@
     [style]="{
       background:
         'conic-gradient(from 180deg, ' +
-        ringColor +
+        ringColor() +
         ' ' +
-        getFilledAngle(percentage) +
+        getFilledAngle(percentage()) +
         'deg, black ' +
-        getFilledAngle(percentage) +
+        getFilledAngle(percentage()) +
         'deg ' +
         emptyAngle +
         'deg)',
-      height: dimension + 'px',
-      width: dimension + 'px'
+      height: dimension() + 'px',
+      width: dimension() + 'px'
     }"
   >
     <div
@@ -27,7 +27,7 @@
       <div class="content">
         <typography
           variant="header"
-          content="{{ percentage }}"
+          content="{{ percentage() }}"
           additionalStyles="fontSize: {{ percentageFontSize }}px; margin: 0;"
         />
         <typography

angular-client/src/components/circular-percentage/circular-percentage.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, OnInit, input } from '@angular/core';
 import Theme from 'src/services/theme.service';
 import { InfoBackgroundComponent } from '../info-background/info-background.component';
 import TypographyComponent from '../typography/typography.component';
@@ -16,10 +16,10 @@ import TypographyComponent from '../typography/typography.component';
   imports: [InfoBackgroundComponent, TypographyComponent]
 })
 export class CircularPercentageComponent implements OnInit {
-  @Input() dimension!: number;
-  @Input() ringColor!: string;
-  @Input() percentage!: number;
-  @Input() spacing!: number;
+  dimension = input.required<number>();
+  ringColor = input.required<string>();
+  percentage = input.required<number>();
+  spacing = input<number>(0);
 
   //values needed for styling and scaling
   backgroundColor: string = Theme.infoBackground;
@@ -31,10 +31,10 @@ export class CircularPercentageComponent implements OnInit {
 
   //assigns values needed for styling and scaling
   ngOnInit() {
-    this.innerCircleDimension = this.dimension * 0.87;
-    this.percentageFontSize = this.dimension * 0.39;
-    this.percentageSignFontSize = this.dimension * 0.17;
-    this.percentageSignOffset = this.dimension * 0.02;
+    this.innerCircleDimension = this.dimension() * 0.87;
+    this.percentageFontSize = this.dimension() * 0.39;
+    this.percentageSignFontSize = this.dimension() * 0.17;
+    this.percentageSignOffset = this.dimension() * 0.02;
   }
 
   getFilledAngle(percentage: number): number {

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 } from '@angular/core';
 import { InfoBackgroundComponent } from '../info-background/info-background.component';
 import TypographyComponent from '../typography/typography.component';
 import HStackComponent from '../hstack/hstack.component';
@@ -12,15 +12,15 @@ import VStackComponent from '../vstack/vstack.component';
   imports: [InfoBackgroundComponent, TypographyComponent, HStackComponent, VStackComponent]
 })
 export default class CurrentTotalTimerComponent {
-  @Input() currentTime: number = 0;
-  @Input() totalTime: number = 0;
+  currentTime = input<number>(0);
+  totalTime = input<number>(0);
 
   getCurrentTime() {
-    return this.formatTime(this.currentTime);
+    return this.formatTime(this.currentTime());
   }
 
   getTotalTime() {
-    return this.formatTime(this.totalTime);
+    return this.formatTime(this.totalTime());
   }
 
   /**

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

@@ -1 +1 @@
-<div style="height: 100%; width: 100%" [id]="graphContainerId"></div>
+<div style="height: 100%; width: 100%" [id]="graphContainerId()"></div>

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

@@ -1,4 +1,4 @@
-import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
+import { Component, OnDestroy, OnInit, inject, input } from '@angular/core';
 import ApexCharts from 'apexcharts';
 import {
   ApexAxisChartSeries,
@@ -41,15 +41,15 @@ type ChartOptions = {
 })
 export class DoubleLineGraphComponent implements OnInit, OnDestroy {
   public dialogService = inject(DialogService);
-  @Input() data1!: GraphData[];
-  @Input() color1!: string; // Must be hex
-  @Input() title1?: string;
-  @Input() data2!: GraphData[];
-  @Input() color2!: string; // Must be hex
-  @Input() title2?: string;
-  @Input() header?: string;
-  @Input() graphContainerId!: string;
-  @Input({ required: false }) timeRangeSec!: number;
+  data1 = input.required<GraphData[]>();
+  color1 = input.required<string>(); // Must be hex
+  title1 = input<string | undefined>(undefined);
+  data2 = input.required<GraphData[]>();
+  color2 = input.required<string>(); // Must be hex
+  title2 = input<string | undefined>(undefined);
+  header = input<string | undefined>(undefined);
+  graphContainerId = input.required<string>();
+  timeRangeSec = input<number | undefined>(undefined);
   options!: ChartOptions;
   chart!: ApexCharts;
   series: ApexAxisChartSeries = [];
@@ -59,11 +59,11 @@ export class DoubleLineGraphComponent implements OnInit, OnDestroy {
   timeOuts: NodeJS.Timeout[] = [];
   openDialog = () => {
     this.dialogService.open(GraphDialogComponent, {
-      header: this.header,
+      header: this.header(),
       data: {
-        data: this.data1,
-        color: this.color1,
-        title: this.title1
+        data: this.data1(),
+        color: this.color1(),
+        title: this.title1()
       }
     });
   };
@@ -76,18 +76,18 @@ export class DoubleLineGraphComponent implements OnInit, OnDestroy {
   updateChart = () => {
     this.series = [
       {
-        name: this.title1,
-        data: Array.from(this.data1)
+        name: this.title1(),
+        data: Array.from(this.data1())
       },
       {
-        name: this.title2,
-        data: Array.from(this.data2)
+        name: this.title2(),
+        data: Array.from(this.data2())
       }
     ];
     // temp fix, for now just basing change on data1 length...
     // even though probably should check data1 also
-    if (!this.isSliding && this.data1.length > 2) {
-      this.timeDiffMs = this.data1[this.data1.length - 1].x - this.data1[0].x;
+    if (!this.isSliding && this.data1().length > 2) {
+      this.timeDiffMs = this.data1()[this.data1().length - 1].x - this.data1()[0].x;
     }
 
     if (!this.isSliding && this.timeDiffMs > this.timeRangeMs) {
@@ -110,16 +110,16 @@ export class DoubleLineGraphComponent implements OnInit, OnDestroy {
   };
 
   ngOnInit(): void {
-    this.timeRangeMs = (this.timeRangeSec ?? 120) * 1000;
+    this.timeRangeMs = (this.timeRangeSec() ?? 120) * 1000;
 
     this.series = [
       {
-        name: this.title1,
-        data: this.data1
+        name: this.title1(),
+        data: this.data1()
       },
       {
-        name: this.title2,
-        data: this.data2
+        name: this.title2(),
+        data: this.data2()
       }
     ];
 
@@ -143,7 +143,7 @@ export class DoubleLineGraphComponent implements OnInit, OnDestroy {
         }
         // background: '#5A5A5A'
       },
-      colors: [this.color1, this.color2], // Set series colors here
+      colors: [this.color1(), this.color2()], // Set series colors here
       dataLabels: {
         enabled: false
       },
@@ -209,7 +209,7 @@ export class DoubleLineGraphComponent implements OnInit, OnDestroy {
 
     // Delay rendering to ensure the container is available
     setTimeout(() => {
-      const chartContainer = document.getElementById(this.graphContainerId);
+      const chartContainer = document.getElementById(this.graphContainerId());
       if (!chartContainer) {
         return;
       }

angular-client/src/components/error-page/error-page.component.html

@@ -1,3 +1,3 @@
 <div class="error-container">
-  <typography variant="header" [content]="errorMessage" />
+  <typography variant="header" [content]="errorMessage()" />
 </div>

angular-client/src/components/error-page/error-page.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, input } from '@angular/core';
 import TypographyComponent from '../typography/typography.component';
 
 /**
@@ -13,5 +13,5 @@ import TypographyComponent from '../typography/typography.component';
   standalone: true
 })
 export default class ErrorPageComponent {
-  @Input() errorMessage!: string;
+  errorMessage = input.required<string>();
 }

angular-client/src/components/form-template/form-template.component.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Component, EventEmitter, inject, input, OnChanges, OnInit, Output } from '@angular/core';
+import { Component, effect, inject, input, output, untracked } from '@angular/core';
 import { FormBuilder, FormGroup, ValidatorFn, Validators, ReactiveFormsModule } from '@angular/forms';
 import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { InputText } from 'primeng/inputtext';
@@ -31,36 +31,32 @@ export interface DynamicFormField {
   standalone: true,
   imports: [ReactiveFormsModule, InputText, NgClass, NgIf, ButtonDirective]
 })
-export class FormTemplateComponent implements OnInit, OnChanges {
+export class FormTemplateComponent {
   public config = inject(DynamicDialogConfig);
 
   fields = input.required<DynamicFormField[]>();
 
   public ref = inject(DynamicDialogRef);
 
   formData = input<Map<string, anyType>>(new Map());
-  @Output() submitForm: EventEmitter<FormGroup> = new EventEmitter();
+  submitForm = output<FormGroup>();
 
   form: FormGroup = this.fb.group({});
 
   constructor(private fb: FormBuilder) {
-    // this.fields = this.config.data.fields;
-  }
-
-  ngOnInit(): void {
-    this.buildForm();
-  }
-
-  ngOnChanges(): void {
-    this.buildForm();
+    effect(() => {
+      const fields = this.fields();
+      const formData = this.formData();
+      untracked(() => this.buildForm(fields, formData));
+    });
   }
 
-  buildForm() {
+  buildForm(fields = this.fields(), formData = this.formData()) {
     const group: any = {};
 
-    this.fields().forEach((field) => {
+    fields.forEach((field) => {
       const control = this.fb.control({
-        value: this.formData() ? this.formData().get(field.name) : '',
+        value: formData ? formData.get(field.name) : '',
         disabled: field.disabled
       });