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

Qr

Browse Source
This commit is contained in:
Peter Hoppe
2023-02-03 16:33:35 +01:00
parent 3b4ea00378
commit a55bdfc775
9 changed files with 371 additions and 355 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Dog.tsx
View File

@ -1,5 +1,5 @@
import { ResponseT, DogT} from '../context/UserContext';
import { ReactNode, useState } from 'react'
import { ReactNode } from 'react'
import { useParams } from "react-router-dom";
import Img from './Img';
import DogNameTxt from './DogNameTxt';

1
src/components/FileUpload.tsx
View File

@ -1,7 +1,6 @@
import { useState } from "react";
import { Link } from "react-router-dom";
import {upload as ApiUpload} from "../services/PhpApi";
import IFile from "../types/File";
import PreviewUpload from "./PreviewUpload";
const FileUpload: React.FC = () =>

2
src/components/Header.tsx
View File

@ -1,6 +1,6 @@
import './Header.css';
import '../App.css';
import {Axios, logOut} from '../services/PhpApi'
import {logOut} from '../services/PhpApi'
import { toast, Toaster } from 'react-hot-toast';

4
src/components/Login.tsx
View File

@ -1,5 +1,5 @@
import {useState} from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { Link/*, useNavigate*/ } from 'react-router-dom';
import './Login.css';
import {getUser, loginUser} from '../services/PhpApi'
import { toast, Toaster } from 'react-hot-toast';
@ -13,7 +13,7 @@ const Login = () =>
});
// only for redirect
const {data, error, isLoading, mutate} = useSWR("/login", getUser);
const navigate = useNavigate();
//const navigate = useNavigate();
console.log('Login getUser');
console.log(data);

10
src/components/PreviewUpload.tsx
View File

@ -1,6 +1,5 @@
import React, { useState } from 'react';
import { ResponseT } from '../context/UserContext';
import {Axios, getDog} from '../services/PhpApi';
import {getDog} from '../services/PhpApi';
import useSWR from 'swr';
function PreviewUpload({chgFile}:{chgFile: any})
@ -11,19 +10,14 @@ function PreviewUpload({chgFile}:{chgFile: any})
// const [dog, setDog] = useState<ResponseT | any>({}); // local dog not the dog in UserContext
const { data, error, isLoading, mutate } = useSWR(['PreviewUpload', 'SESS'], getDog );
const { data, error, isLoading } = useSWR(['PreviewUpload', 'SESS'], getDog );
if (error) return (<div>failed to load</div>);
if (isLoading) return (<div>loading...</div>);
console.log('PreviewUpload getDog');
console.log(data);
const dog: ResponseT | any = data.data;
let file_loc: string | undefined = "./uploads"+ data.data.picture;
// setDog(data.data);
// setFile("./uploads"+ data.data.picture);
const handleChange = async (
event: React.ChangeEvent<HTMLInputElement>
): Promise<any> =>

2
src/components/Profil.tsx
View File

@ -2,7 +2,7 @@ import React, { useState } from 'react';
import useSWR from 'swr';
import { Link } from 'react-router-dom';
import toast, { Toaster } from 'react-hot-toast';
import { ResponseT, TUser} from '../context/UserContext';
import {TUser} from '../context/UserContext';
import {getProfilData, updateDog} from '../services/PhpApi';
import CreateQr from '../services/CreateQr';
import Img from './Img';

505
src/components/Qr.tsx
View File

