Marker: Fixed card queue property mismatch - cards now properly separate in scanner queue
This commit is contained in:
parent
afb79c57d9
commit
061fb90b0a
2 changed files with 592 additions and 753 deletions
File diff suppressed because it is too large
Load diff
|
|
@ -78,16 +78,20 @@ export default function Scanner() {
|
||||||
|
|
||||||
const handleCardScanned = async (cardData) => {
|
const handleCardScanned = async (cardData) => {
|
||||||
console.log('Card scanned:', cardData);
|
console.log('Card scanned:', cardData);
|
||||||
|
console.log('Looking for existing card with name:', cardData.name, 'set:', cardData.set);
|
||||||
|
|
||||||
// Check if this card already exists in the queue
|
// Check if this card already exists in the queue
|
||||||
setScannedCards(prev => {
|
setScannedCards(prev => {
|
||||||
|
console.log('Current queue:', prev.map(c => ({ name: c.name, set: c.set, processed: c.processed })));
|
||||||
|
|
||||||
const existingCardIndex = prev.findIndex(existing =>
|
const existingCardIndex = prev.findIndex(existing =>
|
||||||
existing.name === cardData.cardName &&
|
existing.name === cardData.name &&
|
||||||
existing.set === cardData.setName &&
|
existing.set === cardData.set &&
|
||||||
!existing.processed
|
!existing.processed
|
||||||
);
|
);
|
||||||
|
|
||||||
if (existingCardIndex !== -1) {
|
if (existingCardIndex !== -1) {
|
||||||
|
console.log(`📈 Incrementing quantity for existing card: ${cardData.name}`);
|
||||||
// Increment quantity of existing card
|
// Increment quantity of existing card
|
||||||
const updatedCards = [...prev];
|
const updatedCards = [...prev];
|
||||||
updatedCards[existingCardIndex] = {
|
updatedCards[existingCardIndex] = {
|
||||||
|
|
@ -97,12 +101,13 @@ export default function Scanner() {
|
||||||
};
|
};
|
||||||
return updatedCards;
|
return updatedCards;
|
||||||
} else {
|
} else {
|
||||||
|
console.log(`🆕 Adding new card to queue: ${cardData.name}`);
|
||||||
// Add new card to queue
|
// Add new card to queue
|
||||||
const scannedCard = {
|
const scannedCard = {
|
||||||
...cardData,
|
...cardData,
|
||||||
id: Date.now(), // Temporary ID for the queue
|
id: Date.now() + Math.random(), // More unique ID for the queue
|
||||||
name: cardData.cardName,
|
name: cardData.name,
|
||||||
set: cardData.setName,
|
set: cardData.set,
|
||||||
quantity: 1,
|
quantity: 1,
|
||||||
timestamp: new Date().toISOString(),
|
timestamp: new Date().toISOString(),
|
||||||
processed: false
|
processed: false
|
||||||
|
|
@ -326,9 +331,9 @@ export default function Scanner() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Layout>
|
<Layout>
|
||||||
<div className="max-w-6xl mx-auto p-6">
|
<div className="h-full flex flex-col">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="mb-8">
|
<div className="px-6 pt-6 pb-4">
|
||||||
<h1 className="text-3xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
|
<h1 className="text-3xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||||
🃏 Card Scanner
|
🃏 Card Scanner
|
||||||
</h1>
|
</h1>
|
||||||
|
|
@ -337,10 +342,11 @@ export default function Scanner() {
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
{/* Main Content - Full Height */}
|
||||||
|
<div className="flex-1 grid grid-cols-1 lg:grid-cols-5 gap-6 px-6 pb-6">
|
||||||
{/* Camera Scanner */}
|
{/* Camera Scanner */}
|
||||||
<div className="lg:col-span-2">
|
<div className="lg:col-span-3 flex flex-col">
|
||||||
<div className="rounded-xl p-6" style={{ backgroundColor: 'var(--bg-secondary)', border: '1px solid var(--border)' }}>
|
<div className="flex-1 rounded-xl p-6 flex flex-col" style={{ backgroundColor: 'var(--bg-secondary)', border: '1px solid var(--border)' }}>
|
||||||
<div className="flex justify-between items-center mb-4">
|
<div className="flex justify-between items-center mb-4">
|
||||||
<h2 className="text-xl font-semibold" style={{ color: 'var(--text-primary)' }}>
|
<h2 className="text-xl font-semibold" style={{ color: 'var(--text-primary)' }}>
|
||||||
Camera Scanner
|
Camera Scanner
|
||||||
|
|
@ -357,16 +363,18 @@ export default function Scanner() {
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<CameraScanner
|
<div className="flex-1">
|
||||||
onCardScanned={handleCardScanned}
|
<CameraScanner
|
||||||
onError={handleError}
|
onCardScanned={handleCardScanned}
|
||||||
/>
|
onError={handleError}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Scanned Cards Queue */}
|
{/* Scanned Cards Queue */}
|
||||||
<div className="lg:col-span-1">
|
<div className="lg:col-span-2 flex flex-col">
|
||||||
<div className="rounded-xl p-6" style={{ backgroundColor: 'var(--bg-secondary)', border: '1px solid var(--border)' }}>
|
<div className="flex-1 rounded-xl p-6 flex flex-col" style={{ backgroundColor: 'var(--bg-secondary)', border: '1px solid var(--border)' }}>
|
||||||
<div className="flex justify-between items-center mb-4">
|
<div className="flex justify-between items-center mb-4">
|
||||||
<h2 className="text-xl font-semibold" style={{ color: 'var(--text-primary)' }}>
|
<h2 className="text-xl font-semibold" style={{ color: 'var(--text-primary)' }}>
|
||||||
Scanned Cards
|
Scanned Cards
|
||||||
|
|
@ -390,8 +398,9 @@ export default function Scanner() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Scanned Cards Queue */}
|
{/* Scanned Cards Queue - Scrollable */}
|
||||||
<div className="space-y-3">
|
<div className="flex-1 overflow-y-auto">
|
||||||
|
<div className="space-y-3">
|
||||||
{scannedCards.length === 0 ? (
|
{scannedCards.length === 0 ? (
|
||||||
<div className="text-center py-8" style={{ color: 'var(--text-secondary)' }}>
|
<div className="text-center py-8" style={{ color: 'var(--text-secondary)' }}>
|
||||||
<div className="text-4xl mb-2">📱</div>
|
<div className="text-4xl mb-2">📱</div>
|
||||||
|
|
@ -604,6 +613,7 @@ export default function Scanner() {
|
||||||
</div>
|
</div>
|
||||||
))
|
))
|
||||||
)}
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue