mirror of
https://github.com/maziggy/bambuddy.git
synced 2026-10-20 00:38:38 +02:00
Merge branch '0.2.2b1' into fix-ams-slot
This commit is contained in:
AneoPsy
@@ -0,0 +1,352 @@
|
||||
import { useState, useRef, type DragEvent } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
Upload,
|
||||
X,
|
||||
File,
|
||||
Loader2,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
Archive as ArchiveIcon,
|
||||
Printer,
|
||||
Image,
|
||||
} from 'lucide-react';
|
||||
import { api } from '../api/client';
|
||||
import type { LibraryFileUploadResponse } from '../api/client';
|
||||
import { Button } from './Button';
|
||||
|
||||
interface UploadFile {
|
||||
file: File;
|
||||
status: 'pending' | 'uploading' | 'success' | 'error';
|
||||
error?: string;
|
||||
isZip?: boolean;
|
||||
is3mf?: boolean;
|
||||
extractedCount?: number;
|
||||
}
|
||||
|
||||
interface FileUploadModalProps {
|
||||
folderId: number | null;
|
||||
onClose: () => void;
|
||||
onUploadComplete: () => void;
|
||||
/** Called after each file is successfully uploaded with its response data. Return a string to show an error and prevent modal from closing. */
|
||||
onFileUploaded?: (file: LibraryFileUploadResponse) => string | void;
|
||||
/** When true, automatically uploads the file as soon as it's added and closes the modal */
|
||||
autoUpload?: boolean;
|
||||
/** Validate files before adding. Return a string to reject with an error message. */
|
||||
validateFile?: (file: File) => string | undefined;
|
||||
/** Restrict file picker to specific file types (e.g. ".gcode,.gcode.3mf") */
|
||||
accept?: string;
|
||||
}
|
||||
|
||||
export function FileUploadModal({ folderId, onClose, onUploadComplete, onFileUploaded, autoUpload, validateFile, accept }: FileUploadModalProps) {
|
||||
const { t } = useTranslation();
|
||||
const [files, setFiles] = useState<UploadFile[]>([]);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [isUploading, setIsUploading] = useState(false);
|
||||
const [preserveZipStructure, setPreserveZipStructure] = useState(true);
|
||||
const [createFolderFromZip, setCreateFolderFromZip] = useState(false);
|
||||
const [generateStlThumbnails, setGenerateStlThumbnails] = useState(true);
|
||||
const [uploadError, setUploadError] = useState<string | null>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleDragOver = (e: DragEvent<HTMLDivElement>) => {
|
||||
e.preventDefault();
|
||||
setIsDragging(true);
|
||||
};
|
||||
|
||||
const handleDragLeave = (e: DragEvent<HTMLDivElement>) => {
|
||||
e.preventDefault();
|
||||
setIsDragging(false);
|
||||
};
|
||||
|
||||
const handleDrop = (e: DragEvent<HTMLDivElement>) => {
|
||||
e.preventDefault();
|
||||
setIsDragging(false);
|
||||
addFiles(Array.from(e.dataTransfer.files));
|
||||
};
|
||||
|
||||
const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.target.files) {
|
||||
addFiles(Array.from(e.target.files));
|
||||
}
|
||||
};
|
||||
|
||||
const updateFileStatus = (file: File, update: Partial<UploadFile>) => {
|
||||
setFiles((prev) => prev.map((f) => (f.file === file ? { ...f, ...update } : f)));
|
||||
};
|
||||
|
||||
const uploadFiles = async (filesToUpload: UploadFile[]) => {
|
||||
setIsUploading(true);
|
||||
|
||||
for (const uf of filesToUpload) {
|
||||
if (uf.status !== 'pending') continue;
|
||||
|
||||
updateFileStatus(uf.file, { status: 'uploading' });
|
||||
|
||||
try {
|
||||
if (uf.isZip) {
|
||||
const result = await api.extractZipFile(uf.file, folderId, preserveZipStructure, createFolderFromZip, generateStlThumbnails);
|
||||
updateFileStatus(uf.file, {
|
||||
status: result.errors.length > 0 && result.extracted === 0 ? 'error' : 'success',
|
||||
extractedCount: result.extracted,
|
||||
error: result.errors.length > 0 ? t('fileManager.zipFilesFailed', '{{count}} files failed', { count: result.errors.length }) : undefined,
|
||||
});
|
||||
} else {
|
||||
const result = await api.uploadLibraryFile(uf.file, folderId, generateStlThumbnails);
|
||||
updateFileStatus(uf.file, { status: 'success' });
|
||||
const error = onFileUploaded?.(result);
|
||||
if (error) {
|
||||
setUploadError(error);
|
||||
setFiles([]);
|
||||
setIsUploading(false);
|
||||
return;
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
updateFileStatus(uf.file, {
|
||||
status: 'error',
|
||||
error: err instanceof Error ? err.message : t('fileManager.uploadFailed', 'Upload failed'),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
setIsUploading(false);
|
||||
onUploadComplete();
|
||||
onClose();
|
||||
};
|
||||
|
||||
const addFiles = (newFiles: File[]) => {
|
||||
setUploadError(null);
|
||||
if (validateFile) {
|
||||
for (const file of newFiles) {
|
||||
const error = validateFile(file);
|
||||
if (error) {
|
||||
setUploadError(error);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
const toUpload: UploadFile[] = newFiles.map((file) => ({
|
||||
file,
|
||||
status: 'pending' as const,
|
||||
isZip: file.name.toLowerCase().endsWith('.zip'),
|
||||
is3mf: file.name.toLowerCase().endsWith('.3mf'),
|
||||
}));
|
||||
setFiles((prev) => [...prev, ...toUpload]);
|
||||
|
||||
if (autoUpload && newFiles.length > 0) {
|
||||
uploadFiles(toUpload);
|
||||
}
|
||||
};
|
||||
|
||||
const removeFile = (index: number) => {
|
||||
setFiles((prev) => prev.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
const hasZipFiles = files.some((f) => f.isZip && f.status === 'pending');
|
||||
const hasStlFiles = files.some((f) => f.file.name.toLowerCase().endsWith('.stl') && f.status === 'pending');
|
||||
const has3mfFiles = files.some((f) => f.is3mf && f.status === 'pending');
|
||||
const pendingCount = files.filter((f) => f.status === 'pending').length;
|
||||
const allDone = files.length > 0 && pendingCount === 0 && !isUploading;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-bambu-dark-secondary rounded-lg w-full max-w-lg border border-bambu-dark-tertiary">
|
||||
<div className="p-4 border-b border-bambu-dark-tertiary flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold text-white">{t('fileManager.uploadFiles')}</h2>
|
||||
<button onClick={onClose} className="p-1 hover:bg-bambu-dark rounded">
|
||||
<X className="w-5 h-5 text-bambu-gray" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-4 space-y-4">
|
||||
{/* Drop Zone */}
|
||||
<div
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={handleDrop}
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className={`border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors ${
|
||||
isDragging
|
||||
? 'border-bambu-green bg-bambu-green/10'
|
||||
: 'border-bambu-dark-tertiary hover:border-bambu-green/50'
|
||||
}`}
|
||||
>
|
||||
<Upload className={`w-10 h-10 mx-auto mb-3 ${isDragging ? 'text-bambu-green' : 'text-bambu-gray'}`} />
|
||||
<p className="text-white font-medium">
|
||||
{isDragging ? t('fileManager.dropFilesHere') : t('fileManager.dragDropFiles')}
|
||||
</p>
|
||||
<p className="text-sm text-bambu-gray mt-1">{t('fileManager.orClickToBrowse')}</p>
|
||||
<p className="text-xs text-bambu-gray/70 mt-2">{t('fileManager.allFileTypesSupported')}</p>
|
||||
</div>
|
||||
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
multiple
|
||||
accept={accept}
|
||||
className="hidden"
|
||||
onChange={handleFileSelect}
|
||||
/>
|
||||
|
||||
{/* ZIP Options */}
|
||||
{hasZipFiles && (
|
||||
<div className="p-3 bg-blue-500/10 border border-blue-500/30 rounded-lg">
|
||||
<div className="flex items-start gap-3">
|
||||
<ArchiveIcon className="w-5 h-5 text-blue-400 mt-0.5 flex-shrink-0" />
|
||||
<div className="flex-1">
|
||||
<p className="text-sm text-blue-300 font-medium">{t('fileManager.zipFilesDetected')}</p>
|
||||
<p className="text-xs text-blue-300/70 mt-1">
|
||||
{t('fileManager.zipExtractOptions')}
|
||||
</p>
|
||||
<label className="flex items-center gap-2 mt-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={preserveZipStructure}
|
||||
onChange={(e) => setPreserveZipStructure(e.target.checked)}
|
||||
className="w-4 h-4 rounded border-bambu-dark-tertiary bg-bambu-dark text-bambu-green focus:ring-bambu-green"
|
||||
/>
|
||||
<span className="text-sm text-white">{t('fileManager.preserveZipStructure')}</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 mt-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={createFolderFromZip}
|
||||
onChange={(e) => setCreateFolderFromZip(e.target.checked)}
|
||||
className="w-4 h-4 rounded border-bambu-dark-tertiary bg-bambu-dark text-bambu-green focus:ring-bambu-green"
|
||||
/>
|
||||
<span className="text-sm text-white">{t('fileManager.createFolderFromZip')}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 3MF File Info */}
|
||||
{has3mfFiles && (
|
||||
<div className="p-3 bg-purple-500/10 border border-purple-500/30 rounded-lg">
|
||||
<div className="flex items-start gap-3">
|
||||
<Printer className="w-5 h-5 text-purple-400 mt-0.5 flex-shrink-0" />
|
||||
<div className="flex-1">
|
||||
<p className="text-sm text-purple-300 font-medium">{t('fileManager.threemfDetected')}</p>
|
||||
<p className="text-xs text-purple-300/70 mt-1">
|
||||
{t('fileManager.threemfExtractionInfo')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* STL Thumbnail Options */}
|
||||
{(hasStlFiles || hasZipFiles) && (
|
||||
<div className="p-3 bg-bambu-green/10 border border-bambu-green/30 rounded-lg">
|
||||
<div className="flex items-start gap-3">
|
||||
<Image className="w-5 h-5 text-bambu-green mt-0.5 flex-shrink-0" />
|
||||
<div className="flex-1">
|
||||
<p className="text-sm text-bambu-green font-medium">{t('fileManager.stlThumbnailGeneration')}</p>
|
||||
<p className="text-xs text-bambu-green/70 mt-1">
|
||||
{hasZipFiles && !hasStlFiles
|
||||
? t('fileManager.zipMayContainStl')
|
||||
: t('fileManager.thumbnailsCanBeGenerated')}
|
||||
</p>
|
||||
<label className="flex items-center gap-2 mt-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={generateStlThumbnails}
|
||||
onChange={(e) => setGenerateStlThumbnails(e.target.checked)}
|
||||
className="w-4 h-4 rounded border-bambu-dark-tertiary bg-bambu-dark text-bambu-green focus:ring-bambu-green"
|
||||
/>
|
||||
<span className="text-sm text-white">{t('fileManager.generateThumbnailsForStl')}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* File List */}
|
||||
{files.length > 0 && (
|
||||
<div className="max-h-48 overflow-y-auto space-y-2">
|
||||
{files.map((uploadFile, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center gap-3 p-2 bg-bambu-dark rounded-lg"
|
||||
>
|
||||
{uploadFile.isZip ? (
|
||||
<ArchiveIcon className="w-4 h-4 text-blue-400 flex-shrink-0" />
|
||||
) : (
|
||||
<File className="w-4 h-4 text-bambu-gray flex-shrink-0" />
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm text-white truncate">{uploadFile.file.name}</p>
|
||||
<p className="text-xs text-bambu-gray">
|
||||
{(uploadFile.file.size / 1024 / 1024).toFixed(2)} MB
|
||||
{uploadFile.isZip && uploadFile.status === 'pending' && (
|
||||
<span className="text-blue-400 ml-2">• {t('fileManager.willBeExtracted')}</span>
|
||||
)}
|
||||
{uploadFile.extractedCount !== undefined && (
|
||||
<span className="text-green-400 ml-2">• {t('fileManager.filesExtracted', { count: uploadFile.extractedCount })}</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
{uploadFile.status === 'pending' && (
|
||||
<button
|
||||
onClick={() => removeFile(index)}
|
||||
className="p-1 hover:bg-bambu-dark-tertiary rounded"
|
||||
>
|
||||
<X className="w-4 h-4 text-bambu-gray" />
|
||||
</button>
|
||||
)}
|
||||
{uploadFile.status === 'uploading' && (
|
||||
<Loader2 className="w-4 h-4 text-bambu-green animate-spin" />
|
||||
)}
|
||||
{uploadFile.status === 'success' && (
|
||||
<CheckCircle className="w-4 h-4 text-green-500" />
|
||||
)}
|
||||
{uploadFile.status === 'error' && (
|
||||
<span title={uploadFile.error}>
|
||||
<XCircle className="w-4 h-4 text-red-500" />
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Compatibility Error */}
|
||||
{uploadError && (
|
||||
<div className="p-3 bg-red-500/10 border border-red-500/30 rounded-lg">
|
||||
<div className="flex items-start gap-3">
|
||||
<XCircle className="w-5 h-5 text-red-400 mt-0.5 flex-shrink-0" />
|
||||
<p className="text-sm text-red-300">{uploadError}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="p-4 border-t border-bambu-dark-tertiary flex justify-end gap-2">
|
||||
<Button variant="secondary" onClick={onClose}>
|
||||
{t('common.cancel')}
|
||||
</Button>
|
||||
{!allDone && (
|
||||
<Button
|
||||
onClick={() => uploadFiles(files)}
|
||||
disabled={pendingCount === 0 || isUploading}
|
||||
>
|
||||
{isUploading ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
{t('fileManager.uploading')}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Upload className="w-4 h-4 mr-2" />
|
||||
{t('common.upload')} {pendingCount > 0 ? `(${pendingCount})` : ''}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -43,6 +43,7 @@ export function PrintModal({
|
||||
libraryFileId,
|
||||
archiveName,
|
||||
queueItem,
|
||||
initialSelectedPrinterIds,
|
||||
onClose,
|
||||
onSuccess,
|
||||
}: PrintModalProps) {
|
||||
@@ -60,6 +61,9 @@ export function PrintModal({
|
||||
if (mode === 'edit-queue-item' && queueItem?.printer_id) {
|
||||
return [queueItem.printer_id];
|
||||
}
|
||||
if (initialSelectedPrinterIds?.length) {
|
||||
return initialSelectedPrinterIds;
|
||||
}
|
||||
return [];
|
||||
});
|
||||
|
||||
@@ -677,7 +681,10 @@ export function PrintModal({
|
||||
<p className={`text-sm text-bambu-gray ${mode === 'reprint' ? 'mb-4' : ''}`}>
|
||||
{mode === 'reprint' ? (
|
||||
<>
|
||||
Send <span className="text-white">{archiveName}</span> to printer(s)
|
||||
Send <span className="text-white">{archiveName}</span> to{' '}
|
||||
{initialSelectedPrinterIds?.length === 1 && printers
|
||||
? <span className="text-white">{printers.find(p => p.id === initialSelectedPrinterIds[0])?.name ?? 'printer(s)'}</span>
|
||||
: 'printer(s)'}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
@@ -695,26 +702,28 @@ export function PrintModal({
|
||||
onSelect={setSelectedPlate}
|
||||
/>
|
||||
|
||||
{/* Printer selection with per-printer mapping */}
|
||||
<PrinterSelector
|
||||
printers={printers || []}
|
||||
selectedPrinterIds={selectedPrinters}
|
||||
onMultiSelect={setSelectedPrinters}
|
||||
isLoading={loadingPrinters}
|
||||
allowMultiple={true}
|
||||
showInactive={mode === 'edit-queue-item'}
|
||||
printerMappingResults={multiPrinterMapping.printerResults}
|
||||
filamentReqs={effectiveFilamentReqs}
|
||||
onAutoConfigurePrinter={multiPrinterMapping.autoConfigurePrinter}
|
||||
onUpdatePrinterConfig={multiPrinterMapping.updatePrinterConfig}
|
||||
assignmentMode={mode === 'reprint' ? 'printer' : assignmentMode}
|
||||
onAssignmentModeChange={mode !== 'reprint' ? setAssignmentMode : undefined}
|
||||
targetModel={targetModel}
|
||||
onTargetModelChange={mode !== 'reprint' ? setTargetModel : undefined}
|
||||
targetLocation={targetLocation}
|
||||
onTargetLocationChange={mode !== 'reprint' ? setTargetLocation : undefined}
|
||||
slicedForModel={slicedForModel}
|
||||
/>
|
||||
{/* Printer selection with per-printer mapping — hidden when printer is pre-selected via props */}
|
||||
{!initialSelectedPrinterIds?.length && (
|
||||
<PrinterSelector
|
||||
printers={printers || []}
|
||||
selectedPrinterIds={selectedPrinters}
|
||||
onMultiSelect={setSelectedPrinters}
|
||||
isLoading={loadingPrinters}
|
||||
allowMultiple={true}
|
||||
showInactive={mode === 'edit-queue-item'}
|
||||
printerMappingResults={multiPrinterMapping.printerResults}
|
||||
filamentReqs={effectiveFilamentReqs}
|
||||
onAutoConfigurePrinter={multiPrinterMapping.autoConfigurePrinter}
|
||||
onUpdatePrinterConfig={multiPrinterMapping.updatePrinterConfig}
|
||||
assignmentMode={mode === 'reprint' ? 'printer' : assignmentMode}
|
||||
onAssignmentModeChange={mode !== 'reprint' ? setAssignmentMode : undefined}
|
||||
targetModel={targetModel}
|
||||
onTargetModelChange={mode !== 'reprint' ? setTargetModel : undefined}
|
||||
targetLocation={targetLocation}
|
||||
onTargetLocationChange={mode !== 'reprint' ? setTargetLocation : undefined}
|
||||
slicedForModel={slicedForModel}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Filament override - shown in model mode when filament requirements are available */}
|
||||
{assignmentMode === 'model' && targetModel && effectiveFilamentReqs && availableFilaments && availableFilaments.length > 0 && (
|
||||
@@ -759,7 +768,7 @@ export function PrintModal({
|
||||
filamentReqs={effectiveFilamentReqs}
|
||||
manualMappings={manualMappings}
|
||||
onManualMappingChange={setManualMappings}
|
||||
defaultExpanded={settings?.per_printer_mapping_expanded ?? false}
|
||||
defaultExpanded={!!initialSelectedPrinterIds?.length || (settings?.per_printer_mapping_expanded ?? false)}
|
||||
currencySymbol={currencySymbol}
|
||||
defaultCostPerKg={defaultCostPerKg}
|
||||
/>
|
||||
@@ -767,7 +776,7 @@ export function PrintModal({
|
||||
|
||||
{/* Print options */}
|
||||
{(mode === 'reprint' || effectivePrinterCount > 0 || (assignmentMode === 'model' && targetModel)) && (
|
||||
<PrintOptionsPanel options={printOptions} onChange={setPrintOptions} />
|
||||
<PrintOptionsPanel options={printOptions} onChange={setPrintOptions} defaultExpanded={!!initialSelectedPrinterIds?.length} />
|
||||
)}
|
||||
|
||||
{/* Schedule options - only for queue modes */}
|
||||
|
||||
@@ -26,6 +26,8 @@ export interface PrintModalProps {
|
||||
archiveName: string;
|
||||
/** Existing queue item (only for edit-queue-item mode) */
|
||||
queueItem?: PrintQueueItem;
|
||||
/** Pre-select specific printers when opening the modal */
|
||||
initialSelectedPrinterIds?: number[];
|
||||
/** Handler for closing the modal */
|
||||
onClose: () => void;
|
||||
/** Handler for successful operation */
|
||||
|
||||
@@ -0,0 +1,246 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { X, Copy, Check, Signal } from 'lucide-react';
|
||||
import { Card, CardContent } from './Card';
|
||||
import { formatDateOnly } from '../utils/date';
|
||||
import { getPrinterImage, getWifiStrength } from '../utils/printer';
|
||||
import type { Printer, PrinterStatus } from '../api/client';
|
||||
|
||||
interface PrinterInfoModalProps {
|
||||
printer: Printer;
|
||||
status?: PrinterStatus;
|
||||
totalPrintHours?: number;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
function CopyButton({ value }: { value: string }) {
|
||||
const { t } = useTranslation();
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
const handleCopy = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(value);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
} catch {
|
||||
// Clipboard may not be available in non-secure contexts
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={handleCopy}
|
||||
className="ml-2 p-1 rounded hover:bg-bambu-dark-tertiary text-bambu-gray hover:text-white transition-colors"
|
||||
title={copied ? t('printers.copied') : t('printers.copyToClipboard')}
|
||||
>
|
||||
{copied ? <Check className="w-3.5 h-3.5 text-bambu-green" /> : <Copy className="w-3.5 h-3.5" />}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export function PrinterInfoModal({ printer, status, totalPrintHours, onClose }: PrinterInfoModalProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
useEffect(() => {
|
||||
const handleKey = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') onClose();
|
||||
};
|
||||
window.addEventListener('keydown', handleKey);
|
||||
return () => window.removeEventListener('keydown', handleKey);
|
||||
}, [onClose]);
|
||||
|
||||
const rows: { label: string; value: React.ReactNode }[] = [];
|
||||
|
||||
// Model
|
||||
rows.push({
|
||||
label: t('printers.model'),
|
||||
value: printer.model ?? '—',
|
||||
});
|
||||
|
||||
// Connection Status
|
||||
rows.push({
|
||||
label: t('common.status'),
|
||||
value: (
|
||||
<span className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium ${
|
||||
status?.connected
|
||||
? 'bg-bambu-green/20 text-bambu-green'
|
||||
: 'bg-red-500/20 text-red-400'
|
||||
}`}>
|
||||
<span className={`w-1.5 h-1.5 rounded-full ${status?.connected ? 'bg-bambu-green' : 'bg-red-400'}`} />
|
||||
{status?.connected ? t('printers.status.available') : t('printers.status.offline')}
|
||||
</span>
|
||||
),
|
||||
});
|
||||
|
||||
// State
|
||||
if (status?.state) {
|
||||
const stateMap: Record<string, string> = {
|
||||
IDLE: 'printers.status.idle',
|
||||
RUNNING: 'printers.status.printing',
|
||||
PAUSE: 'printers.status.paused',
|
||||
FINISH: 'printers.status.finished',
|
||||
FAILED: 'printers.status.error',
|
||||
};
|
||||
rows.push({
|
||||
label: t('printers.state'),
|
||||
value: t(stateMap[status.state] ?? 'printers.status.unknown'),
|
||||
});
|
||||
}
|
||||
|
||||
// IP Address
|
||||
rows.push({
|
||||
label: t('printers.ipAddress'),
|
||||
value: (
|
||||
<span className="flex items-center">
|
||||
<span className="font-mono">{printer.ip_address}</span>
|
||||
<CopyButton value={printer.ip_address} />
|
||||
</span>
|
||||
),
|
||||
});
|
||||
|
||||
// Serial Number
|
||||
rows.push({
|
||||
label: t('printers.serialNumber'),
|
||||
value: (
|
||||
<span className="flex items-center">
|
||||
<span className="font-mono truncate">{printer.serial_number}</span>
|
||||
<CopyButton value={printer.serial_number} />
|
||||
</span>
|
||||
),
|
||||
});
|
||||
|
||||
// WiFi Signal
|
||||
if (status?.wifi_signal != null) {
|
||||
const wifi = getWifiStrength(status.wifi_signal);
|
||||
rows.push({
|
||||
label: t('printers.wifiSignalLabel'),
|
||||
value: (
|
||||
<span className="flex items-center gap-2">
|
||||
<Signal className={`w-4 h-4 ${wifi.color}`} />
|
||||
<span className={wifi.color}>{t(wifi.labelKey)}</span>
|
||||
<span className="text-bambu-gray text-xs">({status.wifi_signal} dBm)</span>
|
||||
</span>
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
// Firmware
|
||||
rows.push({
|
||||
label: t('printers.firmware'),
|
||||
value: status?.firmware_version ?? '—',
|
||||
});
|
||||
|
||||
// Developer Mode
|
||||
if (status?.developer_mode != null) {
|
||||
rows.push({
|
||||
label: t('printers.developerMode'),
|
||||
value: (
|
||||
<span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
|
||||
status.developer_mode
|
||||
? 'bg-bambu-green/20 text-bambu-green'
|
||||
: 'bg-bambu-dark-tertiary text-bambu-gray'
|
||||
}`}>
|
||||
{status.developer_mode ? t('printers.enabled') : t('printers.disabled')}
|
||||
</span>
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
// Nozzle Count
|
||||
rows.push({
|
||||
label: t('printers.nozzleCount'),
|
||||
value: printer.nozzle_count,
|
||||
});
|
||||
|
||||
// SD Card
|
||||
if (status?.sdcard != null) {
|
||||
rows.push({
|
||||
label: t('printers.sdCard'),
|
||||
value: (
|
||||
<span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
|
||||
status.sdcard
|
||||
? 'bg-bambu-green/20 text-bambu-green'
|
||||
: 'bg-bambu-dark-tertiary text-bambu-gray'
|
||||
}`}>
|
||||
{status.sdcard ? t('printers.inserted') : t('printers.notInserted')}
|
||||
</span>
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
// Auto-Archive
|
||||
rows.push({
|
||||
label: t('printers.autoArchive'),
|
||||
value: (
|
||||
<span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
|
||||
printer.auto_archive
|
||||
? 'bg-bambu-green/20 text-bambu-green'
|
||||
: 'bg-bambu-dark-tertiary text-bambu-gray'
|
||||
}`}>
|
||||
{printer.auto_archive ? t('printers.enabled') : t('printers.disabled')}
|
||||
</span>
|
||||
),
|
||||
});
|
||||
|
||||
// Total Print Hours
|
||||
if (totalPrintHours != null && totalPrintHours > 0) {
|
||||
rows.push({
|
||||
label: t('printers.totalPrintHours'),
|
||||
value: `${Math.round(totalPrintHours)}h`,
|
||||
});
|
||||
}
|
||||
|
||||
// Location
|
||||
if (printer.location) {
|
||||
rows.push({
|
||||
label: t('printers.sort.location'),
|
||||
value: printer.location,
|
||||
});
|
||||
}
|
||||
|
||||
// Added date
|
||||
rows.push({
|
||||
label: t('printers.addedOn'),
|
||||
value: formatDateOnly(printer.created_at),
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
onClick={onClose}
|
||||
>
|
||||
<Card className="w-full max-w-md" onClick={(e: React.MouseEvent) => e.stopPropagation()}>
|
||||
<CardContent>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-lg font-semibold text-white">
|
||||
{printer.name}
|
||||
</h2>
|
||||
<button onClick={onClose} className="p-1 hover:bg-bambu-dark rounded flex-shrink-0">
|
||||
<X className="w-5 h-5 text-bambu-gray" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Printer Image */}
|
||||
<div className="flex justify-center mb-4">
|
||||
<img
|
||||
src={getPrinterImage(printer.model)}
|
||||
alt={printer.model ?? printer.name}
|
||||
className="h-24 object-contain"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-0">
|
||||
{rows.map((row, i) => (
|
||||
<div key={i} className="flex items-center justify-between gap-4 py-2.5 border-b border-bambu-dark-tertiary last:border-0">
|
||||
<span className="text-sm text-bambu-gray whitespace-nowrap">{row.label}</span>
|
||||
<span className="text-sm text-white text-right">{row.value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user