From 0108719a84f4ade088742c532e4c439ff5197725 Mon Sep 17 00:00:00 2001
From: GotthardG <51994228+GotthardG@users.noreply.github.com>
Date: Fri, 20 Dec 2024 13:31:17 +0100
Subject: [PATCH] Refactor slot UI and backend refill logic.
Updated slot styling for improved user feedback and responsiveness. Simplified LN2 representation with a new level bar and adjusted refill logic to a 48-hour interval. Removed unused functions for cleaner backend code.
---
logistics/src/components/Slots.tsx | 177 ++++++++++++-----------------
1 file changed, 70 insertions(+), 107 deletions(-)
diff --git a/logistics/src/components/Slots.tsx b/logistics/src/components/Slots.tsx
index 5cddfe2..5f3be83 100644
--- a/logistics/src/components/Slots.tsx
+++ b/logistics/src/components/Slots.tsx
@@ -81,50 +81,52 @@ const StyledSlot = styled(Box)<{ isSelected: boolean; isOccupied: boolean; atBea
}
`;
-const BottleIcon: React.FC<{ fill: string }> = ({ fill }) => (
-
-);
-
-const LN2LevelBar: React.FC<{ level: number }> = ({ level }) => {
- const barHeight = `${level}%`; // Proportional height based on LN2 level
- const barColor = level > 50 ? '#00aeed' : level > 20 ? '#ff9800' : '#f44336'; // Green > Yellow > Red
+const BottleIcon: React.FC<{ fillHeight: number }> = ({ fillHeight }) => {
+ const pixelHeight = (276.777 * fillHeight) / 100; // Calculate height for the LN2 level
+ const yPosition = 276.777 - pixelHeight; // Adjust level to "fill" the bottle from the bottom
return (
-
- {/* The filled portion of the bar */}
-
+
+
+
+
+
+
-
+
+
);
};
const Slot: React.FC = ({ data, isSelected, onSelect, onRefillDewar, reloadSlots }) => {
- const { id, qr_code, label, qr_base, occupied, needs_refill, time_until_refill, dewar_unique_id, dewar_name, beamlineLocation, retrieved, retrievedTimestamp } = data;
+ const { id, qr_code, label, occupied, needs_refill, time_until_refill, dewar_unique_id, dewar_name, beamlineLocation, retrieved } = data;
+ // Calculate fill height for the LN2 bottle level (only visual, no percentage displayed)
const calculateFillHeight = (timeUntilRefill?: number) => {
if (timeUntilRefill === undefined || timeUntilRefill <= 0) {
return 0; // Return 0% if time is undefined or negative
}
- const maxTime = 172800; // Example maximum time (2 days in seconds)
+ const maxTime = 172800; // Example maximum time for calculating the level (2 days in seconds)
return Math.min((timeUntilRefill / maxTime) * 100, 100);
};
const fillHeight = calculateFillHeight(time_until_refill);
+ // 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
const handleRefill = async () => {
if (dewar_unique_id) {
await onRefillDewar(dewar_unique_id);
@@ -132,11 +134,6 @@ const Slot: React.FC = ({ data, isSelected, onSelect, onRefillDewar,
}
};
- const isSpecificBeamline = beamlineLocation === 'X10SA' || beamlineLocation === 'X06SA' || beamlineLocation === 'X06DA';
- const isRetrieved = retrieved === true && !isSpecificBeamline;
-
- const needsRefillSoon = occupied && (time_until_refill !== undefined && time_until_refill <= 10800);
-
return (
= ({ data, isSelected, onSelect, onRefillDewar,
atBeamline={isSpecificBeamline}
isRetrieved={isRetrieved}
needsRefillSoon={needsRefillSoon}
- onClick={() => onSelect(data)}
+ onClick={() => onSelect(data)} // Select slot on click
>
+ {/* Top Content: Label and dewar name */}
+
+ {label}
+ {dewar_name && {dewar_name}}
+
+
+ {/* Icons Section: Location and Bottle Icon */}
- {/* LN2 Level Bar */}
- {dewar_unique_id && (
-
-
+ {/* Location Icon */}
+ {isSpecificBeamline && (
+
+
+
+ {beamlineLocation}
+
)}
- {/* Main Content */}
-
- {/* Top-Centered Text */}
-
- {label}
- {dewar_name && (
-
- {dewar_name}
-
- )}
+ {/* Bottle Icon with LN2 Level */}
+ {dewar_unique_id && (
+
+
-
- {/* Beamline Location Icon & Bottle Icon Next to Each Other */}
-
- {/* Row for Icons */}
-
- {isSpecificBeamline && (
-
-
-
- {beamlineLocation}
-
-
- )}
- {occupied && (
-
- )}
-
-
-
- {/* Refill Button */}
- {needs_refill && (
-
- )}
-
- {/* Countdown Timer */}
- {dewar_unique_id && time_until_refill !== undefined && time_until_refill !== -1 ? (
-
- ) : null}
-
- {/* Warning */}
- {occupied && time_until_refill === -1 && (
-
- This dewar has no recorded refill event. It needs to
- be refilled.
-
- )}
-
+ )}
+
+ {/* Refill Button Section */}
+ {needs_refill && (
+
+ )}
+
+ {/* Countdown Timer */}
+ {dewar_unique_id && time_until_refill !== undefined && time_until_refill !== -1 && (
+
+ )}
+
+ {/* Warnings */}
+ {occupied && time_until_refill === -1 && (
+ This dewar has no recorded refill event. It needs to be refilled.
+ )}
);
};