diff --git a/logistics/src/components/Slots.tsx b/logistics/src/components/Slots.tsx index 5f3be83..cad3d00 100644 --- a/logistics/src/components/Slots.tsx +++ b/logistics/src/components/Slots.tsx @@ -15,8 +15,6 @@ export interface SlotData { needs_refill?: boolean; time_until_refill?: number; beamlineLocation?: string; - retrieved?: boolean; // Indicates if the dewar is retrieved - retrievedTimestamp?: string; // Timestamp of the retrieval event } interface SlotProps { @@ -39,7 +37,12 @@ const pulse = keyframes` } `; -const StyledSlot = styled(Box)<{ isSelected: boolean; isOccupied: boolean; atBeamline: boolean; isRetrieved: boolean; needsRefillSoon: boolean }>` +const StyledSlot = styled(Box)<{ + isSelected: boolean; + isOccupied: boolean; + atBeamline: boolean; + needsRefillSoon: boolean + }>` padding: 16px; margin: 8px; width: 140px; @@ -108,7 +111,7 @@ const BottleIcon: React.FC<{ fillHeight: number }> = ({ fillHeight }) => { }; const Slot: React.FC = ({ data, isSelected, onSelect, onRefillDewar, reloadSlots }) => { - const { id, qr_code, label, occupied, needs_refill, time_until_refill, dewar_unique_id, dewar_name, beamlineLocation, retrieved } = data; + const { id, qr_code, label, occupied, needs_refill, time_until_refill, dewar_unique_id, dewar_name, beamlineLocation } = data; // Calculate fill height for the LN2 bottle level (only visual, no percentage displayed) const calculateFillHeight = (timeUntilRefill?: number) => { @@ -123,7 +126,6 @@ const Slot: React.FC = ({ data, isSelected, onSelect, onRefillDewar, // Determine slot state const isSpecificBeamline = beamlineLocation === 'X10SA' || beamlineLocation === 'X06SA' || beamlineLocation === 'X06DA'; - const isRetrieved = retrieved && !isSpecificBeamline; const needsRefillSoon = occupied && (time_until_refill !== undefined && time_until_refill <= 10800); // Refill handler @@ -139,9 +141,8 @@ const Slot: React.FC = ({ data, isSelected, onSelect, onRefillDewar, isSelected={isSelected} isOccupied={occupied} atBeamline={isSpecificBeamline} - isRetrieved={isRetrieved} needsRefillSoon={needsRefillSoon} - onClick={() => onSelect(data)} // Select slot on click + onClick={() => onSelect(data)} > {/* Top Content: Label and dewar name */} diff --git a/logistics/src/pages/LogisticsView.tsx b/logistics/src/pages/LogisticsView.tsx index e77c626..f6a6c6d 100644 --- a/logistics/src/pages/LogisticsView.tsx +++ b/logistics/src/pages/LogisticsView.tsx @@ -179,6 +179,9 @@ const LogisticsView: React.FC = () => { }; }); + // SORT THE SLOTS BY QR CODE + newSlotsData.sort((a, b) => a.qr_code.localeCompare(b.qr_code)); + setSlotsData(newSlotsData); } catch (e) { console.error(e); @@ -274,14 +277,19 @@ const LogisticsView: React.FC = () => { const handleSlotSelect = (slot: SlotData) => { if (selectedSlot === slot.qr_code) { + // Deselect if the same slot is clicked again setSelectedSlot(null); setLocationQr(null); setSelectedSlotData(null); + setDewarQr(null); // Clear Dewar QR code } else { + // Set the selected slot and its data setSelectedSlot(slot.qr_code); setLocationQr(slot.qr_code); setSelectedSlotData(slot); - setRetrievedDewar(slot.dewar?.unique_id || null); + + // If occupied, set the `dewar_unique_id` to the `Dewar QR Code` field + setDewarQr(slot.dewar?.unique_id || null); } };