feat(web): vibe coding pazzo
This commit is contained in:
@@ -1,59 +1,53 @@
|
||||
# Frontend
|
||||
# Print Calculator Frontend
|
||||
|
||||
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.12.
|
||||
This is a modern Angular application designed with a Clean Architecture approach (Core, Shared, Features) and Design Tokens for easy theming.
|
||||
|
||||
## Development server
|
||||
## Project Structure
|
||||
|
||||
To start a local development server, run:
|
||||
- **Core**: Singleton services, global layout components (Navbar, Footer), guards.
|
||||
- **Shared**: Reusable dumb UI components (Buttons, Cards, Inputs). No business logic.
|
||||
- **Features**: Lazy-loaded modules (Calculator, Shop, About). Each contains its own pages, components, and services.
|
||||
- **Styles**: Design tokens and theming layer.
|
||||
|
||||
## Getting Started
|
||||
|
||||
1. **Install Dependencies**:
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
2. **Run Development Server**:
|
||||
```bash
|
||||
ng serve
|
||||
```
|
||||
Navigate to `http://localhost:4200/`.
|
||||
|
||||
Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
|
||||
## Theming
|
||||
|
||||
## Code scaffolding
|
||||
The application uses CSS Variables defined in `src/styles/tokens.scss` and mapped in `src/styles/theme.scss`.
|
||||
|
||||
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
|
||||
- **Change Colors**: Edit `src/styles/tokens.scss`.
|
||||
- **Create New Theme**:
|
||||
1. Duplicate `src/styles/theme.scss` (e.g., `theme-dark.scss`).
|
||||
2. Override the semantic variables (e.g., `--color-bg`, `--color-text`).
|
||||
3. Load the new theme file or switch classes on the body tag.
|
||||
|
||||
```bash
|
||||
ng generate component component-name
|
||||
## Adding a New Feature
|
||||
|
||||
1. **Create Directory**: `src/app/features/my-feature`.
|
||||
2. **Create Routes**: Create `my-feature.routes.ts` exporting a `Routes` array.
|
||||
3. **Register Route**: Add to `src/app/app.routes.ts` using lazy loading:
|
||||
```typescript
|
||||
{
|
||||
path: 'my-feature',
|
||||
loadChildren: () => import('./features/my-feature/my-feature.routes').then(m => m.MY_FEATURE_ROUTES)
|
||||
}
|
||||
```
|
||||
|
||||
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
|
||||
## Internationalization (i18n)
|
||||
|
||||
```bash
|
||||
ng generate --help
|
||||
```
|
||||
Translations are stored in `src/assets/i18n/`.
|
||||
- `it.json` (Italian - Default)
|
||||
- `en.json` (English)
|
||||
|
||||
## Building
|
||||
|
||||
To build the project run:
|
||||
|
||||
```bash
|
||||
ng build
|
||||
```
|
||||
|
||||
This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
|
||||
|
||||
## Running unit tests
|
||||
|
||||
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
||||
|
||||
```bash
|
||||
ng test
|
||||
```
|
||||
|
||||
## Running end-to-end tests
|
||||
|
||||
For end-to-end (e2e) testing, run:
|
||||
|
||||
```bash
|
||||
ng e2e
|
||||
```
|
||||
|
||||
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
|
||||
|
||||
## Additional Resources
|
||||
|
||||
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
|
||||
To add a language, create the JSON file and update `LanguageService` in `src/app/core/services/language.service.ts`.
|
||||
28
frontend/package-lock.json
generated
28
frontend/package-lock.json
generated
@@ -17,6 +17,8 @@
|
||||
"@angular/platform-browser": "^19.2.18",
|
||||
"@angular/platform-browser-dynamic": "^19.2.18",
|
||||
"@angular/router": "^19.2.18",
|
||||
"@ngx-translate/core": "^17.0.0",
|
||||
"@ngx-translate/http-loader": "^17.0.0",
|
||||
"@types/three": "^0.182.0",
|
||||
"rxjs": "~7.8.0",
|
||||
"three": "^0.182.0",
|
||||
@@ -4305,6 +4307,32 @@
|
||||
"webpack": "^5.54.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@ngx-translate/core": {
|
||||
"version": "17.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@ngx-translate/core/-/core-17.0.0.tgz",
|
||||
"integrity": "sha512-Rft2D5ns2pq4orLZjEtx1uhNuEBerUdpFUG1IcqtGuipj6SavgB8SkxtNQALNDA+EVlvsNCCjC2ewZVtUeN6rg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/common": ">=16",
|
||||
"@angular/core": ">=16"
|
||||
}
|
||||
},
|
||||
"node_modules/@ngx-translate/http-loader": {
|
||||
"version": "17.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@ngx-translate/http-loader/-/http-loader-17.0.0.tgz",
|
||||
"integrity": "sha512-hgS8sa0ARjH9ll3PhkLTufeVXNI2DNR2uFKDhBgq13siUXzzVr/a31M6zgecrtwbA34iaBV01hsTMbMS8V7iIw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/common": ">=16",
|
||||
"@angular/core": ">=16"
|
||||
}
|
||||
},
|
||||
"node_modules/@nodelib/fs.scandir": {
|
||||
"version": "2.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
|
||||
|
||||
@@ -22,6 +22,8 @@
|
||||
"@angular/platform-browser": "^19.2.18",
|
||||
"@angular/platform-browser-dynamic": "^19.2.18",
|
||||
"@angular/router": "^19.2.18",
|
||||
"@ngx-translate/core": "^17.0.0",
|
||||
"@ngx-translate/http-loader": "^17.0.0",
|
||||
"@types/three": "^0.182.0",
|
||||
"rxjs": "~7.8.0",
|
||||
"three": "^0.182.0",
|
||||
|
||||
@@ -1,29 +0,0 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
describe('AppComponent', () => {
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [AppComponent],
|
||||
}).compileComponents();
|
||||
});
|
||||
|
||||
it('should create the app', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
});
|
||||
|
||||
it(`should have the 'frontend' title`, () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app.title).toEqual('frontend');
|
||||
});
|
||||
|
||||
it('should render title', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.nativeElement as HTMLElement;
|
||||
expect(compiled.querySelector('h1')?.textContent).toContain('Hello, frontend');
|
||||
});
|
||||
});
|
||||
@@ -5,9 +5,6 @@ import { RouterOutlet } from '@angular/router';
|
||||
selector: 'app-root',
|
||||
standalone: true,
|
||||
imports: [RouterOutlet],
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.scss']
|
||||
template: `<router-outlet></router-outlet>`
|
||||
})
|
||||
export class AppComponent {
|
||||
title = 'frontend';
|
||||
}
|
||||
export class AppComponent {}
|
||||
|
||||
@@ -1,28 +1,23 @@
|
||||
import { ApplicationConfig, LOCALE_ID, provideZoneChangeDetection } from '@angular/core';
|
||||
import { provideRouter } from '@angular/router';
|
||||
|
||||
import { ApplicationConfig, provideZoneChangeDetection, importProvidersFrom } from '@angular/core';
|
||||
import { provideRouter, withComponentInputBinding, withViewTransitions } from '@angular/router';
|
||||
import { routes } from './app.routes';
|
||||
import { provideHttpClient } from '@angular/common/http';
|
||||
|
||||
const resolveLocale = () => {
|
||||
if (typeof navigator === 'undefined') {
|
||||
return 'de-CH';
|
||||
}
|
||||
const languages = navigator.languages ?? [];
|
||||
if (navigator.language === 'it-CH' || languages.includes('it-CH')) {
|
||||
return 'it-CH';
|
||||
}
|
||||
if (navigator.language === 'de-CH' || languages.includes('de-CH')) {
|
||||
return 'de-CH';
|
||||
}
|
||||
return 'de-CH';
|
||||
};
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { provideTranslateHttpLoader } from '@ngx-translate/http-loader';
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [
|
||||
provideZoneChangeDetection({ eventCoalescing: true }),
|
||||
provideRouter(routes),
|
||||
provideRouter(routes, withComponentInputBinding(), withViewTransitions()),
|
||||
provideHttpClient(),
|
||||
{ provide: LOCALE_ID, useFactory: resolveLocale }
|
||||
provideTranslateHttpLoader({
|
||||
prefix: './assets/i18n/',
|
||||
suffix: '.json'
|
||||
}),
|
||||
importProvidersFrom(
|
||||
TranslateModule.forRoot({
|
||||
defaultLanguage: 'it'
|
||||
})
|
||||
)
|
||||
]
|
||||
};
|
||||
@@ -1,13 +1,23 @@
|
||||
import { Routes } from '@angular/router';
|
||||
import { HomeComponent } from './home/home.component';
|
||||
import { BasicQuoteComponent } from './quote/basic-quote/basic-quote.component';
|
||||
import { AdvancedQuoteComponent } from './quote/advanced-quote/advanced-quote.component';
|
||||
import { ContactComponent } from './contact/contact.component';
|
||||
|
||||
export const routes: Routes = [
|
||||
{ path: '', component: HomeComponent },
|
||||
{ path: 'quote/basic', component: BasicQuoteComponent },
|
||||
{ path: 'quote/advanced', component: AdvancedQuoteComponent },
|
||||
{ path: 'contact', component: ContactComponent },
|
||||
{ path: '**', redirectTo: '' }
|
||||
{
|
||||
path: '',
|
||||
loadComponent: () => import('./core/layout/layout.component').then(m => m.LayoutComponent),
|
||||
children: [
|
||||
{ path: '', redirectTo: 'cal', pathMatch: 'full' },
|
||||
{
|
||||
path: 'cal',
|
||||
loadChildren: () => import('./features/calculator/calculator.routes').then(m => m.CALCULATOR_ROUTES)
|
||||
},
|
||||
{
|
||||
path: 'shop',
|
||||
loadChildren: () => import('./features/shop/shop.routes').then(m => m.SHOP_ROUTES)
|
||||
},
|
||||
{
|
||||
path: 'about',
|
||||
loadChildren: () => import('./features/about/about.routes').then(m => m.ABOUT_ROUTES)
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
@@ -1,69 +0,0 @@
|
||||
<div class="calculator-container">
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title>3D Print Quote Calculator</mat-card-title>
|
||||
<mat-card-subtitle>Bambu Lab A1 Estimation</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
|
||||
<mat-card-content>
|
||||
<div class="upload-section">
|
||||
<input type="file" (change)="onFileSelected($event)" accept=".stl" #fileInput style="display: none;">
|
||||
<button mat-raised-button color="primary" (click)="fileInput.click()">
|
||||
{{ file ? file.name : 'Select STL File' }}
|
||||
</button>
|
||||
|
||||
<button mat-raised-button color="accent"
|
||||
[disabled]="!file || loading"
|
||||
(click)="uploadAndCalculate()">
|
||||
Calculate Quote
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div *ngIf="loading" class="spinner-container">
|
||||
<mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
|
||||
<p>Slicing model... this may take a minute...</p>
|
||||
</div>
|
||||
|
||||
<div *ngIf="error" class="error-message">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<div *ngIf="results" class="results-section">
|
||||
<div class="total-price">
|
||||
<h3>Total Estimate: {{ results?.cost?.total | currency:'CHF' }}</h3>
|
||||
</div>
|
||||
|
||||
<div class="details-grid">
|
||||
<div class="detail-item">
|
||||
<span class="label">Print Time:</span>
|
||||
<span class="value">{{ results?.print_time_formatted }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label">Material Used:</span>
|
||||
<span class="value">{{ results?.material_grams | number:'1.1-1' }} g</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Cost Breakdown</h4>
|
||||
<ul class="breakdown-list">
|
||||
<li>
|
||||
<span>Material</span>
|
||||
<span>{{ results?.cost?.material | currency:'CHF' }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>Machine Time</span>
|
||||
<span>{{ results?.cost?.machine | currency:'CHF' }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>Energy</span>
|
||||
<span>{{ results?.cost?.energy | currency:'CHF' }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>Service/Markup</span>
|
||||
<span>{{ results?.cost?.markup | currency:'CHF' }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
@@ -1,23 +0,0 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { CalculatorComponent } from './calculator.component';
|
||||
|
||||
describe('CalculatorComponent', () => {
|
||||
let component: CalculatorComponent;
|
||||
let fixture: ComponentFixture<CalculatorComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [CalculatorComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(CalculatorComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -1,79 +0,0 @@
|
||||
// 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 { MatButtonModule } from '@angular/material/button';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
|
||||
interface QuoteResponse {
|
||||
printer: string;
|
||||
print_time_formatted: string;
|
||||
material_grams: number;
|
||||
cost: {
|
||||
material: number;
|
||||
machine: number;
|
||||
energy: number;
|
||||
markup: number;
|
||||
total: number;
|
||||
};
|
||||
}
|
||||
|
||||
import { environment } from '../../environments/environment';
|
||||
|
||||
@Component({
|
||||
selector: 'app-calculator',
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
MatCardModule,
|
||||
MatButtonModule,
|
||||
MatProgressSpinnerModule
|
||||
],
|
||||
templateUrl: './calculator.component.html',
|
||||
styleUrls: ['./calculator.component.scss']
|
||||
})
|
||||
export class CalculatorComponent {
|
||||
file: File | null = null;
|
||||
results: QuoteResponse | null = null;
|
||||
error = '';
|
||||
loading = false;
|
||||
|
||||
constructor(private http: HttpClient) {}
|
||||
|
||||
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 = 'Please select a file first.';
|
||||
return;
|
||||
}
|
||||
const formData = new FormData();
|
||||
formData.append('file', this.file);
|
||||
this.loading = true;
|
||||
this.error = '';
|
||||
this.results = null;
|
||||
|
||||
this.http.post<QuoteResponse>(`${environment.apiUrl}/calculate/stl`, formData)
|
||||
.subscribe({
|
||||
next: res => {
|
||||
this.results = res;
|
||||
this.loading = false;
|
||||
},
|
||||
error: err => {
|
||||
console.error(err);
|
||||
this.error = err.error?.detail || "An error occurred during calculation.";
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,218 +0,0 @@
|
||||
import { Component, ElementRef, Input, OnChanges, OnDestroy, OnInit, ViewChild, SimpleChanges } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import * as THREE from 'three';
|
||||
import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js';
|
||||
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
|
||||
|
||||
@Component({
|
||||
selector: 'app-stl-viewer',
|
||||
standalone: true,
|
||||
imports: [CommonModule],
|
||||
template: `
|
||||
<div class="viewer-container" #rendererContainer>
|
||||
<div *ngIf="isLoading" class="loading-overlay">
|
||||
<span class="material-icons spin">autorenew</span>
|
||||
<p>Loading 3D Model...</p>
|
||||
</div>
|
||||
<div class="dimensions-overlay" *ngIf="dimensions">
|
||||
<p>Size: {{ dimensions.x | number:'1.1-1' }} x {{ dimensions.y | number:'1.1-1' }} x {{ dimensions.z | number:'1.1-1' }} mm</p>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.viewer-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 300px;
|
||||
position: relative;
|
||||
background: #0f172a; /* Match app bg approx */
|
||||
overflow: hidden;
|
||||
border-radius: inherit;
|
||||
}
|
||||
.loading-overlay {
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(15, 23, 42, 0.8);
|
||||
color: white;
|
||||
z-index: 10;
|
||||
}
|
||||
.spin {
|
||||
animation: spin 1s linear infinite;
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
@keyframes spin { 100% { transform: rotate(360deg); } }
|
||||
|
||||
.dimensions-overlay {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
background: rgba(0,0,0,0.6);
|
||||
color: white;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class StlViewerComponent implements OnInit, OnDestroy, OnChanges {
|
||||
@Input() file: File | null = null;
|
||||
@ViewChild('rendererContainer', { static: true }) rendererContainer!: ElementRef;
|
||||
|
||||
isLoading = false;
|
||||
dimensions: { x: number, y: number, z: number } | null = null;
|
||||
|
||||
private scene!: THREE.Scene;
|
||||
private camera!: THREE.PerspectiveCamera;
|
||||
private renderer!: THREE.WebGLRenderer;
|
||||
private mesh!: THREE.Mesh;
|
||||
private controls!: OrbitControls;
|
||||
private animationId: number | null = null;
|
||||
|
||||
ngOnInit() {
|
||||
this.initThree();
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
if (changes['file'] && this.file) {
|
||||
this.loadSTL(this.file);
|
||||
}
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.stopAnimation();
|
||||
if (this.renderer) {
|
||||
this.renderer.dispose();
|
||||
}
|
||||
if (this.mesh) {
|
||||
this.mesh.geometry.dispose();
|
||||
(this.mesh.material as THREE.Material).dispose();
|
||||
}
|
||||
}
|
||||
|
||||
private initThree() {
|
||||
const container = this.rendererContainer.nativeElement;
|
||||
const width = container.clientWidth;
|
||||
const height = container.clientHeight;
|
||||
|
||||
// Scene
|
||||
this.scene = new THREE.Scene();
|
||||
this.scene.background = new THREE.Color(0x1e293b); // Slate 800
|
||||
|
||||
// Camera
|
||||
this.camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
|
||||
this.camera.position.set(100, 100, 100);
|
||||
|
||||
// Renderer
|
||||
this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
|
||||
this.renderer.setSize(width, height);
|
||||
this.renderer.setPixelRatio(window.devicePixelRatio);
|
||||
container.appendChild(this.renderer.domElement);
|
||||
|
||||
// Controls
|
||||
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
|
||||
this.controls.enableDamping = true;
|
||||
this.controls.dampingFactor = 0.05;
|
||||
this.controls.autoRotate = true;
|
||||
this.controls.autoRotateSpeed = 2.0;
|
||||
|
||||
// Lights
|
||||
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
|
||||
this.scene.add(ambientLight);
|
||||
|
||||
const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
|
||||
dirLight.position.set(50, 50, 50);
|
||||
this.scene.add(dirLight);
|
||||
|
||||
const backLight = new THREE.DirectionalLight(0xffffff, 0.4);
|
||||
backLight.position.set(-50, -50, -50);
|
||||
this.scene.add(backLight);
|
||||
|
||||
// Grid (Printer Bed attempt)
|
||||
const gridHelper = new THREE.GridHelper(256, 20, 0x4f46e5, 0x334155);
|
||||
this.scene.add(gridHelper);
|
||||
|
||||
// Resize listener
|
||||
const resizeObserver = new ResizeObserver(() => this.onWindowResize());
|
||||
resizeObserver.observe(container);
|
||||
|
||||
this.animate();
|
||||
}
|
||||
|
||||
private loadSTL(file: File) {
|
||||
this.isLoading = true;
|
||||
|
||||
// Remove previous mesh
|
||||
if (this.mesh) {
|
||||
this.scene.remove(this.mesh);
|
||||
this.mesh.geometry.dispose();
|
||||
(this.mesh.material as THREE.Material).dispose();
|
||||
}
|
||||
|
||||
const loader = new STLLoader();
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onload = (event) => {
|
||||
const buffer = event.target?.result as ArrayBuffer;
|
||||
const geometry = loader.parse(buffer);
|
||||
|
||||
geometry.computeBoundingBox();
|
||||
const center = new THREE.Vector3();
|
||||
geometry.boundingBox?.getCenter(center);
|
||||
geometry.center(); // Center geometry
|
||||
|
||||
// Calculate dimensions
|
||||
const size = new THREE.Vector3();
|
||||
geometry.boundingBox?.getSize(size);
|
||||
this.dimensions = { x: size.x, y: size.y, z: size.z };
|
||||
|
||||
// Re-position camera based on size
|
||||
const maxDim = Math.max(size.x, size.y, size.z);
|
||||
this.camera.position.set(maxDim * 1.5, maxDim * 1.5, maxDim * 1.5);
|
||||
this.camera.lookAt(0, 0, 0);
|
||||
|
||||
// Material
|
||||
const material = new THREE.MeshStandardMaterial({
|
||||
color: 0x6366f1, // Indigo 500
|
||||
roughness: 0.5,
|
||||
metalness: 0.1
|
||||
});
|
||||
|
||||
this.mesh = new THREE.Mesh(geometry, material);
|
||||
this.mesh.rotation.x = -Math.PI / 2; // STL usually needs this
|
||||
this.scene.add(this.mesh);
|
||||
|
||||
this.isLoading = false;
|
||||
};
|
||||
|
||||
reader.readAsArrayBuffer(file);
|
||||
}
|
||||
|
||||
private animate() {
|
||||
this.animationId = requestAnimationFrame(() => this.animate());
|
||||
this.controls.update();
|
||||
this.renderer.render(this.scene, this.camera);
|
||||
}
|
||||
|
||||
private stopAnimation() {
|
||||
if (this.animationId !== null) {
|
||||
cancelAnimationFrame(this.animationId);
|
||||
}
|
||||
}
|
||||
|
||||
private onWindowResize() {
|
||||
if (!this.rendererContainer) return;
|
||||
const container = this.rendererContainer.nativeElement;
|
||||
const width = container.clientWidth;
|
||||
const height = container.clientHeight;
|
||||
|
||||
this.camera.aspect = width / height;
|
||||
this.camera.updateProjectionMatrix();
|
||||
this.renderer.setSize(width, height);
|
||||
}
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
<div class="container fade-in">
|
||||
<header class="section-header">
|
||||
<a routerLink="/" class="back-link">
|
||||
<span class="material-icons">arrow_back</span> Back
|
||||
</a>
|
||||
<h1>Contact Me</h1>
|
||||
<p>Have a special project? Let's talk.</p>
|
||||
</header>
|
||||
|
||||
<div class="contact-card card">
|
||||
<div class="contact-info">
|
||||
<div class="info-item">
|
||||
<span class="material-icons">email</span>
|
||||
<div>
|
||||
<h3>Email</h3>
|
||||
<p>joe@example.com</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-item">
|
||||
<span class="material-icons">location_on</span>
|
||||
<div>
|
||||
<h3>Location</h3>
|
||||
<p>Milan, Italy</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<form class="contact-form" (submit)="onSubmit($event)">
|
||||
<div class="form-group">
|
||||
<label>Your Name</label>
|
||||
<input type="text" placeholder="John Doe">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Email Address</label>
|
||||
<input type="email" placeholder="john@example.com">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Message</label>
|
||||
<textarea rows="5" placeholder="Tell me about your project..."></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-secondary btn-block">Send Message</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,97 +0,0 @@
|
||||
.section-header {
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
|
||||
.back-link {
|
||||
position: absolute;
|
||||
left: 2rem;
|
||||
top: 2rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: var(--text-muted);
|
||||
|
||||
.material-icons { margin-right: 0.5rem; }
|
||||
&:hover { color: var(--primary-color); }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.back-link {
|
||||
position: static;
|
||||
display: block;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contact-card {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
|
||||
.material-icons {
|
||||
color: var(--secondary-color);
|
||||
background: rgba(236, 72, 153, 0.1);
|
||||
padding: 0.5rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
h3 { margin: 0 0 0.25rem 0; font-size: 1rem; }
|
||||
p { margin: 0; color: var(--text-muted); }
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: var(--border-color);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
background: var(--bg-color);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-main);
|
||||
font-family: inherit;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--secondary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 0.4s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterLink } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-contact',
|
||||
standalone: true,
|
||||
imports: [CommonModule, RouterLink],
|
||||
templateUrl: './contact.component.html',
|
||||
styleUrls: ['./contact.component.scss']
|
||||
})
|
||||
export class ContactComponent {
|
||||
onSubmit(event: Event) {
|
||||
event.preventDefault();
|
||||
alert("Thanks for your message! This is a demo form.");
|
||||
}
|
||||
}
|
||||
65
frontend/src/app/core/layout/footer.component.ts
Normal file
65
frontend/src/app/core/layout/footer.component.ts
Normal file
@@ -0,0 +1,65 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { RouterLink } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-footer',
|
||||
standalone: true,
|
||||
imports: [TranslateModule, RouterLink],
|
||||
template: `
|
||||
<footer class="footer">
|
||||
<div class="container footer-inner">
|
||||
<div class="col">
|
||||
<span class="brand">PrintCalc</span>
|
||||
<p class="copyright">© 2026 Print Calculator Inc.</p>
|
||||
</div>
|
||||
|
||||
<div class="col links">
|
||||
<a routerLink="/privacy">{{ 'FOOTER.PRIVACY' | translate }}</a>
|
||||
<a routerLink="/terms">{{ 'FOOTER.TERMS' | translate }}</a>
|
||||
<a routerLink="/about">{{ 'FOOTER.CONTACT' | translate }}</a>
|
||||
</div>
|
||||
|
||||
<div class="col social">
|
||||
<!-- Social Placeholders -->
|
||||
<div class="social-icon"></div>
|
||||
<div class="social-icon"></div>
|
||||
<div class="social-icon"></div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
`,
|
||||
styles: [`
|
||||
.footer {
|
||||
background-color: var(--color-neutral-900);
|
||||
color: var(--color-neutral-300);
|
||||
padding: var(--space-8) 0;
|
||||
margin-top: auto; /* Push to bottom if content is short */
|
||||
}
|
||||
.footer-inner {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.brand { font-weight: 700; color: white; display: block; margin-bottom: var(--space-2); }
|
||||
.copyright { font-size: 0.875rem; color: var(--color-secondary-500); margin: 0; }
|
||||
|
||||
.links {
|
||||
display: flex;
|
||||
gap: var(--space-6);
|
||||
a {
|
||||
color: var(--color-neutral-300);
|
||||
font-size: 0.875rem;
|
||||
&:hover { color: white; text-decoration: underline; }
|
||||
}
|
||||
}
|
||||
|
||||
.social { display: flex; gap: var(--space-3); }
|
||||
.social-icon {
|
||||
width: 24px; height: 24px;
|
||||
background-color: var(--color-neutral-800);
|
||||
border-radius: 50%;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class FooterComponent {}
|
||||
31
frontend/src/app/core/layout/layout.component.ts
Normal file
31
frontend/src/app/core/layout/layout.component.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { RouterOutlet } from '@angular/router';
|
||||
import { NavbarComponent } from './navbar.component';
|
||||
import { FooterComponent } from './footer.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-layout',
|
||||
standalone: true,
|
||||
imports: [RouterOutlet, NavbarComponent, FooterComponent],
|
||||
template: `
|
||||
<div class="layout-wrapper">
|
||||
<app-navbar></app-navbar>
|
||||
<main class="main-content">
|
||||
<router-outlet></router-outlet>
|
||||
</main>
|
||||
<app-footer></app-footer>
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.layout-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.main-content {
|
||||
flex: 1;
|
||||
padding-bottom: var(--space-12);
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class LayoutComponent {}
|
||||
111
frontend/src/app/core/layout/navbar.component.ts
Normal file
111
frontend/src/app/core/layout/navbar.component.ts
Normal file
@@ -0,0 +1,111 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { RouterLink, RouterLinkActive } from '@angular/router';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { LanguageService } from '../services/language.service';
|
||||
import { AppButtonComponent } from '../../shared/components/app-button/app-button.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-navbar',
|
||||
standalone: true,
|
||||
imports: [RouterLink, RouterLinkActive, TranslateModule],
|
||||
template: `
|
||||
<header class="navbar">
|
||||
<div class="container navbar-inner">
|
||||
<a routerLink="/" class="brand">Print<span class="highlight">Calc</span></a>
|
||||
|
||||
<nav class="nav-links">
|
||||
<a routerLink="/cal" routerLinkActive="active" [routerLinkActiveOptions]="{exact: false}">{{ 'NAV.CALCULATOR' | translate }}</a>
|
||||
<a routerLink="/shop" routerLinkActive="active">{{ 'NAV.SHOP' | translate }}</a>
|
||||
<a routerLink="/about" routerLinkActive="active">{{ 'NAV.ABOUT' | translate }}</a>
|
||||
</nav>
|
||||
|
||||
<div class="actions">
|
||||
<button class="lang-switch" (click)="toggleLang()">
|
||||
{{ langService.currentLang() === 'it' ? 'EN' : 'IT' }}
|
||||
</button>
|
||||
|
||||
<div class="icon-placeholder">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
`,
|
||||
styles: [`
|
||||
.navbar {
|
||||
height: 64px;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
background-color: var(--color-bg-card);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.navbar-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.brand {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-text);
|
||||
text-decoration: none;
|
||||
}
|
||||
.highlight { color: var(--color-brand); }
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: var(--space-6);
|
||||
|
||||
a {
|
||||
color: var(--color-text-muted);
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover, &.active {
|
||||
color: var(--color-brand);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.lang-switch {
|
||||
background: none;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 2px 6px;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-muted);
|
||||
&:hover { color: var(--color-text); border-color: var(--color-text); }
|
||||
}
|
||||
|
||||
.icon-placeholder {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--color-neutral-100);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class NavbarComponent {
|
||||
constructor(public langService: LanguageService) {}
|
||||
|
||||
toggleLang() {
|
||||
const newLang = this.langService.currentLang() === 'it' ? 'en' : 'it';
|
||||
this.langService.switchLang(newLang);
|
||||
}
|
||||
}
|
||||
20
frontend/src/app/core/services/language.service.ts
Normal file
20
frontend/src/app/core/services/language.service.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
import { Injectable, signal } from '@angular/core';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class LanguageService {
|
||||
currentLang = signal('it');
|
||||
|
||||
constructor(private translate: TranslateService) {
|
||||
this.translate.addLangs(['it', 'en']);
|
||||
this.translate.setDefaultLang('it');
|
||||
this.translate.use('it');
|
||||
}
|
||||
|
||||
switchLang(lang: string) {
|
||||
this.translate.use(lang);
|
||||
this.currentLang.set(lang);
|
||||
}
|
||||
}
|
||||
54
frontend/src/app/features/about/about-page.component.ts
Normal file
54
frontend/src/app/features/about/about-page.component.ts
Normal file
@@ -0,0 +1,54 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { ContactFormComponent } from './components/contact-form/contact-form.component';
|
||||
import { AppCardComponent } from '../../shared/components/app-card/app-card.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-about-page',
|
||||
standalone: true,
|
||||
imports: [TranslateModule, ContactFormComponent, AppCardComponent],
|
||||
template: `
|
||||
<div class="container hero">
|
||||
<h1>{{ 'ABOUT.TITLE' | translate }}</h1>
|
||||
</div>
|
||||
|
||||
<div class="container content">
|
||||
<div class="info">
|
||||
<h2>Our Mission</h2>
|
||||
<p>
|
||||
We make high-quality 3D printing accessible to everyone.
|
||||
Whether you are a hobbyist or an industrial designer,
|
||||
PrintCalc provides instant quotes and professional production.
|
||||
</p>
|
||||
|
||||
<h3>How it Works</h3>
|
||||
<ol class="steps">
|
||||
<li>Upload your STL file</li>
|
||||
<li>Choose material & quality</li>
|
||||
<li>Get instant quote</li>
|
||||
<li>We print & ship</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="contact">
|
||||
<app-card>
|
||||
<h2>{{ 'ABOUT.CONTACT_US' | translate }}</h2>
|
||||
<app-contact-form></app-contact-form>
|
||||
</app-card>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.hero { padding: var(--space-8) 0; text-align: center; }
|
||||
.content {
|
||||
display: grid;
|
||||
gap: var(--space-12);
|
||||
@media(min-width: 768px) { grid-template-columns: 1fr 1fr; }
|
||||
}
|
||||
.steps {
|
||||
padding-left: var(--space-4);
|
||||
li { margin-bottom: var(--space-2); color: var(--color-text-muted); }
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class AboutPageComponent {}
|
||||
6
frontend/src/app/features/about/about.routes.ts
Normal file
6
frontend/src/app/features/about/about.routes.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import { Routes } from '@angular/router';
|
||||
import { AboutPageComponent } from './about-page.component';
|
||||
|
||||
export const ABOUT_ROUTES: Routes = [
|
||||
{ path: '', component: AboutPageComponent }
|
||||
];
|
||||
@@ -0,0 +1,66 @@
|
||||
import { Component, 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 { AppButtonComponent } from '../../../../shared/components/app-button/app-button.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-contact-form',
|
||||
standalone: true,
|
||||
imports: [CommonModule, ReactiveFormsModule, TranslateModule, AppInputComponent, AppButtonComponent],
|
||||
template: `
|
||||
<form [formGroup]="form" (ngSubmit)="onSubmit()">
|
||||
<app-input formControlName="name" label="Name" placeholder="Your Name"></app-input>
|
||||
<app-input formControlName="email" type="email" label="Email" placeholder="your@email.com"></app-input>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Message</label>
|
||||
<textarea formControlName="message" class="form-control" rows="4"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<app-button type="submit" [disabled]="form.invalid || sent()">
|
||||
{{ sent() ? 'Sent!' : ('ABOUT.SEND' | translate) }}
|
||||
</app-button>
|
||||
</div>
|
||||
</form>
|
||||
`,
|
||||
styles: [`
|
||||
.form-group { display: flex; flex-direction: column; margin-bottom: var(--space-4); }
|
||||
label { font-size: 0.875rem; font-weight: 500; margin-bottom: var(--space-2); color: var(--color-text); }
|
||||
.form-control {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
width: 100%;
|
||||
background: var(--color-bg-card);
|
||||
color: var(--color-text);
|
||||
font-family: inherit;
|
||||
&:focus { outline: none; border-color: var(--color-brand); }
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class ContactFormComponent {
|
||||
form: FormGroup;
|
||||
sent = signal(false);
|
||||
|
||||
constructor(private fb: FormBuilder) {
|
||||
this.form = this.fb.group({
|
||||
name: ['', Validators.required],
|
||||
email: ['', [Validators.required, Validators.email]],
|
||||
message: ['', Validators.required]
|
||||
});
|
||||
}
|
||||
|
||||
onSubmit() {
|
||||
if (this.form.valid) {
|
||||
// Mock submit
|
||||
this.sent.set(true);
|
||||
setTimeout(() => {
|
||||
this.sent.set(false);
|
||||
this.form.reset();
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import { Routes } from '@angular/router';
|
||||
import { CalculatorPageComponent } from './calculator-page.component';
|
||||
|
||||
export const CALCULATOR_ROUTES: Routes = [
|
||||
{ path: '', component: CalculatorPageComponent }
|
||||
];
|
||||
@@ -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>();
|
||||
}
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
import { Component, input } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import { Product } from '../../services/shop.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-product-card',
|
||||
standalone: true,
|
||||
imports: [CommonModule, RouterLink],
|
||||
template: `
|
||||
<div class="product-card">
|
||||
<div class="image-placeholder"></div>
|
||||
<div class="content">
|
||||
<span class="category">{{ product().category }}</span>
|
||||
<h3 class="name">
|
||||
<a [routerLink]="['/shop', product().id]">{{ product().name }}</a>
|
||||
</h3>
|
||||
<div class="footer">
|
||||
<span class="price">{{ product().price | currency:'EUR' }}</span>
|
||||
<a [routerLink]="['/shop', product().id]" class="view-btn">View</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.product-card {
|
||||
background: var(--color-bg-card);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
transition: box-shadow 0.2s;
|
||||
&:hover { box-shadow: var(--shadow-md); }
|
||||
}
|
||||
.image-placeholder {
|
||||
height: 200px;
|
||||
background-color: var(--color-neutral-200);
|
||||
}
|
||||
.content { padding: var(--space-4); }
|
||||
.category { font-size: 0.75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
|
||||
.name { font-size: 1.125rem; margin: var(--space-2) 0; a { color: var(--color-text); text-decoration: none; &:hover { color: var(--color-brand); } } }
|
||||
.footer { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-4); }
|
||||
.price { font-weight: 700; color: var(--color-brand); }
|
||||
.view-btn { font-size: 0.875rem; font-weight: 500; }
|
||||
`]
|
||||
})
|
||||
export class ProductCardComponent {
|
||||
product = input.required<Product>();
|
||||
}
|
||||
80
frontend/src/app/features/shop/product-detail.component.ts
Normal file
80
frontend/src/app/features/shop/product-detail.component.ts
Normal file
@@ -0,0 +1,80 @@
|
||||
import { Component, input, signal } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { ShopService, Product } from './services/shop.service';
|
||||
import { AppButtonComponent } from '../../shared/components/app-button/app-button.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-product-detail',
|
||||
standalone: true,
|
||||
imports: [CommonModule, RouterLink, TranslateModule, AppButtonComponent],
|
||||
template: `
|
||||
<div class="container wrapper">
|
||||
<a routerLink="/shop" class="back-link">← {{ 'SHOP.BACK' | translate }}</a>
|
||||
|
||||
@if (product(); as p) {
|
||||
<div class="detail-grid">
|
||||
<div class="image-box"></div>
|
||||
|
||||
<div class="info">
|
||||
<span class="category">{{ p.category }}</span>
|
||||
<h1>{{ p.name }}</h1>
|
||||
<p class="price">{{ p.price | currency:'EUR' }}</p>
|
||||
|
||||
<p class="desc">{{ p.description }}</p>
|
||||
|
||||
<div class="actions">
|
||||
<app-button variant="primary" (click)="addToCart()">
|
||||
{{ 'SHOP.ADD_CART' | translate }}
|
||||
</app-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
} @else {
|
||||
<p>Product not found.</p>
|
||||
}
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.wrapper { padding-top: var(--space-8); }
|
||||
.back-link { display: inline-block; margin-bottom: var(--space-6); color: var(--color-text-muted); }
|
||||
|
||||
.detail-grid {
|
||||
display: grid;
|
||||
gap: var(--space-8);
|
||||
@media(min-width: 768px) {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.image-box {
|
||||
background-color: var(--color-neutral-200);
|
||||
border-radius: var(--radius-lg);
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
.category { color: var(--color-brand); font-weight: 600; text-transform: uppercase; font-size: 0.875rem; }
|
||||
.price { font-size: 1.5rem; font-weight: 700; color: var(--color-text); margin: var(--space-4) 0; }
|
||||
.desc { color: var(--color-text-muted); line-height: 1.6; margin-bottom: var(--space-8); }
|
||||
`]
|
||||
})
|
||||
export class ProductDetailComponent {
|
||||
// Input binding from router
|
||||
id = input<string>();
|
||||
|
||||
product = signal<Product | undefined>(undefined);
|
||||
|
||||
constructor(private shopService: ShopService) {}
|
||||
|
||||
ngOnInit() {
|
||||
const productId = this.id();
|
||||
if (productId) {
|
||||
this.shopService.getProductById(productId).subscribe(p => this.product.set(p));
|
||||
}
|
||||
}
|
||||
|
||||
addToCart() {
|
||||
alert('Added to cart (Mock)');
|
||||
}
|
||||
}
|
||||
48
frontend/src/app/features/shop/services/shop.service.ts
Normal file
48
frontend/src/app/features/shop/services/shop.service.ts
Normal file
@@ -0,0 +1,48 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Observable, of } from 'rxjs';
|
||||
|
||||
export interface Product {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
price: number;
|
||||
category: string;
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class ShopService {
|
||||
// Dati statici per ora
|
||||
private staticProducts: Product[] = [
|
||||
{
|
||||
id: '1',
|
||||
name: 'Filamento PLA Standard',
|
||||
description: 'Il classico per ogni stampa, facile e affidabile.',
|
||||
price: 24.90,
|
||||
category: 'Filamenti'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Filamento PETG Tough',
|
||||
description: 'Resistente agli urti e alle temperature.',
|
||||
price: 29.90,
|
||||
category: 'Filamenti'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'Kit Ugelli (0.4mm)',
|
||||
description: 'Set di ricambio per estrusore FDM.',
|
||||
price: 15.00,
|
||||
category: 'Accessori'
|
||||
}
|
||||
];
|
||||
|
||||
getProducts(): Observable<Product[]> {
|
||||
return of(this.staticProducts);
|
||||
}
|
||||
|
||||
getProductById(id: string): Observable<Product | undefined> {
|
||||
return of(this.staticProducts.find(p => p.id === id));
|
||||
}
|
||||
}
|
||||
43
frontend/src/app/features/shop/shop-page.component.ts
Normal file
43
frontend/src/app/features/shop/shop-page.component.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
import { Component, signal } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { ShopService, Product } from './services/shop.service';
|
||||
import { ProductCardComponent } from './components/product-card/product-card.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-shop-page',
|
||||
standalone: true,
|
||||
imports: [CommonModule, TranslateModule, ProductCardComponent],
|
||||
template: `
|
||||
<div class="container hero">
|
||||
<h1>{{ 'SHOP.TITLE' | translate }}</h1>
|
||||
<p class="subtitle">Componenti e materiali selezionati per la tua stampa 3D.</p>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="grid">
|
||||
@for (product of products(); track product.id) {
|
||||
<app-product-card [product]="product"></app-product-card>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.hero { padding: var(--space-8) 0; text-align: center; }
|
||||
.subtitle { color: var(--color-text-muted); margin-bottom: var(--space-8); }
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: var(--space-6);
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class ShopPageComponent {
|
||||
products = signal<Product[]>([]);
|
||||
|
||||
constructor(private shopService: ShopService) {
|
||||
this.shopService.getProducts().subscribe(data => {
|
||||
this.products.set(data);
|
||||
});
|
||||
}
|
||||
}
|
||||
8
frontend/src/app/features/shop/shop.routes.ts
Normal file
8
frontend/src/app/features/shop/shop.routes.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
import { Routes } from '@angular/router';
|
||||
import { ShopPageComponent } from './shop-page.component';
|
||||
import { ProductDetailComponent } from './product-detail.component';
|
||||
|
||||
export const SHOP_ROUTES: Routes = [
|
||||
{ path: '', component: ShopPageComponent },
|
||||
{ path: ':id', component: ProductDetailComponent }
|
||||
];
|
||||
@@ -1,38 +0,0 @@
|
||||
<div class="container home-container">
|
||||
<header class="hero">
|
||||
<h1>3D Print Calculator</h1>
|
||||
<p class="subtitle">Get instant quotes for your STL files or get in touch for custom projects.</p>
|
||||
</header>
|
||||
|
||||
<div class="grid-2 cards-wrapper">
|
||||
<!-- Quote Card -->
|
||||
<a routerLink="/quote/basic" class="card action-card">
|
||||
<div class="icon-wrapper">
|
||||
<span class="material-icons">calculate</span>
|
||||
</div>
|
||||
<h2>Get a Quote</h2>
|
||||
<p>Upload your STL file and get an instant price estimation based on material and print time.</p>
|
||||
<span class="btn btn-primary">Start Calculation</span>
|
||||
</a>
|
||||
|
||||
<!-- Advanced Quote Card -->
|
||||
<a routerLink="/quote/advanced" class="card action-card">
|
||||
<div class="icon-wrapper">
|
||||
<span class="material-icons">science</span>
|
||||
</div>
|
||||
<h2>Advanced Quote</h2>
|
||||
<p>Fine-tune print settings like layer height, infill, and more for specific needs.</p>
|
||||
<span class="btn btn-secondary">Configure</span>
|
||||
</a>
|
||||
|
||||
<!-- Contact Card -->
|
||||
<a routerLink="/contact" class="card action-card">
|
||||
<div class="icon-wrapper">
|
||||
<span class="material-icons">mail</span>
|
||||
</div>
|
||||
<h2>Contact Me</h2>
|
||||
<p>Need a custom design or have specific requirements? Send me a message directly.</p>
|
||||
<span class="btn btn-secondary">Get in Touch</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,81 +0,0 @@
|
||||
.home-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 80vh;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero {
|
||||
margin-bottom: 4rem;
|
||||
|
||||
h1 {
|
||||
font-size: 3.5rem;
|
||||
margin-bottom: 1rem;
|
||||
background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-muted);
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.cards-wrapper {
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.action-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: var(--text-main);
|
||||
background: var(--surface-color);
|
||||
|
||||
.icon-wrapper {
|
||||
background: rgba(99, 102, 241, 0.1);
|
||||
padding: 1rem;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
.material-icons {
|
||||
font-size: 2.5rem;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 2rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-main);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--surface-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.icon-wrapper {
|
||||
background: rgba(99, 102, 241, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-home',
|
||||
standalone: true,
|
||||
imports: [RouterLink, CommonModule],
|
||||
templateUrl: './home.component.html',
|
||||
styleUrls: ['./home.component.scss']
|
||||
})
|
||||
export class HomeComponent {}
|
||||
@@ -1,33 +0,0 @@
|
||||
import { Injectable, inject } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Observable } from 'rxjs';
|
||||
import { environment } from '../environments/environment';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class PrintService {
|
||||
private http = inject(HttpClient);
|
||||
private apiUrl = environment.apiUrl;
|
||||
|
||||
calculateQuote(file: File, params?: any): Observable<any> {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
// Append extra params if meant for backend
|
||||
if (params) {
|
||||
Object.keys(params).forEach(key => {
|
||||
if (params[key] !== null && params[key] !== undefined) {
|
||||
formData.append(key, params[key]);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return this.http.post(`${this.apiUrl}/api/quote`, formData);
|
||||
}
|
||||
|
||||
getProfiles(): Observable<any> {
|
||||
return this.http.get(`${this.apiUrl}/api/profiles/available`);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,152 +0,0 @@
|
||||
<div class="container fade-in">
|
||||
<header class="section-header">
|
||||
<a routerLink="/" class="back-link">
|
||||
<span class="material-icons">arrow_back</span> Back
|
||||
</a>
|
||||
<h1>Advanced Quote</h1>
|
||||
<p>Configure detailed print parameters for your project.</p>
|
||||
</header>
|
||||
|
||||
<div class="grid-2 quote-layout">
|
||||
<!-- Left: Inputs -->
|
||||
<div class="card p-0 overflow-hidden">
|
||||
<!-- Upload Area -->
|
||||
<div class="upload-area small"
|
||||
[class.drag-over]="isDragOver"
|
||||
[class.has-file]="selectedFile"
|
||||
(dragover)="onDragOver($event)"
|
||||
(dragleave)="onDragLeave($event)"
|
||||
(drop)="onDrop($event)">
|
||||
|
||||
<input #fileInput type="file" hidden (change)="onFileSelected($event)" accept=".stl">
|
||||
|
||||
<!-- Empty State -->
|
||||
<div class="empty-state" *ngIf="!selectedFile" (click)="fileInput.click()">
|
||||
<span class="material-icons">cloud_upload</span>
|
||||
<p>Click or Drop STL here</p>
|
||||
</div>
|
||||
|
||||
<!-- Selected State -->
|
||||
<div *ngIf="selectedFile">
|
||||
<div class="viewer-wrapper">
|
||||
<app-stl-viewer [file]="selectedFile"></app-stl-viewer>
|
||||
</div>
|
||||
<div class="file-action-bar border-top">
|
||||
<div class="file-info">
|
||||
<span class="material-icons">description</span>
|
||||
<span class="file-name">{{ selectedFile.name }}</span>
|
||||
</div>
|
||||
<button class="btn-icon danger" (click)="removeFile($event)" title="Remove">
|
||||
<span class="material-icons">delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Parameters Form -->
|
||||
<div class="params-form">
|
||||
<h3>Print Settings</h3>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Material</label>
|
||||
<select [(ngModel)]="params.filament">
|
||||
<option *ngFor="let m of materialOptions" [value]="m.value">{{ m.label }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Color</label>
|
||||
<select [(ngModel)]="params.material_color">
|
||||
<option *ngFor="let c of colorOptions" [value]="c">{{ c }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Quality</label>
|
||||
<select [(ngModel)]="params.quality">
|
||||
<option *ngFor="let q of qualityOptions" [value]="q.value">{{ q.label }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Infill Density (%)</label>
|
||||
<div class="range-wrapper">
|
||||
<input type="range" [(ngModel)]="params.infill_density" min="0" max="100" step="5">
|
||||
<span>{{ params.infill_density }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Infill Pattern</label>
|
||||
<select [(ngModel)]="params.infill_pattern">
|
||||
<option *ngFor="let p of infillPatternOptions" [value]="p.value">{{ p.label }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<button class="btn btn-primary btn-block"
|
||||
[disabled]="!selectedFile || isCalculating"
|
||||
(click)="calculate()">
|
||||
<span *ngIf="!isCalculating">Calculate Price</span>
|
||||
<span *ngIf="isCalculating">Calculating...</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Results -->
|
||||
<div class="results-area" *ngIf="quoteResult">
|
||||
<div class="card result-card">
|
||||
<h2>Estimated Cost</h2>
|
||||
<div class="price-big">
|
||||
{{ quoteResult?.cost?.total | currency:'CHF' }}
|
||||
</div>
|
||||
|
||||
<div class="specs-list">
|
||||
<div class="spec-item">
|
||||
<span>Print Time</span>
|
||||
<strong>{{ quoteResult?.print_time_formatted }}</strong>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span>Material Weight</span>
|
||||
<strong>{{ quoteResult?.material_grams | number:'1.0-0' }}g</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Param Summary (Future Proofing) -->
|
||||
<div class="specs-list secondary">
|
||||
<div class="spec-header">Request Specs</div>
|
||||
<div class="spec-item compact">
|
||||
<span>Infill</span>
|
||||
<span>{{ params.infill_density }}%</span>
|
||||
</div>
|
||||
<div class="spec-item compact">
|
||||
<span>Infill Pattern</span>
|
||||
<span>{{ infillPatternLabel }}</span>
|
||||
</div>
|
||||
<div class="spec-item compact">
|
||||
<span>Material</span>
|
||||
<span>{{ materialLabel }}</span>
|
||||
</div>
|
||||
<div class="spec-item compact">
|
||||
<span>Color</span>
|
||||
<span>{{ params.material_color }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="note-box">
|
||||
<p>Note: Color does not affect the estimate. Printer is fixed to Bambu Lab A1.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div class="results-area empty" *ngIf="!quoteResult">
|
||||
<div class="card placeholder-card">
|
||||
<span class="material-icons">science</span>
|
||||
<h3>Advanced Quote</h3>
|
||||
<p>Configure settings and calculate.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,269 +0,0 @@
|
||||
.section-header {
|
||||
margin-bottom: 2rem;
|
||||
|
||||
.back-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
|
||||
.material-icons {
|
||||
font-size: 1.1rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
}
|
||||
|
||||
.upload-area {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
background: var(--surface-color);
|
||||
transition: all 0.2s;
|
||||
|
||||
&.drag-over {
|
||||
background: rgba(99, 102, 241, 0.1);
|
||||
}
|
||||
|
||||
&:not(.has-file) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
.material-icons {
|
||||
font-size: 2rem;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
p { margin: 0; color: var(--text-muted);}
|
||||
}
|
||||
}
|
||||
|
||||
.viewer-wrapper {
|
||||
height: 250px;
|
||||
width: 100%;
|
||||
background: #0f172a;
|
||||
}
|
||||
|
||||
.file-action-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.75rem 1rem;
|
||||
background: var(--surface-color);
|
||||
|
||||
&.border-top { border-top: 1px solid var(--border-color); }
|
||||
|
||||
.file-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--text-main);
|
||||
|
||||
.material-icons { color: var(--primary-color); font-size: 1.2rem; }
|
||||
.file-name { font-size: 0.9rem; }
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.25rem;
|
||||
border-radius: 50%;
|
||||
|
||||
.material-icons {
|
||||
font-size: 1.2rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
&.danger:hover {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
.material-icons { color: #ef4444; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.params-form {
|
||||
padding: 1.5rem;
|
||||
|
||||
h3 {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
color: var(--text-main);
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.25rem;
|
||||
|
||||
label {
|
||||
display: block;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="number"],
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
background: var(--bg-color);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-main);
|
||||
font-family: inherit;
|
||||
font-size: 0.95rem;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.range-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
|
||||
input[type="range"] {
|
||||
flex: 1;
|
||||
accent-color: var(--primary-color);
|
||||
}
|
||||
|
||||
span {
|
||||
width: 3rem;
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
padding: 1.5rem;
|
||||
border-top: 1px solid var(--border-color);
|
||||
background: var(--surface-color);
|
||||
}
|
||||
|
||||
.btn-block {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Results - Reused mostly but tweaked */
|
||||
.result-card {
|
||||
text-align: center;
|
||||
background: linear-gradient(135deg, var(--surface-color) 0%, rgba(30, 41, 59, 0.8) 100%);
|
||||
|
||||
h2 {
|
||||
color: var(--text-muted);
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.price-big {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.specs-list {
|
||||
text-align: left;
|
||||
margin-bottom: 1rem;
|
||||
background: rgba(0,0,0,0.2);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1rem;
|
||||
|
||||
.spec-header {
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 0.5rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.spec-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.75rem 0;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
|
||||
&:last-child { border-bottom: none; }
|
||||
|
||||
&.compact {
|
||||
padding: 0.25rem 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
span:first-child { color: var(--text-muted); }
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background: transparent;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.note-box {
|
||||
background: rgba(99, 102, 241, 0.1);
|
||||
color: var(--primary-color); // Blueish info for advanced note
|
||||
padding: 0.75rem;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.9rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.placeholder-card {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-muted);
|
||||
border-style: dashed;
|
||||
|
||||
.material-icons {
|
||||
font-size: 4rem;
|
||||
margin-bottom: 1rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animation */
|
||||
.fade-in {
|
||||
animation: fadeIn 0.4s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@@ -1,151 +0,0 @@
|
||||
import { Component, inject } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { PrintService } from '../../print.service';
|
||||
import { StlViewerComponent } from '../../common/stl-viewer/stl-viewer.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-advanced-quote',
|
||||
standalone: true,
|
||||
imports: [CommonModule, RouterLink, FormsModule, StlViewerComponent],
|
||||
templateUrl: './advanced-quote.component.html',
|
||||
styleUrls: ['./advanced-quote.component.scss']
|
||||
})
|
||||
export class AdvancedQuoteComponent {
|
||||
printService = inject(PrintService);
|
||||
|
||||
selectedFile: File | null = null;
|
||||
isDragOver = false;
|
||||
isCalculating = false;
|
||||
quoteResult: any = null;
|
||||
|
||||
// Selectable options (mapped to backend profile ids where needed)
|
||||
readonly materialOptions = [
|
||||
{ value: 'pla_basic', label: 'PLA' },
|
||||
{ value: 'petg_basic', label: 'PETG' },
|
||||
{ value: 'abs_basic', label: 'ABS' },
|
||||
{ value: 'tpu_95a', label: 'TPU 95A' }
|
||||
];
|
||||
readonly colorOptions = [
|
||||
'Black',
|
||||
'White',
|
||||
'Gray',
|
||||
'Red',
|
||||
'Blue',
|
||||
'Green',
|
||||
'Yellow'
|
||||
];
|
||||
readonly qualityOptions = [
|
||||
{ value: 'draft', label: 'Draft' },
|
||||
{ value: 'standard', label: 'Standard' },
|
||||
{ value: 'fine', label: 'Fine' }
|
||||
];
|
||||
readonly infillPatternOptions = [
|
||||
{ value: 'grid', label: 'Grid' },
|
||||
{ value: 'gyroid', label: 'Gyroid' },
|
||||
{ value: 'cubic', label: 'Cubic' },
|
||||
{ value: 'triangles', label: 'Triangles' },
|
||||
{ value: 'rectilinear', label: 'Rectilinear' },
|
||||
{ value: 'crosshatch', label: 'Crosshatch' },
|
||||
{ value: 'zig-zag', label: 'Zig-zag' },
|
||||
{ value: 'alignedrectilinear', label: 'Aligned Rectilinear' }
|
||||
];
|
||||
|
||||
// Parameters
|
||||
params = {
|
||||
filament: 'pla_basic',
|
||||
material_color: 'Black',
|
||||
quality: 'standard',
|
||||
infill_density: 15,
|
||||
infill_pattern: 'grid',
|
||||
support_enabled: false
|
||||
};
|
||||
|
||||
get materialLabel(): string {
|
||||
const match = this.materialOptions.find(option => option.value === this.params.filament);
|
||||
return match ? match.label : this.params.filament;
|
||||
}
|
||||
|
||||
get infillPatternLabel(): string {
|
||||
const match = this.infillPatternOptions.find(option => option.value === this.params.infill_pattern);
|
||||
return match ? match.label : this.params.infill_pattern;
|
||||
}
|
||||
|
||||
onDragOver(event: DragEvent) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
this.isDragOver = true;
|
||||
}
|
||||
|
||||
onDragLeave(event: DragEvent) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
this.isDragOver = false;
|
||||
}
|
||||
|
||||
onDrop(event: DragEvent) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
this.isDragOver = false;
|
||||
|
||||
const files = event.dataTransfer?.files;
|
||||
if (files && files.length > 0) {
|
||||
if (files[0].name.toLowerCase().endsWith('.stl')) {
|
||||
this.selectedFile = files[0];
|
||||
this.quoteResult = null;
|
||||
} else {
|
||||
alert('Please upload an STL file.');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onFileSelected(event: any) {
|
||||
const file = event.target.files[0];
|
||||
if (file) {
|
||||
this.selectedFile = file;
|
||||
this.quoteResult = null;
|
||||
}
|
||||
}
|
||||
|
||||
removeFile(event: Event) {
|
||||
event.stopPropagation();
|
||||
this.selectedFile = null;
|
||||
this.quoteResult = null;
|
||||
}
|
||||
|
||||
calculate() {
|
||||
if (!this.selectedFile) return;
|
||||
|
||||
this.isCalculating = true;
|
||||
|
||||
// Use PrintService
|
||||
this.printService.calculateQuote(this.selectedFile, {
|
||||
filament: this.params.filament,
|
||||
quality: this.params.quality,
|
||||
infill_density: this.params.infill_density,
|
||||
infill_pattern: this.params.infill_pattern,
|
||||
// Optional mappings if user selected overrides
|
||||
// layer_height: this.params.layer_height,
|
||||
// support_enabled: this.params.support_enabled
|
||||
})
|
||||
.subscribe({
|
||||
next: (res) => {
|
||||
console.log('API Response:', res);
|
||||
if (res.success) {
|
||||
this.quoteResult = res.data;
|
||||
console.log('Quote Result set to:', this.quoteResult);
|
||||
} else {
|
||||
console.error('API succeeded but returned error flag:', res.error);
|
||||
alert('Error: ' + res.error);
|
||||
}
|
||||
this.isCalculating = false;
|
||||
},
|
||||
error: (err) => {
|
||||
console.error(err);
|
||||
alert('Calculation failed: ' + (err.error?.detail || err.message));
|
||||
this.isCalculating = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,129 +0,0 @@
|
||||
<div class="container fade-in">
|
||||
<header class="section-header">
|
||||
<a routerLink="/" class="back-link">
|
||||
<span class="material-icons">arrow_back</span> Back
|
||||
</a>
|
||||
<h1>Quick Quote</h1>
|
||||
<p>Upload your 3D model and choose a strength level.</p>
|
||||
</header>
|
||||
|
||||
<div class="grid-2 quote-layout">
|
||||
<!-- Left: Inputs -->
|
||||
<div class="card p-0 overflow-hidden">
|
||||
<!-- Upload Area -->
|
||||
<div class="upload-area"
|
||||
[class.drag-over]="isDragOver"
|
||||
[class.has-file]="selectedFile"
|
||||
(dragover)="onDragOver($event)"
|
||||
(dragleave)="onDragLeave($event)"
|
||||
(drop)="onDrop($event)">
|
||||
|
||||
<input #fileInput type="file" hidden (change)="onFileSelected($event)" accept=".stl">
|
||||
|
||||
<!-- Empty State (Clickable) -->
|
||||
<div class="empty-state" *ngIf="!selectedFile" (click)="fileInput.click()">
|
||||
<span class="material-icons upload-icon">cloud_upload</span>
|
||||
<h3>Drop your STL file here</h3>
|
||||
<p>or click to browse</p>
|
||||
</div>
|
||||
|
||||
<!-- Selected State (Viewer + Actions) -->
|
||||
<div *ngIf="selectedFile" class="selected-state">
|
||||
<div class="viewer-wrapper">
|
||||
<app-stl-viewer [file]="selectedFile"></app-stl-viewer>
|
||||
</div>
|
||||
<div class="file-action-bar">
|
||||
<div class="file-info">
|
||||
<span class="material-icons">description</span>
|
||||
<span class="file-name">{{ selectedFile.name }}</span>
|
||||
</div>
|
||||
<div class="file-actions">
|
||||
<button class="btn-icon danger" (click)="removeFile($event)" title="Remove File">
|
||||
<span class="material-icons">delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Strength Selection -->
|
||||
<div class="strength-selector">
|
||||
<h3>Select Strength</h3>
|
||||
<div class="strength-options">
|
||||
<div class="strength-card"
|
||||
[class.active]="selectedStrength === 'standard'"
|
||||
(click)="selectStrength('standard')">
|
||||
<span class="emoji">🥚</span>
|
||||
<div class="info">
|
||||
<h4>Standard</h4>
|
||||
<p>Balanced strength</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="strength-card"
|
||||
[class.active]="selectedStrength === 'strong'"
|
||||
(click)="selectStrength('strong')">
|
||||
<span class="emoji">🧱</span>
|
||||
<div class="info">
|
||||
<h4>Strong</h4>
|
||||
<p>Higher infill</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="strength-card"
|
||||
[class.active]="selectedStrength === 'ultra'"
|
||||
(click)="selectStrength('ultra')">
|
||||
<span class="emoji">🦾</span>
|
||||
<div class="info">
|
||||
<h4>Ultra</h4>
|
||||
<p>Max infill</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<button class="btn btn-primary btn-block"
|
||||
[disabled]="!selectedFile || isCalculating"
|
||||
(click)="calculate()">
|
||||
<span *ngIf="!isCalculating">Calculate Price</span>
|
||||
<span *ngIf="isCalculating">Calculating...</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Results -->
|
||||
<div class="results-area" *ngIf="quoteResult">
|
||||
<div class="card result-card">
|
||||
<h2>Estimated Cost</h2>
|
||||
<div class="price-big">
|
||||
{{ quoteResult?.cost?.total | currency:'CHF' }}
|
||||
</div>
|
||||
|
||||
<div class="specs-list">
|
||||
<div class="spec-item">
|
||||
<span>Print Time</span>
|
||||
<strong>{{ quoteResult?.print_time_formatted }}</strong>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span>Material</span>
|
||||
<strong>{{ quoteResult?.material_grams | number:'1.0-0' }}g</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="note-box">
|
||||
<p>Note: This is an estimation. Final price may vary slightly.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div class="results-area empty" *ngIf="!quoteResult">
|
||||
<div class="card placeholder-card">
|
||||
<span class="material-icons">receipt_long</span>
|
||||
<h3>Your Quote</h3>
|
||||
<p>Results will appear here after calculation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,254 +0,0 @@
|
||||
.section-header {
|
||||
margin-bottom: 2rem;
|
||||
|
||||
.back-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.9rem;
|
||||
|
||||
.material-icons {
|
||||
font-size: 1.1rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
}
|
||||
|
||||
.upload-area {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
background: var(--surface-color);
|
||||
transition: all 0.2s;
|
||||
|
||||
&.drag-over {
|
||||
background: rgba(99, 102, 241, 0.1);
|
||||
box-shadow: inset 0 0 0 2px var(--primary-color);
|
||||
}
|
||||
|
||||
/* Only show pointer on empty state or drag */
|
||||
&:not(.has-file) {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 3rem;
|
||||
text-align: center;
|
||||
|
||||
.upload-icon {
|
||||
font-size: 4rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h3 { margin-bottom: 0.5rem; }
|
||||
p { color: var(--text-muted); margin: 0; }
|
||||
}
|
||||
|
||||
.viewer-wrapper {
|
||||
height: 350px;
|
||||
width: 100%;
|
||||
background: #0f172a;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.file-action-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: var(--surface-color);
|
||||
|
||||
.file-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--text-main);
|
||||
|
||||
.material-icons { color: var(--primary-color); }
|
||||
.file-name { font-weight: 500; }
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.5rem;
|
||||
border-radius: 50%;
|
||||
transition: background 0.2s;
|
||||
|
||||
.material-icons {
|
||||
font-size: 1.5rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--surface-hover);
|
||||
.material-icons { color: var(--text-main); }
|
||||
}
|
||||
|
||||
&.danger {
|
||||
&:hover {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
.material-icons { color: #ef4444; } /* Red-500 */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.strength-selector {
|
||||
padding: 1.5rem;
|
||||
|
||||
h3 {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.strength-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.strength-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
.emoji {
|
||||
font-size: 2rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.info {
|
||||
h4 {
|
||||
margin: 0 0 0.25rem 0;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--primary-color);
|
||||
background: var(--surface-hover);
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: var(--primary-color);
|
||||
background: rgba(99, 102, 241, 0.1);
|
||||
|
||||
.emoji {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
padding: 1.5rem;
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.btn-block {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Results */
|
||||
.result-card {
|
||||
text-align: center;
|
||||
background: linear-gradient(135deg, var(--surface-color) 0%, rgba(30, 41, 59, 0.8) 100%);
|
||||
|
||||
h2 {
|
||||
color: var(--text-muted);
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.price-big {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.specs-list {
|
||||
text-align: left;
|
||||
margin-bottom: 2rem;
|
||||
background: rgba(0,0,0,0.2);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1rem;
|
||||
|
||||
.spec-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.75rem 0;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
span {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.note-box {
|
||||
background: rgba(236, 72, 153, 0.1);
|
||||
color: var(--secondary-color);
|
||||
padding: 0.75rem;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.placeholder-card {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-muted);
|
||||
border-style: dashed;
|
||||
|
||||
.material-icons {
|
||||
font-size: 4rem;
|
||||
margin-bottom: 1rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animation */
|
||||
.fade-in {
|
||||
animation: fadeIn 0.4s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@@ -1,103 +0,0 @@
|
||||
import { Component, inject } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import { PrintService } from '../../print.service';
|
||||
import { StlViewerComponent } from '../../common/stl-viewer/stl-viewer.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-basic-quote',
|
||||
standalone: true,
|
||||
imports: [CommonModule, RouterLink, StlViewerComponent],
|
||||
templateUrl: './basic-quote.component.html',
|
||||
styleUrls: ['./basic-quote.component.scss']
|
||||
})
|
||||
export class BasicQuoteComponent {
|
||||
printService = inject(PrintService);
|
||||
|
||||
selectedFile: File | null = null;
|
||||
selectedStrength: 'standard' | 'strong' | 'ultra' = 'standard';
|
||||
isDragOver = false;
|
||||
isCalculating = false;
|
||||
quoteResult: any = null;
|
||||
private strengthToSettings: Record<'standard' | 'strong' | 'ultra', { infill_density: number; quality: 'draft' | 'standard' | 'fine' }> = {
|
||||
standard: { infill_density: 15, quality: 'standard' },
|
||||
strong: { infill_density: 30, quality: 'standard' },
|
||||
ultra: { infill_density: 50, quality: 'standard' }
|
||||
};
|
||||
|
||||
onDragOver(event: DragEvent) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
this.isDragOver = true;
|
||||
}
|
||||
|
||||
onDragLeave(event: DragEvent) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
this.isDragOver = false;
|
||||
}
|
||||
|
||||
onDrop(event: DragEvent) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
this.isDragOver = false;
|
||||
|
||||
const files = event.dataTransfer?.files;
|
||||
if (files && files.length > 0) {
|
||||
if (files[0].name.toLowerCase().endsWith('.stl')) {
|
||||
this.selectedFile = files[0];
|
||||
this.quoteResult = null;
|
||||
} else {
|
||||
alert('Please upload an STL file.');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onFileSelected(event: any) {
|
||||
const file = event.target.files[0];
|
||||
if (file) {
|
||||
this.selectedFile = file;
|
||||
this.quoteResult = null;
|
||||
}
|
||||
}
|
||||
|
||||
removeFile(event: Event) {
|
||||
event.stopPropagation();
|
||||
this.selectedFile = null;
|
||||
this.quoteResult = null;
|
||||
}
|
||||
|
||||
selectStrength(strength: 'standard' | 'strong' | 'ultra') {
|
||||
this.selectedStrength = strength;
|
||||
}
|
||||
|
||||
calculate() {
|
||||
if (!this.selectedFile) return;
|
||||
|
||||
this.isCalculating = true;
|
||||
|
||||
const settings = this.strengthToSettings[this.selectedStrength];
|
||||
|
||||
this.printService.calculateQuote(this.selectedFile, {
|
||||
quality: settings.quality,
|
||||
infill_density: settings.infill_density
|
||||
})
|
||||
.subscribe({
|
||||
next: (res) => {
|
||||
if (res?.success) {
|
||||
this.quoteResult = res.data;
|
||||
} else {
|
||||
console.error('Quote API returned error:', res?.error);
|
||||
alert('Calculation failed: ' + (res?.error || 'Unknown error'));
|
||||
this.quoteResult = null;
|
||||
}
|
||||
this.isCalculating = false;
|
||||
},
|
||||
error: (err) => {
|
||||
console.error(err);
|
||||
alert('Calculation failed: ' + (err.error?.detail || err.message));
|
||||
this.isCalculating = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import { Component, input } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-alert',
|
||||
standalone: true,
|
||||
imports: [CommonModule],
|
||||
template: `
|
||||
<div class="alert" [ngClass]="type()">
|
||||
<div class="icon">
|
||||
@if(type() === 'info') { ℹ️ }
|
||||
@if(type() === 'warning') { ⚠️ }
|
||||
@if(type() === 'error') { ❌ }
|
||||
@if(type() === 'success') { ✅ }
|
||||
</div>
|
||||
<div class="content"><ng-content></ng-content></div>
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.alert {
|
||||
padding: var(--space-4);
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.info { background: var(--color-neutral-100); color: var(--color-neutral-800); }
|
||||
.warning { background: #fefce8; color: #854d0e; border: 1px solid #fde047; }
|
||||
.error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
|
||||
.success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
|
||||
`]
|
||||
})
|
||||
export class AppAlertComponent {
|
||||
type = input<'info' | 'warning' | 'error' | 'success'>('info');
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
import { Component, input } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-button',
|
||||
standalone: true,
|
||||
imports: [CommonModule],
|
||||
template: `
|
||||
<button
|
||||
[type]="type()"
|
||||
[class]="'btn btn-' + variant() + ' ' + (fullWidth() ? 'w-full' : '')"
|
||||
[disabled]="disabled()"
|
||||
(click)="handleClick($event)">
|
||||
<ng-content></ng-content>
|
||||
</button>
|
||||
`,
|
||||
styles: [`
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
border: 1px solid transparent;
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
.w-full { width: 100%; }
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--color-brand);
|
||||
color: white;
|
||||
&:hover:not(:disabled) { background-color: var(--color-brand-hover); }
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: var(--color-neutral-200);
|
||||
color: var(--color-neutral-900);
|
||||
&:hover:not(:disabled) { background-color: var(--color-neutral-300); }
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background-color: transparent;
|
||||
border-color: var(--color-border);
|
||||
color: var(--color-text);
|
||||
&:hover:not(:disabled) {
|
||||
border-color: var(--color-brand);
|
||||
color: var(--color-brand);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
background-color: transparent;
|
||||
color: var(--color-text-muted);
|
||||
padding: 0.5rem;
|
||||
&:hover:not(:disabled) { color: var(--color-text); }
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class AppButtonComponent {
|
||||
variant = input<'primary' | 'secondary' | 'outline' | 'text'>('primary');
|
||||
type = input<'button' | 'submit' | 'reset'>('button');
|
||||
disabled = input<boolean>(false);
|
||||
fullWidth = input<boolean>(false);
|
||||
|
||||
handleClick(event: Event) {
|
||||
if (this.disabled()) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-card',
|
||||
standalone: true,
|
||||
template: `
|
||||
<div class="card">
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.card {
|
||||
background-color: var(--color-bg-card);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--color-border);
|
||||
box-shadow: var(--shadow-sm);
|
||||
padding: var(--space-6);
|
||||
transition: box-shadow 0.2s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class AppCardComponent {}
|
||||
@@ -0,0 +1,104 @@
|
||||
import { Component, input, output, signal } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-dropzone',
|
||||
standalone: true,
|
||||
imports: [CommonModule],
|
||||
template: `
|
||||
<div
|
||||
class="dropzone"
|
||||
[class.dragover]="isDragOver()"
|
||||
(dragover)="onDragOver($event)"
|
||||
(dragleave)="onDragLeave($event)"
|
||||
(drop)="onDrop($event)"
|
||||
(click)="fileInput.click()"
|
||||
>
|
||||
<input #fileInput type="file" (change)="onFileSelected($event)" hidden [accept]="accept()">
|
||||
|
||||
<div class="content">
|
||||
<div class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-upload-cloud"><polyline points="16 16 12 12 8 16"></polyline><line x1="12" y1="12" x2="12" y2="21"></line><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"></path><polyline points="16 16 12 12 8 16"></polyline></svg>
|
||||
</div>
|
||||
<p class="text">{{ label() }}</p>
|
||||
<p class="subtext">{{ subtext() }}</p>
|
||||
@if (fileName()) {
|
||||
<div class="file-badge">
|
||||
{{ fileName() }}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.dropzone {
|
||||
border: 2px dashed var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-8);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
background-color: var(--color-neutral-50);
|
||||
|
||||
&:hover, &.dragover {
|
||||
border-color: var(--color-brand);
|
||||
background-color: var(--color-neutral-100);
|
||||
}
|
||||
}
|
||||
.icon { color: var(--color-brand); margin-bottom: var(--space-4); }
|
||||
.text { font-weight: 600; margin-bottom: var(--space-2); }
|
||||
.subtext { font-size: 0.875rem; color: var(--color-text-muted); }
|
||||
.file-badge {
|
||||
margin-top: var(--space-4);
|
||||
display: inline-block;
|
||||
padding: var(--space-2) var(--space-4);
|
||||
background: var(--color-neutral-200);
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
color: var(--color-primary-700);
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class AppDropzoneComponent {
|
||||
label = input<string>('Drop file here or click to upload');
|
||||
subtext = input<string>('Supports .stl, .obj');
|
||||
accept = input<string>('.stl,.obj');
|
||||
|
||||
fileDropped = output<File>();
|
||||
|
||||
isDragOver = signal(false);
|
||||
fileName = signal<string | null>(null);
|
||||
|
||||
onDragOver(e: Event) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this.isDragOver.set(true);
|
||||
}
|
||||
|
||||
onDragLeave(e: Event) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this.isDragOver.set(false);
|
||||
}
|
||||
|
||||
onDrop(e: DragEvent) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this.isDragOver.set(false);
|
||||
if (e.dataTransfer?.files.length) {
|
||||
this.handleFile(e.dataTransfer.files[0]);
|
||||
}
|
||||
}
|
||||
|
||||
onFileSelected(e: Event) {
|
||||
const input = e.target as HTMLInputElement;
|
||||
if (input.files?.length) {
|
||||
this.handleFile(input.files[0]);
|
||||
}
|
||||
}
|
||||
|
||||
handleFile(file: File) {
|
||||
this.fileName.set(file.name);
|
||||
this.fileDropped.emit(file);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
import { Component, input, forwardRef } from '@angular/core';
|
||||
import { ControlValueAccessor, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-input',
|
||||
standalone: true,
|
||||
imports: [CommonModule, ReactiveFormsModule],
|
||||
providers: [
|
||||
{
|
||||
provide: NG_VALUE_ACCESSOR,
|
||||
useExisting: forwardRef(() => AppInputComponent),
|
||||
multi: true
|
||||
}
|
||||
],
|
||||
template: `
|
||||
<div class="form-group">
|
||||
@if (label()) { <label [for]="id()">{{ label() }}</label> }
|
||||
<input
|
||||
[id]="id()"
|
||||
[type]="type()"
|
||||
[placeholder]="placeholder()"
|
||||
[value]="value"
|
||||
(input)="onInput($event)"
|
||||
(blur)="onTouched()"
|
||||
[disabled]="disabled"
|
||||
class="form-control"
|
||||
/>
|
||||
@if (error()) { <span class="error-text">{{ error() }}</span> }
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.form-group { display: flex; flex-direction: column; margin-bottom: var(--space-4); }
|
||||
label { font-size: 0.875rem; font-weight: 500; margin-bottom: var(--space-2); color: var(--color-text); }
|
||||
.form-control {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 1rem;
|
||||
width: 100%;
|
||||
background: var(--color-bg-card);
|
||||
color: var(--color-text);
|
||||
&:focus { outline: none; border-color: var(--color-brand); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); }
|
||||
&:disabled { background: var(--color-neutral-100); cursor: not-allowed; }
|
||||
}
|
||||
.error-text { color: var(--color-danger-500); font-size: 0.75rem; margin-top: var(--space-1); }
|
||||
`]
|
||||
})
|
||||
export class AppInputComponent implements ControlValueAccessor {
|
||||
label = input<string>('');
|
||||
id = input<string>('input-' + Math.random().toString(36).substr(2, 9));
|
||||
type = input<string>('text');
|
||||
placeholder = input<string>('');
|
||||
error = input<string | null>(null);
|
||||
|
||||
value: string = '';
|
||||
disabled = false;
|
||||
|
||||
onChange: any = () => {};
|
||||
onTouched: any = () => {};
|
||||
|
||||
writeValue(obj: any): void { this.value = obj || ''; }
|
||||
registerOnChange(fn: any): void { this.onChange = fn; }
|
||||
registerOnTouched(fn: any): void { this.onTouched = fn; }
|
||||
setDisabledState(isDisabled: boolean): void { this.disabled = isDisabled; }
|
||||
|
||||
onInput(event: Event) {
|
||||
const val = (event.target as HTMLInputElement).value;
|
||||
this.value = val;
|
||||
this.onChange(val);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
import { Component, input, output, forwardRef } from '@angular/core';
|
||||
import { ControlValueAccessor, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-select',
|
||||
standalone: true,
|
||||
imports: [CommonModule, ReactiveFormsModule],
|
||||
providers: [
|
||||
{
|
||||
provide: NG_VALUE_ACCESSOR,
|
||||
useExisting: forwardRef(() => AppSelectComponent),
|
||||
multi: true
|
||||
}
|
||||
],
|
||||
template: `
|
||||
<div class="form-group">
|
||||
@if (label()) { <label [for]="id()">{{ label() }}</label> }
|
||||
<select
|
||||
[id]="id()"
|
||||
[value]="value"
|
||||
(change)="onSelect($event)"
|
||||
(blur)="onTouched()"
|
||||
[disabled]="disabled"
|
||||
class="form-control"
|
||||
>
|
||||
@for (opt of options(); track opt.value) {
|
||||
<option [value]="opt.value">{{ opt.label }}</option>
|
||||
}
|
||||
</select>
|
||||
@if (error()) { <span class="error-text">{{ error() }}</span> }
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.form-group { display: flex; flex-direction: column; margin-bottom: var(--space-4); }
|
||||
label { font-size: 0.875rem; font-weight: 500; margin-bottom: var(--space-2); color: var(--color-text); }
|
||||
.form-control {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 1rem;
|
||||
width: 100%;
|
||||
background: var(--color-bg-card);
|
||||
color: var(--color-text);
|
||||
&:focus { outline: none; border-color: var(--color-brand); }
|
||||
}
|
||||
.error-text { color: var(--color-danger-500); font-size: 0.75rem; margin-top: var(--space-1); }
|
||||
`]
|
||||
})
|
||||
export class AppSelectComponent implements ControlValueAccessor {
|
||||
label = input<string>('');
|
||||
id = input<string>('select-' + Math.random().toString(36).substr(2, 9));
|
||||
options = input<{label: string, value: any}[]>([]);
|
||||
error = input<string | null>(null);
|
||||
|
||||
value: any = '';
|
||||
disabled = false;
|
||||
|
||||
onChange: any = () => {};
|
||||
onTouched: any = () => {};
|
||||
|
||||
writeValue(obj: any): void { this.value = obj; }
|
||||
registerOnChange(fn: any): void { this.onChange = fn; }
|
||||
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);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import { Component, input, output } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-tabs',
|
||||
standalone: true,
|
||||
imports: [CommonModule],
|
||||
template: `
|
||||
<div class="tabs">
|
||||
@for (tab of tabs(); track tab.value) {
|
||||
<button
|
||||
class="tab"
|
||||
[class.active]="activeTab() === tab.value"
|
||||
(click)="selectTab(tab.value)">
|
||||
{{ tab.label }}
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
gap: var(--space-4);
|
||||
}
|
||||
.tab {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
color: var(--color-text-muted);
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover { color: var(--color-text); }
|
||||
&.active {
|
||||
color: var(--color-brand);
|
||||
border-bottom-color: var(--color-brand);
|
||||
}
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class AppTabsComponent {
|
||||
tabs = input<{label: string, value: string}[]>([]);
|
||||
activeTab = input<string>('');
|
||||
tabChange = output<string>();
|
||||
|
||||
selectTab(val: string) {
|
||||
this.tabChange.emit(val);
|
||||
}
|
||||
}
|
||||
43
frontend/src/assets/i18n/en.json
Normal file
43
frontend/src/assets/i18n/en.json
Normal file
@@ -0,0 +1,43 @@
|
||||
{
|
||||
"NAV": {
|
||||
"CALCULATOR": "Calculator",
|
||||
"SHOP": "Shop",
|
||||
"ABOUT": "About"
|
||||
},
|
||||
"FOOTER": {
|
||||
"PRIVACY": "Privacy",
|
||||
"TERMS": "Terms & Conditions",
|
||||
"CONTACT": "Contact Us"
|
||||
},
|
||||
"CALC": {
|
||||
"TITLE": "3D Print Calculator",
|
||||
"SUBTITLE": "Upload your STL file and get an instant estimate of printing costs and time.",
|
||||
"CTA_START": "Start Now",
|
||||
"BUSINESS": "Business",
|
||||
"PRIVATE": "Private",
|
||||
"MODE_EASY": "Easy",
|
||||
"MODE_ADVANCED": "Advanced",
|
||||
"UPLOAD_LABEL": "Drag your STL file here",
|
||||
"UPLOAD_SUB": "Supports STL, OBJ up to 50MB",
|
||||
"MATERIAL": "Material",
|
||||
"QUALITY": "Quality",
|
||||
"QUANTITY": "Quantity",
|
||||
"NOTES": "Additional Notes",
|
||||
"CALCULATE": "Calculate Quote",
|
||||
"RESULT": "Estimated Quote",
|
||||
"TIME": "Print Time",
|
||||
"COST": "Total Cost",
|
||||
"ORDER": "Order Now",
|
||||
"CONSULT": "Request Consultation"
|
||||
},
|
||||
"SHOP": {
|
||||
"TITLE": "Filaments & Accessories",
|
||||
"ADD_CART": "Add to Cart",
|
||||
"BACK": "Back to Shop"
|
||||
},
|
||||
"ABOUT": {
|
||||
"TITLE": "About Us",
|
||||
"CONTACT_US": "Contact Us",
|
||||
"SEND": "Send Message"
|
||||
}
|
||||
}
|
||||
43
frontend/src/assets/i18n/it.json
Normal file
43
frontend/src/assets/i18n/it.json
Normal file
@@ -0,0 +1,43 @@
|
||||
{
|
||||
"NAV": {
|
||||
"CALCULATOR": "Calcolatore",
|
||||
"SHOP": "Shop",
|
||||
"ABOUT": "Chi Siamo"
|
||||
},
|
||||
"FOOTER": {
|
||||
"PRIVACY": "Privacy",
|
||||
"TERMS": "Termini & Condizioni",
|
||||
"CONTACT": "Contattaci"
|
||||
},
|
||||
"CALC": {
|
||||
"TITLE": "Calcola Preventivo 3D",
|
||||
"SUBTITLE": "Carica il tuo file STL e ricevi una stima immediata dei costi e tempi di stampa.",
|
||||
"CTA_START": "Inizia Ora",
|
||||
"BUSINESS": "Aziende",
|
||||
"PRIVATE": "Privati",
|
||||
"MODE_EASY": "Easy",
|
||||
"MODE_ADVANCED": "Advanced",
|
||||
"UPLOAD_LABEL": "Trascina il tuo file STL qui",
|
||||
"UPLOAD_SUB": "Supportiamo STL, OBJ fino a 50MB",
|
||||
"MATERIAL": "Materiale",
|
||||
"QUALITY": "Qualità",
|
||||
"QUANTITY": "Quantità",
|
||||
"NOTES": "Note aggiuntive",
|
||||
"CALCULATE": "Calcola Preventivo",
|
||||
"RESULT": "Preventivo Stimato",
|
||||
"TIME": "Tempo Stampa",
|
||||
"COST": "Costo Totale",
|
||||
"ORDER": "Ordina Ora",
|
||||
"CONSULT": "Richiedi Consulenza"
|
||||
},
|
||||
"SHOP": {
|
||||
"TITLE": "Filamenti & Accessori",
|
||||
"ADD_CART": "Aggiungi al Carrello",
|
||||
"BACK": "Torna allo Shop"
|
||||
},
|
||||
"ABOUT": {
|
||||
"TITLE": "Chi Siamo",
|
||||
"CONTACT_US": "Contattaci",
|
||||
"SEND": "Invia Messaggio"
|
||||
}
|
||||
}
|
||||
@@ -1,119 +1,47 @@
|
||||
/* Global Styles & Variables */
|
||||
:root {
|
||||
/* Color Palette - Modern Dark Theme */
|
||||
--primary-color: #6366f1; /* Indigo 500 */
|
||||
--primary-hover: #4f46e5; /* Indigo 600 */
|
||||
--secondary-color: #ec4899; /* Pink 500 */
|
||||
/* src/styles.scss */
|
||||
@use './styles/theme';
|
||||
|
||||
--bg-color: #0f172a; /* Slate 900 */
|
||||
--surface-color: #1e293b; /* Slate 800 */
|
||||
--surface-hover: #334155; /* Slate 700 */
|
||||
|
||||
--text-main: #f8fafc; /* Slate 50 */
|
||||
--text-muted: #94a3b8; /* Slate 400 */
|
||||
|
||||
--border-color: #334155;
|
||||
|
||||
/* Spacing & Radius */
|
||||
--radius-sm: 0.375rem;
|
||||
--radius-md: 0.5rem;
|
||||
--radius-lg: 0.75rem;
|
||||
--radius-xl: 1rem;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
|
||||
/* Transitions */
|
||||
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
/* Reset / Base */
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Roboto', 'Helvetica Neue', sans-serif;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-main);
|
||||
font-family: var(--font-family-sans);
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* Common Layout Utilities */
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: var(--surface-color);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 2rem;
|
||||
box-shadow: var(--shadow-md);
|
||||
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background-color var(--transition-fast);
|
||||
border: none;
|
||||
font-size: 1rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--primary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-main);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--surface-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.grid-2 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
p {
|
||||
margin-top: 0;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.025em;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--primary-color);
|
||||
color: var(--color-brand);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
/* Utilities */
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--space-4);
|
||||
}
|
||||
|
||||
.text-center { text-align: center; }
|
||||
.mb-4 { margin-bottom: var(--space-4); }
|
||||
.mt-4 { margin-top: var(--space-4); }
|
||||
18
frontend/src/styles/theme.scss
Normal file
18
frontend/src/styles/theme.scss
Normal file
@@ -0,0 +1,18 @@
|
||||
/* src/styles/theme.scss */
|
||||
@use 'tokens';
|
||||
|
||||
:root {
|
||||
/* Semantic Colors - Theming Layer */
|
||||
--color-bg: var(--color-neutral-50);
|
||||
--color-bg-card: #ffffff;
|
||||
--color-text: var(--color-neutral-900);
|
||||
--color-text-muted: var(--color-secondary-500);
|
||||
|
||||
--color-brand: var(--color-primary-600);
|
||||
--color-brand-hover: var(--color-primary-700);
|
||||
|
||||
--color-border: var(--color-neutral-200);
|
||||
|
||||
/* Font */
|
||||
--font-family-sans: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
41
frontend/src/styles/tokens.scss
Normal file
41
frontend/src/styles/tokens.scss
Normal file
@@ -0,0 +1,41 @@
|
||||
/* src/styles/tokens.scss */
|
||||
:root {
|
||||
/* Colors - Palette */
|
||||
--color-primary-500: #3b82f6;
|
||||
--color-primary-600: #2563eb;
|
||||
--color-primary-700: #1d4ed8;
|
||||
|
||||
--color-secondary-500: #64748b;
|
||||
--color-secondary-600: #475569;
|
||||
|
||||
--color-success-500: #22c55e;
|
||||
--color-warning-500: #eab308;
|
||||
--color-danger-500: #ef4444;
|
||||
|
||||
--color-neutral-50: #f8fafc;
|
||||
--color-neutral-100: #f1f5f9;
|
||||
--color-neutral-200: #e2e8f0;
|
||||
--color-neutral-300: #cbd5e1;
|
||||
--color-neutral-800: #1e293b;
|
||||
--color-neutral-900: #0f172a;
|
||||
|
||||
/* Spacing */
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 0.75rem;
|
||||
--space-4: 1rem;
|
||||
--space-6: 1.5rem;
|
||||
--space-8: 2rem;
|
||||
--space-12: 3rem;
|
||||
|
||||
/* Radius */
|
||||
--radius-sm: 0.25rem;
|
||||
--radius-md: 0.375rem;
|
||||
--radius-lg: 0.5rem;
|
||||
--radius-xl: 1rem;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
Reference in New Issue
Block a user