itemlistorder

src/components/Qr.css

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

src/components/Qr.tsx

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