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

mantine

Browse Source
This commit is contained in:
Peter Hoppe
2023-02-15 00:22:41 +01:00
parent 36f9bc68b2
commit 15beb7bb8a
2 changed files with 57 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
src/components/Qr.tsx
View File

@ -6,19 +6,11 @@ import Checkbox from './Checkbox';
import Img from './Img';
import './Qr.css';
import useSWR from 'swr';
import { MantineProvider } from '@mantine/core';
import { MantineProvider, NumberInput } from '@mantine/core';
import { NotificationsProvider, showNotification } from '@mantine/notifications';
import {DndList, DndListProps} from './DndList';
import {DndList, DndListProps, TDataItem} from './DndList';
type ListItemT =
{
id: string;
name: string;
ordernum: number;
}
export default function Qr()
{
const { data, error, isLoading, mutate } = useSWR( ['Qr', 'SESS'], getDog);
@ -40,15 +32,6 @@ export default function Qr()
picture: ''
});
//save reference for dragItem and dragOverItem
const dragItem = React.useRef<any>(null);
const dragOverItem = React.useRef<any>(null);
const itemListInit: ListItemT[] =
[
{id: '0', name:'Name', ordernum: 1},
{id: '1', name:'Telefon', ordernum: 2},
{id: '2', name:'Email', ordernum: 3}
];
const dndListInit: DndListProps =
{
data:
@ -59,7 +42,6 @@ export default function Qr()
]
};
const itemList = React.useRef<ListItemT[]>(itemListInit);
const dndList = React.useRef<DndListProps>(dndListInit);
if (error) return (<div>failed to load</div>);
@ -124,54 +106,6 @@ export default function Qr()
return ordernum;
}
//const handle drag sorting
function handleSort()
{
//duplicate items
let _itemList = [...itemList.current];
//remove and save the dragged item content
const draggedItemContent = _itemList.splice(dragItem.current, 1)[0];
//switch the position
_itemList.splice(dragOverItem.current, 0, draggedItemContent);
//reset the position ref
dragItem.current = null;
dragOverItem.current = null;
//update the actual array
itemList.current = _itemList;
// set new itemorder
let newItemOrder = 0;
let digit = 100;
// name 1
// telefon 2
// email 3
// email
// name
// telefon
// email is first 1 -> 3
// name is second 2 -> 1
// telefon third 3 -> 2
// name telefon email
// 2 3 1 ordernum
_itemList.map((item, index) =>
{
digit = 10**(3-item.ordernum);
newItemOrder += (index+1) * digit;
});
dog.qr_item_sequence = newItemOrder;
setDogRender(dog);
}
function oneQrBlock()
{
@ -258,23 +192,29 @@ export default function Qr()
*/
function OrderItemList(order: number)
{
let _itemList: ListItemT[] = [];
let _itemList: TDataItem[] = [];
let oNum = getItemOrderNumber_(order, 100);
_itemList[oNum-1] = itemListInit[0];
_itemList[oNum-1] = dndListInit.data[0];
oNum = getItemOrderNumber_(order, 10);
_itemList[oNum-1] = itemListInit[1];
_itemList[oNum-1] = dndListInit.data[1];
oNum = getItemOrderNumber_(order, 1);
_itemList[oNum-1] = itemListInit[2];
_itemList[oNum-1] = dndListInit.data[2];
itemList.current = _itemList;
dndList.current.data = _itemList;
}
const onChangeWidth = (e: ChangeEvent<HTMLInputElement> ) =>
const onChangeWidth = (val: number) =>
{
dog.qr_width_cm = parseInt(e.target.value)/10 ? parseInt(e.target.value)/10 : 0;
dog.qr_width_cm = val/10;
setDogRender(dog);
}
// const onChangeWidth = (e: ChangeEvent<HTMLInputElement> ) =>
// {
// dog.qr_width_cm = parseInt(e.target.value)/10 ? parseInt(e.target.value)/10 : 0;
// setDogRender(dog);
// }
const onChangeHeight = (e: ChangeEvent<HTMLInputElement> ) =>
{
dog.qr_height_cm = parseInt(e.target.value)/10 ? parseInt(e.target.value)/10 : 0;
@ -295,6 +235,33 @@ export default function Qr()
{
console.log('callBackDragEnd');
console.log(state);
// set new itemorder
let newItemOrder = 0;
let digit = 100;
// name 1
// telefon 2
// email 3
// email
// name
// telefon
// email is first 1 -> 3
// name is second 2 -> 1
// telefon third 3 -> 2
// name telefon email
// 2 3 1 ordernum
state.map((item, index) =>
{
digit = 10**(3-item.ordernum);
newItemOrder += (index+1) * digit;
});
dog.qr_item_sequence = newItemOrder;
setDogRender(dog);
}
@ -315,10 +282,6 @@ export default function Qr()
OrderItemList(dog.qr_item_sequence);
console.log(dog);
dndList.current = { data: [...itemList.current] };
console.log(dndList);
return (
@ -332,8 +295,8 @@ export default function Qr()
<div>
<div>Anhänger</div>
<label htmlFor='width'>Breite [mm] </label>
<input className='qr-input' type='number' id='width' name='width'
min="1" max="100"
<NumberInput className='qr-input' type='number' id='width' name='width'
min={1} max={100}
onChange={onChangeWidth} value={dog.qr_width_cm*10}/>
<label htmlFor='height'>Höhe [mm] </label>
<input className='qr-input' type='number' id='height' name='height'
@ -371,22 +334,9 @@ export default function Qr()
<div>Reihenfolge</div>
<div className='beschreibung'>Ändern durch Drag'n Drop</div>
<div className="list-container">
{itemList.current.map((item, index) => (
<div
key={index}
className="list-item"
draggable
onDragStart={(e) => {dragItem.current = index; }}
onDragEnter={(e) => {dragOverItem.current = index; }}
onDragEnd={handleSort}
onDragOver={(e) => {e.preventDefault(); }}
>
<li>{item.name}</li>
</div>
))}
<DndList dragEndHandler={callBackDragEnd} dataprops={dndList.current} />
</div>
</div>
<DndList dragEndHandler={callBackDragEnd} dataprops={dndList.current} />
</div>
<div className='column'>
<button id="saveButton" className='saveButton' onClick={saveHandler} >Werte sichern</button>