Qr werte sichern
This commit is contained in:
@ -1,4 +1,4 @@
|
||||
import React, { useCallback, useContext, useEffect, useState } from 'react'
|
||||
import React, { MouseEventHandler, useCallback, useContext, useEffect, useState } from 'react'
|
||||
import { Link } from 'react-router-dom';
|
||||
import { UserCtx, UserCtxT, DogT, Axios, ResponseT, TUser } from '../context/UserContext';
|
||||
import Checkbox from './Checkbox';
|
||||
@ -11,13 +11,20 @@ type ListItemT =
|
||||
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 { user, updateQR } = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
|
||||
const [dog, setDog] = useState<ResponseT | any>({}); // local dog not the dog in UserContext
|
||||
const [width, setWidth] = useState(2.4);
|
||||
const [height, setHeight] = useState(3.7);
|
||||
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 [errMsg, setErrMsg] = useState("false");
|
||||
const [successMsg, setSuccessMsg] = useState("false");
|
||||
const [itemList, setItemList] = useState([
|
||||
{name:'Name', ordernum: 1},
|
||||
{name:'Telefon', ordernum: 2},
|
||||
@ -28,23 +35,27 @@ export default function Qr()
|
||||
const dragItem = React.useRef<any>(null);
|
||||
const dragOverItem = React.useRef<any>(null);
|
||||
|
||||
const incrementFontSize = (():void =>
|
||||
const incrementFontSize = ((event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined =>
|
||||
{
|
||||
event.preventDefault();
|
||||
if(fontSize < 200)
|
||||
{
|
||||
setFontSize(fontSize + 1);
|
||||
}
|
||||
|
||||
console.log("\nincrementFontSize " + fontSize);
|
||||
return;
|
||||
});
|
||||
|
||||
const decrementFontSize = (():void =>
|
||||
const decrementFontSize = ((event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined =>
|
||||
{
|
||||
event.preventDefault();
|
||||
if(fontSize > 1)
|
||||
{
|
||||
setFontSize(fontSize -1);
|
||||
}
|
||||
console.log("\ndecrementFontSize " + fontSize);
|
||||
return;
|
||||
});
|
||||
|
||||
function setBitField(val: number, checked: boolean, bit: number) : number
|
||||
@ -86,6 +97,16 @@ export default function Qr()
|
||||
|
||||
return ordernum;
|
||||
}
|
||||
|
||||
function getItemOrderNumber_(order: number, digit: number)
|
||||
{
|
||||
let ordernum = order; // 123
|
||||
ordernum = ordernum % (digit*10); // 123
|
||||
ordernum = Math.trunc(ordernum / digit);
|
||||
|
||||
return ordernum;
|
||||
}
|
||||
|
||||
//const handle drag sorting
|
||||
function handleSort()
|
||||
{
|
||||
@ -115,6 +136,78 @@ export default function Qr()
|
||||
});
|
||||
setItemOrder(newItemOrder);
|
||||
}
|
||||
|
||||
function oneQrBlock()
|
||||
{
|
||||
return(
|
||||
<div className='qrCodeBackFront'>
|
||||
<div className='qrCode frame'>
|
||||
<div className='qrCode__'>SCAN ME</div>
|
||||
<Img pth={dog.data.qr_code}/>
|
||||
</div>
|
||||
<div className='qrCode vert 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>);
|
||||
}
|
||||
|
||||
|
||||
|
||||
const saveHandler = (event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined =>
|
||||
{
|
||||
event.preventDefault();
|
||||
console.log("saveHandler \n");
|
||||
console.log(event);
|
||||
updateQR(
|
||||
{
|
||||
qr_width_cm: width,
|
||||
qr_height_cm: height,
|
||||
qr_fontsize: fontSize,
|
||||
qr_visible_items: visibleItem,
|
||||
qr_item_sequence: itemOrder
|
||||
}
|
||||
).then((resQR) =>
|
||||
{
|
||||
if(resQR.success)
|
||||
{
|
||||
setSuccessMsg('Daten gesichert!');
|
||||
setErrMsg("false");
|
||||
}
|
||||
else if(!resQR.success && resQR.message)
|
||||
{
|
||||
setSuccessMsg("false");
|
||||
setErrMsg(resQR.message);
|
||||
}
|
||||
})
|
||||
.catch((err) => console.error(err));
|
||||
return;
|
||||
}
|
||||
|
||||
const printHandler = (event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined =>
|
||||
{
|
||||
event.preventDefault();
|
||||
console.log("printHandler \n");
|
||||
console.log(event);
|
||||
window.print();
|
||||
return;
|
||||
}
|
||||
|
||||
function OrderItemList(order: number)
|
||||
{
|
||||
let _itemList: {name:string; ordernum: number}[] = [];
|
||||
let oNum = getItemOrderNumber_(order, 100);
|
||||
let item = itemList.find( x => x.ordernum === oNum);
|
||||
_itemList.push(item!);
|
||||
oNum = getItemOrderNumber_(order, 10);
|
||||
item = itemList.find( x => x.ordernum === oNum);
|
||||
_itemList.push(item!);
|
||||
oNum = getItemOrderNumber_(order, 1);
|
||||
item = itemList.find( x => x.ordernum === oNum);
|
||||
_itemList.push(item!);
|
||||
setItemList(_itemList);
|
||||
}
|
||||
|
||||
if(user && dog.success === undefined)
|
||||
{
|
||||
@ -124,7 +217,12 @@ export default function Qr()
|
||||
})
|
||||
.then((resDog) =>
|
||||
{
|
||||
setDog(resDog.data);
|
||||
let locDog: DogT = resDog.data.data;
|
||||
setDog(resDog.data); // ResponseT
|
||||
setFontSize(locDog.qr_fontsize);
|
||||
setVisibleItem(locDog.qr_visible_items);
|
||||
setItemOrder(locDog.qr_item_sequence);
|
||||
OrderItemList(locDog.qr_item_sequence);
|
||||
})
|
||||
.catch((err) => console.error(err));
|
||||
}
|
||||
@ -135,12 +233,15 @@ export default function Qr()
|
||||
<div>
|
||||
<h1>Qr-Code Druck</h1>
|
||||
<Link to={"/profil"}>Zurück zum Profil</Link>
|
||||
<div className='qrSettings____'>
|
||||
<div className='qrSettings'>
|
||||
<div>Schriftgröße</div>
|
||||
<div className='spinBtn'>
|
||||
<button onClick={decrementFontSize}>-</button>
|
||||
<div>{fontSize}</div>
|
||||
<button onClick={incrementFontSize}>+</button>
|
||||
<div>
|
||||
<div>Schriftgröße</div>
|
||||
<div className='spinBtn'>
|
||||
<button onClick={decrementFontSize}>-</button>
|
||||
<div>{fontSize}</div>
|
||||
<button onClick={incrementFontSize}>+</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>Sichtbare Elemente</div>
|
||||
@ -163,104 +264,40 @@ export default function Qr()
|
||||
changeEvent={checkBoxChange}
|
||||
/>
|
||||
</div>
|
||||
<div>Reihenfolge</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>Reihenfolge</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>
|
||||
</div>
|
||||
|
||||
<div className='column'>
|
||||
<button id="saveButton" className='saveButton' onClick={saveHandler} >Werte sichern</button>
|
||||
<button id="printButton" className='printButton' onClick={printHandler} >QR-Code drucken</button>
|
||||
{successMsg !== "false" && <div className="success-msg">{successMsg}</div>}
|
||||
{errMsg !== "false" && <div className="err-msg">{errMsg}</div>}
|
||||
</div>
|
||||
</div>
|
||||
<div className='blockRepeat'>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
{oneQrBlock()}
|
||||
{oneQrBlock()}
|
||||
{oneQrBlock()}
|
||||
{oneQrBlock()}
|
||||
{oneQrBlock()}
|
||||
{oneQrBlock()}
|
||||
</div>
|
||||
</div> }
|
||||
{/* { !dog.data && user &&
|
||||
<>
|
||||
<h1>Qr-Code Druck</h1>
|
||||
<div>Logged in als:</div>
|
||||
<div>{user?.email}</div>
|
||||
<div>{user?.qr_id}</div>
|
||||
</>
|
||||
} */}
|
||||
{ !dog.data && !user &&
|
||||
<>
|
||||
<h1>Qr-Code Druck</h1>
|
||||
|
||||
Reference in New Issue
Block a user