Merge pull request 'dev' (#3) from dev into int

Reviewed-on: #3

frontend/src/app/features/calculator/calculator-page.component.ts

@@ -7,6 +7,7 @@ import { AppAlertComponent } from '../../shared/components/app-alert/app-alert.c
 import { UploadFormComponent } from './components/upload-form/upload-form.component';
 import { QuoteResultComponent } from './components/quote-result/quote-result.component';
 import { QuoteEstimatorService, QuoteRequest, QuoteResult } from './services/quote-estimator.service';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-calculator-page',
@@ -23,12 +24,12 @@ import { QuoteEstimatorService, QuoteRequest, QuoteResult } from './services/quo
       <div class="col-input">
         <app-card>
           <div class="mode-selector">
-            <div class="mode-option" 
+            <div class="mode-option"
                  [class.active]="mode() === 'easy'"
                  (click)="mode.set('easy')">
               {{ 'CALC.MODE_EASY' | translate }}
             </div>
-            <div class="mode-option" 
+            <div class="mode-option"
                  [class.active]="mode() === 'advanced'"
                  (click)="mode.set('advanced')">
               {{ 'CALC.MODE_ADVANCED' | translate }}
@@ -38,6 +39,7 @@ import { QuoteEstimatorService, QuoteRequest, QuoteResult } from './services/quo
           <app-upload-form
             [mode]="mode()"
             [loading]="loading()"
+            [uploadProgress]="uploadProgress()"
             (submitRequest)="onCalculate($event)"
           ></app-upload-form>
         </app-card>
@@ -51,12 +53,14 @@ import { QuoteEstimatorService, QuoteRequest, QuoteResult } from './services/quo
 
         @if (loading()) {
             <app-card class="loading-state">
-                <div class="spinner"></div>
-                <p>Analisi geometria e slicing in corso...</p>
-                <small class="text-muted">Potrebbe richiedere qualche secondo.</small>
+                <div class="loader-content">
+                    <div class="spinner"></div>
+                    <h3 class="loading-title">Analisi in corso...</h3>
+                    <p class="loading-text">Stiamo analizzando la geometria e calcolando il percorso utensile.</p>
+                </div>
             </app-card>
         } @else if (result()) {
-          <app-quote-result [result]="result()!"></app-quote-result>
+          <app-quote-result [result]="result()!" (consult)="onConsult()"></app-quote-result>
         } @else {
           <app-card>
             <h3>{{ 'CALC.BENEFITS_TITLE' | translate }}</h3>
@@ -73,7 +77,7 @@ import { QuoteEstimatorService, QuoteRequest, QuoteResult } from './services/quo
   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;
@@ -83,6 +87,13 @@ import { QuoteEstimatorService, QuoteRequest, QuoteResult } from './services/quo
       }
     }
 
+    .centered-col {
+        align-self: flex-start; /* Default */
+        @media(min-width: 768px) {
+            align-self: center;
+        }
+    }
+
     /* Mode Selector (Segmented Control style) */
     .mode-selector {
       display: flex;
@@ -93,7 +104,7 @@ import { QuoteEstimatorService, QuoteRequest, QuoteResult } from './services/quo
       gap: 4px;
       width: 100%;
     }
-    
+
     .mode-option {
       flex: 1;
       text-align: center;
@@ -105,9 +116,9 @@ import { QuoteEstimatorService, QuoteRequest, QuoteResult } from './services/quo
       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;
@@ -117,23 +128,43 @@ import { QuoteEstimatorService, QuoteRequest, QuoteResult } from './services/quo
     }
 
     .benefits { padding-left: var(--space-4); color: var(--color-text-muted); line-height: 2; }
