feat(web + backend): advanced and simple quote.
This commit is contained in:
@@ -1,9 +1,13 @@
|
||||
import { Routes } from '@angular/router';
|
||||
import {CalculatorComponent} from './calculator/calculator.component';
|
||||
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: CalculatorComponent
|
||||
}
|
||||
{ path: '', component: HomeComponent },
|
||||
{ path: 'quote/basic', component: BasicQuoteComponent },
|
||||
{ path: 'quote/advanced', component: AdvancedQuoteComponent },
|
||||
{ path: 'contact', component: ContactComponent },
|
||||
{ path: '**', redirectTo: '' }
|
||||
];
|
||||
|
||||
218
frontend/src/app/common/stl-viewer/stl-viewer.component.ts
Normal file
218
frontend/src/app/common/stl-viewer/stl-viewer.component.ts
Normal file
@@ -0,0 +1,218 @@
|
||||
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);
|
||||
}
|
||||
}
|
||||
50
frontend/src/app/contact/contact.component.html
Normal file
50
frontend/src/app/contact/contact.component.html
Normal file
@@ -0,0 +1,50 @@
|
||||
<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>
|
||||
97
frontend/src/app/contact/contact.component.scss
Normal file
97
frontend/src/app/contact/contact.component.scss
Normal file
@@ -0,0 +1,97 @@
|
||||
.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); }
|
||||
}
|
||||
17
frontend/src/app/contact/contact.component.ts
Normal file
17
frontend/src/app/contact/contact.component.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
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.");
|
||||
}
|
||||
}
|
||||
38
frontend/src/app/home/home.component.html
Normal file
38
frontend/src/app/home/home.component.html
Normal file
@@ -0,0 +1,38 @@
|
||||
<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>
|
||||
81
frontend/src/app/home/home.component.scss
Normal file
81
frontend/src/app/home/home.component.scss
Normal file
@@ -0,0 +1,81 @@
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
12
frontend/src/app/home/home.component.ts
Normal file
12
frontend/src/app/home/home.component.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
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 {}
|
||||
23
frontend/src/app/print.service.ts
Normal file
23
frontend/src/app/print.service.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
import { Injectable, inject } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Observable } from 'rxjs';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class PrintService {
|
||||
private http = inject(HttpClient);
|
||||
private apiUrl = 'http://127.0.0.1:8000'; // Should be in environment
|
||||
|
||||
calculateQuote(file: File, params?: any): Observable<any> {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
// Append extra params if meant for backend
|
||||
if (params) {
|
||||
// for key in params...
|
||||
}
|
||||
|
||||
return this.http.post(`${this.apiUrl}/calculate/stl`, formData);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
<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>Layer Height (mm)</label>
|
||||
<select [(ngModel)]="params.layerHeight">
|
||||
<option value="0.12">0.12 (High Quality)</option>
|
||||
<option value="0.16">0.16 (Quality)</option>
|
||||
<option value="0.20">0.20 (Standard)</option>
|
||||
<option value="0.24">0.24 (Draft)</option>
|
||||
<option value="0.28">0.28 (Extra Draft)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Infill Density (%)</label>
|
||||
<div class="range-wrapper">
|
||||
<input type="range" [(ngModel)]="params.infill" min="0" max="100" step="5">
|
||||
<span>{{ params.infill }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Wall Loops</label>
|
||||
<input type="number" [(ngModel)]="params.walls" min="1" max="10">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Top/Bottom Shells</label>
|
||||
<input type="number" [(ngModel)]="params.topBottom" min="1" max="10">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Material</label>
|
||||
<select [(ngModel)]="params.material">
|
||||
<option value="PLA">PLA</option>
|
||||
<option value="PETG">PETG</option>
|
||||
<option value="ABS">ABS</option>
|
||||
<option value="TPU">TPU</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:'EUR' }}
|
||||
</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 class="spec-item">
|
||||
<span>Printer</span>
|
||||
<strong>{{ quoteResult.printer }}</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 }}%</span>
|
||||
</div>
|
||||
<div class="spec-item compact">
|
||||
<span>Layer Height</span>
|
||||
<span>{{ params.layerHeight }}mm</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="note-box">
|
||||
<p>Note: Advanced parameters are saved for review but estimation currently uses standard profile benchmarks.</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>
|
||||
@@ -0,0 +1,268 @@
|
||||
.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); }
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
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;
|
||||
|
||||
// Parameters
|
||||
params = {
|
||||
layerHeight: '0.20',
|
||||
infill: 15,
|
||||
walls: 2,
|
||||
topBottom: 3,
|
||||
material: 'PLA'
|
||||
};
|
||||
|
||||
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, this.params)
|
||||
.subscribe({
|
||||
next: (res) => {
|
||||
this.quoteResult = res;
|
||||
this.isCalculating = false;
|
||||
},
|
||||
error: (err) => {
|
||||
console.error(err);
|
||||
alert('Calculation failed: ' + (err.error?.detail || err.message));
|
||||
this.isCalculating = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
133
frontend/src/app/quote/basic-quote/basic-quote.component.html
Normal file
133
frontend/src/app/quote/basic-quote/basic-quote.component.html
Normal file
@@ -0,0 +1,133 @@
|
||||
<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 === 'fragile'"
|
||||
(click)="selectStrength('fragile')">
|
||||
<span class="emoji">🥚</span>
|
||||
<div class="info">
|
||||
<h4>Standard</h4>
|
||||
<p>For decorative parts</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="strength-card"
|
||||
[class.active]="selectedStrength === 'medium'"
|
||||
(click)="selectStrength('medium')">
|
||||
<span class="emoji">🧱</span>
|
||||
<div class="info">
|
||||
<h4>Strong</h4>
|
||||
<p>For functional parts</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="strength-card"
|
||||
[class.active]="selectedStrength === 'resistant'"
|
||||
(click)="selectStrength('resistant')">
|
||||
<span class="emoji">🦾</span>
|
||||
<div class="info">
|
||||
<h4>Ultra</h4>
|
||||
<p>Max strength & durability</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:'EUR' }}
|
||||
</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 class="spec-item">
|
||||
<span>Printer</span>
|
||||
<strong>{{ quoteResult.printer }}</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>
|
||||
254
frontend/src/app/quote/basic-quote/basic-quote.component.scss
Normal file
254
frontend/src/app/quote/basic-quote/basic-quote.component.scss
Normal file
@@ -0,0 +1,254 @@
|
||||
.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); }
|
||||
}
|
||||
87
frontend/src/app/quote/basic-quote/basic-quote.component.ts
Normal file
87
frontend/src/app/quote/basic-quote/basic-quote.component.ts
Normal file
@@ -0,0 +1,87 @@
|
||||
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: 'fragile' | 'medium' | 'resistant' = 'medium';
|
||||
isDragOver = false;
|
||||
isCalculating = false;
|
||||
quoteResult: any = null;
|
||||
|
||||
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: 'fragile' | 'medium' | 'resistant') {
|
||||
this.selectedStrength = strength;
|
||||
}
|
||||
|
||||
calculate() {
|
||||
if (!this.selectedFile) return;
|
||||
|
||||
this.isCalculating = true;
|
||||
|
||||
this.printService.calculateQuote(this.selectedFile, { strength: this.selectedStrength })
|
||||
.subscribe({
|
||||
next: (res) => {
|
||||
this.quoteResult = res;
|
||||
this.isCalculating = false;
|
||||
},
|
||||
error: (err) => {
|
||||
console.error(err);
|
||||
alert('Calculation failed: ' + (err.error?.detail || err.message));
|
||||
this.isCalculating = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,119 @@
|
||||
/* You can add global styles to this file, and also import other style files */
|
||||
/* Global Styles & Variables */
|
||||
:root {
|
||||
/* Color Palette - Modern Dark Theme */
|
||||
--primary-color: #6366f1; /* Indigo 500 */
|
||||
--primary-hover: #4f46e5; /* Indigo 600 */
|
||||
--secondary-color: #ec4899; /* Pink 500 */
|
||||
|
||||
--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%; }
|
||||
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Roboto', 'Helvetica Neue', sans-serif;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-main);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* Common Layout Utilities */
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.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 {
|
||||
margin-top: 0;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user