feat(layout): Add Tiers input to Section Dialog
Some checks failed
Deploy to Production / deploy (push) Failing after 1s
Test / backend-test (push) Failing after 1s
Test / frontend-test (push) Failing after 0s

- Added Tiers configuration to AddSectionDialog
- Updated capacity calculations
- Updates saves to include tier count
This commit is contained in:
fullsizemalt 2025-12-11 13:26:59 -08:00
parent 2edb2dd100
commit d2c2e0aeef

View file

@ -21,6 +21,7 @@ export function AddSectionDialog({ room, isOpen, onClose, onSave, editSection }:
const [type, setType] = useState<LayoutSection['type']>('TABLE'); const [type, setType] = useState<LayoutSection['type']>('TABLE');
const [rows, setRows] = useState(1); const [rows, setRows] = useState(1);
const [columns, setColumns] = useState(1); const [columns, setColumns] = useState(1);
const [tiers, setTiers] = useState(1);
const [width, setWidth] = useState(4); // feet const [width, setWidth] = useState(4); // feet
const [height, setHeight] = useState(8); // feet const [height, setHeight] = useState(8); // feet
const [spacing, setSpacing] = useState(12); // inches const [spacing, setSpacing] = useState(12); // inches
@ -34,6 +35,7 @@ export function AddSectionDialog({ room, isOpen, onClose, onSave, editSection }:
setType(editSection.type); setType(editSection.type);
setRows(editSection.rows); setRows(editSection.rows);
setColumns(editSection.columns); setColumns(editSection.columns);
setTiers(editSection.tiers || 1);
setWidth(Math.round(editSection.size.width / PIXELS_PER_FOOT)); setWidth(Math.round(editSection.size.width / PIXELS_PER_FOOT));
setHeight(Math.round(editSection.size.height / PIXELS_PER_FOOT)); setHeight(Math.round(editSection.size.height / PIXELS_PER_FOOT));
setSpacing(editSection.spacing); setSpacing(editSection.spacing);
@ -43,6 +45,7 @@ export function AddSectionDialog({ room, isOpen, onClose, onSave, editSection }:
setType('TABLE'); setType('TABLE');
setRows(1); setRows(1);
setColumns(5); setColumns(5);
setTiers(1);
setWidth(4); setWidth(4);
setHeight(10); setHeight(10);
setSpacing(12); setSpacing(12);
@ -59,6 +62,7 @@ export function AddSectionDialog({ room, isOpen, onClose, onSave, editSection }:
type, type,
rows, rows,
columns, columns,
tiers,
spacing, spacing,
size: { size: {
width: width * PIXELS_PER_FOOT, width: width * PIXELS_PER_FOOT,
@ -176,6 +180,16 @@ export function AddSectionDialog({ room, isOpen, onClose, onSave, editSection }:
min="1" min="1"
/> />
</div> </div>
<div>
<label className="block text-xs text-slate-500 mb-1">Tiers (Z)</label>
<input
type="number"
value={tiers}
onChange={e => setTiers(Number(e.target.value))}
className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-white outline-none"
min="1"
/>
</div>
<div> <div>
<label className="block text-xs text-slate-500 mb-1">Spacing (in)</label> <label className="block text-xs text-slate-500 mb-1">Spacing (in)</label>
<input <input
@ -189,7 +203,8 @@ export function AddSectionDialog({ room, isOpen, onClose, onSave, editSection }:
</div> </div>
<div className="mt-2 text-xs text-slate-400 flex items-center gap-1"> <div className="mt-2 text-xs text-slate-400 flex items-center gap-1">
<ArrowRight size={12} /> <ArrowRight size={12} />
Total Capacity: <span className="text-white font-bold">{rows * columns}</span> positions Total Capacity: <span className="text-white font-bold">{rows * columns * tiers}</span> positions
{tiers > 1 && <span className="text-slate-500 ml-1">({rows * columns} per tier)</span>}
</div> </div>
</div> </div>