retrieved event working
This commit is contained in:
Binary file not shown.
@ -2,8 +2,8 @@ import React, { useEffect } from 'react';
|
||||
import { Box, Typography, Button, Alert } from '@mui/material';
|
||||
import styled from 'styled-components';
|
||||
import LocalGasStationIcon from '@mui/icons-material/LocalGasStation';
|
||||
import LocationOnIcon from '@mui/icons-material/LocationOn'; // New import for location indication
|
||||
import CountdownTimer from './CountdownTimer';
|
||||
import QRCode from 'react-qr-code';
|
||||
|
||||
export interface SlotData {
|
||||
id: string;
|
||||
@ -15,6 +15,7 @@ export interface SlotData {
|
||||
dewar_name?: string;
|
||||
needs_refill?: boolean;
|
||||
time_until_refill?: number;
|
||||
at_beamline?: boolean; // New property to indicate the dewar is at the beamline
|
||||
}
|
||||
|
||||
interface SlotProps {
|
||||
@ -28,6 +29,7 @@ interface SlotProps {
|
||||
interface StyledSlotProps {
|
||||
isSelected: boolean;
|
||||
isOccupied: boolean;
|
||||
atBeamline: boolean;
|
||||
}
|
||||
|
||||
const StyledSlot = styled(Box)<StyledSlotProps>`
|
||||
@ -35,8 +37,8 @@ const StyledSlot = styled(Box)<StyledSlotProps>`
|
||||
margin: 8px;
|
||||
width: 150px;
|
||||
height: 260px;
|
||||
background-color: ${({ isSelected, isOccupied }) =>
|
||||
isSelected ? '#3f51b5' : isOccupied ? '#f44336' : '#4caf50'};
|
||||
background-color: ${({ isSelected, isOccupied, atBeamline }) =>
|
||||
atBeamline ? '#ff9800' : isSelected ? '#3f51b5' : isOccupied ? '#f44336' : '#4caf50'};
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
@ -52,12 +54,6 @@ const StyledSlot = styled(Box)<StyledSlotProps>`
|
||||
}
|
||||
`;
|
||||
|
||||
const QRCodeContainer = styled.div`
|
||||
padding: 8px;
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
`;
|
||||
|
||||
const BottleIcon: React.FC<{ fillHeight: number }> = ({ fillHeight }) => {
|
||||
const pixelHeight = (276.777 * fillHeight) / 100;
|
||||
const yPosition = 276.777 - pixelHeight;
|
||||
@ -80,49 +76,38 @@ const BottleIcon: React.FC<{ fillHeight: number }> = ({ fillHeight }) => {
|
||||
};
|
||||
|
||||
const Slot: React.FC<SlotProps> = ({ data, isSelected, onSelect, onRefillDewar, reloadSlots }) => {
|
||||
const { id, qr_code, label, qr_base, occupied, needs_refill, time_until_refill, dewar_unique_id, dewar_name, at_beamline } = data;
|
||||
|
||||
const calculateFillHeight = (timeUntilRefill?: number) => {
|
||||
if (timeUntilRefill === undefined || timeUntilRefill <= 0) {
|
||||
return 0;
|
||||
}
|
||||
const maxTime = 86400;
|
||||
const maxTime = 3600;
|
||||
return Math.min((timeUntilRefill / maxTime) * 100, 100);
|
||||
};
|
||||
|
||||
const fillHeight = calculateFillHeight(data.time_until_refill);
|
||||
const fillHeight = calculateFillHeight(time_until_refill);
|
||||
|
||||
useEffect(() => {
|
||||
if (data.time_until_refill !== undefined) {
|
||||
console.log(`Updated time_until_refill: ${data.time_until_refill}`);
|
||||
if (time_until_refill !== undefined) {
|
||||
console.log(`Updated time_until_refill: ${time_until_refill}`);
|
||||
}
|
||||
}, [data.time_until_refill]);
|
||||
}, [time_until_refill]);
|
||||
|
||||
const handleRefill = async () => {
|
||||
if (data.dewar_unique_id) {
|
||||
await onRefillDewar(data.dewar_unique_id);
|
||||
if (dewar_unique_id) {
|
||||
await onRefillDewar(dewar_unique_id);
|
||||
reloadSlots();
|
||||
}
|
||||
};
|
||||
|
||||
const { id, qr_code, label, qr_base, occupied, needs_refill, time_until_refill, dewar_unique_id, dewar_name, ...rest } = data;
|
||||
|
||||
return (
|
||||
<StyledSlot
|
||||
isSelected={isSelected}
|
||||
isOccupied={occupied}
|
||||
onClick={() => onSelect(data)}
|
||||
{...rest}
|
||||
>
|
||||
<StyledSlot isSelected={isSelected} isOccupied={occupied} atBeamline={!!at_beamline} onClick={() => onSelect(data)}>
|
||||
<Typography variant="h6">{label}</Typography>
|
||||
{dewar_name && <Typography variant="body2">{`Dewar: ${dewar_name}`}</Typography>}
|
||||
{dewar_unique_id && (
|
||||
<QRCodeContainer>
|
||||
<QRCode value={dewar_unique_id} size={64} />
|
||||
</QRCodeContainer>
|
||||
)}
|
||||
{dewar_name && <Typography variant="body2">{`${dewar_name}`}</Typography>} {/* Ensure correct dewar_name */}
|
||||
{needs_refill && <LocalGasStationIcon />}
|
||||
{dewar_unique_id && (
|
||||
<BottleIcon fillHeight={fillHeight} />
|
||||
)}
|
||||
{dewar_unique_id && <BottleIcon fillHeight={fillHeight} />}
|
||||
{at_beamline && <Typography style={{fontSize: 12}}><LocationOnIcon /> At Beamline</Typography>} {/* Indicate at beamline */}
|
||||
{(dewar_unique_id && time_until_refill !== undefined && time_until_refill !== -1) ? (
|
||||
<CountdownTimer key={dewar_unique_id} totalSeconds={time_until_refill} />
|
||||
) : null}
|
||||
@ -136,6 +121,6 @@ const Slot: React.FC<SlotProps> = ({ data, isSelected, onSelect, onRefillDewar,
|
||||
)}
|
||||
</StyledSlot>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default Slot;
|
Reference in New Issue
Block a user