@ -1,267 +1,291 @@
// import React, { ChangeEvent, MouseEventHandler, useContext, useState } from 'react'
// import { Link } from 'react-router-dom';
// import { UserCtx, UserCtxT, DogT, ResponseT, TUser } from '../context/UserContext';
// import {Axios, updateQR} from '../services/PhpApi';
// import Checkbox from './Checkbox';
// import Img from './Img';
// import './Qr.css';
import React, { ChangeEvent, MouseEventHandler, useState } from 'react'
import { Link } from 'react-router-dom';
import { DogT } from '../context/UserContext';
import {getDog, updateQR} from '../services/PhpApi';
import Checkbox from './Checkbox';
import Img from './Img';
import './Qr.css';
import useSWR from 'swr';
// type ListItemT =
// {
// name: string;
// ordernum: number;
// }
type ListItemT =
{
id: string;
name: string;
ordernum: number;
}
export default function Qr()
{
// const { user } = 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([
// {id: '0', name:'Name', ordernum: 1},
// {id: '1', name:'Telefon', ordernum: 2},
// {id: '2', name:'Email', ordernum: 3}
// ]);
const { data, error, isLoading, mutate } = useSWR( ['Qr', 'SESS'], getDog);
// data ist dogdata, logindata holt sich getDog.php aus $_SESSION
// //save reference for dragItem and dragOverItem
// const dragItem = React.useRef<any>(null);
// const dragOverItem = React.useRef<any>(null);
const [dogRender, setDogRender] = useState<DogT>(
{
id: 0,
qr_id: '',
email: '',
name: '',
phone: '',
qr_width_cm: 0,
qr_height_cm: 0,
qr_fontsize: 0,
qr_visible_items: 0,
qr_item_sequence: 0,
qr_code: '',
picture: ''
});
const [errMsg, setErrMsg] = useState("false");
const [successMsg, setSuccessMsg] = useState("false");
//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 incrementFontSize = ((event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined =>
// // {
// // event.preventDefault();
// // if(fontSize < 200)
// // {
// // setFontSize(fontSize + 1);
// // }
const itemList = React.useRef<ListItemT[]>(itemListInit);
// // console.log("\nincrementFontSize " + fontSize);
// // return;
// // });
if (error) return (<div>failed to load</div>);
if (isLoading) return (<div>loading...</div>);
// // const decrementFontSize = ((event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined =>
// // {
// // event.preventDefault();
// // if(fontSize > 1)
// // {
// // setFontSize(fontSize -1);
// // }
// // console.log("\ndecrementFontSize " + fontSize);
// // return;
// // });
// local dog
let dog: DogT =
{
id: 0,
qr_id: '',
email: '',
name: '',
phone: '',
qr_width_cm: 0,
qr_height_cm: 0,
qr_fontsize: 0,
qr_visible_items: 0,
qr_item_sequence: 0,
qr_code: '',
picture: ''
};
// function setBitField(val: number, checked: boolean, bit: number) : number
// {
// if(checked)
// {
// val |= bit;
// }
// else
// {
// val ^= bit;
// }
// return val;
// }
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 checkBoxChange(id: string, checked: boolean) : void
{
let value = dog.qr_visible_items;
console.log(value);
if(id==="name")
{
value = setBitField(value, checked, 0b100);
}
if(id==="phone")
{
value = setBitField(value, checked, 0b010);
}
if(id==="email")
{
value = setBitField(value, checked, 0b001);
}
console.log(value);
dog.qr_visible_items = value;
setDogRender(dog);
}
// function getItemOrderNumber(digit: number)
// {
// let ordernum = itemOrder; // 123
// ordernum = ordernum % (digit*10); // 123
// ordernum = Math.trunc(ordernum / digit);
function getItemOrderNumber(digit: number)
{
let ordernum = dog.qr_item_sequence; // 123
ordernum = ordernum % (digit*10); // 123
ordernum = Math.trunc(ordernum / digit);
// return ordernum;
// }
return ordernum;
}
// function getItemOrderNumber_(order: number, digit: number)
// {
// let ordernum = order; // 123
// ordernum = ordernum % (digit*10); // 123
// ordernum = Math.trunc(ordernum / digit);
//const handle drag sorting
function handleSort()
{
//duplicate items
let _itemList = [...itemList.current];
// return ordernum;
// }
//remove and save the dragged item content
const draggedItemContent = _itemList.splice(dragItem.current, 1)[0];
// //const handle drag sorting
// function handleSort()
// {
// // console.log('handleSort current:' + dragItem.current);
// //duplicate items
// let _itemList = [...itemList];
//switch the position
_itemList.splice(dragOverItem.current, 0, draggedItemContent);
// //remove and save the dragged item content
// const draggedItemContent = _itemList.splice(dragItem.current, 1)[0];
//reset the position ref
dragItem.current = null;
dragOverItem.current = null;
// //switch the position
// _itemList.splice(dragOverItem.current, 0, draggedItemContent);
//update the actual array
itemList.current = _itemList;
// //reset the position ref
// dragItem.current = null;
// dragOverItem.current = null;
// set new itemorder
let newItemOrder = 0;
let digit = 100;
// //update the actual array
// setItemList(_itemList);
// name 1
// telefon 2
// email 3
// // set new itemorder
// let newItemOrder = 0;
// let digit = 100;
// email
// name
// telefon
// // name 1
// // telefon 2
// // email 3
// email is first 1 -> 3
// name is second 2 -> 1
// telefon third 3 -> 2
// // email
// // name
// // telefon
// name telefon email
// 2 3 1 ordernum
// // email is first 1 -> 3
// // name is second 2 -> 1
// // telefon third 3 -> 2
_itemList.map((item, index) =>
{
digit = 10**(3-item.ordernum);
newItemOrder += (index+1) * digit;
});
// // 231
dog.qr_item_sequence = newItemOrder;
setDogRender(dog);
}
// // console.log('handleSort itemList:');
// // console.log(_itemList);
function oneQrBlock()
{
return(
<div className='qrCodeBackFront'>
<div className='qrCode frame' style={{height : dog.qr_height_cm + 'cm', width : dog.qr_width_cm + 'cm'}}>
<div className='qrCode__'>SCAN ME</div>
<Img pth={dog.qr_code} className='qrCodeImg'/>
</div>
<div className='qrCode vert frame' style={{ height : dog.qr_height_cm + 'cm', width : dog.qr_width_cm + 'cm', fontSize: dog.qr_fontsize + '%' }}>
{((dog.qr_visible_items & 0b100) > 0) && <div className={`vertFont order${getItemOrderNumber(100)}`}>{dog.name}</div>}
{((dog.qr_visible_items & 0b010) > 0) && <div className={`vertFont order${getItemOrderNumber(10)}`}>{dog.phone}</div>}
{((dog.qr_visible_items & 0b001) > 0) && <div className={`vertFont order${getItemOrderNumber(1)}`}>{dog.email}</div>}
</div>
</div>);
}
// _itemList.map((item, index) =>
// {
// digit = 10**(3-item.ordernum);
// newItemOrder += (index+1) * digit;
// });
// setItemOrder(newItemOrder);
// // console.log('handleSort newItemOrder:' + newItemOrder);
// }
const saveHandler = (event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined =>
{
event.preventDefault();
console.log("saveHandler \n");
console.log(event);
updateQR(
{
qr_width_cm: dog.qr_width_cm,
qr_height_cm: dog.qr_height_cm,
qr_fontsize: dog.qr_fontsize,
qr_visible_items: dog.qr_visible_items,
qr_item_sequence: dog.qr_item_sequence
}
).then((resQR) =>
{
if(resQR.success)
{
setSuccessMsg('Daten gesichert!');
mutate();
}
else if(!resQR.success && resQR.message)
{
setSuccessMsg("false");
setErrMsg(resQR.message);
}
})
.catch((err) => console.error(err));
return;
}
// function oneQrBlock()
// {
// return(
// <div className='qrCodeBackFront'>
// <div className='qrCode frame' style={{height : height + 'cm', width : width + 'cm'}}>
// <div className='qrCode__'>SCAN ME</div>
// <Img pth={dog.data.qr_code} className='qrCodeImg'/>
// </div>
// <div className='qrCode vert frame' style={{ height : height + 'cm', width : width + 'cm', 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 printHandler = (event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined =>
{
event.preventDefault();
console.log("printHandler \n");
console.log(event);
window.print();
return;
}
// 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;
// }
function getItemOrderNumber_(order: number, digit: number)
{
let ordernum = order; // 123
ordernum = ordernum % (digit*10); // 123
ordernum = Math.trunc(ordernum / digit);
// const printHandler = (event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined =>
// {
// event.preventDefault();
// console.log("printHandler \n");
// console.log(event);
// window.print();
// return;
// }
return ordernum;
}
// function OrderItemList(order: 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!);
// 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);
// }
// const onChangeWidth = (e: ChangeEvent<HTMLInputElement> ) =>
// {
// setWidth(parseInt(e.target.value)/10 ? parseInt(e.target.value)/10 : 0);
// }
/**
* order the list from order
*
* @param order
* normal order is 123 mean name phone email
* 231 mean name get ordernumber 2
* phone get ordernumber 3
* email get ordernumber 1
* new order is email name phone
*
*
*
*/
function OrderItemList(order: number)
{
let _itemList: ListItemT[] = [];
let oNum = getItemOrderNumber_(order, 100);
_itemList[oNum-1] = itemListInit[0];
oNum = getItemOrderNumber_(order, 10);
_itemList[oNum-1] = itemListInit[1];
oNum = getItemOrderNumber_(order, 1);
_itemList[oNum-1] = itemListInit[2];
// const onChangeHeight = (e: ChangeEvent<HTMLInputElement> ) =>
// {
// setHeight(parseInt(e.target.value)/10 ? parseInt(e.target.value)/10 : 0);
// }
itemList.current = _itemList;
}
// const onChangeFontSize = (e: ChangeEvent<HTMLInputElement> ) =>
// {
// setFontSize(parseInt(e.target.value) ? parseInt(e.target.value) : 0);
// }
const onChangeWidth = (e: ChangeEvent<HTMLInputElement> ) =>
{
dog.qr_width_cm = parseInt(e.target.value)/10 ? parseInt(e.target.value)/10 : 0;
setDogRender(dog);
}
// if(user && dog.success === undefined)
// {
// Axios.post<ResponseT>('getDog.php',
// {
// qr_id: user.qr_id
// })
// .then((resDog) =>
// {
// let locDog: DogT = resDog.data.data;
// setDog(resDog.data); // ResponseT
// setWidth(locDog.qr_width_cm);
// setHeight(locDog.qr_height_cm);
// setFontSize(locDog.qr_fontsize);
// setVisibleItem(locDog.qr_visible_items);
// setItemOrder(locDog.qr_item_sequence);
// OrderItemList(locDog.qr_item_sequence);
// })
// .catch((err) => console.error(err));
// }
const onChangeHeight = (e: ChangeEvent<HTMLInputElement> ) =>
{
dog.qr_height_cm = parseInt(e.target.value)/10 ? parseInt(e.target.value)/10 : 0;
setDogRender(dog);
}
const onChangeFontSize = (e: ChangeEvent<HTMLInputElement> ) =>
{
dog.qr_fontsize = parseInt(e.target.value) ? parseInt(e.target.value) : 0;
setDogRender(dog);
}
console.log('dogRender');
console.log(dogRender);
console.log('data');
console.log(data);
if (dogRender.email)
{
Object.assign(dog, dogRender);
}
else
{
Object.assign(dog, data.data);
}
OrderItemList(dog.qr_item_sequence);
console.log(dog);
return (
<>
{/* {user && dog.data &&
<div>
<h1>Qr-Code Druck</h1>
<Link to={"/profil"}>Zurück zum Profil</Link>
@ -272,36 +296,36 @@ export default function Qr()
<label htmlFor='width'>Breite [mm] </label>
<input className='qr-input' type='number' id='width' name='width'
min="1" max="100"
onChange={onChangeWidth} value={width*10}/>
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'
min="1" max="100"
onChange={onChangeHeight} value={height*10}/>
onChange={onChangeHeight} value={dog.qr_height_cm*10}/>
</div>
<div>
<label htmlFor='fontSize'>Schriftgröße </label>
<input className='qr-input' type='number' id='fontSize' name='fontSize'
min="1" max="200"
onChange={onChangeFontSize} value={fontSize} />
onChange={onChangeFontSize} value={dog.qr_fontsize} />
</div>
<div>
<div>Sichtbare Elemente</div>
<Checkbox
id='name'
label={'Name'}
checked={(visibleItem & 0b100) > 0}
checked={(dog.qr_visible_items & 0b100) > 0}
changeEvent={checkBoxChange}
/>
<Checkbox
id='phone'
label={'Telefon'}
checked={(visibleItem & 0b010) > 0}
checked={(dog.qr_visible_items & 0b010) > 0}
changeEvent={checkBoxChange}
/>
<Checkbox
id='email'
label={'Email'}
checked={(visibleItem & 0b001) > 0}
checked={(dog.qr_visible_items & 0b001) > 0}
changeEvent={checkBoxChange}
/>
</div>
@ -309,7 +333,7 @@ export default function Qr()
<div>Reihenfolge</div>
<div className='beschreibung'>Ändern durch Drag'n Drop</div>
<div className="list-container">
{itemList.map((item, index) => (
{itemList.current.map((item, index) => (
<div
key={index}
className="list-item"
@ -340,13 +364,6 @@ export default function Qr()
{oneQrBlock()}
{oneQrBlock()}
</div>
</div> }
{ !dog.data && !user &&
<>
<h1>Qr-Code Druck</h1>
<div>nothing</div>
</>
} */}
</>
</div>
);
}

2
src/services/CreateQr.ts
View File

@ -1,6 +1,4 @@
import { upload } from './PhpApi';
import React from 'react'
import QRCodeStyling from 'qr-code-styling';
export default async function CreateQr({qr_id}:{qr_id: string | undefined})

10
src/services/PhpApi.ts
View File

@ -35,7 +35,7 @@ export const getDog = async ( params: string[] | undefined) : Promise<ResponseT>
{
qrid = params[1];
}
if(params !== undefined && params.length == 1)
if(params !== undefined && params.length === 1)
{
qrid = params[0];
}
@ -88,6 +88,14 @@ export const registerUser = async ({email,password}:
export const updateQR = async ({qr_width_cm, qr_height_cm, qr_fontsize, qr_visible_items, qr_item_sequence}:
{qr_width_cm: number, qr_height_cm: number, qr_fontsize: number, qr_visible_items: number, qr_item_sequence: number}) =>
{
console.log('Api updateQR input');
console.log('qr_width_cm: ' + qr_width_cm);
console.log('qr_height_cm: ' + qr_height_cm);
console.log('qr_fontsize: ' + qr_fontsize);
console.log('qr_visible_items: ' + qr_visible_items);
console.log('qr_item_sequence: ' + qr_item_sequence);
try
{
const {data} = await Axios.post('updateQR.php',