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

Profil

Browse Source
This commit is contained in:
Peter Hoppe
2023-02-02 16:47:03 +01:00
parent e1387b6f36
commit cdb4176509
3 changed files with 47 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/PreviewUpload.tsx
View File

@ -5,19 +5,20 @@ import useSWR from 'swr';
function PreviewUpload({chgFile}:{chgFile: any})
{
const [file, setFile] = useState('');
const [dimensionWidth, setDimensionWidth] = useState(0);
const [dimensionHeight, setDimensionHeight] = useState(0);
// 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, mutate } = 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: string | undefined = "./uploads"+ data.data.picture;
let file_loc: string | undefined = "./uploads"+ data.data.picture;
// setDog(data.data);
// setFile("./uploads"+ data.data.picture);
@ -46,7 +47,7 @@ function PreviewUpload({chgFile}:{chgFile: any})
console.log('dimensions: ', dimensions);
console.log('dimensions width: ', dimensions.width);
console.log('dimensions height: ', dimensions.height);
file = fileLoaded;
setFile(fileLoaded);
chgFile(event);
};
@ -79,7 +80,7 @@ function PreviewUpload({chgFile}:{chgFile: any})
/>
<div className='prevUplImg'>
<img
src={file}
src={file ? file : file_loc}
style={{
display: 'flex',
border: '2px solid tomato',

5
src/components/Profil.css
View File

@ -6,3 +6,8 @@ form
flex-direction: column;
align-items: flex-end;
}
button.QRakt
{
max-width: 80%;
}

55
src/components/Profil.tsx
View File

@ -3,7 +3,7 @@ import useSWR from 'swr';
import { Link } from 'react-router-dom';
import toast, { Toaster } from 'react-hot-toast';
import { ResponseT, TUser} from '../context/UserContext';
import {getProfilData} from '../services/PhpApi';
import {getProfilData, updateDog} from '../services/PhpApi';
import CreateQr from '../services/CreateQr';
import Img from './Img';
import './Profil.css';
@ -18,7 +18,7 @@ function Profil()
});
// const { data, error, isLoading } = useSWR( user?.qr_id, getDog);
const { data, error, isLoading } = useSWR( "profilData", getProfilData);
const { data, error, isLoading, mutate } = useSWR( "profilData", getProfilData);
// data ist dogdata, logindata holt sich getProfilData.php aus $_SESSION
if (error) return (<div>failed to load</div>);
if (isLoading) return (<div>loading...</div>);
@ -50,13 +50,25 @@ function Profil()
// qrcode generieren und in der Datenbank speichern
CreateQr({qr_id: user?.qr_id});
}
const onChangeInput = (e: React.FormEvent<HTMLInputElement> ) => {
setFormData({
...formData,
[e.currentTarget.name]:e.currentTarget.value
})
let formData_loc =
{
email: data.data.email,
name: data.data.name,
phone: data.data.phone
};
const onChangeInput = (e: React.FormEvent<HTMLInputElement> ) =>
{
formData_loc = {...formData,[e.currentTarget.name]:e.currentTarget.value};
setFormData(
{
...formData,
[e.currentTarget.name]:e.currentTarget.value
}
);
}
function showData(data: any/*, e: React.FormEvent<HTMLFormElement> | React.MouseEvent<HTMLButtonElement>*/)
@ -88,8 +100,10 @@ function Profil()
}
setFormData(formData);
// update data with phpapi
// mutate
const data = await updateDog(formData);
mutate();
showData(data);
}
const qr_refresh = (e: React.MouseEvent<HTMLButtonElement>) =>
@ -99,14 +113,19 @@ function Profil()
setFormData(formData);
showData(data/*, e*/);
if(document.getElementById("canvas") != null)
{
// qrcode generieren und in der Datenbank speichern
CreateQr({qr_id: user?.qr_id});
}
// update data with phpapi
// mutate
mutate();
}
formData.email = data.data.email;
formData.name = data.data.name;
formData.phone = data.data.phone;
console.log('Profil formData');
console.log(formData);
console.log('Profil formData_loc');
console.log(formData_loc);
return (
<div className='Profil'>
<Toaster toastOptions={{ position: "top-center" }} />
@ -118,22 +137,22 @@ function Profil()
</div>
<div className='margin'>
{data.data && <Img pth={data.data.qr_code} className=''/>}
<button onClick={qr_refresh}>QR aktualisieren</button>
<button className='QRakt' onClick={qr_refresh}>QR aktualisieren</button>
</div>
<div id="canvas"></div>
</div>
<form onSubmit={submitForm}>
<div className='neben'>
<label htmlFor="email">Email: </label>
<input type="email" name="email" onChange={onChangeInput} placeholder="Deine email" id="email" value={formData.email} required />
<input type="email" name="email" onChange={onChangeInput} placeholder="Deine email" id="email" value={formData_loc.email} required />
</div>
<div className='neben'>
<label htmlFor="name">Name: </label>
<input type="text" name="name" onChange={onChangeInput} id="name" value={formData.name} required />
<input type="text" name="name" onChange={onChangeInput} id="name" value={formData_loc.name} required />
</div>
<div className='neben'>
<label htmlFor="phone">Telefon: </label>
<input type="text" name="phone" onChange={onChangeInput} id="phone" value={formData.phone} required />
<input type="text" name="phone" onChange={onChangeInput} id="phone" value={formData_loc.phone} required />
</div>
<button type="submit">Update</button>
</form>