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'])) if(isset($_SESSION['user']))
{ {
$data = $_SESSION['user']; $data = $_SESSION['user'];
if ( if (
isset($data['data']->id) && isset($data['id']) &&
$user = $this->fetchUser($data['data']->id) $user = $this->fetchUser($data['id'])
) : ) :
$retVal = new CMsg(1, 200, "User found", null, $user); $retVal = new CMsg(1, 200, "User found", null, $user);
return $retVal->jsonarray(); return $retVal->jsonarray();

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

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

26
src/App.tsx
View File

@ -1,5 +1,4 @@
import React from 'react'; import React from 'react';
import {useContext} from 'react'
import './App.css'; import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom'; import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Login from './components/Login'; import Login from './components/Login';
@ -15,11 +14,32 @@ import FileUpload from './components/FileUpload';
import Profil from './components/Profil'; import Profil from './components/Profil';
import useSWR from 'swr'; import useSWR from 'swr';
import {getUser} from './services/PhpApi' import {getUser} from './services/PhpApi'
import toast, { Toaster } from 'react-hot-toast';
import { TUser } from './context/UserContext';
const App: React.FC = () => const App: React.FC = () =>
{ {
const {data} = useSWR("user", getUser); const {data, error, isLoading} = useSWR("/user", getUser);
const user = data.user; 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 ( return (
<div className="App"> <div className="App">

20
src/components/Home.tsx
View File

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

164
src/components/PreviewUpload.tsx
View File

@ -1,94 +1,94 @@
import React, { useContext, useState } from 'react'; // import React, { useContext, useState } from 'react';
import { ResponseT, UserCtx, UserCtxT } from '../context/UserContext'; // import { ResponseT, UserCtx, UserCtxT } from '../context/UserContext';
import {Axios} from '../services/PhpApi'; // import {Axios} from '../services/PhpApi';
function PreviewUpload({chgFile}:{chgFile: any}) { function PreviewUpload({chgFile}:{chgFile: any}) {
const [file, setFile] = useState<string | undefined >(undefined); // 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 { user } = useContext<UserCtxT | null>(UserCtx) as UserCtxT; // const { user } = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
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
if(user && (dog === undefined || dog.success === undefined)) // if(user && (dog === undefined || dog.success === undefined))
{ // {
Axios.post<ResponseT>('getDog.php', // Axios.post<ResponseT>('getDog.php',
{ // {
qr_id: user.qr_id // qr_id: user.qr_id
}) // })
.then((resDog) => // .then((resDog) =>
{ // {
setDog(resDog.data); // setDog(resDog.data);
setFile("./uploads"+resDog.data.data.picture); // setFile("./uploads"+resDog.data.data.picture);
}) // })
.catch((err) => console.error(err)); // .catch((err) => console.error(err));
} // }
const handleChange = async ( // const handleChange = async (
event: React.ChangeEvent<HTMLInputElement> // event: React.ChangeEvent<HTMLInputElement>
): Promise<any> => { // ): Promise<any> => {
// const { target } = event; // // const { target } = event;
// const img = new Image(); // // const img = new Image();
const ImageName = event.target.value.split('\\')[2]; // const ImageName = event.target.value.split('\\')[2];
const Image = event.target.value; // const Image = event.target.value;
console.log('Imageon Kevel: ', Image); // Image on Kevel // console.log('Imageon Kevel: ', Image); // Image on Kevel
console.log('ImageName on Kevel: ', ImageName); // ImageName on Kevel // console.log('ImageName on Kevel: ', ImageName); // ImageName on Kevel
console.log('ImageLink on Kevel: ', event.target.value); // ImageLink on Kevel // console.log('ImageLink on Kevel: ', event.target.value); // ImageLink on Kevel
console.log('event current Target files: ', event.target.files![0]); // 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); // setFile(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); // console.log('file: ', file);
const dimensions = await getHeightAndWidthFromDataUrl(file); // const dimensions = await getHeightAndWidthFromDataUrl(file);
return dimensions; // return dimensions;
}; // };
return ( return ( <></> );
<div> // <div>
<input // <input
type="file" // type="file"
onChange={handleChange} // onChange={handleChange}
accept="image/jpg,.gif,.png,.svg,.webp audio/wav,.mp3" // accept="image/jpg,.gif,.png,.svg,.webp audio/wav,.mp3"
/> // />
<div className='prevUplImg'> // <div className='prevUplImg'>
<img // <img
src={file} // src={file}
style={{ // style={{
display: 'flex', // display: 'flex',
border: '2px solid tomato', // border: '2px solid tomato',
maxWidth: '300px', // maxWidth: '300px',
maxHeight: '300px', // maxHeight: '300px',
}} // }}
/> // />
</div> // </div>
{file && <p>Dimensions: {`${dimensionWidth} x ${dimensionHeight}`}</p>} // {file && <p>Dimensions: {`${dimensionWidth} x ${dimensionHeight}`}</p>}
</div> // </div>
); // );
} }
export default PreviewUpload; 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 useSWR from 'swr';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import toast, { Toaster } from 'react-hot-toast'; import toast, { Toaster } from 'react-hot-toast';
import { ResponseT} from '../context/UserContext'; import { ResponseT, TUser} from '../context/UserContext';
import {getProfilData} from '../services/PhpApi'; import {getProfilData} from '../services/PhpApi';
import CreateQr from '../services/CreateQr'; import CreateQr from '../services/CreateQr';
import Img from './Img'; import Img from './Img';
@ -17,17 +17,20 @@ function Profil()
qr_code: null qr_code: null
}); });
const fetcher = () =>
{
}
// const { data, error, isLoading } = useSWR( user?.qr_id, getDog); // const { data, error, isLoading } = useSWR( user?.qr_id, getDog);
const { data, error, isLoading } = useSWR( "profilData", getProfilData); 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 (error) return (<div>failed to load</div>);
if (isLoading) return (<div>loading...</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(data);
console.log(user); console.log(user);

634
src/components/Qr.tsx
View File

@ -1,352 +1,352 @@
import React, { ChangeEvent, MouseEventHandler, useContext, useState } from 'react' // import React, { ChangeEvent, MouseEventHandler, useContext, useState } from 'react'
import { Link } from 'react-router-dom'; // import { Link } from 'react-router-dom';
import { UserCtx, UserCtxT, DogT, ResponseT, TUser } from '../context/UserContext'; // import { UserCtx, UserCtxT, DogT, ResponseT, TUser } from '../context/UserContext';
import {Axios, updateQR} from '../services/PhpApi'; // import {Axios, updateQR} from '../services/PhpApi';
import Checkbox from './Checkbox'; // import Checkbox from './Checkbox';
import Img from './Img'; // import Img from './Img';
import './Qr.css'; // import './Qr.css';
type ListItemT = // type ListItemT =
{ // {
name: string; // name: string;
ordernum: number; // ordernum: number;
} // }
export default function Qr() export default function Qr()
{ {
const { user } = useContext<UserCtxT | null>(UserCtx) as UserCtxT; // const { user } = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
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 [width, setWidth] = useState(2.4); // const [width, setWidth] = useState(2.4);
const [height, setHeight] = useState(3.7); // const [height, setHeight] = useState(3.7);
const [fontSize, setFontSize] = useState(100); // const [fontSize, setFontSize] = useState(100);
const [visibleItem, setVisibleItem] = useState(0b111); // 100 name, 10 phone, 1 email // const [visibleItem, setVisibleItem] = useState(0b111); // 100 name, 10 phone, 1 email
const [itemOrder, setItemOrder] = useState(123); // name first, phone second, email third // const [itemOrder, setItemOrder] = useState(123); // name first, phone second, email third
const [errMsg, setErrMsg] = useState("false"); // const [errMsg, setErrMsg] = useState("false");
const [successMsg, setSuccessMsg] = useState("false"); // const [successMsg, setSuccessMsg] = useState("false");
const [itemList, setItemList] = useState([ // const [itemList, setItemList] = useState([
{id: '0', name:'Name', ordernum: 1}, // {id: '0', name:'Name', ordernum: 1},
{id: '1', name:'Telefon', ordernum: 2}, // {id: '1', name:'Telefon', ordernum: 2},
{id: '2', name:'Email', ordernum: 3} // {id: '2', name:'Email', ordernum: 3}
]); // ]);
//save reference for dragItem and dragOverItem // //save reference for dragItem and dragOverItem
const dragItem = React.useRef<any>(null); // const dragItem = React.useRef<any>(null);
const dragOverItem = 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(); // // event.preventDefault();
// if(fontSize < 200) // // if(fontSize < 200)
// { // // {
// setFontSize(fontSize + 1); // // setFontSize(fontSize + 1);
// } // // }
// console.log("\nincrementFontSize " + fontSize); // // console.log("\nincrementFontSize " + fontSize);
// return; // // return;
// }); // // });
// const decrementFontSize = ((event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined => // // const decrementFontSize = ((event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined =>
// { // // {
// event.preventDefault(); // // event.preventDefault();
// if(fontSize > 1) // // if(fontSize > 1)
// { // // {
// setFontSize(fontSize -1); // // setFontSize(fontSize -1);
// } // // }
// console.log("\ndecrementFontSize " + fontSize); // // console.log("\ndecrementFontSize " + fontSize);
// return; // // return;
// }); // // });
function setBitField(val: number, checked: boolean, bit: number) : number // function setBitField(val: number, checked: boolean, bit: number) : number
{ // {
if(checked) // if(checked)
{ // {
val |= bit; // val |= bit;
} // }
else // else
{ // {
val ^= bit; // val ^= bit;
} // }
return val; // return val;
} // }
function checkBoxChange(id: string, checked: boolean) : void // function checkBoxChange(id: string, checked: boolean) : void
{ // {
let value = visibleItem; // let value = visibleItem;
if(id==="name") // if(id==="name")
{ // {
value = setBitField(value, checked, 0b100); // value = setBitField(value, checked, 0b100);
} // }
if(id==="phone") // if(id==="phone")
{ // {
value = setBitField(value, checked, 0b010); // value = setBitField(value, checked, 0b010);
} // }
if(id==="email") // if(id==="email")
{ // {
value = setBitField(value, checked, 0b001); // value = setBitField(value, checked, 0b001);
} // }
setVisibleItem(value); // setVisibleItem(value);
} // }
function getItemOrderNumber(digit: number) // function getItemOrderNumber(digit: number)
{ // {
let ordernum = itemOrder; // 123 // let ordernum = itemOrder; // 123
ordernum = ordernum % (digit*10); // 123 // ordernum = ordernum % (digit*10); // 123
ordernum = Math.trunc(ordernum / digit); // ordernum = Math.trunc(ordernum / digit);
return ordernum; // return ordernum;
} // }
function getItemOrderNumber_(order: number, digit: number) // function getItemOrderNumber_(order: number, digit: number)
{ // {
let ordernum = order; // 123 // let ordernum = order; // 123
ordernum = ordernum % (digit*10); // 123 // ordernum = ordernum % (digit*10); // 123
ordernum = Math.trunc(ordernum / digit); // ordernum = Math.trunc(ordernum / digit);
return ordernum; // return ordernum;
} // }
//const handle drag sorting // //const handle drag sorting
function handleSort() // function handleSort()
{ // {
// console.log('handleSort current:' + dragItem.current); // // console.log('handleSort current:' + dragItem.current);
//duplicate items // //duplicate items
let _itemList = [...itemList]; // let _itemList = [...itemList];
//remove and save the dragged item content // //remove and save the dragged item content
const draggedItemContent = _itemList.splice(dragItem.current, 1)[0]; // const draggedItemContent = _itemList.splice(dragItem.current, 1)[0];
//switch the position // //switch the position
_itemList.splice(dragOverItem.current, 0, draggedItemContent); // _itemList.splice(dragOverItem.current, 0, draggedItemContent);
//reset the position ref // //reset the position ref
dragItem.current = null; // dragItem.current = null;
dragOverItem.current = null; // dragOverItem.current = null;
//update the actual array // //update the actual array
setItemList(_itemList); // setItemList(_itemList);
// set new itemorder // // set new itemorder
let newItemOrder = 0; // let newItemOrder = 0;
let digit = 100; // let digit = 100;
// name 1 // // name 1
// telefon 2 // // telefon 2
// email 3 // // email 3
// email // // email
// name // // name
// telefon // // telefon
// email is first 1 -> 3 // // email is first 1 -> 3
// name is second 2 -> 1 // // name is second 2 -> 1
// telefon third 3 -> 2 // // telefon third 3 -> 2
// 231 // // 231
// console.log('handleSort itemList:'); // // console.log('handleSort itemList:');
// console.log(_itemList); // // console.log(_itemList);
_itemList.map((item, index) => // _itemList.map((item, index) =>
{ // {
digit = 10**(3-item.ordernum); // digit = 10**(3-item.ordernum);
newItemOrder += (index+1) * digit; // newItemOrder += (index+1) * digit;
}); // });
setItemOrder(newItemOrder); // setItemOrder(newItemOrder);
// console.log('handleSort newItemOrder:' + newItemOrder); // // console.log('handleSort newItemOrder:' + newItemOrder);
} // }
function oneQrBlock() // function oneQrBlock()
{ // {
return( // return(
<div className='qrCodeBackFront'> // <div className='qrCodeBackFront'>
<div className='qrCode frame' style={{height : height + 'cm', width : width + 'cm'}}> // <div className='qrCode frame' style={{height : height + 'cm', width : width + 'cm'}}>
<div className='qrCode__'>SCAN ME</div> // <div className='qrCode__'>SCAN ME</div>
<Img pth={dog.data.qr_code} className='qrCodeImg'/> // <Img pth={dog.data.qr_code} className='qrCodeImg'/>
</div> // </div>
<div className='qrCode vert frame' style={{ height : height + 'cm', width : width + 'cm', fontSize: fontSize + '%' }}> // <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 & 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 & 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>} // {((visibleItem & 0b001) > 0) && <div className={`vertFont order${getItemOrderNumber(1)}`}>{dog.data.email}</div>}
</div> // </div>
</div>); // </div>);
} // }
const saveHandler = (event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined => // const saveHandler = (event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined =>
{ // {
event.preventDefault(); // event.preventDefault();
console.log("saveHandler \n"); // console.log("saveHandler \n");
console.log(event); // console.log(event);
updateQR( // updateQR(
{ // {
qr_width_cm: width, // qr_width_cm: width,
qr_height_cm: height, // qr_height_cm: height,
qr_fontsize: fontSize, // qr_fontsize: fontSize,
qr_visible_items: visibleItem, // qr_visible_items: visibleItem,
qr_item_sequence: itemOrder // qr_item_sequence: itemOrder
} // }
).then((resQR) => // ).then((resQR) =>
{ // {
if(resQR.success) // if(resQR.success)
{ // {
setSuccessMsg('Daten gesichert!'); // setSuccessMsg('Daten gesichert!');
setErrMsg("false"); // setErrMsg("false");
} // }
else if(!resQR.success && resQR.message) // else if(!resQR.success && resQR.message)
{ // {
setSuccessMsg("false"); // setSuccessMsg("false");
setErrMsg(resQR.message); // setErrMsg(resQR.message);
} // }
}) // })
.catch((err) => console.error(err)); // .catch((err) => console.error(err));
return; // return;
} // }
const printHandler = (event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined => // const printHandler = (event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined =>
{ // {
event.preventDefault(); // event.preventDefault();
console.log("printHandler \n"); // console.log("printHandler \n");
console.log(event); // console.log(event);
window.print(); // window.print();
return; // return;
} // }
function OrderItemList(order: number) // function OrderItemList(order: number)
{ // {
let _itemList: {id: string; name: string; ordernum: number}[] = []; // let _itemList: {id: string; name: string; ordernum: number}[] = [];
let oNum = getItemOrderNumber_(order, 100); // let oNum = getItemOrderNumber_(order, 100);
let item = itemList.find( x => x.ordernum === oNum); // let item = itemList.find( x => x.ordernum === oNum);
_itemList.push(item!); // _itemList.push(item!);
oNum = getItemOrderNumber_(order, 10); // oNum = getItemOrderNumber_(order, 10);
item = itemList.find( x => x.ordernum === oNum); // item = itemList.find( x => x.ordernum === oNum);
_itemList.push(item!); // _itemList.push(item!);
oNum = getItemOrderNumber_(order, 1); // oNum = getItemOrderNumber_(order, 1);
item = itemList.find( x => x.ordernum === oNum); // item = itemList.find( x => x.ordernum === oNum);
_itemList.push(item!); // _itemList.push(item!);
setItemList(_itemList); // setItemList(_itemList);
} // }
const onChangeWidth = (e: ChangeEvent<HTMLInputElement> ) => // const onChangeWidth = (e: ChangeEvent<HTMLInputElement> ) =>
{ // {
setWidth(parseInt(e.target.value)/10 ? parseInt(e.target.value)/10 : 0); // setWidth(parseInt(e.target.value)/10 ? parseInt(e.target.value)/10 : 0);
} // }
const onChangeHeight = (e: ChangeEvent<HTMLInputElement> ) => // const onChangeHeight = (e: ChangeEvent<HTMLInputElement> ) =>
{ // {
setHeight(parseInt(e.target.value)/10 ? parseInt(e.target.value)/10 : 0); // setHeight(parseInt(e.target.value)/10 ? parseInt(e.target.value)/10 : 0);
} // }
const onChangeFontSize = (e: ChangeEvent<HTMLInputElement> ) => // const onChangeFontSize = (e: ChangeEvent<HTMLInputElement> ) =>
{ // {
setFontSize(parseInt(e.target.value) ? parseInt(e.target.value) : 0); // setFontSize(parseInt(e.target.value) ? parseInt(e.target.value) : 0);
} // }
if(user && dog.success === undefined) // if(user && dog.success === undefined)
{ // {
Axios.post<ResponseT>('getDog.php', // Axios.post<ResponseT>('getDog.php',
{ // {
qr_id: user.qr_id // qr_id: user.qr_id
}) // })
.then((resDog) => // .then((resDog) =>
{ // {
let locDog: DogT = resDog.data.data; // let locDog: DogT = resDog.data.data;
setDog(resDog.data); // ResponseT // setDog(resDog.data); // ResponseT
setWidth(locDog.qr_width_cm); // setWidth(locDog.qr_width_cm);
setHeight(locDog.qr_height_cm); // setHeight(locDog.qr_height_cm);
setFontSize(locDog.qr_fontsize); // setFontSize(locDog.qr_fontsize);
setVisibleItem(locDog.qr_visible_items); // setVisibleItem(locDog.qr_visible_items);
setItemOrder(locDog.qr_item_sequence); // setItemOrder(locDog.qr_item_sequence);
OrderItemList(locDog.qr_item_sequence); // OrderItemList(locDog.qr_item_sequence);
}) // })
.catch((err) => console.error(err)); // .catch((err) => console.error(err));
} // }
return ( return (
<> <>
{user && dog.data && {/* {user && dog.data &&
<div> <div>
<h1>Qr-Code Druck</h1> <h1>Qr-Code Druck</h1>
<Link to={"/profil"}>Zurück zum Profil</Link> <Link to={"/profil"}>Zurück zum Profil</Link>
<div className='qrSettings____'> <div className='qrSettings____'>
<div className='qrSettings'> <div className='qrSettings'>
<div> <div>
<div>Anhänger</div> <div>Anhänger</div>
<label htmlFor='width'>Breite [mm] </label> <label htmlFor='width'>Breite [mm] </label>
<input className='qr-input' type='number' id='width' name='width' <input className='qr-input' type='number' id='width' name='width'
min="1" max="100" min="1" max="100"
onChange={onChangeWidth} value={width*10}/> onChange={onChangeWidth} value={width*10}/>
<label htmlFor='height'>Höhe [mm] </label> <label htmlFor='height'>Höhe [mm] </label>
<input className='qr-input' type='number' id='height' name='height' <input className='qr-input' type='number' id='height' name='height'
min="1" max="100" min="1" max="100"
onChange={onChangeHeight} value={height*10}/> onChange={onChangeHeight} value={height*10}/>
</div> </div>
<div> <div>
<label htmlFor='fontSize'>Schriftgröße </label> <label htmlFor='fontSize'>Schriftgröße </label>
<input className='qr-input' type='number' id='fontSize' name='fontSize' <input className='qr-input' type='number' id='fontSize' name='fontSize'
min="1" max="200" min="1" max="200"
onChange={onChangeFontSize} value={fontSize} /> onChange={onChangeFontSize} value={fontSize} />
</div> </div>
<div> <div>
<div>Sichtbare Elemente</div> <div>Sichtbare Elemente</div>
<Checkbox <Checkbox
id='name' id='name'
label={'Name'} label={'Name'}
checked={(visibleItem & 0b100) > 0} checked={(visibleItem & 0b100) > 0}
changeEvent={checkBoxChange} changeEvent={checkBoxChange}
/> />
<Checkbox <Checkbox
id='phone' id='phone'
label={'Telefon'} label={'Telefon'}
checked={(visibleItem & 0b010) > 0} checked={(visibleItem & 0b010) > 0}
changeEvent={checkBoxChange} changeEvent={checkBoxChange}
/> />
<Checkbox <Checkbox
id='email' id='email'
label={'Email'} label={'Email'}
checked={(visibleItem & 0b001) > 0} checked={(visibleItem & 0b001) > 0}
changeEvent={checkBoxChange} changeEvent={checkBoxChange}
/> />
</div> </div>
<div> <div>
<div>Reihenfolge</div> <div>Reihenfolge</div>
<div className='beschreibung'>Ändern durch Drag'n Drop</div> <div className='beschreibung'>Ändern durch Drag'n Drop</div>
<div className="list-container"> <div className="list-container">
{itemList.map((item, index) => ( {itemList.map((item, index) => (
<div <div
key={index} key={index}
className="list-item" className="list-item"
draggable draggable
onDragStart={(e) => {dragItem.current = index; /* console.log('onDragStart index: ' + index); */}} onDragStart={(e) => {dragItem.current = index; }}
onDragEnter={(e) => {dragOverItem.current = index; /* console.log('onDragEnter index: ' + index); */}} onDragEnter={(e) => {dragOverItem.current = index; }}
onDragEnd={handleSort} onDragEnd={handleSort}
onDragOver={(e) => {e.preventDefault(); /* console.log('onDragEnter index: ' + index); */}} onDragOver={(e) => {e.preventDefault(); }}
> >
<li>{item.name}</li> <li>{item.name}</li>
</div> </div>
))} ))}
</div> </div>
</div> </div>
</div> </div>
<div className='column'> <div className='column'>
<button id="saveButton" className='saveButton' onClick={saveHandler} >Werte sichern</button> <button id="saveButton" className='saveButton' onClick={saveHandler} >Werte sichern</button>
<button id="printButton" className='printButton' onClick={printHandler} >QR-Code drucken</button> <button id="printButton" className='printButton' onClick={printHandler} >QR-Code drucken</button>
{successMsg !== "false" && <div className="success-msg">{successMsg}</div>} {successMsg !== "false" && <div className="success-msg">{successMsg}</div>}
{errMsg !== "false" && <div className="err-msg">{errMsg}</div>} {errMsg !== "false" && <div className="err-msg">{errMsg}</div>}
</div> </div>
</div> </div>
<div className='blockRepeat'> <div className='blockRepeat'>
{oneQrBlock()} {oneQrBlock()}
{oneQrBlock()} {oneQrBlock()}
{oneQrBlock()} {oneQrBlock()}
{oneQrBlock()} {oneQrBlock()}
{oneQrBlock()} {oneQrBlock()}
{oneQrBlock()} {oneQrBlock()}
</div> </div>
</div> } </div> }
{ !dog.data && !user && { !dog.data && !user &&
<> <>
<h1>Qr-Code Druck</h1> <h1>Qr-Code Druck</h1>
<div>nothing</div> <div>nothing</div>
</> </>
} } */}
</> </>
) );
} }

134
src/components/Register.tsx
View File

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

14
src/services/PhpApi.ts
View File

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