retrieved event working

This commit is contained in:
GotthardG
2024-11-22 22:04:44 +01:00
parent c7e6c0390e
commit fc8bb8d200
6 changed files with 155 additions and 112 deletions

View File

@ -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;