-    
+
     .loading-state {
-        text-align: center;
-        padding: var(--space-8);
-        color: var(--color-text-muted);
-        
-        .spinner {
-            border: 3px solid rgba(0, 0, 0, 0.1);
-            border-left-color: var(--color-brand);
-            border-radius: 50%;
-            width: 32px;
-            height: 32px;
-            animation: spin 1s linear infinite;
-            margin: 0 auto var(--space-4);
-        }
+        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);
+        border-radius: 50%;
+        width: 48px;
+        height: 48px;
+        animation: spin 1s linear infinite;
+        margin: 0 auto;
+    }
+
     @keyframes spin {
         0% { transform: rotate(0deg); }
         100% { transform: rotate(360deg); }
@@ -143,20 +174,29 @@ import { QuoteEstimatorService, QuoteRequest, QuoteResult } from './services/quo
 export class CalculatorPageComponent {
   mode = signal<any>('easy');
   loading = signal(false);
+  uploadProgress = signal(0);
   result = signal<QuoteResult | null>(null);
   error = signal<boolean>(false);
 
-  constructor(private estimator: QuoteEstimatorService) {}
+  constructor(private estimator: QuoteEstimatorService, private router: Router) {}
 
   onCalculate(req: QuoteRequest) {
+    this.currentRequest = req;
     this.loading.set(true);
+    this.uploadProgress.set(0);
     this.error.set(false);
     this.result.set(null);
-    
+
     this.estimator.calculate(req).subscribe({
-      next: (res) => {
-        this.result.set(res);
-        this.loading.set(false);
+      next: (event) => {
+        if (typeof event === 'number') {
+            this.uploadProgress.set(event);
+        } else {
+            // It's the result
+            this.result.set(event as QuoteResult);
+            this.loading.set(false);
+            this.uploadProgress.set(100);
+        }
       },
       error: () => {
         this.error.set(true);
@@ -164,4 +204,30 @@ export class CalculatorPageComponent {
       }
     });
   }
+
+  private currentRequest: QuoteRequest | null = null;
+
+  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']);
+  }
 }

frontend/src/app/features/calculator/components/quote-result/quote-result.component.ts

@@ -34,7 +34,7 @@ import { QuoteResult } from '../../services/quote-estimator.service';
 
       <div class="actions">
         <app-button variant="primary" [fullWidth]="true">{{ 'CALC.ORDER' | translate }}</app-button>
-        <app-button variant="outline" [fullWidth]="true">{{ 'CALC.CONSULT' | translate }}</app-button>
+        <app-button variant="outline" [fullWidth]="true" (click)="consult.emit()">{{ 'CALC.CONSULT' | translate }}</app-button>
       </div>
     </app-card>
   `,
@@ -53,4 +53,5 @@ import { QuoteResult } from '../../services/quote-estimator.service';
 })
 export class QuoteResultComponent {
   result = input.required<QuoteResult>();
+  consult = output<void>();
 }

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

@@ -101,25 +101,21 @@ import { QuoteRequest } from '../../services/quote-estimator.service';
         ></app-input>
       }
 
-      @if (loading()) {
-        <div class="progress-container">
-            <div class="progress-bar">
-                <div class="progress-fill"></div>
-            </div>
-            <p class="progress-text">Uploading & Analyzing...</p>
-        </div>
-      }
-
       <div class="actions">
+        <!-- Progress Bar (Only when uploading i.e. progress < 100) -->
+        @if (loading() && uploadProgress() < 100) {
+            <div class="progress-container">
+                <div class="progress-bar">
+                    <div class="progress-fill" [style.width.%]="uploadProgress()"></div>
+                </div>
+            </div>
+        }
+
         <app-button 
           type="submit" 
           [disabled]="form.invalid || loading()" 
           [fullWidth]="true">
-          @if (loading()) {
-            Slicing in progress...
-          } @else {
-            {{ 'CALC.CALCULATE' | translate }}
-          }
+          {{ loading() ? (uploadProgress() < 100 ? 'Uploading...' : 'Processing...') : ('CALC.CALCULATE' | translate) }}
         </app-button>
       </div>
     </form>
@@ -188,38 +184,35 @@ import { QuoteRequest } from '../../services/quote-estimator.service';
 
     /* Progress Bar */
     .progress-container {
-        margin-top: var(--space-4);
-        padding: var(--space-4);
-        background: var(--color-neutral-100);
-        border-radius: var(--radius-md);
+        margin-bottom: var(--space-3);
+        /* padding: var(--space-2); */
+        /* background: var(--color-neutral-100); */
+        /* border-radius: var(--radius-md); */
         text-align: center;
+        width: 100%;
     }
     .progress-bar {
-        height: 6px;
+        height: 4px;
         background: var(--color-border);
-        border-radius: 3px;
+        border-radius: 2px;
         overflow: hidden;
-        margin-bottom: var(--space-2);
+        margin-bottom: 0;
         position: relative;
+        width: 100%;
     }
     .progress-fill {
         height: 100%;
         background: var(--color-brand);
         width: 0%;
-        animation: progress 2s ease-in-out infinite;
+        transition: width 0.2s ease-out;
     }
     .progress-text { font-size: 0.875rem; color: var(--color-text-muted); }
-    
-    @keyframes progress {
-        0% { width: 0%; transform: translateX(-100%); }
-        50% { width: 100%; transform: translateX(0); }
-        100% { width: 100%; transform: translateX(100%); }
-    }
   `]
 })
 export class UploadFormComponent {
   mode = input<'easy' | 'advanced'>('easy');
   loading = input<boolean>(false);
+  uploadProgress = input<number>(0);
   submitRequest = output<QuoteRequest>();
 
   form: FormGroup;

frontend/src/app/features/calculator/services/quote-estimator.service.ts

@@ -1,4 +1,4 @@
-import { Injectable, inject } from '@angular/core';
+import { Injectable, inject, signal } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable, forkJoin, of } from 'rxjs';
 import { map, catchError } from 'rxjs/operators';
