DaX/Filamenteka
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove brand functionality and update Bambu Lab colors

Browse Source 
- Remove brand field from entire codebase (frontend, backend, database)
- Update Bambu Lab colors to official list with correct hex values
- Clean up unused code and type definitions
- Add database migration to drop brand column
- Update search and filters to exclude brand references
- Ensure data persistence across all application layers

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: DaX <noreply@anthropic.com>
This commit is contained in:
DaX
2025-06-23 22:54:47 +02:00
parent 808ca077fa
commit e8f9a6c6e3
10 changed files with 199 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
__tests__/ui-features.test.ts
View File

@@ -57,7 +57,7 @@ describe('UI Features Tests', () => {
const dashboardContent = readFileSync(adminDashboardPath, 'utf-8'); const dashboardContent = readFileSync(adminDashboardPath, 'utf-8');
// Check for admin header // Check for admin header
expect(dashboardContent).toContain('Admin Dashboard'); expect(dashboardContent).toContain('Admin');
expect(dashboardContent).toContain('Nazad na sajt'); expect(dashboardContent).toContain('Nazad na sajt');
expect(dashboardContent).toContain('Odjava'); expect(dashboardContent).toContain('Odjava');
}); });

5
api/migrate.js
View File

@@ -61,10 +61,9 @@ async function migrate() {
// Import filaments // Import filaments
for (const item of legacyData) { for (const item of legacyData) {
await pool.query( await pool.query(
`INSERT INTO filaments (brand, tip, finish, boja, boja_hex, refill, vakum, otvoreno, kolicina, cena) `INSERT INTO filaments (tip, finish, boja, boja_hex, refill, vakum, otvoreno, kolicina, cena)
VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10)`, VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9)`,
[ [
item.brand,
item.tip, item.tip,
item.finish, item.finish,
item.boja, item.boja,

18
api/server.js
View File

@@ -132,13 +132,13 @@ app.get('/api/filaments', async (req, res) => {
}); });
app.post('/api/filaments', authenticateToken, async (req, res) => { app.post('/api/filaments', authenticateToken, async (req, res) => {
const { brand, tip, finish, boja, boja_hex, refill, vakum, otvoreno, kolicina, cena } = req.body; const { tip, finish, boja, boja_hex, refill, vakum, otvoreno, kolicina, cena } = req.body;
try { try {
const result = await pool.query( const result = await pool.query(
`INSERT INTO filaments (brand, tip, finish, boja, boja_hex, refill, vakum, otvoreno, kolicina, cena) `INSERT INTO filaments (tip, finish, boja, boja_hex, refill, vakum, otvoreno, kolicina, cena)
VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10) RETURNING *`, VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9) RETURNING *`,
[brand, tip, finish, boja, boja_hex, refill, vakum, otvoreno, kolicina || 1, cena] [tip, finish, boja, boja_hex, refill, vakum, otvoreno, kolicina || 1, cena]
); );
res.json(result.rows[0]); res.json(result.rows[0]);
} catch (error) { } catch (error) {
@@ -149,16 +149,16 @@ app.post('/api/filaments', authenticateToken, async (req, res) => {
app.put('/api/filaments/:id', authenticateToken, async (req, res) => { app.put('/api/filaments/:id', authenticateToken, async (req, res) => {
const { id } = req.params; const { id } = req.params;
const { brand, tip, finish, boja, boja_hex, refill, vakum, otvoreno, kolicina, cena } = req.body; const { tip, finish, boja, boja_hex, refill, vakum, otvoreno, kolicina, cena } = req.body;
try { try {
const result = await pool.query( const result = await pool.query(
`UPDATE filaments `UPDATE filaments
SET brand = $1, tip = $2, finish = $3, boja = $4, boja_hex = $5, SET tip = $1, finish = $2, boja = $3, boja_hex = $4,
refill = $6, vakum = $7, otvoreno = $8, kolicina = $9, cena = $10, refill = $5, vakum = $6, otvoreno = $7, kolicina = $8, cena = $9,
updated_at = CURRENT_TIMESTAMP updated_at = CURRENT_TIMESTAMP
WHERE id = $11 RETURNING *`, WHERE id = $10 RETURNING *`,
[brand, tip, finish, boja, boja_hex, refill, vakum, otvoreno, kolicina || 1, cena, id] [tip, finish, boja, boja_hex, refill, vakum, otvoreno, kolicina || 1, cena, id]
); );
res.json(result.rows[0]); res.json(result.rows[0]);
} catch (error) { } catch (error) {

89
app/upadaj/dashboard/page.tsx
View File

@@ -156,7 +156,7 @@ export default function AdminDashboard() {
<header className="bg-white dark:bg-gray-800 shadow transition-colors"> <header className="bg-white dark:bg-gray-800 shadow transition-colors">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 lg:py-6"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 lg:py-6">
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4"> <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
<h1 className="text-2xl lg:text-3xl font-bold text-gray-900 dark:text-white">Admin Dashboard</h1> <h1 className="text-2xl lg:text-3xl font-bold text-gray-900 dark:text-white">Admin</h1>
<div className="flex flex-wrap gap-2 sm:gap-4 w-full sm:w-auto"> <div className="flex flex-wrap gap-2 sm:gap-4 w-full sm:w-auto">
{!showAddForm && !editingFilament && ( {!showAddForm && !editingFilament && (
<button <button
@@ -335,7 +335,6 @@ function FilamentForm({
onCancel: () => void onCancel: () => void
}) { }) {
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
brand: filament.brand || 'Bambu Lab', // Use existing brand or default to Bambu Lab
tip: filament.tip || '', tip: filament.tip || '',
finish: filament.finish || '', finish: filament.finish || '',
boja: filament.boja || '', boja: filament.boja || '',
@@ -380,7 +379,6 @@ function FilamentForm({
// Update form when filament prop changes // Update form when filament prop changes
useEffect(() => { useEffect(() => {
setFormData({ setFormData({
brand: filament.brand || '',
tip: filament.tip || '', tip: filament.tip || '',
finish: filament.finish || '', finish: filament.finish || '',
boja: filament.boja || '', boja: filament.boja || '',
@@ -389,7 +387,7 @@ function FilamentForm({
vakum: filament.vakum || '', vakum: filament.vakum || '',
otvoreno: filament.otvoreno || '', otvoreno: filament.otvoreno || '',
kolicina: filament.kolicina || '', kolicina: filament.kolicina || '',
cena: filament.cena || '', cena: filament.cena || (filament.id ? '' : '3999'), // Default price for new filaments
}); });
}, [filament]); }, [filament]);
@@ -448,9 +446,16 @@ 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" 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="">Izaberi tip</option> <option value="">Izaberi tip</option>
<option value="PLA">PLA</option>
<option value="PETG">PETG</option>
<option value="ABS">ABS</option> <option value="ABS">ABS</option>
<option value="ASA">ASA</option>
<option value="PA6">PA6</option>
<option value="PAHT">PAHT</option>
<option value="PC">PC</option>
<option value="PET">PET</option>
<option value="PETG">PETG</option>
<option value="PLA">PLA</option>
<option value="PPA">PPA</option>
<option value="PPS">PPS</option>
<option value="TPU">TPU</option> <option value="TPU">TPU</option>
</select> </select>
</div> </div>
@@ -465,13 +470,26 @@ 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" 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="">Izaberi finish</option> <option value="">Izaberi finish</option>
<option value="85A">85A</option>
<option value="90A">90A</option>
<option value="95A HF">95A HF</option>
<option value="Aero">Aero</option>
<option value="Basic">Basic</option> <option value="Basic">Basic</option>
<option value="Matte">Matte</option> <option value="Basic Gradient">Basic Gradient</option>
<option value="Silk">Silk</option> <option value="CF">CF</option>
<option value="Metal">Metal</option> <option value="FR">FR</option>
<option value="Sparkle">Sparkle</option> <option value="Galaxy">Galaxy</option>
<option value="GF">GF</option>
<option value="Glow">Glow</option> <option value="Glow">Glow</option>
<option value="Transparent">Transparent</option> <option value="HF">HF</option>
<option value="Marble">Marble</option>
<option value="Matte">Matte</option>
<option value="Metal">Metal</option>
<option value="Silk Multi-Color">Silk Multi-Color</option>
<option value="Silk+">Silk+</option>
<option value="Sparkle">Sparkle</option>
<option value="Translucent">Translucent</option>
<option value="Wood">Wood</option>
</select> </select>
</div> </div>
@@ -484,12 +502,10 @@ function FilamentForm({
const selectedColorName = e.target.value; const selectedColorName = e.target.value;
let hexValue = formData.bojaHex; let hexValue = formData.bojaHex;
// Only use Bambu Lab colors if BambuLab brand is selected // Use Bambu Lab colors
if (formData.brand === 'Bambu Lab') { const bambuHex = getColorHex(selectedColorName);
const bambuHex = getColorHex(selectedColorName); if (bambuHex !== "#000000") {
if (bambuHex !== "#000000") { hexValue = bambuHex;
hexValue = bambuHex;
}
} }
// Check available colors from database // Check available colors from database
@@ -508,8 +524,8 @@ 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" 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> <option value="">Izaberite boju</option>
{/* Show Bambu Lab colors only when BambuLab brand is selected */} {/* Show Bambu Lab colors based on finish */}
{formData.brand === 'Bambu Lab' && formData.finish && colorsByFinish[formData.finish as keyof typeof colorsByFinish] && ( {formData.finish && colorsByFinish[formData.finish as keyof typeof colorsByFinish] && (
<optgroup label={`Bambu Lab ${formData.finish} boje`}> <optgroup label={`Bambu Lab ${formData.finish} boje`}>
{colorsByFinish[formData.finish as keyof typeof colorsByFinish].map(colorName => ( {colorsByFinish[formData.finish as keyof typeof colorsByFinish].map(colorName => (
<option key={`bambu-${colorName}`} value={colorName}> <option key={`bambu-${colorName}`} value={colorName}>
@@ -520,7 +536,7 @@ function FilamentForm({
)} )}
{/* Show all available colors from database */} {/* Show all available colors from database */}
{availableColors.length > 0 && ( {availableColors.length > 0 && (
<optgroup label={formData.brand === 'Bambu Lab' ? 'Ostale boje' : 'Dostupne boje'}> <optgroup label='Ostale boje'>
{availableColors.map(color => ( {availableColors.map(color => (
<option key={color.id} value={color.name}> <option key={color.id} value={color.name}>
{color.name} {color.name}
@@ -542,7 +558,7 @@ function FilamentForm({
name="bojaHex" name="bojaHex"
value={formData.bojaHex || '#000000'} value={formData.bojaHex || '#000000'}
onChange={handleChange} onChange={handleChange}
disabled={!!(formData.brand === 'Bambu Lab' && formData.boja && formData.boja !== 'custom' && getColorHex(formData.boja) !== "#000000")} disabled={!!(formData.boja && formData.boja !== 'custom' && getColorHex(formData.boja) !== "#000000")}
className="w-full h-10 px-1 py-1 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed" className="w-full h-10 px-1 py-1 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
/> />
{formData.bojaHex && ( {formData.bojaHex && (
@@ -565,22 +581,20 @@ function FilamentForm({
/> />
</div> </div>
{/* Cena and Checkboxes on same line */} <div>
<div className="md:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-4"> <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Cena</label>
<div> <input
<label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Cena</label> type="text"
<input name="cena"
type="text" value={formData.cena}
name="cena" onChange={handleChange}
value={formData.cena} placeholder="npr. 2500"
onChange={handleChange} className="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"
placeholder="npr. 2500" />
className="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" </div>
/>
</div> {/* Checkboxes grouped together horizontally */}
<div className="md:col-span-2 flex items-end gap-6">
{/* Checkboxes grouped together horizontally */}
<div className="flex items-end gap-6">
<label className="flex items-center space-x-2 text-sm font-medium text-gray-700 dark:text-gray-300 cursor-pointer"> <label className="flex items-center space-x-2 text-sm font-medium text-gray-700 dark:text-gray-300 cursor-pointer">
<input <input
type="checkbox" type="checkbox"
@@ -613,7 +627,6 @@ function FilamentForm({
/> />
<span>Otvoreno</span> <span>Otvoreno</span>
</label> </label>
</div>
</div> </div>
<div className="md:col-span-2 flex justify-end gap-4 mt-4"> <div className="md:col-span-2 flex justify-end gap-4 mt-4">

2
database/migrations/004_remove_brand_column.sql Normal file
View File

@@ -0,0 +1,2 @@
-- Migration to remove brand column from filaments table
ALTER TABLE filaments DROP COLUMN IF EXISTS brand CASCADE;

2
database/schema.sql
View File

@@ -15,7 +15,6 @@ CREATE TABLE colors (
-- Filaments table -- Filaments table
CREATE TABLE filaments ( CREATE TABLE filaments (
id UUID PRIMARY KEY DEFAULT uuid_generate_v4(), id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
brand VARCHAR(100) NOT NULL,
tip VARCHAR(50) NOT NULL, tip VARCHAR(50) NOT NULL,
finish VARCHAR(50) NOT NULL, finish VARCHAR(50) NOT NULL,
boja VARCHAR(100) NOT NULL, boja VARCHAR(100) NOT NULL,
@@ -31,7 +30,6 @@ CREATE TABLE filaments (
); );
-- Create indexes for better performance -- Create indexes for better performance
CREATE INDEX idx_filaments_brand ON filaments(brand);
CREATE INDEX idx_filaments_tip ON filaments(tip); CREATE INDEX idx_filaments_tip ON filaments(tip);
CREATE INDEX idx_filaments_boja ON filaments(boja); CREATE INDEX idx_filaments_boja ON filaments(boja);
CREATE INDEX idx_filaments_created_at ON filaments(created_at); CREATE INDEX idx_filaments_created_at ON filaments(created_at);

4
src/components/FilamentTableV2.tsx
View File

@@ -45,7 +45,6 @@ export const FilamentTableV2: React.FC<FilamentTableV2Props> = ({ filaments, loa
return { return {
id: legacy.id || `legacy-${Math.random().toString(36).substr(2, 9)}`, id: legacy.id || `legacy-${Math.random().toString(36).substr(2, 9)}`,
brand: legacy.brand,
type: legacy.tip as any || 'PLA', type: legacy.tip as any || 'PLA',
material, material,
color: { name: legacy.boja, hex: legacy.bojaHex || legacy.boja_hex || '#000000' }, color: { name: legacy.boja, hex: legacy.bojaHex || legacy.boja_hex || '#000000' },
@@ -91,7 +90,6 @@ export const FilamentTableV2: React.FC<FilamentTableV2Props> = ({ filaments, loa
// Search filter // Search filter
const searchLower = searchTerm.toLowerCase(); const searchLower = searchTerm.toLowerCase();
const matchesSearch = const matchesSearch =
filament.brand.toLowerCase().includes(searchLower) ||
filament.material.base.toLowerCase().includes(searchLower) || filament.material.base.toLowerCase().includes(searchLower) ||
(filament.material.modifier?.toLowerCase().includes(searchLower)) || (filament.material.modifier?.toLowerCase().includes(searchLower)) ||
filament.color.name.toLowerCase().includes(searchLower) || filament.color.name.toLowerCase().includes(searchLower) ||
@@ -152,7 +150,7 @@ export const FilamentTableV2: React.FC<FilamentTableV2Props> = ({ filaments, loa
<div className="relative"> <div className="relative">
<input <input
type="text" type="text"
placeholder="Pretraži po brendu, materijalu, boji..." placeholder="Pretraži po materijalu, boji..."
value={searchTerm} value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)} onChange={(e) => setSearchTerm(e.target.value)}
className="w-full px-4 py-2 pl-10 pr-4 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-blue-500" className="w-full px-4 py-2 pl-10 pr-4 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-blue-500"

180
src/data/bambuLabColors.ts
View File

@@ -4,42 +4,142 @@ export interface ColorMapping {
} }
export const bambuLabColors: Record<string, ColorMapping> = { export const bambuLabColors: Record<string, ColorMapping> = {
// PLA Basic Colors 'Alpine Green Sparkle': { hex: '#3F5443' },
'Mistletoe Green': { hex: '#4F6359' }, 'Apple Green': { hex: '#C6E188' },
'Indigo Purple': { hex: '#482960' }, 'Arctic Whisper': { hex: '#ECF7F8' },
'Ash Grey': { hex: '#9B9EA0' },
'Aurora Purple': { hex: '#285BB7' },
'Azure': { hex: '#489FDF' },
'Baby Blue': { hex: '#AEC3ED' },
'Bambu Green': { hex: '#00AE42' },
'Beige': { hex: '#F7E6DE' },
'Black': { hex: '#000000' }, 'Black': { hex: '#000000' },
'Jade White': { hex: '#F5F5F5' }, 'Black Walnut': { hex: '#4D4229' },
'Gray': { hex: '#8C9091' }, 'Blaze': { hex: '#E78390' },
'Grey': { hex: '#8C9091' }, 'Blue': { hex: '#0A2989' },
'Red': { hex: '#C33F45' }, 'Blue Grey': { hex: '#5B6579' },
'Hot Pink': { hex: '#F5547C' }, 'Blue Hawaii': { hex: '#739FE6' },
'Blueberry Bubblegum': { hex: '#BADCF4' },
'Bone White': { hex: '#C8C5B6' },
'Bright Green': { hex: '#BDCF00' },
'Brick Red': { hex: '#9F332A' },
'Bronze': { hex: '#847D48' },
'Brown': { hex: '#9D432C' },
'Burgundy Red': { hex: '#951E23' },
'Candy Green': { hex: '#408619' },
'Candy Red': { hex: '#BB3A2E' },
'Caramel': { hex: '#A4845C' },
'Champagne': { hex: '#EBD0B1' },
'Charcoal': { hex: '#000000' },
'Cherry Pink': { hex: '#E9B6CC' },
'Chocolate': { hex: '#4A3729' },
'Clay Brown': { hex: '#8E621A' },
'Clear': { hex: '#FAFAFA' },
'Clear Black': { hex: '#5A5161' },
'Cobalt Blue': { hex: '#0055B8' },
'Cobalt Blue Metallic': { hex: '#39699E' },
'Cocoa Brown': { hex: '#6F5034' }, 'Cocoa Brown': { hex: '#6F5034' },
'Copper Brown Metallic': { hex: '#AA6443' },
'Cotton Candy Cloud': { hex: '#E9E2EC' },
'Cream': { hex: '#F3E0B8' },
'Crimson Red Sparkle': { hex: '#792B36' },
'Cyan': { hex: '#0086D6' },
'Dark Blue': { hex: '#042F56' },
'Dark Brown': { hex: '#7D6556' },
'Dark Chocolate': { hex: '#4A3729' },
'Dark Gray': { hex: '#555555' },
'Dark Green': { hex: '#68724D' },
'Dark Red': { hex: '#BB3D43' },
'Dawn Radiance': { hex: '#C472A1' },
'Desert Tan': { hex: '#E8DBB7' },
'Dusk Glare': { hex: '#F6B790' },
'Forest Green': { hex: '#415520' },
'Frozen': { hex: '#A6DEF3' },
'Gilded Rose': { hex: '#ED982C' },
'Glow Blue': { hex: '#7AC0E9' },
'Glow Green': { hex: '#A1FFAC' },
'Glow Orange': { hex: '#FF9D5B' },
'Glow Pink': { hex: '#F17B8F' },
'Glow Yellow': { hex: '#F8FF80' },
'Gold': { hex: '#E4BD68' },
'Gray': { hex: '#8E9089' },
'Green': { hex: '#3B665E' },
'Hot Pink': { hex: '#F5547D' },
'Ice Blue': { hex: '#A3D8E1' },
'Indigo Blue': { hex: '#324585' },
'Indigo Purple': { hex: '#482A60' },
'Iridium Gold Metallic': { hex: '#B39B84' },
'Iris Purple': { hex: '#69398E' },
'Ivory White': { hex: '#FFFFFF' },
'Jade White': { hex: '#FFFFFF' },
'Jeans Blue': { hex: '#6E88BC' },
'Lake Blue': { hex: '#4672E4' },
'Latte Brown': { hex: '#D3B7A7' },
'Lava Gray': { hex: '#4D5054' },
'Lavender': { hex: '#B5AAD5' },
'Lemon Yellow': { hex: '#F7D959' },
'Light Blue': { hex: '#61B0FF' },
'Light Cyan': { hex: '#B9E3DF' },
'Light Gray': { hex: '#D0D2D4' },
'Light Jade': { hex: '#A4D6AD' },
'Lilac Purple': { hex: '#AE96D4' },
'Lime': { hex: '#C5ED48' },
'Lime Green': { hex: '#8EE43D' },
'Magenta': { hex: '#EC008C' },
'Malachite Green': { hex: '#16B08E' },
'Mandarin Orange': { hex: '#F99963' },
'Marine Blue': { hex: '#0078BF' },
'Maroon Red': { hex: '#0A2989' },
'Matcha Green': { hex: '#5C9748' },
'Mellow Yellow': { hex: '#EFDCAA' },
'Midnight Blaze': { hex: '#0047BB' },
'Mint': { hex: '#A5DAB7' },
'Mint Lime': { hex: '#BAF382' },
'Mistletoe Green': { hex: '#3F8E43' },
'Nardo Gray': { hex: '#747474' },
'Navy Blue': { hex: '#0C2340' },
'Nebulae': { hex: '#424379' },
'Neon City': { hex: '#0047BB' },
'Neon Green': { hex: '#ABFF1E' },
'Neon Orange': { hex: '#F68A1B' },
'Ochre Yellow': { hex: '#BC8B39' },
'Ocean to Meadow': { hex: '#A1E4CA' },
'Olive': { hex: '#748C45' },
'Onyx Black Sparkle': { hex: '#2D2B28' },
'Orange': { hex: '#FF6A13' },
'Oxide Green Metallic': { hex: '#1D7C6A' },
'Peanut Brown': { hex: '#7E5A1F' },
'Pink': { hex: '#F55A74' },
'Pink Citrus': { hex: '#F8C4BC' },
'Plum': { hex: '#851A52' },
'Pumpkin Orange': { hex: '#FF8E16' },
'Purple': { hex: '#5E43B7' },
'Red': { hex: '#C12E1F' },
'Red Granite': { hex: '#AD4E38' },
'Rose Gold': { hex: '#B29593' },
'Rosewood': { hex: '#472A22' },
'Royal Blue': { hex: '#2842AD' },
'Royal Purple Sparkle': { hex: '#483D8B' },
'Sakura Pink': { hex: '#E8AFCF' },
'Scarlet Red': { hex: '#DE4343' },
'Silver': { hex: '#A6A9AA' },
'Sky Blue': { hex: '#73B2E5' },
'Slate Gray Sparkle': { hex: '#8E9089' },
'Solar Breeze': { hex: '#F3D9D5' },
'South Beach': { hex: '#468791' },
'Sunflower Yellow': { hex: '#FEC601' },
'Tangerine Yellow': { hex: '#FFC72C' },
'Teal': { hex: '#77EDD7' },
'Terracotta': { hex: '#A25A37' },
'Titan Gray': { hex: '#606367' },
'Transparent': { hex: '#FFFFFF' },
'Turquoise': { hex: '#00B1B7' },
'Velvet Eclipse': { hex: '#000000' },
'Violet Purple': { hex: '#583061' },
'White': { hex: '#FFFFFF' }, 'White': { hex: '#FFFFFF' },
'Cotton Candy Cloud': { hex: ['#E7C1D5', '#8EC9E9'], isGradient: true }, 'White Marble': { hex: '#F7F3F0' },
'Sunflower Yellow': { hex: '#FEC600' }, 'White Oak': { hex: '#D2CCA2' },
'Yellow': { hex: '#FFD700' }, 'Yellow': { hex: '#F4EE2A' },
'Magenta': { hex: '#FF00FF' },
'Beige': { hex: '#F5DEB3' },
'Cyan': { hex: '#00FFFF' },
// PLA Matte Colors
'Scarlet Red': { hex: '#FF2400' },
'Mandarin Orange': { hex: '#FF8C00' },
'Marine Blue': { hex: '#000080' },
'Charcoal': { hex: '#36454F' },
'Ivory White': { hex: '#FFFFF0' },
// Additional colors from filamentcolors.xyz
'Orange': { hex: '#FF7146' },
'Blue': { hex: '#4F9CCC' },
'Green': { hex: '#4F6359' },
'Dark Green': { hex: '#656A4D' },
'Alpine Green': { hex: '#4F6359' },
'Dark Gray': { hex: '#616364' },
'Dark Grey': { hex: '#616364' },
'Blue Gray': { hex: '#647988' },
'Blue Grey': { hex: '#647988' },
'Translucent Orange': { hex: '#EF8E5B' },
// Default fallback // Default fallback
'Unknown': { hex: '#CCCCCC' } 'Unknown': { hex: '#CCCCCC' }
@@ -84,18 +184,4 @@ export function getColorStyle(colorMapping: ColorMapping): React.CSSProperties {
return { return {
backgroundColor: Array.isArray(colorMapping.hex) ? colorMapping.hex[0] : colorMapping.hex backgroundColor: Array.isArray(colorMapping.hex) ? colorMapping.hex[0] : colorMapping.hex
}; };
}
export function getContrastColor(hexColor: string): string {
// Convert hex to RGB
const hex = hexColor.replace('#', '');
const r = parseInt(hex.substr(0, 2), 16);
const g = parseInt(hex.substr(2, 2), 16);
const b = parseInt(hex.substr(4, 2), 16);
// Calculate relative luminance
const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
// Return black or white based on luminance
return luminance > 0.5 ? '#000000' : '#FFFFFF';
} }

1
src/types/filament.ts
View File

@@ -1,6 +1,5 @@
export interface Filament { export interface Filament {
id?: string; id?: string;
brand: string;
tip: string; tip: string;
finish: string; finish: string;
boja: string; boja: string;

1
src/types/filament.v2.ts
View File

@@ -67,7 +67,6 @@ export interface FilamentV2 {
id: string; id: string;
// Product Info // Product Info
brand: string;
type: MaterialBase; type: MaterialBase;
material: Material; material: Material;
color: Color; color: Color;