hope/dog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

itemlistorder

Browse Source
This commit is contained in:
Peter Hoppe
2023-01-11 23:29:46 +01:00
parent 6e22ae593a
commit 25185d3758
2 changed files with 26 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Qr.css
View File

@ -110,7 +110,7 @@ img
margin-bottom: 20px; margin-bottom: 20px;
} }
input .qr-input
{ {
width: 50px; width: 50px;
} }

40
src/components/Qr.tsx
View File

@ -11,9 +11,6 @@ type ListItemT =
ordernum: number; ordernum: number;
} }
export default function Qr() export default function Qr()
{ {
const { user, updateQR } = useContext<UserCtxT | null>(UserCtx) as UserCtxT; const { user, updateQR } = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
@ -26,9 +23,9 @@ export default function Qr()
const [errMsg, setErrMsg] = useState("false"); const [errMsg, setErrMsg] = useState("false");
const [successMsg, setSuccessMsg] = useState("false"); const [successMsg, setSuccessMsg] = useState("false");
const [itemList, setItemList] = useState([ const [itemList, setItemList] = useState([
{name:'Name', ordernum: 1}, {id: '0', name:'Name', ordernum: 1},
{name:'Telefon', ordernum: 2}, {id: '1', name:'Telefon', ordernum: 2},
{name:'Email', ordernum: 3} {id: '2', name:'Email', ordernum: 3}
]); ]);
//save reference for dragItem and dragOverItem //save reference for dragItem and dragOverItem
@ -129,10 +126,25 @@ export default function Qr()
// set new itemorder // set new itemorder
let newItemOrder = 0; let newItemOrder = 0;
let digit = 100; let digit = 100;
_itemList.map((item, index) =>
// name 1
// telefon 2
// email 3
// email
// name
// telefon
// email is first 1 -> 3
// name is second 2 -> 1
// telefon third 3 -> 2
// 231
itemList.map((item, index) =>
{ {
newItemOrder += item.ordernum * digit; digit = 10**(3-item.ordernum);
digit /= 10; newItemOrder += (index+1) * digit;
}); });
setItemOrder(newItemOrder); setItemOrder(newItemOrder);
} }
@ -153,8 +165,6 @@ export default function Qr()
</div>); </div>);
} }
const saveHandler = (event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined => const saveHandler = (event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined =>
{ {
event.preventDefault(); event.preventDefault();
@ -196,7 +206,7 @@ export default function Qr()
function OrderItemList(order: number) function OrderItemList(order: number)
{ {
let _itemList: {name:string; ordernum: number}[] = []; let _itemList: {id: string; name: string; ordernum: number}[] = [];
let oNum = getItemOrderNumber_(order, 100); let oNum = getItemOrderNumber_(order, 100);
let item = itemList.find( x => x.ordernum === oNum); let item = itemList.find( x => x.ordernum === oNum);
_itemList.push(item!); _itemList.push(item!);
@ -254,17 +264,17 @@ export default function Qr()
<div> <div>
<div>Anhänger</div> <div>Anhänger</div>
<label htmlFor='width'>Breite [mm] </label> <label htmlFor='width'>Breite [mm] </label>
<input type='number' id='width' name='width' <input className='qr-input' type='number' id='width' name='width'
min="1" max="100" min="1" max="100"
onChange={onChangeWidth} value={width*10}/> onChange={onChangeWidth} value={width*10}/>
<label htmlFor='height'>Höhe [mm] </label> <label htmlFor='height'>Höhe [mm] </label>
<input type='number' id='height' name='height' <input className='qr-input' type='number' id='height' name='height'
min="1" max="100" min="1" max="100"
onChange={onChangeHeight} value={height*10}/> onChange={onChangeHeight} value={height*10}/>
</div> </div>
<div> <div>
<label htmlFor='fontSize'>Schriftgröße </label> <label htmlFor='fontSize'>Schriftgröße </label>
<input type='number' id='fontSize' name='fontSize' <input className='qr-input' type='number' id='fontSize' name='fontSize'
min="1" max="200" min="1" max="200"
onChange={onChangeFontSize} value={fontSize} /> onChange={onChangeFontSize} value={fontSize} />
</div> </div>