diff --git a/frontend/src/app/features/calculator/calculator-page.component.ts b/frontend/src/app/features/calculator/calculator-page.component.ts index 457ec75..5b76d7d 100644 --- a/frontend/src/app/features/calculator/calculator-page.component.ts +++ b/frontend/src/app/features/calculator/calculator-page.component.ts @@ -24,12 +24,12 @@ import { Router } from '@angular/router';
-
{{ 'CALC.MODE_EASY' | translate }}
-
{{ 'CALC.MODE_ADVANCED' | translate }} @@ -46,7 +46,7 @@ import { Router } from '@angular/router';
-
+
@if (error()) { Si è verificato un errore durante il calcolo del preventivo. } @@ -77,7 +77,7 @@ import { Router } from '@angular/router'; styles: [` .hero { padding: var(--space-12) 0; text-align: center; } .subtitle { font-size: 1.25rem; color: var(--color-text-muted); max-width: 600px; margin: 0 auto; } - + .content-grid { display: grid; grid-template-columns: 1fr; @@ -93,7 +93,7 @@ import { Router } from '@angular/router'; align-self: center; } } - + /* Mode Selector (Segmented Control style) */ .mode-selector { display: flex; @@ -104,7 +104,7 @@ import { Router } from '@angular/router'; gap: 4px; width: 100%; } - + .mode-option { flex: 1; text-align: center; @@ -116,9 +116,9 @@ import { Router } from '@angular/router'; color: var(--color-text-muted); transition: all 0.2s ease; user-select: none; - + &:hover { color: var(--color-text); } - + &.active { background-color: var(--color-brand); color: #000; @@ -128,33 +128,33 @@ import { Router } from '@angular/router'; } .benefits { padding-left: var(--space-4); color: var(--color-text-muted); line-height: 2; } - + .loading-state { display: flex; align-items: center; justify-content: center; min-height: 300px; /* Match typical result height */ } - + .loader-content { text-align: center; max-width: 300px; margin: 0 auto; } - + .loading-title { font-size: 1.1rem; font-weight: 600; margin: var(--space-4) 0 var(--space-2); color: var(--color-text); } - + .loading-text { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.5; } - + .spinner { border: 3px solid var(--color-neutral-200); border-left-color: var(--color-brand); @@ -164,7 +164,7 @@ import { Router } from '@angular/router'; animation: spin 1s linear infinite; margin: 0 auto; } - + @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } @@ -186,7 +186,7 @@ export class CalculatorPageComponent { this.uploadProgress.set(0); this.error.set(false); this.result.set(null); - + this.estimator.calculate(req).subscribe({ next: (event) => { if (typeof event === 'number') { @@ -209,25 +209,25 @@ export class CalculatorPageComponent { onConsult() { if (!this.currentRequest) return; - + const req = this.currentRequest; let details = `Richiesta Preventivo:\n`; details += `- Materiale: ${req.material}\n`; details += `- Qualità: ${req.quality}\n`; details += `- Quantità: ${req.quantity}\n`; - + if (req.mode === 'advanced') { if (req.color) details += `- Colore: ${req.color}\n`; if (req.infillDensity) details += `- Infill: ${req.infillDensity}%\n`; } - + if (req.notes) details += `\nNote: ${req.notes}`; this.estimator.setPendingConsultation({ files: req.files, message: details }); - + this.router.navigate(['/contact']); } }