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

useSWR

Browse Source
This commit is contained in:
Peter Hoppe
2023-01-30 17:01:44 +01:00
parent ff8e4bc831
commit a861acb2e0
11 changed files with 551 additions and 517 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
php/php-dog/AuthMiddleware.php
View File

@ -49,10 +49,9 @@ class Auth
if(isset($_SESSION['user']))
{
$data = $_SESSION['user'];
if (
isset($data['data']->id) &&
$user = $this->fetchUser($data['data']->id)
isset($data['id']) &&
$user = $this->fetchUser($data['id'])
) :
$retVal = new CMsg(1, 200, "User found", null, $user);
return $retVal->jsonarray();

3
php/php-dog/login.php
View File

@ -92,6 +92,9 @@ try
// $_SESSION['user'] = $user;
$_SESSION['user'] = $user->phparray();
var_dump($_SESSION['user']);
$returnData = new CMsg(
1,
200,

26
src/App.tsx
View File

@ -1,5 +1,4 @@
import React from 'react';
import {useContext} from 'react'
import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Login from './components/Login';
@ -15,11 +14,32 @@ import FileUpload from './components/FileUpload';
import Profil from './components/Profil';
import useSWR from 'swr';
import {getUser} from './services/PhpApi'
import toast, { Toaster } from 'react-hot-toast';
import { TUser } from './context/UserContext';
const App: React.FC = () =>
{
const {data} = useSWR("user", getUser);
const user = data.user;
const {data, error, isLoading} = useSWR("/user", getUser);
if (error)
{
toast.error(error.message);
return (
<>
<Toaster toastOptions={{ position: "top-center" }} />
<div>failed to load</div>
</>);
}
if (isLoading) return (<div>loading...</div>);
let user: TUser | null;
if(data.success)
{
user = data.data;
}
else
{
user = null;
}
return (
<div className="App">

20
src/components/Home.tsx
View File

@ -1,14 +1,14 @@
import React, { useContext } from 'react'
import { UserCtx, UserCtxT } from '../context/UserContext';
// import React, { useContext } from 'react'
// import { UserCtx, UserCtxT } from '../context/UserContext';
export default function Home() {
const {user} = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
return (
<div>
<h1>Home</h1>
<div>Logged in als:</div>
<div>{user?.email}</div>
// const {user} = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
// return (
// <div>
// <h1>Home</h1>
// <div>Logged in als:</div>
// <div>{user?.email}</div>
</div>
)
// </div>
// )
}

38
src/components/Login.tsx
View File

@ -1,17 +1,32 @@
import {useState,useContext} from 'react';
import {useState} from 'react';
import useSWR from 'swr';
import { Link, useNavigate } from 'react-router-dom';
import './Login.css';
import {loginUser} from '../services/PhpApi'
import {getUser, loginUser} from '../services/PhpApi'
import { toast } from 'react-hot-toast';
import { TUser } from '../context/UserContext';
const Login = () =>
{
const [redirect, setRedirect] = useState("false");
const [formData, setFormData] = useState({
email:'',
password:''
});
const {data, error, isLoading, mutate} = useSWR('Login', getUser);
const navigate = useNavigate();
if (error) return (<div>failed to load</div>);
if (isLoading) return (<div>loading...</div>);
let user: TUser | null;
if(data.success)
{
user = data.user;
formData.email = user!.email;
}
const onChangeInput = (e: React.FormEvent<HTMLInputElement>) =>
{
if(e.currentTarget.type === 'email' || e.currentTarget.type === 'password')
@ -29,20 +44,10 @@ const Login = () =>
if(!Object.values(formData).every(val => val.trim() !== ''))
{
setErrMsg('Please Fill in all Required Fields!');
toast.error('Please Fill in all Required Fields!');
return;
}
const data = await loginUser(formData);
if(data.success)
{
setRedirect('Redirecting...');
setErrMsg(data.message!);
await getUser();
navigate('/profil');
return;
}
setErrMsg(data.message!);
mutate(loginUser, formData)
}
return (
@ -64,8 +69,7 @@ const Login = () =>
<label htmlFor="password">Password:</label>
<input type="password" name="password" onChange={onChangeInput} placeholder="New password" id="password" value={formData.password} required />
</div>
{errMsg !== "false" && <div className="err-msg">{errMsg}</div>}
{redirect !== "false" ? redirect : <button type="submit" disabled={wait}>Login</button>}
<button type="submit">Login</button>
<div className="bottom-link"><Link to="/reg">Register</Link></div>
</form> }
</div>

168
src/components/PreviewUpload.tsx
View File

@ -1,94 +1,94 @@
import React, { useContext, useState } from 'react';
import { ResponseT, UserCtx, UserCtxT } from '../context/UserContext';
import {Axios} from '../services/PhpApi';
// import React, { useContext, useState } from 'react';
// import { ResponseT, UserCtx, UserCtxT } from '../context/UserContext';
// import {Axios} from '../services/PhpApi';
function PreviewUpload({chgFile}:{chgFile: any}) {
const [file, setFile] = useState<string | undefined >(undefined);
const [dimensionWidth, setDimensionWidth] = useState(0);
const [dimensionHeight, setDimensionHeight] = useState(0);
// const [file, setFile] = useState<string | undefined >(undefined);
// const [dimensionWidth, setDimensionWidth] = useState(0);
// const [dimensionHeight, setDimensionHeight] = useState(0);
const { user } = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
const [dog, setDog] = useState<ResponseT | any>({}); // local dog not the dog in UserContext
// const { user } = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
// const [dog, setDog] = useState<ResponseT | any>({}); // local dog not the dog in UserContext
if(user && (dog === undefined || dog.success === undefined))
{
Axios.post<ResponseT>('getDog.php',
{
qr_id: user.qr_id
})
.then((resDog) =>
{
setDog(resDog.data);
setFile("./uploads"+resDog.data.data.picture);
})
.catch((err) => console.error(err));
}
// if(user && (dog === undefined || dog.success === undefined))
// {
// Axios.post<ResponseT>('getDog.php',
// {
// qr_id: user.qr_id
// })
// .then((resDog) =>
// {
// setDog(resDog.data);
// setFile("./uploads"+resDog.data.data.picture);
// })
// .catch((err) => console.error(err));
// }
const handleChange = async (
event: React.ChangeEvent<HTMLInputElement>
): Promise<any> => {
// const { target } = event;
// const handleChange = async (
// event: React.ChangeEvent<HTMLInputElement>
// ): Promise<any> => {
// // const { target } = event;
// // const img = new Image();
// const ImageName = event.target.value.split('\\')[2];
// const Image = event.target.value;
// console.log('Imageon 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;
// 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);
// chgFile(event);
// };
// const getHeightAndWidthFromDataUrl = (dataURL: string) =>
// new Promise<{height: number, width: number}>((resolve) => {
// const img = new Image();
const ImageName = event.target.value.split('\\')[2];
const Image = event.target.value;
console.log('Imageon 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]);
// 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;
// };
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);
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 (
<div>
<input
type="file"
onChange={handleChange}
accept="image/jpg,.gif,.png,.svg,.webp audio/wav,.mp3"
/>
<div className='prevUplImg'>
<img
src={file}
style={{
display: 'flex',
border: '2px solid tomato',
maxWidth: '300px',
maxHeight: '300px',
}}
/>
</div>
{file && <p>Dimensions: {`${dimensionWidth} x ${dimensionHeight}`}</p>}
</div>
);
return ( <></> );
// <div>
// <input
// type="file"
// onChange={handleChange}
// accept="image/jpg,.gif,.png,.svg,.webp audio/wav,.mp3"
// />
// <div className='prevUplImg'>
// <img
// src={file}
// style={{
// display: 'flex',
// border: '2px solid tomato',
// maxWidth: '300px',
// maxHeight: '300px',
// }}
// />
// </div>
// {file && <p>Dimensions: {`${dimensionWidth} x ${dimensionHeight}`}</p>}
// </div>
// );
}
export default PreviewUpload;

19
src/components/Profil.tsx
View File

@ -1,8 +1,8 @@
import React, { useContext, useState } from 'react';
import React, { useState } from 'react';
import useSWR from 'swr';
import { Link } from 'react-router-dom';
import toast, { Toaster } from 'react-hot-toast';
import { ResponseT} from '../context/UserContext';
import { ResponseT, TUser} from '../context/UserContext';
import {getProfilData} from '../services/PhpApi';
import CreateQr from '../services/CreateQr';
import Img from './Img';
@ -17,17 +17,20 @@ function Profil()
qr_code: null
});
const fetcher = () =>
{
}
// const { data, error, isLoading } = useSWR( user?.qr_id, getDog);
const { data, error, isLoading } = useSWR( "profilData", getProfilData);
// data ist dogdata und logindata
// data ist dogdata, logindata holt sich getProfilData.php aus $_SESSION
if (error) return (<div>failed to load</div>);
if (isLoading) return (<div>loading...</div>);
const user: TUser =
{
id: data.id,
qr_id: data.qr_id,
email: data.email,
name: data.name
};
console.log(data);
console.log(user);

490
src/components/Qr.tsx
View File

@ -1,267 +1,267 @@
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, 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';
type ListItemT =
{
name: string;
ordernum: number;
}
// type ListItemT =
// {
// 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 { 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}
// ]);
//save reference for dragItem and dragOverItem
const dragItem = React.useRef<any>(null);
const dragOverItem = React.useRef<any>(null);
// //save reference for dragItem and dragOverItem
// const dragItem = React.useRef<any>(null);
// const dragOverItem = React.useRef<any>(null);
// const incrementFontSize = ((event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined =>
// // const incrementFontSize = ((event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined =>
// // {
// // event.preventDefault();
// // if(fontSize < 200)
// // {
// // setFontSize(fontSize + 1);
// // }
// // console.log("\nincrementFontSize " + fontSize);
// // return;
// // });
// // const decrementFontSize = ((event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined =>
// // {
// // event.preventDefault();
// // if(fontSize > 1)
// // {
// // setFontSize(fontSize -1);
// // }
// // console.log("\ndecrementFontSize " + fontSize);
// // return;
// // });
// function setBitField(val: number, checked: boolean, bit: number) : number
// {
// event.preventDefault();
// if(fontSize < 200)
// if(checked)
// {
// setFontSize(fontSize + 1);
// val |= bit;
// }
// else
// {
// val ^= bit;
// }
// return val;
// }
// console.log("\nincrementFontSize " + fontSize);
// return;
// });
// 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);
// }
// const decrementFontSize = ((event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined =>
// 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);
// }
// 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 saveHandler = (event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined =>
// {
// event.preventDefault();
// if(fontSize > 1)
// console.log("saveHandler \n");
// console.log(event);
// updateQR(
// {
// setFontSize(fontSize -1);
// qr_width_cm: width,
// qr_height_cm: height,
// qr_fontsize: fontSize,
// qr_visible_items: visibleItem,
// qr_item_sequence: itemOrder
// }
// console.log("\ndecrementFontSize " + fontSize);
// ).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 setBitField(val: number, checked: boolean, bit: number) : number
{
if(checked)
{
val |= bit;
}
else
{
val ^= bit;
}
return val;
}
// const printHandler = (event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined =>
// {
// event.preventDefault();
// console.log("printHandler \n");
// console.log(event);
// window.print();
// return;
// }
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 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);
// }
function getItemOrderNumber(digit: number)
{
let ordernum = itemOrder; // 123
ordernum = ordernum % (digit*10); // 123
ordernum = Math.trunc(ordernum / digit);
// const onChangeHeight = (e: ChangeEvent<HTMLInputElement> ) =>
// {
// setHeight(parseInt(e.target.value)/10 ? parseInt(e.target.value)/10 : 0);
// }
return ordernum;
}
// const onChangeFontSize = (e: ChangeEvent<HTMLInputElement> ) =>
// {
// setFontSize(parseInt(e.target.value) ? parseInt(e.target.value) : 0);
// }
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);
}
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 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;
}
const printHandler = (event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined =>
{
event.preventDefault();
console.log("printHandler \n");
console.log(event);
window.print();
return;
}
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);
}
const onChangeHeight = (e: ChangeEvent<HTMLInputElement> ) =>
{
setHeight(parseInt(e.target.value)/10 ? parseInt(e.target.value)/10 : 0);
}
const onChangeFontSize = (e: ChangeEvent<HTMLInputElement> ) =>
{
setFontSize(parseInt(e.target.value) ? parseInt(e.target.value) : 0);
}
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));
}
// 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));
// }
return (
<>
{user && dog.data &&
{/* {user && dog.data &&
<div>
<h1>Qr-Code Druck</h1>
<Link to={"/profil"}>Zurück zum Profil</Link>
@ -314,10 +314,10 @@ export default function Qr()
key={index}
className="list-item"
draggable
onDragStart={(e) => {dragItem.current = index; /* console.log('onDragStart index: ' + index); */}}
onDragEnter={(e) => {dragOverItem.current = index; /* console.log('onDragEnter index: ' + index); */}}
onDragStart={(e) => {dragItem.current = index; }}
onDragEnter={(e) => {dragOverItem.current = index; }}
onDragEnd={handleSort}
onDragOver={(e) => {e.preventDefault(); /* console.log('onDragEnter index: ' + index); */}}
onDragOver={(e) => {e.preventDefault(); }}
>
<li>{item.name}</li>
</div>
@ -346,7 +346,7 @@ export default function Qr()
<h1>Qr-Code Druck</h1>
<div>nothing</div>
</>
}
} */}
</>
)
);
}

