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

preview

Browse Source
This commit is contained in:
Peter Hoppe
2023-02-02 11:12:55 +01:00
parent 6c15821467
commit e1387b6f36
3 changed files with 95 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/Dog.tsx
View File

@ -5,29 +5,29 @@ import Img from './Img';
import DogNameTxt from './DogNameTxt'; import DogNameTxt from './DogNameTxt';
import './Dog.css'; import './Dog.css';
import {getDog} from '../services/PhpApi' import {getDog} from '../services/PhpApi'
import useSWR from 'swr';
const Dog = () => const Dog = () =>
{ {
const [success, setSuccess] = useState<number>(0);
// m7MdMK // m7MdMK
const params = useParams(); const params = useParams();
const qr_id = Object.values(params)[0]; const qr_id = Object.values(params)[0];
var dogRes : ResponseT = {}; var dogRes : ResponseT = {};
var dog: DogT = dogRes.data; var dog: DogT = dogRes.data;
getDog(qr_id).then((resDog) => const { data, error, isLoading } = useSWR(['Dog', qr_id], getDog );
{ if (error) return (<div>failed to load</div>);
dogRes = Object.assign({},resDog); if (isLoading) return (<div>loading...</div>);
dog = Object.assign({},resDog.data);
setSuccess(dogRes.success); dogRes = Object.assign({}, data);
}); dog = Object.assign({}, data.data);
var email = "nicht definiert;" var email = "nicht definiert;"
var phone = "nicht definiert;" var phone = "nicht definiert;"
var picPath = "nicht definiert;" var picPath = "nicht definiert;"
//var qrPath = "nicht definiert;" //var qrPath = "nicht definiert;"
var name = "nicht definiert;" var name = "nicht definiert;"
if(success === 1) if(dogRes.success === 1)
{ {
name = dog.name; name = dog.name;
//qrPath = dog.data.qr_code; //qrPath = dog.data.qr_code;
@ -36,7 +36,7 @@ const Dog = () =>
phone = dog.phone; phone = dog.phone;
} }
const content: ReactNode = success === 1 ? const content: ReactNode = dogRes.success === 1 ?
<div className = 'Dog'> <div className = 'Dog'>
<h1>Hast Du mich gefunden?</h1> <h1>Hast Du mich gefunden?</h1>
{/* <p>name: {name}</p> {/* <p>name: {name}</p>

136
src/components/PreviewUpload.tsx
View File

@ -5,11 +5,10 @@ import useSWR from 'swr';
function PreviewUpload({chgFile}:{chgFile: any}) function PreviewUpload({chgFile}:{chgFile: any})
{ {
const [file, setFile] = useState<string | undefined >(undefined);
const [dimensionWidth, setDimensionWidth] = useState(0); const [dimensionWidth, setDimensionWidth] = useState(0);
const [dimensionHeight, setDimensionHeight] = useState(0); const [dimensionHeight, setDimensionHeight] = useState(0);
const [dog, setDog] = useState<ResponseT | any>({}); // local dog not the dog in UserContext // const [dog, setDog] = useState<ResponseT | any>({}); // local dog not the dog in UserContext
const { data, error, isLoading } = useSWR(['PreviewUpload', 'SESS'], getDog ); const { data, error, isLoading } = useSWR(['PreviewUpload', 'SESS'], getDog );
if (error) return (<div>failed to load</div>); if (error) return (<div>failed to load</div>);
@ -17,76 +16,81 @@ function PreviewUpload({chgFile}:{chgFile: any})
console.log('PreviewUpload getDog'); console.log('PreviewUpload getDog');
console.log(data); console.log(data);
const dog: ResponseT | any = data.data;
setDog(data.data); let file: string | undefined = "./uploads"+ data.data.picture;
setFile("./uploads"+ data.data.picture);
// setDog(data.data);
// setFile("./uploads"+ data.data.picture);
// const handleChange = async ( const handleChange = async (
// event: React.ChangeEvent<HTMLInputElement> event: React.ChangeEvent<HTMLInputElement>
// ): Promise<any> => { ): Promise<any> =>
// // const { target } = event; {
// // const img = new Image(); // const { target } = event;
// const ImageName = event.target.value.split('\\')[2]; // const img = new Image();
// const Image = event.target.value; const ImageName = event.target.value.split('\\')[2];
// console.log('Image on Kevel: ', Image); // Image on Kevel const Image = event.target.value;
// console.log('ImageName on Kevel: ', ImageName); // ImageName on Kevel console.log('Image on Kevel: ', Image); // Image on Kevel
// console.log('ImageLink on Kevel: ', event.target.value); // ImageLink on Kevel console.log('ImageName on Kevel: ', ImageName); // ImageName on Kevel
// console.log('event current Target files: ', event.target.files![0]); 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 fileLoaded = URL.createObjectURL(event.target.files![0]);
// const files = event.target.files; const files = event.target.files;
// console.log('files: ', files); console.log('files: ', files);
// const dimensions = await someFunction(fileLoaded); const dimensions = await someFunction(fileLoaded);
// setDimensionWidth(dimensions.width); setDimensionWidth(dimensions.width);
// setDimensionHeight(dimensions.height); setDimensionHeight(dimensions.height);
// console.log('dimensions: ', dimensions); console.log('dimensions: ', dimensions);
// console.log('dimensions width: ', dimensions.width); console.log('dimensions width: ', dimensions.width);
// console.log('dimensions height: ', dimensions.height); console.log('dimensions height: ', dimensions.height);
// setFile(fileLoaded); file = fileLoaded;
// chgFile(event); chgFile(event);
// }; };
// const getHeightAndWidthFromDataUrl = (dataURL: string) => const getHeightAndWidthFromDataUrl = (dataURL: string) =>
// new Promise<{height: number, width: number}>((resolve) => { new Promise<{height: number, width: number}>((resolve) => {
// const img = new Image(); const img = new Image();
// img.onload = () => { img.onload = () => {
// resolve({ resolve({
// height: img.height, height: img.height,
// width: img.width, width: img.width,
// }); });
// }; };
// img.src = dataURL; img.src = dataURL;
// }); });
// // Get dimensions // Get dimensions
// const someFunction = async (file: any) => { const someFunction = async (file: any) =>
// console.log('file: ', file); {
// const dimensions = await getHeightAndWidthFromDataUrl(file); console.log('file: ', file);
// return dimensions; const dimensions = await getHeightAndWidthFromDataUrl(file);
// }; return dimensions;
};
return ( <></> ); // return ( <></> );
// <div> return (
// <input <div>
// type="file" <input
// onChange={handleChange} type="file"
// accept="image/jpg,.gif,.png,.svg,.webp audio/wav,.mp3" onChange={handleChange}
// /> accept="image/jpg,.gif,.png,.svg,.webp audio/wav,.mp3"
// <div className='prevUplImg'> />
// <img <div className='prevUplImg'>
// src={file} <img
// style={{ src={file}
// display: 'flex', style={{
// border: '2px solid tomato', display: 'flex',
// maxWidth: '300px', border: '2px solid tomato',
// maxHeight: '300px', maxWidth: '300px',
// }} maxHeight: '300px',
// /> }}
// </div> />
// {file && <p>Dimensions: {`${dimensionWidth} x ${dimensionHeight}`}</p>} </div>
// </div> {file && <p>Dimensions: {`${dimensionWidth} x ${dimensionHeight}`}</p>}
// ); </div>
);
} }
export default PreviewUpload; export default PreviewUpload;

19
src/services/PhpApi.ts
View File

@ -26,21 +26,34 @@ export const updateDog = async ({email, name, phone}:
} }
} }
export const getDog = async ( str: string | undefined) : Promise<ResponseT> => export const getDog = async ( params: string[] | undefined) : Promise<ResponseT> =>
{ {
var ret: ResponseT = {}; var ret: ResponseT = {};
let qrid = '';
if(params !== undefined && params.length >= 2)
{
qrid = params[1];
}
if(params !== undefined && params.length == 1)
{
qrid = params[0];
}
try try
{ {
ret = await Axios.post<ResponseT>('getDog.php', ret = await Axios.post<ResponseT>('getDog.php',
{ {
qr_id: str qr_id: qrid
}); });
console.log('Api getDog');
console.log(ret.data);
return ret.data as ResponseT; return ret.data as ResponseT;
} }
catch (error:any) catch (error:any)
{ {
console.log('error message: ', error.message); console.log('Api getDog error message: ', error.message);
ret = ret =
{ {
success: 0, success: 0,