qr checkbox reihenfolge
This commit is contained in:
@ -1,15 +1,33 @@
|
||||
import React, { useContext, useState } from 'react'
|
||||
import { Link } from 'react-router-dom';
|
||||
import { UserCtx, UserCtxT, DogT, Axios, ResponseT, TUser } from '../context/UserContext';
|
||||
import Checkbox from './Checkbox';
|
||||
import Img from './Img';
|
||||
import './Qr.css';
|
||||
|
||||
type ListItemT =
|
||||
{
|
||||
name: string;
|
||||
ordernum: number;
|
||||
}
|
||||
|
||||
|
||||
export default function Qr()
|
||||
{
|
||||
const { user } = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
|
||||
const [dog, setDog] = useState<DogT | any>({}); // local dog not the dog in UserContext
|
||||
const [fontSize, setFontSize] = useState(100);
|
||||
const [visibleItem, setVisibleItem] = useState(0b111); // 100 name, 10 phone, 1 email
|
||||
const [itemOrder, setItemOrder] = useState(123); // name first, phone second, email third
|
||||
const [itemList, setItemList] = useState([
|
||||
{name:'Name', ordernum: 1},
|
||||
{name:'Telefon', ordernum: 2},
|
||||
{name:'Email', ordernum: 3}
|
||||
]);
|
||||
//save reference for dragItem and dragOverItem
|
||||
const dragItem = React.useRef<any>(null);
|
||||
const dragOverItem = React.useRef<any>(null);
|
||||
|
||||
function incrementFontSize()
|
||||
{
|
||||
if(fontSize < 200)
|
||||
@ -17,6 +35,7 @@ export default function Qr()
|
||||
setFontSize(fontSize + 1);
|
||||
}
|
||||
}
|
||||
|
||||
function decrementFontSize()
|
||||
{
|
||||
if(fontSize > 1)
|
||||
@ -25,6 +44,75 @@ export default function Qr()
|
||||
}
|
||||
}
|
||||
|
||||
function setBitField(val: number, checked: boolean, bit: number) : number
|
||||
{
|
||||
if(checked)
|
||||
{
|
||||
val |= bit;
|
||||
}
|
||||
else
|
||||
{
|
||||
val ^= bit;
|
||||
}
|
||||
return val;
|
||||
}
|
||||
|
||||
function checkBoxChange(id: string, checked: boolean) : void
|
||||
{
|
||||
let value = visibleItem;
|
||||
if(id==="name")
|
||||
{
|
||||
value = setBitField(value, checked, 0b100);
|
||||
}
|
||||
if(id==="phone")
|
||||
{
|
||||
value = setBitField(value, checked, 0b010);
|
||||
}
|
||||
if(id==="email")
|
||||
{
|
||||
value = setBitField(value, checked, 0b001);
|
||||
}
|
||||
setVisibleItem(value);
|
||||
}
|
||||
|
||||
function getItemOrderNumber(digit: number)
|
||||
{
|
||||
let ordernum = itemOrder; // 123
|
||||
ordernum = ordernum % (digit*10); // 123
|
||||
ordernum = Math.trunc(ordernum / digit);
|
||||
|
||||
return ordernum;
|
||||
}
|
||||
//const handle drag sorting
|
||||
function handleSort()
|
||||
{
|
||||
//duplicate items
|
||||
let _itemList = [...itemList];
|
||||
|
||||
//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
|
||||
setItemList(_itemList);
|
||||
|
||||
// set new itemorder
|
||||
let newItemOrder = 0;
|
||||
let digit = 100;
|
||||
_itemList.map((item, index) =>
|
||||
{
|
||||
newItemOrder += item.ordernum * digit;
|
||||
digit /= 10;
|
||||
});
|
||||
setItemOrder(newItemOrder);
|
||||
}
|
||||
|
||||
if(user && dog.success === undefined)
|
||||
{
|
||||
Axios.post<ResponseT>('getDog.php',
|
||||
@ -46,19 +134,45 @@ export default function Qr()
|
||||
<Link to={"/profil"}>Zurück zum Profil</Link>
|
||||
|
||||
<div>
|
||||
<button onClick={incrementFontSize}>up</button>
|
||||
<div>{fontSize}</div>
|
||||
<button onClick={decrementFontSize}>down</button>
|
||||
<button onClick={incrementFontSize}>up</button>
|
||||
<div>{fontSize}</div>
|
||||
<button onClick={decrementFontSize}>down</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
{/* <div>Logged in als:</div>
|
||||
<div>{user?.email}</div>
|
||||
<div>{user?.qr_id}</div>
|
||||
<div>{dog.data.qr_code}</div> */}
|
||||
|
||||
<div>
|
||||
<Checkbox
|
||||
id='name'
|
||||
label={'Name'}
|
||||
checked={(visibleItem & 0b100) > 0}
|
||||
changeEvent={checkBoxChange}
|
||||
/>
|
||||
<Checkbox
|
||||
id='phone'
|
||||
label={'Telefon'}
|
||||
checked={(visibleItem & 0b010) > 0}
|
||||
changeEvent={checkBoxChange}
|
||||
/>
|
||||
<Checkbox
|
||||
id='email'
|
||||
label={'Email'}
|
||||
checked={(visibleItem & 0b001) > 0}
|
||||
changeEvent={checkBoxChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="list-container">
|
||||
{itemList.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()}>
|
||||
<h6>{item.name}</h6>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className='blockRepeat'>
|
||||
<div className='qrCodeBackFront'>
|
||||
<div className='qrCode frame'>
|
||||
@ -66,9 +180,31 @@ export default function Qr()
|
||||
<Img pth={dog.data.qr_code}/>
|
||||
</div>
|
||||
<div className='qrCodeVert frame' style={{ fontSize: fontSize + '%' }}>
|
||||
<div className='vertFont'>{dog.data.name}</div>
|
||||
<div className='vertFont'>{dog.data.phone}</div>
|
||||
<div className='vertFont'>{dog.data.email}</div>
|
||||
{((visibleItem & 0b100) > 0) && <div className={`vertFont order${getItemOrderNumber(100)}`}>{dog.data.name}</div>}
|
||||
{((visibleItem & 0b010) > 0) && <div className={`vertFont order${getItemOrderNumber(10)}`}>{dog.data.phone}</div>}
|
||||
{((visibleItem & 0b001) > 0) && <div className={`vertFont order${getItemOrderNumber(1)}`}>{dog.data.email}</div>}
|
||||
</div>
|
||||
</div>
|
||||
<div className='qrCodeBackFront'>
|
||||
<div className='qrCode frame'>
|
||||
<div className='qrCode__'>SCAN ME</div>
|
||||
<Img pth={dog.data.qr_code}/>
|
||||
</div>
|
||||
<div className='qrCodeVert frame' style={{ fontSize: fontSize + '%' }}>
|
||||
{((visibleItem & 0b100) > 0) && <div className={`vertFont order${getItemOrderNumber(100)}`}>{dog.data.name}</div>}
|
||||
{((visibleItem & 0b010) > 0) && <div className={`vertFont order${getItemOrderNumber(10)}`}>{dog.data.phone}</div>}
|
||||
{((visibleItem & 0b001) > 0) && <div className={`vertFont order${getItemOrderNumber(1)}`}>{dog.data.email}</div>}
|
||||
</div>
|
||||
</div>
|
||||
<div className='qrCodeBackFront'>
|
||||
<div className='qrCode frame'>
|
||||
<div className='qrCode__'>SCAN ME</div>
|
||||
<Img pth={dog.data.qr_code}/>
|
||||
</div>
|
||||
<div className='qrCodeVert frame' style={{ fontSize: fontSize + '%' }}>
|
||||
{((visibleItem & 0b100) > 0) && <div className={`vertFont order${getItemOrderNumber(100)}`}>{dog.data.name}</div>}
|
||||
{((visibleItem & 0b010) > 0) && <div className={`vertFont order${getItemOrderNumber(10)}`}>{dog.data.phone}</div>}
|
||||
{((visibleItem & 0b001) > 0) && <div className={`vertFont order${getItemOrderNumber(1)}`}>{dog.data.email}</div>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -79,9 +215,9 @@ export default function Qr()
|
||||
<Img pth={dog.data.qr_code}/>
|
||||
</div>
|
||||
<div className='qrCodeVert frame' style={{ fontSize: fontSize + '%' }}>
|
||||
<div className='vertFont order2'>{dog.data.name}</div>
|
||||
<div className='vertFont order3'>{dog.data.phone}</div>
|
||||
<div className='vertFont order1'>{dog.data.email}</div>
|
||||
{((visibleItem & 0b100) > 0) && <div className={`vertFont order${getItemOrderNumber(100)}`}>{dog.data.name}</div>}
|
||||
{((visibleItem & 0b010) > 0) && <div className={`vertFont order${getItemOrderNumber(10)}`}>{dog.data.phone}</div>}
|
||||
{((visibleItem & 0b001) > 0) && <div className={`vertFont order${getItemOrderNumber(1)}`}>{dog.data.email}</div>}
|
||||
</div>
|
||||
</div>
|
||||
<div className='qrCodeBackFront'>
|
||||
@ -90,9 +226,9 @@ export default function Qr()
|
||||
<Img pth={dog.data.qr_code}/>
|
||||
</div>
|
||||
<div className='qrCodeVert frame' style={{ fontSize: fontSize + '%' }}>
|
||||
<div className='vertFont'>{dog.data.name}</div>
|
||||
<div className='vertFont'>{dog.data.phone}</div>
|
||||
<div className='vertFont'>{dog.data.email}</div>
|
||||
{((visibleItem & 0b100) > 0) && <div className={`vertFont order${getItemOrderNumber(100)}`}>{dog.data.name}</div>}
|
||||
{((visibleItem & 0b010) > 0) && <div className={`vertFont order${getItemOrderNumber(10)}`}>{dog.data.phone}</div>}
|
||||
{((visibleItem & 0b001) > 0) && <div className={`vertFont order${getItemOrderNumber(1)}`}>{dog.data.email}</div>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -103,33 +239,9 @@ export default function Qr()
|
||||
<Img pth={dog.data.qr_code}/>
|
||||
</div>
|
||||
<div className='qrCodeVert frame' style={{ fontSize: fontSize + '%' }}>
|
||||
<div className='vertFont'>{dog.data.name}</div>
|
||||
<div className='vertFont'>{dog.data.phone}</div>
|
||||
<div className='vertFont'>{dog.data.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='qrCodeBackFront'>
|
||||
<div className='qrCode frame'>
|
||||
<div className='qrCode__'>SCAN ME</div>
|
||||
<Img pth={dog.data.qr_code}/>
|
||||
</div>
|
||||
<div className='qrCodeVert frame' style={{ fontSize: fontSize + '%' }}>
|
||||
<div className='vertFont'>{dog.data.name}</div>
|
||||
<div className='vertFont'>{dog.data.phone}</div>
|
||||
<div className='vertFont'>{dog.data.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className='qrCodeBackFront'>
|
||||
<div className='qrCode frame'>
|
||||
<div className='qrCode__'>SCAN ME</div>
|
||||
<Img pth={dog.data.qr_code}/>
|
||||
</div>
|
||||
<div className='qrCodeVert frame' style={{ fontSize: fontSize + '%' }}>
|
||||
<div className='vertFont'>{dog.data.name}</div>
|
||||
<div className='vertFont'>{dog.data.phone}</div>
|
||||
<div className='vertFont'>{dog.data.email}</div>
|
||||
{((visibleItem & 0b100) > 0) && <div className={`vertFont order${getItemOrderNumber(100)}`}>{dog.data.name}</div>}
|
||||
{((visibleItem & 0b010) > 0) && <div className={`vertFont order${getItemOrderNumber(10)}`}>{dog.data.phone}</div>}
|
||||
{((visibleItem & 0b001) > 0) && <div className={`vertFont order${getItemOrderNumber(1)}`}>{dog.data.email}</div>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user