feat(layout): Add Tiers input to Section Dialog
- Added Tiers configuration to AddSectionDialog - Updated capacity calculations - Updates saves to include tier count
This commit is contained in:
parent
2edb2dd100
commit
d2c2e0aeef
1 changed files with 16 additions and 1 deletions
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue