Model Update
This commit is contained in:
221
src/app.css
221
src/app.css
@@ -6,132 +6,155 @@
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Spacing & Typography */
|
||||
--spacing: 0.25rem;
|
||||
--text-scaling: 1.067;
|
||||
/* Spacing & Typography */
|
||||
--spacing: 0.25rem;
|
||||
--text-scaling: 1.067;
|
||||
|
||||
/* Font Family - JetBrains Mono */
|
||||
--base-font-family: "JetBrains Mono", system-ui, sans-serif;
|
||||
/* Font Family - JetBrains Mono */
|
||||
--base-font-family: "JetBrains Mono", system-ui, sans-serif;
|
||||
|
||||
/* Primary Colors */
|
||||
--color-primary-50: oklch(0.92 0.04 257.51);
|
||||
--color-primary-100: oklch(0.84 0.08 254.62);
|
||||
--color-primary-200: oklch(0.77 0.11 254.28);
|
||||
--color-primary-300: oklch(0.7 0.15 254.36);
|
||||
--color-primary-400: oklch(0.63 0.19 255.71);
|
||||
--color-primary-500: oklch(0.57 0.21 258.29);
|
||||
--color-primary-600: oklch(0.52 0.19 258.15);
|
||||
--color-primary-700: oklch(0.46 0.17 257.78);
|
||||
--color-primary-800: oklch(0.4 0.14 257.62);
|
||||
--color-primary-900: oklch(0.34 0.11 257.14);
|
||||
--color-primary-950: oklch(0.28 0.08 257.49);
|
||||
/* Primary Colors */
|
||||
--color-primary-50: oklch(0.92 0.04 257.51);
|
||||
--color-primary-100: oklch(0.84 0.08 254.62);
|
||||
--color-primary-200: oklch(0.77 0.11 254.28);
|
||||
--color-primary-300: oklch(0.7 0.15 254.36);
|
||||
--color-primary-400: oklch(0.63 0.19 255.71);
|
||||
--color-primary-500: oklch(0.57 0.21 258.29);
|
||||
--color-primary-600: oklch(0.52 0.19 258.15);
|
||||
--color-primary-700: oklch(0.46 0.17 257.78);
|
||||
--color-primary-800: oklch(0.4 0.14 257.62);
|
||||
--color-primary-900: oklch(0.34 0.11 257.14);
|
||||
--color-primary-950: oklch(0.28 0.08 257.49);
|
||||
|
||||
/* Secondary Colors */
|
||||
--color-secondary-50: oklch(0.87 0.05 300.12);
|
||||
--color-secondary-100: oklch(0.79 0.09 303.55);
|
||||
--color-secondary-200: oklch(0.7 0.13 304.43);
|
||||
--color-secondary-300: oklch(0.63 0.17 303.8);
|
||||
--color-secondary-400: oklch(0.55 0.2 302.74);
|
||||
--color-secondary-500: oklch(0.49 0.23 300.45);
|
||||
--color-secondary-600: oklch(0.45 0.21 299.59);
|
||||
--color-secondary-700: oklch(0.42 0.19 298.25);
|
||||
--color-secondary-800: oklch(0.38 0.17 296.27);
|
||||
--color-secondary-900: oklch(0.34 0.15 293.96);
|
||||
--color-secondary-950: oklch(0.3 0.13 291.15);
|
||||
/* Secondary Colors */
|
||||
--color-secondary-50: oklch(0.87 0.05 300.12);
|
||||
--color-secondary-100: oklch(0.79 0.09 303.55);
|
||||
--color-secondary-200: oklch(0.7 0.13 304.43);
|
||||
--color-secondary-300: oklch(0.63 0.17 303.8);
|
||||
--color-secondary-400: oklch(0.55 0.2 302.74);
|
||||
--color-secondary-500: oklch(0.49 0.23 300.45);
|
||||
--color-secondary-600: oklch(0.45 0.21 299.59);
|
||||
--color-secondary-700: oklch(0.42 0.19 298.25);
|
||||
--color-secondary-800: oklch(0.38 0.17 296.27);
|
||||
--color-secondary-900: oklch(0.34 0.15 293.96);
|
||||
--color-secondary-950: oklch(0.3 0.13 291.15);
|
||||
|
||||
/* Tertiary Colors */
|
||||
--color-tertiary-50: oklch(0.91 0.08 328.89);
|
||||
--color-tertiary-100: oklch(0.83 0.13 339.66);
|
||||
--color-tertiary-200: oklch(0.76 0.18 345.54);
|
||||
--color-tertiary-300: oklch(0.7 0.23 350.67);
|
||||
--color-tertiary-400: oklch(0.66 0.25 355.84);
|
||||
--color-tertiary-500: oklch(0.65 0.26 2.47);
|
||||
--color-tertiary-600: oklch(0.59 0.24 1.69);
|
||||
--color-tertiary-700: oklch(0.54 0.22 0.5);
|
||||
--color-tertiary-800: oklch(0.48 0.2 359.65);
|
||||
--color-tertiary-900: oklch(0.43 0.17 357.7);
|
||||
--color-tertiary-950: oklch(0.37 0.15 355.33);
|
||||
/* Tertiary Colors */
|
||||
--color-tertiary-50: oklch(0.91 0.08 328.89);
|
||||
--color-tertiary-100: oklch(0.83 0.13 339.66);
|
||||
--color-tertiary-200: oklch(0.76 0.18 345.54);
|
||||
--color-tertiary-300: oklch(0.7 0.23 350.67);
|
||||
--color-tertiary-400: oklch(0.66 0.25 355.84);
|
||||
--color-tertiary-500: oklch(0.65 0.26 2.47);
|
||||
--color-tertiary-600: oklch(0.59 0.24 1.69);
|
||||
--color-tertiary-700: oklch(0.54 0.22 0.5);
|
||||
--color-tertiary-800: oklch(0.48 0.2 359.65);
|
||||
--color-tertiary-900: oklch(0.43 0.17 357.7);
|
||||
--color-tertiary-950: oklch(0.37 0.15 355.33);
|
||||
|
||||
/* Success Colors */
|
||||
--color-success-50: oklch(0.94 0.09 178.68);
|
||||
--color-success-500: oklch(0.83 0.13 174.96);
|
||||
--color-success-950: oklch(0.27 0.04 185.3);
|
||||
/* Success Colors */
|
||||
--color-success-50: oklch(0.94 0.09 178.68);
|
||||
--color-success-500: oklch(0.83 0.13 174.96);
|
||||
--color-success-950: oklch(0.27 0.04 185.3);
|
||||
|
||||
/* Warning Colors */
|
||||
--color-warning-50: oklch(0.96 0.05 84.57);
|
||||
--color-warning-500: oklch(0.82 0.14 76.72);
|
||||
--color-warning-950: oklch(0.52 0.13 51.44);
|
||||
/* Warning Colors */
|
||||
--color-warning-50: oklch(0.96 0.05 84.57);
|
||||
--color-warning-500: oklch(0.82 0.14 76.72);
|
||||
--color-warning-950: oklch(0.52 0.13 51.44);
|
||||
|
||||
/* Error Colors */
|
||||
--color-error-50: oklch(0.9 0.04 14);
|
||||
--color-error-500: oklch(0.64 0.22 28.71);
|
||||
--color-error-950: oklch(0.42 0.17 29.23);
|
||||
/* Error Colors */
|
||||
--color-error-50: oklch(0.9 0.04 14);
|
||||
--color-error-500: oklch(0.64 0.22 28.71);
|
||||
--color-error-950: oklch(0.42 0.17 29.23);
|
||||
|
||||
/* Surface Colors - Cerberus Exact */
|
||||
--color-surface-50: oklch(0.99 0 0);
|
||||
--color-surface-100: oklch(0.91 0 0);
|
||||
--color-surface-200: oklch(0.81 0 0);
|
||||
--color-surface-300: oklch(0.72 0 0);
|
||||
--color-surface-400: oklch(0.62 0 0);
|
||||
--color-surface-500: oklch(0.51 0 0);
|
||||
--color-surface-600: oklch(0.45 0 0);
|
||||
--color-surface-700: oklch(0.39 0 0);
|
||||
--color-surface-800: oklch(0.32 0 0);
|
||||
--color-surface-900: oklch(0.25 0 0);
|
||||
--color-surface-950: oklch(0.18 0 0);
|
||||
/* Surface Colors - Cerberus Exact */
|
||||
--color-surface-50: oklch(0.99 0 0);
|
||||
--color-surface-100: oklch(0.91 0 0);
|
||||
--color-surface-200: oklch(0.81 0 0);
|
||||
--color-surface-300: oklch(0.72 0 0);
|
||||
--color-surface-400: oklch(0.62 0 0);
|
||||
--color-surface-500: oklch(0.51 0 0);
|
||||
--color-surface-600: oklch(0.45 0 0);
|
||||
--color-surface-700: oklch(0.39 0 0);
|
||||
--color-surface-800: oklch(0.32 0 0);
|
||||
--color-surface-900: oklch(0.25 0 0);
|
||||
--color-surface-950: oklch(0.18 0 0);
|
||||
|
||||
/* Semantic Colors */
|
||||
--base-font-color: var(--color-surface-950);
|
||||
--base-font-color-dark: var(--color-surface-50);
|
||||
--body-background-color: var(--color-surface-50);
|
||||
--body-background-color-dark: var(--color-surface-950);
|
||||
/* Semantic Colors */
|
||||
--base-font-color: var(--color-surface-950);
|
||||
--base-font-color-dark: var(--color-surface-50);
|
||||
--body-background-color: var(--color-surface-50);
|
||||
--body-background-color-dark: var(--color-surface-950);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "JetBrains Mono";
|
||||
src: url("/font/JetBrainsMono-Regular.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-family: "JetBrains Mono";
|
||||
src: url("/font/JetBrainsMono-Regular.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@theme {
|
||||
--font-mono: "JetBrains Mono", monospace;
|
||||
--font-display: "JetBrains Mono", monospace;
|
||||
--font-body: "JetBrains Mono", monospace;
|
||||
--font-mono: "JetBrains Mono", monospace;
|
||||
--font-display: "JetBrains Mono", monospace;
|
||||
--font-body: "JetBrains Mono", monospace;
|
||||
|
||||
/* Register Theme Colors for Tailwind */
|
||||
--color-background: var(--body-background-color-dark);
|
||||
--color-surface: var(--color-surface-900);
|
||||
/* Register Theme Colors for Tailwind */
|
||||
--color-background: var(--body-background-color-dark);
|
||||
--color-surface: var(--color-surface-900);
|
||||
|
||||
--color-primary: var(--color-primary-500);
|
||||
--color-secondary: var(--color-secondary-500);
|
||||
--color-accent: var(--color-tertiary-500);
|
||||
--color-primary: var(--color-primary-500);
|
||||
--color-secondary: var(--color-secondary-500);
|
||||
--color-accent: var(--color-tertiary-500);
|
||||
|
||||
--color-success: var(--color-success-500);
|
||||
--color-warning: var(--color-warning-500);
|
||||
--color-danger: var(--color-error-500);
|
||||
--color-success: var(--color-success-500);
|
||||
--color-warning: var(--color-warning-500);
|
||||
--color-danger: var(--color-error-500);
|
||||
|
||||
--color-text-main: var(--base-font-color-dark);
|
||||
--color-text-muted: var(--color-surface-400);
|
||||
--color-text-main: var(--base-font-color-dark);
|
||||
--color-text-muted: var(--color-surface-400);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--body-background-color-dark);
|
||||
color: var(--base-font-color-dark);
|
||||
font-family: var(--base-font-family);
|
||||
@apply antialiased min-h-screen selection:bg-primary selection:text-white;
|
||||
background-color: var(--body-background-color-dark);
|
||||
color: var(--base-font-color-dark);
|
||||
font-family: var(--base-font-family);
|
||||
@apply antialiased min-h-screen selection:bg-primary selection:text-white;
|
||||
}
|
||||
|
||||
/* Card Utilities */
|
||||
.glass-card {
|
||||
background-color: var(--color-surface-900);
|
||||
border: 1px solid var(--color-surface-700);
|
||||
@apply rounded-xl shadow-lg transition-all duration-300;
|
||||
background-color: var(--color-surface-900);
|
||||
border: 1px solid var(--color-surface-700);
|
||||
@apply rounded-xl shadow-lg transition-all duration-300;
|
||||
}
|
||||
|
||||
.glass-card:hover {
|
||||
background-color: var(--color-surface-800);
|
||||
border-color: var(--color-primary-500);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
|
||||
background-color: var(--color-surface-800);
|
||||
border-color: var(--color-primary-500);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* Date Input Dark Theme Styling */
|
||||
input[type="date"] {
|
||||
color-scheme: dark;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
input[type="date"]::-webkit-calendar-picker-indicator {
|
||||
filter: invert(0.7);
|
||||
cursor: pointer;
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
input[type="date"]::-webkit-calendar-picker-indicator:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Firefox date input styling */
|
||||
input[type="date"]::-moz-calendar-picker-indicator {
|
||||
filter: invert(0.7);
|
||||
}
|
||||
|
||||
@@ -47,6 +47,22 @@
|
||||
window.location.reload();
|
||||
}
|
||||
|
||||
async function handleDuplicate() {
|
||||
if (
|
||||
!confirm(
|
||||
"Create a duplicate print log? This will deduct filament from your spool.",
|
||||
)
|
||||
)
|
||||
return;
|
||||
isSubmitting = true;
|
||||
const formData = new FormData();
|
||||
formData.append("id", print._id);
|
||||
await fetch("?/duplicate", { method: "POST", body: formData });
|
||||
isSubmitting = false;
|
||||
handleClose();
|
||||
window.location.reload();
|
||||
}
|
||||
|
||||
// STL Upload
|
||||
let stlFile = $state<File | null>(null);
|
||||
let uploadProgress = $state(0);
|
||||
@@ -222,6 +238,28 @@
|
||||
|
||||
<Input label="Print Name" name="name" value={print.name} required />
|
||||
|
||||
<!-- Date Field -->
|
||||
<div class="space-y-2">
|
||||
<!-- svelte-ignore a11y_label_has_associated_control -->
|
||||
<label
|
||||
class="block text-xs font-medium text-slate-400 uppercase tracking-wider"
|
||||
>
|
||||
Date
|
||||
</label>
|
||||
<div class="relative">
|
||||
<Icon
|
||||
icon="mdi:calendar"
|
||||
class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500 pointer-events-none"
|
||||
/>
|
||||
<input
|
||||
type="date"
|
||||
name="date"
|
||||
value={new Date(print.date).toISOString().split("T")[0]}
|
||||
class="w-full rounded-lg bg-slate-800/50 border border-slate-700 pl-10 pr-4 py-2.5 text-sm text-slate-100 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500/30 transition-all"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- STL Viewer/Upload -->
|
||||
<div class="space-y-2">
|
||||
<!-- svelte-ignore a11y_label_has_associated_control -->
|
||||
@@ -494,6 +532,51 @@
|
||||
{:else}
|
||||
<!-- Completed print fields -->
|
||||
<div class="space-y-4">
|
||||
<!-- Printer and Spool Selection -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<!-- svelte-ignore a11y_label_has_associated_control -->
|
||||
<label
|
||||
class="block text-xs font-medium text-slate-400 uppercase tracking-wider"
|
||||
>Printer</label
|
||||
>
|
||||
<select
|
||||
name="printer_id"
|
||||
class="w-full rounded-lg bg-slate-800/50 border border-slate-700 px-4 py-2.5 text-sm text-slate-100 focus:border-blue-500 focus:outline-none"
|
||||
>
|
||||
{#each printers as p}
|
||||
<option
|
||||
value={p._id}
|
||||
selected={print.printer_id?._id ===
|
||||
p._id || print.printer_id === p._id}
|
||||
>{p.name}</option
|
||||
>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<!-- svelte-ignore a11y_label_has_associated_control -->
|
||||
<label
|
||||
class="block text-xs font-medium text-slate-400 uppercase tracking-wider"
|
||||
>Spool</label
|
||||
>
|
||||
<select
|
||||
name="spool_id"
|
||||
class="w-full rounded-lg bg-slate-800/50 border border-slate-700 px-4 py-2.5 text-sm text-slate-100 focus:border-blue-500 focus:outline-none"
|
||||
>
|
||||
{#each spools as s}
|
||||
<option
|
||||
value={s._id}
|
||||
selected={print.spool_id?._id ===
|
||||
s._id || print.spool_id === s._id}
|
||||
>{s.brand}
|
||||
{s.material} ({s.weight_remaining_g}g
|
||||
left)</option
|
||||
>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<!-- svelte-ignore a11y_label_has_associated_control -->
|
||||
<label
|
||||
@@ -550,22 +633,29 @@
|
||||
{/if}
|
||||
|
||||
<div class="pt-4 flex justify-between">
|
||||
<Button
|
||||
variant="destructive"
|
||||
type="button"
|
||||
disabled={isSubmitting}
|
||||
onclick={handleDelete}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
<div class="flex gap-3">
|
||||
<Button variant="ghost" onclick={handleClose} type="button"
|
||||
>Cancel</Button
|
||||
<div class="flex gap-2">
|
||||
<Button
|
||||
variant="destructive"
|
||||
type="button"
|
||||
disabled={isSubmitting}
|
||||
onclick={handleDelete}
|
||||
>
|
||||
<Button type="submit" disabled={isSubmitting}>
|
||||
{isSubmitting ? "Saving..." : "Save Changes"}
|
||||
<Icon icon="mdi:delete" class="w-4 h-4 mr-1" />
|
||||
Delete
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
type="button"
|
||||
disabled={isSubmitting}
|
||||
onclick={handleDuplicate}
|
||||
>
|
||||
<Icon icon="mdi:content-copy" class="w-4 h-4 mr-1" />
|
||||
Duplicate
|
||||
</Button>
|
||||
</div>
|
||||
<Button type="submit" disabled={isSubmitting}>
|
||||
{isSubmitting ? "Saving..." : "Save Changes"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
{/if}
|
||||
|
||||
@@ -192,6 +192,28 @@
|
||||
required
|
||||
/>
|
||||
|
||||
<!-- Date Field -->
|
||||
<div class="space-y-2">
|
||||
<!-- svelte-ignore a11y_label_has_associated_control -->
|
||||
<label
|
||||
class="block text-xs font-medium text-slate-400 uppercase tracking-wider"
|
||||
>
|
||||
Date
|
||||
</label>
|
||||
<div class="relative">
|
||||
<Icon
|
||||
icon="mdi:calendar"
|
||||
class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500 pointer-events-none"
|
||||
/>
|
||||
<input
|
||||
type="date"
|
||||
name="date"
|
||||
value={new Date().toISOString().split("T")[0]}
|
||||
class="w-full rounded-lg bg-slate-800/50 border border-slate-700 pl-10 pr-4 py-2.5 text-sm text-slate-100 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500/30 transition-all"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3D Model Upload -->
|
||||
<div class="space-y-2">
|
||||
<!-- svelte-ignore a11y_label_has_associated_control -->
|
||||
@@ -457,10 +479,7 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="pt-4 flex justify-end gap-3">
|
||||
<Button variant="ghost" onclick={handleClose} type="button"
|
||||
>Cancel</Button
|
||||
>
|
||||
<div class="pt-4 flex justify-end">
|
||||
<Button type="submit" disabled={isSubmitting}>
|
||||
{isSubmitting
|
||||
? "Saving..."
|
||||
|
||||
@@ -1,65 +1,189 @@
|
||||
import { PrintJob } from '$lib/models/PrintJob';
|
||||
import { Printer } from '$lib/models/Printer';
|
||||
import { connectDB } from '$lib/server/db';
|
||||
import type { PageServerLoad } from './$types';
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
import { statSync, existsSync } from 'fs';
|
||||
import path from 'path';
|
||||
|
||||
export const load: PageServerLoad = async ({ locals }) => {
|
||||
export const load: PageServerLoad = async ({ locals, url }) => {
|
||||
if (!locals.user) throw redirect(303, '/login');
|
||||
|
||||
await connectDB();
|
||||
|
||||
// Fetch all prints for aggregation - filtered by user
|
||||
const prints = await PrintJob.find({ user_id: locals.user.id })
|
||||
.populate('spool_id', 'color_hex material')
|
||||
.populate('printer_id', 'power_consumption_watts')
|
||||
// Get time range from URL param (default: 30 days)
|
||||
const range = url.searchParams.get('range') || '30';
|
||||
let dateFilter: Date | null = null;
|
||||
|
||||
if (range !== 'all') {
|
||||
const days = parseInt(range);
|
||||
dateFilter = new Date();
|
||||
dateFilter.setDate(dateFilter.getDate() - days);
|
||||
}
|
||||
|
||||
// Build query with optional date filter
|
||||
const query: any = { user_id: locals.user.id };
|
||||
if (dateFilter) {
|
||||
query.date = { $gte: dateFilter };
|
||||
}
|
||||
|
||||
// Fetch all prints for aggregation
|
||||
const prints = await PrintJob.find(query)
|
||||
.populate('spool_id', 'color_hex material brand')
|
||||
.populate('printer_id', 'power_consumption_watts name')
|
||||
.sort({ date: 1 })
|
||||
.lean();
|
||||
|
||||
// 1. Success vs Fail
|
||||
// Get all printers for the user
|
||||
const printers = await Printer.find({ user_id: locals.user.id }).lean();
|
||||
|
||||
// 1. Success vs Fail vs Cancelled
|
||||
let successCount = 0;
|
||||
let failCount = 0;
|
||||
let cancelledCount = 0;
|
||||
let inProgressCount = 0;
|
||||
|
||||
// 2. Material Usage (Map: Material -> Weight)
|
||||
const materialUsage: Record<string, number> = {};
|
||||
|
||||
// 3. Usage Over Time (Last 30 days)
|
||||
// 3. Usage Over Time
|
||||
const usageByDate: Record<string, number> = {};
|
||||
|
||||
// 4. Electricity Usage Over Time (Wh)
|
||||
const electricityByDate: Record<string, number> = {};
|
||||
let totalElectricity = 0;
|
||||
|
||||
// 5. Cost tracking
|
||||
const costByDate: Record<string, number> = {};
|
||||
let totalCost = 0;
|
||||
let totalFilamentCost = 0;
|
||||
let totalEnergyCost = 0;
|
||||
|
||||
// 6. Print time tracking
|
||||
let totalPrintTime = 0;
|
||||
|
||||
// 7. Printer usage (how many prints per printer)
|
||||
const printerUsage: Record<string, { name: string; count: number; time: number }> = {};
|
||||
|
||||
// 8. Total filament used
|
||||
let totalFilamentUsed = 0;
|
||||
|
||||
// 9. Prints with 3D models count
|
||||
let printsWithModels = 0;
|
||||
let totalModelSize = 0; // Total file size of all models in bytes
|
||||
|
||||
// 10. Top printed models
|
||||
const modelCounts: Record<string, number> = {};
|
||||
|
||||
prints.forEach(print => {
|
||||
// Status
|
||||
if (print.status === 'Success') successCount++;
|
||||
else if (print.status === 'Fail') failCount++;
|
||||
else if (print.status === 'Cancelled') cancelledCount++;
|
||||
else if (print.status === 'In Progress') inProgressCount++;
|
||||
|
||||
// Material
|
||||
if (print.spool_id?.material) {
|
||||
const mat = print.spool_id.material;
|
||||
materialUsage[mat] = (materialUsage[mat] || 0) + print.filament_used_g;
|
||||
materialUsage[mat] = (materialUsage[mat] || 0) + (print.filament_used_g || 0);
|
||||
}
|
||||
|
||||
// Timeline - Filament
|
||||
const dateKey = new Date(print.date).toISOString().split('T')[0];
|
||||
usageByDate[dateKey] = (usageByDate[dateKey] || 0) + print.filament_used_g;
|
||||
usageByDate[dateKey] = (usageByDate[dateKey] || 0) + (print.filament_used_g || 0);
|
||||
|
||||
// Electricity: Power (W) × Duration (hours) = Wh
|
||||
const powerWatts = print.printer_id?.power_consumption_watts || 0;
|
||||
const powerWatts = (print.printer_id as any)?.power_consumption_watts || 0;
|
||||
const durationHours = (print.duration_minutes || 0) / 60;
|
||||
const wattHours = powerWatts * durationHours;
|
||||
|
||||
electricityByDate[dateKey] = (electricityByDate[dateKey] || 0) + wattHours;
|
||||
totalElectricity += wattHours;
|
||||
|
||||
// Cost
|
||||
const printCost = print.calculated_cost_filament || 0;
|
||||
const energyCost = print.calculated_cost_energy || 0;
|
||||
costByDate[dateKey] = (costByDate[dateKey] || 0) + printCost;
|
||||
totalCost += printCost;
|
||||
totalFilamentCost += (printCost - energyCost);
|
||||
totalEnergyCost += energyCost;
|
||||
|
||||
// Print time
|
||||
totalPrintTime += print.duration_minutes || 0;
|
||||
|
||||
// Printer usage
|
||||
const printerId = (print.printer_id as any)?._id?.toString() || 'unknown';
|
||||
const printerName = (print.printer_id as any)?.name || 'Unknown';
|
||||
if (!printerUsage[printerId]) {
|
||||
printerUsage[printerId] = { name: printerName, count: 0, time: 0 };
|
||||
}
|
||||
printerUsage[printerId].count++;
|
||||
printerUsage[printerId].time += print.duration_minutes || 0;
|
||||
|
||||
// Filament total
|
||||
totalFilamentUsed += print.filament_used_g || 0;
|
||||
|
||||
// 3D models
|
||||
if (print.stl_file) {
|
||||
printsWithModels++;
|
||||
modelCounts[print.name] = (modelCounts[print.name] || 0) + 1;
|
||||
|
||||
// Get file size
|
||||
try {
|
||||
const filePath = path.join('static', print.stl_file);
|
||||
if (existsSync(filePath)) {
|
||||
const stats = statSync(filePath);
|
||||
totalModelSize += stats.size;
|
||||
}
|
||||
} catch (e) {
|
||||
// Ignore file read errors
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Sort top models by count
|
||||
const topModels = Object.entries(modelCounts)
|
||||
.sort((a, b) => b[1] - a[1])
|
||||
.slice(0, 5)
|
||||
.map(([name, count]) => ({ name, count }));
|
||||
|
||||
// Calculate averages
|
||||
const completedPrints = successCount + failCount;
|
||||
const avgPrintTime = completedPrints > 0 ? totalPrintTime / completedPrints : 0;
|
||||
const avgCost = completedPrints > 0 ? totalCost / completedPrints : 0;
|
||||
const avgFilament = completedPrints > 0 ? totalFilamentUsed / completedPrints : 0;
|
||||
|
||||
// Convert printer usage to array and sort
|
||||
const printerStats = Object.values(printerUsage)
|
||||
.sort((a, b) => b.count - a.count);
|
||||
|
||||
return {
|
||||
analytics: {
|
||||
successRate: { success: successCount, fail: failCount },
|
||||
successRate: {
|
||||
success: successCount,
|
||||
fail: failCount,
|
||||
cancelled: cancelledCount,
|
||||
inProgress: inProgressCount
|
||||
},
|
||||
materialUsage,
|
||||
usageByDate,
|
||||
electricityByDate,
|
||||
totalElectricity: (totalElectricity / 1000).toFixed(2) // Convert to kWh
|
||||
costByDate,
|
||||
totalElectricity: (totalElectricity / 1000).toFixed(2),
|
||||
totalCost: totalCost.toFixed(2),
|
||||
totalFilamentCost: totalFilamentCost.toFixed(2),
|
||||
totalEnergyCost: totalEnergyCost.toFixed(2),
|
||||
totalPrintTime,
|
||||
totalFilamentUsed: Math.round(totalFilamentUsed),
|
||||
avgPrintTime: Math.round(avgPrintTime),
|
||||
avgCost: avgCost.toFixed(2),
|
||||
avgFilament: Math.round(avgFilament),
|
||||
printerStats,
|
||||
printsWithModels,
|
||||
totalModelSize,
|
||||
topModels,
|
||||
totalPrints: prints.length,
|
||||
range
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
@@ -1,18 +1,64 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import { goto } from "$app/navigation";
|
||||
import Chart from "chart.js/auto";
|
||||
import Card from "$lib/components/ui/Card.svelte";
|
||||
import Button from "$lib/components/ui/Button.svelte";
|
||||
import Icon from "@iconify/svelte";
|
||||
|
||||
let { data } = $props();
|
||||
// svelte-ignore non_reactive_update
|
||||
let analytics = $derived(data.analytics);
|
||||
|
||||
let timelineCanvas: HTMLCanvasElement;
|
||||
let pieCanvas: HTMLCanvasElement;
|
||||
let electricityCanvas: HTMLCanvasElement;
|
||||
let costCanvas: HTMLCanvasElement;
|
||||
let printerCanvas: HTMLCanvasElement;
|
||||
|
||||
// Time range options
|
||||
const ranges = [
|
||||
{ value: "7", label: "7 Days" },
|
||||
{ value: "30", label: "30 Days" },
|
||||
{ value: "90", label: "90 Days" },
|
||||
{ value: "365", label: "1 Year" },
|
||||
{ value: "all", label: "All Time" },
|
||||
];
|
||||
let selectedRange = $state(analytics.range);
|
||||
|
||||
function changeRange(range: string) {
|
||||
selectedRange = range;
|
||||
goto(`/analytics?range=${range}`);
|
||||
}
|
||||
|
||||
// Format minutes to hours:minutes
|
||||
function formatTime(minutes: number): string {
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const mins = minutes % 60;
|
||||
if (hours > 0) {
|
||||
return `${hours}h ${mins}m`;
|
||||
}
|
||||
return `${mins}m`;
|
||||
}
|
||||
|
||||
// Format bytes to human readable
|
||||
function formatBytes(bytes: number): string {
|
||||
if (bytes === 0) return "0 B";
|
||||
const k = 1024;
|
||||
const sizes = ["B", "KB", "MB", "GB"];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
const chartColors = [
|
||||
"#3b82f6",
|
||||
"#8b5cf6",
|
||||
"#10b981",
|
||||
"#f59e0b",
|
||||
"#ef4444",
|
||||
"#64748b",
|
||||
];
|
||||
|
||||
// 1. Timeline Chart - Filament Usage
|
||||
const dates = Object.keys(analytics.usageByDate).slice(-30);
|
||||
const weights = dates.map((d) => analytics.usageByDate[d]);
|
||||
@@ -20,7 +66,12 @@
|
||||
new Chart(timelineCanvas, {
|
||||
type: "line",
|
||||
data: {
|
||||
labels: dates,
|
||||
labels: dates.map((d) =>
|
||||
new Date(d).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
}),
|
||||
),
|
||||
datasets: [
|
||||
{
|
||||
label: "Filament Usage (g)",
|
||||
@@ -39,8 +90,14 @@
|
||||
legend: { display: false },
|
||||
},
|
||||
scales: {
|
||||
y: { grid: { color: "rgba(255,255,255,0.1)" } },
|
||||
x: { grid: { display: false } },
|
||||
y: {
|
||||
grid: { color: "rgba(255,255,255,0.1)" },
|
||||
ticks: { color: "#94a3b8" },
|
||||
},
|
||||
x: {
|
||||
grid: { display: false },
|
||||
ticks: { color: "#94a3b8" },
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -48,14 +105,6 @@
|
||||
// 2. Material Pie Chart
|
||||
const materials = Object.keys(analytics.materialUsage);
|
||||
const matWeights = materials.map((m) => analytics.materialUsage[m]);
|
||||
const chartColors = [
|
||||
"#3b82f6",
|
||||
"#8b5cf6",
|
||||
"#10b981",
|
||||
"#f59e0b",
|
||||
"#ef4444",
|
||||
"#64748b",
|
||||
];
|
||||
|
||||
new Chart(pieCanvas, {
|
||||
type: "doughnut",
|
||||
@@ -84,12 +133,17 @@
|
||||
);
|
||||
const electricityWh = electricDates.map(
|
||||
(d) => analytics.electricityByDate[d] / 1000,
|
||||
); // Convert to kWh
|
||||
);
|
||||
|
||||
new Chart(electricityCanvas, {
|
||||
type: "bar",
|
||||
data: {
|
||||
labels: electricDates,
|
||||
labels: electricDates.map((d) =>
|
||||
new Date(d).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
}),
|
||||
),
|
||||
datasets: [
|
||||
{
|
||||
label: "Electricity (kWh)",
|
||||
@@ -110,39 +164,189 @@
|
||||
scales: {
|
||||
y: {
|
||||
grid: { color: "rgba(255,255,255,0.1)" },
|
||||
ticks: { color: "#94a3b8" },
|
||||
title: { display: true, text: "kWh", color: "#94a3b8" },
|
||||
},
|
||||
x: { grid: { display: false } },
|
||||
x: {
|
||||
grid: { display: false },
|
||||
ticks: { color: "#94a3b8" },
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// 4. Cost Chart
|
||||
const costDates = Object.keys(analytics.costByDate).slice(-30);
|
||||
const costs = costDates.map((d) => analytics.costByDate[d]);
|
||||
|
||||
new Chart(costCanvas, {
|
||||
type: "line",
|
||||
data: {
|
||||
labels: costDates.map((d) =>
|
||||
new Date(d).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
}),
|
||||
),
|
||||
datasets: [
|
||||
{
|
||||
label: "Cost ($)",
|
||||
data: costs,
|
||||
borderColor: "#10b981",
|
||||
backgroundColor: "rgba(16, 185, 129, 0.2)",
|
||||
tension: 0.4,
|
||||
fill: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
grid: { color: "rgba(255,255,255,0.1)" },
|
||||
ticks: {
|
||||
color: "#94a3b8",
|
||||
callback: (value) => "$" + value,
|
||||
},
|
||||
},
|
||||
x: {
|
||||
grid: { display: false },
|
||||
ticks: { color: "#94a3b8" },
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// 5. Printer Usage Chart
|
||||
if (analytics.printerStats.length > 0) {
|
||||
new Chart(printerCanvas, {
|
||||
type: "bar",
|
||||
data: {
|
||||
labels: analytics.printerStats.map(
|
||||
(p: { name: string }) => p.name,
|
||||
),
|
||||
datasets: [
|
||||
{
|
||||
label: "Prints",
|
||||
data: analytics.printerStats.map(
|
||||
(p: { count: number }) => p.count,
|
||||
),
|
||||
backgroundColor: chartColors,
|
||||
borderRadius: 6,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
indexAxis: "y",
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
grid: { display: false },
|
||||
ticks: { color: "#94a3b8" },
|
||||
},
|
||||
x: {
|
||||
grid: { color: "rgba(255,255,255,0.1)" },
|
||||
ticks: { color: "#94a3b8" },
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Derived values
|
||||
let totalPrints = $derived(
|
||||
analytics.successRate.success + analytics.successRate.fail,
|
||||
analytics.successRate.success +
|
||||
analytics.successRate.fail +
|
||||
analytics.successRate.cancelled,
|
||||
);
|
||||
let successRate = $derived(
|
||||
totalPrints > 0
|
||||
? Math.round((analytics.successRate.success / totalPrints) * 100)
|
||||
: 0,
|
||||
);
|
||||
|
||||
// Export to CSV
|
||||
function exportToCSV() {
|
||||
const headers = [
|
||||
"Date",
|
||||
"Filament (g)",
|
||||
"Electricity (kWh)",
|
||||
"Cost ($)",
|
||||
];
|
||||
const dates = Object.keys(analytics.usageByDate);
|
||||
const rows = dates.map((d) => [
|
||||
d,
|
||||
analytics.usageByDate[d] || 0,
|
||||
((analytics.electricityByDate[d] || 0) / 1000).toFixed(3),
|
||||
(analytics.costByDate[d] || 0).toFixed(2),
|
||||
]);
|
||||
|
||||
const csv = [headers.join(","), ...rows.map((r) => r.join(","))].join(
|
||||
"\n",
|
||||
);
|
||||
const blob = new Blob([csv], { type: "text/csv" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `filaprint-analytics-${new Date().toISOString().split("T")[0]}.csv`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="space-y-6 fade-in">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-white">Analytics</h1>
|
||||
<p class="text-slate-400 mt-1">Insights into your printing habits</p>
|
||||
<div
|
||||
class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4"
|
||||
>
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-white">Analytics</h1>
|
||||
<p class="text-slate-400 mt-1">
|
||||
Insights into your printing habits
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<!-- Time Range Selector -->
|
||||
<div class="flex bg-slate-800/50 rounded-lg p-1">
|
||||
{#each ranges as range}
|
||||
<button
|
||||
class="px-3 py-1.5 text-xs font-medium rounded-md transition-all {selectedRange ===
|
||||
range.value
|
||||
? 'bg-blue-500 text-white'
|
||||
: 'text-slate-400 hover:text-white'}"
|
||||
onclick={() => changeRange(range.value)}
|
||||
>
|
||||
{range.label}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
<!-- Export Button -->
|
||||
<Button variant="ghost" onclick={exportToCSV}>
|
||||
<Icon icon="mdi:download" class="w-4 h-4 mr-1" />
|
||||
Export
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Row -->
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<!-- Main Stats Row -->
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
|
||||
<Card class="text-center">
|
||||
<p
|
||||
class="text-xs font-medium text-slate-400 uppercase tracking-wider"
|
||||
>
|
||||
Total Prints
|
||||
</p>
|
||||
<p class="text-3xl font-bold text-white mt-1">{totalPrints}</p>
|
||||
<p class="text-2xl font-bold text-white mt-1">
|
||||
{analytics.totalPrints}
|
||||
</p>
|
||||
</Card>
|
||||
<Card class="text-center">
|
||||
<p
|
||||
@@ -150,7 +354,7 @@
|
||||
>
|
||||
Success Rate
|
||||
</p>
|
||||
<p class="text-3xl font-bold text-emerald-400 mt-1">
|
||||
<p class="text-2xl font-bold text-emerald-400 mt-1">
|
||||
{successRate}%
|
||||
</p>
|
||||
</Card>
|
||||
@@ -158,9 +362,31 @@
|
||||
<p
|
||||
class="text-xs font-medium text-slate-400 uppercase tracking-wider"
|
||||
>
|
||||
Electricity Used
|
||||
Total Spent
|
||||
</p>
|
||||
<p class="text-3xl font-bold text-amber-400 mt-1">
|
||||
<p class="text-2xl font-bold text-green-400 mt-1">
|
||||
${analytics.totalCost}
|
||||
</p>
|
||||
</Card>
|
||||
<Card class="text-center">
|
||||
<p
|
||||
class="text-xs font-medium text-slate-400 uppercase tracking-wider"
|
||||
>
|
||||
Filament Used
|
||||
</p>
|
||||
<p class="text-2xl font-bold text-blue-400 mt-1">
|
||||
{analytics.totalFilamentUsed}<span
|
||||
class="text-sm font-normal text-slate-500 ml-1">g</span
|
||||
>
|
||||
</p>
|
||||
</Card>
|
||||
<Card class="text-center">
|
||||
<p
|
||||
class="text-xs font-medium text-slate-400 uppercase tracking-wider"
|
||||
>
|
||||
Electricity
|
||||
</p>
|
||||
<p class="text-2xl font-bold text-amber-400 mt-1">
|
||||
{analytics.totalElectricity}<span
|
||||
class="text-sm font-normal text-slate-500 ml-1">kWh</span
|
||||
>
|
||||
@@ -170,37 +396,118 @@
|
||||
<p
|
||||
class="text-xs font-medium text-slate-400 uppercase tracking-wider"
|
||||
>
|
||||
Materials
|
||||
Print Time
|
||||
</p>
|
||||
<p class="text-3xl font-bold text-violet-400 mt-1">
|
||||
{Object.keys(analytics.materialUsage).length}
|
||||
<p class="text-2xl font-bold text-violet-400 mt-1">
|
||||
{formatTime(analytics.totalPrintTime)}
|
||||
</p>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- Averages Row -->
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<Card class="flex items-center gap-4">
|
||||
<div class="p-3 rounded-lg bg-blue-500/10">
|
||||
<Icon icon="mdi:timer-outline" class="w-8 h-8 text-blue-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-slate-400 uppercase">Avg Print Time</p>
|
||||
<p class="text-xl font-bold text-white">
|
||||
{formatTime(analytics.avgPrintTime)}
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
<Card class="flex items-center gap-4">
|
||||
<div class="p-3 rounded-lg bg-green-500/10">
|
||||
<Icon icon="mdi:currency-usd" class="w-8 h-8 text-green-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-slate-400 uppercase">Avg Cost/Print</p>
|
||||
<p class="text-xl font-bold text-white">${analytics.avgCost}</p>
|
||||
</div>
|
||||
</Card>
|
||||
<Card class="flex items-center gap-4">
|
||||
<div class="p-3 rounded-lg bg-violet-500/10">
|
||||
<Icon icon="mdi:scale" class="w-8 h-8 text-violet-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-slate-400 uppercase">
|
||||
Avg Filament/Print
|
||||
</p>
|
||||
<p class="text-xl font-bold text-white">
|
||||
{analytics.avgFilament}g
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Cost Breakdown -->
|
||||
<Card>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<Icon icon="mdi:wallet" class="w-5 h-5 text-green-400" />
|
||||
<h3 class="text-lg font-semibold text-white">Cost Breakdown</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<div class="p-4 rounded-lg bg-slate-800/50 text-center">
|
||||
<p class="text-xs text-slate-400 uppercase mb-1">
|
||||
Filament Cost
|
||||
</p>
|
||||
<p class="text-2xl font-bold text-blue-400">
|
||||
${analytics.totalFilamentCost}
|
||||
</p>
|
||||
</div>
|
||||
<div class="p-4 rounded-lg bg-slate-800/50 text-center">
|
||||
<p class="text-xs text-slate-400 uppercase mb-1">Energy Cost</p>
|
||||
<p class="text-2xl font-bold text-amber-400">
|
||||
${analytics.totalEnergyCost}
|
||||
</p>
|
||||
</div>
|
||||
<div class="p-4 rounded-lg bg-slate-800/50 text-center">
|
||||
<p class="text-xs text-slate-400 uppercase mb-1">Total Cost</p>
|
||||
<p class="text-2xl font-bold text-green-400">
|
||||
${analytics.totalCost}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<!-- Usage Timeline -->
|
||||
<Card class="col-span-1 md:col-span-2 min-h-[350px]">
|
||||
<Card class="min-h-[350px]">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<Icon icon="mdi:scale" class="w-5 h-5 text-blue-400" />
|
||||
<h3 class="text-lg font-semibold text-white">
|
||||
Daily Filament Usage (g)
|
||||
</h3>
|
||||
<Icon icon="mdi:chart-line" class="w-5 h-5 text-blue-400" />
|
||||
<h3 class="text-lg font-semibold text-white">Filament Usage</h3>
|
||||
</div>
|
||||
<div class="h-[280px]">
|
||||
<canvas bind:this={timelineCanvas}></canvas>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<!-- Cost Timeline -->
|
||||
<Card class="min-h-[350px]">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<Icon
|
||||
icon="mdi:chart-areaspline"
|
||||
class="w-5 h-5 text-green-400"
|
||||
/>
|
||||
<h3 class="text-lg font-semibold text-white">Cost Over Time</h3>
|
||||
</div>
|
||||
<div class="h-[280px]">
|
||||
<canvas bind:this={costCanvas}></canvas>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<!-- Electricity Usage Chart -->
|
||||
<Card class="col-span-1 md:col-span-2 min-h-[350px]">
|
||||
<Card class="min-h-[350px]">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<Icon
|
||||
icon="mdi:lightning-bolt"
|
||||
class="w-5 h-5 text-amber-400"
|
||||
/>
|
||||
<h3 class="text-lg font-semibold text-white">
|
||||
Daily Electricity Usage (kWh)
|
||||
Electricity Usage
|
||||
</h3>
|
||||
</div>
|
||||
<div class="h-[280px]">
|
||||
@@ -208,7 +515,22 @@
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<!-- Success Rate Stat -->
|
||||
<!-- Material Distribution -->
|
||||
<Card class="min-h-[350px]">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<Icon icon="mdi:chart-pie" class="w-5 h-5 text-violet-400" />
|
||||
<h3 class="text-lg font-semibold text-white">
|
||||
Material Distribution
|
||||
</h3>
|
||||
</div>
|
||||
<div class="h-[280px]">
|
||||
<canvas bind:this={pieCanvas}></canvas>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<!-- Success Rate Ring -->
|
||||
<Card class="flex flex-col items-center justify-center py-8">
|
||||
<div class="relative w-32 h-32">
|
||||
<svg class="w-full h-full transform -rotate-90">
|
||||
@@ -244,23 +566,86 @@
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-slate-400 mt-4 text-sm">
|
||||
{analytics.successRate.success} Success / {analytics.successRate
|
||||
.fail} Fail
|
||||
</p>
|
||||
<div class="flex items-center gap-4 mt-4 text-sm">
|
||||
<span class="flex items-center gap-1 text-emerald-400">
|
||||
<Icon icon="mdi:check-circle" class="w-4 h-4" />
|
||||
{analytics.successRate.success}
|
||||
</span>
|
||||
<span class="flex items-center gap-1 text-red-400">
|
||||
<Icon icon="mdi:close-circle" class="w-4 h-4" />
|
||||
{analytics.successRate.fail}
|
||||
</span>
|
||||
<span class="flex items-center gap-1 text-slate-400">
|
||||
<Icon icon="mdi:cancel" class="w-4 h-4" />
|
||||
{analytics.successRate.cancelled}
|
||||
</span>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<!-- Material Usage Pie -->
|
||||
<!-- Printer Usage -->
|
||||
<Card class="min-h-[280px]">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<Icon icon="mdi:printer-3d" class="w-5 h-5 text-blue-400" />
|
||||
<h3 class="text-lg font-semibold text-white">Printer Usage</h3>
|
||||
</div>
|
||||
{#if analytics.printerStats.length > 0}
|
||||
<div class="h-[200px]">
|
||||
<canvas bind:this={printerCanvas}></canvas>
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
class="flex items-center justify-center h-[200px] text-slate-500"
|
||||
>
|
||||
No printer data available
|
||||
</div>
|
||||
{/if}
|
||||
</Card>
|
||||
|
||||
<!-- 3D Models Stats -->
|
||||
<Card>
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<Icon icon="mdi:chart-pie" class="w-5 h-5 text-violet-400" />
|
||||
<h3 class="text-lg font-semibold text-white">
|
||||
Material Distribution
|
||||
</h3>
|
||||
<Icon icon="mdi:cube-scan" class="w-5 h-5 text-violet-400" />
|
||||
<h3 class="text-lg font-semibold text-white">3D Models</h3>
|
||||
</div>
|
||||
<div class="h-[250px]">
|
||||
<canvas bind:this={pieCanvas}></canvas>
|
||||
<div class="grid grid-cols-2 gap-4 mb-4">
|
||||
<div class="text-center p-3 bg-slate-800/50 rounded-lg">
|
||||
<p class="text-2xl font-bold text-violet-400">
|
||||
{analytics.printsWithModels}
|
||||
</p>
|
||||
<p class="text-xs text-slate-400 uppercase">
|
||||
Prints with Models
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-center p-3 bg-slate-800/50 rounded-lg">
|
||||
<p class="text-2xl font-bold text-purple-400">
|
||||
{formatBytes(analytics.totalModelSize)}
|
||||
</p>
|
||||
<p class="text-xs text-slate-400 uppercase">
|
||||
Storage Used
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{#if analytics.topModels.length > 0}
|
||||
<div class="space-y-2">
|
||||
<p class="text-xs text-slate-400 uppercase mb-2">
|
||||
Most Printed
|
||||
</p>
|
||||
{#each analytics.topModels as model}
|
||||
<div
|
||||
class="flex items-center justify-between text-sm py-1"
|
||||
>
|
||||
<span class="text-slate-300 truncate max-w-[150px]"
|
||||
>{model.name}</span
|
||||
>
|
||||
<span class="text-slate-500">{model.count}x</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<p class="text-sm text-slate-500 text-center">
|
||||
No models uploaded yet
|
||||
</p>
|
||||
{/if}
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,6 +2,8 @@ import { PrintJob } from '$lib/models/PrintJob';
|
||||
import { connectDB } from '$lib/server/db';
|
||||
import type { PageServerLoad } from './$types';
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
import { statSync, existsSync } from 'fs';
|
||||
import path from 'path';
|
||||
|
||||
export const load: PageServerLoad = async ({ locals }) => {
|
||||
if (!locals.user) throw redirect(303, '/login');
|
||||
@@ -16,7 +18,31 @@ export const load: PageServerLoad = async ({ locals }) => {
|
||||
.sort({ date: -1 })
|
||||
.lean();
|
||||
|
||||
// Add file sizes to each model
|
||||
const modelsWithSizes = printsWithSTL.map(print => {
|
||||
let fileSize = 0;
|
||||
if (print.stl_file) {
|
||||
try {
|
||||
const filePath = path.join('static', print.stl_file);
|
||||
if (existsSync(filePath)) {
|
||||
const stats = statSync(filePath);
|
||||
fileSize = stats.size;
|
||||
}
|
||||
} catch (e) {
|
||||
// Ignore file read errors
|
||||
}
|
||||
}
|
||||
return {
|
||||
...print,
|
||||
fileSize
|
||||
};
|
||||
});
|
||||
|
||||
// Calculate total storage
|
||||
const totalStorage = modelsWithSizes.reduce((sum, m) => sum + m.fileSize, 0);
|
||||
|
||||
return {
|
||||
models: JSON.parse(JSON.stringify(printsWithSTL))
|
||||
models: JSON.parse(JSON.stringify(modelsWithSizes)),
|
||||
totalStorage
|
||||
};
|
||||
};
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
|
||||
let { data } = $props();
|
||||
let models = $derived(data.models);
|
||||
let totalStorage = $derived(data.totalStorage);
|
||||
|
||||
let selectedModel = $state<any>(null);
|
||||
let showViewer = $state(false);
|
||||
@@ -26,14 +27,34 @@
|
||||
year: "numeric",
|
||||
});
|
||||
}
|
||||
|
||||
function formatBytes(bytes: number): string {
|
||||
if (bytes === 0) return "0 B";
|
||||
const k = 1024;
|
||||
const sizes = ["B", "KB", "MB", "GB"];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="space-y-6 fade-in">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-white">Model Library</h1>
|
||||
<p class="text-slate-400 mt-1">
|
||||
Browse your 3D model collection ({models.length} models)
|
||||
</p>
|
||||
<div
|
||||
class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4"
|
||||
>
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-white">Model Library</h1>
|
||||
<p class="text-slate-400 mt-1">
|
||||
Browse your 3D model collection ({models.length} models)
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-2 px-4 py-2 bg-slate-800/50 rounded-lg"
|
||||
>
|
||||
<Icon icon="mdi:harddisk" class="w-5 h-5 text-violet-400" />
|
||||
<span class="text-sm text-slate-300"
|
||||
>{formatBytes(totalStorage)} used</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if models.length === 0}
|
||||
@@ -129,6 +150,13 @@
|
||||
Failed
|
||||
</span>
|
||||
{/if}
|
||||
<!-- File size -->
|
||||
<span
|
||||
class="flex items-center gap-1 text-slate-500 ml-auto"
|
||||
>
|
||||
<Icon icon="mdi:file" class="w-3.5 h-3.5" />
|
||||
{formatBytes(model.fileSize)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
@@ -205,6 +233,12 @@
|
||||
${selectedModel.calculated_cost_filament.toFixed(2)}
|
||||
</div>
|
||||
{/if}
|
||||
{#if selectedModel.fileSize}
|
||||
<div class="text-slate-400">
|
||||
<span class="text-slate-500">File Size:</span>
|
||||
{formatBytes(selectedModel.fileSize)}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -48,6 +48,7 @@ export const actions: Actions = {
|
||||
const manual_cost = formData.get('manual_cost');
|
||||
const elapsed_minutes = formData.get('elapsed_minutes');
|
||||
const stl_file = formData.get('stl_file');
|
||||
const date = formData.get('date');
|
||||
|
||||
if (!spool_id || !printer_id || !filament_used_g) {
|
||||
return fail(400, { missing: true });
|
||||
@@ -115,7 +116,7 @@ export const actions: Actions = {
|
||||
status,
|
||||
started_at: startedAt,
|
||||
stl_file: stl_file || null,
|
||||
date: new Date()
|
||||
date: date ? new Date(date as string) : new Date()
|
||||
});
|
||||
|
||||
// 3. Deduct Filament from Spool (only if not In Progress)
|
||||
@@ -146,6 +147,7 @@ export const actions: Actions = {
|
||||
const spool_id = formData.get('spool_id');
|
||||
const stl_file = formData.get('stl_file');
|
||||
const remove_model = formData.get('remove_model');
|
||||
const date = formData.get('date');
|
||||
|
||||
if (!id || !name) {
|
||||
return fail(400, { missing: true });
|
||||
@@ -169,13 +171,18 @@ export const actions: Actions = {
|
||||
? await Printer.findById(printer_id)
|
||||
: printJob.printer_id;
|
||||
|
||||
// Get correct spool for cost calculation (use new spool if provided, else existing)
|
||||
const spoolForCalc = spool_id
|
||||
? await Spool.findById(spool_id)
|
||||
: printJob.spool_id;
|
||||
|
||||
// Calculate Filament Cost: use manual if provided, otherwise calculate
|
||||
let costFilament: number;
|
||||
if (manual_cost && String(manual_cost).trim() !== '') {
|
||||
// Manual cost is the total, we'll calculate energy separately for tracking
|
||||
costFilament = Number(manual_cost);
|
||||
} else if (printJob.spool_id?.price && printJob.spool_id?.weight_initial_g) {
|
||||
costFilament = (printJob.spool_id.price / printJob.spool_id.weight_initial_g) * weightUsed;
|
||||
} else if (spoolForCalc?.price && spoolForCalc?.weight_initial_g) {
|
||||
costFilament = (spoolForCalc.price / spoolForCalc.weight_initial_g) * weightUsed;
|
||||
} else {
|
||||
costFilament = 0;
|
||||
}
|
||||
@@ -212,10 +219,11 @@ export const actions: Actions = {
|
||||
calculated_cost_filament: Number(totalCost.toFixed(2)),
|
||||
calculated_cost_energy: Number(costEnergy.toFixed(2)),
|
||||
status,
|
||||
started_at: startedAt
|
||||
started_at: startedAt,
|
||||
date: date ? new Date(date as string) : printJob.date
|
||||
};
|
||||
|
||||
// Update printer/spool if provided (for In Progress)
|
||||
// Update printer/spool if provided
|
||||
if (printer_id) {
|
||||
updateData.printer_id = printer_id;
|
||||
}
|
||||
@@ -288,6 +296,73 @@ export const actions: Actions = {
|
||||
}
|
||||
|
||||
await PrintJob.findOneAndDelete({ _id: id, user_id: locals.user.id });
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
return fail(500, { dbError: true });
|
||||
}
|
||||
},
|
||||
|
||||
duplicate: async ({ request, locals }) => {
|
||||
if (!locals.user) return fail(401, { unauthorized: true });
|
||||
|
||||
const formData = await request.formData();
|
||||
const id = formData.get('id');
|
||||
|
||||
if (!id) return fail(400, { missing: true });
|
||||
|
||||
await connectDB();
|
||||
|
||||
try {
|
||||
// Find the original print with populated spool and printer
|
||||
const original = await PrintJob.findOne({ _id: id, user_id: locals.user.id })
|
||||
.populate('spool_id')
|
||||
.populate('printer_id');
|
||||
if (!original) return fail(404, { notFound: true });
|
||||
|
||||
// Get user's electricity rate
|
||||
const user = await User.findById(locals.user.id);
|
||||
const electricityRate = user?.electricity_rate || 0.12;
|
||||
|
||||
// Recalculate costs based on current spool prices
|
||||
let costFilament = 0;
|
||||
let costEnergy = 0;
|
||||
const spool = original.spool_id as any;
|
||||
const printer = original.printer_id as any;
|
||||
|
||||
if (spool?.price && spool?.weight_initial_g && original.filament_used_g) {
|
||||
costFilament = (spool.price / spool.weight_initial_g) * original.filament_used_g;
|
||||
}
|
||||
|
||||
if (printer?.power_consumption_watts && original.duration_minutes) {
|
||||
const powerKw = printer.power_consumption_watts / 1000;
|
||||
const durationHours = original.duration_minutes / 60;
|
||||
costEnergy = powerKw * durationHours * electricityRate;
|
||||
}
|
||||
|
||||
const totalCost = costFilament + costEnergy;
|
||||
|
||||
// Create a new print with the same details
|
||||
await PrintJob.create({
|
||||
user_id: locals.user.id,
|
||||
name: original.name,
|
||||
printer_id: original.printer_id?._id || original.printer_id,
|
||||
spool_id: original.spool_id?._id || original.spool_id,
|
||||
duration_minutes: original.duration_minutes,
|
||||
filament_used_g: original.filament_used_g,
|
||||
calculated_cost_filament: Number(totalCost.toFixed(2)),
|
||||
calculated_cost_energy: Number(costEnergy.toFixed(2)),
|
||||
status: 'Success',
|
||||
stl_file: original.stl_file,
|
||||
date: new Date()
|
||||
});
|
||||
|
||||
// Deduct filament from spool for the new print
|
||||
if (spool && original.filament_used_g) {
|
||||
spool.weight_remaining_g = Math.max(0, spool.weight_remaining_g - original.filament_used_g);
|
||||
await spool.save();
|
||||
}
|
||||
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
|
||||
Reference in New Issue
Block a user