From e1387b6f360b5865d16a2f53785b38fae02592a6 Mon Sep 17 00:00:00 2001 From: Peter Hoppe Date: Thu, 2 Feb 2023 11:12:55 +0100 Subject: [PATCH] preview --- src/components/Dog.tsx | 18 ++-- src/components/PreviewUpload.tsx | 136 ++++++++++++++++--------------- src/services/PhpApi.ts | 19 ++++- 3 files changed, 95 insertions(+), 78 deletions(-) diff --git a/src/components/Dog.tsx b/src/components/Dog.tsx index 5c96515..cd3e6f3 100644 --- a/src/components/Dog.tsx +++ b/src/components/Dog.tsx @@ -5,29 +5,29 @@ import Img from './Img'; import DogNameTxt from './DogNameTxt'; import './Dog.css'; import {getDog} from '../services/PhpApi' +import useSWR from 'swr'; const Dog = () => { - const [success, setSuccess] = useState(0); // m7MdMK const params = useParams(); const qr_id = Object.values(params)[0]; var dogRes : ResponseT = {}; var dog: DogT = dogRes.data; - getDog(qr_id).then((resDog) => - { - dogRes = Object.assign({},resDog); - dog = Object.assign({},resDog.data); - setSuccess(dogRes.success); - }); + const { data, error, isLoading } = useSWR(['Dog', qr_id], getDog ); + if (error) return (
failed to load
); + if (isLoading) return (
loading...
); + + dogRes = Object.assign({}, data); + dog = Object.assign({}, data.data); var email = "nicht definiert;" var phone = "nicht definiert;" var picPath = "nicht definiert;" //var qrPath = "nicht definiert;" var name = "nicht definiert;" - if(success === 1) + if(dogRes.success === 1) { name = dog.name; //qrPath = dog.data.qr_code; @@ -36,7 +36,7 @@ const Dog = () => phone = dog.phone; } - const content: ReactNode = success === 1 ? + const content: ReactNode = dogRes.success === 1 ?

Hast Du mich gefunden?

{/*

name: {name}

diff --git a/src/components/PreviewUpload.tsx b/src/components/PreviewUpload.tsx index 4f76469..345397b 100644 --- a/src/components/PreviewUpload.tsx +++ b/src/components/PreviewUpload.tsx @@ -5,11 +5,10 @@ import useSWR from 'swr'; function PreviewUpload({chgFile}:{chgFile: any}) { - const [file, setFile] = useState(undefined); const [dimensionWidth, setDimensionWidth] = useState(0); const [dimensionHeight, setDimensionHeight] = useState(0); - const [dog, setDog] = useState({}); // local dog not the dog in UserContext +// const [dog, setDog] = useState({}); // local dog not the dog in UserContext const { data, error, isLoading } = useSWR(['PreviewUpload', 'SESS'], getDog ); if (error) return (
failed to load
); @@ -17,76 +16,81 @@ function PreviewUpload({chgFile}:{chgFile: any}) console.log('PreviewUpload getDog'); console.log(data); - - setDog(data.data); - setFile("./uploads"+ data.data.picture); + const dog: ResponseT | any = data.data; + let file: string | undefined = "./uploads"+ data.data.picture; + +// setDog(data.data); +// setFile("./uploads"+ data.data.picture); -// const handleChange = async ( -// event: React.ChangeEvent -// ): Promise => { -// // const { target } = event; -// // const img = new Image(); -// const ImageName = event.target.value.split('\\')[2]; -// const Image = event.target.value; -// console.log('Image on Kevel: ', Image); // Image on Kevel -// console.log('ImageName on Kevel: ', ImageName); // ImageName on Kevel -// console.log('ImageLink on Kevel: ', event.target.value); // ImageLink on Kevel -// console.log('event current Target files: ', event.target.files![0]); + const handleChange = async ( + event: React.ChangeEvent + ): Promise => + { + // const { target } = event; + // const img = new Image(); + const ImageName = event.target.value.split('\\')[2]; + const Image = event.target.value; + console.log('Image on Kevel: ', Image); // Image on Kevel + console.log('ImageName on Kevel: ', ImageName); // ImageName on Kevel + console.log('ImageLink on Kevel: ', event.target.value); // ImageLink on Kevel + console.log('event current Target files: ', event.target.files![0]); -// const fileLoaded = URL.createObjectURL(event.target.files![0]); -// const files = event.target.files; + const fileLoaded = URL.createObjectURL(event.target.files![0]); + const files = event.target.files; -// console.log('files: ', files); -// const dimensions = await someFunction(fileLoaded); -// setDimensionWidth(dimensions.width); -// setDimensionHeight(dimensions.height); -// console.log('dimensions: ', dimensions); -// console.log('dimensions width: ', dimensions.width); -// console.log('dimensions height: ', dimensions.height); -// setFile(fileLoaded); + console.log('files: ', files); + const dimensions = await someFunction(fileLoaded); + setDimensionWidth(dimensions.width); + setDimensionHeight(dimensions.height); + console.log('dimensions: ', dimensions); + console.log('dimensions width: ', dimensions.width); + console.log('dimensions height: ', dimensions.height); + file = fileLoaded; -// chgFile(event); -// }; -// const getHeightAndWidthFromDataUrl = (dataURL: string) => -// new Promise<{height: number, width: number}>((resolve) => { -// const img = new Image(); -// img.onload = () => { -// resolve({ -// height: img.height, -// width: img.width, -// }); -// }; -// img.src = dataURL; -// }); -// // Get dimensions -// const someFunction = async (file: any) => { -// console.log('file: ', file); -// const dimensions = await getHeightAndWidthFromDataUrl(file); -// return dimensions; -// }; + chgFile(event); + }; + const getHeightAndWidthFromDataUrl = (dataURL: string) => + new Promise<{height: number, width: number}>((resolve) => { + const img = new Image(); + img.onload = () => { + resolve({ + height: img.height, + width: img.width, + }); + }; + img.src = dataURL; + }); + // Get dimensions + const someFunction = async (file: any) => + { + console.log('file: ', file); + const dimensions = await getHeightAndWidthFromDataUrl(file); + return dimensions; + }; - return ( <> ); -//
-// -//
-// -//
-// {file &&

Dimensions: {`${dimensionWidth} x ${dimensionHeight}`}

} -//
-// ); +// return ( <> ); + return ( +
+ +
+ +
+ {file &&

Dimensions: {`${dimensionWidth} x ${dimensionHeight}`}

} +
+ ); } export default PreviewUpload; diff --git a/src/services/PhpApi.ts b/src/services/PhpApi.ts index 7bad494..e600f87 100644 --- a/src/services/PhpApi.ts +++ b/src/services/PhpApi.ts @@ -26,21 +26,34 @@ export const updateDog = async ({email, name, phone}: } } -export const getDog = async ( str: string | undefined) : Promise => +export const getDog = async ( params: string[] | undefined) : Promise => { var ret: ResponseT = {}; + let qrid = ''; + + if(params !== undefined && params.length >= 2) + { + qrid = params[1]; + } + if(params !== undefined && params.length == 1) + { + qrid = params[0]; + } try { ret = await Axios.post('getDog.php', { - qr_id: str + qr_id: qrid }); + console.log('Api getDog'); + console.log(ret.data); + return ret.data as ResponseT; } catch (error:any) { - console.log('error message: ', error.message); + console.log('Api getDog error message: ', error.message); ret = { success: 0,