feat(web): update quality print advanced and base

frontend/src/app/features/calculator/components/upload-form/upload-form.component.html

@@ -83,11 +83,19 @@
       [options]="materials"
     ></app-select>
 
-    <app-select
-      formControlName="quality"
-      [label]="'CALC.QUALITY' | translate"
-      [options]="qualities"
-    ></app-select>
+    @if (mode() === 'easy') {
+        <app-select
+          formControlName="quality"
+          [label]="'CALC.QUALITY' | translate"
+          [options]="qualities"
+        ></app-select>
+    } @else {
+        <app-select
+          formControlName="printSpeed"
+          [label]="'CALC.PRINT_SPEED' | translate"
+          [options]="printSpeeds"
+        ></app-select>
+    }
   </div>
   
   <!-- Global quantity removed, now per item -->
@@ -99,6 +107,12 @@
           [label]="'CALC.PATTERN' | translate"
           [options]="infillPatterns"
         ></app-select>
+
+        <app-select
+          formControlName="layerHeight"
+          [label]="'CALC.LAYER_HEIGHT' | translate"
+          [options]="layerHeights"
+        ></app-select>
     </div>
 
     <div class="grid">

frontend/src/app/features/calculator/components/upload-form/upload-form.component.ts

@@ -46,6 +46,12 @@ export class UploadFormComponent {
     { label: 'Standard', value: 'Standard' },
     { label: 'Alta definizione', value: 'High' }
   ];
+
+  printSpeeds = [
+     { label: 'Slow (High Quality)', value: 'Slow' },
+     { label: 'Standard', value: 'Standard' },
+     { label: 'Fast (Draft)', value: 'Fast' }
+  ];
   
   infillPatterns = [
       { label: 'Grid', value: 'grid' },
@@ -53,6 +59,15 @@ export class UploadFormComponent {
       { label: 'Cubic', value: 'cubic' },
       { label: 'Triangles', value: 'triangles' }
   ];
+
+  layerHeights = [
+      { label: '0.08 mm', value: 0.08 },
+      { label: '0.12 mm (High Quality - Slow)', value: 0.12 },
+      { label: '0.16 mm', value: 0.16 },
+      { label: '0.20 mm (Standard)', value: 0.20 },
+      { label: '0.24 mm', value: 0.24 },
+      { label: '0.28 mm (Draft - Fast)', value: 0.28 }
+  ];
   
   acceptedFormats = '.stl,.3mf,.step,.stp,.obj,.amf,.ply,.igs,.iges';
 
@@ -61,10 +76,12 @@ export class UploadFormComponent {
       itemsTouched: [false], // Hack to track touched state for custom items list
       material: ['PLA', Validators.required],
       quality: ['Standard', Validators.required],
+      printSpeed: ['Standard', Validators.required],
       notes: [''],
       // Advanced fields
       // Color removed from global form
       infillDensity: [20, [Validators.min(0), Validators.max(100)]],
+      layerHeight: [0.2, [Validators.min(0.05), Validators.max(1.0)]],
       infillPattern: ['grid'],
       supportEnabled: [false]
     });

frontend/src/app/shared/components/app-select/app-select.component.html

@@ -2,14 +2,14 @@
   @if (label()) { <label [for]="id()">{{ label() }}</label> }
   <select
     [id]="id()"
-    [value]="value"
-    (change)="onSelect($event)"
+    [ngModel]="value"
+    (ngModelChange)="onModelChange($event)"
     (blur)="onTouched()"
     [disabled]="disabled"
     class="form-control"
   >
-    @for (opt of options(); track opt.value) {
-      <option [value]="opt.value">{{ opt.label }}</option>
+    @for (opt of options(); track opt.label) {
+      <option [ngValue]="opt.value">{{ opt.label }}</option>
     }
   </select>
   @if (error()) { <span class="error-text">{{ error() }}</span> }

frontend/src/app/shared/components/app-select/app-select.component.ts

@@ -1,11 +1,11 @@
 import { Component, input, output, forwardRef } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-select',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule],
+  imports: [CommonModule, ReactiveFormsModule, FormsModule],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
@@ -33,9 +33,8 @@ export class AppSelectComponent implements ControlValueAccessor {
   registerOnTouched(fn: any): void { this.onTouched = fn; }
   setDisabledState(isDisabled: boolean): void { this.disabled = isDisabled; }
   
-  onSelect(event: Event) {
-    const val = (event.target as HTMLSelectElement).value;
-    this.value = val;
-    this.onChange(val);
+  onModelChange(val: any) {
+      this.value = val;
+      this.onChange(val);
   }
 }