Untitled
Coding API ..#%unknown
javascript
6 months ago
4.9 kB
5
Indexable
import React, { useState } from 'react'; import { Card, CardContent } from '@/components/ui/card'; const BarcodeGenerator = () => { const [zone, setZone] = useState('3'); const [yard, setYard] = useState('1'); const [row, setRow] = useState('A'); const [spot, setSpot] = useState('001'); // Générer le code complet const generateCode = () => { return `ZN${zone}-Y${yard}-${row}${spot.padStart(3, '0')}`; }; // Générer le code-barres en Code 128 const generateBarcodeSVG = (code) => { // Table de caractères Code 128 const barWidths = { '0': '11011001100', '1': '11001101100', '2': '11001100110', '3': '10010011000', '4': '10010001100', '5': '10001001100', '6': '10011001000', '7': '10011000100', '8': '10001100100', '9': '11001001000', 'A': '11001000100', 'B': '11000100100', 'C': '11000100010', 'D': '11000010010', 'E': '11001000010', 'F': '11000010100', 'G': '10110011100', 'H': '10011011100', 'I': '10011001110', 'J': '10111001100', 'K': '10011101100', 'L': '10011100110', 'M': '11001110010', 'N': '11001011100', 'O': '11001001110', 'P': '11011100100', 'Q': '11001110100', 'R': '11101101110', 'S': '11101001100', 'T': '11100101100', 'U': '11100100110', 'V': '11101100100', 'W': '11100110100', 'X': '11100110010', 'Y': '11011011000', 'Z': '11011000110', '-': '10100011000', }; let barcodePattern = '11010010000'; // Start Code 128B let x = 10; const bars = []; // Générer les barres pour chaque caractère for (let char of code) { const pattern = barWidths[char] || barWidths['0']; for (let i = 0; i < pattern.length; i++) { if (pattern[i] === '1') { bars.push(<rect key={`${x}-${i}`} x={x} y="10" width="2" height="80" fill="black" />); } x += 2; } } // Ajouter le code de fin barcodePattern = '1100011101011'; // Stop Code 128 for (let i = 0; i < barcodePattern.length; i++) { if (barcodePattern[i] === '1') { bars.push(<rect key={`${x}-end-${i}`} x={x} y="10" width="2" height="80" fill="black" />); } x += 2; } return ( <svg width={x + 20} height="120" viewBox={`0 0 ${x + 20} 120`}> {bars} <text x={(x + 20) / 2} y="110" textAnchor="middle" fontSize="12">{code}</text> </svg> ); }; return ( <Card className="w-full max-w-2xl mx-auto p-6"> <CardContent> <div className="space-y-6"> <div className="grid grid-cols-2 gap-4"> <div> <label className="block text-sm font-medium mb-2">Zone</label> <input type="text" value={zone} onChange={(e) => setZone(e.target.value)} className="w-full p-2 border rounded" maxLength="2" /> </div> <div> <label className="block text-sm font-medium mb-2">Yard/Cour</label> <input type="text" value={yard} onChange={(e) => setYard(e.target.value)} className="w-full p-2 border rounded" maxLength="2" /> </div> <div> <label className="block text-sm font-medium mb-2">Rangée</label> <input type="text" value={row} onChange={(e) => setRow(e.target.value.toUpperCase())} className="w-full p-2 border rounded" maxLength="1" /> </div> <div> <label className="block text-sm font-medium mb-2">Emplacement</label> <input type="text" value={spot} onChange={(e) => setSpot(e.target.value)} className="w-full p-2 border rounded" maxLength="3" /> </div> </div> <div className="mt-6 space-y-4"> <div className="text-lg font-bold text-center">{generateCode()}</div> <div className="flex justify-center"> {generateBarcodeSVG(generateCode())} </div> </div> <div className="mt-4 p-4 bg-gray-50 rounded"> <h3 className="font-medium mb-2">Légende:</h3> <ul className="text-sm space-y-1"> <li>ZN = Zone</li> <li>Y = Yard/Cour</li> <li>Rangée = Lettre (A-Z)</li> <li>Emplacement = Numéro (001-999)</li> </ul> </div> </div> </CardContent> </Card> ); }; export default BarcodeGenerator;
Editor is loading...
Leave a Comment