feat(web): vibe coding pazzo

2026-02-02 17:38:03 +01:00
parent 5a2da916fa
commit 2c658d00c1
56 changed files with 1676 additions and 1987 deletions
--- a/frontend/src/app/features/calculator/calculator-page.component.ts
+++ b/frontend/src/app/features/calculator/calculator-page.component.ts
@@ -0,0 +1,139 @@
+import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { AppTabsComponent } from '../../shared/components/app-tabs/app-tabs.component';
+import { AppCardComponent } from '../../shared/components/app-card/app-card.component';
+import { AppAlertComponent } from '../../shared/components/app-alert/app-alert.component';
+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';
+
+@Component({
+  selector: 'app-calculator-page',
+  standalone: true,
+  imports: [CommonModule, TranslateModule, AppTabsComponent, AppCardComponent, AppAlertComponent, UploadFormComponent, QuoteResultComponent],
+  template: `
+    <div class="container hero">
+      <h1>{{ 'CALC.TITLE' | translate }}</h1>
+      <p class="subtitle">{{ 'CALC.SUBTITLE' | translate }}</p>
+    </div>
+
+    <div class="container content-grid">
+      <!-- Left Column: Input -->
+      <div class="col-input">
+        <app-card>
+          <div class="tabs-wrapper">
+             <app-tabs 
+               [tabs]="clientTabs" 
+               [activeTab]="clientType()" 
+               (tabChange)="clientType.set($event)">
+             </app-tabs>
+             
+             <div class="sub-tabs">
+                <span 
+                  class="mode-switch" 
+                  [class.active]="mode() === 'easy'"
+                  (click)="mode.set('easy')">
+                  {{ 'CALC.MODE_EASY' | translate }}
+                </span>
+                <span class="divider">/</span>
+                <span 
+                  class="mode-switch" 
+                  [class.active]="mode() === 'advanced'"
+                  (click)="mode.set('advanced')">
+                  {{ 'CALC.MODE_ADVANCED' | translate }}
+                </span>
+             </div>
+          </div>
+
+          <app-upload-form
+            [clientType]="clientType()"
+            [mode]="mode()"
+            [loading]="loading()"
+            (submitRequest)="onCalculate($event)"
+          ></app-upload-form>
+        </app-card>
+      </div>
+
+      <!-- Right Column: Result or Info -->
+      <div class="col-result">
+        @if (error()) {
+          <app-alert type="error">An error occurred while calculating quote.</app-alert>
+        }
+
+        @if (result()) {
+          <app-quote-result [result]="result()!"></app-quote-result>
+        } @else {
+          <app-card>
+            <h3>Why choose PrintCalc?</h3>
+            <ul class="benefits">
+               <li>Instant AI-powered quotes</li>
+               <li>Industrial grade materials</li>
+               <li>Fast shipping worldwide</li>
+            </ul>
+          </app-card>
+        }
+      </div>
+    </div>
+  `,
+  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;
+      gap: var(--space-8);
+      @media(min-width: 768px) {
+        grid-template-columns: 1.5fr 1fr;
+      }
+    }
+
+    .tabs-wrapper {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: var(--space-6);
+      border-bottom: 1px solid var(--color-border);
+      padding-bottom: var(--space-2);
+    }
+    
+    .sub-tabs { font-size: 0.875rem; color: var(--color-text-muted); }
+    .mode-switch { cursor: pointer; &:hover { color: var(--color-text); } }
+    .mode-switch.active { font-weight: 700; color: var(--color-brand); }
+    .divider { margin: 0 var(--space-2); }
+
+    .benefits { padding-left: var(--space-4); color: var(--color-text-muted); line-height: 2; }
+  `]
+})
+export class CalculatorPageComponent {
+  clientType = signal<any>('private');
+  mode = signal<any>('easy');
+  loading = signal(false);
+  result = signal<QuoteResult | null>(null);
+  error = signal<boolean>(false);
+
+  clientTabs = [
+    { label: 'Private', value: 'private' },
+    { label: 'Business', value: 'business' }
+  ];
+
+  constructor(private estimator: QuoteEstimatorService) {}
+
+  onCalculate(req: QuoteRequest) {
+    this.loading.set(true);
+    this.error.set(false);
+    this.result.set(null);
+    
+    this.estimator.calculate(req).subscribe({
+      next: (res) => {
+        this.result.set(res);
+        this.loading.set(false);
+      },
+      error: () => {
+        this.error.set(true);
+        this.loading.set(false);
+      }
+    });
+  }
+}
--- a/frontend/src/app/features/calculator/calculator.routes.ts
+++ b/frontend/src/app/features/calculator/calculator.routes.ts
@@ -0,0 +1,6 @@
+import { Routes } from '@angular/router';
+import { CalculatorPageComponent } from './calculator-page.component';
+
+export const CALCULATOR_ROUTES: Routes = [
+  { path: '', component: CalculatorPageComponent }
+];
--- a/frontend/src/app/features/calculator/components/quote-result/quote-result.component.ts
+++ b/frontend/src/app/features/calculator/components/quote-result/quote-result.component.ts
@@ -0,0 +1,63 @@
+import { Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { AppCardComponent } from '../../../../shared/components/app-card/app-card.component';
+import { AppButtonComponent } from '../../../../shared/components/app-button/app-button.component';
+import { QuoteResult } from '../../services/quote-estimator.service';
+
+@Component({
+  selector: 'app-quote-result',
+  standalone: true,
+  imports: [CommonModule, TranslateModule, AppCardComponent, AppButtonComponent],
+  template: `
+    <app-card>
+      <h3 class="title">{{ 'CALC.RESULT' | translate }}</h3>
+      
+      <div class="result-grid">
+        <div class="item">
+          <span class="label">{{ 'CALC.COST' | translate }}</span>
+          <span class="value price">{{ result().price | currency:result().currency }}</span>
+        </div>
+        <div class="item">
+          <span class="label">{{ 'CALC.TIME' | translate }}</span>
+          <span class="value">{{ result().printTimeHours }}h</span>
+        </div>
+        <div class="item">
+          <span class="label">Material</span>
+          <span class="value">{{ result().materialUsageGrams }}g</span>
+        </div>
+      </div>
+
+      <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>
+      </div>
+    </app-card>
+  `,
+  styles: [`
+    .title { margin-bottom: var(--space-6); text-align: center; }
+    .result-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: var(--space-4);
+      margin-bottom: var(--space-6);
+    }
+    .item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: var(--space-3);
+      background: var(--color-neutral-50);
+      border-radius: var(--radius-md);
+    }
+    .item:first-child { grid-column: span 2; background: var(--color-neutral-100); }
+    .label { font-size: 0.875rem; color: var(--color-text-muted); }
+    .value { font-size: 1.25rem; font-weight: 700; }
+    .price { font-size: 2rem; color: var(--color-brand); }
+    
+    .actions { display: flex; flex-direction: column; gap: var(--space-3); }
+  `]
+})
+export class QuoteResultComponent {
+  result = input.required<QuoteResult>();
+}
--- a/frontend/src/app/features/calculator/components/upload-form/upload-form.component.ts
+++ b/frontend/src/app/features/calculator/components/upload-form/upload-form.component.ts
@@ -0,0 +1,120 @@
+import { Component, input, output, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { AppInputComponent } from '../../../../shared/components/app-input/app-input.component';
+import { AppSelectComponent } from '../../../../shared/components/app-select/app-select.component';
+import { AppDropzoneComponent } from '../../../../shared/components/app-dropzone/app-dropzone.component';
+import { AppButtonComponent } from '../../../../shared/components/app-button/app-button.component';
+import { QuoteRequest } from '../../services/quote-estimator.service';
+
+@Component({
+  selector: 'app-upload-form',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, TranslateModule, AppInputComponent, AppSelectComponent, AppDropzoneComponent, AppButtonComponent],
+  template: `
+    <form [formGroup]="form" (ngSubmit)="onSubmit()">
+      
+      <div class="section">
+        <app-dropzone 
+          [label]="'CALC.UPLOAD_LABEL' | translate" 
+          [subtext]="'CALC.UPLOAD_SUB' | translate"
+          (fileDropped)="onFileDropped($event)">
+        </app-dropzone>
+        @if (form.get('file')?.invalid && form.get('file')?.touched) {
+          <div class="error-msg">File required</div>
+        }
+      </div>
+
+      <div class="grid">
+        <app-select
+          formControlName="material"
+          [label]="'CALC.MATERIAL' | translate"
+          [options]="materials"
+        ></app-select>
+
+        <app-select
+          formControlName="quality"
+          [label]="'CALC.QUALITY' | translate"
+          [options]="qualities"
+        ></app-select>
+      </div>
+
+      <app-input
+        formControlName="quantity"
+        type="number"
+        [label]="'CALC.QUANTITY' | translate"
+      ></app-input>
+
+      @if (mode() === 'advanced') {
+        <app-input
+          formControlName="notes"
+          [label]="'CALC.NOTES' | translate"
+          placeholder="Specific instructions..."
+        ></app-input>
+      }
+
+      <div class="actions">
+        <app-button 
+          type="submit" 
+          [disabled]="form.invalid || loading()" 
+          [fullWidth]="true">
+          {{ loading() ? '...' : ('CALC.CALCULATE' | translate) }}
+        </app-button>
+      </div>
+    </form>
+  `,
+  styles: [`
+    .section { margin-bottom: var(--space-6); }
+    .grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
+    .actions { margin-top: var(--space-6); }
+    .error-msg { color: var(--color-danger-500); font-size: 0.875rem; margin-top: var(--space-2); text-align: center; }
+  `]
+})
+export class UploadFormComponent {
+  clientType = input<'business' | 'private'>('private');
+  mode = input<'easy' | 'advanced'>('easy');
+  loading = input<boolean>(false);
+  submitRequest = output<QuoteRequest>();
+
+  form: FormGroup;
+  
+  materials = [
+    { label: 'PLA (Standard)', value: 'PLA' },
+    { label: 'PETG (Durable)', value: 'PETG' },
+    { label: 'TPU (Flexible)', value: 'TPU' }
+  ];
+
+  qualities = [
+    { label: 'Draft (Fast)', value: 'Draft' },
+    { label: 'Standard', value: 'Standard' },
+    { label: 'High Detail', value: 'High' }
+  ];
+
+  constructor(private fb: FormBuilder) {
+    this.form = this.fb.group({
+      file: [null, Validators.required],
+      material: ['PLA', Validators.required],
+      quality: ['Standard', Validators.required],
+      quantity: [1, [Validators.required, Validators.min(1)]],
+      notes: ['']
+    });
+  }
+
+  onFileDropped(file: File) {
+    this.form.patchValue({ file });
+    this.form.get('file')?.markAsTouched();
+  }
+
+  onSubmit() {
+    if (this.form.valid) {
+      this.submitRequest.emit({
+        ...this.form.value,
+        clientType: this.clientType(),
+        mode: this.mode()
+      });
+    } else {
+      this.form.markAllAsTouched();
+    }
+  }
+}
--- a/frontend/src/app/features/calculator/services/quote-estimator.service.ts
+++ b/frontend/src/app/features/calculator/services/quote-estimator.service.ts
@@ -0,0 +1,44 @@
+import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+import { delay } from 'rxjs/operators';
+
+export interface QuoteRequest {
+  file: File;
+  material: string;
+  quality: string;
+  quantity: number;
+  notes?: string;
+  clientType: 'business' | 'private';
+  mode: 'easy' | 'advanced';
+}
+
+export interface QuoteResult {
+  price: number;
+  currency: string;
+  printTimeHours: number;
+  materialUsageGrams: number;
+  setupCost: number;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class QuoteEstimatorService {
+  
+  calculate(request: QuoteRequest): Observable<QuoteResult> {
+    // Mock logic
+    const basePrice = request.clientType === 'business' ? 50 : 20;
+    const materialCost = request.material === 'PETG' ? 1.5 : (request.material === 'TPU' ? 2 : 1);
+    const qualityMult = request.quality === 'High' ? 1.5 : (request.quality === 'Draft' ? 0.8 : 1);
+    
+    const estimatedPrice = (basePrice * materialCost * qualityMult * request.quantity) + 10; // +10 setup
+    
+    return of({
+      price: Math.round(estimatedPrice * 100) / 100,
+      currency: 'EUR',
+      printTimeHours: Math.floor(Math.random() * 24) + 2,
+      materialUsageGrams: Math.floor(Math.random() * 500) + 50,
+      setupCost: 10
+    }).pipe(delay(1500)); // Simulate network latency
+  }
+}