gotthard_g/aaredb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

https and ssl integration on the backend, frontend and started integration of logistics app as a separate frontend

Browse Source
This commit is contained in:
GotthardG
2024-11-18 14:22:54 +01:00
parent 0eb0bc3486
commit a91d74b718
11 changed files with 176 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
logistics/src/components/Slots.tsx
View File

@ -16,12 +16,12 @@ export interface SlotData {
timeUntilRefill: string;
}
const SlotContainer = styled(Box)<{ occupied: boolean, isSelected: boolean }>`
const SlotContainer = styled(Box)<{ isOccupied: boolean, isSelected: boolean }>`
width: 90px;
height: 180px;
margin: 10px;
background-color: ${(props) => (props.occupied ? '#f0f0f0' : '#ffffff')};
border: ${(props) => (props.isSelected ? '3px solid blue' : '2px solid #aaaaaa')};
background-color: ${({ isOccupied }) => (isOccupied ? '#ffebee' : '#e8f5e9')}; /* occupied = light red, free = light green */
border: ${({ isSelected }) => (isSelected ? '3px solid blue' : '2px solid #aaaaaa')};
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
display: flex;
@ -56,14 +56,16 @@ const ClockIcon = styled(AccessTime)`
`;
const Slot: React.FC<SlotProps> = ({ data, onSelect, isSelected }) => {
const { id, occupied, needsRefill, timeUntilRefill } = data;
return (
<SlotContainer occupied={data.occupied} onClick={() => onSelect(data)} isSelected={isSelected}>
<SlotNumber>{data.id}</SlotNumber>
<SlotContainer isOccupied={occupied} onClick={() => onSelect(data)} isSelected={isSelected}>
<SlotNumber>{id}</SlotNumber>
<QrCodeIcon />
{data.occupied && (
{occupied && (
<>
{data.needsRefill && <RefillIcon titleAccess="Needs Refill" />}
<ClockIcon titleAccess={`Time until refill: ${data.timeUntilRefill}`} />
{needsRefill && <RefillIcon titleAccess="Needs Refill" />}
<ClockIcon titleAccess={`Time until refill: ${timeUntilRefill}`} />
</>
)}
</SlotContainer>

7
logistics/src/components/Storage.tsx
View File

@ -96,7 +96,12 @@ const Storage: React.FC<StorageProps> = ({ name, selectedSlot }) => {
<Typography variant="h5">{name} Slots</Typography>
<StorageWrapper>
{storageSlotsData[name].map((slot) => (
<Slot key={slot.id} data={slot} onSelect={handleSlotSelect} isSelected={selectedSlot === slot.id} />
<Slot
key={slot.id}
data={slot}
onSelect={handleSlotSelect}
isSelected={selectedSlot === slot.id}
/>
))}
</StorageWrapper>
{highlightedSlot && (