From a55bdfc7750bb7b1938a76b05c3a454cad43a9b8 Mon Sep 17 00:00:00 2001 From: Peter Hoppe Date: Fri, 3 Feb 2023 16:33:35 +0100 Subject: [PATCH] Qr --- src/components/Dog.tsx | 2 +- src/components/FileUpload.tsx | 1 - src/components/Header.tsx | 2 +- src/components/Login.tsx | 4 +- src/components/PreviewUpload.tsx | 10 +- src/components/Profil.tsx | 2 +- src/components/Qr.tsx | 693 ++++++++++++++++--------------- src/services/CreateQr.ts | 2 - src/services/PhpApi.ts | 10 +- 9 files changed, 371 insertions(+), 355 deletions(-) diff --git a/src/components/Dog.tsx b/src/components/Dog.tsx index cd3e6f3..96164b7 100644 --- a/src/components/Dog.tsx +++ b/src/components/Dog.tsx @@ -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'; diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx index ddfaf2b..7545f2c 100644 --- a/src/components/FileUpload.tsx +++ b/src/components/FileUpload.tsx @@ -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 = () => diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 3028ba8..58afaad 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -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'; diff --git a/src/components/Login.tsx b/src/components/Login.tsx index 90f84fc..b18e0f8 100644 --- a/src/components/Login.tsx +++ b/src/components/Login.tsx @@ -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); diff --git a/src/components/PreviewUpload.tsx b/src/components/PreviewUpload.tsx index 1c4eef3..030624f 100644 --- a/src/components/PreviewUpload.tsx +++ b/src/components/PreviewUpload.tsx @@ -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({}); // 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 (
failed to load
); if (isLoading) return (
loading...
); 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 ): Promise => diff --git a/src/components/Profil.tsx b/src/components/Profil.tsx index f94e149..df6992c 100644 --- a/src/components/Profil.tsx +++ b/src/components/Profil.tsx @@ -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'; diff --git a/src/components/Qr.tsx b/src/components/Qr.tsx index 69a7aa6..203d8c0 100644 --- a/src/components/Qr.tsx +++ b/src/components/Qr.tsx @@ -1,352 +1,369 @@ -// 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(UserCtx) as UserCtxT; -// const [dog, setDog] = useState({}); // 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} -// ]); - -// //save reference for dragItem and dragOverItem -// const dragItem = React.useRef(null); -// const dragOverItem = React.useRef(null); - -// // const incrementFontSize = ((event: React.MouseEvent): MouseEventHandler | undefined => -// // { -// // event.preventDefault(); -// // if(fontSize < 200) -// // { -// // setFontSize(fontSize + 1); -// // } - -// // console.log("\nincrementFontSize " + fontSize); -// // return; -// // }); - -// // const decrementFontSize = ((event: React.MouseEvent): MouseEventHandler | undefined => -// // { -// // event.preventDefault(); -// // if(fontSize > 1) -// // { -// // setFontSize(fontSize -1); -// // } -// // console.log("\ndecrementFontSize " + fontSize); -// // return; -// // }); - -// 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; -// } - -// 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() -// { -// // console.log('handleSort current:' + dragItem.current); -// //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; - -// // name 1 -// // telefon 2 -// // email 3 - -// // email -// // name -// // telefon - -// // email is first 1 -> 3 -// // name is second 2 -> 1 -// // telefon third 3 -> 2 - -// // 231 - -// // console.log('handleSort itemList:'); -// // console.log(_itemList); - -// _itemList.map((item, index) => -// { -// digit = 10**(3-item.ordernum); -// newItemOrder += (index+1) * digit; -// }); -// setItemOrder(newItemOrder); -// // console.log('handleSort newItemOrder:' + newItemOrder); -// } + const { data, error, isLoading, mutate } = useSWR( ['Qr', 'SESS'], getDog); + // data ist dogdata, logindata holt sich getDog.php aus $_SESSION -// function oneQrBlock() -// { -// return( -//
-//
-//
SCAN ME
-// -//
-//
-// {((visibleItem & 0b100) > 0) &&
{dog.data.name}
} -// {((visibleItem & 0b010) > 0) &&
{dog.data.phone}
} -// {((visibleItem & 0b001) > 0) &&
{dog.data.email}
} -//
-//
); -// } + const [dogRender, setDogRender] = useState( + { + 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(null); + const dragOverItem = React.useRef(null); + const itemListInit: ListItemT[] = + [ + {id: '0', name:'Name', ordernum: 1}, + {id: '1', name:'Telefon', ordernum: 2}, + {id: '2', name:'Email', ordernum: 3} + ]; -// const saveHandler = (event: React.MouseEvent): MouseEventHandler | 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 itemList = React.useRef(itemListInit); + + if (error) return (
failed to load
); + if (isLoading) return (
loading...
); + + // 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: '' + }; -// const printHandler = (event: React.MouseEvent): MouseEventHandler | undefined => -// { -// event.preventDefault(); -// console.log("printHandler \n"); -// console.log(event); -// window.print(); -// return; -// } + function setBitField(val: number, checked: boolean, bit: number) : number + { + if(checked) + { + val |= bit; + } + else + { + val ^= bit; + } + return val; + } -// 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 ) => -// { -// setWidth(parseInt(e.target.value)/10 ? parseInt(e.target.value)/10 : 0); -// } + 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); + } -// const onChangeHeight = (e: ChangeEvent ) => -// { -// setHeight(parseInt(e.target.value)/10 ? parseInt(e.target.value)/10 : 0); -// } + function getItemOrderNumber(digit: number) + { + let ordernum = dog.qr_item_sequence; // 123 + ordernum = ordernum % (digit*10); // 123 + ordernum = Math.trunc(ordernum / digit); -// const onChangeFontSize = (e: ChangeEvent ) => -// { -// setFontSize(parseInt(e.target.value) ? parseInt(e.target.value) : 0); -// } + return ordernum; + } -// if(user && dog.success === undefined) -// { -// Axios.post('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 handle drag sorting + function handleSort() + { + //duplicate items + let _itemList = [...itemList.current]; - return ( - <> - {/* {user && dog.data && -
-

