|
|
@@ -0,0 +1,853 @@
|
|
|
+import { useState, useMemo, useEffect, useCallback } from 'react';
|
|
|
+import { useQuery, useMutation } from '@tanstack/react-query';
|
|
|
+import { X, Loader2, Settings2, ChevronDown, CheckCircle2, RotateCcw } from 'lucide-react';
|
|
|
+import { api } from '../api/client';
|
|
|
+import type { KProfile } from '../api/client';
|
|
|
+import { Button } from './Button';
|
|
|
+
|
|
|
+interface SlotInfo {
|
|
|
+ amsId: number;
|
|
|
+ trayId: number;
|
|
|
+ trayCount: number;
|
|
|
+ trayType?: string;
|
|
|
+ trayColor?: string;
|
|
|
+ traySubBrands?: string;
|
|
|
+ trayInfoIdx?: string;
|
|
|
+}
|
|
|
+
|
|
|
+// Get proper AMS label (handles HT AMS with ID 128+)
|
|
|
+function getAmsLabel(amsId: number, trayCount: number): string {
|
|
|
+ // External spool
|
|
|
+ if (amsId === 255) return 'External';
|
|
|
+
|
|
|
+ let normalizedId: number;
|
|
|
+ let isHt = false;
|
|
|
+
|
|
|
+ if (amsId >= 128 && amsId <= 135) {
|
|
|
+ // HT AMS range: 128-135 → A-H
|
|
|
+ normalizedId = amsId - 128;
|
|
|
+ isHt = true;
|
|
|
+ } else if (amsId >= 0 && amsId <= 3) {
|
|
|
+ // Regular AMS range: 0-3 → A-D
|
|
|
+ normalizedId = amsId;
|
|
|
+ // Check tray count as secondary indicator
|
|
|
+ isHt = trayCount === 1;
|
|
|
+ } else {
|
|
|
+ // Unknown range - fallback to A
|
|
|
+ normalizedId = 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ // Cap to valid letter range (A-H)
|
|
|
+ normalizedId = Math.max(0, Math.min(normalizedId, 7));
|
|
|
+ const letter = String.fromCharCode(65 + normalizedId);
|
|
|
+
|
|
|
+ return isHt ? `HT-${letter}` : `AMS-${letter}`;
|
|
|
+}
|
|
|
+
|
|
|
+// Convert setting_id to tray_info_idx (filament_id format)
|
|
|
+// Bambu format: setting_id "GFSL05" → tray_info_idx "GFL05"
|
|
|
+function convertToTrayInfoIdx(settingId: string): string {
|
|
|
+ // Strip version suffix if present (e.g., GFSL05_07 -> GFSL05)
|
|
|
+ const baseId = settingId.includes('_') ? settingId.split('_')[0] : settingId;
|
|
|
+
|
|
|
+ // Bambu presets start with "GFS" - remove the 'S' to get filament_id
|
|
|
+ if (baseId.startsWith('GFS')) {
|
|
|
+ return 'GF' + baseId.slice(3);
|
|
|
+ }
|
|
|
+
|
|
|
+ // User presets (PFUS*, PFSP*) - use the base setting_id (without version suffix)
|
|
|
+ // This follows the pattern that filament_id and setting_id share the same base ID
|
|
|
+ if (baseId.startsWith('PFUS') || baseId.startsWith('PFSP')) {
|
|
|
+ return baseId; // Use base ID without version suffix
|
|
|
+ }
|
|
|
+
|
|
|
+ // For other formats, use as-is
|
|
|
+ return baseId;
|
|
|
+}
|
|
|
+
|
|
|
+interface ConfigureAmsSlotModalProps {
|
|
|
+ isOpen: boolean;
|
|
|
+ onClose: () => void;
|
|
|
+ printerId: number;
|
|
|
+ slotInfo: SlotInfo;
|
|
|
+ nozzleDiameter?: string;
|
|
|
+ onSuccess?: () => void;
|
|
|
+}
|
|
|
+
|
|
|
+// Known filament material types
|
|
|
+const MATERIAL_TYPES = ['PLA', 'PETG', 'ABS', 'ASA', 'TPU', 'PC', 'PA', 'NYLON', 'PVA', 'HIPS', 'PP', 'PET'];
|
|
|
+
|
|
|
+// Extract filament type from preset name by finding known material type
|
|
|
+function parsePresetName(name: string): { material: string; brand: string; variant: string } {
|
|
|
+ // Remove printer/nozzle suffix first
|
|
|
+ const withoutSuffix = name.replace(/@.+$/, '').trim();
|
|
|
+
|
|
|
+ // Try to find a known material type in the name
|
|
|
+ const upperName = withoutSuffix.toUpperCase();
|
|
|
+ for (const mat of MATERIAL_TYPES) {
|
|
|
+ // Use word boundary to match whole words only
|
|
|
+ const regex = new RegExp(`\\b${mat}\\b`, 'i');
|
|
|
+ if (regex.test(upperName)) {
|
|
|
+ // Found material, extract brand (everything before material) and variant (after)
|
|
|
+ const parts = withoutSuffix.split(regex);
|
|
|
+ const brand = parts[0]?.trim() || '';
|
|
|
+ const variant = parts[1]?.trim() || '';
|
|
|
+ return { material: mat, brand, variant };
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // Fallback: assume first word is brand, second is material
|
|
|
+ const parts = withoutSuffix.split(/\s+/);
|
|
|
+ if (parts.length >= 2) {
|
|
|
+ return { material: parts[1], brand: parts[0], variant: parts.slice(2).join(' ') };
|
|
|
+ }
|
|
|
+
|
|
|
+ return { material: withoutSuffix, brand: '', variant: '' };
|
|
|
+}
|
|
|
+
|
|
|
+// Check if a preset is a user preset (not built-in)
|
|
|
+function isUserPreset(settingId: string): boolean {
|
|
|
+ // Built-in presets have specific patterns, user presets are UUIDs
|
|
|
+ return !settingId.startsWith('GF') && !settingId.startsWith('P1');
|
|
|
+}
|
|
|
+
|
|
|
+// Common color name to hex mapping
|
|
|
+const COLOR_NAME_MAP: Record<string, string> = {
|
|
|
+ // Basic colors
|
|
|
+ 'white': 'FFFFFF',
|
|
|
+ 'black': '000000',
|
|
|
+ 'red': 'FF0000',
|
|
|
+ 'green': '00FF00',
|
|
|
+ 'blue': '0000FF',
|
|
|
+ 'yellow': 'FFFF00',
|
|
|
+ 'cyan': '00FFFF',
|
|
|
+ 'magenta': 'FF00FF',
|
|
|
+ 'orange': 'FFA500',
|
|
|
+ 'purple': '800080',
|
|
|
+ 'pink': 'FFC0CB',
|
|
|
+ 'brown': '8B4513',
|
|
|
+ 'gray': '808080',
|
|
|
+ 'grey': '808080',
|
|
|
+ // Filament-specific colors
|
|
|
+ 'jade white': 'FFFEF2',
|
|
|
+ 'ivory': 'FFFFF0',
|
|
|
+ 'beige': 'F5F5DC',
|
|
|
+ 'cream': 'FFFDD0',
|
|
|
+ 'silver': 'C0C0C0',
|
|
|
+ 'gold': 'FFD700',
|
|
|
+ 'bronze': 'CD7F32',
|
|
|
+ 'copper': 'B87333',
|
|
|
+ 'navy': '000080',
|
|
|
+ 'teal': '008080',
|
|
|
+ 'olive': '808000',
|
|
|
+ 'maroon': '800000',
|
|
|
+ 'coral': 'FF7F50',
|
|
|
+ 'salmon': 'FA8072',
|
|
|
+ 'lime': '32CD32',
|
|
|
+ 'mint': '98FF98',
|
|
|
+ 'forest green': '228B22',
|
|
|
+ 'sky blue': '87CEEB',
|
|
|
+ 'royal blue': '4169E1',
|
|
|
+ 'turquoise': '40E0D0',
|
|
|
+ 'lavender': 'E6E6FA',
|
|
|
+ 'violet': 'EE82EE',
|
|
|
+ 'plum': 'DDA0DD',
|
|
|
+ 'tan': 'D2B48C',
|
|
|
+ 'chocolate': 'D2691E',
|
|
|
+ 'charcoal': '36454F',
|
|
|
+ 'slate': '708090',
|
|
|
+ 'transparent': '000000', // Will need special handling
|
|
|
+ 'natural': 'F5F5DC',
|
|
|
+ 'wood': 'DEB887',
|
|
|
+};
|
|
|
+
|
|
|
+// Quick-select color presets (common filament colors)
|
|
|
+// Basic colors shown by default
|
|
|
+const QUICK_COLORS_BASIC = [
|
|
|
+ { name: 'White', hex: 'FFFFFF' },
|
|
|
+ { name: 'Black', hex: '000000' },
|
|
|
+ { name: 'Red', hex: 'FF0000' },
|
|
|
+ { name: 'Blue', hex: '0000FF' },
|
|
|
+ { name: 'Green', hex: '00AA00' },
|
|
|
+ { name: 'Yellow', hex: 'FFFF00' },
|
|
|
+ { name: 'Orange', hex: 'FFA500' },
|
|
|
+ { name: 'Gray', hex: '808080' },
|
|
|
+];
|
|
|
+
|
|
|
+// Extended colors shown when expanded
|
|
|
+const QUICK_COLORS_EXTENDED = [
|
|
|
+ { name: 'Cyan', hex: '00FFFF' },
|
|
|
+ { name: 'Magenta', hex: 'FF00FF' },
|
|
|
+ { name: 'Purple', hex: '800080' },
|
|
|
+ { name: 'Pink', hex: 'FFC0CB' },
|
|
|
+ { name: 'Brown', hex: '8B4513' },
|
|
|
+ { name: 'Beige', hex: 'F5F5DC' },
|
|
|
+ { name: 'Navy', hex: '000080' },
|
|
|
+ { name: 'Teal', hex: '008080' },
|
|
|
+ { name: 'Lime', hex: '32CD32' },
|
|
|
+ { name: 'Gold', hex: 'FFD700' },
|
|
|
+ { name: 'Silver', hex: 'C0C0C0' },
|
|
|
+ { name: 'Maroon', hex: '800000' },
|
|
|
+ { name: 'Olive', hex: '808000' },
|
|
|
+ { name: 'Coral', hex: 'FF7F50' },
|
|
|
+ { name: 'Salmon', hex: 'FA8072' },
|
|
|
+ { name: 'Turquoise', hex: '40E0D0' },
|
|
|
+ { name: 'Violet', hex: 'EE82EE' },
|
|
|
+ { name: 'Indigo', hex: '4B0082' },
|
|
|
+ { name: 'Chocolate', hex: 'D2691E' },
|
|
|
+ { name: 'Tan', hex: 'D2B48C' },
|
|
|
+ { name: 'Slate', hex: '708090' },
|
|
|
+ { name: 'Charcoal', hex: '36454F' },
|
|
|
+ { name: 'Ivory', hex: 'FFFFF0' },
|
|
|
+ { name: 'Cream', hex: 'FFFDD0' },
|
|
|
+];
|
|
|
+
|
|
|
+// Try to convert color name to hex
|
|
|
+function colorNameToHex(name: string): string | null {
|
|
|
+ const normalized = name.toLowerCase().trim();
|
|
|
+ return COLOR_NAME_MAP[normalized] || null;
|
|
|
+}
|
|
|
+
|
|
|
+export function ConfigureAmsSlotModal({
|
|
|
+ isOpen,
|
|
|
+ onClose,
|
|
|
+ printerId,
|
|
|
+ slotInfo,
|
|
|
+ nozzleDiameter = '0.4',
|
|
|
+ onSuccess,
|
|
|
+}: ConfigureAmsSlotModalProps) {
|
|
|
+ const [selectedPresetId, setSelectedPresetId] = useState<string>('');
|
|
|
+ const [selectedKProfile, setSelectedKProfile] = useState<KProfile | null>(null);
|
|
|
+ const [colorHex, setColorHex] = useState<string>(''); // Just the 6-char hex, no alpha
|
|
|
+ const [colorInput, setColorInput] = useState<string>(''); // User's text input (name or hex)
|
|
|
+ const [searchQuery, setSearchQuery] = useState('');
|
|
|
+ const [showSuccess, setShowSuccess] = useState(false);
|
|
|
+ const [showExtendedColors, setShowExtendedColors] = useState(false);
|
|
|
+
|
|
|
+ // Fetch cloud settings
|
|
|
+ const { data: cloudSettings, isLoading: settingsLoading } = useQuery({
|
|
|
+ queryKey: ['cloudSettings'],
|
|
|
+ queryFn: () => api.getCloudSettings(),
|
|
|
+ enabled: isOpen,
|
|
|
+ });
|
|
|
+
|
|
|
+ // Fetch K profiles
|
|
|
+ const { data: kprofilesData, isLoading: kprofilesLoading } = useQuery({
|
|
|
+ queryKey: ['kprofiles', printerId, nozzleDiameter],
|
|
|
+ queryFn: () => api.getKProfiles(printerId, nozzleDiameter),
|
|
|
+ enabled: isOpen && !!printerId,
|
|
|
+ });
|
|
|
+
|
|
|
+ // Configure slot mutation
|
|
|
+ const configureMutation = useMutation({
|
|
|
+ mutationFn: async () => {
|
|
|
+ if (!selectedPresetId) throw new Error('No filament preset selected');
|
|
|
+
|
|
|
+ // Get the selected preset details
|
|
|
+ const selectedPreset = cloudSettings?.filament.find(p => p.setting_id === selectedPresetId);
|
|
|
+ if (!selectedPreset) throw new Error('Selected preset not found');
|
|
|
+
|
|
|
+ // Parse the preset name for filament info
|
|
|
+ const parsed = parsePresetName(selectedPreset.name);
|
|
|
+
|
|
|
+ // Get cali_idx from selected K profile's slot_id (-1 = use default 0.020)
|
|
|
+ const caliIdx = selectedKProfile?.slot_id ?? -1;
|
|
|
+
|
|
|
+ // Use custom color if set, otherwise use current slot color or default
|
|
|
+ const color = colorHex || slotInfo.trayColor?.slice(0, 6) || 'FFFFFF';
|
|
|
+
|
|
|
+ // Create the tray_sub_brands from preset name (without printer/nozzle suffix)
|
|
|
+ const traySubBrands = selectedPreset.name.replace(/@.+$/, '').trim();
|
|
|
+
|
|
|
+ // Get tray_info_idx: for user presets, fetch detail to get filament_id or derive from base_id
|
|
|
+ let trayInfoIdx = convertToTrayInfoIdx(selectedPresetId);
|
|
|
+
|
|
|
+ // For user presets (not starting with GF), fetch the detail to get the real filament_id
|
|
|
+ if (!selectedPresetId.startsWith('GFS')) {
|
|
|
+ try {
|
|
|
+ const detail = await api.getCloudSettingDetail(selectedPresetId);
|
|
|
+ if (detail.filament_id) {
|
|
|
+ trayInfoIdx = detail.filament_id;
|
|
|
+ } else if (detail.base_id) {
|
|
|
+ // If no filament_id but has base_id (e.g., "GFSL05_09"), derive tray_info_idx from it
|
|
|
+ // This is common for user presets that inherit from Bambu presets
|
|
|
+ trayInfoIdx = convertToTrayInfoIdx(detail.base_id);
|
|
|
+ console.log(`Derived tray_info_idx from base_id: ${detail.base_id} -> ${trayInfoIdx}`);
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.warn('Failed to fetch preset detail for filament_id:', e);
|
|
|
+ // Fall back to derived tray_info_idx
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // Default temp range based on material type
|
|
|
+ let tempMin = 190;
|
|
|
+ let tempMax = 230;
|
|
|
+ const material = parsed.material.toUpperCase();
|
|
|
+ if (material.includes('PLA')) {
|
|
|
+ tempMin = 190;
|
|
|
+ tempMax = 230;
|
|
|
+ } else if (material.includes('PETG')) {
|
|
|
+ tempMin = 220;
|
|
|
+ tempMax = 260;
|
|
|
+ } else if (material.includes('ABS')) {
|
|
|
+ tempMin = 240;
|
|
|
+ tempMax = 280;
|
|
|
+ } else if (material.includes('ASA')) {
|
|
|
+ tempMin = 240;
|
|
|
+ tempMax = 280;
|
|
|
+ } else if (material.includes('TPU')) {
|
|
|
+ tempMin = 200;
|
|
|
+ tempMax = 240;
|
|
|
+ } else if (material.includes('PC')) {
|
|
|
+ tempMin = 260;
|
|
|
+ tempMax = 300;
|
|
|
+ } else if (material.includes('PA') || material.includes('NYLON')) {
|
|
|
+ tempMin = 250;
|
|
|
+ tempMax = 290;
|
|
|
+ }
|
|
|
+
|
|
|
+ // Parse K value from selected profile
|
|
|
+ const kValue = selectedKProfile?.k_value ? parseFloat(selectedKProfile.k_value) : 0;
|
|
|
+
|
|
|
+ // Configure the slot via MQTT
|
|
|
+ const result = await api.configureAmsSlot(printerId, slotInfo.amsId, slotInfo.trayId, {
|
|
|
+ tray_info_idx: trayInfoIdx,
|
|
|
+ tray_type: parsed.material || 'PLA',
|
|
|
+ tray_sub_brands: traySubBrands,
|
|
|
+ tray_color: color + 'FF', // Add alpha
|
|
|
+ nozzle_temp_min: tempMin,
|
|
|
+ nozzle_temp_max: tempMax,
|
|
|
+ cali_idx: caliIdx,
|
|
|
+ nozzle_diameter: nozzleDiameter,
|
|
|
+ setting_id: selectedPresetId, // Full setting ID for slicer compatibility
|
|
|
+ // Pass K profile's filament_id and setting_id for proper linking
|
|
|
+ kprofile_filament_id: selectedKProfile?.filament_id,
|
|
|
+ kprofile_setting_id: selectedKProfile?.setting_id || undefined,
|
|
|
+ // Also pass the K value directly for extrusion_cali_set command
|
|
|
+ k_value: kValue,
|
|
|
+ });
|
|
|
+
|
|
|
+ // Save the preset mapping so we can display the correct name in the UI
|
|
|
+ // This is needed because user presets use filament_id (e.g., P285e239) as tray_info_idx,
|
|
|
+ // which can't be resolved to a name via the filamentInfo API
|
|
|
+ try {
|
|
|
+ await api.saveSlotPreset(printerId, slotInfo.amsId, slotInfo.trayId, selectedPresetId, traySubBrands);
|
|
|
+ } catch (e) {
|
|
|
+ console.warn('Failed to save slot preset mapping:', e);
|
|
|
+ // Don't fail the whole operation - slot was configured successfully
|
|
|
+ }
|
|
|
+
|
|
|
+ return result;
|
|
|
+ },
|
|
|
+ onSuccess: () => {
|
|
|
+ setShowSuccess(true);
|
|
|
+ onSuccess?.();
|
|
|
+ // Close after showing success briefly
|
|
|
+ setTimeout(() => {
|
|
|
+ setShowSuccess(false);
|
|
|
+ onClose();
|
|
|
+ }, 1500);
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ // Reset slot mutation
|
|
|
+ const resetMutation = useMutation({
|
|
|
+ mutationFn: async () => {
|
|
|
+ return api.resetAmsSlot(printerId, slotInfo.amsId, slotInfo.trayId);
|
|
|
+ },
|
|
|
+ onSuccess: () => {
|
|
|
+ setShowSuccess(true);
|
|
|
+ onSuccess?.();
|
|
|
+ setTimeout(() => {
|
|
|
+ setShowSuccess(false);
|
|
|
+ onClose();
|
|
|
+ }, 1500);
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ // Filter filament presets based on search
|
|
|
+ const filteredPresets = useMemo(() => {
|
|
|
+ if (!cloudSettings?.filament) return [];
|
|
|
+
|
|
|
+ const query = searchQuery.toLowerCase();
|
|
|
+ return cloudSettings.filament
|
|
|
+ .filter(p => {
|
|
|
+ if (!query) return true;
|
|
|
+ return p.name.toLowerCase().includes(query);
|
|
|
+ })
|
|
|
+ .sort((a, b) => {
|
|
|
+ // Sort user presets first, then alphabetically
|
|
|
+ const aIsUser = isUserPreset(a.setting_id);
|
|
|
+ const bIsUser = isUserPreset(b.setting_id);
|
|
|
+ if (aIsUser && !bIsUser) return -1;
|
|
|
+ if (!aIsUser && bIsUser) return 1;
|
|
|
+ return a.name.localeCompare(b.name);
|
|
|
+ });
|
|
|
+ }, [cloudSettings?.filament, searchQuery]);
|
|
|
+
|
|
|
+ // Get full preset name for K profile filtering (brand + material, without printer suffix)
|
|
|
+ const selectedPresetInfo = useMemo(() => {
|
|
|
+ if (!selectedPresetId || !cloudSettings?.filament) return null;
|
|
|
+ const selectedPreset = cloudSettings.filament.find(p => p.setting_id === selectedPresetId);
|
|
|
+ if (!selectedPreset) return null;
|
|
|
+
|
|
|
+ // Remove printer/nozzle suffix (e.g., "@BBL X1C" or "@0.4 nozzle")
|
|
|
+ let nameWithoutSuffix = selectedPreset.name.replace(/@.+$/, '').trim();
|
|
|
+ // Strip leading "# " from custom preset names (user convention)
|
|
|
+ if (nameWithoutSuffix.startsWith('# ')) {
|
|
|
+ nameWithoutSuffix = nameWithoutSuffix.slice(2).trim();
|
|
|
+ }
|
|
|
+ const parsed = parsePresetName(nameWithoutSuffix);
|
|
|
+
|
|
|
+ return {
|
|
|
+ fullName: nameWithoutSuffix,
|
|
|
+ material: parsed.material,
|
|
|
+ brand: parsed.brand,
|
|
|
+ };
|
|
|
+ }, [selectedPresetId, cloudSettings?.filament]);
|
|
|
+
|
|
|
+ // For backwards compatibility with the label
|
|
|
+ const selectedMaterial = selectedPresetInfo?.fullName || '';
|
|
|
+
|
|
|
+ const matchingKProfiles = useMemo(() => {
|
|
|
+ if (!kprofilesData?.profiles || !selectedPresetInfo) return [];
|
|
|
+
|
|
|
+ const { fullName, material, brand } = selectedPresetInfo;
|
|
|
+ const upperFullName = fullName.toUpperCase();
|
|
|
+ const upperMaterial = material.toUpperCase();
|
|
|
+ const upperBrand = brand.toUpperCase();
|
|
|
+
|
|
|
+ // Material must be at least 2 chars to avoid false positives
|
|
|
+ if (!upperMaterial || upperMaterial.length < 2) return [];
|
|
|
+
|
|
|
+ // Filter profiles - require brand match if brand is present in selected preset
|
|
|
+ const filtered = kprofilesData.profiles.filter(p => {
|
|
|
+ const profileName = p.name.toUpperCase();
|
|
|
+
|
|
|
+ // If the selected preset has a brand (e.g., "Azurefilm PLA Wood"),
|
|
|
+ // only show profiles that match the brand
|
|
|
+ if (upperBrand) {
|
|
|
+ // Must contain the brand name
|
|
|
+ if (!profileName.includes(upperBrand)) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ // And must contain the material type
|
|
|
+ if (!profileName.includes(upperMaterial)) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+
|
|
|
+ // No brand in selected preset - match on full name or material
|
|
|
+ // Priority 1: Exact match with full name
|
|
|
+ if (profileName.includes(upperFullName)) {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+
|
|
|
+ // Priority 2: Material type match (only when no brand specified)
|
|
|
+ if (profileName.includes(upperMaterial)) {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+
|
|
|
+ // Check for common material aliases
|
|
|
+ const aliases: Record<string, string[]> = {
|
|
|
+ 'NYLON': ['PA', 'PA-CF', 'PA6'],
|
|
|
+ 'PA': ['NYLON'],
|
|
|
+ };
|
|
|
+
|
|
|
+ const materialAliases = aliases[upperMaterial] || [];
|
|
|
+ for (const alias of materialAliases) {
|
|
|
+ if (profileName.includes(alias)) {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return false;
|
|
|
+ });
|
|
|
+
|
|
|
+ // Deduplicate profiles with same name and k_value (multi-nozzle printers have duplicates)
|
|
|
+ // Prefer extruder_id=1 (High Flow) profiles as they're more commonly used on H2D
|
|
|
+ const seen = new Map<string, KProfile>();
|
|
|
+ for (const profile of filtered) {
|
|
|
+ const key = `${profile.name}|${profile.k_value}`;
|
|
|
+ const existing = seen.get(key);
|
|
|
+ if (!existing) {
|
|
|
+ seen.set(key, profile);
|
|
|
+ } else if (profile.extruder_id === 1 && existing.extruder_id === 0) {
|
|
|
+ // Replace extruder_id=0 profile with extruder_id=1 (High Flow) profile
|
|
|
+ seen.set(key, profile);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return Array.from(seen.values());
|
|
|
+ }, [kprofilesData?.profiles, selectedPresetInfo]);
|
|
|
+
|
|
|
+ // Pre-select current profile when modal opens, reset when closes
|
|
|
+ useEffect(() => {
|
|
|
+ if (isOpen && cloudSettings?.filament) {
|
|
|
+ // Try to pre-select current profile based on trayInfoIdx
|
|
|
+ if (slotInfo.trayInfoIdx) {
|
|
|
+ const currentPreset = cloudSettings.filament.find(
|
|
|
+ p => p.setting_id === slotInfo.trayInfoIdx
|
|
|
+ );
|
|
|
+ if (currentPreset) {
|
|
|
+ setSelectedPresetId(currentPreset.setting_id);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else if (!isOpen) {
|
|
|
+ // Reset when modal closes
|
|
|
+ setSelectedPresetId('');
|
|
|
+ setSelectedKProfile(null);
|
|
|
+ setColorHex('');
|
|
|
+ setColorInput('');
|
|
|
+ setSearchQuery('');
|
|
|
+ setShowSuccess(false);
|
|
|
+ }
|
|
|
+ }, [isOpen, cloudSettings?.filament, slotInfo.trayInfoIdx]);
|
|
|
+
|
|
|
+ // Auto-select best matching K profile when preset changes
|
|
|
+ useEffect(() => {
|
|
|
+ if (matchingKProfiles.length > 0) {
|
|
|
+ // Auto-select first matching profile
|
|
|
+ setSelectedKProfile(matchingKProfiles[0]);
|
|
|
+ } else {
|
|
|
+ setSelectedKProfile(null);
|
|
|
+ }
|
|
|
+ }, [selectedPresetId, matchingKProfiles.length]); // Only trigger when preset changes
|
|
|
+
|
|
|
+ // Escape key handler
|
|
|
+ const handleKeyDown = useCallback((e: KeyboardEvent) => {
|
|
|
+ if (e.key === 'Escape') {
|
|
|
+ onClose();
|
|
|
+ }
|
|
|
+ }, [onClose]);
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ if (isOpen) {
|
|
|
+ document.addEventListener('keydown', handleKeyDown);
|
|
|
+ return () => document.removeEventListener('keydown', handleKeyDown);
|
|
|
+ }
|
|
|
+ }, [isOpen, handleKeyDown]);
|
|
|
+
|
|
|
+ if (!isOpen) return null;
|
|
|
+
|
|
|
+ const isLoading = settingsLoading || kprofilesLoading;
|
|
|
+ const canSave = selectedPresetId && !configureMutation.isPending;
|
|
|
+
|
|
|
+ // Get display color (custom or slot default)
|
|
|
+ const displayColor = colorHex || slotInfo.trayColor?.slice(0, 6) || 'FFFFFF';
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className="fixed inset-0 z-50 flex items-center justify-center">
|
|
|
+ {/* Backdrop */}
|
|
|
+ <div
|
|
|
+ className="absolute inset-0 bg-black/60 backdrop-blur-sm"
|
|
|
+ onClick={onClose}
|
|
|
+ />
|
|
|
+
|
|
|
+ {/* Modal */}
|
|
|
+ <div className="relative w-full max-w-lg mx-4 bg-bambu-dark-secondary border border-bambu-dark-tertiary rounded-xl shadow-2xl">
|
|
|
+ {/* Header */}
|
|
|
+ <div className="flex items-center justify-between p-4 border-b border-bambu-dark-tertiary">
|
|
|
+ <div className="flex items-center gap-2">
|
|
|
+ <Settings2 className="w-5 h-5 text-bambu-blue" />
|
|
|
+ <h2 className="text-lg font-semibold text-white">Configure AMS Slot</h2>
|
|
|
+ </div>
|
|
|
+ <button
|
|
|
+ onClick={onClose}
|
|
|
+ className="p-1 text-bambu-gray hover:text-white rounded transition-colors"
|
|
|
+ >
|
|
|
+ <X className="w-5 h-5" />
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* Content */}
|
|
|
+ <div className="p-4 space-y-4 max-h-[60vh] overflow-y-auto">
|
|
|
+ {/* Success overlay */}
|
|
|
+ {showSuccess && (
|
|
|
+ <div className="absolute inset-0 bg-bambu-dark-secondary/95 z-10 flex items-center justify-center rounded-xl">
|
|
|
+ <div className="text-center space-y-3">
|
|
|
+ <CheckCircle2 className="w-16 h-16 text-bambu-green mx-auto" />
|
|
|
+ <p className="text-lg font-semibold text-white">Slot Configured!</p>
|
|
|
+ <p className="text-sm text-bambu-gray">Settings sent to printer</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+
|
|
|
+ {/* Slot info */}
|
|
|
+ <div className="p-3 bg-bambu-dark rounded-lg border border-bambu-dark-tertiary">
|
|
|
+ <p className="text-xs text-bambu-gray mb-1">Configuring slot:</p>
|
|
|
+ <div className="flex items-center gap-2">
|
|
|
+ {slotInfo.trayColor && (
|
|
|
+ <span
|
|
|
+ className="w-4 h-4 rounded-full border border-white/20"
|
|
|
+ style={{ backgroundColor: `#${slotInfo.trayColor.slice(0, 6)}` }}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ <span className="text-white font-medium">
|
|
|
+ {getAmsLabel(slotInfo.amsId, slotInfo.trayCount)} Slot {slotInfo.trayId + 1}
|
|
|
+ </span>
|
|
|
+ {slotInfo.traySubBrands && (
|
|
|
+ <span className="text-bambu-gray">({slotInfo.traySubBrands})</span>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {isLoading ? (
|
|
|
+ <div className="flex justify-center py-8">
|
|
|
+ <Loader2 className="w-6 h-6 text-bambu-green animate-spin" />
|
|
|
+ </div>
|
|
|
+ ) : (
|
|
|
+ <>
|
|
|
+ {/* Filament Profile Select */}
|
|
|
+ <div>
|
|
|
+ <label className="block text-sm text-bambu-gray mb-2">
|
|
|
+ Filament Profile <span className="text-red-400">*</span>
|
|
|
+ </label>
|
|
|
+ <div className="relative">
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ placeholder="Search presets..."
|
|
|
+ value={searchQuery}
|
|
|
+ onChange={(e) => setSearchQuery(e.target.value)}
|
|
|
+ className="w-full px-3 py-2 bg-bambu-dark border border-bambu-dark-tertiary rounded-lg text-white placeholder:text-bambu-gray focus:border-bambu-green focus:outline-none mb-2"
|
|
|
+ />
|
|
|
+ <div className="max-h-48 overflow-y-auto space-y-1">
|
|
|
+ {filteredPresets.length === 0 ? (
|
|
|
+ <p className="text-center py-4 text-bambu-gray">
|
|
|
+ {cloudSettings?.filament?.length === 0
|
|
|
+ ? 'No cloud presets. Login to Bambu Cloud to sync.'
|
|
|
+ : 'No matching presets found.'}
|
|
|
+ </p>
|
|
|
+ ) : (
|
|
|
+ filteredPresets.map((preset) => (
|
|
|
+ <button
|
|
|
+ key={preset.setting_id}
|
|
|
+ onClick={() => setSelectedPresetId(preset.setting_id)}
|
|
|
+ className={`w-full p-2 rounded-lg border text-left transition-colors ${
|
|
|
+ selectedPresetId === preset.setting_id
|
|
|
+ ? 'bg-bambu-green/20 border-bambu-green'
|
|
|
+ : 'bg-bambu-dark border-bambu-dark-tertiary hover:border-bambu-gray'
|
|
|
+ }`}
|
|
|
+ >
|
|
|
+ <div className="flex items-center justify-between">
|
|
|
+ <span className="text-white text-sm truncate">{preset.name}</span>
|
|
|
+ {isUserPreset(preset.setting_id) && (
|
|
|
+ <span className="text-xs px-1.5 py-0.5 rounded bg-bambu-blue/20 text-bambu-blue">
|
|
|
+ Custom
|
|
|
+ </span>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ </button>
|
|
|
+ ))
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* K Profile Select */}
|
|
|
+ <div>
|
|
|
+ <label className="block text-sm text-bambu-gray mb-2">
|
|
|
+ K Profile (Pressure Advance)
|
|
|
+ {selectedMaterial && (
|
|
|
+ <span className="ml-2 text-xs text-bambu-blue">
|
|
|
+ Filtering for: {selectedMaterial}
|
|
|
+ </span>
|
|
|
+ )}
|
|
|
+ </label>
|
|
|
+ {matchingKProfiles.length > 0 ? (
|
|
|
+ <div className="relative">
|
|
|
+ <select
|
|
|
+ value={selectedKProfile?.name || ''}
|
|
|
+ onChange={(e) => {
|
|
|
+ const profile = matchingKProfiles.find(p => p.name === e.target.value);
|
|
|
+ setSelectedKProfile(profile || null);
|
|
|
+ }}
|
|
|
+ className="w-full px-3 py-2 bg-bambu-dark border border-bambu-dark-tertiary rounded-lg text-white focus:border-bambu-green focus:outline-none appearance-none pr-10"
|
|
|
+ >
|
|
|
+ <option value="">No K profile (use default 0.020)</option>
|
|
|
+ {matchingKProfiles.map((profile) => (
|
|
|
+ <option key={`${profile.name}-${profile.extruder_id}`} value={profile.name}>
|
|
|
+ {profile.name} (K={profile.k_value})
|
|
|
+ </option>
|
|
|
+ ))}
|
|
|
+ </select>
|
|
|
+ <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-bambu-gray pointer-events-none" />
|
|
|
+ </div>
|
|
|
+ ) : selectedPresetId ? (
|
|
|
+ <p className="text-sm text-bambu-gray italic py-2">
|
|
|
+ No matching K profiles found. Default K=0.020 will be used.
|
|
|
+ </p>
|
|
|
+ ) : (
|
|
|
+ <span className="inline-block text-xs px-2 py-1 rounded bg-amber-500/20 text-amber-400 border border-amber-500/30">
|
|
|
+ Select a filament profile first
|
|
|
+ </span>
|
|
|
+ )}
|
|
|
+ {selectedKProfile && (
|
|
|
+ <p className="text-xs text-bambu-green mt-1">
|
|
|
+ K={selectedKProfile.k_value} from printer calibration
|
|
|
+ </p>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* Optional: Custom color */}
|
|
|
+ <div>
|
|
|
+ <label className="block text-sm text-bambu-gray mb-2">
|
|
|
+ Custom Color (optional)
|
|
|
+ </label>
|
|
|
+ {/* Quick color buttons */}
|
|
|
+ <div className="flex flex-wrap gap-1.5 mb-2">
|
|
|
+ {QUICK_COLORS_BASIC.map((color) => (
|
|
|
+ <button
|
|
|
+ key={color.hex}
|
|
|
+ onClick={() => {
|
|
|
+ setColorHex(color.hex);
|
|
|
+ setColorInput(color.name);
|
|
|
+ }}
|
|
|
+ className={`w-7 h-7 rounded-md border-2 transition-all ${
|
|
|
+ colorHex === color.hex
|
|
|
+ ? 'border-bambu-green scale-110'
|
|
|
+ : 'border-white/20 hover:border-white/40'
|
|
|
+ }`}
|
|
|
+ style={{ backgroundColor: `#${color.hex}` }}
|
|
|
+ title={color.name}
|
|
|
+ />
|
|
|
+ ))}
|
|
|
+ <button
|
|
|
+ onClick={() => setShowExtendedColors(!showExtendedColors)}
|
|
|
+ className="w-7 h-7 rounded-md border-2 border-white/20 hover:border-white/40 flex items-center justify-center text-white/60 hover:text-white/80 transition-all text-xs"
|
|
|
+ title={showExtendedColors ? 'Show less colors' : 'Show more colors'}
|
|
|
+ >
|
|
|
+ {showExtendedColors ? '−' : '+'}
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ {/* Extended colors (collapsible) */}
|
|
|
+ {showExtendedColors && (
|
|
|
+ <div className="flex flex-wrap gap-1.5 mb-2">
|
|
|
+ {QUICK_COLORS_EXTENDED.map((color) => (
|
|
|
+ <button
|
|
|
+ key={color.hex}
|
|
|
+ onClick={() => {
|
|
|
+ setColorHex(color.hex);
|
|
|
+ setColorInput(color.name);
|
|
|
+ }}
|
|
|
+ className={`w-7 h-7 rounded-md border-2 transition-all ${
|
|
|
+ colorHex === color.hex
|
|
|
+ ? 'border-bambu-green scale-110'
|
|
|
+ : 'border-white/20 hover:border-white/40'
|
|
|
+ }`}
|
|
|
+ style={{ backgroundColor: `#${color.hex}` }}
|
|
|
+ title={color.name}
|
|
|
+ />
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ {/* Color input: name or hex */}
|
|
|
+ <div className="flex gap-2 items-center">
|
|
|
+ <div
|
|
|
+ className="w-10 h-10 rounded-lg border-2 border-white/20 flex-shrink-0"
|
|
|
+ style={{ backgroundColor: `#${displayColor}` }}
|
|
|
+ />
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ placeholder="Color name or hex (e.g., brown, FF8800)"
|
|
|
+ value={colorInput}
|
|
|
+ onChange={(e) => {
|
|
|
+ const input = e.target.value;
|
|
|
+ setColorInput(input);
|
|
|
+
|
|
|
+ // Try to parse as color name first
|
|
|
+ const nameHex = colorNameToHex(input);
|
|
|
+ if (nameHex) {
|
|
|
+ setColorHex(nameHex);
|
|
|
+ } else {
|
|
|
+ // Try to parse as hex code
|
|
|
+ const cleaned = input.replace(/[^0-9A-Fa-f]/g, '').toUpperCase();
|
|
|
+ if (cleaned.length === 6) {
|
|
|
+ setColorHex(cleaned);
|
|
|
+ } else if (cleaned.length === 3) {
|
|
|
+ // Expand shorthand hex (e.g., F00 -> FF0000)
|
|
|
+ setColorHex(cleaned.split('').map(c => c + c).join(''));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ className="flex-1 px-3 py-2 bg-bambu-dark border border-bambu-dark-tertiary rounded-lg text-white placeholder:text-bambu-gray focus:border-bambu-green focus:outline-none text-sm"
|
|
|
+ />
|
|
|
+ {colorHex && (
|
|
|
+ <button
|
|
|
+ onClick={() => {
|
|
|
+ setColorHex('');
|
|
|
+ setColorInput('');
|
|
|
+ }}
|
|
|
+ className="px-2 py-1 text-xs text-bambu-gray hover:text-white bg-bambu-dark-tertiary rounded"
|
|
|
+ title="Clear custom color"
|
|
|
+ >
|
|
|
+ Clear
|
|
|
+ </button>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ {colorHex && (
|
|
|
+ <p className="text-xs text-bambu-gray mt-1.5">
|
|
|
+ Hex: #{colorHex}
|
|
|
+ </p>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ </>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* Footer */}
|
|
|
+ <div className="flex justify-between p-4 border-t border-bambu-dark-tertiary">
|
|
|
+ {/* Reset button on the left */}
|
|
|
+ <Button
|
|
|
+ variant="secondary"
|
|
|
+ onClick={() => resetMutation.mutate()}
|
|
|
+ disabled={resetMutation.isPending || configureMutation.isPending}
|
|
|
+ className="text-red-400 hover:text-red-300 hover:bg-red-500/10"
|
|
|
+ >
|
|
|
+ {resetMutation.isPending ? (
|
|
|
+ <>
|
|
|
+ <Loader2 className="w-4 h-4 animate-spin" />
|
|
|
+ Resetting...
|
|
|
+ </>
|
|
|
+ ) : (
|
|
|
+ <>
|
|
|
+ <RotateCcw className="w-4 h-4" />
|
|
|
+ Reset Slot
|
|
|
+ </>
|
|
|
+ )}
|
|
|
+ </Button>
|
|
|
+ {/* Cancel and Configure buttons on the right */}
|
|
|
+ <div className="flex gap-2">
|
|
|
+ <Button variant="secondary" onClick={onClose}>
|
|
|
+ Cancel
|
|
|
+ </Button>
|
|
|
+ <Button
|
|
|
+ onClick={() => configureMutation.mutate()}
|
|
|
+ disabled={!canSave}
|
|
|
+ >
|
|
|
+ {configureMutation.isPending ? (
|
|
|
+ <>
|
|
|
+ <Loader2 className="w-4 h-4 animate-spin" />
|
|
|
+ Configuring...
|
|
|
+ </>
|
|
|
+ ) : (
|
|
|
+ <>
|
|
|
+ <Settings2 className="w-4 h-4" />
|
|
|
+ Configure Slot
|
|
|
+ </>
|
|
|
+ )}
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* Error */}
|
|
|
+ {(configureMutation.isError || resetMutation.isError) && (
|
|
|
+ <div className="mx-4 mb-4 p-2 bg-red-500/20 border border-red-500/50 rounded text-sm text-red-400">
|
|
|
+ {(configureMutation.error as Error)?.message || (resetMutation.error as Error)?.message}
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+}
|
maziggy