46 lines
1.9 KiB
TypeScript
46 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import { Box, Typography } from '@mui/material';
|
|
|
|
interface UnipuckProps {
|
|
pucks: number; // Number of pucks
|
|
samples?: string[][]; // Array of sample arrays for each puck
|
|
}
|
|
|
|
const Unipuck: React.FC<UnipuckProps> = ({ pucks, samples }) => {
|
|
const renderPuck = (sampleStatus: string[]) => {
|
|
sampleStatus = sampleStatus || Array(16).fill('empty'); // Ensure no null status array
|
|
return (
|
|
<svg width="100" height="100" viewBox="0 0 100 100">
|
|
<circle cx="50" cy="50" r="45" stroke="black" strokeWidth="2" fill="none" />
|
|
{[...Array(11)].map((_, index) => {
|
|
const angle = (index * (360 / 11)) * (Math.PI / 180);
|
|
const x = 50 + 35 * Math.cos(angle);
|
|
const y = 50 + 35 * Math.sin(angle);
|
|
return <circle key={index} cx={x} cy={y} r="5" fill={sampleStatus[index] === 'filled' ? 'black' : 'none'} stroke="black" />;
|
|
})}
|
|
{[...Array(5)].map((_, index) => {
|
|
const angle = (index * (360 / 5) + 36) * (Math.PI / 180);
|
|
const x = 50 + 15 * Math.cos(angle);
|
|
const y = 50 + 15 * Math.sin(angle);
|
|
return <circle key={index + 11} cx={x} cy={y} r="5" fill={sampleStatus[index + 11] === 'filled' ? 'black' : 'none'} stroke="black" />;
|
|
})}
|
|
</svg>
|
|
);
|
|
};
|
|
|
|
if (pucks === 0) {
|
|
return <Typography variant="body1">No pucks attached to the dewar.</Typography>;
|
|
}
|
|
|
|
return (
|
|
<Box sx={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 2 }}>
|
|
{[...Array(pucks)].map((_, index) => (
|
|
<Box key={index} sx={{ margin: 1 }}>
|
|
{renderPuck(samples && samples[index] ? samples[index] : Array(16).fill('empty'))}
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default Unipuck; |