first try for calculate from stl

frontend/src/app/calculator/calculator.component.html

@@ -1,2 +1,37 @@
-<h2>Calculator Component</h2>
-<p>{{ message }}</p>
+<mat-card>
+  <mat-card-title>3D Print Cost Calculator</mat-card-title>
+
+  <input
+    type="file"
+    accept=".stl"
+    (change)="onFileSelected($event)"
+  />
+
+  <button
+    mat-raised-button
+    color="primary"
+    (click)="uploadAndCalculate()"
+    [disabled]="!file || loading"
+  >
+    {{ loading ? 'Calculating...' : 'Calculate' }}
+  </button>
+
+  <mat-progress-spinner
+    *ngIf="loading"
+    diameter="30"
+    mode="indeterminate"
+  ></mat-progress-spinner>
+
+  <p *ngIf="error" class="error">{{ error }}</p>
+
+  <div *ngIf="results">
+    <p>Volume STL: {{ results.stl_volume_mm3 }} mm³</p>
+    <p>Superficie: {{ results.surface_area_mm2 }} mm²</p>
+    <p>Volume pareti: {{ results.wall_volume_mm3 }} mm³</p>
+    <p>Volume infill: {{ results.infill_volume_mm3 }} mm³</p>
+    <p>Volume stampa: {{ results.print_volume_mm3 }} mm³</p>
+    <p>Peso stimato: {{ results.weight_g }} g</p>
+    <p>Costo stimato: CHF {{ results.cost_chf }}</p>
+    <p>Tempo stimato: {{ results.time_min }} min</p>
+  </div>
+</mat-card>

frontend/src/app/calculator/calculator.component.ts

@@ -1,20 +1,62 @@
-import { Component, OnInit } from '@angular/core';
+// calculator.component.ts
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
 import { HttpClient } from '@angular/common/http';
+import { MatCardModule } from '@angular/material/card';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatButtonModule } from '@angular/material/button';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
 @Component({
   selector: 'app-calculator',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatCardModule,
+    MatFormFieldModule,
+    MatButtonModule,
+    MatProgressSpinnerModule
+  ],
   templateUrl: './calculator.component.html',
-  styleUrls: ['./calculator.component.css']
+  styleUrls: ['./calculator.component.scss']
 })
-export class CalculatorComponent implements OnInit {
-  message = '';
+export class CalculatorComponent {
+  file: File | null = null;
+  results: any = null;
+  error = '';
+  loading = false;
 
   constructor(private http: HttpClient) {}
 
-  ngOnInit(): void {
-    this.http.get<{ message: string }>('http://localhost:8000/api/hello')
-      .subscribe(response => {
-        this.message = response.message;
+  onFileSelected(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    if (input.files && input.files.length > 0) {
+      this.file = input.files[0];
+      this.results = null;
+      this.error = '';
+    }
+  }
+
+  uploadAndCalculate(): void {
+    if (!this.file) {
+      this.error = 'Seleziona un file STL prima di procedere.';
+      return;
+    }
+    const formData = new FormData();
+    formData.append('file', this.file);
+    this.loading = true;
+    this.http.post<any>('http://localhost:8000/calculate/stl', formData)
+      .subscribe({
+        next: res => {
+          this.results = res;
+          this.loading = false;
+        },
+        error: err => {
+          this.error = err.error?.detail || err.message;
+          this.loading = false;
+        }
       });
   }
 }