134
src/components/Register.tsx
View File

@ -1,78 +1,78 @@
import {useContext, useState} from 'react'
import {Link} from 'react-router-dom'
import {UserCtx, UserCtxT} from '../context/UserContext';
import './Register.css';
import {registerUser} from '../services/PhpApi';
// import {useContext, useState} from 'react'
// import {Link} from 'react-router-dom'
// import {UserCtx, UserCtxT} from '../context/UserContext';
// import './Register.css';
// import {registerUser} from '../services/PhpApi';
const Register = () => {
const {wait} = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
const [errMsg, setErrMsg] = useState("false");
const [successMsg, setSuccessMsg] = useState("false");
const [formData, setFormData] = useState({
email:'',
password:'',
password2:''
});
// const {wait} = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
// const [errMsg, setErrMsg] = useState("false");
// const [successMsg, setSuccessMsg] = useState("false");
// const [formData, setFormData] = useState({
// email:'',
// password:'',
// password2:''
// });
const onChangeInput = (e: React.FormEvent<HTMLInputElement> ) => {
setFormData({
...formData,
[e.currentTarget.name]:e.currentTarget.value
})
}
// const onChangeInput = (e: React.FormEvent<HTMLInputElement> ) => {
// setFormData({
// ...formData,
// [e.currentTarget.name]:e.currentTarget.value
// })
// }
const submitForm = async (e: React.FormEvent<HTMLFormElement>) =>
{
e.preventDefault();
// const submitForm = async (e: React.FormEvent<HTMLFormElement>) =>
// {
// e.preventDefault();
if(!Object.values(formData).every(val => val.trim() !== '')){
setSuccessMsg("false");
setErrMsg('Bitte alle Felder ausfüllen!');
return;
}
// if(!Object.values(formData).every(val => val.trim() !== '')){
// setSuccessMsg("false");
// setErrMsg('Bitte alle Felder ausfüllen!');
// return;
// }
if(formData.password !== formData.password2)
{
setSuccessMsg("false");
setErrMsg('Bitte 2mal das gleiche Passwort eingeben!');
return;
// if(formData.password !== formData.password2)
// {
// setSuccessMsg("false");
// setErrMsg('Bitte 2mal das gleiche Passwort eingeben!');
// return;
}
// }
const data = await registerUser(formData);
if(data.success){
setSuccessMsg('Erfolgreich Registriert!');
setErrMsg("false");
e.currentTarget.reset();
}
else if(!data.success && data.message){
setSuccessMsg("false");
setErrMsg(data.message);
}
}
// const data = await registerUser(formData);
// if(data.success){
// setSuccessMsg('Erfolgreich Registriert!');
// setErrMsg("false");
// e.currentTarget.reset();
// }
// else if(!data.success && data.message){
// setSuccessMsg("false");
// setErrMsg(data.message);
// }
// }
return (
<div className='Register'>
<h2>Register</h2>
<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 />
</div>
<div className='neben'>
<label htmlFor="password">Passwort: </label>
<input type="password" name="password" onChange={onChangeInput} placeholder="New password" id="password" value={formData.password} required />
</div>
<div className='neben'>
<label htmlFor="password2">Passwort wiederholen: </label>
<input type="password" name="password2" onChange={onChangeInput} placeholder="New password" id="password2" value={formData.password2} required />
</div>
{successMsg !== "false" && <div className="success-msg">{successMsg}</div>}
{errMsg !== "false" && <div className="err-msg">{errMsg}</div>}
<button type="submit" disabled={wait}>Register</button>
<div className="bottom-link"><Link to="/login">Login</Link></div>
</form>
</div>
)
return ( <></> );
// <div className='Register'>
// <h2>Register</h2>
// <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 />
// </div>
// <div className='neben'>
// <label htmlFor="password">Passwort: </label>
// <input type="password" name="password" onChange={onChangeInput} placeholder="New password" id="password" value={formData.password} required />
// </div>
// <div className='neben'>
// <label htmlFor="password2">Passwort wiederholen: </label>
// <input type="password" name="password2" onChange={onChangeInput} placeholder="New password" id="password2" value={formData.password2} required />
// </div>
// {successMsg !== "false" && <div className="success-msg">{successMsg}</div>}
// {errMsg !== "false" && <div className="err-msg">{errMsg}</div>}
// <button type="submit" disabled={wait}>Register</button>
// <div className="bottom-link"><Link to="/login">Login</Link></div>
// </form>
// </div>
// )
}
export default Register;

11
src/components/dog.code-workspace Normal file
View File

@ -0,0 +1,11 @@
{
"folders": [
{
"path": "../.."
},
{
"path": "../../../../../../../../../opt/lampp/htdocs/dog/php-dog"
}
],
"settings": {}
}

12
src/services/PhpApi.ts
View File

@ -127,7 +127,7 @@ export const getProfilData = async () =>
{
const profilData = await Axios.post('getProfilData.php');
const {data} = profilData;
if(data.success && data.user)
if(data.success && data.data)
{
return data;
}
@ -138,16 +138,10 @@ export const getProfilData = async () =>
}
export const getUser = async () =>
{
const {data} = await Axios.get('getUser.php');
if(data.success && data.user)
{
const res = await Axios.get('getUser.php');
const {data} = res;
return data;
}
else
{
return null;
}
}