Print Log Update
This commit is contained in:
@@ -1,259 +1,376 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from "$app/forms";
|
||||
import Button from "$lib/components/ui/Button.svelte";
|
||||
import Modal from "$lib/components/ui/Modal.svelte";
|
||||
import Input from "$lib/components/ui/Input.svelte";
|
||||
import Icon from "@iconify/svelte";
|
||||
import { enhance } from "$app/forms";
|
||||
import Button from "$lib/components/ui/Button.svelte";
|
||||
import Modal from "$lib/components/ui/Modal.svelte";
|
||||
import Input from "$lib/components/ui/Input.svelte";
|
||||
import Icon from "@iconify/svelte";
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
print: any;
|
||||
printers: any[];
|
||||
spools: any[];
|
||||
onclose: () => void;
|
||||
}
|
||||
interface Props {
|
||||
open: boolean;
|
||||
print: any;
|
||||
printers: any[];
|
||||
spools: any[];
|
||||
onclose: () => void;
|
||||
}
|
||||
|
||||
let { open, print, printers, spools, onclose }: Props = $props();
|
||||
let isSubmitting = $state(false);
|
||||
let editStatus = $state("Success");
|
||||
let { open, print, printers, spools, onclose }: Props = $props();
|
||||
let isSubmitting = $state(false);
|
||||
let editStatus = $state("Success");
|
||||
|
||||
// Update editStatus when print changes
|
||||
$effect(() => {
|
||||
if (print) {
|
||||
editStatus = print.status || "Success";
|
||||
}
|
||||
});
|
||||
// Derived values for hours/minutes from print.duration_minutes
|
||||
let durationHours = $derived(
|
||||
print ? Math.floor(print.duration_minutes / 60) : 0,
|
||||
);
|
||||
let durationMins = $derived(print ? print.duration_minutes % 60 : 0);
|
||||
|
||||
function handleClose() {
|
||||
editStatus = "Success";
|
||||
onclose();
|
||||
}
|
||||
// Update editStatus when print changes
|
||||
$effect(() => {
|
||||
if (print) {
|
||||
editStatus = print.status || "Success";
|
||||
}
|
||||
});
|
||||
|
||||
async function handleDelete() {
|
||||
if (!confirm("Are you sure you want to delete this print log?")) return;
|
||||
isSubmitting = true;
|
||||
const formData = new FormData();
|
||||
formData.append("id", print._id);
|
||||
await fetch("?/delete", { method: "POST", body: formData });
|
||||
isSubmitting = false;
|
||||
handleClose();
|
||||
window.location.reload();
|
||||
}
|
||||
function handleClose() {
|
||||
editStatus = "Success";
|
||||
onclose();
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
if (!confirm("Are you sure you want to delete this print log?")) return;
|
||||
isSubmitting = true;
|
||||
const formData = new FormData();
|
||||
formData.append("id", print._id);
|
||||
await fetch("?/delete", { method: "POST", body: formData });
|
||||
isSubmitting = false;
|
||||
handleClose();
|
||||
window.location.reload();
|
||||
}
|
||||
</script>
|
||||
|
||||
<Modal title="Edit Print Log" {open} onclose={handleClose}>
|
||||
{#if print}
|
||||
<form
|
||||
method="POST"
|
||||
action="?/edit"
|
||||
use:enhance={() => {
|
||||
isSubmitting = true;
|
||||
return async ({ update }) => {
|
||||
await update();
|
||||
isSubmitting = false;
|
||||
handleClose();
|
||||
};
|
||||
}}
|
||||
class="space-y-4"
|
||||
>
|
||||
<input type="hidden" name="id" value={print._id} />
|
||||
{#if print}
|
||||
<form
|
||||
method="POST"
|
||||
action="?/edit"
|
||||
use:enhance={({ formData }) => {
|
||||
// Convert hours + minutes to total minutes
|
||||
const hours = Number(formData.get("duration_hours") || 0);
|
||||
const mins = Number(formData.get("duration_mins") || 0);
|
||||
formData.set("duration_minutes", String(hours * 60 + mins));
|
||||
|
||||
<!-- Status Selection -->
|
||||
<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"
|
||||
>Status</label
|
||||
>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<label class="cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="status"
|
||||
value="In Progress"
|
||||
class="peer sr-only"
|
||||
bind:group={editStatus}
|
||||
/>
|
||||
<div
|
||||
class="flex items-center justify-center gap-2 py-2 rounded-lg border border-slate-700 text-slate-400 peer-checked:bg-blue-500/20 peer-checked:text-blue-400 peer-checked:border-blue-500/50 transition-all"
|
||||
>
|
||||
<Icon icon="mdi:printer-3d" class="w-4 h-4" /> In Progress
|
||||
</div>
|
||||
</label>
|
||||
<label class="cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="status"
|
||||
value="Success"
|
||||
class="peer sr-only"
|
||||
bind:group={editStatus}
|
||||
/>
|
||||
<div
|
||||
class="flex items-center justify-center gap-2 py-2 rounded-lg border border-slate-700 text-slate-400 peer-checked:bg-green-500/20 peer-checked:text-green-400 peer-checked:border-green-500/50 transition-all"
|
||||
>
|
||||
<Icon icon="mdi:check" class="w-4 h-4" /> Success
|
||||
</div>
|
||||
</label>
|
||||
<label class="cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="status"
|
||||
value="Fail"
|
||||
class="peer sr-only"
|
||||
bind:group={editStatus}
|
||||
/>
|
||||
<div
|
||||
class="flex items-center justify-center gap-2 py-2 rounded-lg border border-slate-700 text-slate-400 peer-checked:bg-red-500/20 peer-checked:text-red-400 peer-checked:border-red-500/50 transition-all"
|
||||
>
|
||||
<Icon icon="mdi:close" class="w-4 h-4" /> Fail
|
||||
</div>
|
||||
</label>
|
||||
<label class="cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="status"
|
||||
value="Cancelled"
|
||||
class="peer sr-only"
|
||||
bind:group={editStatus}
|
||||
/>
|
||||
<div
|
||||
class="flex items-center justify-center gap-2 py-2 rounded-lg border border-slate-700 text-slate-400 peer-checked:bg-slate-600/20 peer-checked:text-slate-300 peer-checked:border-slate-500/50 transition-all"
|
||||
>
|
||||
<Icon icon="mdi:cancel" class="w-4 h-4" /> Cancelled
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
// Convert elapsed hours + minutes to total minutes
|
||||
const elapsedHours = Number(formData.get("elapsed_hours") || 0);
|
||||
const elapsedMins = Number(formData.get("elapsed_mins") || 0);
|
||||
formData.set(
|
||||
"elapsed_minutes",
|
||||
String(elapsedHours * 60 + elapsedMins),
|
||||
);
|
||||
|
||||
<Input label="Print Name" name="name" value={print.name} required />
|
||||
isSubmitting = true;
|
||||
return async ({ update }) => {
|
||||
await update();
|
||||
isSubmitting = false;
|
||||
handleClose();
|
||||
};
|
||||
}}
|
||||
class="space-y-4"
|
||||
>
|
||||
<input type="hidden" name="id" value={print._id} />
|
||||
|
||||
{#if editStatus === "In Progress"}
|
||||
<!-- In Progress specific fields -->
|
||||
<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>
|
||||
<!-- Status Selection -->
|
||||
<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"
|
||||
>Status</label
|
||||
>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<label class="cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="status"
|
||||
value="In Progress"
|
||||
class="peer sr-only"
|
||||
bind:group={editStatus}
|
||||
/>
|
||||
<div
|
||||
class="flex items-center justify-center gap-2 py-2 rounded-lg border border-slate-700 text-slate-400 peer-checked:bg-blue-500/20 peer-checked:text-blue-400 peer-checked:border-blue-500/50 transition-all"
|
||||
>
|
||||
<Icon icon="mdi:printer-3d" class="w-4 h-4" /> In Progress
|
||||
</div>
|
||||
</label>
|
||||
<label class="cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="status"
|
||||
value="Success"
|
||||
class="peer sr-only"
|
||||
bind:group={editStatus}
|
||||
/>
|
||||
<div
|
||||
class="flex items-center justify-center gap-2 py-2 rounded-lg border border-slate-700 text-slate-400 peer-checked:bg-green-500/20 peer-checked:text-green-400 peer-checked:border-green-500/50 transition-all"
|
||||
>
|
||||
<Icon icon="mdi:check" class="w-4 h-4" /> Success
|
||||
</div>
|
||||
</label>
|
||||
<label class="cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="status"
|
||||
value="Fail"
|
||||
class="peer sr-only"
|
||||
bind:group={editStatus}
|
||||
/>
|
||||
<div
|
||||
class="flex items-center justify-center gap-2 py-2 rounded-lg border border-slate-700 text-slate-400 peer-checked:bg-red-500/20 peer-checked:text-red-400 peer-checked:border-red-500/50 transition-all"
|
||||
>
|
||||
<Icon icon="mdi:close" class="w-4 h-4" /> Fail
|
||||
</div>
|
||||
</label>
|
||||
<label class="cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="status"
|
||||
value="Cancelled"
|
||||
class="peer sr-only"
|
||||
bind:group={editStatus}
|
||||
/>
|
||||
<div
|
||||
class="flex items-center justify-center gap-2 py-2 rounded-lg border border-slate-700 text-slate-400 peer-checked:bg-slate-600/20 peer-checked:text-slate-300 peer-checked:border-slate-500/50 transition-all"
|
||||
>
|
||||
<Icon icon="mdi:cancel" class="w-4 h-4" /> Cancelled
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-3 rounded-lg bg-blue-500/10 border border-blue-500/20">
|
||||
<p class="text-xs text-blue-300 mb-3">
|
||||
<Icon icon="mdi:information" class="w-4 h-4 inline mr-1" />
|
||||
Update the total print time and how long it's been running.
|
||||
</p>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<Input
|
||||
label="Total Duration (min)"
|
||||
name="duration_minutes"
|
||||
type="number"
|
||||
value={print.duration_minutes}
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
label="Already Elapsed (min)"
|
||||
name="elapsed_minutes"
|
||||
type="number"
|
||||
placeholder="0"
|
||||
value="0"
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4 mt-3">
|
||||
<Input
|
||||
label="Expected Filament (g)"
|
||||
name="filament_used_g"
|
||||
type="number"
|
||||
value={print.filament_used_g}
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
label="Cost ($)"
|
||||
name="manual_cost"
|
||||
type="number"
|
||||
step="0.01"
|
||||
value={print.calculated_cost_filament}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Completed print fields -->
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<Input
|
||||
label="Duration (min)"
|
||||
name="duration_minutes"
|
||||
type="number"
|
||||
value={print.duration_minutes}
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
label="Used (g)"
|
||||
name="filament_used_g"
|
||||
type="number"
|
||||
value={print.filament_used_g}
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
label="Cost ($)"
|
||||
name="manual_cost"
|
||||
type="number"
|
||||
step="0.01"
|
||||
value={print.calculated_cost_filament}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
<Input label="Print Name" name="name" value={print.name} required />
|
||||
|
||||
<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
|
||||
>
|
||||
<Button type="submit" disabled={isSubmitting}>
|
||||
{isSubmitting ? "Saving..." : "Save Changes"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{/if}
|
||||
{#if editStatus === "In Progress"}
|
||||
<!-- In Progress specific fields -->
|
||||
<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="p-3 rounded-lg bg-blue-500/10 border border-blue-500/20"
|
||||
>
|
||||
<p class="text-xs text-blue-300 mb-3">
|
||||
<Icon
|
||||
icon="mdi:information"
|
||||
class="w-4 h-4 inline mr-1"
|
||||
/>
|
||||
Update the total print time and how long it's been running.
|
||||
</p>
|
||||
<div class="space-y-3">
|
||||
<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"
|
||||
>Total Duration</label
|
||||
>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div class="relative">
|
||||
<input
|
||||
type="number"
|
||||
name="duration_hours"
|
||||
value={durationHours}
|
||||
min="0"
|
||||
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 pr-8"
|
||||
/>
|
||||
<span
|
||||
class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-500"
|
||||
>hr</span
|
||||
>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="number"
|
||||
name="duration_mins"
|
||||
value={durationMins}
|
||||
min="0"
|
||||
max="59"
|
||||
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 pr-10"
|
||||
/>
|
||||
<span
|
||||
class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-500"
|
||||
>min</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</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"
|
||||
>Already Elapsed</label
|
||||
>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div class="relative">
|
||||
<input
|
||||
type="number"
|
||||
name="elapsed_hours"
|
||||
placeholder="0"
|
||||
min="0"
|
||||
value="0"
|
||||
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 pr-8"
|
||||
/>
|
||||
<span
|
||||
class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-500"
|
||||
>hr</span
|
||||
>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="number"
|
||||
name="elapsed_mins"
|
||||
placeholder="0"
|
||||
min="0"
|
||||
max="59"
|
||||
value="0"
|
||||
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 pr-10"
|
||||
/>
|
||||
<span
|
||||
class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-500"
|
||||
>min</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4 mt-3">
|
||||
<Input
|
||||
label="Expected Filament (g)"
|
||||
name="filament_used_g"
|
||||
type="number"
|
||||
value={print.filament_used_g}
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
label="Cost ($)"
|
||||
name="manual_cost"
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="Auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Completed print fields -->
|
||||
<div class="space-y-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"
|
||||
>Duration</label
|
||||
>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div class="relative">
|
||||
<input
|
||||
type="number"
|
||||
name="duration_hours"
|
||||
value={durationHours}
|
||||
min="0"
|
||||
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 pr-8"
|
||||
/>
|
||||
<span
|
||||
class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-500"
|
||||
>hr</span
|
||||
>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="number"
|
||||
name="duration_mins"
|
||||
value={durationMins}
|
||||
min="0"
|
||||
max="59"
|
||||
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 pr-10"
|
||||
/>
|
||||
<span
|
||||
class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-500"
|
||||
>min</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<Input
|
||||
label="Used (g)"
|
||||
name="filament_used_g"
|
||||
type="number"
|
||||
value={print.filament_used_g}
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
label="Cost ($)"
|
||||
name="manual_cost"
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="Auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/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
|
||||
>
|
||||
<Button type="submit" disabled={isSubmitting}>
|
||||
{isSubmitting ? "Saving..." : "Save Changes"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{/if}
|
||||
</Modal>
|
||||
|
||||
@@ -26,7 +26,17 @@
|
||||
<form
|
||||
method="POST"
|
||||
action="?/log"
|
||||
use:enhance={() => {
|
||||
use:enhance={({ formData }) => {
|
||||
// Convert hours + minutes to total minutes
|
||||
const hours = Number(formData.get('duration_hours') || 0);
|
||||
const mins = Number(formData.get('duration_mins') || 0);
|
||||
formData.set('duration_minutes', String(hours * 60 + mins));
|
||||
|
||||
// Convert elapsed hours + minutes to total minutes
|
||||
const elapsedHours = Number(formData.get('elapsed_hours') || 0);
|
||||
const elapsedMins = Number(formData.get('elapsed_mins') || 0);
|
||||
formData.set('elapsed_minutes', String(elapsedHours * 60 + elapsedMins));
|
||||
|
||||
isSubmitting = true;
|
||||
return async ({ update }) => {
|
||||
await update();
|
||||
@@ -152,21 +162,35 @@
|
||||
<Icon icon="mdi:information" class="w-4 h-4 inline mr-1" />
|
||||
Enter the expected total print time and how long it's been running.
|
||||
</p>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<Input
|
||||
label="Total Duration (min)"
|
||||
name="duration_minutes"
|
||||
type="number"
|
||||
placeholder="120"
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
label="Already Elapsed (min)"
|
||||
name="elapsed_minutes"
|
||||
type="number"
|
||||
placeholder="0"
|
||||
value="0"
|
||||
/>
|
||||
<div class="space-y-3">
|
||||
<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">Total Duration</label>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div class="relative">
|
||||
<input type="number" name="duration_hours" placeholder="2" min="0" 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 pr-8" />
|
||||
<span class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-500">hr</span>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<input type="number" name="duration_mins" placeholder="30" min="0" max="59" 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 pr-10" />
|
||||
<span class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-500">min</span>
|
||||
</div>
|
||||
</div>
|
||||
</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">Already Elapsed</label>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div class="relative">
|
||||
<input type="number" name="elapsed_hours" placeholder="0" min="0" value="0" 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 pr-8" />
|
||||
<span class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-500">hr</span>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<input type="number" name="elapsed_mins" placeholder="0" min="0" max="59" value="0" 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 pr-10" />
|
||||
<span class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-500">min</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4 mt-3">
|
||||
<Input
|
||||
@@ -187,28 +211,37 @@
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Completed print fields -->
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<Input
|
||||
label="Duration (min)"
|
||||
name="duration_minutes"
|
||||
type="number"
|
||||
placeholder="60"
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
label="Used (g)"
|
||||
name="filament_used_g"
|
||||
type="number"
|
||||
placeholder="15"
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
label="Cost ($)"
|
||||
name="manual_cost"
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="Auto"
|
||||
/>
|
||||
<div class="space-y-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">Duration</label>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div class="relative">
|
||||
<input type="number" name="duration_hours" placeholder="2" min="0" 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 pr-8" />
|
||||
<span class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-500">hr</span>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<input type="number" name="duration_mins" placeholder="30" min="0" max="59" 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 pr-10" />
|
||||
<span class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-500">min</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<Input
|
||||
label="Used (g)"
|
||||
name="filament_used_g"
|
||||
type="number"
|
||||
placeholder="15"
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
label="Cost ($)"
|
||||
name="manual_cost"
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="Auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { PrintJob } from '$lib/models/PrintJob';
|
||||
import { Spool } from '$lib/models/Spool';
|
||||
import { Printer } from '$lib/models/Printer';
|
||||
import { User } from '$lib/models/User';
|
||||
import { connectDB } from '$lib/server/db';
|
||||
import type { PageServerLoad, Actions } from './$types';
|
||||
import { fail, redirect } from '@sveltejs/kit';
|
||||
@@ -59,16 +60,35 @@ export const actions: Actions = {
|
||||
const printer = await Printer.findOne({ _id: printer_id, user_id: locals.user.id });
|
||||
if (!printer) return fail(404, { printerNotFound: true });
|
||||
|
||||
const weightUsed = Number(filament_used_g);
|
||||
// Get user's electricity rate
|
||||
const user = await User.findById(locals.user.id);
|
||||
const electricityRate = user?.electricity_rate || 0.12; // Default $/kWh
|
||||
|
||||
// Calculate Cost: use manual if provided, otherwise calculate
|
||||
const weightUsed = Number(filament_used_g);
|
||||
const durationMins = Number(duration_minutes);
|
||||
|
||||
// Calculate Filament Cost: use manual if provided, otherwise calculate
|
||||
let costFilament: number;
|
||||
if (manual_cost && String(manual_cost).trim() !== '') {
|
||||
// If manual cost provided, it's the total cost (filament + electricity)
|
||||
costFilament = Number(manual_cost);
|
||||
} else {
|
||||
costFilament = (spool.price / spool.weight_initial_g) * weightUsed;
|
||||
}
|
||||
|
||||
// Calculate Electricity Cost: Power (kW) × Duration (hours) × Rate ($/kWh)
|
||||
const powerKw = (printer.power_consumption_watts || 0) / 1000;
|
||||
const durationHours = durationMins / 60;
|
||||
const costEnergy = powerKw * durationHours * electricityRate;
|
||||
|
||||
// Total cost = filament + electricity (only if not manual)
|
||||
let totalCost: number;
|
||||
if (manual_cost && String(manual_cost).trim() !== '') {
|
||||
totalCost = Number(manual_cost);
|
||||
} else {
|
||||
totalCost = costFilament + costEnergy;
|
||||
}
|
||||
|
||||
// 2. Create Print Job
|
||||
const isInProgress = status === 'In Progress';
|
||||
|
||||
@@ -84,9 +104,10 @@ export const actions: Actions = {
|
||||
name: name || 'Untitled Print',
|
||||
spool_id,
|
||||
printer_id,
|
||||
duration_minutes: Number(duration_minutes),
|
||||
duration_minutes: durationMins,
|
||||
filament_used_g: weightUsed,
|
||||
calculated_cost_filament: Number(costFilament.toFixed(2)),
|
||||
calculated_cost_filament: Number(totalCost.toFixed(2)),
|
||||
calculated_cost_energy: Number(costEnergy.toFixed(2)),
|
||||
status,
|
||||
started_at: startedAt,
|
||||
date: new Date()
|
||||
@@ -126,19 +147,43 @@ export const actions: Actions = {
|
||||
await connectDB();
|
||||
|
||||
try {
|
||||
const printJob = await PrintJob.findOne({ _id: id, user_id: locals.user.id }).populate('spool_id');
|
||||
const printJob = await PrintJob.findOne({ _id: id, user_id: locals.user.id }).populate('spool_id').populate('printer_id');
|
||||
if (!printJob) return fail(404, { notFound: true });
|
||||
|
||||
const weightUsed = Number(filament_used_g);
|
||||
// Get user's electricity rate
|
||||
const user = await User.findById(locals.user.id);
|
||||
const electricityRate = user?.electricity_rate || 0.12;
|
||||
|
||||
// Calculate Cost: use manual if provided, otherwise calculate
|
||||
const weightUsed = Number(filament_used_g);
|
||||
const durationMins = Number(duration_minutes);
|
||||
|
||||
// Get printer for power calculation
|
||||
const printerForCalc = printer_id
|
||||
? await Printer.findById(printer_id)
|
||||
: printJob.printer_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 {
|
||||
costFilament = printJob.calculated_cost_filament || 0;
|
||||
costFilament = 0;
|
||||
}
|
||||
|
||||
// Calculate Electricity Cost
|
||||
const powerKw = (printerForCalc?.power_consumption_watts || 0) / 1000;
|
||||
const durationHours = durationMins / 60;
|
||||
const costEnergy = powerKw * durationHours * electricityRate;
|
||||
|
||||
// Total cost
|
||||
let totalCost: number;
|
||||
if (manual_cost && String(manual_cost).trim() !== '') {
|
||||
totalCost = Number(manual_cost);
|
||||
} else {
|
||||
totalCost = costFilament + costEnergy;
|
||||
}
|
||||
|
||||
// Calculate started_at based on elapsed time for In Progress
|
||||
@@ -155,9 +200,10 @@ export const actions: Actions = {
|
||||
// Build update object
|
||||
const updateData: any = {
|
||||
name,
|
||||
duration_minutes: Number(duration_minutes),
|
||||
duration_minutes: durationMins,
|
||||
filament_used_g: weightUsed,
|
||||
calculated_cost_filament: Number(costFilament.toFixed(2)),
|
||||
calculated_cost_filament: Number(totalCost.toFixed(2)),
|
||||
calculated_cost_energy: Number(costEnergy.toFixed(2)),
|
||||
status,
|
||||
started_at: startedAt
|
||||
};
|
||||
|
||||
@@ -5,10 +5,7 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
|
||||
const config = {
|
||||
preprocess: vitePreprocess(),
|
||||
kit: {
|
||||
adapter: adapter(),
|
||||
csrf: {
|
||||
checkOrigin: true
|
||||
}
|
||||
adapter: adapter()
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user