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

21
src/components/DndList.tsx
View File

@ -12,7 +12,7 @@ const useStyles = createStyles((theme) => ({
border: `1px solid ${ border: `1px solid ${
theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2] theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2]
}`, }`,
padding: `${theme.spacing.sm}px ${theme.spacing.xl}px`, padding: `${theme.spacing.xs}px ${theme.spacing.xl}px`,
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.white, backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.white,
marginBottom: theme.spacing.sm, marginBottom: theme.spacing.sm,
}, },
@ -38,18 +38,19 @@ export interface DndListProps {
dataprops: DndListProps; dataprops: DndListProps;
} }
export type TData = export type TDataItem =
{ {
id: string;
name: string;
ordernum: number;
id: string; // position: number;
name: string; // mass: number;
ordernum: number; // symbol: string;
// name: string;
}
// position: number; export type TData = TDataItem[];
// mass: number;
// symbol: string;
// name: string;
}[]
const reorder = ({current, from, to }: {current: TData; from: number; to: number }) => const reorder = ({current, from, to }: {current: TData; from: number; to: number }) =>
{ {

140
src/components/Qr.tsx
View File

@ -6,19 +6,11 @@ import Checkbox from './Checkbox';
import Img from './Img'; import Img from './Img';
import './Qr.css'; import './Qr.css';
import useSWR from 'swr'; import useSWR from 'swr';
import { MantineProvider } from '@mantine/core'; import { MantineProvider, NumberInput } from '@mantine/core';
import { NotificationsProvider, showNotification } from '@mantine/notifications'; 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() export default function Qr()
{ {
const { data, error, isLoading, mutate } = useSWR( ['Qr', 'SESS'], getDog); const { data, error, isLoading, mutate } = useSWR( ['Qr', 'SESS'], getDog);
@ -40,15 +32,6 @@ export default function Qr()
picture: '' picture: ''
}); });
//save reference for dragItem and dragOverItem //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 = const dndListInit: DndListProps =
{ {
data: data:
@ -59,7 +42,6 @@ export default function Qr()
] ]
}; };
const itemList = React.useRef<ListItemT[]>(itemListInit);
const dndList = React.useRef<DndListProps>(dndListInit); const dndList = React.useRef<DndListProps>(dndListInit);
if (error) return (<div>failed to load</div>); if (error) return (<div>failed to load</div>);
@ -125,54 +107,6 @@ export default function Qr()
return ordernum; 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() function oneQrBlock()
{ {
return( return(
@ -258,23 +192,29 @@ export default function Qr()
*/ */
function OrderItemList(order: number) function OrderItemList(order: number)
{ {
let _itemList: ListItemT[] = []; let _itemList: TDataItem[] = [];
let oNum = getItemOrderNumber_(order, 100); let oNum = getItemOrderNumber_(order, 100);
_itemList[oNum-1] = itemListInit[0]; _itemList[oNum-1] = dndListInit.data[0];
oNum = getItemOrderNumber_(order, 10); oNum = getItemOrderNumber_(order, 10);
_itemList[oNum-1] = itemListInit[1]; _itemList[oNum-1] = dndListInit.data[1];
oNum = getItemOrderNumber_(order, 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); 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> ) => const onChangeHeight = (e: ChangeEvent<HTMLInputElement> ) =>
{ {
dog.qr_height_cm = parseInt(e.target.value)/10 ? parseInt(e.target.value)/10 : 0; 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('callBackDragEnd');
console.log(state); 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); OrderItemList(dog.qr_item_sequence);
console.log(dog); console.log(dog);
dndList.current = { data: [...itemList.current] };
console.log(dndList); console.log(dndList);
return ( return (
@ -332,8 +295,8 @@ 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 className='qr-input' type='number' id='width' name='width' <NumberInput className='qr-input' type='number' id='width' name='width'
min="1" max="100" min={1} max={100}
onChange={onChangeWidth} value={dog.qr_width_cm*10}/> onChange={onChangeWidth} value={dog.qr_width_cm*10}/>
<label htmlFor='height'>Höhe [mm] </label> <label htmlFor='height'>Höhe [mm] </label>
<input className='qr-input' type='number' id='height' name='height' <input className='qr-input' type='number' id='height' name='height'
@ -371,22 +334,9 @@ export default function Qr()
<div>Reihenfolge</div> <div>Reihenfolge</div>
<div className='beschreibung'>Ändern durch Drag'n Drop</div> <div className='beschreibung'>Ändern durch Drag'n Drop</div>
<div className="list-container"> <div className="list-container">
{itemList.current.map((item, index) => ( <DndList dragEndHandler={callBackDragEnd} dataprops={dndList.current} />
<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>
))}
</div> </div>
</div> </div>
<DndList dragEndHandler={callBackDragEnd} dataprops={dndList.current} />
</div> </div>
<div className='column'> <div className='column'>
<button id="saveButton" className='saveButton' onClick={saveHandler} >Werte sichern</button> <button id="saveButton" className='saveButton' onClick={saveHandler} >Werte sichern</button>