Qr-Code Druck

- Zurück zum Profil -
-
-
-
Anhänger
- - - - -
-
- - -
-
-
Sichtbare Elemente
- 0} - changeEvent={checkBoxChange} - /> - 0} - changeEvent={checkBoxChange} - /> - 0} - changeEvent={checkBoxChange} - /> -
-
-
Reihenfolge
-
Ändern durch Drag'n Drop
-
- {itemList.map((item, index) => ( -
{dragItem.current = index; }} - onDragEnter={(e) => {dragOverItem.current = index; }} - onDragEnd={handleSort} - onDragOver={(e) => {e.preventDefault(); }} - > -
  • {item.name}
    • -
    - ))} -
    -
    -
    -
    - - - {successMsg !== "false" &&
    {successMsg}
    } - {errMsg !== "false" &&
    {errMsg}
    } -
    -
    -
    - {oneQrBlock()} - {oneQrBlock()} - {oneQrBlock()} - {oneQrBlock()} - {oneQrBlock()} - {oneQrBlock()} -
    -
    } - { !dog.data && !user && - <> -

    Qr-Code Druck

    -
    nothing
    - - } */} - + //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() + { + return( +
    +
    +
    SCAN ME
    + +
    +
    + {((dog.qr_visible_items & 0b100) > 0) &&
    {dog.name}
    } + {((dog.qr_visible_items & 0b010) > 0) &&
    {dog.phone}
    } + {((dog.qr_visible_items & 0b001) > 0) &&
    {dog.email}
    } +
    +
    ); + } + + const saveHandler = (event: React.MouseEvent): MouseEventHandler | 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; + } + + const printHandler = (event: React.MouseEvent): MouseEventHandler | undefined => + { + event.preventDefault(); + console.log("printHandler \n"); + console.log(event); + window.print(); + return; + } + + function getItemOrderNumber_(order: number, digit: number) + { + let ordernum = order; // 123 + ordernum = ordernum % (digit*10); // 123 + ordernum = Math.trunc(ordernum / digit); + + return ordernum; + } + + /** + * 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]; + + itemList.current = _itemList; + } + + const onChangeWidth = (e: ChangeEvent ) => + { + dog.qr_width_cm = parseInt(e.target.value)/10 ? parseInt(e.target.value)/10 : 0; + setDogRender(dog); + } + + const onChangeHeight = (e: ChangeEvent ) => + { + dog.qr_height_cm = parseInt(e.target.value)/10 ? parseInt(e.target.value)/10 : 0; + setDogRender(dog); + } + + const onChangeFontSize = (e: ChangeEvent ) => + { + 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 ( +
    +

    Qr-Code Druck

    + Zurück zum Profil +
    +
    +
    +
    Anhänger
    + + + + +
    +
    + + +
    +
    +
    Sichtbare Elemente
    + 0} + changeEvent={checkBoxChange} + /> + 0} + changeEvent={checkBoxChange} + /> + 0} + changeEvent={checkBoxChange} + /> +
    +
    +
    Reihenfolge
    +
    Ändern durch Drag'n Drop
    +
    + {itemList.current.map((item, index) => ( +
    {dragItem.current = index; }} + onDragEnter={(e) => {dragOverItem.current = index; }} + onDragEnd={handleSort} + onDragOver={(e) => {e.preventDefault(); }} + > +
  • {item.name}
    • +
    + ))} +
    +
    +
    +
    + + + {successMsg !== "false" &&
    {successMsg}
    } + {errMsg !== "false" &&
    {errMsg}
    } +
    +
    +
    + {oneQrBlock()} + {oneQrBlock()} + {oneQrBlock()} + {oneQrBlock()} + {oneQrBlock()} + {oneQrBlock()} +
    +
    ); } diff --git a/src/services/CreateQr.ts b/src/services/CreateQr.ts index bcbab99..79d5805 100644 --- a/src/services/CreateQr.ts +++ b/src/services/CreateQr.ts @@ -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}) diff --git a/src/services/PhpApi.ts b/src/services/PhpApi.ts index e600f87..6390b59 100644 --- a/src/services/PhpApi.ts +++ b/src/services/PhpApi.ts @@ -35,7 +35,7 @@ export const getDog = async ( params: string[] | undefined) : Promise { 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',