Update material finish options and spool-only configurations

- Add Metal and Silk+ finishes as spool-only for PLA
- Add PPA material with CF finish (spool-only, black color only)
- Add PA6 material with CF and GF finishes (spool-only)
- Add FR finish option for PC material (spool-only)
- Disable refill price field when refill option is disabled
- Add color filtering for PPA CF to show only black colors
This commit is contained in:
DaX
2025-07-13 14:20:13 +02:00
parent 18a4cd1e34
commit d45f984769

View File

@@ -40,8 +40,17 @@ const isRefillOnly = (color: string, finish?: string): boolean => {
};
// Helper function to check if a filament is spool-only
const isSpoolOnly = (finish?: string): boolean => {
return finish === 'Translucent';
const isSpoolOnly = (finish?: string, type?: string): boolean => {
return finish === 'Translucent' || finish === 'Metal' || finish === 'Silk+' || (type === 'PPA' && finish === 'CF') || type === 'PA6' || type === 'PC';
};
// Helper function to filter colors based on material and finish
const getFilteredColors = (colors: Array<{id: string, name: string, hex: string, cena_refill?: number, cena_spulna?: number}>, type?: string, finish?: string) => {
// PPA CF only has black color
if (type === 'PPA' && finish === 'CF') {
return colors.filter(color => color.name.toLowerCase() === 'black');
}
return colors;
};
interface FilamentWithId extends Filament {
@@ -57,9 +66,11 @@ const FINISH_OPTIONS_BY_TYPE: Record<string, string[]> = {
'PLA': ['85A', '90A', '95A HF', 'Aero', 'Basic', 'Basic Gradient', 'CF', 'FR', 'Galaxy', 'GF', 'Glow', 'HF', 'Marble', 'Matte', 'Metal', 'Silk Multi-Color', 'Silk+', 'Sparkle', 'Translucent', 'Wood'],
'TPU': ['85A', '90A', '95A HF'],
'PETG': ['Basic', 'CF', 'FR', 'HF', 'Translucent'],
'PC': ['CF', 'Bez Finisha'],
'PC': ['CF', 'FR', 'Bez Finisha'],
'ASA': ['Bez Finisha'],
'PA': ['CF', 'GF', 'Bez Finisha'],
'PA6': ['CF', 'GF'],
'PPA': ['CF'],
'PVA': ['Bez Finisha'],
'HIPS': ['Bez Finisha']
};
@@ -669,7 +680,7 @@ function FilamentForm({
finish: filament.finish || (filament.id ? '' : 'Basic'), // Default to Basic for new filaments
boja: filament.boja || '',
boja_hex: filament.boja_hex || '',
refill: isSpoolOnly(filament.finish) ? 0 : (filament.refill || 0), // Store as number
refill: isSpoolOnly(filament.finish, filament.tip) ? 0 : (filament.refill || 0), // Store as number
spulna: isRefillOnly(filament.boja || '', filament.finish) ? 0 : (filament.spulna || 0), // Store as number
kolicina: filament.kolicina || 0, // Default to 0, stored as number
cena: '', // Price is now determined by color selection
@@ -722,10 +733,15 @@ function FilamentForm({
// If changing filament type, reset finish if it's not compatible
const newTypeFinishes = FINISH_OPTIONS_BY_TYPE[value] || [];
const resetFinish = !newTypeFinishes.includes(formData.finish);
const spoolOnly = isSpoolOnly(formData.finish, value);
// If changing to PPA with CF finish and current color is not black, reset color
const needsColorReset = value === 'PPA' && formData.finish === 'CF' && formData.boja.toLowerCase() !== 'black';
setFormData({
...formData,
[name]: value,
...(resetFinish ? { finish: '' } : {})
...(resetFinish ? { finish: '' } : {}),
...(spoolOnly ? { refill: 0 } : {}),
...(needsColorReset ? { boja: '' } : {})
});
} else if (name === 'boja') {
// If changing to a refill-only color, reset spulna to 0
@@ -738,12 +754,15 @@ function FilamentForm({
} else if (name === 'finish') {
// If changing to Translucent finish, enable spool option and disable refill
const refillOnly = isRefillOnly(formData.boja, value);
const spoolOnly = isSpoolOnly(value);
const spoolOnly = isSpoolOnly(value, formData.tip);
// If changing to PPA CF and current color is not black, reset color
const needsColorReset = formData.tip === 'PPA' && value === 'CF' && formData.boja.toLowerCase() !== 'black';
setFormData({
...formData,
[name]: value,
...(refillOnly ? { spulna: 0 } : {}),
...(spoolOnly ? { refill: 0 } : {})
...(spoolOnly ? { refill: 0 } : {}),
...(needsColorReset ? { boja: '' } : {})
});
} else {
setFormData({
@@ -876,7 +895,7 @@ function FilamentForm({
className="custom-select w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<option value="">Izaberite boju</option>
{availableColors.map(color => (
{getFilteredColors(availableColors, formData.tip, formData.finish).map(color => (
<option key={color.id} value={color.name}>
{color.name}
</option>
@@ -916,7 +935,12 @@ function FilamentForm({
min="0"
step="1"
placeholder="3499"
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-green-600 dark:text-green-400 font-bold focus:outline-none focus:ring-2 focus:ring-green-500"
disabled={isSpoolOnly(formData.finish, formData.tip)}
className={`w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md ${
isSpoolOnly(formData.finish, formData.tip)
? 'bg-gray-100 dark:bg-gray-600 cursor-not-allowed'
: 'bg-white dark:bg-gray-700'
} text-green-600 dark:text-green-400 font-bold focus:outline-none focus:ring-2 focus:ring-green-500`}
/>
</div>
@@ -945,7 +969,7 @@ function FilamentForm({
<div>
<label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">
Refill
{isSpoolOnly(formData.finish) && (
{isSpoolOnly(formData.finish, formData.tip) && (
<span className="text-xs text-gray-500 dark:text-gray-400 ml-2">(samo spulna postoji)</span>
)}
</label>
@@ -957,9 +981,9 @@ function FilamentForm({
min="0"
step="1"
placeholder="0"
disabled={isSpoolOnly(formData.finish)}
disabled={isSpoolOnly(formData.finish, formData.tip)}
className={`w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md ${
isSpoolOnly(formData.finish)
isSpoolOnly(formData.finish, formData.tip)
? 'bg-gray-100 dark:bg-gray-600 cursor-not-allowed'
: 'bg-white dark:bg-gray-700'
} text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500`}