@@ -44,80 +44,192 @@ interface BackendResponse {
 export class QuoteEstimatorService {
   private http = inject(HttpClient);
   
-  calculate(request: QuoteRequest): Observable<QuoteResult> {
-    const requests: Observable<BackendResponse>[] = request.files.map(file => {
-      const formData = new FormData();
-      formData.append('file', file);
-      formData.append('machine', 'bambu_a1'); // Hardcoded for now
-      formData.append('filament', this.mapMaterial(request.material));
-      formData.append('quality', this.mapQuality(request.quality));
-      
-      if (request.mode === 'advanced') {
-          if (request.color) formData.append('material_color', request.color);
-          if (request.infillDensity) formData.append('infill_density', request.infillDensity.toString());
-          if (request.infillPattern) formData.append('infill_pattern', request.infillPattern);
-          if (request.supportEnabled) formData.append('support_enabled', 'true');
-      }
+  calculate(request: QuoteRequest): Observable<number | QuoteResult> {
+    const formData = new FormData();
+    // Assuming single file primarily for now, or aggregating. 
+    // The current UI seems to select one "active" file or handle multiple. 
+    // The logic below was mapping multiple files to multiple requests. 
+    // To support progress seamlessly for the "main" action, let's focus on the processing flow.
+    // If multiple files, we might need a more complex progress tracking or just track the first/total.
+    // Given the UI shows one big "Analyse" button, let's treat it as a batch or single.
+    
+    // NOTE: The previous logic did `request.files.map(...)`.
+    // If we want a global progress, we can mistakenly complexity it. 
+    // Let's assume we upload all files in one request if the API supported it, but the API seems to be 1 file per request from previous code?
+    // "formData.append('file', file)" inside the map implies multiple requests.
+    // To keep it simple and working with the progress bar which is global:
+    // We will emit progress for the *current* file being processed or average them.
+    // OR simpler: The user typically uploads one file for a quote?
+    // The UI `files: File[]` allows multiple.
+    // Let's stick to the previous logic but wrap it to emit progress.
+    // However, forkJoin waits for all. We can't easily get specialized progress for "overall upload" with forkJoin of distinct requests easily without merging.
+    
+    // Refined approach:
+    // We will process files IN PARALLEL (forkJoin) but we can't easily track aggregated upload progress of multiple requests in a single simple number without extra code.
+    // BUT, the user wants "la barra di upload".
+    // If we assume standard use case is 1 file, it's easy.
+    // If multiple, we can emit progress as "average of all uploads" or just "uploading...".
+    // Let's modify the signature to return `Observable<{ type: 'progress' | 'result', value: any }>` or similar?
+    // The plan said `Observable<QuoteResult>` originally, now we need progress.
+    // Let's change return type to `Observable<any>` or a specific union.
+    
+    // Let's handle just the first file for progress visualization simplicity if multiple are present, 
+    // or better, create a wrapper that merges the progress.
+    
+    // Actually, looking at the previous code: `const requests = request.files.map(...)`.
+    // If we have 3 files, we have 3 requests.
+    // We can emit progress events.
+    
+    // START implementation for generalized progress:
+    
+    const file = request.files[0]; // Primary target for now to ensure we have a progress to show.
+    // Ideally we should upload all.
+    
+    // For this task, to satisfy "bar disappears after upload", we really need to know when upload finishes.
+    
+    // Let's keep it robust:
+    // If multiple files, we likely want to just process them.
+    // Let's stick to the previous logic but capture progress events for at least one or all.
+    
+    if (request.files.length === 0) return of();
 
-      const headers: any = {};
-      // @ts-ignore
-      if (environment.basicAuth) {
-          // @ts-ignore
-          headers['Authorization'] = 'Basic ' + btoa(environment.basicAuth);
-      }
-      
-      console.log(`Sending file: ${file.name} to ${environment.apiUrl}/api/quote`);
-      return this.http.post<BackendResponse>(`${environment.apiUrl}/api/quote`, formData, { headers }).pipe(
-        map(res => {
-             console.log('Response for', file.name, res);
-             return res;
-        }),
-        catchError(err => {
-            console.error('Error calculating quote for', file.name, err);
-            return of({ success: false, data: { print_time_seconds: 0, material_grams: 0, cost: { total: 0 } }, error: err.message });
-        })
-      );
-    });
-
-    return forkJoin(requests).pipe(
-      map(responses => {
-        console.log('All responses:', responses);
+    // We will change the architecture slightly: 
+    // We will execute requests and for EACH, we track progress. 
+    // But we only have one boolean 'loading' and one 'progress' bar in UI.
+    // Let's average the progress?
+    
+    // Simplification: The user probably uploads one file to check quote.
+    // Let's implement support for the first file's progress to drive the UI bar, handling the rest in background/parallel.
+    
+    // Re-implementing the single file logic from the map, but enabled for progress.
+    
+    return new Observable(observer => {
+        let completed = 0;
+        let total = request.files.length;
+        const results: BackendResponse[] = [];
+        let grandTotal = 0; // For progress calculation if we wanted to average
         
-        const validResponses = responses.filter(r => r.success);
-        if (validResponses.length === 0 && responses.length > 0) {
-            throw new Error('All calculations failed. Check backend connection.');
-        }
+        // We'll just track the "upload phase" of the bundle.
+        // Actually, let's just use `concat` or `merge`?
+        // Let's simplify: We will only track progress for the first file or "active" file.
+        // But the previous code sent ALL files.
+        
+        // Let's change the return type to emit events.
+        
+        const uploads = request.files.map(file => {
+             const formData = new FormData();
+             formData.append('file', file);
+             formData.append('machine', 'bambu_a1'); 
+             formData.append('filament', this.mapMaterial(request.material));
+             formData.append('quality', this.mapQuality(request.quality));
+             if (request.mode === 'advanced') {
+                if (request.color) formData.append('material_color', request.color);
+                if (request.infillDensity) formData.append('infill_density', request.infillDensity.toString());
+                if (request.infillPattern) formData.append('infill_pattern', request.infillPattern);
+                if (request.supportEnabled) formData.append('support_enabled', 'true');
+             }
+             
+             const headers: any = {};
+             // @ts-ignore
+             if (environment.basicAuth) headers['Authorization'] = 'Basic ' + btoa(environment.basicAuth);
 
-        let totalPrice = 0;
-        let totalTime = 0;
-        let totalWeight = 0;
-        let setupCost = 10; // Base setup
-
-        validResponses.forEach(res => {
-            totalPrice += res.data.cost.total;
-            totalTime += res.data.print_time_seconds;
-            totalWeight += res.data.material_grams;
+             return this.http.post<BackendResponse>(`${environment.apiUrl}/api/quote`, formData, { 
+                 headers,
+                 reportProgress: true,
+                 observe: 'events'
+             }).pipe(
+                 map(event => ({ file, event })),
+                 catchError(err => of({ file, error: err }))
+             );
         });
 
-        // Apply quantity multiplier
-        totalPrice = (totalPrice * request.quantity) + setupCost;
-        totalWeight = totalWeight * request.quantity;
-        // Total time usually parallel if we have multiple printers, but let's sum for now
-        totalTime = totalTime * request.quantity;
+        // We process all uploads.
+        // We want to emit:
+        // 1. Progress updates (average of all files?)
+        // 2. Final QuoteResult
+        
+        const allProgress: number[] = new Array(request.files.length).fill(0);
+        let completedRequests = 0;
+        const finalResponses: any[] = [];
 
-        const totalHours = Math.floor(totalTime / 3600);
-        const totalMinutes = Math.ceil((totalTime % 3600) / 60);
+        // Subscribe to all
+        uploads.forEach((obs, index) => {
+            obs.subscribe({
+                next: (wrapper: any) => {
+                    if (wrapper.error) {
+                        // handled in final calculation
+                        finalResponses[index] = { success: false, data: { cost: { total:0 }, print_time_seconds:0, material_grams:0 } };
+                        return;
+                    }
 
-        return {
-          price: Math.round(totalPrice * 100) / 100, // Keep 2 decimals
-          currency: 'CHF',
-          printTimeHours: totalHours,
-          printTimeMinutes: totalMinutes,
-          materialUsageGrams: Math.ceil(totalWeight),
-          setupCost
-        };
-      })
-    );
+                    const event = wrapper.event;
+                    if (event.type === 1) { // HttpEventType.UploadProgress
+                        if (event.total) {
+                            const percent = Math.round((100 * event.loaded) / event.total);
+                            allProgress[index] = percent;
+                            // Emit average progress
+                            const avg = Math.round(allProgress.reduce((a, b) => a + b, 0) / total);
+                            observer.next(avg); // Emit number for progress
+                        }
+                    } else if (event.type === 4) { // HttpEventType.Response
+                        allProgress[index] = 100;
+                        finalResponses[index] = event.body;
+                        completedRequests++;
+                        
+                        if (completedRequests === total) {
+                            // All done
+                            observer.next(100); // Ensure complete
+                            
+                            // Calculate Totals
+                            const valid = finalResponses.filter(r => r && r.success);
+                            if (valid.length === 0 && finalResponses.length > 0) {
+                                observer.error('All calculations failed.');
+                                return;
+                            }
+                            
+                            let totalPrice = 0;
+                            let totalTime = 0;
+                            let totalWeight = 0;
+                            let setupCost = 10;
+
+                            valid.forEach(res => {
+                                totalPrice += res.data.cost.total;
+                                totalTime += res.data.print_time_seconds;
+                                totalWeight += res.data.material_grams;
+                            });
+
+                            totalPrice = (totalPrice * request.quantity) + setupCost;
+                            totalWeight = totalWeight * request.quantity;
+                            totalTime = totalTime * request.quantity;
+
+                            const totalHours = Math.floor(totalTime / 3600);
+                            const totalMinutes = Math.ceil((totalTime % 3600) / 60);
+
+                            const result: QuoteResult = {
+                                price: Math.round(totalPrice * 100) / 100,
+                                currency: 'CHF',
+                                printTimeHours: totalHours,
+                                printTimeMinutes: totalMinutes,
+                                materialUsageGrams: Math.ceil(totalWeight),
+                                setupCost
+                            };
+                            
+                            observer.next(result); // Emit final object
+                            observer.complete();
+                        }
+                    }
+                },
+                error: (err) => {
+                    console.error('Error in request', err);
+                    finalResponses[index] = { success: false };
+                    completedRequests++;
+                    if (completedRequests === total) {
+                         observer.error('Requests failed');
+                    }
+                }
+            });
+        });
+    });
   }
 
   private mapMaterial(mat: string): string {
@@ -134,4 +246,17 @@ export class QuoteEstimatorService {
     if (q.includes('high')) return 'extra_fine';
     return 'standard';
   }
+
+  // Consultation Data Transfer
+  private pendingConsultation = signal<{files: File[], message: string} | null>(null);
+
+  setPendingConsultation(data: {files: File[], message: string}) {
+      this.pendingConsultation.set(data);
+  }
+
+  getPendingConsultation() {
+      const data = this.pendingConsultation();
+      this.pendingConsultation.set(null); // Clear after reading
+      return data;
+  }
 }

frontend/src/app/features/contact/components/contact-form/contact-form.component.ts

@@ -4,6 +4,7 @@ import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angula
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { AppInputComponent } from '../../../../shared/components/app-input/app-input.component';
 import { AppButtonComponent } from '../../../../shared/components/app-button/app-button.component';
+import { QuoteEstimatorService } from '../../../calculator/services/quote-estimator.service';
 
 interface FilePreview {
   file: File;
@@ -242,7 +243,11 @@ export class ContactFormComponent {
     { value: 'question', label: 'CONTACT.REQ_TYPE_QUESTION' }
   ];
 
-  constructor(private fb: FormBuilder, private translate: TranslateService) {
+  constructor(
+      private fb: FormBuilder, 
+      private translate: TranslateService,
+      private estimator: QuoteEstimatorService
+  ) {
     this.form = this.fb.group({
       requestType: ['custom', Validators.required],
       name: ['', Validators.required],
@@ -279,6 +284,27 @@ export class ContactFormComponent {
       companyNameControl?.updateValueAndValidity();
       refPersonControl?.updateValueAndValidity();
     });
+    
+    // Check for pending consultation data
+    effect(() => {
+        // Use timeout or run in constructor to ensure dependency availability? 
+        // Actually best in constructor or ngOnInit. Let's stick to constructor logic but executed immediately.
+    });
+    
+    const pending = this.estimator.getPendingConsultation();
+    if (pending) {
+        this.form.patchValue({
+            requestType: 'consult',
+            message: pending.message
+        });
+        
+        // Process files
+        const filePreviews: FilePreview[] = [];
+        pending.files.forEach(f => {
+            filePreviews.push({ file: f, type: this.getFileType(f) });
+        });
+        this.files.set(filePreviews);
+    }
   }
 
   setCompanyMode(isCompany: boolean) {