JoeKung/print-calculator
1
1
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(web) improvements in ui for calculator
All checks were successful
Build, Test and Deploy / test-backend (push) Successful in 22s
Details
Build, Test and Deploy / build-and-push (push) Successful in 21s
Details
Build, Test and Deploy / deploy (push) Successful in 4s
Details

Browse Source
This commit is contained in:
Joe Küng
2026-02-05 15:03:18 +01:00
parent 8a7d736aa9
commit 0b4daed512
3 changed files with 206 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/app/features/calculator/calculator-page.component.ts
View File

@@ -39,13 +39,14 @@ import { Router } from '@angular/router';
<app-upload-form
[mode]="mode()"
[loading]="loading()"
[uploadProgress]="uploadProgress()"
(submitRequest)="onCalculate($event)"
></app-upload-form>
</app-card>
</div>
<!-- Right Column: Result or Info -->
<div class="col-result">
<div class="col-result centered-col">
@if (error()) {
<app-alert type="error">Si è verificato un errore durante il calcolo del preventivo.</app-alert>
}
@@ -86,6 +87,13 @@ import { Router } from '@angular/router';
}
}
.centered-col {
align-self: flex-start; /* Default */
@media(min-width: 768px) {
align-self: center;
}
}
/* Mode Selector (Segmented Control style) */
.mode-selector {
display: flex;
@@ -166,21 +174,29 @@ import { Router } from '@angular/router';
export class CalculatorPageComponent {
mode = signal<any>('easy');
loading = signal(false);
uploadProgress = signal(0);
result = signal<QuoteResult | null>(null);
error = signal<boolean>(false);
constructor(private estimator: QuoteEstimatorService, private router: Router) {}
onCalculate(req: QuoteRequest) {
this.currentRequest = req; // Store request for consultation
this.currentRequest = req;
this.loading.set(true);
this.uploadProgress.set(0);
this.error.set(false);
this.result.set(null);
this.estimator.calculate(req).subscribe({
next: (res) => {
this.result.set(res);
this.loading.set(false);
next: (event) => {
if (typeof event === 'number') {
this.uploadProgress.set(event);
} else {
// It's the result
this.result.set(event as QuoteResult);
this.loading.set(false);
this.uploadProgress.set(100);
}
},
error: () => {
this.error.set(true);

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

@@ -102,13 +102,12 @@ import { QuoteRequest } from '../../services/quote-estimator.service';
}
<div class="actions">
<!-- Progress Bar (Only when loading) -->
@if (loading()) {
<!-- Progress Bar (Only when uploading i.e. progress < 100) -->
@if (loading() && uploadProgress() < 100) {
<div class="progress-container">
<div class="progress-bar">
<div class="progress-fill"></div>
<div class="progress-fill" [style.width.%]="uploadProgress()"></div>
</div>
<!-- <p class="progress-text">Uploading & Analyzing...</p> -->
</div>
}
@@ -116,7 +115,7 @@ import { QuoteRequest } from '../../services/quote-estimator.service';
type="submit"
[disabled]="form.invalid || loading()"
[fullWidth]="true">
{{ loading() ? 'Processing...' : ('CALC.CALCULATE' | translate) }}
{{ loading() ? (uploadProgress() < 100 ? 'Uploading...' : 'Processing...') : ('CALC.CALCULATE' | translate) }}
</app-button>
</div>
</form>
@@ -205,20 +204,15 @@ import { QuoteRequest } from '../../services/quote-estimator.service';
height: 100%;
background: var(--color-brand);
width: 0%;
animation: progress 2s ease-in-out infinite;
transition: width 0.2s ease-out;
}
.progress-text { font-size: 0.875rem; color: var(--color-text-muted); }
@keyframes progress {
0% { width: 0%; transform: translateX(-100%); }
50% { width: 100%; transform: translateX(0); }
100% { width: 100%; transform: translateX(100%); }
}
`]
})
export class UploadFormComponent {
mode = input<'easy' | 'advanced'>('easy');
loading = input<boolean>(false);
uploadProgress = input<number>(0);
submitRequest = output<QuoteRequest>();
form: FormGroup;

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

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