Skip to content

Commit 0ed409b

Browse files
brankkobrankko
committed
Power toggle refarored and simplified
1 parent f92387b commit 0ed409b

23 files changed

Lines changed: 69 additions & 95 deletions

‎src/App.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -637,7 +637,6 @@ export default function RackPlanner() {
637637
rackSettings.widthStandard
638638
}
639639
isPowered={areAnimationsEnabled}
640-
animationsEnabled={areAnimationsEnabled}
641640
/>
642641

643642
{/* Hover Overlay Actions */}
@@ -829,7 +828,6 @@ export default function RackPlanner() {
829828
<ModuleFace
830829
module={module}
831830
rackWidth="10inch"
832-
animationsEnabled={false}
833831
isPowered={false}
834832
/>
835833
</div>

‎src/components/ModuleFace.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,11 @@ export const ModuleFace = ({
99
module,
1010
rackWidth,
1111
className = '',
12-
animationsEnabled = true,
1312
isPowered = true,
1413
}: {
1514
module: RackModule;
1615
rackWidth?: RackWidth;
1716
className?: string;
18-
animationsEnabled?: boolean;
1917
isPowered?: boolean;
2018
}) => {
2119
const hasImage = !!module.image;
@@ -45,24 +43,24 @@ export const ModuleFace = ({
4543
{/* Visual Features based on Type */}
4644
<div className="flex gap-2 w-full justify-center">
4745
{/* Networking: Ports */}
48-
{module.type === 'network' && <NetworkFace module={module} animationsEnabled={animationsEnabled} isPowered={isPowered} />}
46+
{module.type === 'network' && <NetworkFace module={module} isPowered={isPowered} />}
4947

5048
{/* Server: Indicators or Drive Bays */}
51-
{module.type === 'server' && <ServerFace animationsEnabled={animationsEnabled} isPowered={isPowered} />}
49+
{module.type === 'server' && <ServerFace isPowered={isPowered} />}
5250

5351
{/* Storage: Drive Arrays */}
5452
{module.type === 'storage' && (
55-
<StorageFace module={module} rackWidth={rackWidth} animationsEnabled={animationsEnabled} isPowered={isPowered} />
53+
<StorageFace module={module} rackWidth={rackWidth} isPowered={isPowered} />
5654
)}
5755

5856
{/* Power: Switch/Outlets */}
5957
{module.type === 'power' && (
60-
<PowerFace module={module} rackWidth={rackWidth} animationsEnabled={animationsEnabled} isPowered={isPowered} />
58+
<PowerFace module={module} rackWidth={rackWidth} isPowered={isPowered} />
6159
)}
6260

6361
{/* Accessories */}
6462
{module.type === 'accessory' && (
65-
<AccessoryFace module={module} rackWidth={rackWidth} animationsEnabled={animationsEnabled} isPowered={isPowered} />
63+
<AccessoryFace module={module} rackWidth={rackWidth} isPowered={isPowered} />
6664
)}
6765
</div>
6866
</div>

‎src/components/module-faces/AccessoryFace.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,34 +8,32 @@ import { VentFace } from './accessory/VentFace';
88
export const AccessoryFace = ({
99
module,
1010
rackWidth = '19inch',
11-
animationsEnabled,
1211
isPowered,
1312
}: {
1413
module: RackModule;
1514
rackWidth?: RackWidth;
16-
animationsEnabled?: boolean;
1715
isPowered?: boolean;
1816
}) => {
1917
const id = module.id.toLowerCase();
2018
const name = module.name.toLowerCase();
2119

2220
if (module.id === 'rpi-mount-1u') {
23-
return <RPIMountFace animationsEnabled={animationsEnabled} isPowered={isPowered} />;
21+
return <RPIMountFace />;
2422
}
2523
if (id === 'cable-man-1u' || name.includes('cable management')) {
2624
return <CableManagementFace />;
2725
}
2826

2927
if (id === 'patch-panel' || name.includes('patch panel')) {
30-
return <PatchPanelFace rackWidth={rackWidth} animationsEnabled={animationsEnabled} isPowered={isPowered} />;
28+
return <PatchPanelFace rackWidth={rackWidth} isPowered={isPowered} />;
3129
}
3230

3331
if (id === 'shelf' || name.includes('shelf')) {
3432
return <ShelfFace />;
3533
}
3634

3735
if (id === 'rpi-mount' || name.includes('raspberry') || name.includes('rpi')) {
38-
return <RPIMountFace rackWidth={rackWidth} uSize={module.uSize} animationsEnabled={animationsEnabled} />;
36+
return <RPIMountFace rackWidth={rackWidth} uSize={module.uSize} />;
3937
}
4038

4139
// Default to Vent if it seems like a vent, or if generic accessory

‎src/components/module-faces/NetworkFace.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,22 @@ import { Switch16Port } from './network/Switch16Port';
44
import { Switch8Port } from './network/Switch8Port';
55
import { Switch5Port } from './network/Switch5Port';
66

7-
export const NetworkFace = ({ module, animationsEnabled, isPowered }: { module: RackModule; animationsEnabled?: boolean; isPowered?: boolean }) => {
7+
export const NetworkFace = ({ module, isPowered }: { module: RackModule; isPowered?: boolean }) => {
88
// Determine which networking device to show
99
const name = module.name.toLowerCase();
1010
const id = module.id.toLowerCase();
1111

1212
if (id === 'switch-24' || name.includes('24-port')) {
13-
return <Switch24Port animationsEnabled={animationsEnabled} isPowered={isPowered} />;
13+
return <Switch24Port isPowered={isPowered} />;
1414
}
1515
if (id === 'switch-16' || name.includes('16-port')) {
16-
return <Switch16Port animationsEnabled={animationsEnabled} isPowered={isPowered} />;
16+
return <Switch16Port isPowered={isPowered} />;
1717
}
1818
if (id === 'switch-8' || name.includes('8-port')) {
19-
return <Switch8Port animationsEnabled={animationsEnabled} isPowered={isPowered} />;
19+
return <Switch8Port isPowered={isPowered} />;
2020
}
2121
if (id === 'switch-5' || name.includes('5-port')) {
22-
return <Switch5Port animationsEnabled={animationsEnabled} isPowered={isPowered} />;
22+
return <Switch5Port isPowered={isPowered} />;
2323
}
2424

2525
// Default Fallback (Generic networking look - maybe flashing lights)

‎src/components/module-faces/PowerFace.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,16 @@ import { UPSFace } from './power/UPSFace';
55
export const PowerFace = ({
66
module,
77
rackWidth = '19inch',
8-
animationsEnabled,
98
isPowered,
109
}: {
1110
module: RackModule;
1211
rackWidth?: RackWidth;
13-
animationsEnabled?: boolean;
1412
isPowered?: boolean;
1513
}) => {
1614
if (module.id.startsWith('pdu-')) {
17-
return <PDUFace rackWidth={rackWidth} animationsEnabled={animationsEnabled} isPowered={isPowered} />;
15+
return <PDUFace rackWidth={rackWidth} isPowered={isPowered} />;
1816
} else if (module.id.startsWith('ups-')) {
19-
return <UPSFace animationsEnabled={animationsEnabled} isPowered={isPowered} />;
17+
return <UPSFace isPowered={isPowered} />;
2018
}
2119
// Fallback for any other 'power' type not explicitly handled
2220
return <UPSFace />;

‎src/components/module-faces/ServerFace.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
1-
export const ServerFace = ({ animationsEnabled, isPowered }: { animationsEnabled?: boolean; isPowered?: boolean }) => {
1+
export const ServerFace = ({ isPowered }: { isPowered?: boolean }) => {
22
return (
33
<div className="flex items-center gap-2">
44
<div className="flex flex-col gap-0.5">
55
{/* Power LED */}
66
<div
77
className={`w-1 h-1 rounded-full ${isPowered
8-
? 'bg-green-500 shadow-[0_0_5px_rgba(34,197,94,0.5)]'
9-
: 'bg-green-900/30'
8+
? 'bg-green-500 shadow-[0_0_5px_rgba(34,197,94,0.5)]'
9+
: 'bg-green-900/30'
1010
}`}
1111
></div>
1212
{/* Activity LED */}
1313
<div
1414
className={`w-1 h-1 rounded-full ${isPowered
15-
? 'bg-blue-500'
16-
: 'bg-blue-900/30'
17-
} ${isPowered && animationsEnabled ? 'animate-pulse' : ''}`}
15+
? 'bg-blue-500'
16+
: 'bg-blue-900/30'
17+
} ${isPowered ? 'animate-pulse' : ''}`}
1818
></div>
1919
</div>
2020
<div className="w-20 h-1.5 bg-black/50 rounded-full"></div>

‎src/components/module-faces/StorageFace.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,24 +7,22 @@ import { Nas2u25Face } from './storage/Nas2u25Face';
77
export const StorageFace = ({
88
module,
99
rackWidth = '19inch',
10-
animationsEnabled,
1110
isPowered,
1211
}: {
1312
module: RackModule;
1413
rackWidth?: RackWidth;
15-
animationsEnabled?: boolean;
1614
isPowered?: boolean;
1715
}) => {
1816
if (module.id === 'nas-1u-35') {
19-
return <Nas1u35Face rackWidth={rackWidth} animationsEnabled={animationsEnabled} isPowered={isPowered} />;
17+
return <Nas1u35Face rackWidth={rackWidth} isPowered={isPowered} />;
2018
}
2119

2220
if (module.id === 'nas-2u-35') {
23-
return <Nas2u35Face rackWidth={rackWidth} animationsEnabled={animationsEnabled} isPowered={isPowered} />;
21+
return <Nas2u35Face rackWidth={rackWidth} isPowered={isPowered} />;
2422
}
2523

2624
if (module.id === 'nas-2u-25') {
27-
return <Nas2u25Face rackWidth={rackWidth} animationsEnabled={animationsEnabled} isPowered={isPowered} />;
25+
return <Nas2u25Face rackWidth={rackWidth} isPowered={isPowered} />;
2826
}
2927

3028
return <div className="text-gray-400 text-xs">Unknown Storage Type</div>;

‎src/components/module-faces/accessory/PatchPanelFace.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,9 @@ import { type RackWidth } from '../../../types';
33

44
export const PatchPanelFace = ({
55
rackWidth,
6-
animationsEnabled,
76
isPowered,
87
}: {
98
rackWidth?: RackWidth;
10-
animationsEnabled?: boolean;
119
isPowered?: boolean;
1210
}) => {
1311
const is10Inch = rackWidth === '10inch';
@@ -19,11 +17,10 @@ export const PatchPanelFace = ({
1917
{Array.from({ length: portCount }).map((_, i) => (
2018
<div key={i} className="flex flex-col items-center gap-2 w-full">
2119
{/* White Label */}
22-
<div className="w-[80%] h-2 bg-white/70 rounded-[1px] shadow-sm"></div>
20+
<div className="w-[80%] h-1.5 bg-white/70 rounded-[1px] shadow-sm"></div>
2321
{/* Port */}
2422
<Port
25-
className="w-5 h-5"
26-
animationsEnabled={animationsEnabled}
23+
className="w-6.25 h-6.25"
2724
isPowered={isPowered}
2825
/>
2926
</div>

‎src/components/module-faces/accessory/RPIMountFace.tsx‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,9 @@ import { RPIMountSlot } from './RPIMountSlot';
44
export const RPIMountFace = ({
55
rackWidth,
66
uSize = 1,
7-
animationsEnabled,
8-
isPowered,
97
}: {
108
rackWidth?: RackWidth;
119
uSize?: number;
12-
animationsEnabled?: boolean;
13-
isPowered?: boolean;
1410
}) => {
1511
const is10Inch = rackWidth === '10inch';
1612
const is1U = uSize === 1;
@@ -29,25 +25,25 @@ export const RPIMountFace = ({
2925
{/* Horizontal Slots (1U) */}
3026
{is1U && !is10Inch && (
3127
<div className="flex justify-between items-center w-full px-6 gap-4">
32-
<RPIMountSlot animationsEnabled={animationsEnabled} isPowered={isPowered} />
33-
<RPIMountSlot animationsEnabled={animationsEnabled} isPowered={isPowered} />
34-
<RPIMountSlot animationsEnabled={animationsEnabled} isPowered={isPowered} />
35-
<RPIMountSlot animationsEnabled={animationsEnabled} isPowered={isPowered} />
28+
<RPIMountSlot />
29+
<RPIMountSlot />
30+
<RPIMountSlot />
31+
<RPIMountSlot />
3632
</div>
3733
)}
3834

3935
{is1U && is10Inch && (
4036
<div className="flex justify-evenly items-center w-full px-4 gap-4">
41-
<RPIMountSlot animationsEnabled={animationsEnabled} isPowered={isPowered} />
42-
<RPIMountSlot animationsEnabled={animationsEnabled} isPowered={isPowered} />
37+
<RPIMountSlot />
38+
<RPIMountSlot />
4339
</div>
4440
)}
4541

4642
{/* Vertical Slots (2U) */}
4743
{is2U && (
4844
<div className="flex justify-evenly items-center w-full px-4 h-full">
4945
{Array.from({ length: slotCount }).map((_, i) => (
50-
<RPIMountSlot key={i} vertical animationsEnabled={animationsEnabled} isPowered={isPowered} />
46+
<RPIMountSlot key={i} vertical />
5147
))}
5248
</div>
5349
)}

‎src/components/module-faces/accessory/RPIMountSlot.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export const RPIMountSlot = ({ vertical = false, animationsEnabled, isPowered = true }: { vertical?: boolean; animationsEnabled?: boolean; isPowered?: boolean }) => {
1+
export const RPIMountSlot = ({ vertical = false }: { vertical?: boolean }) => {
22
return (
33
<div
44
className={`${vertical

0 commit comments

Comments
 (0)